/* ============================================================
   styles.css — web-beta-51
   Consolidación de v16–v50 (jul 2026). Cero cambio visual:
   verificado por diff de estilos computados de todos los
   elementos + ::before/::after, 7 páginas × 7 anchos (390 a
   1440px), más barrido de overflow en 16 anchos (320–1920px)
   y verificación directa de transition/animation sin congelar.
   Rollback completo si hiciera falta: web-beta-50.zip.
   No reutilizar los nombres de clase .acc ni .ft para nada
   nuevo (colisiones históricas con dos significados cada una,
   documentadas donde aparecen más abajo).
   A partir de aquí el protocolo deja de ser "añadir sin
   borrar": los retoques (v52+) editan en sitio la sección del
   componente afectado y se documentan en el changelog.
   ============================================================ */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/fraunces-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/fraunces-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/work-sans-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/work-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/work-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/work-sans-latin-600-normal.woff2") format("woff2")}


/* ===== TOKENS ===== */
:root{--white:#FFFFFF;--tint:#F8F6F2;--rule:#ECE8E1;--orange:#C97916;--orange-text:#AB6713;--ink:#1a1a1a;--ink-soft:#555550;--dark:#211d1a;--dark-soft:#b8b0a6;--wide:1160px;--pad:clamp(1.3rem,4.5vw,3rem);--serif:"Fraunces",Georgia,serif;--sans:"Work Sans",system-ui,sans-serif;--btn:#C26B1E;--btn-dark:#9A551A}
/* v67 · --orange-text: misma familia que --orange, oscurecido a igual matiz hasta 4.5:1 sobre
   blanco (WCAG AA texto normal; --orange puro da 3.37:1, insuficiente para texto <24px).
   Se aplica solo a textos pequeños reales (labels, links, mensajes) — nunca a --orange en
   titulares grandes (ya cumplen el umbral 3:1 de texto grande) ni a usos decorativos/no-texto
   (bordes, iconos), que siguen en --orange sin cambio visual perceptible.
   --btn (CTA "Escríbeme", #C26B1E, 3.88:1) NO se toca aquí: es una decisión ya cerrada y
   argumentada aparte — señalada a Óscar como punto de decisión, no aplicada unilateralmente.
   Rollback: borrar esta variable y los selectores marcados "v67 contraste" más abajo. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
picture{display:contents}
h1{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0}
h2{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0}
h3{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.2rem,6.5vw,5rem)}
.band{background:var(--tint)}
.rule-top{border-top:1px solid var(--rule)}
.hl{color:var(--orange)}
html{scroll-behavior:smooth;overflow-y:scroll;overflow-x:clip}

/* ===== COMPARTIDOS (prose y utilidades cross-página) ===== */
.ln{display:block;white-space:nowrap}
.bw-soft{filter:saturate(.22) contrast(1.04)}
.prose{max-width:760px}
.prose.center{margin-inline:auto}
/* v60 · bug de especificidad (aviso Óscar: títulos de apartado "desmedidamente
   grandes" en Terapia/Talleres/Sobre mí, no en Inicio). Causa: .prose h2 (más
   específico, clase+etiqueta) ganaba sobre .kicker (una sola clase) cada vez que un
   <h2 class="kicker"> caía dentro de un contenedor .prose — cosa que solo pasa en
   esas tres páginas, nunca en Inicio, de ahí la diferencia. No es un fallo de v59;
   viene de cuando los kickers se promovieron a <h2> real (v54) y quedó enmascarado
   por el problema de caché hasta ahora. Rollback: quitar ":not(.kicker)". */
.prose h2:not(.kicker){font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 1rem}
.prose h3{font-family:var(--serif);font-size:clamp(1.18rem,2vw,1.4rem);margin:1.9rem 0 .7rem}
.prose p{font-family:var(--sans);font-size:1.05rem;line-height:1.75;margin:0 0 1.05em;color:var(--ink)}
.prose .lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.16rem,1.8vw,1.36rem);line-height:1.6;color:var(--ink)}
.prose em{font-style:italic}
.prose.narrow{max-width:640px}

/* ===== NAV ===== */
.kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.6rem;margin-top:0} /* v54 · margin-top:0 añadido: necesario para que .kicker no cambie de aspecto al pasar de <div> a <h2> (SEO, ver changelog) */
.kicker::before{content:"";width:24px;height:1.5px;background:var(--orange);flex:0 0 auto}
.vermas{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.6rem}
.vermas::after{content:"⟶";color:var(--orange);font-size:1.3em;line-height:1;transition:transform .2s}
.vermas:hover::after{transform:translateX(5px)}
.vermas.cta{text-transform:none;letter-spacing:.01em;font-size:.96rem;font-weight:500}
.nav.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:rgba(236,232,225,.9)}
.nav-in{max-width:var(--wide);margin:0 auto;padding:.7rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.08rem}
.menu{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0}
.menu a{font-family:var(--sans);font-size:.93rem;text-decoration:none;color:var(--ink);opacity:.82;padding-bottom:3px;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.menu a:hover{opacity:1}
.menu a[aria-current="page"]{opacity:1;border-bottom-color:var(--orange)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--ink)}
@media (max-width:760px){
  .menu{position:fixed;top:0;right:0;height:100svh;width:min(64vw,232px);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.15rem;padding:0 1.8rem;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translateX(100%);transition:transform .32s}
  .menu.open{transform:translateX(0)}
  .menu a{font-size:1rem;opacity:.9}
  .burger{display:block;z-index:60}
}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;background:transparent;border-bottom:1px solid transparent;transition:transform .35s ease,background .3s,border-color .3s}
.nav.nav-hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand img{width:34px;height:34px;object-fit:contain}
source{display:none}

