/* ==========================================================================
   UTRACUN — Composiciones de página
   Maquetaciones específicas que no son componentes reutilizables.
   ========================================================================== */

/* ======================================================== PORTADA — APERTURA
   Asimetría 7/5 con filete vertical: la fórmula de portada de los grandes
   diarios. Da una pieza dominante sin renunciar a densidad informativa.  */
.apertura { padding-block: var(--e-8) var(--e-10); }

.apertura__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gutter);
}
@media (max-width: 1000px) { .apertura__rejilla { grid-template-columns: 1fr; } }

.apertura__secundarias {
  display: grid; gap: var(--e-5);
  border-left: 1px solid var(--linea); padding-left: var(--gutter);
  align-content: start;
}
@media (max-width: 1000px) {
  .apertura__secundarias { border-left: 0; padding-left: 0; border-top: 2px solid var(--texto); padding-top: var(--e-5); }
}
.apertura__secundarias > .nota + .nota { border-top: 1px solid var(--linea); padding-top: var(--e-5); }

/* Columna izquierda de la apertura: la noticia dominante + una pila de
   titulares compactos (teasers) que la llenan y evitan el hueco blanco. */
#apertura-principal { display: flex; flex-direction: column; gap: var(--e-5); }
.apertura-teasers { display: flex; flex-direction: column; gap: var(--e-5); }
.apertura-teasers .nota--texto { border-top: 1px solid var(--linea); padding-top: var(--e-5); }

/* Franja de tres columnas con filetes verticales (bloque "En profundidad") */
.tercios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.tercios > * { padding-inline: var(--gutter); }
.tercios > *:first-child { padding-left: 0; }
.tercios > *:last-child { padding-right: 0; }
.tercios > * + * { border-left: 1px solid var(--linea); }
@media (max-width: 900px) {
  .tercios { grid-template-columns: 1fr; }
  .tercios > * { padding-inline: 0; border-left: 0 !important; }
  .tercios > * + * { border-top: 1px solid var(--linea); padding-top: var(--e-5); margin-top: var(--e-5); }
}

/* Mosaico de multimedia: primera pieza a doble alto */
.mosaico {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); gap: var(--gutter);
}
.mosaico > *:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico > *:first-child { grid-column: span 2; grid-row: span 1; }
}

/* =========================================== PORTADA — BLOQUE DE PERIÓDICO
   Módulo oscuro que rompe el ritmo de la portada y ancla la hemeroteca
   como producto propio, no como una categoría más de noticias. */
.bloque-periodico {
  background: var(--c-tinta); color: #fff; overflow: hidden; position: relative;
}
.bloque-periodico::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(201, 162, 39, 0.22), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(227, 6, 19, 0.18), transparent 50%);
  pointer-events: none;
}
.bloque-periodico .contenedor { position: relative; z-index: 1; }
.bloque-periodico__rejilla {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 960px) { .bloque-periodico__rejilla { grid-template-columns: 1fr; } }

/* Abanico de portadas: las ediciones se superponen como en un expositor */
.abanico { display: flex; justify-content: center; padding-block: var(--e-4); }
.abanico__pieza {
  width: clamp(120px, 15vw, 178px); aspect-ratio: 285 / 365;
  border-radius: var(--r-2); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform var(--ms-lento) var(--ease-salida), z-index 0s;
}
.abanico__pieza img { width: 100%; height: 100%; object-fit: cover; }
.abanico__pieza:nth-child(1) { transform: rotate(-9deg) translateX(28%); z-index: 1; }
.abanico__pieza:nth-child(2) { transform: rotate(-3deg) translateX(9%); z-index: 2; }
.abanico__pieza:nth-child(3) { transform: rotate(3deg) translateX(-9%); z-index: 3; }
.abanico__pieza:nth-child(4) { transform: rotate(9deg) translateX(-28%); z-index: 4; }
.abanico:hover .abanico__pieza:nth-child(1) { transform: rotate(-14deg) translateX(24%) translateY(-10px); }
.abanico:hover .abanico__pieza:nth-child(2) { transform: rotate(-5deg) translateX(6%) translateY(-16px); }
.abanico:hover .abanico__pieza:nth-child(3) { transform: rotate(5deg) translateX(-6%) translateY(-16px); }
.abanico:hover .abanico__pieza:nth-child(4) { transform: rotate(14deg) translateX(-24%) translateY(-10px); }

/* ================================================================= ARTÍCULO
   Layout de tres canales: nota lateral izquierda (compartir sticky),
   columna de lectura centrada, y columna derecha de contexto.        */
.articulo { padding-block: var(--e-8) var(--e-12); }

