/* =====================================================================
   LA FERRETERÍA DIARIO · Sistema visual (fuente única)
   Versión 1.0 · 19 de septiembre de 2026
   ---------------------------------------------------------------------
   Regla de oro: ningún artboard redefine colores, tipografías, botones,
   campos, chips, sellos ni animaciones. Todo sale de este archivo.
   Si algo falta, se agrega ACÁ (una sola vez) y se documenta en el
   contrato visual. Nada de estilos inline con valores de color o tamaño.
   ===================================================================== */

/* Respaldo métrico del logotipo: si UnifrakturMaguntia tarda o falla,
   Georgia ocupa el mismo ancho y el nombre no desborda. */
@font-face {
  font-family: 'Ferretero Marca Respaldo';
  src: local('Georgia');
  size-adjust: 93%;  /* Georgia 869,8 px → 808,9 px: mismo ancho que la gótica, 808,3 px (medido) */
}

:root {
  /* ---- Papeles ---- */
  --papel: #F6F1E7;
  --papel-claro: #FBF8F2;
  --papel-hundido: #ECE5D6;
  --banda-crema: #EFE8DA;
  --hover-fila: #E6DECD;

  /* ---- Tintas y grises (contraste sobre papel) ---- */
  --tinta: #16140F;          /* 16.35:1 */
  --cuerpo: #2A2620;         /* 13.36:1 */
  --gris-bajada: #4A453C;    /*  8.45:1 */
  --gris-meta: #6B6558;      /*  5.14:1 · NO usar sobre --hover-fila (4.33) */

  /* ---- Reglas y bordes ---- */
  --regla: #D8CFBE;          /* decorativa: filas, tarjetas */
  --regla-crema: #D0C6B3;    /* decorativa sobre banda crema */
  --borde-control: #8C8472;  /* límite de control: 3.30:1 papel · 3.50:1 papel claro */
  --separador-nav: #C9BFAC;

  /* ---- Acentos ---- */
  --clarete: #7A1F2B;        /* único acento · 9.06:1 */
  --clarete-hover: #5A1520;
  --laton: #8A6D3B;          /* ornamento · texto solo >=24px sobre papel (4.31) o sobre papel claro (4.57) */
  --laton-claro: #C9A96A;    /* acento y foco sobre tinta · 8.21:1 */

  /* ---- Sobre tinta ---- */
  --sobre-tinta-texto: #F6F1E7;
  --sobre-tinta-cuerpo: #E9E2D4;
  --sobre-tinta-secundario: #B9B0A0;  /* 8.57:1 */
  --sobre-tinta-aviso: #E9D9B4;
  --superficie-oscura: #1E1B15;
  --borde-oscuro: #3A352C;            /* decorativo */
  --borde-oscuro-control: #8F877A;    /* límite de control sobre tinta: 5.18:1 */

  /* ---- Estado ---- */
  --ok: #2F5D3A;             /* 6.79:1 · solo sobre fondos claros */

  /* ---- Solo lienzo (fuera del producto) ---- */
  --lienzo: #E4DCCB;

  /* ---- Familias ---- */
  --fuente-marca: 'UnifrakturMaguntia', 'Ferretero Marca Respaldo', Georgia, serif;
  --fuente-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fuente-interfaz: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --fuente-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Marca (logotipo tipográfico) ---- */
  --marca-em: 8.12;          /* ancho de "La Ferretería Diario" en em (medido: 8.08) */

  /* ---- Espaciado ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-7: 32px; --e-8: 40px; --e-9: 48px; --e-10: 64px; --e-11: 72px; --e-12: 80px; --e-13: 96px;
  --contenido-max: 1280px;

  /* ---- Movimiento ---- */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-rapida: 0.2s;
  --d-corta: 0.25s;
  --d-media: 0.3s;
  --d-raya: 0.35s;
  --d-tarjeta: 0.45s;
  --d-entrada: 0.8s;

  /* ---- Sombras ---- */
  --sombra-tarjeta: 0 22px 44px -28px rgba(22, 20, 15, 0.45);
  --sombra-cajon: 0 24px 48px -24px rgba(22, 20, 15, 0.45);
}

/* =====================================================================
   BASE
   ===================================================================== */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-editorial);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img { max-width: 100%; }
svg { flex-shrink: 0; }
a { color: var(--clarete); text-decoration: none; }
a:hover { color: var(--clarete-hover); }
::selection { background: var(--clarete); color: var(--papel-claro); }
:focus-visible { outline: 2px solid var(--clarete); outline-offset: 3px; }
.sobre-tinta :focus-visible { outline-color: var(--laton-claro); }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
main:focus { outline: none; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }

/* Raíz de cada página: responde a su propio ancho (container queries) */
.pag {
  container: pagina / inline-size;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-editorial);
}
.pag > main { flex: 1 0 auto; display: block; }

/* Envoltura: ancho máximo y márgenes laterales (80 · 40 · 20) */
.envoltura {
  --margen: 80px;
  width: 100%;
  max-width: calc(var(--contenido-max) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Bloques verticales */
.bloque { padding-block: 72px; }
.bloque--corto { padding-block: 48px; }
.bloque--pegado-arriba { padding-top: 0; }
.bloque--pegado-abajo { padding-bottom: 0; }

/* Accesibilidad utilitaria */
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 12px 18px; background: var(--tinta); color: var(--papel);
  font: 600 15px/1.2 var(--fuente-interfaz);
  transition: top var(--d-rapida) ease;
}
/* El anillo se dibuja afuera de la caja oscura, sobre la página clara: va en clarete (latón claro no contrasta sobre papel). */
.saltar:focus, .saltar:focus-visible { top: 8px; color: var(--papel); outline-color: var(--clarete); outline-offset: 3px; }
.saltar:hover { color: var(--papel); }

/* =====================================================================
   TIPOGRAFÍA
   ===================================================================== */
.titulo-hero { font-family: var(--fuente-editorial); font-size: 96px; line-height: 0.95; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.titulo-1 { font-family: var(--fuente-editorial); font-size: 58px; line-height: 1.02; font-weight: 500; letter-spacing: -0.018em; text-wrap: balance; }
.titulo-destacada { font-family: var(--fuente-editorial); font-size: 52px; line-height: 1.02; font-weight: 500; letter-spacing: -0.018em; text-wrap: balance; }
.titulo-2 { font-family: var(--fuente-editorial); font-size: 44px; line-height: 1.04; font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
.titulo-3 { font-family: var(--fuente-editorial); font-size: 24px; line-height: 1.2; font-weight: 500; text-wrap: balance; }
.titulo-4 { font-family: var(--fuente-editorial); font-size: 20px; line-height: 1.25; font-weight: 500; text-wrap: balance; }
.titulo-seccion { font-family: var(--fuente-editorial); font-size: 27px; line-height: 1.1; font-weight: 600; text-wrap: balance; }

.bajada { font-family: var(--fuente-editorial); font-size: 22px; line-height: 1.5; color: var(--gris-bajada); max-width: 40em; text-wrap: pretty; }
.bajada--italica { font-style: italic; font-size: 23px; line-height: 1.45; }
.bajada-tarjeta { font-family: var(--fuente-editorial); font-size: 17px; line-height: 1.5; color: var(--gris-bajada); text-wrap: pretty; }
.texto { font-family: var(--fuente-editorial); font-size: 18px; line-height: 1.6; color: var(--cuerpo); text-wrap: pretty; }
.texto-interfaz { font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.55; color: var(--cuerpo); text-wrap: pretty; }
.texto-chico { font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.5; color: var(--gris-bajada); text-wrap: pretty; }

.kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clarete); }
.kicker-compuesto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clarete); }
.kicker-compuesto .raya { width: 28px; height: 1px; background: var(--clarete); }
.kicker-compuesto .segundo { color: var(--gris-meta); }

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-family: var(--fuente-interfaz); font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--gris-meta); }
.meta svg { width: 15px; height: 15px; }
.meta-sep { color: var(--gris-meta); }

