/*!
 * sitio.css · Capa comercial de micfdi.com.mx (hecho por MagicCode.com.mx) sobre micfdi.css.
 *
 * micfdi.css trae los tokens (--mc-*), la tipografía Inter, el modo oscuro y los componentes (.mc-*). Aquí solo va
 * lo propio de un sitio de marketing (07 §6.7): encabezado, hero, secciones, tarjetas, precios, código, legales.
 * Reglas: prefijo s-, sin colores sueltos en el HTML (los pocos tonos nuevos son tokens --s-* con su contraste
 * medido abajo), sin estilos en línea (la CSP los bloquea) y movimiento solo con prefers-reduced-motion: no-preference.
 *
 * Contraste de los tonos nuevos (WCAG 2.2, sobre su fondo):
 *   texto #C8D6EA sobre #0C3A6E 7.9:1 · acento #5FD8CB sobre #0C3A6E 6.9:1 · #04201D sobre botón #4FCBBE 8.5:1
 *   código #E7ECF3 / #FFC56B / #9CC3F5 / #8F9BB0 sobre #0B1324: 15.4 / 11.4 / 9.6 / 6.6:1
 *
 * Dirección A «Sello» (plan-micfdi/19 §4, DEC-32/33/54, aprobada el 15-oct-2026), medida en 19 §4.2:
 *   tinta #10223F sobre papel #F4F7F6 14.73:1 · sobre #FFFFFF 15.88:1 · H1 #0C3A6E sobre #FFFFFF 11.38:1
 *   marcatextos: #10223F sobre #FFE27A 12.41:1 · «mi» del logotipo #00857A sobre #FFFFFF 4.53:1
 *   oscuro: #E7ECF3 sobre #0A1628 15.27:1 · sobre #111F36 13.90:1 · #B3BFCF sobre #111F36 8.85:1 · #8F9BB0 sobre #111F36 6.0:1
 *   sello #007A70 (gráfico) sobre papel 5.4:1 · banda #0A2F59 con texto #FFFFFF 13.43:1 y #C8D6EA 9.6:1
 * El documento CFDI (la hoja) es papel blanco también en modo oscuro (06 §2.8).
 */

/* =============================================================================
   1. Tokens del sitio (claro y oscuro)
   Los --mc-* de micfdi.css no se tocan (los comparte el panel). Lo que el sitio tiñe distinto con la dirección
   «Sello» (papel con tinte verde, tinta, azul tinta en oscuro) se reasigna solo dentro de body.sitio, aquí abajo.
   ============================================================================= */
:root {
  --s-ancho: 1200px;
  --s-lateral: clamp(16px, 4vw, 32px);
  --s-seccion: clamp(64px, 8vw, 112px);
  --s-alto-encabezado: 68px;
  --s-t-hero: clamp(2.25rem, 1.45rem + 2.9vw, 3.5rem);
  --s-t-h1: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  --s-t-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --s-t-lead: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
  --s-radio: 12px;
  --s-radio-lg: 16px;
  --s-radio-papel: 4px;

  /* Papel, tinta y marcatextos (19 §4.2) */
  --s-papel: #FFFFFF;
  --s-papel-tinte: #F4F7F6;
  --s-tinta: #10223F;
  --s-tinta-2: #4A5868;
  --s-titulo: var(--mc-marca-azul);
  --s-resalte: #FFE27A;
  --s-resalte-texto: #10223F;
  --s-sello: #007A70;
  --s-sello-punto: var(--mc-marca-verde);
  --s-sombra-hoja: 0 1px 0 rgba(16, 34, 63, .05), 0 22px 40px -22px rgba(16, 34, 63, .35);
  --s-perforado-r: 7px;
  --s-perforado-paso: 22px;

  /* Movimiento (19 §4.6; sistema completo en §13). Curvas: salida = entra o responde; mover = algo visible cambia de
     lugar o se revela; cajón = paneles que se deslizan. La salida siempre dura menos que la entrada. */
  --s-c-salida: cubic-bezier(.23, 1, .32, 1);
  --s-c-mover: cubic-bezier(.77, 0, .175, 1);
  --s-c-cajon: cubic-bezier(.32, .72, 0, 1);
  --s-d-presion: 120ms;
  --s-presion: scale(.97);
  --s-d-color: 140ms;
  --s-d-menu: 180ms;
  --s-d-cambio: 200ms;
  --s-d-dialogo: 220ms;
  --s-d-salida: 140ms;
  --s-d-firma: 260ms;
  --s-d-entrada: 480ms;
  --s-d-vista: 180ms;
  --s-d-espera: 300ms;
  --s-escalon: 70ms;

  --s-fondo-pagina: var(--mc-superficie);
  --s-fondo-alterno: var(--s-papel-tinte);
  --s-tarjeta-borde: var(--mc-borde);
  --s-encabezado-fondo: rgba(255, 255, 255, .92);
  --s-timbre-fondo: var(--mc-superficie);

  /* Bandas oscuras (API, llamadas finales de las páginas interiores, pie): un solo azul, sin degradados (SIT-04) */
  --s-oscuro-fondo: #0A2F59;
  --s-oscuro-fondo-2: #0A2F59;
  --s-oscuro-texto: #FFFFFF;
  --s-oscuro-texto-2: #C8D6EA;
  --s-oscuro-borde: rgba(255, 255, 255, .16);
  --s-acento-claro: #5FD8CB;
  --s-boton-hero: var(--mc-verde-300);
  --s-boton-hero-hover: var(--mc-verde-200);
  --s-boton-hero-texto: #04201D;
  --s-pie-fondo: var(--mc-azul-900);

  /* Logotipo en línea: con isotipo (pie) y solo el logotipo (encabezado, 19 §4.9) */
  --s-logo-fondo: var(--mc-marca-azul);
  --s-logo-iso: #FFFFFF;
  --s-logo-cfdi: var(--mc-marca-azul);
  --s-logo-mi: var(--mc-verde-600);

  /* Código */
  --s-codigo-fondo: #0B1324;
  --s-codigo-borde: rgba(255, 255, 255, .08);
  --s-codigo-texto: #E7ECF3;
  --s-codigo-tenue: #8F9BB0;
  --s-codigo-cadena: #FFC56B;
  --s-codigo-clave: #9CC3F5;
  --s-codigo-comando: #7DE3D7;

  --s-sombra-mock: 0 40px 80px -28px rgba(5, 23, 41, .55), 0 14px 28px -14px rgba(5, 23, 41, .30);
  --s-sombra-tarjeta: 0 0 #0000;
}
/* Respaldo de Inter con sus mismas medidas (REN-09): si la fuente llega tarde, los renglones no cambian y nada se mueve
   al llegar (CLS 0). Anchos medidos en Chromium (Inter entre Arial, mismos textos de la portada): 0.972 en 400, 0.944
   en 600 y 0.961 en 700; el alto de las mayúsculas y los descendentes, con los de Inter (0.969 y 0.242 del cuerpo). */
@font-face {
  font-family: "Inter respaldo"; font-weight: 100 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 97.2%; ascent-override: 99.7%; descent-override: 24.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter respaldo"; font-weight: 501 650;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 94.4%; ascent-override: 102.6%; descent-override: 25.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter respaldo"; font-weight: 651 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 96.1%; ascent-override: 100.8%; descent-override: 25.2%; line-gap-override: 0%;
}
/* El papel con tinte verde y la tinta de «Sello» en todo el sitio (no en el panel: este archivo solo lo carga el sitio) */
body.sitio {
  --mc-fuente: "Inter", "Inter respaldo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mc-fondo: var(--s-papel-tinte);
  --mc-superficie-hundida: #EEF3F1;
  --mc-superficie-hover: #EEF3F1;
  --mc-borde: #DCE4E1;
  --mc-texto: var(--s-tinta);
  /* AAA en el texto secundario y los enlaces (t35/w): #445063 da 7.57:1 sobre papel y 8.16:1 sobre blanco (antes
     #4E5A6C, 6.49:1); #134F96 da 7.53:1 sobre papel (antes #175AA8, 6.36:1). El texto terciario se queda en AA
     (#5F6B7E, 5.0:1) para no perder la jerarquía. Solo en claro: en oscuro ya pasan de 7:1. */
  --mc-texto-2: #445063;
  --mc-enlace: #134F96;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --s-fondo-pagina: #0A1628;
    --s-fondo-alterno: #0D1B31;
    --s-encabezado-fondo: rgba(10, 22, 40, .9);
    --s-titulo: var(--mc-texto);
    --s-timbre-fondo: #162845;
    --s-oscuro-fondo: #0D2445;
    --s-oscuro-fondo-2: #0D2445;
    --s-pie-fondo: #071120;
    --s-logo-fondo: #FFFFFF;
    --s-logo-iso: var(--mc-marca-azul);
    --s-logo-cfdi: #FFFFFF;
    --s-logo-mi: var(--mc-primario);
    --s-sombra-mock: 0 40px 80px -28px rgba(0, 0, 0, .75), 0 14px 28px -14px rgba(0, 0, 0, .55);
    --s-sombra-hoja: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 48px -24px rgba(0, 0, 0, .8);
  }
  :root:not([data-tema="claro"]) body.sitio {
    --mc-fondo: #0A1628;
    --mc-superficie: #111F36;
    --mc-superficie-2: #162845;
    --mc-superficie-hundida: #0D1B31;
    --mc-superficie-hover: #162845;
    --mc-borde: #22344F;
    --mc-borde-fuerte: #2F4566;
    --mc-texto: #E7ECF3;
    --mc-texto-2: #B3BFCF;
    --mc-enlace: #7DB0F0;
  }
}
:root[data-tema="oscuro"] {
  --s-fondo-pagina: #0A1628;
  --s-fondo-alterno: #0D1B31;
  --s-encabezado-fondo: rgba(10, 22, 40, .9);
  --s-titulo: var(--mc-texto);
  --s-timbre-fondo: #162845;
  --s-oscuro-fondo: #0D2445;
  --s-oscuro-fondo-2: #0D2445;
  --s-pie-fondo: #071120;
  --s-logo-fondo: #FFFFFF;
  --s-logo-iso: var(--mc-marca-azul);
  --s-logo-cfdi: #FFFFFF;
  --s-logo-mi: var(--mc-primario);
  --s-sombra-mock: 0 40px 80px -28px rgba(0, 0, 0, .75), 0 14px 28px -14px rgba(0, 0, 0, .55);
  --s-sombra-hoja: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 48px -24px rgba(0, 0, 0, .8);
}
:root[data-tema="oscuro"] body.sitio {
  --mc-fondo: #0A1628;
  --mc-superficie: #111F36;
  --mc-superficie-2: #162845;
  --mc-superficie-hundida: #0D1B31;
  --mc-superficie-hover: #162845;
  --mc-borde: #22344F;
  --mc-borde-fuerte: #2F4566;
  --mc-texto: #E7ECF3;
  --mc-texto-2: #B3BFCF;
  --mc-enlace: #7DB0F0;
}

/* =============================================================================
   2. Base del sitio (más aire que el panel: 16 px y 1.6)
   ============================================================================= */
html { scroll-padding-top: calc(var(--s-alto-encabezado) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.sitio { background: var(--s-fondo-pagina); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
:where(.sitio) :where(h1, h2, h3) { letter-spacing: -.02em; text-wrap: balance; }
:where(.sitio) :where(p, li) { text-wrap: pretty; }
:where(.sitio) :where(p) { margin: 0 0 1em; }
.s-principal { display: block; }
.s-principal:focus { outline: none; }
.s-contenedor { width: 100%; max-width: calc(var(--s-ancho) + 2 * var(--s-lateral)); margin: 0 auto; padding-inline: var(--s-lateral); }
.s-contenedor--angosto { max-width: calc(800px + 2 * var(--s-lateral)); }
.s-centro { text-align: center; }
.s-rejilla + .s-centro, .s-pasos + .s-centro { margin: 40px 0 0; }
.s-derecha { text-align: right; }
.sitio .mc-boton--lg { height: 48px; padding: 0 22px; border-radius: 10px; font-size: 1rem; }
.sitio .mc-boton { gap: 8px; }
.sitio .mc-saltar { z-index: 100; }

/* Logotipo en línea */
.s-logo { display: block; height: auto; }
.s-logo__fondo { fill: var(--s-logo-fondo); }
.s-logo__iso { fill: var(--s-logo-iso); }
.s-logo__cfdi { fill: var(--s-logo-cfdi); }
.s-logotipo__mi { fill: var(--s-logo-mi); }
.s-logotipo__punto { fill: var(--mc-marca-verde); }
.s-logotipo__cfdi { fill: var(--s-logo-cfdi); }

/* Contexto oscuro: texto claro, foco visible y logotipo en su versión para fondo azul */
.s-sobre-oscuro {
  --mc-foco: var(--s-acento-claro);
  --mc-enlace: #A9CBF6;
  --mc-enlace-hover: #FFFFFF;
  --s-logo-fondo: #FFFFFF;
  --s-logo-iso: var(--mc-marca-azul);
  --s-logo-cfdi: #FFFFFF;
  --s-logo-mi: var(--s-acento-claro);
  color: var(--s-oscuro-texto-2);
}
.s-sobre-oscuro :where(h1, h2, h3, h4) { color: var(--s-oscuro-texto); }

/* Botones del sitio sobre fondo oscuro */
.sitio .s-boton-hero {
  --b-fondo: var(--s-boton-hero); --b-texto: var(--s-boton-hero-texto); --b-borde: transparent;
  --b-fondo-hover: var(--s-boton-hero-hover); --b-texto-hover: var(--s-boton-hero-texto);
  box-shadow: 0 10px 28px -10px rgba(79, 203, 190, .65);
}
.sitio .s-boton-claro {
  --b-fondo: rgba(255, 255, 255, .06); --b-texto: #FFFFFF; --b-borde: rgba(255, 255, 255, .36);
  --b-fondo-hover: rgba(255, 255, 255, .14); --b-texto-hover: #FFFFFF;
  box-shadow: none;
}
.s-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.s-botones--centro { justify-content: center; }

/* =============================================================================
   3. Encabezado y menú
   ============================================================================= */
.s-encabezado {
  position: sticky; top: 0; z-index: 40;
  background: var(--s-encabezado-fondo);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  transition: border-color var(--s-d-color) ease;
}
/* Al desplazarse, solo una raya: sin sombra que flote (19 §4.4) */
.s-encabezado.es-desplazado { border-bottom-color: var(--mc-borde); }
.s-encabezado__fila { display: flex; align-items: center; gap: 20px; height: var(--s-alto-encabezado); }
.s-encabezado__marca { display: inline-flex; flex: none; border-radius: 8px; }
.s-encabezado__marca { padding: 6px 0; }
.s-encabezado__marca .s-logotipo { width: 107px; height: auto; }
.sitio .s-nav__enlace[aria-current="page"] { color: var(--s-titulo); }
/* «Entrar» corto: visible cuando «Iniciar sesión» se esconde (WEB-116); en celular, solo el ícono (el nombre sigue) */
.sitio .s-entrar-corto { display: none; }
.s-entrar-corto .mc-icono { flex: none; }
.s-nav__lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sitio .s-nav__enlace {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px;
  color: var(--mc-texto-2); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sitio .s-nav__enlace:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); text-decoration: none; }
.sitio .s-nav__enlace[aria-current="page"] { color: var(--mc-texto); font-weight: 600; }
.s-nav__enlace[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--mc-marca-verde);
}
.s-encabezado__acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.s-tema__sol { display: none; }
:root[data-tema="oscuro"] .s-tema__sol { display: block; }
:root[data-tema="oscuro"] .s-tema__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .s-tema__sol { display: block; }
  :root:not([data-tema="claro"]) .s-tema__luna { display: none; }
}