.articulo__encabezado { max-width: 56rem; margin-inline: auto; }
.articulo__titular { font-size: var(--t-4xl); margin-block: var(--e-4) var(--e-5); }
.articulo__bajada { font-size: var(--t-xl); line-height: 1.4; }
.articulo__firma {
  display: flex; align-items: center; gap: var(--e-3);
  padding-block: var(--e-5); margin-top: var(--e-6);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.articulo__firma-foto {
  width: 42px; height: 42px; border-radius: var(--r-full);
  background: var(--c-azul); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: var(--t-sm); flex: none;
}
.articulo__firma-nombre { font-size: var(--t-sm); font-weight: 700; }
.articulo__acciones { margin-left: auto; display: flex; gap: var(--e-2); }

.articulo__portada { margin-block: var(--e-8); }
.articulo__portada img { width: 100%; border-radius: var(--r-3); }
.articulo__pie-foto {
  font-family: var(--f-editorial); font-size: var(--t-2xs); color: var(--texto-3);
  margin-top: var(--e-3); padding-left: var(--e-3);
  border-left: 2px solid var(--linea-fuerte); line-height: 1.5;
}

.articulo__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ancho-lectura)) minmax(0, 1fr);
  gap: var(--gutter);
}
.articulo__cuerpo > * { grid-column: 2; }
@media (max-width: 1100px) {
  .articulo__cuerpo { grid-template-columns: 1fr; }
  .articulo__cuerpo > * { grid-column: 1; }
  .articulo__cuerpo { max-width: var(--ancho-lectura); margin-inline: auto; }
}

/* Tipografía de lectura larga. La escala responde a --escala-lectura,
   controlada por el usuario desde la barra de servicio. */
.prosa {
  font-family: var(--f-editorial);
  font-size: calc(var(--t-md) * var(--escala-lectura));
  line-height: var(--lh-lectura);
  color: var(--texto);
}
.prosa p { margin: 0 0 1.35em; }
.prosa > p:first-of-type::first-letter {
  float: left; font-family: var(--f-display); font-weight: 900;
  font-size: 3.9em; line-height: 0.82; margin: 0.06em 0.09em 0 0;
  color: var(--acento);
}
.prosa h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.55em; line-height: 1.18; letter-spacing: -0.02em;
  margin: 2em 0 0.6em; color: var(--texto);
}
.prosa h3 {
  font-family: var(--f-ui); font-weight: 800; font-size: 1.05em;
  letter-spacing: -0.01em; margin: 1.9em 0 0.5em;
}
.prosa a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa a:hover { text-decoration-thickness: 2px; }
.prosa ul, .prosa ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prosa li { margin-bottom: 0.5em; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul > li { position: relative; padding-left: 1.3em; }
.prosa ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 2px; background: var(--acento);
}
.prosa strong { font-weight: 600; color: var(--texto); }

/* Destacado tipográfico (pull quote) */
.destacado {
  margin: 2.2em 0; padding-left: var(--e-6);
  border-left: 3px solid var(--acento);
}
.destacado p {
  font-family: var(--f-display); font-weight: 700; font-style: italic;
  font-size: 1.5em; line-height: 1.28; letter-spacing: -0.02em;
  color: var(--texto); margin: 0 0 0.4em;
}
.destacado cite {
  font-family: var(--f-ui); font-style: normal; font-size: var(--t-2xs);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3);
}

/* Caja de datos dentro del artículo: normativa, cifras, requisitos */
.caja-datos {
  margin: 2.2em 0; padding: var(--e-6);
  background: var(--fondo-alterno); border-radius: var(--r-3);
  border-top: 3px solid var(--c-azul);
}
.caja-datos__titulo {
  font-family: var(--f-ui); font-size: var(--t-2xs); font-weight: 800;
  letter-spacing: var(--tr-etiqueta); text-transform: uppercase;
  color: var(--c-azul); margin: 0 0 var(--e-3);
}
.caja-datos p:last-child { margin-bottom: 0; }

/* Barra de compartir lateral, adherida al desplazamiento */
.compartir-lateral {
  grid-column: 1 !important; justify-self: end;
  position: sticky; top: 9rem; align-self: start;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding-right: var(--gutter);
}
.compartir-lateral__rotulo {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto-3);
  writing-mode: vertical-rl; margin-inline: auto; margin-bottom: var(--e-2);
}
@media (max-width: 1100px) { .compartir-lateral { display: none; } }

