/* trevol.si · estilos del sitio (rediseño «La cuenta clara», rama rediseno-usage)
   Base visual: la maqueta oficial del manual de marca (manual/recursos/plataforma/final/sitio.html, versión 2.1),
   con la estructura y el ritmo de los sitios de cobro por uso. Los colores salen de css/trevol-colores.css
   (paleta 2.0.0, sin cambios): aquí solo se usan sus variables; los componentes van con los semánticos --color-*,
   que cambian con el tema claro u oscuro, también dentro de una sección con data-theme.
   Tipografía: Figtree (titulares) e Inter (texto), autohospedadas, licencia SIL OFL 1.1 (fuentes/OFL-*.txt).
   Sin estilos en línea ni recursos de terceros: la CSP de _headers solo permite hojas del mismo origen. */

/* ==========================================================================
   1. Fuentes
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("/fuentes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fuentes/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* Respaldo con métricas ajustadas mientras llegan las fuentes (assets/tipografia/tipografia.md §2.2) */
@font-face {
  font-family: "Inter respaldo";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 106.34%;
  ascent-override: 91.10%;
  descent-override: 22.68%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree respaldo";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 700 800;
  size-adjust: 97.05%;
  ascent-override: 97.89%;
  descent-override: 25.76%;
  line-gap-override: 0%;
}

/* ==========================================================================
   2. Tokens del sitio (solo variables de la paleta)
   ========================================================================== */
:root,
[data-theme="light"] {
  --f-tit: "Figtree", "Figtree respaldo", "Inter", sans-serif;
  --f-txt: "Inter", "Inter respaldo", sans-serif;
  --sitio-acento-texto: var(--trevol-selva);   /* antetítulos en verde (8,33:1 sobre Niebla) */
  --sitio-sombra: 0 0 0 1px rgb(36 39 43 / .07), 0 24px 48px -26px rgb(36 39 43 / .45);
  /* tipografía (escala oficial, 360 → 1280 px) */
  --t-display: clamp(40px, 30.61px + 2.609vw, 64px);
  --t-1: clamp(32px, 25.74px + 1.739vw, 48px);
  --t-2: clamp(30px, 24.52px + 1.522vw, 44px);
  --t-bloque: clamp(26px, 22.87px + 0.870vw, 34px);
  --t-3: clamp(22px, 21.22px + 0.217vw, 24px);
  --t-banda: clamp(40px, 32.17px + 2.174vw, 60px);
  --t-cifra: clamp(32px, 28.87px + 0.870vw, 40px);
  --t-entrada: clamp(18px, 17.22px + 0.217vw, 20px);
  --t-antetitulo: clamp(15px, 14.22px + 0.217vw, 17px);
  /* espacio (escala de 4 px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px;
  --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;
  --seccion: clamp(64px, 38.96px + 6.957vw, 128px);
  --margen: clamp(16px, -2.78px + 5.217vw, 64px);
  --medianil: 24px;
  --contenido: 1200px;
  /* radios (03-sistema/sintesis.md §6.1) */
  --radio-xs: 3px; --radio-sm: 5px; --radio-md: 8px; --radio-lg: 12px;
  --radio-tarjeta: 16px; --radio-medio: 24px; --radio-panel: 32px; --radio-pastilla: 999px;
  /* movimiento */
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 220ms; --dur-4: 300ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
  /* sombras de la maqueta oficial */
  --sitio-sombra-producto: 0 0 0 1px rgb(36 39 43 / .07), 0 30px 60px -28px rgb(36 39 43 / .45);
  --sitio-sombra-aviso: 0 0 0 1px rgb(36 39 43 / .08), 0 22px 44px -20px rgb(36 39 43 / .5);
  --sitio-sombra-cab: 0 0 0 1px var(--color-separador), 0 12px 24px -16px rgb(36 39 43 / .25);
  /* cuadrícula del contador */
  --sitio-cuadricula: var(--trevol-motivo-cuadricula);   /* Bruma, 1,19:1 sobre Blanco */
}
/* Los alias de superficie se declaran también en cada [data-theme] para que sigan al tema de la sección */
:root,
[data-theme] {
  --sitio-fondo: var(--color-fondo-contenido);
  --sitio-panel: var(--color-fondo-ventana);
  --sitio-tarjeta: var(--color-superficie-elevada);
  --sitio-vitrina: var(--color-fondo-ventana);   /* fondo de las vitrinas de producto (Niebla en claro) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sitio-acento-texto: var(--trevol-chispa); /* Chispa solo sobre oscuro */
    --sitio-sombra: 0 0 0 1px rgb(244 245 248 / .08);
    --sitio-sombra-producto: 0 0 0 1px rgb(244 245 248 / .08);
    --sitio-sombra-aviso: 0 0 0 1px rgb(244 245 248 / .08);
    --sitio-sombra-cab: 0 0 0 1px var(--color-separador);
    --sitio-cuadricula: var(--trevol-noche-800);   /* 1,16:1 sobre Noche 900 */
    --sitio-vitrina: var(--trevol-noche-850);      /* en oscuro la vitrina va un paso más clara que la página */
  }
}
[data-theme="dark"] {
  --sitio-acento-texto: var(--trevol-chispa);
  --sitio-sombra: 0 0 0 1px rgb(244 245 248 / .08);
  --sitio-sombra-producto: 0 0 0 1px rgb(244 245 248 / .08);
  --sitio-sombra-aviso: 0 0 0 1px rgb(244 245 248 / .08);
  --sitio-sombra-cab: 0 0 0 1px var(--color-separador);
  --sitio-cuadricula: var(--trevol-noche-800);
  --sitio-vitrina: var(--trevol-noche-850);
}

/* ==========================================================================
   3. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--sitio-fondo);
  color: var(--color-texto);
  font: 400 16px/24px var(--f-txt);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, svg { display: block; }
p { text-wrap: pretty; }
a { color: var(--color-enlace); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; border-radius: 4px; }
.pie :focus-visible, .banda :focus-visible, .precio__banda :focus-visible { outline-color: var(--color-foco-sobre-marca); }
strong { font-weight: 600; }
kbd { font: inherit; }
.codigo { font-feature-settings: "tnum", "zero", "ss02"; }
.num { font-variant-numeric: tabular-nums; }
.sin-salto { white-space: nowrap; }
.solo-lector,
.sin-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* h1 base: lo usan las páginas legales (.legal__cab h1 solo cambia el tamaño) */
h1 { font: 800 var(--t-1)/1.1667 var(--f-tit); letter-spacing: -.015em; text-wrap: balance; }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 10px 16px; border-radius: 8px;
  background: var(--color-accion); color: var(--color-texto-sobre-accion);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

