/* ==========================================================================
   EL TUJA · estilos.css
   Hoja de estilos única del sitio. Mobile-first: lo de base es para celular
   (desde 360 px) y se amplía con min-width en 414 / 768 / 1024 / 1280 px.

   Índice
    1. Variables (colores, tipografías, espaciados)
    2. Reset y base
    3. Utilidades
    4. Cabecera y masthead
    5. Menú de secciones (chips deslizables)
    6. Cinta "Último minuto"
    7. Etiquetas de sección (chapas / timbres)
    8. Botones
    9. Imágenes: media, ilustración, sin imagen
   10. Tarjetas y grillas
   11. Portada: destacada, más leído, palabra del día, bloques
   12. Publicidad
   13. Nota individual
   14. Caja "Diccionario Tuja" (en la nota)
   15. Página Diccionario
   16. Página de sección
   17. Páginas de texto (Quiénes somos / legal)
   18. Página 404
   19. Pie de página
   20. Manual de estilo
   21. Movimiento reducido
   ========================================================================== */


/* 1. VARIABLES ============================================================= */
:root {
  /* Marca */
  --negro: #111010;          /* negro profundo: cabecera, pie, texto fuerte */
  --tinta: #1C1A18;          /* texto de lectura */
  --amarillo: #FFD400;       /* amarillo advertencia: SIEMPRE con texto negro */
  --amarillo-suave: #FFF0A3; /* fondos de realce */
  --hueso: #F4EFE4;          /* fondo general (papel de diario) */
  --papel: #FBF8F1;          /* superficies de lectura más claras */
  --papel-oscuro: #E6DDCB;   /* rellenos y fondos de imagen */
  --gris: #5A544D;           /* texto secundario (6,5:1 sobre hueso) */
  --gris-claro: #D9D2C3;     /* texto secundario sobre negro */
  --linea-suave: #CFC5B1;    /* renglones de libreta y separadores internos */
  --rojo: #D3201A;           /* SOLO alertas y "Último minuto" (blanco encima 5,2:1) */
  --rojo-margen: #E8857F;    /* línea de margen de la libreta (decorativa) */
  --whatsapp: #25D366;       /* botón compartir, con texto negro (9,5:1) */

  /* Secciones: color de la chapa (texto blanco, todos sobre 5,5:1) */
  --sec-politica: #111010;      /* chapa negra con texto amarillo */
  --sec-policial: #1D3C8F;      /* azul uniforme */
  --sec-farandula: #B3166A;     /* fucsia matinal */
  --sec-deportes: #1C7337;      /* verde cancha */
  --sec-internacional: #5A2D82; /* morado */
  --sec-economicos: #9A4A00;    /* ocre billete */

  /* Tipografías */
  --f-marca: 'Anton', Impact, 'Arial Narrow', sans-serif;          /* masthead y titulares grandes */
  --f-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* interfaz y títulos de tarjeta */
  --f-etiqueta: 'Archivo Narrow', 'Arial Narrow', sans-serif;     /* etiquetas, fechas, metadatos */
  --f-lectura: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* cuerpo de las notas */

  /* Escala tipográfica */
  --t-xs: .8125rem;      /* 13 px  metadatos */
  --t-s: .9375rem;       /* 15 px  bajadas cortas */
  --t-m: 1rem;           /* 16 px  interfaz */
  --t-lectura: 1.125rem; /* 18 px  cuerpo en celular (19 px en escritorio) */
  --t-l: 1.25rem;        /* 20 px  títulos de tarjeta */
  --t-xl: 1.625rem;      /* 26 px  títulos de bloque */
  --t-titular: clamp(2rem, 8.5vw, 3.75rem);   /* nota destacada */
  --t-masthead: clamp(3.75rem, 21vw, 8.5rem); /* "EL TUJA": no se corta en 360 px */

  /* Espaciados (base 4 px) */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* Estructura */
  --ancho-max: 80rem;      /* 1280 px */
  --ancho-lectura: 40rem;  /* ~68 caracteres por línea */
  --borde: 2px solid var(--negro);
  --sombra-cartel: 6px 6px 0 var(--negro);
  --tocable: 44px;         /* tamaño mínimo de todo lo tocable */
  --franjas: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px);
  --trama: radial-gradient(circle, rgba(17, 16, 16, .26) 1.2px, transparent 1.7px) 0 0 / 8px 8px;
}


/* 2. RESET Y BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 8rem; /* que los anclas no queden bajo la cabecera fija */
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-width: 320px;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--f-ui);
  font-size: var(--t-m);
  line-height: 1.5;
  overflow-x: hidden;  /* respaldo */
  overflow-x: clip;    /* nunca scroll horizontal (sin romper position: sticky) */
  -webkit-font-smoothing: antialiased;
}

/* Grano de fotocopia: muy sutil, encima de todo y sin capturar clics */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }

a { color: var(--negro); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rojo); }

::selection { background: var(--amarillo); color: var(--negro); }

/* Foco visible para teclado (nunca el azul del navegador) */
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.cabecera :focus-visible,
.pie :focus-visible,
.palabra :focus-visible,
.compartir-flotante :focus-visible,
.pagina-titulo--negra :focus-visible { outline-color: var(--amarillo); }


/* 3. UTILIDADES ============================================================ */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-4);
}
@media (min-width: 768px)  { .contenedor { padding-inline: var(--e-5); } }
@media (min-width: 1280px) { .contenedor { padding-inline: var(--e-6); } }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Link "Saltar al contenido" (aparece al tabular) */
.saltar {
  position: absolute;
  left: -999px;
  top: var(--e-2);
  z-index: 300;
  padding: var(--e-3) var(--e-4);
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 800;
  border: var(--borde);
}
.saltar:focus { left: var(--e-2); }