.s-menu { display: none; }
.s-menu > summary { list-style: none; }
.s-menu > summary::-webkit-details-marker { display: none; }
.s-menu__cerrar, .s-menu[open] .s-menu__abrir { display: none; }
.s-menu[open] .s-menu__cerrar { display: block; }
.s-menu__panel {
  position: fixed; top: var(--s-alto-encabezado); left: 0; right: 0; z-index: 50;
  max-height: calc(100vh - var(--s-alto-encabezado)); max-height: calc(100dvh - var(--s-alto-encabezado)); overflow-y: auto;
  padding: 12px var(--s-lateral) 24px;
  background: var(--mc-superficie); border-bottom: 1px solid var(--mc-borde); box-shadow: var(--mc-sombra-3);
}
.s-menu__lista { margin: 0; padding: 0; list-style: none; }
.sitio .s-menu__lista a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px;
  color: var(--mc-texto); font-size: 1.0625rem; font-weight: 500; text-decoration: none;
}
.sitio .s-menu__lista a:hover { background: var(--mc-superficie-hover); text-decoration: none; }
.sitio .s-menu__lista a[aria-current="page"] { background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); }
.s-menu__acciones { display: grid; gap: 10px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--mc-borde); }

@media (max-width: 1279px) { .s-nav__extra { display: none; } }
@media (max-width: 1099px) {
  .s-nav, .sitio .s-solo-amplio { display: none !important; }
  .s-menu { display: block; }
  .sitio .s-encabezado .s-entrar-corto { display: inline-flex; }
}
@media (max-width: 559px) {
  .sitio .s-entrar-corto { width: 38px; padding: 0; justify-content: center; }
  .s-entrar-corto__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s-encabezado__acciones { gap: 2px; }
}
@media (max-width: 380px) {
  .s-encabezado__cta { padding: 0 12px; }
  .s-encabezado__marca .s-logotipo { width: 92px; }
}

/* =============================================================================
   4. Hero: papel blanco con la hoja CFDI como protagonista y el sello que cae (19 §4.7, WEB-106)
   Sin resplandores, retícula, pastilla ni tarjetas que flotan. Lo único que se mueve es la hoja, una vez.
   ============================================================================= */
.s-hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); background: var(--s-fondo-pagina); }
.s-hero__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.sitio .s-hero__titulo {
  max-width: 9.75em; margin: 0; color: var(--s-titulo);
  font-size: var(--s-t-hero); font-weight: 700; line-height: 1.06; letter-spacing: -.032em;
}
.s-hero__lead { max-width: 34em; margin: 22px 0 0; color: var(--mc-texto-2); font-size: var(--s-t-lead); line-height: 1.6; }
/* Dos renglones fijos: el alto no cambia cuando llega la fuente (sin salto de diseño) */
.sitio .s-hero__precio { margin: 18px 0 0; color: var(--mc-texto); font-size: 1.0625rem; }
.s-hero__precio > span { display: block; }
.s-hero__precio .s-precio { font-weight: 650; font-variant-numeric: tabular-nums; }
.s-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sitio .s-hero__entrar { margin: 16px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }

/* Selector de perfil (WEB-122): radios de verdad; el texto y el botón secundario cambian con CSS, sin JavaScript */
.s-perfil { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.sitio .s-perfil__titulo { display: block; margin: 0 0 8px; padding: 0; color: var(--mc-texto-2); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.s-perfil__opciones { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--mc-borde-control); border-radius: 10px; background: var(--mc-superficie); }
.s-perfil__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.s-perfil__opcion {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 7px;
  color: var(--mc-texto-2); font-size: .9375rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--s-d-color) ease, color var(--s-d-color) ease;
}
.s-perfil__radio:checked + .s-perfil__opcion { background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); font-weight: 650; box-shadow: inset 0 0 0 1px var(--mc-primario); }
.s-perfil__radio:focus-visible + .s-perfil__opcion { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .s-perfil__radio:not(:checked) + .s-perfil__opcion:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); }
}
.sitio .s-perfil__texto { max-width: 36em; margin: 12px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-perfil__texto, .s-hero__acciones .s-perfil__boton { display: none; }
.s-hero__texto:has(#perfil-negocio:checked) [data-perfil="negocio"],
.s-hero__texto:has(#perfil-contador:checked) [data-perfil="contador"],
.s-hero__texto:has(#perfil-api:checked) [data-perfil="api"] { display: block; }
.s-hero__texto:has(#perfil-negocio:checked) .s-perfil__boton[data-perfil="negocio"],
.s-hero__texto:has(#perfil-contador:checked) .s-perfil__boton[data-perfil="contador"],
.s-hero__texto:has(#perfil-api:checked) .s-perfil__boton[data-perfil="api"] { display: inline-flex; }
@supports not selector(:has(*)) {
  .s-perfil__opciones, .sitio .s-perfil__titulo { display: none; }
  [data-perfil="negocio"].s-perfil__texto { display: block; }
  [data-perfil="negocio"].s-perfil__boton { display: inline-flex; }
}

/* La hoja CFDI: papel blanco también en oscuro, la única sombra «de hoja», trama de seguridad arriba */
.s-hero__hoja { position: relative; min-width: 0; }
.s-hoja {
  --mc-texto: #10223F; --mc-texto-2: #4A5868;
  position: relative; overflow: hidden; border: 1px solid #E3E9E7; border-radius: var(--s-radio-papel);
  background: var(--s-papel); color: #10223F; box-shadow: var(--s-sombra-hoja); font-size: 14px; line-height: 1.45;
}
.s-hoja p { margin: 0; }
.s-hoja__trama { height: 22px; background: url("/img/marca/trama-hoja.svg") 0 0 / 100% 100% no-repeat; }
.s-hoja__cuerpo { padding: 14px clamp(18px, 3vw, 32px) 22px; }
.s-hoja__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #DFE5EC; }
.s-hoja__razon { font-weight: 700; letter-spacing: .01em; }
.s-hoja__tipo { color: var(--mc-marca-azul); font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.s-hoja__id { letter-spacing: .02em; font-feature-settings: "zero" 1, "cv05" 1, "cv08" 1; }
.s-hoja__fila { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid #DFE5EC; }
.s-hoja__et { color: #4A5868; font-size: 12.5px; font-weight: 600; }
.s-hoja__totales { width: min(250px, 100%); margin: 12px 0 0 auto; }
.s-hoja__totales div { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; }
.s-hoja__totales dt { color: #4A5868; }
.s-hoja__totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.s-hoja__total { margin-top: 4px; padding-top: 7px !important; border-top: 1px solid #10223F; font-size: 1.0625rem; font-weight: 700; }
.s-hoja__total dt { color: #10223F; }
.s-hoja__timbre {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: 18px; padding: 16px 92px 0 0; border-top: 1px dashed #C9D2DC;
}
.s-hoja__qr { display: block; width: 100%; height: auto; }
.s-hoja__qr path { fill: #10223F; }
.s-hoja__uuid { margin-bottom: 8px !important; font-size: 13px; overflow-wrap: anywhere; }
.s-hoja__vigente { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #E3F5EA; color: #0E6B3E; font-size: 13px; font-weight: 600; }
.s-hoja__nota { margin: 14px 0 0; color: var(--mc-texto-2); font-size: .8125rem; }

/* Marcatextos: solo sobre datos fiscales, nunca en titulares (19 §4.2) */
mark.s-resalte {
  padding: 0 3px; border-radius: 2px; color: var(--s-resalte-texto);
  background: linear-gradient(var(--s-resalte), var(--s-resalte)) no-repeat 0 0 / 100% 100%;
}

/* El sello «timbrado ante el SAT»: tinta sobre papel (multiply), en la esquina del timbre */
.s-sello {
  position: absolute; right: -10px; bottom: -18px; width: 108px; height: 108px; overflow: visible;
  transform: rotate(-6deg); mix-blend-mode: multiply; opacity: .9; pointer-events: none;
}
.s-sello__aro { fill: none; stroke: var(--s-sello); }
.s-sello__texto { fill: var(--s-sello); font: 600 7.2px var(--mc-fuente); letter-spacing: .02em; }
.s-sello__punto { fill: var(--s-sello-punto); }

/* El momento: una sola vez al cargar, unos 1.6 s (MOV-23). Marcatextos de izquierda a derecha, el sello cae sin
   rebote (260 ms, -8° a -6°), el folio fiscal se revela, el QR se enfoca y «Vigente» sube 6 px. Si ya se vio en la
   sesión, sitio.js pone .es-quieta y todo queda en su estado final. Sin JavaScript también queda en su estado final. */
@media (prefers-reduced-motion: no-preference) {
  .js .s-hoja:not(.es-quieta) mark.s-resalte { animation: s-marcar 420ms var(--s-c-mover) both; }
  .js .s-hoja:not(.es-quieta) .s-hoja__fila mark.s-resalte:first-child { animation-delay: 250ms; }
  .js .s-hoja:not(.es-quieta) .s-hoja__fila mark.s-resalte:last-child { animation-delay: 340ms; }
  .js .s-hoja:not(.es-quieta) .s-hoja__total mark.s-resalte { animation-delay: 460ms; }
  .js .s-hoja:not(.es-quieta) .s-sello { animation: s-sello-cae var(--s-d-firma) var(--s-c-salida) 900ms both; }
  .js .s-hoja:not(.es-quieta) .s-hoja__uuid { animation: s-revelar-folio 320ms var(--s-c-mover) 1040ms both; }
  .js .s-hoja:not(.es-quieta) .s-hoja__uuid mark.s-resalte { animation-delay: 1180ms; }
  .js .s-hoja:not(.es-quieta) .s-hoja__qr { animation: s-enfocar 240ms ease 1100ms both; }
  .js .s-hoja:not(.es-quieta) .s-hoja__vigente { animation: s-subir 200ms var(--s-c-salida) 1390ms both; }
}
/* Movimiento reducido: menos, no cero. Sin giros ni escalas: el sello y «Vigente» solo se funden (150 ms) */
@media (prefers-reduced-motion: reduce) {
  .js .s-hoja:not(.es-quieta) .s-sello, .js .s-hoja:not(.es-quieta) .s-hoja__vigente { animation: s-fundir 150ms ease 300ms both; }
}
@keyframes s-marcar { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@keyframes s-sello-cae { from { opacity: 0; transform: rotate(-8deg) scale(1.08); } to { opacity: .9; transform: rotate(-6deg) scale(1); } }
@keyframes s-revelar-folio { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes s-enfocar { from { opacity: .15; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
@keyframes s-subir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes s-fundir { from { opacity: 0; } }

/* =============================================================================
   5. Cifras, secciones, rejillas y tarjetas
   ============================================================================= */
/* Prueba de uso (WEB-107): una franja de texto, no cifras gigantes con etiqueta chica */
.s-prueba { padding-block: 22px; border-block: 1px solid var(--mc-borde); background: var(--s-fondo-alterno); }
.s-prueba__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.s-prueba__cifras { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; color: var(--mc-texto-2); }
.s-prueba__cifras strong, .s-prueba__desde { color: var(--mc-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.sitio .s-prueba__desde { margin: 0; }
.sitio .s-prueba__nota { margin: 0 0 0 auto; color: var(--mc-texto-3); font-size: .8125rem; }
.s-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 22px; }
.s-testimonio { margin: 0; padding-left: 18px; border-left: 3px solid var(--mc-marca-verde); }
.s-testimonio__cita { margin: 0; color: var(--mc-texto); font-size: 1.0625rem; }
.s-testimonio__cita p { margin: 0; }
.s-testimonio__quien { margin-top: 8px; color: var(--mc-texto-2); font-size: .875rem; }

.s-seccion { padding-block: var(--s-seccion); }
.s-seccion--alterna { background: var(--s-fondo-alterno); }
.s-seccion:not(.s-seccion--alterna) { --s-fondo-paso: var(--s-fondo-pagina); }
.s-seccion--compacta { padding-block: clamp(48px, 6vw, 80px); }
.s-seccion--cta { padding-top: 0; }
.s-seccion--alterna + .s-seccion--cta, .s-seccion + .s-seccion--cta { padding-top: var(--s-seccion); }
.s-seccion.s-seccion--compacta + .s-seccion--cta { padding-top: 0; }
.s-seccion:not(.s-seccion--alterna, .s-banda-api) + .s-seccion--cta { padding-top: 0; }
.s-seccion--papel + .s-seccion--papel.s-seccion--cta { padding-top: 0; }
.s-seccion__encabezado { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.s-seccion__encabezado--izquierda { margin-left: 0; text-align: left; }
.sitio .s-seccion__titulo { margin: 0; color: var(--mc-texto); font-size: var(--s-t-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.s-sobre-oscuro .s-seccion__titulo { color: var(--s-oscuro-texto); }
.s-seccion__lead { margin: 16px 0 0; color: var(--mc-texto-2); font-size: var(--s-t-lead); }
.s-sobre-oscuro .s-seccion__lead { color: var(--s-oscuro-texto-2); }
.s-seccion__lead a { font-weight: 600; }

/* La ceja ya no lleva punto: solo dice de qué va la sección (19 §3.1) */
.s-ceja { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--mc-primario); font-size: .9375rem; font-weight: 600; }
.s-ceja--clara { color: var(--s-acento-claro); }
.s-ceja--icono::before { display: none; }

.s-rejilla { display: grid; gap: 20px; }
.s-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.s-enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sitio a.s-enlace-flecha { color: var(--mc-enlace); text-decoration: none; }
.sitio a.s-enlace-flecha:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .s-enlace-flecha .mc-icono { transition: transform var(--mc-transicion); }
  .s-enlace-flecha:hover .mc-icono { transform: translateX(3px); }
}

/* Encabezado de sección a la izquierda (SIT-05) */
.s-cabeza-seccion { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); }
.s-seccion--papel { background: var(--s-fondo-alterno); }

/* Cómo funciona: un pliego de tres timbres con perforaciones entre ellos (WEB-123 b) */
.s-pliego {
  --s-agujero: var(--s-fondo-alterno);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border-radius: 2px; background: var(--s-timbre-fondo);
}
.s-pliego__paso { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 32px); }
.s-pliego__paso + .s-pliego__paso::before {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: -4px; width: 8px;
  background: radial-gradient(circle, var(--s-agujero) 3px, transparent 3.5px) center top / 8px 14px repeat-y;
}
.s-pliego__numero {
  position: absolute; top: clamp(18px, 2.4vw, 28px); right: clamp(20px, 2.6vw, 32px);
  color: var(--s-titulo); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.sitio .s-pliego__titulo { max-width: 13em; margin: 0 56px 10px 0; color: var(--mc-texto); font-size: 1.1875rem; font-weight: 650; line-height: 1.3; }
.sitio .s-pliego__texto { flex: 1 1 auto; margin: 0 0 20px; color: var(--mc-texto-2); }
.s-pliego__muestra {
  display: grid; gap: 6px; padding: 12px 14px; border: 1px solid #E3E9E7; border-radius: var(--s-radio-papel);
  background: var(--s-papel); color: #10223F; font-size: 12.5px; line-height: 1.4;
}
.s-pliego__linea { color: #4A5868; }
.s-pliego__dato { font-weight: 600; }
.s-pliego__vigente { display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 1px 9px 1px 7px; border-radius: 999px; background: #E3F5EA; color: #0E6B3E; font-weight: 600; }

/* Funciones y «después de timbrar» en una sola sección, como listas (WEB-123 c, SIT-06) */
.s-columnas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sitio .s-columnas__mas { margin: 22px 0 0; }
.s-columnas__listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sitio .s-columnas__titulo { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--mc-borde-fuerte); color: var(--mc-texto); font-size: 1.0625rem; font-weight: 650; }
/* Viñetas en forma de timbre pequeño (19 §3, motivo de Timbi) */
.s-vinetas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--mc-texto-2); }
.s-vinetas li { padding-left: 24px; background: url("/img/marca/vineta-timbre.svg") 0 .32em / 12px 14px no-repeat; }
.s-vinetas strong { color: var(--mc-texto); font-weight: 650; }

/* Franja «¿Te llegó una factura?» */
.s-franja-verifica { padding-block: 28px; border-block: 1px solid var(--mc-borde); background: var(--s-fondo-alterno); }
.s-franja-verifica__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.sitio .s-franja-verifica__titulo { margin: 0; color: var(--mc-texto); font-size: 1.25rem; font-weight: 700; }
.sitio .s-franja-verifica__texto { margin: 4px 0 0; color: var(--mc-texto-2); }

/* Objeciones (WEB-108): a la izquierda lo de cambiarse; a la derecha, lo que está por escrito */
.s-objeciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.s-objeciones__lista { display: grid; margin: 28px 0 0; padding: 0; list-style: none; }
.s-objeciones__lista li { padding: 18px 0 18px 26px; border-top: 1px solid var(--mc-borde); background: url("/img/marca/vineta-timbre.svg") 0 1.6em / 12px 14px no-repeat; }
.sitio .s-objeciones__titulo { margin: 0 0 4px; color: var(--mc-texto); font-size: 1.0625rem; font-weight: 650; }
.sitio .s-objeciones__lista p { margin: 0; color: var(--mc-texto-2); }
.s-garantias { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--mc-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.sitio .s-garantias__titulo { margin: 0 0 6px; color: var(--mc-texto); font-size: 1.25rem; font-weight: 700; }
.s-garantias__lista { margin: 0; }
.s-garantias__lista > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--mc-borde); }
.s-garantias__lista > div:last-child { border-bottom: 0; padding-bottom: 0; }
.s-garantias__lista dt { color: var(--mc-texto); font-weight: 650; }
.s-garantias__lista dd { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
/* Enlaces dentro del texto: subrayados, no solo de otro color (WCAG 1.4.1) */
.sitio .s-garantias a { text-decoration: underline; text-underline-offset: .15em; }

.s-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; position: relative; }
.s-pasos::before {
  content: ""; position: absolute; top: 24px; left: calc(16.66% + 28px); right: calc(16.66% + 28px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--mc-borde-fuerte) 0 8px, transparent 8px 16px);
}
.s-paso { position: relative; text-align: center; padding: 0 12px; }
.s-paso__numero {
  position: relative; display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px;
  border-radius: 50%; background: var(--mc-primario); color: var(--mc-primario-texto);
  font-size: 1.25rem; font-weight: 700; box-shadow: 0 0 0 8px var(--s-fondo-paso, var(--s-fondo-alterno));
}
.sitio .s-paso__titulo { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 650; }
.s-paso__texto { max-width: 30ch; margin: 0 auto; color: var(--mc-texto-2); }

.s-funcion { display: flex; gap: 16px; padding: 24px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.s-funcion__icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--mc-primario-suave); color: var(--mc-primario); }
.sitio .s-funcion__titulo { margin: 2px 0 6px; font-size: 1.0625rem; font-weight: 650; }
.s-funcion__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-funcion__nota { margin: 10px 0 0; color: var(--mc-texto-3); font-size: .875rem; }
.s-funcion--proxima { border-style: dashed; background: var(--s-fondo-pagina); }
.s-funcion--proxima .s-funcion__icono { background: var(--mc-superficie-hundida); color: var(--mc-texto-2); }
.s-funcion__encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 6px; }
.s-funcion__encabezado .s-funcion__titulo { margin: 0; }

.s-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.s-dividido--invertido > :first-child { order: 2; }
.s-dividido--preguntas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.s-dividido__texto .s-seccion__titulo { text-align: left; }

.s-lista-check { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.s-lista-check li { display: flex; align-items: flex-start; gap: 12px; }
.s-lista-check .mc-icono {
  flex: none; width: 22px; height: 22px; margin-top: 2px; padding: 4px; border-radius: 50%;
  background: var(--mc-primario-suave); color: var(--mc-primario); stroke-width: 2.6;
}
.s-sobre-oscuro .s-lista-check .mc-icono { background: rgba(95, 216, 203, .14); color: var(--s-acento-claro); }

/* Banda de la API: un solo azul, sin manchas (SIT-04) */
.s-banda-api { background: var(--s-oscuro-fondo-2); }

/* Código */
.s-codigo { margin: 0; overflow: hidden; border: 1px solid var(--s-codigo-borde); border-radius: 14px; background: var(--s-codigo-fondo); box-shadow: var(--s-sombra-mock); }
.s-codigo__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--s-codigo-borde); color: #9DB3D3; font-size: .8125rem; }
.s-codigo__pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; color: var(--s-codigo-texto); font-family: var(--mc-fuente-mono); font-size: .8125rem; line-height: 1.7; tab-size: 2; }
.s-codigo__pre code { font-size: inherit; }
.s-codigo__pre:focus-visible { outline: 2px solid var(--s-acento-claro); outline-offset: -2px; }
.s-c-cmd { color: var(--s-codigo-comando); }
.s-c-txt { color: var(--s-codigo-cadena); }
.s-c-cla { color: var(--s-codigo-clave); }
.s-c-com { color: var(--s-codigo-tenue); }
.sitio .s-copiar {
  --b-fondo: transparent; --b-texto: #C8D6EA; --b-borde: rgba(255, 255, 255, .18); --b-fondo-hover: rgba(255, 255, 255, .08); --b-texto-hover: #FFFFFF;
  box-shadow: none;
}
.s-pestanas-codigo { display: flex; gap: 2px; }
.sitio .s-pestanas-codigo button {
  height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: #9DB3D3; font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.sitio .s-pestanas-codigo button[aria-selected="true"] { border-bottom-color: var(--s-acento-claro); color: #FFFFFF; }
.sitio .s-pestanas-codigo button:focus-visible { outline: 2px solid var(--s-acento-claro); outline-offset: -2px; }

/* Confianza */
.s-confianza { padding: 4px 4px 0; }
.s-formas-pago { margin: 0; padding: 0; list-style: none; }
.s-formas-pago__nota { margin: 32px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-confianza__icono { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 12px; background: var(--mc-superficie-hundida); color: var(--mc-primario); }
.sitio .s-confianza__titulo { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 650; }
.s-confianza__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }

/* Acordeón de preguntas */
.s-acordeon { display: flex; flex-direction: column; gap: 12px; }
.s-acordeon__item { border: 1px solid var(--s-tarjeta-borde); border-radius: 14px; background: var(--mc-superficie); transition: border-color var(--mc-transicion), box-shadow var(--mc-transicion); }
.s-acordeon__item[open] { border-color: var(--mc-borde-fuerte); box-shadow: var(--s-sombra-tarjeta); }
.s-acordeon__pregunta {
  position: relative; display: block; padding: 18px 56px 18px 22px; border-radius: 14px;
  color: var(--mc-texto); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer;
}
.s-acordeon__pregunta::-webkit-details-marker { display: none; }
.s-acordeon__pregunta::after {
  content: ""; position: absolute; top: 50%; right: 24px; width: 9px; height: 9px;
  border-right: 2px solid var(--mc-texto-3); border-bottom: 2px solid var(--mc-texto-3);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--mc-transicion);
}
.s-acordeon__item[open] > .s-acordeon__pregunta::after { transform: translateY(-25%) rotate(-135deg); }
.s-acordeon__respuesta { padding: 0 22px 20px; color: var(--mc-texto-2); }
.s-acordeon__respuesta p:last-child { margin-bottom: 0; }

/* Llamada final: un timbre con el borde perforado de Timbi (19 §3). La oscura de las páginas interiores y la de papel
   de la portada comparten la forma; la máscara recorta los semicírculos de las cuatro orillas. */
.s-cta, .s-pliego {
  --r: var(--s-perforado-r); --p: var(--s-perforado-paso);
  -webkit-mask:
    radial-gradient(circle at 50% 0, #000 var(--r), #0000 calc(var(--r) + .5px)) top / var(--p) var(--r) round no-repeat,
    radial-gradient(circle at 50% 100%, #000 var(--r), #0000 calc(var(--r) + .5px)) bottom / var(--p) var(--r) round no-repeat,
    radial-gradient(circle at 0 50%, #000 var(--r), #0000 calc(var(--r) + .5px)) left / var(--r) var(--p) no-repeat round,
    radial-gradient(circle at 100% 50%, #000 var(--r), #0000 calc(var(--r) + .5px)) right / var(--r) var(--p) no-repeat round,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    radial-gradient(circle at 50% 0, #000 var(--r), #0000 calc(var(--r) + .5px)) top / var(--p) var(--r) round no-repeat,
    radial-gradient(circle at 50% 100%, #000 var(--r), #0000 calc(var(--r) + .5px)) bottom / var(--p) var(--r) round no-repeat,
    radial-gradient(circle at 0 50%, #000 var(--r), #0000 calc(var(--r) + .5px)) left / var(--r) var(--p) no-repeat round,
    radial-gradient(circle at 100% 50%, #000 var(--r), #0000 calc(var(--r) + .5px)) right / var(--r) var(--p) no-repeat round,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.s-cta { position: relative; padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 64px); border-radius: 2px; background: var(--s-oscuro-fondo); text-align: center; }
.sitio .s-cta__titulo { margin: 0; color: #FFFFFF; font-size: var(--s-t-h2); font-weight: 700; letter-spacing: -.03em; }
.s-cta__texto { max-width: 36em; margin: 14px auto 0; color: var(--s-oscuro-texto-2); font-size: var(--s-t-lead); }
/* La de la portada: timbre de papel con su marco interior y Timbi a un lado */
.s-cta--timbre { padding: 16px; background: var(--s-timbre-fondo); text-align: left; }
.s-cta__interior {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px) clamp(22px, 4.5vw, 56px); border: 1.5px solid var(--mc-marca-verde); border-radius: 2px;
}
.s-cta--timbre .s-cta__titulo { max-width: 20ch; color: var(--s-titulo); }
.s-cta--timbre .s-cta__texto { margin: 12px 0 0; color: var(--mc-texto-2); }
.s-cta--timbre .s-botones { margin-top: 24px; }

/* =============================================================================
   6. Encabezado de página interior
   ============================================================================= */
.s-cabecera { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); background: var(--s-fondo-alterno); border-bottom: 1px solid var(--mc-borde); }
.s-cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 80% at 90% 0%, color-mix(in srgb, var(--mc-marca-verde) 14%, transparent), transparent 70%);
}
.s-cabecera__migas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--mc-texto-3); font-size: .875rem; }
.s-cabecera__migas li + li::before { content: "/"; margin-right: 6px; color: var(--mc-borde-fuerte); }
.s-cabecera__migas a { color: var(--mc-texto-2); }
.sitio .s-cabecera__titulo { max-width: 22ch; margin: 0; color: var(--mc-texto); font-size: var(--s-t-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.s-cabecera__lead { max-width: 40em; margin: 18px 0 0; color: var(--mc-texto-2); font-size: var(--s-t-lead); }
.s-cabecera--centro { text-align: center; }
.s-cabecera--centro .s-cabecera__titulo, .s-cabecera--centro .s-cabecera__lead { margin-inline: auto; }
.s-cabecera--centro .s-cabecera__migas { justify-content: center; }
.s-cabecera .s-botones { margin-top: 28px; }

/* Navegación por secciones (chips) */
.s-saltos { position: sticky; top: var(--s-alto-encabezado); z-index: 20; border-bottom: 1px solid var(--mc-borde); background: var(--s-encabezado-fondo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.s-saltos__lista { display: flex; gap: 8px; margin: 0; padding: 12px 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.s-saltos__lista::-webkit-scrollbar { display: none; }
.sitio .s-saltos__lista a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--mc-borde-fuerte); border-radius: 999px;
  background: var(--mc-superficie); color: var(--mc-texto-2); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sitio .s-saltos__lista a:hover { border-color: var(--mc-primario); color: var(--mc-texto); text-decoration: none; }

.s-grupo { padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--mc-borde); scroll-margin-top: calc(var(--s-alto-encabezado) + 64px); }
.s-grupo:last-of-type { border-bottom: 0; }
.s-grupo__encabezado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 32px; }
.sitio .s-grupo__titulo { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.s-grupo__descripcion { margin: 0; color: var(--mc-texto-2); font-size: 1.0625rem; }
.s-grupo--ia { padding: clamp(28px, 4vw, 48px); margin-block: clamp(32px, 4vw, 48px); border: 1px dashed var(--mc-borde-fuerte); border-radius: var(--s-radio-lg); background: var(--s-fondo-alterno); }

/* Insignia «Próximamente» */
.s-proximamente { --i-texto: var(--mc-info-texto); --i-fondo: var(--mc-info-fondo); --i-borde: var(--mc-info-borde); --i-punto: var(--mc-info); }

/* =============================================================================
   7. Precios y calculadora
   ============================================================================= */
/* Tantas columnas como planes, hasta 5 en una fila (DS-08); con 6 o más, filas parejas */
.s-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 20px; align-items: stretch; }
@media (min-width: 1100px) {
  .s-precios:has(> .s-plan:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-precios:has(> .s-plan:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-plan {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px;
  border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta);
}
.s-plan--destacado { border-color: var(--mc-primario); box-shadow: 0 0 0 1px var(--mc-primario), var(--s-sombra-tarjeta); }
/* Centrada en el borde y en hasta dos renglones: una etiqueta larga ya no se sale de la tarjeta (DS-05) */
.s-plan__etiqueta {
  position: absolute; top: 0; left: 24px; max-width: calc(100% - 48px); transform: translateY(-50%);
  height: auto; min-height: 24px; padding-block: 4px; line-height: 1.25; white-space: normal; text-wrap: balance;
}
.sitio .s-plan__nombre { margin: 0; font-size: 1.125rem; font-weight: 650; }
.s-plan__descripcion { min-height: 3em; margin: 6px 0 18px; color: var(--mc-texto-2); font-size: .9375rem; }
.s-plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--mc-texto); container-type: inline-size; }
/* Un monto nunca se corta ni se parte: según cuántos caracteres tiene, se achica para caber en su tarjeta (DS-06) */
.s-plan__monto { font-size: 2.25rem; font-size: min(2.25rem, 25cqi); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Primero un tamaño fijo para navegadores sin unidades de contenedor (cqi); después, el que se ajusta */
.s-plan__monto--mediano { font-size: 1.75rem; font-size: min(2.25rem, 17.5cqi); }
.s-plan__monto--largo { font-size: 1.375rem; font-size: min(2.25rem, 13.5cqi); }
.s-plan__monto--enorme { font-size: 1.125rem; font-size: min(2.25rem, 11cqi); }
.s-plan__periodo { color: var(--mc-texto-3); font-size: .875rem; }
.s-plan__unitario { margin: 6px 0 0; color: var(--mc-texto-2); font-size: .875rem; }
.s-plan__lista { display: grid; gap: 10px; margin: 22px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--mc-borde); list-style: none; font-size: .9375rem; }
.s-plan__lista li { display: flex; gap: 10px; }
.s-plan__lista .mc-icono { flex: none; margin-top: 3px; color: var(--mc-primario); stroke-width: 2.4; }
.s-plan__nota { margin: -12px 0 20px; color: var(--mc-texto-3); font-size: .8125rem; }
.s-plan__nota:empty { margin: 0; }
.s-plan .mc-boton { margin-top: auto; }
/* §precios (lote 1) ------------------------------------------------------------------------------------------
   Talón de timbre (WEB-126, dirección A «Sello»): la lista se separa con una línea perforada y dos muescas en los
   bordes, como el talón de un timbre; no hay máscara, así la etiqueta y la sombra no se recortan. */
.s-plan__lista { position: relative; align-content: start; border-top: 2px dashed var(--mc-borde); }
.s-plan__lista::before, .s-plan__lista::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border: 1px solid var(--s-tarjeta-borde);
  border-radius: 50%; background: var(--s-fondo-pagina);
}
.s-plan__lista::before { left: -33px; clip-path: inset(0 0 0 50%); }
.s-plan__lista::after { right: -33px; clip-path: inset(0 50% 0 0); }
.s-plan--destacado .s-plan__lista::before, .s-plan--destacado .s-plan__lista::after { border-color: var(--mc-primario); box-shadow: 0 0 0 1px var(--mc-primario); }
.s-plan__restriccion { color: var(--mc-texto-2); font-size: .875rem; }
.sitio .s-plan__lista .s-plan__restriccion .mc-icono { color: var(--mc-texto-3); stroke-width: 2; }
.s-plan__etiqueta[hidden] { display: none; }
/* Total a pagar (WEB-110): con IVA y, para persona moral, menos la retención; el que no corresponde se esconde */
.s-plan__total { margin: 10px 0 0; color: var(--mc-texto-2); font-size: .875rem; line-height: 1.45; }
.s-total-pagar { display: block; }
.s-total-pagar strong { color: var(--mc-texto); font-weight: 650; font-variant-numeric: tabular-nums; }
@supports selector(:has(*)) {
  .s-por-persona:has(input[name="persona"][value="moral"]:checked) .s-total--fisica,
  .s-por-persona:not(:has(input[name="persona"][value="moral"]:checked)) .s-total--moral { display: none; }
}
/* Selector «Persona física / Persona moral» */
.s-persona { margin: 0 0 28px; padding: 0; border: 0; text-align: center; }
.s-persona__titulo { float: left; width: 100%; margin: 0 0 10px; padding: 0; color: var(--mc-texto-2); font-size: .9375rem; font-weight: 500; }
.s-persona__opciones { clear: both; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--s-tarjeta-borde); border-radius: 999px; background: var(--mc-superficie); }
.s-persona__opcion { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--mc-texto-2); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.s-persona__opcion input { accent-color: var(--mc-primario); margin: 0; }
@supports selector(:has(*)) {
  .s-persona__opcion input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .s-persona__opcion:has(input:checked) { background: var(--mc-primario); color: var(--mc-primario-texto); }
  .s-persona__opcion:has(input:focus-visible) { outline: 2px solid var(--mc-primario); outline-offset: 2px; }
  .s-persona__opcion:not(:has(input:checked)):hover { background: var(--mc-superficie-hover); color: var(--mc-texto); }
}
@media (prefers-reduced-motion: reduce) { .s-persona__opcion { transition: none; } }
.s-forma-pago--pronto { opacity: .86; }
.s-forma-pago--hoy { border-color: var(--mc-primario); }
.s-confianza__titulo .mc-insignia { vertical-align: 2px; margin-left: 4px; }
/* fin §precios */
/* Cada pieza de la tarjeta en su renglón compartido (8 con el total a pagar): los precios quedan a la misma altura (DS-11) */
@supports (grid-template-rows: subgrid) {
  .s-plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
  .s-plan > .mc-boton { align-self: end; }
}

.s-calculadora { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio-lg); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
.s-calculadora__entrada { padding: clamp(24px, 4vw, 44px); border-right: 1px solid var(--mc-borde); }
.s-calculadora__resultado { padding: clamp(24px, 4vw, 44px); background: var(--s-fondo-alterno); }
.sitio .s-calculadora__titulo { margin: 0 0 6px; font-size: 1.375rem; font-weight: 700; }
.s-calculadora__ayuda { margin: 0 0 24px; color: var(--mc-texto-2); }
.s-calculadora__campo { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: center; }
.s-calculadora .mc-control { height: 48px; font-size: 1.125rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.s-rango { width: 100%; height: 6px; margin: 0; border-radius: 999px; background: var(--mc-superficie-hundida); accent-color: var(--mc-primario); cursor: pointer; }
.s-calculadora__atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.s-calculadora__atajos button { min-height: 36px; }
.s-calculadora__enviar { margin-top: 22px; }
.js .s-calculadora__enviar { display: none; }
.s-recomendacion__etiqueta { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.sitio .s-recomendacion__plan { margin: 4px 0 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; }
.s-recomendacion__cifras { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; }
.s-recomendacion__cifras div { display: grid; }
.s-recomendacion__cifras dt { color: var(--mc-texto-3); font-size: .8125rem; }
.s-recomendacion__cifras dd { margin: 0; color: var(--mc-texto); font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.s-recomendacion__detalle { margin: 12px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-opciones { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mc-borde); }
.s-opciones li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--mc-borde); font-size: .9375rem; }
.s-opciones li.es-mejor { color: var(--mc-texto); font-weight: 600; }
.s-opciones__detalle { grid-column: 1; color: var(--mc-texto-3); font-size: .8125rem; font-weight: 400; }
.s-opciones__monto { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-variant-numeric: tabular-nums; }
.s-calculadora__nota { margin: 16px 0 0; color: var(--mc-texto-3); font-size: .8125rem; }
/* §calculadora (lote 1): la compra que conviene, su total a pagar y Timbi (WEB-110, 128 y 130) */
.s-calculadora .s-persona { margin: 22px 0 0; text-align: left; }
.s-calculadora .s-persona__titulo { font-size: .875rem; }
.s-recomendacion__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.s-recomendacion__timbi.s-timbi { width: 56px; margin-top: -4px; }
.s-recomendacion__compra { margin: 4px 0 0; color: var(--mc-texto); font-weight: 600; }
.s-recomendacion__conviene { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--mc-exito-borde); border-radius: 12px; background: var(--mc-exito-fondo); color: var(--mc-texto); font-size: .9375rem; }
.s-recomendacion__conviene strong { color: var(--mc-exito-texto); }
.s-recomendacion__conviene[hidden], .s-recomendacion__poco[hidden] { display: none; }
.s-recomendacion__total { margin: 14px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-recomendacion__total strong { font-size: 1.125rem; }
.s-recomendacion__poco { margin: 10px 0 0; color: var(--mc-texto-2); font-size: .875rem; }
.s-recomendacion__accion { margin: 18px 0 0; }
@media (max-width: 479px) { .s-recomendacion__timbi.s-timbi { width: 44px; } }
/* fin §calculadora */

/* «*más IVA» junto a cada precio (MasIva.cs) y su nota al pie (_NotaIva) */
.s-mas-iva { color: var(--mc-texto-3); font-size: max(.75em, .75rem); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.s-plan__periodo .s-mas-iva, .s-plan__unitario .s-mas-iva { font-size: inherit; }
.s-tabla .s-precio { white-space: nowrap; }
.s-tabla .s-mas-iva { display: block; }
.s-nota-iva { max-width: 68ch; margin: 28px auto 0; color: var(--mc-texto-2); font-size: .875rem; }
.s-nota-iva strong { color: var(--mc-texto); font-weight: 650; }

.s-tabla-contenedor { overflow-x: auto; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.s-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.s-tabla--endpoints { min-width: 640px; }
.s-tabla caption { padding: 16px 20px; color: var(--mc-texto-2); text-align: left; caption-side: bottom; font-size: .8125rem; }
.s-tabla th, .s-tabla td { padding: 14px 20px; border-bottom: 1px solid var(--mc-borde); text-align: left; vertical-align: top; }
.s-tabla .s-derecha { text-align: right; }
.s-tabla thead th { background: var(--s-fondo-alterno); color: var(--mc-texto); font-weight: 650; white-space: nowrap; }
.s-tabla tbody th { color: var(--mc-texto-2); font-weight: 500; }
.s-tabla td { font-variant-numeric: tabular-nums; }
.s-tabla tr:last-child > * { border-bottom: 0; }

/* =============================================================================
   8. Aviso «PENDIENTE» y textos legales
   ============================================================================= */
.s-pendiente {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 0 0 24px;
  border: 1px dashed var(--mc-aviso-borde); border-radius: 12px; background: var(--mc-aviso-fondo); color: var(--mc-texto);
  font-size: .9375rem;
}
.s-pendiente > .mc-icono { flex: none; margin-top: 2px; color: var(--mc-aviso); }
.s-pendiente strong { color: var(--mc-aviso-texto); }
.s-pendiente p { margin: 0; }

.s-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(40px, 6vw, 72px); }
.s-indice { position: sticky; top: calc(var(--s-alto-encabezado) + 24px); }
.s-indice__titulo { margin: 0 0 10px; color: var(--mc-texto-3); font-size: .8125rem; font-weight: 600; }
.s-indice ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: s-indice; }
.s-indice li { counter-increment: s-indice; }
.sitio .s-indice a { display: flex; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--mc-texto-2); font-size: .875rem; line-height: 1.35; text-decoration: none; }
.s-indice a::before { content: counter(s-indice) "."; color: var(--mc-texto-3); font-variant-numeric: tabular-nums; }
.sitio .s-indice a:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); text-decoration: none; }
.s-prosa { max-width: 72ch; color: var(--mc-texto-2); font-size: 1.0625rem; }
.s-prosa section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--mc-borde); scroll-margin-top: calc(var(--s-alto-encabezado) + 24px); }
.s-prosa section:last-child { border-bottom: 0; }
.sitio .s-prosa h2 { margin: 0 0 10px; color: var(--mc-texto); font-size: 1.375rem; font-weight: 700; }
.sitio .s-prosa h3 { margin: 20px 0 8px; color: var(--mc-texto); font-size: 1.0625rem; font-weight: 650; }
.s-prosa ul { padding-left: 1.2em; }
.s-prosa li + li { margin-top: 6px; }
.s-legal__datos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 28px; color: var(--mc-texto-3); font-size: .875rem; }

/* =============================================================================
   9. Formularios del sitio (contacto, verificación)
   ============================================================================= */
.s-formulario-tarjeta { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio-lg); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
.s-formulario { display: grid; gap: 20px; }
.s-formulario .mc-campos { gap: 20px 16px; }
.sitio .s-formulario .mc-control, .sitio .s-formulario .mc-campo > input, .sitio .s-formulario .mc-campo > select { height: 46px; font-size: 1rem; }
.sitio .s-formulario .mc-campo > textarea { min-height: 150px; font-size: 1rem; }
.sitio .s-formulario .mc-etiqueta, .sitio .s-formulario .mc-campo > label:where(:not(.mc-casilla)) { font-size: .9375rem; }
.s-formulario .mc-ayuda { font-size: .875rem; }
.s-formulario .mc-casilla { font-size: .9375rem; }
.s-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.s-resumen-errores { padding: 16px 20px; border: 1px solid var(--mc-peligro-borde); border-radius: 12px; background: var(--mc-peligro-fondo); }
.s-resumen-errores:focus { outline: 2px solid var(--mc-peligro); outline-offset: 2px; }
.sitio .s-resumen-errores h2 { margin: 0 0 8px; color: var(--mc-peligro-texto); font-size: 1rem; }
.s-resumen-errores ul { margin: 0; padding-left: 1.2em; }
.s-resumen-errores a { color: var(--mc-peligro-texto); font-weight: 600; }
.s-legal-recaptcha { margin: 0; color: var(--mc-texto-3); font-size: .8125rem; }
/* Enlaces dentro de una casilla («He leído el Aviso de privacidad»): subrayados, como en el resto del texto (WCAG 1.4.1) */
.sitio .s-formulario .mc-casilla a, .sitio .s-legal-recaptcha a { text-decoration: underline; text-underline-offset: .15em; }
.grecaptcha-badge { visibility: hidden; }

.s-lateral-info { display: grid; gap: 16px; }
.s-dato { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.s-dato__icono { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--mc-primario-suave); color: var(--mc-primario); }
.sitio .s-dato__titulo { margin: 0 0 4px; font-size: 1rem; font-weight: 650; }
.s-dato__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; overflow-wrap: anywhere; }

.s-contacto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
/* §contacto (lote 1): campos según el tema (WEB-142) y Timbi como primer contacto (WEB-140) */
.s-tema-campos { display: contents; }
.s-tema-campos__intro { margin: 4px 0 -8px; color: var(--mc-texto-2); font-size: .9375rem; font-weight: 600; }
/* El contenedor no hace caja (display: contents): sus campos se acomodan en la rejilla de .mc-campos como los demás */
.s-tema-campos > .mc-campo { grid-column: span 6; }
.s-tema-campos > .mc-campo--completo, .s-tema-campos > .s-tema-campos__intro { grid-column: 1 / -1; }
@media (max-width: 767px) { .s-tema-campos > .mc-campo { grid-column: 1 / -1; } }
@supports selector(:has(*)) {
  .s-tema-campos { display: none; }
  .s-formulario:has(option[value="empezar"]:checked) .s-tema-campos--alta,
  .s-formulario:has(option[value="ilimitado"]:checked) .s-tema-campos--alta,
  .s-formulario:has(option[value="contador"]:checked) .s-tema-campos--empresas { display: contents; }
}
.s-dato--timbi { display: none; border-color: var(--mc-primario); }
.js .s-dato--timbi { display: flex; }
.s-dato__boton { margin-top: 10px; }
/* fin §contacto */

/* Resultado de la verificación */
.s-resultado { margin-bottom: 28px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--mc-borde-fuerte); border-radius: var(--s-radio-lg); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
/* El borde y el anillo de foco toman el color del estado (DS-12); la lista 69-B manda sobre «vigente» (DS-02) */
.s-resultado:focus { outline: 2px solid var(--mc-texto-2); outline-offset: 4px; }
.s-resultado--vigente, .s-resultado--rechazada { border-color: var(--mc-exito-borde); }
.s-resultado--cancelado { border-color: var(--mc-peligro-borde); }
.s-resultado--en_proceso, .s-resultado--revisar { border-color: var(--mc-aviso-borde); }
.s-resultado--efos { border-color: var(--mc-peligro-borde); border-width: 2px; }
.s-resultado--vigente:focus, .s-resultado--rechazada:focus { outline-color: var(--mc-exito-texto); }
.s-resultado--en_proceso:focus, .s-resultado--revisar:focus { outline-color: var(--mc-aviso-texto); }
.s-resultado--cancelado:focus, .s-resultado--efos:focus { outline-color: var(--mc-peligro-texto); }
.s-resultado__efos { margin: 0 0 18px; }
.s-insignia--peligro { --i-texto: var(--mc-peligro-texto); --i-fondo: var(--mc-peligro-fondo); --i-borde: var(--mc-peligro-borde); --i-punto: var(--mc-peligro); }
.s-insignia--aviso { --i-texto: var(--mc-aviso-texto); --i-fondo: var(--mc-aviso-fondo); --i-borde: var(--mc-aviso-borde); --i-punto: var(--mc-aviso); }
/* Al cambiar los datos del formulario, el resultado de arriba ya es de otra consulta (DS-14) */
.s-resultado.es-anterior { border-style: dashed; box-shadow: none; opacity: .72; }
.s-resultado__anterior { margin: 0 0 12px; color: var(--mc-texto-2); font-size: .875rem; font-weight: 600; }
.s-resultado__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sitio .s-resultado__titulo { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.s-resultado .mc-insignia { height: 28px; padding: 0 12px; font-size: .8125rem; }
.s-resultado .mc-datos { grid-template-columns: minmax(150px, max-content) 1fr; gap: 10px 24px; }
.s-resultado .mc-datos dt { font-size: .875rem; }
.s-resultado__pie { margin: 18px 0 0; color: var(--mc-texto-3); font-size: .875rem; }

.s-donde { display: grid; gap: 16px; }
.s-pdf-mini {
  position: relative; padding: 18px; border: 1px solid var(--mc-borde); border-radius: 10px; background: #FFFFFF; color: #151C27;
  font-size: 11px; line-height: 1.5; box-shadow: var(--s-sombra-tarjeta);
}
.s-pdf-mini__fila { display: flex; justify-content: space-between; gap: 12px; }
.s-pdf-mini__marca { padding: 0 3px; border-radius: 3px; background: #FFF3D6; box-shadow: 0 0 0 1px #F3CF85; color: #151C27; font-weight: 600; }
.s-pdf-mini__qr { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #DFE5EE; border-radius: 4px; color: #4E5A6C; }
.s-pdf-mini__tenue { color: #4E5A6C; }

/* =============================================================================
   10. Estado del servicio
   ============================================================================= */
.s-estado-general { display: flex; align-items: center; gap: 16px; padding: 22px 24px; margin-bottom: 24px; border: 1px solid var(--mc-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.s-estado-general--ok { border-color: var(--mc-exito-borde); background: var(--mc-exito-fondo); }
.s-estado-general--falla { border-color: var(--mc-aviso-borde); background: var(--mc-aviso-fondo); }
.s-estado-general__icono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mc-superficie); color: var(--mc-texto-2); }
.s-estado-general--ok .s-estado-general__icono { color: var(--mc-exito); }
.s-estado-general--falla .s-estado-general__icono { color: var(--mc-aviso); }
.sitio .s-estado-general__titulo { margin: 0; color: var(--mc-texto); font-size: 1.25rem; font-weight: 700; }
.s-estado-general__texto { margin: 2px 0 0; color: var(--mc-texto-2); }
.s-piezas { margin: 0; padding: 0; list-style: none; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); }
.s-pieza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--mc-borde); }
.s-pieza:last-child { border-bottom: 0; }
.sitio .s-pieza__nombre { margin: 0; font-size: 1rem; font-weight: 650; }
.s-pieza__descripcion { margin: 0; color: var(--mc-texto-3); font-size: .875rem; }
.s-pieza__estado { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: end; gap: 4px; }
.s-pieza__ms { color: var(--mc-texto-3); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.s-estado-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; color: var(--mc-texto-3); font-size: .875rem; }

/* Historial de 90 días y avisos (WEB-145; solo con Sitio:Contenido:Estado) */
.s-estado-avisos { display: grid; gap: 12px; margin-bottom: 24px; }
.sitio .s-estado-avisos__titulo { margin: 0; font-size: 1.125rem; font-weight: 700; }
.s-historial { margin-top: 28px; }
.sitio .s-historial__titulo { margin: 0; font-size: 1.125rem; font-weight: 700; }
.s-historial__nota { margin: 4px 0 14px; color: var(--mc-texto-3); font-size: .875rem; }
.s-historial__lista { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.s-historial__cabeza { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .9375rem; }
.s-historial__nombre { color: var(--mc-texto); font-weight: 650; }
.s-historial__total { color: var(--mc-texto-3); font-variant-numeric: tabular-nums; }
.s-historial__barra { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 34px; }
.s-historial__dia { display: block; min-width: 2px; border-radius: 2px; background: var(--mc-borde-fuerte); }
.s-historial__dia--ok { background: var(--mc-exito); }
.s-historial__dia--parcial { background: var(--mc-aviso); }
.s-historial__dia--falla { background: var(--mc-peligro); }
.s-historial__leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; color: var(--mc-texto-3); font-size: .8125rem; }
.s-historial__leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.s-historial__leyenda .s-historial__dia { width: 10px; height: 10px; }
@media (max-width: 639px) {
  .s-historial__barra { gap: 1px; height: 28px; }
}

/* =============================================================================
   §funciones · Funciones por tarea, hoja de ruta, «Lo que incluye tu cuenta» (WEB-112, WEB-131),
   módulo Despacho en contadores (WEB-132, WEB-134) y costo de la API en desarrolladores (WEB-113, WEB-135).
   Lote 3 de la auditoría del sitio (t28/s3).
   ============================================================================= */
.s-dividido--funciones { align-items: end; }
.s-incluye { padding: 20px 24px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
.sitio .s-incluye__titulo { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.s-incluye__lista { display: grid; margin: 0; }
.s-incluye__lista div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--mc-borde); }
.s-incluye__lista dt { color: var(--mc-texto-3); font-size: .875rem; }
.s-incluye__lista dd { margin: 0; color: var(--mc-texto); font-size: .9375rem; line-height: 1.45; }

.s-tarea {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--mc-borde);
  scroll-margin-top: calc(var(--s-alto-encabezado) + 64px);
}
.s-tarea__lado { position: sticky; top: calc(var(--s-alto-encabezado) + 84px); align-self: start; }
/* Número grande y decorativo, pero con 3:1 como texto grande (axe color-contrast, t35/w): antes --mc-borde-fuerte, 1.5:1 */
.s-tarea__numero { margin: 0; color: var(--mc-borde-control); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.s-tarea__corto { margin: 12px 0 6px; color: var(--mc-primario); font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.sitio .s-tarea__titulo { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.s-tarea__descripcion { margin: 12px 0 0; color: var(--mc-texto-2); font-size: 1.0625rem; }
.s-tarea__guias-titulo { margin: 22px 0 6px; color: var(--mc-texto-3); font-size: .8125rem; font-weight: 600; }
.s-tarea__guias { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s-tarea__guias a { font-size: .9375rem; font-weight: 500; }
.s-tarea__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.s-tarea__item { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--mc-borde); }
.s-tarea__icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--mc-primario-suave); color: var(--mc-primario); }
.s-tarea__item.es-proxima .s-tarea__icono { background: var(--mc-superficie-hundida); color: var(--mc-texto-2); }
.sitio .s-tarea__nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 5px 0 4px; font-size: 1.0625rem; font-weight: 650; }
.s-tarea__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-tarea__nota { margin: 8px 0 0; color: var(--mc-texto-3); font-size: .875rem; }

.s-ruta { padding-block: clamp(48px, 6vw, 80px); scroll-margin-top: calc(var(--s-alto-encabezado) + 64px); }
.s-ruta__encabezado { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: 12px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: 28px; }
.s-ruta__encabezado .s-tarea__descripcion { margin: 0; }
.s-ruta__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.s-ruta__grupo { padding: 20px 22px 8px; border: 1px dashed var(--mc-borde-fuerte); border-radius: var(--s-radio); background: var(--s-fondo-alterno); scroll-margin-top: calc(var(--s-alto-encabezado) + 64px); }
.sitio .s-ruta__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.s-ruta__descripcion { margin: 0 0 10px; color: var(--mc-texto-3); font-size: .875rem; }
.s-ruta__lista { margin: 0; padding: 0; list-style: none; }
.s-ruta__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--mc-borde); color: var(--mc-texto-2); font-size: .9375rem; }
.s-ruta__item > .mc-icono { margin-top: 3px; color: var(--mc-texto-3); }
.s-ruta__item strong { color: var(--mc-texto); font-weight: 600; }
.s-ruta__avisame { margin: 24px 0 0; }

.s-bolsa { display: flex; gap: 14px; margin-top: 24px; padding: 16px 18px; border: 1px dashed var(--mc-info-borde); border-radius: 14px; background: var(--mc-superficie); }
.s-bolsa__icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--mc-info-fondo); color: var(--mc-info); }
.s-bolsa__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0; color: var(--mc-texto); font-weight: 650; }
.s-bolsa__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-tabla--despacho th[scope="row"] { color: var(--mc-texto); font-weight: 650; }
.s-tabla--despacho thead .mc-insignia { margin-left: 6px; vertical-align: middle; }

.s-dev-nota { max-width: 40em; margin: 18px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-dev-chico { font-size: .9375rem; }
.s-dev-costo-nota { margin: 0; color: var(--mc-texto-2); }
.s-tabla--costo td, .s-tabla--costo th { vertical-align: top; }
.s-tabla--errores td:nth-child(1), .s-tabla--errores td:nth-child(2) { white-space: nowrap; font-size: .8125rem; }

@media (max-width: 899px) {
  .s-tarea, .s-ruta__encabezado { grid-template-columns: minmax(0, 1fr); }
  .s-tarea__lado { position: static; }
  .s-tarea__numero { font-size: 2.25rem; }
}
@media (max-width: 639px) {
  .s-tarea__lista { grid-template-columns: minmax(0, 1fr); }
  .s-incluye__lista div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .s-ruta__item { grid-template-columns: auto minmax(0, 1fr); }
  .s-ruta__item > .mc-insignia { grid-column: 2; justify-self: start; }
  .s-tabla--errores td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
}

/* =============================================================================
   §verifica · «Sube tu XML», «Escanea el QR», «¿Y ahora?» e impresión del resultado (WEB-114, WEB-139).
   Lote 3 de la auditoría del sitio (t28/s3).
   ============================================================================= */
.s-atajos { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--mc-borde); }
/* Sin JavaScript no sirven; con él se ven desde el primer pintado (antes los mostraba verifica.js y el formulario bajaba:
   CLS de 0.083 en celular). */
html:not(.js) .s-atajos, .s-atajos[hidden] { display: none; }
.s-atajos__titulo { margin: 0 0 10px; color: var(--mc-texto); font-weight: 650; }
.s-atajos__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.s-atajos__archivo { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.s-atajos__archivo:focus-visible + label { outline: 2px solid var(--mc-primario); outline-offset: 2px; }
.sitio .s-atajos label.mc-boton { cursor: pointer; }
.s-atajos .mc-ayuda { margin: 10px 0 0; }
.s-atajos__estado { margin: 10px 0 0; color: var(--mc-exito-texto); font-size: .9375rem; font-weight: 600; }
.s-atajos__estado:empty { display: none; }
.s-escaner { display: grid; justify-items: start; gap: 8px; margin-top: 12px; }
.s-escaner__video { width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 12px; background: #000000; object-fit: cover; }
.s-formulario-tarjeta.es-soltar { outline: 2px dashed var(--mc-primario); outline-offset: 4px; }
.s-resultado__timbi.s-timbi { width: 44px; }
.s-ahora { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mc-borde); }
.sitio .s-ahora__titulo { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.s-ahora ul { margin: 0; padding-left: 1.2em; color: var(--mc-texto-2); }
.s-ahora li + li { margin-top: 4px; }
.s-ahora__aviso { margin: 10px 0 0; color: var(--mc-texto-3); font-size: .8125rem; }
.s-resultado__acciones { margin: 16px 0 0; }
@media print {
  main:has(.s-resultado) > .s-cabecera, main:has(.s-resultado) .s-formulario-tarjeta, main:has(.s-resultado) .s-donde,
  main:has(.s-resultado) .s-seccion--cta, .s-resultado__acciones, .s-chat { display: none !important; }
  .s-resultado { border: 1px solid #000000; box-shadow: none; }
}

/* =============================================================================
   §legal · Enlaces de los textos legales y de las guías siempre subrayados (WEB-146, axe link-in-text-block).
   ============================================================================= */
.sitio .s-prosa a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .15em; }

/* =============================================================================
   §ayuda · Centro de ayuda (/ayuda), guías, temas de CFDI y «Pregúntale a Timbi» (WEB-111, WEB-144).
   Lote 3 de la auditoría del sitio (t28/s3).
   ============================================================================= */
.s-oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s-ayuda-etiqueta { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--mc-primario); font-size: .875rem; font-weight: 600; }
.sitio .s-cabecera--ayuda .s-cabecera__titulo { max-width: 26ch; }
.s-cabecera--ayuda .s-cabecera__lead { max-width: 46em; }

.s-guia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(40px, 6vw, 72px); }
.sitio .s-guia__cuerpo h2 { margin: 32px 0 12px; scroll-margin-top: calc(var(--s-alto-encabezado) + 24px); }
.s-guia__cuerpo ul, .s-guia__cuerpo ol { padding-left: 1.2em; }
.s-guia__cuerpo .s-guia__pasos { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: s-paso; }
.s-guia__pasos li { position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--s-tarjeta-borde); border-radius: 12px; background: var(--mc-superficie); color: var(--mc-texto); counter-increment: s-paso; }
.s-prosa .s-guia__pasos li + li { margin-top: 0; }
.s-guia__pasos li::before {
  content: counter(s-paso); position: absolute; top: 12px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--mc-primario-suave); color: var(--mc-primario); font-size: .875rem; font-weight: 700;
}
.s-guia__enmicfdi { padding: 14px 16px; border-left: 3px solid var(--mc-marca-verde); border-radius: 0 10px 10px 0; background: var(--mc-primario-suave); color: var(--mc-texto); }
.s-guia__fuente { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--mc-borde); color: var(--mc-texto-3); font-size: .875rem; overflow-wrap: anywhere; }
.s-guia__tema { margin-top: 24px; font-size: .9375rem; }
.s-aviso-fiscal { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--mc-info-borde); border-radius: 10px; background: var(--mc-info-fondo); color: var(--mc-info-texto); font-size: .9375rem; }
.s-aviso-fiscal .mc-icono { flex: none; margin-top: 3px; }
.s-guia__lateral { display: grid; gap: 20px; }
.s-guia__lateral-titulo { margin: 0 0 8px; color: var(--mc-texto-3); font-size: .8125rem; font-weight: 600; }
.s-guia__lateral ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sitio .s-guia__lateral li a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--mc-texto-2); font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.sitio .s-guia__lateral li a:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); }
.s-guia__lateral p { margin: 8px 0 0; }
.s-guia__enmicfdi-caja { padding: 16px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }

.s-timbi-ayuda { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--s-fondo-alterno); }
.s-timbi-ayuda__timbi.s-timbi { width: 56px; }
.s-timbi-ayuda__titulo { margin: 0 0 4px; color: var(--mc-texto); font-weight: 650; }
.s-timbi-ayuda__texto { margin: 0 0 12px; color: var(--mc-texto-2); font-size: .9375rem; }
.s-timbi-ayuda__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }

.s-buscador { max-width: 640px; margin: 28px auto 0; text-align: left; }
.s-buscador__etiqueta { display: block; margin-bottom: 8px; color: var(--mc-texto); font-weight: 600; }
.s-buscador__fila { position: relative; display: flex; gap: 8px; }
.s-buscador__icono { position: absolute; top: 50%; left: 14px; color: var(--mc-texto-3); transform: translateY(-50%); pointer-events: none; }
.sitio .s-buscador__campo { flex: 1 1 auto; min-width: 0; height: 48px; padding-left: 42px; font-size: 1rem; }
.sitio .s-buscador .mc-boton { height: 48px; }
.s-buscador__estado { min-height: 1.4em; margin: 8px 0 0; color: var(--mc-texto-3); font-size: .875rem; }
.s-resultados-ayuda { display: grid; gap: 18px; margin: 0 0 24px; padding: 0; list-style: none; }
.s-resultados-ayuda a { font-size: 1.125rem; font-weight: 650; }
.s-resultados-ayuda p { margin: 4px 0 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-ayuda-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sitio a.s-ayuda-tema { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); text-decoration: none; transition: border-color var(--mc-transicion); }
.sitio a.s-ayuda-tema:hover { border-color: var(--mc-primario); text-decoration: none; }
.s-ayuda-tema__titulo { color: var(--mc-texto); font-size: 1.0625rem; font-weight: 650; }
.s-ayuda-tema__texto { color: var(--mc-texto-2); font-size: .875rem; }
.s-ayuda-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.sitio .s-ayuda-categoria__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.s-ayuda-categoria__titulo .mc-icono { color: var(--mc-primario); }
.s-ayuda-categoria__texto { margin: 0 0 10px; color: var(--mc-texto-3); font-size: .9375rem; }
.s-ayuda-categoria ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mc-borde); }
.s-ayuda-categoria li { border-bottom: 1px solid var(--mc-borde); }
.sitio .s-ayuda-categoria a { display: block; padding: 12px 2px; color: var(--mc-texto); font-weight: 500; text-decoration: none; }
.sitio .s-ayuda-categoria a:hover { color: var(--mc-enlace); text-decoration: underline; }
.s-ayuda-vacio { margin: 24px 0 0; color: var(--mc-texto-2); }
.s-ayuda-mas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.s-ayuda-mas--faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.s-ayuda-enlaces { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.s-ayuda-enlaces a { font-weight: 600; }
/* t54/err (ERR-03) · Catálogo público de errores: /ayuda/errores y una página por código. */
.s-errores-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s-errores-lista a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.s-errores-lista a:hover .s-codigo-error__clave, .s-errores-lista a:focus-visible .s-codigo-error__clave { border-color: currentColor; }
.s-codigo-error__clave { flex: none; display: inline-block; padding: 1px 7px; border: 1px solid var(--mc-borde); border-radius: 6px; background: var(--mc-superficie-2); color: var(--mc-texto); font-family: var(--mc-fuente-mono); font-size: .8125em; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.s-cabecera__titulo .s-codigo-error__clave { font-size: .7em; vertical-align: .18em; margin-right: 6px; }
.s-codigo-error__pasos { display: grid; gap: 8px; padding-left: 1.4em; }
.s-codigo-error__oficial { margin: 0; padding: 10px 14px; border-left: 3px solid var(--mc-borde); color: var(--mc-texto-2); font-style: italic; }
.s-codigo-error__fuente { color: var(--mc-texto-2); font-size: .875rem; }
.s-faq-mas .s-grupo__titulo { margin-top: 0; }

@media (max-width: 899px) {
  .s-guia, .s-ayuda-mas { grid-template-columns: minmax(0, 1fr); }
  .s-ayuda-categorias { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 479px) {
  .s-buscador__fila { flex-wrap: wrap; }
  .sitio .s-buscador .mc-boton { width: 100%; }
  .s-guia__pasos li { padding-left: 50px; }
}
@media print {
  .s-guia__lateral, .s-timbi-ayuda, .s-buscador { display: none !important; }
  .s-guia { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   11. Errores (404, 500)
   ============================================================================= */
.s-error { padding-block: clamp(64px, 10vw, 128px); text-align: center; }
.s-error__codigo { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--mc-texto-3); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sitio .s-error__titulo { max-width: 18ch; margin: 0 auto; font-size: var(--s-t-h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.s-error__texto { max-width: 36em; margin: 18px auto 0; color: var(--mc-texto-2); font-size: var(--s-t-lead); }
.s-error .s-botones { justify-content: center; }
.s-error__folio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 24px 0 0; color: var(--mc-texto-3); font-size: .875rem; }
.s-error__folio .mc-mono { color: var(--mc-texto); font-size: .9375rem; letter-spacing: .04em; }
.s-error__copiar.es-copiado { color: var(--mc-exito-texto); }
/* 404: lo que más se busca, como un índice con una línea de qué hay en cada página (WEB-147) */
.s-error__sugerencias { max-width: 560px; margin: 40px auto 0; text-align: left; }
.sitio .s-error__subtitulo { margin: 0 0 6px; color: var(--mc-texto-2); font-size: .9375rem; font-weight: 600; }

/* =============================================================================
   12. Pie
   ============================================================================= */
.s-pie {
  --r: 6px; --p: 20px;
  padding-block: clamp(48px, 6vw, 72px) 28px; background: var(--s-pie-fondo); font-size: .9375rem;
  -webkit-mask: radial-gradient(circle at 50% 0, #000 var(--r), #0000 calc(var(--r) + .5px)) top / var(--p) var(--r) round no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: radial-gradient(circle at 50% 0, #000 var(--r), #0000 calc(var(--r) + .5px)) top / var(--p) var(--r) round no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.s-pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.s-pie__marca .s-logo { width: 113px; }
.s-pie__lema { max-width: 30em; margin: 18px 0 16px; color: var(--s-oscuro-texto-2); }
.s-pie__contacto { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.s-pie__contacto a { display: inline-flex; align-items: center; gap: 8px; }
.sitio .s-pie__titulo { margin: 0 0 14px; color: #FFFFFF; font-size: .9375rem; font-weight: 650; }
.s-pie__columna ul, .s-pie__legal { margin: 0; padding: 0; list-style: none; }
.s-pie__columna li + li { margin-top: 10px; }
.sitio .s-pie a { color: var(--s-oscuro-texto-2); text-decoration: none; }
.sitio .s-pie a:hover { color: #FFFFFF; text-decoration: underline; }
.s-pie__base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--s-oscuro-borde); font-size: .875rem; }
.s-pie__base p { margin: 0; }
.s-pie__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.s-pie__responsable { max-width: 90ch; margin: 16px 0 0; color: var(--s-oscuro-texto-2); font-size: .8125rem; }
.sitio .s-pie__boton { padding: 0; border: 0; background: none; color: var(--s-oscuro-texto-2); font: inherit; cursor: pointer; }
.sitio .s-pie__boton:hover { color: #FFFFFF; text-decoration: underline; }
.s-pie__tema { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--s-oscuro-borde); border-radius: 999px; }
.sitio .s-pie__tema button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--s-oscuro-texto-2); font: inherit; font-size: .8125rem; cursor: pointer; }
.sitio .s-pie__tema button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #FFFFFF; }

/* Franja de cookies */
.s-consentimiento { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.s-consentimiento__caja { max-width: 720px; padding: 18px 20px; border: 1px solid var(--mc-borde); border-radius: 16px; background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); pointer-events: auto; }
.sitio .s-consentimiento__titulo { margin: 0 0 4px; font-size: 1rem; }
.s-consentimiento__texto { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-consentimiento__acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* =============================================================================
   13. Movimiento (t35/w). Tokens en §1. Reglas, en este orden:
   - Solo se mueven transform y opacity (y color en los hover). Nada anima alto, ancho, márgenes ni posición.
   - Lo que responde a la persona (presionar, abrir, elegir, copiar, enviar) se anima; lo frecuente, apenas.
   - Entrar con --s-c-salida; salir más rápido que entrar. Sin rebotes ni bucles.
   - Al desplazarse solo entran las piezas que son documento o secuencia (el pliego de tres pasos, las tarjetas de
     precio, la calculadora, los pasos de una guía y la llamada final con forma de timbre), no cada sección (19 §2.3).
     Las marca sitio.js con .s-entra solo si están debajo del pliegue: lo que se ve al cargar nunca se oculta.
   - Con prefers-reduced-motion: reduce nada se desplaza ni escala: queda en su lugar o se funde (micfdi.css §25
     además lleva a .01 ms toda animación y transición dentro de .mc).
   - Sin JavaScript todo está en su estado final: lo que se oculta para entrar depende de clases que pone sitio.js.
   La clase s-revelar que quede en el marcado no hace nada.
   ============================================================================= */

/* 13.1 Presionar: todo lo que se pulsa se hunde un poco (100-160 ms), también con el teclado */
.sitio .mc-boton {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: var(--s-d-color), var(--s-d-color), var(--s-d-color), var(--s-d-color), var(--s-d-presion);
  transition-timing-function: ease, ease, ease, ease, var(--s-c-salida);
}
.sitio .mc-boton:active:not([aria-busy="true"], :disabled, [aria-disabled="true"]),
.sitio .s-perfil__opcion:active, .sitio .s-persona__opcion:active, .sitio .s-saltos__lista a:active,
.sitio .s-pie__tema button:active, .sitio .s-pestanas-codigo button:active { transform: var(--s-presion); }
.s-perfil__opcion, .s-persona__opcion, .sitio .s-saltos__lista a, .sitio .s-pie__tema button {
  transition: background-color var(--s-d-color) ease, color var(--s-d-color) ease, border-color var(--s-d-color) ease,
    transform var(--s-d-presion) var(--s-c-salida);
}
.sitio .s-pestanas-codigo button { transition: color var(--s-d-color) ease, border-color var(--s-d-color) ease, transform var(--s-d-presion) var(--s-c-salida); }

/* 13.2 Cambios de estado que se ven: lo que aparece en lugar de otra cosa se asoma 4 px y se funde (200 ms).
   Solo después de que la persona elige (.es-cambiado lo pone sitio.js): al cargar la página nada parpadea. */
@media (prefers-reduced-motion: no-preference) {
  .es-cambiado .s-perfil__texto, .es-cambiado .s-perfil__boton, .es-cambiado .s-total-pagar,
  .s-codigo__panel.es-cambiado, .s-acordeon__item[open] > .s-acordeon__respuesta {
    animation: s-asomar var(--s-d-cambio) var(--s-c-salida);
  }
  /* El menú del celular baja de su botón (180 ms); al cerrarlo desaparece al instante (la salida, más rápida) */
  .s-menu[open] > .s-menu__panel { animation: s-bajar var(--s-d-menu) var(--s-c-salida); }
  /* La franja de cookies sube desde abajo, una vez, después de que la página ya se pintó */
  .s-consentimiento:not([hidden]) .s-consentimiento__caja { animation: s-subir-franja var(--s-d-dialogo) var(--s-c-salida) 600ms both; }
}
@keyframes s-asomar { from { opacity: 0; transform: translateY(4px); } }
@keyframes s-bajar { from { opacity: 0; transform: translateY(-8px); } }
@keyframes s-subir-franja { from { opacity: 0; transform: translateY(16px); } }

/* 13.3 Calculadora: el deslizador es un control grande (objetivo de 24 px, WCAG 2.5.8) con su parte llena en el color
   de la marca; --s-lleno lo pone sitio.js en el propio <input>. El plan que conviene y su etiqueta se acomodan con WAAPI. */
.s-rango {
  --s-lleno: 0%;
  -webkit-appearance: none; appearance: none; height: 28px; background: transparent; border-radius: 0;
}
.s-rango::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--mc-primario) 0 var(--s-lleno), var(--mc-superficie-hundida) var(--s-lleno) 100%);
  box-shadow: inset 0 0 0 1px var(--mc-borde);
}
.s-rango::-moz-range-track { height: 6px; border-radius: 999px; background: var(--mc-superficie-hundida); box-shadow: inset 0 0 0 1px var(--mc-borde); }
.s-rango::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--mc-primario); }
.s-rango::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 3px solid var(--mc-superficie); border-radius: 50%;
  background: var(--mc-primario); box-shadow: 0 0 0 1px var(--mc-primario), 0 2px 6px rgba(16, 34, 63, .25);
  transition: transform var(--s-d-presion) var(--s-c-salida);
}
.s-rango::-moz-range-thumb {
  width: 18px; height: 18px; border: 3px solid var(--mc-superficie); border-radius: 50%;
  background: var(--mc-primario); box-shadow: 0 0 0 1px var(--mc-primario), 0 2px 6px rgba(16, 34, 63, .25);
  transition: transform var(--s-d-presion) var(--s-c-salida);
}
.s-rango:active::-webkit-slider-thumb { transform: scale(1.12); }
.s-rango:active::-moz-range-thumb { transform: scale(1.12); }
.sitio .s-rango:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 4px; border-radius: 6px; }
.s-calculadora__atajos button[aria-pressed="true"] {
  --b-fondo: var(--mc-primario-suave); --b-texto: var(--mc-primario-suave-texto); --b-borde: var(--mc-primario);
  --b-fondo-hover: var(--mc-primario-suave); --b-texto-hover: var(--mc-primario-suave-texto);
}
.s-plan { transition: border-color var(--s-d-cambio) ease, box-shadow var(--s-d-cambio) ease; }
.s-plan__etiqueta { transform-origin: 0 50%; }

/* 13.4 Copiar: el ícono pasa a palomita y el texto a «Copiado» (sitio.js; también se anuncia en voz) */
.sitio .es-copiado { --b-texto: var(--mc-exito-texto); --b-texto-hover: var(--mc-exito-texto); }
.sitio .s-copiar.es-copiado { --b-texto: #7EE2AE; --b-texto-hover: #7EE2AE; }
@media (prefers-reduced-motion: no-preference) {
  .es-copiado .mc-icono { animation: s-palomita var(--s-d-cambio) var(--s-c-salida); }
}
@keyframes s-palomita { from { opacity: 0; transform: scale(.6); } }

/* 13.5 Entradas al desplazarse (ver arriba qué piezas). Una vez, 480 ms, 16 px, en escalón de 70 ms entre hermanas.
   will-change solo mientras esperan; al entrar se suelta. */
@media (prefers-reduced-motion: no-preference) {
  .s-entra {
    opacity: 0; transform: translateY(16px); will-change: transform, opacity;
    transition: opacity var(--s-d-entrada) var(--s-c-salida), transform var(--s-d-entrada) var(--s-c-salida);
  }
  .s-entra.es-visible { opacity: 1; transform: none; will-change: auto; }
  /* La llamada final con forma de timbre «se asienta» como una estampilla: crece del 97 % sin moverse de lugar */
  .s-cta.s-entra { transform: scale(.97); }
  .s-cta.s-entra.es-visible { transform: none; }
  /* Las tarjetas de precio conservan la transición de su borde (la recomendada cambia con la calculadora) */
  .s-plan.s-entra {
    transition: opacity var(--s-d-entrada) var(--s-c-salida), transform var(--s-d-entrada) var(--s-c-salida),
      border-color var(--s-d-cambio) ease, box-shadow var(--s-d-cambio) ease;
  }
}

/* 13.6 Formularios: el campo con un dato que no sirve se marca al salir de él (no mientras se escribe) y el resumen de
   errores entra desde arriba; los datos que llena el XML o la liga del QR destellan en marcatextos y se apagan. */
.sitio .s-formulario .mc-control:user-invalid,
.sitio .s-formulario .mc-campo > :is(input, select, textarea):user-invalid { border-color: var(--mc-peligro); }
@media (prefers-reduced-motion: no-preference) {
  .s-resumen-errores, .s-formulario .mc-alerta { animation: s-bajar var(--s-d-dialogo) var(--s-c-salida); }
}
/* (El destello en marcatextos lo hace sitio.js con WAAPI, para poder repetirlo en cada llenado.) */

/* 13.7 Verifica: mientras el SAT responde, un esqueleto del resultado bajo el botón (a los 300 ms; sitio.js). El brillo
   es un ::after que se traslada (transform), no un fondo que se repinta. El veredicto, al llegar, se «imprime» de arriba
   abajo y la insignia cae como sello. */
.s-esqueleto { display: grid; gap: 10px; width: 100%; margin-top: 4px; padding: 18px 20px; border: 1px dashed var(--mc-borde-fuerte); border-radius: var(--s-radio); }
.s-esqueleto__linea { position: relative; height: 12px; overflow: hidden; border-radius: 6px; background: var(--mc-superficie-hundida); }
.s-esqueleto__linea:nth-child(1) { width: 38%; height: 20px; }
.s-esqueleto__linea:nth-child(2) { width: 92%; }
.s-esqueleto__linea:nth-child(3) { width: 76%; }
.s-esqueleto__linea:nth-child(4) { width: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .s-esqueleto { animation: s-asomar var(--s-d-cambio) var(--s-c-salida); }
  .s-esqueleto__linea::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mc-superficie) 70%, transparent), transparent);
    animation: s-brillo 1.3s ease-in-out infinite;
  }
  .js .s-resultado:not(.es-anterior) { animation: s-imprimir 360ms var(--s-c-mover) backwards; }
  .js .s-resultado:not(.es-anterior) .s-resultado__cabeza .mc-insignia { animation: s-sello-insignia var(--s-d-firma) var(--s-c-salida) 300ms both; }
}
@keyframes s-brillo { to { transform: translateX(100%); } }
@keyframes s-imprimir { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes s-sello-insignia { from { opacity: 0; transform: scale(1.12); } }

/* 13.8 Timbi en la calculadora: cuando se queda en «celebra», un saltito de 6 px (una vez por cambio, sin rebote) */
@media (prefers-reduced-motion: no-preference) {
  .s-recomendacion__timbi.s-timbi--celebra { animation: s-timbi-celebra 320ms var(--s-c-salida); }
}
@keyframes s-timbi-celebra { 40% { transform: translateY(-6px); } }

/* 13.9 Transición entre páginas (View Transitions entre documentos, MOV-29): fundido de 180 ms con el encabezado y el
   botón del chat quietos. Donde el navegador no la tiene, la navegación es la de siempre. Con movimiento reducido, nada. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.s-encabezado { view-transition-name: s-encabezado; }
::view-transition-group(root) { animation-duration: var(--s-d-vista); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--s-d-vista); animation-timing-function: ease; }
::view-transition-group(s-encabezado) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .s-entra { opacity: 1 !important; transform: none !important; }
  .s-esqueleto { display: none !important; }
}

/* =============================================================================
   14. Adaptable
   ============================================================================= */
@media (max-width: 1099px) {
  .s-hero__rejilla { grid-template-columns: minmax(0, 1fr); }
  .s-hero__texto { max-width: 680px; }
  .s-hero__hoja { max-width: 620px; }
  .s-rejilla--4, .s-precios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-dividido, .s-dividido--preguntas, .s-contacto, .s-calculadora { grid-template-columns: minmax(0, 1fr); }
  .s-columnas, .s-objeciones { grid-template-columns: minmax(0, 1fr); }
  .s-dividido--invertido > :first-child { order: 0; }
  .s-calculadora__entrada { border-right: 0; border-bottom: 1px solid var(--mc-borde); }
  .s-pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-pie__marca { grid-column: 1 / -1; }
  .s-legal { grid-template-columns: minmax(0, 1fr); }
  .s-indice { position: static; padding: 16px 18px; border: 1px solid var(--mc-borde); border-radius: 14px; background: var(--s-fondo-alterno); }
}
@media (max-width: 899px) {
  .s-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pasos { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-pasos::before { display: none; }
  .s-paso:not(:last-child)::after {
    content: ""; position: absolute; top: 58px; bottom: -22px; left: 24px; width: 2px;
    background: repeating-linear-gradient(180deg, var(--mc-borde-fuerte) 0 8px, transparent 8px 16px);
  }
  .s-paso { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 18px; padding: 0; text-align: left; }
  .s-paso__numero { grid-row: 1 / span 2; margin: 0; }
  .s-paso__titulo { align-self: center; }
  .s-paso__texto { max-width: none; margin: 0; }
  .s-grupo__encabezado { grid-template-columns: minmax(0, 1fr); }
  /* El pliego en columna: las perforaciones pasan a ser horizontales */
  .s-pliego { grid-template-columns: minmax(0, 1fr); }
  .s-pliego__paso + .s-pliego__paso::before {
    top: -4px; bottom: auto; left: 14px; right: 14px; width: auto; height: 8px;
    background: radial-gradient(circle, var(--s-agujero) 3px, transparent 3.5px) left center / 14px 8px repeat-x;
  }
  .sitio .s-prueba__nota { margin-left: 0; }
}
@media (max-width: 639px) {
  .s-rejilla--2, .s-rejilla--3, .s-rejilla--4, .s-precios { grid-template-columns: minmax(0, 1fr); }
  .s-hero__acciones .mc-boton, .s-cta .mc-boton { flex: 1 1 100%; }
  .s-perfil__opciones { display: flex; }
  .s-perfil__opcion { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  /* En celular la hoja se recorta a lo que importa: receptor, total y el timbre */
  .s-hoja { font-size: 13px; }
  .s-hoja__fila--concepto { display: none; }
  .s-hoja__fila { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .s-hoja__timbre { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-right: 64px; }
  .s-sello { width: 84px; height: 84px; right: -12px; bottom: -16px; }
  .s-funcion { padding: 22px 20px; }
  .s-columnas__listas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .s-garantias__lista > div { grid-template-columns: minmax(0, 1fr); }
  .s-cta__interior { grid-template-columns: minmax(0, 1fr); }
  .s-cta--timbre .s-cta__timbi.s-timbi { width: 64px; }
  .s-franja-verifica .mc-boton { width: 100%; }
  /* Portada en celular: menos alto (WEB-123, objetivo menos de 6,500 px) sin quitar ninguna sección */
  .s-hero, .s-hero ~ .s-seccion { padding-block: 44px; }
  .s-hero ~ .s-seccion--cta { padding-top: 0; }
  .s-hero { padding-top: 28px; }
  .s-hoja__totales div:not(.s-hoja__total), .s-hoja__nota, .s-hoja__cabeza > div > .s-hoja__id { display: none; }
  .s-hoja__total { margin-top: 0; border-top: 0; }
  .s-pliego__muestra { display: none; }
  .sitio .s-pliego__texto { margin: 0; }
  .s-pliego__paso { padding: 22px 20px; }
  .s-vinetas__detalle { display: none; }
  .s-vinetas { gap: 8px; }
  .s-banda-api__codigo { display: none; }
  .s-cabeza-seccion { margin-bottom: 24px; }
  .s-objeciones__lista li { padding-block: 14px; }
  .s-garantias__lista > div { padding: 10px 0; }
  .s-cta__interior { padding: 24px 20px; gap: 14px; }
  .s-confianza { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 0; }
  .s-confianza__icono { grid-row: 1 / span 2; margin: 0; }
  .sitio .s-confianza__titulo { margin: 0; align-self: end; }
  .s-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pie__tema { margin-left: 0; }
  .s-calculadora__campo { grid-template-columns: minmax(0, 1fr); }
  .s-calculadora .mc-control { text-align: left; }
  .s-resultado .mc-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .s-resultado .mc-datos dd { margin-bottom: 10px; }
  .s-pieza { grid-template-columns: minmax(0, 1fr); }
  .s-pieza__estado { grid-row: auto; grid-column: 1; justify-content: start; justify-items: start; margin-top: 8px; grid-auto-flow: column; align-items: center; gap: 12px; }
  .s-consentimiento__acciones .mc-boton { flex: 1 1 0; }
}

/* =============================================================================
   15. Piezas de páginas interiores
   ============================================================================= */
.s-aviso-bloque { margin-bottom: 24px; }
.mc-ayuda:empty { display: none; }
.sitio .s-grupo__titulo--solo { margin-bottom: 24px; }
.s-grupo + .s-seccion--cta { padding-top: 0; }
.s-calculadora__como { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--mc-borde); color: var(--mc-texto-3); font-size: .875rem; }
.s-tabla__detalle { display: block; color: var(--mc-texto-3); font-size: .8125rem; font-weight: 400; }
.s-tabla__grupo th { padding-top: 18px; background: var(--s-fondo-alterno); color: var(--mc-texto); font-weight: 650; }
.s-tabla tbody + tbody tr:first-child > * { border-top: 1px solid var(--mc-borde); }
.s-lista-check--proxima .mc-icono { background: var(--mc-info-fondo); color: var(--mc-info); stroke-width: 2.2; }
.sitio .s-aside__titulo { margin: 0; font-size: 1.25rem; font-weight: 700; }
.s-aside__texto { margin: 0; color: var(--mc-texto-2); }
.s-formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* Mientras espera, el botón conserva su texto («Consultando al SAT…») con el giro a la izquierda (DS-15, MOV-31) */
.sitio .mc-boton[aria-busy="true"][data-s-ocupado] { color: var(--b-texto) !important; }
.sitio .mc-boton[aria-busy="true"][data-s-ocupado] > .mc-icono { display: none; }
.sitio .mc-boton[aria-busy="true"][data-s-ocupado]::after { position: static; inset: auto; flex: none; order: -1; margin: 0; }
.s-espera { margin: 0; color: var(--mc-texto-2); font-size: .9375rem; }
.s-estado-pie { margin-bottom: 24px; }
.s-gracias { padding: clamp(16px, 4vw, 40px) 0; text-align: center; }
.s-gracias:focus { outline: none; }
.sitio .s-gracias__titulo { margin: 0; font-size: 1.5rem; font-weight: 700; }
.s-gracias__texto { margin: 10px auto 0; max-width: 32em; color: var(--mc-texto-2); }
.s-error__enlaces { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mc-borde); }
.s-error__enlaces li { display: grid; gap: 2px; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--mc-borde); background: url("/img/marca/vineta-timbre.svg") 0 1.05em / 12px 14px no-repeat; }
.s-error__enlaces a { font-weight: 600; }
.s-error__enlaces span { color: var(--mc-texto-2); font-size: .9375rem; }

/* Datos de la API en la cabecera de desarrolladores */
.s-api-datos { display: grid; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
.s-api-datos div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--mc-borde); }
.s-api-datos div:last-child { border-bottom: 0; }
.s-api-datos dt { color: var(--mc-texto-3); font-size: .875rem; }
.s-api-datos dd { margin: 0; color: var(--mc-texto); font-size: .9375rem; overflow-wrap: anywhere; }
/* El enlace dentro del texto no se distingue solo por el color (Lighthouse link-in-text-block, contraste 2.3:1). */
.s-api-datos dd a { text-decoration: underline; text-underline-offset: 2px; }
.s-ejemplo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.s-codigo__titulo { margin: 0; padding: 14px 20px 0; color: #9DB3D3; font-size: .8125rem; font-weight: 600; }
.js .s-codigo__titulo { display: none; }
.s-codigo--respuesta .s-codigo__pre { font-size: .78125rem; }
.s-metodo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-family: var(--mc-fuente-mono); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.s-metodo--get { background: var(--mc-info-fondo); color: var(--mc-info-texto); }
.s-metodo--post { background: var(--mc-exito-fondo); color: var(--mc-exito-texto); }
.s-metodo--delete { background: var(--mc-peligro-fondo); color: var(--mc-peligro-texto); }
.s-tabla--endpoints td:nth-child(2) { white-space: nowrap; font-size: .8125rem; }

/* Selector de empresas (maqueta, próximamente) */
.s-selector { position: relative; max-width: 460px; margin: 0 auto; padding: 18px; border: 1px solid var(--mc-borde); border-radius: 18px; background: var(--mc-superficie); box-shadow: var(--s-sombra-mock); color: var(--mc-texto); font-size: .875rem; }
.s-selector__aviso { position: absolute; top: -12px; right: 20px; }
.s-selector__cabeza { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.s-selector__titulo { margin-right: auto; font-weight: 650; }
.s-selector__buscar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 10px; border: 1px solid var(--mc-borde-control); border-radius: 10px; color: var(--mc-texto-3); }
.s-selector__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.s-selector__lista li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.s-selector__lista li.es-actual { background: var(--mc-primario-suave); box-shadow: inset 3px 0 0 var(--mc-marca-verde); }
.s-selector__lista strong { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.s-selector__lista .mc-rfc, .s-selector__tenue { display: block; color: var(--mc-texto-3); font-size: .8125rem; }
.s-selector__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: .8125rem; font-weight: 700; }
.s-selector__avatar--1 { background: var(--mc-verde-100); color: var(--mc-verde-800); }
.s-selector__avatar--2 { background: var(--mc-azul-100); color: var(--mc-azul-800); }
.s-selector__avatar--3 { background: var(--mc-aviso-fondo); color: var(--mc-aviso-texto); }
.s-selector__avatar--4 { background: var(--mc-neutro-fondo); color: var(--mc-neutro-texto); }
.s-selector__pie { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 10px 2px; border-top: 1px solid var(--mc-borde); color: var(--mc-enlace); font-weight: 600; }
@media (max-width: 1099px) {
  .s-ejemplo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .s-api-datos div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .s-tabla--endpoints { min-width: 0; }
  .s-tabla--endpoints thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .s-tabla--endpoints, .s-tabla--endpoints tbody, .s-tabla--endpoints tr, .s-tabla--endpoints td { display: block; }
  .s-tabla--endpoints tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--mc-borde); }
  .s-tabla--endpoints tr:last-child { border-bottom: 0; }
  .s-tabla--endpoints td { padding: 0; border: 0; }
  .s-tabla--endpoints td:nth-child(2) { align-self: center; white-space: normal; overflow-wrap: anywhere; }
  .s-tabla--endpoints td:nth-child(3) { grid-column: 1 / -1; color: var(--mc-texto-2); font-size: .875rem; }
  .s-selector__lista li { grid-template-columns: 36px minmax(0, 1fr); }
  .s-selector__lista li > .mc-insignia { grid-column: 2; justify-self: start; }
  .s-formulario__pie .mc-boton { width: 100%; }
}