.numeral { font-family: var(--fuente-editorial); font-style: italic; font-weight: 400; line-height: 1; color: var(--laton); }
.numeral--xl { font-size: 64px; }
.numeral--l { font-size: 48px; }
.numeral--m { font-size: 36px; }
.numeral--s { font-size: 30px; }
.numeral--xs { font-size: 26px; }
/* Numeral de menos de 24px: latón no alcanza contraste, va en gris meta */
.numeral-chico { font-family: var(--fuente-editorial); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1; color: var(--gris-meta); }

.cifra { font-family: var(--fuente-editorial); font-size: 50px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--clarete); font-variant-numeric: tabular-nums; }
.datos { font-variant-numeric: tabular-nums; }
.lema { font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris-bajada); }
.rotulo { font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-meta); }
.codigo { font-family: var(--fuente-mono); font-size: 14.5px; line-height: 1.7; }

/* Titular con subrayado que crece (el <a> va dentro del h2/h3) */
.titular {
  color: var(--tinta);
  background-image: linear-gradient(var(--clarete), var(--clarete));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--d-tarjeta) var(--curva), color var(--d-corta) ease;
}
.titular:hover, .titular:focus-visible { color: var(--tinta); background-size: 100% 1px; }
/* Titular suelto (sin tarjeta que lo cubra): área táctil de 44 px con relleno vertical en línea,
   que no mueve la maqueta. El subrayado queda pegado al texto (origen en la caja de contenido). */
.titular:not(.enlace-cubre) { padding-block: max(0px, calc(23px - 0.5em)); background-origin: content-box; }

/* Enlace que cubre toda la tarjeta (un solo enlace por tarjeta) */
.cubre { position: relative; }
.enlace-cubre::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cubre .sobre-cubre { position: relative; z-index: 2; }

/* Enlace de acción con flecha */
.enlace-mas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--clarete);
}
.enlace-mas svg { width: 16px; height: 16px; transition: transform var(--d-media) var(--curva); }
.enlace-mas:hover svg.avanza, .cubre:hover .enlace-mas svg.avanza { transform: translateX(4px); }