/* Franja de peligro como separador */
.franjas { height: 10px; background: var(--franjas); }
.franjas--gruesa { height: 16px; border-block: var(--borde); }

/* Metadatos: fechas, tiempo relativo, autor */
.meta {
  font: 600 var(--t-xs)/1.3 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}


/* 4. CABECERA Y MASTHEAD =================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--negro);
  color: var(--hueso);
}
.cabecera__franjas { height: 10px; background: var(--franjas); transition: height .2s; }

.cabecera__barra {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-3);
}
.cabecera__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  font: 600 var(--t-xs)/1.3 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-claro);
}
.cabecera__redes { display: inline-flex; align-items: center; gap: var(--e-2); }
.cabecera__redes a { display: inline-grid; place-items: center; color: var(--amarillo); }
.cabecera__redes a:hover { color: #fff; }
.cabecera__redes svg { width: 18px; height: 18px; }
.cabecera__h1 { margin: 0; font: inherit; }
.cabecera__marca {
  justify-self: start;
  display: block;
  text-decoration: none;
  color: var(--amarillo);
}
.cabecera__marca:hover { color: var(--amarillo); }

.masthead {
  display: block;
  font-family: var(--f-marca);
  font-weight: 400;
  font-size: var(--t-masthead);
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--amarillo);
  transition: font-size .2s;
}
.cabecera__lema {
  font: italic 400 var(--t-s)/1.3 var(--f-lectura);
  color: var(--hueso);
}

/* Estado compacto (lo agrega app.js al bajar) */
.cabecera.is-compacta .cabecera__franjas { height: 6px; }
.cabecera.is-compacta .cabecera__barra { padding-block: var(--e-2); }
.cabecera.is-compacta .cabecera__meta,
.cabecera.is-compacta .cabecera__lema { display: none; }
.cabecera.is-compacta .masthead { font-size: 2.25rem; }

@media (min-width: 768px) {
  .cabecera__barra { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--e-6); }
  .cabecera__meta { grid-column: 1 / -1; }
  .cabecera__lema { justify-self: end; max-width: 16ch; text-align: right; font-size: var(--t-xl); line-height: 1.15; }
}


/* 5. MENÚ DE SECCIONES ===================================================== */
/* En celular es una fila de chips con scroll horizontal (todo a la vista,
   sin menú escondido); en escritorio los chips llenan el ancho. */
.menu {
  position: relative;
  background: var(--hueso);
  color: var(--negro);
  border-bottom: var(--borde);
}
.menu::after { /* degradé que avisa que hay más chips a la derecha */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2rem;
  background: linear-gradient(90deg, transparent, var(--hueso));
  pointer-events: none;
}
.menu__lista {
  display: flex;
  margin-block: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.menu__lista::-webkit-scrollbar { display: none; }
.menu__lista > li { flex: 0 0 auto; scroll-snap-align: start; }
.menu__lista > li:last-child { padding-right: var(--e-6); }

.menu__link {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--tocable);
  padding: 0 var(--e-3);
  font: 700 var(--t-s)/1 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--negro);
  border-right: var(--borde);
}
.menu__lista > li:first-child .menu__link { border-left: var(--borde); }
.menu__link::before { /* cuadrito con el color de la sección */
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--c, var(--negro));
}
.menu__link:hover { background: var(--amarillo); color: var(--negro); }
.menu__link:active { background: var(--negro); color: var(--amarillo); }
.menu__link[aria-current="page"] { background: var(--negro); color: var(--amarillo); }
.menu__link[aria-current="page"]::before { background: var(--amarillo); }
.menu__link--dicc::before { width: 18px; background: var(--franjas); }

[data-seccion="politica"]      { --c: var(--sec-politica); }
[data-seccion="policial"]      { --c: var(--sec-policial); }
[data-seccion="farandula"]     { --c: var(--sec-farandula); }
[data-seccion="deportes"]      { --c: var(--sec-deportes); }
[data-seccion="internacional"] { --c: var(--sec-internacional); }
[data-seccion="economicos"]    { --c: var(--sec-economicos); }

@media (min-width: 1024px) {
  .menu::after { display: none; }
  .menu__lista > li { flex: 1 0 auto; }
  .menu__lista > li:last-child { padding-right: 0; }
  .menu__link { justify-content: flex-start; }
}


