/* ==========================================================================
   UTRACUN — Componentes
   Cada bloque de este archivo corresponde a un componente React previsto.
   El nombre del bloque es el nombre del componente destino.
   ========================================================================== */

/* ======================================================= <BarraProgreso /> */
.barra-progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--acento); z-index: var(--z-aviso);
  transition: width 80ms linear;
}

/* ========================================================= <Cabecera /> */
.cabecera-sitio {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  background: var(--fondo-elevado);
  border-bottom: 1px solid var(--linea);
}

/* Barra de servicio: fecha, edición vigente y accesos utilitarios.
   Es lo que en prensa impresa sería el "folio" de cabecera. */
.barra-servicio {
  background: var(--c-tinta);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-3xs);
  letter-spacing: 0.03em;
}
.barra-servicio .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 34px;
}
.barra-servicio a { color: rgba(255, 255, 255, 0.78); }
.barra-servicio a:hover { color: #fff; }
.barra-servicio__fecha { text-transform: capitalize; font-weight: 500; }
.barra-servicio__grupo { display: flex; align-items: center; gap: var(--e-4); }

@media (max-width: 780px) {
  .barra-servicio__fecha { display: none; }
  .barra-servicio .contenedor { justify-content: center; }
}

/* Chip "en vivo" con pulso: señala que el sitio se actualiza. */
.pulso {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: var(--tr-etiqueta);
}
.pulso::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-rojo-cla); box-shadow: 0 0 0 0 rgba(255, 43, 56, 0.7);
  animation: pulsar 2s infinite;
}
@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0 rgba(255, 43, 56, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 43, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 43, 56, 0); }
}

/* ------------------------------------------------------------- MASTHEAD
   Bloque de marca. Se comprime al hacer scroll (clase .compacta) para
   devolver altura de pantalla al contenido, como hacen NYT o El País. */
.masthead .contenedor {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-4);
  padding-block: var(--e-5);
  transition: padding var(--ms-medio) var(--ease-suave);
}

.masthead__marca {
  display: flex; align-items: center; gap: clamp(0.7rem, 1.3vw, 1rem);
  justify-content: center; text-align: left;
  /* Bloque de marca de ANCHO DEFINIDO: el escudo, el wordmark y el nombre
     viven dentro de este rectángulo, sin desbordarlo (Manual §1.1). */
  width: clamp(23rem, 34vw, 27rem);
}
.masthead__escudo {
  width: clamp(68px, 6.5vw, 92px); height: auto; flex: none;
  transition: width var(--ms-medio) var(--ease-suave);
}
.masthead__texto { text-align: left; display: block; flex: 1; min-width: 0; }
.masthead__wordmark {
  display: block;
  width: 100%;        /* llena el bloque disponible */
  height: auto;
  flex: none;
}
.masthead__lema {
  display: block;
  font-family: var(--f-ui); font-weight: 600;
  font-size: clamp(0.66rem, 0.85vw, 0.78rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-azul); margin: 0.5rem 0 0;
  text-align: justify; text-align-last: justify;   /* el nombre abarca el mismo ancho del wordmark */
}

.masthead__izq, .masthead__der { display: flex; align-items: center; gap: var(--e-2); }
.masthead__der { justify-content: flex-end; }

.cabecera-sitio.compacta .masthead .contenedor { padding-block: var(--e-2); }
.cabecera-sitio.compacta .masthead__marca { width: 17rem; }
.cabecera-sitio.compacta .masthead__escudo { width: 36px; }
.cabecera-sitio.compacta .masthead__lema { display: none; }

@media (max-width: 900px) {
  /* minmax(0, 1fr): sin el mínimo en 0, un 1fr "puro" nunca se encoge por
     debajo del contenido de sus hijos. Como .masthead__marca trae un ancho
     fijo, esa columna central forzaba el ancho de toda la fila más allá del
     viewport en móvil, empujando los botones de la derecha fuera de pantalla. */
  .masthead .contenedor { grid-template-columns: auto minmax(0, 1fr) auto; }
  .masthead__marca { justify-content: flex-start; width: auto; max-width: 15rem; min-width: 0; }
  .masthead__lema { display: none; }
  .masthead__escudo { width: 40px; }
}

/* ------------------------------------------------------- NAVEGACIÓN
   Subrayado rojo animado en hover/activo: recurso de gran cabecera. */
.nav-secciones {
  border-top: 1px solid var(--linea);
  background: var(--fondo-elevado);
}
.nav-secciones .contenedor {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
}
/* La pista es la que desborda; el destacado queda fuera del scroll para
   que nunca lo recorte el padding del contenedor. */