.envoltura { max-width: calc(var(--contenido) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.envoltura--angosta > * { max-width: 800px; }

/* ==========================================================================
   4. Tipografía
   ========================================================================== */
.t-display { font: 800 var(--t-display)/1.1875 var(--f-tit); letter-spacing: -.02em; text-wrap: balance; }
.t-1 { font: 800 var(--t-1)/1.1667 var(--f-tit); letter-spacing: -.015em; text-wrap: balance; }
.t-2 { font: 700 var(--t-2)/1.18 var(--f-tit); letter-spacing: -.016em; text-wrap: balance; }
.t-bloque { font: 700 var(--t-bloque)/1.24 var(--f-tit); letter-spacing: -.012em; text-wrap: balance; }
.t-3 { font: 700 var(--t-3)/1.3333 var(--f-tit); letter-spacing: -.005em; text-wrap: balance; }
.t-4 { font: 700 20px/28px var(--f-tit); text-wrap: balance; }
.t-banda { font: 800 var(--t-banda)/1.15 var(--f-tit); letter-spacing: -.02em; text-wrap: balance; }
.antetitulo, .etiqueta { font: 600 var(--t-antetitulo)/24px var(--f-txt); color: var(--sitio-acento-texto); }
.entrada { font: 400 var(--t-entrada)/1.6 var(--f-txt); color: var(--color-texto-secundario); max-width: 40rem; }
.texto-bloque { font: 400 18px/30px var(--f-txt); }
.nota { font: 400 14px/20px var(--f-txt); color: var(--color-texto-secundario); }
.cifra { font: 700 var(--t-cifra)/1.2 var(--f-txt); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. Íconos (geometría de Lucide, atributos de presentación en el HTML)
   ========================================================================== */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i--16 { width: 16px; height: 16px; stroke-width: 1.5; }
.i--24 { width: 24px; height: 24px; stroke-width: 2; }

/* ==========================================================================
   6. Logotipo: el SVG de la marca; sus colores siguen el tema
   ========================================================================== */
.logo { display: block; color: inherit; border-radius: 6px; flex: none; }
.logo svg { width: 160px; height: auto; }
.logo .trevol-letras { fill: var(--color-logo); }
.logo .trevol-trebol { fill: var(--color-logo-trebol); }

/* ==========================================================================
   7. Botones y enlaces
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
  font: 600 16px/1.2 var(--f-txt); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
}
.boton--primario { background: var(--color-accion); color: var(--color-texto-sobre-accion); }
.boton--primario:hover { background: var(--color-accion-hover); }
.boton--primario:active { background: var(--color-accion-presionada); }
.boton--secundario { background: transparent; color: var(--color-texto); border-color: var(--color-borde-control); }
.boton--secundario:hover { background: var(--color-fila-hover); }
.boton--grande { min-height: 56px; padding: 0 28px; font-size: 18px; }
.boton--sobre-marca { background: var(--trevol-blanco); color: var(--trevol-selva); }
.boton--sobre-marca:hover { background: var(--trevol-niebla); }
.boton--ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.enlace-flecha { color: var(--color-enlace); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.enlace-flecha .i { display: inline-block; vertical-align: -2px; margin-left: 4px; transition: transform var(--dur-2) var(--curva); }
.enlace-flecha:hover .i, .enlace-flecha:focus-visible .i { transform: translateX(2px); }

.lista-chulo { list-style: none; padding: 0; display: grid; gap: 12px; }
.lista-chulo > li { display: flex; gap: 12px; align-items: flex-start; }
.lista-chulo > li > .i { color: var(--color-accion); margin-top: 2px; }

/* Estados de la DIAN y del cobro: ícono y texto, sin fondo ni pastilla */
.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.estado--ok { color: var(--color-exito); }
.estado--error { color: var(--color-error); }
.estado--neutro { color: var(--color-neutro); }
.estado--aviso { color: var(--color-aviso); }

.adjunto {
  display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--radio-xs);
  border: 1px solid var(--color-borde-control); font: 600 14px/20px var(--f-txt); color: var(--color-texto);
}

/* ==========================================================================
   8. Encabezado (compacto por defecto; píldora fija desde 1200 px)
   ========================================================================== */
.cab { position: relative; z-index: 20; background: var(--color-fondo-contenido); border-bottom: 1px solid var(--color-cuadricula); }
.cab__pildora {
  display: flex; align-items: center; gap: 32px; min-height: 72px;
  padding-inline: var(--margen); padding-right: calc(var(--margen) + 56px);
}
.menu { display: none; }
.menu a { color: var(--color-texto); text-decoration: none; font: 500 16px/24px var(--f-txt); }
.menu a:hover { text-decoration: underline; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-seleccion-indicador); text-underline-offset: 6px; }
.cab__acciones { margin-left: auto; display: flex; gap: 12px; }
.menu-movil { display: block; }
.menu-movil__boton {
  position: absolute; top: 14px; right: var(--margen);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px;
  list-style: none; cursor: pointer; color: var(--color-texto);
}
.menu-movil__boton::-webkit-details-marker { display: none; }
.menu-movil__boton:hover { background: var(--color-fila-hover); }
.menu-movil:not([open]) .menu-movil__cerrar,
.menu-movil[open] .menu-movil__abrir { display: none; }
.menu-movil__panel { display: flex; flex-direction: column; padding: 8px var(--margen) 24px; border-top: 1px solid var(--color-cuadricula); }
.menu-movil__panel a:not(.boton) {
  display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--color-separador);
  color: var(--color-texto); text-decoration: none; font: 500 16px/24px var(--f-txt);
}
.menu-movil__panel a:not(.boton):hover { text-decoration: underline; }
.menu-movil__panel a[aria-current="page"] { font-weight: 600; }
.menu-movil__panel .boton { min-height: 52px; margin-top: 16px; }

