/* ============================================================
   Instructivo Sucursal Virtual ARSAT — hoja de estilos
   Las tipografías se cargan desde ../assets/fonts/
   ============================================================ */
@font-face{font-family:'Lato';src:url('../assets/fonts/Lato-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:'Lato';src:url('../assets/fonts/Lato-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}@font-face{font-family:'Lato';src:url('../assets/fonts/Lato-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

:root{--azul:#0091ce;--azul2:#0b7fb4;--azul-cl:#e8f4fb;--navy:#16233f;--oscuro:#1d3557;
      --gris:#5f6b7d;--bg:#f7f9fc;--linea:#e2e9f1;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{font-family:'Lato',system-ui,sans-serif;color:var(--oscuro);background:var(--bg);
     line-height:1.5;-webkit-font-smoothing:antialiased;
     min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;}
body.modo-paso .stage,body.modo-paso.modo-scroll .stage{flex:none;}
b{font-weight:900;} i{font-style:normal;color:var(--gris);}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px 60px;}

/* ---------- modo paso: alto fijo, sin scroll de página ---------- */
:root{--h-header:62px;--h-nav:86px;}
body.modo-paso{overflow-y:auto;padding-bottom:var(--h-nav);}
body.modo-paso .stage{min-height:calc(100vh - var(--h-header) - var(--h-nav));
  min-height:calc(100dvh - var(--h-header) - var(--h-nav));height:auto;
  display:flex;align-items:center;justify-content:center;padding:26px 22px;}
body.modo-paso .stage>div{margin:auto;width:100%;max-width:1200px;}
body.modo-paso .card{display:flex;}
/* vista comparadora: se permite scroll de página, la barra sigue fija abajo */
body.modo-paso.modo-scroll .card{display:block;}
body.modo-paso .grid{width:100%;}

body.modo-paso footer{display:none;}
.navbar{position:fixed;left:0;right:0;bottom:0;height:var(--h-nav);background:#fff;
        border-top:1px solid var(--linea);display:none;align-items:center;z-index:50;
        box-shadow:0 -6px 24px rgba(22,35,63,.05);}
body.modo-paso .navbar{display:flex;}
.navbar .inner{max-width:1200px;margin:0 auto;width:100%;padding:0 30px;
               display:flex;align-items:center;gap:16px;}
.navbar .medio{flex:1;text-align:center;font-size:13.5px;color:var(--gris);}
.navbar .medio b{color:var(--navy);}
.navbar .medio button{background:none;border:0;color:var(--azul);font-family:inherit;font-weight:900;
                      font-size:13.5px;cursor:pointer;text-decoration:underline;padding:0 0 0 6px;}

/* ---------- header ---------- */
header{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40;}
.hd{max-width:1240px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:16px;}
.hd .mark{height:24px;width:auto;display:block;}
.hd .div{width:1px;height:24px;background:#cfd8e4;}
.hd h1{font-size:16.5px;font-weight:700;margin:0;color:var(--navy);letter-spacing:.1px;}
.hd .right{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative;}
.nav-btn{background:var(--azul-cl);border:1px solid #cfe6f4;border-radius:11px;padding:9px 16px;
         font-family:inherit;font-size:14px;font-weight:900;color:var(--azul);cursor:pointer;
         display:flex;align-items:center;gap:7px;transition:.15s;}
.nav-btn:hover{background:#d9edf9;}
.nav-btn .car{font-size:10px;}
.nav-btn.ghost{background:#fff;border-color:#dbe3ee;color:var(--navy);}
.nav-btn.ghost:hover{border-color:var(--azul);color:var(--azul);}
.nav-btn.ghost svg{margin-top:-1px;}
.ayuda-btn{background:none;border:0;font-family:inherit;font-size:14px;color:var(--gris);cursor:pointer;
           display:flex;align-items:center;gap:8px;padding:6px;}
.ayuda-btn .q{width:22px;height:22px;border-radius:50%;background:var(--azul-cl);color:var(--azul);
              font-weight:900;font-size:12.5px;display:grid;place-items:center;}
.ayuda-btn:hover{color:var(--navy);}
.drop{position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--linea);border-radius:14px;
      box-shadow:0 16px 40px rgba(22,35,63,.14);padding:8px;min-width:310px;display:none;z-index:60;}
.drop.on{display:block;}
.drop .dh{font-size:11.5px;font-weight:900;color:var(--gris);letter-spacing:.7px;padding:8px 12px 6px;}
.drop button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;
             padding:10px 12px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;}
.drop button:hover:not(:disabled){background:var(--azul-cl);}
.drop button:disabled{color:#a9b4c4;cursor:not-allowed;}
.drop button small{display:block;font-weight:400;font-size:12.5px;color:var(--gris);margin-top:2px;}
.bar{height:4px;background:#e4eef5;}
.bar>div{height:100%;background:var(--azul);width:0;transition:width .35s ease;}

/* ---------- tarjeta de paso ---------- */
.card{background:#fff;border:1px solid var(--linea);border-radius:20px;overflow:hidden;
      box-shadow:0 10px 30px rgba(0,88,129,.07);}
.grid{display:grid;grid-template-columns:minmax(280px,400px) 1fr;}
.col-txt{padding:34px 32px;display:flex;flex-direction:column;justify-content:center;}
.pnum{display:inline-block;background:var(--azul);color:#fff;font-weight:900;font-size:13px;
      padding:5px 14px;border-radius:14px;letter-spacing:1px;margin-bottom:14px;}
.pnum.opt{background:#eaf7fd;color:var(--azul2);}
.col-txt h3{font-size:26px;font-weight:900;margin:0 0 10px;line-height:1.2;}
.baj{font-size:16px;margin:0 0 18px;}
ul.pl{list-style:none;margin:0;padding:0;}
ul.pl li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15.5px;}
ul.pl li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
                border-radius:50%;background:var(--azul);}
.tip{margin-top:20px;background:#eaf7fd;border-left:4px solid var(--azul);border-radius:0 10px 10px 0;
     padding:12px 16px;font-size:14.5px;}
.tip b{color:var(--azul2);}
.col-img{background:var(--bg);display:flex;align-items:center;justify-content:center;
         padding:30px 26px;border-left:1px solid var(--linea);overflow:hidden;}
.shot{position:relative;display:inline-block;max-width:100%;line-height:0;}
.shot img{max-width:100%;width:auto;height:auto;display:block;
          border:1px solid var(--linea);border-radius:12px;background:#fff;}
body.modo-paso .shot img{max-height:calc(100vh - var(--h-header) - var(--h-nav) - 148px);
                         max-height:calc(100dvh - var(--h-header) - var(--h-nav) - 148px);}
.shot img{cursor:zoom-in;}
.zoom{display:block;width:100%;margin-top:9px;background:none;border:0;color:var(--gris);
      font-family:inherit;font-size:12.5px;line-height:1.2;cursor:pointer;text-align:center;}
.zoom:hover{color:var(--azul);}
.hot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
     border:3px solid var(--azul);box-shadow:0 0 0 3px rgba(255,255,255,.9);pointer-events:none;}
.hot:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--azul);
           animation:pulso 1.8s ease-out infinite;}
@keyframes pulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* ---------- selector de caso ---------- */
.fork h3{font-size:24px;font-weight:900;text-align:center;margin:0 0 4px;color:var(--navy);}
.fork .sub{text-align:center;font-size:15px;margin:0 auto 18px;max-width:660px;color:var(--gris);}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
.opt{background:#fff;border:2px solid var(--linea);border-radius:16px;padding:14px;text-align:left;
     cursor:pointer;font-family:inherit;color:inherit;transition:border-color .2s,box-shadow .2s;}
.opt:hover{border-color:var(--azul);box-shadow:0 8px 22px rgba(0,145,206,.12);}
.opt .thumb{background:var(--bg);border-radius:10px;padding:9px;margin-bottom:12px;}
.opt img{width:100%;height:auto;display:block;border-radius:7px;border:1px solid var(--linea);}
.opt h4{font-size:16px;font-weight:900;margin:0 0 6px;line-height:1.25;color:var(--navy);}
.opt p{font-size:13.5px;margin:0;color:var(--gris);line-height:1.45;}
.opt.dis{opacity:.62;cursor:not-allowed;background:#fbfcfd;}
.opt.dis:hover{border-color:var(--linea);box-shadow:none;}
.opt .go{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:900;color:var(--azul);}
.badge{display:inline-block;background:#eef1f5;color:var(--gris);font-size:11.5px;font-weight:900;
       border-radius:10px;padding:4px 10px;margin-top:9px;letter-spacing:.5px;}
@media (max-width:1080px){ .opts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .opts{grid-template-columns:1fr;} }

/* ---------- final ---------- */
.fin{text-align:center;padding:46px 24px;margin:auto;}
.fin .ok{width:74px;height:74px;border-radius:50%;background:var(--azul);color:#fff;font-size:38px;
         line-height:74px;margin:0 auto 18px;font-weight:900;}
.fin .ok.alerta{background:#f4a259;}
.fin h3{font-size:30px;font-weight:900;color:var(--azul);margin:0 0 10px;}
.fin p{font-size:16.5px;max-width:820px;margin:0 auto 10px;text-wrap:balance;}
.fin p.una-linea{white-space:nowrap;max-width:none;}
@media (max-width:900px){ .fin p.una-linea{white-space:normal;max-width:620px;} }

/* ---------- navegación ---------- */
.nav{display:flex;align-items:center;gap:12px;margin-top:22px;}
.btn{font-family:inherit;font-size:15px;font-weight:900;border-radius:12px;padding:13px 26px;
     border:2px solid var(--azul);cursor:pointer;transition:.15s;}
.btn-p{background:var(--azul);color:#fff;} .btn-p:hover{background:var(--azul2);border-color:var(--azul2);}
.btn-s{background:#fff;color:var(--azul2);} .btn-s:hover{background:#eaf7fd;}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.nav .sp{margin-left:auto;}
.caso-tag{font-size:13.5px;font-weight:700;color:var(--gris);}
.caso-tag button{background:none;border:0;color:var(--azul2);font-family:inherit;font-weight:900;
                 font-size:13.5px;cursor:pointer;text-decoration:underline;padding:0 0 0 6px;}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(0,40,60,.88);display:none;align-items:center;
    justify-content:center;z-index:90;padding:30px;}
.lb.on{display:flex;}
.lb img{max-width:96%;max-height:92%;border-radius:10px;background:#fff;}
.lb button{position:absolute;top:20px;right:26px;background:#fff;border:0;border-radius:10px;
           padding:9px 16px;font-family:inherit;font-weight:900;cursor:pointer;color:var(--oscuro);}

footer{text-align:center;font-size:13px;color:var(--gris);padding:18px 20px 22px;margin-top:auto;}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px;padding:36px 0 20px;}
  .hero h2{font-size:40px;} .art{min-height:330px;}
  .hd h1{font-size:15px;} .nav-btn.ghost span{display:none;}
  .nav-btn{padding:8px 12px;font-size:13px;} .ayuda-btn span:not(.q){display:none;}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;}
  .col-img{border-left:0;border-top:1px solid var(--linea);order:-1;padding:20px;}
  .col-txt{padding:24px 22px;}
  .hero h2{font-size:29px;} .col-txt h3{font-size:22px;}
  .nav{flex-wrap:wrap;} .nav .sp{margin-left:0;width:100%;}
}


/* ---------- pantalla de documentación ---------- */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;
      max-width:1100px;margin:0 auto;align-items:start;}
.docg{background:#fff;border:1px solid #e1e7f0;border-top:4px solid var(--tc);border-radius:16px;
      padding:18px 20px;box-shadow:0 6px 20px rgba(22,35,63,.09);}
.docg .dh{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
.docg .ico{width:36px;height:36px;border-radius:10px;background:var(--tc);color:#fff;
           display:grid;place-items:center;flex:none;}
.docg .ico svg{width:19px;height:19px;stroke-width:2;}
.docg h4{font-size:15.5px;font-weight:900;color:var(--navy);margin:0;}
.docg .gn{font-size:12px;color:var(--gris);display:block;margin-top:2px;}
.docg ul{list-style:none;margin:0;padding:0;}
.docg li{padding:9px 0;border-top:1px solid #eef2f7;}
.docg li:first-child{border-top:0;padding-top:0;}
.docg li b{display:block;font-size:13.5px;font-weight:900;color:var(--navy);margin-bottom:2px;}
.docg li small{font-size:12.5px;color:#5f6b7d;line-height:1.4;display:block;}
.oblig{display:inline-block;background:#fff0d9;color:#8a5f10;font-size:10.5px;font-weight:900;
       border-radius:7px;padding:2px 7px;margin-left:5px;vertical-align:1px;letter-spacing:.3px;}
.docnota{max-width:1100px;margin:18px auto 0;text-align:center;font-size:13.5px;color:var(--gris);}
.doclink{display:flex;align-items:center;gap:9px;width:100%;margin-top:16px;background:var(--acc-cl);
         border:1px solid var(--linea);border-radius:11px;padding:11px 14px;cursor:pointer;
         font-family:inherit;font-size:13.5px;font-weight:900;color:var(--acc);text-align:left;}
.doclink svg{width:17px;height:17px;flex:none;}
.doclink:hover{border-color:var(--acc);}

/* opción recomendada en la bifurcación */
.bifcard .reco{display:inline-block;background:var(--acc);color:#fff;font-size:10.5px;font-weight:900;
               border-radius:7px;padding:2px 8px;margin-left:8px;letter-spacing:.4px;vertical-align:1px;}
.bifcard.rec{border-color:var(--acc);}

/* ---------- bifurcación dentro de un paso ---------- */
.bifurca{margin-top:18px;border-top:1px solid var(--linea);padding-top:16px;}
.bif-t{font-size:13px;font-weight:900;color:var(--gris);margin:0 0 11px;letter-spacing:.3px;}
.bifcard{display:flex;align-items:center;gap:12px;width:100%;background:#fff;
         border:1.5px solid var(--linea);border-radius:13px;padding:12px 14px;margin-bottom:10px;
         cursor:pointer;font-family:inherit;text-align:left;transition:.16s;}
.bifcard:hover{border-color:var(--acc);box-shadow:0 6px 18px rgba(22,35,63,.10);}
.bifcard.on{border-color:var(--acc);background:var(--acc-cl);box-shadow:0 6px 18px rgba(22,35,63,.10);}
.bifcard .ico{width:34px;height:34px;border-radius:10px;background:var(--acc-cl);color:var(--acc);
              display:grid;place-items:center;flex:none;}
.bifcard.on .ico{background:var(--acc);color:#fff;}
.bifcard .ico svg{width:18px;height:18px;stroke-width:2;}
.bifcard .tx{display:flex;flex-direction:column;line-height:1.32;min-width:0;}
.bifcard .tx b{font-size:14px;font-weight:900;color:var(--navy);}
.bifcard .tx small{font-size:12.5px;color:var(--gris);}
.bifcard .pz{margin-left:auto;flex:none;font-size:11.5px;font-weight:900;color:var(--acc);
             background:var(--acc-cl);border-radius:9px;padding:4px 9px;}
.bifcard.on .pz{background:#fff;}

/* ---------- aviso destacado dentro de un paso ---------- */
.aviso{display:flex;gap:11px;align-items:flex-start;background:#fff7e8;border:1px solid #f0d9a8;
       border-left:4px solid #e0a83a;border-radius:0 11px 11px 0;padding:12px 15px;margin-top:16px;
       font-size:13.5px;color:#7a5a1c;line-height:1.5;}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:#e0a83a;}
.aviso b{color:#5c430f;font-weight:900;}

.escape{display:block;width:100%;margin-top:14px;background:none;border:0;border-top:1px dashed var(--linea);
        padding:12px 0 0;font-family:inherit;font-size:13px;color:var(--gris);cursor:pointer;text-align:left;}
.escape b{color:var(--acc);font-weight:900;}
.escape:hover b{text-decoration:underline;}

/* ---------- pantalla de perfil ---------- */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);max-width:840px;
        margin:0 auto;}
.pcard{position:relative;background:#fff;border:1px solid #e1e7f0;border-top:4px solid var(--tc);
       border-radius:16px;padding:clamp(20px,3vh,30px) clamp(20px,2vw,28px);text-align:left;
       cursor:pointer;font-family:inherit;transition:.2s;
       box-shadow:0 6px 20px rgba(22,35,63,.09),0 1px 2px rgba(22,35,63,.05);}
.pcard:hover{box-shadow:0 16px 34px rgba(22,35,63,.16);transform:translateY(-4px);}
.pcard .ico{width:52px;height:52px;border-radius:14px;background:var(--tc);color:#fff;
            display:grid;place-items:center;margin-bottom:clamp(12px,2vh,18px);}
.pcard .ico svg{width:26px;height:26px;stroke-width:2;}
.pcard h4{font-size:clamp(17px,1.5vw,21px);font-weight:900;color:var(--navy);margin:0 0 7px;}
.pcard p{font-size:clamp(13px,1.1vw,15px);color:var(--gris);margin:0 0 14px;line-height:1.45;}
.pcard .go2{font-size:14px;font-weight:900;color:var(--tc);}
.atajo{display:block;margin:clamp(16px,2.6vh,26px) auto 0;background:none;border:0;
       font-family:inherit;font-size:14px;color:var(--gris);cursor:pointer;text-decoration:underline;}
.atajo:hover{color:var(--azul);}
.tcards.tres{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto;}
@media (max-width:820px){ .pcards{grid-template-columns:1fr;} .tcards.tres{grid-template-columns:1fr;} }

/* ---------- opciones al finalizar un recorrido ---------- */
.sig{margin-top:22px;border-top:1px solid var(--linea);padding-top:20px;}
.sig-t{font-size:14.5px;color:var(--gris);margin:0 0 14px;}
.sig-op{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.sigcard{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--linea);
         border-top:3px solid var(--tc);border-radius:14px;padding:13px 18px;cursor:pointer;
         font-family:inherit;text-align:left;transition:.18s;min-width:min(260px,100%);
         box-shadow:0 4px 14px rgba(22,35,63,.07);}
.sigcard:hover{border-color:var(--linea);border-top-color:var(--tc);
               box-shadow:0 12px 26px rgba(22,35,63,.14);transform:translateY(-2px);}
.sigcard .ico{width:38px;height:38px;border-radius:11px;background:var(--tc);color:#fff;
              display:grid;place-items:center;flex:none;}
.sigcard .ico svg{width:20px;height:20px;stroke-width:2;}
.sigcard .tx{display:flex;flex-direction:column;line-height:1.3;}
.sigcard .tx b{font-size:15px;font-weight:900;color:var(--navy);}
.sigcard .tx small{font-size:12.5px;color:var(--gris);}
.sigcard .fl{margin-left:auto;color:var(--tc);font-weight:900;font-size:17px;}
.cruce{display:block;margin:20px auto 0;background:var(--acc-cl);border:1px solid var(--linea);
       border-radius:12px;padding:11px 18px;font-family:inherit;font-size:13.5px;color:var(--gris);
       cursor:pointer;transition:.15s;}
.cruce b{color:var(--acc);font-weight:900;}
.cruce:hover{border-color:var(--acc);}

.volver-inicio{display:block;margin:16px auto 0;background:none;border:0;font-family:inherit;
               font-size:13.5px;color:var(--gris);cursor:pointer;text-decoration:underline;}
.volver-inicio:hover{color:var(--acc);}

/* ---------- nota de acceso previa ---------- */
.acceso{display:flex;gap:10px;align-items:flex-start;background:#f2f5fa;border:1px solid #e1e7f0;
        border-radius:11px;padding:11px 14px;margin-bottom:16px;font-size:13.5px;
        color:var(--gris);line-height:1.45;}
.acceso svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--acc);}
.acceso b{color:var(--navy);font-weight:900;}
.acceso button{display:block;background:none;border:0;padding:4px 0 0;font-family:inherit;
               font-size:13.5px;font-weight:900;color:var(--acc);cursor:pointer;text-align:left;}
.acceso button:hover{text-decoration:underline;}

/* ---------- relieve: fondo gris + superficies blancas ---------- */
body{background:#e9edf4;}
.card{background:#fff;border:1px solid #e1e7f0;box-shadow:0 6px 22px rgba(22,35,63,.09),
      0 1px 2px rgba(22,35,63,.05);}
.opt{box-shadow:0 4px 14px rgba(22,35,63,.07);border-color:#e1e7f0;}
.opt:hover{box-shadow:0 12px 28px rgba(22,35,63,.13);}
.opt .thumb{background:#f2f5fa;}
.navbar{box-shadow:0 -6px 24px rgba(22,35,63,.08);}

/* ---------- tarjetas de recorrido: color por sección ---------- */
.tcard{background:#fff;border:1px solid #e1e7f0;border-top:4px solid var(--tc);
       box-shadow:0 6px 20px rgba(22,35,63,.09),0 1px 2px rgba(22,35,63,.05);}
.tcard:hover{border-color:#e1e7f0;border-top-color:var(--tc);
             box-shadow:0 16px 34px rgba(22,35,63,.16);transform:translateY(-4px);}
.tcard .ico{background:var(--tc);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--tc) 38%,transparent);}
.tcard .ico svg{stroke-width:2;}
.tcard .num{color:var(--tc);opacity:.14;}
.tcard .req{color:#8d9aab;}
.tcard.dis{background:#f6f8fb;box-shadow:none;}
.tcard.dis .ico{box-shadow:none;}

/* la columna de captura mantiene el tinte del trámite, pero sobre superficie blanca */
.col-img{background:var(--acc-cl)!important;}

/* ---------- alto del pie ---------- */
:root{--h-foot:58px;}

/* ---------- home: entra sin scroll ---------- */
/* Antes esto era height + overflow:hidden. En un celular las cuatro tarjetas
   apiladas necesitan ~926px y el contenedor daba 547: los dos últimos trámites
   quedaban cortados y sin manera de llegar a ellos. Con min-height la pantalla
   se sigue viendo centrada y sin scroll cuando entra, y crece cuando no. */
body.modo-home .stage{min-height:calc(100vh - var(--h-header) - var(--h-foot));
  min-height:calc(100dvh - var(--h-header) - var(--h-foot));
  height:auto;flex:none;align-items:center;padding:18px 0;}
body.modo-home .wrap{padding-bottom:0;}
body.modo-home footer{padding:16px 20px;}
body.modo-home .menu-hero{padding-top:1.5vh;}

/* ---------- header oscuro ---------- */
:root{--navy-hd:#141c33;}
header{background:var(--navy-hd);border-bottom:0;}
.hd .mark{height:26px;}
.hd .div{background:rgba(255,255,255,.28);height:26px;}
.hd h1{color:#fff;font-weight:400;font-size:16.5px;letter-spacing:.1px;}
.hd .right{gap:22px;}
.nav-btn{background:transparent;border:0;color:rgba(255,255,255,.92);font-weight:400;
         font-size:14.5px;padding:8px 2px;border-radius:0;}
.nav-btn:hover{background:transparent;color:#fff;}
.nav-btn .car{font-size:9px;opacity:.8;}
.nav-btn.ghost{background:transparent;border:0;color:rgba(255,255,255,.92);}
.nav-btn.ghost:hover{border:0;color:#fff;}
.ayuda-btn{color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.35);
           border-radius:22px;padding:8px 18px;font-size:14.5px;}
.ayuda-btn:hover{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);}
.ayuda-btn .q{background:rgba(255,255,255,.16);color:#fff;}
.bar{background:rgba(255,255,255,.14);}
.drop{top:52px;}

/* ---------- acento por trámite ---------- */
body{--acc:var(--azul);--acc-cl:var(--azul-cl);--acc-dk:#0076a8;}
.pnum{background:var(--acc)!important;color:#fff!important;}
.pnum.opt{background:var(--acc-cl)!important;color:var(--acc)!important;}
.col-img{background:var(--acc-cl)!important;border-left:1px solid var(--linea);}
.col-txt{position:relative;}
.col-txt:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc);}
ul.pl li:before{background:var(--acc)!important;}
.tip{background:var(--acc-cl)!important;border-left-color:var(--acc)!important;}
.tip b{color:var(--acc)!important;}
.pli .hl,.opt .go{color:var(--acc)!important;}
.card{border-color:var(--linea);}
.bar>div{background:var(--acc);}
.btn-p{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;}
.btn-p:hover{background:var(--acc-dk)!important;border-color:var(--acc-dk)!important;color:#fff!important;
             box-shadow:0 6px 16px rgba(22,35,63,.18);}
.btn-s{background:#fff!important;}
.btn-s:hover{background:var(--acc-cl)!important;color:var(--acc)!important;}
.btn-s{color:var(--acc);border-color:var(--acc);}
.btn-s:hover{background:var(--acc-cl);}
.fin .ok{background:var(--acc);}
.opt:hover{border-color:var(--acc);}
.shot{background:#fff;border-radius:14px;padding:10px;box-shadow:0 8px 26px rgba(22,35,63,.09);}
.shot img{border-color:#e8edf3;}
.zoom{margin-top:6px;}

/* ---------- señalador visible ---------- */
.hot{width:42px;height:42px;margin:-21px 0 0 -21px;border:3px solid var(--acc);
     background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 3px 12px rgba(0,0,0,.28);}
.hot:after{border-color:var(--acc);}
.hot:before{content:"";position:absolute;left:46%;top:48%;width:21px;height:29px;
  background:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2028%22%3E%3Cpath%20d%3D%22M2%201.5%20L2%2022.5%20L7.1%2017.6%20L10.8%2025.6%20L14.2%2024%20L10.5%2016.2%20L17.5%2015.6%20Z%22%20fill%3D%22%231f2a37%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E') no-repeat center/contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}

/* ---------- home: menú de recorridos ---------- */
.menu-hero{text-align:center;padding:0 0 clamp(10px,2vh,20px);}
.kick{display:inline-flex;align-items:center;gap:16px;color:#0091ce;
      font-size:clamp(11px,1.05vw,14px);font-weight:900;letter-spacing:3.4px;
      margin-bottom:clamp(10px,2vh,20px);}
.kick:before{content:"";width:44px;height:2px;background:#0091ce;}
.menu-hero h2{font-size:clamp(28px,min(3.6vw,5.4vh),50px);font-weight:900;color:var(--navy);
              margin:0 0 clamp(8px,1.6vh,14px);letter-spacing:-1px;line-height:1.1;}
.menu-hero .lead{font-size:clamp(14px,min(1.3vw,2vh),18px);color:var(--gris);
                 max-width:620px;margin:0 auto;}
.tcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);}
.tcard{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--linea);
       border-radius:16px;padding:clamp(16px,2.4vh,24px) clamp(16px,1.5vw,22px);
       text-align:left;font-family:inherit;color:inherit;cursor:pointer;display:block;width:100%;
       transition:border-color .2s,box-shadow .2s,transform .2s;}
.tcard:hover{border-color:var(--tc);box-shadow:0 14px 30px rgba(22,35,63,.12);transform:translateY(-3px);}
.tcard .num{position:absolute;right:12px;bottom:-16px;font-size:clamp(58px,7vw,92px);
            font-weight:900;line-height:1;color:var(--tc);opacity:.07;pointer-events:none;
            letter-spacing:-3px;}
.tcard .ico{width:46px;height:46px;border-radius:13px;background:var(--tc-cl);color:var(--tc);
            display:grid;place-items:center;margin-bottom:clamp(12px,2.2vh,22px);}
.tcard .ico svg{width:24px;height:24px;}
.tcard h4{font-size:clamp(16px,1.35vw,19px);font-weight:900;margin:0 0 5px;color:var(--navy);
          line-height:1.2;position:relative;}
.tcard p{font-size:clamp(13px,1.05vw,15px);color:var(--gris);margin:0 0 clamp(10px,1.6vh,14px);
         position:relative;}
.tcard .req{font-size:11.5px;color:#93a0b0;display:flex;align-items:center;gap:6px;position:relative;}
.tcard .req svg{width:13px;height:13px;flex:none;}
.tcard.dis{opacity:.62;cursor:not-allowed;background:#fbfcfd;}
.tcard.dis:hover{border-color:var(--linea);box-shadow:none;transform:none;}
.camino{margin-top:clamp(14px,2.4vh,26px);background:none;border:0;box-shadow:none;
        padding:0;text-align:center;display:block;}
.camino b{color:var(--navy);font-size:14.5px;}
.camino span{font-size:14px;color:var(--gris);}
.camino .ruta{font-size:14px;font-weight:900;color:var(--azul);margin-left:0;}
@media (max-width:1080px){ .tcards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .tcards{grid-template-columns:1fr;} .camino .ruta{margin-left:0;} }
.fin .shotfin{margin:16px auto 4px;max-width:420px;}
.fin .shotfin img{width:100%;border:1px solid var(--linea);border-radius:10px;display:block;}


/* ================================================================
   FRANJA DE FASE — contexto del trámite, fijo arriba
   ================================================================ */
:root{--h-nav:76px;--h-fase:62px;}
body.modo-paso{--h-header:124px;}

.fase{display:none;background:#fff;}
body.modo-paso .fase{display:block;}

.fase-in{max-width:1240px;margin:0 auto;padding:11px 22px;
         display:flex;align-items:center;gap:14px;min-height:58px;box-sizing:border-box;}

/* ícono del trámite, en su color */
.fase-ico{width:36px;height:36px;border-radius:11px;background:var(--acc);color:#fff;flex:none;
          display:grid;place-items:center;
          box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 34%,transparent);}
.fase-ico svg{width:20px;height:20px;stroke-width:2;}

/* número + nombre del trámite */
.fase-tx{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:0 1 auto;}
.fase-kick{font-size:10.5px;font-weight:900;letter-spacing:2.2px;color:var(--acc);
           text-transform:uppercase;}
.fase-tit{font-size:16.5px;font-weight:900;color:var(--navy);letter-spacing:-.2px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* chip del caso / rama elegida */
.fase-caso{display:inline-flex;align-items:center;gap:8px;background:var(--acc-cl);color:var(--acc-dk);
           border:1px solid color-mix(in srgb,var(--acc) 28%,#fff);border-radius:20px;
           padding:6px 15px;font-size:12.5px;font-weight:900;line-height:1.2;max-width:40%;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;}
.fase-caso:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;}
.fase-caso.pide{background:#fff7e8;color:#8a5f10;border-color:#f0d9a8;}
.fase-caso.pide:before{background:#e0a83a;
  animation:fasePulso 1.6s ease-in-out infinite;}
@keyframes fasePulso{0%,100%{opacity:1}50%{opacity:.25}}

/* contador de pasos */
.fase-pasos{margin-left:auto;flex:none;font-size:13px;color:var(--gris);font-weight:700;
            display:flex;align-items:center;gap:8px;white-space:nowrap;}
.fase-pasos b{color:var(--navy);font-weight:900;font-size:14px;}
.fase-pasos .ok{display:inline-flex;align-items:center;gap:7px;color:var(--acc);font-weight:900;}
.fase-pasos .ok:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:var(--acc);color:#fff;font-size:11px;}

/* puntitos de avance */
.fase-dots{display:flex;align-items:center;gap:4px;}
.fase-dots i{width:6px;height:6px;border-radius:50%;background:#dbe3ee;display:block;
             transition:background .25s,width .25s;}
.fase-dots i.on{background:var(--acc);}
.fase-dots i.now{width:16px;border-radius:4px;background:var(--acc);}

/* barra de progreso, teñida con el color de la sección */
.fase .bar{background:#e6ecf3;height:4px;}
.fase .bar>div{background:var(--acc);}

/* la barra inferior queda solo para navegar */
.navbar .medio{flex:1;}

@media (max-width:980px){
  .fase-caso{max-width:32%;}
  .fase-dots{display:none;}
}
@media (max-width:860px){
  body.modo-paso{--h-header:116px;}
  .fase-in{padding:9px 18px;gap:11px;min-height:50px;}
  .fase-ico{width:32px;height:32px;border-radius:10px;}
  .fase-ico svg{width:18px;height:18px;}
  .fase-kick{display:none;}
  .fase-caso{display:none;}
  .fase-tit{font-size:14.5px;}
  .fase-pasos{font-size:12px;}
}

/* ================================================================
   RAYITA DE COLOR EN LAS TARJETAS DE RECORRIDO
   (las reglas .tcard posteriores pisaban el border-top original)
   ================================================================ */
.tcard{padding-top:calc(clamp(16px,2.4vh,24px) + 6px);}
.tcard:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
              background:var(--tc);border-radius:16px 16px 0 0;z-index:1;
              transition:height .2s;}
.tcard:hover:before{height:7px;}
.tcard.dis:before{background:#cbd4e0;}
.tcard.dis:hover:before{height:5px;}
.tcard .ico{background:var(--tc-cl);color:var(--tc);}

/* ================================================================
   SUBMENÚ: ir directo a la situación por CUIT
   ================================================================ */
.drop{min-width:368px;max-height:calc(100vh - 96px);overflow-y:auto;}
.drop .sub{margin:2px 0 8px 16px;padding:8px 0 2px 12px;border-left:2px solid #e4eaf2;}
.drop .sub .sh{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#93a0b0;
               padding:0 0 7px 10px;text-transform:uppercase;}
.drop .sub button{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;
                  font-size:13.5px;font-weight:900;line-height:1.3;}
.drop .sub .pt{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none;margin-top:5px;}
.drop .sub .pt.vac{background:none;border:1.5px dashed #b7c2d1;}
.drop .sub .tx{display:block;min-width:0;}
.drop .sub small{margin-top:1px;font-size:12px;}
.drop .sub button.todas{font-weight:900;color:var(--navy);}
.drop .sub .pt.vac{border-color:#0091ce;}



/* ================================================================
   ADAPTACIÓN A CELULARES Y TABLETS
   ================================================================ */

/* ---------- estructura de la captura ----------
   marco = ventana recortable · lente = la imagen y sus señaladores
   En escritorio las dos son transparentes: la captura se ve entera. */
.marco{display:block;line-height:0;}
.lente{display:inline-block;position:relative;line-height:0;}
.lb-scroll{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

/* área táctil mínima cómoda en pantallas sin mouse */
@media (hover:none){
  .nav-btn,.ayuda-btn,.zoom,.escape,.atajo,.volver-inicio{min-height:44px;}
}


/* ================================================================
   ≤ 900px · una sola columna
   ================================================================ */
@media (max-width:900px){
  .wrap{padding:0 14px 48px;}
  body.modo-paso .stage{padding:16px 14px;}
  .col-txt{padding:22px 18px;}
  .col-img{padding:16px 14px;}
  .col-txt h3{font-size:20px;}
  .baj{font-size:15px;}
  ul.pl li{font-size:15px;padding-left:23px;margin-bottom:10px;}
}


/* ================================================================
   ≤ 620px · header compacto
   ================================================================ */
@media (max-width:620px){
  .hd{padding:11px 12px;gap:8px;}
  .hd .mark{height:19px;flex:none;}
  .hd h1,.hd .div{display:none;}
  .hd .right{gap:2px;margin-left:auto;}

  /* "Ir a inicio" y "Documentación" quedan como ícono */
  .nav-btn.ghost,.nav-btn.doc{font-size:0;padding:10px 8px;}
  .nav-btn.ghost svg,.nav-btn.doc svg{width:19px;height:19px;}
  .nav-btn.tram{font-size:14px;padding:10px 8px;}
  .ayuda-btn{padding:7px 12px;border-radius:20px;}

  /* el desplegable medía 368px fijos: se salía de un viewport de 375 */
  .drop{position:fixed;top:56px;left:10px;right:10px;min-width:0;width:auto;
        max-height:calc(100dvh - 90px);}

  .fase-in{padding:8px 12px;gap:10px;}
  .menu-hero h2{font-size:clamp(22px,6.6vw,30px);}
  .fin{padding:30px 16px;}
  .fin h3{font-size:23px;}
  .fin p{font-size:15px;}
}


/* ================================================================
   Barra inferior: cómoda para el pulgar y respetando el borde
   redondeado de los teléfonos actuales
   ================================================================ */
.navbar{height:auto;min-height:var(--h-nav);
        padding-bottom:env(safe-area-inset-bottom,0px);}
body.modo-paso{padding-bottom:calc(var(--h-nav) + env(safe-area-inset-bottom,0px));}

@media (max-width:620px){
  .navbar .inner{padding:0 12px;gap:8px;}
  .btn{padding:12px 16px;font-size:14px;border-radius:11px;}
  /* en los cierres el botón dice "Seguir: asociar mi empresa": que no desborde */
  .navbar .btn-p{white-space:normal;line-height:1.25;text-align:center;}
}
@media (max-width:400px){
  .btn{padding:11px 12px;font-size:13px;}
  .nav-btn.tram{font-size:13px;}
  .hd{padding:10px 10px;}
}


/* ================================================================
   Teléfono acostado: hay muy poco alto, se comprime el cromo
   ================================================================ */
@media (max-height:520px) and (orientation:landscape){
  body.modo-paso{--h-header:104px;--h-nav:60px;}
  .fase-in{min-height:42px;padding:6px 14px;}
  .fase-ico{width:28px;height:28px;border-radius:9px;}
  .fase-ico svg{width:16px;height:16px;}
  .fase-tit{font-size:13.5px;}
  .btn{padding:9px 15px;}
  .shot img{max-height:44vh!important;}
  .fin{padding:22px 16px;}
  .fin .ok{width:52px;height:52px;line-height:52px;font-size:27px;margin-bottom:12px;}
}

/* ---------- bifurcación en pantallas chicas ---------- */
@media (max-width:900px){
  .opt{padding:12px;}
  .opt h4{font-size:15px;}
  .fork h3{font-size:20px;}
  .fork .sub{font-size:14px;}
}

/* ================================================================
   PANTALLA DE AYUDA
   La tarjeta ocupaba los 1240px del contenedor mientras el texto
   se cortaba a 680px: quedaba media caja vacía a la derecha. Ahora
   la caja mide lo que mide el texto y se centra.
   ================================================================ */
.card.ayuda{max-width:760px;margin:0 auto;padding:34px 34px 26px;}

.ayuda-hd{display:flex;gap:16px;align-items:flex-start;
          margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--linea);}
/* mismo formato que los íconos de las tarjetas y de la franja superior:
   cuadrado de color pleno con el ícono en blanco */
.ayuda-ico{width:46px;height:46px;border-radius:13px;flex:none;
           background:var(--azul);color:#fff;display:grid;place-items:center;
           box-shadow:0 4px 12px rgba(0,145,206,.28);}
.ayuda-ico svg{width:24px;height:24px;stroke-width:2;}
.ayuda-tx{min-width:0;}
.card.ayuda h3{font-size:24px;font-weight:900;color:var(--navy);margin:0 0 6px;line-height:1.2;}
.card.ayuda .baj{margin:0;font-size:15.5px;}
.card.ayuda ul.pl li:last-child{margin-bottom:0;}
.card.ayuda .tip{margin-top:22px;}
.card.ayuda .nav{margin-top:24px;padding-top:20px;
                 border-top:1px solid var(--linea);justify-content:center;}

@media (max-width:620px){
  .card.ayuda{padding:24px 20px 22px;}
  .ayuda-hd{gap:12px;margin-bottom:18px;padding-bottom:16px;}
  .ayuda-ico{width:40px;height:40px;border-radius:11px;}
  .ayuda-ico svg{width:21px;height:21px;}
  .card.ayuda h3{font-size:20px;}
  .card.ayuda .baj{font-size:14.5px;}
}