/* ═══════════════════════════════════════════════════════════════════════════
   Ticuenta — sitio web público
   ---------------------------------------------------------------------------
   El sistema visual SIGUE al de los dos programas (`apps/web/app/globals.css`
   del facturador y la cabecera de `contabilidad-cr.html`), para que quien entre
   aquí y luego abra el programa reconozca la misma casa: el azul institucional
   #003DA5, las tarjetas de borde suave, los badges pastel y la tipografía del
   sistema.

   La diferencia con los programas es el AIRE. Una pantalla de trabajo es densa
   a propósito —el contador compara cifras—; una página de venta se lee de pie,
   en un celular, por alguien que todavía no sabe qué es esto. De ahí los
   tamaños mayores y los espaciados generosos.

   No hay build ni dependencias: es CSS que el navegador entiende tal cual.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ 0. LA TIPOGRAFÍA DE LA MARCA ══════════════════════════════════

   Manrope, servida desde este mismo sitio y no desde Google: la política de
   privacidad promete que el sitio no carga recursos de terceros, y pedirle la
   fuente a Google le entregaría la IP de cada visitante.

   Es un archivo VARIABLE: un solo «.woff2» por subconjunto cubre del peso 200
   al 800, y por eso el «font-weight» del @font-face es un rango. El archivo
   «latin-ext» no sobra: el colón (₡, U+20A1) vive en ese rango.

   «font-display: swap» enseña el texto con la fuente del sistema mientras
   llega Manrope, en vez de dejar la página en blanco. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fuentes/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fuentes/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────────────────────────── 1. Fichas de color ─────────────────────────── */

:root {
  /* El cobalto del manual de marca: el mismo del logo y del ícono. Sobre
     blanco da 7,63:1, así que sirve para texto y para botón con tinta
     blanca. Los tres derivados salen de él. */
  --azul:        #1E4BB8;
  --azul-osc:    #173A8F;
  --azul-clr:    #E9EFFB;
  --azul-borde:  #C6D6F5;

  /* ── La escala de espaciado. Es la única fuente de verdad para los
        márgenes y los huecos del sitio: si algo necesita aire, sale de aquí,
        no de un número inventado en el momento. Progresión ×1,5 aproximada,
        que es la que se lee como intencionada y no como azar.

        Los valores en «em» son para el texto corrido, donde el aire debe
        crecer con el tamaño de letra; los de «px», para la maqueta. ── */
  --e-0:  4px;    /* pegado: rótulo sobre su dato          */
  --e-1:  8px;
  --e-2:  12px;   /* = .mt-s                                */
  --e-3:  18px;
  --e-4:  24px;   /* = .mt-m                                */
  --e-5:  32px;
  --e-6:  40px;   /* = .mt-l                                */
  --e-7:  56px;

  /* Ritmo del texto corrido, en em para que escale con la letra. */
  --t-parrafo:      1.15em;   /* entre dos párrafos                     */
  --t-tras-titulo:   .7em;    /* después de un título: menos, va junto  */
  --t-bloque:       1.5em;    /* antes de una caja, lista o tabla       */
  --t-antes-h2:     2.2em;    /* abre sección                           */
  --t-antes-h3:     1.9em;
  --t-separador:    2.4em;    /* alrededor de un <hr>                   */

  /* La tinta que va encima del azul de marca. En claro, blanco. En oscuro el
     azul se aclara para leerse sobre fondo negro, y entonces el blanco encima
     queda deslavado: ahí la tinta correcta es oscura. */
  --sobre-azul:  #ffffff;

  /* ── Superficie de la PROMOCIÓN. Tiene que distinguirse de dos cosas a la
     vez: del texto del artículo y del resto de tarjetas del sitio, que van
     sobre «--papel». Por eso es una superficie oscura, en modo claro y en
     modo oscuro: el registro cambia de golpe y se lee «esto es de ellos».
     El botón va en azul claro con tinta oscura, que es lo único que da
     contraste suficiente encima. ── */
  --promo-fondo:  #101a2e;
  --promo-tinta:  #eef2fb;
  --promo-suave:  #a7b4d2;
  --promo-borde:  #1b2947;
  --promo-acento: #7fabf8;
  /* El botón va en VERDE. Sobre el azul noche del bloque destaca más que el
     azul de marca —que es el color de todos los demás botones del sitio— y
     deja claro que este es el botón de la promoción, no uno de navegación. */
  --promo-boton:  #43c07a;
  --promo-boton-hover: #6ad297;
  --promo-boton-tinta: #04220f;

  /* El verde de marca (#189A6C) es el del check y sirve para superficies y
     estados, pero como TEXTO sobre blanco se queda en 3,57:1 y no pasa. Por
     eso el token de texto es el mismo verde del chip del manual, #187A57,
     que da 5,30. El de marca vive en «--verde-marca», para rellenos. */
  --verde:       #187A57;
  --verde-marca: #189A6C;
  --verde-clr:   #E1F3EA;
  --rojo:        #b00020;
  /* Mismo caso en el ámbar: el de marca (#C08A2D) es 3,04 sobre blanco. El
     token de texto es el del chip, #9A6E1F. */
  --ambar:       #9A6E1F;
  --ambar-marca: #C08A2D;
  --ambar-clr:   #FBEEDC;
  --ambar-borde: #F0DBB4;

  --tinta:       #1E2A32;
  --suave:       #626C75;
  --tenue:       #667079;
  --papel:       #ffffff;
  --fondo:       #F5F7F8;
  --borde:       #DFE3E6;
  --borde-tenue: #EDEFF1;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-full: 999px;

  --sombra:    0 1px 2px rgba(16, 24, 60, .04), 0 1px 3px rgba(16, 24, 60, .06);
  --sombra-md: 0 4px 12px rgba(16, 24, 60, .07), 0 2px 4px rgba(16, 24, 60, .04);
  --sombra-lg: 0 12px 32px rgba(16, 24, 60, .10);

  --fuente: 'Manrope', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ancho: 1120px;
  --vel: 160ms ease;
}

/* El navegador del usuario manda. Los mismos papeles, en oscuro. */
/* ── Tema. Hay tres estados: sin elegir (manda el sistema), «claro» elegido a
   mano y «oscuro» elegido a mano. Por eso las mismas variables aparecen dos
   veces: una bajo la preferencia del sistema —anulada si el visitante eligió
   claro— y otra bajo la elección explícita. Es la única forma de que el botón
   pueda ganarle al sistema en las dos direcciones. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* El cobalto no se puede usar tal cual sobre fondo oscuro: se aclara
       hasta 6,6:1 conservando el tono de marca. */
    --azul:        #7BA1F2;
    --azul-osc:    #9BB8F6;
    --azul-clr:    #16233D;
    --azul-borde:  #2A3E68;
    --sobre-azul:  #0c1424;
    /* En modo oscuro la página ya es oscura: la promoción sube un escalón
       para seguir separándose del fondo en vez de fundirse con él. */
    --promo-fondo:  #202b40;
    --promo-tinta:  #f1f4fb;
    --promo-suave:  #b0bcd4;
    --promo-borde:  #33415e;

    /* Este verde SÍ lo da el manual para fondos oscuros: 7,56:1 sobre el
       papel oscuro. */
    --verde:       #2FC48D;
    --verde-marca: #2FC48D;
    --verde-clr:   #102E22;
    --rojo:        #ff7b8f;
    --ambar:       #E0B45F;
    --ambar-marca: #C08A2D;
    --ambar-clr:   #2E2614;
    --ambar-borde: #47391B;

    --tinta:       #E8ECEE;
    --suave:       #A3ADB5;
    --tenue:       #8B959D;
    --papel:       #191D25;
    --fondo:       #14171C;
    --borde:       #2B3240;
    --borde-tenue: #232935;

    --sombra:    0 1px 2px rgba(0, 0, 0, .3);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, .35);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-tema="oscuro"] {
    /* El cobalto no se puede usar tal cual sobre fondo oscuro: se aclara
       hasta 6,6:1 conservando el tono de marca. */
    --azul:        #7BA1F2;
    --azul-osc:    #9BB8F6;
    --azul-clr:    #16233D;
    --azul-borde:  #2A3E68;
    --sobre-azul:  #0c1424;
    /* En modo oscuro la página ya es oscura: la promoción sube un escalón
       para seguir separándose del fondo en vez de fundirse con él. */
    --promo-fondo:  #202b40;
    --promo-tinta:  #f1f4fb;
    --promo-suave:  #b0bcd4;
    --promo-borde:  #33415e;

    /* Este verde SÍ lo da el manual para fondos oscuros: 7,56:1 sobre el
       papel oscuro. */
    --verde:       #2FC48D;
    --verde-marca: #2FC48D;
    --verde-clr:   #102E22;
    --rojo:        #ff7b8f;
    --ambar:       #E0B45F;
    --ambar-marca: #C08A2D;
    --ambar-clr:   #2E2614;
    --ambar-borde: #47391B;

    --tinta:       #E8ECEE;
    --suave:       #A3ADB5;
    --tenue:       #8B959D;
    --papel:       #191D25;
    --fondo:       #14171C;
    --borde:       #2B3240;
    --borde-tenue: #232935;

    --sombra:    0 1px 2px rgba(0, 0, 0, .3);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, .35);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, .45);
}
/* Que los controles del navegador —campos, barras, menús— sigan el tema. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } }
:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }

/* ───────────────────────────── 2. Base ────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--azul); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }

/* ── La regla que evita el desbordamiento horizontal en el celular ────────
   Un elemento de rejilla o de caja flexible tiene `min-width: auto`: no se
   encoge por debajo del ancho de su contenido. Un `<select>` con una opción
   larga, un nombre sin espacios o una cifra que no parte ensanchan su columna
   y sacan la página entera de la pantalla —y entonces TODO se desplaza, no solo
   el culpable—. Se corrige en el sitio donde nace, no tapándolo con overflow. */
.rejilla > *, .segmento > *, .herramienta > *, .suscripcion > *,
.portada-doble > *, .disposicion-articulo > *, .entradas > *,
.entrada-destacada > *, .campos-pareja > *, .formulario > * { min-width: 0; }

.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; max-width: 100%; }
@media (min-width: 700px) { .contenedor { padding: 0 24px; } }

/* Texto solo para lector de pantalla. */
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────── 3. Cabecera ────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 62px;
}
@media (min-width: 900px) { .cabecera .contenedor { gap: var(--e-4); min-height: 64px; } }

/* ── La marca ─────────────────────────────────────────────────────────────

   El logo es un archivo, no texto con una fuente: el manual de marca prohíbe
   recrear el wordmark escribiendo «Ticuenta», porque las letras van trazadas
   y el punto de la i es el check.

   Hay dos versiones oficiales y ninguna sirve para las dos caras: la clara
   —tinta cobalto— es para fondos claros y la oscura —tinta blanca— para
   fondos oscuros. Como el sitio tiene tres estados de tema (claro, oscuro y
   «lo que diga el sistema»), se cargan las dos y se enseña la que toca.

   OJO CON EL ALTO: el archivo trae el área de respeto DENTRO del lienzo —el
   dibujo ocupa el 69 % del alto— así que el «height» del CSS no es el tamaño
   del wordmark. A 26 px la tinta quedaba en 18 px, por debajo del mínimo de
   24 px que fija el manual. Con 38 px la tinta mide unos 26. Si algún día se
   cambia este número, la cuenta es: alto del CSS × 0,69 = tinta visible. */
.marca { display: flex; align-items: center; flex: none; }
.marca:hover { text-decoration: none; }

.marca-logo { display: block; width: auto; height: 38px; }
.marca-logo-oscuro { display: none; }

/* Tema oscuro por preferencia del sistema, salvo que se haya pedido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-logo-claro  { display: none; }
  :root:not([data-tema="claro"]) .marca-logo-oscuro { display: block; }
}
/* Y el interruptor manda sobre las dos. */
:root[data-tema="oscuro"] .marca-logo-claro  { display: none; }
:root[data-tema="oscuro"] .marca-logo-oscuro { display: block; }
:root[data-tema="claro"]  .marca-logo-claro  { display: block; }
:root[data-tema="claro"]  .marca-logo-oscuro { display: none; }

/* En el pie el logo va un poco más grande. El fondo del pie es «--papel»,
   que cambia con el tema, así que sigue las mismas reglas de arriba: no se
   fuerza ninguna versión. */
.pie .marca-logo { height: 44px; }

/* En pantallas angostas convive con el botón del menú: se le baja un punto
   para que las dos cosas quepan sin apretarse. */
@media (max-width: 420px) { .cabecera .marca-logo { height: 34px; } }

/* ── El menú ──────────────────────────────────────────────────────────────
   En el celular es un desplegable de verdad, no una fila que se sale de la
   pantalla y hay que adivinar que se arrastra. A partir de 900 px vuelve a
   ser la fila horizontal.

   Se abre con una casilla de verificación escondida y su etiqueta: **ni una
   línea de JavaScript**, y funciona con teclado porque la casilla sigue
   siendo enfocable. */

.abre-menu { position: absolute; opacity: 0; width: 1px; height: 1px; }