/* Columna de contexto (artículos relacionados, edición vigente) */
.articulo__contexto {
  grid-column: 3 !important; position: sticky; top: 9rem; align-self: start;
  padding-left: var(--gutter); border-left: 1px solid var(--linea);
}
@media (max-width: 1100px) { .articulo__contexto { display: none; } }

/* ============================================================== HEMEROTECA
   Rejilla de portadas con proporción real del periódico impreso
   (28.5 × 36.5 cm ≈ 285/365), según Manual §6.                        */
.hemeroteca {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.edicion { display: flex; flex-direction: column; gap: var(--e-3); }
.edicion__portada {
  position: relative; aspect-ratio: 285 / 365; border-radius: var(--r-2);
  overflow: hidden; background: var(--fondo-alterno);
  box-shadow: var(--sh-2);
  transition: transform var(--ms-medio) var(--ease-salida), box-shadow var(--ms-medio);
}
.edicion:hover .edicion__portada { transform: translateY(-4px); box-shadow: var(--sh-3); }
.edicion__portada img { width: 100%; height: 100%; object-fit: cover; }
/* Lomo: filete lateral que insinúa el grosor del ejemplar */
.edicion__portada::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
  z-index: 2;
}
.edicion__velo {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(6, 7, 10, 0.85), transparent 55%);
  opacity: 0; display: grid; place-items: center;
  transition: opacity var(--ms-medio) var(--ease-suave);
}
.edicion:hover .edicion__velo, .edicion:focus-within .edicion__velo { opacity: 1; }
.edicion__num {
  position: absolute; right: var(--e-2); top: var(--e-2); z-index: 4;
  background: var(--c-dorado); color: var(--c-tinta);
  font-size: var(--t-3xs); font-weight: 800; letter-spacing: 0.04em;
  padding: 3px var(--e-2); border-radius: var(--r-1);
}
.edicion__titulo { font-size: var(--t-sm); font-weight: 700; line-height: 1.35; margin: 0; }
.edicion__fecha { font-size: var(--t-2xs); color: var(--texto-3); text-transform: capitalize; }

/* Línea de tiempo por año en la hemeroteca */
.anos { display: flex; gap: var(--e-1); overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: none; }
.anos::-webkit-scrollbar { display: none; }
.ano {
  flex: none; padding: var(--e-2) var(--e-5); border: 0; background: none;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg);
  color: var(--texto-3); border-bottom: 3px solid transparent;
  font-variant-numeric: tabular-nums; transition: all var(--ms-rapido);
}
.ano:hover { color: var(--texto-2); }
.ano[aria-pressed='true'] { color: var(--texto); border-bottom-color: var(--c-dorado); }

/* =============================================================== SALONES */
.salon {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--e-5); padding: var(--e-5);
  border: 1px solid var(--linea); border-radius: var(--r-3);
  background: var(--fondo-elevado);
  transition: border-color var(--ms-medio);
}
.salon:hover { border-color: var(--linea-fuerte); }
.salon.elegido { border-color: var(--c-rojo); box-shadow: 0 0 0 1px var(--c-rojo); }
@media (max-width: 700px) { .salon { grid-template-columns: 1fr; } }

.salon__figura {
  aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden;
  position: relative; background: var(--fondo-alterno);
}
.salon__figura img { width: 100%; height: 100%; object-fit: cover; }
/* Marca de agua geométrica para los salones sin fotografía disponible */
.salon__figura--sinfoto {
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, var(--color-seccion, var(--c-azul)) 0%, var(--c-tinta) 100%);
  color: rgba(255, 255, 255, 0.9);
}
.salon__figura--sinfoto span {
  font-family: var(--f-display); font-weight: 900; font-size: var(--t-2xl);
  letter-spacing: -0.03em; text-align: center; padding: var(--e-4);
}
.salon__atributos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.salon__atributo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-2xs); color: var(--texto-2); font-weight: 600;
  background: var(--fondo-alterno); padding: 4px var(--e-2); border-radius: var(--r-1);
}
.salon__tarifa { font-family: var(--f-display); font-weight: 900; font-size: var(--t-xl); letter-spacing: -0.03em; }
.salon__tarifa small { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-2xs); color: var(--texto-3); letter-spacing: 0; }

/* Resumen de reserva adherido (patrón booking) */
.resumen-reserva { position: sticky; top: 9rem; align-self: start; }
.resumen-reserva__linea {
  display: flex; justify-content: space-between; gap: var(--e-3);
  font-size: var(--t-sm); padding-block: var(--e-2);
}
.resumen-reserva__linea dt { color: var(--texto-3); }
.resumen-reserva__linea dd { margin: 0; font-weight: 700; text-align: right; }
.resumen-reserva__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--texto); padding-top: var(--e-3); margin-top: var(--e-3);
}
.resumen-reserva__total span:last-child {
  font-family: var(--f-display); font-weight: 900; font-size: var(--t-xl); letter-spacing: -0.03em;
}