/* ===== BOTONES ===== */
.hero-ctas{display:flex;gap:1.6rem 3rem;align-items:center;flex-wrap:wrap;margin-top:clamp(3.6rem,12vh,6.6rem)}
.hero-ctas .boton{font-size:clamp(.8rem,2.4cqi,.9rem);padding:.52rem 1.2rem}
.btnt-plate2 .hero-ctas .boton{background:rgb(231,231,231);transition:background .2s,color .2s}
.btnt-plate2 .hero-ctas .boton:hover{background:var(--orange);color:#fff}
.boton.cream{border-color:#f3ede4;color:#f3ede4}
.boton.cream:hover{background:#f3ede4;color:var(--ink)}
@media (max-width:600px){
  .btnt-plate2 .hero-ctas .boton{background:var(--btn);color:#fff;border-color:var(--btn);font-size:1rem;padding:.72rem 1.5rem}
  .btnt-plate2 .hero-ctas .boton:hover{background:var(--btn-dark);border-color:var(--btn-dark)}
}
.boton.paper{background:#fff;color:var(--ink);border-color:#fff}
.boton{display:inline-block;font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--orange);text-decoration:none;border:1.5px solid var(--orange);border-radius:6px;padding:.68rem 1.6rem;transition:background .2s,color .2s;color:var(--btn);border-color:var(--btn)}
.boton:hover{background:var(--btn);color:#fff}
.btnt-plate2 .hero-ctas .boton:hover{background:var(--btn)}
.boton.ghost{background:transparent;color:var(--orange);border:1.5px solid var(--orange);color:var(--btn);border-color:var(--btn)}
.boton.ghost:hover{background:var(--btn);color:#fff}
.boton.paper:hover{background:var(--btn);color:#fff;border-color:var(--btn)}
@media (max-width:600px){
  .btnt-plate2 .hero-ctas .boton{font-size:.92rem;padding:.58rem 1.25rem}
}
.hero-esc{font-size:.98rem}
@media (min-width:601px){
  .btnt-plate2 .hero-ctas .boton{background:var(--btn);color:#fff;border-color:var(--btn)}
  .btnt-plate2 .hero-ctas .boton:hover{background:var(--btn-dark);border-color:var(--btn-dark)}
  .hero-esc::after{text-shadow:1.5px 0 0 rgb(229,229,229), -1.5px 0 0 rgb(229,229,229),
    0 1.5px 0 rgb(229,229,229), 0 -1.5px 0 rgb(229,229,229),
    1.5px 1.5px 0 rgb(229,229,229), -1.5px 1.5px 0 rgb(229,229,229),
    1.5px -1.5px 0 rgb(229,229,229), -1.5px -1.5px 0 rgb(229,229,229),
    0 0 6px rgb(229,229,229), 0 0 14px rgb(229,229,229)}
}
@media (max-width:600px){
  .hero-ctas{margin-top:auto;padding-top:clamp(2.6rem,7vh,4rem);flex-direction:column;align-items:flex-start;gap:1.1rem}
  .hero-esc{text-shadow:0 1px 10px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55);color:#fff;margin-left:1.25rem}
}
@media (min-width:601px){
  .btnt-plate2 .hero-ctas .boton{padding:.62rem 1.7rem;border-radius:10px}
}
.btnt-plate2 .hero-ctas .boton{padding:.58rem 1.25rem;font-size:.92rem;border-radius:6px}

/* ===== BANDAS CTA ===== */
.doors>p{font-family:var(--sans);font-size:1.08rem;line-height:1.72;color:var(--ink);margin:0 0 1rem}
.doors>p:last-of-type{margin-bottom:0}
.doorrow{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;padding:1.15rem 0;border-bottom:1px solid var(--rule)}
.doorrow:first-of-type{border-top:1px solid var(--rule)}
.doorrow p{margin:0;flex:1 1 340px;font-family:var(--sans);font-size:1.06rem;line-height:1.6;color:var(--ink)}
.doorrow .boton{flex:0 0 auto}
.offer{padding-block:clamp(3rem,6vw,4.2rem)}
.offer .kicker{margin-bottom:clamp(2rem,5vh,3.2rem)}
.dh{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.8vw,2rem);margin:0 0 1.3rem;color:var(--ink);max-width:780px;margin-inline:auto}
.doors{max-width:780px;margin-inline:auto}
.cta-mb{padding-bottom:clamp(4.4rem,9vh,6rem)}
.cta2{background:#2b2521;padding-block:clamp(2.6rem,4.6vw,3.6rem)}
.cta2-in{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);text-align:left;display:flex;align-items:center;justify-content:space-between;gap:1.3rem 2.2rem;flex-wrap:wrap}
.cta2-txt{flex:1 1 360px}
.cta2-big{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.26;color:#f3ede4;margin:0 0 .45rem;font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.26;margin:0 0 .4rem;color:#f3ede4}
.cta2-small{font-family:var(--sans);font-size:1rem;color:rgba(243,237,228,.74);line-height:1.55;margin:0 0 1.5rem;max-width:46ch;margin-inline:auto;font-family:var(--sans);font-size:1rem;line-height:1.55;margin:0;max-width:52ch;color:rgba(243,237,228,.74)}
.cta2-in .boton{flex:0 0 auto}
.cta2.acc{background:var(--orange)}
.cta2.acc .cta2-big{color:var(--ink)}
.doors-dark{background:#2b2521}
.doors-dark .dh{color:#f3ede4}
.doors-dark .doorrow{border-color:rgba(255,255,255,.14)}
.doors-dark .doorrow p{color:rgba(243,237,228,.86)}
.cta2.acc .cta2-small{color:rgba(26,26,26,.72);max-width:none}
.doors-dark .boton{color:#f3ede4;border-color:#f3ede4}
.doors-dark .boton:hover{background:#f3ede4;color:var(--ink)}
.doors-dark .boton.ghost:hover{background:#f3ede4;color:var(--ink)}
.cta2.cta-final{background:var(--btn)}
.cta2.cta-final .cta2-big{color:#fff}
.cta2.cta-final .cta2-small{color:rgba(255,255,255,.84);max-width:none}
.post-cta{height:clamp(3rem,9vh,6rem);background:var(--white)}
.cta2.accx .cta2-small{max-width:none}
.cta2.accx{background:#2b2521}
@media (max-width:600px){
  .cta2-brm{display:inline}
}
@media (min-width:601px){
  .cta2-brm{display:none}
}
.offer .cards{max-width:none;margin-inline:0}
.cta2.cta-final + .post-cta{height:247px}
@media (max-width:600px){
  .cta2.cta-final + .post-cta{height:282px}
}
.cta2.accx + .post-cta{height:371px}
@media (max-width:600px){
  .cta2.accx + .post-cta{height:532px}
}
.doors-dark.cta-mb + .post-cta{height:248px}
.cta2.cta-final + .post-cta{height:198px}
@media (max-width:600px){
  .cta2.cta-final + .post-cta{height:226px}
}
.cta2.accx + .post-cta{height:223px}
.doors-dark .boton.ghost{color:#f3ede4;border-color:#f3ede4}
@media (max-width:600px){
  .cta2.accx + .post-cta{height:255px}
  .doors-dark.cta-mb + .post-cta{height:257px}
}

/* ===== TESTIMONIOS / ROTADOR ===== */
.cita{position:relative;min-height:clamp(380px,46vh,440px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cita .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cita .scrim{position:absolute;inset:0;z-index:1}
.cita .inner{position:relative;z-index:2;max-width:760px;text-align:center;padding-inline:var(--pad)}
.cita .credo{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.7vw,1.85rem);line-height:1.5;margin:0;text-wrap:balance}
.cita-md .credo{color:var(--ink)}
.cita-md .scrim{background:radial-gradient(120% 90% at 50% 45%,rgba(252,249,244,.7),rgba(248,243,236,.5) 55%,rgba(40,36,40,.2))}
.tst-sec{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.tst-sec .kicker{margin-bottom:clamp(2.6rem,7vh,5rem)}
.tst-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5rem);max-width:920px;margin-inline:auto}
@media (max-width:720px){
  .tst-grid{grid-template-columns:1fr;gap:3.4rem}
  .tst-sec{min-height:auto;padding-block:clamp(3.6rem,13vh,4.8rem)}
  .tst-sec .kicker{margin-bottom:clamp(3.2rem,10vh,4.4rem)}
}
.testi .q{font-family:var(--serif);font-weight:600;font-size:1.7rem;color:var(--orange);line-height:1;display:block;margin-bottom:.7rem}
.testi p{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.66;margin:0 0 1.2rem;color:var(--ink)}
.testi footer{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft)}
.testi footer strong{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .cita{min-height:0}
  .cita .inner{padding-block:clamp(3.8rem,20vw,5rem)}
}
.tst-flat .tst-grid{max-width:920px}
.tst-flat .kicker{margin-bottom:clamp(1.6rem,4vh,2.4rem)}
.cite-anon{display:block;font-family:var(--sans);font-size:.82rem;font-style:normal;font-weight:400;color:rgba(255,255,255,.72);margin-top:.55rem;letter-spacing:.01em}
.cita-md .cite-anon{color:rgba(26,26,26,.65)}
.credo.stagger{text-align:left}
.tst-rotator{position:relative;max-width:920px;margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:clamp(1.6rem,5vw,4rem)}
.tst-stage{grid-column:2;position:relative;display:grid}
.tst-stage .testi{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .35s ease;pointer-events:none}
.tst-stage .testi.on{opacity:1;visibility:visible;pointer-events:auto;position:relative}
.tst-nav{background:none;border:0;cursor:pointer;color:var(--ink-soft);padding:.3rem;display:flex;align-items:center;justify-content:center;transition:color .2s;align-self:center}
.tst-nav.prev{grid-column:1}
.tst-nav.next{grid-column:3}
.tst-nav:hover{color:var(--orange)}
.tst-nav svg{width:28px;height:28px}
.tst-dots{grid-column:2;display:flex;justify-content:center;gap:.75rem;margin-top:2.2rem}
.tst-dots .dot.on{background:var(--orange);transform:scale(1.3)}
@media (max-width:600px){
  .tst-rotator{grid-template-columns:1fr;row-gap:.4rem}
  .tst-stage{grid-column:1}
  .tst-nav{display:none}
  .tst-dots{grid-column:1;margin-top:1.6rem}
}
.cita.anon-left .credo.stagger{display:inline-block;text-align:left}
.cita.anon-left .credo.stagger .cite-anon{display:block;text-align:left;margin-left:0}
.tst-rotator{column-gap:clamp(2.6rem,7vw,5.5rem)}
.tst-sec{padding-bottom:calc(clamp(3.2rem,6.5vw,5rem) + 235px)}
@media (max-width:720px){
  .tst-sec{padding-bottom:calc(clamp(3.6rem,13vh,4.8rem) + 60px)}
}
.tst-flat{padding-bottom:clamp(4.8rem,9.75vw,7.5rem)}
.tst-dots .dot{width:5px;height:5px;border-radius:50%;background:rgba(26,26,26,.24);transition:background .2s,transform .2s;cursor:pointer}
@media (min-width:721px){
  .tst-sec{padding-bottom:calc(clamp(3.2rem,6.5vw,5rem) + 70px)}
}
@media (max-width:600px){
  .tst-flat{padding-bottom:calc(clamp(4.8rem,9.75vw,7.5rem) + 40px)}
}

/* ===== NEWSLETTER ===== */
.nlbar{max-width:var(--wide);margin-inline:auto;padding:clamp(2.2rem,4vw,3rem) var(--pad);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.12)}
.nlbar .r{display:flex;flex-direction:column;gap:.55rem;min-width:280px;flex:1 1 380px;max-width:560px}
.nl-form{display:flex;gap:.6rem}
.nl-form input{flex:1 1 0;min-width:0;width:100%;font-family:var(--sans);font-size:.92rem;padding:.62rem .85rem;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.08);color:#fff}
.nl-form input[type="email"]{flex:1.7 1 0}
.nl-form input::placeholder{color:rgba(255,255,255,.55)}
.nl-form .sb{font-family:var(--sans);font-weight:500;background:var(--orange);color:#fff;border:0;border-radius:6px;padding:.62rem 1.3rem;cursor:pointer;flex:0 0 auto}
.nl-form .sb:disabled{cursor:not-allowed}
.nl-consent{font-family:var(--sans);font-size:.74rem;color:#efe9e1;opacity:.7;display:flex;gap:.5rem;align-items:flex-start}
/* v60 · bug real (aviso Óscar, img8): el texto suelto + el <a> + el "." final eran
   3 elementos flex independientes (todo hijo directo de un display:flex se
   convierte en su propia caja, incluido texto sin envolver), cada uno intentando
   su propia línea — de ahí el punto huérfano. Se agrupó todo el texto en un único
   <span> en las 7 páginas; aquí se le da flex:1 para que ocupe el espacio y envuelva
   como una frase normal, con el checkbox alineado arriba a la izquierda.
   Rollback: quitar esta regla (el span no tenía estilo propio, heredaba el bug). */
.nl-consent span{flex:1 1 auto;min-width:0}
.nl-msg{font-family:var(--sans);font-size:.78rem;color:#efe9e1;opacity:.85;margin:.3rem 0 0;min-height:1em}
.nl-msg.is-error{color:#f3c9a8;opacity:1}
/* v60 · estado de envío + confirmación reforzada (aviso Óscar: no había señal de
   proceso ni de éxito claro). El formulario se atenúa mientras se envía (misma
   idea que Óscar describía de otras webs, sin popup: más consistente con el resto
   del sitio, sin añadir un componente modal nuevo). El mensaje de éxito pasa a
   naranja, en negrita, con un check delante (añadido desde main.js).
   Rollback: eliminar estas 2 reglas. */
.nl-form.is-sending{opacity:.55;pointer-events:none;transition:opacity .25s}
.nl-msg.is-success{color:var(--orange-text);opacity:1;font-weight:600;font-size:.92rem}
/* v64 · nota operativa bajo el mensaje de éxito (aviso de carpeta de spam). Misma
   especificidad que .nl-msg.is-success, así que DEBE ir después de esa regla para
   ganar por orden de cascada: si se mueve arriba, hereda el naranja y el peso 600.
   Rollback a v63: eliminar esta regla (el <span class="nl-sub"> deja de generarse
   al revertir main.js). */
.nl-msg .nl-sub{display:block;margin-top:.28rem;font-weight:400;font-size:.78rem;color:#efe9e1;opacity:.75}
@media (max-width:760px){
  .nlbar{flex-direction:column;align-items:flex-start}
  .nlbar .r{flex:0 0 auto;min-width:0;width:100%}
  .nl-form input{flex:1 1 100%}
}
.nlbar .l p{font-family:var(--sans);font-size:.92rem;color:#efe9e1;opacity:.85;margin:0;font-size:.98rem}
.nlbar .l h2{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.85rem);color:#fff;margin-bottom:.3rem;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text);margin-bottom:.55rem;font-size:1.05rem;font-weight:700;letter-spacing:.1em}
@media (max-width:760px){
  .nl-form{flex-wrap:wrap}
  .nl-form input[type="email"]{flex:1 1 100%;order:1}
  .nl-form input[type="text"]{flex:1 1 0;min-width:0;order:2}
  .nl-form .sb{order:3}
}
.nl-form .sb{background:var(--btn)}

/* ===== FOOTER ===== */
.ft-grid{max-width:var(--wide);margin-inline:auto;padding:clamp(2.4rem,4vw,3.2rem) var(--pad) 1.4rem;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
@media (max-width:680px){
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
}
.ft-brand{display:flex;flex-direction:column;gap:.7rem;max-width:34ch}
.ft-brand .b b{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:#fff}
.ft-brand p{font-family:var(--sans);font-size:.9rem;color:#efe9e1;opacity:.82;line-height:1.6;margin:0}
.ft-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);font-weight:600;margin:0 0 .9rem}
.ft-col a{display:block;font-family:var(--sans);font-size:.92rem;color:#efe9e1;text-decoration:none;margin-bottom:.45rem;opacity:.82}
.ft-col a:hover{opacity:1;color:var(--orange-text)}
.ft-bottom{max-width:var(--wide);margin-inline:auto;padding:1.2rem var(--pad) 2.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;justify-content:space-between;font-family:var(--sans);font-size:.78rem;color:#efe9e1;opacity:.92}
.ft-bottom .legal a{color:#efe9e1;text-decoration:none;margin-right:1rem}
.ft-bottom .legal a:hover{color:var(--orange-text)}
.ft-brand .loc{font-size:.78rem;opacity:.75}
@media (max-width:680px){
  .legal .creditos{display:block;margin-top:.4rem;opacity:.7}
}
.ft{background:var(--dark);color:#efe9e1;position:relative;padding-top:.4rem}
.legal .legal-links a{color:#efe9e1;text-decoration:none;margin-right:1rem;opacity:.92}
.legal .legal-links a:hover{color:var(--orange-text)}
.legal .creditos{opacity:.62}
.ft-grid{grid-template-columns:1.4fr .85fr .85fr .85fr}
.ft-col.headless h4{visibility:hidden}
@media (max-width:680px){
  .ft-grid{grid-template-columns:1fr 1fr}
}
.ft-grid{grid-template-columns:1.45fr max-content max-content max-content;column-gap:clamp(1.6rem,3.2vw,2.8rem)}
.ft-col.headless{margin-left:clamp(1.2rem,3vw,2.4rem)}
@media (max-width:680px){
  .ft-grid{grid-template-columns:1fr 1fr;row-gap:.2rem}
  .ft-brand{grid-column:1/-1;margin-bottom:1.7rem}
  .ft-col.headless{grid-column:1;grid-row:3}
  .ft-col.headless h4{display:none}
  .ft-grid .ft-col:last-child{grid-column:2;grid-row:2/span 2;justify-self:start}
}
.ft-grid{column-gap:clamp(1.9rem,3.2vw,2.7rem)}
.ft-col.headless{margin-left:0}
.ft-grid>.ft-col:last-child{margin-left:clamp(2rem,4.5vw,3.8rem)}
@media (max-width:680px){
  .ft-grid>.ft-col:last-child{margin-left:0}
}
@media (min-width:681px){
  .ft-grid{grid-template-columns:clamp(14rem,34vw,26.6rem) max-content max-content max-content;column-gap:clamp(1.9rem,4.5vw,3.51rem)}
  .ft-grid>.ft-col:last-child{margin-left:clamp(1.92rem,7.44vw,5.93rem)}
}
/* v66 · .b pasa de <div> a <a href="index.html"> en las 7 páginas (logo+nombre
   del footer, ahora enlazado al inicio como ya lo estaba el del nav).
   Rollback: quitar text-decoration:none de esta regla y devolver el <a> a <div>
   en cada HTML. */
.ft-brand .b{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.ft-brand .b img{width:30px;height:30px;object-fit:contain}

/* ===== SALA / ISLA / LIGHTBOX ===== */
.salawrap{padding-inline:0}
.salaband{position:relative;display:block;width:100%;border:0;padding:0;cursor:zoom-in;background:#e9e6df;border-radius:0;height:clamp(360px,74vh,820px)}
/* Full-bleed en contenedor centrado: width:100vw + margin-left:calc(50% - 50vw) rompe el
   elemento fuera de su contenedor .wrap hasta cubrir todo el ancho de la ventana. El
   html{overflow-x:clip} de arriba (RESET/BASE) es el segundo componente necesario de esta
   misma técnica: recorta sin crear scroll-container el pequeño sobrante que introduce el
   canal del scrollbar en sistemas sin scrollbar overlay (position:sticky sigue funcionando,
   a diferencia de overflow-x:hidden). Verificado empíricamente en este proyecto — no
   sustituir por otra fórmula ni "modernizar" sin volver a medir en navegador real. */
.salaband-in{position:sticky;top:0;display:block;height:clamp(360px,74vh,820px);width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.salaband-in picture{display:block;width:100%;height:100%}
.salaband img{width:100%;height:100%;object-fit:cover;object-position:center 72%;transition:transform .4s}
.salaband:hover img{transform:scale(1.02)}
@media (max-width:600px){
  .salaband{aspect-ratio:1/1;height:auto;width:100%}
  .salaband-in{position:static;height:auto;width:100%;margin-left:0}
}
.lbx{position:fixed;inset:0;z-index:300;background:rgba(20,18,16,.94);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);cursor:zoom-out}
.lbx.open{display:flex}
.lbx img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbx-close{position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.3rem;line-height:1}
.lbx-close:hover{background:rgba(255,255,255,.16)}
.salaband{height:165vh}
.salaband-in{height:100svh;width:100vw;margin-left:calc(50% - 50vw)}
@media (max-width:600px){
  .salaband{aspect-ratio:auto;height:145svh}
  .salaband-in{position:sticky;height:100svh;width:100vw;margin-left:calc(50% - 50vw)}
  .salaband img{object-position:center 62%}
}
.islapost{width:100%;margin-left:0;max-width:none;background:#e9e6df;overflow:hidden;aspect-ratio:2.72/1}
.islapost img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
@media (max-width:680px){
  .islapost{aspect-ratio:1.45/1}
}

/* ===== INICIO ===== */
.hero-fixed{position:fixed;inset:0;height:100svh;z-index:1;overflow:hidden;background:#f2f1ed}
.flow{position:relative;z-index:2;background:var(--white);margin-top:100svh}
.hero-t h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.12}
.hero-t .serv{font-family:var(--sans);color:var(--ink);opacity:.72;margin:1.7rem 0 0;line-height:1.5;font-size:clamp(.82rem,2.2cqi,1rem)}
.hero-t .serv .ln:not(:last-child){margin-bottom:.15rem}
.hero-bg{position:relative;min-height:100svh;overflow:hidden}
.hero-bg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 50%;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(248,246,242,.9) 0%,rgba(248,246,242,.5) 30%,rgba(248,246,242,.05) 56%,transparent 72%)}
.hero-bg .wrap{position:relative;z-index:2}
.hero-bg .inner{max-width:760px;padding-top:clamp(11vh,15vh,17vh);container-type:inline-size}
@media (max-width:760px){
  .hero-bg .bg{object-position:48% 42%}
  .hero-bg .inner{padding-top:clamp(9vh,12vh,14vh)}
  .hero-bg.ovl-soft::after{background:linear-gradient(180deg,rgba(248,246,242,.46) 0%,rgba(248,246,242,.22) 46%,transparent 80%)}
  .hero-bg.ovl-soft .fit3{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
  .hero-bg.ovl-soft .sub2{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
  .hero-bg.ovl-soft .serv{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
}
.ident{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.ident .quotes p{font-family:var(--serif);font-size:clamp(1.18rem,2.1vw,1.48rem);line-height:1.34;margin:0 0 1rem}
.ident-final .quotes .cite::before{content:"— ";color:var(--orange)}
.ident .quotes .cite{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);margin-top:1.5rem;text-align:right}
.ident .text p{font-family:var(--serif);font-weight:300;font-size:1.06rem;line-height:1.72}
.ident .text .lead{font-weight:400}
@media (max-width:820px){
  .ident{grid-template-columns:1fr;gap:2.2rem}
}
/* v65 · Default seguro: la versión sin hover (.cards-m) es la que se muestra por
   defecto en cualquier dispositivo. La versión con hover (.card-o) se activa SOLO
   donde el hover es real y hay ancho suficiente (regla más abajo). Criterio: el
   ancho decide el layout, el puntero decide la interacción.
   Rollback: devolver .cards a display:grid y .cards-m a display:none, y reponer
   el @media(hover:none) que se eliminó en v65. */
.cards{display:none;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.8vw,2rem)}
/* v54 · Tarjetas "Qué ofrezco" sin hover (aviso Óscar): imagen arriba + texto siempre
   visible debajo, sin interacción; patrón recuperado de index-v33. Imagen 16/10 y
   tipografía contenida.
   v65 · Estas reglas estaban dentro de @media(max-width:720px), lo que ataba la versión
   sin hover al ancho de pantalla. Ahora viven al nivel base: son el DEFAULT de todo
   dispositivo, y es .card-o quien se activa por query de puntero. Dos columnas por
   defecto; una sola columna a ≤720px (abajo).
   Rollback: devolver este bloque completo al interior de un @media(max-width:720px)
   añadiendo de nuevo ".cards{display:none}" y "grid-template-columns:1fr;gap:1.2rem"
   en .cards-m, y eliminar el @media(hover:hover) de la sección .card-o. */
.cards-m{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.8vw,2rem)}
.card-m{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--white)}
.card-m .sq{aspect-ratio:16/10;overflow:hidden}
.card-m .sq img{width:100%;height:100%;object-fit:cover;display:block}
.card-m .cbody{padding:1rem 1.15rem 1.2rem}
/* v60 · "Terapia"/"Talleres" en naranja, misma tipografía que el rótulo de las
   tarjetas de Terapia > Servicios (.flip .front .cap h3): sans, mayúsculas,
   tracking, naranja. Antes: serif oscuro heredado de la regla h3 base, 1.2rem.
   Rollback: font-size:1.2rem;margin:0 0 .3rem (sin las demás propiedades). */
.card-m h3{font-family:var(--sans);font-size:.88rem;font-weight:400;text-transform:uppercase;letter-spacing:.1em;line-height:1.3;color:var(--orange-text);margin:0 0 .3rem}
.card-m .sub{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);margin:0}
.card-m .lugar{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);opacity:.8;margin:.3rem 0 .75rem}
.card-m .vermas{font-size:.74rem}
/* v66 · Óscar (aviso): en móvil (pantalla pequeña) las tarjetas quedaban demasiado
   pequeñas con la imagen 16/10 heredada de la versión base/tablet. Aquí, y SOLO aquí
   (≤720px = teléfonos; la versión de tablet a 2 columnas de arriba no se toca), la
   imagen pasa a casi cuadrada (5/6) y a una sola columna, para que domine la pantalla
   sin desbordarla. Medido con Playwright en 7 alturas de viewport reales (320×568 a
   430×932): la tarjeta completa (imagen+texto) ocupa entre el 65% y el 89% de la
   altura de pantalla según el dispositivo — grande en todos los casos, sin llegar a
   tocar los bordes en ninguno (queda "holgada"). Se descartó 4/5 (algo más alto: hasta
   91% en el dispositivo más pequeño probado, un iPhone SE de 1.ª generación,
   residual) y 3/4 (hasta 95%, demasiado ajustado).
   Rollback: eliminar ".card-m .sq{aspect-ratio:5/6}" de este bloque; la imagen vuelve
   a heredar el 16/10 de la regla base (misma que en tablet). */
@media (max-width:720px){
  .cards-m{grid-template-columns:1fr;gap:1.2rem}
  .card-m .sq{aspect-ratio:5/6}
}
.about{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;max-width:840px;margin-inline:auto}
@media (max-width:640px){
  .about{grid-template-columns:1fr;justify-items:center;text-align:left}
  .about>div:not(.photo){justify-self:stretch;width:100%}
}
.about .photo{width:clamp(210px,26vw,258px);aspect-ratio:3/4;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(26,26,26,.04),0 18px 44px -16px rgba(26,26,26,.34),0 40px 80px -40px rgba(201,121,22,.18)}
.about .photo img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(1.4rem,2.8vw,1.85rem);margin-bottom:.9rem}
.about p{font-family:var(--sans);font-size:1rem;line-height:1.66;margin:0 0 .9rem}
.about .tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.14rem;color:var(--ink-soft);margin-bottom:1.1rem}
.hero-t .fit3{font-size:2rem;font-size:clamp(1.3rem,7.2cqi,2.85rem);line-height:1.13;font-size:clamp(1.45rem,7.9cqi,3.15rem);line-height:1.12}
.hero-t .sub2{font-family:var(--serif);font-style:italic;font-weight:300;line-height:1.4;color:var(--ink-soft);margin-top:.9rem;font-size:clamp(1.08rem,4.2cqi,1.34rem);font-size:clamp(1.14rem,4.7cqi,1.5rem)}
.hero-bg .inner{padding-top:clamp(13vh,17vh,19vh)}
@media (max-width:600px){
  .hero-t .fit3{font-size:clamp(1.62rem,7.4vw,2.05rem);line-height:1.16;max-width:15ch}
  .hero-t .serv .ln:not(:last-child){margin-bottom:.05rem;margin-bottom:.14rem}
  .hero-t .serv{font-size:clamp(.82rem,3.5vw,.94rem);line-height:1.3;margin-top:1.15rem;font-size:clamp(.76rem,3.2vw,.88rem)
    /* v54 · texto de servicios ilegible en móvil (aviso Óscar): tamaño casi duplicado y
       más aire entre líneas. Rollback: font-size:clamp(.76rem,3.2vw,.88rem);line-height:1.3;
       margin-top:1.15rem */
    ;font-size:clamp(.95rem,3.9vw,1.08rem);line-height:1.42;margin-top:1.4rem}
}
.card-o{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--rule);display:flex;align-items:flex-end}
.card-o img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.card-o .ovl{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .3s;background:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,.1) 100%)}
.card-o .ov{position:relative;z-index:2;padding:1.4rem 1.6rem;text-align:left;width:100%;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.card-o:hover .ovl{opacity:1}
.card-o:focus-within .ovl{opacity:1}
.card-o:hover .ov{opacity:1;transform:none}
.card-o:focus-within .ov{opacity:1;transform:none}
.card-o.dark .ovl{background:linear-gradient(0deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.55) 45%,rgba(20,18,16,.05) 100%)}
.card-o.dark .ov{color:#fff}
.card-o.dark .ov .sub{color:rgba(255,255,255,.85)}
.card-o.dark .ov .lugar{color:rgba(255,255,255,.7)}
.card-o h3{font-size:1.5rem;margin-bottom:.35rem;transition:color .2s}
.card-o .sub{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);margin:0}
.card-o .lugar{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);opacity:.8;margin-top:.3rem}
.card-o .hint{position:absolute;z-index:2;left:1.3rem;bottom:1.2rem;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text);transition:opacity .3s}
.card-o:hover .hint{opacity:0}
.card-o:focus-within .hint{opacity:0}
/* v65 · La versión con hover solo donde el hover existe de verdad. Los tablets y
   móviles —a cualquier ancho— caen en el default (.cards-m).
   Rollback: eliminar este @media completo. */
@media (hover:hover) and (pointer:fine) and (min-width:721px){
  .cards{display:grid}
  .cards-m{display:none}
}
@media (max-width:600px){
  .hero-bg.ovl-soft::after{background:linear-gradient(180deg,rgba(248,246,242,.46) 0%,rgba(248,246,242,.22) 46%,transparent 80%)}
  .hero-bg.ovl-soft .fit3{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
  .hero-bg.ovl-soft .sub2{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
  .hero-bg.ovl-soft .serv{text-shadow:0 1px 16px rgba(248,246,242,.95),0 1px 3px rgba(248,246,242,.9)}
}
@media (max-width:600px){
  .hero-t .sub2{font-size:clamp(1.06rem,4.8vw,1.28rem);line-height:1.34;margin-top:.7rem;font-size:clamp(.98rem,4.2vw,1.16rem);font-size:clamp(1.08rem,4.7vw,1.3rem)
    /* v54 · subtítulo pequeño en móvil (aviso Óscar) + más separación respecto al título.
       Rollback: font-size:clamp(1.08rem,4.7vw,1.3rem);margin-top:.7rem (sin la línea de abajo) */
    ;font-size:clamp(1.2rem,5.2vw,1.42rem);margin-top:1.05rem}
  .hero-bg .inner{padding-top:clamp(6.5rem,13vh,8.5rem);padding-bottom:clamp(2rem,5vh,3rem);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;padding-bottom:clamp(4.6rem,11vh,6.4rem);min-height:0;display:block;padding-top:clamp(6.2rem,12vh,8rem);padding-bottom:0;min-height:100svh;display:flex;flex-direction:column;padding-bottom:clamp(1.6rem,4vh,2.4rem)}
  .hero-bg .bg{object-position:center center}
}

/* ===== TERAPIA / TALLERES (servicios, formatos, modalidades, acordeón, archivo) ===== */
.deflist{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.15rem;max-width:760px}
.deflist li{padding-left:1.4rem;position:relative;font-family:var(--sans);font-size:1.02rem;line-height:1.62}
.deflist strong{font-weight:600;color:var(--ink)}
.deflist .d{color:var(--ink-soft)}
.tick{list-style:none;margin:1.1rem 0 0;padding:0;max-width:700px}
.tick li{padding-left:1.4rem;position:relative;font-family:var(--sans);font-size:1.02rem;line-height:1.5;margin-bottom:.62rem;color:var(--ink)}
.tick li::before{content:"";position:absolute;left:.1rem;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.cols2{columns:2;column-gap:clamp(2rem,5vw,4rem)}
.cols2 li{break-inside:avoid}
@media (max-width:680px){
  .cols2{columns:1}
}
.thero{position:relative;overflow:hidden;background:#f4f3ef}
.thero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.thero .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.36))}
.thero .grid{position:relative;z-index:2;max-width:var(--wide);margin-inline:auto;height:clamp(440px,74vh,640px);padding:clamp(6.6rem,13vh,9rem) var(--pad) clamp(2.4rem,6vh,4rem);display:grid;grid-template-rows:auto 1fr auto}
.thero .t-title{justify-self:start;grid-row:1}
.thero .t-title .r{width:34px;height:2px;background:var(--orange);margin-bottom:1rem}
.thero .t-cita{grid-row:3;justify-self:end;text-align:right;font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink);font-size:clamp(1.2rem,2.7vw,1.75rem);line-height:1.38;margin:0;max-width:20ch;text-shadow:0 1px 16px rgba(255,255,255,.92)}
@media (max-width:600px){
  .thero .grid{padding-top:clamp(5.6rem,12vh,7rem)}
  .thero .t-cita{justify-self:start;text-align:left}
}
/* .acc aquí es "acordeón" (formatos plegables). No confundir con ".cta2.acc" en BANDAS CTA,
   que es "acento" (variante de color) — mismo nombre, dos significados por accidente
   histórico. No reutilizar ".acc" para nada nuevo. */
.acc{max-width:760px;margin:1.7rem auto 0;border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;position:relative;font-family:var(--sans);font-size:1.08rem;font-weight:500;color:var(--ink);transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--orange-text)}
.acc summary .sub{display:block;font-family:var(--sans);font-weight:400;font-size:.9rem;color:var(--ink-soft);margin-top:.22rem;letter-spacing:.01em}
.acc summary::after{content:"";position:absolute;right:.25rem;top:1.5rem;width:13px;height:13px;background:linear-gradient(var(--orange),var(--orange)) center/13px 1.6px no-repeat,linear-gradient(var(--orange),var(--orange)) center/1.6px 13px no-repeat;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .panel{padding:.2rem 0 1.5rem}
.acc .panel>p{font-family:var(--sans);font-size:1.02rem;line-height:1.72;color:var(--ink);margin:0 0 1em}
.acc .panel>p:last-child{margin-bottom:0}
.acc .panel .deflist{margin-top:.4rem}
.ideal{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);line-height:1.58;margin-top:.75rem;padding-left:1.35rem;position:relative}
.ideal::before{content:"";position:absolute;left:0;top:.62em;width:15px;height:1.5px;background:var(--orange)}
.ideal b{color:var(--ink);font-weight:600}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem);margin-top:1.7rem}
@media (max-width:760px){
  .svc{grid-template-columns:1fr;max-width:360px;margin-inline:auto}
}
.flip.is-flipped .inner{transform:rotateY(180deg)}
.flip .front .ph{flex:1 1 auto;overflow:hidden;background:#f4f1ec}
.flip .front .ph img{width:100%;height:100%;object-fit:cover}
.flip .front .cap{padding:.95rem 1.15rem 1.05rem;border-top:1px solid var(--rule)}
.flip .front .cap .s{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);margin:0;line-height:1.4}
.flip .hint{position:absolute;top:.65rem;right:.7rem;width:27px;height:27px;border-radius:50%;background:rgba(250,248,244,.92);display:flex;align-items:center;justify-content:center;color:var(--orange);box-shadow:0 2px 9px rgba(26,26,26,.2)}
.flip .hint svg{width:15px;height:15px}
.flip .back h3{font-family:var(--serif);font-size:1.12rem;color:var(--orange-text);margin:0 0 .55rem}
.flip .back .mini{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin-top:.65rem}
.flip .back .ret{margin-top:.85rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4rem}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2.2vw,1.4rem);margin-top:1.6rem;max-width:760px}
@media (max-width:620px){
  .mods{grid-template-columns:1fr;max-width:360px}
}
.mod .ic{width:30px;height:30px;color:var(--orange);margin-bottom:.2rem}
.mod h3{font-family:var(--serif);font-size:1.2rem;margin:0}
.mod p{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);line-height:1.5;margin:0}
.flip .face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(26,26,26,.04),0 14px 32px -22px rgba(26,26,26,.2)}
.flip{appearance:none;border:0;background:none;padding:0;margin:0;width:100%;cursor:pointer;perspective:1300px;font:inherit;text-align:left;display:block;border-radius:11px}
.flip:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.thero.rev .t-title{justify-self:end;text-align:right}
.thero.rev .t-title .r{margin-left:auto}
.archive ul{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(1.6rem,4vw,3rem)}
.archive li{break-inside:avoid;font-family:var(--sans);font-size:.94rem;line-height:1.45;color:var(--ink-soft);margin-bottom:.62rem;padding-left:1rem;position:relative}
@media (max-width:600px){
  .archive ul{columns:1}
}
.flip .inner{position:relative;width:100%;min-height:clamp(310px,42vw,372px);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .25s;transform-style:preserve-3d;outline:none}
@media (max-width:760px){
  /* v60 · "Terapia individual" desbordaba su tarjeta en móvil (aviso Óscar, img7):
     medido con Playwright a varios anchos, su contenido real necesita 341–367px
     según el ancho, frente a los 310px fijos que da el clamp a este rango. Se sube
     el suelo solo en móvil (desktop no se toca, ya estaba bien) con una fórmula que
     decrece con el ancho —igual que el texto necesita menos alto al envolver menos
     líneas en pantallas más anchas— y un suelo de 350px para el tramo donde la
     tarjeta ya no crece más (ancho tope de carta 360px, ≥430px de viewport). Las
     tres tarjetas comparten esta altura: se mantienen del mismo tamaño entre sí,
     ninguna copia se ha tocado. Colocada DESPUÉS de la regla base (misma
     especificidad: .flip .inner) para que gane el empate por orden de aparición —
     si esta regla se mueve antes de la base, deja de aplicar sin error visible.
     Verificado con Playwright: cero overflow desde 360px de viewport; a 320px
     (dispositivo residual, ej. iPhone SE 1.ª gen.) queda un margen muy ajustado de
     ~6px — si Óscar detecta un caso real, avisar para subir el suelo.
     Rollback: eliminar este bloque completo (vuelve a clamp(310px,42vw,372px) en
     todos los anchos). */
  .flip .inner{min-height:clamp(350px,650px - 68vw,460px)}
}
.flip:hover .inner{transform:translateY(-3px);box-shadow:0 10px 28px -14px rgba(26,26,26,.22)}
.flip.is-flipped:hover .inner{transform:rotateY(180deg) translateY(-3px)}
.flip:hover .front .cap h3{color:var(--orange-text)}
.flip .back{transform:rotateY(180deg);background:var(--tint);padding:1.7rem 1.5rem;justify-content:center;gap:.6rem}
.flip .back p{font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--ink);margin:0;font-size:.97rem;line-height:1.65}
.acc.narrow{max-width:640px}
@media (max-width:760px){
  .acc.narrow{max-width:760px}
}
.archive{margin-top:3.4rem;background:var(--tint);border:1px solid var(--rule);border-radius:10px;padding:clamp(1.3rem,3vw,1.9rem)}
.archive .h{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem;margin:.5rem 0 1.6rem}
.archive.white{background:var(--white);border:1px solid var(--rule);transition:box-shadow .25s,transform .25s}
.archive.white:hover{box-shadow:0 8px 22px -10px rgba(26,26,26,.18);transform:translateY(-2px)}
.pq-section .kicker{margin-bottom:2.2rem}
@media (max-width:760px){
  .pq-section{padding-top:clamp(3.8rem,9vw,5.2rem)}
}
.filosofia-kicker{margin-bottom:clamp(2rem,4.5vw,3rem)}
.filosofia-section{padding-top:clamp(4.4rem,9vw,6.2rem)}
.cmin-b .frame{width:100%;aspect-ratio:3/2;border-radius:10px;overflow:hidden}
.cmin-b .frame img{width:100%;height:100%;object-fit:cover}
.cmin-b .lnks{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.cmin-b .lnks a{font-family:var(--sans);font-size:.92rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.28rem;line-height:1.5}
.cmin-b .lnks a:hover{color:var(--orange-text)}
.cmin-b .lnks .ar{font-size:.7em;color:var(--orange)}
.thero:not(.rev) .t-cita{justify-self:end;text-align:right}
@media (max-width:600px){
  .thero:not(.rev) .t-cita{justify-self:end;text-align:right}
}
.thero.rev .t-cita{justify-self:start;text-align:left;max-width:24ch;text-shadow:0 0 32px rgba(255,255,255,1),0 1px 22px rgba(255,255,255,.98),
    0 2px 10px rgba(255,255,255,.92),0 4px 6px rgba(255,255,255,.8)}
.mod{border:1px solid var(--rule);border-radius:10px;padding:1.4rem 1.3rem;background:#fff;display:flex;flex-direction:column;gap:.45rem;box-shadow:0 1px 3px rgba(26,26,26,.04),0 14px 32px -22px rgba(26,26,26,.2);transition:none}
.price-plain a.ul{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.price-plain a.ul:hover{color:var(--ink)}
/* .ft aquí es "formato" (tarjeta de Talleres), no ".ft-*" del footer — nombre compartido
   por accidente histórico. Sin este reset quedaría con el fondo oscuro del footer. No
   reutilizar el nombre ".ft" para nada nuevo; usar un nombre más específico. */
.mod .ft{font-family:var(--serif);font-size:1.06rem;color:var(--ink);line-height:1.38;margin:0;background:transparent;font-family:var(--sans);font-size:1.02rem;color:var(--ink);line-height:1.5;background:transparent}
.mod-sub{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);line-height:1.4;margin:0}
br.mob-br{display:none}
@media (max-width:600px){
  br.mob-br{display:inline}
}
.thero.cns .grid{max-width:var(--wide);margin-inline:auto;width:100%;box-sizing:border-box}
.fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.3rem);max-width:760px;margin:2rem auto 0}
.fmt-card summary .ft{font-family:var(--serif);font-size:1.02rem;color:var(--ink);line-height:1.3}
.fmt-card summary .fd{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);line-height:1.35}
@media (max-width:640px){
  .fmts{grid-template-columns:1fr}
}
.mods.flat{gap:0;background:transparent}
.mods.flat .mod{background:transparent;border:none;border-radius:0;box-shadow:none;padding-block:.8rem;flex-direction:row;align-items:flex-start;gap:1rem}
.mods.flat .mod+.mod{border-top:1px solid var(--rule)}
.mods.flat .mod .ic{flex-shrink:0;margin-top:.1rem}
.mods-6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2.2vw,1.3rem);max-width:760px;margin:1.7rem auto 0}
@media (max-width:640px){
  .mods-6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:380px){
  .mods-6{grid-template-columns:1fr}
}
.fn{display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);font-style:italic;line-height:1.4;margin-top:.3rem;padding-left:.2rem}
@media (max-width:600px){
  .thero.rev .t-title{justify-self:end;text-align:right}
  .thero.rev .t-title .r{margin-left:auto}
}
.archive li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink-soft);opacity:.55;background:var(--orange);opacity:1}
.ast{color:var(--orange-text);font-weight:600;font-size:.85em;vertical-align:.2em;margin-left:.1em}
.fn.fn-ast::before{content:"*\00a0";color:var(--orange-text);font-weight:600;font-style:normal}
.mod:hover{transform:none;box-shadow:0 1px 3px rgba(26,26,26,.04),0 14px 32px -22px rgba(26,26,26,.2)}
.areas .kicker{margin-bottom:2.2rem}
.areas .kicker + p{margin-bottom:2.1rem}
.formacion-A{margin:clamp(2.4rem,5.5vw,3.6rem) 0 clamp(1rem,3vw,1.8rem)}
@media (min-width:621px){
  .mods.flat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:720px}
  .mods.flat .mod{flex-direction:column;align-items:flex-start;padding:.2rem 1.5rem}
  .mods.flat .mod+.mod{border-top:none;border-left:1px solid var(--rule)}
  .mods.flat .mod:first-child{padding-left:0}
  .mods.flat .mod:last-child{padding-right:0}
}
.fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem);max-width:900px;margin:2rem auto 0;align-items:start}
@media (max-width:720px){
  .fmts{grid-template-columns:1fr;max-width:420px}
}
.fmt-card{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;transition:box-shadow .2s,transform .2s;box-shadow:0 1px 3px rgba(26,26,26,.04),0 14px 32px -22px rgba(26,26,26,.2)}
.fmt-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px -6px rgba(26,26,26,.12),0 22px 44px -26px rgba(26,26,26,.3)}
.fmt-card[open]{box-shadow:0 8px 26px -12px rgba(26,26,26,.2)}
.fmt-card summary{padding:1.55rem 1.5rem;cursor:pointer;list-style:none;display:block;flex-direction:column;align-items:center;gap:.45rem;text-align:left;position:relative}
.fmt-card summary::-webkit-details-marker{display:none}
.fmt-card .fic{width:26px;height:26px;color:var(--orange);display:block;margin-bottom:.95rem}
.fmt-card .ft{display:block;background:transparent;font-family:var(--serif);font-size:1.32rem;color:var(--ink);line-height:1.16;margin-bottom:.28rem}
.fmt-card .fd{display:block;font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);line-height:1.42}
.fmt-card .fmore{position:absolute;top:1.55rem;right:1.5rem;width:15px;height:15px;background:linear-gradient(var(--orange),var(--orange)) center/15px 1.6px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.6px 15px no-repeat;transition:transform .25s}
.fmt-card[open] .fmore{transform:rotate(45deg)}
.fmt-card .fb{padding:.2rem 1.1rem 1.2rem;font-family:var(--sans);font-size:.91rem;color:var(--ink-soft);line-height:1.65;padding:0 1.5rem 1.6rem}
.fmt-card .fb p{margin:0 0 .35rem;font-family:var(--sans);font-size:.98rem;line-height:1.7;color:var(--ink-soft);margin:0}
.fmt-card .fb .ideal{margin-top:1.05rem}
.fmt-card .fb .ideal b{color:var(--ink);font-weight:600}
.archive .h::before{content:"";width:24px;height:1.5px;background:var(--orange);opacity:1}
br.wide-br{display:none}
@media (min-width:761px){
  br.wide-br{display:inline}
}
.nb-wrap{margin-top:clamp(2.2rem,4.8vw,3rem)}
.nb-wrap .price-plain{margin-top:0}
.price-plain{max-width:760px;margin:2rem auto 0;font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--ink);max-width:640px;margin-top:clamp(1.8rem,4vw,2.6rem)}
@media (max-width:760px){
  .price-plain{padding-left:1.3rem}
}
.thero .grid{height:clamp(520px,88vh,780px)}
.disc-note.swap{font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--ink-soft)}
@media (min-width:721px){
  .archive.white{padding:clamp(2.2rem,4.5vw,3.4rem)}
  .archive.white ul{column-gap:clamp(1rem,2vw,1.6rem)}
}
.disc-note em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:.92rem;font-family:var(--sans);font-style:normal;font-weight:700;font-size:1em;color:var(--ink)}
.disc-note.swap em{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.82rem;color:var(--ink);letter-spacing:.02em;font-size:.9rem}
.disc-note{max-width:760px;margin:0 auto;font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--ink-soft);text-align:left;font-size:.8rem;font-size:11px}
.disc-note.swap{font-size:.95rem}
.deflist li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:1px;background:var(--orange);content:"—";background:none;width:auto;height:auto;top:0;color:var(--orange);font-weight:500;font-size:.92em;line-height:inherit}
.cmin-b{display:flex;flex-direction:column;align-items:flex-end;gap:1rem;width:min(100%,600px)}
.cmin-wrap{min-height:112vh;display:flex;align-items:center;justify-content:center;padding:clamp(5rem,12vh,8rem) var(--pad);padding-bottom:clamp(5rem,14vh,9rem);min-height:calc(100vh - 220px);display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 80px);padding-bottom:clamp(6rem,18vh,11rem);min-height:100vh;padding-bottom:clamp(9rem,26vh,15rem);padding-top:calc(clamp(5rem,12vh,8rem) + 4rem);min-height:calc(100vh + 4rem)}
.thero h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(2.5rem,6.4vw,4.2rem);line-height:.98;text-shadow:0 1px 16px rgba(255,255,255,.92);font-size:clamp(1.3rem,6.5vw,2.85rem);line-height:1.08;font-size:clamp(1.3rem,6.5vw,2.4rem);font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-size:clamp(1.05rem,2.4vw,1.55rem);line-height:1.3;text-shadow:0 1px 10px rgba(255,255,255,.8),0 1px 3px rgba(255,255,255,.65)}
.thero .t-cita{justify-self:start;text-align:left;font-style:normal}
.thero:not(.rev) h1{margin-left:0;font-weight:400}
.thero.rev h1{text-shadow:0 0 32px rgba(255,255,255,1),0 1px 22px rgba(255,255,255,.98),
    0 2px 10px rgba(255,255,255,.92),0 4px 6px rgba(255,255,255,.8);font-weight:400}
