/*
 * themontessori.world — public design system.
 *
 * Shared by every public-facing page (home, search results, school profile…).
 * Plain CSS served by Propshaft; NOT processed by Tailwind. Extracted from the
 * reference designs in /design (home.html, perfil.html), which share the same
 * tokens, header, brand rule and footer.
 *
 * Sections:
 *   1. Tokens          6. Profile — overview / facts
 *   2. Base            7. Profile — narrative / team / criteria / facilities
 *   3. Header / nav    8. Profile — sidebar
 *   4. Breadcrumbs     9. Testimonials
 *   5. Profile — hero 10. Contact
 *                     11. Footer
 *                     12. Hero gallery
 */

/* ============================ 1. Tokens ============================ */
/* Los tokens comunes (incluidos --greige/--maroon con contraste AA) viven en
   base.css; aquí solo lo propio del área pública: la banda verde del hero y el
   ancho máximo del contenido. */
:root{
  --green-band:#B7D0AB;
  --maxw:1100px;
}

/* ============================ 2. Base ============================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
/* Sticky footer: el body se estira al alto de la ventana y .page-shell (que
   envuelve el contenido de cada página) crece para empujar el footer abajo, así
   en páginas cortas no queda una franja blanca del body bajo el footer oscuro.
   El wrapper es imprescindible: sin él, las secciones —hijas directas del body
   flex— pierden su margin:0 auto (los márgenes auto anulan el stretch) y encogen
   a su contenido. Dentro de .page-shell vuelven a maquetar como bloque normal. */
body{min-height:100vh;display:flex;flex-direction:column}
.page-shell{flex:1 0 auto;min-width:0}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:540;letter-spacing:-0.015em;line-height:1.08}
a{color:inherit} img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--greige)}
:focus-visible{outline:2.5px solid var(--action);outline-offset:3px;border-radius:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ====================== 3. Header / nav (shared) ================== */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 34px;max-width:var(--maxw);margin:0 auto;gap:20px}
.brand-logo{display:flex;align-items:center} .brand-logo svg{height:56px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:14px}
.nav .links{display:flex;gap:28px;align-items:center;font-size:.93rem;font-weight:500}
.nav .links a{text-decoration:none;color:var(--ink-soft);transition:color .2s} .nav .links a:hover{color:var(--ink)}
.lang{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--ink);cursor:pointer;background:none;font-family:inherit}
.lang-switcher{position:relative}
.lang-caret{transition:transform .18s}
.lang[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;display:flex;flex-direction:column;gap:2px;min-width:72px;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,.09)}
/* Igual que .acct-menu: el panel arranca con [hidden] y menu_controller lo
   togglea; hay que reponer display:none porque display:flex (arriba) gana a
   [hidden]. */