.boton-menu {
  margin-left: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 9px 14px; min-height: 42px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--papel); color: var(--tinta);
  font-size: .92rem; font-weight: 600;
  transition: border-color var(--vel), background var(--vel);
}
.boton-menu:hover { border-color: var(--azul); color: var(--azul); }
.abre-menu:focus-visible + .boton-menu { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Las tres rayas, dibujadas con bordes. */
.boton-menu .rayas { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.boton-menu .rayas::before, .boton-menu .rayas::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform var(--vel);
}
.boton-menu .rayas::before { top: -5px; }
.boton-menu .rayas::after  { top: 5px; }
.abre-menu:checked + .boton-menu .rayas { background: transparent; }
.abre-menu:checked + .boton-menu .rayas::before { transform: translateY(5px) rotate(45deg); }
.abre-menu:checked + .boton-menu .rayas::after  { transform: translateY(-5px) rotate(-45deg); }
.boton-menu .cerrar { display: none; }
.abre-menu:checked + .boton-menu .abrir { display: none; }
.abre-menu:checked + .boton-menu .cerrar { display: inline; }

.menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 8px 18px 16px;
  background: var(--papel); border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra-md);
}
.abre-menu:checked ~ .menu { display: grid; gap: 2px; }

.menu a {
  padding: 12px; border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 500; color: var(--suave);
  transition: background var(--vel), color var(--vel);
}
.menu a:hover { background: var(--azul-clr); color: var(--azul); text-decoration: none; }
.menu a[aria-current="page"] { color: var(--azul); font-weight: 600; background: var(--azul-clr); }

/* El menú desplegado, con «Entrar» y «Empezar gratis», necesita 1.200 px:
   por debajo (tabletas incluidas) se queda el botón del menú y el de
   empezar, que es lo que importa. */
@media (min-width: 1200px) {
  .boton-menu { display: none; }
  .menu {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
    position: static; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .menu a { padding: 7px 11px; font-size: .92rem; white-space: nowrap; }
  .menu a[aria-current="page"] { background: none; }
}

/* ── Las dos puertas del programa ─────────────────────────────────────────

   «Empezar gratis» va siempre a la vista, también en el teléfono: es el
   botón que más vale del sitio y no puede esconderse detrás del menú. En
   el teléfono se pone entre el logo y el botón del menú; en escritorio, al
   final de todo, separado del menú.

   «Entrar» es para quien ya es cliente, que suele llegar con el programa en
   favoritos: no compite con el botón. Es un renglón más del menú en el
   teléfono y, en escritorio, un enlace de texto con un filete que lo separa
   de las secciones del sitio. Solo se dibuja cuando existe la dirección. */

.cabecera .boton-cabecera {
  order: 1; margin-left: auto;
  padding: 9px 14px; min-height: 40px;
  font-size: .9rem; white-space: nowrap;
}
.boton-menu { order: 2; margin-left: 0; }

@media (max-width: 379px) {
  /* En los teléfonos más estrechos todo se aprieta un punto y el botón del
     menú se queda con las tres rayas solas: la casilla ya dice «Abrir el
     menú» al lector de pantalla. Medido: cabe en 320 px con 6 px de aire. */
  .cabecera .contenedor { gap: 8px; }
  .cabecera .marca-logo { height: 30px; }
  .boton-menu { padding: 9px 11px; }
  .boton-menu .abrir, .abre-menu:checked + .boton-menu .cerrar { display: none; }
  .cabecera .boton-cabecera { padding: 9px 11px; font-size: .84rem; }
}

.menu .menu-entrar { color: var(--tinta); font-weight: 600; border-top: 1px solid var(--borde); margin-top: 6px; border-radius: 0 0 var(--r-sm) var(--r-sm); }

@media (min-width: 1200px) {
  /* Todo el renglón —logo, siete secciones, Entrar y el botón— cabe en los
     1.072 px útiles del contenedor. El menú ocupa lo que sobra y reparte el
     aire a los dos lados de las secciones. El interruptor del tema no va
     aquí: vive en el pie. */
  .cabecera .contenedor { gap: var(--e-3); }
  .menu { flex: 1; margin-left: 0; }
  .menu > a:first-child { margin-left: auto; }
  .cabecera .boton-cabecera { order: 0; margin-left: 0; }
  .menu .menu-entrar {
    border-top: 0; margin-top: 0;
    margin-left: auto; padding-left: 14px;
    border-left: 1px solid var(--borde); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
}

/* ───────────────────────────── 4. Secciones ───────────────────────────────── */

.seccion { padding: 48px 0; }
.seccion-alt { background: var(--papel); border-block: 1px solid var(--borde); }
.seccion-ajustada { padding: 36px 0; }

/* El mismo relleno en escritorio que en el teléfono. Con 72 arriba y 72
   abajo, entre dos secciones quedaban 144 px de nada y las páginas de una
   columna se veían como un agujero. */
@media (min-width: 760px) {
  .seccion-ajustada { padding: 48px 0; }
}

.rotulo {
  display: inline-block; margin-bottom: var(--e-2);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul);
}

.titular {
  font-size: clamp(1.55rem, 5.4vw, 2.35rem);
  max-width: 26ch;
}
@media (min-width: 760px) { .titular { max-width: 22ch; } }
.titular-centrado { margin-inline: auto; text-align: center; max-width: 24ch; }

.entradilla {
  margin-top: var(--e-3); max-width: 62ch;
  font-size: 1.08rem; color: var(--suave);
}
.entradilla-centrada { margin-inline: auto; text-align: center; }

.encabezado-seccion { margin-bottom: var(--e-5); }
@media (min-width: 760px) { .encabezado-seccion { margin-bottom: 44px; } }

/* ───────────────────────────── 5. Portada ─────────────────────────────────── */

.portada {
  position: relative; overflow: hidden;
  padding: 44px 0 52px;
  background:
    radial-gradient(900px 420px at 15% -10%, var(--azul-clr), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, color-mix(in srgb, var(--verde-clr) 60%, transparent), transparent 70%);
  border-bottom: 1px solid var(--borde);
}
.portada h1 {
  font-size: clamp(1.85rem, 6vw, 3.4rem);
  max-width: 20ch;
  letter-spacing: -.035em;
}
.portada .entradilla { font-size: 1.08rem; max-width: 58ch; }
@media (min-width: 760px) {
  .portada { padding: 84px 0 76px; }
  .portada .entradilla { font-size: 1.18rem; }
}

/* En el celular los botones ocupan el ancho entero: son el destino del pulgar,
   no un adorno al lado del texto. */
.portada-acciones { display: grid; gap: var(--e-1); margin-top: var(--e-4); }
@media (min-width: 560px) {
  .portada-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
}

.portada-datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-4);
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid var(--borde);
}
@media (min-width: 760px) {
  .portada-datos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin-top: 52px; padding-top: 28px; }
}
.dato strong {
  display: block; font-size: 1.5rem; font-weight: 700; color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.dato span { font-size: .88rem; color: var(--suave); }

/* ───────────────────────────── 6. Botones ─────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; gap: var(--e-1);
  justify-content: center;
  padding: 13px 22px; min-height: 46px;
  border: 1px solid var(--azul); border-radius: var(--r);
  background: var(--azul); color: var(--sobre-azul);
  font-family: inherit; font-size: .98rem; font-weight: 600; cursor: pointer;
  /* Un botón nunca va subrayado: dentro de un artículo, la regla de enlace
     le metía el subrayado y parecía un enlace con fondo. */
  text-decoration: none;
  transition: background var(--vel), border-color var(--vel), transform var(--vel), box-shadow var(--vel);
}
.boton:hover, .boton:focus-visible { text-decoration: none; }
.boton:hover {
  background: var(--azul-osc); border-color: var(--azul-osc);
  text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-md);
}
.boton svg { width: 17px; height: 17px; }

.boton-secundario {
  background: var(--papel); color: var(--tinta); border-color: var(--borde);
}
.boton-secundario:hover { background: var(--fondo); border-color: var(--azul); color: var(--azul); }

.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.enlace-flecha svg { width: 15px; height: 15px; transition: transform var(--vel); }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* ───────────────────────────── 7. Rejillas y tarjetas ─────────────────────── */

.rejilla { display: grid; gap: var(--e-3); }
/* El «min(…, 100%)» no es adorno: sin él, un «minmax(320px, …)» obliga a la
   columna a medir 320 px aunque el contenedor mida menos, y la página entera
   se desborda. Pasaba en /hospedaje a 320 px de ancho: 338 de scroll para 320
   de pantalla, por las tarjetas de Smoobu y Airbnb. */
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr)); }

.tarjeta {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--sombra);
  transition: border-color var(--vel), box-shadow var(--vel), transform var(--vel);
}
@media (min-width: 700px) { .tarjeta { padding: 26px; } }
.tarjeta h3 { font-size: 1.1rem; margin-bottom: var(--e-1); }
.tarjeta p { color: var(--suave); font-size: .95rem; }

a.tarjeta { display: block; color: inherit; }
a.tarjeta:hover {
  text-decoration: none; border-color: var(--azul-borde);
  box-shadow: var(--sombra-md); transform: translateY(-2px);
}

.icono {
  width: 40px; height: 40px; border-radius: var(--r); margin-bottom: var(--e-3);
  background: var(--azul-clr); color: var(--azul);
  display: grid; place-items: center;
}
.icono svg { width: 20px; height: 20px; }
.icono-verde { background: var(--verde-clr); color: var(--verde); }

/* Las dos tarjetas grandes de producto de la portada. */
.producto {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-lg);
  background: var(--papel); border: 1px solid var(--borde); box-shadow: var(--sombra);
  transition: border-color var(--vel), box-shadow var(--vel), transform var(--vel);
}
.producto:hover { border-color: var(--azul-borde); box-shadow: var(--sombra-lg); transform: translateY(-3px); }
@media (min-width: 700px) { .producto { padding: 32px; } }
.producto h3 { font-size: 1.3rem; margin-bottom: var(--e-1); }
.producto > p { color: var(--suave); }
.producto .lista { margin: var(--e-4) 0 var(--e-4); }
.producto .pie-tarjeta { margin-top: auto; }

/* ───────────────────────────── 8. Listas ──────────────────────────────────── */

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.lista li {
  position: relative; padding-left: 28px;
  font-size: .95rem; color: var(--suave);
}
.lista li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--verde-clr);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 30%, transparent);
}
/* La palomita, dibujada con dos bordes de una caja girada: sin imagen y sin
   fuente de iconos. La caja tiene que ser MÁS ALTA QUE ANCHA (5 × 9) para que
   se lea como un visto; antes era de 5 × 2,5 con bordes de 2 px, así que los
   bordes se comían la caja y salía un manchón. */
.lista li::after {
  content: ""; position: absolute;
  left: 6.5px; top: calc(.34em + 3.5px);
  width: 5px; height: 9px;
  border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: rotate(45deg);
}
.lista strong { color: var(--tinta); font-weight: 600; }

.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.lista-simple li { font-size: .95rem; color: var(--suave); padding-left: 18px; position: relative; }
.lista-simple li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: var(--r-full); background: var(--azul-borde);
}

/* ───────────────────────────── 9. Insignias y avisos ──────────────────────── */

.insignia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .76rem; font-weight: 600; line-height: 1.5;
  background: var(--azul-clr); color: var(--azul);
  border: 1px solid var(--azul-borde);
}
.insignia-verde { background: var(--verde-clr); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 25%, transparent); }
.insignia-ambar { background: var(--ambar-clr); color: var(--ambar); border-color: var(--ambar-borde); }
.insignia-neutra { background: var(--fondo); color: var(--suave); border-color: var(--borde); }

.aviso {
  display: flex; gap: var(--e-2); align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r);
  background: var(--ambar-clr); border: 1px solid var(--ambar-borde);
  color: var(--tinta); font-size: .93rem;
}
.aviso svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ambar); }
.aviso > div > strong:first-child { display: block; margin-bottom: 2px; }

.nota {
  padding: 18px 20px; border-left: 3px solid var(--azul); border-radius: 0 var(--r) var(--r) 0;
  background: var(--azul-clr); font-size: .93rem;
}

/* ───────────────────────────── 10. Tablas ─────────────────────────────────── */

/* ── Tablas ────────────────────────────────────────────────────────────────
   **En el celular una tabla no es una tabla: es una lista de tarjetas.**
   Una comparación de tres columnas en 375 px deja la tercera fuera de la
   pantalla, y esa suele ser justo la que vende — el lector ni se entera de que
   existe, porque nadie adivina que hay que arrastrar de lado.

   Así que la forma BASE es la tarjeta: cada fila se apila, y el rótulo de cada
   columna se imprime encima de su dato (sale del `data-rotulo`, que se genera
   a partir del `<thead>`). A partir de 720 px vuelve la tabla de siempre.

   Sigue siendo un `<table>` de verdad en el HTML: los buscadores la leen como
   tabla y quien use lector de pantalla también. Solo cambia cómo se dibuja.

   EXCEPCIÓN: `.tabla-comparar`, la de los planes. Ahí la comparación ES el
   contenido —el lector quiere ver los tres precios uno al lado del otro— y en
   tarjetas se pierde. Se queda horizontal a cualquier ancho, con la primera
   columna fija y sombra en el borde para que se vea que hay más de lado. */

.tabla-envoltorio { border: 0; background: none; border-radius: 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }

table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody { display: grid; gap: var(--e-2); }

table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody tr {
  display: block;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 16px 18px;
}

table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody th {
  display: block; text-align: left; padding: 0 0 12px;
  font-size: 1.02rem; font-weight: 700; color: var(--tinta); border: 0;
  letter-spacing: -.01em;
}
table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody td { display: block; padding: 0; border: 0; color: var(--suave); }
table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody td + td { margin-top: var(--e-2); }

/* El rótulo de la columna, encima del dato. También encima del título de la
   tarjeta (la primera celda): «1.º, 2.º y 3.º» no dice nada sin «Año de
   actividad» arriba. */
