/* ========================================================= Dr. Carlos Alcántara Noguez — Cirugía Cardiaca Pediátrica Design tokens extraídos de https://avada.website/online-school/ (tipografía, radios, patrones de layout) + color de marca real tomado del logo del cliente (no del sitio de referencia). ========================================================= */ :root{ /* Marca (extraído del logo real, no inventado) */ --color-primary: #005088; /* navy — "carlos alcántara noguez" en el logo */ --color-primary-dark: #003a63; --color-accent: #00c8f8; /* cyan — "dr." en el logo */ --color-accent-dark: #009fc7; --color-whatsapp: #25d366; /* Neutros */ --color-text: #34424a; --color-text-soft: #5c6b73; --color-bg: #ffffff; --color-bg-alt: #f4f9fc; --color-bg-alt-2: #eaf6fd; --color-border: #e1e8ec; /* Tipografía (mismo patrón que el sitio de referencia: una sola familia, variando peso) */ --font-base: "Lexend", Arial, Helvetica, sans-serif; /* Layout */ --radius-btn: 6px; --radius-card: 14px; --container-max: 1240px; --header-h: 118px; /* topbar (teléfono | keyword | nombre) + fila principal */ --header-main-h: 84px; } /* El topbar (teléfono | keyword | nombre) se oculta en móvil — ver regla ".site-topbar{ display:none; }" dentro de "@media (max-width:960px)" más abajo, junto con el ajuste de --header-h para ese mismo rango. */ *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); font-size: 16px; line-height: 1.6; padding-top: var(--header-h); } img{ max-width: 100%; display:block; } a{ color: var(--color-primary); text-decoration:none; } h1,h2,h3,h4{ font-family: var(--font-base); font-weight: 500; color: var(--color-primary); line-height:1.2; margin: 0 0 .5em; } h1{ font-size: clamp(32px, 4.5vw, 52px); letter-spacing: -0.5px; } h2{ font-size: clamp(24px, 3vw, 34px); } h3{ font-size: clamp(18px, 2.2vw, 22px); } p{ margin: 0 0 1em; } ul{ margin:0 0 1em; padding-left: 1.2em; } .container{ max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } section{ padding: 64px 0; } .section-alt{ background: var(--color-bg-alt); } .eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--color-accent-dark); background: var(--color-bg-alt-2); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff; padding:10px 16px; z-index:1000; } .skip-link:focus{ left:8px; top:8px; } /* ---------- Header ---------- */ .site-header{ position: fixed; top:0; left:0; right:0; height: var(--header-h); background: rgba(255,255,255,.99); border-bottom: 1px solid var(--color-border); z-index: 500; transition: box-shadow .2s ease; display:flex; flex-direction:column; } /* Nota: se evita "backdrop-filter"/"filter"/"transform" en .site-header a propósito — cualquiera de esas propiedades crea un containing block nuevo para sus descendientes con position:fixed y rompe el menú móvil de pantalla completa (.main-nav). */ .site-header.is-stuck{ box-shadow: 0 4px 18px rgba(0,40,70,.08); } /* Top header bar — orden fijo Paso 3.1: Teléfono | Keyword | Nombre del negocio. Visible en desktop/tablet; en móvil se oculta (ver "@media (max-width:960px)" más abajo) a pedido de la clienta, para dejar solo logo + hamburguesa. */ .site-topbar{ background: var(--color-primary); color:#fff; flex: none; } .site-topbar .container{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding-top:8px; padding-bottom:8px; } .topbar-item{ margin:0; font-size:12.5px; letter-spacing:.01em; color:#fff; } a.topbar-phone{ color:#fff; font-weight:600; text-decoration:none; } a.topbar-phone:hover{ text-decoration:underline; } .topbar-name{ font-weight:600; } .site-topbar-sep{ opacity:.5; font-size:12px; } @media (max-width:600px){ .topbar-keyword{ display:none; } .site-topbar-sep:nth-of-type(2){ display:none; } } .site-header-row{ display:flex; align-items:center; justify-content:flex-start; height: var(--header-main-h,84px); gap:32px; flex:1 1 auto; } .site-header .logo img{ height: 46px; width:auto; } .main-nav{ display:flex; align-items:center; gap: 8px; } /* Menú en listas anidadas (ul > li) para que BeeDesk lea la jerarquía real. ul/li de primer nivel usan display:contents: los enlaces siguen siendo hijos flex directos de .main-nav, igual que antes del reetiquetado. */ .nav-list{ display:contents; list-style:none; margin:0; padding:0; } .nav-li{ display:contents; } ul.nav-dropdown{ list-style:none; margin:0; } .nav-dropdown > li{ margin:0; padding:0; } .main-nav .nav-li > a{ font-size:15px; font-weight:500; color: var(--color-text); padding: 8px 10px; position:relative; } .main-nav .nav-li > a[aria-current="page"], .main-nav .nav-li > a:hover{ color: var(--color-primary); } .main-nav .nav-li > a[aria-current="page"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; background: var(--color-accent); } .header-ctas{ display:flex; align-items:center; gap:10px; margin-left:auto; } .nav-toggle{ display:none; background:none; border:0; font-size:26px; color:var(--color-primary); cursor:pointer; } /* ---------- Nav con submenú (Consulta Especializada / Cardiopatías) ---------- */ .nav-item{ position:relative; display:flex; align-items:center; } .nav-item-toggle{ display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font-family: var(--font-base); font-size:15px; font-weight:500; color: var(--color-text); padding: 8px 10px; } .nav-item.is-active > .nav-item-toggle{ color: var(--color-primary); } .nav-caret{ font-size:11px; transition: transform .2s ease; } .nav-item.is-open .nav-caret{ transform: rotate(180deg); } .nav-dropdown{ display:none; position:absolute; top:100%; left:0; margin-top:0; min-width:270px; background:#fff; border:1px solid var(--color-border); border-radius:10px; /* padding-top (en vez del antiguo margin-top:10px) para el respiro visual entre el menú y la tarjeta: un margin deja un hueco "muerto" fuera de la caja del elemento, y al pasar el mouse por ahí para bajar hacia el submenú, el :hover se pierde a medio camino y la tarjeta se cierra sola. Con padding, ese espacio sigue siendo parte de la caja de .nav-dropdown (que además es descendiente de .nav-item en el DOM), así que el :hover no se interrumpe y el submenú se puede recorrer completo con el mouse. */ box-shadow: 0 14px 30px rgba(0,40,70,.14); padding:18px 8px 8px; z-index:600; } .nav-dropdown a{ display:block; padding:10px 12px; border-radius:6px; font-size:14.5px; white-space:normal; } .nav-dropdown a:hover{ background: var(--color-bg-alt); } .nav-item.is-open .nav-dropdown{ display:block; } @media (min-width:961px){ .nav-item.has-children:hover .nav-dropdown{ display:block; } } /* Consulta Especializada: el nombre del item es un link a la landing hub; el caret, un botón aparte que despliega la lista vertical de áreas (patrón tomado de "Academics" en https://avada.website/online-school/: lista vertical de subsecciones con título + descripción breve). */ .nav-item-link{ font-size:15px; font-weight:500; color: var(--color-text); padding: 8px 4px 8px 10px; display:inline-block; } .nav-item-link:hover, .nav-item-link[aria-current="page"]{ color: var(--color-primary); } .nav-item .nav-item-toggle{ padding: 8px 8px 8px 2px; } .nav-dropdown-list{ min-width:300px; padding:10px; } /* Especificidad ".nav-dropdown a.nav-dropdown-item" a propósito: debe ganarle a la regla ".nav-dropdown a{ display:block }" de arriba, o el layout en columna (título arriba, descripción abajo, con separación) no se aplica. */ .nav-dropdown a.nav-dropdown-item{ display:flex; flex-direction:column; gap:5px; padding:10px 12px; border-radius:8px; } .nav-dropdown-item-title{ display:block; font-size:14.5px; font-weight:600; color: var(--color-primary); line-height:1.3; } .nav-dropdown-item-sub{ display:block; font-size:12.5px; color: var(--color-text-soft); line-height:1.4; } .nav-dropdown-cta{ display:block; margin-top:6px; padding:10px 12px; border-top:1px solid var(--color-border); font-size:13.5px; font-weight:600; color: var(--color-accent-dark) !important; } .nav-dropdown-cta:hover{ background: var(--color-bg-alt); } @media (max-width:960px){ .nav-item{ display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--color-border); } .nav-item-link{ width:auto; flex:1 1 auto; padding:14px 6px; border-bottom:0; } .nav-item .nav-item-toggle{ width:auto; flex:0 0 auto; justify-content:center; padding:14px 10px; border-bottom:0; } } @media (max-width: 960px){ /* A pedido de la clienta: en móvil se elimina la barra superior (teléfono | keyword | nombre) y el header queda solo con logo + hamburguesa. Al ocultar el topbar, el header fijo pasa a medir solo la fila principal. */ .site-topbar{ display:none; } :root{ --header-h: var(--header-main-h, 84px); } /* .site-header-row hereda ".container" (max-width + margin:0 auto). Ese margin:auto, al ser un item flex dentro de .site-header (flex-direction: column), hace que el eje transversal (ancho) deje de estirarse y en vez de eso se centre por contenido ("shrink-to-fit") — con el menú/CTAs fuera de flujo en móvil, el contenido visible (logo + botón) es angosto y el navegador lo centraba a la mitad de la pantalla en vez de estirarlo de borde a borde. Se anula el margin:auto solo en este rango para que vuelva a ocupar el 100% y el logo/hamburguesa se alineen a los bordes (con el padding de .container como respiro, igual que el resto del sitio). */ .site-header-row{ margin-left:0; margin-right:0; width:100%; } .main-nav{ position:fixed; top: var(--header-h); left:0; right:0; bottom:0; background:#fff; flex-direction:column; align-items:flex-start; padding: 24px; gap:6px; overflow-y:auto; transform: translateX(100%); transition: transform .25s ease; z-index:400; } .main-nav.is-open{ transform: translateX(0); } .main-nav .nav-li > a{ width:100%; padding:14px 6px; border-bottom:1px solid var(--color-border); } /* Logo a la izquierda, hamburguesa pegada al borde derecho: .main-nav sale del flujo (position:fixed) y ya no empuja al toggle, así que se ancla con margin-left:auto. */ .nav-toggle{ display:block; margin-left:auto; } /* Paso 3.2: en móvil el header colapsa a SOLO logo + hamburguesa — nada de teléfono/CTA visible hasta abrir el menú (el teléfono sigue disponible en el pie de página y en la página de Contacto). */ .header-ctas{ display:none; } .nav-item{ width:100%; } .nav-item-toggle{ width:100%; justify-content:space-between; padding:14px 6px; border-bottom:1px solid var(--color-border); } .nav-dropdown{ position:static; margin-top:0; box-shadow:none; border:0; border-radius:0; padding:0 0 0 14px; display:none; } .nav-item.is-open .nav-dropdown{ display:block; } .nav-dropdown a{ padding:12px 6px; border-bottom:1px solid var(--color-border); } /* Menú móvil: submenús siempre desplegados al abrir la hamburguesa (requisito BeeDesk); el botón del caret ya no es necesario aquí. */ .main-nav .nav-dropdown{ display:block; flex-basis:100%; } .nav-item .nav-item-toggle{ display:none; } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px; padding: 13px 26px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-transform:none; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ background: var(--color-accent); color: #06333f; } .btn-primary:hover{ background: var(--color-accent-dark); color:#fff; } .btn-outline{ background:transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline:hover{ background: var(--color-primary); color:#fff; } .btn-whatsapp{ background: var(--color-whatsapp); color:#fff; } .btn-whatsapp:hover{ background:#1ea952; } .btn-sm{ padding: 9px 18px; font-size:14px; } /* ---------- Hero ---------- Rediseño (Ronda 5): fondo con foto propia de cada página + overlay degradado navy (para contraste con el texto), en vez del degradado plano anterior. Estructura: - en móvil: contenido alineado a la izquierda (ya no centrado), con un avatar circular con la cara del doctor arriba del texto (siempre la misma foto, consistente en todo el sitio, para que se reconozca al doctor sin importar qué foto tenga cada página de fondo); - en escritorio: el texto queda de un lado y la foto propia de cada página pasa a ser una tarjeta del otro lado, además de usarse (desenfocada/oscurecida) como fondo de toda la sección. Altura en escritorio: 600–650px, para que el contenido no se corte. */ .hero{ position:relative; overflow:hidden; color:#fff; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); padding: 48px 0; } /* Foto de fondo desenfocada/oscurecida (misma foto que .hero-photo) + overlay degradado de marca encima, para que el texto siempre contraste bien sin depender de qué tan clara/oscura sea la foto de cada página. Ambas capas son absolutas y se agrandan (scale) para que el blur no deje bordes transparentes visibles. Ausentes en .hero-minimal (no tiene foto). */ .hero-bg-photo{ position:absolute; inset:-20px; z-index:0; background-size:cover; background-position:center; filter: blur(8px) brightness(.55) saturate(1.05); transform: scale(1.1); } .hero-bg-overlay{ position:absolute; inset:0; z-index:1; /* Opacidad del tinte bajada a 60% (antes 70%, y originalmente variaba entre 72% y 93% según el punto del degradado) para que la foto de fondo se note aún más. */ background: linear-gradient(120deg, rgba(0,58,99,.6) 0%, rgba(0,80,136,.6) 45%, rgba(0,58,99,.6) 100%); } /* Ronda 9 — alternativa intermedia: en vez de la foto de fondo en TODOS los heroes, 8 de las 9 páginas usan una textura geométrica de marca, al estilo de la referencia que mandó el cliente. Ventaja sobre la foto: el contraste con el texto blanco queda garantizado siempre, pesa muchísimo menos que una foto, y es consistente en todo el sitio sin depender de encontrar una foto que funcione en cada página. "Acerca de mí" conserva la foto real (hero-bg-photo arriba), porque ahí sí aporta calidez humana y contexto. v2 (ajuste tras feedback): la primera versión usaba 2 azules distintos con una rotación fija en tablero de 2x2, lo que formaba círculos completos y muy marcados en cada esquina de la cuadrícula (se veía "gráfico"/repetitivo). La referencia en realidad usa UN solo tono base + UNA sola figura clara muy sutil (blanco a 8% de opacidad) por celda, con la orientación del cuarto de círculo variando en un mosaico de 16 celdas (4x4) en vez de 4, para que a veces se alineen entre celdas vecinas y a veces no — más orgánico, menos "tablero perfecto". */ .hero-bg-pattern{ position:absolute; inset:0; z-index:0; background-color:#003a63; background-image:url('hero-pattern.svg'); background-repeat:repeat; background-size:280px 280px; } .hero-bg-pattern-overlay{ position:absolute; inset:0; z-index:1; /* Overlay ligero: a diferencia de la foto, la textura ya tiene contraste de sobra por sí sola, así que aquí el degradado es solo para dar un poco de profundidad/viñeta, no para "tapar" la textura. */ background: linear-gradient(120deg, rgba(0,45,77,.35) 0%, rgba(0,58,99,.12) 45%, rgba(0,45,77,.4) 100%); } .hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:20px; } /* Avatar (móvil): siempre la misma foto de perfil del doctor, para que se reconozca de inmediato sin depender de la foto de contexto de cada página. */ .hero-avatar{ width:120px; height:120px; border-radius:50%; object-fit:cover; object-position:center 15%; border:3px solid rgba(255,255,255,.35); box-shadow:0 10px 26px rgba(0,20,40,.35); flex:none; } .hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .hero-content > *{ margin:0; } .hero .eyebrow{ margin:0; } .hero h1{ color:#fff; max-width: 640px; font-size:clamp(28px,3.6vw,38px); line-height:1.18; } .hero p.lead{ font-size:16.5px; line-height:1.5; color:#e7f3fb; max-width: 500px; } .hero .cta-row{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:14px; margin-top: 4px; } /* En el hero el fondo ya no es un color plano sino una foto oscurecida, así que el botón "outline" necesita su propia variante clara (antes esto se resolvía con un style="" inline solo en index.html). */ .hero .btn-outline{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.6); } .hero .btn-outline:hover{ background:rgba(255,255,255,.18); color:#fff; } /* Foto (escritorio): oculta en móvil, el avatar la reemplaza ahí. */ .hero-photo{ display:none; } /* Cédulas + aviso COFEPRIS visibles sin scroll en el Hero de cada landing (Paso 3.11) */ .hero-cofepris{ font-size:12px; line-height:1.45; color:#dbe9f2; opacity:.92; margin:0; max-width:500px; } /* Variante sin foto (p. ej. Aviso de Privacidad): banda compacta, sin avatar ni columna de foto ni imagen de fondo — solo el degradado de marca. */ .hero-minimal .hero-inner{ gap:0; } .hero-minimal .hero-avatar, .hero-minimal .hero-photo{ display:none; } @media (min-width:961px){ .hero:not(.hero-minimal){ min-height: 600px; padding: 60px 0; } .hero:not(.hero-minimal) .hero-inner{ display:grid; grid-template-columns: 1fr 0.92fr; align-items:center; gap:56px; text-align:left; min-height:520px; } .hero:not(.hero-minimal) .hero-content{ align-items:flex-start; } .hero:not(.hero-minimal) .hero-avatar{ display:none; } .hero:not(.hero-minimal) .hero-photo{ display:block; width:100%; height:520px; object-fit:cover; border-radius: var(--radius-card); box-shadow: 0 24px 48px rgba(0,20,40,.28); } .hero:not(.hero-minimal) h1{ max-width:none; } .hero:not(.hero-minimal) .cta-row{ justify-content:flex-start; } } /* ---------- Breadcrumb dentro del Hero ---------- Variante clara del .breadcrumb de abajo, para usarse sobre el fondo oscuro del Hero (Ronda 5: se movió de fuera/arriba del Hero a ser el primer elemento de .hero-content, en vez de un