/* Layout: una columna tranquila. Un escenario fijo aloja la bienvenida y las preguntas; al final se levanta y deja ver una landing corta. */
:root{
  --ground:#FFFFFF;
  --surface:#F6F8F7;
  --ink:#14252A;
  --ink-2:#4B5E63;
  --line:#DCE3E1;
  --off:#D3DBD9;
  --accent:#29577C;
  --accent-hover:#1E4565;
  --on-accent:#FFFFFF;
  --scrim:rgba(8,16,18,.45);
  --c-red:#EA3636;
  --c-yellow:#F7A407;
  --c-green:#294B2B;
  --c-blue:#29577C;
  /* Tipografía: Urbanist para todo el sitio; Montserrat solo para el logotipo. */
  --f-brand:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-display:"Urbanist","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-text:"Urbanist","Segoe UI",system-ui,-apple-system,sans-serif;
  --w-display:340;
  --w-strong:680;
  --w-text:450;
  --display-vs:normal;
  --display-track:0em;
  --ease-out:cubic-bezier(.16,.84,.26,1);
  --ease-io:cubic-bezier(.6,.04,.24,1);
  --ease-soft:cubic-bezier(.45,0,.2,1);
  --r-card:22px;
  color-scheme:light;
}

/* Base propia: esta página no usa los estilos del tema. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
[hidden]{display:none !important}

html.locked, html.locked body{overflow:hidden}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--f-text); font-weight:var(--w-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.tbd{color:var(--ink-2); border-bottom:1.5px dashed var(--ink-2); padding-bottom:1px}

/* ---------- Botones ---------- */
.btn{
  font:inherit; font-weight:430; font-size:16.5px; border:0; cursor:pointer; text-decoration:none;
  border-radius:999px; padding:13px 24px; min-height:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--ink-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{min-height:40px; padding:7px 16px; font-size:14.5px}
.btn-block{width:100%}
.link{font:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* ---------- Escenario ---------- */
.stage{position:fixed; inset:0; z-index:40}
.stage-bg{position:absolute; inset:0; overflow:hidden; background:var(--ground); transition:opacity .9s var(--ease-io)}
.bg-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 2.6s ease}
.bg-canvas.on{opacity:1}
.bg-canvas.none{display:none}
/* Textura de papel, solo con el fondo de acuarela */
:root[data-fondo="acuarela"] .stage-bg::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.028; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.stage.leaving .stage-bg{opacity:0}
.screen{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px calc(env(safe-area-inset-bottom,0px) + 22px);
  opacity:0; transition:opacity .7s var(--ease-io);
}
.screen.is-in{opacity:1}
.screen:not(.is-in){pointer-events:none}
.slot{aspect-ratio:1016/1030; flex:none}

/* El cerebro que viaja entre pantallas */
.brain{
  position:fixed; left:0; top:0; width:320px; z-index:2; pointer-events:none;
  transform-origin:0 0;
  transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,1));
  transition:transform 1.1s var(--ease-io);
}
.brain.no-anim{transition:none}
.brain svg{position:relative; display:block; width:100%; max-width:none; height:auto; overflow:visible}
.b-body, .b-snap{transform-box:fill-box; transform-origin:50% 52%}
.b-halo{
  position:absolute; left:50%; top:50%; width:128%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 30deg, var(--c-red), var(--c-yellow), var(--c-blue), var(--c-green), var(--c-red));
  filter:blur(44px); opacity:0; transform:translate(-50%,-50%);
  animation:haloSpin 48s linear infinite; transition:opacity 2.6s ease; pointer-events:none;
}
.brain.halo .b-halo{opacity:.17}
/* el halo respira con el cerebro */
.brain.halo.alive .b-halo{opacity:calc(.17 + var(--breath, 0) * 4); transition:opacity .35s linear}
/* Respiración: el script infla el cerebro poco a poco con cada onda que suelta */
.b-wrap > svg{transform-origin:50% 51%}
/* Al pasar el cursor: el cerebro se acerca con un pequeño rebote, su halo se enciende,
   los cuatro íconos saludan uno tras otro y sale una onda. Así se entiende que se puede picar. */
.b-wrap{position:relative; transform-origin:50% 51%; transition:transform .7s cubic-bezier(.34,1.45,.64,1)}
.brain.hover .b-wrap{transform:scale(1.3)}
.brain.halo.hover .b-halo{opacity:.42; transition:opacity .5s ease}
/* Al entrar al sitio el halo se apaga mientras el cerebro viaja, para que llegue limpio al logotipo */
.brain.to-site .b-halo{opacity:0; transition:opacity .5s ease}
.b-ico{transform-box:fill-box; transform-origin:center}
.brain.hover .b-ico{animation:brinco .5s cubic-bezier(.3,.6,.4,1) var(--hi) 1 both}

@keyframes haloSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.b-trail{fill:none; stroke:none; visibility:hidden}
.b-outline{fill:none; stroke:#000000; stroke-width:24; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0}
.b-piece .pf{fill:var(--off); transition:fill .9s ease}
.b-piece.lit .pf{fill:var(--pc)}
.b-icon{fill:#FFFFFF; transform-box:fill-box; transform-origin:center}
.brain:not(.assembled) .b-piece,
.brain:not(.assembled) .b-frame,
.brain:not(.assembled) .b-icon{opacity:0}
.brain.snap .b-snap{animation:snap .9s cubic-bezier(.3,.7,.4,1)}
/* Los íconos aparecen suaves y luego brincan una sola vez, uno tras otro sin encimarse:
   corazón, psi, lápiz y libro */
.brain.icons .b-icon{animation:iconIn .8s ease-out var(--di) both, brinco .55s cubic-bezier(.3,.6,.4,1) var(--bi) 1}
.brain.breathing .b-body{animation:breathe 9s ease-in-out infinite}
@keyframes snap{0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)}}
@keyframes iconIn{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)}}
@keyframes brinco{0%{transform:scale(1)} 38%{transform:scale(1.22)} 72%{transform:scale(.97)} 100%{transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1)} 40%{transform:scale(1.07)} 85%{transform:scale(.965)}}

/* Bienvenida */
.intro{margin:auto; width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; text-align:center}
/* Pantalla principal: solo el cerebro, justo al centro. Al picarle se entra. */
.scr-intro{padding-top:calc(env(safe-area-inset-top,0px) + 20px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px)}
.slot-intro{width:min(60vw,300px); width:min(60vw,300px,36svh); margin:0; padding:0; border:0; background:none; border-radius:50%; cursor:pointer; -webkit-appearance:none; appearance:none}
.slot-intro:focus-visible{outline:2px solid var(--accent); outline-offset:10px}

/* Te damos la bienvenida: al picarle, el cerebro sube un poco y se hace más chico (sin llegar a ser
   el de las preguntas), las ondas lo siguen y siguen saliendo de él; abajo aparece la frase, letra por
   letra, y después el botón y, más chico, el enlace para ir directo a la información. */
.welcome-box{margin:auto; width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(20px,3.8svh,32px); transform:translateY(-2svh)}
.slot-welcome{width:min(41.4vw,180px); width:min(41.4vw,180px,24.3svh); margin-bottom:clamp(0px,1svh,8px)}
.welcome{margin:0; font-weight:250; font-size:clamp(31px,8.2vw,52px); line-height:1.12; letter-spacing:-.012em; text-wrap:balance}
.wd{display:inline-block; white-space:nowrap}
.ch{display:inline-block}
.scr-welcome .ch{opacity:0}
.scr-welcome.text-in .ch{animation:chFade 2.75s var(--ease-soft) both; animation-delay:calc(var(--i) * 69ms)}
@keyframes chFade{from{opacity:0} to{opacity:1}}
.welcome-actions{display:flex; flex-direction:column; align-items:center; gap:12px}
#btnContinue, .welcome-skip{visibility:hidden; opacity:0; transition:opacity 1.8s ease, visibility 0s linear 1.8s}
#btnContinue.show{visibility:visible; opacity:1; transition:opacity 1.8s ease}
.welcome-skip.show{visibility:visible; opacity:1; transition:opacity 1.8s ease .35s, color .25s ease}
.scr-welcome.leaving .welcome, .scr-welcome.leaving .welcome-actions{opacity:0; transform:translateY(-10px); transition:opacity .45s ease, transform .6s var(--ease-io)}
/* Enlace chico: para quien ya contestó antes y quiere ir directo a la información del centro */
.welcome-skip{font:inherit; font-size:13px; color:var(--ink-2); background:none; border:0; padding:6px 8px; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(75,94,99,.45); text-decoration-thickness:1px; text-underline-offset:4px}
.welcome-skip:hover{color:var(--ink); text-decoration-color:currentColor}

/* Botón «Continuar»: chico y moderno. Un aro fino con los cuatro colores del cerebro que gira despacio
   y, por dentro, un círculo de colores que también gira, con la flecha; con el cursor el círculo se abre
   hasta llenar el botón (con un velo oscuro para que el texto blanco se lea) y alrededor se enciende un
   brillo como el halo del cerebro. */
