/* ============================================================================
Estilos compartidos de Mindshift
(index.html + telemedicina.html + voluntarios.html + medicos.html)
Identidad Mindshift: Poppins · crema #FCF4EA · naranja #F26A1B · tinta #2B211B.
Tokens y mapeo «token viejo → token nuevo»: mockups/README.md §§ 2 y 3.
DOS naranjas, no uno:
· --orange #F26A1B decorativo (iconos, bordes, anillos, chips activos).
Con texto blanco da 3.06:1 → NO pasa AA: nunca de relleno
de botón ni bajo texto pequeño.
· --orange-ink #BB4A0C tinta: enlaces, texto naranja chico y relleno de botón
(5.12:1 con blanco).
Sobre los cremas oscuros (--card #F7EAD9) el naranja de tinta baja a 4.33:1: ahí
el texto pequeño va en --body y las cifras grandes en --orange-ink (ver más abajo).
========================================================================== */
:root{
/* ===== Superficies ===== */
--bg:#FCF4EA;--card:#F7EAD9;--card-2:#F8ECDD;--banner:#F7EBDC;--white:#fff;
/* ===== Naranja ===== */
--orange:#F26A1B; /* iconos, bordes, decoración, chips activos */
--orange-deep:#E85D10; /* palabra naranja de los titulares grandes */
--accent:#EF5C1D; /* cifras grandes sobre blanco/crema claro */
--orange-ink:#BB4A0C; /* texto naranja pequeño + relleno de botón */
--orange-ink-hover:#9E3D07;
/* ===== Tinta ===== */
--ink:#2B211B;--body:#6A5C51;--muted:#7A6857;--muted-deco:#8C7A6B;
/* ===== Líneas y sombras ===== */
--line:rgba(242,106,27,.22);
--line-solid:#EBD9C4; /* borde de inputs: la línea traslúcida no se ve sobre blanco */
--shadow:0 18px 40px -22px rgba(163,84,20,.35);
--shadow-sm:0 10px 24px -18px rgba(163,84,20,.4);
/* Degradado del panel de hero. Lo usan .hero-panel (páginas internas) y
.hero-caja (la landing, solo en móvil/tablet): en un único sitio para que
los dos paneles no se puedan separar. Baja hasta #F7E4CD, el fondo más
oscuro del sitio: es el que manda en las medidas de contraste del hero. */
--degradado-panel:linear-gradient(140deg,#F8ECDD 0%,#F7E4CD 100%);
/* ===== Semánticos ===== */
--ok:#1E7A4D;--ok-bg:#EAF6EF;
--err:#B3261E;--err-bg:#FCEDEB;--err-line:#F3C7BB;
/* Rojo propio de «Ayuda urgente»: es la única señal de peligro del sitio y no
se tiñe de naranja. */
--err-deep:#96261A;--err-soft:#FFF3EF;
--info-bg:#F1EDFB;
/* ===== Forma ===== */
--r:16px;--r-card:22px;--r-lg:28px;--r-xl:34px;
--maxw:1290px;--header-h:76px;
/* Los alias de compatibilidad con los nombres viejos (--primary, --navy,
--surface…) se retiraron al migrar telemedicina, voluntarios y médicos:
ya no queda ni un `var(--nombre-viejo)` en el repo. El mapeo «token viejo →
token nuevo» sigue documentado en mockups/README.md § 3. */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* El atributo `hidden` debe ganar SIEMPRE: clases como .btn ponen display:inline-flex,
que sobrescribe el display:none del user-agent y deja ver elementos [hidden]
(p. ej. los botones del formulario por pasos de telemedicina). */
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
html,body{min-height:100%;}
/* OJO con el `overflow-x:hidden` de abajo: como `html` está en `visible`, se propaga
al viewport, así que lo que se salga por la derecha NO da barra de scroll — se
recorta y ya. Un desborde real se ve como un elemento cortado en el borde, no como
una barra, y por eso pasan desapercibidos (así estuvo el CTA de la cabecera).
Para cazarlos hay que comparar `scrollWidth` con `clientWidth`, no fiarse de la
vista: `scrollWidth` sí cuenta lo recortado aunque no se pueda hacer scroll. */
body{font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:3px;border-radius:8px;}
img{display:block;max-width:100%;}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange-ink);color:#fff;padding:12px 20px;border-radius:0 0 14px 0;font-weight:700;text-decoration:none;}
.skip:focus{left:0;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
@media(min-width:760px){.wrap{padding:0 32px;}}
@media(min-width:1100px){.wrap{padding:0 40px;}}
/* ===== Red de seguridad de los iconos =====
Los iconos del sprite se escriben ``,
sin width/height: los dimensiona la regla del componente que los contiene
(.btn svg, .tabbar a svg, .eyebrow svg…). Si un componente nuevo se olvida de
esa regla, el SVG cae al tamaño por defecto de un elemento reemplazado
—300×150— y desborda la página entera. Pasó de verdad en `.foot-cta`: el icono
salía a 248 px y empujaba el ancho del documento a 444 px en un móvil de 375,
lo que además estiraba el tabbar fijo fuera de la pantalla.
Esta regla va DELIBERADAMENTE aquí arriba, antes que las de componente: su
especificidad (0,1,1) empata con `.btn svg`, y en un empate gana la última
declarada. Si se mueve abajo, silencia los tamaños reales de los componentes. */
svg:not([width]){width:1.15em;height:1.15em;flex:none;}
/* ===== Header ===== */
.topbar{position:sticky;top:0;z-index:40;background:rgba(252,244,234,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.topbar-inner{min-height:var(--header-h);display:flex;align-items:center;gap:18px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0;}
.brand img{height:34px;width:auto;}
@media(min-width:760px){.brand img{height:42px;}}
.topnav{display:none;margin-left:auto;align-items:center;gap:26px;}
.topnav a{text-decoration:none;color:#3A2F28;font-weight:600;font-size:15.5px;padding:6px 2px;position:relative;white-space:nowrap;transition:color .18s;}
.topnav a:hover{color:var(--orange-ink);}
.topnav a.active,.topnav a[aria-current="page"]{color:var(--orange-ink);}
.topnav a.active::after,.topnav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--orange);border-radius:3px;}
.topbar .btn{flex-shrink:0;}
/* `.topbar` delante para ganarle a `.btn{display:inline-flex}`: sin eso el CTA
reaparece en móvil y desborda la barra a 375 px. */
.topbar .nav-cta{margin-left:auto;display:none;}
@media(min-width:900px){.topnav{display:flex;}}
/* ANCHOS DE LA CABECERA — la fila «marca + enlaces + CTA» no cabe en cualquier
ventana, así que cada pieza entra cuando de verdad hay sitio. Medido sobre
`telemedicina.html`, que es la cabecera más ancha (5 enlaces, y el CTA más largo,
«Solicitar consulta»). Ancho que pide = 40 de padding del `.wrap` + 145 de marca
+ 18 de hueco + enlaces + 44 de separación (hueco 18 + margen 26) + botón:
enlaces compactos (14.5px / hueco 16) sin CTA 832 con CTA 1094
enlaces normales (15.5px / hueco 26) sin CTA 910 con CTA 1171
De ahí salen los dos cortes de abajo. Si añades un enlace o alargas una etiqueta,
vuelve a medir: estos números son el ancho real del texto, no un margen holgado. */
/* Los enlaces van compactos hasta 1279 —y no hasta 1140, como estaban— porque a
tamaño natural piden 1171 y la cabecera se desbordaba entre 1141 y 1186. */
@media(min-width:900px) and (max-width:1279px){.topnav{gap:16px;}.topnav a{font-size:14.5px;}}
/* El CTA es lo último en entrar: con los enlaces compactos pide 1094, así que por
debajo de 1140 la fila desbordaba (a 1024 el botón se salía 41px). Entre 900 y
1139 el acceso al formulario queda en el enlace del nav —que apunta al mismo
ancla en index, voluntarios y médicos— y en el CTA del hero, que está en las
cuatro páginas. Por debajo de 900 lo cubren el menú y la barra inferior. */
@media(min-width:1140px){.topbar .nav-cta{display:inline-flex;margin-left:26px;}}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;background:var(--white);border:1.6px solid var(--line);color:var(--orange-ink);border-radius:14px;flex:0 0 46px;width:46px;height:46px;cursor:pointer;}
@media(min-width:900px){.menu-toggle{display:none;}}
.menu-panel{border-top:1px solid var(--line);background:var(--bg);padding:10px 0 16px;display:flex;flex-direction:column;}
.menu-panel a{padding:13px 20px;font-weight:600;font-size:16px;color:#3A2F28;text-decoration:none;border-radius:12px;}
.menu-panel a:hover{background:var(--card-2);}
/* `.menu-panel a` (0,1,1) le gana a `.btn-primary` (0,1,0) y le devolvía el texto
oscuro al botón naranja: 2.53:1. Hay que igualar la especificidad. */
.menu-panel .btn{display:flex;margin:10px 20px 0;}
.menu-panel a.btn-primary{color:#fff;}
.menu-panel a.btn-ghost,.menu-panel a.btn-soft{color:var(--ink);}
@media(min-width:900px){.menu-panel{display:none!important;}}
/* La píldora «Ayuda urgente» ya no va en ninguna cabecera (PR #51): el enlace a
la sección de crisis vive en el pie de las cuatro páginas. */
main{padding-bottom:96px;}
@media(min-width:900px){main{padding-bottom:0;}}
section{scroll-margin-top:calc(var(--header-h) + 14px);}
h1,h2,h3{letter-spacing:-.02em;line-height:1.1;font-weight:700;}
/* CONTRASTE — la regla que hay que respetar al añadir texto naranja:
--orange-ink #BB4A0C solo pasa AA sobre BLANCO (5.12:1) y sobre --bg (4.70:1).
Sobre los cremas oscuros (--card #F7EAD9 4.33:1, --card-2 #F8ECDD 4.40:1 y el
degradado del hero, que baja hasta #F7E4CD y da 4.13:1) NO llega a 4.5, así que
ahí el texto naranja pequeño va en --orange-ink-hover #9E3D07 (5.42–5.77:1).
Medido sobre el color computado y el fondo real compuesto, no a ojo. */
.eyebrow{display:inline-flex;align-items:flex-start;gap:9px;line-height:1.45;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:700;color:var(--orange-ink);}
.eyebrow svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px;}
.sec{padding:56px 0 0;}
.sec-head{margin-bottom:28px;}
.sec-head h2{font-size:clamp(26px,4.4vw,40px);font-weight:700;}
.sec-head p{color:var(--body);font-size:17px;margin-top:12px;max-width:640px;}
.center,.sec-head.center{text-align:center;}
.center p,.sec-head.center p{margin-left:auto;margin-right:auto;}
.hint-inline{color:var(--muted);font-size:15px;}
.inline-link{color:var(--orange-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.inline-link:hover{color:var(--orange-ink-hover);}
/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:16px;line-height:1.15;padding:15px 24px;border-radius:var(--r);text-decoration:none;text-align:center;min-height:52px;transition:transform .16s,box-shadow .16s,background .16s,color .16s,border-color .16s;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--orange-ink);color:#fff;box-shadow:0 12px 24px -14px rgba(187,74,12,.75);}
.btn-primary:hover{background:var(--orange-ink-hover);transform:translateY(-2px);}
.btn-ghost{background:var(--white);color:var(--ink);border:1.6px solid var(--line);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-ink);transform:translateY(-2px);}
.btn-soft{background:var(--card);color:var(--ink);}
.btn-soft:hover{background:var(--card-2);transform:translateY(-2px);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#3E3128;transform:translateY(-2px);}
/* Alias de las páginas sin migrar (antes iban sobre el hero oscuro). */
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}
/* ===== Hero de la landing (claro, con mascota) ===== */
/* `padding-top`/`padding-bottom` en largo, NO el atajo `padding:26px 0 44px`:
el es `class="hero wrap"` y el atajo pisaba entero el `padding:0 20px`
de .wrap, así que el titular, el párrafo y las tarjetas de cifras salían pegados
al borde de la ventana mientras el resto de secciones respetaba el margen. En
largo, .hero solo toca el eje vertical y .wrap conserva el lateral en sus tres
escalones (20 / 32 desde 760 / 40 desde 1100). Es como está en el mockup
aprobado (mockups/mockup.css § Hero). */
.hero{padding-top:26px;padding-bottom:44px;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;}
/* En escritorio el panel NO existe: `display:contents` disuelve la caja de
.hero-caja y sus dos hijos (.hero-left y .hero-right) vuelven a ser ítems de
.hero-grid, o sea la misma rejilla de dos columnas ya aprobada. Como ahora hay
TRES ítems (texto, cifras+franja+voluntarios y mascota), las posiciones se dan
a mano: el texto y el bloque de cifras se apilan en la columna 1 y la mascota
ocupa la columna 2 abarcando las dos filas, centrada —que es exactamente lo
que hacía cuando se centraba contra la columna de texto entera—. `row-gap:0`
porque el ritmo vertical entre texto y cifras ya lo ponen sus márgenes; el
gap de 28 px es solo entre columnas. */
@media(min-width:1024px){
.hero{padding-top:34px;padding-bottom:64px;}
.hero-grid{grid-template-columns:1.05fr 1fr;column-gap:28px;row-gap:0;}
.hero-caja{display:contents;}
.hero-left{grid-column:1;grid-row:1;}
.hero-extra{grid-column:1;grid-row:2;}
.hero-right{grid-column:2;grid-row:1/span 2;align-self:center;}
}
.hero-left{position:relative;z-index:3;max-width:660px;}
.badge{display:inline-flex;align-items:center;gap:14px;background:var(--card-2);border-radius:18px;padding:13px 20px;margin-bottom:24px;max-width:100%;}
.badge .ic{width:26px;height:26px;flex:0 0 26px;color:var(--orange);}
.badge b{display:block;font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.25;}
/* --orange-ink sobre --card-2 da 4.40:1 y no llega al 4.5 de AA. Es el caso que
ya describe la nota de contraste de arriba: sobre los cremas oscuros el naranja
pequeño va en --orange-ink-hover. */
.badge span{display:block;font-weight:600;font-size:15px;color:var(--orange-ink-hover);}
.title{font-weight:600;font-size:clamp(34px,7.4vw,60px);line-height:1.07;letter-spacing:-.025em;margin-bottom:20px;}
.title .dark{display:block;color:var(--ink);}
.title .orange{display:block;color:var(--orange-deep);}
.lead{font-size:17.5px;font-weight:500;color:var(--body);max-width:470px;margin-bottom:28px;}
@media(min-width:760px){.lead{font-size:19px;}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.cta-row .btn{flex:1 1 240px;}
@media(min-width:620px){.cta-row .btn{flex:0 0 auto;}}
.hero-vol{font-size:15px;color:var(--body);margin-top:4px;}
.hero-vol a{color:var(--orange-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.hero-vol a:hover{color:var(--ink);}
.hero-vol a:hover{color:var(--orange-ink-hover);}
/* Tarjetas de cifras del hero. Sobre --card el texto chico va en --body
(--muted se queda en 4.21:1 sobre ese crema). */
.stats{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px;}
@media(min-width:520px){.stats{grid-template-columns:.82fr 1.18fr;}}
.tarjeta{background:var(--card);border-radius:var(--r-card);}
.stat{padding:20px 18px;display:flex;}
.stat-a{flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:4px;}
.stat-a .ic{width:32px;height:32px;color:var(--orange);margin-bottom:4px;}
.stat-num{font-weight:800;font-size:30px;color:var(--ink);line-height:1;}
.stat-label{font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--body);line-height:1.35;}
.stat-b{align-items:center;gap:16px;}
.stat-b .ic{width:38px;height:38px;flex:0 0 38px;color:var(--orange);}
.stat-free{display:block;font-weight:700;font-size:20px;color:var(--orange-ink);letter-spacing:.01em;}
.stat-sub{display:block;font-weight:600;font-size:15px;color:var(--body);margin-top:2px;}
.franja{display:flex;align-items:center;gap:16px;background:var(--banner);padding:18px 20px;}
.franja .ic{width:36px;height:36px;flex:0 0 36px;color:var(--orange);}
.franja b{display:block;font-weight:700;font-size:17.5px;color:var(--ink);}
.franja span{display:block;font-weight:500;font-size:15px;color:var(--body);margin-top:2px;}
/* Mascota + anillos. El máster oficial es 3:2 con aire a la izquierda: el
encuadre cuadrado del hero se hace por CSS, no con un recorte aparte. */
.hero-right{position:relative;display:flex;justify-content:center;align-items:center;}
@media(min-width:1024px){.hero-right{min-height:500px;}}
.rings{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.rings::before,.rings::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(242,106,27,.09);}
.rings::before{width:min(560px,86vw);height:min(560px,86vw);}
.rings::after{width:min(410px,62vw);height:min(410px,62vw);border-color:rgba(242,106,27,.06);}
/* Encuadre cuadrado por CSS, como manda mockups/README.md § 7.2: el mockup_7
traía un recorte casi cuadrado (1080×1031) y aquí se reproduce sobre el máster
oficial 3:2, para no tener dos ficheros de la misma pose.
`height:auto` es imprescindible y es lo que faltaba: los atributos width="1200"
height="800" del —que están para reservar el hueco y no causar CLS— le
dan al elemento una altura definida, y `aspect-ratio` se ignora cuando el alto
y el ancho ya lo son. Sin `height:auto` el hueco salía de 310×800 (relación
0.39, ni 3:2 ni cuadrada) y `cover` recortaba contra él el 73 % del ancho.
`object-position:75%` centra al personaje, que en el máster está descentrado a
la derecha: lo que se recorta es el aire de la izquierda. */
.mascot{position:relative;z-index:1;width:100%;max-width:520px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:75% 50%;filter:drop-shadow(0 30px 46px rgba(196,104,32,.18));}
/* ===== El hero de la landing en móvil / tablet (≤1023 px) =====
Antes la mascota iba primera (`.hero-right{order:1}`) y a 375 px medía 323 px
de alto: el titular empezaba en y=537 y el botón en y=816, o sea fuera de una
pantalla de 812. Ahora la landing sigue la MISMA jerarquía que el hero compacto
de las páginas internas (banner → titular → párrafo → botones → ilustración),
que es además lo que pide el patrón «hero-centric»: en móvil se conserva la
jerarquía de escritorio, no se invierte. En ≥1024 px no cambia nada: ahí sigue
la rejilla de dos columnas con la mascota grande a la derecha, ya aprobada.
Ese orden lo da ya el DOM —badge, título, párrafo, botones y mascota son, por
ese orden, el contenido de .hero-caja—, así que aquí no hace falta ningún
`order`: solo pintar el panel.
El panel (.hero-caja) es el mismo que el de las páginas internas: comparte
degradado (--degradado-panel), radio y sombra con .hero-panel, pero NO su clase,
porque `.hero-panel h1` y `.hero-panel p` (0,1,1 y 0,3,1) le ganarían a .title y
.lead y la landing perdería su escala tipográfica propia.
Las cifras, la franja y el enlace de voluntarios se quedan fuera, en .hero-extra:
son --card (#F7EAD9) y --banner (#F7EBDC) y dentro del panel —degradado #F8ECDD →
#F7E4CD— quedarían a menos de un 1 % de diferencia de luminancia, o sea invisibles
como tarjetas. Fuera, sobre --bg (#FCF4EA), sí se leen como bloques aparte.
El margen lateral lo pone .wrap y ya no hace falta restituirlo aquí: ver la nota
de `.hero{padding-top/bottom}` más arriba. */
@media(max-width:1023px){
/* `margin-inline:auto` es nuevo: el tope de 660 px ya estaba, pero sin caja
visible no se notaba que la columna quedaba pegada a la izquierda. Con el
panel pintado, a 768 px se veían 44 px de aire solo a la derecha. */
.hero-grid{max-width:660px;margin-inline:auto;}
.hero-caja{position:relative;overflow:hidden;background:var(--degradado-panel);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:24px 18px 14px;}
/* El resplandor de la esquina, igual que en .hero-panel::after. El aro de
.hero-panel::before no se copia: la mascota ya trae sus propios anillos y los
dos juntos se cruzarían. */
.hero-caja::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,27,.16),transparent 68%);pointer-events:none;}
.hero-caja>*{position:relative;z-index:1;}
/* El chip es --card-2 #F8ECDD, que es EXACTAMENTE el color con el que arranca el
degradado del panel justo en la esquina donde el chip cae: dentro del panel
desaparecía. En blanco se lee como tarjeta y además sube el contraste de su
texto (--orange-ink-hover pasa de 5.42:1 a 7.13:1). */
.hero-caja .badge{background:var(--white);}
/* CONTRASTE — «Estamos contigo.» iba en --orange-deep #E85D10, que sobre --bg da
3.21:1 y pasa raspando el umbral de texto grande. Sobre el degradado del panel
(que baja a #F7E4CD) cae a 2.82:1 y ya NO pasa. Va a --orange-ink #BB4A0C
(4.13:1), que es exactamente lo que hace `.hero-panel h1 .orange` en las
páginas internas: dentro del panel, el mismo naranja que ellas. En escritorio,
sin panel y sobre --bg, el titular conserva --orange-deep. */
.hero-caja .title .orange{color:var(--orange-ink);}
/* Entre el enlace de voluntarios y la sección siguiente quedaban 100 px muertos:
44 de .hero y 56 de .pasos, sin nada que los ocupara. */
.hero{padding-bottom:8px;}
/* La ilustración pasa a acompañar en vez de tapar. La caja se ciñe al ancho de
la mascota (no al de la columna) porque los anillos van a `inset:0` de esa
caja: si la caja fuera la columna entera, el anillo saldría del tamaño de la
pantalla y se montaría sobre los botones de arriba. Los porcentajes replican
la proporción de escritorio (560/520 ≈ 1.08 el grande, 410/520 ≈ 0.79 el
pequeño), así que el halo se desborda solo ~10 px por lado.
El aire de abajo lo pone ahora el `padding-bottom` del panel, no un margen:
dentro de una caja con `overflow:hidden` un margen inferior no protege la
sombra de la mascota, el relleno sí. */
.hero-right{width:min(256px,68vw);margin:0 auto;}
.mascot{width:100%;max-width:none;}
.rings::before{width:108%;height:108%;}
.rings::after{width:79%;height:79%;}
}
/* El panel le quita 36 px de ancho útil al chip y «Acompañamiento emocional»
(235 px medidos con la tipografía real) se partía en dos líneas: el chip subía
de 66 a 87 px y empujaba el botón principal hacia el borde de la pantalla. Se
recupera la línea única apretando el chip —relleno 12, hueco 10, icono 24—:
quedan 241 px útiles, 6 de margen. Por debajo de ~350 px de ventana no cabe de
ninguna forma y vuelve a partirse, que es lo que ya hacía antes del panel. */
@media(max-width:619px){
.hero-caja .badge{padding:12px;gap:10px;}
.hero-caja .badge .ic{width:24px;height:24px;flex:0 0 24px;}
}
/* De tableta para arriba (y hasta que entra la rejilla de dos columnas) la
mascota puede crecer: la columna es ancha y a 256 px se quedaba perdida. */
@media(min-width:620px) and (max-width:1023px){.hero-right{width:min(360px,50vw);margin:0 auto;}.hero-caja{padding:34px 30px 20px;}}
/* ===== Hero compacto (páginas internas) =====
El panel es claro: el degradado oscuro terracota→azul marino se eliminó. */
.hero-slim{padding:30px 0 10px;}
.hero-panel{background:var(--degradado-panel);border-radius:var(--r-xl);padding:34px 22px;position:relative;overflow:hidden;box-shadow:var(--shadow);color:var(--ink);}
@media(min-width:760px){.hero-panel{padding:56px 44px;}}
.hero-panel::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,27,.16),transparent 68%);pointer-events:none;}
.hero-panel::before{content:"";position:absolute;right:-70px;bottom:-150px;width:340px;height:340px;border-radius:50%;border:1.5px solid rgba(242,106,27,.18);box-shadow:0 0 0 60px rgba(242,106,27,.035) inset,0 0 0 46px rgba(242,106,27,.05);pointer-events:none;}
.hero-panel .inner{position:relative;max-width:660px;}
.hero-panel.con-media{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;}
.hero-panel.con-media::before{display:none;}
.hero-panel.con-media .inner{max-width:620px;}
@media(min-width:900px){.hero-panel.con-media{grid-template-columns:1.12fr .88fr;gap:28px;}.hero-panel.con-media .inner{order:1;}.hero-panel.con-media .hero-media{order:2;}}
.hero-media{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-height:190px;}
.hero-media img{position:relative;z-index:1;width:100%;max-width:420px;height:auto;filter:drop-shadow(0 26px 40px rgba(196,104,32,.18));}
@media(max-width:899px){.hero-media img{max-width:300px;}}
.hero-panel.con-media.media-chica .inner{max-width:640px;}
@media(min-width:900px){.hero-panel.con-media.media-chica{grid-template-columns:1.4fr .6fr;gap:24px;}}
.hero-media.chica img{max-width:290px;aspect-ratio:1/1;object-fit:cover;object-position:75% 50%;}
@media(max-width:899px){.hero-media.chica{min-height:0;}.hero-media.chica img{max-width:200px;}}
.hero-media.con-anillos::before,.hero-media.con-anillos::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;aspect-ratio:1;border:1.5px solid rgba(242,106,27,.16);}
.hero-media.con-anillos::before{width:min(330px,92%);}
.hero-media.con-anillos::after{width:min(235px,66%);border-color:rgba(242,106,27,.10);}
/* El halo se montaba sobre los botones en móvil. El diámetro salía del ANCHO de
.hero-media (92 % de la columna, que en móvil es el panel entero: 268 px a 375),
mientras que el alto de la caja lo pone la mascota (200 px con `min-height:0`).
El anillo, centrado, se desbordaba 34 px por arriba y pisaba 16 px el botón
«Ver material». Por debajo de 900 px el diámetro pasa a medirse contra el ALTO
de la caja —que sí sigue a la ilustración—, y el margen vertical deja aire para
lo poco que se desborda. `width:auto` es necesario para que mande el
`aspect-ratio:1` que ya traen los dos pseudoelementos. */
@media(max-width:899px){
.hero-media.con-anillos{margin-block:12px;}
.hero-media.con-anillos::before{width:auto;height:114%;}
.hero-media.con-anillos::after{width:auto;height:80%;}
}
.hero-panel h1{font-size:clamp(30px,5.6vw,48px);font-weight:600;margin:16px 0;letter-spacing:-.025em;}
/* --orange-deep #E85D10 solo llega a 3:1 sobre --bg (3.21). El degradado de este
panel baja hasta #F7E4CD, donde da 2.82 y NO pasa el umbral de texto grande, así
que aquí el acento del titular va en --orange-ink (4.13:1). Ver mockups/README.md
§ 2: la tabla original solo validó --orange-deep contra el crema claro. */
.hero-panel h1 .orange{color:var(--orange-ink);}
/* `:not()` porque `.hero-panel p` (0,2,0) le gana a `.eyebrow` y a `.hero-vol`
(0,1,0): sin esto el eyebrow del hero sale a 17 px y en color de cuerpo en vez
de naranja pequeño en versalitas. */
.hero-panel p:not(.eyebrow):not(.hero-vol){font-size:17px;color:var(--body);max-width:620px;margin-bottom:26px;}
.hero-panel .eyebrow,.hero-panel .hero-vol a{color:var(--orange-ink-hover);}
/* ===== Pasos ===== */
.pasos{padding:56px 0 0;}
.pasos-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:760px){.pasos-grid{grid-template-columns:repeat(3,1fr);}}
.paso{background:var(--white);border:1.4px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.paso:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.paso .num{width:46px;height:46px;border-radius:15px;background:var(--card);color:var(--orange-ink);font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.paso h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.paso p{color:var(--body);font-size:15.5px;}
.paso .btn{margin-top:18px;align-self:flex-start;}
/* ===== Equipo / terapeutas ===== */
.terapeutas{padding:56px 0 0;}
.terapeutas .sec-head{max-width:640px;}
.team-cifras,.cifras{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 26px;}
/* Cifra grande sobre --card: --accent se queda en 2.85:1 (no llega ni al 3:1 de
texto grande), así que va en --orange-ink (4.33:1). */
.cifra{flex:1 1 160px;background:var(--card);border-radius:var(--r-card);padding:18px 22px;}
.cifra b{display:block;font-size:clamp(28px,5vw,36px);font-weight:800;color:var(--orange-ink);line-height:1.1;}
.cifra span{color:var(--body);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.team-filtros,.chips-filtro{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px;}
.team-filtros button,.chips-filtro button{border:1.5px solid var(--line);background:var(--white);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;}
.team-filtros button:hover,.chips-filtro button:hover{background:var(--card-2);border-color:var(--orange);}
.team-filtros button.sel,.chips-filtro button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.team-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.team-grid{grid-template-columns:repeat(3,1fr);}}
.terap{background:var(--white);border:1.4px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:13px;transition:transform .2s;}
.terap:hover{transform:translateY(-4px);}
.terap-top{display:flex;align-items:center;gap:14px;}
.terap-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--card);color:var(--orange-ink-hover);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;}
.terap-id b{display:block;font-size:16px;font-weight:700;line-height:1.25;}
.terap-id small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;margin-top:3px;}
.terap-esp{background:var(--card-2);border-radius:14px;padding:11px 14px;font-size:14px;color:var(--body);font-weight:500;}
.terap-exp{font-size:13px;color:var(--muted);font-weight:700;}
.team-estado{color:var(--body);font-size:15px;padding:28px 4px;}
/* ===== Materiales (sigue oculta en la landing) ===== */
.materiales{padding:56px 0 0;}
.searchbar{position:relative;max-width:560px;margin:0 0 18px;}
.searchbar input{width:100%;border:1.6px solid var(--line-solid);background:var(--white);box-shadow:var(--shadow-sm);border-radius:var(--r);padding:16px 16px 16px 48px;font-size:16px;color:var(--ink);font-family:inherit;}
.searchbar input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(242,106,27,.16);}
.searchbar .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.filters button{border:1.5px solid var(--line);background:var(--white);color:var(--ink);padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;min-height:40px;}
.filters button:hover{background:var(--card-2);border-color:var(--orange);}
.filters button.sel{background:var(--ink);color:#fff;border-color:var(--ink);}
.grid-content,.grid-mat{display:grid;grid-template-columns:1fr;gap:16px;}
/* `min-width:0` obligatorio: por defecto un item de grid vale `min-width:auto`, o
sea que la pista nunca baja del contenido mínimo de la tarjeta. Ese mínimo lo
fija la palabra más larga del título (`.card-body b`; hoy «psicológicos», 113 px
a 16.5px/700), y con eso la pista pedía 287 px dentro de un contenedor de 265: a
320 px de ventana la tarjeta se comía su margen derecho y llegaba cortada al borde
de la pantalla, con el izquierdo intacto. El `min-width:0` que ya tiene
`.card-body` no basta: arregla el reparto flex DENTRO de la tarjeta, no el
tamaño de la pista que la contiene. */
.grid-content>*,.grid-mat>*{min-width:0;}
@media(min-width:780px){.grid-content,.grid-mat{grid-template-columns:1fr 1fr;}}
.card,.card-mat{background:var(--white);border:1.4px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;gap:16px;align-items:center;cursor:pointer;text-align:left;width:100%;font-family:inherit;box-shadow:var(--shadow-sm);transition:transform .18s,border-color .18s;}
.card:hover,.card-mat:hover{transform:translateY(-4px);border-color:var(--orange);}
.card .thumb,.card-mat .thumb{width:58px;height:58px;border-radius:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--card);color:var(--orange-ink-hover);background-size:cover;background-position:center;}
.card .thumb svg,.card-mat .thumb svg{width:26px;height:26px;}
.card-body,.card-mat .cuerpo{flex:1;min-width:0;}
.card-body .tag,.card-mat .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-ink);}
.card-body b,.card-mat .cuerpo b{font-size:16.5px;display:block;font-weight:700;margin:3px 0 4px;letter-spacing:-.01em;line-height:1.3;}
.card-body small,.card-mat .cuerpo small{color:var(--body);font-size:13.5px;display:block;line-height:1.45;}
.card-body .by{color:var(--orange-ink);font-weight:600;}
.card .act,.card-mat .act{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .18s;}
.card:hover .act,.card-mat:hover .act{transform:scale(1.08);background:var(--orange-ink);}
.empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--body);}
.empty .ic{width:34px;height:34px;margin:0 auto 8px;color:var(--orange);}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;}
/* ===== Formulario ===== */
.inscripcion,.bloque-form{padding:56px 0 8px;background:var(--card-2);margin-top:52px;}
/* Estas dos secciones son --card-2, donde --orange-ink se queda en 4.40:1. El
naranja pequeño que va directamente sobre ese crema sube a --orange-ink-hover
(5.77:1), igual que hace `.stepper-label b` más abajo.
El asterisco de dentro de un `.field` NO entra aquí a propósito: ahí el fondo es
blanco y --orange-ink ya da 5.12:1. Lo resuelve la especificidad —`.field .req`
se declara después y empata—, así que el orden de estas dos reglas importa. */
.inscripcion .inline-link,.bloque-form .inline-link,
.inscripcion .req,.bloque-form .req{color:var(--orange-ink-hover);}
.form-wrap{max-width:800px;margin:0 auto;}
.form{background:var(--white);border:1.4px solid var(--line);border-radius:var(--r-xl);padding:26px 20px;box-shadow:var(--shadow);}
@media(min-width:760px){.form{padding:44px;}}
.form-sec{margin:26px 0 4px;font-size:13px;font-weight:800;color:var(--orange-ink);text-transform:uppercase;letter-spacing:.1em;}
.form-sec:first-child{margin-top:0;}
.field{margin-bottom:20px;}
.field>label,.field-label{display:block;font-weight:700;font-size:15px;margin-bottom:9px;color:var(--ink);}
.field .req,.req{color:var(--orange-ink);}
.opt{display:inline-block;margin-left:8px;background:var(--card);color:var(--body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 9px;border-radius:999px;vertical-align:1px;}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=number],
.field input[type=search],.field input[type=file],.field textarea,.field select{
width:100%;border:1.6px solid var(--line-solid);background:var(--bg);border-radius:var(--r);padding:14px 16px;font-size:16px;color:var(--ink);font-family:inherit;transition:.15s;}
.field textarea{resize:vertical;min-height:112px;line-height:1.5;}
/* El texto del botón nativo («Choose files») lo pone el navegador; el aspecto sí es nuestro. */
.field input[type=file]{padding:10px 12px;cursor:pointer;font-size:15px;}
.field input[type=file]::file-selector-button{font-family:inherit;font-weight:600;font-size:14px;border:1.5px solid var(--line-solid);background:var(--card);color:var(--orange-ink-hover);border-radius:12px;padding:9px 14px;margin-right:12px;cursor:pointer;transition:.15s;}
.field input[type=file]::file-selector-button:hover{background:var(--card-2);border-color:var(--orange);}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--muted-deco);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(242,106,27,.16);}
.field .hint{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5;}
.grid2{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr;}}
/* ---- Teléfono ---- */
.tel-row{display:flex;gap:10px;}
.tel-row select{flex:0 0 auto;width:auto;max-width:44%;min-width:0;}
.tel-row input,.tel-row .tel-num{flex:1 1 auto;min-width:0;}
.tel-pista{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5;}
.tel-pista svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--orange);}
.tel-pista b{color:var(--body);font-weight:700;}
/* ---- Rango horario («Desde [hh:mm] hasta [hh:mm]») ---- */
/* OJO: no llamar a esto `.franja` — esa clase ya es la banda naranja de la
home (arriba, «Juntos vamos a sanar») y se la pisaríamos. */
/* Las dos horas van en una línea y se parten en dos filas cuando no caben,
sin media query: el `flex-wrap` con base de 148 px lo resuelve solo. */
.rango-horas{display:flex;flex-wrap:wrap;gap:10px 14px;}
.rango-horas label{display:flex;align-items:center;gap:9px;flex:1 1 148px;min-width:0;margin:0;font-weight:600;font-size:14.5px;color:var(--body);}
.rango-horas label>span{flex:0 0 auto;}
.rango-horas select{flex:1 1 auto;width:auto;min-width:0;padding:12px 12px;}
/* Estados de validación (la clase va en el .field). */
.msg-campo{display:none;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:600;margin-top:9px;line-height:1.45;border-radius:12px;padding:10px 12px;}
.msg-campo svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;}
.field.es-invalido input,.field.es-invalido select{border-color:var(--err);background:var(--err-bg);}
.field.es-invalido input:focus{box-shadow:0 0 0 4px rgba(179,38,30,.16);border-color:var(--err);}
.field.es-invalido .msg-error{display:flex;background:var(--err-bg);color:var(--err);}
.field.es-valido input{border-color:var(--ok);background:var(--ok-bg);}
.field.es-valido input:focus{box-shadow:0 0 0 4px rgba(30,122,77,.16);border-color:var(--ok);}
.field.es-valido .msg-ok{display:flex;background:var(--ok-bg);color:var(--ok);}
.field.es-valido .tel-pista,.field.es-invalido .tel-pista{display:none;}
/* Marca simple de error por input: la usa telemedicina hasta la segunda pasada. */
.field input.input-error{border-color:var(--err);background:var(--err-bg);}
/* ---- Contacto alternativo ---- */
/* `min-width:0` anula el `min-width:min-content` que los navegadores le ponen de
serie al