/* 6. CINTA "ÚLTIMO MINUTO" ================================================= */
.ultimo {
  display: flex;
  align-items: stretch;
  min-height: var(--tocable);
  background: var(--amarillo);
  color: var(--negro);
  border-bottom: var(--borde);
  overflow: hidden;
}
.ultimo__rotulo {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3);
  background: var(--rojo);
  color: #fff;
  font: 400 var(--t-m)/1 var(--f-marca);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ultimo__punto { width: 8px; height: 8px; background: #fff; animation: titila 1.4s steps(2, jump-none) infinite; }
.ultimo__ventana {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-left: var(--e-4);
  overflow-x: auto; /* sin JS o con movimiento reducido: se desliza con el dedo */
  scrollbar-width: none;
}
.ultimo__ventana::-webkit-scrollbar { display: none; }
.ultimo__cinta {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ultimo__cinta li { flex: none; display: flex; align-items: center; }
.ultimo__cinta li::after { content: "///"; padding: 0 var(--e-4); font-weight: 800; }
.ultimo__cinta a {
  display: flex;
  align-items: center;
  min-height: var(--tocable);
  font: 700 var(--t-s)/1.2 var(--f-ui);
  text-decoration: none;
  white-space: nowrap;
  color: var(--negro);
}
.ultimo__cinta a:hover { color: var(--negro); text-decoration: underline; }

/* Con JS: la cinta corre y se pausa al pasar el mouse o al enfocar */
.ultimo--corre .ultimo__ventana { overflow: hidden; }
.ultimo--corre .ultimo__cinta { animation: ultimo-corre 45s linear infinite; }
.ultimo--corre:hover .ultimo__cinta,
.ultimo--corre:focus-within .ultimo__cinta { animation-play-state: paused; }

@keyframes ultimo-corre { to { transform: translateX(-50%); } }
@keyframes titila { 50% { opacity: 0; } }


/* 7. ETIQUETAS DE SECCIÓN (CHAPAS / TIMBRES) =============================== */
/* Borde del color + filete interior color papel = look de timbre de goma. */
.etiqueta {
  --c: var(--negro);
  --t: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .3rem .55rem .25rem;
  font: 700 var(--t-xs)/1 var(--f-etiqueta);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t);
  background: var(--c);
  border: 2px solid var(--c);
  box-shadow: inset 0 0 0 1.5px var(--hueso);
}
.etiqueta::after { content: ""; position: absolute; inset: -8px -4px; } /* área tocable 44 px */
.etiqueta:hover { color: var(--c); background: var(--hueso); box-shadow: none; }
.etiqueta--timbre { transform: rotate(-2deg); font-size: var(--t-s); padding: .4rem .7rem .35rem; }

.etiqueta--politica      { --c: var(--sec-politica); --t: var(--amarillo); }
.etiqueta--policial      { --c: var(--sec-policial); }
.etiqueta--farandula     { --c: var(--sec-farandula); }
.etiqueta--deportes      { --c: var(--sec-deportes); }
.etiqueta--internacional { --c: var(--sec-internacional); }
.etiqueta--economicos    { --c: var(--sec-economicos); }
.etiqueta--alerta        { --c: var(--rojo); }
.etiqueta--politica:hover { background: var(--amarillo); color: var(--negro); }


/* 8. BOTONES =============================================================== */
/* Texto alineado a la izquierda, esquinas rectas, sombra de cartel que
   "se aprieta" al presionar. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e-2);
  min-height: var(--tocable);
  min-width: var(--tocable);
  padding: 0 var(--e-4);
  font: 700 var(--t-m)/1.1 var(--f-ui);
  text-align: left;
  text-decoration: none;
  color: var(--negro);
  background: var(--papel);
  border: var(--borde);
  box-shadow: 3px 3px 0 var(--negro);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background-color .15s;
}
.btn svg { flex: none; width: 20px; height: 20px; }
.btn:hover { background: var(--amarillo); color: var(--negro); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--negro); }

.btn--primario { background: var(--negro); color: var(--amarillo); }
.btn--primario:hover { background: var(--amarillo); color: var(--negro); }
.btn--whatsapp { background: var(--whatsapp); color: var(--negro); }
.btn--whatsapp:hover { background: #5BE38C; }
.btn--facebook { background: #1877F2; color: #fff; }
.btn--facebook:hover { background: #0F5FCC; }
.comentar { margin-top: var(--e-5); padding: var(--e-4); background: var(--papel); border: 2px solid var(--negro); box-shadow: 4px 4px 0 var(--amarillo); }
.comentar p { margin: var(--e-2) 0 var(--e-3); color: var(--gris); }
.seguir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); font: 600 var(--t-xs)/1.3 var(--f-etiqueta); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.btn--icono { justify-content: center; width: var(--tocable); padding: 0; }
.btn--bloque { display: flex; width: 100%; }
.btn--plano { box-shadow: none; }
.btn--plano:active { transform: none; background: var(--negro); color: var(--amarillo); }

.link-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--tocable);
  font: 700 var(--t-s)/1 var(--f-etiqueta);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.link-flecha svg { width: 16px; height: 16px; }
.link-flecha:hover { text-decoration: underline; }


/* 9. IMÁGENES: MEDIA, ILUSTRACIÓN, SIN IMAGEN ============================= */
/* Contenedor fluido 16:9. La imagen real va como <img> adentro. */
.media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--papel-oscuro);
  border: var(--borde);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Marcador de ilustración pendiente (trama de puntos de imprenta).
   Se reemplaza por la caricatura real. */
.media--ilustracion {
  --fondo: var(--papel-oscuro);
  display: grid;
  place-items: center;
  background: var(--trama), var(--fondo);
}
.media--ilustracion.tono-amarillo { --fondo: var(--amarillo-suave); }
.media--ilustracion.tono-gris { --fondo: #D9D4CB; }
.media__nota {
  max-width: 80%;
  padding: .35rem .55rem;
  font: 600 var(--t-xs)/1.25 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--papel);
  border: var(--borde);
}

/* Versión SIN imagen: franjas de peligro + logo */
.media--sin-imagen { display: grid; place-items: center; background: var(--franjas); }
.media__logo {
  padding: .3em .5em .25em;
  font: 400 clamp(1.5rem, 7vw, 2.75rem)/1 var(--f-marca);
  text-transform: uppercase;
  color: var(--amarillo);
  background: var(--negro);
  border: 3px solid var(--amarillo);
  outline: 2px solid var(--negro);
}

/* Marco de ilustración de diario (nota y destacada) */
.ilustracion-marco {
  display: block;
  padding: var(--e-2);
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra-cartel);
  text-decoration: none;
}
.ilustracion-marco figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  padding-top: var(--e-2);
  font: 600 var(--t-xs)/1.3 var(--f-etiqueta);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
}


