/* ==========================================================================
   El nudo y el hilo — sistema de diseño de la página
   Papel, tinta azul, un hilo rojo que se desenreda al bajar, mostaza de sol limeño.
   ========================================================================== */
:root{
  --papel:#f4eee3;
  --papel-2:#ebe3d4;
  --hoja:#fbf8f2;
  --tinta:#1d2340;
  --tinta-2:#4b5068;
  --tinta-3:#8a8fa8;          /* sólo decoración */
  --hilo:#c4432b;             /* el hilo, textos grandes */
  --hilo-osc:#a93520;         /* botones y texto chico: 5,6:1 sobre papel */
  --mostaza:#efb43c;
  --mostaza-clara:#f7e1a8;
  --cielo:#d5d9e3;
  --rosa:#f3d6c8;
  --linea:#d8ccb7;
  --display:'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mano:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --ancho:1160px;
  --radio:18px;
  --suave:cubic-bezier(.2,.7,.2,1);
  --d0:0s;
  interpolate-size:allow-keywords;
}
.con-intro{ --d0:1.35s; }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
html:has(dialog[open]){ overflow:hidden; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 1.0625rem/1.62 var(--display); font-optical-sizing:auto;
  overflow-x:clip; position:relative;
}
/* Grano de papel: un ruido fijo y muy tenue sobre todo */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image: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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .13 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--hilo-osc); text-underline-offset:3px; text-decoration-thickness:1.5px; }
a:hover{ color:var(--tinta); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--mostaza); outline-offset:3px; border-radius:6px; box-shadow:0 0 0 6px var(--tinta); }
h1,h2,h3{ font-family:var(--display); font-weight:750; line-height:1.02; margin:0 0 .5em; letter-spacing:-.018em; font-variation-settings:"wdth" 90; }
h2{ font-size:clamp(2.2rem, 5.2vw, 3.8rem); }
h3{ font-size:1.32rem; letter-spacing:-.015em; line-height:1.15; font-variation-settings:"wdth" 92; }
p{ margin:0 0 1em; }
em{ font-style:italic; }
.envoltura{ max-width:var(--ancho); margin:0 auto; padding:0 20px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.salto{ position:absolute; left:-999px; top:8px; background:var(--tinta); color:#fff; padding:10px 16px; border-radius:10px; z-index:300; }
.salto:focus{ left:12px; }

/* Notas a mano: Caveat, siempre de 24 px o más (texto grande) */
.nota, .mano{ font-family:var(--mano); font-weight:700; font-size:1.6rem; line-height:1.1; color:var(--hilo-osc); letter-spacing:0; }
.flecha{ width:62px; height:40px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }

/* Etiquetas de sección, numeradas solas: un número escrito a mano y el rótulo */
main{ counter-reset:seccion; }
.numerada{ counter-increment:seccion; }
.etiqueta{
  display:flex; align-items:center; gap:12px; margin:0 0 1.1rem;
  font:650 .8rem/1.2 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2);
}
.numerada .etiqueta::before{
  content:counter(seccion, decimal-leading-zero);
  font:700 2.1rem/1 var(--mano); letter-spacing:0; color:var(--hilo); rotate:-8deg; margin-top:-6px;
}

/* Lo que falta llenar: se ve a propósito mientras la página es borrador */
.ph{ background:#fbe9a6; color:#3d3206; border-bottom:1.5px dashed #b08a1e; border-radius:3px; padding:0 .15em; font-style:normal; }
.borrador{ position:relative; z-index:3; background:#fbe9a6; color:#4a3b06; text-align:center; font-size:.9rem; padding:8px 20px; border-bottom:1px solid #e4cf86; }

/* ---------- Botones ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:50px; padding:.8em 1.5em; border-radius:999px; border:2px solid var(--tinta);
  font:700 1rem/1.2 var(--display); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--suave), box-shadow .25s var(--suave), background .2s, color .2s;
}
.btn svg{ width:20px; height:20px; flex:none; transition:transform .3s var(--suave); }
.btn-grande{ min-height:58px; padding:.95em 1.7em; font-size:1.06rem; }
.btn-lleno{ background:var(--hilo-osc); color:#fff; box-shadow:4px 4px 0 var(--tinta); }
.btn-borde{ background:var(--hoja); color:var(--tinta); box-shadow:3px 3px 0 var(--tinta); }
.btn-tinta{ background:var(--tinta); color:var(--hoja); box-shadow:4px 4px 0 var(--hilo-osc); }
.btn-texto{ border-color:transparent; background:transparent; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--hilo); text-underline-offset:6px; padding-inline:.4em; }
.btn-borde-claro{ border-color:var(--hoja); color:var(--hoja); background:transparent; }
.btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--tinta); }
@media (hover:hover){
  .btn-lleno:hover, .btn-borde:hover, .btn-tinta:hover{ transform:translate(-2px, -2px); }
  .btn-lleno:hover{ box-shadow:7px 7px 0 var(--tinta); color:#fff; }
  .btn-borde:hover{ box-shadow:6px 6px 0 var(--tinta); color:var(--tinta); }
  .btn-tinta:hover{ box-shadow:7px 7px 0 var(--hilo-osc); color:var(--hoja); }
  .btn-lleno:hover svg{ transform:translateX(4px); }
  .btn-borde-claro:hover{ background:var(--hoja); color:var(--tinta); }
}
.enlace{ background:none; border:0; padding:0; color:var(--hilo-osc); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; cursor:pointer; font-weight:650; }

/* ---------- Cortina: el nudo se desata en una línea recta ---------- */
.cortina{ display:none; }
.con-intro .cortina{
  display:grid; place-items:center; position:fixed; inset:0; z-index:250;
  background:var(--tinta);
  animation:cortina-sube .8s cubic-bezier(.75,0,.2,1) 1.25s forwards;
}
.cortina.fuera{ display:none !important; }
.cortina-hilo{ width:min(300px, 70vw); overflow:visible; fill:none; stroke:var(--hilo); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.cortina-nudo{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar .7s var(--suave) .05s forwards, desatar .35s ease-in .8s forwards; }
.cortina-recta{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar .4s var(--suave) .82s forwards; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }
@keyframes desatar{ to{ opacity:0; } }
@keyframes cortina-sube{ to{ clip-path:inset(0 0 100% 0); visibility:hidden; } }

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(244,238,227,.88); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:2px solid transparent; transition:transform .45s var(--suave), border-color .3s;
}
.cabecera.con-borde{ border-color:var(--tinta); }
.cabecera.oculta{ transform:translateY(-100%); }
.cabecera .envoltura{ display:flex; align-items:center; gap:28px; min-height:76px; }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta); margin-right:auto; min-width:0; }
.marca-lazo{ width:38px; height:38px; flex:none; fill:none; stroke:var(--hilo); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:rotate .6s var(--suave); }
.marca:hover .marca-lazo{ rotate:-14deg; }
.marca > span{ min-width:0; }
.marca b{ display:block; font:780 1.18rem/1.05 var(--display); font-variation-settings:"wdth" 88; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marca small{ display:block; font-size:.8rem; color:var(--tinta-2); }
.nav{ display:flex; gap:26px; }
.nav a{ position:relative; color:var(--tinta); text-decoration:none; font-weight:600; font-size:.97rem; padding:8px 0; }
/* subrayado a mano al pasar */
.nav a::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:8px;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 20 1, 35 7, 52 4 S 82 1, 99 5' fill='none' stroke='%23c4432b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0); transition:clip-path .45s var(--suave);
}
.nav a:hover::after, .nav a[aria-current]::after{ clip-path:inset(0 0 0 0); }
.btn-cabecera{ min-height:44px; padding:.5em 1.2em; font-size:.95rem; box-shadow:3px 3px 0 var(--tinta); }
.menu-btn{
  display:none; position:relative; width:46px; height:46px; flex:none;
  border:2px solid var(--tinta); background:var(--hoja); border-radius:14px; cursor:pointer;
}
.menu-btn span{ position:absolute; left:12px; right:12px; height:2.4px; border-radius:2px; background:var(--tinta); transition:transform .35s var(--suave), top .35s var(--suave); }
.menu-btn span:first-child{ top:16px; }
.menu-btn span:last-child{ top:24px; }
.menu-btn[aria-expanded="true"] span:first-child{ top:20px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ top:20px; transform:rotate(-45deg); }
@media (max-width:940px){
  .cabecera .envoltura{ gap:12px; }
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--papel); border-bottom:2px solid var(--tinta); padding:6px 20px 18px;
    clip-path:inset(0 0 100% 0); visibility:hidden;
    transition:clip-path .45s var(--suave), visibility 0s .45s;
  }
  .nav.abierta{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .45s var(--suave), visibility 0s; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--linea); font:750 1.6rem/1.1 var(--display); font-variation-settings:"wdth" 86; letter-spacing:-.02em; }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .menu-btn{ display:block; }
}
@media (max-width:440px){
  .marca small{ display:none; }
  .marca b{ font-size:1.05rem; }
  .btn-cabecera{ padding:.5em .95em; }
}

