/* ════════════════════════════════════════════════════════════════════════════
   LA HOJA DE LA PORTADA DE SysWIP — la comparten `index.html` (la portada) y `privacidad.html` (el aviso de privacidad)

   ▸ DE DÓNDE SALE. Vivía dentro de `index.html` (`<style>`), y la portada era UN archivo. El 6-oct-2026 el dueño pidió que
     el aviso de privacidad saliera de la página principal a la suya, con el MISMO aspecto (letra, colores, claro/oscuro,
     cabeza y pie): con dos páginas, una hoja copiada en cada una se habría separado de la otra el primer día que alguien
     cambiara un color. Sigue sin pedir nada a otro sitio: se sirve de la misma carpeta (`herramientas/mirador.js`).
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  /* — de front/comun/cristal.css (claro) — */
  --tinta:#101827; --tenue:#5b6779;
  --acento:#3a6bc4; --acento-claro:#5b8def; --acento-suave:rgba(91,141,239,.12);
  --sobre-acento:#ffffff; --foco:#2f5db0; --acento-tinta:#2c5197;
  --ok:#0a7a43; --aviso:#9a5c00; --alto:#c22b2b;
  --ok-suave:rgba(10,122,67,.10); --aviso-suave:rgba(154,92,0,.10); --alto-suave:rgba(194,43,43,.09);
  --vidrio:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.68));
  --vidrio-filo:rgba(255,255,255,.80);
  --vidrio-luz:0 1px 0 rgba(255,255,255,.9) inset;
  --vidrio-sombra:0 14px 34px -16px rgba(16,24,39,.30);
  --linea:rgba(16,24,39,.08); --linea-fuerte:rgba(16,24,39,.14);
  --papel:#f4f7fc; --panel:rgba(255,255,255,.55); --panel-opaco:#fafbfe;
  --radio:14px; --radio-chico:9px;
  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* — de marketing, sacados de la misma app — */
  --marino-1:#0f1a2d; --marino-2:#132138; --marino-tinta:#dfe7f5; --marino-tenue:#a9b6cc;
  --verde-agua:#177a6c;
  --luz-1:rgba(219,231,255,.85); --luz-2:rgba(230,245,241,.8); --luz-3:rgba(238,241,251,.9);
  --sombra-grande:0 40px 80px -40px rgba(16,24,39,.45);
  /* escala del mockup (estilo.css) */
  --e2:4px; --e4:8px; --e6:12px; --e8:16px; --e9:20px; --e10:24px; --e11:32px; --e12:40px;
  --ancho:1200px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --tinta:#e8eaee; --tenue:#a3adbd;
    --acento:#7aa9f0; --acento-claro:#9cc0f7; --acento-suave:rgba(122,169,240,.16);
    --sobre-acento:#0e131c; --foco:#9cc0f7; --acento-tinta:#8fb6f5;
    --ok:#3fc07f; --aviso:#e0a54a; --alto:#f08a80;
    --ok-suave:rgba(63,192,127,.14); --aviso-suave:rgba(224,165,74,.14); --alto-suave:rgba(240,138,128,.12);
    --vidrio:linear-gradient(180deg,rgba(30,38,52,.86),rgba(24,31,44,.72));
    --vidrio-filo:rgba(255,255,255,.08); --vidrio-luz:0 1px 0 rgba(255,255,255,.06) inset;
    --vidrio-sombra:0 14px 34px -16px rgba(0,0,0,.65);
    --linea:rgba(255,255,255,.10); --linea-fuerte:rgba(255,255,255,.16);
    --papel:#0e131c; --panel:rgba(22,29,42,.6); --panel-opaco:#131924;
    --verde-agua:#4fd1b5;
    --luz-1:rgba(38,58,102,.55); --luz-2:rgba(24,64,58,.45); --luz-3:rgba(30,40,66,.6);
    --sombra-grande:0 40px 80px -40px rgba(0,0,0,.8);
  }
}
:root[data-tema="oscuro"]{
  --tinta:#e8eaee; --tenue:#a3adbd;
  --acento:#7aa9f0; --acento-claro:#9cc0f7; --acento-suave:rgba(122,169,240,.16);
  --sobre-acento:#0e131c; --foco:#9cc0f7; --acento-tinta:#8fb6f5;
  --ok:#3fc07f; --aviso:#e0a54a; --alto:#f08a80;
  --ok-suave:rgba(63,192,127,.14); --aviso-suave:rgba(224,165,74,.14); --alto-suave:rgba(240,138,128,.12);
  --vidrio:linear-gradient(180deg,rgba(30,38,52,.86),rgba(24,31,44,.72));
  --vidrio-filo:rgba(255,255,255,.08); --vidrio-luz:0 1px 0 rgba(255,255,255,.06) inset;
  --vidrio-sombra:0 14px 34px -16px rgba(0,0,0,.65);
  --linea:rgba(255,255,255,.10); --linea-fuerte:rgba(255,255,255,.16);
  --papel:#0e131c; --panel:rgba(22,29,42,.6); --panel-opaco:#131924;
  --verde-agua:#4fd1b5;
  --luz-1:rgba(38,58,102,.55); --luz-2:rgba(24,64,58,.45); --luz-3:rgba(30,40,66,.6);
  --sombra-grande:0 40px 80px -40px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id],[id="arriba"]{scroll-margin-top:68px}