.lang-dropdown[hidden]{display:none}
.lang-option{display:block;padding:6px 14px;border-radius:7px;font-size:.8rem;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
a.lang-option:hover,button.lang-option:hover{background:var(--bg,#faf8f4)}
button.lang-option{background:none;border:none;cursor:pointer;width:100%;text-align:left}
.lang-current{color:var(--ink-soft);cursor:default}
/* El código de locale es lo PRIMERO que se retira cuando la barra va justa (ver
   el bloque de breakpoints más abajo): el globo ya identifica el control y el
   aria-label del botón sigue anunciando el idioma actual, así que quitarlo no
   cuesta información. Va en un <span> porque un nodo de texto suelto no se
   puede ocultar desde CSS. */
@media(max-width:720px){ .lang-code{display:none} }
/* CTA de cabecera para escuelas ("¿Quieres incluir tu escuela?"). Botón propio,
   separado de la píldora de sesión —que se queda solo con "Inicia sesión"
   mientras el alta directa está oculta—. Mismo aspecto que el resto de la barra:
   píldora blanca con filete, tinta oscura; destaca por ser el primero y por ir
   en negrita, no por color. */
.nav-cta{display:inline-flex;align-items:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
.nav-cta:hover{color:var(--blue);border-color:var(--blue)}
/* El CTA es la pieza más ancha del cluster (193px en español) y la que más
   sitio libera, así que es la última en encoger y la primera en desaparecer del
   todo. Con el idioma ya reducido el cluster mide 379px y el header necesita
   699px; por debajo se aplasta. NO se recoge en la hamburguesa a propósito: en
   móvil la captación se apoya en los CTA del cuerpo de la página. */
@media(max-width:700px){ .nav-cta{display:none} }

.auth-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600}
.auth-pill a{text-decoration:none;color:var(--ink);transition:color .2s} .auth-pill a:hover{color:var(--blue)}
.auth-pill .auth-sep{color:var(--line);font-weight:400}
button.auth-pill{color:var(--ink);background:none;cursor:pointer;font-family:inherit;transition:color .2s,border-color .2s}
button.auth-pill:hover{color:var(--blue);border-color:var(--blue)}
button.auth-pill svg{display:block}
/* Menú compacto para pantallas estrechas (ver responsive, --sm). El <details>
   está oculto en ancho; a partir de --sm sustituye a .nav-right. El botón es el
   <summary>; el panel cae como el desplegable de idioma. */
.nav-menu{display:none;position:relative}
.hamb{display:flex;align-items:center;justify-content:center;padding:8px;color:var(--ink);cursor:pointer;background:none;border:none;font:inherit}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;min-width:186px;display:flex;flex-direction:column;gap:2px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* Igual que .acct-menu y .lang-dropdown: el display:flex de arriba es una regla
   de autor y gana al display:none que el navegador da a [hidden], así que hay
   que reponerlo o el panel se queda siempre abierto. */
.nav-menu-panel[hidden]{display:none}
.nav-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 14px;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.nav-menu-item svg{flex:none;color:var(--greige)}
a.nav-menu-item:hover,button.nav-menu-item:hover{background:#faf8f4}
/* Igual que .acct-item: "Ver ficha" bloqueado con la ficha sucia. */
button.nav-menu-item:disabled{opacity:.45;cursor:default}
button.nav-menu-item:disabled:hover{background:none}
.nav-menu-item--current{color:var(--ink-soft);cursor:default}
.nav-menu-sep{height:1px;background:var(--line);margin:5px 8px}
.brandrule{display:flex;height:5px;width:100%}.brandrule span{flex:1}

/* ============================ 4. Breadcrumbs ====================== */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:16px 34px 0;font-size:.88rem;color:var(--ink-soft)}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent} .crumbs a:hover{border-color:var(--greige)}
.crumbs .sep{color:var(--greige);margin:0 8px}

/* ===== 5. Profile — hero (identity + zócalo + main photo) =====
   La cabecera comparte exactamente la columna del cuerpo (--maxw / padding 34px):
   nombre, cifras y foto se alinean al mismo eje que el texto de más abajo. La
   jerarquía se hace solo con filetes y tipografía — nada de cajas ni sombras. */
.fhd{max-width:var(--maxw);margin:0 auto;padding:26px 34px 0;display:flex;justify-content:space-between;gap:40px;align-items:flex-end}
.fhd .ident{min-width:0}
/* Badge: solo texto con check, sin píldora — baja el ruido de la cabecera. */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#2E6B3D;margin-bottom:12px}
.badge svg{width:13px;height:13px}
.fhd h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:400;line-height:1.02;letter-spacing:-.02em;margin:0}
.fhd .place{margin-top:10px;font-size:1.125rem;color:var(--ink-soft)}
.fhd .place b{font-weight:600}
.fhd .place .loc{color:var(--maroon);font-weight:600;text-decoration:none}
.fhd .place .loc:hover{color:var(--ink)}
.fhd .place .sep{color:#C9C0AE;margin:0 10px}
/* Un solo dato: se pega a la localidad en vez de un zócalo de una celda. */
.fhd .place .stat b{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.3rem;color:var(--ink);overflow-wrap:anywhere}
.fhd .place .stat .lab{color:var(--greige)}
/* Logo del centro: sin caja ni borde, a su tamaño (máx. 110px de alto),
   alineado a la derecha. */
.logobox{flex:none;display:flex;align-items:center;justify-content:flex-end;margin-bottom:4px;padding-bottom:3px}
.logobox img{max-height:60px;width:auto;max-width:100%;object-fit:contain}

/* Zócalo: filete arriba y abajo, celdas iguales separadas por un filete. La
   rejilla (con los filetes) va dentro del contenedor de columna, para que el
   filete arranque a 34px, alineado con el H1 y la foto — no de borde a borde. */
.zocalo{max-width:var(--maxw);margin:26px auto 0;padding:0 34px}
.zocalo .grid{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zocalo .cell{min-width:0;padding:15px 0}
.zocalo .cell + .cell{border-left:1px solid var(--line);padding-left:32px}
.zocalo .fig{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.3rem;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.zocalo .lab{margin-top:7px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--greige)}
.zocalo .lab .st,.fhd .place .stat .lab .st{white-space:nowrap}

/* Aviso cuando la ficha aún no la ha completado (o reclamado) el centro. */
.fnotice{max-width:var(--maxw);margin:26px auto 0;padding:0 34px}
.fnotice .bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.fnotice .msg{font-size:1rem;color:var(--ink-soft)}
.fnotice .claim{flex:none;font-size:.95rem;font-weight:600;color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--line)}
.fnotice .claim:hover{color:var(--ink)}
/* Pegado bajo el zócalo: sin hueco y sin doble filete (comparten el de abajo). */
.zocalo + .fnotice{margin-top:0}
.zocalo + .fnotice .bar{border-top:none}

.mainphoto{max-width:var(--maxw);margin:24px auto 0;padding:0 34px}
.mainphoto img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}

/* ============= 6. Profile — two-column layout + sidebar =========== */
.flayout{max-width:var(--maxw);margin:10px auto 0;padding:0 34px;display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.flayout > .fmain{min-width:0}
.flayout .fmain .lead,.flayout .fmain .narr,.flayout .fmain .crit,.flayout .fmain .fac,.flayout .fmain .team{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.flayout .fmain .lead{margin-top:30px}
.flayout .fmain .narr,.flayout .fmain .crit,.flayout .fmain .fac,.flayout .fmain .team{margin-top:48px}

/* ====================== 7. Profile — content ===================== */
.lead .desc{max-width:40rem}
.lead .desc .serif{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.25;margin-bottom:18px}
.lead .desc p{color:var(--ink-soft);font-size:1.08rem}
.lead .desc p + p{margin-top:16px}

.narr .block{padding-top:36px;border-top:1px solid var(--line)}
.narr h3{font-size:1.5rem;margin-bottom:14px}
.narr .txt{max-width:40rem;color:var(--ink-soft);font-size:1.06rem}
.narr figure{margin-top:24px;border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:var(--cream-2)}
.narr figure img{width:100%;height:100%;object-fit:cover}

.team h2{font-size:1.5rem;font-weight:560;margin-bottom:4px}
/* Barra segmentada de edades: abre la sección. Ancho por proporción de años
   (flex inline), tramo cubierto en color de acento, no cubierto en filete. */
.team-sub{color:var(--greige);font-size:.94rem;margin-bottom:34px}
/* La barra queda "tal cual": el marco envuelve solo la barra de color. Los
   nombres van encima en diagonal y las edades justo debajo, ambos anclados al
   inicio de su tramo con el mismo flex/gap/padding que los segmentos, para que
   caigan alineados sin tener que caber en el ancho del tramo. */
/* Holgura arriba: los nombres van en diagonal y suben ~82px; sin el subtítulo
   que había antes, sin este margen pisarían el encabezado de la sección. */
.ageband{margin-top:46px}
.agebar-frame{background:var(--paper);border:1px solid var(--line);padding:3px}
.agebar{display:flex;gap:5px}
/* Solo los tramos cubiertos pintan barra (color inline). Los no cubiertos
   quedan como hueco transparente: ocupan su sitio pero no se dibujan. */
.agebar .seg{height:14px;border-radius:3px}
/* Nombre de etapa en diagonal (45º), anclado a la esquina inferior izquierda de
   su hueco = inicio del segmento, de modo que el texto asciende hacia la derecha
   sin importar cuánto ocupe. La fila reserva alto para el nombre más largo. */
.agebar-names{display:flex;gap:5px;padding:0 4px;align-items:flex-end;height:82px}
.agebar-names .nm{min-width:0;align-self:flex-end}
.agebar-names .nm .nm-txt{display:inline-block;margin-left:10px;white-space:nowrap;transform:rotate(-45deg);transform-origin:left bottom;font-size:.82rem;line-height:1;color:var(--greige)}
.agebar-names .nm.on .nm-txt{color:var(--ink);font-weight:600}
.agebar-ages{display:flex;gap:5px;margin-top:5px;padding:0 4px;font-size:.78rem}
.agebar-ages .ag{min-width:0;color:var(--greige)}
.agebar-ages .ag.on{color:var(--ink)}
/* Etapas NO cubiertas: pálidas a propósito, para que el hueco "esto no lo hay"
   se lea de un vistazo. NO es un fallo de contraste sin resolver: la barra es un
   role="img" con un aria-label que enuncia tramo a tramo qué cubre y qué no, y
   nombres/edades van aria-hidden. La información no depende de este texto, así
   que aquí gana el matiz visual. Un chequeo automático de contraste lo marcará
   igualmente (no distingue texto decorativo con alternativa accesible): es
   esperado y está cubierto por el aria-label, no lo "arregles" subiendo el tono. */
.agebar-names .nm:not(.on) .nm-txt,
.agebar-ages .ag:not(.on){color:#A99E8D}
/* Título de la gráfica, centrado debajo: son las etapas Montessori canónicas.
   En mayúsculas espaciadas como rótulo (eyebrow); el texto va en minúsculas para
   los lectores de pantalla y lo pone en caja alta el CSS. */
.agebar-caption{text-align:center;margin-top:7px;font-size:.78rem;color:var(--greige)}
/* Edad real del centro bajo el título (solo si el admin la fijó a mano). La
   etiqueta en caja alta; el rango en --ink para que destaque. */
.agebar-school{text-align:center;margin-top:6px;font-size:.9rem;color:var(--greige)}
.agebar-school .lbl{text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.agebar-school b{color:var(--ink);font-weight:600}
.team .envs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.env{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.env .name{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.1rem;margin-bottom:6px}
.env .det{color:var(--ink-soft);font-size:.96rem}
.env .det b{color:var(--ink);font-weight:600}
/* Aclaración de la escuela sobre ese ambiente. Va en pequeño y bajo el detalle
   de plazas y equipo: matiza el dato estructurado, no compite con él. */
.env .note{color:var(--ink-soft);font-size:.9rem;margin-top:8px}

.crit h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:4px}
.crit .sub{color:var(--ink-soft);margin-bottom:26px;max-width:40rem}
.crit ul{list-style:none;display:grid;gap:0}
.crit li{display:flex;column-gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.crit li .ck{align-self:start;margin-top:3px;flex:none;display:flex} .crit li .ck svg{display:block}
/* Etiqueta + valor comparten una fila que envuelve (flex-wrap): un valor corto
   ("No indicado") cabe junto al epígrafe y se alinea a la derecha via
   space-between; un valor largo no cabe, baja a la línea siguiente a ancho
   completo bajo el epígrafe y alineado a la izquierda. min-width:0 deja encoger
   el valor y overflow-wrap parte palabras/URLs muy largas. */
.crit li .body{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:18px;row-gap:4px}
.crit li .lab{font-weight:600}
.crit li .spc{color:var(--ink-soft);font-size:.96rem;text-align:left;min-width:0;overflow-wrap:anywhere}
.crit li.off .ck,.crit li.off .lab,.crit li.off .spc{color:var(--ink-soft);opacity:.7} .crit li.off .lab{font-weight:600}

/* auto-fit + minmax en vez de "1fr 1fr": las píldoras van con white-space:nowrap,
   así que el min-content de cada columna es la píldora más larga (~326px) y dos
   columnas rígidas se salían de los 428px del main, metiéndose por debajo del
   sidebar sticky. Con auto-fit la rejilla decide por SU ancho, no por el del
   viewport, y cae a una sola columna cuando no caben dos de 18rem. */
.fac{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:40px}
.fac h2{font-size:1.2rem;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.95rem;color:var(--ink-soft);white-space:nowrap}

/* ====================== 8. Profile — sidebar ===================== */
.side{position:sticky;top:92px;margin-top:18px}
.sidecard{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sidecard .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid var(--cream-2);font-size:.92rem}
.sidecard .row .k{color:var(--ink-soft);flex:none} .sidecard .row .v{font-weight:600;text-align:right}
.sidecard .row .v a{color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--line)}
.sidecard .row .v .ml{display:block;font-weight:400;font-size:.8rem;color:var(--greige);margin-top:2px}
.sidecard .row .ml.rownote{flex-basis:100%;font-weight:400;font-size:.8rem;line-height:1.45;color:var(--greige);text-align:left;margin-top:4px}
/* "En proceso": el trámite aún no está resuelto, así que la fila no puede leerse
   como una afirmación. Píldora sobria (no alarma) que matiza la autorización. */
.sidecard .row .v .proc{display:inline-block;font-size:.72rem;font-weight:600;color:var(--ink-soft);background:var(--cream-2);border-radius:999px;padding:1px 8px;vertical-align:middle}
/* Varias entidades bajo una misma etiqueta (p.ej. "Reconocida por"): cada una en
   su línea y con el mismo peso, a diferencia de .ml, que es detalle secundario. */
.sidecard .row .v .item{display:block}
.sidecard .row .v .item + .item{margin-top:5px}
.sidecard .row.wide{flex-direction:column;align-items:stretch;gap:5px}
.sidecard .row.wide .k{text-align:left}
.sidecard .row.wide .v{text-align:center}
.sidecard .row.wide .v .ml{margin-top:3px;line-height:1.45}
.sidecta{padding:16px 18px;border-top:1px solid var(--line);background:var(--cream)}
.sidecta a,.sidecta .cta-link{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;background:var(--action);color:#F7FAF6;border:0;border-radius:999px;padding:13px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background .18s}
.sidecta a:hover,.sidecta .cta-link:hover{background:var(--action-hover)}
.sidecta .saved{text-align:center;font-size:.8rem;color:var(--greige);margin-top:12px}

/* ========================= 9. Testimonials ======================= */
.testi{background:var(--cream);border-top:1px solid var(--line);margin-top:58px;padding:52px 0}
.testi .wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.testi h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:24px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tq{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 24px 20px;display:flex;flex-direction:column;justify-content:space-between}
.tq p{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:480;font-size:1.05rem;line-height:1.42;color:var(--ink);margin-bottom:16px}
.tq .who{font-size:.83rem;color:var(--greige);font-weight:600}
.testi .disc{font-size:.8rem;color:var(--greige);margin-top:20px;max-width:48rem;line-height:1.5}
@media(max-width:860px){.testi-grid{grid-template-columns:1fr}}

/* =========================== 10. Contact ========================= */
.contact{max-width:var(--maxw);margin:58px auto 64px;padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.contact .cinfo{padding:34px;display:flex;flex-direction:column;justify-content:center;font-size:1rem;color:var(--ink-soft)}
.contact .cinfo .nm{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.3rem;color:var(--ink);margin-bottom:10px}
.contact .cinfo .addr{margin-bottom:12px;line-height:1.55}
.contact .cinfo .links{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.contact .cinfo .links .web{color:var(--maroon);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line);transition:border-color .18s}
.contact .cinfo .links .web:hover{border-bottom-color:var(--maroon)}
.contact .cinfo .links .lsep{width:1px;height:18px;background:var(--line)}
.contact .cinfo .socials{display:inline-flex;align-items:center;gap:14px}
.contact .cinfo .socials a{display:inline-flex;color:var(--maroon);transition:color .18s}
.contact .cinfo .socials a.fb:hover{color:#1877F2}
.contact .cinfo .socials a.ig:hover svg rect,
.contact .cinfo .socials a.ig:hover svg circle{stroke:url(#ig-grad)}
.contact .cinfo .socials a.ig:hover svg circle[fill]{fill:url(#ig-grad);stroke:none}
.contact .cinfo .visit{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:var(--action);color:#F7FAF6;border:0;text-decoration:none;font:inherit;font-weight:600;border-radius:999px;padding:14px 26px;cursor:pointer;transition:background .18s}
.contact .cinfo .visit:hover{background:var(--action-hover)}
.contact .cinfo .visit[disabled]{opacity:.5;cursor:not-allowed}
.contact-cta--preview{align-self:flex-start}
.contact-cta__note{margin-top:10px;font-size:.85rem;color:var(--greige);line-height:1.5;max-width:34rem}
.contact .cmap{position:relative;display:block;min-height:250px;background:var(--cream-2)}
@media(max-width:860px){ .contact{grid-template-columns:1fr} .contact .cmap{min-height:200px} }

/* ---- Contact modal (Solicitar más información) ---- */
.contact-modal{border:0;border-radius:20px;padding:0;max-width:520px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.contact-modal::backdrop{background:rgba(20,18,15,.45)}
.contact-modal__inner{padding:26px 28px 28px}
.contact-modal__head{position:relative;text-align:center;margin-bottom:18px;border:0}
.contact-modal__head h2{font-size:1.35rem;margin:0}
.contact-modal__logo{display:flex;justify-content:center;padding:8px 0 20px}
.contact-modal__logo img{max-height:48px;width:auto;max-width:56%;object-fit:contain}
.contact-modal__direct{margin:6px 0 0;font-size:.92rem;line-height:1.45;color:var(--ink-soft)}
.contact-modal__close{position:absolute;top:0;right:0;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--greige);cursor:pointer;padding:0}
.contact-modal__done,.contact-modal__error{font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.contact-done{text-align:center;padding:6px 4px 4px}
.contact-done__badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:16px;border-radius:999px;background:var(--action-ring);color:var(--action);font-size:1.5rem;line-height:1}
.contact-done__lead{margin:0 0 16px;font-size:1.08rem;line-height:1.5;color:var(--ink)}
.contact-done__fallback{margin:0 auto 18px;max-width:38ch;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.contact-done__copy{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;line-height:1.5;color:var(--greige)}
.contact-form__field{display:block;margin-bottom:14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.contact-form__field input,.contact-form__field textarea{display:block;width:100%;margin-top:5px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--field-bg);transition:border-color .15s,box-shadow .15s}
.contact-form__field input:focus,.contact-form__field textarea:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px var(--action-ring)}
.contact-form__field textarea{min-height:110px;resize:vertical}
.contact-form__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.contact-chip{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer}
.contact-chip.is-selected{background:var(--action);color:#F7FAF6;border-color:var(--action)}
.contact-form__errors{background:#FDF7F6;border:1px solid #f3c0b8;border-radius:10px;padding:10px 12px 10px 28px;margin-bottom:14px;font-size:.85rem;color:var(--danger)}
.contact-form__consent{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;line-height:1.45;color:var(--ink-soft);margin:4px 0 20px}
.contact-form__consent a{color:var(--maroon)}
.contact-form__submit{display:block;margin:0 auto;background:var(--action);color:#F7FAF6;border:0;border-radius:999px;padding:13px 28px;font:inherit;font-weight:600;cursor:pointer;transition:background .18s}
.contact-form__submit:hover{background:var(--action-hover)}
.contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ====================== 11. Footer (shared) ====================== */
footer{background:var(--ink);color:#cfc7b9;padding:0 0 26px}
footer .brandrule{height:3px;margin-bottom:20px}
footer a{text-decoration:none;color:#F4EFE3;font-size:.94rem} footer a:hover{color:var(--paper)}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:0 34px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px 30px;flex-wrap:wrap}
.foot-brand{width:fit-content;margin-top:10px}
.foot-brand svg{height:46px;width:auto;display:block;margin-bottom:0}
.foot-brand p{font-size:.72rem;color:#9E9486;text-align:right;margin:-5px 5px 0 0}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:23px}
.foot-links span{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:.94rem;color:#cfc7b9}

/* ===================== Responsive (shared) =======================
   Los breakpoints del área pública son de DOS familias distintas; no los
   mezcles ni añadas valores sueltos fuera de estas listas.

   (a) LAYOUT — dónde el diseño de escritorio se reorganiza:

     860px (md) — ficha a una columna (main + sidebar apilados), rejilla del
                  buscador (lista + mapa) a una columna, rejillas de ambientes/
                  instalaciones a una, cabecera de ficha apilada, zócalo de
                  cifras en filas etiqueta/valor, padding lateral reducido a
                  22px y wordmark a 44px. El valor lo fija el buscador: su mapa
                  mide 460px y por debajo de ~848px la lista quedaría inservible.
     560px (sm) — el wordmark encoge a 38px para respirar en 320px; el nombre de
                  la ficha baja de escala para no partirse en móviles estrechos.

   (b) ENCAJE DEL CLUSTER DE LA CABECERA — a qué ancho deja de caber cada pieza
       de la barra superior. Son cuentas, no gusto: ancho necesario = padding
       (22x2) + wordmark + gap (20) + cluster. Medidas en español, que es el
       peor caso. Las piezas se retiran de una en una y en este orden:

     720px — el código de locale ("ES") sale del botón de idioma, que se queda
             en globo + flecha (80px → 58px). Es lo que menos información
             pierde: el aria-label sigue anunciando el idioma actual.
     700px — sale el CTA de captación (193px). Con el idioma ya encogido el
             cluster sin sesión mide 379px y el header necesita 699px. No pasa
             a la hamburguesa: en móvil la captación va por los CTA del cuerpo.
     630px — con sesión, sale el nombre de la escuela y la píldora se queda en
             el avatar (240px → 55px). La regla vive en base.css, con el resto
             del cluster .acct-*, pero el umbral es de aquí.
     460px — ya no cabe ni "Inicia sesión" / el avatar junto al wordmark (221px
             a este ancho), así que TODO el cluster se recoge en la hamburguesa
             (.nav-menu). Es lo último en colapsar, a propósito.

   Otros ficheros del público (directory.css, auth.css) usan los dos de layout. */
@media(max-width:860px){
  .brand-logo svg{height:44px}
  .wrap,.nav,.crumbs,.fhd,.zocalo,.fnotice,.mainphoto,.flayout{padding-left:22px;padding-right:22px}
  /* Ficha: main + sidebar (320px) se apilan; el sidebar deja de ser sticky. */
  .flayout{grid-template-columns:1fr;gap:0}
  .side{position:static;margin-top:44px}
  .team .envs{grid-template-columns:1fr}
  .envs,.fac{grid-template-columns:1fr}
  .crit li .body{flex-direction:column;row-gap:4px} .crit li .spc{text-align:left;white-space:normal}
  /* Cabecera de ficha apilada en columna. En fila, el logo (flex:none) se quedaba
     con el ancho y apretaba la identidad, partiendo "Datos facilitados por el
     centro" en varias líneas y dejando el check descolgado a media altura. En
     columna el badge queda arriba del todo, con el check en línea junto a "Datos". */
  .fhd{flex-direction:column;align-items:flex-start;gap:14px}
  .logobox{justify-content:flex-start}
  .logobox img{max-height:48px}
  /* Las tres cifras dejan de ir en fila: tres filas de filete, etiqueta a la
     izquierda y cifra a la derecha, que aguantan cualquier longitud de valor. */
  .zocalo .grid{grid-template-columns:1fr!important}
  .zocalo .cell{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .zocalo .cell + .cell{border-left:none;padding-left:0}
  .zocalo .fig{order:2;font-size:1.125rem}
  .zocalo .lab{order:1;margin-top:0;font-size:.72rem;letter-spacing:.08em;white-space:normal;overflow:visible}
  .fnotice .bar{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:560px){
  /* El wordmark encoge para dejar sitio en 320px. */
  .brand-logo svg{height:38px}
  /* El clamp del h1 de la ficha se clava en su mínimo (2rem=32px) por debajo de
     ~455px, así que "Complutum Montessori School" rompía tras la primera palabra
     dejando hueco. Bajamos la escala para que aproveche el ancho. */
  .fhd h1{font-size:1.55rem;line-height:1.08}
  .fhd .place{font-size:1rem;margin-top:8px}
}
/* Último eslabón: el cluster entero se recoge en la hamburguesa. A este ancho
   el wordmark ya está en 221px y el cluster reducido (avatar/Inicia sesión +
   globo) mide 127-172px, así que el header necesita 412-457px: aguanta justo.
   Umbral único para público y editor; el caso más ancho es el público SIN
   sesión. Ver el bloque de breakpoints de arriba. */
@media(max-width:460px){
  .nav-right{display:none}
  .nav-menu{display:block}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ======================= 12. Hero gallery ======================== */
.gal{position:relative;border-radius:4px;overflow:hidden}
.gal-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gal-track img{flex:0 0 100%;width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(45,42,38,.5);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gal-nav:hover{background:rgba(45,42,38,.78)}
.gal-nav.prev{left:14px}.gal-nav.next{right:14px}
.gal-dots{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center}
/* Área de toque de 24px (WCAG 2.2 target-size) con el punto visual de 8px: el
   background se recorta al content-box, así el padding transparente agranda el
   objetivo sin agrandar el punto. */
.gal-dots button{width:24px;height:24px;padding:8px;box-sizing:border-box;background-clip:content-box;border-radius:50%;border:none;background-color:rgba(255,255,255,.5);cursor:pointer}
.gal-dots button.on{background-color:#fff}

/* Páginas legales (términos y condiciones): prosa estrecha y legible. */
/* overflow-wrap se hereda: partir tokens largos (el dominio en el H1, correos,
   URLs) para que no desborden en móviles estrechos (suelo 320px). */
/* Página pública de Contacto: reutiliza el sistema de campos .contact-form__* de
   la modal familia → escuela, en una columna estrecha estilo .legal. */
.site-contact{max-width:560px;margin:48px auto 72px;padding:0 34px;overflow-wrap:break-word}
.site-contact h1{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.1rem;line-height:1.15;margin:0 0 18px}
.site-contact__intro{color:var(--ink-soft);line-height:1.6;margin:0 0 16px}
.site-contact__launch{display:flex;align-items:center;gap:18px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 24px;margin:0 0 28px}
.site-contact__launch-icon{flex:none;width:80px;height:auto;object-fit:contain}
.site-contact__launch span{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--ink)}
.site-contact__launch .site-contact__launch-lead{display:block;margin-bottom:6px;font-weight:400}
.site-contact__launch-cta{font:inherit;color:var(--maroon);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.site-contact__launch-cta:hover{text-decoration:none}
.site-contact__banner{border-radius:10px;padding:12px 16px;line-height:1.45;margin:0 0 20px;font-size:.9rem}
.site-contact__banner--warn{background:#FDF7F6;border:1px solid #f3c0b8;color:var(--danger)}
.site-contact__form .contact-form__field select{display:block;width:100%;margin-top:5px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--field-bg);transition:border-color .15s,box-shadow .15s}
.site-contact__form .contact-form__field select:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px var(--action-ring)}
.site-contact__families{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.site-contact__families h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.2rem;margin:0 0 8px}
.site-contact__families p{color:var(--ink-soft);line-height:1.6;margin:0}
.site-contact__done{text-align:center;padding:24px 4px}
.site-contact__badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:16px;border-radius:999px;background:var(--action-ring);color:var(--action);font-size:1.5rem;line-height:1}
.site-contact__done-lead{margin:0 0 12px;font-size:1.15rem;line-height:1.5;color:var(--ink)}
.site-contact__done-note{margin:0;color:var(--ink-soft);line-height:1.55}
@media(max-width:860px){ .site-contact{padding-left:22px;padding-right:22px} }
.legal{max-width:760px;margin:48px auto 72px;padding:0 34px;overflow-wrap:break-word}
.legal h1{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.1rem;line-height:1.15;margin:0 0 6px}
.legal .legal-updated{color:var(--ink-soft);font-size:.92rem;margin:0 0 40px}
.legal h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.32rem;line-height:1.25;margin:40px 0 12px}
.legal h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.08rem;line-height:1.3;margin:34px 0 12px}
.legal p{color:var(--ink-soft);margin:0 0 16px}
.legal ul{color:var(--ink-soft);margin:0 0 16px;padding-left:1.2em}
.legal li{margin:0 0 8px}
.legal a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
/* Foto de apoyo dentro de una página .legal: ancho completo de la columna. */
.legal-figure{margin:0 0 40px}
.legal-figure img{display:block;width:100%;height:auto;border-radius:10px}
@media(max-width:860px){ .legal{padding-left:22px;padding-right:22px} }

/* Preguntas frecuentes al pie de la ficha: acordeón <details> sobrio. Preguntas
   en Fraunces, respuestas en Hanken (heredada), reglas finas como el zócalo. */
.faq{max-width:var(--maxw);margin:48px auto 0;padding:0 34px}
.faq h2{font-size:1.4rem;margin-bottom:8px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-family:"Fraunces",Georgia,serif;font-weight:540;font-size:1.05rem;color:var(--ink);
  list-style:none;cursor:pointer;padding:16px 28px 16px 0;position:relative}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"";position:absolute;right:4px;top:22px;width:8px;height:8px;
  border-right:1.5px solid var(--greige);border-bottom:1.5px solid var(--greige);
  transform:rotate(45deg);transition:transform .2s}
.faq-item[open] .faq-q::after{transform:rotate(-135deg)}
.faq-a{color:var(--ink-soft);padding:0 28px 18px 0;max-width:44rem}

/* "Última actualización" de la ficha, discreta, antes del footer. */
.updated{max-width:var(--maxw);margin:32px auto 24px;padding:0 34px;font-size:.85rem;color:var(--greige);text-align:right}

/* Reclamar ficha ("claim your profile"): landing pública enlazada desde el CTA
   de la ficha (claims/new) y la pantalla de "revisa el correo" (claims/create).
   El finish —elegir contraseña— usa el marco de auth (auth.css), no esto. */
.claim-page{padding-top:44px;padding-bottom:72px}
.claim-page .claim-title{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:2.35rem;line-height:1.12;margin:0;text-wrap:balance}
.claim-page .claim-lead{margin:0;font-size:1.15rem;color:var(--ink-soft);max-width:34em;text-wrap:pretty}
.claim-page .claim-lead strong{color:var(--ink);font-weight:600}
.claim-page .claim-eyebrow{margin:0}
/* Dos columnas de igual peso: la propuesta y la ficha real que la sostiene.
   `auto-fit` + minmax las apila solas cuando no caben (no hay breakpoint que
   mantener). */
.claim-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:56px;align-items:start}
.claim-pitch{display:flex;flex-direction:column;gap:22px}
.claim-preview{display:flex;flex-direction:column;gap:14px}

/* CTA: la tarjeta ENTERA es el submit del formulario (button_to), así que se
   estiliza el <button>, no un contenedor. */
.claim-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;width:100%;text-align:left;
  background:var(--paper);border:1px solid var(--disabled-bg);border-radius:14px;padding:18px 20px;
  font-family:inherit;font-size:1rem;color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease}
.claim-cta:hover{border-color:var(--action);box-shadow:0 2px 14px rgba(45,42,38,.07)}
.claim-cta__icon{flex:none;width:44px;height:44px;border-radius:11px;background:#EAF1EA;color:var(--action);display:grid;place-items:center}
.claim-cta__body{flex:1 1 220px;min-width:200px;display:flex;flex-direction:column;gap:3px}
.claim-cta__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:2px}
.claim-cta__title{font-size:1.05rem;font-weight:700}
.claim-cta__sendto{font-size:.87rem;color:var(--ink-soft);line-height:1.4;margin-top:5px}
.claim-cta__sendto strong{color:var(--ink);font-weight:600}
.claim-cta__go{flex:none;margin:0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--action);color:#F7FAF6;border-radius:999px;padding:13px 24px;font-weight:600;white-space:nowrap}
.claim-cta:hover .claim-cta__go{background:var(--action-hover)}
.verify-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;padding:5px 12px;border:1px solid var(--blue);border-radius:999px;color:#2C6E92;font-family:system-ui,sans-serif;font-weight:600;font-size:.82rem;line-height:1;white-space:nowrap}

.claim-perks{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;font-size:.87rem;color:var(--ink-soft)}
.claim-perks li{display:inline-flex;align-items:center;gap:7px}
.claim-perks svg{flex:none;color:var(--action)}
.claim-fine{margin:0;font-size:.87rem;line-height:1.6;color:var(--disabled-fg);max-width:36em}
.claim-fine a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.claim-noemail{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:26px}
.claim-noemail h2{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.25rem;margin:0 0 10px}
.claim-noemail p{color:var(--ink-soft);margin:0 0 18px}

/* La ficha de muestra. Reproduce la real: lo que falta se dibuja con borde
   discontinuo y en greige, para que el hueco se vea sin leerlo. */
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 26px rgba(45,42,38,.07)}
.pcard__shot{height:132px;border-bottom:1px solid var(--cream-2)}
.pcard__shot img{width:100%;height:100%;object-fit:cover}
.pcard__shot--empty{display:grid;place-items:center;font-size:.75rem;color:var(--greige);
  background:repeating-linear-gradient(45deg,#F2EFE6,#F2EFE6 9px,var(--cream-2) 9px,var(--cream-2) 18px)}
.pcard__body{padding:22px 24px 20px;display:flex;flex-direction:column;gap:18px}
.pcard__ident{display:flex;align-items:flex-start;gap:14px}
.pcard__logo{flex:none;width:46px;height:46px;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.pcard__logo img{width:100%;height:100%;object-fit:contain}
.pcard__logo--empty{border:1px dashed #C9C0AE;background:var(--field-bg);font-size:.6rem;line-height:1.2;color:var(--greige);text-align:center;padding:4px}
.pcard__name{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:1.3rem;font-weight:560;line-height:1.15}
.pcard__place{font-size:.87rem;color:var(--ink-soft);margin-top:4px}
.pcard__chips{display:flex;flex-wrap:wrap;gap:8px}
.pcard__chip{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.8rem;color:var(--ink-soft)}
.pcard__chip--empty{border-style:dashed;border-color:#C9C0AE;color:var(--greige)}
.pcard__desc{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.pcard__desc--empty{border:1px dashed #C9C0AE;border-radius:10px;background:var(--field-bg);padding:16px;color:var(--greige)}
.pcard__facts{margin:0;border-top:1px solid var(--cream-2)}
.pcard__facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #F4EFE3;font-size:.9rem}
.pcard__facts>div:last-child{border-bottom:none}
.pcard__facts dt{font-weight:600;color:var(--ink-soft)}
.pcard__facts dd{margin:0;text-align:right}
.pcard__facts dd.is-empty{color:var(--greige)}
/* Pie ámbar: el mismo aviso de "sin reclamar" que lleva la ficha pública. */
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#FBF1E6;border-top:1px solid #EFDCC4;padding:14px 24px;color:#8A5A22}
.pcard__warn{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600}
.pcard__warn svg{flex:none;color:#B57A2E}
.pcard__cta{font-size:.9rem;font-weight:700;white-space:nowrap}
.claim-note{margin:0;font-size:.83rem;color:var(--disabled-fg);line-height:1.55}

.claim-manage{margin-top:76px;border-top:1px solid var(--line);padding-top:46px}
.claim-manage h2{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:1.5rem;margin:0 0 26px}
.claim-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 34px}
.claim-benefits li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;line-height:1.5}
.claim-benefits svg{flex:none;margin-top:6px;color:var(--action)}

.claim-page--sent{max-width:44rem}
.claim-page--sent .claim-title{margin-bottom:14px}
.claim-page .claim-muted{margin-top:14px;color:var(--greige);font-size:.95rem}
@media (max-width:860px){
  /* Al envolverse, el texto crece hacia abajo: el icono se alinea arriba con la
     primera línea en vez de quedar flotando a media altura. */
  .claim-cta{align-items:flex-start}
  .claim-cta__go{margin:0}
  .claim-manage{margin-top:52px;padding-top:34px}
}

/* Banner de previsualización: aparece en la ficha cuando NO está publicada (solo
   se llega ahí por las dos vías de preview). Ámbar de aviso, ancho completo y
   pegado arriba para que quede claro que la vista es privada, no pública. */
.preview-bar{background:#FBF0D6;border-bottom:1px solid #E9D8A6}
.preview-bar__in{max-width:var(--maxw);margin:0 auto;padding:11px 34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.preview-bar__tag{flex:none;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A5A12;background:#F2DFA6;border-radius:999px;padding:4px 11px}
.preview-bar__msg{color:#6B5312;font-size:.92rem;font-weight:500}

/* Botón de acción en páginas públicas (p. ej. el submit de la landing de
   reclamación). Mismo diseño que el .btn del área de auth (auth.css), que aquí
   no se carga: píldora verde --action, ancho completo con .block. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--action);color:#F7FAF6;border:none;border-radius:999px;
  padding:14px 26px;font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;
  text-decoration:none;transition:transform .12s ease,background .18s ease}
.btn.block{width:100%}
.btn:hover{background:var(--action-hover)}
.btn:active{transform:translateY(1px)}

/* ============================ 13. Home =========================== */
/* Portada pública (pages/home_live). Reutiliza la cabecera, el footer, la marca
   y los tokens de arriba; aquí solo las secciones propias de la home. El carrusel
   del directorio reaprovecha .gal-track / .gal-dots (sección 12) + el controlador
   Stimulus `gallery`; solo cambia el marco (.home-gal) y las diapositivas. */

/* Botón oscuro: CTA de marketing sobre foto o sobre la banda verde, donde el
   botón de acción verde (.btn) no contrastaría. El verde sigue siendo el botón
   de la UP funcional (formularios, ficha); esto es superficie oscura de marca. */
.btn-dark{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 26px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .2s}
.btn-dark:hover{background:#000}

/* ---- Hero ---- */
/* Sin overflow:hidden aquí para que el autocompletado del buscador pueda
   desbordar el hero; el fondo (position:absolute; inset:0) no se sale igual. */
.home-hero{position:relative;min-height:600px;display:flex;align-items:center;background:var(--cream-2)}
.home-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.home-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(28,25,22,.82),rgba(28,25,22,.6) 46%,rgba(28,25,22,.16))}
.home-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:96px 34px;width:100%}
.home-hero h1{color:#fff;font-weight:520;font-size:clamp(2.5rem,5.2vw,4.2rem);line-height:1.04;margin:0 0 18px;max-width:15em}
.home-hero__sub{color:#ece4d6;font-size:1.18rem;max-width:32em;margin:0 0 30px;line-height:1.5}
.home-search{display:flex;gap:10px;flex-wrap:wrap}
.home-search__wrap{position:relative;flex:0 1 360px;min-width:260px}
.home-search__field{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:13px 20px;color:var(--ink-soft);font-size:.96rem;cursor:text;transition:box-shadow .2s}
.home-search__field:focus-within{box-shadow:0 4px 14px rgba(0,0,0,.12)}
.home-search__field svg{flex:none}
.home-search__field input{border:none;outline:none;background:transparent;font:inherit;font-size:.96rem;color:var(--ink);width:100%;min-width:0}
.home-search__field input::placeholder{color:var(--ink-soft)}
/* Autocompletado del hero. La home no carga directory.css, así que estilamos
   aquí la lista; las filas usan las clases que emite el controlador place-search
   (dir-ac__row/name/rg), scopeadas para no chocar con las del directorio. */
.home-search__ac{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -24px rgba(45,42,38,.5);overflow:hidden;z-index:60;list-style:none;margin:0;padding:0;text-align:left}
.home-search__ac .dir-ac__row{padding:11px 18px;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* is-active = la fila marcada con las flechas; mismo aspecto que el hover. */
.home-search__ac .dir-ac__row:hover,
.home-search__ac .dir-ac__row.is-active{background:var(--cream)}
.home-search__ac .dir-ac__row--empty{color:var(--greige);cursor:default}
.home-search__ac .dir-ac__row--empty:hover{background:transparent}
.home-search__ac .dir-ac__name{font-weight:600;color:var(--ink)}
.home-search__ac .dir-ac__rg{color:var(--greige);font-size:.85rem;white-space:nowrap}
/* "Usar mi ubicación actual": fila de acción, icono + texto alineados a la izq. */
.home-search__ac .dir-ac__row--geo{justify-content:flex-start;align-items:center;gap:10px}
.home-search__ac .dir-ac__geo-icon{display:inline-flex;color:var(--maroon)}
.home-search__ac .is-dimmed{opacity:.4}
.home-search__ac .dir-ac__row--geo.is-locating .dir-ac__name{font-weight:400;color:var(--greige)}

/* ---- Directorio (carrusel) ---- */
.home-dir{padding:58px 0 8px}
.home-dir__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.home-dir__head h2{font-weight:540;font-size:clamp(1.6rem,2.8vw,2.1rem);margin:0}
.home-dir__all{text-decoration:none;font-weight:600;border-bottom:2px solid var(--maroon);padding-bottom:2px;font-size:.95rem;color:var(--ink);white-space:nowrap}
.home-gal{position:relative;border-radius:26px;overflow:hidden;background:var(--cream-2);box-shadow:0 30px 60px rgba(45,42,38,.16)}
.home-slide{position:relative;flex:0 0 100%;display:block;aspect-ratio:16/7;text-decoration:none}
.home-gal .home-slide__img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.home-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(45,42,38,.6),rgba(45,42,38,0) 46%)}
.home-slide__cap{position:absolute;right:30px;bottom:30px;z-index:2;color:#fff;text-align:right;font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:560;font-size:clamp(1.2rem,2.4vw,1.9rem);line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.home-slide__place{display:block;font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.04em;opacity:.92;margin-top:5px}

/* ---- Criterios: lo que tienen en común ---- */
.home-crit{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:58px;padding:78px 0}
.home-crit__intro{max-width:34rem;margin:0 auto 56px;text-align:center}
.home-crit__intro .eyebrow{display:block;margin-bottom:22px}
.home-crit__intro h2{font-weight:520;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;margin:0}
.home-crit__intro h2 em{font-style:italic;color:var(--maroon);font-weight:500}
.home-crit__lead{margin-top:20px;color:var(--ink-soft);font-size:1.08rem}
.home-crit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.crit-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column}
.crit-card__num{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.crit-card__num span:first-child{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:400;font-size:2.7rem;line-height:.85}
.crit-card__rule{height:2px;flex:1;opacity:.4}
/* margin:0 explícito porque los cinco criterios son <h3> (antes <span>) y el
   margen por defecto del navegador descuadraría la tarjeta. */
.crit-card__title{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:600;font-size:1.28rem;line-height:1.2;letter-spacing:-.005em;display:block;margin:0 0 9px;color:var(--ink)}
.crit-card__body{color:var(--ink-soft);font-size:1.01rem;line-height:1.55;margin:0}
.crit-card--cta{background:var(--ink);color:var(--cream);justify-content:space-between;text-decoration:none}
.crit-card--cta .crit-card__title{color:var(--cream);font-weight:560}
.crit-card__dots{display:flex;gap:8px;margin-bottom:20px}
.crit-card__dots span{width:9px;height:9px;border-radius:50%}
.crit-card__go{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;margin-top:26px}

/* ---- Para escuelas ---- */
.home-schools{background:var(--green-band);color:var(--ink);padding:60px 0}
.home-schools__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.home-schools h2{font-weight:540;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.08;max-width:14em;margin:0}
.home-schools p{color:#3b4a35;max-width:36em;margin:8px 0 0}
.home-schools p + p{margin-top:4px}

@media(max-width:860px){
  .home-hero{min-height:520px}
  .home-hero__inner{padding:64px 22px}
  .home-schools__inner{flex-direction:column;align-items:flex-start}
}

/* Solo en pantallas realmente estrechas el campo pasa a ocupar todo el ancho y
   el botón cae debajo. Por encima, campo (~360px) y botón conviven en la misma
   fila: así el desplegable (anclado al campo) no tapa el botón "Encuentra tu
   escuela", que quedaba justo debajo al forzar el 100% demasiado pronto. */
@media(max-width:560px){
  .home-search__wrap{flex:1 1 100%;min-width:0}
}