/* ============================================================
   PENSURA · WEB PÚBLICA
   Hoja única. Depende de pensura-tokens.css y fuentes.css.

   Reglas que gobiernan este archivo:
     · Todo color, tamaño, espaciado y radio sale de var(--token).
     · Ningún origen externo. Ninguna URL fuera de este directorio.
     · Los dos temas salen de los semánticos de §7 y §8 de los tokens.

   Los tres literales que quedan y por qué:
     1. Los breakpoints (§0-b). CSS no acepta var() dentro de una
        media query, así que no hay forma de tokenizarlos. Están
        agrupados acá arriba, en em, y en ningún otro lugar.
     2. `100%`, `1fr`, `auto` y los porcentajes de la barra de
        antigüedad: son proporciones, no medidas.
     3. Nada más.
   ============================================================ */


/* ==========================================================
   0-a · CAPA WEB · candidatos a token
   Cuatro medidas que el sistema todavía no tiene y que esta
   pieza necesita. Están declaradas acá, derivadas de la escala
   de espaciado, para que existan en un solo lugar mientras se
   decide si suben a 03-tokens/pensura-tokens.css.
   Ver la nota de entrega: «tokens que faltan».
   ========================================================== */

:root {
  --web-ancho-contenido: calc(var(--esp-24) * 12);  /* 1152px · la caja del sitio */
  --web-ancho-prosa:     calc(var(--esp-24) * 7);   /*  672px · medida de lectura */
  --web-seccion-y:       var(--esp-24);             /*   96px · aire entre secciones */
  --web-columna:         var(--esp-16);             /*   64px · canal de la espina */
}


/* ==========================================================
   0-b · BREAKPOINTS
   --ancho-medio  52em  (832px)  · una columna → dos
   --ancho-chico  34em  (544px)  · compresiones finas
   No hay otro literal de medida en esta hoja.
   ========================================================== */


/* ==========================================================
   1 · BASE
   ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto-primario);
  font-family: var(--font-marca);
  font-size: var(--texto-lg);            /* 16px · cuerpo por defecto en web */
  font-weight: var(--peso-regular);
  line-height: var(--interlinea-cuerpo);
  font-feature-settings: var(--font-dato-features);   /* cero barrado en la mono */
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-link);
  text-decoration-thickness: var(--borde-fino);
  text-underline-offset: var(--esp-1);
  transition: color var(--transicion);
}

a:hover {
  color: var(--color-texto-primario);
}

a:active {
  color: var(--color-accion-hover);
}

/* El foco visible lo declara pensura-tokens.css §9 (*:focus-visible,
   2px de --color-foco con offset). Acá solo se refuerza el borde de
   control, que es el token separado a propósito de --color-borde-sutil
   porque tiene que cumplir 3:1 (WCAG 1.4.11). */
:focus-visible {
  outline-color: var(--color-foco);
}


/* ==========================================================
   2 · UTILIDADES DE LAYOUT
   ========================================================== */

.contenedor {
  width: 100%;
  max-width: var(--web-ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-6);
}

.prosa {
  max-width: var(--web-ancho-prosa);
}

.seccion {
  padding-block: var(--web-seccion-y);
}

.seccion--crema {
  background: var(--color-fondo-alt);
  border-block: var(--borde-fino) solid var(--color-borde-sutil);
}

.solo-lectores {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Al tabular vuelve a la página: un enlace recortado e inalcanzable no es
   un salto de contenido, es una trampa de teclado. */
.solo-lectores:focus-visible {
  position: fixed;
  top: var(--esp-3);
  inset-inline-start: var(--esp-3);
  z-index: 20;
  width: auto;
  height: auto;
  clip-path: none;
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-accion);
  color: var(--color-accion-texto);
  border-radius: var(--radio-md);
  font-size: var(--texto-md);
  text-decoration: none;
}


