/* Alertas de licitaciones — hoja de estilos (light, sobrio, acento azul estado).
   Tipografía autohospedada (OFL, sin CDN): Source Serif 4 en titulares,
   IBM Plex Sans en texto. Archivos en assets/fonts/. */
@font-face{
  font-family:"Source Serif 4";
  src:url("/assets/fonts/SourceSerif4-latin.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/fonts/IBMPlexSans-latin.woff2") format("woff2");
  font-weight:100 700;font-style:normal;font-display:swap;
}
/* Alertas de licitaciones — hoja de estilos.
   Paleta cálida profesional (ítem rt14 #7, dueño: "contraste alto" del azul
   frío anterior; evidencia AA en _pruebas/rt14_capturas/contraste_ev.txt).
   Temas: claro (default) · oscuro (data-tema="oscuro") · alto contraste
   (data-contraste="alto"), ambos opt-in vía assets/tema.js (localStorage +
   prefers-color-scheme en primera visita). Oscuro y alto contraste son
   mutuamente excluyentes (rt16 #1): activar uno apaga el otro.
   Embellecimiento del tema claro (rt16 #2, petición del dueño "muy fome y
   simple"): gradiente sobrio azul-institucional→gris cálido en el hero,
   jerarquía tipográfica reforzada, sombras suaves en tarjetas y un acento
   de marca discreto (línea corta bajo el H1). Toda decoración justifica
   función (jerarquía/foco); evidencia AA en _pruebas/rt16_capturas/.
   rt40: paleta del tema claro rederivada del navy del hero (aprobado por el
   dueño como referencia): fondo/suave/bordes con tinte navy, superficies
   blancas intactas. Solo :root; oscuro y alto contraste byte-idénticos.
   Evidencia AA en _pruebas/rt40_capturas/contraste_ev.txt. */