/* Enlaces dentro de texto corrido: siempre subrayados (no solo color) */
.enlace-texto { color: var(--clarete); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.enlace-texto:hover { color: var(--clarete-hover); text-decoration-thickness: 2px; }

/* =====================================================================
   REGLAS, BANDAS Y ENCABEZADOS DE BLOQUE
   ===================================================================== */
.regla-doble { height: 7px; border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.regla-lista { border-top: 2px solid var(--tinta); }
.regla-fina { border-top: 1px solid var(--regla); }
.banda--crema { background: var(--banda-crema); border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); }
.banda--tinta { background: var(--tinta); color: var(--sobre-tinta-texto); }

.encabezado-bloque { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 36px; }
.encabezado-bloque-textos { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.encabezado-bloque-accion { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.encabezado-lista { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--tinta); }
.sobre-tinta .encabezado-lista { border-bottom-color: var(--sobre-tinta-texto); }

/* Sobre tinta: todo lo que vive en una superficie oscura */
.sobre-tinta { color: var(--sobre-tinta-texto); }
.sobre-tinta .kicker, .sobre-tinta .kicker-compuesto { color: var(--laton-claro); }
.sobre-tinta .kicker-compuesto .raya { background: var(--laton-claro); }
.sobre-tinta .kicker-compuesto .segundo, .sobre-tinta .meta, .sobre-tinta .meta-sep, .sobre-tinta .rotulo { color: var(--sobre-tinta-secundario); }
.sobre-tinta .bajada, .sobre-tinta .bajada-tarjeta, .sobre-tinta .texto-chico { color: var(--sobre-tinta-secundario); }
.sobre-tinta .texto, .sobre-tinta .texto-interfaz { color: var(--sobre-tinta-cuerpo); }
.sobre-tinta .titular, .sobre-tinta .titular:hover { color: var(--sobre-tinta-texto); background-image: linear-gradient(var(--laton-claro), var(--laton-claro)); }
.sobre-tinta .enlace-mas, .sobre-tinta .enlace-texto { color: var(--laton-claro); }
.sobre-tinta .enlace-mas:hover, .sobre-tinta .enlace-texto:hover { color: var(--sobre-tinta-texto); }
.sobre-tinta .regla-lista { border-top-color: var(--sobre-tinta-texto); }
.sobre-tinta .regla-fina { border-top-color: var(--borde-oscuro); }
.sobre-tinta .numeral { color: var(--laton-claro); }

/* =====================================================================
   GRILLAS (se pliegan con el ancho del contenedor)
   ===================================================================== */
.g2, .g3, .g4, .g-2-1, .g-1-2, .g-7-5, .g-8-4, .g-1-3, .g-3-2 { display: grid; column-gap: 32px; row-gap: 40px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.g-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.g-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.gap-chico { column-gap: 24px; row-gap: 24px; }

/* Reglas verticales entre columnas (se vuelven horizontales al apilar) */
.g-reglas { column-gap: 24px; }
.g-reglas > * + * { border-left: 1px solid var(--regla); padding-left: 24px; }

/* =====================================================================
   BOTONES
   ===================================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px;
  border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel);
  font-family: var(--fuente-interfaz); font-size: 14.5px; line-height: 1.25; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-rapida) ease, color var(--d-rapida) ease, border-color var(--d-rapida) ease, transform var(--d-rapida) ease;
}
.boton:not([aria-disabled="true"]):hover { background: var(--clarete); border-color: var(--clarete); color: var(--papel-claro); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 16px; height: 16px; transition: transform var(--d-media) var(--curva); }
.boton:not([aria-disabled="true"]):hover svg.avanza { transform: translateX(4px); }
.boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton[aria-disabled="true"]:active { transform: none; }

.boton--clarete { background: var(--clarete); border-color: var(--clarete); color: var(--papel-claro); }
.boton--clarete:not([aria-disabled="true"]):hover { background: var(--clarete-hover); border-color: var(--clarete-hover); color: var(--papel-claro); }
.boton--borde { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--borde:not([aria-disabled="true"]):hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.boton--papel { background: transparent; border-color: var(--borde-oscuro-control); color: var(--sobre-tinta-texto); }
.boton--papel:not([aria-disabled="true"]):hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.boton--papel-lleno { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.boton--papel-lleno:not([aria-disabled="true"]):hover { background: var(--laton-claro); border-color: var(--laton-claro); color: var(--tinta); }
.boton--peligro { background: transparent; border-color: var(--clarete); color: var(--clarete); }
.boton--peligro:not([aria-disabled="true"]):hover { background: var(--clarete); border-color: var(--clarete); color: var(--papel-claro); }
.boton--texto { min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--clarete); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.boton--texto:not([aria-disabled="true"]):hover { background: transparent; border-color: transparent; color: var(--clarete-hover); text-decoration-color: currentColor; }

.boton--compacto { min-height: 44px; padding: 8px 18px; }
.boton--principal { min-height: 52px; padding: 12px 28px; font-size: 15.5px; }
.boton--ancho { width: 100%; }
.boton--icono { min-height: 44px; width: 44px; padding: 0; }
.fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* =====================================================================
   SELLOS, CHIPS Y CONTROLES
   ===================================================================== */
.sello {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 8px;
  border: 1px solid currentColor; color: var(--tinta);
  font-family: var(--fuente-interfaz); font-size: 11.5px; line-height: 1.2; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.sello svg { width: 13px; height: 13px; }
.sello--premium { color: var(--clarete); }
.sello--libre { color: var(--gris-bajada); }
.sello--ok { color: var(--ok); }
.sello--espera { color: var(--gris-bajada); border-style: dashed; }
.sello--error { color: var(--clarete); border-style: dashed; }
.sello--publicidad { color: var(--gris-meta); }
.sello--formato { color: var(--tinta); }
.sobre-tinta .sello { color: var(--sobre-tinta-texto); }
.sobre-tinta .sello--premium { color: var(--laton-claro); }
.fila-sellos { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--borde-control); background: var(--papel-claro); color: var(--cuerpo);
  font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.2; font-weight: 600; white-space: nowrap;
  transition: background-color var(--d-rapida) ease, border-color var(--d-rapida) ease, color var(--d-rapida) ease;
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip .chip-tilde { display: none; width: 15px; height: 15px; }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip[aria-pressed="true"] .chip-tilde { display: block; }
.fila-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pestañas y control segmentado */
.segmentado { display: inline-flex; flex-wrap: wrap; }
.segmentado > button { min-height: 44px; padding: 0 16px; margin-left: -1px; border: 1px solid var(--borde-control); background: var(--papel-claro); font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--cuerpo); }
.segmentado > button:first-child { margin-left: 0; }
.segmentado > button[aria-pressed="true"] { position: relative; background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.formulario { display: flex; flex-direction: column; gap: 22px; }
.campo-grupo { display: flex; flex-direction: column; gap: 8px; }
.etiqueta { font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--cuerpo); }
.ayuda { font-family: var(--fuente-interfaz); font-size: 13.5px; line-height: 1.45; color: var(--gris-bajada); }
.campo {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--borde-control); background: var(--papel-claro); color: var(--tinta);
  font-family: var(--fuente-interfaz); font-size: 16px; line-height: 1.3; appearance: none;
  transition: border-color var(--d-rapida) ease;
}
.campo::placeholder { color: var(--gris-meta); opacity: 1; }
.campo:hover { border-color: var(--tinta); }
.campo:focus, .campo:focus-visible { outline: 2px solid var(--clarete); outline-offset: 1px; border-color: var(--tinta); }
.campo[aria-invalid="true"] { border: 2px solid var(--clarete); padding: 9px 13px; }
.campo[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.campo--area { min-height: 128px; resize: vertical; line-height: 1.5; }
.campo-con-icono { position: relative; }
.campo-con-icono > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gris-meta); pointer-events: none; }
.campo-con-icono > .campo { padding-left: 44px; }
.selector { position: relative; }
.selector > .campo { padding-right: 44px; cursor: pointer; }
.selector > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta); pointer-events: none; }
.campo-accion { display: flex; }
.campo-accion > .campo { flex: 1 1 auto; min-width: 0; }
.campo-accion > .boton { flex: 0 0 auto; margin-left: -1px; }
.error-campo { display: flex; align-items: flex-start; gap: 6px; font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--clarete); }
.error-campo svg { width: 16px; height: 16px; margin-top: 1px; }
.opcion { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.45; color: var(--cuerpo); cursor: pointer; }
.opcion input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--clarete); flex-shrink: 0; }
.resumen-errores { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; background: var(--papel-claro); border: 1px solid var(--regla); border-top: 3px solid var(--clarete); }
.resumen-errores-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--fuente-interfaz); font-size: 16px; font-weight: 700; color: var(--clarete); }
.resumen-errores-titulo svg { width: 20px; height: 20px; }
.resumen-errores ul { margin: 0; padding-left: 20px; font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.5; }
.resumen-errores a { display: inline-flex; align-items: center; min-height: 44px; color: var(--clarete); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   AVISOS EN LÍNEA (nunca ventanas emergentes)
   ===================================================================== */
.aviso {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: var(--papel-claro); border: 1px solid var(--regla); border-top: 2px solid var(--tinta);
  font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.5; color: var(--cuerpo);
}
.aviso > svg { width: 20px; height: 20px; margin-top: 1px; color: var(--tinta); }
.aviso-cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aviso-titulo { font-weight: 700; color: var(--tinta); }
.aviso--ok { border-top-color: var(--ok); }
.aviso--ok > svg, .aviso--ok .aviso-titulo { color: var(--ok); }
.aviso--error { border-top-color: var(--clarete); }
.aviso--error > svg, .aviso--error .aviso-titulo { color: var(--clarete); }
.aviso--demo { border-top-color: var(--laton); background: var(--papel-claro); }
.aviso--demo > svg { color: var(--laton); }
.sobre-tinta .aviso, .aviso.sobre-tinta { background: var(--superficie-oscura); border-color: var(--borde-oscuro); border-top-color: var(--laton-claro); color: var(--sobre-tinta-aviso); }
.sobre-tinta .aviso > svg, .sobre-tinta .aviso-titulo { color: var(--sobre-tinta-texto); }
.aparece-aviso { animation: aparecer var(--d-raya) var(--curva) both; }

/* Estado vacío y error de página */
.estado-vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 56px 24px; background: var(--papel-claro); border: 1px solid var(--regla);
}
.estado-vacio > svg { width: 36px; height: 36px; color: var(--laton); }
.estado-vacio-titulo { font-family: var(--fuente-editorial); font-size: 26px; line-height: 1.2; font-weight: 500; text-wrap: balance; }
.estado-vacio-texto { max-width: 46ch; font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.55; color: var(--gris-bajada); text-wrap: pretty; }
.estado-vacio .fila-botones { justify-content: center; margin-top: 6px; }

