:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18312e;background:#f5f6f2;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}header{max-width:1100px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d9e1d8}.brand{font-size:19px;letter-spacing:2px;font-weight:850;color:#18312e;text-decoration:none}.brand span{font-weight:400}.tag{font-size:13px;color:#57716a}main{max-width:1040px;margin:auto;padding:0 32px}.intro{padding:70px 0 36px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:750;color:#507365}h1{font-size:clamp(38px,6vw,68px);line-height:1.08;letter-spacing:-2px;margin:20px 0 24px}h2{font-size:28px;letter-spacing:-.8px;margin:8px 0 22px}.lead{font-size:19px;line-height:1.65;max-width:660px;color:#4a625b}p,li{line-height:1.75}p{margin:12px 0}li{padding-left:6px;margin:12px 0}.prepare{background:#e7ecdf;border-radius:14px;padding:20px 24px;margin:30px 0 0;max-width:650px}.prepare p{font-size:14px;margin:6px 0 0}nav{display:flex;gap:10px;flex-wrap:wrap;padding:14px 0 32px}nav a{background:white;border:1px solid #dbe3d8;border-radius:30px;padding:10px 15px;color:#365d50;text-decoration:none;font-size:13px}section{scroll-margin-top:20px;display:grid;grid-template-columns:70px 1fr;gap:16px;background:white;border:1px solid #e0e5dc;border-radius:20px;padding:34px;margin:0 0 20px}.step{font-size:25px;color:#799284;font-weight:350;padding-top:5px}.content{max-width:730px}.content>.eyebrow{margin-top:0}.button{display:inline-block;background:#244f3f;border-radius:8px;color:white;text-decoration:none;padding:13px 19px;font-weight:650;margin:8px 0}.note{color:#63736b;font-size:13px;line-height:1.7}.operator,.important{background:#f0f4ec;border-left:3px solid #91ac80;padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0}.operator p,.important p{font-size:14px;margin-bottom:0}.important{background:#fff6e4;border-color:#d2aa58}.platform{display:flex;gap:10px;margin-bottom:20px}.platform button{font:inherit;border:1px solid #cbd9cb;border-radius:8px;background:white;color:#35594b;padding:10px 20px;cursor:pointer}.platform button[aria-pressed=true]{background:#244f3f;color:white;border-color:#244f3f}footer{padding:38px 0 55px;color:#617367;font-size:14px}footer strong{color:#284c3f}footer span{font-size:12px}.checks{padding-left:22px}a:focus-visible,button:focus-visible{outline:3px solid #b49342;outline-offset:4px}[hidden]{display:none!important}@media(max-width:600px){header{padding:20px}.tag{max-width:130px;text-align:right;font-size:11px}main{padding:0 16px}.intro{padding-top:36px}h1{letter-spacing:-1.5px}.lead{font-size:17px}section{padding:22px;grid-template-columns:1fr;gap:4px}.step{font-size:18px}h2{font-size:25px}nav{gap:8px}nav a{font-size:12px}.prepare{padding:18px}}