/* ---------- Portada ---------- */
.portada{ position:relative; overflow-x:clip; padding:clamp(34px, 6vw, 80px) 0 clamp(54px, 7vw, 96px); }
.portada-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px, 6vw, 90px); align-items:center; }
.etiqueta-portada{ font:650 .82rem/1.4 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin:0 0 1.4rem; }
.punto-sep{ color:var(--hilo); margin:0 .55em; }
.titular{
  font-size:clamp(2.9rem, 7.4vw, 6.3rem); line-height:.92; font-weight:800; letter-spacing:-.028em;
  font-variation-settings:"wdth" 86; margin-bottom:.38em;
}
.junto{ white-space:nowrap; }
.titular em{
  position:relative; display:inline-block; font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:1.1em; line-height:.8; letter-spacing:-.01em; color:var(--hilo); font-variation-settings:normal;
  padding:0 .06em; white-space:nowrap;
}
/* el garabato con el que se encierra la palabra, dibujado a mano */
.garabato{ position:absolute; left:-14%; top:-12%; width:128%; height:132%; overflow:visible; pointer-events:none; fill:none; stroke:var(--hilo); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.garabato path{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar 1.1s cubic-bezier(.6,0,.3,1) both; animation-delay:calc(var(--d0) + .75s); }
.portada .intro{ font-size:clamp(1.12rem, 1.6vw, 1.3rem); color:var(--tinta-2); max-width:31em; line-height:1.55; }
.acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin:30px 0 30px; }
.nota-cta{ display:flex; align-items:flex-end; gap:6px; margin:0; rotate:-4deg; translate:0 12px; }
.nota-cta .flecha{ margin-bottom:8px; }
.ficha{ list-style:none; padding:16px 0 0; margin:0; display:flex; flex-wrap:wrap; gap:8px 26px; border-top:2px solid var(--tinta); max-width:34em; font-weight:600; font-size:.97rem; }
.ficha li::before{ content:""; display:inline-block; vertical-align:.12em; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--hilo); }

/* Entrada de la portada */
.js .entra{ animation:subir .9s var(--suave) both; }
.js .portada-texto > .etiqueta-portada{ animation-delay:var(--d0); }
.js .portada-texto > .intro{ animation-delay:calc(var(--d0) + .5s); }
.js .portada-texto > .acciones{ animation-delay:calc(var(--d0) + .65s); }
.js .portada-texto > .ficha{ animation-delay:calc(var(--d0) + .8s); }
.js .titular:not(.partido){ opacity:0; animation:aparecer .01s calc(var(--d0) + 1.4s) forwards; }
.titular .p{ display:inline-block; animation:palabra .9s var(--suave) both; animation-delay:calc(var(--d0) + .05s + var(--i) * 60ms); }
@keyframes subir{ from{ opacity:0; translate:0 20px; } to{ opacity:1; translate:0 0; } }
@keyframes aparecer{ to{ opacity:1; } }
@keyframes palabra{ from{ opacity:0; translate:0 .5em; rotate:4deg; } to{ opacity:1; translate:0 0; rotate:0deg; } }