/* 10. TARJETAS Y GRILLAS =================================================== */
.grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* celular: una columna */
  gap: var(--e-6) var(--e-5);
}
@media (min-width: 768px)  { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tarjeta { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.tarjeta__media { display: block; }
.tarjeta__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.tarjeta__titulo {
  font: 800 var(--t-l)/1.18 var(--f-ui);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.tarjeta__titulo a { text-decoration: none; color: var(--negro); }
.tarjeta__titulo a:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 4px; }
.tarjeta__bajada { font: 400 var(--t-s)/1.45 var(--f-ui); color: var(--gris); }
.tarjeta:hover .media { box-shadow: 4px 4px 0 var(--amarillo); }

/* Tarjeta en fila (bloques por sección y listas compactas) */
.tarjeta--fila {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
  padding-block: var(--e-4);
  border-bottom: var(--borde);
}
.tarjeta--fila:first-child { padding-top: 0; }
.tarjeta--fila .tarjeta__titulo { font-size: var(--t-m); line-height: 1.25; }
.tarjeta--fila .media__logo { font-size: .875rem; border-width: 2px; outline: 0; }
.tarjeta--fila .media__nota { display: none; }

/* Tarjeta ancha (primera de la página de sección) */
.tarjeta--ancha .tarjeta__titulo { font: 400 clamp(1.75rem, 7vw, 3rem)/1 var(--f-marca); text-transform: uppercase; letter-spacing: .005em; }
.tarjeta--ancha .tarjeta__bajada { font: 400 var(--t-l)/1.45 var(--f-lectura); color: var(--tinta); }
@media (min-width: 768px) {
  .tarjeta--ancha {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--e-6);
    align-items: center;
    padding-bottom: var(--e-6);
    border-bottom: var(--borde);
  }
}


/* 11. PORTADA ============================================================== */
.portada { padding-block: var(--e-5) 0; }
.portada__top { display: grid; gap: var(--e-7); }
@media (min-width: 1024px) {
  .portada__top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; }
  .portada__principal { padding-right: var(--e-6); border-right: var(--borde); }
  .portada__lateral { padding-left: var(--e-6); }
}
.portada__lateral { display: flex; flex-direction: column; gap: var(--e-7); }

/* Encabezado de bloque: título Anton + regla de 2 px */
.bloque { margin-top: var(--e-8); }
.bloque--pegado { margin-top: 0; }
.bloque__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-2);
  border-bottom: var(--borde);
}
.bloque__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font: 400 var(--t-xl)/1 var(--f-marca);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--negro);
}
.bloque__titulo::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--marca-bloque, var(--franjas));
}
.bloque--politica      { --marca-bloque: var(--sec-politica); }
.bloque--policial      { --marca-bloque: var(--sec-policial); }
.bloque--farandula     { --marca-bloque: var(--sec-farandula); }
.bloque--deportes      { --marca-bloque: var(--sec-deportes); }
.bloque--internacional { --marca-bloque: var(--sec-internacional); }
.bloque--economicos    { --marca-bloque: var(--sec-economicos); }

/* Nota destacada */
.destacada { display: flex; flex-direction: column; gap: var(--e-5); }
.destacada__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.destacada__titulo {
  font: 400 var(--t-titular)/1 var(--f-marca);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.destacada__titulo a { text-decoration: none; color: var(--negro); }
.destacada__titulo a:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 6px; text-underline-offset: 4px; }
.destacada__bajada { max-width: 38rem; font: 400 var(--t-l)/1.45 var(--f-lectura); }

/* Lo más leído: números grandes en Anton con contorno */
.masleido__lista { margin: 0; padding: 0; list-style: none; counter-reset: ml; }
.masleido__lista li { counter-increment: ml; border-bottom: var(--borde); }
.masleido__lista a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
  min-height: var(--tocable);
  padding-block: var(--e-3);
  font: 700 var(--t-m)/1.3 var(--f-ui);
  text-decoration: none;
  color: var(--negro);
}
.masleido__lista a::before {
  content: counter(ml);
  font: 400 3rem/.85 var(--f-marca);
  color: var(--hueso);
  -webkit-text-stroke: 2px var(--negro);
  paint-order: stroke fill;
}
.masleido__lista li:first-child a::before { color: var(--amarillo); }
.masleido__lista a:hover span { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 4px; }

