/* base compartida de las páginas cortas · design system principal */

/* El Llamado · design system principal · su toque: rosado + la señal (aros a lápiz que se abren) */
@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Variable.ttf);font-weight:100 1000;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-Italic.ttf);font-style:italic;font-display:swap}
@font-face{font-family:"Bloop";src:url(fonts/Bloop.ttf);font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-VF.ttf);font-weight:100 900;font-display:swap}
:root{--navy:#0E1E54;--cream:#FAF6F0;--pink:#F4C2D7;--butter:#F2E27A;--peri:#BFC8F6;--mute:#5C5C66;--soft:#2c3766;
  --title:"DM Sans",system-ui,sans-serif;--serif:"Instrument Serif","Times New Roman",serif;--hand:"Bloop","Comic Sans MS",cursive;--ui:"Inter",system-ui,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);--sh:0 18px 40px rgba(14,30,84,.13);--pad:clamp(18px,4vw,40px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--ui);font-size:1.06rem;font-weight:450;line-height:1.55;letter-spacing:-0.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em;text-wrap:pretty}p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--title);font-weight:800;letter-spacing:-0.05em;line-height:.95;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,5vw,3.5rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1}
.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.02em;font-size:1.14em}
.hl{background:linear-gradient(transparent 58%,var(--pink) 58%,var(--pink) 92%,transparent 92%) no-repeat;background-size:100% 100%}
.hl.b{background-image:linear-gradient(transparent 58%,var(--butter) 58%,var(--butter) 92%,transparent 92%)}
.js .hl{background-size:0 100%;transition:background-size .9s var(--ease) .35s}.js .in .hl,.js .hl.in{background-size:100% 100%}
.hand{font-family:var(--hand);letter-spacing:0;line-height:1.05}
.kicker{font-family:var(--hand);letter-spacing:0;font-size:1.35rem;display:inline-block;rotate:-2deg;margin-bottom:10px}
.lead{font-size:1.16rem;color:var(--soft);max-width:56ch}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--pad);position:relative}
section{padding-block:clamp(56px,8vw,104px);position:relative}
.navy{background:var(--navy);color:#fff}.navy .lead{color:rgba(255,255,255,.84)}.navy .ser{color:var(--pink)}
.rosa{background:var(--pink)}
.pen{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}
.pen.thin{stroke-width:3.5}
.js .draw path,.js .draw circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease) .2s}.js .draw.in path,.js .draw.in circle{stroke-dashoffset:0}
.js .rv{opacity:0;translate:0 24px;transition:opacity .6s,translate .7s var(--ease);transition-delay:calc(var(--i,0)*.09s)}.js .rv.in{opacity:1;translate:0 0}
.js .popin{opacity:0;scale:.6;transition:opacity .4s,scale .6s var(--pop);transition-delay:calc(var(--i,0)*.14s + .1s)}.js .in .popin,.js .popin.in{opacity:1;scale:1}
img.emj{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin:0 .06em}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .82rem var(--ui);letter-spacing:-0.02em;border-radius:999px;padding:7px 14px;background:var(--navy);color:#fff}
.pill.b{background:var(--butter);color:var(--navy)}.pill.w{background:#fff;color:var(--navy)}.pill.p{background:var(--pink);color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1.04rem var(--ui);letter-spacing:-0.03em;padding:17px 30px;border-radius:999px 999px 999px 8px;background:var(--navy);color:#fff;box-shadow:0 14px 30px rgba(14,30,84,.28);transition:translate .3s var(--pop),gap .3s var(--pop)}
.btn:hover{translate:0 -4px;gap:16px}
.btn.y{background:var(--butter);color:var(--navy)}
.link{font-weight:700;border-bottom:2.5px solid var(--navy);padding-bottom:2px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:10px}
.navy a:focus-visible{outline-color:var(--butter)}

nav.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:14px}
nav.top img{height:34px}
nav.top .links{display:flex;gap:20px;font-size:.92rem;font-weight:600;align-items:center}
nav.top .links a:not(.pill){opacity:.75}
@media(max-width:760px){nav.top .links a:not(.pill){display:none}}

/* ── faq ── */
.faq{max-width:780px;margin:34px auto 0;display:grid;gap:10px}
details{background:#fff;border-radius:22px;padding:4px 22px;box-shadow:0 8px 20px rgba(14,30,84,.07)}
summary{cursor:pointer;list-style:none;font-family:var(--title);font-weight:800;letter-spacing:-0.045em;font-size:1.18rem;line-height:1.1;padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;font-weight:500;transition:rotate .3s var(--pop)}
details[open] summary::after{rotate:45deg}
details p{color:var(--soft);padding-bottom:18px}
footer{text-align:center;font-size:.9rem;color:var(--mute);padding:34px 20px 50px}footer img{height:30px;margin:0 auto 12px}

/* dibujos a lápiz por sección (los pone ilustra.py) */
.deco{position:absolute;right:1%;top:-46px;width:104px;height:104px;overflow:visible;pointer-events:none;z-index:1;animation:decob 7s ease-in-out infinite;animation-delay:calc(var(--k,0)*-1.4s)}
.deco.l{right:auto;left:1%}
@keyframes decob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -10px;rotate:5deg}}
@media(max-width:860px){.deco{width:60px;height:60px;top:-34px;right:2%}.deco.l{left:auto;right:2%}}
@media (prefers-reduced-motion: reduce){.deco{animation:none}}