.nav-secciones__pista {
  display: flex; align-items: center; gap: var(--e-1);
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.nav-secciones__pista::-webkit-scrollbar { display: none; }

.nav-secciones__enlace {
  position: relative;
  padding: var(--e-4) var(--e-3);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tr-nav); text-transform: uppercase;
  color: var(--texto-2); white-space: nowrap;
}
.nav-secciones__enlace::after {
  content: ''; position: absolute; left: var(--e-3); right: var(--e-3); bottom: 0;
  height: 3px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ms-medio) var(--ease-salida);
}
.nav-secciones__enlace:hover { color: var(--texto); }
.nav-secciones__enlace:hover::after,
.nav-secciones__enlace[aria-current='page']::after { transform: scaleX(1); }
.nav-secciones__enlace[aria-current='page'] { color: var(--texto); }

.nav-secciones__destacado {
  flex: none; display: flex; align-items: center; gap: var(--e-2);
  color: var(--c-dorado); font-weight: 800;
  border-left: 1px solid var(--linea); padding-left: var(--e-5);
}
.nav-secciones__destacado::after { display: none; }
@media (max-width: 1080px) { .nav-secciones__destacado { display: none; } }

@media (max-width: 900px) { .nav-secciones { display: none; } }

/* ------------------------------------------------------ MENÚ MÓVIL / CAJÓN */
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 38px; height: 38px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto); border-radius: var(--r-2);
  transition: background var(--ms-rapido), border-color var(--ms-rapido), color var(--ms-rapido);
}
.boton-icono:hover { background: var(--fondo-alterno); border-color: var(--linea-fuerte); }
.boton-icono--ancho { width: auto; padding-inline: var(--e-3); font-size: var(--t-2xs); font-weight: 700; }
.boton-icono--sin-borde { border-color: transparent; }

.cajon {
  position: fixed; inset: 0; z-index: var(--z-menu);
  visibility: hidden; pointer-events: none;
}
.cajon.abierto { visibility: visible; pointer-events: auto; }
.cajon__velo {
  position: absolute; inset: 0; background: rgba(14, 15, 18, 0.55);
  opacity: 0; transition: opacity var(--ms-medio) var(--ease-suave);
  backdrop-filter: blur(2px);
}
.cajon.abierto .cajon__velo { opacity: 1; }
.cajon__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 400px); background: var(--fondo-elevado);
  box-shadow: var(--sh-4); overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--ms-lento) var(--ease-salida);
  display: flex; flex-direction: column;
}
.cajon.abierto .cajon__panel { transform: translateX(0); }
.cajon__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--fondo-elevado); z-index: 2;
}
.cajon__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-6); }
.cajon__grupo-titulo {
  font-size: var(--t-3xs); font-weight: 800; letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase; color: var(--texto-3); margin: 0 0 var(--e-3);
}
.cajon__enlace {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg);
  letter-spacing: -0.015em;
}
.cajon__enlace:hover { color: var(--acento); }
.cajon__enlace .punto {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--color-seccion, var(--acento)); flex: none;
}

/* =========================================================== <Buscador /> */
.buscador { position: relative; display: flex; align-items: center; }
.buscador input {
  width: 100%; padding: var(--e-3) var(--e-3) var(--e-3) 2.5rem;
  border: 1px solid var(--linea); background: var(--fondo);
  border-radius: var(--r-2); font-size: var(--t-sm);
  transition: border-color var(--ms-rapido), box-shadow var(--ms-rapido);
}
.buscador input:focus {
  outline: none; border-color: var(--c-azul-per);
  box-shadow: 0 0 0 3px rgba(51, 112, 255, 0.15);
}
.buscador svg { position: absolute; left: var(--e-3); color: var(--texto-3); pointer-events: none; }

/* ============================================================= <Boton /> */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.02em; padding: var(--e-3) var(--e-6);
  border: 1px solid transparent; border-radius: var(--r-2);
  background: var(--c-tinta); color: #fff;
  transition: transform var(--ms-rapido) var(--ease-suave),
              background var(--ms-rapido), color var(--ms-rapido),
              border-color var(--ms-rapido), box-shadow var(--ms-rapido);
  text-align: center; line-height: 1.3;
}
.boton:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: 0.45; pointer-events: none; }