/* Palabra Tuja del día */
.palabra {
  padding: 0 var(--e-5) var(--e-5);
  background: var(--negro);
  color: var(--hueso);
  border: var(--borde);
}
.palabra::before {
  content: "";
  display: block;
  height: 10px;
  margin: 0 calc(var(--e-5) * -1) var(--e-4);
  background: var(--franjas);
}
.palabra__rotulo { font: 700 var(--t-xs)/1.2 var(--f-etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.palabra__termino {
  margin: var(--e-2) 0 var(--e-1);
  font: 400 clamp(2.75rem, 13vw, 4rem)/.92 var(--f-marca);
  text-transform: uppercase;
  color: var(--amarillo);
  overflow-wrap: anywhere;
}
.palabra__tipo { font: italic 400 var(--t-s)/1.3 var(--f-lectura); color: var(--gris-claro); }
.palabra__significado { margin-top: var(--e-3); font: 700 var(--t-l)/1.3 var(--f-ui); }
.palabra__ejemplo {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 2px dashed #4A4540;
  font: italic 400 var(--t-m)/1.5 var(--f-lectura);
  color: var(--gris-claro);
}
.palabra .link-flecha { margin-top: var(--e-2); color: var(--amarillo); }

/* Bloques por sección (dos columnas en tablet) */
.duo { display: grid; gap: 0 var(--e-6); }
@media (min-width: 768px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* 12. PUBLICIDAD =========================================================== */
/* Si el contenedor queda vacío (sin aviso), desaparece solo. */
.publicidad { display: grid; justify-items: center; gap: var(--e-1); margin-block: var(--e-8) 0; }
.publicidad:empty,
.publicidad:not(:has(*)) { display: none; }
.publicidad::before {
  content: "Publicidad";
  font: 600 .6875rem/1 var(--f-etiqueta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.publicidad__reserva { /* solo maqueta: el aviso real reemplaza esto */
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 100;
  border: 2px dashed var(--linea-suave);
  font: 600 var(--t-xs)/1.2 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
@media (min-width: 768px) { .publicidad--portada .publicidad__reserva { max-width: 728px; aspect-ratio: 728 / 90; } }
.publicidad--nota { margin-block: var(--e-6); }
.publicidad--nota .publicidad__reserva { max-width: 300px; aspect-ratio: 300 / 250; }


/* 13. NOTA INDIVIDUAL ====================================================== */
.nota-pagina { padding-block: var(--e-6) 0; }
.nota-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
@media (min-width: 1024px) {
  .nota-layout { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: var(--e-8); }
}

.nota__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); max-width: 54rem; margin-bottom: var(--e-6); }
.nota__titulo {
  font: 400 clamp(2.25rem, 9.5vw, 4.5rem)/.98 var(--f-marca);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--negro);
}
.nota__bajada { font: 400 clamp(1.1875rem, 4.6vw, 1.5rem)/1.4 var(--f-lectura); }
.nota__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  width: 100%;
  padding-top: var(--e-3);
  border-top: var(--borde);
}
.nota__figura { margin-bottom: var(--e-6); }

/* Aviso de sátira con cinta de peligro arriba y abajo */
.aviso-satira { max-width: var(--ancho-lectura); margin-bottom: var(--e-6); background: var(--amarillo); color: var(--negro); border: var(--borde); }
.aviso-satira::before,
.aviso-satira::after { content: ""; display: block; height: 10px; background: var(--franjas); }
.aviso-satira p { padding: var(--e-3) var(--e-4); font: 600 var(--t-m)/1.45 var(--f-ui); }
.aviso-satira strong { margin-right: .2em; font: 400 1.3em/1 var(--f-marca); letter-spacing: .04em; }

/* Cuerpo: serif de lectura, 18 px en celular, ~68 caracteres por línea */
.nota__cuerpo {
  max-width: var(--ancho-lectura);
  font-family: var(--f-lectura);
  font-size: var(--t-lectura);
  line-height: 1.7;
  color: var(--tinta);
}
.nota__cuerpo p { margin-bottom: 1.15em; }
.nota__cuerpo h2 { margin: 1.8em 0 .6em; font: 800 var(--t-xl)/1.15 var(--f-ui); letter-spacing: -.01em; color: var(--negro); }
.nota__cuerpo > p:first-of-type::first-letter {
  float: left;
  padding: .06em .1em 0 0;
  font-family: var(--f-marca);
  font-size: 4.2em;
  line-height: .8;
  color: var(--negro);
}
.nota__cuerpo a { text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; }
@media (min-width: 1024px) { .nota__cuerpo { font-size: 1.1875rem; } }

/* Fuente original */
.fuente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .4em;
  max-width: var(--ancho-lectura);
  margin-block: var(--e-6);
  padding-block: var(--e-2);
  border-block: var(--borde);
  font: 600 var(--t-s)/1.3 var(--f-etiqueta);
  letter-spacing: .03em;
  color: var(--gris);
}
.fuente a { display: inline-flex; align-items: center; min-height: var(--tocable); font-weight: 700; color: var(--negro); }

/* Compartir */
.compartir { display: flex; flex-direction: column; gap: var(--e-3); max-width: var(--ancho-lectura); }
.compartir__titulo { font: 400 var(--t-xl)/1 var(--f-marca); text-transform: uppercase; letter-spacing: .02em; }
.compartir__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.compartir__botones .btn--whatsapp { flex: 1 1 100%; font-size: var(--t-l); min-height: 52px; }
@media (min-width: 414px) { .compartir--linea .compartir__botones .btn--whatsapp { flex: 1 1 auto; } }

/* Barra flotante para compartir (solo celular y tablet) */
.compartir-flotante {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: var(--negro);
  border-top: 4px solid var(--amarillo);
}
.compartir-flotante .btn { box-shadow: none; }
.compartir-flotante .btn--whatsapp { flex: 1; }
.compartir-flotante .btn--icono { background: var(--hueso); }
.con-barra { padding-bottom: 4.5rem; }
@media (min-width: 1024px) {
  .compartir-flotante { display: none; }
  .con-barra { padding-bottom: 0; }
}

/* Columna lateral de la nota (escritorio) */
.nota__lateral { display: flex; flex-direction: column; gap: var(--e-7); }
.nota__lateral-pegado { display: flex; flex-direction: column; gap: var(--e-7); }
.nota__lateral .compartir--lateral { display: none; }
@media (min-width: 1024px) {
  .nota__lateral-pegado { position: sticky; top: 8rem; }
  .nota__lateral .compartir--lateral { display: flex; }
}

/* Aviso flotante (link copiado) */
.toast {
  position: fixed;
  left: var(--e-4);
  bottom: 5.5rem;
  z-index: 80;
  max-width: calc(100% - 2rem);
  padding: var(--e-3) var(--e-4);
  font: 700 var(--t-s)/1.3 var(--f-ui);
  color: var(--negro);
  background: var(--amarillo);
  border: var(--borde);
  box-shadow: var(--sombra-cartel);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: none; }
@media (min-width: 1024px) { .toast { bottom: var(--e-5); } }


/* 14. CAJA "DICCIONARIO TUJA" ============================================== */
/* Ficha de libreta: cinta adhesiva de peligro, cabecera negra,
   renglones y margen rojo. Los renglones miden 2rem: todo el texto
   usa line-height 2rem para caer justo en la línea. */
.dicc-tuja {
  position: relative;
  max-width: var(--ancho-lectura);
  margin-block: var(--e-8) var(--e-6);
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra-cartel);
}
.dicc-tuja::before { /* cinta adhesiva */
  content: "";
  position: absolute;
  top: -14px;
  left: 1.25rem;
  width: 7.5rem;
  height: 1.5rem;
  background: var(--franjas);
  border: var(--borde);
  transform: rotate(-4deg);
}
.dicc-tuja__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-4) var(--e-3);
  background: var(--negro);
  color: var(--amarillo);
}
.dicc-tuja__titulo { min-width: 0; font: 400 clamp(2rem, 9vw, 2.75rem)/.9 var(--f-marca); text-transform: uppercase; letter-spacing: .01em; }
.dicc-tuja__titulo small { display: block; margin-bottom: var(--e-1); font: 700 var(--t-xs)/1 var(--f-etiqueta); letter-spacing: .14em; color: var(--hueso); }
.dicc-tuja__sello {
  flex: none;
  padding: .35rem .5rem;
  border: 2px solid var(--amarillo);
  box-shadow: inset 0 0 0 1.5px var(--negro), inset 0 0 0 3px var(--amarillo);
  font: 700 var(--t-xs)/1.1 var(--f-etiqueta);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(5deg);
}
.dicc-tuja__lista {
  margin: 0;
  padding: 2rem var(--e-4) 2rem 3.25rem;
  line-height: 2rem;
  background:
    linear-gradient(90deg, transparent 2.25rem, var(--rojo-margen) 2.25rem calc(2.25rem + 2px), transparent calc(2.25rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(2rem - 2px), var(--linea-suave) calc(2rem - 2px) 2rem);
}
.dicc-tuja__item { display: grid; }
.dicc-tuja__item dt { font: 400 1.25rem/2rem var(--f-marca); letter-spacing: .03em; text-transform: uppercase; color: var(--negro); }
.dicc-tuja__item dd { font: 400 1.0625rem/2rem var(--f-lectura); color: var(--tinta); }
@media (min-width: 600px) {
  .dicc-tuja__item { grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--e-4); }
}
.dicc-tuja__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-top: var(--borde);
  font: 600 var(--t-s)/1.3 var(--f-ui);
}