details{border:1px solid #dbe3d8;border-radius:10px;padding:16px 20px;margin:24px 0}summary{cursor:pointer;font-weight:650;line-height:1.6}details[open] summary{margin-bottom:14px}details p,details li{font-size:14px}summary:focus-visible{outline:3px solid #b49342;outline-offset:4px}

.prepare+.prepare{margin-top:12px}

/* Refinamiento: lectura, orientación y estados */
:root{--ink:#18312e;--ink-soft:#4a625b;--brand:#244f3f;--brand-deep:#18312e;--ground:#f5f6f2;--line:#dbe3d8;--sage:#91ac80;--nav-h:60px}
::selection{background:#cfe0c4;color:var(--ink)}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}
h1,h2{text-wrap:balance}p,li{text-wrap:pretty}
.content{max-width:68ch}
.content>h2{margin:0 0 6px}
.deck{margin:0 0 22px;font-size:15px;color:#57716a}
.step{color:#5f7a6c}
section{scroll-margin-top:calc(var(--nav-h) + 16px)}
.intro .operator,.intro .prepare{max-width:650px}
.operator,.important{border:1px solid #d3dfcc;border-radius:12px;background:#f0f4ec}
.important{border-color:#ecd7a8;background:#fff6e4}
.operator strong,.important strong{display:block;color:var(--brand-deep)}
.important strong{color:#5d4a1f}
.button{transition:background-color .15s ease-out,transform .15s ease-out}.button:hover{background:var(--brand-deep)}.button:active{transform:translateY(1px)}
.platform button{transition:background-color .15s ease-out,border-color .15s ease-out}.platform button[aria-pressed=false]:hover{border-color:var(--sage);background:#f7f9f4}
summary{border-radius:6px}summary:hover{color:var(--brand)}
nav.steps{position:sticky;top:0;z-index:5;margin:0 -32px 20px;padding:12px 32px;background:var(--ground);border-bottom:1px solid transparent;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;transition:border-color .2s ease-out}
nav.steps::-webkit-scrollbar{display:none}
nav.steps.stuck{border-bottom-color:var(--line)}
nav.steps a{flex:none;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
nav.steps a:hover{border-color:var(--sage);color:var(--brand-deep)}
nav.steps a[aria-current=step]{background:var(--brand);border-color:var(--brand);color:white}
@media(max-width:600px){nav.steps{margin:0 -16px 16px;padding:10px 16px}.deck{font-size:14px}}
@media(min-width:1200px){.anim{top:calc(var(--nav-h) + 24px)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.button,.platform button,nav.steps,nav.steps a{transition:none}}
.prepare code{font-size:13px;overflow-wrap:anywhere;background:#fff8;padding:1px 5px;border-radius:5px}

/* Animaciones por paso (diseñadas en Claude Design) */
.content{min-width:0}.anim{display:none;margin:0;width:100%;max-width:480px;aspect-ratio:480/300;position:relative;overflow:hidden;border-radius:20px}.anim-stage{width:480px;height:300px;transform-origin:0 0;transform:scale(var(--anim-scale,1))}.anim-panel{width:480px;height:300px;box-sizing:border-box;padding:24px 28px;background:#f0f4ec;border-radius:20px;color:#18312e;display:flex;flex-direction:column;overflow:hidden}.anim-panel span,.anim-panel div{line-height:normal}
.anim .fx1{gap: 10px;position: relative}
.anim .fx2{font-size: 11px;letter-spacing: 1.6px;font-weight: 750;color: #507365}
.anim .fx3{flex-grow: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px}
.anim .fx4{display: flex;align-items: center;gap: 10px;background: white;border: 1px solid #dbe3d8;border-radius: 40px;padding: 10px 20px}
.anim .fx5{font-weight: 650;font-size: 15px}
.anim .fx6{position: relative;width: 12px;height: 46px}
.anim .fx7{position: absolute;left: 3px;top: 0;width: 6px;height: 6px;border-radius: 3px;background: #91ac80}
.anim .fx8{display: flex;gap: 14px}
.anim .fx9{background: #244f3f;color: white;border-radius: 12px;padding: 12px 16px;display: flex;align-items: center;gap: 8px;font-size: 14px;font-weight: 600}
.anim .fx10{position: absolute;right: 26px;top: 20px;width: 34px;height: 34px;border-radius: 17px;background: #91ac80;display: flex;align-items: center;justify-content: center}
.anim .fx11{font-size: 13px;color: #4a625b;text-align: center}
.anim .fx12{gap: 10px}
.anim .fx13{flex-grow: 1;display: flex;align-items: center;justify-content: space-between;position: relative;padding: 0 12px}
.anim .fx14{display: flex;flex-direction: column;align-items: center;gap: 8px;width: 110px}
.anim .fx15{width: 64px;height: 64px;border-radius: 32px;background: #244f3f;display: flex;align-items: center;justify-content: center}
.anim .fx16{font-weight: 650;font-size: 14px}
.anim .fx17{font-size: 12px;color: #57716a}
.anim .fx18{position: absolute;left: 118px;top: 44px;background: white;border: 1px solid #dbe3d8;border-radius: 8px;padding: 6px 10px;display: flex;align-items: center;gap: 6px;font-size: 12px;color: #365d50}
.anim .fx19{position: absolute;left: 130px;right: 130px;top: 82px;border-top: 2px dashed #c7d4c2}
.anim .fx20{width: 64px;height: 64px;border-radius: 32px;background: white;border: 2px solid #91ac80;display: flex;align-items: center;justify-content: center}
.anim .fx21{font-size: 11px;background: #244f3f;color: white;border-radius: 20px;padding: 3px 10px}
.anim .fx22{font-size: 13px;color: #4a625b;text-align: center;display: flex;align-items: center;justify-content: center;gap: 6px}
.anim .fx23{gap: 12px}
.anim .fx24{flex-grow: 1;display: flex;gap: 16px;align-items: stretch}
.anim .fx25{flex: 1 1 0;background: white;border: 1px solid #dbe3d8;border-radius: 14px;padding: 12px;display: flex;flex-direction: column;gap: 10px}
.anim .fx26{display: flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 650}
.anim .fx27{background: #f5f6f2;border-radius: 10px;padding: 10px 12px;display: flex;flex-direction: column;gap: 6px}
.anim .fx28{font-size: 11px;color: #57716a}
.anim .fx29{font-size: 20px;font-weight: 700}
.anim .fx30{display: flex;align-items: center;gap: 8px}
.anim .fx31{font-size: 12px;color: white;border-radius: 6px;padding: 5px 10px;font-weight: 600}
.anim .fx32{font-size: 11px;color: #244f3f;background: #e7ecdf;border-radius: 20px;padding: 3px 9px}
.anim .fx33{width: 150px;display: flex;flex-direction: column;gap: 10px}
.anim .fx34{background: white;border: 1px solid #dbe3d8;border-radius: 14px;padding: 12px;display: flex;flex-direction: column;gap: 6px;flex-grow: 1}
.anim .fx35{display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 650}
.anim .fx36{font-size: 11px;line-height: 1.5;background: #fff6e4;border-radius: 8px;padding: 6px 8px;color: #5d4a1f}
.anim .fx37{gap: 12px;position: relative}
.anim .fx38{flex-grow: 1;background: white;border: 1px solid #dbe3d8;border-radius: 14px;overflow: hidden;display: flex;flex-direction: column}
.anim .fx39{display: flex;align-items: center;gap: 8px;padding: 10px 14px;border-bottom: 1px solid #e0e5dc;font-size: 13px;font-weight: 650}
.anim .fx40{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));font-size: 11px;color: #57716a;font-weight: 650;padding: 8px 14px;background: #f5f6f2}
.anim .fx41{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));font-size: 12px;padding: 8px 14px;border-bottom: 1px solid #eef1ea}
.anim .fx42{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));font-size: 12px;padding: 8px 14px}
.anim .fx43{position: absolute;right: 22px;top: 18px;display: flex;align-items: center;gap: 6px;background: #244f3f;color: white;border-radius: 20px;padding: 5px 12px;font-size: 11px;font-weight: 600}
.anim .fx44{flex-grow: 1;display: flex;align-items: center;justify-content: center;gap: 28px}
.anim .fx45{width: 118px;height: 200px;border-radius: 22px;background: #18312e;padding: 8px;box-sizing: border-box}
.anim .fx46{width: 100%;height: 100%;border-radius: 15px;background: #f5f6f2;position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center}
.anim .fx47{position: absolute;top: 22px;left: 8px;right: 8px;background: white;border: 1px solid #dbe3d8;border-radius: 10px;padding: 7px 8px;font-size: 10px;line-height: 1.35}
.anim .fx48{display: block;color: #57716a}
.anim .fx49{color: #244f3f;font-weight: 650;text-decoration: underline}
.anim .fx50{position: absolute;top: 34px;left: 40px;width: 30px;height: 30px;border-radius: 15px;background: #91ac80}
.anim .fx51{position: absolute;left: 14px;right: 14px;top: 96px;display: flex;flex-direction: column;gap: 6px;align-items: center}
.anim .fx52{font-size: 10px;color: #57716a}
.anim .fx53{width: 100%;height: 5px;border-radius: 3px;background: #e0e5dc;overflow: hidden}
.anim .fx54{height: 5px;background: #244f3f;border-radius: 3px}
.anim .fx55{position: absolute;top: 72px;display: flex;flex-direction: column;align-items: center;gap: 6px}
.anim .fx56{width: 38px;height: 38px;border-radius: 19px;background: #244f3f;display: flex;align-items: center;justify-content: center}
.anim .fx57{font-size: 11px;font-weight: 650}
.anim .fx58{position: absolute;bottom: 12px;left: 8px;right: 8px;background: #fff6e4;border-radius: 8px;padding: 6px 8px;font-size: 10px;color: #5d4a1f}
.anim .fx59{display: flex;flex-direction: column;gap: 10px;max-width: 220px;font-size: 13px;line-height: 1.45}
.anim .fx60{display: flex;gap: 8px;align-items: flex-start}
.anim .fx61{flex: none;width: 22px;height: 22px;border-radius: 11px;background: white;border: 1px solid #c7d4c2;font-size: 11px;font-weight: 700;display: flex;align-items: center;justify-content: center}
.anim .fx62{flex-grow: 1;background: white;border: 1px solid #dbe3d8;border-radius: 14px;padding: 16px 18px;display: flex;flex-direction: column;justify-content: center;gap: 12px;font-size: 14px}
.anim .fx63{display: flex;align-items: center;gap: 10px}
.anim .fx64{flex: none;width: 22px;height: 22px;border-radius: 6px;border: 2px solid #c7d4c2;display: flex;align-items: center;justify-content: center}
.anim .fx65{align-self: center;background: #244f3f;color: white;border-radius: 20px;padding: 6px 14px;font-size: 13px;font-weight: 650}
@keyframes rise{0%,8%{opacity:0;transform:translateY(14px)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes flow{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@keyframes pop{0%,55%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.12)}72%,88%{transform:scale(1);opacity:1}100%{opacity:0}}
.a-cloud{animation:rise 5s ease-out infinite}
.a-srv{animation:rise 5s ease-out infinite;animation-delay:.5s}
.a-db{animation:rise 5s ease-out infinite;animation-delay:.9s}
.a-dot{animation:flow 1.4s linear infinite}
.a-dot2{animation:flow 1.4s linear infinite;animation-delay:.7s}
.a-ok{animation:pop 5s ease-out infinite}
@keyframes fly{0%,10%{transform:translateX(0);opacity:0}18%{opacity:1}50%{transform:translateX(200px);opacity:1}58%,100%{transform:translateX(200px);opacity:0}}
@keyframes badge{0%,55%{opacity:0;transform:translateY(8px)}65%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes glow{0%,55%{box-shadow:0 0 0 0 rgba(145,172,128,0)}62%{box-shadow:0 0 0 10px rgba(145,172,128,.35)}75%,100%{box-shadow:0 0 0 0 rgba(145,172,128,0)}}
.a-mail{animation:fly 4.5s ease-in-out infinite}
.a-badge{animation:badge 4.5s ease-out infinite}
.a-glow{animation:glow 4.5s ease-out infinite}
@keyframes card{0%,6%{opacity:0;transform:translateY(24px)}16%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tap{0%,42%{transform:scale(1);background:#244f3f}46%{transform:scale(.94);background:#18312e}50%,100%{transform:scale(1);background:#244f3f}}
@keyframes tag{0%,52%{opacity:0;transform:translateX(-8px)}60%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes priv{0%,62%{opacity:0;transform:translateY(8px)}72%,90%{opacity:1;transform:none}100%{opacity:0}}
.a-card{animation:card 5s ease-out infinite}
.a-tap{animation:tap 5s ease-out infinite}
.a-tag{animation:tag 5s ease-out infinite}
.a-priv{animation:priv 5s ease-out infinite}
@keyframes r1{0%,10%{opacity:0;transform:translateX(-10px)}18%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r2{0%,26%{opacity:0;transform:translateX(-10px)}34%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r3{0%,42%{opacity:0;transform:translateX(-10px)}50%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes share{0%,58%{opacity:0;transform:scale(.8)}66%,90%{opacity:1;transform:none}100%{opacity:0}}
.a-r1{animation:r1 5s ease-out infinite}
.a-r2{animation:r2 5s ease-out infinite}
.a-r3{animation:r3 5s ease-out infinite}
.a-share{animation:share 5s ease-out infinite}
@keyframes bubble{0%,6%{opacity:0;transform:translateY(10px)}14%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes ripple{0%,22%{opacity:0;transform:scale(.3)}26%{opacity:.5;transform:scale(1)}32%,100%{opacity:0;transform:scale(1.6)}}
@keyframes load{0%,36%{width:0;opacity:0}38%{opacity:1}62%{width:100%;opacity:1}66%,100%{width:100%;opacity:0}}
@keyframes loadlbl{0%,36%{opacity:0}40%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes done{0%,64%{opacity:0;transform:scale(.6)}72%{opacity:1;transform:scale(1.08)}78%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes yape{0%,78%{opacity:0;transform:translateX(16px)}84%,94%{opacity:1;transform:none}100%{opacity:0}}
.a-bubble{animation:bubble 6s ease-out infinite}
.a-ripple{animation:ripple 6s ease-out infinite}
.a-load{animation:load 6s ease-in-out infinite}
.a-loadlbl{animation:loadlbl 6s ease-out infinite}
.a-done{animation:done 6s ease-out infinite}
.a-yape{animation:yape 6s ease-out infinite}
@keyframes c1{0%,10%{background:white;border-color:#c7d4c2}16%,92%{background:#244f3f;border-color:#244f3f}100%{background:white;border-color:#c7d4c2}}
@keyframes c2{0%,28%{background:white;border-color:#c7d4c2}34%,92%{background:#244f3f;border-color:#244f3f}100%{background:white;border-color:#c7d4c2}}
@keyframes c3{0%,46%{background:white;border-color:#c7d4c2}52%,92%{background:#244f3f;border-color:#244f3f}100%{background:white;border-color:#c7d4c2}}
@keyframes c4{0%,64%{background:white;border-color:#c7d4c2}70%,92%{background:#244f3f;border-color:#244f3f}100%{background:white;border-color:#c7d4c2}}
@keyframes fin{0%,74%{opacity:0;transform:translateY(8px)}82%,92%{opacity:1;transform:none}100%{opacity:0}}
.a-c1{animation:c1 6s ease-out infinite}
.a-c2{animation:c2 6s ease-out infinite}
.a-c3{animation:c3 6s ease-out infinite}
.a-c4{animation:c4 6s ease-out infinite}
.a-fin{animation:fin 6s ease-out infinite}
@media (prefers-reduced-motion: reduce){.a-cloud,.a-srv,.a-db,.a-dot,.a-dot2,.a-ok{animation:none}}
@media (prefers-reduced-motion: reduce){.a-mail,.a-badge,.a-glow{animation:none}}
@media (prefers-reduced-motion: reduce){.a-card,.a-tap,.a-tag,.a-priv{animation:none}}
@media (prefers-reduced-motion: reduce){.a-r1,.a-r2,.a-r3,.a-share{animation:none}}
@media (prefers-reduced-motion: reduce){.a-bubble,.a-ripple,.a-load,.a-loadlbl,.a-yape{animation:none;opacity:0}.a-done{animation:none}}
@media (prefers-reduced-motion: reduce){.a-c1,.a-c2,.a-c3,.a-c4{animation:none;background:#244f3f;border-color:#244f3f}.a-fin{animation:none}}
@media(min-width:1200px){header{max-width:1340px}main{max-width:1280px}section:has(.anim){grid-template-columns:70px minmax(0,1fr) 440px;column-gap:28px}.anim{display:block;position:sticky;top:24px;align-self:start}}

/* Rediseño · Noche y papel: portada verde noche con franjas, pasos en tarjetas blancas, acento lima (inspirado en la referencia Finora). */
@font-face{font-family:Urbanist;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/urbanist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--night:#0b2a1c;--night-2:#123d29;--leaf:#1f7a45;--lime:#b6f36a;--lime-ink:#0b2a1c;--ink:#10271b;--ink-soft:#4a5f53;--ground:#eef2ee;--line:#dde6df;--brand:#1f7a45;--brand-deep:#0b2a1c;--sage:#8cc59c;font-family:Urbanist,system-ui,sans-serif;color:var(--ink);background:var(--ground)}
body{overflow-x:clip;background:var(--ground);container-type:inline-size}
::selection{background:var(--lime);color:var(--lime-ink)}

/* Portada */
header{max-width:none;padding:22px max(32px,calc((100vw - 1040px)/2));border:0;background:var(--night);position:relative;z-index:1}
.brand{color:#fff;font-weight:800;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:10px}
.brand::before{content:"";width:22px;height:22px;border-radius:7px;background:var(--lime)}
.brand span{color:#cfe8d6}
.tag{color:#a9c7b4;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;padding:7px 14px}
/* Full-bleed sin desbordar: 100cqw mide el body sin la barra de scroll; sin soporte, la portada queda dentro de main. */
.intro{max-width:none;padding-top:56px;padding-bottom:64px;color:#fff;background:repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 56px),linear-gradient(180deg,var(--night) 0%,var(--night-2) 62%,#1d5a39 100%);margin-inline:calc(50% - 50cqw);padding-inline:calc(50cqw - 50%)}
h1{font-weight:600;letter-spacing:-.035em;font-size:clamp(40px,6vw,72px);line-height:1.02;margin:0 0 22px;max-width:15ch}
.lead{color:#cfe1d5;max-width:60ch}
.intro .operator,.intro .prepare{background:#ffffff0d;border:1px solid #ffffff21;border-radius:20px;color:#e6f1ea;max-width:none;display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:28px 0 0;padding:20px 22px}
.intro .prepare{margin-left:12px}
.intro .operator strong,.intro .prepare strong{color:var(--lime)}
.intro .operator p,.intro .prepare p{color:#c4d8cb}

/* Navegación de pasos */
nav.steps{background:var(--ground);padding:16px 32px;margin:0 -32px 24px;gap:8px}
nav.steps a{background:#fff;border:1px solid var(--line);border-radius:999px;color:#2f5a42;font-weight:600;font-size:14px;padding:10px 16px}
nav.steps a:hover{border-color:var(--leaf);color:var(--night)}
nav.steps a[aria-current=step]{background:var(--night);border-color:var(--night);color:var(--lime)}
nav.steps.stuck{border-bottom-color:var(--line);box-shadow:0 8px 20px -14px #0b2a1c55}

/* Pasos */
section{background:#fff;border:0;border-radius:28px;padding:40px;box-shadow:0 1px 2px #0b2a1c0d,0 12px 32px -18px #0b2a1c2e;grid-template-columns:76px 1fr}
.step{width:56px;height:56px;border-radius:50%;background:var(--leaf);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;padding:0;font-variant-numeric:tabular-nums}
h2{font-weight:600;letter-spacing:-.025em;font-size:32px;color:var(--night)}
.deck{display:inline-block;background:#e6f4e9;color:#2f6b45;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600;margin:8px 0 22px}
p,li{color:#2b3f33}
ol li::marker{color:var(--leaf);font-weight:700}

.button{background:var(--lime);color:var(--lime-ink);border-radius:999px;padding:13px 22px;font-weight:700}
.button:hover{background:#a4e553}
.operator{background:#f0f7f1;border:1px solid #d3e8d9;border-radius:18px}
.operator strong{color:var(--night)}
.important{background:#fff6e2;border:1px solid #f0dcaa;border-radius:18px}
.note{color:#5a6c61}

details{border:1px solid var(--line);border-radius:18px;padding:0;background:#fbfcfb}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;color:var(--night);font-weight:600}
summary::-webkit-details-marker{display:none}
summary{position:relative;padding-right:72px;background:radial-gradient(circle 15px at calc(100% - 37px) 50%,#fff 14px,#b9d8c1 14.5px,#b9d8c1 15px,transparent 15.5px)}
summary::after{content:"";position:absolute;right:33px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid var(--leaf);border-bottom:2px solid var(--leaf);transform:rotate(45deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
details[open] summary{background:radial-gradient(circle 15px at calc(100% - 37px) 50%,var(--lime) 15px,transparent 15.5px)}
details[open] summary::after{transform:translateY(4px) rotate(225deg);border-color:var(--night)}
details[open] summary{margin:0}
details>*:not(summary){margin-left:22px;margin-right:22px}
details>*:last-child{margin-bottom:20px}

.platform button{border-radius:999px;font-weight:600;padding:10px 22px}
.platform button[aria-pressed=true]{background:var(--night);border-color:var(--night);color:var(--lime)}

.anim-panel{background:#eef6ef;border-radius:24px}
.anim{border-radius:24px}

/* Cierre */
footer{background:var(--night);color:#bcd3c4;border-radius:28px;padding:40px;margin:36px 0 40px}
footer strong{color:#fff;font-size:22px;font-weight:600;display:block}
footer p{color:#bcd3c4}
footer a{color:var(--lime)}
footer span{color:#86a593}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

@media(min-width:1200px){header{padding-left:max(32px,calc((100vw - 1280px)/2 + 32px));padding-right:max(32px,calc((100vw - 1280px)/2 + 32px))}}
@media(max-width:600px){header{padding:18px 16px}.tag{background:none;border:0;padding:0}.intro{padding-top:36px;padding-bottom:40px}.intro .operator,.intro .prepare{width:100%;margin:14px 0 0}section{padding:24px 20px;border-radius:22px;grid-template-columns:minmax(0,1fr);gap:4px}.step{width:44px;height:44px;font-size:16px;margin-bottom:10px}h2{font-size:26px}nav.steps{margin:0 -16px 16px;padding:12px 16px}footer{padding:28px 22px}}
@media (prefers-reduced-motion:reduce){summary::after{transition:none}}

.prepare{background:#eef3ea;border:1px solid #dfe8da;border-radius:18px}