.disc-note.swap16{font-size:15.5px}
.flip .front .cap h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 .18rem;line-height:1.15;font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);font-size:.88rem;line-height:1.3;font-weight:400}
.disc-note.swap{font-style:normal}
@media (max-width:720px){
  .nb-wrap{max-width:420px}
  .nb-wrap .disc-note{max-width:none;text-align:left;padding-left:1.5rem;margin:0}
}
.pq-section{padding-bottom:clamp(4.8rem,9.75vw,7.5rem)}
.thero:not(.rev) .grid{position:relative}
.thero:not(.rev) .t-title{position:absolute;grid-area:auto;left:var(--pad);bottom:53%}
.thero:not(.rev) .t-cita{max-width:33ch;position:absolute;grid-area:auto;right:var(--pad);top:51.5%}
@media (max-width:760px){
  .thero:not(.rev) .t-cita{top:62%}
}
.thero.rev .grid{position:relative}
.thero.rev .t-title{position:absolute;grid-area:auto;right:var(--pad);bottom:62%}
.thero.rev .t-cita{margin-left:.04em;max-width:36ch;width:max-content;max-width:100%;position:absolute;grid-area:auto;left:var(--pad);top:66%}

/* v54 · Talleres, cabecera en pantalla pequeña (aviso Óscar): "TALLERES" poco legible.
   1) Se sube el título a la misma altura que tiene "TERAPIA" en su cabecera (bottom:53%
      en vez de 62%), manteniendo la justificación a la derecha que ya tenía (.rev).
      Solo en ≤760px — el desktop no se toca, no se ha pedido.
   2) Se refuerza el halo blanco difuso que ya existía tras el texto (mismo recurso de
      text-shadow ya usado en este componente, sin caja ni borde detectable) por si aún
      quedan pájaros de la bandada detrás de las letras a este ancho.
   No he podido verificarlo contra la foto real (grupos-1400.jpg no estaba en el zip) —
   pasada visual tuya recomendada; si aun así no se lee bien, dímelo y subo más el halo
   antes de tocar el fondo o añadir una capa con borde.
   Rollback: eliminar este bloque completo (title vuelve a bottom:62% en todos los anchos,
   halo vuelve a los 4 valores de la línea 685-686 sin duplicar). */