/* 15. PÁGINA DICCIONARIO =================================================== */
.pagina-titulo { padding-block: var(--e-6) var(--e-5); border-bottom: var(--borde); }
.pagina-titulo__h1 {
  margin-top: var(--e-2);
  font: 400 clamp(2.75rem, 13vw, 7rem)/.9 var(--f-marca);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--negro);
}
.pagina-titulo__lead { max-width: 40rem; margin-top: var(--e-4); font: 400 var(--t-l)/1.45 var(--f-lectura); }
.pagina-titulo--negra { position: relative; background: var(--negro); color: var(--hueso); border-bottom: 0; padding-bottom: calc(var(--e-6) + 12px); }
.pagina-titulo--negra::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--franjas); }
.pagina-titulo--negra .pagina-titulo__h1 { color: var(--amarillo); }
.pagina-titulo--negra .meta { color: var(--gris-claro); }
.pagina-titulo--negra a { color: var(--hueso); }

.dicc-herramientas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding-block: var(--e-5); border-bottom: var(--borde); }
@media (min-width: 1024px) { .dicc-herramientas { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: center; gap: var(--e-6); } }

.buscador { display: flex; align-items: center; gap: var(--e-2); padding-left: var(--e-3); background: var(--papel); border: var(--borde); }
.buscador:focus-within { outline: 3px solid var(--rojo); outline-offset: 3px; }
.buscador svg { flex: none; width: 22px; height: 22px; }
.buscador input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--e-3) 0 0;
  background: transparent;
  border: 0;
  font: 600 var(--t-l)/1 var(--f-ui);
  color: var(--negro);
}
.buscador input:focus { outline: none; }
.buscador input::placeholder { color: var(--gris); opacity: 1; }
.buscador__estado { min-height: 1.3em; }