/* ==========================================================
   3 · TIPOGRAFÍA DE PÁGINA
   El peso 300 aparece solo en --texto-5xl y --texto-6xl.
   De 32px para abajo el mínimo es 400 (regla dura del sistema).
   ========================================================== */

.display {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-light);          /* 44px · el piso del 300 */
  line-height: var(--interlinea-ajustada);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-semibold);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.bajada {
  font-size: var(--texto-lg);
  color: var(--color-texto-lectura);       /* la prosa es teal, no azul */
}

.nota {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.dato-monto--xl {
  font-size: var(--texto-xl);
}


/* ==========================================================
   4 · CONTROLES
   Reposo, hover, active y foco. Los tres estados, no solo el reposo.
   ========================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--control-md);
  padding: var(--esp-3) var(--esp-6);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-md);
  font-family: var(--font-marca);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medium);
  line-height: var(--interlinea-titulo);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.boton--primario {
  background: var(--color-accion);
  color: var(--color-accion-texto);
}

.boton--primario:hover {
  background: var(--color-accion-hover);
  color: var(--color-accion-texto);
}

.boton--primario:active {
  background: var(--color-accion-hover);
}

.boton--secundario {
  background: transparent;
  border-color: var(--color-borde-control);
  color: var(--color-texto-primario);
}

.boton--secundario:hover {
  background: var(--color-superficie-hover);
  border-color: var(--color-texto-primario);
  color: var(--color-texto-primario);
}

.boton--secundario:active {
  border-color: var(--color-accion);
}

.boton--sm {
  min-height: var(--control-sm);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-md);
}

.boton--sobre-acento {
  background: var(--web-sobre-acento-fondo);
  color: var(--web-sobre-acento-texto);
}

.boton--sobre-acento:hover {
  background: var(--web-sobre-acento-hover-fondo);
  color: var(--web-sobre-acento-hover-texto);
}


/* ==========================================================
   5 · NAV
   ========================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-fondo);
  border-bottom: var(--borde-fino) solid var(--color-borde-sutil);
}

.nav__fila {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  min-height: var(--fila-comoda);
  padding-block: var(--esp-3);
}

.nav__marca {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav__logo {
  height: var(--esp-8);
  width: auto;
}

.nav__logo--claro  { display: var(--web-en-claro); }
.nav__logo--oscuro { display: var(--web-en-oscuro); }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--esp-6);
  margin-inline-start: auto;
  font-size: var(--texto-md);
}

.nav__links a {
  color: var(--color-texto-suave);
  text-decoration: none;
  padding-block: var(--esp-1);
  border-bottom: var(--borde-medio) solid transparent;
}

.nav__links a:hover {
  color: var(--color-texto-primario);
  border-bottom-color: var(--color-acento);
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-inline-start: auto;
}

.nav__tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  background: transparent;
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-md);
  color: var(--color-texto-suave);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), background-color var(--transicion);
}

.nav__tema:hover {
  background: var(--color-superficie-hover);
  border-color: var(--color-texto-primario);
  color: var(--color-texto-primario);
}

.nav__tema svg {
  width: var(--esp-4);
  height: var(--esp-4);
}

.nav__tema .tema-claro  { display: var(--web-en-claro); }
.nav__tema .tema-oscuro { display: var(--web-en-oscuro); }


/* ==========================================================
   6 · HERO
   ========================================================== */

.hero {
  padding-block: var(--esp-16) var(--web-seccion-y);
}

.hero__h1 {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-light);
  line-height: var(--interlinea-ajustada);
  letter-spacing: var(--tracking-display);
  max-width: var(--web-ancho-prosa);
  text-wrap: balance;
}

.hero__sub {
  margin-top: var(--esp-6);
  max-width: var(--web-ancho-prosa);
  font-size: var(--texto-xl);
  color: var(--color-texto-lectura);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-10);
}