@media (max-width:760px){
  .thero.rev .t-title{bottom:53%}
}
/* v60 · legibilidad de "Talleres" y su cita sobre la bandada (aviso Óscar, dos
   rondas: primero probé solo reforzar el halo de texto —text-shadow—, y según tu
   verificación en el móvil real seguía sin leerse. Medí con Playwright + PIL sobre
   la foto real (grupos-1400.jpg, no una estimación): puntos con luminancia tan baja
   como 26-60/255 quedaban bajo el texto pese al halo, porque un text-shadow solo
   ilumina el contorno de cada letra, no un área sólida detrás de todo el bloque.
   Se sustituye por un scrim (parche radial-gradient) detrás de todo el título y la
   cita, con un margen amplio y un degradado muy largo para que no se perciba borde
   —el mismo principio que pediste ("subir el rango del degradado del contorno de
   la caja"), aplicado esta vez con el ancho suficiente para tapar los puntos más
   oscuros medidos. z-index:0 en el contenedor aísla el scrim en su propio contexto
   de apilamiento, para que no se escape por detrás de la foto.
   Verificado con Playwright+PIL: luminancia mínima sube de 26-60 a ≥230/255.
   Rollback: eliminar este bloque completo + las 2 reglas ::before de más abajo. */
@media (max-width:760px){
  .thero.rev .t-title,.thero.rev .t-cita{z-index:0}
  .thero.rev .t-title::before,.thero.rev .t-cita::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.72) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.2) 72%,rgba(255,255,255,0) 100%)}
  .thero.rev .t-title::before{inset:-34px -50px -20px -50px}
  .thero.rev .t-cita::before{inset:-30px -38px -30px -38px}
}
/* Consolidado (Talleres, ≤600px): la cita termina a la misma altura que la de
   Terapia (bottom:9%, ver regla equivalente arriba), reflejada a la izquierda
   porque Talleres es .rev (título derecha, cita izquierda). Antes vivía repartida
   en dos bloques @media(max-width:600px) distintos del archivo — unificado aquí. */