.forma input,.forma select,.forma textarea,.recibido{scroll-margin-top:110px}
body{
  margin:0;font-family:var(--fuente);color:var(--tinta);font-size:16px;line-height:1.6;
  background-color:var(--papel);
  background-image:
    radial-gradient(1100px 620px at 6% -6%, var(--luz-1) 0%, transparent 60%),
    radial-gradient(900px 560px at 100% 2%, var(--luz-2) 0%, transparent 58%),
    radial-gradient(900px 900px at 60% 120%, var(--luz-3) 0%, transparent 60%);
  background-repeat:no-repeat;
  overflow-x:hidden;
}
img,svg{display:block}
a{color:var(--acento)}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}
.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:16px;top:-60px;z-index:100;background:var(--acento);color:var(--sobre-acento);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.saltar:focus{top:12px}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
@media (max-width:600px){.contenedor{padding:0 16px}}

/* ── botones ─────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:inherit;font-weight:650;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;white-space:nowrap}
.boton:hover{transform:translateY(-1px)}
.boton.primario{background:var(--acento);color:var(--sobre-acento);box-shadow:0 10px 24px -12px var(--acento)}
.boton.primario:hover{box-shadow:0 14px 28px -12px var(--acento)}
.boton.fantasma{background:var(--panel);color:var(--tinta);border-color:var(--linea-fuerte);backdrop-filter:blur(10px)}
.boton.grande{min-height:52px;padding:0 26px;font-size:16px}
.boton svg{width:18px;height:18px}

/* ── cabecera ────────────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);background:color-mix(in srgb, var(--papel) 72%, transparent);border-bottom:1px solid var(--linea)}
.cabecera .contenedor{display:flex;align-items:center;gap:20px;height:68px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:800;font-size:20px;letter-spacing:-.02em}
.marca .sello{width:32px;height:32px;flex:none}
.marca b{color:var(--acento);font-weight:800}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{color:var(--tenue);text-decoration:none;font-size:14.5px;font-weight:550;padding:8px 10px;border-radius:8px}
.nav a:hover{color:var(--tinta);background:var(--acento-suave)}
.cabecera .acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.chico{min-height:40px;height:40px;padding:0 14px;font-size:14px}
.icono-boton{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--linea-fuerte);color:var(--tinta);cursor:pointer;font:inherit;font-weight:700;font-size:13px}
.icono-boton:hover{background:var(--acento-suave)}
.icono-boton svg{width:18px;height:18px}
.idioma{width:auto;padding:0 12px;gap:6px;letter-spacing:.04em}
.tema .sol{display:none}
:root[data-tema-efectivo="oscuro"] .tema .sol{display:block}
:root[data-tema-efectivo="oscuro"] .tema .luna{display:none}
.menu-boton{display:none}
.panel-movil{display:none}
@media (max-width:1060px){
  .nav{display:none}
  .menu-boton{display:inline-flex}
  .panel-movil[data-abierto="si"]{display:block;position:absolute;left:0;right:0;top:68px;background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:var(--vidrio-sombra);padding:8px 16px 16px}
  .panel-movil a{display:block;padding:12px 8px;color:var(--tinta);text-decoration:none;font-weight:600;border-bottom:1px solid var(--linea)}
  .panel-movil .boton{margin-top:12px;width:100%}
}
@media (max-width:600px){
  .cabecera .contenedor{gap:8px}
  .oculta-movil{display:none}
}

/* ── secciones ───────────────────────────────────────────────── */
section{padding:88px 0;position:relative}
@media (max-width:760px){section{padding:64px 0}}
.ceja{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-tinta)}
.ceja::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.12;margin:0}
h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin-top:14px;max-width:820px}
/* el título de «La planta» se alargó (el dueño, 6-oct-2026: «Desde la recepción del PO hasta la entrega de la mercancía.»): sus renglones
   se reparten parejos para que ninguno se quede con una palabra sola */