table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody th[data-rotulo]::before,
table:not(.hoja-tabla):not(.asiento):not(.tabla-comparar) tbody td[data-rotulo]::before {
  content: attr(data-rotulo);
  display: block; margin-bottom: 3px;
  font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
/* En la fila destacada de una comparación, el rótulo va en verde: es el lado
   bueno y conviene que se distinga de un vistazo. */
tbody td[data-rotulo^="Con Ticuenta"]::before,
tbody td[data-rotulo^="Ticuenta"]::before,
tbody td[data-rotulo^="Con "]::before { color: var(--verde); }

.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 720px) {
  .tabla-envoltorio {
    overflow-x: auto; border: 1px solid var(--borde);
    border-radius: var(--r-lg); background: var(--papel);
  }
  table { min-width: 520px; }

  thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  thead th {
    text-align: left; padding: 14px 18px;
    font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--azul); background: var(--azul-clr);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
  }

  tbody { display: table-row-group; gap: 0; }
  tbody tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; }
  tbody th {
    display: table-cell; padding: 14px 18px; font-size: .93rem; font-weight: 600;
    border-bottom: 1px solid var(--borde-tenue); vertical-align: top;
  }
  tbody td {
    display: table-cell; padding: 14px 18px;
    border-bottom: 1px solid var(--borde-tenue); vertical-align: top;
  }
  tbody td + td { margin-top: 0; }
  tbody th[data-rotulo]::before, tbody td[data-rotulo]::before { display: none; }
  tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
}

/* ───────────────────────────── 11. Planes ─────────────────────────────────── */

.plan {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--sombra);
}
.plan-destacado {
  border-color: var(--azul); box-shadow: var(--sombra-lg);
  position: relative;
}
.plan h3 { font-size: 1.12rem; }
.plan-para { margin-top: 4px; font-size: .88rem; color: var(--tenue); }
.plan-precio { margin: var(--e-3) 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-precio b {
  font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.plan-precio span { font-size: .9rem; color: var(--tenue); }
.plan-nota { font-size: .84rem; color: var(--tenue); }
.plan .lista { margin: var(--e-4) 0 var(--e-4); }
.plan .pie-tarjeta { margin-top: auto; }

/* ───────────────────────────── 12. Preguntas ──────────────────────────────── */

.pregunta {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 4px 20px; margin-bottom: var(--e-2);
  transition: border-color var(--vel);
}
.pregunta[open] { border-color: var(--azul-borde); }
.pregunta summary {
  cursor: pointer; list-style: none;
  padding: 16px 32px 16px 0; position: relative;
  font-weight: 600; font-size: 1rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; position: absolute; right: 4px; top: 1.42em;
  width: 8px; height: 8px;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(45deg); transition: transform var(--vel);
}
.pregunta[open] summary::after { transform: rotate(-135deg); }
.pregunta-cuerpo { padding: 0 0 18px; color: var(--suave); font-size: .95rem; display: grid; gap: var(--e-2); }

/* ───────────────────────────── 13. Formulario ─────────────────────────────── */

.formulario { display: grid; gap: var(--e-3); }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .89rem; font-weight: 600; }
.campo .pista { font-size: .82rem; color: var(--tenue); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: .96rem; color: var(--tinta);
  padding: 11px 13px; border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--papel);
  transition: border-color var(--vel), box-shadow var(--vel);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 15%, transparent);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campos-pareja { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ───────────────────────────── 14. Franja de cierre ───────────────────────── */

/* La franja azul a toda anchura se retiró: un bloque de color saturado con el
   texto centrado se lee como un banner publicitario, y encima obligaba a un
   botón blanco que era el único del sitio con ese estilo. Ahora TODOS los
   bloques de promoción —los de las páginas y los de los artículos— usan
   «.caja-cta», que está más abajo. Un solo formato, una sola decisión. */

/* ───────────────────────────── 15. Pie ────────────────────────────────────── */

/* El pie SIEMPRE va separado de lo que tiene encima. Antes dependía de que la
   última sección de cada página trajera su propio relleno inferior, y en los
   artículos —que terminan en el índice lateral— no lo traía: el pie quedaba
   pegado al último renglón del texto. */
.pie {
  margin-top: var(--e-7);
  background: var(--papel); border-top: 1px solid var(--borde);
  padding: var(--e-6) 0 var(--e-4);
}
@media (min-width: 760px) { .pie { padding: var(--e-7) 0 var(--e-5); } }
.pie-rejilla { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) {
  .pie-rejilla { gap: var(--e-5); grid-template-columns: minmax(190px, 1.3fr) repeat(4, minmax(112px, 1fr)); }
}
.pie-rejilla p { font-size: .9rem; color: var(--suave); margin-top: var(--e-2); max-width: 34ch; }
.pie h4 {
  font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: var(--e-2);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pie ul a { font-size: .92rem; color: var(--suave); }
.pie ul a:hover { color: var(--azul); }
.pie-legal {
  margin-top: var(--e-6); padding-top: 22px; border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); justify-content: space-between;
  align-items: center;
  font-size: .85rem; color: var(--tenue);
}
/* El botón del tema vive aquí, no en la cabecera: es una preferencia, no
   una acción del sitio, y arriba estorbaba. */
.pie-legal .boton-tema { font-size: .82rem; padding: 6px 10px; }

/* ───────────────────────────── 16. Utilidades ─────────────────────────────── */

.centrado { text-align: center; }
.pila { display: grid; gap: var(--e-2); }
.fila { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; }
/* Utilidades de la maqueta. Leen la escala: cambiar el valor aquí arriba
   cambia el sitio entero, que es de lo que se trata. */
.mt-s { margin-top: var(--e-2); }
.mt-m { margin-top: var(--e-4); }
.mt-l { margin-top: var(--e-6); }
.mt-xl { margin-top: var(--e-7); }
.texto-suave { color: var(--suave); }
.texto-pequeno { font-size: .88rem; }
.mono { font-family: var(--mono); font-size: .9em; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEGUNDA PARTE — lo que pide un sitio de producto de verdad
   ---------------------------------------------------------------------------
   Todo lo de aquí abajo salió de mirar cómo están construidos Xero,
   FreshBooks, Zoho Books y Alegra Costa Rica: la maqueta del programa en la
   portada, la banda de confianza, el segmentado por audiencia, y sobre todo
   el aparato de contenido —blog, artículo, índice, glosario— que es de donde
   sale el tráfico de Google y de los buscadores con IA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── 17. Maqueta del programa ──────────────────────────────────────
   Un dibujo del programa hecho con HTML y CSS, no una captura. Pesa nada, se
   ve nítido en cualquier pantalla y no envejece cuando cambia una pantalla.
   Reproduce el sistema visual real: barra azul, lateral blanco, tabla densa. */

.maqueta {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--borde); background: var(--papel);
  box-shadow: var(--sombra-lg);
  font-size: .78rem; line-height: 1.45;
  user-select: none;
}
.maqueta-marco {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.maqueta-marco i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--borde); }
.maqueta-url {
  margin-left: 8px; padding: 3px 12px; border-radius: var(--r-full);
  background: var(--papel); border: 1px solid var(--borde);
  font-size: .7rem; color: var(--tenue); font-family: var(--mono);
}
.maqueta-barra {
  display: flex; align-items: center; gap: var(--e-1);
  padding: 9px 14px; background: var(--azul); color: #fff; font-weight: 600;
}
.maqueta-barra .m-amb {
  margin-left: auto; padding: 2px 9px; border-radius: 5px; font-size: .68rem; font-weight: 600;
  background: rgba(255, 220, 130, .22); border: 1px solid rgba(255, 220, 130, .5);
}
.maqueta-cuerpo { display: grid; grid-template-columns: 1fr; min-height: 0; }
.maqueta-lateral { display: none; border-right: 1px solid var(--borde); padding: 12px 0; background: var(--papel); }
.maqueta-lateral b {
  display: block; padding: 8px 14px 5px;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}
.maqueta-lateral span {
  display: block; padding: 6px 14px; color: var(--suave); font-size: .76rem;
  border-left: 2px solid transparent;
}
.maqueta-lateral span.on {
  background: var(--azul-clr); color: var(--azul); font-weight: 600; border-left-color: var(--azul);
}
.maqueta-panel { padding: 16px; background: var(--fondo); display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.maqueta-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
.maqueta-ficha {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r); padding: 10px 12px;
}
.maqueta-ficha em {
  display: block; font-style: normal; font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--azul); font-weight: 700;
}
.maqueta-ficha strong { display: block; margin-top: 3px; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.maqueta-tabla { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; }
.maqueta-tabla div {
  display: grid; grid-template-columns: 1.5fr 1.1fr .9fr .9fr; gap: var(--e-1);
  padding: 8px 12px; border-bottom: 1px solid var(--borde-tenue);
  font-variant-numeric: tabular-nums;
}
/* Un elemento de rejilla tiene `min-width: auto`, así que un nombre largo
   ensancha su columna y desborda el marco entero. */
.maqueta-tabla div > *, .maqueta-ficha, .maqueta-fichas > * { min-width: 0; }
.maqueta-tabla div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maqueta-tabla div:last-child { border-bottom: 0; }
.maqueta-tabla div.cab {
  background: var(--azul-clr); color: var(--azul);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.maqueta-tabla s { text-decoration: none; text-align: right; color: var(--suave); }
.maqueta-pastilla {
  justify-self: start; padding: 1px 8px; border-radius: var(--r-full);
  font-size: .64rem; font-weight: 600;
  background: var(--verde-clr); color: var(--verde);
}
.maqueta-pastilla.espera { background: var(--ambar-clr); color: var(--ambar); }
.maqueta-pastilla.mal { background: color-mix(in srgb, var(--rojo) 14%, var(--papel)); color: var(--rojo); }

/* La columna del importe se cae la primera: en un dibujo lo que se entiende
   es el estado del comprobante, no la cifra exacta. */
.maqueta-tabla div { grid-template-columns: 1.4fr 1fr .85fr; }
.maqueta-tabla div > *:nth-child(3) { display: none; }

@media (min-width: 620px) {
  .maqueta-cuerpo { grid-template-columns: 126px 1fr; min-height: 292px; }
  .maqueta-lateral { display: block; }
  .maqueta-fichas { grid-template-columns: repeat(3, 1fr); }
  .maqueta-tabla div { grid-template-columns: 1.5fr 1.1fr .9fr .9fr; }
  .maqueta-tabla div > *:nth-child(3) { display: block; }
}

/* La portada a dos columnas: texto a la izquierda, maqueta a la derecha. */
.portada-doble { display: grid; grid-template-columns: 1fr; gap: var(--e-5); align-items: center; }
@media (min-width: 940px) { .portada-doble { grid-template-columns: 1fr 1.06fr; gap: 48px; } }

/* ───────────── 18. Banda de confianza ─────────────────────────────────────── */

.banda {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3);
  padding: 20px; border-radius: var(--r-lg);
  background: var(--papel); border: 1px solid var(--borde);
}
.banda-dato { display: block; }
.banda-dato b { display: block; }
@media (min-width: 760px) {
  .banda {
    display: flex; flex-wrap: wrap; gap: var(--e-2) 44px; justify-content: center; align-items: center;
    padding: 22px 26px;
  }
  .banda-dato { display: flex; align-items: baseline; gap: var(--e-1); }
  .banda-dato b { display: inline; }
}
.banda-dato b { font-size: 1.28rem; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.banda-dato span { font-size: .87rem; color: var(--suave); }

/* ───────────── 19. Segmentos (por audiencia) ──────────────────────────────── */

.segmento { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .segmento { grid-template-columns: 1fr 1fr; gap: 48px; }
  .segmento.invertido > *:first-child { order: 2; }
}
.segmento h3 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: var(--e-2); }

/* ───────────── 20. Migas de pan ───────────────────────────────────────────── */

/* Ojo: `.miga` y `.contenedor` conviven en el mismo elemento y tienen la
   misma especificidad. Un `padding` completo aquí borraría el margen
   lateral del contenedor y el texto se pegaría al borde en el celular. */
.miga { padding-top: 20px; font-size: .85rem; color: var(--tenue); }
.miga ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.miga li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--borde); }
.miga a { color: var(--suave); }
.miga a:hover { color: var(--azul); }
.miga [aria-current] { color: var(--tinta); font-weight: 500; }

/* ───────────── 21. Blog: portada y tarjetas ───────────────────────────────── */