.boton--acento { background: var(--c-rojo); }
.boton--acento:hover { background: var(--c-rojo-osc); }
.boton--azul { background: var(--c-azul); }
.boton--seccion { background: var(--color-seccion, var(--acento)); }
.boton--contorno {
  background: transparent; color: var(--texto); border-color: var(--linea-fuerte);
}
.boton--contorno:hover { border-color: var(--texto); background: var(--fondo-alterno); }
.boton--fantasma { background: transparent; color: var(--texto); }
.boton--fantasma:hover { background: var(--fondo-alterno); box-shadow: none; }
.boton--claro { background: #fff; color: var(--c-tinta); }
.boton--sm { padding: var(--e-2) var(--e-4); font-size: var(--t-2xs); }
.boton--lg { padding: var(--e-4) var(--e-8); font-size: var(--t-base); }
.boton--bloque { width: 100%; }

/* ============================================================ <Etiqueta /> */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-3xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px var(--e-2);
  border-radius: var(--r-1); background: var(--fondo-alterno); color: var(--texto-2);
  line-height: 1.2; white-space: nowrap;
}
.etiqueta--seccion { background: var(--color-seccion, var(--acento)); color: #fff; }
.etiqueta--exito { background: var(--c-exito-bg); color: var(--c-exito); }
.etiqueta--alerta { background: var(--c-alerta-bg); color: var(--c-alerta); }
.etiqueta--error { background: var(--c-error-bg); color: var(--c-error); }
.etiqueta--info { background: var(--c-info-bg); color: var(--c-info); }
.etiqueta--contorno { background: transparent; border: 1px solid var(--linea-fuerte); }

/* ================================================================ <Nota />
   Tarjeta editorial. Variantes por jerarquía, no por estilo: es la pieza
   que más se repite y la que sostiene el ritmo de la portada.          */
.nota { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }

.nota__figura {
  position: relative; overflow: hidden; background: var(--fondo-alterno);
  border-radius: var(--r-2);
}
.nota__figura img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ms-lento) var(--ease-salida);
}
.nota:hover .nota__figura img { transform: scale(1.04); }

.nota__figura--16-9 { aspect-ratio: 16 / 9; }
.nota__figura--4-3 { aspect-ratio: 4 / 3; }
.nota__figura--1-1 { aspect-ratio: 1 / 1; }
.nota__figura--3-4 { aspect-ratio: 3 / 4; }
.nota__figura--21-9 { aspect-ratio: 21 / 9; }

.nota__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.nota__titulo { font-size: var(--t-lg); }
.nota__resumen { font-family: var(--f-editorial); font-size: var(--t-sm); color: var(--texto-2); line-height: 1.5; margin: 0; }