/* ============================================================== DIRECTORIO */
.directorio-rejilla {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Cabecera de micrositio de organización */
.micrositio-cabeza {
  background: var(--c-azul-osc); color: #fff;
  padding-block: var(--e-12) var(--e-8);
  background-image: radial-gradient(circle at 90% 10%, rgba(227, 6, 19, 0.3), transparent 55%);
}
.micrositio-cabeza .titular { color: #fff; }
.micrositio-cabeza .migas, .micrositio-cabeza .migas a { color: rgba(255, 255, 255, 0.6); }
.micrositio-cabeza__sello {
  width: 84px; height: 84px; border-radius: var(--r-3); background: #fff;
  color: var(--c-azul-osc); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: var(--t-2xl);
  letter-spacing: -0.04em; flex: none;
}
.micrositio-cabeza__cifras { display: flex; gap: var(--e-8); flex-wrap: wrap; }
.micrositio-cabeza .cifra__valor { color: #fff; }
.micrositio-cabeza .cifra__etiqueta { color: rgba(255, 255, 255, 0.55); }

/* ============================================================ CABEZA DE PÁGINA
   Encabezado tipográfico para secciones internas (archivo, agenda...). */
.cabeza-pagina {
  padding-block: var(--e-10) var(--e-8);
  border-bottom: 1px solid var(--linea);
}
.cabeza-pagina__titulo { font-size: var(--t-4xl); margin-block: var(--e-3) var(--e-4); }
.cabeza-pagina--tinta {
  background: var(--c-tinta); color: #fff; border-bottom: 0;
}
.cabeza-pagina--tinta .titular { color: #fff; }
.cabeza-pagina--tinta .bajada { color: rgba(255, 255, 255, 0.7); }
.cabeza-pagina--tinta .migas, .cabeza-pagina--tinta .migas a { color: rgba(255, 255, 255, 0.55); }

/* ==================================================== QUIENES SOMOS
   Portada institucional: fondo tinta a sangre con una banda de cifras
   montada sobre el borde inferior. */
.portada-institucional {
  background: var(--c-tinta); color: #fff;
  padding-block: var(--e-16) 0;
  position: relative; overflow: hidden;
}
.portada-institucional::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 80% 0%, rgba(227, 6, 19, 0.28), transparent 60%);
  pointer-events: none;
}
.portada-institucional > * { position: relative; }
.portada-institucional .kicker { color: var(--c-dorado-cla); }
/* La especificidad debe superar a h1.titular de base.css */
.portada-institucional .portada-institucional__titulo {
  color: #fff; font-size: var(--t-4xl); margin-block: var(--e-3) var(--e-5);
}
/* Escudo a sangre por el borde derecho: da peso visual al aire del hero
   sin competir con el titular. */
.portada-institucional__escudo {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: min(38vw, 430px); opacity: 0.07; pointer-events: none;
  filter: grayscale(1) brightness(3);
}
@media (max-width: 900px) { .portada-institucional__escudo { display: none; } }
.portada-institucional__bajada { color: rgba(255, 255, 255, 0.72); max-width: 62ch; }
.portada-institucional__cifras { margin-top: var(--e-12); border-top: 1px solid rgba(255, 255, 255, 0.12); }

.banda-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.banda-cifras__item {
  padding: var(--e-6) var(--e-5) var(--e-6) 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.banda-cifras__item:last-child { border-right: 0; }
.banda-cifras__item + .banda-cifras__item { padding-left: var(--e-5); }
.banda-cifras__valor {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-3xl); line-height: 1; color: #fff;
}
.banda-cifras__etiqueta {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-2xs); font-weight: 600; line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.texto--guia { font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--texto-2); }

.boton--contorno-claro {
  border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; background: transparent;
}
.boton--contorno-claro:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.malla-pilares, .malla-comite {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tarjeta-pilar {
  padding: var(--e-5); border: 1px solid var(--linea); border-radius: var(--r-3);
  background: var(--fondo-elevado);
  border-top: 3px solid var(--color-seccion, var(--acento));
}
.tarjeta-pilar__icono {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-2); margin-bottom: var(--e-4);
  background: var(--fondo-alterno); color: var(--color-seccion, var(--acento));
}
.tarjeta-pilar .texto { margin-top: var(--e-2); }

/* Linea de tiempo: el ano vive en la columna izquierda y el filete vertical
   los cose. En movil el filete desaparece y queda una lista simple. */
.linea-tiempo { margin-top: var(--e-8); }
.hito {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--e-6);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
}
.hito__anio {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-2xl);
  line-height: 1; color: var(--acento);
}
.hito__cuerpo .texto { margin-top: var(--e-2); max-width: 68ch; }
@media (max-width: 700px) {
  .hito { grid-template-columns: 1fr; gap: var(--e-2); }
}