#t-planta{text-wrap:balance}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.entrada{font-size:clamp(17px,1.6vw,19px);color:var(--tenue);max-width:720px;margin:18px 0 0}
.degradado{background:linear-gradient(92deg,var(--acento) 0%,var(--verde-agua) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.centrado{text-align:center}
.centrado h2,.centrado .entrada{margin-left:auto;margin-right:auto}
.vidrio{background:var(--vidrio);border:1px solid var(--vidrio-filo);box-shadow:var(--vidrio-luz),var(--vidrio-sombra);border-radius:var(--radio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ── héroe ───────────────────────────────────────────────────── */
.heroe{padding:72px 0 32px}
.heroe .rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.heroe h1{font-size:clamp(38px,5.6vw,68px);font-weight:850;letter-spacing:-.035em;margin-top:18px}
.heroe .entrada{font-size:clamp(17px,1.7vw,20px);margin-top:22px}
.heroe .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.insignias{display:flex;flex-wrap:wrap;gap:8px 18px;margin:30px 0 0;padding:0;list-style:none;color:var(--tenue);font-size:14px;font-weight:550}
.insignias li{display:flex;align-items:center;gap:7px}
.insignias svg{width:16px;height:16px;color:var(--ok);flex:none}
@media (max-width:980px){
  .heroe .rejilla{grid-template-columns:1fr;gap:48px}
  .flotante{right:12px}
  .heroe{padding-top:48px}
}

/* ── la ventana de la app (capturas dibujadas) ───────────────── */
.ventana{border-radius:16px;overflow:hidden;background:var(--panel-opaco);border:1px solid var(--linea-fuerte);box-shadow:var(--sombra-grande);font-size:13px;line-height:1.45;color:var(--tinta);text-align:left}
.ventana .barra{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:color-mix(in srgb,var(--panel-opaco) 70%, var(--linea-fuerte));border-bottom:1px solid var(--linea)}
.ventana .barra i{width:10px;height:10px;border-radius:50%;background:var(--linea-fuerte)}
.ventana .barra i:nth-child(1){background:#ef6a5e}.ventana .barra i:nth-child(2){background:#f5be4f}.ventana .barra i:nth-child(3){background:#62c554}
.ventana .url{margin:0 auto;font-size:11.5px;color:var(--tenue);background:var(--panel);border:1px solid var(--linea);border-radius:6px;padding:2px 12px}
.app{display:grid;grid-template-columns:184px minmax(0,1fr);min-height:380px}
.lado{background:linear-gradient(175deg,var(--marino-1),var(--marino-2));color:var(--marino-tinta);padding:14px 10px;font-size:12px}
.lado .m{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;margin:0 6px 14px;color:#fff}
.lado .m svg{width:20px;height:20px}
.lado .g{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;border-radius:7px;color:var(--marino-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado .g.activo{background:rgba(122,169,240,.18);color:#fff;font-weight:650}
.lado .g .punto{width:6px;height:6px;border-radius:50%;background:#f08a80;flex:none}
.principal{padding:18px;background:
  radial-gradient(420px 220px at 0% 0%, var(--luz-1), transparent 70%),
  radial-gradient(380px 220px at 100% 0%, var(--luz-2), transparent 70%), var(--papel)}
.principal .titulo{font-size:17px;font-weight:750;letter-spacing:-.01em}
.veredicto{margin:10px 0 14px;padding:10px 12px;border-radius:10px;background:var(--alto-suave);color:var(--tinta);border:1px solid color-mix(in srgb,var(--alto) 30%, transparent);font-weight:550}
.veredicto b{color:var(--alto)}
.columnas2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tarjeta{background:var(--vidrio);border:1px solid var(--vidrio-filo);box-shadow:var(--vidrio-luz),0 6px 16px -10px rgba(16,24,39,.25);border-radius:10px;padding:10px 11px;margin-bottom:8px}
.tarjeta .t{font-weight:650}
.tarjeta .s{color:var(--tenue);font-size:12px;margin-top:2px}
.tarjeta .pie{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.subt{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);margin:2px 0 8px;display:flex;align-items:center;gap:6px}
.subt .bola{width:7px;height:7px;border-radius:50%}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:650;padding:2px 8px;border-radius:999px;background:var(--acento-suave);color:var(--acento-tinta);white-space:nowrap}
.chip.verde{background:var(--ok-suave);color:var(--ok)}
.chip.rojo{background:var(--alto-suave);color:var(--alto)}
.chip.ambar{background:var(--aviso-suave);color:var(--aviso)}
.mini-boton{font-size:11.5px;font-weight:650;color:var(--sobre-acento);background:var(--acento);padding:4px 10px;border-radius:999px;white-space:nowrap}
.flotante{position:absolute;right:-18px;bottom:-26px;width:min(300px,78%);padding:14px;border-radius:14px;font-size:13px}
.flotante .t{font-weight:700;display:flex;align-items:center;gap:8px}
.flotante .t svg{width:18px;height:18px;color:var(--acento)}
.flotante .s{color:var(--tenue);font-size:12.5px;margin-top:4px}
.heroe .escena{position:relative}
@media (max-width:640px){
  .app{grid-template-columns:1fr}
  .lado{display:none}
  .columnas2{grid-template-columns:1fr}
  .flotante{position:relative;right:auto;bottom:auto;width:auto;margin-top:12px}
}

/* ── problema ────────────────────────────────────────────────── */
.dolores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.dolor{padding:24px;border-radius:var(--radio)}
.dolor .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--alto-suave);color:var(--alto);margin-bottom:16px}
.dolor .ic svg{width:22px;height:22px}
.dolor p{color:var(--tenue);margin:10px 0 0;font-size:15px}
@media (max-width:1060px){.dolores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dolores{grid-template-columns:1fr}}
.puente{margin-top:56px;padding:28px 32px;border-radius:20px;display:flex;align-items:center;gap:24px;background:linear-gradient(120deg,var(--acento-suave),color-mix(in srgb,var(--verde-agua) 14%, transparent));border:1px solid var(--linea)}
.puente p{margin:0;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.01em}
.puente svg{width:44px;height:44px;flex:none;color:var(--acento)}
@media (max-width:600px){.puente{flex-direction:column;align-items:flex-start;padding:22px}}

/* ── cómo funciona ───────────────────────────────────────────── */
.pasos{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:paso}
.paso{padding:26px;border-radius:var(--radio);position:relative}
.paso .num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--acento);color:var(--sobre-acento);font-weight:800;font-size:15px;margin-bottom:16px}
.paso p{margin:10px 0 0;color:var(--tenue);font-size:15px}
.paso .quien{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:650;color:var(--acento-tinta);background:var(--acento-suave);padding:3px 10px;border-radius:999px}
@media (max-width:1060px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pasos{grid-template-columns:1fr}}

/* ── módulos ─────────────────────────────────────────────────── */
.modulos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.modulo{padding:22px;border-radius:var(--radio);transition:transform .2s ease}
.modulo:hover{transform:translateY(-3px)}
.modulo .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--acento-suave);color:var(--acento);margin-bottom:14px}
.modulo .ic svg{width:21px;height:21px}
.modulo p{margin:8px 0 0;color:var(--tenue);font-size:14.5px}
.modulo.ia .ic{background:color-mix(in srgb,var(--verde-agua) 16%, transparent);color:var(--verde-agua)}
.etiqueta-ia{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--verde-agua);border:1px solid currentColor;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
@media (max-width:1060px){.modulos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modulos{grid-template-columns:1fr}}

/* ── vitrina de pantallas (tablero + costo) ──────────────────── */
.vitrina{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;margin-top:56px;align-items:start}
@media (max-width:980px){.vitrina{grid-template-columns:1fr}}
.vitrina h3{margin-bottom:6px}
.vitrina .explica{color:var(--tenue);margin:0 0 18px;font-size:15px}
.tablero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.col{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:8px}
.col .cab{display:flex;justify-content:space-between;font-weight:700;font-size:12px;margin:2px 2px 8px}
.col .cab span{color:var(--tenue);font-weight:600}
.wo .folio{font-weight:750}
.wo .sem{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.wo .sem .chip{font-size:10.5px;padding:1px 7px}
.wo.arrastre{transform:rotate(-2deg);box-shadow:0 18px 30px -14px rgba(16,24,39,.5);outline:2px dashed var(--acento);outline-offset:2px}
@media (max-width:560px){.tablero{grid-template-columns:1fr}.col.extra{display:none}}
.costo .fila{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dos-numeros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.numero{padding:12px;border-radius:10px;background:var(--vidrio);border:1px solid var(--vidrio-filo)}
.numero .r{font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue)}
.numero .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.numero .n{font-size:11.5px;color:var(--tenue)}
.barras .b{margin:10px 0}
.barras .b .fila{font-size:12.5px}
.barras .pista{height:9px;border-radius:99px;background:var(--linea);overflow:hidden;margin-top:5px}
.barras .pista i{display:block;height:100%;border-radius:99px;background:var(--acento)}
.barras .pista i.paro{background:var(--alto)}
.barras .pista i.repro{background:var(--aviso)}

/* ── banda oscura de la IA ───────────────────────────────────── */
.banda-ia{background:linear-gradient(170deg,var(--marino-1) 0%,#16274a 60%,#0f2d34 100%);color:var(--marino-tinta);overflow:hidden}
.banda-ia::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 85% 10%, rgba(79,209,181,.18), transparent 60%),radial-gradient(800px 500px at 0% 100%, rgba(122,169,240,.20), transparent 60%);pointer-events:none}
.banda-ia .contenedor{position:relative}
.banda-ia h2{color:#fff}
.banda-ia .ceja{color:#7fe0c9}
.banda-ia .entrada{color:var(--marino-tenue)}
.banda-ia .degradado{background:linear-gradient(92deg,#9cc0f7,#4fd1b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.ia-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;margin-top:48px;align-items:start}
@media (max-width:980px){.ia-rejilla{grid-template-columns:1fr}}
.poderes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.poderes{grid-template-columns:1fr}}
.poder{padding:18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.poder h3{font-size:16px;color:#fff;display:flex;align-items:center;gap:10px}
.poder h3 svg{width:20px;height:20px;color:#7fe0c9;flex:none}
.poder p{margin:8px 0 0;font-size:14px;color:var(--marino-tenue)}
.poder.clave{background:linear-gradient(140deg,rgba(79,209,181,.16),rgba(122,169,240,.10));border-color:rgba(79,209,181,.35)}
/* la captura dentro de la banda va en oscuro siempre */
.banda-ia .ventana{--tinta:#e8eaee;--tenue:#a3adbd;--acento:#7aa9f0;--acento-tinta:#8fb6f5;--acento-suave:rgba(122,169,240,.16);--sobre-acento:#0e131c;--ok:#3fc07f;--aviso:#e0a54a;--alto:#f08a80;--ok-suave:rgba(63,192,127,.14);--aviso-suave:rgba(224,165,74,.14);--alto-suave:rgba(240,138,128,.12);--vidrio:linear-gradient(180deg,rgba(30,38,52,.86),rgba(24,31,44,.72));--vidrio-filo:rgba(255,255,255,.08);--vidrio-luz:0 1px 0 rgba(255,255,255,.06) inset;--linea:rgba(255,255,255,.10);--linea-fuerte:rgba(255,255,255,.16);--papel:#0e131c;--panel:rgba(22,29,42,.6);--panel-opaco:#131924;--luz-1:rgba(38,58,102,.55);--luz-2:rgba(24,64,58,.45);color:var(--tinta);border-color:rgba(255,255,255,.14)}
.bandeja .renglon{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--linea)}
.bandeja .renglon:last-child{border-bottom:0}
.caja-sel{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--tenue)}
.caja-sel.si{background:var(--acento);border-color:var(--acento);position:relative}
.caja-sel.si::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--sobre-acento);border-width:0 2px 2px 0;transform:rotate(45deg)}
.correo-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;font-size:12px;color:var(--tenue);background:var(--panel);border-radius:8px;margin-bottom:4px}
.hilo{margin-top:14px;border-top:1px solid var(--linea);padding-top:12px}
.burbuja{max-width:88%;padding:8px 11px;border-radius:12px;margin:6px 0;font-size:12.5px}
.burbuja.sistema{background:var(--acento-suave);margin-left:auto;border-bottom-right-radius:4px}
.burbuja.cliente{background:var(--panel);border:1px solid var(--linea);border-bottom-left-radius:4px}
.burbuja .quien{font-size:10.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);display:block;margin-bottom:2px}
.anota{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ok);font-weight:650;margin:4px 0 0 2px}
.anota svg{width:14px;height:14px}

/* ── para quién ─────────────────────────────────────────────── */
.perfiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.perfil{padding:24px;border-radius:var(--radio)}
.perfil p{color:var(--tenue);margin:10px 0 0;font-size:15px}
.perfil .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--acento-suave);color:var(--acento);margin-bottom:16px}
.perfil .ic svg{width:22px;height:22px}
@media (max-width:1060px){.perfiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.perfiles{grid-template-columns:1fr}}
.puestos{margin-top:40px;padding:26px 28px;border-radius:var(--radio)}
.puestos h3{font-size:17px}
.puestos ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.puestos li{padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--linea);font-size:14px;font-weight:600}

/* ── ventajas ───────────────────────────────────────────────── */
.ventajas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:48px;border-radius:20px;overflow:hidden;background:var(--linea);border:1px solid var(--linea)}
.ventaja{padding:30px;background:var(--papel)}
.ventaja .ic{width:38px;height:38px;color:var(--acento);margin-bottom:14px}
.ventaja .ic svg{width:30px;height:30px}
.ventaja p{color:var(--tenue);margin:10px 0 0;font-size:15px}
@media (max-width:980px){.ventajas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ventajas{grid-template-columns:1fr}.ventaja{padding:24px}}