/* ==========================================================
   7 · FRANJA DE TENSIÓN · a todo ancho
   El único momento donde el azul ocupa la pantalla entera.
   ========================================================== */

.franja {
  background: var(--web-franja-fondo);
  color: var(--web-franja-texto);
  padding-block: var(--web-seccion-y);
}

.franja__h2 {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-light);
  line-height: var(--interlinea-ajustada);
  letter-spacing: var(--tracking-display);
  max-width: var(--web-ancho-prosa);
  text-wrap: balance;
}

.franja__p {
  margin-top: var(--esp-8);
  max-width: var(--web-ancho-prosa);
  font-size: var(--texto-xl);
  color: var(--web-franja-p-color);
  opacity: var(--web-franja-p-opacidad);
}

.franja__regla {
  width: var(--esp-12);
  height: var(--borde-grueso);
  margin-bottom: var(--esp-8);
  background: var(--color-acento);
  border-radius: var(--radio-full);
}


/* ==========================================================
   8 · LOS CINCO BLOQUES DE PRODUCTO
   La idea: una espina. Un canal fijo a la izquierda con el
   ordinal en mono y la columna del isotipo dibujada como regla
   continua; el bloque se abre a la derecha en texto + pieza, y
   la pieza cambia de lado en cada bloque. No son cinco cajas:
   es un recorrido con cinco paradas y cinco piezas distintas.
   ========================================================== */

.producto {
  padding-block: var(--web-seccion-y);
}

.bloque {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-8);
  padding-block: var(--esp-12);
  border-top: var(--borde-fino) solid var(--color-borde-sutil);
}

.bloque:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bloque__espina {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.bloque__ordinal {
  font-family: var(--font-dato);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-kicker);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.bloque__regla {
  flex: 1 1 auto;
  height: var(--borde-medio);
  background: var(--color-acento);
  border-radius: var(--radio-full);
}

.bloque__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-10);
  align-items: start;
}

.bloque__kicker {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.bloque__kicker svg {
  width: var(--esp-4);
  height: var(--esp-4);
  color: var(--color-texto-suave);
}

.bloque__titulo {
  margin-top: var(--esp-4);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-semibold);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.bloque__p {
  margin-top: var(--esp-4);
  color: var(--color-texto-lectura);
}

.lista {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-8);
}

.lista li {
  display: grid;
  grid-template-columns: var(--esp-4) 1fr;
  align-items: start;
  gap: var(--esp-3);
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
}

/* Viñeta: un tramo de la columna del isotipo, no un icono prestado. */
.lista li::before {
  content: "";
  width: var(--esp-4);
  height: var(--borde-medio);
  margin-top: var(--esp-3);
  background: var(--color-acento);
  border-radius: var(--radio-full);
}


/* ==========================================================
   9 · LAS PIEZAS · un artefacto por bloque
   Todas se arman con los componentes del sistema: .chip-estado,
   .dato-monto, .dato-id, y los iconos de dominio inlineados.
   ========================================================== */

.pieza {
  background: var(--color-superficie);
  border: var(--borde-fino) solid var(--color-borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--esp-6);
}

.pieza__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: var(--borde-fino) solid var(--color-borde-sutil);
}

.pieza__pie {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: var(--borde-medio) solid var(--color-borde-sutil);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
}

/* Renglón de cálculo: label a la izquierda, importe a la derecha.
   Es el «explicar el cálculo, siempre» del tono de voz, compuesto. */
.renglon {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  font-size: var(--texto-md);
}

.renglon__label {
  color: var(--color-texto-suave);
}