@media (max-width:600px){
  .thero.rev .t-cita{top:auto;bottom:9%;left:var(--pad);right:auto;text-align:left}
}

/* ===== SOBRE MÍ ===== */
.ah-in{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2.4rem,6vw,5rem);align-items:center}
.ah-close .hl{font-style:normal}
.ah-photo{aspect-ratio:3/4;border-radius:12px;overflow:hidden;box-shadow:0 2px 5px rgba(26,26,26,.05),0 24px 54px -20px rgba(26,26,26,.34),0 52px 96px -52px rgba(201,121,22,.2)}
.ah-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .ah-in{grid-template-columns:1fr;gap:2.2rem}
  .ah-photo{order:-1;width:clamp(220px,58vw,320px);justify-self:start}
}
.ahero.b{background:rgb(231,231,231)}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);max-width:760px;margin:1.6rem auto 0;text-align:left}
@media (max-width:640px){
  .profiles{grid-template-columns:1fr;gap:1.8rem}
}
.profile h3{font-family:var(--serif);font-size:1.24rem;color:var(--ink);margin:0 0 .5rem;line-height:1.2}
.profile p{font-family:var(--sans);font-size:1rem;line-height:1.62;color:var(--ink-soft);margin:0}
.profiles{margin-bottom:0}
.ahero{background:var(--tint);padding-top:clamp(6.6rem,12vh,9.2rem);padding-bottom:clamp(3rem,7vh,5.2rem);background:var(--tint);display:flex;align-items:center;min-height:100vh;min-height:100svh;padding-block:clamp(6.6rem,12vh,9.2rem) clamp(3rem,7vh,5.2rem)}
.ah-in{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2.4rem,6vw,5rem);align-items:center}
.ah-photo{max-width:320px;aspect-ratio:3/4;margin-inline:auto;width:100%}
@media (max-width:760px){
  .ah-in{grid-template-columns:1fr;gap:2rem;text-align:left}
  .ah-photo{order:-1;max-width:clamp(220px,66vw,300px);margin-inline:0}
}
.ah-photo{aspect-ratio:3/4;max-width:352px;margin-inline:auto;width:100%;box-shadow:0 2px 5px rgba(26,26,26,.06),0 26px 58px -18px rgba(26,26,26,.36),0 54px 100px -54px rgba(201,121,22,.22)}
.ah-photo-in{width:100%;height:100%;border-radius:12px;overflow:hidden}
.ah-photo-in img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:761px){
  .ah-in{gap:clamp(3.2rem,7vw,6.5rem)}
  .ah-photo{margin-left:clamp(0px,2.4vw,1.6rem)}
}
@media (max-width:760px){
  .ahero{min-height:0;padding-top:clamp(7.2rem,15vh,9.4rem)}
  /* v59 · más aire al final del hero en móvil (aviso Óscar: termina muy en seguida
     tras el texto). Rollback: eliminar esta línea (queda el padding-bottom base,
     clamp(3rem,7vh,5.2rem), heredado de la regla .ahero sin media query). */
  .ahero{padding-bottom:clamp(4.4rem,11vh,6.4rem)}
  .ah-photo{margin-inline:auto;max-width:clamp(230px,68vw,330px)}
}
.ah-kicker{margin-bottom:2.4rem} /* histórico: .9rem (original) → 1.7rem (v54) → 2.4rem (v60, aviso Óscar: seguía justo) */
.ah-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.7vw,2.85rem);line-height:1.12;color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.01em}
.ah-sub{font-family:var(--sans);font-size:clamp(.94rem,1.5vw,1.06rem);font-weight:400;color:var(--ink-soft);line-height:1.55;margin:clamp(.9rem,1.8vw,1.2rem) 0 0;max-width:42ch}
@media (max-width:640px){
  .profiles{gap:2.1rem}
}
.ah-close{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.34;color:var(--ink);margin-top:clamp(2.3rem,4.6vw,3.2rem);text-wrap:balance} /* v60 · sin cursiva (petición Óscar, "a ver qué tal"); histórico margin-top: 1.7rem→2.2rem (v54) → 3.2rem (v60, "sobre todo después") */