/* La polaroid: su foto, o el nudo si todavía no la sube */
.polaroid{
  --giro:3deg;
  position:relative; margin:0; width:100%; max-width:390px; justify-self:center;
  background:var(--hoja); padding:14px 14px 70px; border-radius:4px;
  box-shadow:0 2px 0 rgba(29,35,64,.06), 0 34px 50px -30px rgba(29,35,64,.55);
  rotate:var(--giro); transition:rotate .6s var(--suave);
}
.js .polaroid{ animation:caer 1.1s cubic-bezier(.2,.9,.25,1.15) both; animation-delay:calc(var(--d0) + .25s); }
@keyframes caer{ from{ opacity:0; translate:0 -40px; rotate:-6deg; } }
.polaroid-foto{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cielo); }
.arco-foto{ width:100%; height:100%; object-fit:cover; max-width:none; filter:saturate(.92) contrast(1.02); }
.polaroid-nudo{ width:100%; height:100%; fill:none; stroke:var(--hilo); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; background:linear-gradient(170deg, #e4e7ee, var(--cielo)); }
.polaroid-nudo path{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar 2.2s cubic-bezier(.5,0,.3,1) forwards; animation-delay:calc(var(--d0) + .6s); }
.polaroid-aviso{ position:absolute; left:12px; right:12px; bottom:12px; font-size:.8rem; text-align:center; }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:16px; text-align:center; font:700 2rem/1 var(--mano); color:var(--tinta); }
.cinta-adhesiva{ position:absolute; z-index:2; width:118px; height:34px; background:rgba(239,180,60,.62); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.cinta-1{ top:-16px; left:-30px; rotate:-34deg; }
.cinta-2{ top:-14px; right:-34px; rotate:28deg; }
.sello{
  position:absolute; z-index:3; width:124px; height:124px; left:-58px; bottom:30px; overflow:visible;
  animation:girar 26s linear infinite;
}
.sello circle{ fill:var(--mostaza); stroke:var(--tinta); stroke-width:2; }
.sello text{ font:750 10.2px var(--display); letter-spacing:.12em; text-transform:uppercase; fill:var(--tinta); }
.sello-lazo{ fill:none; stroke:var(--hilo-osc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes girar{ to{ rotate:360deg; } }
@media (hover:hover){ .polaroid:hover{ --giro:0deg; } }
@media (max-width:860px){
  .portada-grid{ grid-template-columns:1fr; }
  .polaroid{ max-width:300px; margin-top:10px; }
  .sello{ width:100px; height:100px; left:-30px; }
}
@media (max-width:600px){
  .nota-cta{ translate:0 0; }
  .nota-cta{ rotate:-3deg; margin-left:6px; }
  .nota-cta .flecha{ display:none; }
  .polaroid{ margin-top:34px; }
}

/* ---------- Cintas que cruzan ---------- */
.cintas{ position:relative; height:clamp(130px, 15vw, 190px); overflow:clip; }
.banda{ position:absolute; left:-6%; width:112%; top:50%; padding:14px 0; overflow:hidden; }
.banda-frente{ z-index:2; background:var(--tinta); rotate:-3.2deg; translate:0 -50%; }
.banda-atras{ background:var(--mostaza); rotate:2.4deg; translate:0 -50%; }
.banda-pista{ display:flex; align-items:center; width:max-content; animation:banda 60s linear infinite; }
.banda-atras .banda-pista{ animation-direction:reverse; animation-duration:80s; }
.banda-frente span{ font:italic 400 clamp(1.7rem, 3.4vw, 2.6rem)/1 var(--serif); color:var(--hoja); margin-right:28px; }
.banda-frente i{ width:26px; height:14px; margin-right:28px; flex:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'%3E%3Cpath d='M1 13 C8 13 11 11 13.5 7 C15.5 3.5 20 2.5 21.2 5.2 C22.4 8 18 11 15.3 8.8 C12.8 6.8 15.4 1.5 19.5 1.5 C24 1.5 27 6 31 13' fill='none' stroke='%23efb43c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.banda-atras span{ font:800 clamp(.95rem, 1.4vw, 1.1rem)/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); margin-right:22px; }
.banda-atras i{ font-style:normal; color:var(--hilo-osc); margin-right:22px; font-size:1.1rem; }
@keyframes banda{ to{ transform:translateX(-50%); } }

/* ---------- Revelar al bajar ---------- */
.revela{ transition:opacity .9s var(--suave), translate .9s var(--suave); transition-delay:calc(var(--i, 0) * 90ms); }
.anima .revela:not(.visto){ opacity:0; translate:0 30px; }

/* ---------- Secciones ---------- */
section{ position:relative; padding:clamp(76px, 10vw, 132px) 0; }
.cabeza{ max-width:680px; margin-bottom:clamp(38px, 5vw, 60px); }
.cabeza p:not(.etiqueta):not(.nota){ color:var(--tinta-2); font-size:1.1rem; }

/* Sobre mí: una carta, firmada */
.sobre-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px, 6vw, 90px); align-items:start; }
.sobre h2{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
.cita{ position:relative; margin:30px 0 0; padding:6px 0 0 34px; }
.cita::before{ content:"“"; position:absolute; left:-8px; top:-30px; font:400 7rem/1 var(--serif); color:var(--hilo); }
.cita p{ font:italic 400 clamp(1.6rem, 2.8vw, 2.2rem)/1.22 var(--serif); color:var(--tinta); margin:0; }
.carta{ position:relative; background:var(--hoja); padding:clamp(26px, 4vw, 44px); border-radius:4px; box-shadow:0 30px 50px -36px rgba(29,35,64,.5); rotate:-.8deg;
  background-image:repeating-linear-gradient(transparent 0 33px, rgba(29,35,64,.07) 33px 34px); background-position:0 22px; }
.carta::before{ content:""; position:absolute; top:-14px; left:50%; translate:-50% 0; rotate:3deg; width:120px; height:32px; background:rgba(213,217,227,.85); }
.bio p{ color:var(--tinta-2); }
.bio p:first-child{ font-size:1.15rem; color:var(--tinta); }
.firma{ font:700 2.7rem/1 var(--mano); color:var(--hilo-osc); margin:4px 0 22px; rotate:-4deg; transform-origin:left; }
.firma::before{ content:"— "; }
.ficha-tecnica{ border-top:2px solid var(--tinta); padding-top:18px; }
.subtitulo{ font:650 .78rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); margin:0 0 12px; }
.formacion{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
.formacion li{ display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; font-weight:500; }
.formacion svg, .colegio svg{ width:21px; height:21px; margin-top:3px; color:var(--hilo); }
.colegio{ display:grid; grid-template-columns:24px 1fr; gap:10px; margin:0; color:var(--tinta-2); font-size:.97rem; }
@media (max-width:860px){ .sobre-grid{ grid-template-columns:1fr; } .carta{ rotate:0deg; } }

/* Temas: fichas de colores, sueltas sobre la mesa */
.temas-seccion{ background:var(--papel-2); }
.temas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px 22px; }
.tema{
  --giro:-1.4deg; --fondo-tarjeta:var(--hoja);
  position:relative; display:flex; flex-direction:column; padding:30px 26px 24px; border-radius:6px;
  background:var(--fondo-tarjeta); color:var(--tinta);
  box-shadow:0 2px 0 rgba(29,35,64,.06), 0 22px 34px -26px rgba(29,35,64,.55);
  rotate:var(--giro);
  transition-property:opacity, translate, rotate, transform, box-shadow;
  transition-duration:.9s, .9s, .45s, .45s, .45s;
  transition-timing-function:var(--suave);
  transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.tema:nth-child(4n+2){ --giro:1.2deg; --fondo-tarjeta:var(--mostaza-clara); }
.tema:nth-child(4n+3){ --giro:-.5deg; --fondo-tarjeta:var(--cielo); }
.tema:nth-child(4n+4){ --giro:1.7deg; --fondo-tarjeta:var(--rosa); }
.tema::before{ content:""; position:absolute; top:-12px; left:50%; width:84px; height:26px; translate:-50% 0; rotate:-4deg; background:rgba(255,255,255,.55); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.tema-icono{ display:block; width:46px; height:46px; color:var(--hilo); margin-bottom:14px; }
.tema-icono svg{ width:46px; height:46px; stroke-width:2; }
.tema h3{ font-size:1.45rem; margin-bottom:.35em; }
.tema p{ color:var(--tinta-2); margin:0 0 18px; font-size:1rem; }
.tema-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:none; border:0; padding:6px 0; cursor:pointer;
  color:var(--hilo-osc); font-weight:700; font-size:.95rem; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px;
}
.tema-cta::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.tema-cta svg{ width:18px; height:18px; transition:transform .35s var(--suave); }
.tema:has(.tema-cta:focus-visible){ outline:3px solid var(--mostaza); outline-offset:4px; box-shadow:0 0 0 7px var(--tinta); }
.tema-cta:focus-visible{ outline:none; box-shadow:none; }
@media (hover:hover){
  .tema:hover{ --giro:0deg; transform:translateY(-8px); box-shadow:0 2px 0 rgba(29,35,64,.06), 0 34px 44px -28px rgba(29,35,64,.6); }
  .tema:hover .tema-cta svg{ transform:translateX(5px); }
}
.nota-temas{ margin-top:38px; color:var(--tinta-2); font-size:1.05rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.nota-temas .nota{ font-size:1.6rem; rotate:-3deg; display:inline-block; }
@media (max-width:940px){ .temas{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:580px){ .temas{ grid-template-columns:1fr; gap:24px; } }

/* Pausa: el sol que sale detrás del Misti */
.respira{ background:var(--cielo); overflow:clip; }
.respira h2{ max-width:12em; }
.respira p{ color:var(--tinta-2); max-width:30em; }
.respira-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 6vw, 80px); align-items:center; }
.respira-zona{ position:relative; width:min(380px, 82vw); aspect-ratio:1; display:grid; place-items:center; justify-self:center; }
.sol{
  width:50%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff1c9, var(--mostaza) 55%, #e2902e);
  box-shadow:inset -10px -14px 30px rgba(196,67,43,.25);
  translate:0 10%;
  transition:transform 1.2s cubic-bezier(.45,0,.55,1), translate 1.2s cubic-bezier(.45,0,.55,1);
}
.misti{ position:absolute; left:-5%; width:110%; bottom:0; overflow:visible; }
.misti-cerro{ fill:#a9adc2; stroke:var(--tinta); stroke-width:3; stroke-linejoin:round; }
.misti-nieve{ fill:var(--hoja); stroke:var(--tinta); stroke-width:2.4; stroke-linejoin:round; }
.nube{ position:absolute; fill:#f6f7fa; stroke:var(--tinta); stroke-width:2.2; stroke-linejoin:round; overflow:visible; transition:transform 1.2s cubic-bezier(.45,0,.55,1); }
.nube-1{ width:58%; left:-17%; bottom:9%; }   /* a un lado: la cumbre del Misti queda a la vista */
.nube-2{ width:58%; right:-8%; top:20%; transform:scaleX(-1); }
.respira.inhala .sol, .respira.sosten .sol{ transform:scale(1.42); translate:0 -6%; transition-duration:4s; }
.respira.inhala .nube-1, .respira.sosten .nube-1{ transform:translateX(-30%); transition-duration:4s; }
.respira.inhala .nube-2, .respira.sosten .nube-2{ transform:scaleX(-1) translateX(-34%); transition-duration:4s; }
.respira.suelta .sol, .respira.suelta .nube{ transition-duration:6s; }
.respira-texto{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; text-align:center; pointer-events:none;
  font:700 clamp(1.5rem, 5.2vw, 2.1rem)/1 var(--mano); color:var(--tinta); z-index:2; translate:0 6%;
}
.respira-texto small{ display:block; font:700 .72rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; margin-top:8px; }
@media (max-width:860px){ .respira-grid{ grid-template-columns:1fr; } }

/* Cómo empezamos: tres cuentas en el mismo hilo */
.pasos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3vw, 44px); }
.pasos li{ position:relative; }
.cuenta{
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%; margin-bottom:22px;
  background:var(--hilo); color:var(--hoja); border:2px solid var(--tinta);
  font:italic 400 2.2rem/1 var(--serif); box-shadow:3px 3px 0 var(--tinta);
}
.pasos h3{ font-size:1.6rem; }
.pasos p{ color:var(--tinta-2); margin:0; }
.enfoque{ margin-top:clamp(48px, 6vw, 76px); display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.caja{ position:relative; background:var(--hoja); border:2px solid var(--tinta); border-radius:var(--radio); padding:30px; box-shadow:5px 5px 0 var(--tinta); }
.caja:nth-child(2){ background:var(--mostaza-clara); }
.caja p{ color:var(--tinta-2); }
.caja p:last-child{ margin:0; }
@media (max-width:860px){
  .pasos{ grid-template-columns:1fr; gap:34px; }
  .pasos li{ display:grid; grid-template-columns:62px 1fr; column-gap:20px; }
  .cuenta{ grid-row:span 2; margin:0; }
  .enfoque{ grid-template-columns:1fr; }
}

/* Sesiones: boletos con su talón */
.sesiones{ background:var(--tinta); color:var(--hoja); }
.sesiones .etiqueta{ color:#c9cde0; }
.sesiones .numerada .etiqueta::before, .sesiones .etiqueta::before{ color:var(--mostaza); }
.sesiones h2{ color:var(--hoja); }
.sesiones .cabeza{ position:relative; }
.nota-precios{ position:absolute; right:-150px; top:24px; color:var(--mostaza); rotate:6deg; display:flex; align-items:flex-start; gap:4px; margin:0; }
.nota-precios .flecha{ rotate:30deg; margin-top:18px; }
.modos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:26px; }
.modo{ display:flex; flex-direction:column; color:var(--tinta); }
.modo-arriba{ position:relative; background:var(--hoja); border-radius:16px 16px 0 0; padding:28px 30px 26px; border-bottom:2.5px dashed var(--linea); }
.modo-arriba::before, .modo-arriba::after{ content:""; position:absolute; bottom:-15px; width:28px; height:28px; border-radius:50%; background:var(--tinta); }
.modo-arriba::before{ left:-14px; }
.modo-arriba::after{ right:-14px; }
.modo:nth-child(2) .modo-arriba{ background:var(--mostaza-clara); }
.modo-abajo{ background:var(--hoja); border-radius:0 0 16px 16px; padding:24px 30px 30px; flex:1; display:flex; flex-direction:column; }
.modo-tipo{ display:flex; align-items:center; gap:12px; margin:0; font:750 1.5rem/1 var(--display); font-variation-settings:"wdth" 88; letter-spacing:-.02em; }
.modo-tipo svg{ width:34px; height:34px; color:var(--hilo); }
.precio{ font:800 clamp(3rem, 6vw, 3.8rem)/1 var(--display); font-variation-settings:"wdth" 86; letter-spacing:-.025em; margin:18px 0 0; }
.precio small{ font:600 1rem var(--display); color:var(--tinta-2); letter-spacing:0; }
.precio-consulta{ font-size:2rem; }
.modo ul{ padding:0; margin:0 0 26px; list-style:none; display:grid; gap:9px; color:var(--tinta-2); }
.modo li{ position:relative; padding-left:24px; }
.modo li::before{ content:""; position:absolute; left:2px; top:.62em; width:9px; height:9px; border-radius:50%; border:2px solid var(--hilo); }
.modo .btn{ margin-top:auto; align-self:flex-start; }
.pago{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 34px; color:#d9dcea; }
.pago b{ color:var(--mostaza); font-weight:700; margin-right:6px; }
@media (max-width:1240px){ .nota-precios{ position:static; margin:6px 0 0; rotate:-3deg; } .nota-precios .flecha{ display:none; } }

/* Dudas */
.preguntas-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 6vw, 90px); align-items:start; }
.preguntas-grid .cabeza{ position:sticky; top:110px; }
.preguntas-grid .cabeza .nota{ rotate:-5deg; display:inline-block; margin-top:6px; font-size:1.8rem; }
.pregunta{ border-bottom:2px solid var(--tinta); }
.pregunta:first-child{ border-top:2px solid var(--tinta); }
.pregunta summary{
  list-style:none; cursor:pointer; position:relative; padding:22px 56px 22px 0;
  font:700 1.25rem/1.3 var(--display); letter-spacing:-.01em; transition:color .25s;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::before, .pregunta summary::after{
  content:""; position:absolute; right:12px; top:50%; width:18px; height:2.6px; border-radius:2px; background:var(--hilo);
  transition:transform .45s var(--suave);
}
.pregunta summary::after{ transform:rotate(90deg); }
.pregunta[open] summary::after{ transform:rotate(0); }
.pregunta[open] summary::before{ transform:rotate(180deg); }
.pregunta summary:hover{ color:var(--hilo-osc); }
.pregunta::details-content{ block-size:0; overflow:hidden; transition:block-size .45s var(--suave), content-visibility .45s allow-discrete; }
.pregunta[open]::details-content{ block-size:auto; }
.respuesta{ padding:0 48px 20px 0; color:var(--tinta-2); }
@media (max-width:860px){
  .preguntas-grid{ grid-template-columns:1fr; }
  .preguntas-grid .cabeza{ position:static; }
}

/* Contacto */
.contacto{
  position:relative; overflow:clip; isolation:isolate;
  background:var(--tinta); color:var(--hoja); border-radius:28px;
  padding:clamp(36px, 6vw, 76px); display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px, 5vw, 70px);
  box-shadow:8px 8px 0 var(--hilo);
}
.contacto h2{ color:var(--hoja); font-size:clamp(3.2rem, 9vw, 6.4rem); font-weight:800; font-variation-settings:"wdth" 86; letter-spacing:-.028em; }
.contacto .etiqueta{ color:#c9cde0; }
.contacto .etiqueta::before{ color:var(--mostaza) !important; }
.contacto p{ color:#dcdfeb; max-width:30em; }
.contacto .acciones{ margin-bottom:0; }
.contacto .btn-lleno{ border-color:var(--hoja); box-shadow:4px 4px 0 var(--mostaza); }
@media (hover:hover){ .contacto .btn-lleno:hover{ box-shadow:7px 7px 0 var(--mostaza); } }
.datos{ list-style:none; margin:0; padding:0; display:grid; gap:20px; align-content:center; }
.datos li{ display:grid; grid-template-columns:28px 1fr; gap:12px; }
.datos svg{ width:22px; height:22px; margin-top:3px; color:var(--mostaza); }
.datos b{ display:block; color:#fff; font-weight:700; }
.datos span, .datos a{ color:#dcdfeb; overflow-wrap:anywhere; }
.datos a:hover{ color:#fff; }
.contacto .ph{ color:#3d3206; }
@media (max-width:860px){ .contacto{ grid-template-columns:1fr; box-shadow:5px 5px 0 var(--hilo); } }
.crisis{
  margin-top:28px; border:2px dashed var(--tinta-2); border-radius:var(--radio);
  padding:18px 22px; display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start;
}
.crisis svg{ width:24px; height:24px; color:var(--hilo-osc); margin-top:2px; }
.crisis p{ margin:0; }

/* Pie: su nombre, grande */
.pie{ position:relative; padding:20px 0 54px; color:var(--tinta-2); font-size:.95rem; overflow:clip; }
.pie-firma{
  font:800 clamp(3rem, 11vw, 9.2rem)/.88 var(--display); font-variation-settings:"wdth" 84; letter-spacing:-.03em;
  color:var(--tinta); margin:0 0 26px; padding-top:30px; border-top:2px solid var(--tinta);
}
.pie-fila{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 40px; align-items:center; }
.pie p{ margin:0; }
.pie-nav{ display:flex; gap:24px; }
.pie-nav a{ color:var(--tinta); font-weight:600; padding:6px 0; }
.pie-nota{ margin-top:18px !important; font-size:.9rem; }
.pie-nota .mano{ font-size:1.55rem; margin-right:8px; }

/* Privacidad */
.legal{ padding:clamp(48px, 8vw, 96px) 0; }
.legal-texto{ max-width:760px; }
.legal h1{ font-size:clamp(2.6rem, 6vw, 4.2rem); font-weight:800; }
.legal h2{ font-size:1.6rem; margin-top:2em; }
.legal p{ color:var(--tinta-2); }
.legal-intro{ font-size:1.2rem; color:var(--tinta) !important; }
.legal-nota{ margin-top:3em; font-size:.9rem; }

/* ---------- Eventos ---------- */
.eventos-seccion{ background:var(--papel-2); }
.eventos-lista{ display:grid; gap:22px; }
.evento-tarjeta{
  position:relative; display:grid; grid-template-columns:88px minmax(0, 1fr); gap:24px; align-items:start;
  background:var(--hoja); border:2px solid var(--tinta); border-radius:var(--radio); padding:22px 26px 22px 22px;
  box-shadow:5px 5px 0 var(--tinta);
  transition-property:opacity, translate, transform, box-shadow;
  transition-duration:.9s, .9s, .3s, .3s;
  transition-timing-function:var(--suave);
  transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
}
.evento-tarjeta.con-imagen{ grid-template-columns:88px minmax(0, 1fr) 150px; }
.evento-fecha{
  display:grid; justify-items:center; gap:2px; padding:10px 0 12px; border-radius:12px;
  background:var(--hilo-osc); color:#fff; text-align:center; rotate:-3deg; box-shadow:3px 3px 0 var(--tinta);
}
.evento-mes{ font:750 .78rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; }
.evento-fecha b{ font:800 2.7rem/1 var(--display); font-variation-settings:"wdth" 82; }
.evento-semana{ font:700 1.25rem/1 var(--mano); }
.evento-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 10px; font-size:.92rem; font-weight:600; color:var(--tinta-2); }
.evento-etiqueta{ background:var(--mostaza-clara); border:1.5px solid var(--tinta); border-radius:999px; padding:3px 11px; color:var(--tinta); font:750 .76rem/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.evento-ahora{ background:var(--hilo-osc); color:#fff; border-radius:999px; padding:3px 11px; font:750 .76rem/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.evento-tarjeta h3{ font-size:clamp(1.4rem, 2.6vw, 1.75rem); margin:0 0 .3em; }
.evento-enlace{ color:var(--tinta); text-decoration:none; }
.evento-enlace::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.evento-tarjeta:has(.evento-enlace:focus-visible){ outline:3px solid var(--mostaza); outline-offset:4px; }
.evento-enlace:focus-visible{ outline:none; box-shadow:none; }
.evento-resumen{ color:var(--tinta-2); margin:0 0 14px; }
.evento-datos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0; font-weight:650; }
.evento-costo{ background:var(--tinta); color:var(--hoja); border-radius:8px; padding:3px 11px; }
.evento-costo.es-gratis{ background:var(--mostaza); color:var(--tinta); }
.evento-datos .nota{ font-size:1.55rem; }
.evento-miniatura{ width:150px; aspect-ratio:4/5; object-fit:cover; max-width:none; border:7px solid #fff; border-bottom-width:22px; box-shadow:0 14px 24px -14px rgba(29,35,64,.6); rotate:3deg; justify-self:end; }
@media (hover:hover){
  .evento-tarjeta:hover{ transform:translate(-3px, -3px); box-shadow:8px 8px 0 var(--tinta); }
}
@media (max-width:640px){
  .evento-tarjeta, .evento-tarjeta.con-imagen{ grid-template-columns:64px minmax(0, 1fr); gap:16px; padding:18px 18px 18px 16px; }
  .evento-fecha b{ font-size:2rem; }
  .evento-miniatura{ display:none; }
}
.eventos-vacio{ border:2px dashed var(--tinta-3); border-radius:var(--radio); padding:22px 24px; color:var(--tinta-2); margin:0; }
.eventos-mas{ margin:32px 0 0; }

/* La página de eventos */
.eventos-portada{ padding:clamp(40px, 7vw, 90px) 0 10px; overflow-x:clip; }
.titular-medio{ font-size:clamp(2.6rem, 6.4vw, 5.2rem); }
.eventos-portada .intro, .nada .intro{ max-width:38em; color:var(--tinta-2); font-size:clamp(1.08rem, 1.5vw, 1.22rem); }
.eventos-bloque{ padding:clamp(40px, 6vw, 74px) 0; overflow-x:clip; }
.eventos-titulo{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; font-size:clamp(2rem, 4vw, 2.8rem); }
.eventos-titulo .nota{ font-size:1.6rem; rotate:-3deg; display:inline-block; }
.eventos-pasados{ background:var(--papel-2); }
.pasados-lista{ list-style:none; padding:0; margin:0; border-top:2px solid var(--tinta); }
.pasado-fila{ display:grid; grid-template-columns:150px minmax(0, 1fr) auto; gap:6px 18px; align-items:baseline; padding:16px 4px; border-bottom:1px solid var(--linea); }
.pasado-fecha{ font:700 .82rem/1.3 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); }
.pasado-fila a{ font-weight:700; font-size:1.12rem; color:var(--tinta); }
.pasado-fila a:hover{ color:var(--hilo-osc); }
.pasado-tipo{ font-size:.92rem; color:var(--tinta-2); }
@media (max-width:640px){ .pasado-fila{ grid-template-columns:1fr; } }

/* La ficha de un evento: el texto y, al costado, el boleto con lo práctico */
.evento{ padding:clamp(26px, 5vw, 56px) 0 clamp(64px, 8vw, 110px); overflow-x:clip; }   /* la polaroid entra girada y Chromium guarda ese ancho de más */
.volver-eventos{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:14px; font-weight:700; color:var(--tinta); text-decoration:none; }
.volver-eventos svg{ width:20px; height:20px; transition:translate .3s var(--suave); }
.volver-eventos:hover svg{ translate:-4px 0; }
.evento-grid{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, .9fr); gap:clamp(30px, 5vw, 72px); align-items:start; }
.evento-titulo{ font-size:clamp(2.5rem, 5.8vw, 4.6rem); font-weight:800; font-variation-settings:"wdth" 84; letter-spacing:-.028em; line-height:.96; margin:.15em 0 .4em; overflow-wrap:anywhere; }
.evento-cuerpo .intro{ font-size:clamp(1.12rem, 1.6vw, 1.28rem); color:var(--tinta-2); line-height:1.55; }
.evento-foto{ --giro:-2deg; max-width:420px; margin:28px 0 36px; padding-bottom:14px; justify-self:start; }
.evento-foto .polaroid-foto img{ width:100%; height:100%; object-fit:cover; max-width:none; }
.evento-descripcion p{ color:var(--tinta-2); }
.evento-descripcion p:first-child{ color:var(--tinta); }
.evento-bloque-texto{ margin-top:34px; }
.evento-bloque-texto h2{ font-size:1.55rem; }
.evento-bloque-texto p{ color:var(--tinta-2); }
.evento-incluye{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.evento-incluye li{ position:relative; padding-left:32px; }
.evento-incluye li::before{
  content:""; position:absolute; left:0; top:.2em; width:22px; height:22px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4432b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13c3 2 4 4 5 6 3-7 7-11 11-14'/%3E%3C/svg%3E");
}
.evento-boleto{ position:sticky; top:100px; background:var(--hoja); border:2px solid var(--tinta); border-radius:var(--radio); padding:26px; box-shadow:7px 7px 0 var(--tinta); }
.boleto-datos{ margin:0 0 22px; }
.boleto-datos div{ padding:12px 0; border-bottom:2px dashed var(--linea); }
.boleto-datos div:first-child{ padding-top:0; }
.boleto-datos dt, .boleto-subtitulo{ font:650 .78rem/1.2 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin:0 0 6px; }
.boleto-datos dd{ margin:0; font-weight:650; font-size:1.08rem; overflow-wrap:anywhere; }
.boleto-datos .boleto-costo{ font:800 2.2rem/1 var(--display); font-variation-settings:"wdth" 84; letter-spacing:-.02em; }
.btn-ancho{ width:100%; white-space:normal; text-align:center; }
.evento-pie-boton{ font-size:.92rem; color:var(--tinta-2); margin:12px 0 0; text-align:center; }
.evento-aviso{ font-weight:650; margin:0 0 14px; }
.evento-aviso-fuerte{ color:var(--hilo-osc); font-size:1.15rem; }
.boleto-pago{ margin-top:22px; }
.boleto-pago p:last-child{ margin:0; color:var(--tinta-2); }
.boleto-calendario{ margin-top:22px; padding-top:18px; border-top:2px solid var(--tinta); display:flex; flex-wrap:wrap; gap:4px 18px; }
.boleto-calendario .boleto-subtitulo{ width:100%; }
.boleto-calendario a{ display:inline-flex; align-items:center; min-height:36px; font-weight:700; }
.sello-pasado{
  position:absolute; top:-20px; right:-14px; rotate:12deg; z-index:2;
  font:700 1.9rem/1 var(--mano); color:var(--hilo-osc); background:var(--hoja);
  border:3px solid var(--hilo-osc); border-radius:10px; padding:6px 16px;
}
@media (max-width:900px){
  .evento-grid{ grid-template-columns:1fr; }
  .evento-boleto{ position:relative; top:auto; }
}
@media (max-width:440px){ .sello-pasado{ right:-6px; } }

/* La 404 */
.nada{ padding:clamp(40px, 8vw, 110px) 0; }
.nada-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px, 5vw, 70px); align-items:center; }
.nada-hilo{ width:100%; max-width:380px; overflow:visible; fill:none; stroke:var(--hilo); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.nada-hilo path{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar 2s cubic-bezier(.5,0,.3,1) .2s forwards; }
@media (max-width:760px){ .nada-grid{ grid-template-columns:1fr; } .nada-hilo{ max-width:240px; } }

/* ---------- El hilo: una sola línea que baja por toda la página ---------- */
.hilo{ position:absolute; top:0; left:0; width:100%; height:0; z-index:4; pointer-events:none; overflow:hidden; }
#hilo-camino{ fill:none; stroke:var(--hilo); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
#aguja path{ stroke:#6b6f82; stroke-width:2.2; stroke-linecap:round; }
#aguja ellipse{ fill:none; stroke:#6b6f82; stroke-width:1.3; }
.hilo.quieto #aguja{ display:none; }

/* ==========================================================================
   Agendar: el diálogo de tres pasos
   ========================================================================== */
.agenda{
  padding:0; border:2px solid var(--tinta); border-radius:24px; background:var(--papel); color:var(--tinta);
  width:min(660px, calc(100vw - 32px)); max-width:none; max-height:min(800px, calc(100dvh - 32px));
  box-shadow:10px 10px 0 var(--tinta); overflow:hidden;
}
.agenda::backdrop{ background:rgba(29,35,64,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.agenda[open]{ animation:agenda-entra .5s cubic-bezier(.2,.9,.3,1.1); }
.agenda[open]::backdrop{ animation:velo .4s ease; }
@keyframes agenda-entra{ from{ opacity:0; translate:0 24px; rotate:-1.5deg; } }
@keyframes velo{ from{ opacity:0; } }
.agenda-form{ display:flex; flex-direction:column; max-height:min(800px, calc(100dvh - 32px)); }
.agenda-cabeza{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:18px 24px 18px; }
.agenda-paso{ margin:0; font:700 1.6rem/1 var(--mano); color:var(--hilo-osc); }
.agenda-cerrar{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:2px solid var(--tinta); background:var(--hoja); cursor:pointer; transition:rotate .4s var(--suave); }
.agenda-cerrar svg{ width:20px; height:20px; }
@media (hover:hover){ .agenda-cerrar:hover{ rotate:90deg; } }
.agenda-progreso{ position:absolute; left:24px; right:24px; bottom:0; height:4px; border-radius:4px; background:var(--papel-2); overflow:hidden; }
.agenda-progreso span{ display:block; height:100%; width:33.33%; background:var(--hilo); border-radius:inherit; transition:width .6s var(--suave); }
.agenda-cuerpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:26px 24px 10px; }
.paso{ border:0; margin:0; padding:0; min-width:0; }
.paso > legend{ float:left; width:100%; padding:0; margin:0 0 8px; }
.paso > legend + *{ clear:both; }
.paso-titulo{ display:block; font:800 clamp(1.8rem, 5vw, 2.4rem)/1.04 var(--display); font-variation-settings:"wdth" 88; letter-spacing:-.02em; }
.paso-titulo:focus{ outline:none; box-shadow:none; }
.paso.adelante{ animation:paso-adelante .5s var(--suave); }
.paso.atras{ animation:paso-atras .5s var(--suave); }
@keyframes paso-adelante{ from{ opacity:0; translate:36px 0; } }
@keyframes paso-atras{ from{ opacity:0; translate:-36px 0; } }
.ayuda{ color:var(--tinta-2); margin:0 0 20px; }
.opcional{ font-weight:400; color:var(--tinta-2); font-size:.88em; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.chips + .chips{ margin-top:10px; }
.chips-extra{ padding-top:14px; margin-top:16px !important; border-top:2px dashed var(--linea); }
.nota-vale{ font-size:1.5rem; rotate:-6deg; margin-left:2px; }
.chip{ position:relative; display:inline-flex; }
.chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.chip span{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:10px 18px;
  border-radius:999px; border:2px solid var(--tinta); background:var(--hoja); font-weight:600; font-size:.98rem;
  transition:background .2s, color .2s, transform .25s var(--suave), box-shadow .25s var(--suave);
}
.chip span::before{
  content:""; width:0; height:14px; margin-right:-8px; opacity:0;
  background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  transition:width .25s var(--suave), margin .25s var(--suave), opacity .2s;
}
.chip input:checked + span{ background:var(--hilo-osc); color:#fff; box-shadow:3px 3px 0 var(--tinta); transform:translate(-1px, -1px); }
.chip input:checked + span::before{ width:14px; margin-right:0; opacity:1; }
.chip input:focus-visible + span{ outline:3px solid var(--mostaza); outline-offset:2px; }
.chip input:active + span{ transform:scale(.96); }
@media (hover:hover){ .chip input:not(:checked):hover + span{ background:var(--mostaza-clara); } }

.grupo{ border:0; margin:0 0 24px; padding:0; min-width:0; }
.grupo > legend{ float:left; width:100%; padding:0; margin:0 0 12px; font-weight:700; }
.grupo > legend + *{ clear:both; }
.opciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.opcion{ position:relative; display:block; }
.opcion input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.opcion-caja{
  display:flex; flex-direction:column; gap:4px; height:100%; padding:16px 16px 14px;
  border:2px solid var(--tinta); border-radius:16px; background:var(--hoja);
  transition:background .2s, box-shadow .25s var(--suave), transform .25s var(--suave);
}
.opcion-caja svg{ width:28px; height:28px; color:var(--hilo); margin-bottom:6px; }
.opcion-caja b{ font-weight:700; }
.opcion-caja small{ color:var(--tinta-2); font-size:.88rem; line-height:1.35; }
.opcion input:checked + .opcion-caja{ background:var(--mostaza-clara); box-shadow:4px 4px 0 var(--tinta); transform:translate(-2px, -2px); }
.opcion input:focus-visible + .opcion-caja{ outline:3px solid var(--hilo); outline-offset:3px; }
@media (hover:hover){ .opcion input:not(:checked):hover + .opcion-caja{ background:#fff; } }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:22px; }
.campo-ancho{ grid-column:1 / -1; }
.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.campos .campo{ margin:0; }
.campo label{ font-weight:700; font-size:.95rem; }
.campo input, .campo textarea{
  width:100%; min-height:50px; padding:12px 14px; border-radius:12px;
  border:2px solid var(--tinta); background:var(--hoja); color:var(--tinta);
  font:inherit; font-size:1rem; transition:box-shadow .2s;
}
.campo textarea{ resize:vertical; min-height:90px; }
.campo input:focus, .campo textarea:focus{ outline:none; box-shadow:4px 4px 0 var(--hilo); }
.campo [aria-invalid="true"]{ border-color:var(--hilo-osc); box-shadow:4px 4px 0 var(--hilo); }
.campo-otro{ margin-top:16px; animation:paso-adelante .4s var(--suave); }
@media (max-width:520px){ .campos{ grid-template-columns:1fr; } }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consentimiento{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; cursor:pointer; font-size:.95rem; color:var(--tinta-2); }
.consentimiento input{ width:22px; height:22px; margin:2px 0 0; accent-color:var(--hilo-osc); cursor:pointer; }
.consentimiento.invalido input{ outline:2px solid var(--hilo-osc); outline-offset:2px; }
.error{ min-height:1.4em; margin:14px 0 0; color:var(--hilo-osc); font-weight:700; font-size:.95rem; }
.error:empty{ margin:0; min-height:0; }
.error a{ color:inherit; }
.agenda-crisis{ font-size:.86rem; color:var(--tinta-2); margin:14px 0 0; padding-top:14px; border-top:2px dashed var(--linea); }
.agenda-pie{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px 20px; border-top:2px solid var(--tinta); background:var(--papel); }
.agenda-pie .btn-lleno{ min-width:150px; }
.agenda-pie .btn[disabled]{ opacity:.6; cursor:progress; }
.agenda-pie .invisible{ visibility:hidden; }

.paso-listo{ text-align:center; padding:12px 0 18px; }
.paso-listo:focus{ outline:none; box-shadow:none; }
.listo-marca{ width:120px; height:120px; margin:0 auto 18px; }
.listo-aro{ fill:var(--mostaza-clara); stroke:var(--tinta); stroke-width:3; stroke-dasharray:327; stroke-dashoffset:327; animation:trazar 1s var(--suave) .1s forwards; transform:rotate(-90deg); transform-origin:center; }
.listo-check{ fill:none; stroke:var(--hilo); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; stroke-dashoffset:70; animation:trazar .6s var(--suave) .8s forwards; }
.paso-listo p{ color:var(--tinta-2); max-width:28em; margin-inline:auto; }
.paso-listo .paso-titulo{ margin-bottom:10px; }
.paso-listo > *:not(svg){ animation:subir .8s var(--suave) both; }
.paso-listo > h2{ animation-delay:.9s; }
.paso-listo > p{ animation-delay:1.05s; }
.paso-listo > p + p{ animation-delay:1.2s; }

@media (max-width:600px){
  .agenda{ width:100vw; height:100dvh; max-height:100dvh; border-radius:0; margin:0; border:0; box-shadow:none; }
  .agenda-form{ height:100dvh; max-height:100dvh; }
  .agenda[open]{ animation:agenda-sube .55s cubic-bezier(.2,.9,.3,1); }
  @keyframes agenda-sube{ from{ translate:0 100%; } }
  .agenda-cabeza{ padding:14px 16px; }
  .agenda-progreso{ left:16px; right:16px; }
  .agenda-cuerpo{ padding:22px 16px 10px; }
  .agenda-pie{ padding:12px 16px calc(14px + env(safe-area-inset-bottom)); }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  html{ scroll-behavior:auto; }
  .banda-pista, .sello{ animation:none !important; }
  /* El ejercicio de respiración es contenido: sin moverse, sólo cambia la luz */
  .sol{ transition:opacity 1s !important; opacity:.55; }
  .respira.inhala .sol, .respira.sosten .sol{ transform:none; translate:0 10%; opacity:1; }
  .respira .nube{ transform:none !important; }
  .respira .nube-2{ transform:scaleX(-1) !important; }
}