:root{
  --papel:        #132B23;
  --papel-alto:   #183328;
  --tinta:        #EFE1C9;
  --tinta-suave:  #C8B99D;
  --raya:         #2D473B;
  --verde:        #214337;
  --verde-claro:  #2B5646;
  --rojo:         #B36A5B;
  --ambar:        #C9A876;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto:   'IBM Plex Sans', system-ui, sans-serif;
  --dato:    'IBM Plex Mono', ui-monospace, monospace;
  --r: 4px;
  --sombra: 0 1px 2px rgba(7,18,14,.18), 0 10px 28px rgba(7,18,14,.18);
  --max: 1120px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{font-family:var(--texto);background:var(--papel);color:var(--tinta);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.02), transparent 0 26%), radial-gradient(circle at 80% 0%, rgba(201,168,118,.05), transparent 0 22%)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.topbar{border-bottom:1px solid var(--raya);background:#173126;position:sticky;top:0;z-index:20}

.topbar .wrap{display:flex;align-items:center;gap:16px;height:60px}

.marca{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;cursor:pointer;background:none;border:0;color:var(--tinta)}

.marca span{color:var(--ambar)}

.topnav{margin-left:auto;display:flex;gap:4px}

.btn{font-family:var(--texto);font-size:14px;font-weight:600;padding:10px 18px;border-radius:var(--r);border:1px solid transparent;background:none;color:var(--tinta);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}

.btn:hover{background:rgba(201,168,118,.08)}

.btn:active{transform:translateY(1px)}

.btn:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}

.btn-principal{background:var(--ambar);color:#132B23;border-color:var(--ambar)}

.btn-principal:hover{background:#D3B586}

.btn-linea{border-color:rgba(201,168,118,.35);background:#173126;color:var(--tinta)}

.btn-linea:hover{border-color:var(--ambar);background:#1B382D}

.btn-peligro{background:rgba(179,106,91,.15);border-color:rgba(179,106,91,.38);color:#F0D8D2}

.btn-peligro:hover{background:rgba(179,106,91,.22)}

.btn-fantasma{color:var(--tinta-suave)}

.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.btn-grande{padding:16px 28px;font-size:16px}

.topnav .btn{padding:8px 14px}

.topnav .btn[aria-current="true"]{background:rgba(201,168,118,.14);color:var(--ambar);border-color:rgba(201,168,118,.3)}

.eyebrow{font-family:var(--dato);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ambar)}

a{color:var(--ambar)}

::selection{background:rgba(201,168,118,.26);color:var(--tinta)}

.ayuda{font-size:12px;color:var(--tinta-suave);margin-top:5px}

.hero{padding:28px 24px 40px;min-height:100vh;max-width:1220px;margin:0 auto;display:flex;flex-direction:column}

.welcome-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:52px}

.welcome-brand{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--tinta)}

.welcome-brand span{color:var(--ambar)}

.welcome-top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

#p-bienvenida .welcome-top-actions .btn-demo-top{background:var(--ambar);color:#132B23;border-color:var(--ambar);padding-left:22px;padding-right:22px}

#p-bienvenida .welcome-top-actions .btn-demo-top:hover{background:#D8B07A;border-color:#D8B07A}

#p-bienvenida .welcome-top-actions .btn-login-top{background:transparent;color:var(--tinta);border-color:rgba(239,225,201,.34);padding-left:22px;padding-right:22px}

#p-bienvenida .welcome-top-actions .btn-login-top:hover{background:rgba(239,225,201,.08);border-color:rgba(239,225,201,.5)}

.hero-centro{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}

.hero .eyebrow{margin-bottom:26px}

@media(max-width:720px){.hero{padding:22px 18px 28px}.welcome-topbar{align-items:flex-start;flex-direction:column;margin-bottom:36px}.welcome-top-actions{width:100%}.welcome-top-actions .btn{flex:1;justify-content:center}.hero-centro{padding-bottom:32px}}

.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.92;color:var(--tinta)}

.hero .l1{display:block;font-size:clamp(56px,11vw,124px)}

.hero .l2{display:block;font-size:clamp(19px,3.2vw,34px);font-weight:400;color:var(--tinta);letter-spacing:-.01em;margin:14px 0 6px}

.ia-destacada{color:var(--ambar);font-weight:800;font-style:italic;letter-spacing:.02em;position:relative;padding:0 .06em}

.ia-destacada::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.22em;background:rgba(201,168,118,.20);z-index:-1;border-radius:2px}

.hero .l3{display:block;font-size:clamp(72px,15vw,180px);color:var(--ambar)}

.hero .acciones{display:flex;gap:14px;justify-content:center;margin-top:44px;flex-wrap:wrap}

#p-bienvenida .acciones .btn-principal{background:#EFE1C9;color:#132B23;border-color:#EFE1C9}