.categorias { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.categorias a,
.categorias label {
  padding: 6px 14px; border-radius: var(--r-full);
  border: 1px solid var(--borde); background: var(--papel);
  font-size: .87rem; font-weight: 500; color: var(--suave);
  transition: all var(--vel);
}
.categorias label { cursor: pointer; user-select: none; }
.categorias a:hover,
.categorias label:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-clr); text-decoration: none; }
.categorias a.on { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ── Filtro del blog por tema. Sin JavaScript: un radio oculto por categoría
   y las tarjetas que no son de esa categoría se esconden. Los radios tienen
   que ser hermanos anteriores de las secciones para que funcione el «~». ── */
.filtro-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#cat-todos:checked ~ .seccion .categorias label[for="cat-todos"],
#cat-comprobantes:checked ~ .seccion .categorias label[for="cat-comprobantes"],
#cat-iva:checked ~ .seccion .categorias label[for="cat-iva"],
#cat-hospedaje:checked ~ .seccion .categorias label[for="cat-hospedaje"],
#cat-empresa:checked ~ .seccion .categorias label[for="cat-empresa"],
#cat-renta:checked ~ .seccion .categorias label[for="cat-renta"],
#cat-planilla:checked ~ .seccion .categorias label[for="cat-planilla"],
#cat-contabilidad:checked ~ .seccion .categorias label[for="cat-contabilidad"],
#cat-niif:checked ~ .seccion .categorias label[for="cat-niif"],
#cat-tribu:checked ~ .seccion .categorias label[for="cat-tribu"] { background: var(--azul); border-color: var(--azul); color: #fff; }

#cat-todos:focus-visible ~ .seccion .categorias label[for="cat-todos"],
#cat-comprobantes:focus-visible ~ .seccion .categorias label[for="cat-comprobantes"],
#cat-iva:focus-visible ~ .seccion .categorias label[for="cat-iva"],
#cat-hospedaje:focus-visible ~ .seccion .categorias label[for="cat-hospedaje"],
#cat-empresa:focus-visible ~ .seccion .categorias label[for="cat-empresa"],
#cat-renta:focus-visible ~ .seccion .categorias label[for="cat-renta"],
#cat-planilla:focus-visible ~ .seccion .categorias label[for="cat-planilla"],
#cat-contabilidad:focus-visible ~ .seccion .categorias label[for="cat-contabilidad"],
#cat-niif:focus-visible ~ .seccion .categorias label[for="cat-niif"],
#cat-tribu:focus-visible ~ .seccion .categorias label[for="cat-tribu"] { outline: 2px solid var(--azul); outline-offset: 2px; }

#cat-comprobantes:checked ~ .seccion .entrada:not(.c-comprobantes) { display: none; }
#cat-iva:checked ~ .seccion .entrada:not(.c-iva) { display: none; }
#cat-hospedaje:checked ~ .seccion .entrada:not(.c-hospedaje) { display: none; }
#cat-empresa:checked ~ .seccion .entrada:not(.c-empresa) { display: none; }
#cat-renta:checked ~ .seccion .entrada:not(.c-renta) { display: none; }
#cat-planilla:checked ~ .seccion .entrada:not(.c-planilla) { display: none; }
#cat-contabilidad:checked ~ .seccion .entrada:not(.c-contabilidad) { display: none; }
#cat-niif:checked ~ .seccion .entrada:not(.c-niif) { display: none; }
#cat-tribu:checked ~ .seccion .entrada:not(.c-tribu) { display: none; }

/* Lo mismo con :has(). El navegador recalcula el estilo del chip con más
   fiabilidad por aquí; las dos formas conviven sin estorbarse. */
.filtro-blog:has(#cat-todos:checked) .categorias label[for="cat-todos"],
.filtro-blog:has(#cat-comprobantes:checked) .categorias label[for="cat-comprobantes"],
.filtro-blog:has(#cat-iva:checked) .categorias label[for="cat-iva"],
.filtro-blog:has(#cat-hospedaje:checked) .categorias label[for="cat-hospedaje"],
.filtro-blog:has(#cat-empresa:checked) .categorias label[for="cat-empresa"],
.filtro-blog:has(#cat-renta:checked) .categorias label[for="cat-renta"],
.filtro-blog:has(#cat-planilla:checked) .categorias label[for="cat-planilla"],
.filtro-blog:has(#cat-contabilidad:checked) .categorias label[for="cat-contabilidad"],
.filtro-blog:has(#cat-niif:checked) .categorias label[for="cat-niif"],
.filtro-blog:has(#cat-tribu:checked) .categorias label[for="cat-tribu"] { background: var(--azul); border-color: var(--azul); color: #fff; }

.filtro-blog:has(#cat-comprobantes:checked) .entrada:not(.c-comprobantes) { display: none; }
.filtro-blog:has(#cat-iva:checked) .entrada:not(.c-iva) { display: none; }
.filtro-blog:has(#cat-hospedaje:checked) .entrada:not(.c-hospedaje) { display: none; }
.filtro-blog:has(#cat-empresa:checked) .entrada:not(.c-empresa) { display: none; }
.filtro-blog:has(#cat-renta:checked) .entrada:not(.c-renta) { display: none; }
.filtro-blog:has(#cat-planilla:checked) .entrada:not(.c-planilla) { display: none; }
.filtro-blog:has(#cat-contabilidad:checked) .entrada:not(.c-contabilidad) { display: none; }
.filtro-blog:has(#cat-niif:checked) .entrada:not(.c-niif) { display: none; }
.filtro-blog:has(#cat-tribu:checked) .entrada:not(.c-tribu) { display: none; }

.entradas { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.entrada {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 24px; color: inherit; box-shadow: var(--sombra);
  transition: border-color var(--vel), box-shadow var(--vel), transform var(--vel);
}
.entrada:hover {
  text-decoration: none; border-color: var(--azul-borde);
  box-shadow: var(--sombra-md); transform: translateY(-2px);
}
.entrada h3 { font-size: 1.12rem; margin: var(--e-2) 0 var(--e-1); letter-spacing: -.015em; }
.entrada p { font-size: .93rem; color: var(--suave); }
.meta-entrada {
  margin-top: auto; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 6px var(--e-2); align-items: center;
  font-size: .82rem; color: var(--tenue);
}
.meta-entrada time { font-variant-numeric: tabular-nums; }

/* Los separadores NO son elementos propios, aunque en el HTML lo sean.
   Como «.meta-entrada» envuelve, un «.punto» suelto podía quedar de último
   en la línea y dejar una viñeta colgando antes del salto —se veía en el
   celular, donde «Ticuenta» baja a la segunda línea—. Se esconde el elemento
   y la viñeta se dibuja como «::before» del dato que la sigue, así viaja
   siempre con él y nunca cierra una línea. */
.meta-entrada .punto { display: none; }
.meta-entrada > *:not(:first-child):not(.punto)::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: var(--r-full);
  background: var(--borde); margin-right: var(--e-2);
}

/* Y en el celular la línea no cabe entera: la firma baja sola. Se le da
   línea propia a propósito, sin viñeta, en vez de dejar que envuelva y
   arrastre la viñeta al principio del renglón. Solo en la cabecera del
   artículo, que es la única «.meta-entrada» con tres datos; las tarjetas del
   blog llevan dos y caben. */
@media (max-width: 460px) {
  .cabecera-articulo .meta-entrada > span:last-child {
    flex-basis: 100%; margin-top: 1px;
  }
  .cabecera-articulo .meta-entrada > span:last-child::before { display: none; }
}

/* La entrada destacada, más ancha y con más aire. */
.entrada-destacada {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr; gap: var(--e-4); align-items: center;
  padding: 26px;
  background: linear-gradient(120deg, var(--azul-clr), color-mix(in srgb, var(--papel) 70%, var(--azul-clr)));
  border-color: var(--azul-borde);
}
.entrada-destacada h3 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
.entrada-destacada p { font-size: 1rem; }
@media (min-width: 800px) { .entrada-destacada { grid-template-columns: 1.25fr 1fr; gap: 36px; padding: 34px; } }

/* ───────────── 22. Artículo ───────────────────────────────────────────────── */

.disposicion-articulo { display: grid; grid-template-columns: 1fr; gap: var(--e-5); align-items: start; }
@media (min-width: 980px) {
  .disposicion-articulo { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--e-7); }
}

.articulo { max-width: 68ch; font-size: 1.02rem; line-height: 1.7; }
@media (min-width: 760px) { .articulo { font-size: 1.04rem; line-height: 1.72; } }
.articulo > * + * { margin-top: 1.15em; }
.articulo h2 {
  margin-top: 2.2em; font-size: 1.52rem; letter-spacing: -.02em;
  padding-top: .5em; border-top: 1px solid var(--borde-tenue);
}
.articulo h3 { margin-top: 1.9em; font-size: 1.18rem; }
.articulo p { color: var(--tinta); }
.articulo strong { font-weight: 600; }
.articulo ul, .articulo ol { padding-left: 1.35em; color: var(--tinta); }
.articulo li + li { margin-top: .5em; }
.articulo li::marker { color: var(--azul); }
.articulo a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--azul-borde); }
.articulo a:hover { text-decoration-color: var(--azul); }
.articulo img { border-radius: var(--r); border: 1px solid var(--borde); }
.articulo .tabla-envoltorio { margin-block: 1.6em; }
.articulo hr { border: 0; border-top: 1px solid var(--borde); margin-block: 2.4em; }

/* La respuesta directa: la primera frase de la sección contesta la pregunta
   entera. Es lo que extraen los resúmenes con IA de Google y de ChatGPT, y
   además es como se lee mejor. */
.respuesta {
  padding: 18px 22px; border-radius: var(--r);
  background: var(--azul-clr); border: 1px solid var(--azul-borde);
  font-size: 1.02rem;
}
.respuesta strong { color: var(--azul); }

/* La cita de la norma. Va distinta de todo lo demás a propósito: es lo que
   sostiene lo que se afirma, y tiene que poder comprobarse. */
.fuente-oficial {
  margin: 1.8em 0; padding: 20px 24px;
  border-left: 3px solid var(--azul); border-radius: 0 var(--r) var(--r) 0;
  background: var(--fondo); font-size: .97rem;
}
.fuente-oficial p { font-style: italic; color: var(--tinta); }
.fuente-oficial cite {
  display: block; margin-top: var(--e-2); font-style: normal;
  font-size: .82rem; font-weight: 600; color: var(--azul);
  letter-spacing: .01em;
}

.aviso-articulo {
  margin: 1.8em 0; padding: 20px 22px; border-radius: var(--r);
  background: var(--ambar-clr); border: 1px solid var(--ambar-borde); font-size: .97rem;
}
.aviso-articulo > strong:first-child { display: block; margin-bottom: 6px; }

/* Índice lateral: pegajoso en escritorio, y en el celular ARRIBA del texto.

   Por debajo de 980 px la disposición se apila en una columna. Sin el «order»
   el índice quedaba AL FINAL —en la guía de la 4.4, al 93 % del recorrido—,
   o sea, servía para saltar a secciones que el lector ya había pasado.

   Se probó plegable, con casilla y etiqueta. Se descartó: se prefiere verlo
   entero de una. */
.indice { position: static; font-size: .9rem; }
.indice h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: var(--e-2);
}
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); border-left: 2px solid var(--borde); }
.indice a { display: block; padding-left: 16px; margin-left: -2px; color: var(--suave); border-left: 2px solid transparent; }
.indice a:hover { color: var(--azul); border-left-color: var(--azul); text-decoration: none; }
/* En el celular, el índice va ANTES del texto. En escritorio no: ahí es la
   segunda columna de la rejilla y moverlo la desordenaría. */
@media (max-width: 979px) { .indice { order: -1; } }

@media (min-width: 980px) { .indice { position: sticky; top: 88px; } }

.cabecera-articulo { padding: 36px 0 30px; border-bottom: 1px solid var(--borde); margin-bottom: var(--e-6); }
.cabecera-articulo h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); max-width: 24ch; letter-spacing: -.03em; }
.cabecera-articulo .entradilla { font-size: 1.12rem; }

/* ── El bloque de promoción. UNO SOLO para todo el sitio.

   Va sobre superficie NEUTRA, no sobre el azul teñido: ese azul lo usan la
   «respuesta» y el «caso», que son contenido editorial, y el ámbar lo usan
   los avisos. Si la promoción llevara el mismo color que una respuesta, el
   lector no podría distinguir lo que le estamos explicando de lo que le
   estamos vendiendo.

   Se distingue por tres cosas: superficie propia, un filete de acento a la
   izquierda, y un rótulo que dice «De Ticuenta» — porque un bloque
   promocional debe declararse como tal. ── */
.caja-cta {
  padding: var(--e-4);
  border-radius: var(--r-lg); border: 1px solid var(--promo-borde);
  background: var(--promo-fondo);
}
.caja-cta > .cta-rotulo {
  display: block; margin-bottom: var(--e-1);
  font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--promo-acento);
}
@media (min-width: 620px) { .caja-cta { padding: var(--e-5); } }

/* Toda la tipografía de dentro vive sobre fondo OSCURO, así que sus colores
   son los del bloque de promoción y no los del texto del sitio. Van juntas en
   una sola regla: tenerlas separadas hizo que una declaración posterior
   devolviera la tinta oscura y el bloque quedara ilegible. */
.caja-cta h2, .caja-cta h3 {
  font-size: 1.18rem; letter-spacing: -.02em; margin: 0 0 6px; max-width: 32ch;
  color: var(--promo-tinta);
}
@media (min-width: 620px) { .caja-cta h2, .caja-cta h3 { font-size: 1.34rem; } }
.caja-cta p { font-size: .96rem; max-width: 56ch; margin: 0; color: var(--promo-suave); }
.caja-cta strong { color: var(--promo-tinta); }
.caja-cta a:not(.boton) { color: var(--promo-acento); }
.caja-cta .boton {
  margin-top: var(--e-3); text-decoration: none;
  background: var(--promo-boton); border-color: var(--promo-boton);
  color: var(--promo-boton-tinta);
}
.caja-cta .boton:hover { background: var(--promo-boton-hover); border-color: var(--promo-boton-hover); }

/* ───────────── 23. Glosario ───────────────────────────────────────────────── */

.glosario { display: grid; gap: var(--e-2); }
.termino {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 20px 24px;
}
.termino dt { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.termino dt .sigla { font-size: .8rem; font-weight: 500; color: var(--tenue); margin-left: 8px; }
.termino dd { margin: var(--e-1) 0 0; color: var(--suave); font-size: .96rem; }
.abecedario { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.abecedario a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--papel); font-size: .87rem; font-weight: 600; color: var(--suave);
}
.abecedario a:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-clr); text-decoration: none; }

/* ───────────── 24. Herramientas (calculadoras) ────────────────────────────── */

.herramienta {
  display: grid; grid-template-columns: 1fr; gap: var(--e-4); align-items: start;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sombra);
}
@media (min-width: 780px) { .herramienta { grid-template-columns: 1fr 1fr; gap: var(--e-5); padding: 30px; } }
.resultado {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r); padding: 22px;
}
.resultado-linea {
  display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--borde-tenue);
}
.resultado-linea:last-child { border-bottom: 0; }
.resultado-linea span { font-size: .93rem; color: var(--suave); }
.resultado-linea b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.resultado-linea.total { border-top: 2px solid var(--azul); margin-top: 6px; padding-top: 14px; }
.resultado-linea.total b { font-size: 1.5rem; color: var(--azul); }

/* ───────────── 25. Pasos numerados ────────────────────────────────────────── */

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); counter-reset: paso; }
/* El ritmo del artículo lo fija «.articulo > * + *», pero el «margin: 0» de arriba lo pisa por ir después en la hoja y el título quedaba pegado al primer paso. Se le devuelve el aire, y un poco más que a un párrafo porque el número del paso es un círculo grande. */ /* Rejilla de dos columnas: el número es una celda de verdad, no un absoluto. Así el círculo y el título arrancan en la misma línea aunque el título ocupe dos renglones en el celular. */ .pasos li{
  counter-increment: paso;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--e-3);
}
.pasos li > * { grid-column: 2; min-width: 0; }
.pasos li::before {
  content: counter(paso);
  grid-column: 1; grid-row: 1; align-self: start;
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--azul); color: #fff;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 700;
}
.pasos h3 { font-size: 1.06rem; margin: 4px 0 5px; line-height: 1.32; }
.pasos p { color: var(--suave); font-size: .95rem; }
.pasos li > *:last-child { margin-bottom: 0; }

/* ───────────── 26. Suscripción al boletín ─────────────────────────────────── */

.suscripcion {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 24px; display: grid; gap: var(--e-3); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 780px) { .suscripcion { grid-template-columns: 1fr 1fr; padding: 32px; } }
.suscripcion h3 { font-size: 1.2rem; margin-bottom: 6px; }
.suscripcion p { font-size: .93rem; color: var(--suave); }
.suscripcion form { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.suscripcion input {
  flex: 1 1 200px; padding: 11px 14px; font-family: inherit; font-size: .95rem;
  border: 1px solid var(--borde); border-radius: var(--r); background: var(--papel); color: var(--tinta);
}
.suscripcion input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 15%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   28. EXPLORADOR DE FUNCIONES
   ---------------------------------------------------------------------------
   Es el componente que usan Zoho Books, Linear y Stripe para enseñar un
   producto grande sin una página infinita: una lista de funciones a un lado y,
   al pulsar cada una, cambian la captura y su descripción al otro.

   Está hecho con **casillas de radio escondidas**: ni una línea de JavaScript,
   funciona con teclado y las flechas del cursor lo recorren, que es exactamente
   lo que se espera de unas pestañas.

   En el celular la lista pasa arriba, en una fila que se desliza, y la captura
   queda debajo — que es como se lee un producto en la mano.
   ═══════════════════════════════════════════════════════════════════════════ */

.explorador { position: relative; }

/* Las casillas viven fuera de la vista pero siguen siendo enfocables. */
.explorador > input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.explorador-caja { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }

/* ── La lista de funciones ── */
.explorador-lista {
  display: flex; gap: var(--e-1);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-inline: -18px; padding-inline: 18px;
  -webkit-overflow-scrolling: touch;
}
.explorador-lista::-webkit-scrollbar { display: none; }

.explorador-lista label {
  display: flex; align-items: center; gap: var(--e-1);
  flex: none; cursor: pointer;
  padding: 10px 15px; border-radius: var(--r-full);
  border: 1px solid var(--borde); background: var(--papel);
  font-size: .9rem; font-weight: 600; color: var(--suave);
  white-space: nowrap;
  transition: border-color var(--vel), color var(--vel), background var(--vel);
}
.explorador-lista label:hover { border-color: var(--azul-borde); color: var(--azul); }
.explorador-lista label svg { width: 17px; height: 17px; flex: none; }
.explorador-lista label .resumen { display: none; }

/* ── El panel ── */
.explorador-panel > figure { display: none; margin: 0; }

.explorador-figura {
  display: grid; gap: var(--e-3); grid-template-columns: 1fr;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--sombra);
}
@media (min-width: 700px) { .explorador-figura { padding: 20px; } }
.explorador-figura img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); border: 1px solid var(--borde);
  background: var(--fondo);
}
.explorador-figura figcaption { display: grid; gap: var(--e-2); align-content: start; }
.explorador-figura figcaption h3 { font-size: 1.18rem; letter-spacing: -.015em; }
.explorador-figura figcaption p { color: var(--suave); font-size: .96rem; }
.explorador-figura figcaption .insignia { justify-self: start; }

