/* Variables y reset básicos */ :root { --primary-blue: #0f3a55; --primary-purple: #6366f1; --white: #ffffff; --text-dark: #1e293b; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-dark); background: var(--white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Hero simple limpio y bien acomodado */ .hero-simple { padding: 60px 0; background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%); } .hero-simple .container { display: flex; align-items: center; justify-content: center; } .hero-simple-content { text-align: center; max-width: 900px; } .hero-title { font-size: 2.4rem; font-weight: 900; color: var(--primary-blue); margin-bottom: 10px; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .hero-subtitle { font-size: 1.1rem; color: #334155; line-height: 1.6; opacity: .95; } /* Ajuste de separación entre hero y sección de servicios */ .services-buttons { margin-top: 0; } /* Banda superior (cintillo) con simetría */ .top-bar { background: var(--primary-blue); color: var(--white); padding: 8px 0; } .top-bar .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .topbar-left { justify-self: start; } topbar-center { justify-self: center; } .topbar-right { justify-self: end; } .topbar-location, .topbar-open { color: var(--white); } .btn-top-register { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-blue); color: #4c2ad1; padding: 6px 18px; border-radius: 999px; font-weight: 800; border: 2px solid #ffffff; text-decoration: none; } /* Insignia circular con la inicial del usuario */ .user-initial { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #ffffff; color: var(--primary-blue); font-weight: 800; border: 2px solid #ffffff; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .user-initial:hover { background: #eef2ff; color: #4c2ad1; } /* Navegación principal con simetría y banda blanca detrás */ .main-nav { position: relative; background: transparent; padding: 10px 0; } .main-nav::before { content: ''; position: absolute; inset: 0; background: var(--white); transform: scaleY(0.66); transform-origin: top; z-index: 0; } .nav-content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 1; } .logo { grid-column: 1; justify-self: start; } .logo img { height: 140px; width: auto; } .nav-menu { display: flex; list-style: none; gap: 32px; align-items: center; justify-self: center; } .nav-menu > li { position: relative; } .nav-menu > li > a { text-decoration: none; color: var(--text-dark); font-weight: 700; font-size: 0.95rem; padding: 10px 0; text-transform: uppercase; letter-spacing: 0.6px; } .nav-menu > li > a:hover { color: #4285f4; } .nav-contact .btn-contact { background: var(--primary-blue); color: var(--white); padding: 6px 12px; font-size: .88rem; border-radius: 999px; text-decoration: none; } /* Evitar que el botón de contacto se salga del marco */ .nav-contact .btn-contact { margin-left: 0; } @media (max-width: 768px) { .nav-contact .btn-contact { margin-left: 0; } } /* Footer combinado con simetría */ .footer { background: linear-gradient(180deg, #0f3a55 0%, #0c2b40 100%); color: #fff; padding: 40px 0 0; } .footer-combined { display: flex; flex-direction: column; gap: 28px; } .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.15); } .footer-brand { display: flex; align-items: center; gap: 14px; } .footer-logo-img { width: 120px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2)); } .footer-site-name { font-weight: 800; margin: 0; letter-spacing: .5px; } .footer-tagline { margin: 2px 0 8px; opacity: .9; } .footer-address { margin-top: 8px; } .footer-address p { margin: 6px 0; } .footer-phone a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .footer-quick-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; justify-content: center; } .footer-quick-links a { color: #fff; text-decoration: underline; } .footer-mid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; } .footer-nav a { color: #fff; text-decoration: none; font-size: 0.92rem; font-weight: 600; line-height: 1.2; opacity: 0.9; } .footer-email h4, .footer-payments h4, .footer-social h4 { margin: 0 0 8px; font-weight: 700; } .payment-icons { display: flex; gap: 12px; font-size: 28px; } .social-icons { display: flex; gap: 12px; font-size: 22px; } .social-icons a { color: #fff; } .footer-bottom { margin-top: 8px; padding: 14px 0; text-align: center; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.15); } .footer-bottom p { margin: 0; } /* Nuestra ubicación (se mantiene) */ .location-section { padding: 60px 0; background: linear-gradient(180deg, rgba(240,246,255,0.6), rgba(240,246,255,0.2)); } .location-title { font-size: 2.2rem; font-weight: 800; color: #0f3a55; text-align: center; letter-spacing: 1px; margin-bottom: 24px; } .location-content { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: center; } .location-map { width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(15, 58, 85, 0.15); border: 6px solid #ffffff; } .location-map iframe { width: 100%; height: 100%; border: 0; } .location-info { display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; max-width: 420px; margin: 0 auto; padding: 10px 4px; } .location-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #0f3a55; } .location-item i { font-size: 28px; color: #0f3a55; } .location-item a { color: #0f3a55; font-weight: 700; textDecoration: underline; text-underline-offset: 2px; } .location-note { margin-top: 4px; font-size: 0.95rem; color: #1f4b6a; opacity: 0.9; } @media (max-width: 992px) { .location-content { grid-template-columns: 1fr; } .location-map { aspect-ratio: 16 / 12; } } .mision-vision { padding: 60px 0; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); } .mision-vision .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .mision-vision .mv-card { background: #0f3a55; color: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 24px rgba(15,58,85,0.15); } .mision-vision .mv-title { font-size: 2rem; font-weight: 800; letter-spacing: 1px; text-align: center; margin-bottom: 10px; } .mision-vision .mv-text { font-size: 1rem; line-height: 1.7; } @media (max-width: 992px) { .mision-vision .mv-grid { grid-template-columns: 1fr; } } @media (max-width: 992px) { .nav-content { grid-template-columns: 1fr; gap: 12px; } .nav-menu { justify-content: center; flex-wrap: wrap; } .footer-top { grid-template-columns: 1fr; } .footer-mid { grid-template-columns: 1fr 1fr; } .footer-nav ul { justify-content: center; } } @media (max-width: 600px) { .footer-mid { grid-template-columns: 1fr; } .footer-nav ul { gap: 10px; } .nav-menu { gap: 16px; } } /* CLÍNICA */ .clinica-section { padding: 70px 0; background: #ffffff; } .clinica-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .clinica-title { font-size: 2.6rem; font-weight: 900; color: var(--primary-blue); letter-spacing: 1px; margin-bottom: 14px; } .clinica-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .clinica-list li { font-weight: 700; color: #0f3a55; } .clinica-image { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); } @media (max-width: 992px) { .clinica-content { grid-template-columns: 1fr; } .clinica-right { order: -1; } } /* NOSOTROS */ .nosotros-section { position: relative; padding: 90px 0; min-height: 520px; background-color: #0f3a55; background-image: url('../IMAGENES/nosotros%20fondo.jpeg?v=20251010'); background-position: center; background-size: cover; background-repeat: no-repeat; } .nosotros-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,58,85,0.68) 0%, rgba(15,58,85,0.42) 35%, rgba(15,58,85,0.52) 65%, rgba(15,58,85,0.72) 100%) !important; } .nosotros-section .container { position: relative; z-index: 1; } .nosotros-title { font-size: 5.6rem; font-weight: 900; color: #ffffff; letter-spacing: 2px; text-transform: uppercase; line-height: 1; } .nosotros-text-block { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; position: relative; padding: 26px; border: 2.5px solid rgba(255,255,255,0.85); border-radius: 18px; background: rgba(10,34,52,0.45); box-shadow: 0 12px 28px rgba(0,0,0,0.35); backdrop-filter: blur(2px); } @media (max-width: 992px) { .nosotros-title { font-size: 3.4rem; text-align: left; } .nosotros-text-block { padding: 18px; border-width: 2px; } } @media (max-width: 576px) { .nosotros-title { font-size: 2.7rem; } } .nosotros-divider { position: relative; width: 4px; background: #ffffff; border-radius: 2px; height: 100%; min-height: 240px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; } .nosotros-divider::before, .nosotros-divider::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; } .nosotros-divider::before { top: -14px; border-bottom: 14px solid #ffffff; } .nosotros-divider::after { bottom: -14px; border-top: 14px solid #ffffff; } .nosotros-copy { color: #ffffff; font-size: 1.12rem; line-height: 1.8; text-shadow: 0 2px 6px rgba(0,0,0,0.35); } /* Responsivo Nosotros */ @media (max-width: 992px) { /* Ajuste base NOSOTROS (fuera de media queries) */ .nosotros-content { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 30px; } .nosotros-title { color: #ffffff !important; } .nosotros-title { font-size: 3.4rem; text-align: left; } .nosotros-divider { min-height: 180px; } .nosotros-text-block { padding: 18px; border-width: 1.6px; } } @media (max-width: 576px) { .nosotros-title { font-size: 2.7rem; } .nosotros-copy { font-size: 1rem; } } .nav-menu > li.has-submenu.open > .submenu { display: block; } /* ========================== Membresías (hero + tarjetas + tablas) ========================== */ .memberships-hero { position: relative; padding: clamp(60px, 10vw, 120px) 0; background: linear-gradient(135deg, rgba(106,53,221,0.8), rgba(37,99,235,0.65)), url('../IMAGENES/fondo%20de%20membresias.jpg') center/cover no-repeat; isolation: isolate; } .memberships-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.16)); z-index: 0; } .memberships-hero .container { position: relative; z-index: 1; } .memberships-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; color: #fff; letter-spacing: 0.5px; } .memberships-subtitle { margin-top: 10px; color: #eef; max-width: 720px; } .memberships-plans { padding: 56px 0; } .membership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .membership-card { border-radius: 18px; padding: 24px 22px 28px; background: rgba(255,255,255,0.75); box-shadow: 0 10px 30px rgba(0,0,0,0.08); backdrop-filter: blur(6px) saturate(1.1); transform-origin: center; transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; } .membership-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,0.12); } .membership-card .plan-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 12px; } .plan-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .2px; } .plan-price { font-size: 2.2rem; font-weight: 800; color: var(--plan-color); } .plan-price span { font-size: .9rem; font-weight: 600; opacity:.8; margin-left: 4px; } .plan-benefits { list-style:none; padding:0; margin: 16px 0 22px; } .plan-benefits li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; color:#222; } .plan-benefits i { color: var(--plan-color); padding-top: 2px; } .plan-btn { display:inline-block; border:none; border-radius: 999px; padding: 10px 20px; color:#fff; font-weight:700; letter-spacing:.4px; text-decoration:none; box-shadow: 0 8px 24px rgba(0,0,0,.12); } /* Variantes por plan */ .membership-card.basic { --plan-color:#f59e0b; background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.04)), rgba(255,255,255,.7); } .plan-btn-basic { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .membership-card.plus { --plan-color:#2563eb; background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.04)), rgba(255,255,255,.7); } .plan-btn-plus { background: linear-gradient(90deg, #2563eb, #3b82f6); } .membership-card.total { --plan-color:#6a35dd; background: linear-gradient(180deg, rgba(106,53,221,.14), rgba(106,53,221,.05)), rgba(255,255,255,.7); } .plan-btn-total { background: linear-gradient(90deg, #6a35dd, #8b5cf6); } /* Aparición en scroll */ .fade-in { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(2px); transition: opacity .5s ease, transform .6s ease, filter .6s ease; } .fade-in.visible { opacity: 1; transform: none; filter: none; } /* Tablas de precios */ .pricing-section { padding: 56px 0; } .pricing-title { font-family:'Playfair Display', serif; font-weight:800; letter-spacing:.6px; text-align:center; color:#1f2937; } .pricing-subtitle { text-align:center; color:#6b7280; margin-top: 6px; } .pricing-table-wrapper { margin-top: 22px; } .pricing-table { width:100%; border-collapse: collapse; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,.08); background:#fff; } .pricing-table thead th { padding:14px 12px; color:#fff; font-weight:700; text-align:left; } .pricing-table tbody td { padding:12px 12px; border-top: 1px solid #eef2f7; } .pricing-table tbody tr:hover { background: #f8fafc; } /* Colores por tabla */ .pricing-basic thead { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .pricing-plus thead { background: linear-gradient(90deg, #2563eb, #3b82f6); } .pricing-total thead { background: linear-gradient(90deg, #6a35dd, #8b5cf6); } /* Responsivo */ @media (max-width: 992px) { .membership-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .membership-grid { grid-template-columns: 1fr; } .plan-price { font-size: 1.9rem; } } /* Opcional: indicador visual cuando el item está abierto */ .nav-menu > li.has-submenu.open > a { color: #4285f4; } .nav-menu > li.has-submenu .submenu { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-radius: 8px; padding: 10px 12px; min-width: 260px; z-index: 1000; list-style: disc; list-style-position: outside; padding-left: 20px; border-left: 2px solid #cfe3ff; } .nav-menu > li.has-submenu .submenu li { white-space: nowrap; } .nav-menu > li.has-submenu .submenu a { display: block; padding: 6px 10px; color: #1a73e8; font-weight: 600; text-decoration: underline; } .nav-menu > li.has-submenu .submenu a:visited { color: #1a73e8; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } .nav-menu > li.has-submenu .submenu a:hover { color: #4285f4; background: rgba(66,133,244,0.08); border-radius: 6px; } /* Hero Modern esencial */ .hero-modern { position: relative; padding: 70px 0; min-height: 500px; overflow: hidden; background: #0f3a55; } /* Fondo del hero más visible */ .hero-background { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; filter: saturate(1.05) contrast(1.02); z-index: 0; opacity: 1; } /* Overlay más ligero para que se aprecie la imagen de fondo */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,46,76,.65) 0%, rgba(14,46,76,.48) 35%, rgba(14,46,76,.24) 65%, rgba(14,46,76,0) 100%); z-index: 1; } .hero-modern .container { position: relative; z-index: 2; } /* Línea de Ofertas reutilizable (similar a SPA) */ .hero-modern .offers-line { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: stretch; } .hero-modern .offers-line .breaking-label { background: #e11d48; color: #fff; font-weight: 800; letter-spacing: .6px; padding: 8px 12px; font-size: .92rem; border-bottom-left-radius: 8px; border-right: 1px solid rgba(255,255,255,.9); } .hero-modern .offers-line .ticker { background: rgba(255,255,255,.96); color: #0f172a; overflow: hidden; } .hero-modern .offers-line .ticker-content { display: inline-block; white-space: nowrap; padding-left: 100%; animation: offersTicker 22s linear infinite; } @keyframes offersTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .hero-content.single-column { display: flex; align-items: center; min-height: 340px; } .hero-text { color: #fff; max-width: 780px; } .hero-main-text { font-family: 'Bebas Neue','Inter',sans-serif; font-weight: 900; font-size: clamp(2.6rem,6vw,5rem); line-height: 1; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 4px 18px rgba(0,0,0,.35); } .hero-subtext { margin-top: 12px; font-size: 1.05rem; color: #e2e8f0; text-shadow: 0 2px 12px rgba(0,0,0,.35); } /* Servicios - rejilla y pills esenciales */ .services-buttons{position:relative;padding:64px 0;background:linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('../IMAGENES/fondo de sevicios.jpg') center/cover no-repeat} .section-title-services { text-align: center; } .section-title-services h2{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;color:#ffffff;letter-spacing:2.4px;margin:0 0 16px;text-transform:uppercase;text-shadow:0 6px 22px rgba(0,0,0,.35)} .service-pill-grid{margin:28px auto;max-width:1280px;display:grid;grid-template-columns:repeat(2,minmax(340px,1fr));gap:20px} /* Responsivo: 2 columnas en tablets, 1 en móviles */ @media (max-width: 992px){.service-pill-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}} @media (max-width: 600px){.service-pill-grid{grid-template-columns:repeat(2,minmax(200px,1fr))}} .service-pill{display:flex;align-items:center;gap:16px;padding:14px 36px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(15,58,85,.16);transition:transform .2s ease,box-shadow .2s ease} .service-pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.12)} .pill-avatar{width:60px;height:60px;flex-shrink:0;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.85);background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22)} .pill-avatar img{width:100%;height:100%;object-fit:cover} .pill-label{font-weight:800;letter-spacing:.35px;font-size:clamp(1rem,2vw,1.6rem)} /* Colores explícitos para pills claras y oscuras */ .service-pill.light{background:#ffffff;color:#0f3a55;border:1px solid rgba(15,58,85,.08)} .service-pill.dark{background:#123a56;color:#ffffff} /* Limitar a exactamente 6 pills visibles (2 filas de 3) */ .service-pill-grid .service-pill:nth-child(n+7){display:none} /* Asegurar que el header y su submenu no bloqueen clics cuando están cerrados */ .header{position:relative;z-index:1500} .nav-menu > li.has-submenu .submenu{z-index:1600} /* Animaciones base reutilizables */ .fade-in { opacity: 0; transform: translateY(16px); filter: blur(2px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; } .visible { opacity: 1; transform: translateY(0); filter: none; } /* Cancelar animación base en secciones con fondos personalizados */ .farmacia-bg.fade-in, .urgencias-bg.fade-in, .rayosx-bg.fade-in, .espirometria-bg.fade-in, .ambulancia-bg.fade-in, .audiometria-bg.fade-in, .consultas-bg.fade-in { opacity: 1 !important; filter: none !important; transform: none !important; } /* Animación para elementos que aparecen en scroll (pills y secciones) */ .fade-in-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; } .fade-in-on-scroll.visible { opacity: 1; transform: none; } .fade-in-on-scroll-strong { transform: translateY(18px) scale(.98); } .fade-in-on-scroll-strong.visible { transform: none; } /* Secciones de clínica más presentables */ .clinic-section:not(.farmacia-bg):not(.urgencias-bg):not(.rayosx-bg):not(.espirometria-bg):not(.ambulancia-bg):not(.audiometria-bg):not(.consultas-bg) { padding: 0 !important; background: none !important; } .clinic-section:nth-of-type(even):not(.farmacia-bg):not(.urgencias-bg):not(.rayosx-bg):not(.espirometria-bg):not(.ambulancia-bg):not(.audiometria-bg):not(.consultas-bg) { background: none !important; } .clinic-section .container { position: relative; } .section-title h2 { font-size: 1.6rem; font-weight: 900; color: var(--primary-blue); letter-spacing: 1px; margin: 0; position: relative; } .section-title h2::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 80px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #1a73e8, #6366f1); } .clinic-section .service-content { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 10px; align-items: center; } .clinic-section .service-image { width: 100%; border-radius: 16px; object-fit: cover; max-height: 220px; box-shadow: 0 6px 18px rgba(0,0,0,.10); border: 4px solid #ffffff; transition: transform .25s ease, box-shadow .25s ease; grid-column: 1; } .clinic-section .service-image:hover { transform: scale(1.01); box-shadow: 0 10px 24px rgba(0,0,0,.16); } .clinic-section .service-text { background: #ffffff; border: 1px solid rgba(15,58,85,.08); border-radius: 14px; padding: 12px; box-shadow: 0 8px 18px rgba(15,58,85,0.08); color: var(--text-dark); grid-column: 2; } .clinic-section { margin: 0 !important; padding: 0 !important; display: flow-root; } /* Alternar orden para mayor dinamismo */ .clinic-section:nth-of-type(even) .service-content { grid-template-columns: 0.95fr 1.05fr; } .clinic-section:nth-of-type(even) .service-image { grid-column: 2; } .clinic-section:nth-of-type(even) .service-text { grid-column: 1; } /* Responsivo */ @media (max-width: 992px) { .clinic-section .service-content { grid-template-columns: 1fr; } .clinic-section .service-image, .clinic-section .service-text { order: initial; grid-column: auto; } } /* Ajustes de tamaño para la sección Consultas: más compacta */ #consultas.clinic-section { padding: 40px 0; } #consultas .section-title h2 { font-size: 1.8rem; margin-bottom: 8px; } #consultas .service-content { grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; } #consultas .service-image { max-height: 300px; border-width: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.10); } #consultas .service-text { padding: 14px; font-size: 0.98rem; line-height: 1.6; } @media (max-width: 992px) { #consultas.clinic-section { padding: 32px 0; } #consultas .section-title h2 { font-size: 1.6rem; } #consultas .service-image { max-height: 220px; } #consultas .service-content { gap: 12px; } /* En móviles, forzar una sola columna en espirometría y audiometría */ #espirometria .service-content, #audiometria .service-content { grid-template-columns: 1fr; } #espirometria .service-image, #espirometria .service-text, #audiometria .service-image, #audiometria .service-text { grid-column: auto; } } /* Ajustes de orden para espirometría y audiometría: imagen izquierda, texto derecha en escritorio */ #espirometria .service-content { grid-template-columns: 1.05fr 0.95fr; } #espirometria .service-image { grid-column: 1; } #espirometria .service-text { grid-column: 2; } #audiometria .service-content { grid-template-columns: 1.05fr 0.95fr; } #audiometria .service-image { grid-column: 1; } #audiometria .service-text { grid-column: 2; } .consultas-bg { position: relative; background: url('../IMAGENES/fondo de consulta.jpg') center/cover no-repeat !important; } .consultas-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .consultas-bg .container { position: relative; z-index: 1; } .consultas-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } /* Fondos por sección de clínica */ .consultas-adomicilio-bg{position: relative; background:url('../IMAGENES/Consultas%20m%C3%A9dicas%20a%20domicilio.webp')center/cover no-repeat !important; } .consultas-adomicilio-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .consultas-adomicilio-bg .container { position: relative; z-index: 1; } .consultas-adomicilio-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .farmacia-bg { position: relative; background: url('../IMAGENES/fondo%20de%20farmacia.jpg') center/cover no-repeat !important; } .farmacia-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .farmacia-bg .container { position: relative; z-index: 1; } .farmacia-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .urgencias-bg { position: relative; background: url('../IMAGENES/fondo%20de%20urgencias.jpg') center/cover no-repeat !important; } .urgencias-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .urgencias-bg .container { position: relative; z-index: 1; } .urgencias-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .rayosx-bg { position: relative; background: url('../IMAGENES/fondo%20de%20radiografias.webp') center/cover no-repeat !important; } .rayosx-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .rayosx-bg .container { position: relative; z-index: 1; } .rayosx-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .espirometria-bg { position: relative; background: url('../IMAGENES/fondo%20de%20espirometria.jpg') center/cover no-repeat !important; } .espirometria-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .espirometria-bg .container { position: relative; z-index: 1; } .espirometria-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .ambulancia-bg { position: relative; background: url('../IMAGENES/fondo%20de%20abulancia.jpeg') center/cover no-repeat !important; } .ambulancia-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .ambulancia-bg .container { position: relative; z-index: 1; } .ambulancia-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .audiometria-bg { position: relative; background: url('../IMAGENES/fondo%20de%20audiometria.jpg') center/cover no-repeat !important; } .audiometria-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .audiometria-bg .container { position: relative; z-index: 1; } .audiometria-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .clinica-bg { position: relative; background: url('../IMAGENES/fondo%20de%20clinica.jpg') center/cover no-repeat !important; } .clinica-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(10,31,56,0.45) 100%); pointer-events: none; } .clinica-bg .container { position: relative; z-index: 1; } .clinica-bg .section-title h2 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } /* Tarjetas y medios: estilos especiales sobre fondos con imagen */ .consultas-bg .service-text, .consultas-adomicilio-bg .service-text, .urgencias-bg .service-text, .rayosx-bg .service-text, .laboratorio-bg .service-text, .laboratorio-adomicilio-bg .service-text, .antidoping-bg .service-text, .farmacia-bg .service-text, .electrocardiograma-bg .service-text, .ambulancia-bg .service-text, .sueroterapia-bg .service-text, .espirometria-bg .service-text, .audiometria-bg .service-text { background: rgba(15, 58, 85, 0.20); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.18); } .consultas-bg .service-text p, .consultas-adomicilio-bg .service-text p, .urgencias-bg .service-text P, .rayosx-bg .service-text P, .laboratorio-bg .service-text, .laboratorio-adomicilio-bg .service-text p, .antidoping-bg .service-text p, .farmacia-bg .service-text p, .electrocardiograma-bg .service-text p, .ambulancia-bg .service-text p, .sueroterapia-bg .service-text p, .espirometria-bg .service-text p, .audiometria-bg .service-text p { color: #eef3f8; } .consultas-bg .service-image, .consultas-adomicilio-bg .service-image, .urgencias-bg .service-image, .rayosx-bg .service-image, .laboratorio-bg .service-image, .laboratorio-adomicilio-bg .service-image, .antidoping-bg .service-image, .farmacia-bg .service-image, .electrocardiograma-bg .service-image, .ambulancia-bg .service-image, .sueroterapia-bg .service-image, .espirometria-bg .service-image, .audiometria-bg .service-image { border: 2px solid rgba(255,255,255,0.65); box-shadow: 0 8px 22px rgba(0,0,0,0.26); } /* En pantallas pequeñas, ajustar contraste y espaciado */ @media (max-width: 768px) { .consultas-bg .service-text, .consultas-adomicilio-bg .service-text, .urgencias-bg .service-text, .rayosx-bg .service-text, .laboratorio-bg .service-text, .laboratorio-adomicilio-bg .service-text, .antidoping-bg .service-text, .farmacia-bg .service-text, .electrocardiograma-bg .service-text, .ambulancia-bg .service-text, .sueroterapia-bg .service-text, .espirometria-bg .service-text, .audiometria-bg .service-text { background: rgba(15, 58, 85, 0.24); } } /* Forzar que los fondos personalizados tengan prioridad sobre gradientes base */ .consultas-bg, .consultas-adomicilio-bg, .urgencias-bg, .rayosx-bg, .laboratorio-bg, .laboratorio-adomicilio-bg, .antidoping-bg, .farmacia-bg, .electrocardiograma-bg, .ambulancia-bg, .sueroterapia-bg, .espirometria-bg .service-text, .audiometria-bg { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Nueva Clínica (hero + grid de servicios) */ .clinic-hero { position: relative; min-height: 58vh; display: flex; align-items: center; background: url('../IMAGENES/fondo de sevicios.jpg') center/cover no-repeat; } .clinic-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,10,25,0.35) 0%, rgba(5,10,25,0.22) 44%, rgba(5,10,25,0.08) 100%); } .clinic-hero .container { position: relative; z-index: 1; } .clinic-hero-content { max-width: 820px; color: #fff; } .clinic-title { font-family: "Playfair Display", serif; font-size: 54px; font-weight: 800; margin: 0 0 14px; } .clinic-subtitle { font-size: 18px; line-height: 1.6; opacity: 0.95; } .clinic-hero-ctas { margin-top: 26px; display: flex; gap: 14px; } /* Botones genéricos reutilizables */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: all .25s ease; } .btn.primary { background: #0f3a55; color: #fff; } .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,58,85,.35); } .btn.outline { border: 2px solid #fff; color: #fff; } .btn.outline:hover { background: rgba(255,255,255,.15); } /* Sección de servicios */ .clinic-services { padding: 70px 0; background: #f7f9fc; } .clinic-services .section-title h2 { font-family: "Playfair Display", serif; font-size: 40px; margin: 0 0 10px; } .clinic-services .section-title p { color: #4b5563; } .clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; } @media (max-width: 1024px) { .clinic-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .clinic-grid { grid-template-columns: 1fr; } } .clinic-card { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.08); background: #fff; transform: translateY(10px); opacity: 0; animation: fadeInUp .7s ease forwards; } .clinic-card-image { position: relative; height: 200px; background: #000; } .clinic-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .clinic-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.45)); } .clinic-card-content { padding: 18px; } .clinic-card-title { font-weight: 800; font-size: 20px; color: var(--accent,#0f3a55); margin: 0 0 6px; } .clinic-card-copy { color: #374151; margin-bottom: 12px; } .clinic-card-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none; background: var(--accent,#0f3a55); color:#fff; } .clinic-card-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); } /* Listas dentro de tarjetas más largas */ .clinic-card-content ul { margin: 8px 0 0; padding-left: 18px; } .clinic-card-content li { margin: 4px 0; color: #374151; } /* Ajustes para tarjetas con mucho contenido */ .clinic-card { align-self: start; } .clinic-card-title { font-size: 22px; } .clinic-card-copy { font-size: 15px; line-height: 1.6; } /* Destacados */ .clinic-highlights { padding: 60px 0; background: #fff; } .highlights-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .highlight-card { background: #f7f9fc; border-radius: 14px; padding: 20px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.06); } .highlight-card i { font-size: 26px; color: #0f3a55; } .highlight-card h4 { margin: 8px 0 4px; font-size: 18px; } .highlight-card p { color: #6b7280; } @media (max-width: 780px) { .highlights-grid { grid-template-columns: 1fr; } } /* Animaciones reutilizadas */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { opacity: 0; transform: translateY(10px); animation: fadeInUp .8s ease forwards; } /* ===== ESPECIALIDADES ===== */ .specialties-intro .intro-block { text-align: center; max-width: 800px; margin: 0 auto; padding: 16px; } .specialties-list .section-title h2, .specialists-section .section-title h2 { text-align: center; } .specialties-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; } .specialty-card { background: #ffffff; border: 1px solid rgba(15,58,85,.08); border-radius: 14px; padding: 16px; box-shadow: 0 8px 18px rgba(15,58,85,0.08); color: var(--text-dark); text-align: center; will-change: transform, opacity; } .specialty-card .card-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-grid; place-items: center; margin: 0 auto 10px; background: rgba(66,133,244,0.12); color: #4285f4; } .specialty-card h3 { font-size: 1.1rem; margin: 6px 0 6px; } .specialty-card p { font-size: 0.95rem; color: #324f66; } .specialty-card:hover { transform: translateY(-4px); } /* Variantes con fondo por especialidad */ .specialty-card.photo { position: relative; color: #fff; border: 1px solid rgba(255,255,255,0.35); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 8px 18px rgba(15,58,85,0.18); } .specialty-card.photo h3 { color: #fff; } .specialty-card.photo p { color: #e6eef6; } .specialty-card.photo .card-icon { background: rgba(255,255,255,0.22); color: #fff; } .specialty-card.clickable { cursor: pointer; } .specialty-card .dental-list { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease; } .specialty-card[aria-expanded="true"] .dental-list { max-height: 420px; opacity: 1; } .specialty-card .dental-chip { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.24); color: #fff; font-size: 0.85rem; text-align: center; border: 1px solid rgba(255,255,255,0.32); } .specialty-traumatologo.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/fondo traumatologo.jpg') center/cover no-repeat; } .specialty-cirujano.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/fondo Mdico cirujano.webp') center/cover no-repeat; } .specialty-laboral.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/fondo Mdico laboral.jpg') center/cover no-repeat; } .specialty-urgenciologo.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/Fondo Urgencilogo.jpg') center/cover no-repeat; } .specialty-pediatra.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/Fondo Pediatra.jpg') center/cover no-repeat; } .specialty-ginecologo.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/Fondo Gineclogo.jpeg') center/cover no-repeat; } .specialty-psicologo.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/Fondo Psiclogo.jpg') center/cover no-repeat; } .specialty-nutriologo.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/Fondo Nutrilogo.jpg') center/cover no-repeat; } .specialty-dental.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/fondo dental.jpg') center/cover no-repeat; } .specialty-rehabilitacion.photo { background: linear-gradient(rgba(99,102,241,.50), rgba(99,102,241,.50)), url('../IMAGENES/reabilitacdion fondo.webp') center/cover no-repeat; } @media (max-width: 640px) { .specialty-card .dental-list { grid-template-columns: 1fr; } } /* Hero Especialidades: fondo e información a la derecha */ .hero-especialidades { position: relative; padding: 70px 0; background: image-set(url('../IMAGENES/fondo de especialistas.avif') type('image/avif'), url('../IMAGENES/fondo especialistas.jpg') type('image/jpeg')) left center/cover no-repeat; } .hero-especialidades::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,58,85,.52) 0%, rgba(15,58,85,.36) 40%, rgba(99,102,241,.28) 60%, rgba(99,102,241,.48) 100%); } .hero-especialidades .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .hero-especialidades .hero-simple-content { grid-column: 2; text-align: right; max-width: none; } .hero-especialidades .hero-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); } .hero-especialidades .hero-subtitle { color: #e2e8f0; } @media (max-width: 768px) { .hero-especialidades .container { grid-template-columns: 1fr; } .hero-especialidades .hero-simple-content { grid-column: 1; text-align: right; } } /* Banner pequeño y discreto de ofertas (Inicio) */ .offers-banner { padding: 8px 0; background: rgba(15,58,85,0.06); border-top: 1px solid rgba(15,58,85,0.08); border-bottom: 1px solid rgba(15,58,85,0.08); } .offers-banner .offers-content { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.92rem; color: #324f66; } .offers-banner .offers-label { background: #0f3a55; color: #fff; border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 0.86rem; } .offers-banner .offers-text { opacity: 0.9; } .offers-banner .offers-link { color: var(--primary-purple); text-decoration: none; border: 1px solid rgba(99,102,241,0.35); padding: 2px 8px; border-radius: 8px; font-size: 0.86rem; } .offers-banner .offers-link:hover { background: var(--primary-purple); color: #fff; } .specialists-section { margin-top: 24px; } .specialists-carousel { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scroll-behavior: smooth; } .specialists-carousel::-webkit-scrollbar { display: none; } .specialist-card { min-width: 260px; flex: 0 0 auto; scroll-snap-align: start; background: #ffffff; border: 1px solid rgba(15,58,85,.08); border-radius: 14px; padding: 14px; box-shadow: 0 8px 18px rgba(15,58,85,0.08); text-align: center; } .specialist-card .profile-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin: 4px auto 10px; } .specialist-card h3 { margin: 6px 0; font-size: 1.05rem; } .specialist-card .cedula, .specialist-card .especialidad, .specialist-card .horarios { margin: 2px 0; font-size: 0.92rem; color: #324f66; } /* Controles del carrusel de especialistas */ .specialists-section .carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 8px 0; position: sticky; top: 8px; z-index: 20; } .specialists-section .carousel-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(15,58,85,0.15); background: #ffffff; color: #324f66; box-shadow: 0 4px 12px rgba(15,58,85,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; } .specialists-section .carousel-btn:hover { background: var(--primary-purple); color: #ffffff; border-color: var(--primary-purple); transform: translateY(-1px); } .specialists-section .carousel-btn:active { transform: translateY(0); } .specialists-section .carousel-btn i { font-size: 0.9rem; } @media (max-width: 640px) { .specialists-section .carousel-controls { justify-content: center; } } @media (max-width: 992px) { .specialties-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .specialties-grid { grid-template-columns: 1fr; } } /* Acentos morados en títulos de sección (Especialidades y Especialistas) */ .specialties-list .section-title h2, .specialists-section .section-title h2 { color: var(--primary-purple); position: relative; } .specialties-list .section-title h2::after, .specialists-section .section-title h2::after { content: ''; display: block; width: 68px; height: 4px; border-radius: 999px; margin: 10px auto 0; background: linear-gradient(90deg, rgba(99,102,241,0.9) 0%, rgba(99,102,241,0.45) 100%); } /* Acentos morados en tarjetas con foto y chips */ .specialty-card.photo { border-color: rgba(99,102,241,0.35); box-shadow: 0 10px 22px rgba(99,102,241,0.18); } .specialty-card.photo:hover { box-shadow: 0 16px 34px rgba(99,102,241,0.24); } .specialty-card.photo .card-icon { background: rgba(99,102,241,0.26); color: #fff; border: 1px solid rgba(99,102,241,0.42); } .specialty-card .dental-chip { background: rgba(99,102,241,0.18); border: 1px solid rgba(99,102,241,0.32); } .specialty-card .dental-chip:hover { background: rgba(99,102,241,0.28); } /* Acentos morados en tarjetas de especialistas */ .specialist-card { border-color: rgba(99,102,241,0.22); box-shadow: 0 8px 20px rgba(99,102,241,0.16); } .specialist-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(99,102,241,0.26); } .specialist-card .profile-photo { box-shadow: 0 6px 16px rgba(99,102,241,0.22); border: 2px solid rgba(99,102,241,0.50); } .specialist-card .especialidad { color: #4f46e5; font-weight: 600; } /* Animaciones suaves e interactividad sin brillos */ .clinic-section .service-image, .clinic-section .service-text { will-change: transform, opacity; } .clinic-section .service-text { transition: transform .25s ease; text-align: center; } .clinic-section .service-text p { text-align: inherit; margin: 0 auto; } .clinic-section .service-image:hover { transform: translateY(-3px) scale(1.01); box-shadow: none !important; } .clinic-section .service-text:hover { transform: translateY(-2px); } /* Preparación de aparición */ .clinic-section .pre-animate { opacity: 0; transform: translateY(8px); } /* Animaciones de entrada izquierda/derecha */ .animate-in-left { animation: slideInLeft 500ms ease-out both; } .animate-in-right { animation: slideInRight 500ms ease-out both; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* En móvil, usar una entrada vertical para evitar sobresaltos */ @media (max-width: 992px) { .animate-in-left, .animate-in-right { animation: slideInUp 450ms ease-out both; } @keyframes slideInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } } /* ===================== Acentos Morados Globales ===================== */ /* Botón de registro superior: morado y sombra suave */ .btn-top-register { background: var(--primary-purple); color: #ffffff; box-shadow: 0 4px 10px rgba(99,102,241,0.25); } /* Navegación principal: hover morado y botón contacto morado */ .nav-menu > li > a:hover { color: var(--primary-purple); } /* Botón de CONTACTO mejorado: pill con gradiente y glow */ .nav-contact .btn-contact { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #ffffff; border: 1px solid rgba(255,255,255,0.22); padding: 3px 8px; font-size: .70rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(99,102,241,0.14), inset 0 1px 0 rgba(255,255,255,0.20); text-transform: uppercase; font-weight: 700; letter-spacing: .05px; white-space: nowrap; transition: transform .12s ease, filter .12s ease, box-shadow .2s ease; margin-left: 0; } .nav-contact .btn-contact:hover { filter: brightness(1.06); transform: translateY(-0.5px); box-shadow: 0 6px 12px rgba(99,102,241,0.20), inset 0 1px 0 rgba(255,255,255,0.28); } .nav-contact .btn-contact i { font-size: .72rem; } @media (max-width: 768px) { .nav-contact .btn-contact { font-size: .68rem; padding: 3px 8px; gap: 4px; } } @media (max-width: 768px) { .nav-contact .btn-contact { margin-left: 0; } } .nav-menu > li.has-submenu.open > a { color: var(--primary-purple); } /* Submenú: enlaces morados y hover con tinte morado */ .nav-menu > li.has-submenu .submenu a, .nav-menu > li.has-submenu .submenu a:visited { color: var(--primary-purple); } .nav-menu > li.has-submenu .submenu a:hover { color: var(--primary-purple); background: rgba(99,102,241,0.12); border-radius: 6px; } /* Hero Moderno: overlay MUY ligero para que se vea la foto */ .hero-overlay { background: linear-gradient(90deg, rgba(15,58,85,.10) 0%, rgba(99,102,241,.10) 36%, rgba(99,102,241,.12) 64%, rgba(15,58,85,.16) 100%); } /* Títulos de sección globales: morados y línea decorativa */ .section-title h2 { color: var(--primary-purple); } .section-title h2::after { content: ''; display: block; width: 68px; height: 4px; border-radius: 999px; margin: 10px auto 0; background: linear-gradient(90deg, rgba(99,102,241,0.9) 0%, rgba(99,102,241,0.45) 100%); } /* Servicios: título morado y línea decorativa */ .section-title-services h2 { color: var(--primary-purple); position: relative; } .section-title-services h2::after{ content:''; display:block; width:68px; height:4px; border-radius:999px; margin:10px auto 0; background:linear-gradient(90deg, rgba(99,102,241,0.9) 0%, rgba(99,102,241,0.45) 100%); } /* Iconos de tarjetas: acento morado por defecto */ .specialty-card .card-icon { background: rgba(99,102,241,0.12); color: var(--primary-purple); } /* Overlays de secciones de clínica con tinte morado */ .consultas-bg::before, .farmacia-bg::before, .urgencias-bg::before, .rayosx-bg::before, .espirometria-bg::before, .ambulancia-bg::before, .audiometria-bg::before { background: linear-gradient(180deg, rgba(10,31,56,0.35) 0%, rgba(99,102,241,0.38) 55%, rgba(99,102,241,0.52) 100%); } /* Tarjetas sobre fondos de clínica: fondo con ligero morado */ .farmacia-bg .service-text, .urgencias-bg .service-text, .rayosx-bg .service-text, .espirometria-bg .service-text, .ambulancia-bg .service-text, .audiometria-bg .service-text { background: linear-gradient(180deg, rgba(99,102,241,0.14) 0%, rgba(15,58,85,0.16) 100%); } @media (max-width: 768px) { .farmacia-bg .service-text, .urgencias-bg .service-text, .rayosx-bg .service-text, .espirometria-bg .service-text, .ambulancia-bg .service-text, .antidoping-bg .service-text, .audiometria-bg .service-text { background: linear-gradient(180deg, rgba(99,102,241,0.18) 0%, rgba(15,58,85,0.20) 100%); } } /* ===== EMPRESAS (Atención a empresas) ===== */ .empresas-section { position: relative; padding: 56px 0; background: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(79,70,229,0.06) 100%); } .empresas-section .section-title { text-align: center; margin-bottom: 22px; } .empresas-section .section-title .subtitle { color: #475569; font-weight: 500; font-size: 0.98rem; margin-top: 8px; } .empresas-section .section-title h2 { background: linear-gradient(90deg, #4f46e5, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .6px; font-size: clamp(2rem, 3.6vw, 2.6rem); } .empresas-section::before { content: ""; position: absolute; top: -40px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle at center, rgba(99,102,241,0.16), rgba(99,102,241,0) 60%); filter: blur(4px); pointer-events: none; } .empresas-section::after { content: ""; position: absolute; bottom: -60px; left: -80px; width: 320px; height: 320px; background: radial-gradient(circle at center, rgba(59,130,246,0.14), rgba(59,130,246,0) 62%); filter: blur(6px); pointer-events: none; } .empresas-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } @media (max-width: 992px) { .empresas-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .empresas-grid { grid-template-columns: 1fr; } } .empresa-card { background: #ffffff; border: 1px solid rgba(99,102,241,0.20); border-radius: 14px; padding: 24px; box-shadow: 0 10px 22px rgba(99,102,241,0.10); display: flex; align-items: flex-start; gap: 16px; transition: transform .2s ease, box-shadow .2s ease; min-height: 160px; } .empresa-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(99,102,241,0.18); } .empresa-card .icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; box-shadow: 0 10px 22px rgba(99,102,241,0.34); flex-shrink: 0; } .empresa-card .icon i { font-size: 1.25rem; } /* ========================== Contacto (sección dedicada) ========================== */ .contact-section { position: relative; padding: 52px 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06)); } .contact-wrapper { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; } @media (max-width: 992px) { .contact-wrapper { grid-template-columns: 1fr; } } .contact-title { background: linear-gradient(90deg, #4f46e5, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .6px; font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: 4px; } .contact-subtitle { color: #334155; opacity: .92; margin-bottom: 12px; text-shadow: 0 1px 1px rgba(0,0,0,.06); } .contact-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .contact-item { display: flex; align-items: flex-start; gap: 10px; background: #ffffff; border: 1px solid rgba(99,102,241,0.20); border-radius: 12px; padding: 10px; box-shadow: 0 8px 18px rgba(99,102,241,0.08); } .contact-item i { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; box-shadow: 0 8px 18px rgba(99,102,241,0.28); flex-shrink: 0; font-size: .9rem; } .item-text { display: flex; flex-direction: column; gap: 2px; } .item-label { font-weight: 600; color: #1f2937; } .item-link { color: #1f2937; text-decoration: none; } .item-link:hover { color: #4f46e5; } .contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .btn-contact-action { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; font-size: .78rem; text-decoration: none; } .btn-contact-action.call, .btn-contact-action.email, .btn-contact-action.map { background: #4f46e5; color: #fff; box-shadow: 0 10px 20px rgba(79,70,229,.28); } .btn-contact-action.whatsapp { background: #22c55e; color: #0b3b19; box-shadow: 0 10px 20px rgba(34,197,94,.26); } .btn-contact-action:hover { filter: brightness(1.05); transform: translateY(-1px); transition: transform .12s ease, filter .12s ease; } .btn-contact-action i { font-size: .98rem; } .contact-right { display: flex; } .contact-card { background: #ffffff; border: 1px solid rgba(99,102,241,0.20); border-radius: 14px; padding: 10px; box-shadow: 0 12px 24px rgba(99,102,241,0.12); width: 100%; } .contact-map iframe { width: 100%; min-height: 260px; border: none; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(99,102,241,0.10); } @media (max-width: 640px) { .contact-map iframe { min-height: 220px; } } .empresa-card h3 { font-size: 1.22rem; margin: 0 0 8px; color: #0f172a; } .empresa-card p { font-size: 1.04rem; margin: 0; color: #495057; line-height: 1.6; } /* Beneficios chips */ .empresas-benefits { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 8px 0 24px; } @media (max-width: 992px) { .empresas-benefits { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .empresas-benefits { grid-template-columns: 1fr; } } .benefit-chip { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(59,130,246,0.12)); border: 1px solid rgba(99,102,241,0.22); color: #0f172a; border-radius: 999px; padding: 10px 14px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; box-shadow: 0 6px 18px rgba(99,102,241,0.09); transition: transform .2s ease, box-shadow .2s ease; } .benefit-chip:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99,102,241,0.16); } .benefit-chip .icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4f46e5, #3b82f6); color: #fff; box-shadow: 0 6px 16px rgba(99,102,241,0.30); } /* Hero Empresas */ .hero-empresas { padding: 96px 0; min-height: 380px; color: #fff; position: relative; background: linear-gradient(135deg, rgba(99,102,241,0.58), rgba(59,130,246,0.46)), url("../IMAGENES/fondo de empresas.webp") center center / cover no-repeat; } .hero-empresas .hero-empresas-content { max-width: 980px; } .hero-empresas .hero-empresas-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.5px; font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 0 0 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.28); } .hero-empresas .hero-empresas-subtitle { font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: 0.92; margin-bottom: 16px; transition: opacity .36s ease, transform .36s ease; } .hero-empresas .rotator-fade-out { opacity: 0; transform: translateY(6px); } .hero-empresas .rotator-fade-in { opacity: 1; transform: translateY(0); } /* Rotador mejorado: pill con icono y puntos */ .empresas-rotator { display: inline-flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .rotator-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); border: 1.5px solid rgba(255,255,255,0.65); box-shadow: 0 10px 22px rgba(99,102,241,0.30); } .rotator-pill .pill-text { font-weight: 800; letter-spacing: .2px; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.25); } .pill-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4f46e5, #3b82f6); color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,0.30); } .pill-icon i { font-size: 1rem; } .rotator-dots { display: flex; gap: 6px; align-items: center; } .rotator-dots .dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.6); transition: all .3s ease; } .rotator-dots .dot.active { width: 14px; background: #fff; } .hero-empresas-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero-empresas .btn-empresas.primary { background: linear-gradient(135deg, #4f46e5, #3b82f6); color: #fff; border: none; } .hero-empresas .btn-empresas.primary:hover { filter: brightness(1.05); transform: translateY(-1px); } .hero-empresas .btn-empresas.outline { border: 1.5px solid rgba(255,255,255,0.85); color: #fff; background: transparent; } .hero-empresas .btn-empresas.outline:hover { background: rgba(255,255,255,0.12); } .empresas-cta { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-empresas { padding: 10px 18px; border-radius: 8px; font-weight: 700; letter-spacing: .2px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-empresas.primary { background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; box-shadow: 0 10px 22px rgba(99,102,241,0.30); } .btn-empresas.primary:hover { filter: brightness(1.05); box-shadow: 0 12px 26px rgba(99,102,241,0.40); } .btn-empresas.outline { background: transparent; border: 2px solid rgba(99,102,241,0.6); color: #4f46e5; } .btn-empresas.outline:hover { background: rgba(99,102,241,0.08); } .text-justify, p, .section-title .subtitle, .hero-subtext, .service-text, .empresa-card p, .location-section p, .footer-address p { text-align: justify; text-justify: inter-word; text-align-last: auto; hyphens: auto; } .empresas-section .help-text { color: #64748b; font-size: 0.86rem; text-align: center; margin-top: 8px; }