/* ============================================================ Dr. Eduardo Escutia Treviño — Ortopedista Pediatra CDMX Sistema visual: Fraunces + Source Sans 3 · paleta azul Ritmo claro/oscuro · motivo: el árbol de Andry Raptor Marketer · 2026 ============================================================ */ /* ========================================== 1. RESET Y VARIABLES ========================================== */ :root { /* --- Paleta (aprobada 2026-08-13) --- */ --abisal: #081B33; --marino: #0F2F52; --azul: #1E6FC4; --azul-d: #17579B; --luz: #4FA8F5; --hielo: #9CC7EE; --nieve: #F1F6FB; --blanco: #FFFFFF; --tinta: #0A1D35; --gris: #5D7590; --linea: #DCE6F0; --linea-d: rgba(241,246,251,.13); --claro: rgba(241,246,251,.74); --claro-2: rgba(241,246,251,.5); --ambar: #F2C15A; /* --- Tipografía --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --text-sm: .875rem; --text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: clamp(1.75rem, 4.4vw, 2.5rem); --text-4xl: clamp(2rem, 5.4vw, 3.25rem); --text-hero: clamp(2.1rem, 6.2vw, 4rem); /* --- Espaciado --- */ --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 3.5rem; --sp-xl: 5.5rem; --wrap: 1180px; --radius: 14px; --radius-sm: 9px; /* --- Motion (Raptor Kit 00) --- */ --ease-out-expo: cubic-bezier(.22,1,.36,1); --ease-out-quart: cubic-bezier(.25,1,.5,1); --dur-fast: 240ms; --dur-base: 600ms; --dur-slow: 900ms; } /* ======= RAPTOR LIB 00 — A11Y MOTION BASE ======= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.68; color: var(--tinta); background: var(--blanco); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; } ul, ol { list-style: none; } ::selection { background: var(--luz); color: var(--abisal); } /* Accesibilidad — foco visible siempre */ :focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--abisal); color: var(--nieve); padding: .85rem 1.25rem; font-weight: 600; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================== 2. TIPOGRAFÍA GLOBAL ========================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; /* La 'f', la 'y' y la 'j' de Fraunces llevan cola descendente tipo swash. NO es un error: el eje 'Wonky' de la fuente viene con default = 1 y asi lo eligio el doctor (2026-08-20). Google Fonts entrega ese eje horneado, no se declara aqui. Para apagarlo habria que pedirlo explicito en la URL de Fonts: Fraunces:opsz,wght,SOFT,WONK@9..144,400..700,0..100,0 -- NO HACERLO. */ text-wrap: balance; } h1 { font-size: var(--text-hero); line-height: 1.06; } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-xl); } /* Ritmo del bloque de título — regla de oro: el eyebrow y el H2 son UNA unidad y van pegados; el aire grande va ARRIBA del eyebrow y DEBAJO del título. Sin esto el texto queda pegado al H2 y el H2 flotando lejos de su eyebrow. */ h2 { margin-bottom: 1.35rem; } h3 { margin-bottom: .6rem; } p { text-wrap: pretty; } strong, b { font-weight: 700; color: inherit; } em { font-style: italic; } /* ========================================== 3. LAYOUT — ritmo claro/oscuro ========================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; } .narrow { max-width: 780px; } section { padding-block: var(--sp-lg); } /* Bloques de fondo — la alternancia es el sistema */ .s-blanco { background: var(--blanco); } .s-nieve { background: var(--nieve); } .s-oscuro { background: var(--abisal); color: var(--nieve); position: relative; isolation: isolate; } .s-oscuro h1, .s-oscuro h2, .s-oscuro h3 { color: var(--nieve); } .s-oscuro p, .s-oscuro li { color: var(--claro); } .s-oscuro a:not(.btn) { color: var(--luz); } .s-oscuro .eyebrow { color: var(--luz); } .s-oscuro .lead { color: var(--claro); } /* ======= RAPTOR LIB 11 — NOISE TEXTURE ANTI-IA ======= */ .s-oscuro::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: .07; mix-blend-mode: overlay; } /* Fondos editoriales responsive: el sujeto permanece en la zona segura central. */ .discapacidad-media { overflow: hidden; } .discapacidad-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; pointer-events: none; } .discapacidad-media::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.78)); } .discapacidad-media > .wrap { position: relative; z-index: 0; } /* Fondo editorial del tratamiento con arnés de Pavlik. Overlay negro para mantener el estándar visual del sitio y contraste AA sin ocultar la escena familiar. */ .treatment-media { overflow: hidden; } .treatment-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; pointer-events: none; } .treatment-media::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82)); } .treatment-media > .wrap { position: relative; z-index: 0; } /* Fondo editorial reutilizable para secciones narrativas. El velo es negro y deja visible la fotografía sin comprometer la lectura del contenido. */ .editorial-media { overflow: hidden; } .editorial-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .editorial-media::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.80)); } .editorial-media > .wrap { position: relative; z-index: 0; } /* Sección de ubicación con la fachada del hospital de fondo. Mismo patrón que arriba. El velo es NEGRO, igual que el de discapacidad: es el estándar de la home para fondos fotográficos. Un velo azulado tiñe la foto y la desalinea del resto de la página. Densidad .58 → .74, medida contra los píxeles reales de la fachada (2026-08-31). Lo que obligaba a taparla más NO era el velo: eran dos colores pensados para panel sólido y no para foto — el eyebrow en `--luz` (#4FA8F5, azul medio sobre cielo azul) y el `.lead` en `--claro`, que es blanco al 74% y por tanto se mezcla con el fondo. Subidos a `--hielo` y `--nieve` dentro de esta sección, el velo baja del .72 → .86 original sin bajar de AA: el peor caso queda en 4.9:1 sobre el mínimo de 4.5. Si se vuelve a aclarar la capa, el primero que cae es el eyebrow. */ .ubi-media { overflow: hidden; } .ubi-media .eyebrow { color: var(--hielo); } .ubi-media .lead { color: var(--nieve); } .ubi-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; pointer-events: none; } .ubi-media::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.74)); } .ubi-media > .wrap { position: relative; z-index: 0; } /* En móvil la sección mide ~1500px de alto y la foto es apaisada (3:2): con `cover` solo se vería una franja vertical del 17% del ancho — cables y cielo, no el hospital. Se sirve como banda superior con su proporción intacta, así se ve el edificio completo, y el velo funde hacia el fondo sólido. */ @media (max-width: 899px) { .ubi-bg { height: auto; aspect-ratio: 3 / 2; bottom: auto; } /* El velo arranca negro sobre la foto y cierra en el fondo sólido de la sección: si terminara en negro se vería el corte de la banda como si fueran dos secciones. Aquí va más denso que en escritorio (.64 vs .58) y no es un descuido: en móvil la foto se sirve como banda 3:2, así que el encabezado cae sobre la FACHADA iluminada en vez de sobre el cielo. Medido, el mismo .58 dejaba el eyebrow en 3.81:1 — por debajo del AA. Con .64 sube a 5.0:1 y la fachada se sigue viendo bastante más que antes. */ .ubi-media::after { background: linear-gradient(180deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.78) 13%, var(--abisal) 20%); } } .section-photo { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--abisal); box-shadow: 0 24px 60px -32px rgba(6,20,38,.55); } .section-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .section-photo-ponseti { margin-bottom: var(--sp-sm); } .online-split { align-items: center; } .section-photo-online { order: -1; margin-bottom: var(--sp-md); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); margin-bottom: .9rem; } .eyebrow::before { content: ''; width: 24px; height: 2px; background: currentColor; border-radius: 2px; } .lead { font-size: var(--text-lg); color: var(--gris); max-width: 62ch; } .sec-head { margin-bottom: var(--sp-md); } .sec-head h2 em { color: var(--azul); font-style: normal; } .s-oscuro .sec-head h2 em { color: var(--luz); } /* ========================================== 4. COMPONENTES ========================================== */ /* --- Botones (Raptor Lib 04: shimmer) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: .95rem 1.75rem; border-radius: 100px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart); position: relative; overflow: hidden; isolation: isolate; } .btn-primary { background: var(--azul); color: var(--blanco); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--azul-d); box-shadow: 0 10px 26px rgba(30,111,196,.28); } .btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%); transform: translateX(-110%); transition: transform var(--dur-slow) var(--ease-out-expo); } .btn-primary:hover::before { transform: translateX(110%); } .btn-ghost { border-color: var(--linea); color: var(--tinta); background: transparent; } .btn-ghost:hover { border-color: var(--azul); color: var(--azul); } .s-oscuro .btn-ghost { border-color: rgba(241,246,251,.35); color: var(--nieve); } .s-oscuro .btn-ghost:hover { border-color: var(--nieve); background: rgba(241,246,251,.08); } /* Sobre fondo oscuro el botón primario llevaba azul claro con texto casi negro. Se unifica con el resto del sitio: azul de marca + texto BLANCO en todas partes, y un filete blanco de 1px que lo despega del fondo oscuro sin ensuciarlo. Blanco sobre #1E6FC4 = 5.2:1 → cumple AA. */ .s-oscuro .btn-primary { background: var(--azul); color: var(--blanco); border: 1px solid var(--blanco); } .s-oscuro .btn-primary:hover, .s-oscuro .btn-primary:focus-visible { background: var(--azul-d); border-color: var(--blanco); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-sm); } /* --- Header transparente premium (skill `encabezado-transparente`) --- */ /* absolute, NO sticky: desaparece de forma natural al hacer scroll */ .hdr { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; transition: background-color var(--dur-fast) var(--ease-out-quart), backdrop-filter var(--dur-fast) var(--ease-out-quart); } .hdr:hover, .hdr:focus-within { background: rgba(6, 20, 38, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.05rem; } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--nieve); } /* Manda el ALTO y el ancho es automatico. Con `width` y `height` fijos a 44 se forzaba un cuadrado sobre un isotipo de 78x88 (proporcion 0.886) y salia estirado un 13%. Mismo error que tuvo el retrato de la home en agosto: el marco no debe imponerle la proporcion a la imagen. */ .brand-mark { height: 44px; width: auto; flex: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); } .brand-txt { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .brand-txt span { display: block; font-family: var(--font-body); font-size: .63rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hielo); margin-top: 2px; } .nav { display: none; } .nav-list { display: flex; align-items: center; gap: 1.5rem; list-style: none; } .nav a { color: #fff; text-decoration: none; font-size: .95rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.5); transition: color var(--dur-fast) var(--ease-out-quart); } .nav a:hover, .nav a[aria-current="page"] { color: var(--luz); } /* Desplegable de "Qué atiendo" */ .has-sub { position: relative; } .has-sub > a { display: inline-flex; align-items: center; gap: .38rem; padding-block: 1.1rem; } .caret { width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .8; transition: transform var(--dur-fast) var(--ease-out-quart); } .has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); } .sub { position: absolute; top: 100%; left: -1rem; z-index: 20; min-width: 272px; list-style: none; padding: .45rem 0; background: rgba(6, 20, 38, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); box-shadow: 0 22px 48px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart), visibility var(--dur-fast); } .has-sub:hover > .sub, .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; } .sub a { display: block; padding: .68rem 1.2rem; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.84); text-shadow: none; } .sub a:hover, .sub a[aria-current="page"] { color: var(--luz); background: rgba(79,168,245,.11); } .hdr .btn { padding: .62rem 1.2rem; font-size: .88rem; } .hdr .btn-primary { background: var(--azul); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.28); } .hdr .btn-primary:hover { background: var(--azul-d); } .burger { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(6,20,38,.42); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); backdrop-filter: blur(6px); } .burger span { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: background var(--dur-fast); } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; transition: transform var(--dur-fast) var(--ease-out-quart); } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } .menu-mobile { display: none; background: rgba(6, 20, 38, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linea-d); padding: var(--sp-sm) 1.25rem var(--sp-md); } .menu-mobile.open { display: block; } /* Movil: solo marca + hamburguesa. El CTA vive en el menu y en el boton flotante. */ @media (max-width: 899px) { .hdr > .wrap > .btn { display: none; } .brand-mark { height: 40px; width: auto; } .brand-txt { font-size: .96rem; } .brand-txt span { font-size: .58rem; letter-spacing: .13em; } } @media (max-width: 380px) { .brand-txt { font-size: .86rem; } } .menu-mobile a { display: block; padding: .9rem 0; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.09); } .mm-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .mm-row a { flex: 1; border-bottom: 0; } .mm-row { border-bottom: 1px solid rgba(255,255,255,.09); } .mm-toggle { width: 46px; height: 46px; flex: none; background: none; border: 0; display: grid; place-items: center; cursor: pointer; } .mm-toggle span { width: 0; height: 0; display: block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; transition: transform var(--dur-fast) var(--ease-out-quart); } .mm-toggle[aria-expanded="true"] span { transform: rotate(180deg); } .mm-sub { display: none; padding-left: 1rem; border-left: 2px solid var(--luz); margin: .2rem 0 .4rem; } .mm-sub.open { display: block; } .mm-sub a { font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.82); padding: .72rem 0; border-bottom: 0; } .menu-mobile .btn { margin-top: var(--sp-sm); width: 100%; } /* --- Hero con foto de fondo + overlay --- */ .hero { position: relative; isolation: isolate; overflow: hidden; /* padding-top generoso: el header es absolute y flota encima */ padding: calc(74px + 1.35rem) 0 var(--sp-lg); min-height: 68vh; display: flex; align-items: center; } .hero::before { content: none; } /* anula el ruido de .s-oscuro aquí */ .hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63% 22%; pointer-events: none; } /* Capa oscura: fuerte donde va el texto, ligera sobre el doctor */ /* MOVIL: el texto va encima de toda la foto -> degradado vertical */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,20,38,.82) 0%, rgba(6,20,38,.60) 38%, rgba(6,20,38,.58) 66%, rgba(6,20,38,.88) 100%); } .hero-in { position: relative; z-index: 2; max-width: 660px; } .hero.hero-sm { min-height: 42vh; padding-bottom: var(--sp-md); } .hero.hero-sm h1 { font-size: var(--text-4xl); } /* El H1 va con interlínea 1.06: sin margen propio el deck se le encima. El aire crece con el tamaño del H1 para que la proporción se mantenga. */ .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.55); margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem); } .hero .deck { font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--hielo); margin-bottom: 1.6rem; border-left: 3px solid var(--luz); padding-left: 1.15rem; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .hero p.intro { color: rgba(255,255,255,.9); max-width: 54ch; margin-bottom: var(--sp-sm); text-shadow: 0 1px 12px rgba(0,0,0,.5); } .hero .crumbs { padding-top: 0; margin-bottom: .6rem; } .hero .crumbs a { color: var(--hielo); } /* Sellos de confianza */ .trust { display: grid; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-md); max-width: 660px; } .trust > div { background: rgba(6,20,38,.66); backdrop-filter: blur(6px); padding: .95rem 1.05rem; } .trust dt { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--luz); } .trust dd { font-size: .84rem; color: var(--claro-2); line-height: 1.45; margin-top: .15rem; } /* --- Cards de padecimiento --- */ /* --- Tarjetas de padecimiento --- Se descartó el efecto sticky secuencial (2026-08-30): la skill lo desaconseja para >5 items y para secciones donde el usuario COMPARA en vez de leer una secuencia, que es justo el caso. En lugar de eso se les subió el acabado sin alargar la página: pastilla de color en el icono, sombra en reposo y un hover con profundidad real. */ .grid-pad { display: grid; gap: 1.1rem; margin-top: var(--sp-md); } .pad-card { background: #071A2D; border: 1px solid rgba(198,216,234,.35); border-radius: var(--radius); padding: 1.85rem 1.55rem 1.55rem; position: relative; overflow: hidden; isolation: isolate; min-height: 390px; text-decoration: none; color: var(--blanco); display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(10,29,53,.04), 0 10px 26px -20px rgba(10,29,53,.5); transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), border-color var(--dur-fast); } .pad-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.82) 100%), linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.08) 100%); } .pad-card::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 3px 0 rgba(79,168,245,.85); } .pad-card > :not(.pad-bg) { position: relative; z-index: 3; } .pad-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .92; transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out-quart); } /* Pastilla del icono: es lo que da estructura y lo que se tiñe en el hover */ .pad-ico { width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center; margin-bottom: 1.05rem; background: rgba(232,243,255,.16); color: #C8E6FF; transition: background var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-expo); } .pad-ico .ico { width: 27px; height: 27px; margin: 0; color: inherit; } .pad-card:hover, .pad-card:focus-visible { transform: translateY(-6px); border-color: rgba(200,230,255,.8); box-shadow: 0 2px 4px rgba(10,29,53,.05), 0 24px 50px -22px rgba(10,29,53,.55); } .pad-card:hover .pad-bg, .pad-card:focus-visible .pad-bg { transform: scale(1.045); opacity: 1; } .pad-card:hover .pad-ico, .pad-card:focus-visible .pad-ico { background: var(--azul); color: var(--blanco); transform: rotate(-4deg); } .pad-card h3 { margin-bottom: .45rem; color: var(--blanco); text-wrap: balance; text-shadow: 0 2px 14px rgba(2,10,19,.9); } .pad-card p { font-size: .95rem; color: #F0F5FA; flex: 1; text-shadow: 0 2px 12px rgba(2,10,19,.9), 0 1px 2px rgba(2,10,19,.95); } .pad-card .more { font-weight: 700; color: #A9D9FF; font-size: .92rem; margin-top: 1.15rem; display: inline-flex; align-items: center; gap: .4rem; } .pad-card .more::after { content: '→'; transition: transform var(--dur-base) var(--ease-out-expo); } .pad-card:hover .more::after, .pad-card:focus-visible .more::after { transform: translateX(5px); } .ico { width: 42px; height: 42px; color: var(--azul); margin-bottom: .9rem; } .s-nieve .pad-card { background: #071A2D; } /* --- Direct Answer (bloque GEO) --- */ .answer { background: var(--nieve); border-left: 4px solid var(--azul); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.5rem; margin-block: var(--sp-sm) var(--sp-md); font-size: var(--text-lg); line-height: 1.7; } .s-oscuro .answer { background: rgba(79,168,245,.10); border-left-color: var(--luz); color: var(--nieve); } .s-nieve .answer { background: var(--blanco); } /* --- Tablas de contenido --- */ .tbl { width: 100%; border-collapse: collapse; margin-block: var(--sp-sm); font-size: .97rem; } .tbl th, .tbl td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: top; } .tbl th { font-family: var(--font-display); font-weight: 600; background: var(--nieve); } .s-oscuro .tbl th { background: rgba(15,47,82,.6); color: var(--nieve); } .s-oscuro .tbl th, .s-oscuro .tbl td { border-bottom-color: var(--linea-d); } .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --- Lista con check --- */ .check li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; color: var(--gris); } .check li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2.4px solid var(--azul); border-bottom: 2.4px solid var(--azul); transform: rotate(-45deg); } .s-oscuro .check li { color: var(--claro); } .s-oscuro .check li::before { border-color: var(--luz); } .check li strong { color: var(--tinta); } .s-oscuro .check li strong { color: var(--nieve); } .s-oscuro .prose strong, .s-oscuro .prose h3 { color: var(--nieve); } /* --- Credenciales --- */ .cred { display: grid; gap: 1px; background: var(--linea-d); border: 1px solid var(--linea-d); border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-md); } .cred > div { background: rgba(15,47,82,.5); padding: 1.15rem 1.3rem; } .cred dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hielo); margin-bottom: .35rem; } .cred dd { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--nieve); } .cred dd small { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 400; color: var(--claro-2); margin-top: .25rem; line-height: 1.5; } .cred .num { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--luz); } .verify { margin-top: var(--sp-sm); padding: 1.2rem 1.4rem; border-radius: var(--radius); border: 1px solid rgba(79,168,245,.32); background: rgba(79,168,245,.07); font-size: .96rem; color: var(--claro); } .verify strong { color: var(--luz); } /* --- Precios --- */ .precios { display: grid; gap: 1.1rem; margin-top: var(--sp-md); } .precio { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius); padding: 1.9rem 1.6rem; } .precio.dest { background: var(--abisal); color: var(--nieve); border-color: var(--abisal); box-shadow: 0 18px 44px rgba(8,27,51,.18); } .precio h3 { margin-bottom: .7rem; } .precio.dest h3 { color: var(--nieve); } .precio .monto { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; } .precio.dest .monto { color: var(--luz); } .precio .monto sup { font-size: 1.05rem; vertical-align: super; color: var(--azul); } .precio.dest .monto sup { color: var(--hielo); } .precio p { font-size: .92rem; color: var(--gris); margin-top: .6rem; } .precio.dest p { color: var(--claro); } /* --- Horarios --- */ .horario { width: 100%; border-collapse: collapse; max-width: 420px; } .horario td { padding: .42rem .1rem; border-bottom: 1px solid var(--linea); } .s-oscuro .horario td { border-bottom-color: var(--linea-d); } .horario tr.on td { font-weight: 700; } .horario tr.on td:last-child { color: var(--azul); } .s-oscuro .horario tr.on td:last-child { color: var(--luz); } .horario td:last-child { text-align: right; font-variant-numeric: tabular-nums; } /* --- FAQ --- */ .faq { margin-top: var(--sp-md); max-width: 880px; } /* Dos columnas en escritorio: acorta mucho la sección sin apretar la lectura. Las columnas vienen partidas desde el HTML (ver bloque_faq), no con `columns:`. */ @media (min-width: 900px) { .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; max-width: 1120px; align-items: start; } } .faq details { border: 1px solid var(--linea); border-radius: var(--radius); margin-bottom: .7rem; background: var(--blanco); overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .faq details[open] { border-color: #BFD5EA; box-shadow: 0 10px 30px rgba(10,29,53,.06); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; font-weight: 300; color: var(--azul); flex: none; transition: transform var(--dur-fast) var(--ease-out-quart); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 1.4rem 1.35rem; color: var(--gris); } /* ===== Sección de autoridad bajo el hero ===== Patrón tomado del sitio de la Dra. Fanny Vargas: texto a la izquierda, foto a la derecha y mini tarjetas de credenciales en medio. Sube al pliegue superior la prueba que antes solo vivía en el bloque de cédulas, más abajo. */ .cred-cards { display: grid; gap: 1rem; margin: 1.7rem 0 1.5rem; padding: 1.2rem 1.3rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; } /* 2×2 solo a partir de 1180px: viven en media columna de un .split, y por debajo de ese ancho cada tarjeta se queda en ~160px y el título se parte en cuatro renglones. */ @media (min-width: 1180px) { .cred-cards { grid-template-columns: 1fr 1fr; gap: 1.15rem 1.4rem; } } .cred-card { display: flex; gap: .75rem; align-items: flex-start; } .cred-card svg { flex: none; width: 22px; height: 22px; color: var(--azul); margin-top: 2px; } .cred-card b { display: block; font-size: .94rem; color: var(--tinta); font-weight: 700; line-height: 1.25; } .cred-card span { display: block; font-size: .81rem; color: var(--gris); margin-top: 2px; line-height: 1.4; } /* Marco de la foto. Sirve de placeholder mientras no hay imagen y de marco cuando sí la hay: basta con meter un dentro (ver bloque_presentacion en contenido.py). */ .photo-ph { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #E6EFF8 0%, #D5E4F2 100%); border: 2px dashed #A9C4DE; display: grid; place-items: center; text-align: center; padding: 1.6rem; } .photo-ph svg { width: 46px; height: 46px; color: var(--azul); opacity: .5; margin-inline: auto; } .photo-ph p { font-size: .84rem; color: var(--marino); margin-top: .7rem; line-height: 1.45; } /* El archivo se sirve con su proporción real (0.64) y es ESTE `cover` el que lo encuadra en el marco 4:5 — nunca al revés. El 28% vertical sube la ventana de recorte para no comerse la cabeza: centrado cortaría el pelo. */ .photo-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border-radius: inherit; } .photo-ph:has(img) { border: 0; padding: 0; } /* El tratamiento de sombra y hover de las fotos vive más abajo, después de RAPTOR LIB 01, porque depende del orden de cascada con `[data-reveal].is-in`. Ver ahí el porqué. */ /* --- Aviso de urgencias (YMYL) --- */ .urgencia { background: #FFF4E5; border: 2px solid var(--ambar); border-left-width: 5px; border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-block: var(--sp-sm); } .urgencia strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: #8A5B00; margin-bottom: .4rem; } .urgencia p { color: #6B4A08; font-size: .97rem; } /* Dentro del hero el aviso va sobre la foto: variante oscura, no la tarjeta crema */ .hero .urgencia { background: rgba(6, 20, 38, .84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(242, 193, 90, .45); border-left: 4px solid var(--ambar); padding: 1rem 1.2rem; margin: 0 0 1.5rem; max-width: 620px; } .hero .urgencia strong { color: var(--ambar); font-size: 1rem; margin-bottom: .3rem; } .hero .urgencia p { color: rgba(255,255,255,.85); font-size: .93rem; line-height: 1.6; } .hero .urgencia p strong { display: inline; font-size: inherit; } /* --- Mapa y NAP --- */ /* La sección va más angosta que el resto del sitio (1180 → 1000). Aquí el contenido son dos bloques densos —el NAP y el mapa— y a ancho completo quedaban demasiado separados: la vista tenía que saltar de un extremo a otro de la pantalla para relacionarlos. La foto de fondo sigue a sangre completa; lo que se estrecha es el contenido. */ .ubi-media > .wrap { max-width: 1000px; } .ubi-grid { display: grid; gap: var(--sp-md); } .ubi-info h2 { margin-bottom: 1rem; } .ubi-info .lead { margin-bottom: var(--sp-sm); } .mapa { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linea-d); line-height: 0; } .mapa iframe { width: 100%; height: 340px; border: 0; } .nap { background: rgba(15,47,82,.5); border: 1px solid var(--linea-d); border-radius: var(--radius); padding: 1.7rem; } .nap dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hielo); margin-bottom: .3rem; } .nap dd { margin-bottom: 1.2rem; color: var(--claro); } .nap dd:last-child { margin-bottom: 0; } .nap dd strong { color: var(--nieve); } .nap .tel { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--luz); text-decoration: none; font-variant-numeric: tabular-nums; } /* Nombre del negocio: es la N del NAP y va primero. Sin él, la dirección y el teléfono no le dicen a Google a QUIÉN pertenecen, que es justo lo que cruza con la ficha. */ .nap-nombre { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; line-height: 1.2; color: var(--nieve); } .nap-nombre span { display: block; font-family: var(--font-body); font-size: .93rem; font-weight: 400; color: var(--claro); margin-top: .2rem; } /* En la sección de ubicación el NAP va SIN panel: sobre la fachada, igual que el título. El recuadro semitransparente que tenía encima tapaba la foto justo donde el edificio se ve mejor. Al quitarlo el texto queda sobre el velo a secas, así que sube a plena fuerza (--nieve en vez de --claro, que es blanco al 74%) para no perder el AA. */ .ubi-media .nap { background: none; border: 0; padding: 0; } .ubi-media .nap dd { color: var(--nieve); margin-bottom: 1.05rem; } .ubi-media .nap .horario td { border-bottom-color: rgba(241,246,251,.22); } /* Los rótulos van en un hielo más claro que el `--hielo` de siempre. Sobre el panel llegaban a 7:1 de sobra; sobre la fachada a pelo caían a 3.95:1, por debajo del AA — son el elemento más frágil del bloque (letra chica, mayúsculas y muy espaciada). */ .ubi-media .nap dt { color: #CFE2F5; } .ubi-media .nap-nombre span { color: rgba(241,246,251,.88); } /* --- Placeholder de foto --- */ .ph { background: repeating-linear-gradient(45deg, #E8EFF7, #E8EFF7 12px, #DFE9F4 12px, #DFE9F4 24px); border: 1.5px dashed #B9CDE0; border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 2.5rem 1.4rem; min-height: 220px; color: var(--gris); font-size: .92rem; font-weight: 600; line-height: 1.6; } .s-oscuro .ph { background: rgba(241,246,251,.04); border-color: rgba(156,199,238,.32); color: var(--claro-2); } /* --- CTA final --- */ .cta { text-align: center; } .cta h2 { max-width: 20ch; margin-inline: auto; } .cta p { max-width: 54ch; margin: var(--sp-sm) auto var(--sp-md); } .cta .btn-row { justify-content: center; } /* --- Breadcrumbs --- */ .crumbs { font-size: .85rem; color: var(--claro-2); padding-top: 1rem; } .crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; } .crumbs li::after { content: '›'; margin-left: .4rem; opacity: .5; } .crumbs li:last-child::after { content: ''; } .crumbs a { color: var(--hielo); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* --- Footer --- */ .ftr { background: #061424; color: var(--claro-2); padding-block: var(--sp-lg) var(--sp-md); font-size: .94rem; border-top: 1px solid var(--linea-d); } .ftr-grid { display: grid; gap: var(--sp-md); } .ftr h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--nieve); margin-bottom: .8rem; letter-spacing: -.01em; } .ftr a { display: block; color: var(--claro-2); text-decoration: none; margin-bottom: .4rem; } .ftr a:hover { color: var(--luz); } .ftr .legal { border-top: 1px solid var(--linea-d); padding-top: 1.3rem; margin-top: var(--sp-md); display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; font-size: .84rem; } /* Los enlaces del footer son `display:block` porque en las columnas van apilados uno por línea. Aquí no: en la barra legal van dentro de una frase, y al heredar el `block` cada uno se llevaba su renglón y dejaba el separador «·» huérfano en una línea propia. */ .ftr .legal a { display: inline; margin-bottom: 0; } /* ======= RAPTOR LIB 01 — REVEAL ON SCROLL ======= */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--reveal-delay, 0) * 1ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* ======= TRATAMIENTO DE FOTOGRAFÍA (2026-08-31) ======= Vale para el retrato de la home (.photo-ph) y para las 4 fotos apaisadas (.section-photo) del resto del sitio. ⚠️ TIENE QUE IR DESPUÉS DE `[data-reveal].is-in`, no junto al resto de estilos de foto. Las dos capas usan `transform` sobre el MISMO elemento: `.is-in` lo pone en `none` para cerrar la animación de entrada y `:hover` lo levanta. `.section-photo:hover` y `[data-reveal].is-in` tienen la misma especificidad (0,2,0), así que gana el que se declare al final. Puesto arriba, el hover de las apaisadas simplemente no ocurría. 1) SOMBRA EN CAPAS, no una sola difusa. Una única sombra grande y suave es lo que hace todo template y deja la imagen "flotando". Tres capas —contacto, media y ambiente— es como se comporta la luz real: el filo se apoya y la foto pesa. 2) FILO INTERIOR en vez de `border`. Va `inset`, así que no suma tamaño, no mueve el layout y sigue el radio exacto. Un `border` real se comería un píxel de la foto y deja escalón en las esquinas redondeadas. 3) ZOOM AL PASAR EL MOUSE. Escala el , NUNCA el marco: escalar el marco lo haría invadir el texto de al lado y difumina el filo. 1.045 y no más — en un retrato, pasado el 6% la cara se hincha de forma perceptible. Solo en dispositivos con mouse real; el `prefers-reduced-motion` global lo desactiva. */ .photo-ph:has(img), .section-photo { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(10,29,53,.10), 0 12px 26px -14px rgba(10,29,53,.34), 0 34px 64px -34px rgba(10,29,53,.46); } .photo-ph:has(img) img, .section-photo img { transition: transform var(--dur-slow) var(--ease-out-expo); } @media (hover: hover) and (pointer: fine) { /* La transición se declara aquí y no en la base para no pisar la de `[data-reveal]`, que anima la entrada con otra duración y otra curva. */ .photo-ph:has(img), .section-photo { transition: box-shadow var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart), opacity var(--dur-slow) var(--ease-out-expo); } .photo-ph:has(img):hover, .section-photo:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 4px rgba(10,29,53,.12), 0 18px 34px -14px rgba(10,29,53,.4), 0 46px 84px -34px rgba(10,29,53,.55); } .photo-ph:has(img):hover img, .section-photo:hover img { transform: scale(1.045); } /* Mientras la foto todavía no ha entrado, el hover no debe robarle el translateY(28px) de la animación de reveal: se vería aparecer a medio camino. */ [data-reveal]:not(.is-in).photo-ph:hover, [data-reveal]:not(.is-in).section-photo:hover { transform: translateY(28px); } } /* ======= RAPTOR LIB 03 — ICONOS CON ANIMACIÓN CONTEXTUAL ======= */ /* Cada ícono se anima según lo que significa. Nada genérico. */ /* Cadera: la cabeza femoral se acomoda dentro de la cavidad */ .ico-cadera .cabeza { animation: acomodaCadera 5s var(--ease-out-expo) infinite; } @keyframes acomodaCadera { 0%,100% { transform: translate(3px,3px); } 45%,70% { transform: translate(0,0); } } /* Ultrasonido: el haz barre en abanico */ .ico-usg .haz { transform-origin: 16px 27px; animation: barreUSG 4.5s var(--ease-out-quart) infinite; } @keyframes barreUSG { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } } /* Pie equino varo: el pie se endereza (mismo gesto que el árbol) */ .ico-pie .torcido { animation: enderezaPie 6s var(--ease-out-expo) infinite; } @keyframes enderezaPie { 0%,30% { transform: rotate(-14deg); } 48%,88% { transform: rotate(0); } 100% { transform: rotate(-14deg); } } .ico-pie .torcido { transform-origin: 16px 28px; } /* Pie plano: el arco se forma */ .ico-arco .arco { stroke-dasharray: 34; stroke-dashoffset: 34; animation: formaArco 5s var(--ease-out-expo) infinite; } @keyframes formaArco { 0%,15% { stroke-dashoffset: 34; } 55%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 34; } } /* Escoliosis: la columna se alinea */ .ico-columna .curva { animation: alineaColumna 6s var(--ease-out-expo) infinite; } @keyframes alineaColumna { 0%,30% { transform: skewX(7deg); } 50%,88% { transform: skewX(0); } 100% { transform: skewX(7deg); } } .ico-columna .curva { transform-origin: 16px 16px; } /* Fractura: la placa de crecimiento pulsa */ .ico-hueso .fisis { animation: pulsaFisis 3.6s ease-in-out infinite; } @keyframes pulsaFisis { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ========================================== 5. UTILIDADES DE CONTENIDO ========================================== */ .prose > * + * { margin-top: 1.1rem; } /* El margen grande de arriba separa un H2 del bloque ANTERIOR cuando una misma sección encadena varios temas. Pero al primer H2 no le toca: ese va pegado a su eyebrow. Sin esta línea quedaban 90px entre el eyebrow y su propio título. */ .prose h2 { margin-top: var(--sp-lg); } .prose > .eyebrow + h2 { margin-top: 0; } .prose h3 { margin-top: var(--sp-md); font-size: 1.15rem; } .prose ul:not(.check):not(.btn-row) li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: var(--gris); } .prose ul:not(.check):not(.btn-row) li::before { content: ''; position: absolute; left: .25rem; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--azul); } .s-oscuro .prose ul li { color: var(--claro); } .s-oscuro .prose ul li::before { background: var(--luz); } .nota { border-left: 3px solid var(--luz); background: var(--nieve); padding: 1rem 1.3rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .97rem; color: var(--gris); } .s-oscuro .nota { background: rgba(79,168,245,.09); color: var(--claro); } /* ========================================== 6. MEDIA QUERIES (mobile first) ========================================== */ @media (min-width: 640px) { .grid-pad { grid-template-columns: repeat(2, 1fr); } .precios { grid-template-columns: repeat(2, 1fr); } .trust { grid-template-columns: repeat(2, 1fr); } .cred { grid-template-columns: repeat(2, 1fr); } .mapa iframe { height: 400px; } } @media (min-width: 900px) { :root { --sp-lg: 4.5rem; --sp-xl: 7rem; } .wrap { padding-inline: 2rem; } /* `.hdr-in` es space-between con TRES hijos visibles (marca, nav, botón «Agendar cita»), así que el nav caía justo en el centro. El `margin-left:auto` se come el espacio sobrante y deja marca a la izquierda / nav + botón juntos a la derecha. */ .nav { display: flex; gap: 1.6rem; align-items: center; margin-left: auto; } .hdr-in > .btn { margin-left: .6rem; } /* separa el botón del último enlace */ .hero { padding-top: calc(80px + var(--sp-md)); min-height: 78vh; } .hero-bg { object-position: 72% center; } .hero::after { background: linear-gradient(97deg, rgba(6,20,38,.95) 0%, rgba(6,20,38,.90) 30%, rgba(6,20,38,.62) 55%, rgba(6,20,38,.32) 78%, rgba(6,20,38,.22) 100%); } .discapacidad-media::after { background: linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.68) 48%, rgba(0,0,0,.58) 100%); } .section-photo-online { order: initial; margin-bottom: 0; } .burger, .menu-mobile { display: none !important; } /* ===== Secciones de texto en DOS COLUMNAS (solo escritorio) ===== Antes eran un bloque de 780px centrado dentro de una página de 1180px: se leía como una vista de celular con márgenes, y las secciones quedaban larguísimas. Ahora el bloque ocupa el ancho completo —así el H2 arranca en el mismo borde izquierdo que el resto de las secciones— y el cuerpo fluye en dos columnas. En móvil no aplica nada de esto y todo sigue en una sola lista. */ .wrap.narrow.prose { max-width: var(--wrap); columns: 2; column-gap: 3.2rem; } /* A ancho completo: títulos, callouts, tablas, precios y botones. Todo lo demás (p, h3, ul, ol) fluye en las dos columnas. */ /* Solo van a ancho completo los títulos y los bloques que de plano no caben en media columna (tablas, precios, botonera). Los callouts .answer y .nota fluyen DENTRO de las columnas: si se ponen a ancho completo parten el flujo en grupos minúsculos y aparecen párrafos sueltos con media pantalla vacía al lado. */ .wrap.narrow.prose > .eyebrow, .wrap.narrow.prose > h2, .wrap.narrow.prose > .tbl-wrap, .wrap.narrow.prose > table, .wrap.narrow.prose > .precios, .wrap.narrow.prose > .btn-row, .wrap.narrow.prose > .cred-cards { column-span: all; } /* Tope de medida para los callouts que SÍ quedan a ancho completo (los de las secciones anchas, con tabla o mapa): a 1116px daban 118 y 145 caracteres por renglón. Se topan en vez de centrarse, para no romper la alineación izquierda. */ .answer { max-width: 48rem; } .nota { max-width: 44rem; } .verify { max-width: 42rem; } /* daba 146 caracteres por renglón a ancho completo */ /* Cortes limpios. Los párrafos SÍ pueden partirse entre columnas —así se balancean— pero con dos renglones mínimo de cada lado. Las cajas y las viñetas no se parten, y ningún h3 se queda huérfano al pie de una columna. */ .wrap.narrow.prose { orphans: 2; widows: 2; } .wrap.narrow.prose li, .wrap.narrow.prose > .answer, .wrap.narrow.prose > .nota { break-inside: avoid; } .wrap.narrow.prose h3 { break-inside: avoid; break-after: avoid; } /* El espaciado pasa de margin-top a margin-bottom para que el primer elemento de la segunda columna no arranque hundido respecto al de la primera. */ .wrap.narrow.prose > p, .wrap.narrow.prose > ul, .wrap.narrow.prose > ol { margin-top: 0; margin-bottom: 1.1rem; } .grid-pad { grid-template-columns: repeat(3, 1fr); } .precios { grid-template-columns: repeat(3, 1fr); } .trust { grid-template-columns: repeat(3, 1fr); } .cred { grid-template-columns: repeat(3, 1fr); } /* Izquierda: título + texto + NAP. Derecha: el mapa de la ficha. `stretch` (no `start`) para que el mapa alcance el alto de la columna de texto en vez de quedar como un recuadro flotando arriba. El `min-height` del iframe fija el piso cuando el texto es corto; de ahí para arriba manda la columna izquierda. */ .ubi-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } .ubi-grid .mapa { display: grid; } .ubi-grid .mapa iframe { height: 100%; min-height: 480px; } .ftr-grid { grid-template-columns: 1.5fr 1fr 1.2fr; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; } .float { right: 1.5rem; bottom: 1.5rem; } } @media (min-width: 1180px) { .nav { gap: 1.9rem; } } /* Impresión — que una mamá pueda imprimir las indicaciones */ @media print { .hdr, .float, .cta, .menu-mobile { display: none !important; } body { color: #000; background: #fff; font-size: 11pt; } .s-oscuro { background: #fff !important; color: #000 !important; } .s-oscuro *, .s-oscuro h2 { color: #000 !important; } .faq details { border: 1px solid #999; } .faq details p { display: block !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* ========================================== 7. BOTONES DE CONVERSIÓN + MODALES (estándar Raptor · eventos whatsapp_modal_open / whatsapp_click / call_click) ========================================== */ /* Escala de capas de la skill `botones-conversion`: botones 2000, modales 2100. Antes eran 200 y 300 — por debajo del header (1000), así que con el modal abierto arriba del todo el header se pintaba ENCIMA del velo y seguía siendo clicable. */ .floating-wa-btn, .floating-call-btn { position: fixed; bottom: 1.1rem; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--blanco); box-shadow: 0 6px 20px rgba(8,27,51,.32); z-index: 2000; cursor: pointer; color: #fff; transition: transform var(--dur-fast) var(--ease-out-quart); } /* Estándar Raptor: los DOS flotantes van en el color de marca del cliente, nunca en el verde genérico de WhatsApp. Se distinguen por posición (derecha/izquierda), tamaño (65/58) e icono. Mismo patrón que el sitio de la Dra. Itzel Calixto. El glifo de WhatsApp es el asset compartido /img/whatsapp-icon.svg, blanco. */ .floating-wa-btn { right: 1.1rem; background: var(--azul); width: 65px; height: 65px; animation: waFloat 4s var(--ease-out-quart) infinite; } .floating-call-btn { left: 1.1rem; background: var(--azul); display: none; } /* Se anima `translate` y no `transform`, porque el hover usa transform: scale() y una animación infinita sobre la misma propiedad se lo comería. */ @keyframes waFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } .floating-wa-btn:hover, .floating-call-btn:hover { transform: scale(1.08); } .floating-wa-btn:focus-visible, .floating-call-btn:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; } .wa-icon { width: 35px; height: 35px; } .floating-call-btn svg { width: 30px; height: 30px; } @media (max-width: 899px) { .floating-call-btn { display: flex; } } @media (min-width: 900px) { .floating-wa-btn, .floating-call-btn { bottom: 1.6rem; } .floating-wa-btn { right: 1.6rem; } } .wa-modal, .call-modal { display: none; position: fixed; inset: 0; z-index: 2100; background: rgba(8,27,51,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); justify-content: center; align-items: center; padding: 1rem; } .wa-modal.active, .call-modal.active { display: flex; } .wa-modal-content, .call-modal-content { background: var(--blanco); border-radius: var(--radius); padding: 2rem 1.75rem; width: 100%; max-width: 420px; position: relative; box-shadow: 0 22px 54px rgba(8,27,51,.28); animation: modalIn var(--dur-fast) var(--ease-out-quart); } @keyframes modalIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } .wa-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--gris); cursor: pointer; padding: .2rem .5rem; } .wa-modal-close:hover { color: var(--tinta); } .wa-modal-content h3, .call-modal-content h3 { margin-bottom: .35rem; } .wa-modal-content > p, .modal-subtitle { color: var(--gris); font-size: .95rem; margin-bottom: 1.3rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: .4rem; font-weight: 700; font-size: .9rem; } .form-group input, .form-group select { width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--linea); border-radius: var(--radius-sm); font-size: 1rem; font-family: var(--font-body); color: var(--tinta); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .form-group input:focus, .form-group select:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(30,111,196,.14); } .form-group.is-invalid label { color: #C2410C; } .form-group.is-invalid input, .form-group.is-invalid select { border-color: #E03E2F !important; box-shadow: 0 0 0 3px rgba(224,62,47,.14); animation: fieldShake .35s cubic-bezier(.36,.07,.19,.97) both; } .form-error { display: none; font-size: .8rem; color: #C2410C; margin-top: .35rem; } .form-group.is-invalid .form-error { display: block; } @keyframes fieldShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .btn-wa-submit, .btn-call-confirm { width: 100%; padding: .95rem; background: var(--azul); color: var(--blanco); border: none; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: .4rem; transition: background var(--dur-fast); } .btn-wa-submit:hover, .btn-call-confirm:hover { background: var(--azul-d); } .call-modal-content { text-align: center; } .call-modal-buttons { display: flex; flex-direction: column; gap: .7rem; } .btn-call-cancel { background: transparent; color: var(--gris); padding: .8rem; border: 1.5px solid var(--linea); border-radius: 100px; cursor: pointer; font-family: var(--font-body); font-size: .95rem; transition: border-color var(--dur-fast), color var(--dur-fast); } .btn-call-cancel:hover { border-color: var(--gris); color: var(--tinta); } /* ========================================== PARALLAX DE FONDOS (estándar de agencia · 2026-08-31) ========================================== Los fondos fotográficos se quedan fijos mientras el usuario scrollea y la sección los va descubriendo. Va al final del archivo a propósito: tiene que pisar el `position: absolute` que cada fondo declara arriba. Dos reglas que NO se pueden cambiar sin romper el efecto: 1) Se fija el , NUNCA se pasa la foto a `background-image`. Un fondo CSS no admite `srcset` ni `fetchpriority`: un móvil se bajaría la imagen de escritorio y el elemento LCP perdería prioridad. Fijando el se conserva todo. 2) El recorte se hace con `clip-path`, no con `overflow`. Un elemento `fixed` se ancla al viewport e IGNORA `overflow: hidden`. Y `clip-path` no crea containing block — `transform`, `filter` y `will-change` SÍ lo crearían y matarían el efecto en silencio (por eso ninguna de estas secciones puede llevar `data-reveal` en el
, que declara `will-change: opacity, transform`; en el `.wrap` sí puede). El velo oscuro se queda en `absolute`: debe viajar CON la sección, no con el viewport, o el degradado no coincidiría con el texto que oscurece. */ .hero, .discapacidad-media, .editorial-media, .treatment-media, .ubi-media { clip-path: inset(0); } .hero-bg, .discapacidad-bg, .editorial-bg, .treatment-bg { position: fixed; } /* Ubicación: solo en escritorio. En móvil esa foto NO ocupa la sección entera — se sirve como banda superior 3:2 porque la fachada es apaisada y la sección mide ~1,500 px de alto. Una banda fija al viewport se vería rota, no premium. */ @media (min-width: 900px) { .ubi-bg { position: fixed; } } /* Quien pidió menos movimiento no recibe parallax: el fondo vuelve a viajar con la sección. `transform: none` no serviría aquí, el efecto no es un transform. */ @media (prefers-reduced-motion: reduce) { .hero-bg, .discapacidad-bg, .editorial-bg, .treatment-bg, .ubi-bg { position: absolute; } } /* Las tarjetas de padecimiento ya tenían el mismo gesto (levantar + zoom 1.045); les faltaba la sombra en capas del resto de imágenes del sitio, para que todo el conjunto se comporte igual. */ .pad-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 1px 2px rgba(10,29,53,.10), 0 12px 26px -14px rgba(10,29,53,.34), 0 34px 64px -34px rgba(10,29,53,.46); } .pad-card:hover, .pad-card:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 4px rgba(10,29,53,.12), 0 18px 34px -14px rgba(10,29,53,.4), 0 46px 84px -34px rgba(10,29,53,.55); } /* ========================================== PERFILES VERIFICADOS DEL DOCTOR (footer) ========================================== Rejilla 2x2 con los directorios donde el doctor tiene perfil. No es decoración: son las mismas cuatro URLs del `sameAs` del nodo Person del schema. Lo que el grafo le dice a Google, esto se lo enseña al paciente — y una cita en Doctoralia u Hospital Ángeles pesa más para confiar que cualquier cosa que digamos nosotros de nosotros mismos. La marca va con su nombre en texto, no solo el logotipo: a 24 px nadie reconoce el de Doctoralia ni el de Top Doctors, y el objetivo es justamente que se LEA dónde está verificado. `.ftr a` es `display:block`, así que hay que devolverle el flex aquí. */ .perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.35rem; max-width: 340px; list-style: none; padding: 0; } /* El
  • no pinta nada: es solo el envoltorio que da semántica de lista. `display:contents` lo saca del layout para que el sea la celda de la rejilla directamente. */ .perfiles li { display: contents; } .ftr .perfiles .perfil { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .6rem; border-radius: var(--radius-sm); background: rgba(241,246,251,.06); border: 1px solid var(--linea-d); color: var(--claro); font-size: .8rem; line-height: 1.2; transition: background var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart); } /* Sin recuadro: los logotipos van a pelo sobre el footer. Hizo falta limpiar el blanco HORNEADO en los archivos de Hospital Ángeles y Top Doctors — venían con el fondo dentro del PNG, así que quitar solo el `background` de aquí habría dejado un cuadrado blanco duro en vez del recuadro redondeado. Medido ya limpios contra el #061424 del footer: Doctoralia 5.7:1, Hospital Ángeles 5.5:1, Top Doctors 6.8:1, Facebook 4.1:1. */ .perfiles .perfil img { width: 24px; height: 24px; flex: none; } .perfiles .perfil span { min-width: 0; } .ftr .perfiles .perfil:hover, .ftr .perfiles .perfil:focus-visible { background: rgba(241,246,251,.11); border-color: rgba(200,230,255,.45); color: var(--nieve); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .ftr .perfiles .perfil:hover { transform: none; } } /* ========================================== VIDEO DE FONDO DEL HERO (solo la home) ========================================== Va `fixed` igual que las fotos de fondo: el parallax es el estándar del sitio y el video no es la excepción. Se apoya sobre el , que sigue siendo el elemento LCP y hace de poster hasta que el video puede reproducir. Arranca en `opacity:0` y el JS lo sube a 1 cuando el video de verdad está corriendo. Si el dispositivo bloquea el autoplay —Modo de Bajo Consumo en iOS, Ahorro de Datos en Android— nunca se revela y el visitante se queda con la foto, que es un final digno y no un hueco negro. */ .hero-video { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 63% 22%; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out-quart); } .hero-video.is-visible { opacity: 1; } /* El velo del hero tiene que quedar POR ENCIMA del video, no solo de la foto. */ .hero::after { z-index: 2; } .hero-in { z-index: 3; } /* Cada orientación en su sitio. El `