:root{
  /* rt23c — tema claro v3: HERO NAVY (ADN del oscuro aprobado por el dueño:
     fondo profundo, texto claro, CTA azul brillante que estalla) + cuerpo
     claro suave + footer navy. Nada de blanco puro dominante. */
  --azul:#2f66e8;
  --azul-osc:#1d4ed8;
  --btn-fg:#ffffff;
  /* rt40 — paleta clara derivada del hero navy (que el dueño quiere como
     referencia): todos los neutros claros toman tinte del navy del hero
     (#0c1830-#1a3467). El fondo gana presencia azulada y las superficies
     blancas dejan de "chocar": blanco sobre tinte navy = look institucional.
     Oscuro y alto contraste intactos (bloques de abajo sin tocar). */
  --tinta:#27334a;
  --titulo:#0e1e40;
  --acento:#2f66e8;
  --gris:#566379;
  --fondo:#e9eef7;
  --suave:#dce4f1;
  --panel:#ffffff;
  --azul-suave:#dde7fa;
  --borde:#c3d0e2; /* rt40: un punto más profundo para anclar cards blancas */
  --borde-ui:#566379; /* controles interactivos: ≥3:1 contra blanco/fondos */
  --exito-bg:#eaf7ef;
  --exito-borde:#2e9e5b;
  --exito-tinta:#1e7a43;
  --error:#b42318;
  /* rt27a — ★ prioritaria dentro del chip seleccionado. En claro la estrella
     va directa sobre el chip azul (--estrella-bg sin definir = transparente):
     ámbar claro #fcd34d con 3.48:1 como componente gráfico. En oscuro/HC el
     contraste exige badge propio (vars --estrella-* por tema). Evidencia
     medida: _pruebas/rt27_capturas/contraste_ev.txt. */
  --estrella-fg:#fcd34d;
  --radio:10px;
  --btn-bg:linear-gradient(180deg,#3b74f0,#2f66e8);
  --btn-bg-hover:linear-gradient(180deg,#2f66e8,#1d4ed8);
  --btn-sombra:0 2px 8px rgba(14,28,58,.30);
  /* Hero navy: de casi-negro azulado a navy institucional */
  --hero-grad:linear-gradient(165deg,#0c1830 0%,#122449 55%,#1a3467 100%);
  --hero-titulo:#ffffff;
  --hero-bajada:#ccd7ec;
  --hero-mini:#a9b8d6;
  --hero-bar:#6ea8ff;
  --pill-fg:#bcd2ff;
  --pill-borde:#3d5a94;
  --sombra:0 1px 2px rgba(14,28,58,.05),0 6px 18px rgba(14,28,58,.08);
  --sombra-suave:0 1px 2px rgba(14,28,58,.04);
  /* rt29 — premium del tema claro: tarjeta con más presencia (sombra fría
     doble capa), detalle de acento superior en hover de cards, y ritmo
     vertical más generoso. En oscuro/HC se anulan vía vars (abajo). */
  --tarjeta-sombra:0 1px 2px rgba(15,29,61,.04),0 10px 28px rgba(15,29,61,.09);
  --card-top:var(--azul);
  --seccion-pad:48px;
  --h2-size:29px;
  --h2-tracking:-0.01em;
  /* Bandas alternadas con presencia: hairline frío arriba y abajo.
     rt40: el hairline toma tinte navy para coordinar con el nuevo fondo. */
  --banda-borde:#c3cfe1;
  --banda-bw:1px;
  /* Pasos numerados: disco azul-suave con número azul. */
  --paso-n-fondo:var(--azul-suave);
  --paso-n-tinta:var(--azul-osc);
  --paso-n-borde:var(--borde);
  /* FAQ/precio-detalle/avanzado como tarjetas blancas. */
  --detalle-fondo:var(--panel);
  --detalle-hover-borde:var(--azul);
  /* Caja de precio: panel blanco elevado. */
  --precio-fondo:var(--panel);
  --precio-borde:var(--borde);
  --precio-radio:14px;
  --precio-sombra:var(--tarjeta-sombra);
  --precio-pad:44px 28px;
  --precio-bw:1px;
  /* rt32 — aire real bajo la tarjeta de precio: el padding de la tarjeta se
     lee como relleno interno, no como separación entre secciones; un margen
     exterior crea la franja de fondo que separa del bloque siguiente.
     En oscuro/HC el var es 0 (pixel-idéntico). */
  --precio-marco-abajo:32px;
  /* Comparativa: cabecera navy con texto claro. */
  --comp-th-fondo:#0f1d3d;
  --comp-th-tinta:#ffffff;
  --comp-th-mini:#c2cfe8;
  --comp-zebra:var(--suave);
  /* Dolor: acento editorial de borde izquierdo. */
  --dolor-borde:var(--azul);
  --dolor-bw:4px;
  /* Resumen (volumen en vivo): tarjeta azul-suave con acento. */
  --resumen-fondo:var(--azul-suave);
  --resumen-borde:#bfd0ee;
  --resumen-l:var(--azul);
  --resumen-bw:1px;
  --resumen-lw:4px;
  /* Cards y details: medidas premium del claro. */
  --card-pad:22px 24px;
  --card-radio:12px;
  --detalle-pad:16px 18px;
  --detalle-p-pad:0 18px 16px;
  /* Footer navy, ancla visual de la página */
  --pie-fondo:#0c1830;
  --pie-tinta:#c8d4ea;
  --pie-link:#9db9f5;
  /* rt33 — CTA secundario subordinado (claro): texto/borde azul oscuro,
     hover sobre azul suave. Overrides de oscuro/HC en sus bloques. */
  --btnsec-fg:var(--azul-osc);
  --btnsec-borde:var(--azul-osc);
  --btnsec-hover-bg:var(--azul-suave);
}
[data-tema="oscuro"]{
  --azul:#8fb0f5;
  --azul-osc:#a9c2f7;
  --btn-fg:#171512;
  --tinta:#f2ede4;
  --titulo:#f5efe4;
  --acento:#f0b429;
  /* rt23c — en oscuro el hero sigue siendo oscuro: los vars hero/pill/pie
     heredan la identidad existente. */
  --hero-titulo:var(--titulo);
  --hero-bajada:var(--gris);
  --hero-mini:var(--gris);
  --hero-bar:var(--acento);
  --pill-fg:var(--acento);
  --pill-borde:#6b6259;
  --pie-fondo:var(--fondo);
  --pie-tinta:var(--gris);
  --pie-link:var(--azul);
  --gris:#c9c0b3;
  --fondo:#171512;
  --suave:#211e1a;
  --panel:#211e1a;
  --azul-suave:#232b3d;
  --borde:#3d3831;
  --borde-ui:#c9c0b3;
  --exito-bg:#14261b;
  --exito-borde:#3fae6e;
  --exito-tinta:#6fce97;
  --error:#f2a6a0;
  /* rt27a — chip .on es azul CLARO en oscuro: la estrella ámbar directa no
     contrastaría; va en badge ámbar oscuro con estrella ámbar clara
     (badge-chip 4.29:1, estrella-badge 4.99:1). */
  --estrella-bg:#5c4300;
  --estrella-fg:#f0b429;
  --btn-bg:#8fb0f5;
  --btn-bg-hover:#a9c2f7;
  --btn-sombra:none;
  /* rt33 — CTA secundario en oscuro (aditivo; tema aprobado intacto). */
  --btnsec-fg:var(--azul);
  --btnsec-borde:var(--azul);
  --btnsec-hover-bg:var(--suave);
  /* Hero oscuro: azul muy apagado hacia el fondo cálido oscuro; la sombra
     no aporta en fondos oscuros, se anula. */
  --hero-grad:linear-gradient(180deg,#1d2436 0%,#1a1c22 55%,var(--fondo) 100%);
  --sombra:none;
  --sombra-suave:none;
  /* rt29 — oscuro se conserva EXACTO: los efectos premium son del claro.
     rt43 — paridad de temas (ruling del dueño): ritmo vertical y tipografía
     de secciones UNIFICADOS con el claro (--seccion-pad/--h2-* ya no se
     sobre-escriben acá); entre temas solo difiere la paleta y el look
     (sombras/hairlines/radios). Evidencia: rt43_capturas/mediciones_*.json */
  --tarjeta-sombra:none;
  --card-top:transparent;
  --banda-borde:transparent;
  --banda-bw:0px;
  --paso-n-fondo:var(--azul-suave);
  --paso-n-tinta:var(--azul);
  --paso-n-borde:transparent;
  --detalle-fondo:transparent;
  --detalle-hover-borde:var(--borde-ui);
  --precio-fondo:var(--suave);
  --precio-borde:transparent;
  --precio-radio:10px;
  --precio-sombra:none;
  --precio-bw:0px;
  /* rt43 — paridad: --precio-pad/--precio-marco-abajo unificados con el
     claro (ya no se sobre-escriben acá). */
  --comp-th-fondo:var(--suave);
  --comp-th-tinta:var(--tinta);
  --comp-th-mini:var(--gris);
  --comp-zebra:transparent;
  --dolor-borde:transparent;
  --dolor-bw:0px;
  --resumen-fondo:var(--suave);
  --resumen-borde:transparent;
  --resumen-l:transparent;
  --resumen-bw:0px;
  --resumen-lw:0px;
  /* rt43 — paridad: --card-pad/--detalle-* unificados con el claro (el radio
     --card-radio se conserva por tema: look, no afecta largo). */
  --card-radio:var(--radio);
}
/* Alto contraste: la paleta de alto contraste como OPCIÓN explícita (ítem
   rt14 #7c), no el default. Va después de oscuro en la cascada, pero en
   práctica nunca coinciden: tema.js los hace excluyentes (rt16 #1). */
[data-contraste="alto"]{
  --azul:#0b3aa8;
  --azul-osc:#0b3aa8;
  --btn-fg:#ffffff;
  --tinta:#000000;
  --titulo:#000000;
  --acento:#000000;
  --gris:#3f3a33;
  --fondo:#ffffff;
  --suave:#ffffff;
  --panel:#ffffff;
  --azul-suave:#ffffff;
  --borde:#76716a;
  --borde-ui:#3f3a33;
  --exito-bg:#ffffff;
  --exito-borde:#0a5c2e;
  --exito-tinta:#0a5c2e;
  --error:#8a1c12;
  /* rt27a — HC: badge ámbar con estrella negra (≥3:1 contra el chip azul
     #0b3aa8 en componente gráfico; la estrella negra pasa AA texto). */
  --estrella-bg:#f0b429;
  --estrella-fg:#000000;
  /* rt23c — alto contraste: hero plano blanco, texto negro, pie plano. */
  --hero-titulo:#000000;
  --hero-bajada:#000000;
  --hero-mini:#000000;
  --hero-bar:#000000;
  --pill-fg:#000000;
  --pill-borde:#000000;
  --pie-fondo:#ffffff;
  --pie-tinta:#000000;
  --pie-link:#0b3aa8;
  --btn-bg:#0b3aa8;
  --btn-bg-hover:#0b3aa8;
  --btn-sombra:none;
  /* rt33 — CTA secundario en alto contraste (aditivo; tema aprobado intacto). */
  --btnsec-fg:var(--azul-osc);
  --btnsec-borde:var(--azul-osc);
  --btnsec-hover-bg:var(--suave);
  /* Alto contraste se mantiene plano: sin gradientes ni sombras. */
  --hero-grad:none;
  --sombra:none;
  --sombra-suave:none;
  /* rt29 — alto contraste se conserva EXACTO: plano, sin efectos premium.
     rt43 — paridad de temas: ritmo vertical y tipografía unificados con el
     claro (--seccion-pad/--h2-* ya no se sobre-escriben acá). */
  --tarjeta-sombra:none;
  --card-top:transparent;
  --banda-borde:transparent;
  --banda-bw:0px;
  --paso-n-fondo:var(--suave);
  --paso-n-tinta:var(--titulo);
  --paso-n-borde:var(--borde);
  --detalle-fondo:transparent;
  --detalle-hover-borde:var(--borde-ui);
  --precio-fondo:var(--suave);
  --precio-borde:transparent;
  --precio-radio:10px;
  --precio-sombra:none;
  --precio-bw:0px;
  /* rt43 — paridad: --precio-pad/--precio-marco-abajo unificados con el
     claro (ya no se sobre-escriben acá). */
  --comp-th-fondo:var(--suave);
  --comp-th-tinta:var(--tinta);
  --comp-th-mini:var(--gris);
  --comp-zebra:transparent;
  --dolor-borde:transparent;
  --dolor-bw:0px;
  --resumen-fondo:var(--suave);
  --resumen-borde:transparent;
  --resumen-l:transparent;
  --resumen-bw:0px;
  --resumen-lw:0px;
  /* rt43 — paridad: --card-pad/--detalle-* unificados con el claro (el radio
     --card-radio se conserva por tema: look, no afecta largo). */
  --card-radio:var(--radio);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:var(--fondo);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3,.brand{font-family:"Source Serif 4",Georgia,"Times New Roman",serif}
h1,h2,h3,.brand{color:var(--titulo)}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.row-end{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}

/* rt23 — banda alternada a ancho completo (mismo truco de márgenes que
   .hero). Función: ritmo visual entre secciones sin recargar.
   rt29: en claro las bandas ganan presencia con hairlines frías arriba y
   abajo (--banda-borde); en oscuro/HC el var es transparente (sin cambio). */
.banda{
  background:var(--suave);
  border-top:var(--banda-bw) solid var(--banda-borde);
  border-bottom:var(--banda-bw) solid var(--banda-borde);
  margin:0 calc(50% - 50vw);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%);
}

/* Píldora eyebrow (rt23): pequeña, en versalitas, sobre el H1 del hero.
   Función: ancla el contexto ("qué es esto") antes del titular. Colores por
   tema (rt23c: translúcida sobre el hero navy del claro). */
.pill{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pill-fg);
  border:1px solid var(--pill-borde);border-radius:999px;padding:5px 14px;
  margin-bottom:18px;background:transparent;
}

/* Header */
.top{border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--fondo);z-index:10}
/* rt43: padding 12px 20px (no 12px 0): el atajo anterior anulaba el padding
   lateral de .wrap y brand/CTA tocaban los bordes del viewport (medido:
   brand x=0, CTA right=390). Con 20px laterales nada toca el borde. */
.top .top-row{justify-content:space-between;padding:12px 20px}
.brand{font-weight:700}

/* Botones */
.btn{
  display:inline-block;
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;
  border:none;border-radius:var(--radio);padding:11px 22px;font-size:16px;font-weight:600;
  cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;
  box-shadow:var(--btn-sombra);
}
.btn:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:7px 14px;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.btn-lg{padding:15px 32px;font-size:18px}
.btn-ghost{background:var(--azul-suave);color:var(--tinta)}
.btn-ghost:hover{background:var(--suave)}

/* rt33 — CTA secundario subordinado (embudo híbrido, spec_rt33.md):
   outline/enlace, sin relleno de marca ni sombra, menor que el primario.
   El primario conserva ≥70% del peso visual del bloque. Contraste AA
   (≥4.5:1) verificado en rt33_embudo/contraste_ev.txt. Las vars de tema
   viven en :root y en los bloques oscuro/HC de arriba (orden de cascada
   correcto: tema después de :root). Hero: override con las vars del hero
   (fondo navy/oscuro/blanco según tema). */
.btn-sec{
  display:inline-block;background:transparent;color:var(--btnsec-fg);
  text-decoration:none;border:1.5px solid var(--btnsec-borde);
  border-radius:var(--radio);padding:8px 18px;font-size:15px;font-weight:500;
  cursor:pointer;box-shadow:none;min-height:44px;line-height:1.4;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-sec:hover{color:var(--btnsec-fg);border-color:var(--btnsec-fg);background:var(--btnsec-hover-bg)}
.btn-sec:focus-visible{outline:2px solid var(--btnsec-fg);outline-offset:2px}
.hero-sec{margin:24px 0 0}
.hero .btn-sec{color:var(--pill-fg);border-color:var(--pill-borde)}
.hero .btn-sec:hover{color:var(--hero-titulo);border-color:var(--hero-bar);background:transparent}
.hero .btn-sec:focus-visible{outline-color:var(--pill-fg)}
/* Indicador de suscripción directa prechequeada (formulario #alta): sutil,
   mismo lenguaje que el correo opt-in de intención directa. */
.intencion-directa{
  border-left:3px solid var(--azul);padding:8px 12px;margin:10px 0 0;
  background:var(--azul-suave);border-radius:0 8px 8px 0;
}

/* Hero */
.hero{
  padding:84px 0 52px;text-align:center;
  background:var(--hero-grad);
  /* El gradiente se extiende al ancho completo del viewport: */
  margin:0 calc(50% - 50vw);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%);
}
.hero.hero-sm{padding:52px 0 28px}
/* rt34 — hero comprimido en móvil: el CTA principal debe entrar al primer
   viewport en 390×844 (auditoría rt32, captura ia_mobile_primer_viewport;
   evidencia: rt34_capturas/medicion_hero.json). Solo ≤640px: los controles
   de tema desktop (1280px) no se tocan. El header sticky con toggles queda
   fuera del alcance rt34 (ítem #5 de la auditoría, no aprobado). */
@media(max-width:640px){
  .hero{padding-top:44px;padding-bottom:36px}
  .pill{margin-bottom:12px}
  .hero h1{margin-bottom:14px}
  .bajada{font-size:18px;margin-bottom:20px}
}
.hero h1{
  font-size:clamp(30px,5.4vw,52px);line-height:1.15;margin:0 auto 20px;letter-spacing:-0.015em;
  font-weight:700;max-width:780px;text-wrap:balance;color:var(--hero-titulo);
}
/* Detalle de marca (rt16 #2, rt23c): línea corta sobre el H1, color por
   tema (azul claro sobre el hero navy del tema claro). */
.hero h1::before{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--hero-bar);margin:0 auto 22px;
}
.hero h1 em{color:var(--hero-bar);font-style:normal}
.bajada{font-size:19px;color:var(--hero-bajada);max-width:640px;margin:0 auto 28px}
.mini{font-size:14px;color:var(--gris)}
.hero .mini{color:var(--hero-mini)}

/* Dolor */
/* rt29: acento editorial — borde izquierdo azul en claro (var transparente
   en oscuro/HC: sin cambio visual). */
.dolor{background:var(--suave);border-radius:var(--radio);padding:28px;margin:36px 0;border-left:var(--dolor-bw) solid var(--dolor-borde)}
.dolor p{margin:0 0 12px}
.dolor p:last-child{margin-bottom:0}

section{padding:var(--seccion-pad) 0}
h2{font-size:var(--h2-size);margin:0 0 18px;letter-spacing:var(--h2-tracking)}
h3{margin:0 0 8px;font-size:18px}

/* Volumen */
.volumen .row{margin-top:8px}
select,input[type=text],input[type=email]{
  font:inherit;padding:10px 12px;border:1px solid var(--borde-ui);border-radius:var(--radio);width:100%;max-width:340px;
  background:var(--panel);color:var(--tinta);
}
.volumen-cifra{font-size:26px;font-weight:700;color:var(--azul);margin:14px 0 4px;font-family:"Source Serif 4",Georgia,serif}
.busca-rubro input{max-width:420px}

/* Tarjetas */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
/* rt29 — padding/radio de card son por tema: premium en claro, idéntico al
   valor histórico (20px, --radio) en oscuro/HC. */
.card{
  border:1px solid var(--borde);border-radius:var(--card-radio);padding:var(--card-pad);background:var(--panel);
  box-shadow:var(--sombra); /* rt16 #2: separación suave, tema claro */
  transition:transform .15s,box-shadow .15s;
  position:relative;
}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,29,61,.06),0 10px 24px rgba(15,29,61,.10)}
/* rt29 — acento superior al hover: línea corta azul bajo el borde redondeado
   (función: feedback de interacción; --card-top transparente en oscuro/HC). */