/* Índice A–Z: celdas de 44 px en grilla con bordes de 2 px */
.abc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tocable), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--borde);
  border-left: var(--borde);
}
.abc li { border-right: var(--borde); border-bottom: var(--borde); }
.abc a,
.abc span {
  display: grid;
  place-items: center;
  min-height: var(--tocable);
  font: 400 1.25rem/1 var(--f-marca);
  text-decoration: none;
}
.abc a { color: var(--negro); background: var(--papel); }
.abc a:hover { background: var(--amarillo); color: var(--negro); }
.abc span { color: #A39B8E; } /* letra sin términos (deshabilitada) */

.letra { display: grid; gap: var(--e-3); padding-block: var(--e-6); border-bottom: var(--borde); }
@media (min-width: 768px) { .letra { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e-6); } }
.letra__titulo { font: 400 4rem/.85 var(--f-marca); color: var(--negro); }
.glosario { display: grid; column-gap: var(--e-7); }
@media (min-width: 1024px) { .glosario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.termino { padding-block: var(--e-4); border-bottom: 2px solid var(--linea-suave); }
.termino dt { font: 800 var(--t-xl)/1.15 var(--f-ui); letter-spacing: -.01em; color: var(--negro); }
.termino__tipo { margin-left: var(--e-2); font: italic 400 var(--t-s)/1 var(--f-lectura); letter-spacing: 0; color: var(--gris); }
.termino__def { margin-top: var(--e-2); font: 400 var(--t-lectura)/1.55 var(--f-lectura); }
.termino__ejemplo { margin-top: var(--e-2); font: italic 400 var(--t-m)/1.5 var(--f-lectura); color: var(--gris); }
.termino__ejemplo::before {
  content: "Ej.";
  display: inline-block;
  margin-right: var(--e-2);
  padding: .15rem .35rem;
  font: 700 .6875rem/1.2 var(--f-etiqueta);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .15em;
  color: var(--amarillo);
  background: var(--negro);
}
.sin-resultados { padding-block: var(--e-7); font: 400 var(--t-xl)/1.2 var(--f-marca); text-transform: uppercase; }


/* 16. PÁGINA DE SECCIÓN ==================================================== */
.seccion-cabeza { --c: var(--negro); --t: #fff; position: relative; background: var(--c); color: var(--t); }
.seccion-cabeza::after { content: ""; display: block; height: 12px; background: var(--franjas); border-top: var(--borde); }
.seccion-cabeza__interior { display: grid; gap: var(--e-3); padding-block: var(--e-6) var(--e-5); }
.seccion-cabeza__ruta { font: 600 var(--t-xs)/1.3 var(--f-etiqueta); letter-spacing: .08em; text-transform: uppercase; }
.seccion-cabeza__ruta a { display: inline-flex; align-items: center; min-height: var(--tocable); color: var(--t); }
.seccion-cabeza__titulo {
  font: 400 clamp(2.75rem, 14vw, 10rem)/.85 var(--f-marca); /* "INTERNACIONAL" cabe en 360 px */
  letter-spacing: .005em;
  text-transform: uppercase;
}
.seccion-cabeza__desc { max-width: 36rem; font: italic 400 var(--t-l)/1.4 var(--f-lectura); }
.seccion-cabeza--politica      { --c: var(--sec-politica); --t: var(--amarillo); }
.seccion-cabeza--policial      { --c: var(--sec-policial); }
.seccion-cabeza--farandula     { --c: var(--sec-farandula); }
.seccion-cabeza--deportes      { --c: var(--sec-deportes); }
.seccion-cabeza--internacional { --c: var(--sec-internacional); }
.seccion-cabeza--economicos    { --c: var(--sec-economicos); }
.seccion-cabeza :focus-visible { outline-color: var(--amarillo); }

.seccion-cuerpo { padding-block: var(--e-6) 0; }
.cargar-mas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: var(--borde);
}


/* 17. PÁGINAS DE TEXTO (QUIÉNES SOMOS / LEGAL) ============================= */
.texto-layout { display: grid; gap: var(--e-6); padding-block: var(--e-6) 0; }
@media (min-width: 1024px) { .texto-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-8); } }
.indice { align-self: start; }
@media (min-width: 1024px) { .indice { position: sticky; top: 8rem; } }
.indice__titulo { margin-bottom: var(--e-2); }
.indice ol { margin: 0; padding: 0; list-style: none; border-top: var(--borde); }
.indice li { border-bottom: var(--borde); }
.indice a {
  display: flex;
  align-items: center;
  min-height: var(--tocable);
  font: 700 var(--t-s)/1.2 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.indice a:hover { background: var(--amarillo); color: var(--negro); }

.texto { max-width: var(--ancho-lectura); font: 400 var(--t-lectura)/1.7 var(--f-lectura); }
.texto p { margin-bottom: 1.1em; }
.texto h2 {
  margin: 2.2em 0 .7em;
  padding-top: var(--e-4);
  border-top: var(--borde);
  font: 400 clamp(1.75rem, 7vw, 2.5rem)/1 var(--f-marca);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--negro);
}
.texto > h2:first-child { margin-top: 0; }
.texto h3 { margin: 1.5em 0 .4em; font: 800 var(--t-l)/1.25 var(--f-ui); color: var(--negro); }
.texto ul, .texto ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.texto li { margin-bottom: .45em; }

.pasos { margin: var(--e-5) 0 var(--e-6); padding: 0; list-style: none; border-top: var(--borde); counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e-3); margin: 0; padding-block: var(--e-4); border-bottom: var(--borde); }
.pasos li::before { content: counter(paso); font: 400 3rem/.85 var(--f-marca); color: var(--amarillo); -webkit-text-stroke: 2px var(--negro); paint-order: stroke fill; }
.pasos strong { display: block; font: 800 var(--t-l)/1.25 var(--f-ui); color: var(--negro); }
.pasos span { display: block; margin-top: var(--e-1); font: 400 var(--t-m)/1.5 var(--f-ui); color: var(--gris); }