/* Carga: esqueletos (sin texto falso) */
.esqueleto { background: var(--papel-hundido); animation: pulso 1.6s ease-in-out infinite; }
.esqueleto-linea { height: 14px; background: var(--papel-hundido); animation: pulso 1.6s ease-in-out infinite; }
.esqueleto-linea--titulo { height: 26px; }
.esqueleto-linea--corta { width: 60%; }

/* =====================================================================
   TARJETAS, FILAS Y NOTAS
   ===================================================================== */
.tarjeta { background: var(--papel-claro); border: 1px solid var(--regla); }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.tarjeta--elevable { transition: transform var(--d-tarjeta) var(--curva), box-shadow var(--d-tarjeta) ease, border-color var(--d-media) ease; }
.tarjeta--elevable:hover, .tarjeta--elevable:focus-within { transform: translateY(-3px); box-shadow: var(--sombra-tarjeta); }
.tarjeta--oscura { background: var(--superficie-oscura); border: 1px solid var(--borde-oscuro); color: var(--sobre-tinta-texto); }
.tarjeta--oscura:hover, .tarjeta--oscura:focus-within { border-color: var(--laton-claro); }
.pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--regla); }

/* Nota en tarjeta (Últimas notas, resultados, relacionadas) */
.nota-tarjeta { position: relative; display: flex; flex-direction: column; gap: 12px; }
.nota-tarjeta .medio { margin-bottom: 6px; }

/* Nota en fila con miniatura (Lo esencial, listas compactas) */
.nota-fila { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--regla); }
.nota-fila-textos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Fila de lista clicable (guías, ediciones anteriores) */
.fila-enlace { position: relative; display: block; color: var(--tinta); transition: background-color var(--d-corta) ease, padding var(--d-raya) var(--curva); }
.fila-enlace:hover, .fila-enlace:focus-within { background-color: var(--hover-fila); padding-left: 16px; }
.fila-enlace:hover .meta, .fila-enlace:focus-within .meta, .fila-enlace:hover .rotulo, .fila-enlace:focus-within .rotulo { color: var(--gris-bajada); }

/* Migas */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--gris-meta); }
.migas li { display: inline-flex; align-items: center; gap: 10px; }
.migas li + li::before { content: '/'; color: var(--gris-meta); }
.migas a { display: inline-block; min-width: 44px; padding-block: 12px; text-align: center; color: var(--gris-meta); }
.migas a:hover { color: var(--clarete); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* =====================================================================
   MEDIOS (espacio reservado: nunca hay salto de maquetación)
   ===================================================================== */
.medio { container: medio / inline-size; position: relative; display: block; width: 100%; overflow: hidden; background-color: var(--papel-hundido); }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-3x2 { aspect-ratio: 3 / 2; }
.ar-16x10 { aspect-ratio: 16 / 10; }
.ar-4x3 { aspect-ratio: 4 / 3; }
.ar-1x1 { aspect-ratio: 1 / 1; }
.ar-4x5 { aspect-ratio: 4 / 5; }
.ar-21x8 { aspect-ratio: 21 / 8; }
.medio > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.medio--vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background-image: repeating-linear-gradient(135deg, rgba(22, 20, 15, 0.06) 0 1px, transparent 1px 9px);
  color: var(--gris-meta);
}
.medio--vacio > svg { width: 28px; height: 28px; }
.medio-etiqueta { padding: 0 12px; text-align: center; font-family: var(--fuente-interfaz); font-size: 11.5px; line-height: 1.35; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-meta); }
.medio--cargando { animation: pulso 1.6s ease-in-out infinite; }
.medio--ausente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; outline: 1px dashed var(--borde-control); outline-offset: -1px; color: var(--gris-bajada); text-align: center; }
.medio--ausente > svg { width: 26px; height: 26px; }
.medio--ausente .medio-aviso { font-family: var(--fuente-interfaz); font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.medio--circulo { border-radius: 999px; }
@container medio (max-width: 170px) { .medio-etiqueta, .medio--ausente .medio-aviso { display: none; } }
.figura { display: flex; flex-direction: column; gap: 10px; }
.figura-pie { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--fuente-interfaz); font-size: 14px; line-height: 1.45; color: var(--gris-bajada); }
.figura-credito { color: var(--gris-meta); }

/* =====================================================================
   LECTURA LARGA (notas y guías)
   ===================================================================== */
.lectura { max-width: 66ch; font-family: var(--fuente-editorial); font-size: 20px; }
.lectura p { margin: 0 0 22px; font-size: 20px; line-height: 1.7; color: var(--cuerpo); text-wrap: pretty; }
.lectura .entradilla { margin-bottom: 32px; font-size: 22px; line-height: 1.6; color: var(--tinta); }
.lectura .capitular::first-letter { float: left; font-size: 4.2em; line-height: 0.8; font-weight: 500; padding: 8px 12px 0 0; color: var(--clarete); }
.lectura h2 { margin: 52px 0 18px; padding-top: 20px; border-top: 1px solid var(--tinta); font-size: 34px; line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: 24px; }
.lectura h3 { margin: 34px 0 12px; font-size: 24px; line-height: 1.25; font-weight: 600; text-wrap: balance; scroll-margin-top: 24px; }
.lectura ul, .lectura ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; padding-left: 26px; }
.lectura li { font-size: 20px; line-height: 1.65; color: var(--cuerpo); padding-left: 4px; }
.lectura li::marker { color: var(--clarete); }
.lectura strong { font-weight: 600; color: var(--tinta); }
.lectura a { color: var(--clarete); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lectura a:hover { color: var(--clarete-hover); text-decoration-thickness: 2px; }
.lectura .figura { margin: 36px 0; }
.lectura h2 > .numeral { margin-right: 14px; }
.lectura .tabla-marco { margin: 32px 0; }
.cita { margin: 36px 0; padding: 26px 0; border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.cita p, .lectura .cita p { margin: 0; font-family: var(--fuente-editorial); font-size: 30px; line-height: 1.3; font-style: italic; color: var(--tinta); text-wrap: balance; }
.cita footer { margin-top: 14px; font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--gris-meta); }
.recuadro { margin: 36px 0; padding: 24px 28px; background: var(--banda-crema); border-top: 2px solid var(--tinta); }
.recuadro .kicker, .lectura .recuadro p.kicker { margin: 0 0 12px; font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.3; }
.recuadro ul, .lectura .recuadro ul { margin: 0; padding-left: 22px; gap: 8px; }
.recuadro li, .lectura .recuadro li { font-family: var(--fuente-interfaz); font-size: 16px; line-height: 1.55; color: var(--cuerpo); }
.recuadro p, .lectura .recuadro p { margin: 0; font-family: var(--fuente-interfaz); font-size: 16px; line-height: 1.55; }
.caja-prompt { padding: 22px 24px; background: var(--tinta); color: var(--sobre-tinta-cuerpo); font-family: var(--fuente-mono); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Índice de lectura */
.indice { display: flex; flex-direction: column; gap: 12px; }
.indice--lateral { position: sticky; top: 24px; align-self: start; }
.indice ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.indice a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--regla); font-family: var(--fuente-interfaz); font-size: 14.5px; line-height: 1.35; color: var(--cuerpo); transition: color var(--d-rapida) ease, padding-left var(--d-media) var(--curva); }
.indice a:hover { color: var(--clarete); padding-left: 4px; }
.indice-desplegable { border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--regla); }
.indice-desplegable > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none; font-family: var(--fuente-interfaz); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta); }
.indice-desplegable > summary::-webkit-details-marker { display: none; }
.indice-desplegable > summary svg { width: 18px; height: 18px; transition: transform var(--d-media) var(--curva); }
.indice-desplegable[open] > summary svg { transform: rotate(180deg); }
.indice-desplegable ol { border-top: 1px solid var(--regla); }
.solo-movil-tablet { display: none; }