.card::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:3px;
  border-radius:0 0 3px 3px;background:var(--card-top);opacity:0;
  transition:opacity .15s;
}
.card:hover::before{opacity:1}
.card h3{color:var(--titulo)}
.card p{margin:0;font-size:15.5px;color:var(--tinta)}

/* Pasos
   rt29 — numeración propia: discos azul-suave con número alineados al
   texto (función: jerarquía y progreso, sin emojis).
   rt43 — paridad de temas: el estilo numerado aplica a los 3 temas (antes
   solo claro y por eso "Cómo funciona" medía ~94px más en claro); los
   colores de los discos siguen siendo por tema (--paso-n-* arriba). */
.pasos{padding-left:22px}
.pasos li{margin-bottom:14px}
.pasos{
  list-style:none;padding-left:0;counter-reset:paso;margin:8px 0 0;
}
.pasos li{
  position:relative;padding-left:52px;margin-bottom:20px;counter-increment:paso;
}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;
  background:var(--paso-n-fondo);color:var(--paso-n-tinta);
  border:1px solid var(--paso-n-borde);
  font:700 15px/33px "IBM Plex Sans",system-ui,sans-serif;text-align:center;
}
.pasos li strong{color:var(--titulo)}

/* Comparativa
   rt29 — cabecera navy con texto claro en claro (--comp-th-*); zebra suave
   para guiar la fila; hover resalta la fila. En oscuro/HC los vars replican
   el look anterior (th suave con tinta, sin zebra). */