.renglon__detalle {
  font-family: var(--font-dato);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.renglon--total {
  font-size: var(--texto-lg);
  font-weight: var(--peso-medium);
  color: var(--color-texto-primario);
}

/* Bloque 2 · eventos que caen a una factura */
.eventos {
  display: grid;
  gap: var(--esp-2);
}

.evento {
  display: grid;
  grid-template-columns: var(--esp-6) 1fr auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  min-height: var(--fila-default);
  /* --color-superficie-hover, no --color-fondo-alt: en oscuro los tokens de
     fondo-alt y superficie son el mismo valor, y la fila anidada dentro de
     .pieza desaparecía. En claro resuelve al mismo crema. */
  background: var(--color-superficie-hover);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
}

.evento svg {
  width: var(--esp-6);
  height: var(--esp-6);
  color: var(--color-link);
}

.evento__cuando {
  font-family: var(--font-dato);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.baja {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-block: var(--esp-4);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-family: var(--font-dato);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.baja::before,
.baja::after {
  content: "";
  flex: 1 1 auto;
  height: var(--borde-fino);
  background: var(--color-borde-sutil);
}

/* Bloque 4 · escalera de estados y antigüedad de saldos */
.escalera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.chip-estado svg {
  width: var(--esp-4);
  height: var(--esp-4);
}

.chip-estado--borrador  { background: var(--estado-borrador-fondo);  color: var(--estado-borrador-texto); }
.chip-estado--emitida   { background: var(--estado-emitida-fondo);   color: var(--estado-emitida-texto); }
.chip-estado--porvencer { background: var(--estado-porvencer-fondo); color: var(--estado-porvencer-texto); }
.chip-estado--vencida   { background: var(--estado-vencida-fondo);   color: var(--estado-vencida-texto); }
.chip-estado--pagada    { background: var(--estado-pagada-fondo);    color: var(--estado-pagada-texto); }

.antiguedad {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.antiguedad__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
}

.antiguedad__tramo {
  font-family: var(--font-dato);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.antiguedad__barra {
  height: var(--esp-2);
  background: var(--saldo-pendiente);
  border-radius: var(--radio-full);
  overflow: hidden;
}

.antiguedad__relleno {
  display: block;
  height: 100%;
  border-radius: var(--radio-full);
  background: var(--color-link);
}

.antiguedad__relleno--mora {
  background: var(--color-error);
}

/* Bloque 5 · la consulta y la respuesta */
.consulta {
  display: grid;
  gap: var(--esp-4);
}

.consulta__pregunta {
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie-hover);   /* ver la nota en .evento */
  border-radius: var(--radio-md);
  border-inline-start: var(--borde-grueso) solid var(--color-borde-control);
  font-size: var(--texto-md);
  color: var(--color-texto-primario);
}

.consulta__respuesta {
  display: grid;
  gap: var(--esp-2);
  padding-inline-start: var(--esp-4);
  border-inline-start: var(--borde-grueso) solid var(--color-acento);
}


/* ==========================================================
   10 · PARA QUIÉN
   ========================================================== */

.publicos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  margin-top: var(--esp-12);
}

.publico {
  padding: var(--esp-6);
  background: var(--color-superficie);
  border: var(--borde-fino) solid var(--color-borde-sutil);
  border-radius: var(--radio-md);
  border-top: var(--borde-grueso) solid var(--color-acento);
}

.publico svg {
  width: var(--esp-6);
  height: var(--esp-6);
  color: var(--color-link);
}

.publico__titulo {
  margin-top: var(--esp-4);
  font-size: var(--texto-xl);
  font-weight: var(--peso-semibold);
  line-height: var(--interlinea-titulo);
}

.publico__p {
  margin-top: var(--esp-2);
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
}


/* ==========================================================
   11 · OBJECIONES
   <details> nativo: cero JavaScript, teclado y lector de
   pantalla incluidos.
   ========================================================== */

.objeciones {
  display: grid;
  margin-top: var(--esp-8);
  max-width: var(--web-ancho-prosa);
  border-top: var(--borde-fino) solid var(--color-borde-sutil);
}

.objecion {
  border-bottom: var(--borde-fino) solid var(--color-borde-sutil);
}

.objecion__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--fila-comoda);
  padding-block: var(--esp-4);
  font-size: var(--texto-xl);
  font-weight: var(--peso-medium);
  cursor: pointer;
  list-style: none;
  transition: color var(--transicion);
}