/* Apertura: la pieza principal de la portada */
.nota--apertura .nota__titulo { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.nota--apertura .nota__resumen { font-size: var(--t-lg); }
.nota--apertura .nota__figura { border-radius: var(--r-3); }

.nota--destacada .nota__titulo { font-size: var(--t-2xl); }
.nota--secundaria .nota__titulo { font-size: var(--t-xl); }
.nota--compacta .nota__titulo { font-size: var(--t-base); }

/* Horizontal: imagen a la izquierda, texto a la derecha. Ideal para listas. */
.nota--horizontal {
  flex-direction: row; align-items: flex-start; gap: var(--e-4);
}
.nota--horizontal .nota__figura { width: 116px; flex: none; aspect-ratio: 4 / 3; }
.nota--horizontal .nota__titulo { font-size: var(--t-base); }
.nota--horizontal-grande .nota__figura { width: 220px; aspect-ratio: 4 / 3; }
.nota--horizontal-grande .nota__titulo { font-size: var(--t-xl); }
@media (max-width: 560px) {
  .nota--horizontal-grande { flex-direction: column; }
  .nota--horizontal-grande .nota__figura { width: 100%; aspect-ratio: 16 / 9; }
}

/* Sólo texto: aporta contraste de textura en rejillas muy fotográficas */
.nota--texto { border-top: 1px solid var(--linea); padding-top: var(--e-4); }

/* Inmersiva: texto sobre imagen con degradado. Uso muy medido: sólo en
   portada y sólo cuando la foto tiene zona limpia para el titular. */
.nota--inmersiva {
  position: relative; min-height: 460px; border-radius: var(--r-3);
  overflow: hidden; justify-content: flex-end; color: #fff;
}
.nota--inmersiva .nota__figura {
  position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto;
}
.nota--inmersiva .nota__figura::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 7, 10, 0.92) 0%, rgba(6, 7, 10, 0.55) 42%, rgba(6, 7, 10, 0.05) 78%);
}
.nota--inmersiva .nota__cuerpo { position: relative; padding: var(--e-8); z-index: 2; }
.nota--inmersiva .nota__titulo { color: #fff; font-size: var(--t-3xl); }
.nota--inmersiva .nota__resumen { color: rgba(255, 255, 255, 0.82); }
.nota--inmersiva .meta { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 560px) {
  .nota--inmersiva { min-height: 380px; }
  .nota--inmersiva .nota__cuerpo { padding: var(--e-5); }
}

/* Numeración de "más leídas": el número es el elemento gráfico */
.nota--rankeada { flex-direction: row; gap: var(--e-4); align-items: flex-start; }
.nota__rango {
  font-family: var(--f-display); font-weight: 900; font-size: 2.5rem;
  line-height: 0.8; color: var(--linea-fuerte); flex: none; width: 2ch;
  font-variant-numeric: tabular-nums;
}
.nota--rankeada:hover .nota__rango { color: var(--acento); }

/* Insignia sobre la imagen (VIDEO, GALERÍA, PDF, EN VIVO) */
.nota__insignia {
  position: absolute; left: var(--e-3); top: var(--e-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--e-1);
  background: rgba(6, 7, 10, 0.82); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--t-3xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px var(--e-2); border-radius: var(--r-1);
}
.nota__duracion {
  position: absolute; right: var(--e-3); bottom: var(--e-3); z-index: 2;
  background: rgba(6, 7, 10, 0.82); color: #fff; font-size: var(--t-3xs);
  font-weight: 600; padding: 3px 6px; border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
}

/* =========================================================== <Teletipo /> */
.teletipo {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--linea);
  background: var(--fondo-elevado); overflow: hidden;
}
.teletipo__rotulo {
  flex: none; display: flex; align-items: center; gap: var(--e-2);
  background: var(--c-rojo); color: #fff; padding: var(--e-3) var(--e-5);
  font-size: var(--t-3xs); font-weight: 800; letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
}
.teletipo__pista { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.teletipo__cinta {
  display: flex; gap: var(--e-8); white-space: nowrap; padding-left: var(--e-5);
  animation: correr 48s linear infinite;
}
.teletipo:hover .teletipo__cinta { animation-play-state: paused; }
.teletipo__item {
  font-size: var(--t-sm); color: var(--texto-2);
  display: inline-flex; align-items: center; gap: var(--e-2);
}
.teletipo__item:hover { color: var(--acento); }
.teletipo__item time { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
@keyframes correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 560px) { .teletipo__rotulo { padding-inline: var(--e-3); } }

/* ============================================================== <Panel /> */
.panel {
  background: var(--fondo-elevado); border: 1px solid var(--linea);
  border-radius: var(--r-3); padding: var(--e-6);
}
.panel--plano { border-radius: var(--r-0); }
.panel--acento { border-top: 3px solid var(--color-seccion, var(--acento)); }
.panel--tinta { background: var(--c-tinta); border-color: transparent; color: #fff; }
.panel--tinta .titular, .panel--tinta .titular-ui { color: #fff; }
.panel--tinta .texto { color: rgba(255, 255, 255, 0.72); }
.panel--sin-relleno { padding: 0; overflow: hidden; }

/* ============================================================ <Pestanas /> */
.pestanas {
  display: flex; gap: var(--e-1); border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas__boton {
  position: relative; background: none; border: 0;
  padding: var(--e-3) var(--e-4); font-size: var(--t-sm); font-weight: 700;
  color: var(--texto-3); white-space: nowrap;
  transition: color var(--ms-rapido);
}
.pestanas__boton::after {
  content: ''; position: absolute; left: var(--e-3); right: var(--e-3); bottom: -1px;
  height: 2px; background: var(--acento); transform: scaleX(0);
  transition: transform var(--ms-medio) var(--ease-salida);
}
.pestanas__boton:hover { color: var(--texto-2); }
.pestanas__boton[aria-selected='true'] { color: var(--texto); }
.pestanas__boton[aria-selected='true']::after { transform: scaleX(1); }

/* ============================================================== <Filtros />
   Chips de filtro. Estado activo = color de sección, no gris: así el
   usuario ve de un golpe qué recorte está mirando. */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4); border: 1px solid var(--linea);
  border-radius: var(--r-full); background: var(--fondo-elevado);
  font-size: var(--t-2xs); font-weight: 700; color: var(--texto-2);
  transition: all var(--ms-rapido) var(--ease-suave);
}
.chip:hover { border-color: var(--texto-2); color: var(--texto); }
.chip[aria-pressed='true'] {
  background: var(--color-seccion, var(--c-tinta)); color: #fff;
  border-color: transparent;
}
.chip__punto { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--color-seccion, var(--acento)); flex: none; }
.chip[aria-pressed='true'] .chip__punto { background: rgba(255, 255, 255, 0.85); }
.chip__contador { font-variant-numeric: tabular-nums; opacity: 0.65; }

/* ============================================================== <Campo /> */
.campo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.campo__etiqueta {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--texto-2);
}
.campo__etiqueta abbr { color: var(--c-rojo); text-decoration: none; }
.campo__ayuda { font-size: var(--t-2xs); color: var(--texto-3); }
.campo__error { font-size: var(--t-2xs); color: var(--c-error); font-weight: 600; display: none; }
.campo.con-error .campo__error { display: block; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--c-error); }

.campo input, .campo select, .campo textarea {
  width: 100%; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-2);
  background: var(--fondo-elevado); font-size: var(--t-sm);
  transition: border-color var(--ms-rapido), box-shadow var(--ms-rapido);
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--c-azul-per);
  box-shadow: 0 0 0 3px rgba(51, 112, 255, 0.15);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }

.campo-grupo { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Casilla / radio con área de toque generosa (uso móvil predominante) */
.casilla {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3); border: 1px solid var(--linea); border-radius: var(--r-2);
  cursor: pointer; transition: border-color var(--ms-rapido), background var(--ms-rapido);
}
.casilla:hover { border-color: var(--texto-3); background: var(--fondo-alterno); }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--c-rojo); }
.casilla__texto { font-size: var(--t-sm); line-height: 1.45; }
.casilla__texto small { display: block; color: var(--texto-3); font-size: var(--t-2xs); margin-top: 2px; }
.casilla:has(input:checked) { border-color: var(--c-rojo); background: var(--c-error-bg); }
.casilla.con-error { border-color: var(--c-error); box-shadow: 0 0 0 3px var(--c-error-bg); }

/* ============================================================== <Pasos />
   Indicador de progreso del formulario de afiliación. */
.pasos { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.pasos__item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2xs); font-weight: 700; color: var(--texto-3); }
.pasos__num {
  width: 26px; height: 26px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; border: 1px solid var(--linea-fuerte);
  font-variant-numeric: tabular-nums; font-size: var(--t-2xs);
  transition: all var(--ms-medio) var(--ease-suave);
}
.pasos__item.activo { color: var(--texto); }
.pasos__item.activo .pasos__num { background: var(--c-rojo); border-color: var(--c-rojo); color: #fff; }
.pasos__item.hecho .pasos__num { background: var(--c-exito); border-color: var(--c-exito); color: #fff; }
.pasos__linea { width: 24px; height: 1px; background: var(--linea-fuerte); }
@media (max-width: 700px) { .pasos__item span:last-child { display: none; } }

/* ============================================================= <Modal /> */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--e-4);
  visibility: hidden; pointer-events: none;
}
.modal.abierto { visibility: visible; pointer-events: auto; }
.modal__velo {
  position: absolute; inset: 0; background: rgba(6, 7, 10, 0.65);
  backdrop-filter: blur(4px); opacity: 0;
  transition: opacity var(--ms-medio) var(--ease-suave);
}
.modal.abierto .modal__velo { opacity: 1; }
.modal__caja {
  position: relative; background: var(--fondo-elevado); border-radius: var(--r-4);
  width: min(100%, 620px); max-height: calc(100vh - 2rem); overflow-y: auto;
  box-shadow: var(--sh-4); transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform var(--ms-lento) var(--ease-salida), opacity var(--ms-medio);
}
.modal.abierto .modal__caja { transform: translateY(0) scale(1); opacity: 1; }
.modal__caja--ancha { width: min(100%, 960px); }
.modal__cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-6); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--fondo-elevado); z-index: 2;
}
.modal__cuerpo { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-5); }
.modal__pie {
  padding: var(--e-5) var(--e-6); border-top: 1px solid var(--linea);
  display: flex; gap: var(--e-3); justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0; background: var(--fondo-elevado);
}

/* =============================================================== <Aviso /> */
.aviso {
  display: flex; gap: var(--e-3); padding: var(--e-4);
  border-radius: var(--r-2); font-size: var(--t-sm); line-height: 1.5;
  border-left: 3px solid currentColor;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso--info { background: var(--c-info-bg); color: var(--c-info); }
.aviso--exito { background: var(--c-exito-bg); color: var(--c-exito); }
.aviso--alerta { background: var(--c-alerta-bg); color: var(--c-alerta); }
.aviso--error { background: var(--c-error-bg); color: var(--c-error); }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso p { margin: 0; color: inherit; }

/* Notificación flotante (confirmaciones de reserva/inscripción) */
.brindis {
  position: fixed; bottom: var(--e-6); left: 50%; z-index: var(--z-aviso);
  transform: translate(-50%, 140%);
  background: var(--c-tinta); color: #fff; padding: var(--e-4) var(--e-6);
  border-radius: var(--r-3); box-shadow: var(--sh-4); font-size: var(--t-sm);
  display: flex; align-items: center; gap: var(--e-3);
  max-width: calc(100vw - 2rem);
  transition: transform var(--ms-lento) var(--ease-salida);
}
.brindis.visible { transform: translate(-50%, 0); }
.brindis__icono { color: #4ade80; flex: none; }

/* ======================================================== <Calendario />
   Rejilla mensual. El punto de color codifica la categoría del evento,
   de modo que el estado de ocupación se lee sin abrir el día. */
.calendario { display: flex; flex-direction: column; gap: var(--e-4); }
.calendario__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  flex-wrap: wrap;
}
.calendario__mes {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl);
  text-transform: capitalize; letter-spacing: -0.02em; margin: 0; min-width: 12ch;
}
.calendario__nav { display: flex; gap: var(--e-2); }