/* Tablas: fichas apiladas en celular */
.tabla-marco { width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.45; color: var(--cuerpo); font-variant-numeric: tabular-nums; }
.tabla caption { caption-side: top; padding-bottom: 12px; text-align: left; font-family: var(--fuente-interfaz); font-size: 14px; color: var(--gris-bajada); }
.tabla thead th { padding: 0 16px 12px 0; border-bottom: 2px solid var(--tinta); text-align: left; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-meta); vertical-align: bottom; }
.tabla td, .tabla tbody th { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--regla); text-align: left; vertical-align: top; }
.tabla tbody th { font-weight: 600; color: var(--tinta); }
.tabla .num { text-align: right; }
.tabla-nota { margin-top: 12px; font-family: var(--fuente-interfaz); font-size: 13.5px; line-height: 1.5; color: var(--gris-meta); }

/* Carrusel: SOLO contenido secundario (proveedores, banda de descargables).
   Se usa junto a una grilla (ej. "g4 carrusel"); en celular pasa a deslizable. */

/* Muro premium */
.muro {
  display: flex; flex-direction: column; gap: 18px; margin-top: 12px; padding: 36px 40px;
  background: var(--tinta); color: var(--sobre-tinta-texto);
}
.muro > .sello { align-self: flex-start; }
.muro-titulo { font-family: var(--fuente-editorial); font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.muro-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.muro-lista li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--fuente-interfaz); font-size: 15.5px; line-height: 1.5; color: var(--sobre-tinta-cuerpo); }
.muro-lista svg { width: 18px; height: 18px; margin-top: 2px; color: var(--laton-claro); }

/* Volver arriba */
.volver-arriba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--clarete); }
.volver-arriba svg { width: 16px; height: 16px; }

/* =====================================================================
   CABECERA (componente Cabecera.dc.html)
   ===================================================================== */
.cab { container: pagina / inline-size; position: relative; z-index: 40; width: 100%; background: var(--papel); color: var(--tinta); font-family: var(--fuente-interfaz); }
.cab-util { position: relative; border-bottom: 1px solid var(--regla); }
.cab-util > .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.cab-util-grupo { display: flex; align-items: center; gap: 18px; }
.cab-util-enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent; font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 500; color: var(--cuerpo); transition: color var(--d-rapida) ease; }
.cab-util-enlace:hover { color: var(--clarete); }
.cab-util-enlace[aria-current="page"] { color: var(--clarete); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cab-util-enlace svg { width: 16px; height: 16px; }
.cab-util-sep { width: 1px; height: 16px; background: var(--regla); }
/* Caja táctil de 44 px; el color se pinta solo en los 36 px centrales (borde transparente + background-clip). */
.cab-suscribir { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-block: 4px solid transparent; background-color: var(--clarete); background-clip: padding-box; color: var(--papel-claro); font-family: var(--fuente-interfaz); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--d-rapida) ease; }
.cab-suscribir:hover { background-color: var(--clarete-hover); color: var(--papel-claro); }
.cab-sesion { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--ok); }
.cab-menu-boton { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; margin-left: -10px; padding: 0 10px; border: 0; background: transparent; font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 600; color: var(--tinta); }
.cab-menu-boton svg { width: 22px; height: 22px; }
.cab-menu-boton:hover { color: var(--clarete); }
.solo-cajon { display: none !important; }

.cab-placa { --oreja: 190px; --huecos: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-top: 26px; padding-bottom: 16px; }
.cab-placa--compacta { --oreja: 170px; padding-top: 16px; padding-bottom: 12px; }
.cab-oreja { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.cab-oreja--der { align-items: flex-end; text-align: right; justify-self: end; }
.cab-oreja--izq { justify-self: start; }
.cab-oreja-rotulo { font-family: var(--fuente-interfaz); font-size: 11.5px; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-meta); }
.cab-oreja-dato { font-family: var(--fuente-editorial); font-size: 17px; line-height: 1.3; font-style: italic; color: var(--tinta); white-space: nowrap; }
.cab-placa--compacta .cab-oreja { padding: 0; border: 0; }
.cab-marca-caja { justify-self: center; min-width: 0; text-align: center; }
.marca {
  display: inline-block; font-family: var(--fuente-marca); font-weight: 400; line-height: 1;
  color: var(--tinta); white-space: nowrap; letter-spacing: -0.005em;
  transition: opacity var(--d-media) ease;
}
.marca:hover { color: var(--tinta); opacity: 0.82; }
/* El enlace del logotipo nunca mide menos de 44 px de alto (área táctil), aunque la letra se achique en celular chico */
a.marca { min-height: 44px; }
.sobre-tinta .marca, .sobre-tinta .marca:hover { color: var(--sobre-tinta-texto); }
.cab-placa .marca { font-size: clamp(30px, calc((100cqi - 2 * var(--margen) - 2 * var(--oreja) - var(--huecos)) / var(--marca-em)), 104px); padding-block: 4px 6px; }
.cab-placa--compacta .marca { font-size: clamp(30px, calc((100cqi - 2 * var(--margen) - 2 * var(--oreja) - var(--huecos)) / var(--marca-em)), 60px); padding-block: 4px; }
.cab-h1 { margin: 0; font: inherit; }
.cab-linea-edicion { display: none; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: 4px; font-family: var(--fuente-interfaz); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-meta); text-align: center; }
.cab-lema-fila > .envoltura { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; }
.cab-lema-fila .linea { flex: 1 1 0; height: 1px; background: var(--regla); }
.cab-lema-fila .lema { white-space: nowrap; }
.cab-nav { border-bottom: 1px solid var(--regla); }
.cab-nav-fila { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.cab-nav-fila > li { display: flex; }
.cab-nav-enlace { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 44px; font-family: var(--fuente-interfaz); font-size: 15px; font-weight: 500; color: var(--tinta); white-space: nowrap; transition: color var(--d-rapida) ease; }
.cab-nav-enlace::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--clarete); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-raya) var(--curva); }
.cab-nav-enlace:hover { color: var(--clarete); }
.cab-nav-enlace:hover::after, .cab-nav-enlace[aria-current="page"]::after { transform: scaleX(1); }
.cab-nav-enlace[aria-current="page"] { color: var(--clarete); font-weight: 600; }
.cab-nav-li--sep { align-items: center; gap: inherit; }
.cab-nav-li--sep::before { content: ''; width: 1px; height: 18px; background: var(--separador-nav); }
.cab-icono { width: 44px; justify-content: center; }
.cab-icono svg { width: 20px; height: 20px; }
@container pagina (min-width: 961px) { .cab-cajon { display: none; } }

