/* =============================================================
KAIROS — COMPONENTES + MOTION
Dirección: blanco clínico + azul/teal, profundidad suave,
firma = arco/curva de la sonrisa. Motion con criterio (emil).
============================================================= */
/* ---------- MOTION UTILITIES ---------- */
/* Scroll-reveal: opacidad + leve subida, una vez, con stagger via --i.
Gateado por .js (seteado en antes del paint) → sin JS todo se ve. */
.js [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ---------- ICONOS ---------- */
.icon { display: inline-block; vertical-align: middle; flex: none; }
/* ---------- EYEBROW / TÍTULOS ----------------------------------------------
Regla de marca (s4): el arco de sonrisa es la FIRMA y aparece UNA sola vez
por página, bajo la palabra clave del H1 (.title-mark). Los títulos de
sección NO lo llevan — se diferencian con el eyebrow. Antes iba en todos y
se volvía repetitivo.
El eyebrow es un elemento de BLOQUE: si es inline convive en la misma línea
con títulos inline-block y rompe la alineación supratítulo/título. */
.eyebrow {
display: flex; align-items: center; gap: .5rem;
width: fit-content;
color: var(--color-accent-600);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: .06em; text-transform: uppercase;
line-height: 1.2;
}
.eyebrow::before {
content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none;
background: var(--color-accent);
}
/* Firma: subrayado curvo (sonrisa). Solo en .title-mark, dentro del H1. */
.title-mark { position: relative; display: inline-block; font-style: normal; }
.title-mark--accent { color: var(--color-accent-600); }
.title-mark::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -.22em; height: .3em;
background: no-repeat center / 100% 100%
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none'%3E%3Cpath d='M3 8.5C42 3 158 3 197 8.5' stroke='%2380c2c1' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---------- BOTONES ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .85rem 1.5rem;
font-family: inherit; font-weight: var(--fw-semibold);
font-size: var(--fs-sm); line-height: 1;
border-radius: var(--radius-full);
border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn .icon { transition: transform var(--dur) var(--ease-out); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon--arrow { transform: translateX(3px); }
}
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { color: #fff; box-shadow: var(--shadow); }
.btn--whatsapp { background: var(--color-whatsapp); color: #fff; box-shadow: var(--shadow-sm); }
.btn--whatsapp:hover { color: #fff; box-shadow: var(--shadow-teal); }
.btn--ghost { background: var(--color-white); color: var(--color-primary-700); border-color: var(--border); }
.btn--ghost:hover { background: var(--color-primary-050); color: var(--color-primary-700); border-color: color-mix(in oklch, var(--color-primary) 30%, var(--border)); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--fs-base); }
.btn-group { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
/* ---------- TOPBAR ---------- */
.topbar {
background: var(--color-primary-700);
color: color-mix(in oklch, #fff 88%, transparent);
font-size: var(--fs-xs);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px; flex-wrap: wrap; }
.topbar__group { display: flex; align-items: center; gap: var(--space-5); }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.topbar__item .icon { opacity: .8; }
.topbar__item:hover { color: #fff; }
.topbar__item:hover .icon { opacity: 1; }
.topbar__item--muted { opacity: .82; }
@media (max-width: 640px) { .topbar__item--muted { display: none; } }
/* ---------- HEADER ---------------------------------------------------------
Fondo BLANCO PURO (pedido de Bruno, s4): el header es la única superficie
blanca fija del sitio y hace de "techo" limpio sobre el crema. El logo va
recortado al contenido (viewBox ajustado) para ganar presencia sin subir
la altura de la barra. */
.site-header {
position: sticky; top: 0; z-index: var(--z-header);
background: var(--color-white);
border-bottom: 1px solid transparent;
transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.site-header.is-stuck {
box-shadow: 0 4px 20px oklch(0.40 0.05 253 / 0.10);
border-bottom-color: var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-h); }
.site-header__brand { display: flex; align-items: center; }
.site-header__brand .site-logo, .site-footer__brand .site-logo { display: inline-flex; }
.site-header__brand img, .site-header__brand .custom-logo {
height: var(--logo-h); max-height: var(--logo-h); width: auto; max-width: min(46vw, 260px); object-fit: contain;
}
@media (max-width: 480px) { .site-header__brand img, .site-header__brand .custom-logo { height: 38px; } }
.site-title { font-weight: var(--fw-extrabold, 800); font-size: var(--fs-lg); text-decoration: none; color: var(--color-primary-700); letter-spacing: -0.02em; }
/* ---------- NAV ---------- */
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__menu { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.site-nav__menu a {
text-decoration: none; color: var(--color-ink); font-weight: var(--fw-medium);
font-size: var(--fs-sm); padding: .4rem 0; position: relative;
transition: color var(--dur) var(--ease);
}
.site-nav__menu a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
background: var(--color-accent); border-radius: 2px;
transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out);
}
.site-nav__menu a:hover { color: var(--color-primary-700); }
@media (hover: hover) { .site-nav__menu a:hover::after { transform: scaleX(1); } }
.site-nav__menu .current-menu-item > a { color: var(--color-primary-700); }
.site-nav__menu .current-menu-item > a::after { transform: scaleX(1); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--color-ink); }
.nav-toggle .nav-toggle__bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.nav-toggle__bar { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop {
position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
background: oklch(0.25 0.02 253 / 0.4); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
/* Con el drawer abierto el header sube por encima del backdrop (299) y del panel
(300). Si no, el hamburguesa —que se transforma en X— queda tapado y el único
modo de cerrar es tocar el backdrop o Escape: funciona, pero sin control
visible a la vista. */
body.nav-open .site-header { z-index: calc(var(--z-nav) + 1); }
/* El toggle y el panel son hermanos dentro del header, así que subir el header
no alcanza: hay que elevar el botón por encima del panel (300) para que la X
quede visible y clickeable. `position` explícito porque en static el z-index
no aplica. */
body.nav-open .nav-toggle { position: relative; z-index: calc(var(--z-nav) + 1); }
@media (max-width: 900px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: fixed; inset: 0 0 0 auto; width: min(86vw, 350px);
flex-direction: column; align-items: stretch; justify-content: flex-start;
gap: var(--space-2);
padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-6);
background: var(--bg); box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--dur) var(--ease-out);
z-index: var(--z-nav); overflow-y: auto;
}
.site-nav.is-open { transform: translateX(0); }
.site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__menu li { border-bottom: 1px solid var(--border); }
.site-nav__menu a { padding: .95rem 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.site-nav__menu a::after { display: none; }
.site-nav__cta { margin-top: var(--space-4); }
.site-nav__cta .btn { width: 100%; }
body.nav-open { overflow: hidden; }
}
/* ---------- HERO FULL-BLEED CON CARRUSEL -----------------------------------
Feedback de Carla (27-jul): "que reine la imagen… mucha imagen y poco texto",
"fotos en grande y video", "tipo un carrusel". La foto ocupa la pantalla y el
texto va encima, reducido a eyebrow + H1 + CTA.
Legibilidad: el texto blanco sobre foto necesita contraste garantizado, así
que el degradé va con el NAVY DE MARCA (no negro), más denso abajo-izquierda,
que es donde vive el texto. Medido sobre las 4 fotos: >7:1 en el área del H1.
Sin JS se ve como una foto fija: los slides que no son el primero están
ocultos por CSS y los dots no se muestran. */
.hero {
position: relative; overflow: clip; isolation: isolate;
min-height: clamp(30rem, 76vh, 44rem);
display: grid; align-items: end;
/* Padding inferior chico a propósito: baja el bloque de texto a la franja
donde el velo es denso, en vez de dejarlo flotando en el medio claro. */
padding-block: clamp(var(--space-10), 9vw, var(--space-12)) var(--space-8);
background: var(--color-ink);
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s var(--ease-in-out); }
.hero__slide.is-active { opacity: 1; z-index: 2; }
/* El slide que sale se queda OPACO debajo del que entra hasta que el fade
termina. Si los dos animan a la vez contra el fondo, en el medio se ve el
navy a través de ambos y la foto parece lavada, "con filtro". */
.hero__slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
.hero__slide img, .hero__slide video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__pic { display: block; min-width: 0; height: 100%; }
/* Slide partido: dos fotos verticales que Carla mandó para ir juntas. La línea
entre las dos es el fondo navy del hero, no un borde. */
.hero__slide--split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* El video es vertical (9:16) en un hero apaisado: se encuadra un poco más
arriba que el centro, que es donde ocurre la acción del recorrido. */
.hero__slide--video video { object-position: center 42%; }
/* Velo de marca. Va CONCENTRADO abajo-izquierda —donde vive el texto— y suelta
la mitad superior derecha casi limpia: si el velo es parejo la foto se ve
lavada y gris, que es exactamente lo contrario de "que reine la imagen". */
.hero__slides::after {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
/* Más corto y más concentrado que antes: el velo llegaba al 76% de la altura
y al 62% del ancho, así que teñía la foto entera y Carla preguntó si les
habíamos puesto un filtro. Ahora muere en el 52% / 48% y el resto de la
imagen queda limpio; la legibilidad del texto la termina de resolver el
text-shadow del bloque. */
background:
linear-gradient(to top, oklch(0.26 0.021 259 / 0.86) 0%, oklch(0.26 0.021 259 / 0.4) 22%, oklch(0.26 0.021 259 / 0.05) 44%, transparent 52%),
linear-gradient(100deg, oklch(0.26 0.021 259 / 0.44) 0%, oklch(0.26 0.021 259 / 0.08) 32%, transparent 48%);
}
/* z-index 5: por encima de los slides (1-2) y del velo (3), que subieron al
sumar el cross-fade en dos capas. */
.hero__inner { position: relative; z-index: 5; }
/* Sombra suave en todo el bloque: sobre foto da legibilidad sin tener que
oscurecer más la imagen. El eyebrow va BLANCO y no en teal de marca — el teal
claro sobre las zonas claras de la foto no llegaba a contraste legible. */
/* El límite de medida va en el TEXTO, no en el bloque: con `max-width` en el
contenedor los dos botones no entraban en 42ch y "Conocer nuestros
tratamientos" caía a una segunda línea, apilados en pleno desktop. */
.hero__content {
color: #fff;
text-shadow: 0 1px 16px oklch(0.26 0.021 259 / 0.55), 0 1px 3px oklch(0.26 0.021 259 / 0.35);
}
.hero__content .eyebrow,
.hero__content .hero__title,
.hero__content > p { max-width: 42ch; }
/* El eyebrow entero en una línea: con el max-width del bloque se partía en dos. */
.hero__content .eyebrow { margin-bottom: var(--space-4); color: #fff; white-space: nowrap; }
.hero__content .eyebrow::before { background: var(--color-secondary); }
@media (max-width: 520px) { .hero__content .eyebrow { white-space: normal; } }
.hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold, 800); margin-bottom: var(--space-4); color: #fff; text-wrap: balance; }
.hero__title .title-mark--accent { color: var(--color-secondary); }
/* Bajada del hero (Carla, 13-ago). Sobre foto, el blanco puro compite con el
H1: un blanco apenas velado los jerarquiza sin perder contraste (queda muy
por encima de AA sobre el velo navy). */
.hero__lead {
font-size: var(--fs-lg);
color: color-mix(in oklch, #fff 88%, transparent);
margin-bottom: var(--space-6);
text-wrap: pretty;
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Botón fantasma sobre foto: el borde tenue del original desaparecía. */
.btn--on-media {
background: color-mix(in oklch, #fff 14%, transparent); color: #fff;
border-color: color-mix(in oklch, #fff 55%, transparent);
backdrop-filter: blur(8px);
}
.btn--on-media:hover { background: color-mix(in oklch, #fff 26%, transparent); color: #fff; }
/* Flechas discretas: translúcidas sobre la foto, se afirman al pasar el mouse.
Van centradas verticalmente, lejos del bloque de texto y del CTA. */
.hero__arrow {
position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
display: none; place-items: center;
width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
border: 1px solid color-mix(in oklch, #fff 34%, transparent);
background: oklch(0.26 0.021 259 / 0.34); color: #fff;
backdrop-filter: blur(3px);
transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out), opacity var(--dur) var(--ease);
opacity: .75;
}
.js .hero__arrow { display: grid; }
.hero__arrow:hover { background: oklch(0.26 0.021 259 / 0.62); opacity: 1; }
.hero__arrow:active { transform: translateY(-50%) scale(0.94); }
.hero__arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.hero__arrow--prev .icon { transform: rotate(180deg); }
.hero__arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 560px) {
/* En pantalla chica las flechas se superponen con la foto y el texto: los
dots y el swipe alcanzan. */
.js .hero__arrow { display: none; }
}
.hero__dots { position: absolute; z-index: 4; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); display: none; gap: .5rem; }
.js .hero__dots { display: flex; }
.hero__dot {
width: 40px; height: 4px; padding: 0; border: 0; cursor: pointer; border-radius: var(--radius-full);
background: color-mix(in oklch, #fff 40%, transparent);
transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__dot.is-active { background: #fff; }
.hero__dot:hover { transform: scaleY(1.6); }
/* Área táctil de 44px sin engordar la línea (WCAG 2.5.8). */
.hero__dot::after { content: ""; position: absolute; inset-block: -20px; width: 40px; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem .85rem; font-size: var(--fs-xs); font-weight: var(--fw-medium);
color: var(--color-primary-700); background: var(--color-white);
border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: var(--shadow-xs);
}
.chip .icon { color: var(--color-accent-600); }
@media (max-width: 820px) {
/* En vertical la foto tiene menos ancho útil: el velo sube un poco para que
el H1 no caiga sobre la parte clara de la imagen. */
.hero { min-height: clamp(28rem, 82vh, 38rem); }
.hero__content { max-width: none; }
.hero__slides::after {
background: linear-gradient(to top, oklch(0.26 0.021 259 / 0.94) 0%, oklch(0.26 0.021 259 / 0.62) 46%, oklch(0.26 0.021 259 / 0.2) 78%, transparent 100%);
}
.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
.hero__dots { left: clamp(1rem, 4vw, 2.5rem); right: auto; bottom: auto; top: var(--space-5); }
.hero__dot { width: 28px; }
}
/* Los slides partidos muestran solo su primera mitad en mobile: a 390px, dos
mitades de ~195px dejan de leerse como fotos y se leen como tiras. El
breakpoint coincide con el `sizes` del ![]()
, así el browser no descarga la
variante grande de una imagen que no va a mostrar. */
@media (max-width: 720px) {
.hero__slide--split { grid-template-columns: 1fr; gap: 0; }
.hero__img--second { display: none; }
}
/* ---------- CARDS / ESPECIALIDADES ------------------------------------------
Las especialidades se muestran SIEMPRE completas (home y hub).
Grilla ÚNICA de especialidades: las 8 del mismo tamaño (Carla, 04-ago).
Reemplaza los dos tiers de s4 (.esp-tier--star / --rest) y su rótulo
separador. 4 columnas × 2 filas cierra parejo con 8 items; el título más
largo del set es "Operatoria dental" y entra en una línea a este ancho. */
.esp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1040px) { .esp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .esp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .esp-grid { grid-template-columns: 1fr; } }
.card {
position: relative; display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-6); background: var(--color-white);
border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
overflow: hidden;
}
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; color: var(--text); } }
.card__icon {
display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
background: var(--color-secondary-050); color: var(--color-accent-600);
transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease);
}
@media (hover: hover) { .card:hover .card__icon { transform: scale(1.08) rotate(-4deg); background: var(--color-accent); color: #fff; } }
.card__title { font-size: var(--fs-lg); }
/* Compacta: es la card de TODAS las especialidades (ícono + nombre + flecha).
`.card--star` se eliminó junto con los tiers. */
.card--compact {
flex-direction: row; align-items: center; gap: var(--space-4);
padding: var(--space-4) var(--space-5);
}
/* `flex: none` NO es opcional: sin él el medallón es un flex item encogible y
un título largo lo comprime hasta 0 de ancho — el ícono desaparecía en la
card de Odontopediatría (la palabra más larga, en columnas angostas). El
title necesita min-width:0 para poder cortar. */
.card--compact .card__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.card--compact .card__title { flex: 1; min-width: 0; font-size: var(--fs-base); margin: 0; }
.card--compact .card__go { color: var(--color-primary-600); display: inline-flex; flex: none; transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) { .card--compact:hover .card__go { transform: translateX(3px); } }
/* ---------- SECCIÓN HELPERS ------------------------------------------------
.section__head es EL componente de encabezado de sección: siempre columna,
siempre el mismo gap entre eyebrow → título → lead. Alineación explícita
con --center (nada de `style="margin-inline:auto"` suelto en los templates).
REGLA DE ALINEACIÓN (s4, para que no vuelva a mezclarse):
· Encabezado CENTRADO cuando el contenido de la sección es una grilla
simétrica a todo el ancho (especialidades, instalaciones, testimonios,
beneficios, proceso, FAQ, valores, equipo, IG, obras sociales).
· Encabezado a la IZQUIERDA solo cuando el propio contenido está anclado
a la izquierda: el bloque "¿En qué consiste?", que comparte fila con el
aside "Cuándo consultar", y los page-hero (H1 siempre a la izquierda). */
.section__head {
display: flex; flex-direction: column; align-items: flex-start;
gap: var(--space-3);
max-width: var(--wrap-narrow);
margin-bottom: var(--space-7, 2.5rem);
}
.section__head .section__lead { margin-bottom: 0; }
.section__head--center,
.section--center .section__head {
margin-inline: auto; text-align: center; align-items: center;
}
.section__head--center .eyebrow,
.section--center .section__head .eyebrow { justify-content: center; }
.center-cta { text-align: center; margin-top: var(--space-7); }
/* ---------- NUESTRO ESPACIO (video vertical + 4 fotos) ---------------------
Carla, 04-ago: el video del recorrido primero y las 4 fotos a su derecha.
El video manda el alto de la fila (es 9:16, lo más alto del bloque) y las
fotos se acomodan en un 2×2 que iguala esa altura: por eso la grilla fija
las filas y las fotos no declaran aspect-ratio propio — la lección de s3,
cuando cada item traía el suyo y las filas quedaban desparejas. */
.espacio-grid {
display: grid;
grid-template-columns: minmax(240px, 0.62fr) 1.38fr;
gap: var(--space-4);
align-items: stretch;
}
.espacio-video {
position: relative; margin: 0; overflow: hidden;
aspect-ratio: 9 / 16; max-height: 620px;
border-radius: var(--radius); box-shadow: var(--shadow-sm);
background: var(--color-ink);
}
.espacio-video video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
background: var(--color-ink);
}
/* Botón de play/pausa propio en vez de `controls`: la barra nativa sobre un
video vertical decorativo se come el encuadre. Sigue siendo un control real
y visible, que es lo que pide WCAG 2.2.2 para algo que se mueve solo. */
.espacio-video__toggle {
position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3);
width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center;
background: oklch(0.2 0.02 259 / 0.55); color: #fff;
backdrop-filter: blur(4px);
transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.espacio-video__toggle:hover { background: oklch(0.2 0.02 259 / 0.8); }
.espacio-video__toggle:active { transform: scale(0.94); }
/* Triángulo de play; con .is-playing pasa a dos barras de pausa. */
.espacio-video__icon {
width: 0; height: 0; margin-left: 3px;
border-left: 13px solid currentColor;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.is-playing .espacio-video__icon {
width: 13px; height: 15px; margin-left: 0; border: 0;
border-left: 4px solid currentColor; border-right: 4px solid currentColor;
box-sizing: border-box;
}
.espacio-fotos {
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: var(--space-4);
}
.espacio-foto {
position: relative; margin: 0; overflow: hidden; min-height: 0;
border-radius: var(--radius); box-shadow: var(--shadow-sm);
background: linear-gradient(150deg, var(--color-secondary-050), var(--color-primary-050));
}
.espacio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) { .espacio-foto:hover img { transform: scale(1.05); } }
.espacio-video figcaption,
.espacio-foto figcaption {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: var(--space-6) var(--space-4) var(--space-3);
color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
background: linear-gradient(to top, oklch(0.2 0.02 259 / 0.78), transparent);
pointer-events: none;
}
.espacio-video figcaption { padding-right: 60px; } /* deja lugar al botón */
@media (max-width: 860px) {
/* El video pasa arriba, a lo ancho, y las fotos quedan en 2×2 debajo: en una
columna angosta un 9:16 al 62% se vuelve una tira ilegible. */
.espacio-grid { grid-template-columns: 1fr; }
.espacio-video { aspect-ratio: 3 / 4; max-height: 460px; margin-inline: auto; width: min(100%, 340px); }
.espacio-fotos { grid-auto-rows: clamp(110px, 30vw, 170px); grid-template-rows: none; gap: var(--space-3); }
/* Las miniaturas quedan en ~117px de alto: con el caption a tamaño de
escritorio, "Recepción y sala de espera" se comía media foto. */
.espacio-foto figcaption { font-size: var(--fs-xs); padding: var(--space-5) var(--space-3) var(--space-2); line-height: 1.25; }
}
/* ---------- RESEÑAS DE GOOGLE (slider) ------------------------------------
s6: dejaron de ser testimonios propios (vacíos desde s4) para ser reseñas
reales de Google, y pasaron de 3 a 6. */
.resenas { position: relative; overflow: clip; }
.resenas__link { text-align: center; margin-top: var(--space-6); }
.slider { position: relative; }
.slider__track { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: var(--space-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slider__track::-webkit-scrollbar { display: none; }
.testimonio {
scroll-snap-align: start; flex: 0 0 min(420px, 82%);
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: var(--space-4);
}
/* Los íconos del set son de trazo (`fill:none; stroke:currentColor`), que para
una estrella de puntuación se lee como "vacía" = mala calificación. Acá se
rellenan. */
.testimonio__stars { display: inline-flex; gap: 2px; color: #f5a623; }
.testimonio__stars .icon { fill: currentColor; stroke: currentColor; stroke-width: 1px; stroke-linejoin: round; }
.testimonio p { font-size: var(--fs-base); color: var(--color-ink); }
.testimonio__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.testimonio__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand-soft); color: #fff; display: grid; place-items: center; font-weight: var(--fw-bold); flex: none; }
.testimonio__name { font-weight: var(--fw-semibold); color: var(--color-ink); }
.testimonio__meta { color: var(--text-muted); font-size: var(--fs-sm); }
.slider__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); }
.slider__btn {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
background: var(--color-white); color: var(--color-primary-700); cursor: pointer;
display: grid; place-items: center;
transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slider__btn:hover { background: var(--color-primary-700); color: #fff; }
.slider__btn:active { transform: scale(0.94); }
.slider__btn[disabled] { opacity: .4; cursor: default; }
.slider__prev .icon { transform: rotate(180deg); }
/* En desktop entran 3 por vez. La nav se MANTIENE visible (a diferencia de s4,
cuando había exactamente 3 reseñas y sobraba): ahora son 6 y sin flechas la
mitad queda escondida sin ninguna señal de que se puede scrollear. */
@media (min-width: 940px) {
.testimonio { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); }
}
/* ---------- INSTAGRAM (banda de invitación) --------------------------------
Cuando llegue el handle real se puede volver a una grilla de reels; hasta
entonces, una banda limpia en vez de recuadros vacíos. */
.ig-cta {
display: flex; align-items: center; gap: var(--space-5);
padding: var(--space-6);
background: linear-gradient(120deg, var(--color-secondary-050), var(--color-primary-050));
border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ig-cta__icon {
display: grid; place-items: center; width: 56px; height: 56px; flex: none;
border-radius: var(--radius-full); background: var(--color-white); color: var(--color-accent-600);
box-shadow: var(--shadow-xs);
}
.ig-cta__body { flex: 1; }
.ig-cta__title { font-size: var(--fs-xl); margin-bottom: .25rem; }
.ig-cta__body p { color: var(--text-muted); font-size: var(--fs-sm); }
.ig-cta .btn { flex: none; }
@media (max-width: 640px) {
.ig-cta { flex-direction: column; text-align: center; }
.ig-cta .btn { width: 100%; }
}
/* ---------- POR QUÉ ELEGIRNOS ----------------------------------------------
Reemplaza el teaser de equipo del home (Carla descartó la foto grupal de dos
hileras). Bloque de marca: copy centrado + indicadores + los 4 diferenciales.
Los indicadores se mudaron acá desde Sobre nosotros el 13-ago. Van sobre el
fondo azul claro de la sección, así que la caja blanca se recorta sola: no
necesita sombra ni cambios respecto de cómo se veía allá. */
.porque .stats-box { margin-top: var(--space-7); }
/* Las cuatro razones (Carla numeró 01-04 y pidió mejorar el diseño). El número
es decorativo y grande, detrás del texto: ancla la lectura y da orden sin
sumar un ícono más a una página que ya tiene ocho. */
.razones {
list-style: none; padding: 0; margin-top: var(--space-5);
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.razon {
position: relative; overflow: hidden;
padding: var(--space-6) var(--space-5);
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.razon__num {
/* Entero y dentro de la tarjeta: con `top` negativo el overflow:hidden le
cortaba la mitad de arriba y se leía como un error de maquetado. */
position: absolute; top: var(--space-2); right: var(--space-4);
font-size: 3.75rem; font-weight: var(--fw-extrabold, 800); line-height: 1;
color: var(--color-secondary-050);
/* Decorativo: no debe robarle el clic ni la selección al texto. */
pointer-events: none; user-select: none;
}
.razon__title { position: relative; font-size: var(--fs-lg); margin-bottom: var(--space-2); color: var(--color-primary-700); }
/* Regla corta bajo el título: separa título de bajada sin una línea de borde
que atraviese toda la tarjeta. */
.razon__title::after {
content: ""; display: block; width: 28px; height: 3px; border-radius: 2px;
margin-top: var(--space-3); background: var(--color-secondary);
}
.razon__desc { position: relative; color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
@media (max-width: 900px) { .razones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .razones { grid-template-columns: 1fr; } }
/* ---------- OBRAS SOCIALES ---------- */
/* Es la única sección con el 3er escalón de fondo (azul muy claro). */
.obras-sociales { background: var(--bg-tint); position: relative; overflow: clip; }
/* ⚠️ El max-width NO va acá: este div ES el .wrap, y limitarlo hacía que el
bloque de 720px se centrara en el viewport en vez de arrancar en el borde
izquierdo del wrap → toda la sección aparecía indentada respecto del resto
de la página. El ancho lo limita .section__head, que ya está en 720px. */
.obras-sociales__inner { text-align: center; }
.obras-sociales__inner > p { color: var(--text-muted); max-width: var(--wrap-narrow); margin-inline: auto; }
.oo-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5) var(--space-6); }
.obras-sociales .oo-pills, .obras-lista .oo-pills { justify-content: center; }
.obras-lista .obras-lista__note { margin-inline: auto; text-align: center; }
.oo-pill { padding: .5rem 1rem; background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-primary-700); }
.oo-pill--muted { color: var(--text-muted); font-style: italic; }
/* ---------- LEGALES ---------- */
/* Página-documento: una sola columna de lectura, CENTRADA. Es la única página
del sitio cuyo contenido es un bloque largo de prosa dentro del wrap de
1180px, y alineada a la izquierda dejaba ~400px muertos a la derecha en
escritorio: contra el footer, que sí ocupa el wrap entero justo debajo, el
texto se leía como una página a medio maquetar y no como una decisión.
El H1 se centra con él para que columna y título compartan eje —la regla
general de heroes a la izquierda (s4) vale cuando el contenido de abajo
está anclado a la izquierda, que acá deja de ser el caso. */
.legales .entry__content { margin-inline: auto; }
.page-hero--legales .wrap { text-align: center; }
.page-hero--legales .eyebrow { margin-inline: auto; }
/* ---------- CTA FINAL ---------- */
.cta-final { position: relative; overflow: clip; background: var(--color-primary-700); color: #fff; text-align: center; }
.cta-final::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 50vw; height: 50vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, oklch(0.62 0.09 190 / 0.5), transparent 70%); pointer-events: none; }
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final__inner { max-width: 680px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.cta-final .section__title, .cta-final h2 { color: #fff; }
.cta-final p { color: color-mix(in oklch, #fff 84%, transparent); margin: 0; }
.cta-final .btn { margin-top: var(--space-3); }
.cta-final--strong { background: var(--grad-brand); }
/* ---------- PAGE HERO (interiores) ---------- */
.page-hero { position: relative; overflow: clip; background: var(--grad-surface); padding-block: clamp(var(--space-8), 6vw, var(--space-10)); border-bottom: 1px solid var(--border); }
/* El aura llevaba `width:45vw; height:45vw; max-width:520px` y NINGÚN
max-height: al tope el ancho quedaba clavado en 520px mientras el alto
seguía creciendo con el viewport (864px a 1920), así que el círculo se
estiraba a un óvalo vertical y de él sólo se veía una franja pegada al
borde derecho, cortada a filo por el borde inferior del hero. Se notaba
sobre todo en los heroes cortos (legales: 243px de alto). `aspect-ratio`
mantiene el círculo a cualquier ancho, y con el centro del degradé dentro
de la caja el resplandor se apaga solo antes del borde. */
.page-hero::before { content: ""; position: absolute; inset: -22% -6% auto auto; width: min(45vw, 520px); aspect-ratio: 1; background: var(--aura-teal); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: var(--space-4); }
.page-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold, 800); margin-bottom: var(--space-4); }
.page-hero .section__lead { margin-bottom: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero .hero__chips { margin-top: var(--space-5); }
/* ---------- SOBRE NOSOTROS ---------- */
.page-hero--nosotros .page-hero__title { margin-bottom: var(--space-4); }
.page-hero--nosotros .section__lead { max-width: 60ch; }
/* Historia: foto ancha + tarjeta de texto montada sobre su borde inferior
("la foto atrás grande y el texto medio encima" — Carla, 04-ago). El solape
lo da un margin-top negativo sobre la card, no position:absolute, así el
alto de la sección lo sigue calculando el flujo y nunca se pisan. */
/* Alto fijo y ancho completo, en vez de `aspect-ratio` + `max-height`: con esa
combinación el browser achica el ANCHO para conservar la proporción, la foto
quedaba más angosta que el wrap y pegada a la izquierda mientras la tarjeta
se centraba — las dos desalineadas. El recuadre lo hace object-fit. */
.historia-foto {
position: relative; margin: 0; width: 100%; height: clamp(260px, 32vw, 440px);
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
background: linear-gradient(150deg, var(--color-primary-050), var(--color-secondary-050));
}
.historia-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia-card {
position: relative; z-index: 1;
width: min(100%, 68ch);
margin: clamp(-96px, -7vw, -48px) auto 0;
padding: clamp(var(--space-6), 4vw, var(--space-8));
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.historia-card .eyebrow { margin-bottom: var(--space-3); }
.historia-card h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
@media (max-width: 720px) {
/* Sin solape: en pantalla angosta la card tapa casi toda la foto y no se
entiende que hay una foto atrás. */
.historia-card { margin-top: var(--space-5); }
}
/* Caja destacada (stats). Sobria y sin count-up: el dato acá respalda.
`grid-auto-flow: column` en vez de un número fijo de columnas: la caja pasó
de 4 indicadores a 3 el 13-ago, y con `repeat(4, 1fr)` quedaba una celda
vacía. Así se acomoda sola a los que haya. */
.stats-box {
list-style: none; padding: 0; margin: 0;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.stat {
display: flex; flex-direction: column; justify-content: center; gap: .25rem;
padding: var(--space-6) var(--space-5);
border-left: 1px solid var(--border);
text-align: center;
}
.stat:first-child { border-left: 0; }
.stat__num { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold, 800); color: var(--color-primary-700); line-height: 1; }
.stat__label { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: balance; }
@media (max-width: 700px) {
/* En vertical los separadores pasan de izquierda a arriba; si no, queda una
cuadrícula a medio dibujar. */
.stats-box { grid-auto-flow: row; }
.stat { border-left: 0; }
.stat + .stat { border-top: 1px solid var(--border); }
}
/* ¿Cómo trabajamos?: línea de tiempo de 4 pasos (rediseñada 13-ago).
El conector va como ::after del y no como elemento suelto, así que
desaparece solo cuando la fila se rompe. Truco de medida: el ocupa
exactamente una columna del grid, así que la distancia entre los centros de
dos discos consecutivos es "100% del li + el gap". De ahí sale el ancho del
conector sin necesidad de saber cuánto mide la columna. */
.flujo {
--disco: 92px; /* diámetro del disco con el ícono */
--sep: 12px; /* aire entre el disco y el conector */
--hueco: var(--space-6);
list-style: none; padding: 0; margin-top: var(--space-8);
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hueco);
}
.flujo__paso { position: relative; text-align: center; }
.flujo__marca { position: relative; display: inline-block; margin-bottom: var(--space-5); }
.flujo__disco {
position: relative; display: grid; place-items: center;
width: var(--disco); height: var(--disco); border-radius: 50%;
background: var(--color-white); color: var(--color-accent-600);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
/* Anillo tenue alrededor del disco: le da presencia sin engordar el borde
(el "algo un poco más grande" que pedía Carla). */
.flujo__disco::before {
content: ""; position: absolute; inset: -7px;
border-radius: 50%; border: 1px solid var(--color-secondary-050);
}
.flujo__num {
position: absolute; top: -4px; left: -4px;
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--color-primary-700); color: #fff;
font-size: var(--fs-sm); font-weight: var(--fw-bold);
box-shadow: 0 0 0 3px var(--color-surface);
}
.flujo__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.flujo__desc { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
/* Conector del borde de un disco al borde del siguiente (::after = la línea) y
su punta de flecha (::before). Van en dos elementos y no en uno solo: la
punta tiene que sobresalir del alto de la línea, y `clip-path` sobre una caja
de 2px solo puede recortar, nunca agrandar. */
.flujo__paso:not(:last-child)::after {
content: ""; position: absolute; z-index: 0;
top: calc(var(--disco) / 2); left: calc(50% + var(--disco) / 2 + var(--sep));
width: calc(100% + var(--hueco) - var(--disco) - var(--sep) * 2);
height: 2px; background: var(--color-secondary);
}
.flujo__paso:not(:last-child)::before {
content: ""; position: absolute; z-index: 0;
top: calc(var(--disco) / 2 + 1px);
left: calc(100% + var(--hueco) / 2 - var(--disco) / 2 - var(--sep));
width: 9px; height: 9px;
border-top: 2px solid var(--color-secondary);
border-right: 2px solid var(--color-secondary);
transform: translate(-100%, -50%) rotate(45deg);
}
/* Nota de cierre: además de sumar el dato, mete el aire que faltaba entre los
pasos y el bloque navy del CTA — el "está muy encima del azul" de Carla. */
.flujo-nota {
display: flex; align-items: center; gap: var(--space-4);
max-width: 62rem; margin: var(--space-8) auto 0;
padding: var(--space-5) var(--space-6);
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty;
}
.flujo-nota__icon { flex: none; color: var(--color-accent-600); display: grid; place-items: center; }
.flujo-nota strong {
flex: none; color: var(--color-primary-700); font-size: var(--fs-base);
padding-right: var(--space-4); border-right: 1px solid var(--border);
}
@media (max-width: 1000px) {
.flujo { grid-template-columns: 1fr 1fr; row-gap: var(--space-7); }
/* Con dos columnas el conector del 2º paso apuntaría al vacío. */
.flujo__paso:nth-child(even)::after,
.flujo__paso:nth-child(even)::before { display: none; }
}
@media (max-width: 640px) {
/* Vertical: el disco pasa a la izquierda y la línea corre entre los discos,
que es como se lee una secuencia en una pantalla angosta. */
.flujo { --disco: 68px; grid-template-columns: 1fr; row-gap: var(--space-6); }
.flujo__paso {
display: grid; grid-template-columns: var(--disco) 1fr;
gap: var(--space-4); align-items: start; text-align: left;
}
.flujo__marca { margin-bottom: 0; }
.flujo__num { width: 26px; height: 26px; font-size: var(--fs-xs); }
/* La línea corre vertical entre los discos; la punta de flecha se apaga
(en vertical el orden ya lo da la lectura de arriba hacia abajo). */
.flujo__paso::before { display: none; }
.flujo__paso:not(:last-child)::after,
.flujo__paso:nth-child(even):not(:last-child)::after {
display: block;
top: var(--disco); left: calc(var(--disco) / 2 - 1px);
width: 2px; height: calc(100% - var(--disco) + var(--space-6));
}
.flujo-nota { flex-direction: column; align-items: flex-start; gap: var(--space-2); text-align: left; }
.flujo-nota strong { border-right: 0; padding-right: 0; }
}
@media (max-width: 900px) { .proceso-step::after { display: none; } }
/* Valores */
/* Valores: la sección salió de Sobre nosotros el 04-ago (ver el template). El
componente se conserva junto con kairos_valores() por si se repone. */
.valores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.valor { text-align: center; padding: var(--space-6) var(--space-4); background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius); }
.valor__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-secondary-050); color: var(--color-accent-600); margin-bottom: var(--space-4); }
.valor__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.valor__desc { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 720px) { .valores-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .valores-grid { grid-template-columns: 1fr; } }
/* Grilla de equipo */
/* Flex y no grid, a propósito: la grilla NO siempre se completa. El equipo
pasó de 8 a 9 personas el 07-sep (Gisela) y va a volver a cambiar; con
`grid-template-columns: repeat(4,1fr)` la novena quedaba sola contra el
borde izquierdo, con tres celdas vacías al lado — que es justamente el
"hueco que se lee como error de carga" que el template venía evitando.
En flex, una última fila incompleta se centra sola, con cualquier número
de personas y sin tener que elegir el número de columnas que le sirva al
headcount de hoy. Las filas completas se ven igual que antes. */
.equipo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.equipo-card { flex: 0 1 calc((100% - 3 * var(--space-5)) / 4); }
.equipo-card {
margin: 0; background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@media (hover: hover) { .equipo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } }
.equipo-card__photo { position: relative; aspect-ratio: 4/5; background: var(--color-cream); overflow: hidden; }
.equipo-card__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) { .equipo-card:hover .equipo-card__photo > img { transform: scale(1.04); } }
.equipo-card__badge {
position: absolute; top: var(--space-3); left: var(--space-3);
display: inline-flex; align-items: center; gap: .3rem;
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff;
background: color-mix(in oklch, var(--color-primary-700) 88%, transparent);
backdrop-filter: blur(4px); padding: .28rem .6rem; border-radius: var(--radius-full);
}
.equipo-card__badge .icon { color: var(--color-secondary); }
.equipo-card__body { display: flex; flex-direction: column; gap: .15rem; padding: var(--space-4) var(--space-5) var(--space-5); }
.equipo-card__name { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-ink); letter-spacing: -0.01em; }
.equipo-card__role { color: var(--color-accent-600); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.equipo-card__tag { color: var(--text-muted); font-size: var(--fs-xs); margin-top: .1rem; }
/* Matrícula: dato de respaldo profesional, no jerarquía. Va tenue y en tabular
para que los números no bailen entre tarjetas. */
.equipo-card__mat {
color: var(--text-muted); font-size: var(--fs-xs); opacity: .75;
margin-top: .2rem; font-variant-numeric: tabular-nums;
}
.equipo-note { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; margin-top: var(--space-6); }
@media (max-width: 900px) { .equipo-card { flex-basis: calc((100% - 2 * var(--space-5)) / 3); } }
@media (max-width: 640px) { .equipo-grid { gap: var(--space-4); } .equipo-card { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (max-width: 380px) { .equipo-card { flex-basis: 100%; } }
/* ---------- ESPECIALIDAD (páginas sólida + landing) ---------- */
/* Hero sólida: contenido + aside (foto o medallón de ícono) */
.page-hero--especialidad__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
.page-hero__aside { display: flex; justify-content: center; }
.page-hero__medallion { display: grid; place-items: center; width: clamp(140px, 22vw, 220px); aspect-ratio: 1; border-radius: 32px; background: linear-gradient(150deg, var(--color-secondary-050), var(--color-primary-050)); color: var(--color-accent-600); box-shadow: var(--shadow); }
.page-hero__photo { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.page-hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .page-hero--especialidad__inner { grid-template-columns: 1fr; } .page-hero__aside { order: -1; } .page-hero__medallion { width: 128px; border-radius: 28px; } }
/* Media del hero landing (foto real) */
.landing-hero__media { position: relative; overflow: hidden; }
.landing-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Qué es + cuándo consultar */
.esp-que-es__inner { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
.esp-que-es__intro .section__head { margin-bottom: 0; max-width: 58ch; }
.esp-cuando { background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.esp-cuando__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.esp-cuando__title .icon { color: var(--color-accent-600); }
.esp-cuando__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.esp-cuando__list li { position: relative; padding-left: 1.5rem; color: var(--text-muted); }
.esp-cuando__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }
@media (max-width: 820px) { .esp-que-es__inner { grid-template-columns: 1fr; } }
/* Especialidades sin "cuándo consultar" ni figura (Operatoria, 03-sep): el
texto no comparte columna con nada, así que ocupa un ancho de lectura en
vez de quedar a mitad de grid con un hueco vacío al lado. La alineación
centrada la da la clase --center de .section__head (align-items + text-
align juntos, ver la regla de arriba) — no alcanza con text-align solo:
.section__head es flex column con align-items:flex-start por default, así
que cada línea quedaría centrada DENTRO de una caja ya pegada a la
izquierda. */
.esp-que-es__inner--solo { grid-template-columns: 1fr; }
.esp-que-es__inner--solo .esp-que-es__intro .section__head { max-width: var(--wrap-narrow); margin-inline: auto; }
/* Proceso / pasos numerados */
/* Va con `ol.` a propósito: como `.proceso` a secas, esta regla le pisaba el
`padding-block` y el `display` a la de
Sobre nosotros —misma palabra, dos componentes distintos— y esa sección se
quedaba sin los 96px de aire arriba y abajo (el eyebrow pegado al borde de
la banda crema, y la tarjeta blanca contra el CTA navy). */
ol.proceso { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-5); }
.paso { padding: var(--space-6); background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media (hover: hover) { .paso:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.paso__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.paso__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.paso__desc { color: var(--text-muted); font-size: var(--fs-sm); }
/* ---------- OBRAS SOCIALES (página) ---------- */
.oo-pills--lg { gap: var(--space-3); }
.oo-pills--lg .oo-pill { padding: .7rem 1.2rem; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: .5rem; }
.oo-pills--lg .oo-pill .icon { color: var(--color-accent-600); }
.oo-pills--lg .oo-pill--muted { color: var(--text-muted); }
.obras-lista__note { color: var(--text-muted); max-width: var(--wrap-narrow); margin-top: var(--space-6); }
.obras-cta { text-align: center; }
.obras-cta__inner { max-width: 640px; margin-inline: auto; }
.obras-cta__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: color-mix(in oklch, var(--color-whatsapp-brand) 15%, #fff); color: var(--color-whatsapp); margin-bottom: var(--space-4); }
.obras-cta__inner p { color: var(--text-muted); font-size: var(--fs-lg); margin-block: var(--space-2) var(--space-5); }
/* ---------- CONTACTO ---------- */
.contacto__inner { display: grid; grid-template-columns: 1.25fr .85fr; gap: var(--space-8); align-items: start; }
.contacto__col-title, .contacto-card__title { font-size: var(--fs-xl); margin-bottom: var(--space-5); }
.contacto__privacy { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--space-5); color: var(--text-muted); font-size: var(--fs-sm); }
.contacto__privacy .icon { color: var(--color-accent-600); margin-top: 2px; flex: none; }
@media (max-width: 860px) { .contacto__inner { grid-template-columns: 1fr; } }
.contacto-card--wa {
background: linear-gradient(150deg, var(--color-secondary-050), var(--color-primary-050));
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--space-6); margin-bottom: var(--space-6);
}
.contacto-card--wa p { color: var(--text-muted); margin-bottom: var(--space-4); }
.contacto-card__title { margin-bottom: var(--space-2); }
.contacto-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.contacto-list li { display: flex; align-items: flex-start; gap: var(--space-4); }
.contacto-list__ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius-full); background: var(--color-secondary-050); color: var(--color-accent-600); }
.contacto-list strong { display: block; font-size: var(--fs-sm); color: var(--color-ink); }
.contacto-list a { color: var(--text-muted); text-decoration: none; }
.contacto-list a:hover { color: var(--link); }
/* ---------- MAPA EMBEBIDO --------------------------------------------------
Click-to-load por defecto: el iframe de Google Maps arrastra ~800KB de JS y
va en el footer de TODAS las páginas. El placeholder pesa 0 y el iframe se
inyecta al primer clic (main.js). En Contacto se carga directo (eager). */
.map-embed { position: relative; border-radius: var(--radius); overflow: hidden; height: var(--map-h, 240px); background: var(--color-cream-deep); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed__load {
width: 100%; height: 100%; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
padding: var(--space-4); text-align: center;
background:
linear-gradient(135deg, oklch(0.92 0.02 190 / .55), oklch(0.90 0.02 259 / .55)),
var(--color-cream-deep);
border: 1px solid var(--border); border-radius: inherit;
color: var(--color-primary-700); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.map-embed__load small { font-weight: var(--fw-normal); font-size: var(--fs-xs); opacity: .75; }
.map-embed__load:hover { transform: translateY(-1px); }
.map-embed__link { display: inline-flex; align-items: center; gap: .5rem; padding: var(--space-4); width: 100%; justify-content: center; background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius); color: var(--color-primary-700); text-decoration: none; font-weight: var(--fw-medium); }
.contacto-map .map-embed { box-shadow: var(--shadow-sm); }
/* Fluent Forms — alinear al sistema de diseño Kairos */
.fluentform .ff-el-group { margin-bottom: var(--space-4); }
.fluentform .ff-el-input--label label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-ink); margin-bottom: .4rem; }
.fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"],
.fluentform textarea, .fluentform select, .fluentform .ff-el-form-control {
width: 100%; padding: .8rem 1rem; font: inherit; color: var(--text);
background: var(--color-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus, .fluentform textarea:focus, .fluentform select:focus {
outline: none; border-color: var(--color-accent);
box-shadow: 0 0 0 3px oklch(0.594 0.089 192 / 0.16);
}
.fluentform textarea { min-height: 120px; resize: vertical; }
.fluentform .ff-el-form-check { display: flex; gap: .65rem; align-items: flex-start; }
/* El consentimiento (Ley 25.326) es obligatorio para enviar: el checkbox nativo
mide 13px y en mobile es difícil de acertar. 24px (el mínimo de WCAG 2.5.8;
estaba en 22) + label clickeable, que además amplía el área real. */
.fluentform .ff-el-form-check input[type="checkbox"] {
flex: none; width: 24px; height: 24px; margin-top: 1px;
accent-color: var(--color-primary); cursor: pointer;
}
.fluentform .ff-el-form-check label { cursor: pointer; padding-block: 2px; }
.fluentform .ff-el-form-check-label, .fluentform .ff-el-form-check label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-normal); }
.fluentform .ff-btn-submit, .fluentform button[type="submit"] {
border-radius: var(--radius-full) !important; padding: .95rem 2rem !important;
font-weight: var(--fw-semibold) !important; font-size: var(--fs-base) !important;
border: none !important; cursor: pointer; background: var(--grad-brand) !important; color: #fff !important;
box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fluentform .ff-btn-submit:hover, .fluentform button[type="submit"]:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fluentform .ff-el-is-error .ff-el-form-control, .fluentform .has-error .ff-el-form-control { border-color: var(--color-error); }
.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error-message { color: var(--color-error); font-size: var(--fs-xs); }
.ff-message-success { background: var(--color-secondary-050); border: 1px solid var(--color-secondary); border-radius: var(--radius); padding: var(--space-5); color: var(--color-primary-700); }
/* ---------- LANDING (Implanto/Orto) ---------- */
.landing-hero { position: relative; overflow: clip; background: var(--grad-surface); padding-block: clamp(var(--space-8), 7vw, var(--space-12)); }
/* Mismo caso que `.page-hero::before`: sin max-height el aura se estiraba. */
.landing-hero::before { content: ""; position: absolute; inset: -20% -8% auto auto; width: min(55vw, 680px); aspect-ratio: 1; background: var(--aura-teal); pointer-events: none; filter: blur(8px); }
.landing-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: center; }
/* Especialidades sin foto ni video propios (Operatoria, Endodoncia, 03-sep):
una sola columna centrada en vez de un hueco vacío al lado del texto. */
.landing-hero__inner--sin-media { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; text-align: center; }
.landing-hero__inner--sin-media .landing-hero__text { margin-inline: auto; }
.landing-hero__inner--sin-media .landing-hero__actions,
.landing-hero__inner--sin-media .landing-hero__chip { justify-content: center; }
/* Carla, 13-ago: "está todo muy junto, dar más espacio". El bloque venía con
título, bajada, dos botones y dos chips apretados en el mismo respiro. Se
sacó el botón secundario y se abrieron los pasos: bajada → CTA → chips. */
.landing-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold, 800); margin-bottom: var(--space-5); }
.landing-hero__text { color: var(--text-muted); font-size: var(--fs-lg); margin-bottom: var(--space-7); max-width: 46ch; }
.landing-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.landing-hero__media { position: relative; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--color-secondary-050), var(--color-primary-050)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.landing-hero__media > img { border-radius: inherit; }
/* Los reels que manda el consultorio son verticales (9:16). El marco toma el
formato del video en vez de recortarlo dentro de una caja apaisada; se le
pone un techo de alto para que no empuje el CTA fuera de la primera pantalla. */
/* El ancho se fija y el alto sale del aspect-ratio, no al revés. Antes era
`width: auto` + `max-height`: como item de un grid el auto se estiraba al
ancho de la columna (~500px), el aspect-ratio pedía 889px de alto, el
max-height lo recortaba a 512 y quedaba una caja casi cuadrada donde el
`object-fit: cover` le cortaba la cabeza al que habla. Nunca se vio: el
video llegó recién el 24-ago y en s7 la extensión de Chrome no conectó. */
.landing-hero__media--video {
width: min(100%, 18rem); aspect-ratio: 9 / 16; height: auto;
justify-self: center; margin-inline: auto;
background: var(--color-ink); overflow: hidden;
}
.landing-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
@media (max-width: 820px) {
.landing-hero__inner { grid-template-columns: 1fr; }
.landing-hero__media { order: -1; }
.landing-hero__media--video { width: min(100%, 15rem); }
/* …pero el antes/después va DESPUÉS del texto, al revés que el video.
Arriba de todo son dos intraorales crudos —encía, frenillo, retractor—
y quien llega desde un anuncio los ve antes del H1: sin una línea que
diga de qué se trata, no son una prueba, son una imagen desconcertante.
Debajo del CTA cumplen su función (respaldan lo que se acaba de leer) y
además dejan el botón dentro de la primera pantalla. */
.landing-hero__media--casos { order: 0; } /* el aire lo pone el gap del grid */
}
/* Figura explicativa a lo ancho (hoy: el corte diente vs. implante). Fondo
blanco propio porque el diagrama viene recortado sobre blanco y sobre el
crema de la sección se le vería la caja. */
.esp-figura {
max-width: 860px; margin: var(--space-8) auto 0;
padding: var(--space-5) var(--space-6);
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.esp-figura img { display: block; width: 100%; height: auto; }
.esp-figura figcaption {
margin-top: var(--space-4); padding-top: var(--space-4);
border-top: 1px solid var(--border);
color: var(--text-muted); font-size: var(--fs-sm); text-align: center; text-wrap: pretty;
}
.feature-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.feature { padding: var(--space-6); background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media (hover: hover) { .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.feature__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-secondary-050); color: var(--color-accent-600); margin-bottom: var(--space-4); }
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.feature p { color: var(--text-muted); }
/* ---------- s8 · LANDING REORDENADA (feedback del 24-ago) ---------- */
/* Bloque de problema: la pregunta que trae al visitante, antes de explicarle
la solución. Centrado y angosto a propósito — son dos frases y compiten con
nada; si se estira a los 1180px del wrap se lee como un párrafo de relleno. */
.esp-problema__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.esp-problema__title {
font-size: var(--fs-2xl); line-height: var(--lh-tight);
margin-bottom: var(--space-5); text-wrap: balance;
}
.esp-problema__text {
color: var(--text-muted); font-size: var(--fs-lg);
line-height: var(--lh-normal); text-wrap: pretty;
}
/* Lista opcional (03-sep, cirugía · "Muelas de juicio"): mismos puntos que
`.esp-cuando__list`, pero sin la tarjeta —va suelta bajo el texto centrado—. */
.esp-problema__list {
list-style: none; padding: 0; margin: var(--space-5) auto 0;
max-width: 30rem; text-align: left; display: grid; gap: var(--space-3);
}
.esp-problema__list li { position: relative; padding-left: 1.5rem; color: var(--text-muted); }
.esp-problema__list li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary);
}
/* NATURALIDAD (03-sep, estética): intro centrada + dos puntos breves, sin
íconos — no son "beneficios" con la misma jerarquía que el resto, son la
aclaración del criterio de trabajo. */
.esp-naturalidad__inner { max-width: 46rem; margin-inline: auto; }
.esp-naturalidad__text {
text-align: center; color: var(--text-muted); font-size: var(--fs-lg);
line-height: var(--lh-normal); text-wrap: pretty; margin-bottom: var(--space-6);
}
.esp-naturalidad__points {
list-style: none; padding: 0; margin: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5);
}
.esp-naturalidad__point {
padding: var(--space-5) var(--space-6); background: var(--color-white);
border: 1px solid var(--border); border-radius: var(--radius);
}
.esp-naturalidad__point h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.esp-naturalidad__point p { color: var(--text-muted); }
/* "Qué es" con el diagrama al lado del texto (24-ago, punto 8) en vez del
cuadro "Cuándo consultar". Las columnas se emparejan: con el 1.35/.85 de
siempre el diagrama caía a ~410px y sus etiquetas quedaban en 10px. */
.esp-que-es__inner--figura { grid-template-columns: 1fr 1.15fr; align-items: center; }
/* Menos padding que la figura a lo ancho: acá cada píxel de la caja se le
descuenta al diagrama, y sus etiquetas necesitan ~500px para leerse. */
.esp-figura--side { margin: 0; max-width: none; padding: var(--space-4); }
.esp-figura--side picture { display: block; }
.esp-figura--side img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
.esp-que-es__inner--figura { grid-template-columns: minmax(0, 1fr); }
.esp-figura--side { max-width: 26rem; margin-inline: auto; }
}
/* "¿Cómo es el tratamiento?": el video del profesional y, al costado, la línea
de tiempo — las dos cosas que Carla pidió en el mismo lugar (punto 9). */
/* ⚠️ El ancho del video va EXPLÍCITO y no en un track `auto`.
Con `auto` el track no se sizea por el ancho al que se renderiza el video
(19rem = 304px) sino por su ancho INTRÍNSECO, que lo fija el poster: el de
implantes mide 540px, así que el track quedaba en 540 y sobraban 236px de
hueco muerto entre el video y la línea de tiempo, con la columna de texto
apretada a 512px. Estuvo así desde s8 sin que se notara, porque un hueco
grande al lado de un video se lee como aire y no como un bug — sólo apareció
al medirlo (scripts/measure_layout.py).
Corolario: cambiar el tamaño de un poster movía el layout de la página. */
.esp-tratamiento__inner {
display: grid; grid-template-columns: 19rem minmax(0, 1fr);
gap: clamp(var(--space-6), 5vw, var(--space-10));
align-items: center;
max-width: 60rem; margin-inline: auto;
}
.esp-tratamiento__inner--solo-pasos { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
.esp-tratamiento__video {
width: min(100%, 19rem); aspect-ratio: 9 / 16;
background: var(--color-ink); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-lg);
}
.esp-tratamiento__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* LÍNEA DE TIEMPO vertical, calcada del diagrama que mandó Carla. Vertical
también en escritorio: acá el orden ES el contenido, y una columna al lado
del video lo dice mejor que cuatro tarjetas en fila.
La línea la dibuja el ::before del y corre del disco al siguiente, así
que el último paso no la lleva y no hay que contar elementos desde el PHP. */
.linea-tiempo {
--disco: 56px;
list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6);
}
.linea-tiempo__paso {
position: relative;
display: grid; grid-template-columns: var(--disco) minmax(0, 1fr);
gap: var(--space-5); align-items: start;
}
.linea-tiempo__paso:not(:last-child)::before {
content: ""; position: absolute; z-index: 0;
left: calc(var(--disco) / 2 - 1px); top: var(--disco);
width: 2px; height: calc(100% + var(--space-6) - var(--disco));
background: var(--color-primary);
}
/* Disco teal con el número, como en su diagrama — pero en el teal profundo y
no en el claro: blanco sobre #80c2c1 da 2:1 de contraste y no pasa AA, el
mismo caso que el CTA de WhatsApp que cazó la auditoría de s6. */
.linea-tiempo__num {
position: relative; z-index: 1;
display: grid; place-items: center;
width: var(--disco); height: var(--disco); border-radius: 50%;
background: var(--color-accent-600); color: #fff;
font-size: var(--fs-sm); font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
}
.linea-tiempo__cuerpo { padding-top: calc((var(--disco) - 1.6em) / 2); }
.linea-tiempo__title { font-size: var(--fs-lg); color: var(--color-primary-600); margin-bottom: var(--space-2); }
.linea-tiempo__desc { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
@media (max-width: 860px) {
.esp-tratamiento__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.esp-tratamiento__video { width: min(100%, 16rem); }
.linea-tiempo { width: 100%; max-width: 34rem; }
}
/* Tarjeta de beneficio con imagen (24-ago, punto 10). Dormido hasta que
lleguen los archivos: sin `img` la tarjeta se renderiza como siempre. */
.feature--media { padding: 0; overflow: hidden; }
.feature--media .feature__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.feature--media .feature__icon { margin: var(--space-5) var(--space-6) var(--space-4); }
.feature--media h3, .feature--media p { padding-inline: var(--space-6); }
.feature--media p { padding-bottom: var(--space-6); }
/* ---------- FAQ ---------- */
/* Centrada: antes quedaba pegada a la izquierda bajo un encabezado centrado. */
.faq { max-width: var(--wrap-narrow); margin-inline: auto; text-align: left; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--space-5); margin-bottom: var(--space-3); background: var(--color-white); transition: box-shadow var(--dur) var(--ease); }
.faq__item[open] { box-shadow: var(--shadow-sm); }
.faq__item summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-lg); list-style: none; padding: var(--space-4) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.faq__item summary > span { flex: 1; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--color-accent-600); transition: transform var(--dur) var(--ease-out); flex: none; }
.faq__item[open] summary .icon { transform: rotate(90deg); }
.faq__item p { margin: 0; padding-bottom: var(--space-4); color: var(--text-muted); }
/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-ink); color: color-mix(in oklch, #fff 82%, transparent); padding-top: var(--space-10); }
.site-footer a { color: color-mix(in oklch, #fff 82%, transparent); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: #fff; }
/* Cuatro columnas más parejas: la última dejó de tener el recuadro del mapa,
así que ya no necesita más ancho que las demás. */
.site-footer__grid { display: grid; grid-template-columns: 1.15fr 1.1fr .85fr .9fr; gap: var(--space-6); padding-bottom: var(--space-8); }
.site-footer__address { font-size: var(--fs-sm); max-width: 22ch; margin-bottom: var(--space-3); }
/* El logo del footer usa la variante `light` del SVG (texto crema + teal de
marca), no un filtro: `brightness(0) invert(1)` aplastaba las dos tintas a
blanco plano y se perdía el teal del isotipo. El filtro queda solo para el
custom_logo que pueda subir el cliente, que es una imagen cualquiera. */
.site-footer__brand img { max-height: 44px; width: auto; }
.site-footer__brand .custom-logo { max-height: 44px; width: auto; filter: brightness(0) invert(1); }
.site-footer__claim { margin-top: var(--space-3); font-size: var(--fs-sm); max-width: 30ch; }
.site-footer__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: var(--space-4); }
.site-footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.site-footer__list li { display: flex; align-items: flex-start; gap: .6rem; }
.site-footer__list .icon { color: var(--color-secondary); margin-top: 2px; flex: none; }
.site-footer__menu { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
/* Tap targets (WCAG 2.5.8). El mínimo AA de 24×24 aplica en TODOS los anchos,
no solo en mobile: en escritorio estos links medían 20px y el de legales 15.
El área crece con padding compensado por margin negativo, que no mueve nada
de lugar. En mobile (abajo) suben a 44px, que es el objetivo cómodo. */
.site-footer__menu a,
.site-footer__bottom a {
display: inline-flex; align-items: center; min-height: 24px;
padding-block: .25rem; margin-block: -.25rem;
}
/* Tap targets (WCAG 2.5.8) — en mobile los links del footer medían 19-26px de
alto. La navegación pasa a filas de 44px (gap 0 para que las áreas no se
solapen); el resto gana área con padding compensado por margin negativo, que
agranda el hit area sin mover nada de lugar. */
@media (max-width: 720px) {
.site-footer__menu { gap: 0; }
.site-footer__menu a { display: flex; align-items: center; min-height: 44px; }
.site-footer__list a, .site-footer__maps-link, .topbar__item {
padding-block: .6rem; margin-block: -.6rem;
}
.site-footer__list { gap: var(--space-4); }
}
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklch, #fff 8%, transparent); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.site-footer__social a:hover { background: var(--color-accent); transform: translateY(-2px); }
.site-footer__maps-link { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); }
.site-footer__maps-link .icon:first-child { color: var(--color-secondary); }
.site-footer__bottom { border-top: 1px solid color-mix(in oklch, #fff 12%, transparent); padding-block: var(--space-5); font-size: var(--fs-xs); }
.site-footer__bottom .wrap { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-float {
position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
z-index: var(--z-float); width: 58px; height: 58px; display: grid; place-items: center;
background: var(--color-whatsapp); color: #fff; border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
transition: transform var(--dur) var(--ease-spring);
}
.whatsapp-float::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.5);
animation: wa-pulse 2.6s var(--ease-out) infinite;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.whatsapp-float:active { transform: scale(0.95); }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.5); } 70%, 100% { box-shadow: 0 0 0 16px oklch(0.72 0.19 150 / 0); } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float::before { animation: none; } }
/* ---------- STICKY CTA MOBILE ---------- */
.mobile-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
display: none; gap: var(--space-3); padding: var(--space-3) var(--space-4);
background: color-mix(in oklch, var(--bg) 94%, transparent);
backdrop-filter: blur(10px); border-top: 1px solid var(--border);
box-shadow: 0 -6px 24px oklch(0.40 0.05 253 / 0.10);
transform: translateY(110%); transition: transform var(--dur) var(--ease-out);
}
.mobile-cta.is-visible { transform: translateY(0); }
/* El botón principal se estira y no parte el texto; el de llamar es un cuadrado
fijo. Antes los dos caían en flex:1 — `.mobile-cta .btn` (0,2,0) le gana a
`.mobile-cta__call` (0,1,0) — así que quedaban 50/50 y "Sacar un turno"
wrapeaba en dos líneas dentro del botón. */
.mobile-cta .btn { flex: 1; white-space: nowrap; }
.mobile-cta .mobile-cta__call { flex: 0 0 56px; width: 56px; padding-inline: 0; }
@media (max-width: 720px) {
/* safe-area: en iPhone la barra de gestos se come el borde inferior. */
.mobile-cta { display: flex; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
/* El flotante se apaga en mobile: la barra ya da WhatsApp + llamar, y el FAB
quedaba encima de CTAs reales (botón de cobertura, fotos del equipo,
copyright). En desktop no hay barra, así que ahí sigue siendo el acceso. */
.whatsapp-float { display: none; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
/* ---------- s10 · LANDING DE ORTODONCIA (feedback del 31-ago) ------------- */
/* Subtítulo del hero: la línea que Carla puso entre el H1 y la bajada
("Brackets y alineadores para una sonrisa más saludable"). Va en el color de
texto pleno y con peso, no en el gris de la bajada: es la promesa, no la
explicación. Sin margen negativo para pegarlo al H1: abajo del H1 vive el
arco de sonrisa, que necesita ese aire o se le monta al texto. */
.landing-hero__sub {
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-ink);
margin: 0 0 var(--space-4);
max-width: 22ch;
text-wrap: balance;
}
/* "adultos, adolescentes y niños". Debajo del CTA: es una precisión de a quién
le sirve, no un argumento. Sin caja ni fondo — un chip acá compite con el
botón, que es lo único que tiene que sobresalir en el hero de una landing. */
.landing-hero__chip {
display: flex; align-items: center; gap: var(--space-2);
color: var(--text-muted); font-size: var(--fs-sm);
}
.landing-hero__chip .icon { color: var(--color-accent-600); flex: none; }
/* ---------- ANTES / DESPUÉS (hero) ----------------------------------------
Carla, 31-ago: "podrían ir al principio en un carrousel y reemplazar la foto
actual del escáner".
APILADAS, no lado a lado: en la columna del hero cada mitad mediría ~175px y
el apiñamiento —que es exactamente lo que hay que ver— se pierde. Apiladas
cada foto se lleva los ~368px enteros.
El ancho se acota a 23rem para que el bloque no supere en altura a la columna
de texto: dos 3:2 apiladas son 0,74 de alto/ancho ×2 = casi el doble de alto
que ancho. */
.landing-hero__media--casos {
aspect-ratio: auto; background: none; box-shadow: none;
width: min(100%, 23rem); justify-self: center; margin-inline: auto;
}
.ba__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--space-5); }
.ba__track::-webkit-scrollbar { display: none; }
.ba__caso { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; gap: var(--space-2); }
.ba__lado { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ba__lado img { display: block; width: 100%; height: auto; }
/* Rótulo sobre la foto y no debajo: debajo suma dos líneas de alto al bloque,
que ya es el elemento más alto del hero. Sobre un intraoral (rosa saturado,
claro) el blanco puro no alcanza, así que va sobre una pastilla oscura. */
.ba__tag {
position: absolute; top: var(--space-3); left: var(--space-3);
padding: .25rem .6rem; border-radius: var(--radius-full);
background: oklch(0.26 0.021 259 / 0.82); color: #fff;
font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .02em;
}
.ba__lado--despues .ba__tag { background: var(--color-accent-600); }
/* Aclaración obligada en un sitio de salud: un antes/después no promete el
mismo resultado para el que lo está mirando. */
.ba__nota { color: var(--text-muted); font-size: var(--fs-xs); text-align: center; text-wrap: pretty; }
.ba__nav { margin-top: var(--space-4); }
/* ---------- CARRUSEL DE FOTOS SUELTAS (hero) ------------------------------
Estética dental (02-sep, punto 2): "la imagen la cambiamos, podríamos
hacer un carrusel acá también". Cada slide es una foto YA compuesta por el
consultorio (9:16, sin recortar) — a diferencia de `.ba`, no arma un
antes/después con CSS a partir de dos mitades. */
.landing-hero__media--carrusel {
aspect-ratio: auto; background: none; box-shadow: none;
width: min(100%, 18rem); justify-self: center; margin-inline: auto;
}
.hero-carrusel__track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.hero-carrusel__track::-webkit-scrollbar { display: none; }
.hero-carrusel__slide {
flex: 0 0 100%; scroll-snap-align: start; margin: 0;
aspect-ratio: 9 / 16; overflow: hidden; background: var(--color-ink);
}
.hero-carrusel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-carrusel__nav { margin-top: var(--space-4); }
@media (max-width: 820px) { .landing-hero__media--carrusel { width: min(100%, 15rem); } }
/* ---------- AUTOEVALUACIÓN (tira de casos) --------------------------------
Reemplaza a "¿En qué consiste?" en ortodoncia (31-ago, punto 2). */
.esp-autoeval__prompt {
max-width: 52rem; margin: var(--space-7) auto var(--space-6);
text-align: center; font-size: var(--fs-lg);
font-weight: var(--fw-semibold); color: var(--color-ink); text-wrap: pretty;
}
/* Cuatro en fila en escritorio y DOS EN FILA en mobile, no una sola columna:
el bloque le pide al visitante que se compare, y comparar cuatro fotos
apiladas de a una obliga a scrollear entre ellas. A 390px cada una queda en
~163px, que alcanza para reconocer un apiñamiento o un diastema. */
.casos-tira {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.caso { display: grid; gap: var(--space-3); }
.caso__img {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.caso__label { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
.esp-autoeval__cierre {
max-width: 52rem; margin: var(--space-8) auto 0;
text-align: center; font-size: var(--fs-base); color: var(--text-muted); text-wrap: pretty;
}
@media (max-width: 900px) { .casos-tira { grid-template-columns: repeat(2, 1fr); } }
/* Variante de ÍCONOS (estética dental, 02-sep): "¿qué querés cambiar?" en vez
de "¿te reconocés en esta foto?". Mismo look que `.feature` (beneficios),
más una línea de resultado al pie que apunta al tratamiento. `auto-fit`
porque son 5 —no hay forma de repartirlos parejo en una grilla fija. */
.autoeval-grid {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5);
}
.autoeval-item {
display: grid; align-content: start; gap: var(--space-1);
padding: var(--space-6); background: var(--color-white);
border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.autoeval-item__icon {
display: grid; place-items: center; width: 48px; height: 48px;
border-radius: 12px; background: var(--color-secondary-050); color: var(--color-accent-600);
margin-bottom: var(--space-3);
}
.autoeval-item__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.autoeval-item__desc { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
.autoeval-item__resultado {
display: flex; align-items: center; gap: var(--space-1);
margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border);
color: var(--color-primary-700); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.autoeval-item__resultado .icon { color: var(--color-accent-600); flex: none; }
/* ---------- ¿BRACKETS O ALINEADORES? --------------------------------------
"En esta sección pondría el video, y al lado las dos listas que te pasé
antes" (Carla, 31-ago). Las dos tarjetas van juntas al costado del reel: una
al lado de la otra, como pidió, y las dos al lado del video. */
.esp-opciones__inner {
display: grid; grid-template-columns: 19rem minmax(0, 1fr);
gap: clamp(var(--space-6), 5vw, var(--space-10));
align-items: center;
margin-top: var(--space-8);
}
.esp-opciones__inner--solo-cards { grid-template-columns: minmax(0, 1fr); }
/* Sin video, las tarjetas ocupan todo el ancho: 2 o 3 se acomodan solas en vez
de quedar fijas a 2 columnas (prótesis, 03-sep, trae 3). */
.esp-opciones__inner--solo-cards .opcion-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.esp-opciones__video {
width: min(100%, 19rem); aspect-ratio: 9 / 16;
background: var(--color-ink); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-lg);
}
.esp-opciones__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.opcion-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
/* `align-content: start` y no `stretch`: las dos listas tienen 3 y 4 ítems, y
estirar la corta para igualarlas deja un hueco raro bajo su último punto. */
.opcion {
display: grid; align-content: start; gap: var(--space-3);
padding: var(--space-6); background: var(--color-white);
border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.opcion__icon {
display: grid; place-items: center; width: 48px; height: 48px; flex: none;
border-radius: 12px; background: var(--color-secondary-050); color: var(--color-accent-600);
}
.opcion__title { font-size: var(--fs-lg); }
.opcion__desc { color: var(--text-muted); font-size: var(--fs-sm); text-wrap: pretty; }
.opcion__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.opcion__list li { position: relative; padding-left: 1.4rem; color: var(--color-ink); font-size: var(--fs-sm); }
.opcion__list li::before {
content: ""; position: absolute; left: 0; top: .5em;
width: 7px; height: 7px; border-radius: 50%; background: var(--color-secondary);
}
/* El cierre va a lo ancho y debajo: es la respuesta a las dos columnas, no una
tercera alternativa en la comparación. */
.esp-opciones__cierre {
max-width: 46rem; margin: var(--space-8) auto 0;
padding: var(--space-5) var(--space-6); text-align: center;
background: var(--color-white); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.esp-opciones__cierre h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.esp-opciones__cierre p { color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 1000px) {
.esp-opciones__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.esp-opciones__video { width: min(100%, 15rem); }
.opcion-grid { width: 100%; }
}
@media (max-width: 640px) { .opcion-grid { grid-template-columns: 1fr; } }