@property --bc-a{syntax:'<angle>'; inherits:true; initial-value:0deg}
.bc{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:0 22px 0 53px; border:0; border-radius:999px; cursor:pointer; background:none;
  font:inherit; font-size:15px; font-weight:520; letter-spacing:.015em; line-height:1; color:var(--ink);
  animation:bcGira 7s linear infinite; transition:color .3s ease;
}
/* aro de colores con el interior blanco */
.bc::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-2; pointer-events:none;
  border:1.6px solid transparent;
  background:linear-gradient(#FFFFFF, #FFFFFF) padding-box, conic-gradient(from var(--bc-a), var(--c-red), var(--c-yellow), var(--c-blue), var(--c-green), var(--c-red)) border-box;
}
/* brillo alrededor, como el halo del cerebro */
.bc::after{
  content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-3; pointer-events:none;
  background:conic-gradient(from var(--bc-a), var(--c-red), var(--c-yellow), var(--c-blue), var(--c-green), var(--c-red));
  filter:blur(13px); opacity:0; transition:opacity .6s ease;
}
/* el círculo de adentro, que se abre hasta llenar el botón */
.bc-fill{
  position:absolute; left:5px; top:5px; bottom:5px; width:34px; border-radius:999px; z-index:-1; pointer-events:none;
  background:conic-gradient(from calc(var(--bc-a) * -2), var(--c-red), var(--c-yellow), var(--c-blue), var(--c-green), var(--c-red));
  transition:width .6s cubic-bezier(.65,0,.35,1);
}
/* al abrirse, un velo oscuro encima de los colores para que el texto blanco se lea bien */
.bc-fill::after{content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(20,37,42,.42); opacity:0; transition:opacity .6s ease}
.bc:hover .bc-fill::after, .bc:focus-visible .bc-fill::after, .bc:active .bc-fill::after{opacity:1}
.bc-arrow{position:absolute; left:13px; top:50%; width:18px; height:18px; margin-top:-9px; fill:none; stroke:#FFFFFF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease-out)}
.bc:hover, .bc:focus-visible, .bc:active{color:#FFFFFF; transition:color .35s ease .12s}
.bc:hover .bc-fill, .bc:focus-visible .bc-fill, .bc:active .bc-fill{width:calc(100% - 10px)}
.bc:hover::after, .bc:focus-visible::after{opacity:.38}
.bc:hover .bc-arrow, .bc:focus-visible .bc-arrow{transform:translateX(3px)}
.bc:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
@keyframes bcGira{to{--bc-a:360deg}}
@keyframes chIn{from{opacity:0; filter:blur(8px); transform:translateY(6px)} to{opacity:1; filter:none; transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* Preguntas */
.ask{width:100%; max-width:560px; min-height:100%; display:flex; flex-direction:column; gap:22px}
/* El cerebro, la pregunta y sus opciones van juntos, como un solo bloque centrado en la pantalla
   (el enlace para ver la información queda al fondo). Si una pregunta es más alta que otra, el cerebro
   se acomoda suavemente a su nuevo lugar. */
.ask-top{margin-top:auto}
/* pantallas bajas: opciones un poco más compactas para que todo quepa sin desplazarse */
@media (max-height:780px){ .ask{gap:18px} .scr-ask .opts{gap:8px; margin-top:20px} .scr-ask .opt{min-height:56px; padding-top:11px; padding-bottom:11px} }
@media (max-height:700px){ .ask-top .slot-ask{width:min(34vw,170px,18svh)} }
.ask-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.slot-ask{width:min(34vw,170px); width:min(34vw,170px,19svh)}   /* 130–170 px según la pantalla (antes 62, luego 106) */
.back{justify-self:start; font:inherit; font-size:15px; color:var(--ink-2); background:none; border:0; padding:10px 6px; cursor:pointer; visibility:hidden}
.back.show{visibility:visible}
.q-wrap{animation:qIn .7s var(--ease-out) both}
.q-wrap.out{animation:qOut .3s ease both}
@keyframes qIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes qOut{to{opacity:0; transform:translateY(-10px)}}
.q{margin:0; font-weight:280; font-size:clamp(28px,7.2vw,42px); line-height:1.12; letter-spacing:-.015em; text-wrap:balance; outline:none; text-align:center}
.hint{margin:10px 0 0; color:var(--ink-2); font-size:16px; text-align:center; text-wrap:balance}
.opts{display:flex; flex-direction:column; gap:10px; margin-top:26px}
.opt{
  font:inherit; font-size:17.5px; font-weight:350; line-height:1.35; text-align:center; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:14px 18px; min-height:62px; display:flex; align-items:center; justify-content:center; gap:14px; cursor:pointer;
  transition:border-color .25s ease, background-color .3s ease, opacity .35s ease;
}
@media (hover:hover){ .opt:hover{border-color:var(--ink-2)} }
.opt[aria-pressed="true"]{border-color:var(--pc,var(--accent)); background:var(--surface); background:color-mix(in srgb, var(--pc,var(--accent)) 13%, var(--surface))}
.opts.chosen .opt:not([aria-pressed="true"]), .opts.chosen .opt-alt:not([aria-pressed="true"]){opacity:.35}
/* opción secundaria: más chica, sin fondo, debajo de las demás (no es un enlace: también es una respuesta) */
.opt-alt{align-self:center; margin-top:2px; font:inherit; font-size:15.5px; line-height:1.3; color:var(--ink-2); background:transparent; border:1px dashed var(--off); border-radius:999px; padding:11px 22px; min-height:46px; cursor:pointer; transition:color .25s ease, border-color .25s ease, opacity .35s ease}
@media (hover:hover){ .opt-alt:hover{color:var(--ink); border-color:var(--ink-2)} }
.opt-alt[aria-pressed="true"]{color:var(--ink); border-style:solid; border-color:var(--pc,var(--accent))}
.opt-t{min-width:0}
.mark{width:38px; height:38px; border-radius:50%; background:var(--pc); display:grid; place-items:center; flex:none}
.mark svg{width:21px; height:21px; display:block}
.skip{margin-top:auto; align-self:center; font:inherit; font-size:14.5px; color:var(--ink-2); background:none; border:0; padding:12px 6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* Llegada */
.arrive{margin:auto; width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center}
.slot-arrive{position:relative; width:min(44vw,210px); width:min(44vw,210px,30svh)}
.ripple{position:absolute; inset:-7%; border-radius:50%; border:1.5px solid var(--ink-2); opacity:0}
.scr-arrive.pulse .ripple{animation:ripple 2.4s var(--ease-out) both}
.scr-arrive.pulse .r2{animation-delay:.4s}
@keyframes ripple{0%{opacity:.4; transform:scale(.86)} 100%{opacity:0; transform:scale(1.6)}}
.arrive-text{margin:0; font-weight:260; font-size:clamp(29px,7.6vw,46px); line-height:1.12; letter-spacing:-.015em; text-wrap:balance}
.arrive-text .w{display:inline-block; opacity:0}
.scr-arrive.playing .w{animation:chIn 1.1s var(--ease-out) both; animation-delay:calc(.1s + var(--i) * 150ms)}

/* Hoja del mensaje */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheet-backdrop{position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity .3s ease}
.sheet.open .sheet-backdrop{opacity:1}
.sheet-panel{position:relative; width:100%; max-width:520px; background:var(--surface); border-radius:24px 24px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:12px; transform:translateY(100%); transition:transform .45s var(--ease-out)}
.sheet.open .sheet-panel{transform:none}
@media (min-width:640px){
  .sheet{align-items:center; padding:20px}
  .sheet-panel{border-radius:24px; opacity:0; transform:translateY(20px); transition:transform .45s var(--ease-out), opacity .3s ease}
  .sheet.open .sheet-panel{opacity:1}
}
.sheet-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.sheet h2{margin:0; font-size:22px; font-weight:380}
.sheet-close{font:inherit; font-size:15px; background:none; border:0; color:var(--ink-2); cursor:pointer; padding:6px}
.sheet-sub{margin:0; font-size:15px; color:var(--ink-2)}
.sheet textarea{font:inherit; font-size:16px; line-height:1.5; width:100%; box-sizing:border-box; min-height:136px; resize:vertical; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--ground); color:var(--ink)}
.sheet-actions{display:flex; gap:10px; flex-wrap:wrap}
.sheet-actions > *{flex:1 1 150px}
.sheet-note{margin:0; font-size:14px; color:var(--ink-2); padding:10px 12px; border:1px dashed var(--ink-2); border-radius:12px}

/* ---------- Sitio · estilo «Cálido y premium» ----------
   Crema y verde bosque, títulos en Fraunces (cursiva para lo emotivo), texto en Plus Jakarta Sans,
   fotos en arco y los cuatro colores del logo solo como acentos. Todo va con prefijo "s-" para no
   chocar con las clases que WordPress le pone al <body> ni con las pantallas de entrada. */
:root{
  --s-cream:#F6F0E6; --s-paper:#FFFCF7; --s-sand:#F2E9DB; --s-ink:#1F2A24; --s-ink2:#56625B; --s-ink3:#6B746D;
  --s-line:#E8DDCB; --s-line2:#D6C8B0; --s-forest:#294B2B; --s-forest2:#1F3A21; --s-amber:#F7A407;
  --s-blush:#F3DCD3; --s-honey:#F5E4C1; --s-mist:#DCE6EE; --s-sage:#E0E8D8;
  --s-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --s-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s-shadow:0 30px 60px -36px rgba(70,50,20,.38);
}
.site, .s-modal, .s-drawer, .dock{font-family:var(--s-sans); font-weight:400; font-size:16px; line-height:1.55; word-spacing:.03em; color:var(--s-ink)}
.site{background:var(--s-cream); min-height:100vh}
.site a{color:var(--s-ink)}
.site em, .s-modal em, .s-drawer em{font-style:italic}
.s-wrap{max-width:1200px; margin:0 auto; padding-inline:20px}
@media (min-width:600px){ .s-wrap{padding-inline:32px} }
@media (min-width:1200px){ .s-wrap{padding-inline:40px} }

/* Botones */
.s-btn{font:inherit; font-weight:600; font-size:15.5px; line-height:1.2; border:0; cursor:pointer; text-decoration:none; border-radius:999px; min-height:52px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; transition:background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease}
.s-btn svg{width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.s-btn-primary{background:var(--s-forest); color:var(--s-paper)}
.s-btn-primary:hover{background:var(--s-forest2)}
.s-btn-primary:disabled{opacity:.42; cursor:not-allowed}
.s-btn-line{background:transparent; color:var(--s-ink); border:1px solid var(--s-ink)}
.s-btn-line:hover{background:rgba(31,42,36,.05)}
.s-btn-cream{background:var(--s-paper); color:var(--s-ink)}
.s-btn-cream:hover{background:#FFFFFF}
.s-btn-ghost{background:transparent; color:var(--s-paper); border:1px solid rgba(255,252,247,.45)}
.s-btn-ghost:hover{border-color:var(--s-paper)}
.s-btn-sm{min-height:46px; padding:0 22px; font-size:15px}
.s-btn-block{width:100%}
.site .s-btn-primary, .s-modal .s-btn-primary, .s-drawer .s-btn-primary, .dock .s-btn-primary{color:var(--s-paper)}
/* botón con flecha en un círculo, a la derecha */
.s-btn-arrow{justify-content:space-between; gap:16px; padding:0 8px 0 24px; min-height:56px}
.s-arrow{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .35s var(--ease-out)}
.s-btn-primary .s-arrow{background:var(--s-paper); color:var(--s-forest)}
.s-btn-cream .s-arrow{background:var(--s-forest); color:var(--s-paper)}
.s-arrow svg{width:18px; height:18px; stroke-width:2}
.s-btn-arrow:hover .s-arrow{transform:translateX(3px)}
.s-link{font:inherit; font-weight:600; font-size:15px; background:none; border:0; padding:6px 0; color:var(--s-ink); cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#CDBEA5; white-space:nowrap}
.s-link:hover{text-decoration-color:currentColor}
.s-link-center{align-self:center}
.s-link-plain{font:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.s-ico-chat{width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.s-link .s-ico-chat{stroke:var(--s-forest)}
.site :focus-visible, .s-modal :focus-visible, .s-drawer :focus-visible, .dock :focus-visible{outline:2px solid var(--s-forest); outline-offset:3px}
/* los títulos y paneles reciben el foco por código (para lectores de pantalla): sin marco visible */
.s-modal .s-quote-t:focus, .s-modal .s-p1-escucha:focus, .s-modal .s-p2-t:focus, .s-modal .s-p3-t:focus, .s-modal-panel:focus, .s-drawer-panel:focus{outline:none}

/* Etiquetas, títulos y piezas comunes */
.s-eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--s-ink2)}
.s-dot{width:8px; height:8px; border-radius:50%; background:var(--pc,var(--s-forest)); flex:none}
.s-pieza{width:20px; height:20px; flex:none; overflow:visible}
.s-leaf{width:18px; height:18px; fill:none; stroke:var(--s-forest); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none}
.s-kicker{margin:0; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--s-ink2)}
.s-h2{margin:16px 0 0; font-family:var(--s-serif); font-weight:400; font-size:clamp(38px,5.2vw,64px); line-height:1.03; letter-spacing:-.022em; text-wrap:balance}
.s-h2 em{display:block; color:var(--s-forest)}
.s-h2-sm{font-size:clamp(30px,3.6vw,42px)}
.s-h2-sm em{display:inline}
.s-h3{margin:0; font-family:var(--s-serif); font-weight:400; font-size:clamp(26px,2.6vw,32px); letter-spacing:-.015em; line-height:1.15}
.s-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.s-chips li{padding:4px 13px; border-radius:999px; background:var(--s-sand); font-size:13px; font-weight:600; line-height:1.5}
.s-tag-tbd{display:inline-block; margin-top:4px; padding:1px 9px; border-radius:6px; background:#F8E6BE; font-size:12.5px; font-weight:700; color:#6B4700; word-spacing:normal; line-height:1.6}
.site .tbd, .s-modal .tbd{color:var(--s-ink2); border-bottom:1.5px dashed var(--s-ink2); padding-bottom:1px}
.s-urgent{margin:0; padding:12px 14px; border-radius:14px; font-size:14.5px; line-height:1.5; color:var(--s-ink); background:#FDF1F1; border:1px solid #F0C9C9}
.s-urgent a{font-weight:700; color:var(--s-ink); font-variant-numeric:tabular-nums}
.s-sprig{fill:none; stroke:var(--s-forest); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Encabezado ---------- */
.s-hdr{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:box-shadow .3s ease}
.s-hdr.scrolled{box-shadow:0 1px 0 rgba(20,37,42,.08)}
.s-hdr-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px 12px 20px; min-height:68px}
@media (min-width:960px){ .s-hdr-in{padding:18px 40px; min-height:86px} }
.brand{display:flex; align-items:center; gap:10px; color:var(--s-ink); text-decoration:none; min-width:0}
.brand-mark{height:36px; width:auto; flex:none; opacity:0; transition:opacity .15s ease}
@media (min-width:960px){ .brand-mark{height:43px} }
.site.revealed .brand-mark{opacity:1; transition:none}   /* aparece justo cuando el cerebro llega encima: sin parpadeo */
.wordmark{display:flex; flex-direction:column; font-family:var(--f-brand); text-transform:uppercase; line-height:1.1; min-width:0; color:var(--s-ink)}
.wm1{font-weight:300; font-size:11px; letter-spacing:.01em}
.wm2{font-weight:500; font-size:11px; letter-spacing:.01em}
.wm3{font-weight:400; font-size:7px; letter-spacing:.32em; margin-top:2px; color:var(--s-ink2)}
@media (min-width:960px){ .wm1, .wm2{font-size:13px} .wm3{font-size:8.5px; letter-spacing:.34em; margin-top:3px} }
.s-nav{display:none}
@media (min-width:960px){
  .s-nav{display:flex; align-items:center; gap:30px; font-weight:500; font-size:15px}
  .s-nav a{text-decoration:none; color:var(--s-ink); padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s ease}
  .s-nav a:hover{border-bottom-color:var(--s-ink)}
}
.s-menu-btn{width:44px; height:44px; flex:none; border:1px solid var(--s-line2); border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer}
.s-menu-btn svg{width:20px; height:20px; fill:none; stroke:var(--s-ink); stroke-width:1.8; stroke-linecap:round}
.s-menu-btn .mb-x, .s-menu-btn[aria-expanded="true"] .mb-l{display:none}
.s-menu-btn[aria-expanded="true"] .mb-x{display:block}
@media (min-width:960px){ .s-menu-btn, .s-menu{display:none !important} }
.s-menu{padding:6px 20px 22px; display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--s-line)}
.s-menu a{padding:14px 0; font-size:18px; font-family:var(--s-serif); text-decoration:none; color:var(--s-ink); border-bottom:1px solid var(--s-line)}
.s-menu .s-btn{margin-top:10px}

/* ---------- Portada con tu resultado ----------
   Pantalla completa: video de fondo (varios clips que se funden uno en otro), el título a la izquierda
   y la tarjeta del resultado encima. Composición tomada del boceto «Portada con tu resultado». */
:root{--h-ink:#1F2D31; --h-ink2:#5E6F73; --h-chip:#F2F5F5; --h-xf:1.8s;
  --s-plumon:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --s-mano:"Kalam","Segoe Print","Comic Sans MS",cursive; --s-plumon-w:800; --s-plumon-k:.95;
  --s-papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='5' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='1.25' result='l'%3E%3CfeDistantLight azimuth='50' elevation='64'/%3E%3C/feDiffuseLighting%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .015' numOctaves='2' seed='3' stitchTiles='stitch' result='fib'/%3E%3CfeColorMatrix in='fib' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -1.6 1.05' result='fa'/%3E%3CfeComposite in='l' in2='fa' operator='arithmetic' k1='0' k2='1' k3='-.04' k4='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E");
  --s-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.s-hero{position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; color:#FFFFFF; background:#2B2721}
.s-fondo{position:absolute; inset:0; z-index:-2; background:#2B2721 center/cover no-repeat}
.s-fondo-v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fp,50% 50%); opacity:0; transition:opacity var(--h-xf) ease}
.s-fondo-v.on{opacity:1}
/* velo: oscurece donde va el texto y deja respirar el video del otro lado */
.s-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,20,18,.55) 0%, rgba(16,20,18,.18) 26%, rgba(16,20,18,.10) 52%, rgba(16,20,18,.62) 78%, rgba(16,20,18,.78) 100%)}
.s-hero-in{flex:1; width:100%; max-width:1280px; margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; gap:28px; padding:calc(68px + 30px) 20px calc(16px + env(safe-area-inset-bottom,0px))}
.s-hero .s-eyebrow{gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.15em; color:#FFFFFF}
.s-hero .s-dot{width:7px; height:7px}
.s-h1{margin:14px 0 0; font-family:var(--s-sans); font-weight:750; font-size:clamp(32px,9.2vw,40px); line-height:1.04; letter-spacing:-.035em; color:#FFFFFF; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.18)}
.s-h1 em{display:block; font-style:normal}
.s-lede{margin:14px 0 0; max-width:30em; font-size:16px; line-height:1.55; color:rgba(255,255,255,.88)}
.s-dots{display:inline-flex; gap:4px}
.s-dots i{width:9px; height:9px; border-radius:50%; background:var(--c)}
.s-pause{position:absolute; z-index:2; right:16px; top:calc(68px + 12px); width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(16,20,18,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .2s ease, border-color .2s ease}
.s-pause[hidden]{display:none}
.s-pause:hover{background:rgba(16,20,18,.4); border-color:#FFFFFF}
.s-pause svg{width:14px; height:14px; fill:#FFFFFF}
.s-pause .pl, .s-pause[aria-pressed="true"] .ps1, .s-pause[aria-pressed="true"] .ps2{display:none}
.s-pause[aria-pressed="true"] .pl{display:block}
.s-hero :focus-visible{outline-color:#FFFFFF}
.s-scroll{display:none}
@media (min-width:600px){
  .s-hero-in{padding-inline:32px}
  .s-h1{font-size:46px}
}
@media (min-width:960px){
  .s-hero::before{background:
    linear-gradient(90deg, rgba(16,20,18,.72) 0%, rgba(16,20,18,.5) 34%, rgba(16,20,18,.12) 62%, rgba(16,20,18,.22) 100%),
    linear-gradient(180deg, rgba(16,20,18,.45) 0%, rgba(16,20,18,0) 24%, rgba(16,20,18,0) 76%, rgba(16,20,18,.4) 100%)}
  .s-hero-in{flex-direction:row; align-items:center; justify-content:space-between; gap:56px; padding:calc(86px + 24px) clamp(40px,8.3vw,120px) 84px}
  .s-hero-copy{flex:1 1 640px; max-width:640px}
  .s-hero .s-eyebrow{font-size:13px}
  .s-hero .s-dot{width:8px; height:8px}
  .s-h1{margin-top:20px; font-size:clamp(44px, min(4.2vw, 8.4svh), 62px); line-height:1.03}
  .s-lede{margin-top:clamp(14px,2.6svh,22px); max-width:520px; font-size:clamp(17px,1.32vw,19px); line-height:1.6}
  .s-pause{top:auto; right:auto; left:clamp(40px,8.3vw,120px); bottom:22px; width:42px; height:42px}
  .s-scroll{display:flex; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); flex-direction:column; align-items:center; gap:4px; font-size:13.5px; font-weight:600; text-decoration:none; color:#FFFFFF}
  .site .s-scroll{color:#FFFFFF}
  .s-scroll svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:sBaja 2.6s ease-in-out infinite}
}
@keyframes sBaja{0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}}
@media (min-width:960px) and (max-height:720px){ .s-scroll{display:none} .s-hero-in{padding-bottom:56px} }

/* encabezado encima del video: transparente y en blanco; se vuelve crema al bajar o al abrir el menú */
.s-hdr{position:fixed; left:0; right:0; transition:background-color .35s ease, box-shadow .3s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease}
html{scroll-padding-top:86px}
.s-hdr.on-video:not(:has(.s-menu:not([hidden]))){background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.s-hdr.on-video:not(:has(.s-menu:not([hidden]))) .wordmark,
.s-hdr.on-video:not(:has(.s-menu:not([hidden]))) .wm3{color:#FFFFFF}
.s-hdr.on-video:not(:has(.s-menu:not([hidden]))) .s-menu-btn{border-color:rgba(255,255,255,.5); background:rgba(16,20,18,.18)}
.s-hdr.on-video:not(:has(.s-menu:not([hidden]))) .s-menu-btn svg{stroke:#FFFFFF}
@media (min-width:960px){
  .s-hdr.on-video .s-nav a{color:#FFFFFF}
  .s-hdr.on-video .s-nav a:hover{border-bottom-color:#FFFFFF}
  .s-hdr.on-video .s-nav .s-btn-primary{background:#FFFFFF; color:var(--h-ink)}
  .s-hdr.on-video .s-nav .s-btn-primary:hover{background:#F2F5F5}
}
.wordmark, .wm3, .s-nav a, .s-nav .s-btn{transition:color .35s ease, background-color .35s ease, border-color .2s ease}

/* ---------- Secciones ---------- */
.s-sec{padding:72px 0}
@media (min-width:960px){ .s-sec{padding:112px 0} }
.s-sec-head{display:flex; flex-direction:column; gap:18px}
.s-sec-lede{margin:0; max-width:460px; font-size:16.5px; line-height:1.6; color:var(--s-ink2)}
@media (min-width:960px){ .s-sec-head{flex-direction:row; align-items:flex-end; justify-content:space-between; gap:56px} .s-sec-head > div{max-width:700px} .s-sec-lede{margin-bottom:8px; font-size:17px} }

/* ---------- Cómo trabajamos: el cerebro se arma al bajar y cada pieza se abre por dentro ----------
   La sección se queda fija en blanco mientras bajas: se dibuja el contorno con sus cuatro huecos numerados y cada
   pieza llega a su lugar con su paso escrito a mano. Con el cerebro completo, cada pieza se puede abrir: la cámara
   entra en ella, su color llena la pantalla y se anima una pequeña escena del paso. */
/* La sección mide la ventana grande (sin barras del navegador) para que nada se asome abajo; lo de abajo deja
   libre lo que tapan la barra del navegador y la barra de contacto. */
.s-meto{--hdr:68px; --dock:calc(76px + env(safe-area-inset-bottom,0px)); position:relative; height:300vh; background:#FFFFFF; color:var(--h-ink); scroll-margin-top:-86px}   /* el enlace «Cómo trabajamos» llega justo al inicio */
.s-meto-pin{position:sticky; top:0; height:100vh; overflow:hidden; background:#FFFFFF}
.s-meto-in{height:100%; max-width:1280px; margin:0 auto; padding:calc(var(--hdr) + 14px) 20px calc(var(--dock) + 10px);
  padding-bottom:calc(var(--dock) + 10px + 100vh - 100svh);
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) 34px 96px 24px; justify-items:center; align-items:center; text-align:center}
.s-meto-head{grid-area:1 / 1; max-width:36em}
.s-meto-eyebrow{margin:0; font-family:var(--s-sans); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--h-ink2)}
.s-meto-t{margin:6px 0 0; font-family:var(--s-serif); font-style:italic; font-weight:500; font-size:clamp(25px,7.2vw,31px); line-height:1.08; letter-spacing:-.012em; color:var(--h-ink); text-wrap:balance}
.s-meto-sub{margin:8px auto 0; max-width:30em; font-size:15px; line-height:1.5; color:var(--h-ink2); text-wrap:balance}
.s-meto-escena{display:contents}
.s-meto-cer{grid-area:2 / 1; height:min(calc(100% - 16px), calc((100vw - 40px) * 1.014), 460px); aspect-ratio:1000 / 1014}
.s-meto-svg{display:block; width:100%; height:100%; overflow:visible}
.s-meto-pasos{grid-area:3 / 1 / 6 / 2; align-self:stretch; width:100%; max-width:440px; margin:0; padding:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); align-items:center}
.s-mp{grid-area:1 / 1; position:relative; opacity:0}
.s-mp[data-p="red"]{--pc:var(--c-red)} .s-mp[data-p="yellow"]{--pc:var(--c-yellow)} .s-mp[data-p="blue"]{--pc:var(--c-blue)} .s-mp[data-p="green"]{--pc:var(--c-green)}
.s-mp{cursor:pointer}
.s-mp.apagado{pointer-events:none}
.s-mp-h{margin:0; font:inherit}
.s-mp-t{position:relative; display:inline-block; margin:0; padding:0 3px; border:0; background:none; font-family:var(--s-mano); font-weight:700; font-size:28px; line-height:1.15; color:var(--pc, var(--h-ink)); cursor:pointer; -webkit-tap-highlight-color:transparent}
.s-mp-raya{position:absolute; left:-2px; bottom:-5px; width:calc(100% + 4px); height:11px; overflow:visible; pointer-events:none}
.s-mp-raya path{fill:none; stroke:var(--pc); stroke-width:5; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-width .25s ease}
.s-mp.toca .s-mp-raya path{stroke-width:7.5}
.s-mp p{margin:9px auto 0; max-width:31ch; font-size:15px; line-height:1.45; color:var(--h-ink2); text-wrap:pretty}
.s-mp-flecha{display:none}
.s-mp-flecha path{fill:none; stroke:var(--pc); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.s-mp-flecha .fl-c{stroke-dasharray:1 1; stroke-dashoffset:1}
.s-mp-flecha .fl-p{opacity:0}
.s-meto-pie{display:contents}
.s-meto-lema{grid-area:3 / 1; margin:0; font-family:var(--s-serif); font-style:italic; font-weight:500; font-size:22px; line-height:1.15; color:#C42B2B; opacity:0}
.s-meto-pista{grid-area:5 / 1; position:relative; margin:0; font-size:13px; line-height:1.4; color:var(--h-ink2); opacity:0}
/* la invitación a abrir las piezas: el texto cambia si hay mouse o dedo */
.s-pista-clic, .s-pista-toca{display:inline-block}
.s-pista-toca{display:none}
@media (hover:none){ .s-pista-clic{display:none} .s-pista-toca{display:inline-block} }
.s-pista-fl{display:none}
.s-meto.inv-nota .s-pista-largo{display:none}
/* opción A · nota a mano: se escribe sola al completarse el cerebro y su flecha apunta al cerebro */
.s-meto.inv-nota .s-meto-pista{font-family:var(--s-mano); font-size:16px; line-height:1.2; color:#C42B2B}
.s-meto.inv-nota .s-meto-pista > span{clip-path:inset(-20% 100% -30% -2%); transition:clip-path 1s cubic-bezier(.55,0,.3,1) .15s}
.s-meto.inv-nota.invita .s-meto-pista > span{clip-path:inset(-20% -2% -30% -2%)}
.s-meto.inv-nota .s-pista-fl{display:block; position:absolute; right:calc(100% + 4px); bottom:3px; width:30px; height:23px; overflow:visible; transform:scaleX(-1)}
.s-pista-fl path{fill:none; stroke:#C42B2B; stroke-width:4.6; stroke-linecap:round; stroke-linejoin:round}
.s-pista-fl .fl-c{stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset .6s ease 1.05s}
.s-pista-fl .fl-p{opacity:0; transition:opacity .2s ease 1.55s}
.s-meto.inv-nota.invita .s-pista-fl .fl-c{stroke-dashoffset:0}
.s-meto.inv-nota.invita .s-pista-fl .fl-p{opacity:1}
/* opción B · las piezas saludan una por una (y su nombre se vuelve a subrayar) */
.m-pz.saluda .m-hov{animation:mSaluda 1s cubic-bezier(.3,.6,.3,1)}
@keyframes mSaluda{0%{transform:none} 30%{transform:translateY(-12px) rotate(-3deg) scale(1.05)} 55%{transform:translateY(2px) rotate(1deg) scale(.99)} 75%{transform:translateY(-4px) scale(1.01)} 100%{transform:none}}
.s-mp.saluda .s-mp-raya path{animation:mRaya .9s ease}
@keyframes mRaya{0%,100%{stroke-width:5} 40%{stroke-width:9}}
.s-mp.saluda .s-mp-flecha path{animation:mEmpuja .9s cubic-bezier(.3,.6,.3,1)}
@keyframes mEmpuja{0%,100%{transform:none} 40%{transform:translate(var(--ex, 6px), var(--ey, 0px))}}
/* opción C · una mano muestra cómo se abre (cuatro formas; los grosores van en px de pantalla con --u) */
.m-mano{opacity:0; pointer-events:none}
.mn-fondo{fill:#FFFFFF}
.mn-linea{fill:none; stroke:var(--h-ink); stroke-width:calc(var(--u, .1) * 2); stroke-linecap:round; stroke-linejoin:round}
.mn-sol{fill:var(--h-ink); stroke:#FFFFFF; stroke-width:calc(var(--u, 1) * 3.2); stroke-linejoin:round; paint-order:stroke}
.mn-dib{fill:none; stroke:var(--h-ink); stroke-width:calc(var(--u, .1) * 2.3); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1}
.mn-pliegue{fill:none; stroke:var(--h-ink); stroke-width:calc(var(--u, .1) * 2); stroke-linecap:round; opacity:0}
.mn-rayos{opacity:0}
.mn-rayos path{fill:none; stroke:var(--h-ink); stroke-width:calc(var(--u, .1) * 2.2); stroke-linecap:round}
.mn-dedo{fill:rgba(255,255,255,.9); stroke:rgba(31,45,49,.3); stroke-width:1.2}
.m-toque circle{fill:none; stroke:#FFFFFF; opacity:0}
/* al final, en celular: los cuatro nombres juntos, listos para abrir cada pieza */
.s-meto.rejilla .s-meto-pasos{grid-area:4 / 1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 10px; align-content:center}
.s-meto.rejilla .s-mp{grid-area:auto}
.s-meto.rejilla .s-mp p{position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.s-meto.rejilla .s-mp-t{font-size:21px}
/* el cerebro: contorno, huecos, piezas, anillos y ondas */
.m-ondas circle{fill:none; stroke-width:6; opacity:0}
.m-marco{opacity:0}
.m-sil{fill:none; stroke:var(--h-ink); stroke-width:7; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1}
.m-huecos{opacity:0}
.m-huecos use{fill:#F6F4EF; stroke:#CBC7BC; stroke-width:4; stroke-dasharray:14 11}
.m-num{font-family:var(--s-mano); font-weight:700; font-size:100px; fill:#BDB8AC; text-anchor:middle}
.m-pz{opacity:0}
.m-pz.lista{cursor:pointer}
.m-hov{transform-box:view-box; transform-origin:var(--o); transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.m-pz.toca .m-hov{transform:scale(1.04)}
.m-anillo{fill:none; stroke-width:10; opacity:0; pointer-events:none}
/* adentro de una pieza */
.s-meto-head, .s-meto-pasos, .s-meto-lema, .s-meto-pista{transition:opacity .3s ease}
.s-meto.abierto .s-meto-head, .s-meto.abierto .s-meto-pasos, .s-meto.abierto .s-meto-lema, .s-meto.abierto .s-meto-pista{opacity:0 !important; transition:opacity .25s ease}
/* el color de la pieza se derrama desde el centro con una orilla irregular, como tinta */
.s-meto-velo{position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none; visibility:hidden}
.s-meto.abierto .s-meto-velo{visibility:visible}
.s-meto-velo i{position:absolute; left:50%; top:50%; width:var(--d,240vmax); height:var(--d,240vmax); border-radius:44% 56% 52% 48% / 55% 45% 55% 45%; background:var(--vp,#EA3636); transform:translate(-50%,-50%) scale(0); transition:background-color .28s ease}
.s-meto-velo.hondo i{background:var(--vc,#D93030)}
.s-meto-det{position:fixed; inset:0; z-index:3; color:var(--mc,#FFFFFF); opacity:0; transition:opacity .3s ease}
.s-meto-det.ve{opacity:1}
.s-md-in{height:100%; max-width:1240px; margin:0 auto; padding:calc(70px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:12px; align-items:center}
.s-md-arte{height:100%; min-height:0; display:flex; align-items:center; justify-content:center}
.s-md-arte svg{display:block; width:100%; height:100%; max-height:42svh; overflow:visible}
.s-md-arte .k{font-family:var(--s-mano); fill:currentColor}
.s-md-txt{width:100%; max-width:34em; justify-self:center; text-align:left}
.s-md-txt > *{opacity:0; transform:translateX(22px); transition:opacity .4s ease, transform .65s cubic-bezier(.2,.8,.2,1)}
.s-meto-det.ve .s-md-txt > *{opacity:1; transform:none}
.s-meto-det.ve .s-md-e{opacity:.86}
.s-meto-det.ve .s-md-t{transition-delay:.07s} .s-meto-det.ve .s-md-d{transition-delay:.15s} .s-meto-det.ve .s-md-nav{transition-delay:.26s}
.s-md-e{margin:0; font-family:var(--s-sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.s-md-t{margin:4px 0 0; font-family:var(--s-mano); font-weight:700; font-size:44px; line-height:1.02}
.s-meto-det .s-md-t:focus, .s-meto-det .s-md-t:focus-visible{outline:none}   /* el título solo recibe el foco para que se lea al abrir */
.s-md-d{margin:10px 0 0; font-size:15.5px; line-height:1.55; display:grid}
.s-md-d > p{grid-area:1 / 1; margin:0; visibility:hidden}
.s-md-d > p.ya{visibility:visible}
.s-md-nav{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.s-md-b{display:inline-flex; align-items:center; gap:9px; min-height:48px; margin:0; padding:0 2px; border:0; background:none; font-family:var(--s-sans); font-weight:700; font-size:15px; letter-spacing:.01em; color:inherit; cursor:pointer}
.s-md-b svg{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-md-prev[disabled]{visibility:hidden}
.s-md-next{padding:0 20px 0 24px; background:var(--mc,#FFFFFF); color:var(--vc,#D93030); border-radius:22px 7px 19px 6px / 7px 19px 6px 22px; box-shadow:inset 0 -.2em 0 rgba(0,0,0,.14); transform:rotate(-1.4deg); transition:transform .25s ease}
.s-md-next:hover{transform:rotate(-.5deg) translateY(-2px)}
.s-meto-det .s-md-b:focus-visible, .s-meto-det .s-md-x:focus-visible{outline:2px solid var(--mc,#FFFFFF); outline-offset:4px; border-radius:12px}
.s-md-x{position:absolute; z-index:2; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; width:50px; height:50px; padding:4px; border:0; background:none; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center}
.s-md-x svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.s-md-x:hover svg{transform:rotate(10deg) scale(1.06)}
/* mientras estás adentro, el encabezado y la barra de contacto se hacen a un lado */
.s-hdr{transition:background-color .35s ease, box-shadow .3s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease, opacity .3s ease, transform .45s cubic-bezier(.3,.7,.2,1)}
.dock{transition:opacity .3s ease, transform .45s cubic-bezier(.3,.7,.2,1)}
html.s-meto-dentro .s-hdr{opacity:0; transform:translateY(-16px); pointer-events:none}
html.s-meto-dentro .dock{opacity:0; transform:translateY(16px); pointer-events:none}
@media (max-width:899px) and (max-height:700px){ .s-meto-sub{display:none} }
/* Celular de lado (pantalla baja y ancha): el cerebro a la izquierda y su paso a la derecha; adentro, dibujo y texto lado a lado */
@media (max-width:899px) and (max-height:600px) and (orientation:landscape){
  .s-meto{--bl:calc(100vh - var(--hdr) - var(--dock) - 72px); --bl:calc(100svh - var(--hdr) - var(--dock) - 72px)}
  .s-meto-in{padding:calc(var(--hdr) + 8px) 28px calc(var(--dock) + 8px); padding-bottom:calc(var(--dock) + 8px + 100vh - 100svh);
    grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 30px minmax(0,1fr) 22px; column-gap:32px; justify-items:start; text-align:left}
  .s-meto-head{grid-area:1 / 1 / 2 / 3; justify-self:center; text-align:center}
  .s-meto-eyebrow, .s-meto-sub{display:none}
  .s-meto-t{margin:0 0 8px; font-size:22px}
  .s-meto-cer{grid-area:2 / 1 / 5 / 2; height:var(--bl); width:calc(var(--bl) * .9862); aspect-ratio:auto}
  .s-meto-lema{grid-area:2 / 2; font-size:19px}
  .s-meto-pasos{grid-area:2 / 2 / 5 / 3; max-width:420px}
  .s-meto.rejilla .s-meto-pasos{grid-area:3 / 2; justify-items:start}
  .s-meto-pista{grid-area:4 / 2}
  .s-mp p{margin:6px 0 0}
  .s-mp-t{font-size:25px}
  .s-md-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:minmax(0,1fr); gap:24px; padding:14px 76px 14px 24px}
  .s-md-arte svg{max-height:100%}
  .s-md-t{font-size:34px}
  .s-md-d{margin-top:6px; font-size:14px; line-height:1.45}
  .s-md-nav{margin-top:10px}
  .s-md-x{top:10px; right:12px}
}
@media (min-width:900px){
  .s-meto{--dock:0px; --bh:min(560px, calc(100vh - var(--hdr) - 280px), calc((100vw - 600px) * 1.014)); --bw:calc(var(--bh) * .9862); --tw:min(272px, calc((100vw - var(--bw)) / 2 - 112px))}
  .s-meto-in{padding:calc(var(--hdr) + 22px) 40px 24px; grid-template-rows:auto minmax(0,1fr) auto; row-gap:16px}
  .s-meto-head{max-width:none}
  .s-meto-t{margin-top:8px; font-size:clamp(32px,3.1vw,44px)}
  .s-meto-sub{font-size:16.5px}
  .s-meto-escena{display:block; position:relative; grid-row:2; width:var(--bw); height:var(--bh)}
  .s-meto-cer{width:100%; height:100%}
  .s-meto-pasos{position:absolute; inset:0; display:block; max-width:none; pointer-events:none}
  .s-mp{position:absolute; width:var(--tw); pointer-events:auto}
  .s-mp[data-p="red"], .s-mp[data-p="green"]{right:calc(100% + 40px); text-align:right}
  .s-mp[data-p="yellow"], .s-mp[data-p="blue"]{left:calc(100% + 40px); text-align:left}
  .s-mp[data-p="red"]{top:12%} .s-mp[data-p="yellow"]{top:9%} .s-mp[data-p="blue"]{top:59%} .s-mp[data-p="green"]{top:63%}
  .s-mp-t{font-size:clamp(27px,2.3vw,34px)}
  .s-mp p{margin:11px 0 0; max-width:none; font-size:15.5px; line-height:1.5}
  .s-mp-flecha{display:block; position:absolute; left:0; top:0; width:0; height:0; overflow:visible}
  .s-meto-pie{display:flex; flex-direction:column; align-items:center; gap:4px; grid-row:3; padding-top:16px}
  .s-meto-lema{font-size:clamp(24px,2.1vw,30px)}
  .s-meto-pista{font-size:14px}
  .s-meto.inv-nota .s-meto-pista{font-size:21px}
  .s-meto.inv-nota .s-pista-fl{display:none}
  .s-meto.inv-nota .s-pista-largo{display:block; right:auto; left:calc(100% + 2px); bottom:4px; width:60px; height:136px; transform:none}
  .s-pista-fl path{stroke-width:2.6}
  .s-md-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:clamp(32px,5vw,80px); padding:88px clamp(40px,6vw,96px) 64px}
  .s-md-arte svg{max-height:min(78svh,700px)}
  .s-md-txt{justify-self:start}
  .s-md-e{font-size:13px}
  .s-md-t{margin-top:6px; font-size:clamp(52px,4.6vw,72px)}
  .s-md-d{margin-top:16px; font-size:clamp(17.5px,1.45vw,20.5px); line-height:1.6; max-width:30em}
  .s-md-nav{margin-top:34px; max-width:30em}
  .s-md-x{top:22px; right:26px; width:56px; height:56px}
}
@media (min-width:960px){ .s-meto{--hdr:86px} }

/* ---------- Servicios: tarjetas que se apilan sobre el azul del logo ----------
   Cada servicio es una tarjeta con el tono de una pieza; al bajar, la siguiente se acomoda encima.
   Al fondo corren, muy tenues, las palabras del Centro. */
.s-serv{position:relative; isolation:isolate; overflow:clip; background:var(--c-blue); color:#FFFFFF; --s-tr:#FBE4E1; --s-ty:#FDEFD3; --s-tb:#DEE8F1; --s-tg:#E1EBE1}
.s-serv-fondo{position:sticky; top:0; height:100vh; height:100svh; margin-bottom:-100vh; margin-bottom:-100svh; overflow:hidden; pointer-events:none; z-index:-1; display:flex; flex-direction:column; justify-content:space-evenly; padding-bottom:6vh}
/* palabras con relleno suave (sin contorno): así no hay triangulitos donde se cruzan las líneas de la letra */
.s-serv-cinta{white-space:nowrap; font-family:var(--s-sans); font-weight:800; font-size:clamp(84px,14vw,200px); line-height:1; letter-spacing:-.05em; color:rgba(255,255,255,.07); user-select:none}
.s-serv-cinta > div{display:inline-block; animation:sCinta 70s linear infinite}
.s-serv-cinta-b > div{animation-duration:90s; animation-direction:reverse}
.s-serv-cinta-b{color:rgba(255,255,255,.045)}
.s-serv-cinta-c > div{animation-duration:84s}
.s-serv-cinta-c{color:rgba(255,255,255,.06)}
@keyframes sCinta{to{transform:translateX(-50%)}}
.s-serv-in{position:relative; max-width:1280px; margin:0 auto; padding:80px 20px 96px}
.s-serv-t{margin:0; font-family:var(--s-sans); font-weight:750; font-size:clamp(34px,8.6vw,44px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance}
.s-serv-lede{margin:14px 0 0; max-width:30em; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.78)}
.s-pila{margin-top:40px; display:grid; gap:20px}
.s-carta{position:sticky; top:calc(84px + var(--i) * 12px); display:grid; grid-template-columns:minmax(0,1fr); border-radius:30px; background:var(--t); color:var(--h-ink); overflow:hidden; transform-origin:50% 0; box-shadow:0 -14px 36px -22px rgba(8,22,36,.55)}
.s-carta-txt{padding:26px 22px 24px; display:flex; flex-direction:column; gap:14px; min-width:0}
.s-carta-n{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--cc)}
.s-carta-n svg{width:24px; height:26px}
.s-carta h3{margin:0; font-family:var(--s-sans); font-weight:800; font-size:clamp(28px,7.4vw,46px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance}
.s-carta p{margin:0; font-size:16.5px; line-height:1.55; color:#4B5C61; max-width:40ch}
.s-carta .s-chips li{background:rgba(255,255,255,.72); color:var(--h-ink)}
.s-carta-pasos{margin:2px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; counter-reset:cp}
.s-carta-pasos li{counter-increment:cp; padding:10px 10px 9px; border-radius:16px; background:rgba(255,255,255,.6); font-size:12.5px; line-height:1.35; color:#4B5C61}
.s-carta-pasos li::before{content:counter(cp); display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-bottom:6px; border-radius:50%; background:var(--cc); color:#FFFFFF; font-weight:700; font-size:12px}
.s-carta-pasos b{display:block; color:var(--h-ink); font-size:13.5px}
/* en celular y en pantallas bajas, los pasos quedan solo con su nombre para que la tarjeta quepa */
@media (max-width:959px), (max-height:760px){ .s-carta-pasos span{display:none} .s-carta-pasos li{display:flex; align-items:center; gap:7px; padding:7px 9px} .s-carta-pasos li::before{margin:0; flex:none} .s-carta-pasos b{font-size:12.5px} }
.s-carta-cta{margin-top:auto; padding-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px}
.s-carta .s-btn-primary{background:var(--h-ink); font-weight:700}
.s-carta .s-btn-primary .s-arrow{color:var(--h-ink)}
.s-carta .s-link{font-size:14px; color:var(--h-ink); text-decoration-color:rgba(31,45,49,.35)}
.s-carta-foto{order:-1; position:relative; height:150px; margin:10px 10px 0; border-radius:22px 22px 22px 90px; overflow:hidden; background:rgba(255,255,255,.4)}
.s-carta-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op,50% 40%)}
.s-serv :focus-visible{outline-color:#FFFFFF}
.s-carta :focus-visible{outline-color:var(--h-ink)}
@media (min-width:600px){ .s-carta-txt{padding:30px 32px 28px} .s-carta-foto{height:220px} }
@media (min-width:960px){
  .s-serv-in{padding:128px clamp(40px,8.3vw,120px) 150px}
  .s-serv-head{max-width:760px}
  .s-serv-t{font-size:clamp(44px,4.4vw,64px)}
  .s-serv-lede{font-size:18px}
  .s-pila{margin-top:60px; gap:28px}
  .s-carta{top:calc(104px + var(--i) * 14px); grid-template-columns:1.12fr 1fr; height:min(560px, calc(100vh - 200px)); height:min(560px, calc(100svh - 200px)); min-height:460px}
  .s-carta-txt{padding:clamp(28px,4svh,46px) 44px clamp(26px,4svh,42px); gap:clamp(10px,1.8svh,16px)}
  .s-carta h3{font-size:clamp(32px,2.9vw,44px)}
  .s-carta p{font-size:17.5px}
  .s-carta-foto{order:0; height:auto; margin:14px; border-radius:24px 24px 160px 24px}
}

/* Quién te acompaña · «La carta»
   Arriba, en un papel, quien le recomendamos (con un post-it de lo que contestó); abajo, el resto del equipo
   en una fila que se desliza con el dedo o con las flechas. Sin animaciones: es la pausa de la página. */
.s-carta-eq{position:relative; margin-top:40px; display:grid; gap:6px; padding:12px 12px 22px; border-radius:5px;
  background:var(--s-grano), #FFFDF6; box-shadow:0 1px 2px rgba(60,40,15,.1), 0 30px 50px -34px rgba(70,50,20,.5)}
@media (min-width:900px){ .s-carta-eq{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:48px; padding:24px 60px 24px 24px} }
.s-ce-foto{position:relative; min-height:330px; overflow:hidden; border-radius:3px; background:var(--bg,var(--s-blush))}
@media (min-width:900px){ .s-ce-foto{min-height:470px} }
.s-ce-foto img{position:absolute; left:50%; bottom:0; height:94%; width:auto; max-width:none; transform:translateX(-50%); display:block}
.s-ini{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--s-serif); font-weight:400; font-size:clamp(64px,9vw,120px); letter-spacing:-.02em; color:rgba(31,42,36,.32)}
.s-ce-txt{min-width:0; display:flex; flex-direction:column; justify-content:center; padding:16px 8px 0}
@media (min-width:900px){ .s-ce-txt{padding:20px 0} }
.s-ce-mano{margin:0; max-width:19em; text-wrap:balance; font:700 18px/1.25 var(--s-mano); color:#B42323}
.s-ce-n{margin:10px 0 0; font-family:var(--s-serif); font-weight:400; font-size:clamp(36px,3.8vw,52px); line-height:1.02; letter-spacing:-.02em}
.s-ce-r{margin:8px 0 0; font-size:16px; color:var(--s-ink2)}
.s-ce-ced{margin:12px 0 0; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--s-ink)}
.s-ce-ced svg{width:17px; height:17px; flex:none; fill:none; stroke:var(--s-forest); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.s-ce-q{margin:20px 0 18px; max-width:30em; font:400 19px/1.38 var(--s-mano); color:var(--s-ink)}
@media (min-width:900px){ .s-ce-q{font-size:21px} .s-ce-mano{font-size:20px} }
.s-carta-eq .s-chips li{font-size:13px}
.s-ce-acc{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
.s-ce-lnk, .s-eq-a button{font:inherit; font-weight:600; background:none; border:0; padding:4px 0; cursor:pointer; color:var(--s-forest); display:inline-flex; align-items:center; gap:6px}
.s-ce-lnk{font-size:15.5px}
.s-ce-lnk svg, .s-eq-a svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-ce-lnk:hover, .s-eq-a button:hover{text-decoration:underline; text-underline-offset:4px}
.s-ce-postit{position:absolute; z-index:2; right:-6px; top:-16px; width:150px; margin:0; padding:11px 12px 13px; transform:rotate(3deg);
  background:var(--s-grano), linear-gradient(180deg, rgba(0,0,0,.05) 0 14%, transparent 14%), #FFE27E; color:#4A3900; font:400 14px/1.22 var(--s-mano); box-shadow:0 8px 12px -8px rgba(0,0,0,.45)}
.s-ce-postit b{display:block; margin-bottom:5px; font:800 9.5px/1 var(--s-sans); letter-spacing:.14em; text-transform:uppercase}
.s-ce-postit .s-link-plain{font-weight:700}
@media (min-width:900px){ .s-ce-postit{right:-16px; top:-22px; width:182px; padding:13px 14px 15px; font-size:15.5px} }

/* sin cuestionario: la invitación a la izquierda y los 9 en cuadritos a la derecha, nadie destacado */
.s-carta-eq.sin{grid-template-columns:minmax(0,1fr); align-items:center; gap:26px; padding:28px 22px 30px}
@media (min-width:900px){ .s-carta-eq.sin{grid-template-columns:minmax(0,1fr) auto; gap:56px; padding:44px 52px} }
.s-cs-txt{min-width:0}
/* el botón de contestar va en el amarillo del cerebro */
.s-carta-eq.sin .s-btn-primary{background:var(--c-yellow); color:#FFFFFF; font-weight:700; text-shadow:0 1px 1px rgba(120,70,0,.25)}
.s-carta-eq.sin .s-btn-primary:hover{background:#E89A06}
.s-carta-eq.sin .s-btn-primary .s-arrow{background:#FFFFFF; color:#D98A00}
.s-cs-t{margin:10px 0 0; max-width:16ch; font-family:var(--s-serif); font-weight:400; font-size:clamp(32px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; text-wrap:balance}
.s-cs-d{margin:16px 0 0; max-width:34em; font-size:16px; color:var(--s-ink2)}
.s-cuadros{list-style:none; margin:0; padding:10px 4px 4px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 12px; width:100%; max-width:360px; justify-self:center}
@media (min-width:900px){ .s-cuadros{grid-template-columns:repeat(3, 128px); gap:20px 16px; width:auto; max-width:none} }
.s-cuadros li{opacity:0; transform:translateY(-14px) scale(1.12) rotate(var(--r)); transition:opacity .35s ease, transform .55s cubic-bezier(.3,1.4,.5,1); transition-delay:calc(var(--i) * 140ms)}
.s-cuadros.ve li{opacity:1; transform:rotate(var(--r))}
.s-cuadro{position:relative; display:block; width:100%; padding:6px 6px 28px; border:0; background:#FFFFFF; font:inherit; color:inherit; cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.12), 0 10px 16px -12px rgba(0,0,0,.4); transition:transform .25s var(--ease-out), box-shadow .25s ease}
.s-cuadro::after{content:""; position:absolute; left:50%; top:-8px; width:40px; height:15px; transform:translateX(-50%) rotate(-3deg); background:rgba(255,226,126,.82)}
.s-cuadro-f{position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:var(--bg)}
.s-cuadro-f img{position:absolute; left:50%; top:5%; width:150%; height:auto; max-width:none; transform:translateX(-50%)}
.s-cuadro-f .s-ini{font-size:28px}
.s-cuadro-n{position:absolute; left:6px; right:6px; bottom:5px; font:400 14px/1.1 var(--s-mano); text-align:center; color:var(--s-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:899px){ .s-cuadro-n{font-size:13px} .s-cuadro-ap{display:none} }
@media (hover:hover) and (min-width:900px){
  .s-cuadro-n{opacity:0; transition:opacity .2s ease}
  .s-cuadro:hover .s-cuadro-n, .s-cuadro:focus-visible .s-cuadro-n{opacity:1}
  .s-cuadro:hover, .s-cuadro:focus-visible{z-index:2; transform:scale(1.05) rotate(calc(var(--r) * -1)); box-shadow:0 1px 1px rgba(0,0,0,.12), 0 18px 24px -14px rgba(0,0,0,.45)}
}
.s-cuadro:focus-visible{outline:2px solid var(--s-forest); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .s-cuadros li{opacity:1; transform:rotate(var(--r)); transition:none} .s-cuadro{transition:none} }

.s-equipo-bar{margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.s-eq-k{margin:0; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--s-ink2)}
.s-eq-fls{display:flex; gap:8px}
.s-eq-fl{width:44px; height:44px; border-radius:50%; border:1px solid var(--s-line2); background:transparent; color:var(--s-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, opacity .2s ease}
.s-eq-fl:hover:not(:disabled){border-color:var(--s-ink)}
.s-eq-fl:disabled{opacity:.32; cursor:default}
.s-eq-fl svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.s-eq-fila{list-style:none; margin:16px -20px 0; padding:2px 20px 10px; display:grid; grid-auto-flow:column; grid-auto-columns:min(300px, 84%); gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none}
.s-eq-fila::-webkit-scrollbar{display:none}
.s-eq-fila.mas-der{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 72px), transparent)}
@media (min-width:600px){ .s-eq-fila{margin-inline:-32px; padding-inline:32px; scroll-padding-inline:32px} }
@media (min-width:1200px){ .s-eq-fila{margin-inline:0; padding-inline:0; scroll-padding-inline:0; grid-auto-columns:calc((100% - 3 * 16px) / 3.6); gap:16px} }
.s-eq-fila > li{scroll-snap-align:start; display:flex; min-width:0}
.s-eq-o{flex:1; min-width:0; display:flex; align-items:center; gap:18px; padding:24px 20px 24px 18px; border-radius:16px; background:var(--s-paper); border:1px solid var(--s-line); font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease}
.s-eq-o:hover{border-color:var(--s-line2)}
.s-eq-o:focus-visible{outline:2px solid var(--s-forest); outline-offset:2px}
.s-eq-o[aria-pressed="true"]{border-color:var(--s-forest); box-shadow:inset 0 0 0 1px var(--s-forest); background:#FFFDF6}
.s-eq-o[aria-pressed="true"] .s-eq-ver{visibility:hidden}
.s-eq-t{display:flex; flex-direction:column}
.s-eq-ver{margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--s-forest)}
.s-eq-ver svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-eq-rec{margin-top:6px; font:700 15px/1.2 var(--s-mano); color:#B42323}
.s-carta-eq{scroll-margin-top:96px}
.s-eq-av{position:relative; flex:none; width:90px; height:90px; border-radius:50%; overflow:hidden; background:var(--bg,var(--s-blush))}
.s-eq-av img{position:absolute; left:50%; top:-9%; width:172%; height:auto; max-width:none; transform:translateX(-50%); display:block}
.s-eq-av .s-ini{font-size:26px; color:rgba(31,42,36,.45)}
.s-eq-t{min-width:0}
.s-eq-n{display:block; margin:0; font-family:var(--s-serif); font-size:20px; line-height:1.12}
.s-eq-r{display:block; margin:3px 0 0; font-size:13.5px; line-height:1.35; color:var(--s-ink2)}
.s-eq-a{margin-top:6px; display:flex; flex-wrap:wrap; gap:2px 16px}
.s-eq-a button{font-size:14px}
.s-eq-ayuda{scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; padding:14px 20px; border-radius:16px; background:var(--s-forest); color:var(--s-paper)}
.s-eq-ayuda .s-kicker{color:rgba(255,252,247,.72)}
.s-eq-ayuda .s-ayuda-t{margin:0; font-family:var(--s-serif); font-weight:400; font-size:22px; line-height:1.12; letter-spacing:-.015em}
.s-eq-ayuda .s-btn{min-height:38px; padding:0 16px; font-size:14px; margin-top:2px}
.s-perfil-arco .s-ini{font-size:96px}

/* Dónde estamos, dudas y cierre */
.s-donde{background:var(--s-paper); border-top:1px solid var(--s-line)}
.s-donde-in{display:grid; gap:32px}
@media (min-width:900px){ .s-donde-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center} }
.s-datos{margin:28px 0 0; display:grid; gap:14px}
@media (min-width:600px){ .s-datos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px} }
.s-datos dt{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--s-ink2)}
.s-datos dd{margin:3px 0 0; font-size:16px; overflow-wrap:anywhere}
.s-datos a{font-variant-numeric:tabular-nums; text-underline-offset:3px}
.s-mapa{position:relative; height:260px; border-radius:28px; overflow:hidden; background:#E9E1D2}
@media (min-width:900px){ .s-mapa{height:380px; border-radius:32px} }
.s-mapa-calles{position:absolute; inset:0; width:100%; height:100%}
.s-mapa-calles path{fill:none; stroke:var(--s-paper); stroke-width:16; stroke-linecap:round}
.s-mapa-calles path.fina{stroke-width:8}
.s-mapa-pin{position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:var(--s-forest); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 10px rgba(41,75,43,.14)}
.s-mapa-pin svg{width:24px; height:24px; fill:none; stroke:var(--s-paper); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.s-mapa-nota{position:absolute; left:16px; bottom:16px; padding:5px 12px; border-radius:999px; background:var(--s-paper); font-size:12.5px; font-weight:600; color:var(--s-ink2)}
.s-faq-in{margin-top:72px}
@media (min-width:900px){ .s-faq-in{margin-top:96px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start} .s-faq-in .s-h2{margin-top:0} }
.s-faq{margin-top:20px}
@media (min-width:900px){ .s-faq{margin-top:0} }
.s-faq details{border-bottom:1px solid var(--s-line)}
.s-faq details:first-child{border-top:1px solid var(--s-line)}
.s-faq summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:17px; font-weight:600}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:""; flex:none; width:22px; height:22px; background:linear-gradient(var(--s-ink),var(--s-ink)) center/14px 1.6px no-repeat, linear-gradient(var(--s-ink),var(--s-ink)) center/1.6px 14px no-repeat; transition:transform .3s ease}
.s-faq details[open] summary::after{transform:rotate(45deg)}
.s-faq details p{margin:0 0 18px; max-width:38em; color:var(--s-ink2)}
.s-cierre{position:relative; overflow:hidden; margin-top:72px; border-radius:30px; background:var(--s-forest); color:var(--s-paper); padding:36px 24px 30px; text-align:left}
@media (min-width:900px){ .s-cierre{margin-top:110px; border-radius:40px; padding:64px 72px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 48px; align-items:center} }
.s-cierre .s-h2{margin:0; color:var(--s-paper); font-size:clamp(34px,4vw,52px)}
.s-cierre .s-h2 em{display:inline; color:#F6E3BC}
.s-cierre > p{margin:12px 0 0; font-size:17px; color:rgba(255,252,247,.84)}
@media (min-width:900px){ .s-cierre > p{grid-column:1; margin:0} .s-cierre-actions{grid-column:2; grid-row:1/3} }
.s-cierre-actions{margin-top:24px; display:flex; flex-direction:column; gap:10px}
@media (min-width:900px){ .s-cierre-actions{margin-top:0; min-width:300px} }
.s-sprig-cierre{display:block; position:absolute; right:-10px; top:-14px; width:120px; height:160px; stroke:rgba(255,252,247,.22); stroke-width:1.3}
.s-crisis{margin-top:16px; display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:20px; border:1px solid #EBC9C2; background:var(--s-paper)}
.s-crisis p{margin:0; font-size:15px}
.s-crisis a{font-weight:700; font-variant-numeric:tabular-nums}
.s-crisis-dot{flex:none; width:10px; height:10px; margin-top:7px; border-radius:50%; background:var(--c-red); box-shadow:0 0 0 5px rgba(234,54,54,.15)}

/* Pie */
.s-ftr{background:var(--s-paper); border-top:1px solid var(--s-line)}
.s-ftr-in{padding-top:28px; padding-bottom:calc(32px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:12px; font-size:14px; color:var(--s-ink2)}
.s-ftr-brand{display:flex; align-items:center; gap:10px}
.s-ftr-brand svg{width:32px; height:33px}
.s-ftr-brand p{margin:0; font-weight:600; color:var(--s-ink)}
.s-ftr-links{display:flex; flex-wrap:wrap; gap:8px 22px}
.s-ftr-note{margin:0; font-size:13px}
@media (max-width:959px){ html.has-dock .s-ftr-in{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))} }

/* El sitio sube suave una sola vez mientras se desvanece el escenario */
.site.enter .rise{animation:rise .9s var(--ease-out) both; animation-delay:calc(var(--k,0) * 110ms + 460ms)}
@keyframes rise{from{opacity:0; transform:translateY(16px)}}

/* Barra fija en celular: agendar y WhatsApp */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:30; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(20,37,42,.08); display:flex; gap:10px}
.dock .s-btn{flex:1}
.s-dock-wa{flex:none; width:52px; height:52px; border-radius:50%; border:1px solid var(--s-ink); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer}
.s-dock-wa svg{width:22px; height:22px; fill:none; stroke:var(--s-ink); stroke-width:1.7; stroke-linejoin:round}
@media (min-width:960px){ .dock{display:none !important} }

/* ---------- Ventana para agendar (3 pasos) ---------- */
html.s-noscroll, html.s-noscroll body{overflow:hidden}
.s-modal, .s-drawer{position:fixed; inset:0; z-index:50}
.s-modal-bg, .s-drawer-bg{position:absolute; inset:0; background:rgba(28,40,32,.6); opacity:0; transition:opacity .35s ease}
.s-modal.open .s-modal-bg, .s-drawer.open .s-drawer-bg{opacity:1}
.s-modal-panel{position:absolute; inset:0; background:var(--s-paper); overflow:hidden; display:flex; flex-direction:column; opacity:0; transform:translateY(24px); transition:opacity .35s ease, transform .45s var(--ease-out); outline:none}
.s-modal.open .s-modal-panel{opacity:1; transform:none}
@media (min-width:900px){
  .s-modal-panel{inset:auto; left:50%; top:50%; width:min(1140px, calc(100vw - 48px)); height:min(812px, calc(100svh - 48px)); border-radius:32px; transform:translate(-50%,calc(-50% + 24px)); box-shadow:0 40px 90px -40px rgba(0,0,0,.5)}
  .s-modal.open .s-modal-panel{transform:translate(-50%,-50%)}
}
.s-steps{list-style:none; margin:0; padding:18px 70px 14px 20px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; flex:none; background:var(--s-paper); border-bottom:1px solid var(--s-line)}
.s-steps li{display:flex; align-items:center; gap:7px; color:#8A938C; white-space:nowrap}
.s-steps li span{width:26px; height:26px; border-radius:50%; border:1px solid #CFC2AC; display:flex; align-items:center; justify-content:center; font-family:var(--s-serif); font-size:14px}
.s-steps li.on{color:var(--s-ink)}
.s-steps li.on span{background:var(--s-forest); border-color:var(--s-forest); color:var(--s-paper)}
.s-steps li.done span{border-color:var(--s-forest); color:var(--s-forest)}
.s-steps .s-steps-line{flex:1; max-width:40px; min-width:10px; height:1px; background:#DCCFBB}
/* el paso activo se subraya con marcatextos, de izquierda a derecha */
.s-steps em{position:relative; z-index:0; font-style:normal; padding:0 .12em}
.s-steps em::before{content:""; position:absolute; z-index:-1; left:-.32em; right:-.4em; top:.02em; bottom:-.14em; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010%20C%2042%205,%20118%208,%20196%204%20C%20199%2014,%20197%2027,%20195%2034%20C%20128%2037,%2062%2033,%206%2037%20C%202%2029,%203%2018,%204%2010%20Z'%20fill='%23FFD84A'%20fill-opacity='.78'/%3E%3Cpath%20d='M8%2014%20C%2060%2011,%20140%2013,%20192%2010%20C%20193%2018,%20192%2024,%20191%2029%20C%20140%2031,%2060%2029,%209%2031%20Z'%20fill='%23FFD84A'%20fill-opacity='.35'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mix-blend-mode:multiply; transform:rotate(-1.2deg); clip-path:inset(0 100% 0 0); transition:clip-path .75s cubic-bezier(.55,0,.3,1)}
.s-steps li.s-m em::before{clip-path:inset(0 0 0 0)}
.s-steps li[data-s="2"] em::before{transform:rotate(.8deg)}
@media (prefers-reduced-motion:reduce){ .s-steps em::before{transition:none} }
@media (max-width:420px){ .s-steps li:not(.on):not(.s-steps-line){font-size:0; gap:0} }
@media (min-width:900px){
  /* franja fija arriba: el contenido se desplaza por debajo sin encimarse */
  .s-steps{position:absolute; left:0; right:0; top:0; z-index:2; padding:28px 46px 18px; gap:14px; font-size:14px; background:var(--s-paper); border:0}
  .s-modal-panel[data-paso="1"] .s-steps{right:420px}
  .s-steps li span{width:30px; height:30px; font-size:15px}
  .s-steps .s-steps-line{width:40px; flex:none}
}
.s-x{position:absolute; right:14px; top:12px; z-index:3; width:44px; height:44px; border:0; border-radius:50%; background:var(--s-sand); display:flex; align-items:center; justify-content:center; cursor:pointer}
.s-x svg{width:20px; height:20px; fill:none; stroke:var(--s-ink); stroke-width:1.8; stroke-linecap:round}
@media (min-width:900px){ .s-x{right:20px; top:20px} }
.s-paso{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}

/* Paso 1: tu resultado (estilos en «Tu resultado hecho a mano», al final) */

/* Paso 2: día y hora */
.s-paso2{display:flex; flex-direction:column}
.s-p2-head{padding:22px 20px 0}
@media (min-width:900px){ .s-p2-head{padding:88px 46px 0} }
.s-p2-t{margin:0; font-family:var(--s-serif); font-weight:400; font-size:clamp(30px,3vw,40px); line-height:1.05; letter-spacing:-.02em; outline:none}
.s-p2-t em{color:var(--s-forest)}
.s-p2-sub{margin:8px 0 0; font-size:15px; color:var(--s-ink2)}
.s-p2-sub .s-link-plain{margin-left:6px; font-weight:600; color:var(--s-forest)}
.s-p2-body{padding:20px 20px 28px; display:grid; gap:24px}
@media (min-width:900px){ .s-p2-body{grid-template-columns:minmax(0,1fr) 380px; gap:40px; padding:24px 46px 34px; align-items:start} }
.s-seg{display:inline-flex; padding:4px; border-radius:999px; background:var(--s-sand); gap:4px; max-width:100%}
.s-seg button{font:inherit; font-size:14px; font-weight:600; border:0; border-radius:999px; padding:9px 16px; background:transparent; color:var(--s-ink2); cursor:pointer; white-space:nowrap}
.s-seg button[aria-pressed="true"]{background:var(--s-paper); color:var(--s-ink); box-shadow:0 2px 8px -3px rgba(70,50,20,.3)}
.s-field{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--s-ink2)}
.s-field input, .s-field select{font:inherit; font-size:16px; font-weight:400; color:var(--s-ink); background:var(--s-paper); border:1px solid var(--s-line2); border-radius:14px; padding:12px 14px; min-height:50px; width:100%}
.s-field input:focus, .s-field select:focus{outline:2px solid var(--s-forest); outline-offset:1px; border-color:transparent}
.s-field-inline{margin-top:16px; max-width:360px}
.s-p2-head .s-field-inline{margin-top:12px}
.s-cal{margin-top:20px; border-radius:24px; border:1px solid var(--s-line); background:var(--s-cream); padding:16px}
.s-cal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.s-cal-head p{margin:0; font-family:var(--s-serif); font-size:20px; text-transform:capitalize}
.s-cal-nav{width:40px; height:40px; border-radius:50%; border:1px solid var(--s-line2); background:var(--s-paper); display:flex; align-items:center; justify-content:center; cursor:pointer}
.s-cal-nav:disabled{opacity:.35; cursor:default}
.s-cal-nav svg{width:18px; height:18px; fill:none; stroke:var(--s-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.s-cal-dow, .s-cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center}
.s-cal-dow{margin-top:12px; font-size:12px; font-weight:700; color:var(--s-ink3)}
.s-cal-grid{margin-top:6px}
.s-cal-grid button, .s-cal-grid span{height:42px; border-radius:12px; font:inherit; font-size:15px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.s-cal-grid button{border:0; background:var(--s-paper); color:var(--s-ink); cursor:pointer; font-weight:600}
.s-cal-grid button:hover{outline:1px solid var(--s-forest)}
.s-cal-grid button:disabled{background:transparent; color:#B8B0A2; font-weight:400; cursor:default; outline:0; text-decoration:line-through; text-decoration-color:rgba(184,176,162,.6)}
.s-cal-grid button.hoy{box-shadow:inset 0 0 0 1.5px var(--s-line2)}
.s-cal-grid button[aria-pressed="true"]{background:var(--s-forest); color:var(--s-paper)}
#slotsT{margin-top:20px}
.s-p2-back{display:none; align-self:flex-start; font-size:14px; font-weight:600; color:var(--s-forest); text-decoration:none; margin-bottom:2px}
.s-slots{margin-top:10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.s-slots button{font:inherit; font-size:15px; font-weight:600; height:46px; border-radius:12px; border:1px solid var(--s-line2); background:var(--s-paper); color:var(--s-ink); cursor:pointer; font-variant-numeric:tabular-nums}
.s-slots button:disabled{opacity:.4; cursor:default; text-decoration:line-through}
.s-slots button[aria-pressed="true"]{background:var(--s-forest); border-color:var(--s-forest); color:var(--s-paper)}
.s-p2-form{display:flex; flex-direction:column; gap:12px}
@media (min-width:900px){ .s-p2-form{position:sticky; top:0; padding:22px; border-radius:24px; background:var(--s-cream); border:1px solid var(--s-line)} }
.s-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--s-ink2); cursor:pointer}
.s-check input{width:20px; height:20px; margin:0; accent-color:var(--s-forest); flex:none}
.s-resumen{margin-top:4px; padding:14px 16px; border-radius:16px; background:var(--s-paper); border:1px solid var(--s-line)}
.s-resumen p{margin:0}
.s-resumen-s{font-family:var(--s-serif); font-size:18px}
.s-resumen-w{margin-top:2px !important; font-size:14px; color:var(--s-ink2)}
.s-p2-falta{margin:-4px 0 0; text-align:center; font-size:13px; color:var(--s-ink3)}
.s-p2-bar{display:none}
@media (max-width:899px){
  /* en celular los datos van en un paso aparte, con el botón fijo abajo */
  .s-paso2[data-sub="a"] .s-p2-form{display:none}
  .s-paso2[data-sub="b"] .s-p2-cal{display:none}
  .s-paso2[data-sub="b"] .s-p2-back{display:inline-block}
  .s-paso2[data-sub="a"] .s-p2-bar{display:block; position:sticky; bottom:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(255,252,247,.96); border-top:1px solid var(--s-line)}
}

/* Paso 3: listo */
.s-paso3{display:flex; align-items:flex-start; justify-content:center}
.s-p3-in{width:100%; max-width:620px; padding:28px 20px 34px; display:flex; flex-direction:column; align-items:center; text-align:center}
@media (min-width:900px){ .s-p3-in{padding:100px 24px 40px} }
.s-p3-check{width:64px; height:64px; border-radius:50%; background:var(--s-forest); display:flex; align-items:center; justify-content:center}
.s-p3-check svg{width:30px; height:30px; fill:none; stroke:var(--s-paper); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.s-p3-t{margin:20px 0 0; font-family:var(--s-serif); font-weight:400; font-size:clamp(32px,3.4vw,44px); line-height:1.05; letter-spacing:-.02em; outline:none}
.s-p3-t em{color:var(--s-forest)}
.s-p3-lede{margin:12px 0 0; max-width:30em; font-size:16px; color:var(--s-ink2)}
.s-p3-dl{width:100%; margin:24px 0 0; padding:6px 20px; border-radius:22px; background:var(--s-cream); border:1px solid var(--s-line); text-align:left}
.s-p3-dl div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--s-line)}
.s-p3-dl div:last-child{border-bottom:0}
.s-p3-dl dt{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--s-ink2); padding-top:2px}
.s-p3-dl dd{margin:0; font-weight:600}
.s-p3-actions{margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%}
.s-p3-actions .s-btn{flex:1 1 220px}
.s-p3-small{margin:14px 0 0; font-size:14px; color:var(--s-ink2)}
.s-proto{margin:16px 0 0; padding:10px 14px; border-radius:12px; border:1px dashed var(--s-line2); font-size:13px; color:var(--s-ink3)}

/* ---------- Perfil (panel lateral) ---------- */
.s-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:100%; background:var(--s-paper); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s var(--ease-out); outline:none}
@media (min-width:640px){ .s-drawer-panel{width:min(520px, 100vw - 40px); border-radius:28px 0 0 28px; box-shadow:-30px 0 80px -40px rgba(0,0,0,.45)} }
.s-drawer.open .s-drawer-panel{transform:none}
.s-drawer-top{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 24px; border-bottom:1px solid var(--s-line)}
.s-drawer-top .s-x{position:static}
.s-drawer-body{flex:1; min-height:0; overflow-y:auto; padding:20px 24px 28px}
.s-perfil-arco{position:relative; height:300px; border-radius:180px 180px 22px 22px; overflow:hidden; background:var(--bg,var(--s-blush))}
.s-perfil-arco img{position:absolute; left:50%; bottom:0; height:93%; width:auto; max-width:none; transform:translateX(-50%)}
.s-perfil-video{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border-radius:999px; background:var(--s-paper); font-size:13px; font-weight:600}
.s-perfil-video span{width:28px; height:28px; border-radius:50%; background:var(--s-sand); display:flex; align-items:center; justify-content:center}
.s-perfil-video svg{width:11px; height:11px; fill:var(--s-ink2)}
.s-perfil-arco.con-video{height:380px}
.s-perfil-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block}
button.s-perfil-video{border:0; font:inherit; font-size:13px; font-weight:600; color:var(--s-ink); cursor:pointer}
button.s-perfil-video b{font-weight:600}
button.s-perfil-video span{background:var(--s-forest)} button.s-perfil-video svg{fill:var(--s-paper)}
button.s-perfil-video:not(.pausado) svg{display:none}
button.s-perfil-video:not(.pausado) span::before{content:""; width:9px; height:10px; border-left:3px solid var(--s-paper); border-right:3px solid var(--s-paper); box-sizing:border-box}
.s-perfil-n{margin:22px 0 0; font-family:var(--s-serif); font-weight:400; font-size:36px; line-height:1.05; letter-spacing:-.02em}
.s-perfil-r{margin:6px 0 0; font-size:16px; color:var(--s-ink2)}
.s-perfil-ced{margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:14px; font-weight:600}
.s-perfil-ced svg{width:17px; height:17px; fill:none; stroke:var(--s-forest); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.s-perfil-ced a{font-weight:500; color:var(--s-forest); text-underline-offset:3px}
.s-perfil-sec{margin-top:24px}
.s-perfil-sec ul{margin:10px 0 0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:15.5px; color:#3E4A43}
.s-perfil-sec li::marker{color:var(--s-line2)}
.s-perfil-sec blockquote{margin:10px 0 0; font-family:var(--s-serif); font-style:italic; font-size:21px; line-height:1.4}
.s-perfil-sec p{margin:10px 0 0; font-size:15.5px; color:var(--s-ink2)}
.s-drawer-actions{padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--s-line); display:flex; gap:10px}
.s-drawer-actions .s-btn-arrow{flex:1}
@media (max-width:479px){ .s-drawer-actions .s-wa-t{display:none} .s-drawer-actions .s-btn-line{padding:0 16px} }

/* Hoja del mensaje de WhatsApp con los colores del sitio */
.sheet{font-family:var(--s-sans)}
.sheet-panel{background:var(--s-paper)}
.sheet h2{font-family:var(--s-serif); font-weight:400; font-size:26px}
.sheet .btn-primary{background:var(--s-forest)}
.sheet .btn-primary:hover{background:var(--s-forest2)}
.sheet textarea{background:#FFFFFF; border-color:var(--s-line2)}

@media (prefers-reduced-motion: reduce){
  .s-fondo-v{transition:none}
  .s-scroll svg{animation:none}
  .s-serv-cinta > div{animation:none !important}
  /* Cómo trabajamos sin movimiento: el cerebro ya completo, sin quedarse fijo; cada pieza se abre sin acercamiento */
  .s-meto{height:auto}
  .s-meto-pin{position:relative; height:auto; min-height:100vh; min-height:100svh}
  .s-meto-det, .s-md-txt > *, .s-meto-head, .s-meto-pasos, .s-meto-lema, .s-meto-pista, .m-hov, .s-md-next, .s-md-x svg, .s-hdr, .dock{transition:none !important}
}

/* Cómo trabajamos sin movimiento, en celular: el cerebro completo y los cuatro pasos en lista */
@media (prefers-reduced-motion: reduce) and (max-width:899px){
  .s-meto-in{height:auto; grid-template-rows:auto auto auto auto auto; row-gap:14px; padding-bottom:calc(var(--dock) + 28px)}
  .s-meto-cer{height:min(calc((100vw - 40px) * 1.014), 380px)}
  .s-meto-pasos{grid-area:3 / 1; gap:20px; align-self:start}
  .s-mp{grid-area:auto}
  .s-meto-lema{grid-area:4 / 1; margin-top:6px}
  .s-meto-pista{grid-area:5 / 1}
}

/* Títulos con la tipografía de display */
.welcome, .q, .arrive-text{font-family:var(--f-display); font-variation-settings:var(--display-vs); letter-spacing:var(--display-track)}
.welcome, .q, .arrive-text{font-weight:var(--w-display)}
.welcome .wd.strong{font-weight:var(--w-strong)}

/* Tipografía del cuestionario (preguntas y «Estás en el espacio correcto»): Plus Jakarta Sans, firme y limpia.
   Solo cambia estas pantallas; la principal y la bienvenida siguen en Urbanist. */
.scr-ask, .scr-arrive{font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; font-weight:450; word-spacing:.05em}
.scr-ask .q, .scr-arrive .arrive-text{font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; font-weight:560; letter-spacing:-.02em; font-variation-settings:normal}
.scr-ask .q{font-size:clamp(26px,6.6vw,38px)}
.scr-ask .opt{font-size:16.5px; font-weight:450}
.scr-ask .hint{font-size:15.5px}

/* ==========================================================
   Tu resultado hecho a mano: post-its en la portada, la nota que se vuelve carta y el paso 1 como carta.
   ========================================================== */
.s-vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* --- post-its de la portada --- */
.s-notas{container-type:inline-size; position:relative; width:100%; max-width:390px; display:flex; flex-direction:column; color:var(--h-ink)}
.s-pi{position:relative; transform:rotate(var(--r,0deg)); transform-origin:50% 6%}
.s-pi::after{content:""; position:absolute; z-index:-1; right:7%; bottom:5%; width:72%; height:14%; box-shadow:0 1.9cqw 2.6cqw rgba(0,0,0,.42); transform:rotate(3deg) skewX(8deg)}
.s-pi-hoja{position:relative; width:100%; aspect-ratio:1/.92; padding:9.2cqw 5.6cqw 6cqw; color:var(--h-ink); transform-origin:50% 0;
  background:var(--s-grano), linear-gradient(180deg, rgba(0,0,0,.05) 0 var(--g,13%), transparent var(--g,13%) 100%), linear-gradient(140deg, transparent 72%, rgba(0,0,0,.07) 100%), var(--c);
  box-shadow:0 1px 1px rgba(0,0,0,.18)}
.s-pi-hoja::before{content:""; position:absolute; right:0; bottom:0; width:0; height:0; border-top-left-radius:2.4cqw; background:linear-gradient(135deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.16) 50%, rgba(255,255,255,.75) 53%, rgba(255,255,255,.25) 100%); transition:width .3s ease, height .3s ease}
.s-pi-a{width:44%; z-index:1; --c:#FFB7AA}
.s-pi-m{width:77%; margin:-15cqw 0 0 21%; z-index:4; --c:#FFD94F}
.s-pi-m .s-pi-hoja{aspect-ratio:1/1; padding:11.6cqw 7cqw 5cqw; --g:10.5%}
.s-pi-b{width:48%; margin:-6.5cqw 0 0 1%; z-index:3; --c:#C9DFEE}
.s-pi-txt{margin:0; font-family:var(--s-mano); font-size:calc(5.3cqw * var(--s-mano-k, 1)); line-height:1.18; text-wrap:balance}
.s-pi-a .s-pi-hoja{padding-inline:4.6cqw 4cqw}
.s-pi-a .s-pi-txt{font-size:calc(5cqw * var(--s-mano-k, 1)); line-height:1.14}
.s-pi-b .s-pi-txt{font-size:calc(5cqw * var(--s-mano-k, 1))}
.s-pi-sug{margin:0; font-family:var(--s-mano); font-size:calc(4.8cqw * var(--s-mano-k, 1)); line-height:1.14; color:var(--h-ink2)}
.s-pi-serv{margin:1.8cqw 0 0; font-family:var(--s-plumon); font-weight:var(--s-plumon-w, 400); font-style:var(--s-plumon-st, normal); font-size:calc(var(--sf,9.4cqw) * var(--s-plumon-k, 1)); line-height:1.08; letter-spacing:.01em; color:var(--h-ink); overflow-wrap:break-word}
.s-pi-raya{display:block; width:84%; height:4.6cqw; margin-top:1cqw; overflow:visible}
.s-pi-raya path{fill:none; stroke:var(--c-red); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.s-pi-tags{list-style:none; margin:2.6cqw 0 0; padding:0; display:flex; flex-wrap:wrap; font-family:var(--s-mano); font-size:calc(4.7cqw * var(--s-mano-k, 1)); line-height:1.25; color:var(--h-ink2)}
.s-pi-tags li + li::before{content:"·"; margin:0 .35em}
.s-notas-acc{position:relative; z-index:5; margin-top:-9cqw; display:flex; flex-direction:column; align-items:flex-end; gap:2.4cqw}
.s-dymo{display:inline-flex; align-items:center; gap:.75em; border:0; padding:.85em 1.3em .85em 1.45em; background:#E33A3A; color:#FFFFFF; font-family:var(--s-sans); font-weight:800; font-size:14px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; text-align:left; cursor:pointer;
  border-radius:22px 7px 19px 6px / 7px 19px 6px 22px; box-shadow:inset 0 -.22em 0 rgba(120,10,10,.35), inset 0 .12em 0 rgba(255,255,255,.18); transform:rotate(-1.6deg);
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); transition:transform .25s ease, background-color .2s ease}
.s-dymo svg{flex:none; width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease-out)}
.s-dymo:hover{transform:rotate(-.6deg) translateY(-2px)}
.s-dymo:hover svg{transform:translateX(3px)}
.site .s-dymo:focus-visible, .s-modal .s-dymo:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px; background:#C42B2B}
.s-modal .s-dymo:focus-visible{outline-color:var(--h-ink)}
.s-notas .s-dymo{font-size:3.5cqw}
.s-pi-wa{border:0; background:none; padding:0; color:#FFFFFF; font-family:var(--s-mano); font-size:calc(5cqw * var(--s-mano-k, 1)); line-height:1.1; cursor:pointer}
.s-pi-wa svg{display:block; width:100%; height:.5em; overflow:visible}
.s-pi-wa path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.s-pi-urg{margin-top:5cqw; border:0; border-radius:3px; background:#FFFFFF; box-shadow:0 10px 18px -10px rgba(0,0,0,.5); transform:rotate(-1deg); font-size:13.5px}
.s-pi-alt{margin:4cqw 0 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.88); text-align:right}
.s-pi-alt .s-link-plain{color:#FFFFFF; font-weight:700; text-decoration:underline; text-underline-offset:4px}
.s-hero .s-notas :focus-visible{outline-color:#FFFFFF}
/* que se muevan un poquito: se pegan al llegar, se mecen como con aire y el grande se levanta al pasar */
.site.enter .s-pi{animation:sPega .75s cubic-bezier(.3,1.35,.5,1) both; animation-delay:calc(var(--k,0) * 160ms + 760ms)}
.site.enter .s-notas-acc{animation:rise .8s var(--ease-out) both; animation-delay:1.3s}
@keyframes sPega{from{opacity:0; transform:rotate(calc(var(--r,0deg) + 9deg)) translateY(-22px) scale(1.08)} to{opacity:1; transform:rotate(var(--r,0deg))}}
.s-pi .s-pi-hoja{animation:sMece 5.6s ease-in-out infinite alternate}
.s-pi-m .s-pi-hoja{animation-duration:7.2s; animation-delay:-2s}
.s-pi-b .s-pi-hoja{animation-duration:6.3s; animation-delay:-4s}
@keyframes sMece{0%{rotate:-.8deg} 100%{rotate:1deg}}
.s-pi-m{transition:translate .35s cubic-bezier(.3,1.4,.5,1)}
.s-notas:hover .s-pi-m{translate:0 -4px}
.s-notas:hover .s-pi-m .s-pi-hoja::before{width:9cqw; height:9cqw}
.s-pi.s-pi-fuera{visibility:hidden}
@media (min-width:600px){ .s-notas{max-width:400px} }
@media (min-width:960px){ .s-notas{flex:none; width:clamp(300px, calc((100svh - 190px) * .66), 400px); max-width:none} }

/* --- la nota que se vuelve carta --- */
.s-vuelo{position:fixed; inset:0; z-index:70; pointer-events:none}
.s-vuelo-c{position:absolute; container-type:inline-size}
.s-vuelo-c .s-pi{position:absolute; top:0; margin:0}
.s-vuelo-c .s-pi-hoja{animation:none}
.s-vc{position:absolute; perspective:2200px}
.s-vc{transform-origin:0 0}
.s-vc > i{position:absolute; display:block; background:var(--s-grano), var(--sh, none), #F8F1E3; -webkit-backface-visibility:visible; backface-visibility:visible}
.s-vc .c{left:33.333%; top:33.333%; width:33.334%; height:33.334%; box-shadow:0 18px 36px -16px rgba(0,0,0,.4)}
.s-vc .l, .s-vc .r{top:33.333%; width:33.334%; height:33.334%; background-color:#E8DCC3}
.s-vc .l{left:0; transform-origin:100% 50%; transform:rotateY(179.5deg); --sh:linear-gradient(90deg, transparent 70%, rgba(110,85,50,.1))}
.s-vc .r{left:66.666%; transform-origin:0 50%; transform:rotateY(-179.5deg); --sh:linear-gradient(270deg, transparent 70%, rgba(110,85,50,.1))}
.s-vc .t, .s-vc .b{left:0; width:100%; height:33.334%; opacity:0; background-color:#E8DCC3}
.s-vc .t{top:0; transform-origin:50% 100%; transform:rotateX(-179.5deg); border-radius:var(--vr) var(--vr) 0 0; --sh:linear-gradient(180deg, transparent 70%, rgba(110,85,50,.1))}
.s-vc .b{top:66.666%; transform-origin:50% 0; transform:rotateX(179.5deg); border-radius:0 0 var(--vr) var(--vr); --sh:linear-gradient(0deg, transparent 70%, rgba(110,85,50,.1))}
.s-vc .s-vuelo-calco{position:absolute; z-index:5}
.s-vc2{position:absolute; perspective:1700px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.s-vc2 > div{position:absolute; transform-style:preserve-3d; opacity:0}
.s-vc2 > .m{left:0; top:33.333%; width:100%; height:33.334%; z-index:1}
.s-vc2 > .b{left:0; top:66.666%; width:100%; height:33.334%; z-index:2; transform-origin:50% 0; transform:rotateX(179.5deg)}
.s-vc2 > .t{left:0; top:0; width:100%; height:33.334%; z-index:3; transform-origin:50% 100%; transform:rotateX(-179.5deg)}
.s-vc2 > .l{left:0; top:33.333%; width:50%; height:33.334%; z-index:4}
.s-vc2 > .r{left:50%; top:33.333%; width:50%; height:33.334%; z-index:5; transform-origin:0 50%; transform:rotateY(-179.5deg)}
.s-vc2 > div > i{position:absolute; inset:0; display:block; -webkit-backface-visibility:hidden; backface-visibility:hidden; background-blend-mode:multiply}
.s-vc2 > div > .f{background:var(--s-papel-foto, var(--s-papel)), #FBF6EC; background-size:1220px auto; background-blend-mode:multiply}
.s-vc2 > .t > .f{background-position:0 0}
.s-vc2 > .m > .f{background-position:0 calc(var(--ph) / -3)}
.s-vc2 > .b > .f{background-position:0 calc(var(--ph) * -2 / 3)}
.s-vc2 > div > .k{transform:rotateX(180deg); background:var(--s-papel-foto, var(--s-papel)), #EADFC8; background-size:1220px auto; background-blend-mode:multiply}
.s-vc2 > .l > .k, .s-vc2 > .r > .k{transform:rotateY(180deg)}
.s-vc2 > .l > .k{transform:none; box-shadow:inset -1px 0 0 rgba(120,95,55,.14)}
.s-vc2 > .r > .k0{transform:none}
.s-vc2 .s-vuelo-calco{position:absolute; z-index:6}
.s-vc2 > div > .f{overflow:hidden}
.s-copia{pointer-events:none}
.s-copia .s-hoja, .s-copia .s-p1-pinota, .s-copia .s-calco{visibility:hidden}
.s-vuelo-pi{position:absolute !important; margin:0 !important; z-index:3}
.s-vuelo-calco{position:absolute; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.s-vuelo-calco svg{display:block; width:100%; height:auto}
.s-vuelo-onda{position:absolute; border-radius:47% 53% 50% 50%/52% 48% 52% 48%; border:2px solid #FFFFFF; opacity:0}
.s-modal.s-armando .s-modal-panel{visibility:hidden; transition:none !important}

/* --- paso 1: la carta --- */
.s-modal-panel[data-paso="1"]{
  /* la carta: papel crema (textura de la biblioteca) */
  background:var(--s-papel-foto, var(--s-papel)) 0 0 / 1220px auto, #FBF6EC; background-blend-mode:multiply}
.s-hoja{display:none}
@media (min-width:900px){
  /* en escritorio la hoja va en su propia capa: cortada a mano, con el filo apenas gastado y su sombra */
  .s-modal-panel[data-paso="1"]{background:transparent; box-shadow:none; border-radius:0; overflow:visible}
  .s-modal-panel[data-paso="1"] .s-hoja{display:block; position:absolute; inset:0; z-index:0; pointer-events:none; box-shadow:0 26px 30px rgba(0,0,0,.45)}
  .s-hoja i{position:absolute; inset:0; background:var(--s-papel-foto, var(--s-papel)) 0 0 / 1220px auto, #FBF6EC; background-blend-mode:multiply; -webkit-mask:var(--s-filo, none) 0 0 / 100% 100% no-repeat; mask:var(--s-filo, none) 0 0 / 100% 100% no-repeat}
  .s-modal-panel[data-paso="1"] > .s-paso{position:relative; z-index:1}
}
.s-modal-panel[data-paso="1"] .s-steps{background:transparent}
@media (min-width:900px){ .s-p1-main{-webkit-mask-image:linear-gradient(transparent 64px, #000 98px); mask-image:linear-gradient(transparent 64px, #000 98px)} }
.s-paso1{display:flex; flex-direction:column}
@media (min-width:900px){ .s-paso1{display:grid; grid-template-columns:minmax(0,1fr) 420px; overflow:hidden} }
.s-p1-main{padding:22px 20px 26px; display:flex; flex-direction:column}
@media (min-width:900px){ .s-p1-main{overflow-y:auto; padding:100px 40px 30px 56px} }
.s-p1-hola{display:flex; align-items:center; gap:12px}
.s-calco{flex:none; width:50px; transform:rotate(-8deg); filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
.s-calco svg{display:block; width:100%; height:auto}
.s-p1-mano{margin:0; font-family:var(--s-mano); font-size:calc(24px * var(--s-mano-k, 1)); line-height:1.1; color:#C42B2B; transform:rotate(-1.5deg)}
.s-p1-pis{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:14px; max-width:640px}
.s-p1-pis li{position:relative; min-height:92px; padding:22px 14px 14px; font-family:var(--s-mano); font-size:calc(16.5px * var(--s-mano-k, 1)); line-height:1.2; color:var(--h-ink); transform:rotate(var(--r,0deg));
  background:var(--s-grano), linear-gradient(180deg, rgba(0,0,0,.05) 0 14%, transparent 14%), var(--c); box-shadow:0 1px 1px rgba(0,0,0,.15), 0 12px 14px -10px rgba(0,0,0,.35)}
.s-p1-pis li.s-p1-pi-invita{grid-column:1 / -1; max-width:360px; min-height:0; font-size:calc(17.5px * var(--s-mano-k, 1))}
.s-p1-pi-invita .s-link-plain{font:inherit; color:var(--c-blue); text-decoration:underline; text-underline-offset:3px; background:none; border:0; padding:0; cursor:pointer}
.s-p1-bloque{margin-top:32px}
.s-p1-nota{margin:0; display:inline-flex; align-items:flex-end; gap:4px; font-family:var(--s-mano); font-size:calc(21px * var(--s-mano-k, 1)); line-height:1; color:var(--c-blue); transform:rotate(-1.5deg)}
.s-p1-nota-b{color:var(--c-green)}
.s-p1-flecha{width:42px; height:28px; margin-bottom:-16px; overflow:visible; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-p1-escucha{margin:14px 0 0; font-family:var(--s-sans); font-weight:500; font-size:clamp(18px,1.85vw,22px); line-height:1.6; letter-spacing:-.01em; color:var(--h-ink); max-width:60ch; outline:none; text-wrap:pretty}
.s-p1-detras{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px; max-width:64ch}
.s-p1-detras li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; font-size:15.5px; line-height:1.55; color:#3A484C; text-wrap:pretty}
.s-p1-num{position:relative; width:36px; height:36px; display:grid; place-items:center; font-family:var(--s-mano); font-size:calc(19px * var(--s-mano-k, 1)); color:var(--h-ink)}
.s-p1-num svg{position:absolute; left:-.6px; top:-5.4px; width:42px; height:42px; overflow:visible; fill:none; stroke:var(--c); stroke-width:2.4; stroke-linecap:round}
.s-p1-main .s-urgent{margin-top:20px}
.s-paso1 .s-nodx{margin:24px 0 0; padding:3px 0 3px 12px; border-left:3px solid var(--c-yellow); font-size:12.5px; line-height:1.5; color:var(--s-ink3)}
@media (min-width:900px){ .s-paso1 .s-nodx{margin-top:auto} .s-p1-main > .s-p1-bloque:last-of-type{margin-bottom:26px} }
.s-p1-side{position:relative; display:flex; flex-direction:column; align-items:stretch; padding:8px 20px 0; color:var(--h-ink)}
@media (min-width:900px){ .s-p1-side{overflow-y:auto; padding:58px 36px 0 8px} }
@media (min-width:900px){ .s-p1-main, .s-p1-side{scrollbar-width:thin; scrollbar-color:rgba(70,55,30,.26) transparent} }
.s-p1-polar{display:none; position:relative; margin:0 6px 0 auto; width:46%; padding:8px 8px 24px; background:#FFFFFF; box-shadow:0 10px 20px -10px rgba(0,0,0,.4); transform:rotate(4deg)}
.s-p1-polar::before{content:""; position:absolute; left:50%; top:-11px; width:74px; height:22px; margin-left:-37px; transform:rotate(-5deg); background:rgba(236,224,190,.88); box-shadow:0 1px 2px rgba(0,0,0,.15)}
.s-p1-polar img{display:block; width:100%; aspect-ratio:4/3; height:auto; object-fit:cover}
@media (min-width:900px) and (min-height:860px){ .s-p1-polar{display:block} }
.s-p1-pi{position:relative; z-index:1; margin-top:14px; padding:26px 24px 22px; transform:rotate(-1.4deg);
  background:var(--s-grano), linear-gradient(180deg, rgba(0,0,0,.05) 0 34px, transparent 34px), #FFE27C; box-shadow:0 1px 1px rgba(0,0,0,.15), 0 26px 30px -22px rgba(0,0,0,.5)}
@media (min-width:900px) and (min-height:860px){ .s-p1-pi{margin-top:-22px} }
.s-p1-pi-k{margin:0; font-family:var(--s-mano); font-size:calc(18px * var(--s-mano-k, 1)); line-height:1.2; color:var(--h-ink2)}
.s-p1-service{margin:6px 0 0; font-family:var(--s-plumon); font-weight:var(--s-plumon-w, 400); font-style:var(--s-plumon-st, normal); font-size:calc(var(--sf,30px) * var(--s-plumon-k, 1)); line-height:1.08; color:var(--h-ink); overflow-wrap:break-word}
.s-p1-pi .s-pi-raya{height:14px; margin-top:4px; width:78%}
.s-p1-pi .s-pi-tags{margin-top:10px; font-size:calc(17px * var(--s-mano-k, 1))}
.s-p1-nota-c{container-type:inline-size; position:relative; z-index:1; width:100%; margin-top:14px}
@media (min-width:900px) and (min-height:860px){ .s-p1-nota-c{margin-top:-30px} }
.s-p1-nota-c .s-pi-m{width:77%; margin:0 0 0 12%}
/* el post-it toma el tamaño justo para que la columna llene la carta sin desplazarse (se calcula por código) */
@media (min-width:900px){ .s-p1-nota-c{align-self:center} }
.s-p1-pinota .s-pi-hoja{animation:none}
.s-p1-info{margin:12px 4px 0; padding:0 4px}
@media (min-width:900px){ .s-p1-desc{font-size:13.5px} }
.s-p1-desc{margin:0; font-size:14.5px; line-height:1.55; color:#3A484C}
.s-p1-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 0; padding-top:10px; border-top:1.5px dashed rgba(31,45,49,.25)}
.s-p1-facts dt{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--h-ink2)}
.s-p1-facts dd{margin:2px 0 0; font-weight:600; font-size:14px}
.s-p1-actions{position:sticky; bottom:0; z-index:2; margin:auto -20px 0; padding:20px 20px calc(16px + env(safe-area-inset-bottom,0px)); background:linear-gradient(rgba(248,241,227,0), #F8F1E3 22%); display:flex; flex-direction:column; align-items:center; gap:12px}
@media (min-width:900px){ .s-p1-actions{position:static; background:none; margin:0 -36px 0 -8px; padding:20px 36px 18px 8px; gap:10px} }
.s-dymo-lg{font-size:15px; padding:1em 1.5em 1em 1.6em}
.s-pi-wa-tinta{color:var(--h-ink); font-size:calc(19px * var(--s-mano-k, 1))}
.s-p1-note{margin:0; font-size:12.5px; color:var(--h-ink2); text-align:center}
/* al abrir: todo se acomoda sobre la carta y los post-its se pegan */
.s-p1-entra .s-paso1 [data-e]{animation:sP1 .9s cubic-bezier(.25,.1,.25,1) both; animation-delay:calc(var(--e) * 45ms)}
.s-p1-entra .s-p1-pis li{animation:sP1 .9s cubic-bezier(.25,.1,.25,1) both; animation-delay:calc(var(--k) * 60ms)}
.s-p1-entra .s-pi-raya path, .site.enter .s-pi-raya path{animation:sTraza .9s cubic-bezier(.6,0,.2,1) both; animation-delay:1.25s}
.site.enter .s-pi-raya path{animation-delay:1.55s}
.s-p1-entra .s-p1-nota-c[data-e], .s-p1-entra .s-p1-nota-c .s-pi-raya path{animation:none}
@keyframes sP1{from{opacity:0}}
@keyframes sPega2{from{opacity:0; transform:rotate(var(--r,0deg)) scale(.97)} to{opacity:1; transform:rotate(var(--r,0deg))}}
/* en celular la recomendación sube junto a lo que contestó, y el botón queda fijo abajo en toda la carta */
@media (max-width:899px){
  .s-paso1{padding:22px 20px 0}
  .s-p1-main, .s-p1-side{display:contents}
  .s-p1-hola{order:1} .s-paso1 .s-vh, .s-p1-pis{order:2} .s-p1-nota-c, .s-p1-info{order:3} .s-p1-nota-c{margin-top:26px} .s-p1-bloque{order:4} .s-p1-main .s-urgent{order:5} .s-paso1 .s-nodx{order:6; margin-bottom:8px} .s-p1-polar{order:7} .s-p1-actions{order:9}
}
@keyframes sTraza{from{stroke-dashoffset:1}}

/* La nota va firmada, como un recado del Centro */
.s-pi-firma{display:none; position:absolute; right:7cqw; bottom:5.6cqw; margin:0; font-family:var(--s-mano); font-size:calc(4.4cqw * var(--s-mano-k, 1)); color:var(--h-ink2); transform:rotate(-3deg)}
.s-pi-m .s-pi-firma{display:block}
.s-pi-m .s-pi-sug::first-line{color:var(--h-ink)}

/* El texto de la carta: a la izquierda se lee como una carta («Hola: …») y a la derecha va lo que suele
   haber detrás; en escritorio, lado a lado */
.s-p1-saludo{margin:0 0 6px; font-family:var(--s-mano); font-size:calc(23px * var(--s-mano-k, 1)); line-height:1.2; color:var(--h-ink)}
.s-p1-pis + .s-p1-bloque > .s-p1-nota{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.s-p1-pis + .s-p1-bloque .s-p1-escucha{margin-top:0}
@media (min-width:900px){
  .s-p1-main{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); column-gap:40px; align-content:start}
  .s-p1-main > *{grid-column:1 / -1}
  .s-p1-main > .s-p1-bloque{grid-column:auto; margin-top:30px}
  .s-p1-main > .s-p1-bloque + .s-p1-bloque{padding-top:6px}
  .s-paso1 .s-nodx{margin-top:28px; align-self:end}
}
/* Letra de la carta: el título en Fraunces itálica roja, la carta escrita a mano (Kalam) y lo que suele
   haber detrás en letra impresa (Jakarta) */
.s-p1-mano{font-family:var(--s-serif); font-style:italic; font-weight:500; font-size:26px; line-height:1.15; color:#C42B2B; transform:none; letter-spacing:-.01em}
.s-p1-saludo{font-family:var(--s-mano); font-size:24px; color:var(--h-ink)}
.s-p1-escucha{font-family:var(--s-mano); font-weight:400; font-size:clamp(16.5px,1.32vw,18.5px); line-height:1.5; letter-spacing:0}
.s-p1-bloque .s-p1-carta .s-p1-mas{margin:.75em 0 0}
.s-p1-nota-b{font-family:var(--s-sans); font-weight:700; font-size:11.5px; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; color:var(--h-ink2); transform:none}
.s-p1-nota-b .s-p1-flecha{display:none}
.s-p1-detras li{font-family:var(--s-sans); font-size:14.5px; line-height:1.55; color:var(--h-ink)}
.s-p1-detras .s-p1-num{font-family:var(--s-mano); font-weight:700; font-size:19px; line-height:1}

/* Selector temporal para comparar (solo en Local) */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important}
  .brain.breathing .b-body{animation:none !important}
  .bc{animation:none !important}
}

/* ===== Cuadernos del Centro: repisa con filtro por tema ===== */
.s-cuad{background:var(--s-cream)}
.s-cuad-tema{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1}
.s-cuad-tema.t-red{color:#C42B2B} .s-cuad-tema.t-yellow{color:#B87800} .s-cuad-tema.t-blue{color:var(--c-blue)} .s-cuad-tema.t-green{color:var(--c-green)}
.s-cuad-min{display:block; font-size:13px; color:var(--s-ink3); font-variant-numeric:tabular-nums; white-space:nowrap}
.s-cuad img{display:block; max-width:100%; height:auto}
.s-cuad a{color:inherit; text-decoration:none}
.s-cuad-li{display:block}
.s-cuad-tapa{display:block; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.s-cuad-li:hover .s-cuad-tapa, .s-cuad-li:focus-visible .s-cuad-tapa{transform:translateY(-12px) rotate(-1.2deg)}
.s-cuad-btn{display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:15px; line-height:1; color:#FFFFFF !important; background:var(--s-forest); padding:15px 18px 15px 22px; border-radius:999px; white-space:nowrap}
.s-cuad-btn i{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#FFFFFF; color:var(--s-forest); font-style:normal; font-size:14px}
.s-cuad-pie{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px}
.s-cuad-pie-r{margin-top:22px; justify-content:flex-end}
/* repisa */
.s-cuad-rep{margin-top:20px; padding-top:16px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 18px) / 2.25); column-gap:18px; align-items:start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none}
.s-cuad-rep::-webkit-scrollbar{display:none}
.s-cuad-rep > .s-cuad-li{scroll-snap-align:start}
.s-cuad-info{display:block; margin-top:6px; padding-top:14px; border-top:1px solid #D6C8B0}
.s-cuad-res{display:block; margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--s-ink2)}
.s-cuad-info .s-cuad-min{margin-top:10px}
/* filtro deslizable */
.s-cuad-filtro{position:relative; margin-top:38px; display:flex; align-items:center}
.s-cuad-tabs{flex:1 1 auto; min-width:0; display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 56px), transparent 100%)}
.s-cuad-tabs::-webkit-scrollbar{display:none}
.s-cuad-filtro.ini .s-cuad-tabs{-webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%)}
.s-cuad-filtro.fin .s-cuad-tabs{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 100%); mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 100%)}
.s-cuad-filtro.sin-scroll .s-cuad-tabs{-webkit-mask-image:none; mask-image:none}
.s-cuad-tabs button{flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; gap:9px; font:700 14px/1 var(--s-sans); color:var(--s-ink2); background:transparent; border:1px solid #D6C8B0; padding:12px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, color .2s}
.s-cuad-tabs button:hover{border-color:var(--s-ink2)}
.s-cuad-tabs button i{display:inline-block; width:10px; height:10px; border-radius:50%}
.s-cuad-tabs button[aria-selected="true"]{background:var(--s-ink); border-color:var(--s-ink); color:#FFFFFF}
.s-cuad-nuevo{opacity:0; transform:translateY(14px)}
.s-cuad-nuevo.ve{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
@media (min-width:900px){
  .s-cuad-rep{grid-auto-columns:calc((100% - 78px) / 4); column-gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .s-cuad-tapa, .s-cuad-nuevo.ve{transition:none}
}

.s-cuad-mas{align-self:stretch}
.s-cuad-hueco{display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:422/640; margin:3% 7% 0 4%; padding:26px 22px; border:1.5px dashed #CDBFA6; border-radius:10px; font-family:var(--s-serif); font-size:20px; line-height:1.25; color:var(--s-ink2); transition:border-color .25s, background .25s}
.s-cuad-hueco b{font-weight:400; font-size:26px; color:var(--s-ink)}
.s-cuad-hueco i{font-style:normal; font-family:var(--s-sans); font-size:20px}
.s-cuad-mas:hover .s-cuad-hueco{background:#FFFCF7; border-color:#B9A887}
.s-cuad-mas.t-red .s-cuad-hueco b{color:#C42B2B} .s-cuad-mas.t-yellow .s-cuad-hueco b{color:#B87800} .s-cuad-mas.t-blue .s-cuad-hueco b{color:var(--c-blue)} .s-cuad-mas.t-green .s-cuad-hueco b{color:var(--c-green)}
@media (max-width:559px){
  .s-cuad-filtro{margin-inline:-20px}
  .s-cuad-tabs{padding-inline:20px; scroll-padding-inline:20px}
}

/* hojear cuadernos */
.s-cuad-pie{justify-content:space-between}
.s-cuad-nav{display:flex; align-items:center; gap:16px; flex:1 1 260px; min-width:0}
.s-cuad-cuenta{font-size:13.5px; font-weight:600; color:var(--s-ink2); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px}
.s-cuad-barra{position:relative; flex:1 1 auto; max-width:220px; height:2px; background:#E2D6C2; overflow:hidden; border-radius:2px}
.s-cuad-barra i{position:absolute; inset:0 auto 0 0; background:var(--s-ink); border-radius:2px; transition:transform .25s ease-out, width .25s}
@media (max-width:559px){
  .s-cuad-rep{margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px}
}

/* flechas: chicas en el filtro, grandes a los lados de la repisa */
.s-cuad-ch{position:absolute; top:50%; z-index:2; width:34px; height:34px; margin-top:-17px; border-radius:50%; border:1px solid #D6C8B0; background:#FFFCF7; color:var(--s-ink); display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(40,30,10,.10); transition:opacity .2s}
.s-cuad-ch svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-cuad-ch-a{left:-6px} .s-cuad-ch-s{right:-6px}
.s-cuad-ch:disabled, .s-cuad-filtro.sin-scroll .s-cuad-ch{opacity:0; pointer-events:none}
.s-cuad-estante{position:relative}
.s-cuad-lado{position:absolute; top:var(--lado-y,45%); z-index:3; width:44px; height:44px; margin-top:-22px; border-radius:50%; border:0; background:var(--s-ink); color:#FFFFFF; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 24px rgba(20,30,25,.22); transition:opacity .25s, transform .25s}
.s-cuad-lado:hover:not(:disabled){transform:scale(1.06)}
.s-cuad-lado svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-cuad-lado-a{left:-62px} .s-cuad-lado-s{right:-62px}
@media (min-width:560px) and (max-width:1339px){
  .s-cuad-estante{padding-inline:56px}
  .s-cuad-lado-a{left:0} .s-cuad-lado-s{right:0}
}
.s-cuad-lado:disabled, .s-cuad-estante.sin-scroll .s-cuad-lado{opacity:0; pointer-events:none}
.s-cuad-nav.sin-scroll .s-cuad-barra, .s-cuad-nav.sin-scroll .s-cuad-cuenta{visibility:hidden}
@media (max-width:559px){
  .s-cuad-ch, .s-cuad-lado{display:none}
}
@media (pointer:fine){ .s-cuad-rep{cursor:grab} .s-cuad-rep.arrastra{cursor:grabbing; scroll-snap-type:none} .s-cuad-rep.arrastra .s-cuad-li{pointer-events:none} }

/* ===== Escuchamos: plática con la asistente virtual ===== */
.s-escu{background:#F9EDE7}
.s-escu-in{display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center}
.s-escu-txt .s-sec-lede{margin-top:22px}
.s-escu-notas{margin:22px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.s-escu-notas li{font-size:13.5px; font-weight:600; color:var(--s-ink2); background:#FFFCF7; border:1px solid #E2D6C2; padding:8px 12px; border-radius:999px}
.s-escu-aviso{margin:16px 0 0; max-width:420px; font-size:13.5px; line-height:1.5; color:var(--s-ink3)}
.s-chat{display:flex; flex-direction:column; min-width:0; background:#FFFCF7; border:1px solid #E2D6C2; border-radius:22px; box-shadow:0 24px 50px -28px rgba(40,30,10,.35); overflow:hidden}
.s-chat-hd{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid #EDE3D3}
.s-chat-av{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:#FBE4E2; display:grid; place-items:center}
.s-chat-av svg{width:24px; height:24px}
.s-chat-quien{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.s-chat-quien b{font-family:var(--s-serif); font-weight:400; font-size:20px; color:var(--s-ink)}
.s-chat-quien span{font-size:12.5px; color:var(--s-ink3); display:inline-flex; align-items:center; gap:6px}
.s-chat-quien span::before{content:""; width:7px; height:7px; border-radius:50%; background:#3E9B5B}
.s-chat-demo{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B4700; background:#F8E6BE; padding:5px 8px; border-radius:6px; white-space:nowrap}
.s-chat-log{height:360px; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; overscroll-behavior:contain}
.s-chat-m{max-width:84%; padding:11px 14px; border-radius:16px; font-size:15px; line-height:1.5; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease}
.s-chat-m.ve{opacity:1; transform:none}
.s-chat-m p{margin:0} .s-chat-m p + p{margin-top:8px}
.s-chat-m.ella{align-self:flex-start; background:#F3ECE0; color:var(--s-ink); border-bottom-left-radius:5px}
.s-chat-m.yo{align-self:flex-end; background:var(--s-forest); color:#FFFFFF; border-bottom-right-radius:5px}
.s-chat-acc{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.s-chat-cta, .s-chat-cta2{font:700 13.5px/1 var(--s-sans); border-radius:999px; padding:10px 14px; cursor:pointer}
.s-chat-cta{background:var(--s-forest); color:#FFFFFF; border:0}
.s-chat-cta2{background:transparent; color:var(--s-forest); border:1px solid #CDBFA6}
.s-chat-typing{display:flex; gap:5px; padding:14px 16px}
.s-chat-typing span{width:7px; height:7px; border-radius:50%; background:#B9A887; animation:sChatPunto 1.1s infinite ease-in-out}
.s-chat-typing span:nth-child(2){animation-delay:.15s} .s-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes sChatPunto{0%,80%,100%{opacity:.35; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.s-chat-crisis{align-self:stretch; font-size:13.5px; line-height:1.5; color:#7A1E1E; background:#FDECEA; border:1px solid #F3C2BD; border-radius:12px; padding:10px 12px}
.s-chat-crisis a{color:#B3261E; font-weight:700}
.s-chat-sug{display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px}
.s-chat-sug button{font:600 13.5px/1.2 var(--s-sans); color:var(--s-ink); background:transparent; border:1px solid #D6C8B0; padding:9px 12px; border-radius:999px; cursor:pointer; text-align:left}
.s-chat-sug button:hover{border-color:var(--s-ink2); background:#FFFFFF}
.s-chat-form{display:flex; align-items:flex-end; gap:10px; padding:12px 14px; border-top:1px solid #EDE3D3; background:#FFFFFF}
.s-chat-form textarea{flex:1 1 auto; min-width:0; resize:none; border:0; outline:0; background:transparent; font:400 15.5px/1.45 var(--s-sans); color:var(--s-ink); padding:8px 4px; max-height:140px}
.s-chat-form textarea::placeholder{color:#9AA19C}
.s-chat-form button{flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:0; background:var(--c-red); color:#FFFFFF; display:grid; place-items:center; cursor:pointer; transition:opacity .2s}
.s-chat-form button:disabled{opacity:.45; cursor:default}
.s-chat-form button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s-chat-pie{margin:0; padding:10px 16px 12px; font-size:12.5px; color:var(--s-ink3); background:#FFFFFF; border-top:1px solid #F3ECE0}
.s-chat-pie a{color:#B3261E; font-weight:700; text-decoration:none}
@media (min-width:900px){
  .s-escu-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,88px)}
  .s-chat-log{height:400px}
}
@media (prefers-reduced-motion:reduce){ .s-chat-m{transition:none} .s-chat-typing span{animation:none} }
.s-chat-form textarea:focus, .s-chat-form textarea:focus-visible{outline:none; box-shadow:none}
.s-chat-form:focus-within{box-shadow:inset 0 2px 0 var(--c-red)}
.s-chat-hd{flex-wrap:wrap; row-gap:8px}
.s-chat-quien span{white-space:nowrap}

/* ===== Escuchamos: bloque rojo compacto con brillo en movimiento ===== */
.s-escu{position:relative; isolation:isolate; overflow:clip}
.s-escu-fx{position:absolute; inset:0; z-index:0; pointer-events:none}
.s-escu-fx > div{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
.s-escu.fx-pausa .s-escu-fx *{animation-play-state:paused !important}
.s-escu > .s-wrap{position:relative; z-index:1}
.s-escu[data-fx="rojo"]{background:#D93A33; color:#FFFFFF}
.s-escu-glow span{position:absolute; width:70vw; aspect-ratio:1; border-radius:50%; filter:blur(60px); opacity:.55}
.s-escu-glow span:nth-child(1){left:-15vw; top:-30%; background:#F06A4E; animation:sEscuGlow1 16s ease-in-out infinite alternate}
.s-escu-glow span:nth-child(2){right:-20vw; bottom:-40%; background:#A8231F; animation:sEscuGlow2 19s ease-in-out infinite alternate}
@keyframes sEscuGlow1{to{transform:translate(18vw,14%)}}
@keyframes sEscuGlow2{to{transform:translate(-16vw,-12%)}}
.s-escu[data-fx="rojo"] .s-eyebrow, .s-escu[data-fx="rojo"] .s-h2, .s-escu[data-fx="rojo"] .s-sec-lede{color:#FFFFFF}
.s-escu[data-fx="rojo"] .s-h2 em{color:#FFE2C2}
.s-escu[data-fx="rojo"] .s-sec-lede, .s-escu[data-fx="rojo"] .s-escu-aviso{color:rgba(255,255,255,.86)}
.s-escu[data-fx="rojo"] .s-eyebrow .s-pieza use:first-child{fill:#FFFFFF} .s-escu[data-fx="rojo"] .s-eyebrow .s-pieza use:last-child{fill:#D93A33}
.s-escu[data-fx="rojo"] .s-escu-notas li{color:#FFFFFF; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35)}
.s-escu[data-fx="rojo"] .s-chat{border-color:transparent; box-shadow:0 30px 60px -30px rgba(70,8,6,.55)}
.s-escu-fx > .s-escu-glow{opacity:1}
/* compacto: la mitad de alto; el chat crece cuando empieza la plática */
.s-sec.s-escu{padding:44px 0}
@media (min-width:960px){ .s-sec.s-escu{padding:56px 0} }
.s-escu .s-h2{font-size:clamp(32px,3.6vw,46px); margin-top:12px}
.s-escu-txt .s-sec-lede{margin-top:14px; font-size:16px}
.s-escu-notas{margin-top:16px}
.s-escu-notas li{font-size:12.5px; padding:6px 10px}
.s-escu .s-chat-hd{padding:12px 16px}
.s-escu .s-chat-log{height:150px; padding:14px 16px; transition:height .45s cubic-bezier(.2,.7,.2,1)}
.s-escu.platicando .s-chat-log{height:340px}
.s-escu .s-chat-sug{padding:0 16px 12px}
.s-escu .s-chat-sug button{font-size:12.5px; padding:8px 11px}
.s-escu .s-chat-form{padding:8px 12px}
.s-escu .s-chat-pie{padding:8px 16px 10px; font-size:12px}
@media (min-width:900px){ .s-escu .s-chat-log{height:150px} .s-escu.platicando .s-chat-log{height:360px} }
@media (max-width:899px){
  .s-escu-in{gap:24px}
  .s-escu .s-h2{font-size:30px}
  .s-escu-txt .s-sec-lede{font-size:15px; line-height:1.5}
  .s-escu-notas{gap:6px}
  .s-escu-notas li{font-size:11.5px; padding:5px 9px}
  .s-escu .s-chat-hd{flex-wrap:nowrap}
  .s-escu .s-chat-demo{font-size:0; padding:4px 7px; margin-left:auto; white-space:nowrap}
  .s-escu .s-chat-demo::after{content:"Demo"; font-size:9.5px}
  .s-escu .s-chat-quien{min-width:0}
  .s-escu .s-chat-quien span{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}

/* ===== Aire entre secciones: 30% menos (v0.21.4) ===== */
.s-sec.s-equipo, .s-sec.s-cuad, .s-sec.s-donde{padding:50px 0}
.s-serv-in{padding-top:56px; padding-bottom:68px}
@media (min-width:960px){
  .s-sec.s-equipo, .s-sec.s-cuad, .s-sec.s-donde{padding:78px 0}
  .s-serv-in{padding-top:90px; padding-bottom:105px}
}

/* ===== Dónde estamos: dirección real y mapa con enlace (v0.21.6) ===== */
.s-donde-ir{display:inline-flex; gap:4px; margin-top:6px; font-weight:600; color:var(--s-forest); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.s-donde-ir:hover{text-decoration-thickness:2px}
a.s-mapa{display:block; color:inherit; text-decoration:none}
a.s-mapa .s-mapa-pin{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a.s-mapa:hover .s-mapa-pin, a.s-mapa:focus-visible .s-mapa-pin{transform:translateY(-6px) scale(1.06)}
a.s-mapa .s-mapa-nota{color:var(--s-forest); transition:background .2s}
a.s-mapa:hover .s-mapa-nota{background:#FFFFFF}
a.s-mapa:focus-visible{outline:3px solid var(--s-forest); outline-offset:4px}
@media (min-width:600px){ .s-datos-dir{grid-column:1 / -1; order:-1} }

/* Mapa con las calles reales alrededor de Plantel Río (OpenStreetMap) */
.s-mapa-real path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.s-mapa-real path.m-parque{fill:#DCE3CF; stroke:none}
.s-mapa-real path.m-rio{stroke:#CFDCE4; stroke-width:20}
.s-mapa-real path.m-res{stroke:var(--s-paper); stroke-width:5}
.s-mapa-real path.m-link{stroke:var(--s-paper); stroke-width:6}
.s-mapa-real path.m-sec{stroke:var(--s-paper); stroke-width:11}
.s-mapa-real path.m-pri{stroke:var(--s-paper); stroke-width:13}
.s-mapa-real path.m-via{stroke:#FFFFFF; stroke-width:16}
.s-mapa-real .m-et{font-family:var(--f-text); font-size:10.5px; font-weight:600; letter-spacing:.04em; fill:#6B746D; text-anchor:middle; dominant-baseline:middle; paint-order:stroke; stroke:#FFFCF7; stroke-width:3px; stroke-linejoin:round}
.s-mapa-real .m-et-parque{fill:#5E7352; stroke:#DCE3CF; font-style:italic}