/* ── seguridad ──────────────────────────────────────────────── */
.seguridad .rejilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
@media (max-width:980px){.seguridad .rejilla{grid-template-columns:1fr}}
.candados{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.candados{grid-template-columns:1fr}}
.candados li{padding:18px;border-radius:14px}
.candados h3{font-size:16px;display:flex;align-items:center;gap:10px}
.candados h3 svg{width:20px;height:20px;color:var(--ok);flex:none}
.candados p{margin:8px 0 0;color:var(--tenue);font-size:14px}
.escudo{display:flex;align-items:center;justify-content:center;padding:28px}
.escudo svg{width:min(320px,80%);height:auto}

/* ── preguntas ──────────────────────────────────────────────── */
.preguntas{max-width:860px;margin:44px auto 0}
.preguntas details{border-radius:14px;margin-bottom:12px;padding:0 22px}
.preguntas summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-weight:700;font-size:17px;position:relative}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2px solid var(--tenue);border-bottom:2px solid var(--tenue);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.preguntas details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.preguntas details p{margin:0 0 20px;color:var(--tenue)}

/* ── llamado final y cotización ─────────────────────────────── */
.final{padding:72px 0 0}
.final .caja{border-radius:28px;padding:64px 48px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--marino-1),#1b3260 55%,#14514a);color:#fff}
.final .caja::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%, rgba(79,209,181,.25), transparent 60%),radial-gradient(600px 300px at 10% 100%, rgba(122,169,240,.25), transparent 60%)}
.final .caja > *{position:relative}
.final h2{color:#fff;margin:0 auto;max-width:760px}
.final p{color:#c9d5ea;font-size:18px;max-width:640px;margin:16px auto 0}
.final .botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.final .boton.primario{background:#fff;color:#12203a;box-shadow:none}
.final .boton.fantasma{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
@media (max-width:600px){.final .caja{padding:44px 22px;border-radius:22px}}
.cotizacion .rejilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
@media (max-width:980px){.cotizacion .rejilla{grid-template-columns:1fr}}
.forma{padding:28px;border-radius:20px}
.forma .campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
@media (max-width:560px){.forma .campos{grid-template-columns:1fr}.forma{padding:20px}}
.forma label{display:block;font-size:13.5px;font-weight:650;margin-bottom:6px}
.forma .opcional{font-weight:500;color:var(--tenue)}
.forma .ancho{grid-column:1/-1}
.forma input,.forma textarea,.forma select{width:100%;font:inherit;font-size:15px;color:var(--tinta);background:var(--panel);border:1px solid var(--linea-fuerte);border-radius:10px;padding:11px 12px;min-height:44px}
.forma select option{color:#101827}
.forma textarea{min-height:110px;resize:vertical}
.forma input:focus,.forma textarea:focus,.forma select:focus{outline:3px solid var(--foco);outline-offset:1px}
.forma [aria-invalid="true"]{border-color:var(--alto);background:var(--alto-suave)}
.forma .error{display:none;margin:6px 0 0;font-size:13px;font-weight:600;color:var(--alto)}
.forma .campo[data-mal="si"] .error{display:block}
.interes{border:0;padding:0;margin:0 0 18px}
.interes legend{font-size:13.5px;font-weight:650;margin-bottom:8px;padding:0}
.interes .opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{position:relative;display:inline-flex!important;align-items:center;margin:0!important;cursor:pointer}
.opcion input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.opcion span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linea-fuerte);background:var(--panel);font-weight:600;font-size:14px}
.opcion input:checked + span{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.opcion input:focus-visible + span{outline:3px solid var(--foco);outline-offset:2px}
.trampa{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.forma .enviar{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.idioma-resp{font-size:13px;color:var(--tenue)}
.resumen-error,.falla{display:none;margin:16px 0 0;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--alto);background:var(--alto-suave)}
.resumen-error[data-ver="si"],.falla[data-ver="si"]{display:block}
#boton-enviar .giro,#boton-enviar .txt-enviando{display:none}
#boton-enviar[data-enviando="si"]{opacity:.85;cursor:progress}
#boton-enviar[data-enviando="si"] .giro{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
#boton-enviar[data-enviando="si"] .txt-normal{display:none}
#boton-enviar[data-enviando="si"] .txt-enviando{display:inline}
@keyframes gira{to{transform:rotate(360deg)}}
.nota-maqueta{font-size:13px;color:var(--aviso);background:var(--aviso-suave);border-radius:10px;padding:8px 12px;margin:16px 0 0}
.recibido{display:none;text-align:center;padding:28px 8px}
.recibido[data-ver="si"]{display:block}
.recibido:focus{outline:none}
.recibido .ic-ok{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--ok-suave);color:var(--ok)}
.recibido .ic-ok svg{width:28px;height:28px}
.recibido h3{font-size:22px}
.recibido p{color:var(--tenue);margin:10px auto 22px;max-width:420px}
.recibido p b{color:var(--tinta);word-break:break-word}
.lista-cot{list-style:none;padding:0;margin:24px 0 0}
.lista-cot li{display:flex;gap:12px;margin:14px 0;color:var(--tenue)}
.lista-cot svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:3px}
.lista-cot b{color:var(--tinta)}

/* ── aviso de privacidad (su propia página, `privacidad.html`: el dueño, 6-oct-2026 — «Ninguna página tiene los avisos
      de privacidad dentro de la página principal») ───────────────────────────────── */
.privacidad{padding:56px 0 72px}
@media (max-width:760px){.privacidad{padding:32px 0 48px}}
.aviso .volver{display:inline-block;margin:0 0 18px;font-size:14px;color:var(--acento-tinta);text-decoration:none}
.aviso .volver:hover{text-decoration:underline}
.aviso{max-width:860px;margin:0 auto;padding:36px 40px;border-radius:20px;font-size:14.5px;color:var(--tenue)}
.aviso h1,.aviso h2{font-size:clamp(24px,3vw,30px);line-height:1.2;color:var(--tinta);margin:0}
.aviso .fecha{margin:6px 0 20px;font-size:13px}
.aviso p{margin:0 0 12px}
.aviso b{color:var(--tinta)}
@media (max-width:600px){.aviso{padding:24px 20px}}
/* ── pie ────────────────────────────────────────────────────── */
footer{padding:56px 0 40px;border-top:1px solid var(--linea)}
footer .rejilla{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
footer p{color:var(--tenue);margin:10px 0 0;font-size:14px;max-width:360px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer nav a{color:var(--tenue);text-decoration:none;font-size:14px;font-weight:550}
footer nav a:hover{color:var(--tinta)}
footer .legal{margin-top:32px;font-size:13px;color:var(--tenue)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ── el gemelo: ocho golpes ─────────────────────────────────────── */
.golpes{margin-top:52px}
.golpes .modulo{padding:24px}
.golpes .modulo h3{font-size:20px;letter-spacing:-.02em}
.golpes .modulo p{font-size:15px}
.modulo.tinta .ic{background:var(--aviso-suave);color:var(--aviso)}
/* ── inspección con cámaras (D-523 ⑱) ───────────────────────────── */
.caja-vision{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;border-radius:28px;padding:56px 52px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--marino-1),#1b3260 55%,#14514a);color:var(--marino-tinta)}
.caja-vision::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 320px at 90% 10%, rgba(79,209,181,.22), transparent 60%),radial-gradient(600px 320px at 0% 100%, rgba(122,169,240,.22), transparent 60%);pointer-events:none}
.caja-vision > *{position:relative}
.caja-vision h2{color:#fff}
.caja-vision .ceja{color:#7fe0c9;display:flex;margin-top:18px}
.caja-vision .entrada{color:var(--marino-tenue)}
.caja-vision .degradado{background:linear-gradient(92deg,#9cc0f7,#4fd1b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.nota-vision{margin:18px 0 0;font-size:14px;color:var(--marino-tenue);border-left:2px solid rgba(255,255,255,.25);padding-left:12px}
.dibujo-vision{color:#dfe7f5}
.dibujo-vision svg{width:100%;max-width:340px;height:auto;margin:0 auto}
@media (max-width:860px){.caja-vision{grid-template-columns:1fr;padding:40px 22px;border-radius:22px;gap:24px}.dibujo-vision svg{max-width:220px}}
/* ── tinta (captura dibujada) ───────────────────────────────────── */
.tinta-mock .fila-t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tinta-mock .s-t{color:var(--tenue);font-size:12px;margin-top:2px}
.tinta-mock .color{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--linea)}
.tinta-mock .color i{width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1px var(--linea-fuerte)}
.tinta-mock .color b{font-variant-numeric:tabular-nums}
.tinta-mock .color.total{grid-template-columns:minmax(0,1fr) auto;border-bottom:0;font-weight:700;background:var(--acento-suave);border-radius:8px;margin-top:6px}
.tinta-mock .anota{margin-top:10px}
/* ── cada departamento ──────────────────────────────────────────── */
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:48px}
@media (max-width:860px){.areas{grid-template-columns:1fr}}
.area{padding:26px}
@media (max-width:600px){.area{padding:20px}}
.area ul{list-style:none;padding:0;margin:14px 0 0}
.area li{position:relative;padding:7px 0 7px 26px;color:var(--tenue);font-size:15px;border-bottom:1px solid var(--linea)}
.area li:last-child{border-bottom:0}
.area li::before{content:"";position:absolute;left:2px;top:14px;width:11px;height:6px;border:solid var(--ok);border-width:0 0 2.4px 2.4px;transform:rotate(-45deg)}
/* ── dinero: dos columnas ───────────────────────────────────────── */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:980px){.dos-col{grid-template-columns:1fr}}
.candados p.mas{margin-top:8px;font-size:13.5px}
/* ── D-525: los tres «no más» del dueño, bajo el héroe ──────────── */
.no-mas{padding:24px 0 8px}
.no-mas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.no-mas li{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--radio);background:linear-gradient(120deg,var(--acento-suave),color-mix(in srgb,var(--verde-agua) 12%, transparent));border:1px solid var(--linea)}
.no-mas .ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ok-suave);color:var(--ok)}
.no-mas .ic svg{width:22px;height:22px}
.no-mas h2{font-size:clamp(19px,1.7vw,22px);margin:0;letter-spacing:-.02em;font-weight:800}
.no-mas p{margin:6px 0 0;color:var(--tenue);font-size:15px}
@media (max-width:900px){.no-mas ul{grid-template-columns:1fr}}