.calendario__rejilla {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--linea); border-radius: var(--r-3); overflow: hidden;
  background: var(--linea); gap: 1px;
}
.calendario__dia-nombre {
  background: var(--fondo-alterno); padding: var(--e-2); text-align: center;
  font-size: var(--t-3xs); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texto-3);
}
.calendario__celda {
  background: var(--fondo-elevado); min-height: 96px; padding: var(--e-2);
  display: flex; flex-direction: column; gap: 4px; border: 0; text-align: left;
  transition: background var(--ms-rapido); position: relative;
}
.calendario__celda:hover:not(:disabled) { background: var(--fondo-alterno); }
.calendario__celda:disabled { background: var(--fondo); cursor: default; }
.calendario__celda.fuera { opacity: 0.35; }
.calendario__celda.hoy .calendario__num {
  background: var(--c-rojo); color: #fff; border-radius: var(--r-full);
  width: 22px; height: 22px; display: grid; place-items: center;
}
.calendario__celda.seleccionado { box-shadow: inset 0 0 0 2px var(--c-azul-per); }
.calendario__num {
  font-size: var(--t-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}
.calendario__pastilla {
  font-size: 10px; font-weight: 700; line-height: 1.25; padding: 2px 4px;
  border-radius: var(--r-1); background: color-mix(in srgb, var(--color-evento) 16%, transparent);
  color: var(--color-evento); border-left: 2px solid var(--color-evento);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.calendario__mas { font-size: 9px; color: var(--texto-3); font-weight: 700; }
.calendario__puntos { display: flex; gap: 3px; flex-wrap: wrap; margin-top: auto; }
.calendario__punto { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--color-evento); }

@media (max-width: 700px) {
  .calendario__celda { min-height: 62px; }
  .calendario__pastilla { display: none; }
}

.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.leyenda__item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2xs); color: var(--texto-2); font-weight: 600; }
.leyenda__marca { width: 10px; height: 10px; border-radius: 2px; background: var(--color-evento); flex: none; }

/* -------------------------------------------------------- FRANJAS HORARIAS
   Selector de franjas para salones. Estados: libre, ocupado, seleccionado.
   El estado "ocupado" es no interactivo por diseño: evita el solapamiento
   en la propia interfaz, antes de llegar al backend. */
.franjas { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.franja {
  display: flex; flex-direction: column; gap: 2px; padding: var(--e-3);
  border: 1px solid var(--linea); border-radius: var(--r-2);
  background: var(--fondo-elevado); text-align: left;
  transition: all var(--ms-rapido) var(--ease-suave);
}
.franja__hora { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.franja__estado { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-exito); }
.franja:hover:not(:disabled) { border-color: var(--c-azul-per); background: var(--c-info-bg); }
.franja.ocupado {
  background: repeating-linear-gradient(45deg, var(--fondo-alterno), var(--fondo-alterno) 6px, transparent 6px, transparent 12px);
  color: var(--texto-3); cursor: not-allowed; border-style: dashed;
}
.franja.ocupado .franja__estado { color: var(--c-error); }
.franja.elegido { background: var(--c-tinta); border-color: var(--c-tinta); color: #fff; }
.franja.elegido .franja__estado { color: #4ade80; }

/* ================================================== <VisorFlipbook />
   Visor de periódico. El "lomo" central y la sombra interior son lo que
   vende la sensación de papel; el volteo usa rotateY con perspectiva. */
.visor {
  background: #14161a; border-radius: var(--r-4); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--sh-3);
}
.visor__escenario {
  position: relative; flex: 1; display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    #14161a;
  min-height: 380px;
  perspective: 2400px;
}
/* Envoltorio no-3D: el filter de sombra tiene que vivir FUERA de #libro,
   porque cualquier filter distinto de "none" fuerza transform-style:flat
   en el elemento que lo lleva (spec), y eso rompe el contexto 3D de la
   tarjeta voladora (.visor__volteo) que cuelga de #libro al voltear. */
.visor__libro-sombra {
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}
.visor__libro {
  position: relative; display: flex; gap: 0;
  transition: transform var(--ms-lento) var(--ease-salida);
  transform-style: preserve-3d;
}
.visor__hoja {
  position: relative; background: #fff; overflow: hidden;
  width: min(38vw, 430px); aspect-ratio: 285 / 365;  /* proporción real del periódico */
  transform-origin: left center;
  backface-visibility: hidden;
}
.visor__hoja img { width: 100%; height: 100%; object-fit: cover; }
.visor__hoja--izq { transform-origin: right center; }
/* Sombra del lomo: gradiente hacia el centro en cada hoja */
.visor__hoja--izq::after,
.visor__hoja--der::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.visor__hoja--izq::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent 12%); }
.visor__hoja--der::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent 12%); }

/* Tarjeta voladora: la hoja que gira de verdad al pasar de página.
   Se posiciona por JS (left/top/width/height) exactamente sobre el slot
   de origen, con el mismo transform-origin que ese slot (el lomo), y gira
   180° hasta terminar ocupando la posición del slot opuesto. */
