/* mivtc — sistema de diseño compartido (SaaS/páginas comunes).
   Marca: grafito #16181d + naranja #f47a1f. Tipografía display: Liberation Sans Narrow.
   Generado desde el landing; mantener aquí, no duplicar en cada página. */

  @font-face{font-family:'Narrow';src:url(/assets/fonts/narrow-bold.woff2) format('woff2'),url(/assets/fonts/narrow-bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap;}
  @font-face{font-family:'Narrow';src:url(/assets/fonts/narrow-reg.woff2) format('woff2'),url(/assets/fonts/narrow-reg.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap;}

  :root{
    /* Grafito nocturno + naranja señal (marca mivtc). Tema CLARO por defecto. */
    --carbon:#16181d; --carbon-2:#1f2430; --carbon-3:#2b313d;
    --signal:#f47a1f; --signal-deep:#d5641a; --signal-soft:rgba(244,122,31,.12);
    --bone:#f4f1ea; --paper:#ffffff; --paper-2:#faf7f1;
    --ink:#1a1c22; --ink-2:#3f434d; --fog:#6d7079;
    --line:#e3ddd2; --line-2:#eee9df;
    --ground:var(--bone); --surface:var(--paper); --surface-2:var(--paper-2);
    --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--fog);
    --hair:var(--line); --hair-2:var(--line-2);
    --hero-ground:var(--carbon); --hero-text:#f4f1ea; --hero-fog:#9aa0ab;
    --shadow:0 1px 2px rgba(22,24,29,.05),0 12px 32px -18px rgba(22,24,29,.28);
    --measure:64ch;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ground:#101216; --surface:#181b21; --surface-2:#1d212a;
      --text:#f1ede5; --text-2:#c3c7cf; --text-3:#8b9099;
      --hair:#2a2f39; --hair-2:#23272f;
      --hero-ground:#0c0d11; --hero-text:#f4f1ea; --hero-fog:#9aa0ab;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -20px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --ground:#101216; --surface:#181b21; --surface-2:#1d212a;
    --text:#f1ede5; --text-2:#c3c7cf; --text-3:#8b9099;
    --hair:#2a2f39; --hair-2:#23272f;
    --hero-ground:#0c0d11; --hero-text:#f4f1ea; --hero-fog:#9aa0ab;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -20px rgba(0,0,0,.7);
  }
  :root[data-theme="light"]{
    --ground:var(--bone); --surface:var(--paper); --surface-2:var(--paper-2);
    --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--fog);
    --hair:var(--line); --hair-2:var(--line-2);
    --hero-ground:var(--carbon); --hero-text:#f4f1ea; --hero-fog:#9aa0ab;
    --shadow:0 1px 2px rgba(22,24,29,.05),0 12px 32px -18px rgba(22,24,29,.28);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--ground);color:var(--text);
    font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  .wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}
  section{position:relative}

  /* Tipografía display condensada (señalética). */
  .disp{font-family:'Narrow',"Arial Narrow",ui-sans-serif,sans-serif;font-weight:700;
    line-height:.96;letter-spacing:.005em;text-wrap:balance;text-transform:uppercase;}
  .eyebrow{font-family:'Narrow',"Arial Narrow",sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.22em;font-size:.82rem;color:var(--signal);display:inline-flex;align-items:center;gap:.5em}
  .num{font-variant-numeric:tabular-nums lining-nums}
  p{max-width:var(--measure)}

  /* Chevron reutilizable (del logo). */
  .chev{display:inline-block;width:.62em;height:.62em;border-right:.16em solid var(--signal);
    border-bottom:.16em solid var(--signal);transform:rotate(45deg);flex:none}

  /* ---------- Barra superior ---------- */
  .bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 86%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
  .bar-in{display:flex;align-items:center;gap:22px;height:62px}
  .brand{display:flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
  .brand .wm{font-family:'Narrow',"Arial Narrow",sans-serif;font-weight:700;text-transform:lowercase;
    font-size:1.5rem;letter-spacing:.01em;color:var(--text)}
  .brand .es{color:var(--signal)}
  .logo-mark{height:30px;width:auto;display:block}
  .light-only{display:block}.dark-only{display:none}
  @media (prefers-color-scheme:dark){.light-only{display:none}.dark-only{display:block}}
  :root[data-theme="dark"] .light-only{display:none}:root[data-theme="dark"] .dark-only{display:block}
  :root[data-theme="light"] .light-only{display:block}:root[data-theme="light"] .dark-only{display:none}
  .navlinks{display:flex;gap:24px}
  .navlinks a{color:var(--text-2);text-decoration:none;font-size:.94rem;font-weight:500}
  .navlinks a:hover{color:var(--text)}
  .bar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
  .acceder{color:var(--text-2);text-decoration:none;font-size:.94rem;font-weight:600}
  .acceder:hover{color:var(--text)}
  @media (max-width:860px){.navlinks{display:none}}
  @media (max-width:520px){.acceder{display:none}}
  .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;text-decoration:none;
    border-radius:9px;padding:.7em 1.15em;font-size:.96rem;border:1px solid transparent;cursor:pointer;
    transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
  .btn-signal{background:var(--signal);color:#1a1206;box-shadow:0 6px 18px -8px var(--signal)}
  .btn-signal:hover{background:var(--signal-deep);transform:translateY(-1px)}
  .btn-ghost{border-color:var(--hair);color:var(--text);background:transparent}
  .btn-ghost:hover{border-color:var(--text-3)}
  .btn-signal .chev{border-color:#1a1206;width:.5em;height:.5em;transform:rotate(-45deg);transition:transform .15s}
  .btn-signal:hover .chev{transform:rotate(-45deg) translate(1px,-1px)}
  .theme-tog{background:transparent;border:1px solid var(--hair);color:var(--text-2);border-radius:8px;
    width:38px;height:38px;cursor:pointer;font-size:1rem;display:grid;place-items:center;flex:none}
  .theme-tog:hover{color:var(--text);border-color:var(--text-3)}

  /* ---------- Hero ---------- */
  .hero{background:var(--hero-ground);color:var(--hero-text);position:relative;overflow:hidden;
    border-bottom:1px solid #000}
  #road{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
  .hero-glow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 78% 8%,rgba(244,122,31,.20),transparent 60%)}
  .hero-in{position:relative;padding:96px 0 104px;max-width:960px}
  .hero h1{margin:.35em 0 .5em;font-size:clamp(3.4rem,10vw,7.2rem);color:var(--hero-text)}
  .hero h1 .hi{color:var(--signal);display:block}
  .hero .lead{font-size:1.24rem;color:var(--hero-fog);max-width:40ch;line-height:1.5}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
  .hero .btn-ghost{border-color:rgba(255,255,255,.22);color:var(--hero-text)}
  .hero .btn-ghost:hover{border-color:rgba(255,255,255,.5)}
  .hero-foot{position:relative;display:flex;gap:28px;flex-wrap:wrap;margin-top:56px;
    padding-top:26px;border-top:1px solid rgba(255,255,255,.12);color:var(--hero-fog);font-size:.9rem}
  .hero-foot b{color:var(--hero-text);font-weight:600}

  /* ---------- Estructura de sección ---------- */
  .band{padding:88px 0}
  .band-alt{background:var(--surface)}
  .head{max-width:720px;margin-bottom:44px}
  .head h2{font-size:clamp(2.3rem,5.5vw,3.7rem);margin:.28em 0 .3em;color:var(--text)}
  .head p{color:var(--text-2);font-size:1.12rem}

  /* Dolores */
  .pains{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
  @media (max-width:820px){.pains{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.pains{grid-template-columns:1fr}}
  .pain{background:var(--surface);padding:26px 24px}
  .band-alt .pain{background:var(--ground)}
  .pain h3{font-family:'Narrow',sans-serif;text-transform:uppercase;letter-spacing:.03em;
    font-weight:700;font-size:1.32rem;margin:.1em 0 .35em;display:flex;align-items:center;gap:.5em;color:var(--text)}
  .pain p{color:var(--text-2);font-size:.98rem;margin:0;max-width:none}

  /* Franja de datos (taxímetro) */
  .meter{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--surface)}
  .band-alt .meter{background:var(--ground)}
  .meter div{padding:28px 24px;border-right:1px solid var(--hair)}
  .meter div:last-child{border-right:0}
  .meter .k{font-family:'Narrow',sans-serif;font-weight:700;font-size:3rem;line-height:1;color:var(--signal)}
  .meter .l{color:var(--text-2);font-size:.96rem;margin-top:8px}

  /* Bloques de funciones */
  .group-label{display:flex;align-items:center;gap:14px;margin:44px 0 20px}
  .group-label .t{font-family:'Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;
    font-weight:700;font-size:1.05rem;color:var(--text)}
  .group-label .rule{height:1px;background:var(--hair);flex:1}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  .card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:24px 22px;
    box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease}
  .band-alt .card{background:var(--ground)}
  .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--signal) 45%,var(--hair))}
  .card .ico{width:40px;height:40px;border-radius:10px;background:var(--signal-soft);color:var(--signal);
    display:grid;place-items:center;margin-bottom:14px}
  .card .ico svg{width:22px;height:22px;display:block}
  .card h3{font-size:1.12rem;margin:0 0 .3em;color:var(--text);font-weight:650}
  .card p{color:var(--text-2);font-size:.96rem;margin:0;max-width:none}

  /* Flujo numerado */
  .flow{display:grid;gap:0;border-left:2px solid var(--hair);margin-left:8px}
  .step{position:relative;padding:22px 0 22px 42px}
  .step::before{content:attr(data-n);position:absolute;left:-19px;top:20px;width:34px;height:34px;
    border-radius:50%;background:var(--signal);color:#1a1206;display:grid;place-items:center;
    font-family:'Narrow',sans-serif;font-weight:700;font-size:1.15rem}
  .step h3{font-family:'Narrow',sans-serif;text-transform:uppercase;letter-spacing:.03em;
    font-size:1.35rem;margin:.1em 0 .28em;color:var(--text)}
  .step p{color:var(--text-2);margin:0}

  /* Planes */
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:stretch}
  .plan{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:26px 22px;
    display:flex;flex-direction:column;box-shadow:var(--shadow)}
  .band-alt .plan{background:var(--ground)}
  .plan.feat{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal),var(--shadow)}
  .plan .tag{font-family:'Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;
    font-size:.82rem;color:var(--text-3);font-weight:700}
  .plan.feat .tag{color:var(--signal)}
  .plan .price{font-family:'Narrow',sans-serif;font-weight:700;font-size:3.4rem;line-height:1;
    margin:.2em 0 .05em;color:var(--text)}
  .plan .price small{font-size:1rem;font-weight:400;color:var(--text-3)}
  .plan .price .cur{color:var(--signal)}
  .plan ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
  .plan li{position:relative;padding-left:22px;color:var(--text-2);font-size:.95rem}
  .plan li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
    border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(45deg)}
  .plan .spacer{flex:1}
  .plan .btn{margin-top:20px;justify-content:center}
  .plans-note{color:var(--text-3);font-size:.9rem;margin-top:16px}

  /* Cuotas y flota dentro de la tarjeta: es lo que de verdad separa un plan de otro, así que se
     despega de la lista de características con un filete y tipografía menor. */
  .plan-cuotas{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--text-3)}
  .plan-cuotas b{color:var(--text-2);font-variant-numeric:tabular-nums}

  /* «Todo esto lo lleva hasta el plano más barato»: sin esta caja, el de entrada parece pelado
     porque solo se ven las funciones que NO tiene. */
  .plan-base{margin-top:26px;padding:20px 22px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface-2,rgba(127,127,127,.05))}
  .plan-base-t{margin:0 0 12px;font-weight:600;color:var(--text-2);font-size:.95rem}
  .plan-base ul{list-style:none;padding:0;margin:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 20px}
  .plan-base li{position:relative;padding-left:22px;color:var(--text-3);font-size:.9rem}
  .plan-base li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;
    border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(45deg)}

  /* Cierre */
  .close{background:var(--hero-ground);color:var(--hero-text);text-align:center;padding:96px 0}
  .close h2{color:var(--hero-text);font-size:clamp(2.6rem,7vw,5rem);margin:.1em 0 .3em}
  .close p{color:var(--hero-fog);margin:0 auto 30px;font-size:1.16rem}
  .close .steps{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:40px;
    color:var(--hero-fog);font-size:.95rem}
  .close .steps b{color:var(--hero-text)}

  footer{background:var(--ground);border-top:1px solid var(--hair);padding:34px 0;color:var(--text-3);font-size:.9rem}
  .foot-in{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}
  .card{position:relative}
  .tier{position:absolute;top:13px;right:13px;font-family:'Narrow',sans-serif;text-transform:uppercase;
    letter-spacing:.08em;font-size:.72rem;font-weight:700;padding:.18em .62em;border-radius:999px;
    border:1px solid var(--hair);color:var(--text-3);background:var(--surface)}
  .band-alt .card .tier{background:var(--ground)}
  .tier-pro{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 45%,var(--hair))}
  .legend{color:var(--text-3);font-size:.92rem;margin:0 0 26px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
  .legend b{color:var(--signal)}
  .cmp-head{margin:64px 0 6px}
  .cmp-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:16px;margin-top:24px}
  table.cmp{border-collapse:collapse;width:100%;min-width:660px;font-size:.95rem}
  .cmp th,.cmp td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--hair-2)}
  .cmp thead th{background:var(--surface);font-family:'Narrow',sans-serif;text-transform:uppercase;
    letter-spacing:.05em;font-size:1rem;color:var(--text);border-bottom:1px solid var(--hair)}
  .cmp thead th small{display:block;font-family:ui-sans-serif,sans-serif;text-transform:none;
    letter-spacing:0;font-size:.72rem;font-weight:400;color:var(--text-3)}
  .cmp thead th.col-beta{color:var(--signal)}
  .cmp tbody th{text-align:left;font-weight:500;color:var(--text-2)}
  .cmp tr.grp th{background:var(--surface-2);font-family:'Narrow',sans-serif;text-transform:uppercase;
    letter-spacing:.12em;color:var(--text-3);font-size:.82rem;text-align:left}
  .cmp .yes{color:var(--signal);font-weight:800}
  .cmp .no{color:var(--text-3);opacity:.55}
  .cmp .q{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
  .cmp tr.price th,.cmp tr.price td{font-family:'Narrow',sans-serif;font-size:1.25rem;color:var(--text);
    border-top:2px solid var(--hair);font-variant-numeric:tabular-nums}
  .cmp tr.price td.col-beta{color:var(--signal)}

/* ===================== FORMULARIOS Y PÁGINAS SAAS ===================== */
.saas-main{padding:40px 0 60px}
.narrow{max-width:840px;margin-inline:auto;padding-inline:22px}
.narrower{max-width:560px;margin-inline:auto;padding-inline:22px}
.page-head{text-align:center;margin:34px 0 24px}
.page-head .eyebrow{display:inline-flex}
.page-head h1{font-size:clamp(1.9rem,5vw,2.8rem);margin:.3em 0 .1em}
.page-head p{color:var(--text-2);margin:0 auto;max-width:52ch}

.form-card{padding:26px}
.form-h{font-size:1.35rem;font-weight:650;margin:0 0 2px}
.form-sub{color:var(--text-2);font-size:.92rem;margin:0 0 20px}
.form-sub a{color:var(--signal)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--text)}
.field .req{color:var(--signal)}
.hint{font-size:.8rem;color:var(--text-3);margin-top:5px}
.inp{width:100%;background:var(--surface-2);border:1px solid var(--hair);border-radius:9px;padding:.68em .8em;font-size:1rem;color:var(--text);font-family:inherit}
.inp::placeholder{color:var(--text-3)}
.inp:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}
.inp-group{display:flex}
.inp-group .inp{border-radius:9px 0 0 9px}
.suffix{display:flex;align-items:center;padding:0 .8em;background:var(--hair-2);border:1px solid var(--hair);border-left:0;border-radius:0 9px 9px 0;color:var(--text-3);font-size:.92rem;white-space:nowrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--text-2);margin:6px 0 20px}
.check input{margin-top:3px}
.check a{color:var(--signal)}
.btn-lg{padding:.85em 1.5em;font-size:1.02rem}
.btn-block{width:100%;justify-content:center}
.btn-signal .chev{border-color:#1a1206;width:.5em;height:.5em;transform:rotate(-45deg)}

/* Avisos */
.alert{border-radius:10px;padding:12px 16px;font-size:.94rem;margin-bottom:18px;border:1px solid transparent}
.alert-danger{background:rgba(220,53,69,.1);border-color:rgba(220,53,69,.35);color:#b02a37}
.alert-success{background:rgba(25,135,84,.1);border-color:rgba(25,135,84,.35);color:#146c43}
.alert-warning{background:var(--signal-soft);border-color:color-mix(in srgb,var(--signal) 35%,transparent);color:var(--signal-deep)}
@media (prefers-color-scheme:dark){.alert-danger{color:#ff8b96}.alert-success{color:#75d6a3}}

/* Stepper */
.stepper{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.st{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:.9rem}
.st .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'Narrow',sans-serif;font-weight:700;font-size:.85rem;background:var(--hair);color:var(--text-2)}
.st.on{color:var(--text);font-weight:600}.st.on .n{background:var(--signal);color:#1a1206}
.st.done .n{background:#198754;color:#fff}
.sep{width:22px;height:1px;background:var(--hair)}

/* Verificación / éxito */
.card-pad{padding:32px 26px}
.icoball{width:56px;height:56px;border-radius:50%;background:var(--signal-soft);color:var(--signal);display:grid;place-items:center;margin:0 auto 14px}
.code{width:100%;text-align:center;letter-spacing:.5em;font-size:1.6rem;font-variant-numeric:tabular-nums}
.links{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:.86rem;flex-wrap:wrap}
.links a{color:var(--text-2)}
.okball{width:60px;height:60px;border-radius:50%;background:#198754;color:#fff;display:grid;place-items:center;margin:0 auto 14px;font-size:1.8rem}
.access{text-align:left;border:1px solid var(--hair);border-radius:12px;padding:16px;margin:18px 0;background:var(--surface-2);font-size:.92rem}
.access div{margin:4px 0}.access a{color:var(--signal)}

/* Contenido legal (prosa) */
.prose{max-width:70ch;margin-inline:auto;color:var(--text-2)}
.prose h2{font-family:'Narrow',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--text);font-size:1.5rem;margin:1.6em 0 .5em}
.prose h3{color:var(--text);font-size:1.1rem;margin:1.3em 0 .4em}
.prose a{color:var(--signal)}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}