@media (min-width: 1200px) {
  .cab { position: sticky; top: 12px; margin-top: 12px; padding-inline: var(--margen); background: none; border-bottom: 0; }
  .cab__pildora {
    max-width: 1200px; margin-inline: auto; min-height: 80px; padding-inline: 16px;
    background: var(--color-fondo-contenido); border-radius: 16px; box-shadow: var(--sitio-sombra-cab);
  }
  .menu { display: flex; gap: 24px; }
  .menu-movil { display: none; }
}
@media (max-width: 640px) {
  .cab__pildora { min-height: 64px; gap: 12px; }
  .cab .logo svg { width: 120px; }
  .menu-movil__boton { top: 10px; }
  .cab__ingresar { display: none; }
  .cab__crear { min-height: 44px; padding: 0 16px; font-size: 14px; line-height: 20px; }
}
@media (max-width: 379px) {
  .cab__crear { display: none; }
}

/* ==========================================================================
   9. Secciones, retícula y motivos
   ========================================================================== */
.seccion { padding-block: var(--seccion); }
.seccion--panel { background: var(--sitio-panel); }
.seccion--oscura { background: var(--color-fondo-ventana); color: var(--color-texto); border-block: 1px solid var(--color-separador); }
/* Dos secciones blancas seguidas: un solo espacio de sección entre ellas, no dos */
.seccion:not(.seccion--panel):not(.seccion--oscura) + .seccion:not(.seccion--panel):not(.seccion--oscura) { padding-top: 0; }
section[id] { scroll-margin-top: 16px; }
@media (min-width: 1200px) { section[id] { scroll-margin-top: 112px; } }

.encabezado { max-width: 792px; margin-bottom: 64px; }
.encabezado > * + * { margin-top: 16px; }
.encabezado > .antetitulo + * { margin-top: 12px; }
.encabezado--sin-margen { margin-bottom: 0; }

.rejilla { display: grid; gap: var(--medianil); }
.rejilla--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rejilla--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rejilla--6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cuadricula {
  background-color: var(--color-fondo-contenido);
  background-image: linear-gradient(var(--sitio-cuadricula) 1px, transparent 1px),
                    linear-gradient(90deg, var(--sitio-cuadricula) 1px, transparent 1px);
  background-size: 16px 16px;
}
.hoja { border-radius: 4px 28px 28px 28px; }

/* Bandas de marca: Verde Trevol con el Campo; encima, solo titulares Blanco de 24 px o más y el botón Blanco */
.banda, .precio__banda { background: var(--color-superficie-marca) url("/img/campo-sobre-verde.svg") repeat; background-size: 104.83px 209.66px; color: var(--color-texto-sobre-marca); }
.banda .envoltura { min-height: 240px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 48px; }
.banda .t-banda { color: var(--color-texto-sobre-marca); flex: 1 1 0; min-width: min(100%, 320px); max-width: 860px; }

/* Tarjetas y paneles */
.tarjeta { background: var(--sitio-tarjeta); border: 1px solid var(--color-separador); border-radius: 16px; padding: 32px; }
.panel-producto { position: relative; background: var(--sitio-vitrina); border-radius: 24px; overflow: hidden; }
.aviso-flotante { position: absolute; left: 24px; bottom: 32px; width: 360px; padding: 16px 20px; border-radius: 12px; background: var(--sitio-tarjeta); box-shadow: var(--sitio-sombra-aviso); }
.aviso-flotante .estado { font-size: 16px; line-height: 24px; }
.aviso-flotante__linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--color-texto-secundario); }
.aviso-flotante__linea .num { font: 700 18px/28px var(--f-txt); color: var(--color-texto); font-variant-numeric: tabular-nums; }
figure > figcaption.nota { margin-top: 16px; }

/* ==========================================================================
   10. Home
   ========================================================================== */
/* S1 · Portada apilada */
.heroe { padding-top: 96px; padding-bottom: 64px; }
.heroe__texto .t-display { max-width: 880px; }
.heroe__texto .t-display { margin-top: 12px; }
.enfasis { font-style: normal; color: var(--sitio-acento-texto); }   /* Selva en claro, Chispa en oscuro */
.heroe__precio { margin-top: 16px; max-width: 32em; color: var(--color-texto); }
.heroe__texto .entrada { margin-top: 16px; }
.heroe__micro { margin-top: 12px; }
.heroe__pruebas { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 32px; }
.heroe__comprador { margin-top: 24px; font-size: 14px; line-height: 20px; }
.heroe__figura { margin-top: 64px; }
.panel-producto--heroe { height: 560px; padding: 48px 0 0 48px; }

/* S2 · Hechos */
.seccion-hechos { padding-bottom: 64px; }
.hechos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--color-separador); }
.hechos li { display: flex; gap: 12px; align-items: flex-start; padding: 24px 20px; font: 500 16px/24px var(--f-txt); }
.hechos li:first-child { padding-left: 0; }
.hechos li + li { border-left: 1px solid var(--color-separador); }
.hechos .i { color: var(--color-texto-secundario); margin-top: 2px; }