.comparativa{width:100%;border-collapse:collapse;font-size:15px}
.comparativa th,.comparativa td{border:1px solid var(--borde);padding:10px 12px;text-align:left}
.comparativa th{background:var(--comp-th-fondo);color:var(--comp-th-tinta);font-size:14px}
.comparativa th small{font-weight:400;color:var(--comp-th-mini)}
.comparativa tbody tr:nth-child(even){background:var(--comp-zebra)}
.comparativa tbody tr:hover{background:var(--azul-suave)}
.comparativa .yo{background:var(--azul-suave);border-left:3px solid var(--azul)}
.comparativa + .mini{margin-top:14px}

/* Precio
   rt29 — la caja de precio pasa de bloque plano a panel elevado: fondo
   blanco, borde sutil, sombra fría y radio mayor (en oscuro/HC los vars
   replican el look plano anterior). */
.precio{background:var(--precio-fondo);border:var(--precio-bw) solid var(--precio-borde);border-radius:var(--precio-radio);box-shadow:var(--precio-sombra);padding:var(--precio-pad);text-align:center;margin-bottom:var(--precio-marco-abajo)}
.precio-cifra{font-size:56px;font-weight:800;margin:6px 0 10px;color:var(--titulo);letter-spacing:-0.02em}
.precio-cifra small{font-size:20px;font-weight:600;color:var(--acento)}
.precio-esencial{list-style:none;padding:0;text-align:left;max-width:560px;margin:0 auto 14px}
.precio-esencial li{margin-bottom:10px;padding-left:22px;position:relative}
.precio-esencial li::before{content:"—";position:absolute;left:0;color:var(--azul)}
.precio-detalle{max-width:560px;margin:0 auto 18px;text-align:left;background:var(--panel);border:1px solid var(--borde-ui);border-radius:var(--radio)}
.precio-detalle summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none}
.precio-detalle summary::before{content:"+ ";color:var(--azul);font-weight:800}
.precio-detalle[open] summary::before{content:"– "}
.precio-detalle ul{margin:0;padding:0 16px 14px 34px}
.precio-detalle li{margin-bottom:8px;font-size:15.5px;color:var(--tinta)}
.precio ul{text-align:left;max-width:560px;margin:0 auto 18px}
/* rt34 — packs visibles como cards (3 opciones alineadas: mensual / 6m /
   12m), junto a la cifra mensual. Reutiliza las vars de tema existentes
   (panel/tinta/titulo/gris/borde/sombra): en oscuro/HC hereda el look plano
   histórico de esos vars, mismo criterio aditivo que .btn-sec en rt33. */
/* rt41 — alineación de la grilla de packs (queja del dueño: "cositas
   desalineadas" en Precio desktop). Medido en rt41_capturas/mediciones_before.json:
   1) El calificador del precio ("CLP/mes" / "($16.500/mes)") cabía en la
      misma línea solo en la card Mensual; en 6m/12m bajaba a una 2ª línea
      (bloque de precio 42px vs 83px) y empujaba el badge 42px hacia abajo.
   2) En claro el badge "Ahorras $X vs mensual" (negrita 13px) no cabía en
      el ancho de card y hacía wrap a 2 líneas (50px vs 29px de alto).
   Correcciones (aditivas; paletas intactas, mismo look en oscuro/HC):
   - small del precio en línea propia en las 3 cards: baselines de precios
     y badges quedan a la misma altura vertical entre cards.
   - grilla 760→820px y badge nowrap dentro de la grilla: badge de 1 línea
     en las 3 cards. La card crece ~10px de ancho; la proporción se conserva
     y en móvil (1 columna) el cambio es imperceptible. */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;margin:18px auto 24px;text-align:left}
@media(max-width:720px){.packs-grid{grid-template-columns:1fr}}
.pack-card{border:1px solid var(--borde);border-radius:var(--card-radio);padding:var(--card-pad);background:var(--panel);box-shadow:var(--sombra);display:flex;flex-direction:column}
.pack-card h3{margin:0 0 6px;font-size:18px}
.pack-precio{font-size:26px;font-weight:700;color:var(--titulo);margin:0 0 4px}
.packs-grid .pack-precio small{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--gris)}
.pack-ahorro{margin:2px 0 6px}
.packs-grid .ahorro{white-space:nowrap}
.pack-detalle{font-size:14px;color:var(--tinta);margin:0 0 12px;flex:1}
.pack-cta{margin:0}
.pack-cta .btn-sec{width:100%;text-align:center}
/* rt28: la caja .garantia salió de index.html (garantía fuera, ruling del
   dueño 20-10-2026) junto con su regla; no se sustituye por otro elemento. */

