/* Portal C4V — v3 (rediseño post-audit Rams 2026-07-01)
   Identidad real de c4vlaser.com: NEGRO + ROJO + BLANCO, bold e industrial.
   Sistema: espaciado {4,8,12,16,24,32,48} · tipografía {12,14,16,18,22,28} · colores solo tokens. */
:root{
  /* ── El mundo de esta página es un manual de instalación sobre un banco de
     trabajo. De ahí salen los colores: la tinta, la hoja y la mesa. ── */
  --tinta:#141414;            /* negro de marca · el texto */
  --papel:#ffffff;            /* la hoja */
  --mesa:#edebe7;             /* la superficie donde se apoya la hoja */
  --grafito:#5a5a5a;          /* lápiz · texto secundario · 7.0:1 sobre papel */
  --regla:#d9d6d1;            /* las líneas del formulario */
  --rojo:#F9020B;             /* marca · solo dentro de los dibujos y sobre negro */
  --rojo-tinta:#C40309;       /* la única acción · blanco encima = 6.24:1 */
  --rojo-hondo:#a30207;
  --rojo-suave:#fdecec;

  /* Compatibilidad con el resto de la hoja de estilos */
  --black:#141414; --black-2:#1e1e1e; --black-3:#2a2a2a;
  --red:var(--rojo); --red-cta:var(--rojo-tinta); --red-dark:var(--rojo-hondo); --red-50:var(--rojo-suave);
  --bg:var(--papel); --alt:#f6f5f3; --ink:var(--tinta); --muted:var(--grafito); --line:var(--regla);
  --on-black:#ffffff; --on-black-dim:#b9b9b9; --amber:#FFC400;

  --ok:#256640; --ok-50:#e9f3ec; --warn:#8a5f10; --warn-50:#f6efe0;
  --err:#b3261e; --err-50:#fdecea; --info:#2e5aac; --info-50:#eaeff8;
  --wa:#117F44; --wa-hover:#0E6B39; --wa-brand:#25D366;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* Seis tamaños. Antes había veintiuno. */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:19px; --t-xl:24px; --t-2xl:32px; --t-3xl:32px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-base:1.6;
  --medida:60ch; --tap:44px;
  --r-sm:4px; --r:6px; --r-lg:10px; --r-full:999px;
  /* Una sola sombra, y solo para lo que de verdad flota sobre la hoja */
  --sh:none; --sh-flota:0 12px 40px rgba(20,20,20,.22);
  --sans:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --slab:'Roboto Slab','Roboto',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0}
h1{font-family:var(--slab);font-weight:800;font-size:28px;line-height:1.15}
button{font-family:var(--sans)}
::selection{background:var(--red-50)}
.ic{width:20px;height:20px;flex-shrink:0}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--red-cta);color:#fff;padding:12px 16px;z-index:100;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}

/* Banda de demostración (honestidad) */

/* [hidden] debe ganar SIEMPRE: .gate/.app usan display:flex y taparían el hidden del navegador */
[hidden]{display:none !important}

/* ---------- Acceso por teléfono (gate) ---------- */
.gate{position:fixed;inset:0;z-index:50;background:var(--black);color:var(--on-black);display:flex;flex-direction:column;align-items:center;padding:24px;overflow-y:auto}
.gate-box{width:100%;max-width:420px;text-align:center;margin:auto;padding-top:36px}
.gate-logo{height:34px;width:auto;margin-bottom:32px}
.gate-wa-ic{width:56px;height:56px;margin:0 auto 16px;color:#25D366}
.gate-wa-ic svg{width:100%;height:100%}
.gate h1{font-family:var(--slab);font-size:30px;font-weight:800;line-height:1.2;margin-bottom:10px}
.gate-sub{color:var(--on-black-dim);font-size:17px;line-height:1.5;margin-bottom:28px}
.gate-form{text-align:left}
.gate-paso{font-size:16px;margin-bottom:10px;color:var(--on-black)}
.gate-paso strong{color:var(--red)}
.gate-paises{display:flex;gap:8px;margin-bottom:22px}
.gate-paises button{flex:1;background:var(--black-2);border:2px solid var(--black-3);color:var(--on-black);border-radius:var(--r);padding:12px 4px;font-size:15px;font-weight:700;font-family:var(--sans);cursor:pointer;text-align:center;min-height:64px}
.gate-paises button .bandera{display:block;font-size:24px;line-height:1.2}
.gate-paises button[aria-checked="true"]{border-color:var(--red);background:#2a1112}
.gate-paises button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gate-row{display:flex;gap:0;margin-bottom:22px}
.gate-prefijo{flex-shrink:0;display:flex;align-items:center;background:var(--black-3);color:var(--on-black);border:1px solid var(--black-3);border-right:0;border-radius:var(--r) 0 0 var(--r);padding:0 14px;font-size:22px;font-weight:700;font-family:var(--sans)}
#gatePhone{flex:1;min-width:0;background:var(--black-2);color:var(--on-black);border:1px solid var(--black-3);border-radius:0 var(--r) var(--r) 0;padding:16px;font-size:24px;font-weight:700;letter-spacing:1px;font-family:var(--sans)}
#gatePhone:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
#gatePhone::placeholder{color:#6a6a6a;font-weight:400;letter-spacing:0}
.gate-btn{width:100%;justify-content:center;padding:18px;font-size:18px;min-height:56px}
.gate-error{margin-top:16px;background:#3a1414;border:1px solid var(--red);color:#ffd7d7;border-radius:var(--r);padding:12px 14px;font-size:14px;line-height:1.5}
.gate-error a{color:#fff;font-weight:700}
.gate-ok{margin-top:16px;background:#14301c;border:1px solid #2f7a45;color:#d7ffe0;border-radius:var(--r);padding:12px 14px;font-size:14px;line-height:1.5}
.gate-demo{margin-top:28px;border-top:1px solid var(--black-3);padding-top:20px;text-align:left}
.gate-demo h2{font-size:13px;font-weight:700;color:var(--on-black-dim);margin-bottom:10px;letter-spacing:.5px}
.gate-demo button{display:block;width:100%;text-align:left;background:var(--black-2);border:1px solid var(--black-3);color:var(--on-black);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;font-size:14px;font-family:var(--sans);cursor:pointer}
.gate-demo button:hover{border-color:var(--red)}
.gate-demo button span{display:block;color:var(--on-black-dim);font-size:12px;margin-top:2px}
.gate-foot{margin-top:24px;color:var(--on-black-dim);font-size:14px}
.gate-foot a{color:var(--red);font-weight:700}

/* ---------- Agente de IA (topbar) ---------- */
.ai-btn{min-height:var(--tap);margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--red-cta);color:#fff;border:none;border-radius:var(--r);padding:9px 14px;font-size:14px;font-weight:500;font-family:var(--sans);cursor:pointer;white-space:nowrap}
.ai-btn:hover{background:var(--red-dark)}
.ai-btn strong{font-weight:700}
.ai-ic{width:18px;height:18px;flex-shrink:0}
.ai-panel{background:var(--alt)}
.ai-panel .ai-inner{max-width:1020px;display:flex;gap:16px;align-items:flex-start}
.ai-panel h3{font-family:var(--slab);font-size:17px;font-weight:700;margin-bottom:4px}
.ai-panel p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:12px}

/* ---------- Pantalla única: saludo + máquina + 4 botones grandes ---------- */
.saludo{font-family:var(--slab);font-size:28px;font-weight:800;margin:0 0 20px}
.volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--red-cta);font-weight:700;font-size:15px;margin-bottom:8px}
.volver:hover{text-decoration:underline}
.pag-title{font-family:var(--slab);font-size:24px;font-weight:800;margin:0 0 20px}
.pag-title:focus,#view:focus{outline:none}

/* Tarjeta de la máquina (lleva al certificado) */
.maq{display:flex;align-items:center;gap:14px;background:var(--papel);color:var(--tinta);border:1px solid var(--regla);border-radius:var(--r-lg);padding:16px;margin-bottom:24px;transition:border-color .16s}
.maq:hover{border-color:var(--tinta)}
.maq:active{border-color:var(--tinta)}
.maq-seal{flex-shrink:0;width:56px;height:56px}
.maq-seal svg{width:100%;height:100%}
.maq-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.maq-txt strong{font-size:17px;font-weight:700}
.maq-txt span{font-size:var(--t-sm);color:var(--grafito)}
.maq-txt .muted{color:var(--grafito);font-size:var(--t-xs)}

/* Los 4 botones grandes */
.bigs{display:flex;flex-direction:column;gap:12px}
.big{display:flex;align-items:center;gap:16px;min-height:76px;background:var(--bg);border:2px solid var(--line);border-radius:var(--r-lg);padding:16px;color:var(--ink);transition:border-color .16s,background .16s,transform .1s}
.big:hover{border-color:var(--red-cta);background:var(--alt)}
.big:active{transform:scale(.99)}
.big-ico{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--red-50);color:var(--red-cta);display:flex;align-items:center;justify-content:center}
.big-ico .ic{width:24px;height:24px}
.big-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.big-txt strong{font-family:var(--slab);font-size:18px;font-weight:700;line-height:1.25}
.big-txt span{font-size:14px;color:var(--muted);line-height:1.4}
.big-arrow{flex-shrink:0;color:var(--red-cta);font-size:22px;font-weight:700}

/* Botón grande de WhatsApp (la vía principal para pedir ayuda) */
.wa-big{display:flex;align-items:center;gap:14px;min-height:72px;background:var(--wa);color:#fff;border-radius:var(--r-lg);padding:16px 18px;margin-bottom:28px;transition:background .16s,transform .1s}
.wa-big:hover{background:var(--wa-hover)}
.wa-big:active{transform:scale(.99)}
.wa-ic{flex-shrink:0;width:32px;height:32px}
.wa-txt{display:flex;flex-direction:column;gap:2px}
.wa-txt strong{font-family:var(--slab);font-size:18px;font-weight:700}
.wa-txt span{font-size:14px;opacity:.95}

/* Vía secundaria: dejar un mensaje escrito */
.msg-box .form{margin-top:8px}

/* ---------- Identidad del usuario (pie) ---------- */
.me{font-size:13px;color:var(--on-black-dim);line-height:1.5;margin-bottom:10px}
.me strong{display:block;color:var(--on-black);font-size:14px}
.ctx-out{width:100%;min-height:44px;background:transparent;border:1px solid var(--black-3);color:var(--on-black-dim);border-radius:var(--r);padding:10px 12px;font-size:13px;font-family:var(--sans);cursor:pointer;transition:border-color .14s,color .14s}
.ctx-out:hover{border-color:var(--red);color:var(--on-black)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.content{flex:1;min-width:0;display:flex;flex-direction:column}

/* Topbar — negro, logo visible en móvil */
.topbar{display:flex;align-items:center;gap:16px;padding:12px 32px;background:var(--black);color:var(--on-black);position:sticky;top:0;z-index:5}
.topbar-home{display:flex;align-items:center;min-height:44px}
.topbar-logo{height:26px;width:auto}

.view{padding:32px;max-width:1020px;width:100%;margin:0 auto}
.foot{padding:24px 32px;max-width:1020px;width:100%;margin:0 auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px}
.muted{color:var(--muted)}
.loading{padding:48px;color:var(--muted)}

/* ---------- Encabezados ---------- */
.page-head{margin-bottom:24px}
.page-head h1{margin-bottom:8px}
.page-head p{color:var(--muted);font-size:16px;max-width:66ch;margin:0}

/* ---------- Grid & cards ---------- */
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.card h3{font-family:var(--slab);font-size:18px;margin-bottom:8px;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* Tarjetas de navegación */
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.action-card .ac-ico .ic{width:22px;height:22px;color:var(--red)}

/* Mini card (máquina + certificado) */
.card.mini{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.card.mini>div{min-width:200px}

.ulist{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.8}

/* ---------- Badges ---------- */
.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;line-height:1.4}
.badge.ok{background:var(--ok-50);color:var(--ok)}
.badge.warn{background:var(--warn-50);color:var(--warn)}
.badge.info{background:var(--info-50);color:var(--info)}
.badge.red{background:var(--red-50);color:var(--red-cta)}
.badge.grey{background:var(--alt);color:var(--muted)}

/* ---------- Botones (AA: blanco sobre red-cta = 5.5:1) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:16px;padding:12px 24px;border-radius:var(--r);min-height:44px;transition:background .14s}
.btn.primary{background:var(--red-cta);color:#fff}
.btn.primary:hover{background:var(--red-dark)}
.btn.ghost{background:var(--bg);color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:9px 16px;font-size:14px;min-height:44px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- Formularios ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:700}
.field input,.field textarea,.field select{padding:12px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--sans);font-size:16px;background:var(--bg);color:var(--ink);min-height:44px}
.field textarea{min-height:88px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Acordeones (BOTONES accesibles) ---------- */
.faq-item{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:8px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:16px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:16px;color:var(--ink);min-height:44px}
.faq-q:hover{background:var(--alt)}
.faq-a{padding:0 16px 16px;color:var(--muted);font-size:14px;line-height:1.65;display:none}
.faq-item.open .faq-a{display:block}
.chev{transition:transform .15s;color:var(--red-cta);font-weight:700;font-size:18px;flex-shrink:0}
.faq-item.open .chev{transform:rotate(45deg)}

/* ---------- Pasos / checklist ---------- */
.step{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--black);color:var(--red);font-family:var(--slab);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:14px}
.step h4{margin:0 0 4px;font-size:16px;font-weight:700}
.step p{margin:0;font-size:14px;color:var(--muted)}

.bar{height:8px;background:var(--alt);border-radius:999px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--red);border-radius:999px;transition:width .3s}


/* ---------- Toolbar / chips ---------- */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.toolbar .btn{margin-left:auto}
.chip{border:1px solid var(--line);background:var(--bg);cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;padding:11px 16px;border-radius:var(--r);color:var(--muted);transition:.14s;min-height:44px}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--black);color:#fff;border-color:var(--black)}
.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}