#p-bienvenida .acciones .btn-principal:hover{background:#F5E9D3;border-color:#F5E9D3}

.hero .pie{margin-top:36px;font-size:13px;color:var(--tinta-suave)}

.hero-centro{min-height:calc(100vh - 168px)}

.scroll-cue{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:11px 16px;border:1px solid rgba(239,225,201,.18);border-radius:999px;color:var(--tinta);text-decoration:none;font-size:13px;background:rgba(239,225,201,.04);transition:background .18s,border-color .18s,transform .18s}

.scroll-cue:hover{background:rgba(239,225,201,.08);border-color:rgba(239,225,201,.34);transform:translateY(-1px)}

.scroll-cue .flecha{font-size:16px;line-height:1;color:var(--ambar)}

.landing-scroll{display:grid;gap:26px;padding:8px 0 10px}

.story-panel{background:rgba(16,36,29,.62);border:1px solid rgba(239,225,201,.12);border-radius:22px;padding:30px;box-shadow:var(--sombra)}

.story-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;text-align:left}

.story-intro h2,.story-step-copy h3,.landing-video-copy h3,.tutorial-copy h3,.final-cta h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02}

.story-intro h2{font-size:clamp(34px,4vw,54px);color:var(--tinta);margin-bottom:14px}

.story-intro p{font-size:15.5px;color:var(--tinta-suave);max-width:590px}

.story-bullets{display:grid;gap:12px}

.story-bullets li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--tinta);font-size:14px}

.story-bullets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ambar);display:block;flex:none;margin-top:7px}

.story-steps{display:grid;gap:20px}

.story-step{display:grid;grid-template-columns:.92fr 1.08fr;gap:26px;align-items:center;text-align:left}

.story-step.reverse{grid-template-columns:1.08fr .92fr}

.story-step.reverse .story-step-copy{order:2}

.story-step.reverse .story-visual{order:1}

.story-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(201,168,118,.25);background:rgba(201,168,118,.06);color:var(--ambar);font-family:var(--dato);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}

.story-step-copy h3{font-size:clamp(28px,3vw,42px);color:var(--tinta);margin-bottom:12px}

.story-step-copy p{font-size:15px;color:var(--tinta-suave);max-width:470px}

.story-step-copy .mini-list{display:grid;gap:10px;margin-top:18px}

.story-step-copy .mini-list div{display:flex;gap:10px;color:var(--tinta);font-size:14px}

.story-step-copy .mini-list div::before{content:"✓";color:var(--ambar);font-weight:700}