/* Opciones avanzadas del filtro (ítem rt14 #5: segunda pasada de diseño —
   agrupación lógica, aire consistente, hints con tipografía propia) */
.avanzado{border:1px solid var(--borde-ui);border-radius:var(--radio);background:var(--panel);margin:16px 0 4px}
.avanzado summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none}
.avanzado summary::before{content:"+ ";color:var(--azul);font-weight:800}
.avanzado[open] summary::before{content:"– "}
.avanzado-hint{font-weight:400;color:var(--gris);font-size:14px}
.avanzado-cuerpo{padding:4px 16px 16px;border-top:1px solid var(--borde)}
.avanzado-campo{padding:14px 0 2px;margin:0}
.avanzado-campo + .avanzado-campo{border-top:1px solid var(--borde)}
.avanzado-campo .etiqueta{font-weight:600;font-size:15px;display:block;margin-bottom:8px}
.avanzado-cuerpo input[type=number]{
  font:inherit;padding:9px 12px;border:1px solid var(--borde-ui);border-radius:var(--radio);
  width:9em;margin:0 4px 0 0;background:var(--fondo);color:var(--tinta);
}
.avanzado-cuerpo input#montoTecho{width:12em}
.avanzado-cuerpo .unidad{font-size:15px;color:var(--tinta)}
.avanzado-cuerpo small{display:block;font-weight:400;color:var(--gris);font-size:14px;margin-top:6px}

/* Foco visible: todo interactivo conserva outline de 2px (WCAG) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--azul);outline-offset:2px;
}

/* FAQ
   rt29 — cada details es una tarjeta: fondo panel, sombra suave y borde que
   toma el acento azul al hover (en oscuro/HC fondo transparente = look
   anterior; el hover no aplica color nuevo). */
details{border:1px solid var(--borde-ui);border-radius:8px;margin-bottom:10px;padding:0;background:var(--detalle-fondo);box-shadow:var(--sombra-suave);transition:border-color .15s}
details:hover{border-color:var(--detalle-hover-borde)}
/* rt29 — padding summary/cuerpo por tema (premium en claro, histórico en
   oscuro/HC). */
summary{cursor:pointer;padding:var(--detalle-pad);font-weight:600;list-style:none}
summary::before{content:"+ ";color:var(--azul);font-weight:800}
details[open] summary::before{content:"– "}
details p{padding:var(--detalle-p-pad);margin:0;color:var(--tinta);font-size:15.5px}

/* Formulario */
.alta{border-top:2px solid var(--borde)}
.paso{border:none;margin:0;padding:0;scroll-margin-top:72px}
legend{font-weight:700;font-size:18px;margin-bottom:14px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips-mini{margin-top:8px}
.chip{
  border:1px solid var(--borde-ui);background:var(--panel);color:var(--tinta);border-radius:999px;
  padding:10px 16px;font-size:15px;cursor:pointer;min-height:44px;
}
.chip.on{background:var(--azul);color:var(--btn-fg);border-color:var(--azul)}
/* Botones internos del chip seleccionado (rt25 ★ / ✕, estilos rt27a: los
   pinta pintarSeleccionRubros() pero hasta ahora no tenían CSS). La ★ .on
   toma su tinta de --estrella-fg (ámbar/dorado o negra según tema) y solo
   lleva badge donde el tema lo define (--estrella-bg: transparente en
   claro, badge propio en oscuro y alto contraste — ver --estrella-* en los
   bloques de tema; evidencia AA en rt27_capturas/contraste_ev.txt). El ✕
   hereda la tinta del chip con opacidad: sutil y suficiente en los 3
   temas. */
.chip-estrella,.chip-quitar{
  border:none;background:transparent;cursor:pointer;line-height:1;
  font-size:13px;padding:2px 6px;border-radius:999px;color:inherit;
}
.chip-estrella.on{
  background:var(--estrella-bg,transparent);color:var(--estrella-fg);
  font-weight:700;
}
.chip-quitar{opacity:.75}
.chip-quitar:hover{opacity:1}
.lbl{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.lbl input,.lbl select{display:block;margin-top:6px;font-weight:400}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:15px}
.chk input{margin-top:5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--error);font-size:14px;margin:6px 0}
/* rt29 — resumen (volumen en vivo, paso 3 del formulario): tarjeta con
   acento izquierdo azul en claro; en oscuro/HC los vars replican el bloque
   suave anterior. */
.resumen{background:var(--resumen-fondo);border:var(--resumen-bw) solid var(--resumen-borde);border-left:var(--resumen-lw) solid var(--resumen-l);border-radius:8px;padding:14px 18px;font-size:15px;margin-top:16px}
.resumen:empty{display:none}
.exito{background:var(--exito-bg);border:1px solid var(--exito-borde);border-radius:var(--radio);padding:24px;margin-top:20px}
.exito h3{margin-top:0}
code{background:var(--azul-suave);color:var(--tinta);padding:1px 6px;border-radius:5px;font-size:.92em}

/* Footer */
.footer{
  border-top:1px solid var(--borde);margin-top:40px;padding:32px 0;
  font-size:15px;color:var(--pie-tinta);
  background:var(--pie-fondo);
  /* Ancla visual rt23c: el pie navy se extiende a ancho completo como el
     hero. Los <main> usan .wrap; el footer se estira con el mismo truco. */
  border-top:none;
}
.footer a{color:var(--pie-link)}
.footer .mini{color:var(--pie-tinta)}

/* Docs legales */
.doc{max-width:720px}
.doc h1{font-size:30px;margin-bottom:4px}
/* Meta de versión (rt16 #3): nota al pie discreta, no un destacado bajo el
   H1. Tamaño pequeño y color tenue pero AA (ver rt16_capturas/contraste_ev);
   el link al markdown inmutable se conserva. */