.escalera { list-style: none; counter-reset: paso; display: grid; gap: var(--e-4); }
.escalera li {
  counter-increment: paso; position: relative; padding-left: var(--e-8);
  font-size: var(--t-sm); color: var(--texto-2); line-height: 1.5;
}
.escalera li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--c-tinta); color: #fff;
  font-family: var(--f-ui); font-size: var(--t-3xs); font-weight: 700;
}
.escalera li strong { display: block; color: var(--texto); margin-bottom: 2px; }

.lista-documentos { list-style: none; border-top: 1px solid var(--linea); }
.lista-documentos li { border-bottom: 1px solid var(--linea); }
.doc {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-2); color: inherit; text-decoration: none;
  transition: background var(--ms-rapido);
}
.doc:hover { background: var(--fondo-elevado); }
.doc__icono { color: var(--c-error); flex: none; }
.doc__texto { flex: 1; min-width: 0; }
.doc__texto strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.doc__texto small { display: block; font-size: var(--t-2xs); color: var(--texto-3); margin-top: 2px; }
.doc__accion { color: var(--texto-3); flex: none; }
.doc:hover .doc__accion { color: var(--acento); }

/* ============================================================== CONTACTO */
.atajo {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-3);
  background: var(--fondo-elevado); color: inherit; text-decoration: none;
  transition: border-color var(--ms-rapido), transform var(--ms-rapido);
}
.atajo:hover { border-color: var(--acento); transform: translateX(3px); }
.atajo__icono {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--r-full); background: var(--fondo-alterno); color: var(--acento);
}
.atajo__texto { display: block; font-size: var(--t-2xs); color: var(--texto-3); font-weight: 600; }
.atajo__dato { display: block; font-size: var(--t-sm); }
.atajo > svg { color: var(--texto-3); flex: none; }

.sede { border-top: 2px solid var(--c-tinta); padding-top: var(--e-4); }
.sede__datos { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.sede__datos > div { display: flex; gap: var(--e-3); align-items: flex-start; }
.sede__datos dt { color: var(--texto-3); flex: none; margin-top: 2px; }
.sede__datos dd { margin: 0; font-size: var(--t-sm); line-height: 1.45; }
.sede__mapa {
  margin-top: var(--e-4); height: 150px; border-radius: var(--r-3);
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, var(--linea) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 34px),
    var(--fondo-alterno);
  color: var(--texto-3); font-size: var(--t-2xs); font-weight: 600;
}
.sede__mapa span { display: flex; align-items: center; gap: var(--e-2); }

/* ====================================================== UI KIT (handoff) */
.muestra-color {
  border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--linea);
}
.muestra-color__chip { height: 84px; }
.muestra-color__info { padding: var(--e-3); background: var(--fondo-elevado); }
.muestra-color__nombre { font-size: var(--t-2xs); font-weight: 700; }
.muestra-color__hex { font-family: var(--f-mono); font-size: var(--t-3xs); color: var(--texto-3); text-transform: uppercase; }

.especimen { border-top: 1px solid var(--linea); padding-block: var(--e-5); }
.especimen__ficha {
  font-family: var(--f-mono); font-size: var(--t-3xs); color: var(--texto-3);
  margin-bottom: var(--e-3); text-transform: uppercase; letter-spacing: 0.06em;
}

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th {
  text-align: left; font-size: var(--t-3xs); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3);
  padding: var(--e-3); border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap;
}
.tabla td { padding: var(--e-3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--fondo-alterno); }
.tabla__envoltorio { overflow-x: auto; }
.tabla__principal { font-weight: 700; }
.tabla__sec { font-size: var(--t-2xs); color: var(--texto-3); }

/* ================================================== ARCHIVO — SIDEBAR DERECHO
   Completa el ancho en secciones cortas (Noticias/Comunicados) y da
   contexto de navegación al desplazarse por el archivo. */
.archivo-lado {
  position: sticky; top: 9rem; align-self: start;
  display: flex; flex-direction: column; gap: var(--e-8);
}
.archivo-lado .atajo { font-weight: 700; }
@media (max-width: 900px) {
  .archivo-lado { position: static; grid-column: 1 / -1; }
}