.objecion__pregunta::-webkit-details-marker {
  display: none;
}

.objecion__pregunta:hover {
  color: var(--color-link);
}

.objecion__signo {
  flex: 0 0 auto;
  width: var(--esp-6);
  height: var(--esp-6);
  color: var(--color-texto-suave);
  transition: transform var(--transicion);
}

.objecion[open] .objecion__signo {
  transform: rotate(45deg);
}

.objecion__respuesta {
  padding-bottom: var(--esp-6);
  color: var(--color-texto-lectura);
}


/* ==========================================================
   12 · CIERRE
   ========================================================== */

.cierre {
  background: var(--web-franja-fondo);
  color: var(--web-franja-texto);
  padding-block: var(--web-seccion-y);
}

.cierre__h2 {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-light);
  line-height: var(--interlinea-ajustada);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.cierre__p {
  margin-top: var(--esp-6);
  max-width: var(--web-ancho-prosa);
  font-size: var(--texto-xl);
  color: var(--web-franja-p-color);
  opacity: var(--web-franja-p-opacidad);
}

.cierre__acciones {
  margin-top: var(--esp-10);
}


/* ==========================================================
   13 · FOOTER
   ========================================================== */

.pie {
  padding-block: var(--esp-12);
  border-top: var(--borde-fino) solid var(--color-borde-sutil);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-6);
}

.pie__logo {
  height: var(--esp-8);
  width: auto;
}

.pie__logo--claro  { display: var(--web-en-claro); }
.pie__logo--oscuro { display: var(--web-en-oscuro); }

.pie__firma {
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
}


/* ==========================================================
   14 · EL INTERRUPTOR DEL TEMA · composiciones, no valores
   Los valores viven en §7 y §8 de los tokens; los tokens ya
   se dan vuelta solos, tanto por atributo como por preferencia
   del sistema. Lo que no puede darse vuelta solo es la
   composición: la franja plena en teal-300 a pantalla completa
   sería el color gritando, así que en oscuro la franja y el
   cierre pasan a superficie y el acento queda en la regla.

   Hay dos maneras de estar en oscuro —el atributo, o la
   preferencia del sistema sin elección manual en contra— y CSS
   no deja combinar un @media con una lista de selectores. Para
   no repetir las reglas dos veces, cada selector prende SOLO
   estas variables y las reglas de arriba son únicas.
   Si agregás una composición por tema, agregá la variable acá:
   no vuelvas a escribir el selector en otro lado.
   ========================================================== */

:root {
  --web-en-claro:  block;
  --web-en-oscuro: none;

  --web-franja-fondo:     var(--color-accion);
  --web-franja-texto:     var(--color-accion-texto);
  --web-franja-p-color:   var(--color-accion-texto);
  --web-franja-p-opacidad: 0.88;

  --web-sobre-acento-fondo:       var(--color-fondo);
  --web-sobre-acento-texto:       var(--color-texto-primario);
  --web-sobre-acento-hover-fondo: var(--color-fondo-alt);
  --web-sobre-acento-hover-texto: var(--color-texto-primario);
}

[data-theme="oscuro"] {
  --web-en-claro:  none;
  --web-en-oscuro: block;

  --web-franja-fondo:     var(--color-fondo-alt);
  --web-franja-texto:     var(--color-texto-primario);
  --web-franja-p-color:   var(--color-texto-lectura);
  --web-franja-p-opacidad: 1;

  --web-sobre-acento-fondo:       var(--color-accion);
  --web-sobre-acento-texto:       var(--color-accion-texto);
  --web-sobre-acento-hover-fondo: var(--color-accion-hover);
  --web-sobre-acento-hover-texto: var(--color-accion-texto);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --web-en-claro:  none;
    --web-en-oscuro: block;

    --web-franja-fondo:     var(--color-fondo-alt);
    --web-franja-texto:     var(--color-texto-primario);
    --web-franja-p-color:   var(--color-texto-lectura);
    --web-franja-p-opacidad: 1;

    --web-sobre-acento-fondo:       var(--color-accion);
    --web-sobre-acento-texto:       var(--color-accion-texto);
    --web-sobre-acento-hover-fondo: var(--color-accion-hover);
    --web-sobre-acento-hover-texto: var(--color-accion-texto);
  }
}