/* 18. PÁGINA 404 =========================================================== */
.error { padding-block: var(--e-6) 0; }
.error__escena {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--e-6);
  background: var(--trama), var(--papel-oscuro);
  border: var(--borde);
  box-shadow: var(--sombra-cartel);
}
@media (min-width: 768px) { .error__escena { aspect-ratio: 21 / 9; } }
.error__numero { font: 400 clamp(7rem, 42vw, 20rem)/.8 var(--f-marca); color: var(--negro); }
.cinta-policial {
  position: absolute;
  left: -20%;
  width: 140%;
  display: flex;
  overflow: hidden;
  padding-block: .45rem .35rem;
  background: var(--amarillo);
  border-block: 3px solid var(--negro);
  font: 400 clamp(1rem, 4.5vw, 1.625rem)/1 var(--f-marca);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--negro);
}
.cinta-policial--1 { top: 26%; transform: rotate(-8deg); }
.cinta-policial--2 { bottom: 20%; transform: rotate(6deg); }
.error__titulo { font: 400 clamp(2.5rem, 11vw, 5.5rem)/.92 var(--f-marca); text-transform: uppercase; text-wrap: balance; color: var(--negro); }
.error__texto { max-width: 36rem; margin-top: var(--e-4); font: 400 var(--t-l)/1.5 var(--f-lectura); }
.error__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }


/* 19. PIE DE PÁGINA ======================================================== */
.pie { margin-top: var(--e-8); background: var(--negro); color: var(--hueso); }
.pie::before { content: ""; display: block; height: 12px; background: var(--franjas); }
.pie__interior { display: grid; gap: var(--e-6); padding-block: var(--e-7) var(--e-5); }
@media (min-width: 768px)  { .pie__interior { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pie__interior { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.pie__marca { display: inline-block; font: 400 clamp(3rem, 14vw, 4.5rem)/.86 var(--f-marca); text-transform: uppercase; text-decoration: none; color: var(--amarillo); }
.pie__marca:hover { color: var(--amarillo); }
.pie__lema { margin-top: var(--e-2); font: italic 400 var(--t-m)/1.3 var(--f-lectura); }
.pie__aviso { max-width: 34rem; margin-top: var(--e-4); font: 400 var(--t-s)/1.6 var(--f-lectura); color: var(--gris-claro); }
.pie__titulo { margin-bottom: var(--e-2); font: 700 var(--t-xs)/1 var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); }
.pie__links { margin: 0; padding: 0; list-style: none; }
.pie__links a { display: flex; align-items: center; min-height: var(--tocable); font: 600 var(--t-m)/1.2 var(--f-ui); text-decoration: none; color: var(--hueso); }
.pie__links a:hover { color: var(--amarillo); text-decoration: underline; }
.redes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.redes a { display: grid; place-items: center; width: var(--tocable); height: var(--tocable); color: var(--hueso); border: 2px solid var(--hueso); }
.redes a:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--negro); }
.redes svg { width: 20px; height: 20px; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding-block: var(--e-4);
  border-top: 2px solid #3A3633;
  font: 600 var(--t-xs)/1.4 var(--f-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B8B0A2;
}


/* 20. MANUAL DE ESTILO ===================================================== */
.manual-seccion { padding-block: var(--e-7); border-bottom: var(--borde); }
.manual-seccion > .bloque__cabeza { margin-bottom: var(--e-5); }
.manual-nota { max-width: 44rem; margin-bottom: var(--e-5); font: 400 var(--t-m)/1.55 var(--f-ui); color: var(--gris); }
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--e-4); }
.muestra { background: var(--papel); border: var(--borde); }
.muestra__color { height: 5.5rem; border-bottom: var(--borde); }
.muestra__datos { display: grid; gap: 2px; padding: var(--e-3); font: 400 var(--t-xs)/1.35 var(--f-ui); }
.muestra__datos strong { font: 700 var(--t-s)/1.2 var(--f-ui); }
.muestra__datos code { font: 600 var(--t-xs)/1.3 ui-monospace, Menlo, monospace; }
.tipo-fila { display: grid; gap: var(--e-2); padding-block: var(--e-4); border-bottom: 2px solid var(--linea-suave); }
@media (min-width: 768px) { .tipo-fila { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; gap: var(--e-5); } }
.fila-muestras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.decisiones { margin: 0; padding-left: 1.3em; max-width: 48rem; font: 400 var(--t-m)/1.6 var(--f-ui); }
.decisiones li { margin-bottom: var(--e-3); }
.decisiones strong { color: var(--negro); }


/* 21. MOVIMIENTO REDUCIDO ================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ultimo__cinta { animation: none !important; }
  .ultimo__ventana { overflow-x: auto !important; }
}

/* ==========================================================================
   Palabras del Diccionario Tuja dentro de la nota + cuadrito con el significado
   ========================================================================== */
.coa {
  text-decoration: underline dotted var(--negro);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  cursor: help;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s;
}
.coa:hover, .coa[aria-expanded="true"] { background: var(--amarillo-suave); }
.coa:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 1px; background: var(--amarillo-suave); }
.coa-burbuja {
  position: absolute;
  z-index: 1000;
  max-width: min(20rem, calc(100vw - 16px));
  padding: var(--e-3) var(--e-4);
  background: var(--negro);
  color: var(--hueso);
  border-top: 4px solid var(--amarillo);
  box-shadow: 4px 4px 0 rgba(17, 16, 16, .25);
  font: 400 var(--t-s)/1.45 var(--f-ui);
  pointer-events: auto;
}
.coa-burbuja[hidden] { display: none; }
.coa-burbuja::after {
  content: "";
  position: absolute;
  left: var(--flecha-x, 50%);
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: var(--negro);
}
.coa-burbuja--abajo::after { bottom: auto; top: -12px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--amarillo); }
.coa-burbuja__termino {
  display: block;
  margin-bottom: var(--e-1);
  font: 700 var(--t-xs)/1.2 var(--f-etiqueta);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amarillo);
}
.coa-burbuja__def { display: block; }
.pie__visitas { font-variant-numeric: tabular-nums; }