/* S4 · Así se cobra */
.cobro__tarjeta h3 { margin-bottom: 24px; }
.cobro__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 24px; align-self: end; }
.cobro__cab h3 { margin-bottom: 0; }
.cobro__tarjeta .nota { margin-top: 16px; }
.grafico { width: 100%; height: 220px; overflow: visible; }
.grafico text { font: 400 14px/1 var(--f-txt); fill: var(--color-texto-secundario); }
.grafico .grafico__cifra { font-weight: 600; fill: var(--color-texto); font-variant-numeric: tabular-nums; }
.grafico .base { stroke: var(--color-borde-control); stroke-width: 1; }
.barra--plan { fill: var(--color-borde-control); }
.barra--trevol { fill: var(--color-accion); }
.grafico-marco { border-radius: 12px; padding: 16px 16px 8px; }
/* Las dos tarjetas comparten filas (subgrid): título, gráfico y nota quedan a la misma altura */
.cobro__rejilla { grid-template-rows: auto auto auto; }
.cobro__tarjeta { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cobro__tarjeta > .nota { align-self: start; }

/* S5 · Precio en capas */
.precio__banda { padding: 112px 0 208px; }
.precio__banda .t-2 { color: var(--color-texto-sobre-marca); max-width: 18em; }
.precio__cuerpo { margin-top: -160px; position: relative; }
.precio__fila { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.tarjeta-precio { padding: 48px; box-shadow: var(--sitio-sombra-producto); }
.tarjeta-precio__rotulo { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--f-txt); color: var(--sitio-acento-texto); }
.cifra-bloque { min-height: 176px; padding: 32px; margin-top: 16px; border: 1px solid var(--color-cuadricula); }
.cifra-bloque__unidad { margin-top: 8px; font: 600 18px/28px var(--f-txt); color: var(--color-texto); }
.tarjeta-precio__prepago { margin-top: 24px; color: var(--color-texto-secundario); }
.tarjeta-precio h3 { margin-top: 32px; }
.tarjeta-precio .lista-chulo { margin-top: 16px; }
.tarjeta-precio .boton { margin-top: 32px; }
.tarjeta-precio__enlace { margin-top: 16px; text-align: center; }
.garantias { list-style: none; padding: 0; margin-top: 192px; }
.garantias li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 16px; padding-block: 24px; border-bottom: 1px solid var(--color-separador); }
.garantias li:first-child { padding-top: 0; }
.garantias .i { grid-row: span 2; color: var(--color-texto); margin-top: 2px; }
.garantias p { color: var(--color-texto-secundario); }
.garantias__nota { margin-top: 16px; }
.tiras { margin-top: 48px; display: grid; gap: 48px; }
.tira h3 { margin-bottom: 16px; }
.recargas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.recargas--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.recargas li { padding: 16px; border-radius: 8px; border: 1px solid var(--color-separador); background: var(--sitio-tarjeta); }
.recargas__cifra { display: block; font: 700 20px/28px var(--f-txt); font-variant-numeric: tabular-nums; }
.recargas .nota { display: block; margin-top: 4px; }
.recargas--rotulo-arriba .nota { margin-top: 0; margin-bottom: 4px; }
.tira > .nota { margin-top: 16px; }
.ejemplos-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ejemplos-tira > div { padding: 16px; border-radius: 8px; border: 1px solid var(--color-separador); background: var(--sitio-tarjeta); }
.ejemplos-tira dt { font: 400 14px/20px var(--f-txt); color: var(--color-texto-secundario); }
.ejemplos-tira dd { margin-top: 4px; font: 700 20px/28px var(--f-txt); font-variant-numeric: tabular-nums; }
.tira__enlace { margin-top: 16px; }

/* S6 · Cómo empezar */
.escalera { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.escalera > li:nth-child(2) { margin-top: 48px; }
.escalera > li:nth-child(3) { margin-top: 96px; }
.placa { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--color-superficie-marca); color: var(--color-texto-sobre-marca); font: 700 28px/1 var(--f-tit); position: relative; z-index: 1; }
.paso__texto h3 { margin-top: 24px; }
.paso__texto p:last-child { margin-top: 8px; color: var(--color-texto-secundario); }
.pasos__fila { margin-top: 64px; align-items: center; gap: 48px; }
.pasos__lado h3 + p { margin-top: 8px; color: var(--color-texto-secundario); }
.pasos__cierre { margin-top: 24px; }
.panel-producto--pasos { height: 360px; padding: 48px 0 0 48px; }
.panel-producto--pasos .mock { border-radius: 12px 0 0 0; }

/* S7 · Bento */
.bento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.bento__derecha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bento__derecha > :first-child { grid-column: 1 / -1; }
.bento__tarjeta { display: flex; flex-direction: column; border: 0; box-shadow: var(--sitio-sombra); overflow: hidden; }
.bento__tarjeta h3 { margin-top: 8px; }
.bento__tarjeta > p:not(.antetitulo) { margin-top: 8px; color: var(--color-texto-secundario); }
.bento__vitrina { margin: 24px -32px -32px; padding: 24px 0 0 24px; background: var(--sitio-panel); border-radius: 0 0 16px 16px; overflow: hidden; height: 240px; }
.bento__a .bento__vitrina { height: auto; min-height: 360px; flex: 1 1 360px; }
.bento__a .bento__vitrina { display: flex; flex-direction: column; }
.bento__a .bento__vitrina .mock { width: 520px; flex: 1 0 auto; margin-bottom: -40px; }   /* llena la vitrina y se corta por abajo */
.bento__vitrina .mock { border-radius: 12px 0 0 0; }
.bento__pie { margin-top: 16px; }