/* En pantalla ancha el texto se reparte en dos columnas bajo la captura: el
   párrafo a la izquierda y lo que se gana a la derecha. */
@media (min-width: 760px) {
  .explorador-figura figcaption {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--e-1) var(--e-5);
  }
  .explorador-figura figcaption .insignia,
  .explorador-figura figcaption h3 { grid-column: 1 / -1; }
  .explorador-figura figcaption .lista { margin-top: 0; }
}

/* La maqueta dibujada ocupa el mismo hueco que una captura. */
.explorador-figura .maqueta { box-shadow: none; }

/* ── Qué se enseña según la casilla marcada ── */
.explorador > input:nth-of-type(1):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(1),
.explorador > input:nth-of-type(2):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(2),
.explorador > input:nth-of-type(3):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(3),
.explorador > input:nth-of-type(4):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(4),
.explorador > input:nth-of-type(5):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(5),
.explorador > input:nth-of-type(6):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(6),
.explorador > input:nth-of-type(7):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(7),
.explorador > input:nth-of-type(8):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(8),
.explorador > input:nth-of-type(9):checked ~ .explorador-caja .explorador-panel > figure:nth-of-type(9) {
  display: block;
}

.explorador > input:nth-of-type(1):checked ~ .explorador-caja .explorador-lista label:nth-of-type(1),
.explorador > input:nth-of-type(2):checked ~ .explorador-caja .explorador-lista label:nth-of-type(2),
.explorador > input:nth-of-type(3):checked ~ .explorador-caja .explorador-lista label:nth-of-type(3),
.explorador > input:nth-of-type(4):checked ~ .explorador-caja .explorador-lista label:nth-of-type(4),
.explorador > input:nth-of-type(5):checked ~ .explorador-caja .explorador-lista label:nth-of-type(5),
.explorador > input:nth-of-type(6):checked ~ .explorador-caja .explorador-lista label:nth-of-type(6),
.explorador > input:nth-of-type(7):checked ~ .explorador-caja .explorador-lista label:nth-of-type(7),
.explorador > input:nth-of-type(8):checked ~ .explorador-caja .explorador-lista label:nth-of-type(8),
.explorador > input:nth-of-type(9):checked ~ .explorador-caja .explorador-lista label:nth-of-type(9) {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* El foco del teclado tiene que verse: es la única pista de dónde está. */
.explorador > input:nth-of-type(1):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(1),
.explorador > input:nth-of-type(2):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(2),
.explorador > input:nth-of-type(3):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(3),
.explorador > input:nth-of-type(4):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(4),
.explorador > input:nth-of-type(5):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(5),
.explorador > input:nth-of-type(6):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(6),
.explorador > input:nth-of-type(7):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(7),
.explorador > input:nth-of-type(8):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(8),
.explorador > input:nth-of-type(9):focus-visible ~ .explorador-caja .explorador-lista label:nth-of-type(9) {
  outline: 2px solid var(--azul); outline-offset: 3px;
}

/* ── A partir de la tableta: lista a la izquierda, captura a la derecha ── */
@media (min-width: 900px) {
  .explorador-caja { grid-template-columns: 272px minmax(0, 1fr); gap: var(--e-4); align-items: start; }

  .explorador-lista {
    flex-direction: column; overflow: visible;
    margin-inline: 0; padding-inline: 0; gap: 6px;
  }
  .explorador-lista label {
    display: block; width: 100%;
    padding: 14px 16px; border-radius: var(--r);
    white-space: normal; font-size: .97rem;
  }
  .explorador-lista label .titulo { display: flex; align-items: center; gap: var(--e-1); }
  .explorador-lista label .resumen {
    display: block; margin-top: 4px; padding-left: 26px;
    font-size: .85rem; font-weight: 400; line-height: 1.45; color: var(--tenue);
  }
  .explorador-lista label:hover { background: var(--azul-clr); }

  .explorador > input:nth-of-type(1):checked ~ .explorador-caja .explorador-lista label:nth-of-type(1) .resumen,
  .explorador > input:nth-of-type(2):checked ~ .explorador-caja .explorador-lista label:nth-of-type(2) .resumen,
  .explorador > input:nth-of-type(3):checked ~ .explorador-caja .explorador-lista label:nth-of-type(3) .resumen,
  .explorador > input:nth-of-type(4):checked ~ .explorador-caja .explorador-lista label:nth-of-type(4) .resumen,
  .explorador > input:nth-of-type(5):checked ~ .explorador-caja .explorador-lista label:nth-of-type(5) .resumen,
  .explorador > input:nth-of-type(6):checked ~ .explorador-caja .explorador-lista label:nth-of-type(6) .resumen,
  .explorador > input:nth-of-type(7):checked ~ .explorador-caja .explorador-lista label:nth-of-type(7) .resumen,
  .explorador > input:nth-of-type(8):checked ~ .explorador-caja .explorador-lista label:nth-of-type(8) .resumen,
  .explorador > input:nth-of-type(9):checked ~ .explorador-caja .explorador-lista label:nth-of-type(9) .resumen {
    color: rgba(255, 255, 255, .82);
  }

  .explorador-figura { padding: 22px; }
}

@media (min-width: 1080px) {
  .explorador-caja { grid-template-columns: 292px minmax(0, 1fr); gap: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. EL CONTRASTE «ANTES / AHORA»
   ---------------------------------------------------------------------------
   Sustituye a la tabla comparativa que había suelta en la página. Va DENTRO de
   la función que corresponde, porque el ahorro se entiende al lado de la cosa
   que lo produce y no en un cuadro aparte veinte párrafos más abajo.

   Dos bloques cortos. En el celular se apilan; a partir de 640 px van al lado.
   ═══════════════════════════════════════════════════════════════════════════ */

.contraste {
  display: grid; gap: var(--e-1); margin-top: 4px;
  grid-column: 1 / -1;
}
@media (min-width: 640px) { .contraste { grid-template-columns: 1fr 1fr; gap: var(--e-2); } }

.contraste > div {
  padding: 13px 15px; border-radius: var(--r);
  border: 1px solid var(--borde); background: var(--fondo);
  font-size: .9rem; line-height: 1.5; color: var(--suave);
}
.contraste em {
  display: block; margin-bottom: 4px; font-style: normal;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue);
}
.contraste .ahora {
  background: var(--verde-clr);
  border-color: color-mix(in srgb, var(--verde) 22%, transparent);
  color: var(--tinta);
}
.contraste .ahora em { color: var(--verde); }
.contraste .ahora strong { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   30. QUE UN ARTÍCULO NO SEA UNA PARED DE TEXTO
   ---------------------------------------------------------------------------
   Tres piezas, en orden de utilidad:

   1. La **cabecera ilustrada**, distinta por categoría. Sirve para reconocer el
      tema de un vistazo en la lista del blog y para que el artículo no empiece
      en seco.
   2. La **cifra clave**: el número que el lector vino a buscar, sacado del
      párrafo y puesto donde se ve.
   3. El **diagrama**: cuando algo se entiende mejor dibujado —los veinte
      dígitos de un consecutivo, el reparto de un impuesto— se dibuja. Va en SVG
      dentro del HTML, así que hereda los colores del tema y pesa casi nada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Cabecera del artículo ─────────────────────────────────────────────── */

.portada-articulo {
  display: block; width: 100%;
  height: auto !important;          /* gana al atributo height="380" del HTML */
  aspect-ratio: 1200 / 380;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--e-4);
  background: var(--azul);
}

/* ── 2 · La cifra que el lector vino a buscar ──────────────────────────────── */

.cifras-clave {
  display: grid; gap: var(--e-2); grid-template-columns: 1fr;
  margin: 1.8em 0;
}
@media (min-width: 620px) { .cifras-clave { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

.cifra-clave {
  padding: 18px 20px; border-radius: var(--r);
  background: var(--papel); border: 1px solid var(--borde);
  text-align: center;
}
.cifra-clave b {
  display: block;
  font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--azul); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cifra-clave span {
  display: block; margin-top: 6px;
  font-size: .84rem; line-height: 1.4; color: var(--suave);
}
.cifra-clave.verde b { color: var(--verde); }
.cifra-clave.ambar b { color: var(--ambar); }

/* ── 3 · Diagramas ─────────────────────────────────────────────────────────
   Hechos con HTML y CSS, no con SVG. Un SVG de 700 px de ancho encoge en un
   celular hasta que sus rótulos no se leen; esto se reacomoda solo, hereda los
   colores del tema y se puede seleccionar y copiar. */

.diagrama {
  margin: 1.9em 0; padding: 20px;
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--papel);
}
.diagrama figcaption {
  margin-top: var(--e-3); padding-top: 12px; border-top: 1px solid var(--borde-tenue);
  font-size: .85rem; color: var(--tenue); text-align: center;
}

/* Piezas encadenadas: en el celular se apilan, en pantalla ancha van en fila. */
.d-tira { display: grid; gap: var(--e-1); grid-template-columns: 1fr; }
@media (min-width: 620px) { .d-tira { grid-auto-flow: column; grid-auto-columns: 1fr; } }

.d-pieza {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--fondo); border: 1px solid var(--borde);
  text-align: center;
}
.d-pieza .d-val {
  display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  color: var(--tinta); letter-spacing: .02em; word-break: break-all;
}
.d-pieza .d-rot {
  display: block; margin-top: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul);
}
.d-pieza .d-nota { display: block; margin-top: 4px; font-size: .8rem; color: var(--suave); line-height: 1.4; }

.d-pieza.azul  { background: var(--azul-clr);  border-color: var(--azul-borde); }
.d-pieza.verde { background: var(--verde-clr); border-color: color-mix(in srgb, var(--verde) 25%, transparent); }
.d-pieza.verde .d-rot { color: var(--verde); }
.d-pieza.ambar { background: var(--ambar-clr); border-color: var(--ambar-borde); }
.d-pieza.ambar .d-rot { color: var(--ambar); }

/* Dos caminos que se comparan. */
.d-dos { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 620px) { .d-dos { grid-template-columns: 1fr 1fr; } }
.d-dos > div { padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--borde); background: var(--fondo); }
.d-dos h4 { font-size: .95rem; margin-bottom: 6px; }
.d-dos p  { font-size: .88rem; color: var(--suave); line-height: 1.5; }
.d-dos .marca {
  display: inline-block; margin-bottom: var(--e-1); padding: 2px 9px; border-radius: var(--r-full);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.d-dos .suya   { background: var(--verde-clr); color: var(--verde); }
.d-dos .ajena  { background: var(--azul-clr);  color: var(--azul); }

/* Una barra que se va descontando. */
.d-barra { display: flex; height: 46px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--borde); }
.d-barra > span {
  display: grid; place-items: center; min-width: 0;
  font-size: .78rem; font-weight: 700; color: #fff; text-align: center; padding: 0 4px;
  white-space: nowrap; overflow: hidden;
}
/* En pantalla estrecha un tramo del 12 % mide unos 38 px y su rótulo necesita
   50: el texto se cortaba por la mitad. Debajo de 620 px la barra enseña solo
   la proporción y las cifras se leen en la leyenda, que sí tiene sitio. */