/* ==========================================================
   16 · FORMULARIO
   Se usa en contacto.html. Vive en esta hoja y no en una
   aparte para que el control siga siendo un solo componente:
   una segunda hoja sería una segunda verdad.

   Los cuatro estados de cada campo —reposo, foco, error,
   deshabilitado— y los tres del envío —cargando, éxito,
   error— están todos acá. El error nunca se comunica solo
   con color: siempre color + icono + palabra.
   ========================================================== */

.form {
  display: grid;
  gap: var(--esp-6);
}

.form__grupo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
}

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo__label {
  font-size: var(--texto-md);
  font-weight: var(--peso-medium);
  color: var(--color-texto-primario);
}

.campo__opcional {
  margin-inline-start: var(--esp-2);
  font-family: var(--font-dato);
  font-size: var(--texto-xs);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* Reposo. El borde es --color-borde-control, que es el token que
   cumple 3:1 contra la superficie (WCAG 1.4.11). */
.control {
  width: 100%;
  min-height: var(--control-lg);      /* 48px · se llena con el pulgar */
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie);
  color: var(--color-texto-primario);
  font-family: var(--font-marca);
  font-size: var(--texto-lg);         /* 16px · menos que esto y iOS hace zoom */
  font-weight: var(--peso-regular);
  line-height: var(--interlinea-cuerpo);
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-md);
  transition: border-color var(--transicion), background-color var(--transicion);
}

.control::placeholder {
  color: var(--color-texto-suave);
}

.control:hover {
  border-color: var(--color-texto-primario);
}

/* Foco: el anillo lo pone pensura-tokens.css §9. Acá solo se engrosa
   el borde para que el campo activo se lea también sin el anillo. */
.control:focus-visible {
  border-color: var(--color-foco);
  outline-color: var(--color-foco);
}

.control:disabled {
  background: var(--color-superficie-hover);
  border-color: var(--color-borde-sutil);
  color: var(--color-texto-suave);
  cursor: not-allowed;
}

.control--area {
  min-height: calc(var(--control-lg) * 2);
  resize: vertical;
}

.campo--error .control {
  border-color: var(--color-error);
  border-width: var(--borde-medio);
}

.campo__ayuda {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* Segundo y tercer canal del error: icono y palabra, no solo el rojo. */
.campo__error {
  display: none;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-error);
}

.campo--error .campo__error {
  display: flex;
}

.campo__error svg {
  flex: 0 0 auto;
  width: var(--esp-4);
  height: var(--esp-4);
  margin-top: var(--esp-1);
}

.form__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
}

.form__legal {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* Envío en curso: el botón no cambia de ancho ni de texto de golpe,
   se le agrega el giro y se bloquea. */
.boton[aria-busy="true"] {
  cursor: progress;
}

.boton:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.giro {
  display: none;
  width: var(--esp-4);
  height: var(--esp-4);
  border: var(--borde-medio) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radio-full);
  animation: giro 700ms linear infinite;
}

.boton[aria-busy="true"] .giro {
  display: block;
}

@keyframes giro {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .giro { animation-duration: 2400ms; }
}