/* Cajón del menú (único mecanismo de navegación en tablet vertical y celular) */
.cab-cajon {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  max-height: calc(100vh - 60px); overflow-y: auto;
  background: var(--papel); border-bottom: 3px solid var(--tinta); box-shadow: var(--sombra-cajon);
  animation: desplegar var(--d-raya) var(--curva) both;
}
.cab-cajon > .envoltura { padding-top: 8px; padding-bottom: 24px; }
.cab-cajon-titulo { margin: 18px 0 4px; font-family: var(--fuente-interfaz); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clarete); }
.cab-cajon-lista { margin: 0; padding: 0; list-style: none; }
.cab-cajon-lista > li { border-bottom: 1px solid var(--regla); }
.cab-cajon-enlace { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0; font-family: var(--fuente-editorial); font-size: 21px; line-height: 1.25; color: var(--tinta); transition: color var(--d-rapida) ease, padding-left var(--d-media) var(--curva); }
.cab-cajon-enlace .numeral { width: 34px; font-size: 24px; }
.cab-cajon-enlace--recurso { min-height: 48px; font-family: var(--fuente-interfaz); font-size: 17px; font-weight: 500; }
.cab-cajon-enlace:hover { color: var(--clarete); padding-left: 6px; }
.cab-cajon-enlace[aria-current="page"] { color: var(--clarete); font-weight: 600; }
.cab-cajon-enlace[aria-current="page"]::after { content: '· estás acá'; margin-left: auto; font-family: var(--fuente-interfaz); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--clarete); }
.cab-cajon-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }

/* =====================================================================
   PIE (componente Pie.dc.html)
   ===================================================================== */
.pie { container: pagina / inline-size; width: 100%; background: var(--tinta); color: var(--sobre-tinta-texto); font-family: var(--fuente-interfaz); }
.pie > .envoltura { display: flex; flex-direction: column; gap: 44px; padding-top: 64px; padding-bottom: 28px; }
.pie-superior { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; padding-bottom: 36px; border-bottom: 1px solid var(--borde-oscuro); }
.pie-marca-bloque { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pie .marca { padding-block: 4px; color: var(--sobre-tinta-texto); font-size: clamp(30px, calc((100cqi - 2 * var(--margen)) / var(--marca-em)), 60px); }
.pie .marca:hover { color: var(--sobre-tinta-texto); }
.pie .lema { color: var(--sobre-tinta-secundario); letter-spacing: 0.2em; }
.pie-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pie-titulo { margin-bottom: 14px; font-family: var(--fuente-interfaz); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laton-claro); }
.pie-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pie-lista a, .pie-lista .pie-texto { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.35; color: var(--sobre-tinta-cuerpo); }
.pie-lista a:hover { color: var(--laton-claro); }
.pie-lista .pie-texto { color: var(--sobre-tinta-secundario); }
.pie-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--borde-oscuro); font-size: 13.5px; line-height: 1.5; color: var(--sobre-tinta-secundario); }
.pie-legal-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pie .volver-arriba { color: var(--laton-claro); }
.pie .volver-arriba:hover { color: var(--sobre-tinta-texto); }

/* =====================================================================
   PATRONES COMPARTIDOS DE PÁGINA (agregados antes de la construcción)
   ===================================================================== */
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.solo-movil { display: none; }
.ancho-medio { max-width: 900px; }
.ancho-texto { max-width: 66ch; }
.titulo-con-numeral { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }

/* Foco de tarjeta completa cuando se enfoca su único enlace */
.cubre:has(.enlace-cubre:focus-visible) { outline: 2px solid var(--clarete); outline-offset: 4px; }
.sobre-tinta .cubre:has(.enlace-cubre:focus-visible) { outline-color: var(--laton-claro); }
/* Tarjeta oscura sobre página clara: el anillo latón va por dentro de la tarjeta, donde sí contrasta. */
.cubre.sobre-tinta:has(.enlace-cubre:focus-visible) { outline-color: var(--laton-claro); outline-offset: -4px; }
.enlace-cubre:focus-visible { outline: none; }

/* Ficha de datos (dl): ficha de guía, herramienta, edición, contacto */
.ficha { margin: 0; border-top: 2px solid var(--tinta); }
.ficha-fila { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--regla); font-family: var(--fuente-interfaz); font-size: 14.5px; line-height: 1.4; }
.ficha dt { font-weight: 600; color: var(--gris-meta); }
.ficha dd { margin: 0; font-weight: 600; color: var(--tinta); text-align: right; }
.ficha--texto dd { font-family: var(--fuente-editorial); font-size: 17px; font-weight: 400; text-align: left; color: var(--cuerpo); }
.sobre-tinta .ficha { border-top-color: var(--sobre-tinta-texto); }
.sobre-tinta .ficha-fila { border-bottom-color: var(--borde-oscuro); }
.sobre-tinta .ficha dt { color: var(--sobre-tinta-secundario); }
.sobre-tinta .ficha dd { color: var(--sobre-tinta-texto); }

/* Paso numerado con regla superior (guion, recorrido, instrucciones, consejos) */
.paso { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--tinta); min-width: 0; }
.paso-frase { margin-top: auto; padding: 14px 16px; background: var(--papel-claro); border: 1px solid var(--regla-crema); font-family: var(--fuente-editorial); font-size: 17px; line-height: 1.4; font-style: italic; color: var(--cuerpo); }

/* Bloque de fecha (agenda) */
.fecha-bloque { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px; height: 84px; background: var(--tinta); color: var(--papel); }
.fecha-bloque-dia { font-family: var(--fuente-editorial); font-size: 30px; line-height: 1; font-weight: 500; }
.fecha-bloque-mes { font-family: var(--fuente-interfaz); font-size: 11.5px; line-height: 1; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--laton-claro); }