@media (max-width: 620px) {
  .d-barra { height: 30px; }
  .d-barra > span { font-size: 0; padding: 0; }
}
.d-leyenda b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.d-barra .base    { background: var(--azul); }
.d-barra .deduce  { background: var(--ambar); }
.d-barra .impacto { background: var(--verde); }
.d-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-2); font-size: .82rem; color: var(--suave); }
.d-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Doce meses que se suman. */
.d-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (min-width: 620px) { .d-meses { grid-template-columns: repeat(12, 1fr); } }
.d-meses span {
  display: grid; place-items: center; aspect-ratio: 1;
  border-radius: var(--r-sm); background: var(--azul-clr); border: 1px solid var(--azul-borde);
  font-size: .68rem; font-weight: 700; color: var(--azul);
}
.d-flecha { text-align: center; margin: var(--e-2) 0 var(--e-2); font-size: 1.3rem; color: var(--tenue); line-height: 1; }
.d-resultado {
  text-align: center; padding: 14px; border-radius: var(--r);
  background: var(--verde-clr); border: 1px solid color-mix(in srgb, var(--verde) 25%, transparent);
}
.d-resultado b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; }
.d-resultado span { display: block; margin-top: 4px; font-size: .84rem; color: var(--suave); }

/* ── La miniatura de la tarjeta del blog ───────────────────────────────────
   Se saca del relleno de la tarjeta con margen negativo, así llega hasta el
   borde sin tener que envolver el contenido en otro elemento —y las tarjetas
   que no llevan imagen siguen funcionando igual—. */

.entrada { overflow: hidden; }
.entrada-imagen {
  display: block;
  width: calc(100% + 48px);
  max-width: none;                  /* si no, `img{max-width:100%}` anula el sangrado */
  height: auto !important;          /* gana al atributo height="380" del HTML */
  margin: -24px -24px var(--e-3);
  aspect-ratio: 1200 / 380;
  object-fit: cover;
  background: var(--azul);
}
/* La tarjeta destacada tiene otro relleno, así que su sangrado es otro. */
.entrada-destacada .entrada-imagen { width: calc(100% + 52px); margin: -26px -26px var(--e-3); }
@media (min-width: 800px) {
  .entrada-destacada .entrada-imagen { width: calc(100% + 68px); margin: -34px -34px var(--e-4); }
}

/* ───────────── 33. Fuentes oficiales al pie del artículo ──────────────────
   Solo enlaces institucionales y de referencia. Nunca a otro programa de
   contabilidad o de facturación: regalarle autoridad a un competidor y
   mandarle el lector es exactamente lo contrario de para qué está el blog.
   revisar.py lo comprueba con una lista de dominios vetados. */
.fuentes-oficiales {
  margin-top: var(--e-2); padding-top: 14px; border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-1);
  color: var(--tenue);
}
.fuentes-oficiales strong { color: var(--suave); }
.fuentes-oficiales a { color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
.fuentes-oficiales a:hover { color: var(--azul); }
.fuentes-oficiales .punto { width: 3px; height: 3px; border-radius: var(--r-full); background: var(--borde); }

.oculto-campo { display: none; }

/* ───────────── 34. Ritmo vertical fuera del artículo ──────────────────────
   Las calculadoras y las plantillas no viven dentro de «.articulo», así que
   se quedaban sin aire: los títulos pegados al párrafo siguiente y los
   párrafos pegados a las tablas. «.prosa» les presta el mismo ritmo. */
.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { margin-top: 2.1em; font-size: 1.42rem; letter-spacing: -.02em; }
/* Un título que abre la prosa no lleva margen encima: la sección ya pone el
   suyo. Sin esto, el primer h2 de cada sección sumaba 50 px al relleno y el
   hueco entre secciones llegaba a 194 px. */
.prosa > :first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.8em; font-size: 1.12rem; }
.prosa > h2 + *, .prosa > h3 + * { margin-top: .85em; }
.prosa ul, .prosa ol { padding-left: 1.35em; }
.prosa li + li { margin-top: .5em; }
.prosa li::marker { color: var(--azul); }

/* La plantilla de factura conserva su cuadrícula en el celular: es un papel
   para rellenar, no una tabla de datos. Se desplaza dentro de su caja. */
.hoja-tabla thead th {
  text-align: left; padding: 9px 10px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-clr); border-bottom: 1px solid var(--borde);
}

/* iOS centra el contenido de los campos de fecha y les da otro alto. Se les
   quita la apariencia nativa para que se vean como los demás campos. */
.campo input[type="date"] {
  -webkit-appearance: none; appearance: none;
  text-align: left; min-height: 44px;
}
.campo input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* ───────────── 36. El caso resuelto de los artículos de NIIF ──────────────
   Lo que los contadores no encuentran en español: el número, la cuenta y el
   asiento. La caja se distingue del texto para poder saltar de caso en caso. */
.caso {
  border: 1px solid var(--azul-borde); border-radius: var(--r-lg);
  background: var(--azul-clr); padding: var(--e-3);
}
.caso > .caso-rotulo {
  display: block; margin-bottom: var(--e-1);
  font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--azul);
}
.caso p { color: var(--tinta); }
.caso > * + * { margin-top: var(--e-1); }
.caso dl { display: grid; gap: 6px; margin: var(--e-1) 0 0; }
.caso dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1); }
.caso dt { color: var(--suave); font-size: .93rem; }
.caso dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* El asiento. Se distingue de una tabla de datos: números a la derecha,
   totales resaltados, y en el celular sigue leyéndose como asiento. */
/* Un asiento NUNCA se apila en tarjetas: cuenta, debe y haber tienen que
   leerse en la misma fila o deja de ser un asiento. Por eso está excluido de
   la transformación móvil, y en su lugar se estrecha y se desplaza dentro de
   su caja si hiciera falta. */
.asiento {
  width: 100%; min-width: 290px; border-collapse: collapse;
  font-size: .86rem; background: var(--papel);
}

.asiento thead th {
  text-align: left; padding: var(--e-1) var(--e-2);
  /* .68rem y no menos: en el celular «Cuenta / Debe / Haber» son la clave de
     lectura del asiento, y a 10 px quedaban por debajo del resto de rótulos
     del sitio, que van todos a 11 px. */
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-clr); border-bottom: 1px solid var(--borde);
}
.asiento tbody td {
  padding: var(--e-2); border-bottom: 1px solid var(--borde-tenue);
  color: var(--tinta); vertical-align: top;
}
.asiento tbody tr:last-child td { border-bottom: 0; }
/* Las dos columnas de importes: pegadas a la derecha, angostas y sin partirse. */
.asiento th:nth-child(n+2), .asiento td:nth-child(n+2) {
  text-align: right; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.asiento tbody tr.total td { background: var(--azul-clr); font-weight: 700; }
/* El envoltorio del asiento se desplaza solo si no cabe. */
.tabla-envoltorio:has(.asiento) { overflow-x: auto; }

/* ── REGLA GENERAL, y va aquí porque ya nos mordió tres veces ────────────────
   Un contenedor que combina «overflow» con «border-radius» RECORTA el texto
   que empiece pegado al borde: la esquina redondeada se come la primera
   letra. Pasó con la miga de pan, con el rótulo de la barra apilada y con el
   título del asiento.

   La regla: todo texto dentro de una caja que recorta lleva un margen
   horizontal de al menos el radio de la esquina. Se aplica de oficio a los
   rótulos que van pegados al borde superior. Y `revisar.py` comprueba que
   ningún asiento use <caption> dentro del envoltorio, que era el caso que
   no se puede resolver solo con CSS. ── */
.tabla-envoltorio > :is(caption, .rotulo-bloque),
[style*="overflow"] > :is(caption, .rotulo-bloque) { padding-inline: var(--e-2); }

/* El rótulo del asiento, ahora fuera de la caja que recorta. */
.rotulo-bloque {
  display: block; margin-bottom: var(--e-1);
  font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--azul);
}

/* ───────────── 37. Acciones e impresión de las herramientas ───────────────
   La calculadora se imprime —o se guarda como PDF— con el desglose y la
   fecha, para poder adjuntarla a un expediente. Se ocultan el menú, el pie,
   los avisos y la promoción: en un PDF de trabajo no pintan nada. */
.acciones-herramienta { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pie-impresion { display: none; margin-top: var(--e-3); }

/* ═══════════ 40. EL AVISO DE COOKIES ═══════════════════════════════════════

   Va abajo y no tapa el contenido: el visitante puede leer el artículo sin
   contestarle. Los dos botones tienen el mismo tamaño y el mismo peso a
   propósito —«Rechazar» no se esconde—, y en el celular ocupan la línea
   entera para que no haya que apuntar. */

.consentimiento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--e-2);
  animation: sube-aviso .35s ease-out;
}
@keyframes sube-aviso { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .consentimiento { animation: none; } }

.consentimiento-caja {
  max-width: 520px; margin: 0 auto;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra-md);
  padding: var(--e-2) var(--e-3);
  display: grid; gap: var(--e-2);
}
@media (min-width: 620px) {
  .consentimiento-caja { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-3); }
}

.consentimiento-texto { font-size: .84rem; color: var(--suave); margin: 0; line-height: 1.45; }

.consentimiento-botones { display: flex; gap: var(--e-1); }
.consentimiento-botones .boton {
  flex: 1 1 auto; justify-content: center; white-space: nowrap;
  padding: 7px 14px; font-size: .85rem;
}
@media (min-width: 620px) { .consentimiento-botones .boton { flex: 0 0 auto; } }

/* No se imprime. */
@media print { .consentimiento { display: none !important; } }

/* ═══════════ 41. LO QUE SE IMPRIME: UNA HOJA, NO LA PÁGINA ═════════════════

   Antes esto escondía unos cuantos bloques con «.no-imprimir» y salía la
   página entera en el PDF: el formulario con sus campos, las explicaciones,
   el «Seguir leyendo». Feo e inservible como comprobante.

   La regla ahora es al revés y no hay que acordarse de marcar nada: se
   esconde TODO y se enseña solo «.hoja-doc», un documento aparte que el
   script rellena con los mismos números de la pantalla. El selector de id
   gana por especificidad, así que el orden aquí da igual. */

.hoja-doc { display: none; }