.doc .meta{
  color:var(--gris);font-size:13px;margin:40px 0 0;
  border-top:1px solid var(--borde);padding-top:12px;
}
.doc h2{font-size:20px;margin-top:28px}
.doc p,.doc li{font-size:16px}
.doc table{border-collapse:collapse;font-size:15px}
.doc th,.doc td{border:1px solid var(--borde);padding:8px 12px;text-align:left}
.aviso{border:1px dashed var(--gris);border-radius:8px;padding:12px 16px;font-size:14px;color:var(--gris)}
/* Packs: comparación vertical (jerarquía asimétrica, no 3 cards idénticas) */
.packs-lista{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.pack-fila{display:flex;flex-wrap:wrap;gap:4px 28px;align-items:baseline;border:1px solid var(--borde);border-radius:var(--radio);padding:18px 22px;background:var(--panel);box-shadow:var(--sombra-suave)}
.pack-fila.destacada{border:2px solid var(--azul);border-left-width:6px}
.pack-fila h3{margin:0;font-size:20px;flex-basis:100%}
.pack-fila .precio-pack{margin:6px 0 0}
.precio-pack{font-size:30px;font-weight:700;color:var(--azul)}
.precio-pack small{font-size:15px;font-weight:600;color:var(--gris)}
.mensual{font-size:14px;color:var(--gris);margin:6px 0 0}
.pack-fila .pack-detalle{flex-basis:100%;font-size:14.5px;color:var(--tinta);margin:8px 0 0}
/* rt37: estas dos reglas son del layout .pack-fila (packs.html); scopeadas
   para no pisar flex de las .pack-card del grid de index (flex-basis:100%
   en un contenedor column peleaba con el flex:1 de .pack-detalle y desalineaba
   los CTA de las 3 cards). */
.pack-fila .pack-ahorro{flex-basis:100%;font-size:15px;margin:8px 0 0}
.ahorro{display:inline-block;background:var(--exito-bg);color:var(--exito-tinta);border:1px solid var(--exito-borde);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
/* Red team dsh ronda 6 (18-10): verde = ahorro, no genérico. Píldora gris
   para claims neutros ("sin compromiso") y mini gris para verdades que no
   queremos jerarquizar ("mejor precio por mes" del 12m). */
.ahorro.neutro{background:var(--suave);color:var(--gris);border-color:var(--borde)}
.badge-rec{display:inline-block;background:var(--azul);color:var(--btn-fg);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
/* rt46 — "Mejor valor" (pack 12m): verde de éxito, distinto del azul de
   "Recomendado/El más elegido". Contraste en los 3 temas vía --exito-*. */
.badge-valor{display:inline-block;background:var(--exito-tinta);color:#fff;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
.pack-fila .mensual-destacada{font-size:15.5px;color:var(--tinta);font-weight:600}
.pack-fila .pack-cta{flex-basis:100%;margin:10px 0 0}
.check li{margin-bottom:10px}
.tabla-packs{margin-top:24px}

/* Demo honesta: ejemplo estático del correo digest diario */
.demo{margin-top:8px}
.mail{max-width:640px;margin:0 auto;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);overflow:hidden;box-shadow:var(--sombra)}
.mail-bar{background:var(--suave);border-bottom:1px solid var(--borde);padding:10px 16px;font-size:13.5px;color:var(--gris);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mail-cuerpo{padding:18px 20px 6px}
.mail-cuerpo>p{margin:0 0 4px;font-size:15px}
.mail-cuerpo>p.mail-titulo{font-size:20px;font-weight:700;color:var(--tinta);margin-top:10px}
.mail-cuerpo>p.mail-fecha{font-size:13px;color:var(--gris);margin-bottom:4px}
.mail-item{border-top:1px solid var(--borde);padding:14px 0}
.mail-item h3{font-size:17px;margin:0 0 4px}
.mail-item p{margin:4px 0;font-size:14px;color:var(--tinta)}
.mail-compra{font-size:13px}
.mail-btn{display:inline-block;margin-top:8px;background:var(--azul);color:#fff;text-decoration:none;padding:7px 14px;border-radius:4px;font-size:13px;font-weight:700}
.mail-pie{border-top:1px solid var(--borde);background:var(--suave);padding:12px 20px;font-size:13px;color:var(--gris);margin:0}

/* Toggles de tema (ítem rt14 #7): oscuro + alto contraste, opt-in,
   accesibles (aria-pressed, foco visible heredado de arriba). */
.tema-toggle{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.tema-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:7px 14px;
  font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--borde-ui);
  border-radius:999px;background:var(--panel);color:var(--tinta);cursor:pointer}
.tema-btn[aria-pressed="true"]{background:var(--azul);color:var(--btn-fg);border-color:var(--azul)}

/* rt37 — Alternativa A del header (analisis_varios/header_rt37/propuesta.md,
   aprobada por el dueño): botón único "Tema" con menú desplegable de 3
   opciones (Claro/Oscuro/Alto contraste). Los toggles conservan dentro del
   panel sus atributos data-toggle-tema / data-toggle-contraste, sus clases y
   sus hooks (tema.js intacto); el botón "Claro" [data-toggle-claro] lo
   gestiona assets/tema-menu.js apagando el toggle activo vía los handlers de
   tema.js (exclusión mutua rt16 #1 intacta).
   Solo layout: paletas intactas y pares de color ya verificados AA
   (--panel/--tinta/--borde-ui, rt14/rt27). Header de 1 línea nowrap en móvil
   (~56-60px, recupera ~140px del primer viewport que se comía el wrap de 2
   líneas); en desktop el CTA primario del header vuelve a tamaño completo.
   OJO: ningún comentario CSS puede contener la secuencia asterisco-barra
   (cerraría el comentario antes de tiempo). */
.top-row{flex-wrap:nowrap;gap:12px}
.top-acciones{flex-wrap:nowrap;gap:10px;margin-left:auto}
.top-acciones .btn{white-space:nowrap}
.brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tema-menu{position:relative;display:inline-flex}
.tema-abrir{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:7px 14px;
  font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--borde-ui);
  border-radius:999px;background:var(--panel);color:var(--tinta);cursor:pointer;
}
/* Chevron CSS (sin emoji ni SVG): gira al abrir. */
.tema-abrir::after{
  content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-2px);
}
.tema-abrir[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.tema-ico{flex:none}
/* rt40 — header móvil, iterada con crítica externa de diseño
   (rt40_capturas/critica_header_1.txt): el botón "Tema" pasa a ICONO SOL
   (universal para "tema", currentColor heredado de --tinta por tema) y el CTA
   pasa a "Probar gratis" (verbo + beneficio; "3 gratis" quedó críptico). Se
   recupera ~100px de ancho: el brand deja de truncarse ("Alertas de…") y el
   CTA sigue siendo el elemento primario. Desktop intacto (icono + texto
   "Tema" + chevron). Accesible: aria-label completo en el botón y en el CTA
   (los spans visuales quedan sobre-escritos por aria-label). */
.top-acciones .cta-corto{display:none}
@media(max-width:640px){
  .tema-abrir{padding:6px 8px}
  .tema-abrir .tema-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-acciones{gap:12px}
  .top-acciones .btn:not(.btn-ghost){padding:6px 10px;font-size:13px}
  /* rt43 — "Mi Cuenta" compacto en móvil (13px sigue siendo legible y
     conserva su alto táctil 44px por el padding vertical del top-row). */
  .top-link{font-size:13px;padding:0 2px}
  .top-acciones .cta-largo{display:none}
  .top-acciones .cta-corto{display:inline}
  /* rt41 — brand del header en móvil (queja del dueño: "el título no me gusta
     cómo queda posicionado"). La geometría ya estaba centrada (medición
     rt41_capturas/mediciones_before.json: centro Y 28 en brand, botón de tema
     y CTA), pero ópticamente el brand se leía descolgado: su x-height queda
     bajo el centro óptico de las dos formas de 44px y el tracking apretado
     lo hacía ver pequeño al lado de botones con padding generoso. Ajuste
     único (crítica IA rt41_capturas/critica_header_before.txt): misma línea,
     mismos tamaños; solo corrección óptica + aire tipográfico.
     translateY(-1px) en el brand (no en la fila) para no tocar la
     distribución de los botones. Desktop intacto (regla dentro del
     media query de 640px). */
  .top .brand{font-size:16px;letter-spacing:-0.01em;transform:translateY(-1px)}
  /* rt43 — brand a DOS LÍNEAS en móvil: con "Mi Cuenta" en la fila, el brand
     de una línea no cabe completo en 350px útiles (medido: truncaba a
     "Alertas de l…" a 121px) y bajar el font a 13-14px contradice la
     corrección óptica rt41. Dos líneas a 16px ("Alertas de" / "licitaciones")
     caben en ~88px; la fila conserva el alto rt37 de 56-60px (el brand de
     2 líneas ~38px queda bajo el min-height 44px de los botones). Desktop
     sigue en 1 línea con ellipsis (regla fuera de este media query). */
  .top .brand{max-width:88px;white-space:normal;line-height:1.12;overflow:visible}
}
.tema-menu .tema-toggle{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  background:var(--panel);border:1px solid var(--borde-ui);border-radius:var(--radio);
  padding:6px;box-shadow:var(--sombra);min-width:190px;
}
/* El panel cerrado es display:none (el [hidden] del HTML solo). */
.tema-menu .tema-toggle[hidden]{display:none}
.tema-menu .tema-btn{justify-content:flex-start;border-radius:10px;white-space:nowrap}
/* Estado activo con check además del color (WCAG 1.4.1, no-color-solo). */
.tema-menu .tema-btn[aria-pressed="true"]::before{content:"✓";font-weight:800}
@media(min-width:641px){
  /* CTA primario del header a tamaño completo en desktop (propuesta A). */
  .top-acciones .btn:not(.btn-ghost){padding:11px 22px;font-size:16px}
}
@media(max-width:640px){
  /* Solo vertical: el padding horizontal del header no se toca (pixel-idéntico). */
  .top .top-row{padding-top:6px;padding-bottom:6px}
}
@media(max-width:380px){
  .top-acciones{gap:6px}
  .top-acciones .btn{padding:7px 10px;font-size:13px}
  .tema-abrir{padding:7px 10px}
}

/* rt37 — spinners nativos de los inputs numéricos de las opciones avanzadas:
   ocultos (apariencia de texto plano) SIN cambiar type=number: la validación
   (min/max/step), el teclado numérico (inputmode) y la accesibilidad se
   conservan; el valor sigue siendo editable a mano. */
.avanzado-cuerpo input[type=number]{appearance:textfield;-webkit-appearance:textfield}
.avanzado-cuerpo input[type=number]::-webkit-outer-spin-button,
.avanzado-cuerpo input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Respeto a preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  html{scroll-behavior:auto}
}

/* RT39 fase 1 — checkout de suscripción (/suscribir/) y retorno (/gracias/).
   SOLO estilos scoped nuevos (prefijo .susc- / .gracias- / .susc .): las
   paletas y temas existentes no se tocan; todo se apoya en las variables
   CSS ya definidas (:root y bloques oscuro/HC). */
.susc{max-width:640px;margin:0 auto}
.susc-planes{display:flex;flex-direction:column;gap:12px;margin:8px 0 12px}
.susc-plan{position:relative;display:block;cursor:pointer}
.susc-plan input{position:absolute;opacity:0;width:1px;height:1px}
.susc-plan-cuerpo{
  display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--borde-ui);border-radius:var(--card-radio);
  background:var(--panel);padding:var(--card-pad);box-shadow:var(--sombra-suave);
}
/* Estado seleccionado: acento + check accesible (no-color-solo, WCAG 1.4.1). */
.susc-plan input:checked + .susc-plan-cuerpo{
  border-color:var(--acento);
  box-shadow:0 0 0 2px var(--acento), var(--sombra-suave);
}
.susc-plan input:checked + .susc-plan-cuerpo .susc-plan-nombre::after{
  content:" ✓";font-weight:800;color:var(--acento);
}
.susc-plan input:focus-visible + .susc-plan-cuerpo{
  outline:2px solid var(--borde-ui);outline-offset:2px;
}
.susc-plan-nombre{font-size:17px;font-weight:700;color:var(--titulo);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.susc-plan-precio{font-size:22px;font-weight:800;color:var(--tinta)}
.susc-plan-precio small{font-size:14px;font-weight:600;color:var(--acento)}
.susc-plan-detalle{font-size:13.5px;color:var(--gris)}
.susc-resumen{
  background:var(--resumen-fondo);border:1px solid var(--resumen-borde);
  border-left:var(--resumen-lw) solid var(--resumen-l);
  border-radius:var(--radio);padding:12px 16px;font-weight:600;color:var(--tinta);
  margin:0 0 14px;
}
/* Casillas obligatorias del checkout: destacadas con borde (información
   inequívoca y accesible previa al pago, decisor D7). */
.susc .susc-chk-obligatoria{
  border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--panel);padding:12px 14px;margin:10px 0;
}
.gracias h1{margin-bottom:8px}
.gracias-pasos{
  border:1px solid var(--borde);border-radius:var(--card-radio);
  background:var(--panel);box-shadow:var(--sombra);padding:var(--card-pad);
  margin:18px 0;text-align:left;
}
.gracias-pasos h2{font-size:18px;margin:0 0 10px}

/* ================= RT42 =================
   Largo móvil (opciones 1-5, informe rt41_mobile_largo) + extras de paleta
   del tema claro (acento cálido a baja dosis + banda alternada con blanco,
   ambos aprobados pendientes desde rt40) + sección Compra Ágil.
   Regla transversal: solo el tema claro cambia de look; oscuro y alto
   contraste solo reciben las VARIABLES NUEVAS de la sección COT (su
   renderizado anterior es byte-idéntico). */

/* Opción 5 — paddings verticales de secciones en móvil: 48→30px (~62%,
   dentro del rango 60-70% del informe). rt43 — PARIDAD: el recorte aplica
   a los 3 temas (rt42 lo había scoped solo al claro, lo que hacía la
   página ~100px más corta en claro que en oscuro/HC en móvil). Hero, Precio
   (.precio-pad propio) y formulario no se aprietan más allá de esto. */
@media(max-width:640px){
  :root{--seccion-pad:30px;--precio-pad:30px 22px}
  /* El dolor conserva su caja pero afloja el margen exterior (36→24px),
     mismo criterio de aire de la opción 5. */
  .dolor{margin:24px 0}
  /* Gancho COT del hero (rt42): sin margen superior extra (lo fija la
     bajada) y solo 6px bajo, para no empujar el CTA del primer viewport. */
  .hero-cot{margin:0 0 6px}
}

/* rt42 — details pensados para colapsar (opciones 1/3/4 y demo del correo):
   look de expansor, sin caja doble dentro de cards/pasos.
   rt43 — ACORDEÓN EN TODOS LOS TEMAS Y VIEWPORTS (aprobado por el dueño,
   "sin carrusel, alternativa acordeón/tarjetas colapsables"): ya NO se
   abren solos en desktop; el summary con chevron queda siempre visible y
   el detalle expande a 1 toque (antes el colapso era solo móvil y rt42
   los abría por JS en ≥641px). */
.m-colapsa{border:none;background:transparent;box-shadow:none;padding:0}
.m-colapsa>summary{
  position:relative;padding:4px 24px 4px 0;color:var(--azul);
}
/* El expansor usa chevron (gira al abrir), no el "+ " de los details FAQ. */
.m-colapsa>summary::before{content:none}
.m-colapsa>summary::after{
  content:"";position:absolute;right:4px;top:50%;
  width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:translateY(-70%) rotate(45deg);
}
.m-colapsa[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.m-colapsa p{padding:0 0 12px;margin:0}
/* Las cards ya tenían su aire: el párrafo dentro del details no suma. */
.card .m-colapsa p,.pack-mas .pack-detalle{padding:0;margin:0}

/* Opción 1 — condiciones de los packs colapsables (las 3 cards:
   precio/badge/CTA siempre visibles; el detalle legal queda a 1 toque).
   flex:1 conserva la alineación de los CTA al pie en desktop (el details
   cerrado estira igual que abierto: el <p> ya no es hijo flex). */
.pack-mas{flex:1}
.pack-mas>summary{padding:4px 24px 4px 0}
.pack-mas .pack-detalle{flex:none;margin:0}

/* Opción 2 — demo del correo: miniatura real SIEMPRE visible (móvil y
   desktop, los 3 temas) + details "Ver ejemplo completo" colapsado por
   defecto (paridad rt43). El guard .demo>.mail es inerte hoy (el mockup
   completo vive dentro del details) y evita duplicados si se mueve. */
.demo>.mail:not(.mail-mini){display:none}

/* Extras paleta clara (aprobados por el dueño, pendientes desde rt40):
   (a) acento cálido secundario a baja dosis (~10-15% de los acentos):
   píldora del hero (ámbar sobre navy, mismo acento que ya usa el tema
   oscuro; AA ~7:1) y píldora de la sección Compra Ágil (terracota).
   (b) banda alternada con blanco: .banda-alt da ritmo suave entre
   bandas #dce4f1. Todo scoped al claro: los bloques de tema oscuro/HC
   aprobados NO se tocan (guardia byte-idéntica a HEAD en test_rt40_paleta);
   las vars nuevas de la sección COT viven en REGLAS SEPARADAS, solo
   definen variables que antes no existían (ningún color previo cambia). */
.hero .pill{--pill-fg:#f0b429;--pill-borde:#b98a1e}
:root:not([data-tema="oscuro"]):not([data-contraste="alto"]){
  --acento-calido:#9a470c;   /* terracota oscuro: AA 5.6:1 sobre crema,
                                5.0:1 sobre la banda #dce4f1 */
  --acento-calido-suave:#fbeeda;
}
[data-tema="oscuro"]{
  --acento-calido:#f0b429;   /* mismo ámbar que --acento del oscuro */
  --acento-calido-suave:#2a2214;
}
[data-contraste="alto"]{
  --acento-calido:#000000;   /* HC: plano, sin nuevos colores */
  --acento-calido-suave:#ffffff;
}
.cot-pill{color:var(--acento-calido);border-color:var(--acento-calido);
  background:var(--acento-calido-suave)}
:root:not([data-tema="oscuro"]):not([data-contraste="alto"]) .banda-alt{background:var(--panel)}

/* ================= RT43 =================
   Header rediseñado (ruling 22-10 del dueño: "no me gusta que el título
   esté tan al borde y que el botón de prueba esté tan al borde; el header
   puede ser mucho más simple, amigable") + wizard con scroll al paso +
   compactaciones de largo móvil. Paridad: todo lo de este bloque aplica
   por igual a los 3 temas (solo la paleta diffiere). */

/* rt43 — "Mi Cuenta": ENLACE DE TEXTO DISCRETO siempre visible (ruling:
   texto pequeño, jamás botón grande; debe existir en cada página). Vive
   junto al selector de tema, a la izquierda del CTA primario único.
   Contraste AA por tema (--gris/--fondo): claro 4.75:1, oscuro ~9.6:1,
   HC ~7.5:1 (evidencia rt43_capturas/contraste_header.txt). */
.top-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:14px;font-weight:500;color:var(--gris);text-decoration:none;
  white-space:nowrap;
}
.top-link:hover{color:var(--tinta);text-decoration:underline}

/* rt43 — selector de tema junto a Mi Cuenta como icono pequeño con
   indicador de estado (punto que muestra que un tema está activo; dentro
   del panel el activo además lleva ✓ + aria-pressed + fondo acento).
   El dot usa --azul del tema: componente gráfico ≥3:1 en los 3 temas
   (claro 4.6:1 sobre panel, oscuro 5.5:1, HC 8.6:1). */
.tema-abrir{position:relative}
.tema-dot{
  position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;
  background:var(--azul);border:1.5px solid var(--panel);pointer-events:none;
}

/* rt43 — el brand es enlace al inicio en todas las páginas (antes span en
   varias): coherencia con guia/terminos/politica donde ya era <a>. */
a.brand{text-decoration:none}
a.brand:hover{color:var(--azul)}

/* rt43 — tablas comparativas con scroll horizontal en móvil: las tablas de
   packs.html (comparativa de packs) y guia/index.html (tipos de licitación,
   costos) desbordaban el viewport móvil (scrollWidth 462/415px en 390px).
   El wrapper hace scroll interno y conserva el ancho natural de la tabla. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .tabla-scroll table{min-width:max-content}
}

/* rt43 (punto 3) — CTA secundarios de las cards de precio MÁS CHICOS: el
   dueño: "ese botón está muy grande". Se recorta padding/tipografía (el
   primario sólido del pack destacado de packs.html se queda dominante);
   el alto táctil mínimo 44px se conserva. */
.pack-cta .btn-sec{padding:8px 12px;font-size:14px;font-weight:600}
.pack-fila .btn-ghost.btn-sm{padding:6px 12px;font-size:13.5px}

/* rt43 (punto 6) — recorte adicional de largo móvil dentro de lo aprobado
   (solo aire/paddings; sin tocar hero, formulario ni orden de secciones):
   cards de packs más compactas, h2 con menos margen inferior y grilla de
   packs con menos margen exterior. Aplica a los 3 temas (paridad). */
@media(max-width:640px){
  .packs-grid{gap:10px;margin:12px auto 16px}
  .packs-grid .pack-card{padding:14px 16px}
  h2{margin-bottom:14px}
  .precio-esencial li{margin-bottom:6px}
}