.visor__volteo {
  position: absolute; top: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  z-index: 4;
  animation-duration: var(--ms-vuelta), var(--ms-vuelta);
  animation-timing-function: var(--ease-suave), var(--ease-suave);
  animation-fill-mode: forwards, forwards;
}
.visor__volteo--adelante { transform-origin: left center; animation-name: girar-adelante, sombra-volteo; }
.visor__volteo--atras { transform-origin: right center; animation-name: girar-atras, sombra-volteo; }
.visor__volteo::after {
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none;
}
.visor__cara {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.visor__cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor__cara--dorso { transform: rotateY(180deg); }

@keyframes girar-adelante {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); }
}
@keyframes girar-atras {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
@keyframes sombra-volteo {
  0%, 100% { opacity: 0; }
  50% { opacity: .45; }
}

.visor__folio {
  position: absolute; bottom: var(--e-3); font-size: var(--t-3xs);
  color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 700;
}
.visor__hoja--izq .visor__folio { left: var(--e-4); }
.visor__hoja--der .visor__folio { right: var(--e-4); }

.visor__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px);
  transition: background var(--ms-rapido), transform var(--ms-rapido);
  z-index: 3;
}
.visor__flecha:hover { background: rgba(255, 255, 255, 0.24); }
.visor__flecha:disabled { opacity: 0.25; pointer-events: none; }
.visor__flecha--prev { left: var(--e-3); }
.visor__flecha--next { right: var(--e-3); }

.visor__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-3) var(--e-5); background: #0c0e11;
  border-top: 1px solid rgba(255, 255, 255, 0.08); flex-wrap: wrap;
}
.visor__barra-grupo { display: flex; align-items: center; gap: var(--e-2); }
.visor__boton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2); font-size: var(--t-2xs); font-weight: 700;
  transition: background var(--ms-rapido);
}
.visor__boton:hover { background: rgba(255, 255, 255, 0.18); }
.visor__boton.activo { background: var(--c-rojo); border-color: var(--c-rojo); }
.visor__contador {
  color: rgba(255, 255, 255, 0.7); font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center;
}
.visor__deslizador { flex: 1; min-width: 140px; accent-color: var(--c-rojo); }

/* Tira de miniaturas para salto rápido de página */
.visor__tira {
  display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-5);
  overflow-x: auto; background: #0c0e11; border-top: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}
.visor__mini {
  flex: none; width: 52px; aspect-ratio: 285 / 365; border-radius: 2px;
  overflow: hidden; border: 2px solid transparent; opacity: 0.5;
  transition: opacity var(--ms-rapido), border-color var(--ms-rapido);
}
.visor__mini img { width: 100%; height: 100%; object-fit: cover; }
.visor__mini:hover { opacity: 0.85; }
.visor__mini.activo { opacity: 1; border-color: var(--c-rojo); }

.visor:fullscreen { border-radius: 0; }
.visor:fullscreen .visor__hoja { width: min(44vw, 620px); }

@media (max-width: 780px) {
  /* En móvil se muestra una sola página: el pliego doble es ilegible */
  .visor__hoja--izq { display: none; }
  .visor__hoja { width: min(84vw, 430px); }
}