@media print {
  /* Se acota con «:has» a las páginas que traen hoja propia: la plantilla de
     factura tiene su propio bloque de impresión y no se puede pisar. */
  body:has(#hoja-impresion) > :not(main),
  main:has(#hoja-impresion) > * { display: none !important; }
  #hoja-impresion { display: block !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { margin: 0; font-size: 11pt; }
  a[href]::after { content: ""; }
}

@page { margin: 18mm 16mm; }

/* El documento en sí. Se describe fuera del «@media print» para poder verlo
   en pantalla mientras se trabaja en él, sin más que quitarle el display. */
.hoja-doc { color: #000; font-size: 11pt; line-height: 1.45; }

.hoja-doc-cabecera {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 10px; margin-bottom: 22px; border-bottom: 2px solid #101a2e;
}
.hoja-doc-marca {
  margin: 0 0 3px; font-size: 8.5pt; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #101a2e;
}
.hoja-doc h2 { margin: 0; font-size: 16pt; letter-spacing: -.01em; color: #101a2e; }
.hoja-doc-fecha { margin: 0; font-size: 9pt; color: #4a5163; white-space: nowrap; }

.hoja-doc h3 {
  margin: 22px 0 7px; font-size: 8.5pt; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #4a5163;
}
.hoja-doc h3:first-of-type { margin-top: 0; }

.hoja-doc table { width: 100%; border-collapse: collapse; }
.hoja-doc th, .hoja-doc td {
  padding: 7px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #d8dce4; font-size: 10pt;
}
.hoja-doc thead th {
  background: #f2f4f8 !important; color: #101a2e; border-bottom: 1px solid #b9c0cd;
  font-size: 7.5pt; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hoja-doc tbody th { font-weight: 600; width: 38%; }
.hoja-doc-cifras tbody th { width: 26%; }

/* Las columnas de dinero, alineadas a la derecha y sin partirse en dos
   líneas: es lo mismo que hacemos con los asientos contables. */
.hoja-doc-cifras thead th:last-child,
.hoja-doc-cifras td:last-child,
.hoja-doc-cifras tfoot th + td + td {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hoja-doc-cifras tbody td:nth-child(2) { color: #4a5163; font-size: 9.5pt; }

.hoja-doc tfoot th, .hoja-doc tfoot td {
  border-top: 2px solid #101a2e; border-bottom: 0;
  font-size: 12pt; font-weight: 700; padding-top: 10px; color: #101a2e;
}

.hoja-doc-nota { margin: 14px 0 0; font-size: 9pt; color: #4a5163; }
.hoja-doc-pie {
  margin: 26px 0 0; padding-top: 10px; border-top: 1px solid #d8dce4;
  font-size: 8pt; line-height: 1.5; color: #6b7180;
}

/* Nada de esto se parte a mitad de página. */
.hoja-doc table, .hoja-doc-cabecera, .hoja-doc-pie { break-inside: avoid; }

/* ═══════════════ 35. EL RITMO VERTICAL, EN UN SOLO SITIO ═══════════════════

   La base pone «h1…h4 { margin: 0}» y «p { margin: 0}», así que TODO el aire
   entre bloques hay que darlo aquí. Y este bloque va DELIBERADAMENTE AL FINAL
   del archivo: varios componentes (.pasos, .lista, .lista-simple, .indice ol)
   traen «margin: 0» para funcionar en el pie o en el menú, y como tienen la misma especificidad, gana el último que se declara. Si esto se mueve hacia arriba, los títulos vuelven a quedar pegados a las listas. Contenedores de texto: «.articulo» (los artículos del blog) y «.prosa» (calculadoras, plantillas, glosario). Las páginas de venta siguen usando las utilidades mt-s / mt-m / mt-l, que ahí sí son decisiones de maqueta. */ .articulo > * + *, .prosa > * + *{ margin-top: var(--t-parrafo); }

/* Después de un título va menos aire que entre dos párrafos: el título ya
   separa visualmente, y dejarle el hueco completo lo despega de su propio
   texto. Este es el otro medio problema, el de «muy despegado». */
.articulo > :is(h2, h3, h4) + *,
.prosa   > :is(h2, h3, h4) + * { margin-top: var(--t-tras-titulo); }

/* Antes de un título, más aire: abre sección. */
.articulo > h2, .prosa > h2 { margin-top: var(--t-antes-h2); }
.articulo > h3, .prosa > h3 { margin-top: var(--t-antes-h3); }
.articulo > h4, .prosa   > h4 { margin-top: 1.65em; }

/* Los bloques con caja propia respiran un poco más que un párrafo. */
.articulo > :is(.pasos, .lista, .lista-simple, .cifras-clave, .diagrama,
                .respuesta, .aviso-articulo, .caja-cta, .tabla-envoltorio,
                .herramienta, .resultado, .aviso, table, ul, ol),
.prosa > :is(.pasos, .lista, .lista-simple, .cifras-clave, .diagrama,
             .respuesta, .aviso-articulo, .caja-cta, .tabla-envoltorio,
             .herramienta, .resultado, .aviso, table, ul, ol) { margin-top: var(--t-bloque); }

/* …salvo cuando vienen justo detrás de un título, que ahí manda el título. */
.articulo > :is(h2, h3, h4) + :is(.pasos, .lista, .lista-simple, .cifras-clave,
                .diagrama, .respuesta, .aviso-articulo, .caja-cta,
                .tabla-envoltorio, .herramienta, .aviso, table, ul, ol),
.prosa > :is(h2, h3, h4) + :is(.pasos, .lista, .lista-simple, .cifras-clave,
             .diagrama, .respuesta, .aviso-articulo, .caja-cta,
             .tabla-envoltorio, .herramienta, .aviso, table, ul, ol) { margin-top: 1em; }

/* El separador y el bloque de cierre marcan el final del artículo. */
.articulo > hr, .prosa > hr { margin-block: var(--t-separador); }
.articulo > hr + *, .prosa > hr + * { margin-top: 0; }

/* ═══════════ 38. EL AIRE DE LOS BLOQUES, DE UNA VEZ POR TODAS ═══════════════

   El ritmo del bloque 35 solo alcanza a los HIJOS DIRECTOS de «.articulo» y
   «.prosa». Eso falló tres veces por la misma razón: bastaba con que hubiera
   un «.contenedor» de por medio, o con que alguien olvidara poner «.prosa» en
   una de las varias secciones de una página, para que el bloque quedara
   pegado al elemento anterior.

   Aquí los componentes con caja propia traen SU PROPIO margen superior, estén
   donde estén y a la profundidad que sea. Ya no depende de recordar nada.

   La excepción son los contenedores que reparten el espacio con «gap»: ahí el
   margen sobraría y se anula explícitamente más abajo. */

:is(.caja-cta, .aviso-articulo, .respuesta, .caso, .cifras-clave, .diagrama,
    .pasos, .lista, .lista-simple, .herramienta, .resultado, .aviso,
    .tabla-envoltorio, .fuentes-oficiales, .rotulo-bloque,
    .suscripcion, .glosario, .entradas):not(:first-child) {
  margin-top: var(--t-bloque);
}

/* Dentro de una rejilla el espacio lo pone el «gap»: sumar margen lo duplica. */
:where(.rejilla, .entradas, .d-tira, .cifras-clave, .plan, .producto, .tarjeta,
       .suscripcion, .pie, .lista, .lista-simple, .pasos, .caso, .herramienta,
       .explorador-panel, .segmento, .maqueta) :is(.lista, .lista-simple, .pasos,
       .caso, .cifras-clave, .diagrama, .aviso, .respuesta, .tabla-envoltorio) {
  margin-top: 0;
}

/* Y el rótulo de un bloque va pegado a SU bloque, no separado de él. */
.rotulo-bloque + :is(.tabla-envoltorio, table) { margin-top: var(--e-1); }

/* ───────────── 39. El botón de tema ───────────────────────────────────────
   Vive dentro del menú. Enseña el icono del modo AL QUE SE VA a cambiar, que
   es lo que la gente espera: si está en claro, muestra la luna. Sin
   JavaScript no aparece —lo añade el propio guion—, así que la página sigue
   funcionando entera con el tema del sistema. */
.boton-tema {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 8px 12px; border-radius: var(--r);
  border: 1px solid var(--borde); background: var(--papel);
  color: var(--suave); font-family: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer; transition: all var(--vel);
}
.boton-tema:hover { border-color: var(--azul); color: var(--azul); }
.boton-tema svg { width: 16px; height: 16px; flex: none; }
/* Un icono u otro según el tema en curso. */
.boton-tema .a-oscuro { display: inline-flex; }
.boton-tema .a-claro  { display: none; }
:root[data-tema="oscuro"] .boton-tema .a-oscuro { display: none; }
:root[data-tema="oscuro"] .boton-tema .a-claro  { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton-tema .a-oscuro { display: none; }
  :root:not([data-tema="claro"]) .boton-tema .a-claro  { display: inline-flex; }
}
:root[data-tema="claro"] .boton-tema .a-oscuro { display: inline-flex; }
:root[data-tema="claro"] .boton-tema .a-claro  { display: none; }

/* En el celular el menú es una lista vertical: el botón va al final, separado. */
.menu .boton-tema { margin-top: var(--e-2); align-self: flex-start; }
@media (min-width: 900px) {
  .menu .boton-tema { margin-top: 0; margin-left: var(--e-2); padding: 6px 10px; font-size: .85rem; }
}

/* ───────────── 40. La nota de promoción, a mitad del artículo ──────────────
   Deliberadamente NO es una caja. A mitad de la lectura el lector está
   resolviendo una duda: se le deja una puerta, no un cartel. Por eso va sin
   fondo, con un filete verde —el mismo verde del botón del bloque final— y
   con el rótulo «De Ticuenta» dentro de la propia frase.

   Una sola por artículo, y solo en los largos: en uno de cinco minutos el
   lector llega al final igual y esto sería ruido. */
.nota-promo {
  border-left: 2px solid var(--promo-boton);
  padding-left: var(--e-3);
  font-size: .93rem; color: var(--suave);
}
.nota-promo .de { font-weight: 700; color: var(--verde); }
.nota-promo a {
  font-weight: 600; color: var(--verde);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--verde) 45%, transparent);
}
.nota-promo a:hover { text-decoration-color: var(--verde); }

/* Respira más que un párrafo: se separa del texto sin necesitar una caja. */
.articulo > .nota-promo, .prosa > .nota-promo,
.nota-promo:not(:first-child) { margin-top: var(--e-5); }
.nota-promo + * { margin-top: var(--e-5) !important; }

/* ───────────── 41. La página de precios ───────────────────────────────────
   Compone como una página de precios de las de siempre: portada centrada,
   dos tarjetas para elegir producto, un interruptor mensual/anual por
   producto, tarjetas con sus datos en filas y una tabla que compara.
   Nada de esto lleva JavaScript: el interruptor es una casilla y el resto
   es un «:has()» acotado a SU sección, para que cada producto mande sobre
   sus propios precios y no sobre los del otro. */

.portada-centrada { text-align: center; }
.portada-centrada h1 { max-width: 22ch; margin-inline: auto; }
.portada-centrada .entradilla { margin-inline: auto; }
.ojo {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tenue);
}
.portada-centrada h1 { margin-top: var(--e-2); }

/* Las dos puertas de entrada: cada una dice a quién sirve y desde cuánto. */
.selector-producto { margin-top: var(--e-5); display: grid; gap: var(--e-2); }
@media (min-width: 700px) { .selector-producto { grid-template-columns: 1fr 1fr; gap: var(--e-3); } }
.tarjeta-producto {
  display: block; text-align: left; text-decoration: none;
  padding: var(--e-3) var(--e-4);
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s;
}
.tarjeta-producto:hover, .tarjeta-producto:focus-visible { border-color: var(--azul); transform: translateY(-2px); }
.tarjeta-producto-nombre { display: block; font-weight: 700; color: var(--tinta); }
.tarjeta-producto-desde  { display: block; margin-top: 2px; font-size: .95rem; font-weight: 700; color: var(--azul); }
.tarjeta-producto-para   { display: block; margin-top: 6px; font-size: .88rem; color: var(--suave); line-height: 1.5; }

.titulo-planes {
  text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.03em;
}
.bajada-planes {
  margin: var(--e-2) auto 0; max-width: 56ch;
  text-align: center; color: var(--suave);
}

/* El interruptor: una casilla de verdad, escondida pero enfocable. */
.interruptor-caja { display: flex; justify-content: center; margin: var(--e-5) 0; }
.interruptor-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.interruptor {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: .93rem; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.interruptor-pista {
  position: relative; flex: none; width: 44px; height: 26px;
  border-radius: var(--r-full); background: var(--borde);
  transition: background .18s;
}
.interruptor-bola {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: var(--r-full); background: var(--papel);
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
  transition: transform .18s;
}
.interruptor-input:checked + .interruptor .interruptor-pista { background: var(--verde-marca); }
.interruptor-input:checked + .interruptor .interruptor-bola  { transform: translateX(18px); }
.interruptor-input:focus-visible + .interruptor .interruptor-pista { outline: 2px solid var(--azul); outline-offset: 3px; }
.pildora-verde {
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: .76rem; font-weight: 700;
  background: var(--verde-clr); color: var(--verde);
}

/* El precio anual está en el HTML desde el principio: se muestra, no se calcula.
   El «:has()» va en la sección y no en el body: así el interruptor de
   Facturación no mueve los precios de Contabilidad. */
.precio-ano, .nota-ano { display: none; }
.seccion-planes:has(.interruptor-input:checked) .precio-mes { display: none; }
.seccion-planes:has(.interruptor-input:checked) .nota-mes   { display: none; }
.seccion-planes:has(.interruptor-input:checked) .precio-ano { display: flex; }
.seccion-planes:has(.interruptor-input:checked) .nota-ano   { display: block; }

.rejilla-planes {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.seccion-planes .plan { padding: var(--e-4); }
.seccion-planes .plan-precio { margin: var(--e-3) 0 2px; align-items: baseline; gap: 4px; }
.seccion-planes .plan-precio b { font-size: 2.5rem; line-height: 1; }
.moneda { font-size: 1.15rem; font-weight: 700; color: var(--tinta); align-self: flex-start; margin-top: .28em; }
.plan-facturado { font-size: .82rem; color: var(--tenue); }
.ahorro {
  margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 700;
  background: var(--verde-clr); color: var(--verde);
}
.plan-lead {
  margin-top: var(--e-3); font-size: .92rem; line-height: 1.55; color: var(--suave);
}
.plan-lead strong { color: var(--tinta); }

/* Los datos del plan, en filas: se comparan de un vistazo entre tarjetas. */
.plan-especs { margin: var(--e-3) 0 var(--e-4); }
.plan-especs > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  padding: 10px 0; border-top: 1px solid var(--borde-tenue);
  font-size: .9rem;
}
.plan-especs > div:last-child { border-bottom: 1px solid var(--borde-tenue); }
.plan-especs dt { color: var(--suave); }
.plan-especs dd { margin: 0; font-weight: 700; color: var(--tinta); text-align: right; }

.boton-ancho { display: flex; width: 100%; justify-content: center; }

.tranquilidad {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-4);
}
.tranquilidad li { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--suave); }
.tranquilidad svg { flex: none; width: 16px; height: 16px; color: var(--verde); }

.comparador { margin-top: var(--e-6); }
.comparador > h3 { text-align: center; font-size: 1.2rem; margin-bottom: var(--e-3); }
.tabla-comparar td { font-weight: 600; color: var(--tinta); }
.comparador-nota { margin-top: var(--e-2); text-align: center; font-size: .88rem; color: var(--tenue); }

.caja-incluye {
  margin-top: var(--e-6); padding: var(--e-4);
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
.caja-incluye h3 { font-size: 1.05rem; }
/* Dos columnas y no tres: los renglones son frases, no palabras sueltas. */
.lista-columnas { gap: var(--e-2); }
@media (min-width: 720px) {
  .lista-columnas { grid-template-columns: 1fr 1fr; column-gap: var(--e-5); }
}

.cierre-seccion { margin-top: var(--e-5); text-align: center; font-size: .95rem; color: var(--tenue); }

.caja-programa {
  margin-top: var(--e-6); padding: var(--e-4);
  border: 1px solid var(--promo-borde); border-radius: var(--r-lg);
  background: var(--promo-fondo);
}
.caja-programa .rotulo { color: var(--promo-acento); }
.caja-programa h3 { font-size: 1.15rem; letter-spacing: -.01em; color: var(--promo-tinta); }
.caja-programa p  { color: var(--promo-suave); }
.caja-programa strong { color: var(--promo-tinta); }

.acciones-seccion {
  margin-top: var(--e-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.acciones-seccion .plan-nota { flex-basis: 100%; margin-top: 4px; color: var(--promo-suave); }

/* La cinta «Más popular» va absoluta: en el flujo empujaba el título de esa
   tarjeta hacia abajo y las tres dejaban de alinearse. */
.plan h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.insignia-recomendado { font-size: .72rem; }

.encabezado-centrado { text-align: center; }
.encabezado-centrado .titular { margin-inline: auto; }

.condicion svg { width: 24px; height: 24px; color: var(--azul); }
.condicion h3  { margin-top: var(--e-2); font-size: 1rem; }
.condicion p   { margin-top: 6px; font-size: .92rem; color: var(--suave); }

/* La objeción se resuelve donde se decide: justo debajo del botón. */
.nota-cta { margin-top: 8px; font-size: .78rem; color: var(--tenue); text-align: center; }
.portada-acciones + .nota-cta { margin-top: var(--e-2); text-align: left; }

/* ───────────── 42. La tabla que compara los planes ────────────────────────
   Horizontal a cualquier ancho: la gracia de una comparación es ver los tres
   precios uno al lado del otro. Lo que en el celular haría que la tercera
   columna se perdiera —el motivo por el que las demás tablas se dibujan como
   tarjetas— se resuelve aquí de otra forma: la columna del rasgo se queda
   fija al desplazar, y el borde lleva sombra cuando queda algo por ver. */

.comparador .tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background:
    /* Los dos tapones opacos viajan con el contenido; las dos sombras se
       quedan pegadas al marco. Resultado: la sombra solo asoma del lado
       donde todavía queda tabla. */
    linear-gradient(to right, var(--papel) 40%, transparent) left / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--papel) 40%, transparent) right / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgb(0 0 0 / .16), transparent) left / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .16), transparent) right / 13px 100% no-repeat scroll,
    var(--papel);
}

.tabla-comparar { width: 100%; min-width: 480px; border-collapse: collapse; }

.tabla-comparar thead th {
  padding: 12px 10px; vertical-align: bottom; text-align: center;
  background: var(--azul-clr); border-bottom: 1px solid var(--borde);
}
.col-plan {
  display: block;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul);
}
.col-precio {
  display: block; margin-top: 3px;
  font-size: .8rem; font-weight: 600; color: var(--suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* El precio de la cabecera obedece al mismo interruptor que las tarjetas. */
.tabla-comparar .precio-ano { display: none; }
.seccion-planes:has(.interruptor-input:checked) .tabla-comparar .precio-mes { display: none; }
.seccion-planes:has(.interruptor-input:checked) .tabla-comparar .precio-ano { display: block; }

.tabla-comparar tbody th {
  padding: 12px 14px; text-align: left; vertical-align: middle;
  font-size: .86rem; font-weight: 600; color: var(--tinta);
  border-bottom: 1px solid var(--borde-tenue);
}
.tabla-comparar tbody td {
  padding: 12px 10px; text-align: center; vertical-align: middle;
  font-size: .86rem; font-weight: 600; color: var(--tinta);
  border-bottom: 1px solid var(--borde-tenue);
}
.tabla-comparar tbody tr:last-child th,
.tabla-comparar tbody tr:last-child td { border-bottom: 0; }
.tabla-comparar tbody tr:nth-child(odd) th,
.tabla-comparar tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--fondo) 60%, transparent); }