/* S8 · Desde ContaPyme */
.panel-contapyme { background: var(--sitio-vitrina); border-radius: 32px; padding: 64px; overflow: hidden; }
.panel-contapyme__arriba { align-items: start; gap: 48px; }
.panel-contapyme__arriba .encabezado { margin-bottom: 0; }
.contapyme__figura { margin-right: -64px; }
.contapyme__figura .mock { border-radius: 12px 0 0 12px; }
.renglones { list-style: none; padding: 0; margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.renglones li { border-top: 1px solid var(--color-separador); padding-top: 16px; color: var(--color-texto-secundario); }
.renglones strong { display: block; color: var(--color-texto); font-weight: 600; }

/* S9 / P8 · Preguntas */
.faqs { max-width: 48rem; }
details.faq { border-top: 1px solid var(--color-separador); }
details.faq:last-of-type { border-bottom: 1px solid var(--color-separador); }
details.faq > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 8px 16px 0; font: 700 20px/28px var(--f-tit); cursor: pointer; transition: background-color var(--dur-2) var(--curva); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary:hover { background: var(--color-fila-hover); }
details.faq > summary .i { transition: transform var(--dur-3) var(--curva); color: var(--color-texto-secundario); }
details.faq[open] > summary .i { transform: rotate(180deg); }
details.faq > div { padding: 0 8px 24px 0; max-width: 66ch; color: var(--color-texto-secundario); }
.faqs__enlace { margin-top: 32px; }

/* S11 · ¿Recibiste una factura? */
.tarjeta .i--24 { color: var(--color-texto); }
.tarjeta-comprador h3 { margin-top: 16px; }
.tarjeta-comprador p { margin-top: 8px; color: var(--color-texto-secundario); }
.tarjeta-comprador p strong { color: var(--color-texto); }

/* S12 · Contacto */
.contacto-rejilla { align-items: start; }
.contacto-rejilla .encabezado { margin-bottom: 0; }
.contacto { display: grid; }
.contacto > div { padding-block: 20px; border-top: 1px solid var(--color-separador); }
.contacto > div:last-child { border-bottom: 1px solid var(--color-separador); }
.contacto dt { font: 600 14px/20px var(--f-txt); color: var(--color-texto-secundario); }
.contacto dd { margin-top: 4px; font: 500 18px/28px var(--f-txt); }

/* ==========================================================================
   11. /precios
   ========================================================================== */
.precios-heroe { padding-top: 96px; padding-bottom: var(--seccion); }
.precios-heroe__rejilla { align-items: center; gap: 48px; }
.precios-heroe .t-display { margin-top: 12px; }
.precios-heroe .entrada { margin-top: 24px; }
.tarjeta-precio--compacta { padding: 32px; }
.tarjeta-precio--compacta .boton { margin-top: 24px; }

/* P2 · Calculadora sin JS */
.calc-tarjeta { border-radius: 24px; padding: 48px; }
.calc { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc legend { padding: 0; }
.calc__opciones { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.calc__opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.calc__opciones label {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radio-pastilla); border: 1px solid var(--color-borde-control);
  background: var(--color-fondo-contenido); color: var(--color-texto);
  font: 600 16px/24px var(--f-txt); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--dur-2) var(--curva);
}
.calc__opciones label .i { display: none; }
.calc__opciones label:hover { background: var(--color-fila-hover); }
.calc__opciones input:checked + label { background: var(--color-seleccion); border-color: var(--color-seleccion); color: var(--color-texto-seleccion); }
.calc__opciones input:checked + label .i { display: inline; }
.calc__opciones input:focus-visible + label { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.calc__res { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; margin-top: 32px; }
.calc:has(#v10:checked) #r10, .calc:has(#v25:checked) #r25, .calc:has(#v50:checked) #r50,
.calc:has(#v100:checked) #r100, .calc:has(#v300:checked) #r300, .calc:has(#v1000:checked) #r1000 { display: grid; }
@supports not selector(:has(*)) {
  .calc__res { display: grid; margin-top: 32px; }
  .calc__titulo-respaldo { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-weight: 700; margin-bottom: 8px; }
}
.calc__cifra { border-radius: 12px; padding: 32px; border: 1px solid var(--color-cuadricula); align-self: start; }
.calc__unidad { font: 600 18px/28px var(--f-txt); }
.calc__cifra .nota { margin-top: 8px; }
.calc__desglose { display: grid; }
.calc__desglose > div { padding-block: 12px; border-bottom: 1px solid var(--color-cuadricula); }
.calc__desglose > div:first-child { padding-top: 0; }
.calc__desglose dt { font: 600 14px/20px var(--f-txt); color: var(--color-texto-secundario); }
.calc__desglose dd { margin-top: 4px; }
.calc__desglose dd.num { font: 700 20px/28px var(--f-txt); font-variant-numeric: tabular-nums; }
.calc__pie { margin-top: 24px; display: grid; gap: 4px; }
@media (forced-colors: active) { .calc__opciones input:checked + label { border: 2px solid Highlight; } }

/* Tablas de datos */
.tabla-envoltura { position: relative; margin-top: 16px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.tabla th { text-align: left; vertical-align: bottom; font: 600 14px/20px var(--f-txt); color: var(--color-texto-encabezado); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-separador); }
.tabla td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-cuadricula); vertical-align: top; min-height: 48px; }
.tabla .num, .tabla th.der { text-align: right; padding-right: 0; padding-left: 16px; }
.tabla td.num + td.num, .tabla th.der + th.der { padding-left: 24px; }
.tabla td:last-child, .tabla th:last-child { padding-right: 0; }
.tabla td .nota { display: block; margin-top: 2px; }
.ejemplos__tabla { max-width: 56rem; }
.ejemplos__equivalencias { margin-top: 48px; }

/* P4 · Narrativa del saldo */
.narrativa__rejilla { align-items: start; gap: 48px; }
.narrativa__intro { position: sticky; top: 32px; align-self: start; }
@media (min-width: 1200px) { .narrativa__intro { top: 112px; } }
.narrativa__intro .encabezado { margin-bottom: 0; }
.narrativa { list-style: none; padding: 0; display: grid; gap: 24px; }
.narrativa > li { background: var(--sitio-panel); border-radius: 24px; padding: 32px; }
.narrativa h3 { margin-top: 8px; }
.narrativa > li > p:not(.antetitulo):not(.estado) { margin-top: 12px; color: var(--color-texto-secundario); }
.narrativa .estado { margin-top: 16px; }
.mov { list-style: none; margin-top: 24px; border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.mov > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: baseline; }
.mov__fecha { grid-row: 2; grid-column: 1; }
.mov > li + li { padding-top: 12px; border-top: 1px solid var(--color-cuadricula); }
.mov__fecha { font-size: 14px; line-height: 20px; color: var(--color-texto-secundario); font-variant-numeric: tabular-nums; }
.mov__que { font-weight: 500; }
.mov__que .nota { display: block; font-weight: 400; }
.mov__monto, .mov__saldo { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mov__saldo { color: var(--color-texto-secundario); font-weight: 400; }
.saldo__cuenta { margin-top: 64px; }
.saldo__cuenta > h3 { margin-bottom: 24px; }
.panel-producto--saldo { padding: 48px 0 0 48px; }
.panel-producto--saldo .mock { width: calc(100% + 72px); padding-right: 120px; border-radius: 12px 0 0 0; }   /* el corte cae en el aire, no en las cifras */
.cuadre { margin-top: 24px; display: inline-block; border-radius: 12px; padding: 16px 24px; }
.cuadre__linea { font: 600 18px/28px var(--f-txt); font-variant-numeric: tabular-nums; }
.cuadre .nota { margin-top: 4px; }

/* P5 · Si se acaba el saldo */
.sin-saldo__columnas { margin-top: 0; }
.sin-saldo__columnas > div { border-top: 1px solid var(--color-separador); padding-top: 24px; }
.sin-saldo__columnas .i--24 { color: var(--color-texto); }
.sin-saldo__columnas h3 { margin-top: 16px; }
.sin-saldo__columnas p { margin-top: 8px; color: var(--color-texto-secundario); }
.sin-saldo__figura { margin-top: 48px; }
.sin-saldo__rejilla { align-items: start; }
.sin-saldo__rejilla .mock { height: 100%; }
.mock--correos { padding: 24px; }
.mock--correos .mock__bandeja-titulo { margin-top: 0; }

/* P6 · Recargas */
.recargas-rejilla { align-items: center; gap: 48px; }
.recargas-rejilla .lista-chulo { margin-top: 32px; }
.recargas-rejilla .lista-chulo strong { font-weight: 600; }
.panel-producto--recarga { height: 400px; padding: 48px 0 0 48px; }

/* P7 · Comparar */
.comparar-rejilla { align-items: start; gap: 48px; }
.comparar__caja h3 { margin-bottom: 16px; }
.comparar__formula { font: 600 18px/28px var(--f-txt); }
.comparar__caja p + p { margin-top: 16px; color: var(--color-texto-secundario); }

/* 404 */
.no-encontrada { padding-block: 96px 128px; }
.no-encontrada h1 { margin-top: 12px; }
.no-encontrada .entrada { margin-top: 16px; }

/* ==========================================================================
   12. Mockups de producto (recrean pantallas reales de app.trevol.si)
   ========================================================================== */
.mock { background: var(--color-fondo-contenido); border-radius: 12px; box-shadow: var(--sitio-sombra-producto); font: 400 14px/20px var(--f-txt); color: var(--color-texto); text-align: left; }
.mock p { margin: 0; }
.mock--app { display: grid; grid-template-columns: 88px minmax(0, 1fr); width: 1160px; min-height: 620px; overflow: hidden; }
.mock__riel { background: var(--color-fondo-ventana); border-right: 1px solid var(--color-separador); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; border-radius: 12px 0 0 12px; }
.mock__riel-logo { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; }
.mock__riel-logo svg { width: 28px; height: 28px; }
.mock__riel-logo .trevol-isotipo { fill: var(--color-logo); }
.mock__riel-item { display: grid; justify-items: center; gap: 4px; width: 88px; min-height: 64px; font: 500 14px/16px var(--f-txt); color: var(--color-texto-secundario); text-align: center; }
.mock__riel-circ { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.mock__riel-circ--borde { border: 1px solid var(--color-borde-control); }
.mock__riel-item.es-activo { color: var(--color-texto); }
.mock__riel-item.es-activo .mock__riel-circ { background: var(--color-seleccion); color: var(--color-texto-seleccion); }
.mock__riel-saldo { margin-top: auto; }
.mock__cab { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--color-cuadricula); }
.mock__empresa { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__buscador { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--color-fondo-ventana); color: var(--color-texto-secundario); }
.mock__buscador kbd { margin-left: auto; font: 500 14px/20px var(--f-txt); color: var(--color-texto-secundario); }
.mock__saldo { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radio-pastilla); border: 1px solid var(--color-separador); font-weight: 600; }
.mock__contenido { padding: 24px; }
.mock__h1 { font: 700 24px/32px var(--f-tit); }
.mock__h2 { margin-top: 16px; font: 700 18px/28px var(--f-tit); }
.mock__fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mock__boton { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-borde-control); font-weight: 600; white-space: nowrap; flex: none; }
.mock__boton--primario { border-color: var(--color-accion); background: var(--color-accion); color: var(--color-texto-sobre-accion); }
.mock-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mock-tabla th { text-align: left; font: 600 14px/20px var(--f-txt); color: var(--color-texto-secundario); padding: 8px 12px; border-bottom: 1px solid var(--color-cuadricula); white-space: nowrap; }
.mock-tabla td { padding: 12px; border-bottom: 1px solid var(--color-cuadricula); white-space: nowrap; }
.mock-tabla th:first-child, .mock-tabla td:first-child { padding-left: 0; }
.mock .der, .mock-tabla .der { text-align: right; }
.mock .fuerte { font-weight: 600; }
.mock__tarjeta { margin-top: 16px; border: 1px solid var(--color-separador); border-radius: 12px; padding: 16px; }
.mock__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
.mock__dl dt { color: var(--color-texto-secundario); }
.mock__dl dd { min-width: 0; }

/* M2 · pasos de vinculación */
.mock--pasos { width: 720px; padding: 24px; min-height: 400px; }
.mock__insignia { display: inline-flex; margin-left: 12px; vertical-align: 3px; font: 600 14px/20px var(--f-txt); }
.mock-pasos { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 4px; }
.mock-pasos li { display: flex; align-items: center; gap: 12px; min-height: 40px; font: 500 16px/24px var(--f-txt); }
.mock-pasos .i { color: var(--color-exito); }

/* M3 · detalle de factura */
.mock--detalle { padding: 24px 72px 24px 24px; width: 440px; }
.mock--detalle .mock__dl { margin-top: 8px; }
.mock__exito { display: flex; align-items: center; gap: 8px; font: 700 20px/28px var(--f-tit); color: var(--color-exito); }
.mock__exito .i { width: 24px; height: 24px; }
.mock__sub { margin-top: 4px; color: var(--color-texto-secundario); }
.mock--detalle .mock__boton { margin-top: 16px; }
.mock__desglose { margin-top: 16px; display: grid; gap: 6px; }
.mock__desglose div { display: flex; justify-content: space-between; gap: 16px; }
.mock__desglose dt { color: var(--color-texto-secundario); }
.mock__desglose dd { font-variant-numeric: tabular-nums; }
.mock__desglose .mock__total { padding-top: 8px; border-top: 1px solid var(--color-cuadricula); font-weight: 700; }
.mock__desglose .mock__total dt { color: var(--color-texto); }
.mock__acciones { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.mock--detalle .mock__acciones .mock__boton { margin-top: 0; }
.mock__entrega { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; }
.mock__entrega .i { margin-top: 2px; color: var(--color-exito); }

/* M4 · correo al comprador */
.mock--correo { padding: 24px; width: 760px; min-height: 260px; }
.mock--correo .mock__dl { padding-bottom: 16px; border-bottom: 1px solid var(--color-cuadricula); }
.mock__cuerpo-correo { margin-top: 16px; display: grid; gap: 4px; }
.mock__adjunto { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--color-separador); border-radius: 8px; font-weight: 600; }

/* M5 · facturas traídas de la DIAN; M6 · aviso de numeración */
.mock--lista { padding: 24px 76px 24px 24px; width: 380px; min-height: 280px; }
.mock--bandeja { padding: 16px 72px 16px 24px; width: 360px; min-height: 260px; }
.mock__correo-fila { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--color-cuadricula); }
.mock__correo-fila .i { margin-top: 2px; color: var(--color-texto-secundario); }
.mock__correo-fila .fuerte { white-space: normal; }
.mock__correo-fila .nota { grid-column: 2; }
.mock__seccion-titulo { margin-top: 16px; font: 700 16px/24px var(--f-tit); }
.mock__listo { color: var(--sitio-acento-texto); font-weight: 600; }
.mock__linea { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-cuadricula); }