/* ===== LEGALES ===== */
.legal-page{max-width:760px;margin:clamp(5rem,10vh,8rem) auto clamp(4rem,8vh,6rem);padding-inline:var(--pad)}
.legal-page h1{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;margin:0 0 1.8rem;color:var(--ink)}
.legal-page .lp-date{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);margin:0 0 2.8rem}
.legal-page h2{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:2.4rem 0 .8rem}
.legal-page p{font-family:var(--sans);font-size:.97rem;line-height:1.72;color:var(--ink);margin:0 0 .9rem}
.legal-page li{font-family:var(--sans);font-size:.97rem;line-height:1.72;color:var(--ink);margin:0 0 .9rem}
.legal-page ul{padding-left:1.4rem;margin:0 0 .9rem}
.legal-page a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px}
.legal-page .placeholder{background:rgba(201,121,22,.1);border:1px dashed var(--orange);border-radius:4px;padding:.15rem .4rem;font-family:var(--sans);font-size:.9em;color:var(--orange-text)}
.legal-page>p:last-child{margin-bottom:clamp(2.4rem,6vh,4rem)}

/* ===== v52 ===== */
/* 1) TERAPIA (movil <=600): cita abajo a la derecha, a pie de foto pero con aire
   (no pegada al borde). Rollback: eliminar este @media -> vuelve a top:62% (v51). */
@media (max-width:600px){
  .thero:not(.rev) .t-cita{top:auto;bottom:9%;right:var(--pad);left:auto;text-align:right;max-width:24ch}
}
/* Partes 2 y 3 (giro -28deg de Talleres + retirada de la pildora) revertidas a
   petición de Óscar: Talleres vuelve a la cabecera horizontal de v51/v52.
   Las reglas que quedan activas de nuevo son las de mas arriba en el archivo
   (.thero.rev .t-title / .t-cita, lineas ~673-676) — nunca se borraron, solo
   quedaban superadas por cascada; al quitar este override, vuelven a mandar. */