/* La columna del rasgo se queda quieta: sin ella, al arrastrar de lado uno
   deja de saber qué está comparando. */
.tabla-comparar th[scope="row"], .tabla-comparar .col-rasgo {
  position: sticky; left: 0; z-index: 1;
  min-width: 160px;
  box-shadow: 1px 0 0 var(--borde-tenue);
}
.tabla-comparar .col-rasgo {
  text-align: left; background: var(--azul-clr);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul);
}
.tabla-comparar tbody th { background: var(--papel); }
.tabla-comparar tbody tr:nth-child(odd) th { background: color-mix(in srgb, var(--fondo) 60%, var(--papel)); }

@media (min-width: 720px) {
  .tabla-comparar { min-width: 0; }
  .tabla-comparar thead th, .tabla-comparar tbody th, .tabla-comparar tbody td { padding: 14px 16px; }
  /* Con sitio de sobra, la columna fija sobra: quitarla evita la sombra. */
  .tabla-comparar th[scope="row"], .tabla-comparar .col-rasgo { position: static; box-shadow: none; }
}

/* El «+ IVA» va pegado al precio, en la misma línea y más chico: es una
   precisión, no un dato que compita con la cifra. */
.col-precio i {
  margin-left: 4px;
  font-style: normal; font-size: .63rem; font-weight: 500;
  /* Sin color propio: hereda el del precio. Con «--tenue» se quedaba en
     4,38:1 sobre el fondo de la cabecera, por debajo del mínimo, y a 10 px
     eso ya no se lee. */
}

/* ───────────── 43. Los siete comprobantes, en rejilla ─────────────────────
   Era una tabla de dos columnas y siete filas. En el celular se leía bien
   —una ficha debajo de otra— pero en pantalla ancha ocupaba una pantalla
   entera para decir siete cosas cortas. En rejilla se ve de un vistazo y
   sigue apilándose en el móvil, que es donde esa forma sí tiene sentido. */

.comprobantes { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin: 0; }
@media (min-width: 560px) { .comprobantes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .comprobantes { grid-template-columns: repeat(3, 1fr); } }

.comprobante {
  display: flex; flex-direction: column;
  padding: 16px 18px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
}
.comprobante dt {
  margin-bottom: var(--e-2);
  font-size: .92rem; line-height: 1.45; color: var(--suave);
}
/* El «margin-top: auto» empuja el comprobante al pie de la ficha: así los
   nombres quedan a la misma altura aunque la situación ocupe una línea más en
   unas fichas que en otras. La separación mínima la pone el margen del dt. */
.comprobante dd {
  margin: auto 0 0; padding-top: var(--e-2);
  border-top: 1px solid var(--borde-tenue);
  font-size: .95rem; font-weight: 700; color: var(--tinta);
}
/* El icono vive DENTRO de «.titulo», y el «gap» estaba en la etiqueta padre:
   entre icono y texto no se aplicaba nada, y el SVG en línea se apoyaba en la
   base del renglón en vez de centrarse. */
.explorador-lista label .titulo { display: inline-flex; align-items: center; gap: 7px; }

/* ───────────── 44. El buscador de CABYS ───────────────────────────────────
   Cada resultado es una ficha: el código arriba —que es lo que la persona
   viene a llevarse, y por eso es un botón que lo copia—, la descripción
   entera debajo y la tarifa al pie. La descripción NO se recorta: dos
   códigos vecinos se distinguen justo por el final de la frase. */

.cabys-estado { margin-top: var(--e-3); font-size: .88rem; color: var(--tenue); }
.cabys-estado:empty { display: none; }

.cabys-lista { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.cabys-lista li {
  padding: 14px 16px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
}

.cabys-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  color: var(--azul); background: var(--azul-clr);
  border: 1px solid var(--azul-borde); border-radius: var(--r-sm);
  padding: 3px 9px; cursor: pointer;
  transition: background var(--vel), color var(--vel);
}
.cabys-codigo:hover { background: var(--azul); color: #fff; }
.cabys-codigo.copiado { background: var(--verde); border-color: var(--verde); color: #fff; }
.cabys-codigo.copiado::after { content: " ✓ copiado"; font-family: inherit; font-weight: 600; }

.cabys-desc { margin-top: 8px; font-size: .95rem; line-height: 1.5; color: var(--tinta); }

.cabys-pie { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px var(--e-2); }
.cabys-iva { font-size: .84rem; font-weight: 700; color: var(--verde); }
.cabys-med { font-size: .84rem; color: var(--ambar); }

.cabys-fuente { margin-top: var(--e-3); font-size: .82rem; color: var(--tenue); }

/* ───────────── 45. Consulta de cédula y lector de clave ───────────────────
   Las dos devuelven una ficha: lo que identifica arriba y grande, los datos
   sueltos debajo en pares rótulo–valor. */

.ced-nombre {
  margin-top: var(--e-3);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--tinta);
  line-height: 1.35;
}
.clave-emisor { margin-top: 4px; font-size: .95rem; color: var(--suave); }

.ced-avisos { margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: 6px; }
.ced-alerta, .ced-ok {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .8rem; font-weight: 600;
}
.ced-alerta { background: var(--ambar-clr); color: var(--ambar); border: 1px solid var(--ambar-borde); }
.ced-ok     { background: var(--verde-clr); color: var(--verde); border: 1px solid color-mix(in srgb, var(--verde) 25%, transparent); }

.ced-datos { margin: var(--e-3) 0 0; display: grid; gap: 0; }
.ced-datos > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  padding: 9px 0; border-top: 1px solid var(--borde-tenue);
  font-size: .9rem;
}
.ced-datos dt { color: var(--suave); flex: none; }
.ced-datos dd { margin: 0; font-weight: 600; color: var(--tinta); text-align: right; }

.ced-rotulo {
  margin-top: var(--e-4);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.clave-nota { margin-top: var(--e-2); font-size: .86rem; color: var(--tenue); }

/* En la consulta de cédula el código de actividad no se copia: es un dato,
   no un botón. Se hereda el aspecto pero no el cursor ni el hover. */
span.cabys-codigo { cursor: default; }
span.cabys-codigo:hover { background: var(--azul-clr); color: var(--azul); }

/* ───────────── 46. Tipo de cambio ─────────────────────────────────────────
   El de venta manda: es el que va en el comprobante, así que ocupa el sitio
   grande y los otros dos acompañan. */

.tc-tarjetas { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin-top: var(--e-2); }
@media (min-width: 640px) { .tc-tarjetas { grid-template-columns: repeat(3, 1fr); } }

.tc-tarjeta {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
}
.tc-principal { border-color: var(--azul-borde); background: var(--azul-clr); }

.tc-rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--suave);
}
.tc-principal .tc-rotulo { color: var(--azul); }
.tc-valor {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tc-principal .tc-valor { color: var(--azul); }
.tc-nota { font-size: .8rem; color: var(--tenue); }
.tc-principal .tc-nota { color: var(--azul-osc); }

.tc-fecha { margin-top: var(--e-2); font-size: .86rem; color: var(--tenue); }

.tc-conversor { margin-top: var(--e-4); display: grid; gap: var(--e-3); }
@media (min-width: 560px) { .tc-conversor { grid-template-columns: 1fr 1fr; align-items: start; } }
.tc-resultado {
  grid-column: 1 / -1;
  padding-top: var(--e-2); border-top: 1px solid var(--borde-tenue);
  font-size: 1.15rem; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tc-resultado:empty { display: none; }

/* La rejilla de dos columnas de «.herramienta» es para la calculadora, que
   tiene formulario a un lado y resultado al otro. Las herramientas de
   consulta no: son un campo arriba y los resultados debajo, a todo lo ancho.
   Sin esto, sus bloques se repartían en celdas y la fecha acababa flotando a
   la derecha de las tarjetas. */
@media (min-width: 780px) {
  .herramienta-consulta { grid-template-columns: 1fr; gap: var(--e-3); }
}