/* M7 · ContaPyme */
.mock--contapyme { padding: 24px 104px 24px 24px; width: 740px; }   /* el corte del panel cae en el aire, no en las columnas */
.mock--contapyme .mock__h2:first-of-type { margin-top: 8px; }
.mock__fila-titulo--inicio { justify-content: flex-start; }

/* M8 · saldo y movimientos (tabla real) */
.mock--saldo { padding: 24px; }
.mock__franja { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--color-cuadricula); }
.mock__franja .cifra { margin-top: 4px; }
.mock__franja-etiqueta { font-weight: 600; color: var(--color-texto-secundario); }
.mock__franja-lado { display: grid; gap: 8px; color: var(--color-texto-secundario); }
.mock__franja-lado .fuerte { color: var(--color-texto); }
.mov-tabla { margin-top: 8px; min-width: 600px; font-size: 14px; line-height: 20px; }
.mov-tabla caption { text-align: left; font: 700 18px/28px var(--f-tit); color: var(--color-texto); padding: 16px 0 8px; }
.mov-tabla td, .mov-tabla th { white-space: normal; }
.mov-tabla .nota { display: block; }
.mov-tabla .num { white-space: nowrap; }
.mov-tabla td.mov-tabla__fecha { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-texto-secundario); }

/* M9 · avisos de saldo */
.mock--avisos { padding: 24px; display: grid; gap: 12px; }
.mock__barra { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-left: 3px solid var(--color-aviso); background: var(--color-fondo-contenido); border-radius: 0 8px 8px 0; box-shadow: 0 0 0 1px var(--color-cuadricula); }
.mock__barra--error { border-left-color: var(--color-error); }
.mock__barra .i { flex: none; }
.mock__barra--aviso > .i { color: var(--color-aviso); }
.mock__barra--error > .i { color: var(--color-error); }
.mock__barra p { flex: 1; min-width: 0; }
.mock__bandeja-titulo { margin-top: 8px; font: 700 16px/24px var(--f-tit); }

