: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}
.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}}