/* Caja de ícono (categorías, consejos, qué incluye) */
.caja-icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--regla); background: var(--papel-claro); color: var(--clarete); transition: background-color var(--d-corta) ease, color var(--d-corta) ease, border-color var(--d-corta) ease; }
.caja-icono svg { width: 26px; height: 26px; }
.sobre-tinta .caja-icono { background: transparent; border-color: var(--borde-oscuro-control); color: var(--laton-claro); }

/* Tarjeta que es un botón de filtro (aria-pressed) */
.tarjeta-filtro { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 28px; text-align: left; background: var(--papel-claro); border: 1px solid var(--regla); color: var(--tinta); transition: transform var(--d-tarjeta) var(--curva), box-shadow var(--d-tarjeta) ease, border-color var(--d-media) ease; }
.tarjeta-filtro:hover { transform: translateY(-3px); box-shadow: var(--sombra-tarjeta); border-color: var(--tinta); }
.tarjeta-filtro[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.tarjeta-filtro[aria-pressed="true"] .caja-icono { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* Logo circular superpuesto a la portada de una tarjeta */
.logo-superpuesto { position: relative; z-index: 2; width: 64px; margin-top: -32px; border: 3px solid var(--papel-claro); border-radius: 999px; overflow: hidden; background: var(--papel-hundido); }
.logo-superpuesto--grande { width: 88px; margin-top: 0; }

/* Precio de un plan */
.precio { font-family: var(--fuente-editorial); font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.precio-periodo { font-family: var(--fuente-interfaz); font-size: 15px; font-weight: 500; color: var(--gris-bajada); letter-spacing: 0; }
.sobre-tinta .precio-periodo { color: var(--sobre-tinta-secundario); }

/* Marco de latón desplazado (imagen de campaña sobre tinta) */
.marco-laton { position: relative; }
.marco-laton::before { content: ''; position: absolute; top: -18px; left: -18px; right: 18px; bottom: 18px; border: 1px solid var(--laton-claro); pointer-events: none; }
.marco-laton > * { position: relative; }

/* Barra de filtros fija (en celular deja de ser fija) */
.barra-filtros { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 14px; padding-block: 20px; background: var(--papel); border-bottom: 1px solid var(--regla); }
.barra-filtros-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.barra-filtros-rotulo { min-width: 76px; }

/* Casillas y opciones sobre tinta (checklist de guía) */
.sobre-tinta .opcion { color: var(--sobre-tinta-cuerpo); }
.sobre-tinta .opcion input { accent-color: var(--laton-claro); }
.opcion--tarea input:checked + span { text-decoration: line-through; text-decoration-color: var(--laton); }
.sobre-tinta .opcion input:checked + span { color: var(--sobre-tinta-secundario); text-decoration-color: var(--laton-claro); }

/* Preguntas frecuentes (details nativo) */
.pregunta { border-bottom: 1px solid var(--regla); }
.pregunta > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; font-family: var(--fuente-editorial); font-size: 21px; line-height: 1.3; font-weight: 500; color: var(--tinta); }
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary svg { width: 20px; height: 20px; transition: transform var(--d-media) var(--curva); }
.pregunta[open] > summary svg { transform: rotate(180deg); }
.pregunta-respuesta { padding: 0 0 18px; font-family: var(--fuente-interfaz); font-size: 15.5px; line-height: 1.6; color: var(--cuerpo); max-width: 66ch; }

/* Logotipo con la fuente de respaldo (solo para la lámina de marca) */
.marca--respaldo { font-family: 'Ferretero Marca Respaldo', Georgia, serif; }

/* Utilidades de maquetación (pedidas en la integración) */
.pila { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pila--chica { gap: 6px; }
.pila--media { gap: 16px; }
.pila--amplia { gap: 22px; }
.fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.alinear-abajo { align-items: end; }
.alinear-centro { align-items: center; }
.ancho-lectura { max-width: 730px; }
.region-estado > .aviso { margin-top: 16px; }
.g3--fija { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjeta-cuerpo--amplia { padding: 40px 48px; }
.tarjeta--recomendada { border-color: var(--laton-claro); box-shadow: inset 0 0 0 1px var(--laton-claro); }
.sello--ajusta, .sello--rubro { white-space: normal; text-align: left; }
.sello--rubro { color: var(--gris-bajada); letter-spacing: 0.06em; }
.chip--ajusta { white-space: normal; text-align: left; }
.ficha-icono { display: inline-flex; align-items: center; gap: 8px; }
.ficha-icono svg { width: 16px; height: 16px; color: var(--clarete); }
.sobre-tinta .ficha-icono svg { color: var(--laton-claro); }
.icono-grande { width: 44px; height: 44px; color: var(--laton); }
.lista-check { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.5; color: var(--cuerpo); }
.lista-check svg { width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }

/* Módulos de sección (componentes importados): responden a su propio ancho */
.modulo { container: pagina / inline-size; width: 100%; }
.envoltorio { width: 100%; }

/* =====================================================================
   MARCO DE DISPOSITIVO (solo para artboards de celular/tablet del lienzo)
   ===================================================================== */
.marco { display: flex; justify-content: center; width: 100%; min-height: 100vh; background: var(--lienzo); }
.marco-pantalla { position: relative; width: 100%; background: var(--papel); box-shadow: 0 0 0 1px rgba(22, 20, 15, 0.08); }
.marco-pantalla--320 { max-width: 320px; }
.marco-pantalla--360 { max-width: 360px; }
.marco-pantalla--390 { max-width: 390px; }
.marco-pantalla--430 { max-width: 430px; }
.marco-pantalla--768 { max-width: 768px; }
.marco-pantalla--1024 { max-width: 1024px; }
.marco-pantalla > * { display: block; }

/* =====================================================================
   MOVIMIENTO
   ===================================================================== */
.aparecer { animation: aparecer var(--d-entrada) var(--curva) both; }
.aparecer-2 { animation: aparecer var(--d-entrada) 0.12s var(--curva) both; }
.desplegar { animation: desplegar var(--d-raya) var(--curva) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   RESPONSIVE (container queries sobre el ancho real de la página)
   1180 tablet · 900 tablet vertical · 760 celular · 400 celular chico
   ===================================================================== */
@container pagina (max-width: 1180px) {
  .cab-util-legal { display: none !important; }   /* Lanzamiento · L03: baja y arrepentimiento arriba solo donde entran (siempre en el pie; hasta 960 px, en el menú) */
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g5.g-reglas > :nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .envoltura { --margen: 40px; }
  .cab-placa--portada { --oreja: 0px; --huecos: 0px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cab-placa--portada .cab-oreja { display: none; }
  .cab-placa--portada .marca { font-size: clamp(30px, calc((100cqi - 2 * var(--margen)) / var(--marca-em)), 84px); }
  .titulo-hero { font-size: 76px; }
  .titulo-1 { font-size: 50px; }
  .titulo-destacada { font-size: 46px; }
  .titulo-2 { font-size: 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4.g-reglas > * + * { border-left: 1px solid var(--regla); padding-left: 24px; }
  .g4.g-reglas > :nth-child(odd) { border-left: 0; padding-left: 0; }
  .g-1-3 { grid-template-columns: minmax(0, 1fr); }
  .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .oculto-tablet { display: none !important; }
  .indice--lateral { display: none; }
  .solo-movil-tablet { display: block; }
  .cab-nav-fila { gap: 20px; }
  .cab-nav-enlace { font-size: 14px; }
  .cab-linea-edicion { display: flex; }
}
@container pagina (max-width: 960px) {
  .cab-nav { display: none; }
  .cab-menu-boton { display: inline-flex; }
  .solo-cajon { display: flex !important; }
  .solo-escritorio { display: none !important; }
}
@container pagina (max-width: 900px) {
  .cab-placa--compacta { --oreja: 0px; --huecos: 0px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cab-placa--compacta .cab-oreja { display: none; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2, .g-7-5, .g-8-4, .g-3-2 { grid-template-columns: minmax(0, 1fr); }
  .g-2-1.g-reglas > * + *, .g-1-2.g-reglas > * + *, .g-7-5.g-reglas > * + *, .g-8-4.g-reglas > * + *, .g-3-2.g-reglas > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--regla); padding-top: 28px; }
}
@container pagina (max-width: 760px) {
  .g5 { grid-template-columns: minmax(0, 1fr); }
  .solo-movil { display: block; }
  .barra-filtros { position: static; }
  .precio { font-size: 38px; }
  .fecha-bloque { width: 72px; height: 72px; }
  .fecha-bloque-dia { font-size: 26px; }
  .ficha--texto .ficha-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tarjeta-filtro { padding: 22px; }
  /* Tarjeta de nota que en celular pasa a fila con miniatura */
  .nota-tarjeta--adapta { display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 16px; row-gap: 8px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--regla); }
  .nota-tarjeta--adapta > .medio { grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 1 / 1; margin-bottom: 0; }
  .nota-tarjeta--adapta > .medio .medio-etiqueta { display: none; }
  .nota-tarjeta--adapta > * { grid-column: 1; }
  .nota-tarjeta--adapta > .bajada-tarjeta { display: none; }
  .nota-tarjeta--adapta .titulo-3 { font-size: 19px; line-height: 1.25; }
  .envoltura { --margen: 20px; }
  .bloque { padding-block: 48px; }
  .bloque--corto { padding-block: 36px; }
  .bloque.bloque--pegado-arriba { padding-top: 0; }
  .bloque.bloque--pegado-abajo { padding-bottom: 0; }
  .g3:has(> .nota-tarjeta--adapta) { row-gap: 20px; }
  .g3--fija { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-cuerpo--amplia { padding: 24px 20px; }
  .segmentado { display: flex; }
  .segmentado > button { flex: 1 1 auto; }
  .titulo-hero { font-size: clamp(40px, 13.5cqi, 54px); line-height: 0.98; }
  .titulo-1 { font-size: clamp(30px, 9.4cqi, 38px); line-height: 1.08; }
  .titulo-destacada { font-size: clamp(28px, 8.6cqi, 34px); line-height: 1.08; }
  .titulo-2 { font-size: clamp(27px, 8cqi, 31px); line-height: 1.1; }
  .titulo-3 { font-size: 22px; }
  .titulo-seccion { font-size: 24px; }
  .bajada, .bajada--italica { font-size: 18px; line-height: 1.5; }
  .texto { font-size: 17px; }
  .meta { font-size: 14px; }
  .numeral--xl { font-size: 44px; }
  .numeral--l { font-size: 40px; }
  .cifra { font-size: 42px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .g-reglas > * + *, .g4.g-reglas > * + *, .g4.g-reglas > :nth-child(odd):not(:first-child) { border-left: 0; padding-left: 0; border-top: 1px solid var(--regla); padding-top: 28px; }
  .apilar { flex-direction: column !important; align-items: flex-start !important; }
  .oculto-movil { display: none !important; }
  .encabezado-bloque { margin-bottom: 28px; }
  .cab-lema-fila { display: none; }
  .cab-placa { padding-top: 12px; padding-bottom: 12px; }
  .cab-placa--compacta .marca, .cab-placa .marca { padding-block: 5px 4px; }
  .lectura p, .lectura li { font-size: 18px; line-height: 1.7; }
  .lectura .entradilla { font-size: 19px; }
  .lectura .capitular::first-letter { font-size: 3.9em; padding-right: 10px; }
  .lectura h2 { margin-top: 40px; font-size: 27px; }
  .lectura h3 { font-size: 21px; }
  .cita p, .lectura .cita p { font-size: 23px; }
  .recuadro { padding: 20px; }
  .muro { padding: 28px 22px; }
  .muro-titulo { font-size: 26px; }
  .estado-vacio { padding: 44px 20px; }
  .nota-fila { grid-template-columns: minmax(0, 1fr) 84px; }
  .pie > .envoltura { padding-top: 48px; }
  .pie-superior { align-items: flex-start; }
  .cab-cajon-botones { grid-template-columns: minmax(0, 1fr); }

  /* Tablas → fichas apiladas ("dato: valor") */
  .tabla--fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla--fichas, .tabla--fichas tbody, .tabla--fichas tr, .tabla--fichas td, .tabla--fichas tbody th { display: block; width: 100%; }
  .tabla--fichas caption:not(.visualmente-oculto) { display: block; width: auto; padding-bottom: 12px; }
  .tabla--fichas tbody { border-top: 2px solid var(--tinta); }
  .tabla--fichas tr { padding: 14px 0; border-bottom: 1px solid var(--regla); }
  .tabla--fichas tbody th { padding: 0 0 8px; border: 0; font-size: 16px; }
  .tabla--fichas td { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 12px; padding: 5px 0; border: 0; text-align: left; }
  .tabla--fichas td::before { content: attr(data-etiqueta); font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-meta); }
  .tabla--fichas .num { text-align: left; }

  /* Carrusel (solo secundario): se asoma la tarjeta siguiente */
  .carrusel {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--margen)); padding: 4px var(--margen) 16px; scroll-padding-inline: var(--margen);
    scrollbar-width: none;
  }
  .carrusel::-webkit-scrollbar { display: none; }
  .carrusel > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
}
@container pagina (max-width: 520px) {
  .pie-columnas { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .fila-botones > .boton { flex: 1 1 100%; }
}
@container pagina (max-width: 400px) {
  .cab-util-grupo { gap: 10px; }
  .cab-suscribir { padding: 0 12px; }
  .campo-accion { flex-direction: column; gap: 10px; }
  .campo-accion > .boton { margin-left: 0; }
}