/* M10 · caja «Recargar» */
.mock--recarga { padding: 24px; width: 500px; }
.mock__opciones { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mock__opcion { padding: 12px 16px; border: 1px solid var(--color-separador); border-radius: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mock__opcion .nota { display: block; font-weight: 400; }
.mock__opcion--marcada { border: 2px solid var(--color-seleccion-indicador); padding: 11px 15px; }
.mock__pagar { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--color-cuadricula); }
.mock__seguro { margin-top: 12px; color: var(--color-texto-secundario); }

/* ==========================================================================
   13. Documentos legales (sin cambios de contenido)
   ========================================================================== */
.legal { padding: 64px 0 96px; }
.legal .envoltura--angosta > * { max-width: 38rem; }   /* unos 70 caracteres por línea */
.legal__cab { padding-bottom: 28px; border-bottom: 1px solid var(--color-separador); }
.legal__cab h1 { margin-top: 12px; font-size: 44px; }
.legal__fecha { margin-top: 12px; font-size: 15px; color: var(--color-texto-secundario); }
.legal__indice { margin-top: 32px; padding: 24px 28px; border-radius: 14px; background: var(--sitio-panel); }
.legal__indice h2 { font: 600 16px/24px var(--f-txt); }
.legal__indice ol { margin-top: 10px; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.9; }
.legal__cuerpo { margin-top: 12px; }
.legal__cuerpo > p, .legal section > p { margin-top: 16px; }
.legal section { padding-top: 36px; }
.legal section h2 { font: 700 24px/1.3 var(--f-tit); letter-spacing: -.01em; }
.legal section h3 { margin-top: 22px; font: 600 18px/1.4 var(--f-txt); }
.legal ul, .legal ol.lista { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; }
.legal p, .legal li { line-height: 1.7; }
.legal .destacado { margin-top: 24px; padding: 20px 24px; border-left: 4px solid var(--color-seleccion-indicador); border-radius: 0 12px 12px 0; background: var(--sitio-panel); }
.ficha { margin-top: 14px; padding: 20px 24px; border-radius: 12px; border: 1px solid var(--color-separador); display: grid; gap: 4px; }
.ficha dt { font-weight: 600; margin-top: 8px; }
.ficha dt:first-child { margin-top: 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--color-separador); }
.legal th { font-weight: 600; color: var(--color-texto-encabezado); }

/* ==========================================================================
   14. Pie (Selva, con trevol.si en Chispa)
   ========================================================================== */
.pie { padding: 96px 0 32px; background: var(--color-superficie-marca-profunda); color: var(--trevol-blanco); }
.pie a { color: var(--trevol-blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__arriba { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pie .logo svg { width: 160px; }
.pie .logo .trevol-letras, .pie .logo .trevol-trebol { fill: var(--trevol-blanco); }
.pie__dominio { margin-top: 24px; font: 700 26px/32px var(--f-tit); letter-spacing: -.01em; color: var(--trevol-chispa); }
.pie__correo a { display: inline-block; padding-block: 10px; }
.pie h2 { font: 600 16px/24px var(--f-txt); color: var(--trevol-blanco); }
.pie ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 4px; }
.pie ul a { display: inline-block; padding-block: 10px; font: 400 16px/24px var(--f-txt); }
.pie__abajo { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--trevol-motivo-trama-sobre-selva); display: grid; gap: 8px; font: 400 14px/20px var(--f-txt); color: var(--trevol-blanco); }
.pie__abajo a { text-decoration: underline; }

/* ==========================================================================
   15. Tableta (≤ 960 px)
   ========================================================================== */
@media (max-width: 960px) {
  .rejilla--5-7, .rejilla--7-5, .rejilla--6-6, .rejilla--8-4, .rejilla--3 { grid-template-columns: minmax(0, 1fr); }
  .hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hechos li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hechos li:nth-child(n+3) { border-top: 1px solid var(--color-separador); }
  .precio__fila { grid-template-columns: minmax(0, 1fr); }
  .garantias { margin-top: 0; }
  .recargas--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escalera, .bento, .bento__derecha { grid-template-columns: minmax(0, 1fr); }
  .escalera { gap: 32px; }
  .escalera > li:nth-child(n) { margin-top: 0; }
  .escalera > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .escalera > li { position: relative; }
  .escalera > li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -32px; width: 2px; background: var(--color-separador); }
  .paso__texto h3 { margin-top: 12px; }
  .bento__a .bento__vitrina { flex: none; }
  .panel-contapyme__arriba { gap: 32px; }
  .contapyme__figura { margin-right: -64px; }
  .renglones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .narrativa__intro { position: static; }
  .calc__res { grid-template-columns: minmax(0, 1fr); }
  .ejemplos-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cobro__tarjeta { grid-row: auto; display: block; }
  .pasos__fila { gap: 32px; }
  .pie__arriba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}