/* =============================================================================
   16. Timbi, la mascota (docs/marca/mascota.md)
   Un <span class="s-timbi s-timbi--pose" aria-hidden="true"> con el SVG de fondo: así el archivo claro u oscuro
   sigue al tema (también al que se elige a mano) sin JavaScript ni dos imágenes. En el sitio Timbi siempre es
   decorativa: el texto que la acompaña dice lo importante. El ancho manda; el alto sale de la proporción 4:5.
   ============================================================================= */
.s-timbi {
  --s-timbi-claro: url("/img/timbi/timbi.svg");
  --s-timbi-oscuro: url("/img/timbi/timbi-oscuro.svg");
  display: inline-block; flex: none; width: 48px; aspect-ratio: 4 / 5; vertical-align: middle;
  background: var(--s-timbi-claro) center / contain no-repeat;
}
.s-timbi--saluda { --s-timbi-claro: url("/img/timbi/timbi-saluda.svg"); --s-timbi-oscuro: url("/img/timbi/timbi-saluda-oscuro.svg"); }
.s-timbi--piensa { --s-timbi-claro: url("/img/timbi/timbi-piensa.svg"); --s-timbi-oscuro: url("/img/timbi/timbi-piensa-oscuro.svg"); }
.s-timbi--celebra { --s-timbi-claro: url("/img/timbi/timbi-celebra.svg"); --s-timbi-oscuro: url("/img/timbi/timbi-celebra-oscuro.svg"); }
.s-timbi--ups { --s-timbi-claro: url("/img/timbi/timbi-ups.svg"); --s-timbi-oscuro: url("/img/timbi/timbi-ups-oscuro.svg"); }
.s-timbi--vacio { --s-timbi-claro: url("/img/timbi/timbi-vacio.svg"); --s-timbi-oscuro: url("/img/timbi/timbi-vacio-oscuro.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .s-timbi { background-image: var(--s-timbi-oscuro); }
}
:root[data-tema="oscuro"] .s-timbi { background-image: var(--s-timbi-oscuro); }

/* Dónde aparece: errores, contacto (cabecera y gracias) y la llamada final de la portada */
.s-error__timbi.s-timbi { display: block; width: clamp(96px, 14vw, 128px); margin: 0 auto 20px; }
.s-cabecera__con-timbi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.s-cabecera__timbi.s-timbi { width: clamp(72px, 10vw, 120px); margin-bottom: -6px; }
.s-gracias__timbi.s-timbi { display: block; width: 104px; margin: 0 auto 14px; }
.s-cta__timbi.s-timbi { display: block; width: 84px; margin: 0 auto 14px; }
.s-cta--timbre .s-cta__timbi.s-timbi { width: clamp(72px, 9vw, 112px); margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .s-gracias__timbi.s-timbi { animation: s-timbi-salto .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes s-timbi-salto { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 60% { opacity: 1; transform: translateY(-4px); } 100% { transform: none; } }
}
@media (max-width: 479px) {
  .s-cabecera__con-timbi { gap: 12px; }
}

@media print {
  .s-encabezado, .s-pie, .s-consentimiento, .s-saltos, .s-timbi { display: none !important; }
  .s-hero, .s-banda-api, .s-cta { background: #FFFFFF !important; color: #000000; }
  .s-cta, .s-pie, .s-pliego { -webkit-mask: none; mask: none; }
}
@media (forced-colors: active) {
  .s-plan, .s-acordeon__item, .s-funcion, .s-codigo, .s-hoja, .s-pliego, .s-garantias { border: 1px solid CanvasText; }
  .s-cta, .s-pie, .s-pliego { -webkit-mask: none; mask: none; border: 1px solid CanvasText; }
  mark.s-resalte { forced-color-adjust: none; }
  .s-nav__enlace[aria-current="page"]::after { forced-color-adjust: none; }
}
/* §calculadoras (t72/sitio, idea 35): formularios GET que funcionan sin JavaScript y el desglose de la factura */
.s-calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--s-tarjeta-borde); border-radius: var(--s-radio-lg); background: var(--mc-superficie); box-shadow: var(--s-sombra-tarjeta); }
.s-calc__entrada { display: grid; gap: 18px; align-content: start; padding: clamp(20px, 4vw, 40px); border-right: 1px solid var(--mc-borde); }
.s-calc__salida { padding: clamp(20px, 4vw, 40px); background: var(--s-fondo-alterno); }
.s-calc .mc-control { min-height: 48px; font-size: 1rem; }
.s-calc__vacio { margin: 0; color: var(--mc-texto-2); }
.sitio .s-desglose__titulo { margin: 0 0 14px; font-size: 1.25rem; font-weight: 700; }
.s-tabla--desglose td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-tabla__total th, .s-tabla__total td { color: var(--mc-texto); font-weight: 700; }
.s-desglose__nota { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--mc-texto); }
.s-desglose__nota .mc-icono { flex: none; margin-top: 3px; }
.s-desglose__aviso { margin: 12px 0 0; color: var(--mc-texto-3); font-size: .8125rem; }
.s-calc-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.s-guia { max-width: 760px; }
.s-guia > ol { display: grid; gap: 14px; padding-left: 1.4em; }
.s-guia li::marker { font-weight: 700; color: var(--mc-texto); }
@media (max-width: 1099px) {
  .s-calc { grid-template-columns: minmax(0, 1fr); }
  .s-calc__entrada { border-right: 0; border-bottom: 1px solid var(--mc-borde); }
}
@media (max-width: 640px) {
  .s-calc-lista { grid-template-columns: minmax(0, 1fr); }
  .s-tabla--desglose th, .s-tabla--desglose td { padding: 12px 14px; }
}