/* ================================================= <TarjetaOrganizacion /> */
.org {
  display: flex; flex-direction: column; gap: var(--e-4);
  background: var(--fondo-elevado); border: 1px solid var(--linea);
  border-radius: var(--r-3); padding: var(--e-5);
  transition: border-color var(--ms-medio), transform var(--ms-medio) var(--ease-suave), box-shadow var(--ms-medio);
}
.org:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); box-shadow: var(--sh-2); }
.org__cabeza { display: flex; gap: var(--e-4); align-items: flex-start; }
.org__sello {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-2);
  display: grid; place-items: center; font-family: var(--f-display);
  font-weight: 900; font-size: var(--t-lg); color: #fff;
  background: var(--color-seccion, var(--c-azul));
  letter-spacing: -0.03em;
}
.org__nombre { font-size: var(--t-base); font-weight: 800; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.org__sector { font-size: var(--t-2xs); color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.org__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.org__dato { display: flex; flex-direction: column; gap: 2px; }
.org__dato-valor { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.org__dato-clave { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 700; }

/* Ficha de directivo */
.directivo { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.directivo__foto {
  width: 44px; height: 44px; border-radius: var(--r-full); flex: none;
  object-fit: cover; background: var(--fondo-alterno);
}
.directivo__inicial {
  width: 44px; height: 44px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; background: var(--fondo-alterno);
  font-weight: 800; color: var(--texto-2); font-size: var(--t-sm);
}
.directivo__nombre { font-size: var(--t-sm); font-weight: 700; margin: 0; }
.directivo__cargo { font-size: var(--t-2xs); color: var(--texto-3); }
.directivo__contacto { margin-left: auto; display: flex; gap: var(--e-1); }

/* ================================================== <Cifra /> (indicadores) */
.cifra { display: flex; flex-direction: column; gap: var(--e-1); }
.cifra__valor {
  font-family: var(--f-display); font-weight: 900;
  font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cifra__etiqueta { font-size: var(--t-2xs); color: var(--texto-3); font-weight: 600; line-height: 1.4; }

/* =============================================== <Acordeon /> (preguntas) */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); padding: var(--e-4) 0; background: none; border: 0;
  text-align: left; font-size: var(--t-base); font-weight: 700; color: var(--texto);
}
.acordeon__boton svg { flex: none; transition: transform var(--ms-medio) var(--ease-suave); color: var(--texto-3); }
.acordeon__item.abierto .acordeon__boton svg { transform: rotate(45deg); color: var(--acento); }
.acordeon__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--ms-lento) var(--ease-salida);
}
.acordeon__item.abierto .acordeon__panel { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  font-family: var(--f-editorial); font-size: var(--t-md); line-height: var(--lh-lectura);
  color: var(--texto-2); margin: 0 0 var(--e-4); max-width: var(--ancho-lectura);
}

/* =============================================================== <Pie /> */
.pie-sitio {
  background: var(--c-tinta); color: rgba(255, 255, 255, 0.7);
  padding-block: var(--e-16) var(--e-8); margin-top: var(--e-16);
  border-top: 4px solid var(--c-rojo);
}
.pie-sitio a { color: rgba(255, 255, 255, 0.7); }
.pie-sitio a:hover { color: #fff; }
.pie-sitio__marca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.pie-sitio__marca img { width: 52px; }
.pie-sitio__wordmark { display: block; height: 1.7rem; width: auto; }
.pie-sitio__lema { font-size: var(--t-3xs); letter-spacing: 0.1em; text-transform: uppercase; margin: 4px 0 0; color: rgba(255, 255, 255, 0.5); }
.pie-sitio__titulo {
  font-size: var(--t-3xs); font-weight: 800; letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase; color: #fff; margin: 0 0 var(--e-4);
}
.pie-sitio__lista { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-sm); }
.pie-sitio__legal {
  margin-top: var(--e-10); padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  font-size: var(--t-2xs); color: rgba(255, 255, 255, 0.45);
}
.redes { display: flex; gap: var(--e-2); }
.redes a {
  width: 36px; height: 36px; border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center;
  transition: background var(--ms-rapido), border-color var(--ms-rapido);
}
.redes a:hover { background: var(--c-rojo); border-color: var(--c-rojo); }

/* ====================================================== <Boletin /> (CTA) */
.boletin {
  background: var(--c-azul-osc); color: #fff; border-radius: var(--r-4);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-8); align-items: center;
  background-image: radial-gradient(circle at 88% 12%, rgba(227, 6, 19, 0.35), transparent 55%);
}
.boletin .titular { color: #fff; }
.boletin .texto { color: rgba(255, 255, 255, 0.72); }
.boletin__form { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.boletin__form input {
  flex: 1 1 220px; padding: var(--e-4); border-radius: var(--r-2);
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: var(--t-sm);
}
.boletin__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.boletin__form input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.boletin__nota { font-size: var(--t-3xs); color: rgba(255, 255, 255, 0.5); margin: var(--e-3) 0 0; }
@media (max-width: 900px) { .boletin { grid-template-columns: 1fr; } }

/* ========================================================= <Migas de pan /> */
.migas { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2xs); color: var(--texto-3); flex-wrap: wrap; }
.migas a:hover { color: var(--acento); }
.migas span[aria-current] { color: var(--texto-2); font-weight: 600; }

/* ============================================================ <Paginador /> */
.paginador { display: flex; align-items: center; justify-content: center; gap: var(--e-2); }
.paginador__boton {
  min-width: 38px; height: 38px; padding-inline: var(--e-2);
  border: 1px solid var(--linea); border-radius: var(--r-2);
  background: var(--fondo-elevado); font-size: var(--t-sm); font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  transition: all var(--ms-rapido);
}
.paginador__boton:hover:not(:disabled) { border-color: var(--texto); }
.paginador__boton[aria-current='page'] { background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }
.paginador__boton:disabled { opacity: 0.4; pointer-events: none; }

/* ====================================================== ESQUELETO DE CARGA */
.esqueleto {
  background: linear-gradient(90deg, var(--fondo-alterno) 25%, var(--linea) 50%, var(--fondo-alterno) 75%);
  background-size: 200% 100%; animation: brillar 1.4s infinite;
  border-radius: var(--r-2); color: transparent;
}
@keyframes brillar {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* =================================================== ESTADO VACÍO / SIN DATOS */
.vacio {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-16) var(--e-6); text-align: center; color: var(--texto-3);
  border: 1px dashed var(--linea-fuerte); border-radius: var(--r-3);
}
.vacio__titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); color: var(--texto-2); margin: 0; }