/* ==========================================================================
   16. Teléfono (≤ 640 px)
   ========================================================================== */
@media (max-width: 640px) {
  .encabezado { margin-bottom: 48px; }
  .texto-bloque { font-size: 17px; line-height: 27px; }
  .botones { flex-direction: column; }
  .botones .boton { width: 100%; min-height: 52px; }
  .tarjeta { padding: 24px; }
  .rejilla--2x2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .heroe { padding-top: 40px; }
  .heroe__pruebas { flex-direction: column; }
  .panel-producto--heroe { height: 480px; padding: 16px 0 0 16px; }
  .aviso-flotante { left: 16px; right: 16px; bottom: 16px; width: auto; }

  .hechos { grid-template-columns: minmax(0, 1fr); }
  .hechos li { padding-left: 0; padding-right: 0; }
  .hechos li + li { border-left: 0; border-top: 1px solid var(--color-separador); }

  .banda .envoltura { min-height: 176px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .banda .boton { width: 100%; }

  .precio__banda { padding: 64px 0 112px; }
  .precio__cuerpo { margin-top: -80px; }
  .tarjeta-precio { padding: 24px; }
  .cifra-bloque { padding: 32px 16px; }
  .recargas, .recargas--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ejemplos-tira { gap: 12px; }
  .grafico .grafico__mes { display: none; }
  .grafico-marco { padding: 12px 24px 4px; }   /* las cifras de los extremos no tocan el borde */

  .panel-producto--pasos { height: 372px; padding: 16px 0 0 16px; }
  .mock--pasos { width: auto; padding: 16px; }

  .bento__vitrina { margin: 24px -24px -24px; padding: 16px 0 0 16px; height: 200px; }
  .bento__a .bento__vitrina { min-height: 200px; height: 200px; }
  .bento__a .bento__vitrina .mock { width: 400px; }

  .panel-contapyme { border-radius: 24px; padding: 24px; }
  .contapyme__figura { margin-right: -24px; }
  .renglones { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }

  details.faq > summary { font-size: 18px; line-height: 26px; }

  .precios-heroe { padding-top: 40px; }
  .calc-tarjeta { padding: 24px; }
  .calc__opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__opciones label { padding: 0 8px; }
  .calc__cifra { padding: 32px 16px; }

  .mov { padding: 12px; }
  .mov > li { grid-template-columns: minmax(0, 1fr) auto; }
  .mov__saldo { display: none; }

  /* Tablas de datos apiladas: cada fila es un bloque, con el caso arriba y el importe en negrita */
  .tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabla--apilable, .tabla--apilable tbody { display: block; }
  .tabla--apilable tr { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--color-cuadricula); }
  .tabla--apilable td { display: block; min-height: 0; padding: 0; border: 0; text-align: left; }
  .tabla--apilable td:first-child { font-weight: 600; }
  .tabla--apilable td:first-child .nota { font-weight: 400; }
  .tabla--apilable td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--color-texto-secundario); font-weight: 400; }
  .tabla--apilable td.num { padding: 0; text-align: left; font-weight: 700; }
  .panel-producto--saldo { padding: 16px 0 0 16px; }
  .panel-producto--saldo .mock { width: auto; padding-right: 16px; }
  .cuadre { display: block; padding: 16px; }

  .panel-producto--recarga { height: 384px; padding: 16px 0 0 16px; }
  .mock--recarga { width: auto; }

  /* Mockups: en el teléfono se recortan, no se reducen */
  .mock__riel, .mock__buscador, .mock-ocultar-movil { display: none; }
  .mock--app { grid-template-columns: minmax(0, 1fr); width: auto; min-height: 0; }
  .mock__cab { padding: 0 16px; }
  .mock__contenido { padding: 16px; }
  .mock-tabla td { white-space: normal; }
  .mock-tabla th, .mock-tabla td { padding-inline: 8px; }
  .mock-tabla th:last-child, .mock-tabla td:last-child { padding-right: 0; }
  .mock-tabla .estado { white-space: nowrap; }
  .mock--correo { width: 520px; padding: 16px; }
  .mock--contapyme { width: 400px; padding: 16px; }
  .mock--detalle { width: 400px; padding: 16px 88px 16px 16px; }
  .mock--saldo, .mock--avisos { padding: 16px; }
  .mock__franja { grid-template-columns: minmax(0, 1fr); }
  .mock__barra { flex-wrap: wrap; }

  .contacto dd { font-size: 17px; }
  .legal { padding: 40px 0 64px; }
  .legal__cab h1 { font-size: 34px; }
  .legal__indice ol { columns: 1; }
  .legal section h2 { font-size: 21px; }

  .pie { padding: 64px 0 32px; }
  .pie .logo svg { width: 120px; }
  .pie__arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .pie__marca, .pie__legal { grid-column: 1 / -1; }
}

/* ==========================================================================
   17. Preferencias del sistema
   ========================================================================== */
@media (prefers-contrast: more) {
  .cuadricula { background-image: none; }
  .banda, .precio__banda { background-image: none; }
}
[data-contrast="more"] .cuadricula, [data-contrast="more"] .banda, [data-contrast="more"] .precio__banda { background-image: none; }
@media (forced-colors: active) {
  .cuadricula, .banda, .precio__banda { background-image: none; }
  .tarjeta, .cab__pildora, .aviso-flotante, .panel-producto, .hoja, .recargas li, .mock { border: 1px solid CanvasText; }
  .logo .trevol-letras, .logo .trevol-trebol, .pie .logo .trevol-letras, .pie .logo .trevol-trebol { fill: CanvasText; }
  .boton { border-color: ButtonText; }
  .placa { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
}