/* Resultado del envío. Mismo criterio que los chips: relleno + icono
   + palabra. Nunca el color solo. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  font-size: var(--texto-md);
}

.aviso svg {
  flex: 0 0 auto;
  width: var(--esp-6);
  height: var(--esp-6);
}

.aviso--exito {
  background: var(--estado-pagada-fondo);
  color: var(--estado-pagada-texto);
}

.aviso--error {
  background: var(--estado-vencida-fondo);
  color: var(--estado-vencida-texto);
}

.aviso__titulo {
  font-weight: var(--peso-medium);
}

.aviso__p {
  margin-top: var(--esp-1);
}

/* Va después de todo lo que declara display: sin el !important, el
   display de un componente le gana al atributo y el elemento oculto se
   ve igual. Es lo que mantiene escondido el botón de tema sin JS. */
[hidden] {
  display: none !important;
}


/* ==========================================================
   17 · PÁGINAS CORTAS · contacto y 404
   ========================================================== */

.pagina {
  padding-block: var(--esp-16) var(--web-seccion-y);
}

.pagina__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-12);
  align-items: start;
  margin-top: var(--esp-10);
}

.pagina__h1 {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-light);
  line-height: var(--interlinea-ajustada);
  letter-spacing: var(--tracking-display);
  max-width: var(--web-ancho-prosa);
  text-wrap: balance;
}

.pagina__sub {
  margin-top: var(--esp-6);
  max-width: var(--web-ancho-prosa);
  font-size: var(--texto-xl);
  color: var(--color-texto-lectura);
}

.pagina__regla {
  width: var(--esp-12);
  height: var(--borde-grueso);
  margin-bottom: var(--esp-8);
  background: var(--color-acento);
  border-radius: var(--radio-full);
}

.pagina__nota {
  margin-top: var(--esp-8);
}

/* El 404 es una sola columna centrada en la altura de la ventana. */
.vacio {
  display: grid;
  justify-items: start;
  padding-block: var(--esp-24) var(--esp-24);
}

.vacio__codigo {
  font-family: var(--font-dato);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.vacio__acciones {
  margin-top: var(--esp-10);
}


/* ==========================================================
   18 · RESPONSIVE
   ========================================================== */

@media (min-width: 34em) {
  .publicos {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__h1 {
    font-size: var(--texto-5xl);
  }

  .franja__h2,
  .cierre__h2 {
    font-size: var(--texto-5xl);
  }
}

@media (min-width: 52em) {
  .contenedor {
    padding-inline: var(--esp-10);
  }

  .nav__links {
    display: flex;
  }

  .nav__acciones {
    margin-inline-start: 0;
  }

  .hero {
    padding-block: var(--esp-24) var(--web-seccion-y);
  }

  .hero__h1 {
    font-size: var(--texto-6xl);
  }

  .publicos {
    grid-template-columns: repeat(3, 1fr);
  }

  /* La espina: el ordinal y la regla salen del canal izquierdo y
     el bloque se abre en dos columnas a la derecha. */
  .bloque {
    grid-template-columns: var(--web-columna) 1fr;
    gap: var(--esp-6) var(--esp-10);
    align-items: start;
  }

  .bloque__espina {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--esp-4);
    position: sticky;
    top: var(--esp-24);
  }

  .bloque__regla {
    width: var(--borde-medio);
    height: var(--esp-24);
    flex: 0 0 auto;
  }

  .bloque__cuerpo {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-12);
  }

  /* La pieza cambia de lado en los bloques pares. */
  .bloque:nth-of-type(even) .bloque__texto {
    order: 2;
  }

  /* El bloque del asistente no tiene lista: la consulta ocupa el ancho. */
  .bloque--ancho .bloque__cuerpo {
    grid-template-columns: 1fr;
    gap: var(--esp-8);
  }

  .bloque--ancho .bloque__texto {
    max-width: var(--web-ancho-prosa);
  }

  /* Formulario: nombre y empresa, y email y teléfono, comparten fila
     recién cuando hay ancho. En mobile es una columna. */
  .form__grupo {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagina__cuerpo {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-16);
  }
}