/* ---------- Plantillas / guías ---------- */
.tpl{display:flex;flex-direction:column}
.tpl-thumb{height:120px;border-radius:var(--r);background:var(--alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden}
.tpl-thumb svg{width:70%;height:70%}
.guia{display:flex;flex-direction:column}
.diag{width:84%;height:84%;color:var(--red-cta)}

/* ---------- Tabla ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
th{text-align:left;font-size:12px;letter-spacing:.05em;color:var(--muted);padding:12px 16px;background:var(--alt);border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
td strong{color:var(--ink)}
tr:last-child td{border-bottom:none}

/* ---------- Certificado ---------- */
.cert-hero{display:flex;gap:24px;align-items:center;background:var(--black);color:var(--on-black);border-radius:var(--r-lg);padding:32px;flex-wrap:wrap;margin-bottom:8px}
.cert-hero h1{color:var(--on-black)}
.cert-hero p{color:var(--on-black-dim)}
.cert-seal{width:150px;flex-shrink:0}
.cert-seal svg{width:100%;height:auto;display:block}
.cert-lema{font-family:var(--slab);font-size:18px;color:var(--red);margin:0 0 8px;font-weight:700}
.cert-img{width:100%;height:auto;border-radius:var(--r);display:block}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--black);color:#fff;padding:12px 24px;border-radius:var(--r);font-size:14px;font-weight:500;opacity:0;transition:.22s;z-index:50;box-shadow:0 6px 24px rgba(20,20,20,.25);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Impresión ---------- */
@media print{
  .topbar,.foot,.demo-band,.skip,.ai-btn{display:none!important}
  body{background:#fff}
  .view{padding:0;max-width:100%}
  .card,.onb-item,table,.guia-thumb{box-shadow:none}
  .guia{break-inside:avoid}
}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .topbar-logo{display:block}
  .topbar{padding:12px 16px}
  .grid.cols-2,.grid.cols-3,.actions{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .view{padding:16px}
  h1{font-size:24px}
  .cert-seal{width:112px}
  th,td{padding:8px 12px}
}

/* ---------- Gate: persona/empresa + 5 países ---------- */
.gate-tipos{display:flex;gap:8px;margin-bottom:22px}
.gate-tipos button{flex:1;background:var(--black-2);border:2px solid var(--black-3);color:var(--on-black);border-radius:var(--r);padding:12px 4px;font-size:16px;font-weight:700;font-family:var(--sans);cursor:pointer;text-align:center;min-height:64px}
.gate-tipos button .bandera{display:block;font-size:24px;line-height:1.2}
.gate-tipos button[aria-checked="true"]{border-color:var(--red);background:#2a1112}
.gate-tipos button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gate-paises{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.gate-paises button{font-size:11.5px;padding:8px 2px;min-height:58px}
.gate-paises button .bandera{font-size:20px}
#gateDoc,#gateTel,#gateCod{flex:1;min-width:0;background:var(--black-2);color:var(--on-black);border:1px solid var(--black-3);border-radius:var(--r);padding:16px;font-size:22px;font-weight:700;letter-spacing:1px;font-family:var(--sans)}
#gateDoc:focus,#gateTel:focus,#gateCod:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
#gateDoc::placeholder,#gateTel::placeholder,#gateCod::placeholder{color:#6a6a6a;font-weight:400;letter-spacing:0}
.gate-paso strong#gateDocLabel{color:#FF8A8F}

/* ---------- Quizzes interactivos (Academia) ---------- */
.quiz-box{margin:10px 0 4px;display:flex;flex-direction:column;gap:8px}
.qz-start{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--black);color:#fff;border:0;border-radius:var(--r);padding:11px 16px;font-size:14px;font-weight:700;font-family:var(--sans);cursor:pointer;min-height:44px}
.qz-start:hover{background:#000}
.qz-start span{font-weight:400;opacity:.75}
.qz-logro{font-size:13px;color:var(--muted)}
.qz-logro.ok{color:var(--ok);font-weight:700}
.qz-area{background:var(--alt);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.qz-prog{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.qz-q{font-family:var(--slab);font-size:17px;font-weight:700;margin-bottom:12px}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{text-align:left;background:var(--bg);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:15px;font-family:var(--sans);cursor:pointer;min-height:48px;color:var(--ink)}
.qz-opt:hover:not(:disabled){border-color:var(--red-cta)}
.qz-opt:disabled{cursor:default;opacity:.9}
.qz-opt.ok{border-color:var(--ok);background:var(--ok-50);font-weight:700}
.qz-opt.bad{border-color:var(--err, #b3261e);background:#fdecea}
.gate-id-ic{color:var(--red)}

/* ---------- Puerta de entrada: preparar el espacio primero ---------- */
.prep-cta{display:block;background:var(--black);color:var(--on-black);border-radius:var(--r-lg);padding:18px;margin-bottom:20px;border:2px solid var(--red);transition:background .16s}
.prep-cta:hover{background:var(--black-2)}
.prep-cta-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.prep-cta-top strong{font-family:var(--slab);font-size:18px}
.prep-cta-top span{font-size:14px;color:var(--on-black-dim);font-variant-numeric:tabular-nums}
.prep-cta .bar{background:rgba(255,255,255,.15)}
.prep-cta p{font-size:14px;color:var(--on-black-dim);margin:10px 0 12px;line-height:1.5}
.prep-cta-btn{display:inline-block;background:var(--red-cta);color:#fff;border-radius:var(--r);padding:12px 18px;font-size:15px;font-weight:700;min-height:44px;transition:background .14s}
.prep-cta:hover .prep-cta-btn{background:var(--red-dark)}
.big.lock{cursor:pointer;background:var(--alt);border-style:dashed;width:100%;text-align:left;font-family:var(--sans);font-size:inherit}
.big.lock .big-ico{background:#ececec;color:var(--muted)}
.big.lock:hover{border-color:var(--line);background:var(--alt)}
.prep-ok{background:var(--ok-50);border:1px solid #bfe0c8;border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;font-size:14px;line-height:1.5}
.prep-ok strong{display:block;font-family:var(--slab);font-size:16px;margin-bottom:4px}
.prep-ok p{margin:0 0 10px;color:var(--ink)}

/* ---------- Preparación: fotos reales + acceso + kit ---------- */
.acceso{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.acceso .grow{flex:1;min-width:240px}
.acceso-pasos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.acceso-pasos li::marker{color:var(--red-cta);font-weight:700}

/* ---------- Checklist paso a paso (numerado, con foto de referencia) ---------- */
/* Foto de referencia, alineada bajo el texto del paso */
/* Estado completado */
.prep-step.done .prep-step-num{background:var(--ok-50);border-color:var(--ok);color:var(--ok)}
.prep-step.done .prep-step-txt,
.prep-step.done .prep-step-check,
.prep-step.done .prep-step-fig img{opacity:.85}
@media (max-width:560px){
}

/* Lista de compras destacada (imposible de ignorar) */
/* Parámetros por material + guías PDF */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.tabla-params{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tabla-params th{background:var(--black);color:#fff;padding:8px 10px;text-align:left;font-size:12.5px;line-height:1.3;position:sticky;top:0}
.tabla-params th span{font-weight:400;opacity:.75;font-size:11px}
.tabla-params td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabla-params tbody tr:nth-child(even){background:var(--alt)}

/* ---------- Botón WhatsApp (verde real de la marca WhatsApp) ---------- */

/* Estado "verificando…" del botón de acceso */
.gate-btn[aria-busy="true"]{opacity:.75;cursor:progress}

/* Panel del agente: botón WhatsApp y responsive */
.ai-panel .btn-wa{margin-top:2px}
@media(max-width:880px){
  .ai-panel .ai-inner{gap:12px}
  .ai-btn span{font-weight:500}
}

/* ---------- Soporte: contexto + deep links por síntoma ---------- */
.wa-ctx{margin:-18px 0 24px;font-size:13.5px;line-height:1.5}
.wa-ctx strong{color:var(--ink);font-variant-numeric:tabular-nums}
.wa-inline{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--wa);font-weight:700;font-size:14px}
.wa-inline:hover{text-decoration:underline}
.wa-inline .wa-ic{width:18px;height:18px;flex-shrink:0}

/* ---------- Certificado: verificación por Nº de serie ---------- */
.cert-maq-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cert-maq{display:flex;flex-direction:column;gap:12px}
.cert-maq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cert-maq-top h3{margin:0}
.cert-serie{background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.cert-serie-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.cert-serie-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cert-serie-num{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.02em;word-break:break-all;flex:1;min-width:0}
.cert-copy{flex-shrink:0}
.cert-maq-meta{margin:0;font-size:13.5px;color:var(--muted)}
.cert-verif-link{display:inline-flex;align-items:center;min-height:44px;color:var(--red-cta);font-weight:700;font-size:14px}
.cert-verif-link:hover{text-decoration:underline}
.cert-verif-note{margin:0;font-size:13px;line-height:1.5}

/* ---------- Refinamiento móvil (~375–560px): jerarquía y aire ---------- */
@media(max-width:560px){
  /* Títulos un punto más contenidos para que respiren en pantallas chicas */
  .saludo{font-size:25px;margin-bottom:16px}
  .pag-title{font-size:22px}
  h1{font-size:23px}
  /* Máquina y botones grandes: mismo peso visual, algo más compactos */
  .maq{padding:14px;gap:12px}
  .maq-seal{width:48px;height:48px}
  .big{min-height:70px;padding:14px;gap:14px}
  .big-ico{width:44px;height:44px}
  /* La tarjeta de "Paso 1" es lo más importante: que su cabecera no se apriete */
  .prep-cta-top{flex-wrap:wrap;gap:4px}
  .prep-cta-top strong{font-size:17px}
  /* Guía de preparación: avisos y bloques con encabezado claro */
  .prep-aviso strong,.prep-ok strong{font-size:15.5px}
}

/* ---------- Accesibilidad: respetar "menos movimiento" ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
  .big:active,.wa-big:active,.maq:active{transform:none}
}

/* ---------- Ruta de aprendizaje / pilares (Academia) ---------- */
a.chip{text-decoration:none;color:var(--ink)}
.chip.soon{color:var(--muted);background:var(--alt);cursor:default;border-style:dashed}
.chip.soon small{font-weight:600;font-size:11px;letter-spacing:.04em;margin-left:4px}
.pilares{margin-bottom:8px}
.pilar h3{font-family:var(--slab);font-size:16px;margin:0 0 6px}
.pilar p{margin:0 0 10px;color:var(--muted);font-size:14px}
.pilar.soon{background:var(--alt);border-style:dashed}
.pilar-meta{display:block;margin-top:8px;font-size:12px;color:var(--muted)}

/* ---------- Ruta de inicio (Inicio) ---------- */
.ruta-inicio{background:var(--bg);border:2px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:20px}
.ruta-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.ruta-head strong{font-family:var(--slab);font-size:18px}
.ruta-head span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ruta-msg{margin:0 0 10px;font-size:14px;color:var(--muted);line-height:1.5}
.ruta-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ruta-pasos a{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;border-radius:var(--r);color:inherit;text-decoration:none;min-height:44px}
.ruta-pasos a:hover{background:var(--alt)}
.ruta-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px}
.ruta-pasos li.done .ruta-num{background:var(--ok);border-color:var(--ok);color:#fff}
.ruta-pasos li.done .ruta-txt strong{text-decoration:line-through;color:var(--muted)}
.ruta-pasos li.lock .ruta-txt strong,
.ruta-pasos li.lock .ruta-txt small{color:var(--muted)}
.ruta-txt{display:flex;flex-direction:column;gap:2px}
.ruta-txt strong{font-size:15px}
.ruta-txt small{font-size:13px;color:var(--muted);line-height:1.45}

/* ---------- Según tu modelo (Preparación) ---------- */
.modelo-card h3{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:16px;margin:0 0 8px}
.modelo-card h3 .muted{font-weight:500;font-size:13px}
.modelo-card.mio{border:2px solid var(--red)}
.modelo-card p{margin:0 0 6px;font-size:14px}
.confirma{margin-top:14px;background:var(--alt)}
.confirma p{margin:0 0 8px}
.confirma .wa-inline{margin-top:10px}

/* ---------- Redes y lives (Soporte) ---------- */
.redes{margin-top:16px}
.redes p{margin:0 0 6px;font-size:14px}
.redes-links{display:flex;flex-direction:column;gap:0;color:var(--grafito)}
.redes-links > *{padding:6px 0;border-bottom:1px solid var(--regla)}
.redes-links > *:last-child{border-bottom:none}
.redes-links a{color:var(--red-cta);font-weight:700}

/* ---------- CeVi · panel de chat y voz ---------- */
.ai-panel{position:fixed;right:16px;bottom:16px;top:auto;left:auto;width:min(420px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--bg);border:2px solid var(--black);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(20,20,20,.28);z-index:40;overflow:hidden}
.cevi-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--black);color:var(--on-black);flex-shrink:0}
.cevi-head-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.cevi-head-txt strong{font-family:var(--slab);font-size:16px}
.cevi-head-txt span{font-size:12px;color:var(--on-black-dim)}
.cevi-avatar{width:32px;height:32px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.cevi-avatar.grande{width:38px;height:38px;font-size:20px}
.cevi-voz,.cevi-close{background:none;border:none;color:var(--on-black);cursor:pointer;padding:8px;border-radius:var(--r);min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center}
.cevi-voz svg{width:20px;height:20px}
.cevi-voz:hover,.cevi-close:hover{background:var(--black-2)}
.cevi-voz[aria-pressed="false"]{opacity:.5}
.cevi-close{font-size:24px;line-height:1}
.cevi-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;background:var(--alt)}
.cevi-msg{display:flex;gap:8px;align-items:flex-start;max-width:92%}
.cevi-msg.yo{align-self:flex-end}
.cevi-msg .cevi-txt{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 13px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.cevi-msg.yo .cevi-txt{background:var(--black);color:var(--on-black);border-color:var(--black)}
.cevi-ticket{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--ok)}
.cevi-msg.pensando .cevi-txt{display:flex;gap:5px;padding:14px 13px}
.cevi-msg.pensando span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ceviPulso 1.2s infinite}
.cevi-msg.pensando span:nth-child(2){animation-delay:.2s}
.cevi-msg.pensando span:nth-child(3){animation-delay:.4s}
@keyframes ceviPulso{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cevi-sug{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0;background:var(--alt)}
.cevi-sug .chip{font-size:13px;font-weight:500;padding:8px 11px;text-align:left}
.cevi-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg);flex-shrink:0}
.cevi-form input{flex:1;min-width:0;padding:12px 14px;border:2px solid var(--line);border-radius:24px;font-family:var(--sans);font-size:15px;background:var(--bg);color:var(--ink)}
.cevi-form input:focus{outline:none;border-color:var(--red)}
.cevi-mic,.cevi-send{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cevi-mic{background:var(--alt);color:var(--ink);border:2px solid var(--line)}
.cevi-mic:hover{border-color:var(--ink)}
.cevi-mic.grabando{background:var(--red-cta);color:#fff;border-color:var(--red-cta);animation:ceviLatido 1.1s infinite}
@keyframes ceviLatido{50%{box-shadow:0 0 0 7px rgba(249,2,11,.16)}}
.cevi-send{background:var(--red-cta);color:#fff}
.cevi-send:hover{background:var(--red-dark)}
.cevi-mic svg,.cevi-send svg{width:20px;height:20px}
.cevi-pie{margin:0;padding:0 14px 12px;font-size:11.5px;color:var(--muted);background:var(--bg);text-align:center;flex-shrink:0}
.cevi-card .big-ico{color:var(--red-cta)}
button.big{width:100%;text-align:left;font-family:inherit;cursor:pointer}
@media(max-width:560px){
  .ai-panel{right:0;left:0;bottom:0;width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:2px 0 0}
}

/* ---------- Acceso: consentimiento, código y pie legal ---------- */
.gate-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;text-align:left;font-size:13.5px;line-height:1.5;color:var(--muted);cursor:pointer}
.gate-consent input{flex-shrink:0;width:20px;height:20px;margin-top:1px;accent-color:var(--red);cursor:pointer}
.gate-consent a{color:var(--red-cta);font-weight:700;text-decoration:underline}
.gate-otp-ic{color:var(--ok)}
.otp-pasos{list-style:none;margin:20px 0 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:20px}
.otp-pasos li{display:flex;gap:12px;align-items:flex-start}
.otp-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--black);color:var(--on-black);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.otp-pasos strong{display:block;font-family:var(--slab);font-size:16px;margin-bottom:4px}
.otp-pasos p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.5}
.otp-wa{display:inline-block;width:100%;text-align:center}
.otp-codigo-manual{margin-top:10px !important;font-size:12.5px}
.otp-estado{font-size:13.5px;color:var(--muted)}
.otp-estado.ok{color:var(--ok);font-weight:700}
.otp-form{display:flex;gap:8px;margin-top:4px}
.otp-form input{flex:1;min-width:0;padding:14px;border:2px solid var(--line);border-radius:var(--r);font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:.28em;text-align:center;background:var(--bg);color:var(--ink)}
.otp-form input:focus{outline:none;border-color:var(--red)}
.otp-form button{white-space:nowrap}
.gate-volver{margin-top:22px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;padding:10px;min-height:44px}
.gate-volver:hover{color:var(--ink)}
.gate-legal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:22px;font-size:13px}
.gate-legal a{color:var(--muted);text-decoration:underline}
.gate-legal a:hover{color:var(--ink)}
.gate-legal .lr-link{font-weight:700;color:var(--ink)}

/* ---------- Pie del portal: proveedor + legal ---------- */
.pie-legal{border-top:1px solid var(--line);padding:22px 32px 32px;background:var(--alt);font-size:13px;color:var(--muted);line-height:1.6}
.pie-legal .pie-empresa{margin:0 0 10px}
.pie-legal .pie-empresa strong{color:var(--ink)}
.pie-legal nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.pie-legal nav a{color:var(--muted);text-decoration:underline}
.pie-legal nav a:hover{color:var(--ink)}
.pie-lr{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:var(--r);padding:8px 12px;font-weight:700;color:var(--ink) !important;text-decoration:none !important;background:var(--bg);min-height:44px}
.pie-lr:hover{background:var(--black);color:var(--on-black) !important;border-color:var(--black)}
@media(max-width:560px){.pie-legal{padding:20px 16px 28px}.otp-form{flex-direction:column}.otp-form button{width:100%}}
.cert-serie.sin-serie{background:var(--alt);border-style:dashed}
.cert-serie.sin-serie code{background:var(--bg);padding:2px 6px;border-radius:4px;font-size:13px}
.gate-consent.opcional{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.gate-consent.opcional em{font-style:normal;color:var(--muted);opacity:.85}

/* ---------- Pantalla de arranque (evita el blanco inicial) ---------- */
.boot{position:fixed;inset:0;z-index:60;background:var(--black);color:var(--on-black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px}
.boot img{width:150px;height:auto}
.boot p{margin:0;font-size:14px;color:var(--on-black-dim)}
.boot-barra{width:180px;height:4px;border-radius:2px;background:var(--black-3);overflow:hidden}
.boot-barra i{display:block;width:40%;height:100%;background:var(--red);border-radius:2px;animation:bootCorre 1.1s ease-in-out infinite}
@keyframes bootCorre{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.boot-barra i{animation:none;width:100%}}

/* ---------- Llevarse la guía al correo ---------- */
.correo-caja.lista{background:var(--ok-50);border-color:var(--ok)}
.correo-caja.lista p{margin-bottom:0}
.correo-msg{margin-top:10px;font-size:14px}
.correo-msg.mal{color:var(--red-dark)}
@media(max-width:560px){.correo-caja{flex-direction:column;gap:10px}.correo-form button{width:100%}}
.prep-imprimir{display:flex;justify-content:flex-end;margin:-4px 0 14px}

/* ---------- Titular de sección (para frases largas) ----------
   `.section-title` es un rótulo de 2 o 3 palabras en 12px mayúsculas. Se estaba
   usando para titulares de 58 caracteres, que quedaban más chicos y más grises
   que el texto de al lado. Esto es lo que va cuando el título es una frase. */
.section-h{font-family:var(--slab);font-size:var(--t-lg);font-weight:700;line-height:var(--lh-snug);color:var(--ink);margin:var(--s-6) 0 var(--s-3);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.section-h .contador{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Zonas táctiles de los enlaces legales ---------- */
.gate-legal a,.pie-legal nav a,.redes-links a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---------- Densidad y medida de lectura en móvil ---------- */
@media(max-width:560px){
  .card{padding:var(--s-4)}
  .gate-paises{grid-template-columns:repeat(3,1fr)}
  .gate-paises button{font-size:var(--t-xs);padding:10px 4px}
}
.big.lock .big-txt strong{color:var(--ink)}
.big.lock .big-txt span{color:var(--muted)}

/* ---------- Cuenta regresiva hasta la entrega ---------- */
.cuenta{display:flex;gap:12px;align-items:flex-start;background:var(--black);color:var(--on-black);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:var(--s-5)}
.cuenta.urgente{background:var(--red-dark)}
.cuenta-ic{font-size:22px;line-height:1;flex-shrink:0}
.cuenta strong{display:block;font-family:var(--slab);font-size:var(--t-lg);line-height:var(--lh-snug);margin-bottom:4px}
.cuenta span{font-size:var(--t-sm);color:var(--on-black-dim)}
.cuenta.urgente span{color:#ffd9da}
.cuenta strong strong{display:inline;font-family:inherit;font-size:inherit;color:var(--amber)}

/* ---------- Lo que puede lastimarte, arriba y en rojo ---------- */
.card.peligro{border:2px solid var(--red);background:var(--red-50)}

/* ---------- Paso 0: pedir la ficha del modelo ---------- */
.card.paso0{border:2px solid var(--ink)}
.card.paso0 .btn{margin-top:6px}

/* ---------- Checklist: tiempos, opcionales y "¿cómo lo hago?" ---------- */
.prep-como-txt .ulist{margin:0}

/* ---------- El día que llega ---------- */
.dia-entrega .acceso-pasos li.destacado{font-weight:700;color:var(--red-dark)}
@media(max-width:560px){.prep-como{padding-left:0}}

/* ============================================================
   Correcciones de accesibilidad (auditoría WCAG 2.2 AA)
   Van al final a propósito: pisan por orden a las reglas previas,
   sin tener que reescribir el archivo entero.
   ============================================================ */

/* El texto del consentimiento legal estaba en 2.89:1 sobre el fondo negro del
   acceso: ilegible, y encima es el texto que hay que leer ANTES de aceptar. */
.gate-consent,
.gate-consent.opcional em,
.otp-pasos p,
.otp-estado,
.gate-volver,
.gate-legal a,
.otp-codigo-manual{color:var(--on-black-dim);opacity:1}
.gate-consent a{color:#FF6B70}                 /* 5.6:1 sobre negro */
.gate-foot a,.gate-paso strong{color:#FF6B70}
.gate-doc-ej{color:var(--on-black-dim);font-size:var(--t-sm);margin:8px 0 0}

/* El botón del acceso se volvía ilegible justo al pulsarlo (3.87:1). */
.gate-btn[aria-busy="true"]{opacity:1;background:var(--red-dark);cursor:progress}

/* No se quita el indicador de foco: se reemplaza por uno más visible. */
.cevi-form input:focus-visible,
.otp-form input:focus-visible,
.correo-form input:focus-visible,
.lr-form input:focus-visible,
.lr-form textarea:focus-visible,
.lr-form select:focus-visible{outline:3px solid var(--red-cta);outline-offset:2px;border-color:var(--red-cta)}

/* El borde de los campos no se distinguía del fondo (1.23:1). Ahora 4.5:1. */
.field input,.field textarea,.field select,
.otp-form input,.correo-form input,.cevi-form input{border-color:#767676}
#gateDoc,#gateTel,#gateCod,.gate-tipos button,.gate-paises button{border-color:#5a5a5a}

/* Elegido vs no elegido se distinguía solo por color. */
.gate-paises button[aria-checked="true"],
.gate-tipos button[aria-checked="true"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}

/* A 320px o con zoom al 200% los cinco países se desbordaban. */
.gate-paises{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
@media(max-width:360px){.gate-paises{grid-template-columns:repeat(3,1fr)}}
.cert-maq-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

/* El foco no debe quedar debajo de la barra superior fija. */
.view :is(a,button,input,select,textarea,summary){scroll-margin-top:72px}

/* «Saltar al contenido» apuntaba a #view, que está oculto mientras se accede. */
.gate:not([hidden]) ~ .skip,body:has(.gate:not([hidden])) .skip{display:none}

/* Texto solo para lectores de pantalla (avisos de "abre en otra pestaña"). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* El subtexto del botón de WhatsApp perdía contraste por la opacidad. */
.wa-txt span{opacity:1}


/* ---------- Lista de compras ----------
   Dos columnas en pantalla ancha: la lista tiene 8 cosas y en una sola columna
   obligaba a hacer scroll de más. El dibujo va grande y sin caja de fondo: antes
   el objeto quedaba diminuto dentro de un cuadro gris, y eso era el espacio
   vacío que se veía. */
.seccion-bajada{margin:0 0 var(--s-4);font-size:var(--t-md);max-width:var(--medida)}

/* El aviso de la ficha: dos frases, no un párrafo */
.card.ficha-modelo{border:2px solid var(--ink);margin-bottom:var(--s-4);padding:var(--s-4)}

@media(max-width:560px){
  .compras{grid-template-columns:1fr}
  .compra{padding:var(--s-3)}
}

/* ---------- Dibujo de cada paso ----------
   Sin marco ni fondo: el dibujo ya es blanco. Más chico que antes: siete pasos
   con una imagen de 400px cada uno hacían una página larguísima. */
@media(max-width:560px){.prep-step-fig{margin-left:0;max-width:240px}}


/* ---------- Hoja resumen: lo que el cliente se lleva ---------- */
@media(max-width:620px){.hoja-cols{grid-template-columns:1fr;gap:var(--s-4)}.hoja{padding:var(--s-4)}}

/* La hoja imprimible se retiró: la guía es corta y se lee en pantalla. */

/* ---------- Secciones que aún no se abren ---------- */
.big.cerrado{background:var(--alt);border-style:dashed}
.big.cerrado .big-txt strong{color:var(--muted)}
.big.cerrado .big-ico{opacity:.55}
.big.cerrado .big-arrow{color:var(--muted)}
.card.desvio{border:2px solid var(--red);background:var(--red-50);margin-bottom:var(--s-4)}
.card.desvio strong{display:block;font-family:var(--slab);font-size:var(--t-lg);margin-bottom:5px}
.card.desvio p{margin:0;font-size:var(--t-sm)}

/* ════════════════════════════════════════════════════════════════════════
   LA HOJA SOBRE LA MESA
   El portal dejaba 24 tarjetas idénticas flotando sobre fondo blanco: mismo
   radio, misma sombra, mismo borde, sin jerarquía. Ahora el contenido es una
   hoja de papel apoyada en un banco de trabajo, y las listas son filas con
   regla, como la lista de piezas de un manual.
   ════════════════════════════════════════════════════════════════════════ */
body{background:var(--mesa)}
.app{background:var(--mesa)}
.content{background:var(--mesa)}
.view{background:var(--papel);border-radius:var(--r-lg);max-width:860px;margin:var(--s-4) auto var(--s-6);padding:var(--s-6);
      box-shadow:0 1px 2px rgba(20,20,20,.05),0 8px 28px rgba(20,20,20,.06)}
.foot{background:transparent;border-top:none;max-width:1020px;margin:0 auto;padding:0 var(--s-4) var(--s-4)}
.pie-legal{background:transparent;border-top:1px solid var(--regla)}
@media(max-width:620px){
  .view{margin:0;border-radius:0;padding:var(--s-4) var(--s-4) var(--s-6);box-shadow:none}
  body,.app,.content{background:var(--papel)}
}

/* ── Listas con regla: la lista de piezas de un manual ── */
.lista{border-top:2px solid var(--tinta);margin:0 0 var(--s-6)}
.lista-fila{display:grid;grid-template-columns:2.2rem 104px 1fr;gap:var(--s-3) var(--s-4);
            align-items:start;padding:var(--s-4) 0;border-bottom:1px solid var(--regla)}
.lista-num{font-family:var(--slab);font-weight:800;font-size:var(--t-xl);line-height:1;
           color:var(--tinta);font-variant-numeric:tabular-nums;padding-top:2px}
.lista-dibujo{width:104px;height:104px;display:grid;place-items:center}
.lista-dibujo img{max-width:104px;max-height:104px;width:auto;height:auto;display:block;mix-blend-mode:multiply}
.lista-txt h3{font-family:var(--slab);font-size:var(--t-lg);font-weight:700;line-height:var(--lh-snug);margin:0 0 4px}
.lista-txt .para{margin:0 0 6px;font-size:var(--t-sm);color:var(--rojo-tinta);font-weight:700;line-height:var(--lh-snug)}
.lista-txt .spec{margin:0 0 6px;font-size:var(--t-sm);line-height:var(--lh-base);max-width:var(--medida)}
.lista-txt .donde{margin:0;font-size:var(--t-sm);color:var(--grafito)}
.lista-txt .aviso{display:inline-block;margin-top:8px;font-size:var(--t-xs);font-weight:700;
                  color:var(--rojo-tinta);border:1px solid var(--rojo-tinta);border-radius:var(--r-sm);padding:3px 7px}
@media(max-width:620px){
  .lista-fila{grid-template-columns:1.5rem 92px 1fr;gap:var(--s-3);padding:var(--s-3) 0}
  .lista-dibujo{width:92px;height:92px}
  .lista-dibujo img{max-width:92px;max-height:92px}
  .lista-num{font-size:var(--t-lg);padding-top:1px}
  .lista-txt h3{font-size:var(--t-md)}
}

/* ── El checklist, con el mismo tratamiento de fila con regla ── */
.avance .bar{height:6px;border-radius:var(--r-full);background:var(--regla);overflow:hidden}
.avance .bar i{display:block;height:100%;background:var(--rojo-tinta);transition:width .3s}
.lista-pasos .prep-step{display:grid;grid-template-columns:2.2rem 1fr auto;
  grid-template-areas:"num main fig" "como como fig";gap:var(--s-2) var(--s-3);align-items:start;
  border-bottom:1px solid var(--regla);padding:var(--s-4) 0}
.lista-pasos .prep-step-main{grid-area:main;display:flex;gap:var(--s-3);align-items:flex-start;
  cursor:pointer;min-height:var(--tap);padding:0}
.lista-pasos .prep-step-num{font-family:var(--slab);font-weight:800;font-size:var(--t-xl);line-height:1;
  color:var(--tinta);font-variant-numeric:tabular-nums;width:auto;height:auto;background:none;border:none;display:block}
.lista-pasos .prep-step.done .prep-step-num{color:var(--regla)}
.lista-pasos .prep-step.done .prep-step-txt{color:var(--grafito);text-decoration:line-through}
@media(max-width:620px){
}

.hoja-col em.urg{display:block}

/* Las preguntas frecuentes son un indice, no doce tarjetas: fila con regla,
   igual que la lista de compras y el checklist. */
.faq-item{background:transparent;border:none;border-bottom:1px solid var(--regla);border-radius:0;margin-bottom:0}
.faq-item:first-of-type{border-top:2px solid var(--tinta)}
.faq-q{padding:var(--s-4) 0;font-size:var(--t-md)}
.faq-q:hover{background:transparent;color:var(--rojo-tinta)}
.faq-a{padding:0 0 var(--s-4)}
.chev{color:var(--grafito);font-size:var(--t-lg)}

/* El tema agrupa las preguntas: 32 títulos sueltos en fila no se pueden
   escanear, ocho grupos con nombre sí. La primera pregunta de cada grupo ya
   no necesita el filete grueso de ".faq-item:first-of-type": el propio
   título del tema hace de separador. */
.faq-tema{margin:var(--s-6) 0 var(--s-1);font-size:var(--t-sm);font-weight:700;color:var(--grafito)}
.faq-tema:first-child{margin-top:0}
.faq-tema + .faq-item{border-top:none}

/* El pie dejo de estar sobre negro cuando la vista paso a ser una hoja blanca:
   estos colores venian de ahi y quedaban en 1.96:1 sobre papel. */
.me{color:var(--grafito);font-size:var(--t-xs)}
.me strong{color:var(--tinta);font-size:var(--t-sm)}
.ctx-out{border:1px solid var(--regla);color:var(--grafito);font-size:var(--t-xs)}
.ctx-out:hover{border-color:var(--tinta);color:var(--tinta)}

/* El numero del paso hecho quedaba en 1.28:1: invisible. El tachado y la casilla
   ya dicen que esta hecho, asi que el numero solo se apaga un tono. */
.lista-pasos .prep-step.done .prep-step-num{color:var(--grafito)}
/* Rojo puro sobre negro se queda en 4.42:1; el blanco es el numero, no el color. */
.step .n{color:#fff}

/* El pie se alinea con la hoja, no con el ancho viejo de 1020px. */
.foot,.pie-legal-inner{max-width:860px}
.pie-legal{background:transparent;color:var(--grafito);font-size:var(--t-xs)}
/* El padding de la hoja tiene que ceder antes de los 620px: en tablet vertical
   se quedaba en 32px porque esta regla iba despues del media query viejo. */
@media(max-width:880px){.view{padding:var(--s-5)}}
@media(max-width:620px){.view{padding:var(--s-4) var(--s-4) var(--s-6)}}

/* Jerarquia de titulos: pagina 24px, seccion 19px, bloque 16px. Antes el titulo
   de seccion (19px) era mas chico que los h3 que colgaban de el (18px). */
.card h3,.course-head h3{font-size:var(--t-md)}

/* Lo que viene: una lista, no tres tarjetas blancas con una frase cada una. */
.proximo{list-style:none;margin:0 0 var(--s-6);padding:0;border-top:1px solid var(--regla)}
.proximo li{padding:var(--s-3) 0;border-bottom:1px solid var(--regla);color:var(--grafito);font-size:var(--t-sm)}
/* La tabla vive dentro de una tarjeta: un marco basta. */
.tabla-scroll table{border:none;border-radius:0}
/* Las lecciones en video son un indice del curso, no veinte pildoras grises. */
.cert-hero-t{font-family:var(--slab);font-size:var(--t-xl);line-height:var(--lh-snug);margin:0 0 4px}

/* ────────────────────────────────────────────────────────────────────────
   BOTÓN FLOTANTE DE CeVi
   Vivía dentro de la barra superior, donde competía con el logo y se leía
   como un anuncio. Ahora flota abajo a la derecha, presente en toda la
   pantalla y en todas las vistas, que es donde la gente ya busca un chat.
   Va en negro y no en rojo: el rojo se guarda para la acción de cada página.
   ──────────────────────────────────────────────────────────────────────── */
.ai-btn{position:fixed;right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));
        left:auto;margin:0;z-index:35;
        background:var(--tinta);color:#fff;border:1px solid var(--tinta);
        border-radius:var(--r-full);padding:12px 18px;gap:10px;
        font-size:var(--t-sm);font-weight:700;
        box-shadow:0 6px 20px rgba(20,20,20,.28)}
.ai-btn:hover{background:var(--black-2);border-color:var(--black-2)}
.ai-btn .ai-ic{color:var(--rojo);width:20px;height:20px}
.ai-btn:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
/* Con el panel abierto sobra: el panel trae su propia X. */
.ai-btn[aria-expanded="true"]{display:none}
/* Que el botón no tape lo último de la página, incluido el pie. */
.pie-legal{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(max-width:620px){
  .ai-btn{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:11px 16px}
}
/* Al imprimir no hay botón que esquivar. */
@media print{.ai-btn{display:none!important}.pie-legal{padding-bottom:0}}
/* Los avisos suben por encima del botón flotante: antes se tapaban entre sí. */
.toast{bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)}

/* ════════════════════════════════════════════════════════════════════════
   CeVi COMO ASISTENTE DE VOZ
   El micrófono deja de ser un botón al lado del cuadro de escribir y pasa a
   ser el control principal: quien abre el panel habla, no teclea. El chat
   escrito sigue a un toque, para talleres ruidosos o navegadores sin dictado.
   ════════════════════════════════════════════════════════════════════════ */
.cevi-voz-zona{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 14px 18px;background:var(--papel);border-top:1px solid var(--regla);flex-shrink:0}
.ai-panel[data-modo="texto"] .cevi-voz-zona{display:none}
.ai-panel[data-modo="voz"] .cevi-form{display:none}

.cevi-dictado{margin:0;min-height:20px;font-size:var(--t-sm);line-height:1.4;
  color:var(--grafito);text-align:center;max-width:34ch}

/* El botón: 72px, muy por encima del mínimo táctil, para usarlo con guantes. */
.cevi-voz-btn{position:relative;width:72px;height:72px;border-radius:50%;
  border:none;cursor:pointer;background:var(--tinta);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .12s}
.cevi-voz-btn:active{transform:scale(.96)}
.cevi-voz-btn:focus-visible{outline:3px solid var(--rojo);outline-offset:4px}
.cevi-voz-ic{display:flex}
.cevi-voz-ic svg{width:30px;height:30px}
.cevi-voz-txt{font-size:var(--t-sm);font-weight:700;color:var(--tinta)}

/* Escuchando: rojo y con un anillo que late, para que se vea desde lejos. */
.ai-panel[data-estado="escuchando"] .cevi-voz-btn{background:var(--rojo-tinta)}
.ai-panel[data-estado="escuchando"] .cevi-voz-btn::after{content:"";position:absolute;
  inset:-8px;border-radius:50%;border:3px solid var(--rojo-tinta);
  animation:ceviAnillo 1.4s ease-out infinite}
@keyframes ceviAnillo{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}

/* Pensando: apagado y quieto, para que se note que el turno no es tuyo. */
.ai-panel[data-estado="pensando"] .cevi-voz-btn{background:var(--grafito);cursor:default}

/* Hablando: el micrófono se cambia por tres ondas. Tocar interrumpe. */
.cevi-onda{display:none;align-items:flex-end;gap:4px;height:28px}
.cevi-onda i{display:block;width:5px;border-radius:3px;background:#fff;height:9px;
  animation:ceviOnda .9s ease-in-out infinite}
.cevi-onda i:nth-child(2){animation-delay:.15s}
.cevi-onda i:nth-child(3){animation-delay:.3s}
@keyframes ceviOnda{0%,100%{height:9px}50%{height:26px}}
.ai-panel[data-estado="hablando"] .cevi-voz-btn{background:var(--rojo-tinta)}
.ai-panel[data-estado="hablando"] .cevi-onda{display:flex}
.ai-panel[data-estado="hablando"] .cevi-voz-ic{display:none}

/* Cambiar de voz a texto y al revés: un enlace, no otro botón que compita. */
.cevi-cambiar{background:none;border:none;padding:8px 4px;min-height:var(--tap);
  font-family:var(--sans);font-size:var(--t-sm);color:var(--grafito);
  text-decoration:underline;cursor:pointer}
.cevi-cambiar:hover{color:var(--tinta)}
.cevi-form .cevi-cambiar{flex-basis:100%;text-align:center;order:3}
.cevi-form{flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .cevi-voz-btn::after{animation:none;opacity:.55}
  .cevi-onda i{animation:none;height:18px}
}
/* El aviso de voz se ve en los dos modos: antes vivía dentro de la zona que
   se ocultaba justo al mostrarlo, así que nadie leía por qué no podía hablar. */
.cevi-aviso{margin:0;padding:12px 14px;background:var(--mesa);border-top:1px solid var(--regla);
  font-size:var(--t-sm);line-height:1.45;color:var(--tinta);flex-shrink:0}
.cevi-aviso-btn{display:block;margin-top:8px;background:var(--tinta);color:#fff;border:none;
  border-radius:var(--r-full);padding:9px 16px;min-height:var(--tap);
  font-family:var(--sans);font-size:var(--t-sm);font-weight:700;cursor:pointer}
.cevi-aviso-btn:hover{background:var(--black-2)}

/* El toro de C4V como máscara: así se pinta del color que toque en cada sitio
   en vez de arrastrar un PNG blanco que solo sirve sobre fondo oscuro. */
.toro{display:block;background:currentColor;
  -webkit-mask:url(../assets/c4v-toro.png?v=2) center/contain no-repeat;
          mask:url(../assets/c4v-toro.png?v=2) center/contain no-repeat}
.ai-btn .toro{width:26px;height:26px;color:var(--rojo)}
.cevi-avatar .toro{width:20px;height:20px;color:#fff}
.cevi-avatar.grande .toro{width:24px;height:24px}

/* ════════════════════════════════════════════════════════════════════════
   EL ORBE
   La burbuja que se mueve con la voz. Todo cuelga de --n (0 a 1), que el
   bucle de animación actualiza con la amplitud real del audio.
   ════════════════════════════════════════════════════════════════════════ */
.orbe{--n:0;position:relative;width:112px;height:112px;display:grid;place-items:center;
      isolation:isolate}
.orbe-chico{width:76px;height:76px}
.orbe > *{grid-area:1/1;border-radius:50%}

.orbe-halo{width:100%;height:100%;
  background:radial-gradient(circle at 50% 50%, rgba(249,2,11,.42) 0%, rgba(249,2,11,.12) 45%, rgba(249,2,11,0) 70%);
  transform:scale(calc(.86 + var(--n) * .5));
  opacity:calc(.45 + var(--n) * .55);
  transition:opacity .12s linear}

.orbe-anillo{width:86%;height:86%;border:2px solid var(--rojo);opacity:calc(.16 + var(--n) * .5);
  transform:scale(calc(.94 + var(--n) * .34))}
.orbe-anillo.dos{width:96%;height:96%;border-width:1.5px;opacity:calc(.1 + var(--n) * .34);
  transform:scale(calc(.97 + var(--n) * .5))}

.orbe-disco{width:62%;height:62%;background:var(--tinta);display:grid;place-items:center;
  transform:scale(calc(1 + var(--n) * .11));
  box-shadow:0 6px 20px rgba(20,20,20,.3)}
.orbe-disco .toro{width:58%;height:58%;color:#fff}

/* Cada estado tiene su color, para saber de un vistazo de quién es el turno. */
.ai-panel[data-estado="escuchando"] .orbe-disco,
[data-cevi-estado="escuchando"] .orbe-disco{background:var(--rojo-tinta)}
.ai-panel[data-estado="hablando"] .orbe-disco,
[data-cevi-estado="hablando"] .orbe-disco{background:var(--rojo-tinta)}
.ai-panel[data-estado="pensando"] .orbe-halo,
[data-cevi-estado="pensando"] .orbe-halo{filter:grayscale(1)}
.ai-panel[data-estado="pensando"] .orbe-disco,
[data-cevi-estado="pensando"] .orbe-disco{background:var(--grafito)}

/* El botón que envuelve al orbe deja de ser un círculo negro: el orbe ES el botón. */
.cevi-voz-btn{width:auto;height:auto;background:none;border-radius:0;padding:0}
.cevi-voz-btn:active{transform:scale(.97)}
.ai-panel[data-estado="escuchando"] .cevi-voz-btn::after{display:none}
.ai-panel[data-estado="pensando"] .cevi-voz-btn{background:none}
.ai-panel[data-estado="hablando"] .cevi-voz-btn{background:none}

@media (prefers-reduced-motion:reduce){
  .orbe > *{transition:none}
  .orbe-halo,.orbe-anillo,.orbe-disco{transform:none}
}

/* ---------- Página propia de CeVi ---------- */
.ai-btn.oculto{display:none}
.big-ico .toro{width:22px;height:22px;color:var(--rojo-tinta)}
.cevi-pag{display:flex;flex-direction:column;gap:var(--s-4)}
.cevi-pag-intro{margin:0;font-size:var(--t-md);color:var(--grafito);max-width:var(--medida)}
.cevi-pag-orbe{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:var(--s-5) 0 var(--s-4)}
.orbe-gigante{width:190px;height:190px}
.cevi-pag .cevi-voz-txt{font-size:var(--t-lg);font-family:var(--slab);font-weight:700}
.cevi-pag .cevi-dictado{min-height:44px;font-size:var(--t-md);color:var(--tinta);max-width:30ch}
.cevi-pag .cevi-msgs{background:var(--mesa);border-radius:var(--r-lg);max-height:44vh;
  padding:var(--s-4);gap:var(--s-3)}
.cevi-pag .cevi-msgs:empty{display:none}
.cevi-pag .cevi-sug{background:transparent;padding:0}
.cevi-pag .cevi-form{background:transparent;border-top:none;padding:0}
.cevi-pag[data-cevi-modo="voz"] .cevi-form{display:none}
.cevi-pag[data-cevi-modo="texto"] .cevi-pag-orbe{padding-bottom:0}
.cevi-pag[data-cevi-modo="texto"] .cevi-voz-txt{font-size:var(--t-sm);font-family:var(--sans);color:var(--grafito)}
.cevi-pag[data-cevi-modo="texto"] .orbe-gigante{width:96px;height:96px}
.cevi-pag[data-cevi-modo="voz"] #ceviEscribir{display:inline-block}
.cevi-pag[data-cevi-modo="voz"] #ceviHablarBtn{display:none}
.cevi-pag[data-cevi-modo="texto"] #ceviEscribir{display:none}
.cevi-pag[data-cevi-modo="texto"] #ceviHablarBtn{display:inline-block}
.cevi-pag-pie{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--regla);padding-top:var(--s-3)}
.cevi-pag .cevi-aviso{border-radius:var(--r);border:1px solid var(--regla);border-top:1px solid var(--regla)}
.cevi-pag .cevi-pie{text-align:center}
@media(max-width:620px){.orbe-gigante{width:168px;height:168px}}

/* ---------- El botón flotante, más grande y vivo ----------
   Era una píldora de 44px que se leía como un enlace más. Ahora lleva el orbe
   respirando y dice en dos líneas qué hace, para que se entienda de un vistazo
   que ahí se habla, no se escribe. */
.ai-btn{padding:10px 20px 10px 10px;gap:12px;align-items:center;text-align:left}
.ai-txt{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.ai-linea{font-size:var(--t-md);font-weight:600}
.ai-txt strong{font-weight:800}
.ai-txt small{font-size:var(--t-xs);font-weight:400;color:#c9c9c9}
.ai-orbe{position:relative;width:46px;height:46px;flex-shrink:0;display:grid;place-items:center}
.ai-orbe > *{grid-area:1/1;border-radius:50%}
.ai-orbe-halo{width:100%;height:100%;
  background:radial-gradient(circle,rgba(249,2,11,.55) 0%,rgba(249,2,11,.18) 48%,rgba(249,2,11,0) 72%);
  animation:aiRespira 2.8s ease-in-out infinite}
.ai-orbe-disco{width:66%;height:66%;background:var(--rojo-tinta);display:grid;place-items:center}
.ai-orbe-disco .toro{width:62%;height:62%;color:#fff}
@keyframes aiRespira{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.18);opacity:1}}
@media(max-width:620px){
  .ai-btn{padding:8px 18px 8px 8px;gap:10px}
  .ai-orbe{width:44px;height:44px}
  .ai-linea{font-size:var(--t-sm)}
  .ai-txt small{font-size:11px}
}
@media (prefers-reduced-motion:reduce){ .ai-orbe-halo{animation:none} }
/* La salida a una persona siempre a la vista, y distinta de las pistas. */
.chip-persona{border-color:var(--tinta);color:var(--tinta);font-weight:700;text-decoration:none}
.cevi-wa{display:inline-block;margin-top:10px;background:#128C4A;color:#fff;border-radius:var(--r-full);
  padding:9px 16px;font-size:var(--t-sm);font-weight:700;text-decoration:none;min-height:var(--tap);
  display:inline-flex;align-items:center}
.cevi-wa:hover{background:#0e7a40}
.cevi-wa{margin-top:10px;background:#128C4A;color:#fff;border-radius:var(--r-full);
  padding:9px 16px;font-size:var(--t-sm);font-weight:700;text-decoration:none;
  min-height:var(--tap);display:inline-flex;align-items:center}
.cevi-wa:hover{background:#0e7a40}
/* El enlace al Libro de Reclamaciones estaba en color de texto oscuro sobre el
   fondo negro de la entrada: invisible (1:1). Y el rótulo rojo de cada paso se
   quedaba en 4.42:1, justo por debajo del mínimo. */
.gate-legal .lr-link{color:#fff}
.gate-foot a,.gate-paso strong{color:#FF8A8F}

/* ---------- Completar el teléfono ----------
   Se lee como un solo número: prefijo fijo, lo que la persona escribe, y los
   cuatro dígitos que ya conocemos. */
.tel-caja{display:flex;align-items:center;gap:8px;background:var(--black-2);
  border:2px solid #767676;border-radius:var(--r);padding:6px 12px}
.tel-caja:focus-within{border-color:#FF8A8F}
.tel-prefijo,.tel-cola{color:var(--on-black);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.tel-cola{letter-spacing:.08em}
.tel-caja input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--on-black);font-family:var(--sans);font-size:19px;font-weight:700;
  letter-spacing:.08em;padding:10px 0;min-height:var(--tap)}
.tel-caja input::placeholder{color:#6a6a6a;letter-spacing:.14em}
.gate-tel-ic{color:var(--rojo)}
.otp-form-solo{margin:0 auto;max-width:320px}

/* ---------- Menú de tres destinos ----------
   No había menú: cada pantalla solo ofrecía "Volver al inicio", así que pasar de
   una sección a otra costaba dos toques y desorientaba. Tres pestañas, siempre
   las mismas, con la actual marcada. */
.menu{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{display:inline-flex;align-items:center;min-height:var(--tap);padding:6px 14px;
  border-radius:var(--r-full);color:var(--on-black-dim);font-size:var(--t-sm);font-weight:600;
  white-space:nowrap;transition:background .14s,color .14s}
.menu a:hover{color:#fff;background:var(--black-2)}
.menu a[aria-current="page"]{background:#fff;color:var(--tinta);font-weight:700}
@media(max-width:620px){
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:10px 16px}
  .menu{width:100%;margin-left:0;gap:6px;justify-content:space-between}
  .menu a{flex:1;justify-content:center;padding:6px 8px;font-size:var(--t-xs)}
}
/* El código de prueba se ve distinto para que nadie lo confunda con el real. */

/* ════════════════════════════════════════════════════════════════════════
   LA GUÍA, UNA PANTALLA POR PASO
   Antes todo cabía en una página larga con casillas, barras y un
   «¿Cómo lo hago?» plegado. Ahora se ve un paso, con lo que hay que hacer
   escrito delante, y un solo botón para avanzar.
   ════════════════════════════════════════════════════════════════════════ */
/* El header del portal es sticky (ocupa la parte de arriba aunque se haga
   scroll): sin este margen, subirAlPaso() alinea el paso justo debajo del
   borde de la pantalla mecánicamente, pero ese borde queda tapado por el
   header, y lo primero que se ve es la pregunta a medias en vez de la barra
   de progreso. */
.paso{display:flex;flex-direction:column;gap:var(--s-4);scroll-margin-top:128px}
.paso-cuenta{margin:0;font-size:var(--t-sm);font-weight:700;color:var(--grafito)}
.paso-barra{height:6px;border-radius:var(--r-full);background:var(--regla);overflow:hidden;margin:0 0 var(--s-2)}
.paso-barra i{display:block;height:100%;background:var(--rojo-tinta);transition:width .3s}
/* Barra segmentada, tipo Duolingo: un tramo por pantalla del curso (o por
   pregunta del quiz), no una sola barra continua. Se ve de un vistazo cuánto
   falta sin tener que leer "Lección 7 de 12". */
.paso-segbar{display:flex;gap:3px;margin:0 0 var(--s-3)}
.paso-segbar i{flex:1;height:6px;border-radius:var(--r-full);background:var(--regla);min-width:3px}
.paso-segbar i.hecho{background:var(--rojo-tinta)}
.paso-titulo{font-family:var(--slab);font-size:var(--t-2xl);line-height:var(--lh-snug);margin:0}
.paso-dibujo{margin:0;display:grid;place-items:center;padding:var(--s-2) 0}
.paso-dibujo img{max-width:260px;max-height:220px;width:auto;height:auto;mix-blend-mode:multiply}
.paso-detalle{list-style:none;margin:0;padding:0;border-top:1px solid var(--regla)}
.paso-detalle li{padding:var(--s-3) 0;border-bottom:1px solid var(--regla);
  font-size:var(--t-md);line-height:var(--lh-base);max-width:var(--medida)}
.paso-compras .lista-fila{padding:var(--s-3) 0}
.paso-compras .lista-txt h3{font-size:var(--t-md)}
.paso-pie{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2);margin-top:var(--s-3)}
.paso-pie .btn{width:100%;justify-content:center;font-size:var(--t-lg);padding:16px 20px}
.paso-link{background:none;border:none;padding:12px;min-height:var(--tap);
  font-family:var(--sans);font-size:var(--t-sm);color:var(--grafito);text-decoration:underline;cursor:pointer}
.paso-link:hover{color:var(--tinta)}
.paso-fin{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:var(--s-5) 0}
.paso-fin h2{font-family:var(--slab);font-size:var(--t-2xl);margin:0}
.paso-fin p{margin:0;font-size:var(--t-md);color:var(--grafito)}
@media(min-width:700px){
  .paso-pie{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:var(--s-4)}
  .paso-pie .btn{width:auto;min-width:240px}
}

/* ---------- Acceso: un solo formulario que crece ----------
   Lo ya respondido se queda a la vista, apagado, para que la persona vea dónde
   está sin cambiar de pantalla. */
#gateTelBloque,#gateCodBloque{margin-top:22px;padding-top:20px;border-top:1px solid var(--black-3)}
.gate-tipos.bloqueado,.gate-paises.bloqueado{opacity:.45;pointer-events:none}
#gateDoc:disabled,#gateTel:disabled{opacity:.5;cursor:default}
/* El teléfono lleva un icono a la izquierda y la pista como marca de agua. */
.gate-row-tel{display:flex;align-items:center;gap:10px;background:var(--black-2);
  border:1px solid #5a5a5a;border-radius:var(--r);padding:0 14px}
.gate-row-tel:focus-within{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.gate-tel-ic{flex-shrink:0;width:22px;height:22px;color:#8a8a8a;display:flex}
.gate-tel-ic svg{width:100%;height:100%}
/* El código del país (+51) va fijo antes del número: nadie tiene que
   adivinar si hay que escribirlo o no. */
.gate-tel-cod{flex-shrink:0;font-size:22px;font-weight:700;color:var(--on-black);
  padding-right:2px;border-right:1px solid #5a5a5a;margin-right:2px}
.gate-tel-cod:empty{display:none}
.gate-row-tel #gateTel{background:none;border:none;padding:16px 0}
.gate-row-tel #gateTel:focus{outline:none;border:none}

/* ---------- Guía: flechas grandes y marca reversible ----------
   Se pasa de paso con el pulgar, sin buscar un enlace pequeño, y se puede
   desmarcar lo que se marcó por error. */
.paso-nav{display:flex;align-items:center;gap:12px;margin-top:28px}
.paso-flecha{flex-shrink:0;width:60px;height:60px;border-radius:50%;
  background:var(--papel);border:2px solid var(--tinta);color:var(--tinta);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .14s,color .14s}
.paso-flecha svg{width:28px;height:28px}
.paso-flecha:hover:not(:disabled){background:var(--tinta);color:var(--papel)}
.paso-flecha:disabled{opacity:.2;cursor:default}
.paso-marca{flex:1;min-height:60px;border-radius:var(--r-full);cursor:pointer;
  background:var(--rojo-tinta);border:2px solid var(--rojo-tinta);color:#fff;
  font-family:var(--sans);font-size:var(--t-md);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.paso-marca:hover{background:#a80207;border-color:#a80207}
.paso-marca.hecho{background:var(--papel);border-color:var(--ok);color:var(--ok)}
.paso-marca.hecho:hover{background:var(--ok-50)}
.paso-marca-ic{font-size:20px;line-height:1}
@media(max-width:400px){
  .paso-flecha{width:52px;height:52px}
  .paso-marca{font-size:var(--t-sm);min-height:52px}
}

/* ════════════════════════════════════════════════════════════════════════
   DESTINOS: botones grandes que abren una pantalla
   La Academia era una sola página con todo seguido. Ahora su portada son
   cinco botones y cada uno lleva a lo suyo.
   ════════════════════════════════════════════════════════════════════════ */
.destinos{display:flex;flex-direction:column;gap:var(--s-3)}
.destino{display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  background:var(--papel);border:2px solid var(--regla);border-radius:var(--r-lg);
  padding:var(--s-5);min-height:88px;cursor:pointer;
  font-family:var(--sans);color:var(--tinta);text-decoration:none;
  transition:border-color .16s}
.destino:hover{border-color:var(--tinta)}
.destino-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.destino-txt strong{font-family:var(--slab);font-size:var(--t-lg);line-height:var(--lh-snug)}
.destino-txt small{font-size:var(--t-sm);color:var(--grafito)}
.destino-flecha{font-size:30px;color:var(--grafito);line-height:1;flex-shrink:0}
.destino.peligro{border-color:var(--rojo-tinta)}
.destino.peligro strong{color:var(--rojo-tinta)}

/* «Prepara tu espacio»: el primer curso, el que abre a todos los demás. Un
   borde de marca para que se note que es distinto, no una tarjeta más. */
.destino-prep{border-color:var(--rojo-tinta)}

/* Cursos bloqueados: se ven (para que se sepa que existen), pero no se tocan.
   Es un <div>, no un <a> — nada que fingir que lleva a algún lado. */
.destino.bloqueado{cursor:default;opacity:.55}
.destino.bloqueado:hover{border-color:var(--regla)}
.destino-candado{flex-shrink:0;color:var(--grafito)}
.destino-candado svg{width:22px;height:22px}
.destino-txt small.destino-candado-nota{color:var(--rojo-tinta);font-weight:700}

/* Las tres reglas: una debajo de otra, sin caja de aviso ni adornos. */
.reglas{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.reglas li{display:flex;flex-direction:column;gap:4px;padding:var(--s-4) 0;
  border-bottom:1px solid var(--regla)}
.reglas strong{font-family:var(--slab);font-size:var(--t-lg);color:var(--rojo-tinta);line-height:var(--lh-snug)}
.reglas span{font-size:var(--t-md);line-height:var(--lh-base);max-width:var(--medida)}
.bajada{margin:0 0 var(--s-4);font-size:var(--t-md);color:var(--grafito);max-width:var(--medida)}

/* Icono en cada pestaña del menú: en el teléfono se reconoce la forma antes que
   la palabra, y "Primeros pasos" en 12px cuesta leer sobre negro. */
.menu a{gap:7px}
.menu-ic{display:flex;flex-shrink:0}
.menu-ic .ic{width:18px;height:18px}
/* El ícono de Asistente va siempre en rojo de marca (pedido 18-set-2026) —
   sobre negro/hover usa --rojo (la variante pensada para eso); sobre blanco
   (pestaña activa) cambia a --rojo-tinta, que sí tiene contraste suficiente. */
.menu a[data-nav="cevi"] .menu-ic .ic{color:var(--rojo)}
.menu a[data-nav="cevi"][aria-current="page"] .menu-ic .ic{color:var(--rojo-tinta)}
@media(max-width:620px){
  /* Icono arriba y palabra debajo: así caben los cuatro con el dedo cómodo.
     Una sola línea de texto siempre: si algún rótulo fuera más largo que la
     pestaña, se recorta con puntos suspensivos en vez de partirse en dos
     líneas y estirar toda la barra. */
  .topbar{padding:8px 16px 6px;gap:4px}
  .menu a{flex-direction:column;gap:3px;padding:6px 2px;line-height:1.15;min-height:52px;font-size:11.5px;min-width:0}
  .menu a span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-ic .ic{width:22px;height:22px}
}

/* ---------- La barra del paso, siempre a la vista ----------
   Estaba al final de la página: en el paso 1, la lista de compras la empujaba
   457px por debajo de lo que se ve, así que había que recorrer todo para
   encontrar cómo avanzar. Ahora se pega abajo y acompaña el scroll. */
.paso-nav{position:sticky;bottom:0;z-index:6;margin-top:28px;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  background:var(--papel);border-top:1px solid var(--regla)}
/* Hueco para que la barra no tape la última línea del paso. */
.paso .lista:last-of-type,.paso-cuerpo{margin-bottom:0}
/* Con la barra abajo, el botón de CeVi se sube para no pisarla. */
.app[data-ruta="preparacion"] .ai-btn{bottom:calc(84px + env(safe-area-inset-bottom))}
@media(max-width:620px){
  .paso-nav{padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .app[data-ruta="preparacion"] .ai-btn{bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ════════════════════════════════════════════════════════════════════════
   EL PERSONAJE DE C4V
   Se pasa de la silueta de una tinta al toro de verdad. Se sirve una sola
   imagen de 128px (6.9 KB, paleta indexada) que vale para todos los tamaños:
   el navegador la reduce y no hay que descargar cuatro versiones.
   ════════════════════════════════════════════════════════════════════════ */
.toro-cara{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.ai-btn .toro-cara{max-width:34px;max-height:34px}
.cevi-avatar .toro-cara{max-width:26px;max-height:26px}
.cevi-avatar.grande .toro-cara{max-width:32px;max-height:32px}
.big-ico .toro-cara{max-width:26px;max-height:26px}

/* El disco pasa a blanco: el toro ya es rojo, y así los anillos pueden llevar
   el color del turno sin que todo se funda en una mancha. */
.orbe-disco{background:var(--papel);border:2px solid var(--regla)}
.orbe-disco .toro-cara{max-width:74%;max-height:74%}
.ai-orbe-disco{background:var(--papel)}
.ai-orbe-disco .toro-cara{max-width:78%;max-height:78%}
.ai-panel[data-estado="escuchando"] .orbe-disco,
[data-cevi-estado="escuchando"] .orbe-disco,
.ai-panel[data-estado="hablando"] .orbe-disco,
[data-cevi-estado="hablando"] .orbe-disco{background:var(--papel);border-color:var(--rojo-tinta)}
.ai-panel[data-estado="pensando"] .orbe-disco,
[data-cevi-estado="pensando"] .orbe-disco{background:var(--mesa);border-color:var(--regla)}

/* Icono a la izquierda de cada destino: se reconoce antes de leer el título. */
.destino-ico{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--mesa);display:grid;place-items:center;color:var(--rojo-tinta)}
.destino-ico svg{width:24px;height:24px}

/* Las tres reglas, en una sola línea, arriba de los cursos. */
.aviso-reglas{display:flex;align-items:center;gap:var(--s-4);
  border:2px solid var(--rojo-tinta);border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);
  text-decoration:none;color:var(--tinta);background:var(--papel)}
.aviso-reglas .destino-ico{background:#fdeeee}
.aviso-reglas strong{font-family:var(--slab);font-size:var(--t-md);color:var(--rojo-tinta)}
.aviso-reglas small{font-size:var(--t-sm);color:var(--grafito);line-height:var(--lh-snug)}
/* El toro se veía como una mancha de 23px. Ocupa el disco entero, que para eso
   es el personaje que la gente reconoce. */
.ai-orbe{width:52px;height:52px}
.ai-orbe-disco{width:100%;height:100%;background:transparent}
.ai-orbe-disco .toro-cara{max-width:100%;max-height:100%}
.orbe-disco{width:74%;height:74%}
.orbe-disco .toro-cara{max-width:88%;max-height:88%}
@media(max-width:620px){ .ai-orbe{width:48px;height:48px} }
/* Sin disco detrás: el toro es cuadrado y un círculo le cortaba los cuernos.
   Además ya trae contorno negro, así que se lee sobre cualquier fondo. */
.orbe-disco{background:transparent;border:none;box-shadow:none;width:100%;height:100%}
.orbe-disco .toro-cara{max-width:62%;max-height:62%}
.ai-panel[data-estado] .orbe-disco,[data-cevi-estado] .orbe-disco{background:transparent;border:none}
.cevi-avatar{background:transparent}
.cevi-avatar .toro-cara{max-width:100%;max-height:100%}
.big-ico .toro-cara{max-width:30px;max-height:30px}
/* CeVi saluda en el inicio y felicita al terminar. Medidas fijas en el HTML
   para que el navegador reserve el hueco y la página no dé un salto al cargar. */
.saludo-fila{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.saludo-toro{width:auto;height:64px;flex-shrink:0}
.saludo-fila .saludo{margin:0}
.fin-toro{width:auto;height:120px;margin-bottom:var(--s-2)}
@media(max-width:620px){ .saludo-toro{height:56px} .fin-toro{height:104px} }

/* ════════════════════════════════════════════════════════════════════════
   DENTRO DE UN CURSO
   Cada módulo: su número, sus lecciones y una sola evaluación al final.
   ════════════════════════════════════════════════════════════════════════ */
/* Cada módulo es un <details>: cerrado se ve como una fila con su avance
   (3/5), abierto muestra las lecciones. Con un curso de 30-40 pantallas esto
   es lo que evita que la portada sea un scroll interminable — se abre lo que
   se está haciendo, el resto queda resumido. */
.modulo{margin:0 0 var(--s-4);border:1px solid var(--regla);border-radius:var(--r-lg);
  padding:0 var(--s-4);background:var(--papel)}
.modulo[open]{padding-bottom:var(--s-3)}
.modulo-tit{display:flex;align-items:center;gap:var(--s-3);margin:0;padding:var(--s-4) 0;
  font-family:var(--slab);font-size:var(--t-lg);line-height:var(--lh-snug);cursor:pointer;
  list-style:none}
.modulo-tit::-webkit-details-marker{display:none}
.modulo-n{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--tinta);
  color:#fff;display:grid;place-items:center;font-size:var(--t-sm);font-weight:800}
.modulo-txt{flex:1;min-width:0}
.modulo-avance{flex-shrink:0;font-family:var(--sans);font-size:var(--t-sm);font-weight:700;
  color:var(--grafito)}
.modulo-avance.completo{color:var(--ok);display:flex}
.modulo-avance.completo .ic{width:20px;height:20px}
.modulo-chevron{flex-shrink:0;display:flex;color:var(--grafito);transition:transform .16s}
.modulo-chevron .ic{width:18px;height:18px}
.modulo[open] .modulo-chevron{transform:rotate(180deg)}
.lv-player{padding:0 0 var(--s-3)}
.lv-player video{width:100%;max-height:60vh;background:#000;border-radius:var(--r);display:block}
.lv-aviso{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line, #e5e5e5);border-radius:var(--r)}
.lv-aviso p{margin:0}

/* La evaluación: mismo botón grande que el resto del portal. */
.quiz-box{margin:var(--s-3) 0 0}
.qz-start{display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  background:var(--papel);border:2px solid var(--regla);border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-5);min-height:72px;cursor:pointer;font-family:var(--sans);color:var(--tinta)}
.qz-start:hover{border-color:var(--tinta)}
.qz-area{margin-top:var(--s-4);border:none;border-radius:var(--r-lg);padding:0;background:transparent}
.qz-prog{font-size:var(--t-sm);font-weight:700;color:var(--grafito);margin-bottom:var(--s-2)}
.qz-barra{height:6px;border-radius:var(--r-full);background:var(--regla);overflow:hidden;margin:0 0 var(--s-4)}
.qz-barra i{display:block;height:100%;background:var(--rojo-tinta);transition:width .3s}
.qz-q{font-family:var(--slab);font-size:var(--t-xl);line-height:var(--lh-snug);margin:0 0 var(--s-4)}
.qz-opts{display:flex;flex-direction:column;gap:var(--s-3)}
.qz-opt{width:100%;text-align:left;background:var(--papel);border:2px solid var(--regla);
  border-radius:var(--r-lg);padding:18px var(--s-5);min-height:60px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--tinta)}
.qz-opt:hover:not(:disabled){border-color:var(--tinta)}
.qz-opt:disabled{cursor:default;opacity:1}
.qz-opt.ok{border-color:var(--ok);background:var(--ok-50);font-weight:700}
.qz-opt.bad{border-color:var(--rojo-tinta);color:var(--rojo-tinta);background:var(--err-50)}
.qz-ex{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:2px solid var(--tinta);font-size:var(--t-lg);line-height:var(--lh-base)}
.qz-ex strong{font-family:var(--slab);font-size:var(--t-xl)}
.qz-ex.bien strong{color:var(--ok)}
.qz-ex.mal strong{color:var(--rojo-tinta)}
.qz-ex .btn{width:100%;justify-content:center;margin-top:var(--s-2)}
.qz-fin{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);text-align:center;padding:var(--s-4) 0}
.qz-nota{font-family:var(--slab);font-size:var(--t-2xl);line-height:1}
.qz-fin.ok .qz-nota{color:var(--ok)}
.qz-fin p{margin:0;color:var(--grafito);font-size:var(--t-md)}
.qz-fin .btn{width:100%;justify-content:center}
/* El botón de "siguiente pregunta" / "ver resultado" va en la misma barra fija
   de abajo que el resto del portal: en preguntas largas se perdía al final del
   scroll y había que ir a buscarlo. */
.qz-nav{margin-top:var(--s-4)}
.qz-nav .btn{width:100%;justify-content:center}
/* Repaso de lo fallado: sin esto, "3 de 5" no dice qué se equivocó — solo
   sirve para calificar, no para aprender. */
.qz-repaso{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:2px solid var(--tinta);text-align:left}
.qz-repaso-tit{margin:0;font-family:var(--slab);font-size:var(--t-lg)}
.qz-repaso-item{padding:var(--s-3) 0;border-bottom:1px solid var(--regla)}
.qz-repaso-item:last-child{border-bottom:none}
.qz-repaso-q{margin:0 0 6px;font-weight:700;font-size:var(--t-md)}
.qz-repaso-tuya{margin:0 0 4px;color:var(--rojo-tinta);font-size:var(--t-sm)}
.qz-repaso-ok{margin:0 0 6px;color:var(--ok);font-weight:700;font-size:var(--t-sm)}
.qz-repaso-ex{margin:0;color:var(--grafito);font-size:var(--t-sm);line-height:var(--lh-base)}
/* Mi cuenta: se llega tocando tu nombre en el pie. */
.me-link{display:block;text-decoration:none;color:inherit}
.me-link strong{display:block;color:var(--tinta);font-size:var(--t-sm)}
.me-link span{display:block;color:var(--grafito);font-size:var(--t-xs)}
.me-link:hover strong{text-decoration:underline}
.cuenta-datos{margin:0 0 var(--s-5)}
.cuenta-nombre{margin:0;font-family:var(--slab);font-size:var(--t-xl);line-height:var(--lh-snug)}
.cuenta-datos .muted{margin:4px 0 0;font-size:var(--t-sm)}
.cuenta-salir{margin-top:var(--s-6)}
/* Progreso del curso en la portada: lo que dice de verdad por dónde vas. */
.destino-avance{font-weight:700;color:var(--grafito)}
.destino-avance.completo{color:var(--ok)}
/* El examen final no es un módulo más: va separado y sin número. */
.examen{border-top:2px solid var(--tinta);padding-top:var(--s-4);margin-top:var(--s-6)}
.examen .section-h{margin-top:0}

/* ════════════════════════════════════════════════════════════════════════
   EL ASISTENTE, COMO UN CHAT
   La pantalla anterior repartía las piezas por todo el alto: un orbe enorme
   en medio, el estado suelto debajo, tres enlaces para cambiar de modo y los
   mensajes al final. En un teléfono no cabía y no se entendía qué hacer.
   Ahora la conversación ocupa la pantalla y abajo hay UNA barra: micrófono,
   campo de texto y enviar. Es lo que la gente ya sabe usar.
   ════════════════════════════════════════════════════════════════════════ */
.chat{display:flex;flex-direction:column;min-height:calc(100dvh - 210px);gap:0}

/* ════════════════════════════════════════════════════════════════════════
   CeVi con ElevenLabs — el widget NATIVO, incrustado en la página
   El widget oficial trae en su shadow DOM `:host{position:fixed;inset:0}`:
   flota sobre toda la pantalla. Las reglas de la página le ganan a :host, así
   que aquí se le pone `position:absolute` dentro de .cevi11-marco y el panel
   vive en la sección, no en una esquina. En pantallas < 768px el propio widget
   se pone en modo "pantalla completa" — completa DEL MARCO, que es lo que
   queremos en el celular. Colores y textos: en platform_settings.widget del
   agente (todo rojo de marca, sin negro en el orbe).
   ════════════════════════════════════════════════════════════════════════ */
.cevi11{display:flex;flex-direction:column;gap:var(--s-3);
  min-height:calc(100dvh - var(--alto-menu, 176px))}
.cevi11-hola{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--rojo) 0%,var(--rojo-tinta) 100%);color:#fff}
.cevi11-toro{width:76px;height:76px;flex:none;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.cevi11-hola-txt h1{font-family:var(--slab);font-size:var(--t-xl);line-height:var(--lh-tight);margin:0;color:#fff}
.cevi11-hola-txt p{margin:var(--s-1) 0 0;font-size:var(--t-sm);line-height:var(--lh-snug);color:#fff;opacity:.95}
/* Variante "compact" (la burbuja): cerrada es una píldora abajo; abierta, su
   panel mide caja − 80 px (los 80 son del botón de cerrar, debajo) con tope de
   550 px. Con la caja del widget igual al marco (inset:0) el panel entra
   entero sobre el botón. Con inset:-80px (lo que servía para la variante
   "full") la cabecera del panel quedaba cortada arriba (23-set-2026). */
.cevi11-marco{position:relative;flex:1;min-height:420px;max-height:550px;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;border:1px solid #f3c7c8;box-shadow:0 10px 30px rgba(196,3,9,.10)}
.cevi11-marco elevenlabs-convai{
  position:absolute; inset:0; display:block; z-index:1;
  --el-overlay-padding:0px;
}
.cevi11-cargando{margin:0;position:absolute;inset:0;display:grid;place-items:center;
  color:var(--rojo-tinta);font-weight:700}
.cevi11-error{place-content:center;gap:var(--s-2);text-align:center;padding:var(--s-4)}
.cevi11-error p{margin:0}
.cevi11-error a{font-weight:400;color:var(--rojo-tinta)}
/* Burbuja (variante compact del widget): la píldora con el orbe queda abajo
   y, detrás, esta invitación. Cuando se abre el chat, su panel la tapa. */
.cevi11-invita{position:absolute;inset:0 0 96px;z-index:0;display:grid;place-content:center;
  gap:var(--s-2);padding:var(--s-4) var(--s-5);text-align:center;color:var(--grafito);
  font-size:var(--t-sm);line-height:var(--lh-snug)}
.cevi11-invita p{margin:0;max-width:34ch}
.cevi11-invita .cevi11-invita-t{font-family:var(--slab);font-size:var(--t-lg);color:var(--rojo-tinta)}
.cevi11-marco:has(.cevi11-cargando) .cevi11-invita{display:none}
.cevi11-pie{margin:0 0 var(--s-2);font-size:var(--t-xs);color:var(--grafito);text-align:center}
.cevi11-pie a,.chat-pie a{color:var(--grafito);text-decoration:underline}
@media (max-width:640px){
  .cevi11-toro{width:60px;height:60px}
  .cevi11-hola-txt h1{font-size:var(--t-lg)}
  .cevi11-marco{min-height:min(550px, calc(100dvh - var(--alto-menu, 176px) - 170px))}
}

.chat-hilo{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-2) 0 var(--s-4)}
.chat-hilo:empty{display:none}

/* Burbujas: CeVi a la izquierda con su cara, la persona a la derecha. */
.chat-hilo .cevi-msg{display:flex;gap:10px;align-items:flex-end;max-width:100%}
.chat-hilo .cevi-msg.yo{justify-content:flex-end}
.chat-hilo .cevi-txt{max-width:82%;border-radius:18px;padding:11px 15px;
  font-size:var(--t-md);line-height:1.5;white-space:pre-wrap;
  background:var(--mesa);border:none;color:var(--tinta)}
.chat-hilo .cevi-msg.yo .cevi-txt{background:var(--tinta);color:#fff}
.chat-hilo .cevi-avatar{width:30px;height:30px;flex-shrink:0;align-self:flex-end}

.chat-aviso{margin:0 0 var(--s-2);padding:10px 14px;background:var(--mesa);
  border-radius:var(--r);font-size:var(--t-sm);line-height:1.45;color:var(--tinta)}

/* Todo lo que se toca vive abajo, junto, al alcance del pulgar. */
.chat-abajo{position:sticky;bottom:0;background:var(--papel);padding-top:var(--s-2);
  padding-bottom:calc(var(--s-2) + env(safe-area-inset-bottom))}
.chat-sug{display:flex;gap:8px;overflow-x:auto;padding:0 0 var(--s-2);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chat-sug::-webkit-scrollbar{display:none}
.chat-sug .chip{flex:0 0 auto;font-size:var(--t-sm);white-space:nowrap}
.chat-sug:empty,.chat-sug[hidden]{display:none}

.chat-estado{margin:0 0 6px;min-height:18px;font-size:var(--t-sm);color:var(--grafito);
  text-align:center}

.chat-barra{display:flex;align-items:center;gap:8px;
  background:var(--papel);border:2px solid var(--regla);border-radius:var(--r-full);
  padding:5px 6px 5px 5px}
.chat-barra:focus-within{border-color:var(--tinta)}
.chat-barra input{flex:1;min-width:0;border:none;background:transparent;
  font-family:var(--sans);font-size:var(--t-md);color:var(--tinta);padding:10px 4px}
.chat-barra input:focus{outline:none}

.chat-mic,.chat-enviar{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center}
.chat-mic{background:var(--mesa);color:var(--tinta)}
.chat-mic svg{width:22px;height:22px}
.chat-mic:hover{background:var(--regla)}
.chat-enviar{background:var(--rojo-tinta);color:#fff}
.chat-enviar svg{width:20px;height:20px}
.chat-enviar:hover{background:var(--tinta)}

/* Escuchando: el micrófono se pone rojo y late. Es la única señal que hace
   falta; el estado en palabras va justo encima. */
[data-cevi-estado="escuchando"] .chat-mic{background:var(--rojo-tinta);color:#fff;
  animation:chatLate 1.3s ease-in-out infinite}
[data-cevi-estado="hablando"] .chat-mic{background:var(--rojo-tinta);color:#fff}
[data-cevi-estado="pensando"] .chat-mic{background:var(--grafito);color:#fff}
@keyframes chatLate{0%,100%{box-shadow:0 0 0 0 rgba(196,3,9,.45)}
  50%{box-shadow:0 0 0 9px rgba(196,3,9,0)}}

.chat-pie{margin:var(--s-2) 0 0;font-size:var(--t-xs);color:var(--grafito);text-align:center}

/* Los tres puntos de "pensando", dentro de la burbuja. */
.chat-hilo .cevi-msg.pensando .cevi-txt{background:var(--mesa)}

@media (prefers-reduced-motion:reduce){ .chat-mic{animation:none} }
/* En el asistente, la conversación se queda con toda la pantalla. */
body.ruta-cevi .foot,body.ruta-cevi .pie-legal,body.ruta-cevi .pag-title{display:none}
body.ruta-cevi .view{padding-top:var(--s-3);padding-bottom:0}
body.ruta-cevi .chat{min-height:calc(100dvh - var(--alto-menu, 176px))}

/* ════════════════════════════════════════════════════════════════════════
   EL PIE
   Eran dos pies apilados: uno con tu nombre y "Salir", otro con lo legal.
   Ahora es uno solo, con los enlaces obligatorios arriba y bien separados.
   ════════════════════════════════════════════════════════════════════════ */
.pie-sesion{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;padding-bottom:var(--s-4);margin-bottom:var(--s-4);border-bottom:1px solid var(--regla)}
.pie-sesion .me{margin:0}
.pie-sesion .ctx-out{width:auto;min-width:150px}

.pie-enlaces{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-4)}
.pie-enlaces a{color:var(--grafito);text-decoration:underline;font-size:var(--t-sm);
  display:inline-flex;align-items:center;min-height:var(--tap)}
.pie-enlaces a:hover{color:var(--tinta)}

/* El Libro de Reclamaciones es obligatorio y tiene que verse: va como bloque
   con marco, no como un enlace más de la fila. */
.pie-enlaces .pie-lr{flex-basis:100%;gap:12px;padding:12px 16px;border:2px solid var(--tinta);
  border-radius:var(--r);color:var(--tinta);text-decoration:none;background:var(--papel)}
.pie-enlaces .pie-lr:hover{background:var(--mesa)}
.pie-lr strong{display:block;font-size:var(--t-md);line-height:1.25}
.pie-lr small{display:block;font-size:var(--t-xs);color:var(--grafito);margin-top:2px}
.pie-lr-ic{flex-shrink:0;display:flex;color:var(--rojo-tinta)}
.pie-lr-ic svg{width:24px;height:24px}

.pie-empresa{margin:0;font-size:var(--t-xs);line-height:1.6;color:var(--grafito)}
.pie-empresa strong{color:var(--tinta)}
@media(min-width:700px){ .pie-enlaces .pie-lr{flex-basis:auto;min-width:290px} }
/* El nombre lleva a Mi cuenta, pero en el teléfono no hay «hover» que lo
   delate: se le pone la misma flecha que a los demás destinos. */
.me-link{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;
  border-top:1px solid var(--regla);border-bottom:1px solid var(--regla)}
.me-link .me-txt{flex:1;min-width:0}
.me-link::after{content:'›';color:var(--rojo-tinta);font-size:var(--t-lg);line-height:1}

/* Pie, versión mínima: nombre y salir en una línea, los cuatro enlaces
   legales en otra, y el proveedor en una tercera. Sin marcos ni iconos. */
.pie-legal{padding:var(--s-4) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom))}
.pie-sesion{padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--regla)}
.pie-salir{background:none;border:none;padding:8px 0;min-height:var(--tap);font-family:var(--sans);
  font-size:var(--t-sm);color:var(--grafito);text-decoration:underline;cursor:pointer}
.pie-salir:hover{color:var(--tinta)}
.pie-enlaces{gap:var(--s-2) var(--s-4);margin-bottom:var(--s-2)}
.pie-enlaces .pie-lr{flex-basis:auto;min-width:0;padding:0;border:none;background:none;
  color:var(--tinta);font-weight:700;text-decoration:underline;font-size:var(--t-sm)}
.pie-enlaces .pie-lr:hover{background:none;color:var(--rojo-tinta)}
.pie-empresa{font-size:var(--t-xs);color:var(--grafito)}

/* ---------- El certificado deja de ser la imagen principal ----------
   Era un bloque negro de 400px con el sello a 150px que se comía la pantalla.
   Ahora el sello va pequeño al lado del título, como una insignia, y el bloque
   queda en una franja. La pantalla es sobre TU máquina, no sobre el sello. */
.cert-hero{padding:16px 18px;gap:14px;flex-wrap:nowrap;margin-bottom:16px}
.cert-seal{width:64px}
.cert-hero-t{font-size:var(--t-lg);margin:0}
.cert-lema{font-size:var(--t-sm);margin:2px 0 0}
@media(max-width:620px){.cert-seal{width:56px}.cert-hero{padding:14px 16px}}

/* ---------- Dibujos e iconos de la Academia ----------
   Un dibujo técnico por curso, como en la guía de preparación, y un icono por
   módulo: se reconoce de qué va antes de leer. */
.destino-curso{align-items:center}
.destino-dibujo{flex-shrink:0;width:96px;height:96px;display:grid;place-items:center}
.destino-dibujo img{max-width:96px;max-height:96px;width:auto;height:auto;mix-blend-mode:multiply}
.curso-dibujo{margin:0 0 var(--s-5);display:grid;place-items:center;padding:var(--s-2) 0 var(--s-3);
  border-bottom:1px solid var(--regla)}
.curso-dibujo img{max-width:280px;max-height:200px;width:auto;height:auto;mix-blend-mode:multiply}
.modulo-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--mesa);
  display:grid;place-items:center;color:var(--rojo-tinta)}
.modulo-ico svg{width:22px;height:22px}
.modulo-n{width:auto;height:auto;background:none;color:var(--grafito);font-size:var(--t-sm);
  border-radius:0;display:inline;margin-right:6px}
.modulo-n::after{content:"."}
@media(max-width:620px){
  .destino-dibujo{width:80px;height:80px}
  .destino-dibujo img{max-width:80px;max-height:80px}
  .curso-dibujo img{max-width:220px;max-height:160px}
}
/* El nombre sin rayas propias: la línea del pie ya separa. Y los enlaces en
   una fila apretada, para que "Mis datos" no se caiga solo a una segunda línea
   con medio pie de aire encima. */
.pie-sesion .me-link{border:none;padding:6px 0}
.pie-enlaces{row-gap:4px;column-gap:var(--s-3)}
.pie-enlaces a{min-height:36px}
.pie-empresa{margin-top:var(--s-2)}
/* Con más peso para ganar a la regla del pie que venía después. */
.pie-legal .pie-enlaces{row-gap:2px;column-gap:var(--s-3)}
.pie-legal .pie-enlaces a{min-height:34px;padding:0}

/* ════════════════════════════════════════════════════════════════════════
   MODO VOZ
   Solo el toro en pantalla, como los asistentes de voz que la gente ya
   conoce. Abajo, dos botones: hablar y salir. El texto bajo el toro dice de
   quién es el turno o lo que se va oyendo.
   ════════════════════════════════════════════════════════════════════════ */
.voz{position:fixed;inset:0;z-index:60;background:var(--papel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-5);
  padding:var(--s-6) var(--s-4) calc(120px + env(safe-area-inset-bottom))}
.voz[hidden]{display:none}
.voz-orbe{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;
  -webkit-tap-highlight-color:transparent;transition:transform .15s}
.voz-orbe:active{transform:scale(.97)}
.voz-orbe:focus-visible{outline:3px solid var(--tinta);outline-offset:10px}
.voz-orbe .orbe{width:min(64vw,280px);height:min(64vw,280px)}
.voz-txt{margin:0;min-height:2.8em;max-width:30ch;text-align:center;
  font-size:var(--t-lg);line-height:1.35;color:var(--grafito)}
[data-cevi-estado="escuchando"] .voz-txt{color:var(--tinta);font-weight:700}
.voz-botones{position:absolute;left:0;right:0;bottom:calc(var(--s-6) + env(safe-area-inset-bottom));
  display:flex;justify-content:center;gap:var(--s-6)}
.voz-btn{width:68px;height:68px;border-radius:50%;border:none;cursor:pointer;
  background:var(--mesa);color:var(--tinta);display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent}
.voz-btn svg{width:28px;height:28px}
.voz-btn:hover{background:var(--regla)}
.voz-btn:focus-visible{outline:3px solid var(--tinta);outline-offset:4px}
.voz-cerrar{background:var(--tinta);color:var(--papel)}
.voz-cerrar:hover{background:#000}
[data-cevi-estado="escuchando"] .voz-mic{background:var(--rojo-tinta);color:#fff}
[data-cevi-estado="hablando"] .voz-mic{background:var(--tinta);color:var(--papel)}
/* Mientras está abierta, la página de atrás no se desplaza. */
body.cevi-en-voz{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .voz-orbe{transition:none} }

/* ---------- Una lección por pantalla ----------
   La lámina se lleva la pantalla; el título ya va dentro de ella. */
.lec-modulo{margin:0;font-size:var(--t-sm);color:var(--grafito)}
.lec-lamina{margin:0;display:grid;place-items:center}
.lec-lamina img{max-width:100%;max-height:70vh;width:auto;height:auto;border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(20,20,20,.06),0 8px 24px rgba(20,20,20,.08)}
.lec-pie{margin:0;font-size:var(--t-lg);line-height:var(--lh-base);color:var(--tinta);max-width:var(--medida)}
.lec-video-caja .lv-player{padding:0}
.lec-video-caja video{width:100%;max-height:62vh;background:#000;border-radius:var(--r-lg);display:block}
.paso-quiz .qz-area{border:none;padding:0;margin-top:0}

/* Portada del curso: avance, botón único y la lista con ✓ por lección. */
.curso-avance{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-6)}
.curso-avance .paso-listo{margin-top:var(--s-2);width:100%;justify-content:center;font-size:var(--t-lg);padding:16px 20px}
@media(min-width:700px){.curso-avance .paso-listo{width:auto;min-width:240px;align-self:flex-start}}
.lec-lista{border-top:1px solid var(--regla)}
.lec-fila{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--regla);
  text-decoration:none;color:var(--tinta);font-size:var(--t-lg);line-height:var(--lh-snug);min-height:60px}
.lec-fila:hover .lec-txt{color:var(--rojo-tinta)}
.lec-check{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--regla);
  display:grid;place-items:center;color:var(--grafito)}
.lec-check svg{width:22px;height:22px}
.lec-fila.vista .lec-check{border-color:var(--ok);color:var(--ok);background:var(--ok-50)}
.lec-fila.vista .lec-txt{color:var(--grafito)}
.lec-txt{flex:1;min-width:0}
.lec-eval .lec-check{border-color:var(--tinta);color:var(--tinta)}
.lec-eval.vista .lec-check{border-color:var(--ok);color:var(--ok)}
.examen .lec-fila{border-top:none}
.lec-instruccion{font-size:var(--t-xl)}
.lec-foto{margin:0}
.lec-foto img{width:100%;height:auto;border-radius:var(--r-lg);display:block}

/* Evaluación ya aprobada: un resumen quieto, no la pregunta relanzada sola. */
.quiz-hecho{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);
  border:2px solid var(--ok);background:var(--ok-50);border-radius:var(--r-lg);
  padding:var(--s-5)}
.quiz-hecho-nota{margin:0;font-size:var(--t-lg);font-weight:700;color:var(--ok)}
.quiz-hecho .btn{width:100%;justify-content:center}

/* ════════════════════════════════════════════════════════════════════════
   MANTENIMIENTO DE LA MÁQUINA (23-set-2026)
   Pestaña propia con el calendario de cada máquina, un paso por pantalla
   para cada tarea (reusa .paso / .paso-nav / .lec-foto de la Academia) y el
   aviso «No te olvides» arriba del contenido. Tono tranquilo: sin cuentas
   regresivas ni «atrasado N días»; solo la fecha que toca.
   ════════════════════════════════════════════════════════════════════════ */

/* Menú con cuatro pestañas: menos aire entre ellas para que «Mantenimiento»
   quepa entero en los Android de 360 px (antes se cortaba en «Mantenimien…»). */
@media(max-width:620px){
  .menu{gap:2px}
  .menu a{padding:6px 1px}
}
@media(max-width:380px){
  .menu a{font-size:11px;letter-spacing:-.1px}
}
/* La franja «No te olvides»: arriba de la hoja, con su mismo ancho. */
.aviso-mant{display:flex;align-items:center;gap:var(--s-3);max-width:860px;margin:var(--s-4) auto 0;
  padding:var(--s-3) var(--s-4);background:var(--rojo-suave);border-left:4px solid var(--rojo-tinta);
  border-radius:var(--r-lg);color:var(--tinta)}
.aviso-mant[hidden]{display:none}
.aviso-mant-ic{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;color:var(--rojo-tinta)}
.aviso-mant-ic .ic{width:22px;height:22px}
.aviso-mant-txt{flex:1;margin:0;font-size:var(--t-sm);line-height:var(--lh-snug)}
.aviso-mant-txt strong{display:block;font-size:var(--t-md)}
.aviso-mant .btn{flex-shrink:0;white-space:nowrap}
@media(max-width:620px){
  .aviso-mant{margin:0;border-radius:0;flex-wrap:wrap;padding:var(--s-3) var(--s-4)}
  .aviso-mant-txt{min-width:calc(100% - 56px)}
  .aviso-mant .btn{width:100%;justify-content:center}
}

/* Portada */
.mant-resumen{margin:0 0 var(--s-2);font-family:var(--slab);font-weight:700;font-size:var(--t-lg);
  line-height:var(--lh-snug);padding:var(--s-4);border-radius:var(--r-lg);background:var(--alt)}
.mant-resumen.toca{background:var(--rojo-suave)}
.mant-resumen.ok{background:var(--ok-50);color:var(--ok)}
.mant-desde{margin:0 0 var(--s-3);font-size:var(--t-sm);color:var(--grafito);line-height:var(--lh-snug)}
.mant-desde .paso-link{margin-left:4px}
.mant-fecha{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-4);padding:var(--s-4);
  border:2px solid var(--regla);border-radius:var(--r-lg)}
.mant-fecha[hidden]{display:none}
.mant-fecha label{font-weight:700;font-size:var(--t-md)}
.mant-fecha-fila{display:flex;gap:var(--s-2);flex-wrap:wrap}
.mant-fecha input[type="date"]{flex:1;min-width:160px;min-height:var(--tap);padding:8px 12px;font:inherit;
  font-size:var(--t-md);border:2px solid var(--regla);border-radius:var(--r);background:#fff;color:var(--tinta)}
.mant-fecha input[type="date"]:focus{border-color:var(--tinta);outline:none}

.mant-lista{border-top:2px solid var(--tinta);margin:0 0 var(--s-5)}
.mant-fila{display:grid;grid-template-columns:48px 1fr auto;gap:var(--s-2) var(--s-4);align-items:center;
  padding:var(--s-4) 0;border-bottom:1px solid var(--regla)}
.mant-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--mesa);color:var(--tinta)}
.mant-ic .ic{width:24px;height:24px}
.mant-fila.toca .mant-ic{background:var(--rojo-suave);color:var(--rojo-tinta)}
.mant-fila.al_dia .mant-ic{background:var(--ok-50);color:var(--ok)}
.mant-txt h3{margin:0;font-family:var(--slab);font-size:var(--t-lg);line-height:var(--lh-tight)}
.mant-cada{margin:4px 0 0;font-size:var(--t-sm);font-weight:700;color:var(--grafito)}
.mant-cuando{margin:2px 0 0;font-size:var(--t-sm);line-height:var(--lh-snug)}
.mant-fila.toca .mant-cuando{color:var(--rojo-tinta);font-weight:700}
.mant-fila.al_dia .mant-cuando{color:var(--ok)}
.mant-acc{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2);min-width:150px}
.mant-acc .btn{justify-content:center}
.mant-hecho{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);
  font-weight:700;color:var(--ok)}
.mant-hecho .ic{width:20px;height:20px}
.mant-acc .paso-link{align-self:center}
@media(max-width:620px){
  .mant-fila{grid-template-columns:44px 1fr;align-items:start}
  .mant-ic{width:44px;height:44px}
  .mant-acc{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .mant-acc .btn{flex:1 1 140px}
  .mant-acc .paso-link{flex:1 1 100%;text-align:center}
}

/* Secciones de abajo */
.mant-uso-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mesa)}
.mant-uso-ic .ic{width:28px;height:28px}
.mant-uso .lista-fila{align-items:center}
.mant-uso .lista-dibujo{width:64px;height:64px}
.mant-uso .lista-fila{grid-template-columns:64px 1fr}
.mant-uso .lista-txt .spec{margin:0;font-size:var(--t-md)}
.mant-errores .lista-fila,.mant-kit .lista-fila{grid-template-columns:104px 1fr;align-items:center}
.mant-errores .lista-txt .spec{margin:0}
@media(max-width:620px){
  .mant-uso .lista-fila{grid-template-columns:56px 1fr}
  .mant-uso .lista-dibujo{width:56px;height:56px}
  .mant-errores .lista-fila,.mant-kit .lista-fila{grid-template-columns:92px 1fr}
}
.mant-casos{border-top:2px solid var(--tinta);margin:0 0 var(--s-5)}
.mant-caso{padding:var(--s-4) 0;border-bottom:1px solid var(--regla);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s-2)}
.mant-caso-cuando{margin:0;font-size:var(--t-sm);font-weight:700;color:var(--grafito)}
.mant-caso h3{margin:0;font-family:var(--slab);font-size:var(--t-lg);line-height:var(--lh-tight)}
.mant-caso p{margin:0;line-height:var(--lh-base);max-width:var(--medida)}
.mant-caso-foto{margin:0}
.mant-caso-foto img{display:block;max-width:220px;width:100%;height:auto;border-radius:var(--r-lg)}
.mant-tecnico{padding:var(--s-4);border:2px solid var(--regla);border-radius:var(--r-lg);margin:0 0 var(--s-5)}
.mant-tecnico p{margin:0 0 var(--s-3);line-height:var(--lh-base)}
.mant-tecnico-acc{display:flex;gap:var(--s-2);flex-wrap:wrap}
.mant-tecnico-acc .btn{flex:1 1 180px;justify-content:center}

/* Paso a paso */
.mant-porque{margin:0;font-size:var(--t-lg);line-height:var(--lh-base)}
.mant-nota{margin:0;padding:var(--s-3) var(--s-4);background:var(--alt);border-radius:var(--r);
  font-size:var(--t-md);line-height:var(--lh-snug)}
.mant-sub{margin:var(--s-2) 0 0;font-family:var(--slab);font-size:var(--t-md)}
.mant-paso .lec-foto img{max-height:62vh;width:auto;max-width:100%;margin:0 auto}
.mant-fin .mant-anotar{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-3);width:100%;max-width:420px}
.mant-fin .mant-anotar .btn{justify-content:center;font-size:var(--t-lg);padding:16px 20px}
.mant-fin .mant-anotar .paso-link{align-self:center}
.mant-anotado{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--t-md);line-height:var(--lh-snug);color:var(--ok)}
.mant-anotado .ic{flex-shrink:0;width:22px;height:22px}

/* ---------- Acceso con el celular (23-set-2026) ----------
   Tres pantallas: el celular, el código del SMS y «Pide acceso». Van al final
   a propósito: las reglas del acceso están repetidas más arriba y gana la
   última (ver la nota de bloques duplicados). Sobre negro, el rojo queda solo
   para el botón principal; lo secundario va con borde claro. */
.gate-box{padding-top:24px}
.gate h1:focus{outline:none}
.gate-sub{margin-bottom:24px}
.gate-sub strong{color:var(--on-black);white-space:nowrap}
.gate-form label.gate-paso{display:block}
.gate-consent{margin:18px 0 20px;font-size:var(--t-sm);color:var(--on-black-dim)}
.gate-consent input{width:22px;height:22px}
.gate-error{text-align:left}
.gate-error a{color:#fff;text-decoration:underline}
/* «Este número no está en la lista»: no es un error de la persona. */
.gate-error.aviso{background:var(--black-2);border-color:#767676;color:var(--on-black-dim)}
.gate-error.aviso strong{display:block;margin-bottom:4px;color:var(--on-black);font-size:var(--t-md)}
.btn.gate-sec{width:100%;margin-top:12px;min-height:52px;background:transparent;color:var(--on-black);
  border:2px solid #9a9a9a;font-size:var(--t-md)}
.btn.gate-sec:hover{border-color:#fff}
.btn.gate-sec:disabled{opacity:.6}

/* Video «cómo pedir acceso» (junto a «Pedir acceso») */
.gate-video{margin-top:6px;text-align:center}
.gate-video-abrir{display:inline-flex;align-items:center;gap:8px}
.gate-video-abrir svg{width:20px;height:20px;flex:none}
#gateVideoWrap{margin-top:10px}
#gateVideo{display:block;width:min(100%,300px);aspect-ratio:9/16;max-height:70vh;margin:0 auto;border-radius:var(--r);background:#000;border:1px solid #3a3a3a}

/* El código: grande, centrado, con los seis números bien separados. */
#gateCod{display:block;width:100%;margin:0 0 16px;padding:14px 12px 14px calc(12px + .4em);
  background:var(--black-2);color:#fff;border:2px solid #767676;border-radius:var(--r);
  font-family:var(--sans);font-size:32px;font-weight:700;letter-spacing:.4em;text-align:center;
  font-variant-numeric:tabular-nums;min-height:64px}
#gateCod::placeholder{color:#5f5f5f;font-weight:700;letter-spacing:.4em}
#gateCod:focus{outline:3px solid var(--red);outline-offset:2px;border-color:var(--red)}
#gateCod[aria-invalid="true"]{border-color:#FF8A8F}
.gate-estado{margin:12px 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--on-black-dim);text-align:left}
.gate-estado:empty{margin:0}
.gate-acciones{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:16px}
.gate-link{background:none;border:none;padding:10px 2px;min-height:var(--tap);font-family:var(--sans);
  font-size:var(--t-md);font-weight:500;color:var(--on-black);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.gate-link:hover{color:#fff;text-decoration-thickness:2px}
.gate-link:disabled{color:#9a9a9a;text-decoration:none;cursor:default;font-variant-numeric:tabular-nums}
.gate-demo{margin-top:16px;padding:12px 14px;border:1px dashed #767676;border-top:1px dashed #767676;
  border-radius:var(--r);font-size:var(--t-sm);line-height:1.5;color:var(--on-black-dim);text-align:left}
.gate-demo strong{color:#fff;letter-spacing:.08em}

/* Pide acceso */
.gate-tel-fijo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;
  padding:6px 8px 6px 14px;background:var(--black-2);border:1px solid #5a5a5a;border-radius:var(--r);text-align:left}
.gate-tel-fijo p{margin:0;line-height:1.3}
.gate-tel-fijo span{display:block;font-size:var(--t-xs);color:var(--on-black-dim)}
.gate-tel-fijo strong{font-size:var(--t-lg);color:var(--on-black);font-variant-numeric:tabular-nums;white-space:nowrap}
.gate-campo{margin-bottom:18px}
.gate-campo label{display:block;margin-bottom:6px;font-size:var(--t-md);font-weight:500;color:var(--on-black)}
.gate-ayuda{margin:0 0 8px;font-size:var(--t-sm);line-height:1.45;color:var(--on-black-dim)}
.gate-input{display:block;width:100%;min-height:52px;padding:12px 14px;background:var(--black-2);color:#fff;
  border:2px solid #767676;border-radius:var(--r);font-family:var(--sans);font-size:18px;line-height:1.4}
textarea.gate-input{min-height:96px;resize:vertical}
.gate-input::placeholder{color:#8f8f8f}
.gate-input:focus{outline:3px solid var(--red);outline-offset:2px;border-color:var(--red)}
.gate-input[aria-invalid="true"]{border-color:#FF8A8F}
.gate-campo-error{margin:6px 0 0;font-size:var(--t-sm);line-height:1.45;font-weight:500;color:#FF8A8F}
.gate-nota{margin:4px 0 16px;font-size:var(--t-sm);line-height:1.5;color:var(--on-black-dim)}
.gate-nota a{color:#fff;text-decoration:underline}
.gate-ok-ic{color:#5fd08a}
/* Trampa para robots: existe para ellos, no para la gente. */
.gate-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* El ::selection general (rosado pálido) dejaba el código blanco sobre rosado. */
.gate ::selection{background:#7a1418;color:#fff}

/* Los cinco países en una fila desde 356px. «Colombia» en 12px pide 60px de
   botón; con 6px de espacio a 375px quedaban 63.8px y se partía en 4 + 1. */
.gate-paises{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@media(max-width:560px){
  .gate{padding:16px}
  .gate-box{padding-top:12px}
  .gate-logo{margin-bottom:24px}
  .gate h1{font-size:var(--t-xl)}
  .gate-sub{font-size:var(--t-md)}
  .gate-paises{gap:4px}
  .gate-paises button{padding:10px 2px}
}
@media(max-width:355px){.gate-paises{grid-template-columns:repeat(3,1fr);gap:6px}}

/* ---------- Calculadora de servicio de corte láser (#/calculadora) ----------
   Con los colores de siempre del portal: hoja blanca, tinta negra, reglas
   grises y el total en el negro de la marca con la línea roja de C4V. Solo
   campos para escribir. */
.calc-seccion{margin:0 0 var(--s-5)}
.calc-seccion>.section-h{margin-top:var(--s-4);padding-bottom:var(--s-2);border-bottom:2px solid var(--tinta)}
.calc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:var(--s-3)}
@media(max-width:340px){.calc-campos{grid-template-columns:minmax(0,1fr)}}
.calc-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-campo>span:first-child{font-size:var(--t-sm);font-weight:700;color:var(--tinta)}
.calc-caja{display:flex;align-items:center;gap:6px;min-height:50px;padding:0 12px;border:1px solid #767676;border-radius:var(--r);background:var(--papel);cursor:text}
.calc-caja:focus-within{border-color:var(--tinta);outline:2px solid var(--tinta);outline-offset:1px}
.calc-caja.mal{border:2px solid var(--err);background:var(--err-50)}
.calc .calc-caja input{flex:1 1 auto;min-width:0;width:100%;min-height:46px;padding:0;border:none;background:transparent;
  font-family:var(--sans);font-size:19px;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.calc .calc-caja input:focus{outline:none}
.calc .calc-caja input:disabled{color:var(--grafito)}
.calc-mon{flex-shrink:0;font-size:var(--t-md);font-weight:600;color:var(--grafito)}

.calc-linea{padding:var(--s-1) 0 var(--s-4)}
.calc-linea+.calc-linea{padding-top:var(--s-4);border-top:1px solid var(--regla)}
.calc-linea-top{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3)}
.calc .calc-linea select{flex:1;min-width:0;min-height:50px;padding:0 12px;border:1px solid #767676;border-radius:var(--r);background:var(--papel);
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--tinta)}
.calc .calc-linea select:focus-visible{border-color:var(--tinta);outline:2px solid var(--tinta);outline-offset:1px}
.calc-quitar{flex-shrink:0;min-width:var(--tap);min-height:var(--tap);border:none;background:none;border-radius:var(--r);
  color:var(--grafito);font-size:26px;line-height:1;cursor:pointer}
.calc-quitar:hover{background:var(--alt);color:var(--tinta)}
.calc-quitar:focus-visible{outline:2px solid var(--tinta);outline-offset:1px}
.calc-falta{margin:var(--s-2) 0 0;font-size:var(--t-sm);font-weight:600;color:var(--rojo-tinta)}
.calc-agregar{width:100%;min-height:50px}
.calc-agregar svg{width:18px;height:18px}

/* Total: barra negra de la marca, pegada abajo mientras se escribe */
.calc-total{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s-3);
  margin:0 calc(-1 * var(--s-2)) var(--s-6);padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--tinta);color:var(--papel);border-top:4px solid var(--rojo);border-radius:var(--r-lg);box-shadow:0 -6px 18px rgba(20,20,20,.25)}
.calc-total-rot{margin:0;font-weight:700;font-size:var(--t-md);white-space:nowrap}
.calc .calc-total-num{font-family:var(--slab);font-size:clamp(1.5rem,8vw,var(--t-2xl));font-weight:800;line-height:var(--lh-tight);font-variant-numeric:tabular-nums;text-align:right;
  margin-left:auto;min-width:0;max-width:100%;overflow-wrap:anywhere}
.calc-total-det{flex-basis:100%;margin:2px 0 0;font-size:var(--t-sm);color:var(--on-black-dim);line-height:var(--lh-snug)}

/* «Necesito ayuda» flotante: logo de WhatsApp abajo a la derecha. El globo sale
   de detrás del logo al entrar y a los pocos segundos vuelve a esconderse ahí. */
.wa-flota{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;text-decoration:none;-webkit-tap-highlight-color:transparent;
  pointer-events:none}
.wa-flota[hidden]{display:none}
.wa-flota-btn{pointer-events:auto;position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 6px 20px rgba(20,20,20,.28);transition:background .16s,transform .1s}
.wa-flota-btn .wa-ic{width:32px;height:32px}
.wa-flota:hover .wa-flota-btn{background:var(--wa-hover)}
.wa-flota:active .wa-flota-btn{transform:scale(.95)}
.wa-flota:focus-visible{outline:none}
.wa-flota:focus-visible .wa-flota-btn{outline:3px solid var(--tinta);outline-offset:3px}
.wa-flota-globo{margin-right:-26px;padding:11px 38px 11px 18px;background:#fff;color:var(--tinta);border:1px solid var(--regla);border-radius:999px;
  font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;box-shadow:0 6px 20px rgba(20,20,20,.18);
  transform-origin:right center;transform:translateX(34px) scaleX(.3);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none}
.wa-flota.abierto .wa-flota-globo,.wa-flota:hover .wa-flota-globo,.wa-flota:focus-visible .wa-flota-globo{transform:none;opacity:1}
/* El globo invisible ocupaba el <a> y tapaba «Cerrar sesión»: solo tocan el círculo y el globo visible. */
.wa-flota.abierto .wa-flota-globo,.wa-flota:hover .wa-flota-globo{pointer-events:auto}
@media (prefers-reduced-motion:reduce){.wa-flota-globo{transform:none;transition:opacity .2s}}
/* Donde hay una barra pegada abajo (paso de lección, total de la calculadora,
   chat) el botón la taparía: ahí no sale. */
body:has(.paso-nav) .wa-flota,body:has(.calc-total) .wa-flota,body:has(.chat-abajo) .wa-flota{display:none}
/* Espacio al final de la página para que el botón no tape «Cerrar sesión» ni el pie. */
body:has(> .wa-flota:not([hidden])):not(:has(.paso-nav, .calc-total, .chat-abajo)) #app{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
/* «Cerrar sesión» queda a la altura del botón (también en escritorio): se corre a la izquierda. */
body:has(> .wa-flota:not([hidden])) .pie-sesion{padding-right:72px}

/* Quiz: con la barra de «Siguiente pregunta» pegada abajo, la del «Atrás» de la lección la tapaba. */
.paso-quiz:has(.qz-nav)>.paso-pie{display:none}

/* Páginas legales: a 320px «comunicaciones» no se cortaba y la tabla se salía. */
.doc th,.doc td{overflow-wrap:anywhere;hyphens:auto}

/* Banco de Diseños: buscador simple, categorías como .destino, y una grilla de
   fichas (preview + botón Descargar) al entrar a una categoría o al buscar. */
.dis-buscar{margin-bottom:var(--s-4)}
.dis-buscar input{width:100%;box-sizing:border-box;padding:14px 16px;border:2px solid var(--regla);
  border-radius:var(--r-lg);font-family:var(--sans);font-size:16px;color:var(--tinta);background:var(--papel)}
.dis-buscar input:focus{outline:none;border-color:var(--tinta)}
.dis-grupos{display:flex;flex-direction:column;gap:var(--s-3)}
.dis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
@media(min-width:640px){.dis-grid{grid-template-columns:repeat(3,1fr)}}
.dis-card{display:flex;flex-direction:column;gap:8px}
.dis-prev{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border:2px solid var(--regla);
  border-radius:var(--r-lg);mix-blend-mode:multiply}
.dis-titulo{margin:0;font-size:var(--t-sm);line-height:var(--lh-snug);flex:1}
.dis-descargar{width:100%}
.dis-cuenta{margin:0 0 var(--s-3)}
.dis-mas{width:100%;margin-top:var(--s-5)}
.dis-grupos .destino-dibujo img{border-radius:6px}