.story-visual{background:linear-gradient(180deg,#F6F0E6,#ECE3D3);border:1px solid rgba(239,225,201,.16);border-radius:20px;padding:22px;color:#171311;position:relative;overflow:hidden;min-height:290px}

.story-visual.dark{background:linear-gradient(180deg,#183327,#12281F);color:var(--tinta);border-color:rgba(239,225,201,.12)}

.visual-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}

.visual-top .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #E7DDCC;color:#59554F;font-size:12px;font-weight:700}

.story-visual.dark .visual-top .chip{background:rgba(239,225,201,.06);border-color:rgba(239,225,201,.12);color:var(--tinta)}

.visual-top .chip i{width:8px;height:8px;border-radius:50%;background:#507F66;display:block}

.upload-zone{border:1px dashed #CDBD9F;border-radius:18px;padding:26px;text-align:center;background:#FBF7F0}

.upload-zone strong{display:block;font-size:18px;margin-bottom:8px}

.upload-zone p{font-size:13px;color:#6F6A62}

.file-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}

.file-pills span{padding:8px 12px;border-radius:999px;background:#EFE6D8;border:1px solid #DFD0BA;font-size:12px;font-weight:700;color:#3A352E}

.form-mock{display:grid;gap:12px}

.form-mock .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.form-mock .field{background:rgba(239,225,201,.06);border:1px solid rgba(239,225,201,.12);border-radius:14px;padding:14px}

.form-mock .field .k{font-size:11px;font-family:var(--dato);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:6px}

.form-mock .field .v{font-size:15px;color:var(--tinta);font-weight:700}

.progress-stack{display:grid;gap:12px}

.progress-card{background:rgba(239,225,201,.05);border:1px solid rgba(239,225,201,.12);border-radius:16px;padding:14px}

.progress-card .top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}

.progress-card .name{font-size:14px;font-weight:700;color:var(--tinta)}

.progress-card .status{font-size:12px;color:var(--tinta-suave)}

.progress-bar{height:10px;border-radius:999px;background:rgba(239,225,201,.08);overflow:hidden}

.progress-bar span{display:block;height:100%;border-radius:999px;background:#EFE1C9}

.result-sheet{display:grid;gap:14px}

.result-sheet .excel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}

.result-sheet .excel-title{font-size:22px;font-weight:800;color:#171311}

.result-sheet .excel-tag{padding:7px 10px;border-radius:999px;background:#163126;color:#EFE1C9;font-size:12px;font-weight:700}

.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.result-grid .box{background:#FFF;border:1px solid #E7DDCC;border-radius:14px;padding:14px}

.result-grid .box .n{font-family:var(--dato);font-size:22px;color:#171311;font-weight:700}

.result-grid .box .t{font-size:12px;color:#6C665C;margin-top:4px}

.download-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#FFF;border:1px solid #E7DDCC;border-radius:14px;padding:14px}

.download-row span{font-weight:700}

.download-row .btn-mini{padding:9px 12px;border-radius:999px;background:#173126;color:#EFE1C9;font-size:12px;font-weight:700}

.landing-video{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center;text-align:left}

.landing-video-copy h3{font-size:clamp(28px,3vw,42px);color:var(--tinta);margin-bottom:12px}

.landing-video-copy p,.tutorial-copy p,.final-cta p{font-size:15px;color:var(--tinta-suave)}

.video-box{position:relative;min-height:360px;background:linear-gradient(145deg,#F6F0E6,#E7DCC8);border:1px solid rgba(239,225,201,.16);border-radius:22px;overflow:hidden;padding:26px;display:flex;align-items:flex-end}

.video-box .screen{width:100%;height:100%;min-height:260px;border-radius:18px;border:1px solid #DCCDB5;background:linear-gradient(180deg,#173126,#12261E);display:grid;place-items:center;position:relative;overflow:hidden}

.video-box .screen::before{content:"";position:absolute;inset:18px;border:1px dashed rgba(239,225,201,.18);border-radius:16px}

.play-button{width:90px;height:90px;border-radius:50%;background:#EFE1C9;display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.2);position:relative}

.play-button::before{content:"";border-left:22px solid #173126;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}

.video-label{position:absolute;left:26px;top:26px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #E7DDCC;color:#575149;font-size:12px;font-weight:700}

.video-caption{position:absolute;left:26px;bottom:26px;color:#EFE1C9;font-size:14px;max-width:290px}

.tutorial-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start;text-align:left}

.tutorial-steps{display:grid;gap:14px}

.tutorial-step{background:rgba(239,225,201,.06);border:1px solid rgba(239,225,201,.12);border-radius:18px;padding:18px}

.tutorial-step .top{display:flex;gap:12px;align-items:center;margin-bottom:10px}

.tutorial-step .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(201,168,118,.14);color:var(--ambar);font-family:var(--dato);font-weight:700}

.tutorial-step strong{font-size:16px;color:var(--tinta)}

.tutorial-step p{font-size:13.5px;color:var(--tinta-suave)}

.tutorial-links{display:grid;gap:12px}

.tutorial-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:#F6F0E6;border:1px solid rgba(239,225,201,.16);border-radius:16px;color:#171311}

.tutorial-link .meta{font-size:12px;color:#6B665D;margin-top:4px}

.tutorial-link .go{font-size:13px;font-weight:700;color:#173126}

.final-cta{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;text-align:left}

.final-cta h3{font-size:clamp(28px,3vw,40px);color:var(--tinta);margin-bottom:10px}

.final-cta .cta-actions{display:flex;gap:12px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease, transform .55s ease}

.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){.story-intro,.story-step,.story-step.reverse,.landing-video,.tutorial-grid,.final-cta{grid-template-columns:1fr}.story-step.reverse .story-step-copy,.story-step.reverse .story-visual{order:initial}.result-grid{grid-template-columns:1fr 1fr}.video-box{min-height:300px}.hero-centro{min-height:calc(100vh - 210px)}}

@media(max-width:720px){.story-panel{padding:22px}.result-grid{grid-template-columns:1fr}.form-mock .row{grid-template-columns:1fr}.landing-scroll{gap:18px}.scroll-cue{margin-top:18px}.video-box{padding:18px}.video-label,.video-caption{left:18px}.video-caption{bottom:18px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pill{font-family:var(--dato);font-size:10px;padding:3px 7px;border-radius:2px;letter-spacing:.06em;text-transform:uppercase}

.pill.cola{background:rgba(201,168,118,.18);color:var(--ambar)}

.pill.activo{background:rgba(201,168,118,.14);color:var(--ambar);display:inline-flex;align-items:center}

.pulso{width:10px;height:10px;border-radius:50%;background:var(--ambar);display:inline-block;margin-right:8px;animation:late 1.2s infinite}

.pill.activo .pulso{width:6px;height:6px;margin-right:6px}

@keyframes late{0%,100%{opacity:1}50%{opacity:.25}}