/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */
@layer capa_base, capa_estructura, capa_paginas, capa_componentes, capa_responsivo;

@layer capa_base {
/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */
:root {
  color-scheme: dark;
  --font-lectura: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", "URW Palladio L", "Noto Serif", serif;
  --font-interfaz: "Optima", "Candara", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  --font-sans: var(--font-lectura);
  --font-display: var(--font-interfaz);
  --fondo: #0c0c11;
  --fondo-profundo: #07070c;
  --fondo-suave: #12131a;
  --fondo-elevado: rgba(8, 10, 14, 0.88);
  --fondo-elevado-intenso: rgba(7, 9, 13, 0.94);
  --texto: #f4ede3;
  --texto-fuerte: #fbf4ea;
  --texto-suave: #d1c4b4;
  --acento: #e6ad64;
  --acento-2: #5cbfb3;
  --acento-3: #df6a57;
  --linea: rgba(230, 173, 100, 0.2);
  --panel: rgba(11, 12, 16, 0.82);
  --panel-intenso: rgba(8, 9, 12, 0.94);
  --sombra: rgba(0, 0, 0, 0.6);
  --superficie-principal: rgba(10, 11, 15, 0.86);
  --superficie-secundaria: rgba(8, 10, 14, 0.74);
  --superficie-terciaria: rgba(7, 9, 13, 0.64);
  --borde-superficie-principal: rgba(230, 173, 100, 0.23);
  --borde-superficie-secundaria: rgba(255, 255, 255, 0.13);
  --borde-superficie-terciaria: rgba(255, 255, 255, 0.11);
  --borde-elevado: rgba(255, 255, 255, 0.18);
  --max: 72.5rem;
  --gutter-contenedor: clamp(0.9rem, 4vw, 2.5rem);
  --ancho-lectura: 66ch;
  --espacio-minimo: 0.5rem;
  --espacio-corto: 0.75rem;
  --espacio-base: 1rem;
  --espacio-amplio: 1.5rem;
  --espacio-grande: 2rem;
  --espacio-gigante: 2.75rem;
  --espacio-seccion: clamp(1.3rem, 2.2vw, 2.25rem);
  --header-altura: 5.25rem;
  --salto-ancla: 7.5rem;
  --borde-panel: rgba(255, 255, 255, 0.16);
  --borde-panel-intenso: rgba(230, 173, 100, 0.24);
  --sombra-suave: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.32);
  --sombra-media: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.42);
  --sombra-profunda: 0 2rem 3.8rem rgba(0, 0, 0, 0.52);
  --sombra-superficie-principal: 0 1.75rem 3.2rem rgba(0, 0, 0, 0.46);
  --sombra-superficie-secundaria: 0 1rem 2rem rgba(0, 0, 0, 0.34);
  --sombra-superficie-terciaria: 0 0.7rem 1.45rem rgba(0, 0, 0, 0.28);
  --cursor-x: 50vw;
  --cursor-y: 20vh;
  --fs-h1: clamp(2.9rem, 5.4vw, 4.9rem);
  --fs-h2: clamp(2.2rem, 3.8vw, 3rem);
  --fs-h3: clamp(1.55rem, 2.45vw, 2.05rem);
  --fs-h4: clamp(1.22rem, 1.8vw, 1.45rem);
  --fs-cuerpo: clamp(1.12rem, 0.22vw + 1.07rem, 1.3rem);
  --fs-cuerpo-destacado: clamp(1.22rem, 0.5vw + 1.08rem, 1.48rem);
  --fs-meta: 0.82rem;
  --radio-pequeno: 0.5rem;
  --radio-mediano: 0.75rem;
  --radio-grande: 1.125rem;
  --radio-pildora: 62.4375rem;
  --duracion-rapida: 160ms;
  --duracion-base: 220ms;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);
  --tamano-anillo-foco: 0.125rem;
  --desfase-anillo-foco: 0.1875rem;
  --anillo-foco: color-mix(in srgb, var(--acento-2), white 20%);
  --borde-panel-sutil: rgba(255, 255, 255, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(43.75rem 31.25rem at var(--cursor-x) var(--cursor-y), rgba(223, 106, 87, 0.14), transparent 70%),
    radial-gradient(56.25rem 43.75rem at 15% -10%, rgba(230, 173, 100, 0.2), transparent 60%),
    radial-gradient(62.5rem 50rem at 90% 10%, rgba(92, 191, 179, 0.14), transparent 65%),
    radial-gradient(56.25rem 31.25rem at 50% 110%, rgba(223, 106, 87, 0.09), transparent 70%),
    linear-gradient(180deg, var(--fondo), var(--fondo-profundo));
  color: var(--texto);
  font-family: var(--font-sans);
  letter-spacing: 0.00875rem;
  min-height: 100vh;
  font-size: var(--fs-cuerpo);
  font-weight: 400;
  line-height: 1.78;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.1875rem);
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

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

::selection {
  background: color-mix(in srgb, var(--acento), black 25%);
  color: #fff8ee;
}

a {
  color: var(--acento);
  text-decoration: none;
  transition:
    color var(--duracion-rapida) var(--curva-estandar),
    text-shadow var(--duracion-rapida) var(--curva-estandar),
    border-color var(--duracion-rapida) var(--curva-estandar),
    box-shadow var(--duracion-rapida) var(--curva-estandar),
    background-color var(--duracion-rapida) var(--curva-estandar);
}

a:hover {
  color: #ffd98c;
  text-shadow: 0 0 0.55rem rgba(248, 195, 91, 0.3);
}

.texto-largo a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.145em;
  text-decoration-color: color-mix(in srgb, var(--acento), transparent 35%);
}

.texto-largo a:hover {
  text-decoration-color: color-mix(in srgb, #ffd98c, transparent 10%);
}

a:focus-visible {
  outline: var(--tamano-anillo-foco) solid var(--anillo-foco);
  outline-offset: var(--desfase-anillo-foco);
}

:where(button, .boton, input, textarea, select):focus-visible {
  outline: var(--tamano-anillo-foco) solid var(--anillo-foco);
  outline-offset: var(--desfase-anillo-foco);
}

:where(input, textarea, select) {
  font: inherit;
  color: var(--texto);
  background: rgba(7, 9, 13, 0.72);
  border: 0.0625rem solid var(--borde-panel-sutil);
  border-radius: var(--radio-mediano);
}

:where(input, textarea, select):hover {
  border-color: color-mix(in srgb, var(--acento), transparent 45%);
}

:where(input, textarea, select)::placeholder {
  color: color-mix(in srgb, var(--texto-suave), transparent 25%);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-lectura);
  font-weight: 500;
  letter-spacing: 0.015625rem;
  text-wrap: balance;
  line-height: 1.14;
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  margin: 0 0 0.8rem 0;
}

h2 {
  font-size: var(--fs-h2);
  padding-bottom: 0.2rem;
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

p {
  line-height: 1.86;
  color: var(--texto-suave);
  font-size: var(--fs-cuerpo);
  max-width: var(--ancho-lectura);
  text-wrap: pretty;
}

.encabezado-sitio {
  width: calc(100% - (var(--gutter-contenedor) * 2));
  max-width: calc(var(--max) - (var(--gutter-contenedor) * 2));
  margin: 0.8rem auto 0 auto;
  padding: 0.9rem clamp(0.9rem, 3.4vw, 2.25rem) 0.72rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 0.55rem;
  position: sticky;
  top: 0.5rem;
  z-index: 80;
  border-radius: 1.05rem;
  border: 0.0625rem solid color-mix(in srgb, var(--acento), transparent 76%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 60%),
    linear-gradient(325deg, color-mix(in srgb, var(--acento-2), transparent 92%), transparent 60%),
    var(--fondo-elevado);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.85rem) saturate(115%);
  -webkit-backdrop-filter: blur(0.85rem) saturate(115%);
  isolation: isolate;
  min-height: var(--header-altura);
}

.marca {
  grid-column: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.18rem;
  min-width: 0;
}

.titulo-sitio {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26rem;
  font-size: clamp(1.12rem, 1.45vw, 1.4rem);
  line-height: 1.1;
  color: var(--texto-fuerte);
}

.titulo-sitio:hover {
  color: var(--texto-fuerte);
  text-shadow: none;
}

.descripcion-sitio {
  margin: 0;
  opacity: 0.74;
  font-size: 0.67rem;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  font-family: var(--font-display);
  width: min(78ch, 100%);
  max-width: none;
  white-space: normal;
}

.navegacion-sitio {
  grid-column: 1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  padding: 0;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.095rem;
  font-family: var(--font-display);
}

.navegacion-sitio a {
  --acento-navegacion: var(--acento-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.74rem;
  color: color-mix(in srgb, var(--texto-suave), white 4%);
  line-height: 1.18;
  text-shadow: none;
}

.navegacion-sitio a:hover {
  color: color-mix(in srgb, var(--acento-navegacion), white 12%);
  text-shadow: none;
}

.navegacion-sitio a.activo {
  color: color-mix(in srgb, var(--acento-navegacion), white 8%);
  font-weight: 600;
}

.navegacion-sitio a.navegacion-inicio {
  --acento-navegacion: #5cbfb3;
}

.navegacion-sitio a.navegacion-ciclos {
  --acento-navegacion: #e6ad64;
}

.navegacion-sitio a.navegacion-archivo {
  --acento-navegacion: #df6a57;
}

.navegacion-sitio a.navegacion-notas {
  --acento-navegacion: #5b8fd6;
}

.navegacion-sitio a.navegacion-miradas {
  --acento-navegacion: #79b36a;
}

.navegacion-sitio a.navegacion-acerca {
  --acento-navegacion: #b07a55;
}

.contenido {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--espacio-base) + 0.4rem) var(--gutter-contenedor) 4.4rem var(--gutter-contenedor);
  animation: entrada 0.6s ease-out;
}

.pie-sitio {
  max-width: var(--max);
  margin: clamp(2.4rem, 5vw, 3.2rem) auto 0 auto;
  padding: 1.75rem var(--gutter-contenedor) 2.55rem var(--gutter-contenedor);
  text-align: center;
  position: relative;
  color: var(--texto-suave);
  border-top: 0.0625rem solid color-mix(in srgb, var(--acento), transparent 76%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%);
}

.pie-sitio::before {
  content: "";
  position: absolute;
  left: var(--gutter-contenedor);
  right: var(--gutter-contenedor);
  top: 0;
  height: 0.8rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--acento), transparent 72%),
    transparent
  );
  opacity: 0.52;
  pointer-events: none;
}

.pie-sitio p {
  margin: 0 auto;
  width: min(100%, 48rem);
  display: grid;
  justify-items: center;
  gap: 0.56rem;
  font-family: var(--font-display);
  line-height: 1.3;
}

.pie-linea {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.52rem;
  font-size: 0.7rem;
  line-height: 1.3;
  letter-spacing: 0.082rem;
  text-transform: uppercase;
}

.pie-handle {
  color: color-mix(in srgb, var(--texto), white 10%);
  font-weight: 500;
}

.pie-handle:hover {
  color: var(--acento);
  text-shadow: none;
}

.pie-separador {
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto-suave), transparent 32%);
  opacity: 0.68;
  transform: translateY(-0.03rem);
}

.pie-frase {
  color: color-mix(in srgb, var(--texto-suave), white 10%);
}

.pie-copy-corto {
  font-size: 0.64rem;
  letter-spacing: 0.074rem;
  color: color-mix(in srgb, var(--texto-suave), white 4%);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

@keyframes entrada {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.64rem 1.08rem;
  border-radius: var(--radio-pildora);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.14), transparent 40%),
    var(--acento);
  color: #0b0c10;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-display);
  box-shadow: 0 0.7rem 1.35rem rgba(0, 0, 0, 0.24);
  transition:
    transform var(--duracion-base) var(--curva-estandar),
    box-shadow var(--duracion-base) var(--curva-estandar),
    border-color var(--duracion-rapida) var(--curva-estandar),
    background-color var(--duracion-rapida) var(--curva-estandar),
    color var(--duracion-rapida) var(--curva-estandar);
}

.boton.secundario {
  background: color-mix(in srgb, var(--acento-2), transparent 88%);
  border: 0.0625rem solid var(--acento-2);
  color: var(--acento-2);
}

.boton.fantasma {
  background: rgba(7, 9, 13, 0.56);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  color: var(--texto);
}

.boton:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.85rem 1.85rem rgba(0, 0, 0, 0.34);
}

.boton.secundario:hover {
  border-color: color-mix(in srgb, var(--acento-2), white 25%);
  color: color-mix(in srgb, var(--acento-2), white 15%);
  box-shadow: 0 0.8rem 1.75rem rgba(26, 97, 93, 0.24);
}

.boton.fantasma:hover {
  border-color: color-mix(in srgb, var(--acento), transparent 35%);
  color: color-mix(in srgb, var(--texto), white 6%);
}
}

@layer capa_estructura {
/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */
/* Salas */

.sala {
  position: relative;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sala-accent), transparent 95%), transparent 50%),
    linear-gradient(330deg, color-mix(in srgb, var(--sala-accent-2), transparent 94%), transparent 52%),
    var(--superficie-principal);
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 68%);
  border-radius: 1.2rem;
  padding: 1.9rem;
  box-shadow: var(--sombra-superficie-principal);
  backdrop-filter: blur(0.75rem);
  overflow: hidden;
  isolation: isolate;
  --sala-accent: var(--acento);
  --sala-accent-2: var(--acento-2);
  --sala-accent-3: var(--acento-3);
  --sala-brillo: color-mix(in srgb, var(--sala-accent), transparent 88%);
  --desfase-marco-interno: 0.75rem;
  --radio-marco-interno: 0.85rem;
}

.sala::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sala-brillo), transparent 15%), transparent 32%),
    radial-gradient(37.5rem 12.5rem at 10% 0%, color-mix(in srgb, var(--sala-accent), transparent 82%), transparent 70%),
    radial-gradient(25rem 16.25rem at 90% 15%, color-mix(in srgb, var(--sala-accent-2), transparent 84%), transparent 70%),
    radial-gradient(31.25rem 13.75rem at 50% 100%, color-mix(in srgb, var(--sala-accent-3), transparent 90%), transparent 70%);
  opacity: 1;
  pointer-events: none;
  z-index: -2;
}

.sala::after {
  content: "";
  position: absolute;
  inset: var(--desfase-marco-interno);
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent-3), transparent 75%);
  border-radius: var(--radio-marco-interno);
  pointer-events: none;
  opacity: 0.65;
  z-index: -1;
}

.divider-cinta {
  height: 1.625rem;
  margin: 1.6rem 0 2rem 0;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(230, 173, 100, 0.6) 5% 95%, transparent 95%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 0.5rem, transparent 0.5rem 1rem);
  border-radius: var(--radio-pildora);
  opacity: 0.56;
}

.sala-icon {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--sala-accent), transparent 85%);
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 55%);
  display: grid;
  place-items: center;
  color: var(--sala-accent);
  box-shadow: 0 0.75rem 1.4rem color-mix(in srgb, var(--sala-accent), transparent 85%);
}


.sala-num {
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-size: 0.72rem;
  color: var(--sala-accent-2);
  margin: 0 0 0.2rem 0;
  font-family: var(--font-display);
}

.sala-cabecera {
  position: relative;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
}

.sala-cabecera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.0625rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sala-accent), transparent 40%), transparent);
  opacity: 0.75;
}

.sala-marca {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.sala-insignia {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 50%);
  color: var(--sala-accent);
  text-transform: uppercase;
  letter-spacing: 0.09375rem;
  font-size: 0.72rem;
  font-family: var(--font-display);
  background: rgba(7, 9, 13, 0.68);
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.03);
}

.sala-insignia.secundario {
  color: var(--sala-accent-2);
  border-color: color-mix(in srgb, var(--sala-accent-2), transparent 60%);
}

.sala-titulo-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: start;
}

.sala-icon.grande {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
}

.sala-titulo {
  margin: 0;
  font-size: var(--fs-h2);
  letter-spacing: 0.01875rem;
}

.sala-subtitulo {
  margin: 0.35rem 0 0.7rem 0;
  color: var(--texto-suave);
  font-size: 1.08rem;
  max-width: 56ch;
}

.sala-metadatos-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sala-etiqueta {
  padding: 0.38rem 0.75rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(255, 255, 255, 0.16);
  color: color-mix(in srgb, var(--texto), white 6%);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  font-family: var(--font-display);
  background: rgba(7, 9, 13, 0.64);
  line-height: 1.25;
}

.sala-etiqueta.acento {
  border-color: color-mix(in srgb, var(--sala-accent), transparent 45%);
  color: color-mix(in srgb, var(--sala-accent), white 10%);
  background: color-mix(in srgb, var(--sala-accent), transparent 92%);
}

.etiqueta-meta {
  border-color: rgba(255, 255, 255, 0.24);
  color: color-mix(in srgb, var(--texto), white 8%);
}

.etiqueta-tipo {
  border-color: rgba(255, 255, 255, 0.2);
}

.etiqueta-tipo.opinion {
  color: #df6a57;
  border-color: rgba(223, 106, 87, 0.5);
}

.etiqueta-tipo.nota {
  color: #5b8fd6;
  border-color: rgba(91, 143, 214, 0.5);
}

.etiqueta-tipo.mirada {
  color: #79b36a;
  border-color: rgba(121, 179, 106, 0.5);
}

.etiqueta-tipo.ciclo {
  color: #e6ad64;
  border-color: rgba(230, 173, 100, 0.5);
}

.etiqueta-tipo.archivo {
  color: #df6a57;
  border-color: rgba(223, 106, 87, 0.5);
}

.etiqueta-tipo.acerca {
  color: #b07a55;
  border-color: rgba(176, 122, 85, 0.55);
}

.etiqueta-estado {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--texto);
}

.etiqueta-estado.en-curso,
.etiqueta-estado.activo,
.etiqueta-estado.abierto {
  color: #3ddc84;
  border-color: rgba(61, 220, 132, 0.6);
}

.etiqueta-estado.pospuesto {
  color: #ff5b5b;
  border-color: rgba(255, 91, 91, 0.6);
}

.etiqueta-estado.cerrado,
.etiqueta-estado.terminado,
.etiqueta-estado.finalizado {
  color: #9c6bff;
  border-color: rgba(156, 107, 255, 0.6);
}

.sala-acciones {
  display: flex;
  justify-content: flex-end;
}

.sala-divisor {
  height: 0.8125rem;
  margin: 1.2rem 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sala-accent), transparent 45%) 0 1.2rem, transparent 1.2rem 1.85rem);
  border-radius: var(--radio-pildora);
  opacity: 0.56;
}

.sala-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
}

@layer capa_paginas {
/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */
/* Portada */

.portada-panel {
  display: grid;
  gap: 1.05rem;
  background:
    radial-gradient(46rem 24rem at 10% 4%, rgba(230, 173, 100, 0.14), transparent 78%),
    radial-gradient(38rem 26rem at 88% 6%, rgba(92, 191, 179, 0.11), transparent 76%),
    radial-gradient(42rem 28rem at 42% 92%, rgba(92, 191, 179, 0.07), transparent 80%),
    rgba(7, 8, 12, 0.86);
  border: 0.0625rem solid color-mix(in srgb, var(--acento), transparent 72%);
  border-radius: 1.15rem;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  box-shadow: var(--sombra-profunda);
  margin-bottom: 2.2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portada-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 15% 0%, rgba(255, 255, 255, 0.04), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 54%);
  pointer-events: none;
  z-index: -2;
}

.portada-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 120% at -5% 62%, rgba(0, 0, 0, 0.2), transparent 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.21), rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
  z-index: -1;
}

.portada-panel>* {
  position: relative;
  z-index: 1;
}

.portada-cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.05rem;
  padding: 0 0 0.78rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.13);
}

.portada-marquee {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.115rem;
  font-size: 0.68rem;
  color: var(--texto);
  font-family: var(--font-display);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.portada-logo {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.09375rem;
  color: var(--texto);
  background:
    radial-gradient(85% 85% at 20% 10%, rgba(230, 173, 100, 0.24), transparent 60%),
    radial-gradient(120% 120% at 80% 90%, rgba(92, 191, 179, 0.24), transparent 60%),
    rgba(8, 10, 16, 0.8);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--sombra-superficie-terciaria);
}

.portada-cinta-intro {
  margin: 0;
  justify-self: end;
  max-width: 44ch;
  text-align: right;
  font-size: 0.94rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--texto-suave), white 6%);
  letter-spacing: 0.015rem;
}

.portada {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.portada-indice {
  gap: 1.25rem;
}

.portada-industrial {
  grid-template-columns: 1fr;
}

.portada-texto {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 0.9fr);
  gap: 1.1rem;
  align-content: start;
  min-height: 100%;
  padding: 0.25rem 0 0.1rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  position: relative;
  z-index: 1;
}

.portada-columna-principal {
  display: grid;
  gap: 0.95rem;
  align-content: start;
  padding-right: 1.05rem;
}

.portada-columna-datos {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.68rem;
  align-content: stretch;
  min-height: 100%;
  padding: 0.9rem 0.95rem 0.86rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  border-radius: 0.82rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.02), transparent 58%),
    rgba(8, 10, 15, 0.48);
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.03);
}

.portada-datos-titulo {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 0.63rem;
  color: color-mix(in srgb, var(--acento), white 8%);
}

.portada-titular {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.05rem, 3.5vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: 0.0125rem;
  color: color-mix(in srgb, var(--texto), white 10%);
  text-wrap: balance;
}

.portada-descripcion {
  max-width: 46ch;
  font-size: clamp(1.18rem, 1.3vw + 0.9rem, 1.55rem);
  line-height: 1.42;
  color: color-mix(in srgb, var(--texto), white 5%);
  margin: 0;
}

.portada-matriz {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-content: stretch;
  grid-auto-rows: minmax(3.2rem, 1fr);
  border-top: 0;
}

.portada-matriz-item {
  margin: 0;
  padding: 0.42rem 0.52rem 0.48rem 0.56rem;
  border-left: 0.125rem solid color-mix(in srgb, var(--acento), transparent 35%);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.02), transparent 70%);
  border-radius: 0.48rem;
}

.portada-matriz-item dt {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.085rem;
  font-size: 0.58rem;
  color: color-mix(in srgb, var(--texto-suave), white 6%);
}

.portada-matriz-item dd {
  margin: 0.22rem 0 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.26;
  color: color-mix(in srgb, var(--texto), white 9%);
}

.portada-ficha-linea {
  margin: 0.08rem 0 0;
  font-size: 0.91rem;
  line-height: 1.58;
  color: color-mix(in srgb, var(--texto-suave), white 7%);
}

.portada-ficha-linea strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.068rem;
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--acento-2), white 6%);
  margin-right: 0.28rem;
}

.portada-ficha-linea--suave {
  color: color-mix(in srgb, var(--texto-suave), white 2%);
}

.portada-panel--editorial {
  min-height: 0;
  align-content: start;
  margin-bottom: 1.35rem;
}

.portada-editorial {
  min-height: 0;
  align-items: start;
}

.portada-texto--editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr);
  gap: 1rem;
  align-content: start;
  padding: clamp(1.1rem, 2.4vw, 2rem) 0 clamp(0.5rem, 1.4vw, 1rem);
}

.portada-texto--editorial .portada-titular {
  max-width: 16ch;
  font-size: clamp(2.55rem, 5vw, 4.55rem);
}

.portada-texto--editorial .portada-descripcion {
  max-width: 58ch;
  font-size: clamp(1.16rem, 0.7vw + 1rem, 1.45rem);
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  margin-top: 0.2rem;
}

.boton-portada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.62rem 0.95rem;
  border-radius: 0.58rem;
  border: 0.0625rem solid color-mix(in srgb, #df6a57, transparent 56%);
  color: color-mix(in srgb, #df6a57, white 14%);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  background: rgba(8, 10, 14, 0.46);
  text-shadow: none;
  transition:
    transform var(--duracion-base) var(--curva-estandar),
    border-color var(--duracion-base) var(--curva-estandar),
    background-color var(--duracion-base) var(--curva-estandar),
    box-shadow var(--duracion-base) var(--curva-estandar);
}

.boton-portada--principal {
  border-color: color-mix(in srgb, #df6a57, transparent 38%);
  color: color-mix(in srgb, #df6a57, white 18%);
  background:
    linear-gradient(145deg, color-mix(in srgb, #df6a57, transparent 86%), transparent 72%),
    rgba(8, 10, 14, 0.58);
}

.boton-portada:hover,
.boton-portada:focus-visible {
  transform: translateY(-0.12rem);
  border-color: color-mix(in srgb, #df6a57, white 8%);
  color: color-mix(in srgb, #df6a57, white 24%);
  background-color: color-mix(in srgb, #df6a57, transparent 90%);
  box-shadow: 0 0.7rem 1.4rem color-mix(in srgb, #df6a57, transparent 86%);
}

.inicio-seccion-cabecera {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.inicio-seccion-cabecera h2,
.inicio-destacado-texto h2,
.inicio-ciclo h2 {
  margin: 0;
}

.inicio-seccion-cabecera p,
.inicio-destacado-texto p,
.inicio-ciclo p {
  margin: 0;
}

.inicio-seccion-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--acento), white 8%);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.inicio-destacado,
.inicio-puertas,
.inicio-ciclo,
.inicio-recientes,
.inicio-panorama {
  margin-bottom: 1.65rem;
}

.inicio-destacado {
  --inicio-destacado-acento: #df6a57;
  --inicio-destacado-acento-2: #f08a7a;
  scroll-margin-top: var(--salto-ancla);
  background:
    radial-gradient(24rem 16rem at 14% 0%, color-mix(in srgb, var(--inicio-destacado-acento), transparent 84%), transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 62%),
    rgba(8, 10, 14, 0.78);
  border: 0.0625rem solid color-mix(in srgb, var(--inicio-destacado-acento), transparent 66%);
  border-radius: 1rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  box-shadow: var(--sombra-superficie-secundaria);
}

.inicio-destacado-contenido>.inicio-seccion-kicker {
  margin-bottom: 0.62rem;
}

.inicio-destacado--opinion {
  --inicio-destacado-acento: #df6a57;
  --inicio-destacado-acento-2: #f08a7a;
}

.inicio-destacado--nota {
  --inicio-destacado-acento: #5b8fd6;
  --inicio-destacado-acento-2: #7aa9e2;
}

.inicio-destacado--mirada {
  --inicio-destacado-acento: #79b36a;
  --inicio-destacado-acento-2: #9bcb8d;
}

.inicio-destacado-grid {
  display: grid;
  grid-template-columns: minmax(6.8rem, 9.3rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: center;
}

.inicio-destacado-afiche {
  margin: 0;
  width: min(100%, 9.3rem);
  aspect-ratio: 2 / 3;
  border-radius: 0.62rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  background: rgba(5, 6, 9, 0.88);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.36);
}

.inicio-destacado-afiche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--curva-estandar), filter 520ms var(--curva-estandar);
}

.inicio-destacado:hover .inicio-destacado-afiche img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.inicio-destacado-afiche--texto {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.3rem;
  color: var(--texto);
}

.inicio-destacado-afiche--texto span,
.inicio-destacado-afiche--texto strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.inicio-destacado-afiche--texto span {
  font-size: 0.62rem;
  color: var(--texto-suave);
}

.inicio-destacado-afiche--texto strong {
  font-size: 1.5rem;
}

.inicio-destacado-texto {
  display: grid;
  gap: 0.62rem;
  align-content: center;
}

.inicio-destacado-superior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.inicio-destacado-superior .sala-etiqueta {
  width: auto;
  min-width: 0;
}

.inicio-destacado-fecha {
  display: inline-grid;
  justify-items: end;
  gap: 0.08rem;
  color: color-mix(in srgb, var(--inicio-destacado-acento), white 14%);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.1;
}

.inicio-destacado-fecha span {
  color: color-mix(in srgb, var(--texto-suave), white 2%);
  font-size: 0.56rem;
}

.inicio-destacado-fecha strong {
  font-size: 0.78rem;
  font-weight: 600;
}

.inicio-destacado-texto h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}

.inicio-destacado-meta,
.inicio-reciente-contexto {
  color: color-mix(in srgb, var(--texto-suave), white 4%);
  font-size: 0.92rem;
}

.inicio-destacado-meta {
  font-family: var(--font-display);
  color: color-mix(in srgb, var(--texto-suave), white 10%);
}

.inicio-destacado-extracto {
  max-width: 62ch;
  font-size: clamp(1.05rem, 0.4vw + 0.98rem, 1.24rem);
  line-height: 1.72;
}

.inicio-destacado .panel-enlace {
  color: color-mix(in srgb, var(--inicio-destacado-acento), white 16%);
}

.inicio-puertas-grid,
.inicio-recientes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.inicio-puerta,
.inicio-reciente {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  min-height: 100%;
  padding: 1rem;
  border-radius: 0.78rem;
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 72%);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--sala-accent), transparent 94%), transparent 58%),
    rgba(8, 10, 14, 0.58);
  transition:
    transform var(--duracion-base) var(--curva-estandar),
    border-color var(--duracion-base) var(--curva-estandar),
    background-color var(--duracion-base) var(--curva-estandar),
    box-shadow var(--duracion-base) var(--curva-estandar);
}

.inicio-puerta:hover,
.inicio-reciente:hover {
  transform: translateY(-0.18rem);
  border-color: color-mix(in srgb, var(--sala-accent), transparent 46%);
  background-color: color-mix(in srgb, var(--sala-accent), transparent 94%);
  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--sala-accent), transparent 88%);
}

.inicio-puerta h3,
.inicio-reciente h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.2vw, 1.55rem);
}

.inicio-puerta p,
.inicio-reciente p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
}

.inicio-puerta-rubro {
  color: color-mix(in srgb, var(--sala-accent-2), white 8%);
  font-family: var(--font-display);
  font-size: 0.66rem !important;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.inicio-puerta-pie,
.inicio-reciente-superior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.inicio-puerta .panel-enlace,
.inicio-puerta h3,
.inicio-reciente h3 a {
  color: color-mix(in srgb, var(--sala-accent-2), white 8%);
}

.inicio-ciclo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
  gap: 1rem;
  align-items: stretch;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--acento), transparent 62%);
  background:
    radial-gradient(22rem 14rem at 85% 20%, rgba(230, 173, 100, 0.16), transparent 74%),
    rgba(7, 9, 13, 0.72);
  position: relative;
  overflow: hidden;
}

.inicio-ciclo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.45rem;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, #e6ad64, transparent 32%) 0 0.55rem, transparent 0.55rem 1rem);
  opacity: 0.42;
  pointer-events: none;
}

.inicio-ciclo-texto {
  display: grid;
  gap: 0.55rem;
  align-content: center;
}

.inicio-ciclo .panel-enlace,
.inicio-ciclo .tarjeta-rubro,
.inicio-ciclo .portada-ficha-linea strong {
  color: color-mix(in srgb, #e6ad64, white 10%);
}

.inicio-ciclo-progreso {
  display: grid;
  gap: 0.7rem;
  align-content: center;
  padding: 1rem;
  border-radius: 0.72rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, #e6ad64, transparent 91%), transparent 60%),
    rgba(0, 0, 0, 0.24);
  border: 0.0625rem solid color-mix(in srgb, #e6ad64, transparent 62%);
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.04);
}

.inicio-ciclo-medidor-wrap {
  width: min(100%, 9.4rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: rgba(7, 9, 13, 0.9);
  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.34),
    0 0 1.8rem color-mix(in srgb, #e6ad64, transparent 82%);
  animation: pulso-ciclo 3.8s ease-in-out infinite;
  position: relative;
}

.inicio-ciclo-medidor-wrap::before {
  content: "";
  position: absolute;
  inset: 0.48rem;
  border-radius: 50%;
  background: rgba(7, 9, 13, 0.94);
  border: 0.0625rem solid color-mix(in srgb, #e6ad64, transparent 70%);
}

.inicio-ciclo-medidor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.inicio-ciclo-medidor-fondo,
.inicio-ciclo-medidor-avance {
  fill: none;
  stroke-width: 12;
}

.inicio-ciclo-medidor-fondo {
  stroke: rgba(255, 255, 255, 0.1);
}

.inicio-ciclo-medidor-avance {
  stroke: #e6ad64;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: trazo-ciclo 900ms var(--curva-estandar) both;
}

.inicio-ciclo-numero {
  display: flex;
  align-items: baseline;
  gap: 0.18rem;
  color: var(--texto);
  position: relative;
  z-index: 1;
}

.inicio-ciclo-numero strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.65rem);
  line-height: 1;
}

.inicio-ciclo-numero span {
  color: var(--texto-suave);
  font-size: 1.15rem;
}

.inicio-ciclo-progreso p {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.inicio-ciclo-barra {
  height: 0.48rem;
  display: block;
  width: 100%;
}

.inicio-ciclo-barra-fondo,
.inicio-ciclo-barra-avance {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.inicio-ciclo-barra-fondo {
  stroke: rgba(255, 255, 255, 0.1);
}

.inicio-ciclo-barra-avance {
  stroke: color-mix(in srgb, #e6ad64, white 12%);
  animation: trazo-ciclo 900ms var(--curva-estandar) both;
}

.inicio-ciclo-progreso dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.inicio-ciclo-progreso div {
  display: grid;
  gap: 0.1rem;
}

.inicio-ciclo-progreso dt {
  color: var(--texto-suave);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.inicio-ciclo-progreso dd {
  margin: 0;
  color: var(--texto);
  font-size: 1.18rem;
}

.inicio-reciente--opinion {
  --sala-accent: #df6a57;
  --sala-accent-2: #f08a7a;
}

.inicio-reciente--nota {
  --sala-accent: #5b8fd6;
  --sala-accent-2: #7aa9e2;
}

.inicio-reciente--mirada {
  --sala-accent: #79b36a;
  --sala-accent-2: #9bcb8d;
}

.inicio-reciente-superior time {
  color: var(--texto-suave);
  font-family: var(--font-display);
  font-size: 0.68rem;
}

.inicio-reciente-extracto {
  color: color-mix(in srgb, var(--texto-suave), white 4%);
}

.inicio-panorama {
  padding: 1rem;
  border-top: 0.0625rem solid color-mix(in srgb, var(--acento), transparent 76%);
}

.portada-matriz--panorama {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.portada-matriz--panorama .portada-matriz-item:nth-child(2) {
  border-left-color: #df6a57;
}

.portada-matriz--panorama .portada-matriz-item:nth-child(3) {
  border-left-color: #5b8fd6;
}

.portada-matriz--panorama .portada-matriz-item:nth-child(4) {
  border-left-color: #79b36a;
}

.portada-matriz--panorama .portada-matriz-item:nth-child(5),
.portada-matriz--panorama .portada-matriz-item:nth-child(6),
.portada-matriz--panorama .portada-matriz-item:nth-child(7) {
  border-left-color: #e6ad64;
}

@keyframes trazo-ciclo {
  from {
    stroke-dasharray: 0 100;
  }
}

@keyframes pulso-ciclo {
  0%,
  100% {
    box-shadow:
      0 1rem 2rem rgba(0, 0, 0, 0.34),
      0 0 1.3rem color-mix(in srgb, #e6ad64, transparent 86%);
  }
  50% {
    box-shadow:
      0 1rem 2rem rgba(0, 0, 0, 0.34),
      0 0 2.2rem color-mix(in srgb, #e6ad64, transparent 76%);
  }
}

/* Paneles */

.panel {
  background:
    linear-gradient(160deg, rgba(230, 173, 100, 0.04), transparent 55%),
    linear-gradient(330deg, rgba(92, 191, 179, 0.035), transparent 60%),
    var(--superficie-principal);
  border: 0.0625rem solid var(--borde-superficie-principal);
  border-radius: 1.2rem;
  padding: 1.7rem;
  box-shadow: var(--sombra-superficie-principal);
  backdrop-filter: blur(0.625rem);
  margin-bottom: 2rem;
}

.panel.sala {
  padding: 2rem;
}

.indice-panel {
  padding: 2.1rem;
}

.indice-lista {
  display: grid;
  gap: 1.2rem;
}

.indice-elemento {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.02), transparent 55%),
    var(--superficie-terciaria);
  border: 0.0625rem solid var(--borde-superficie-terciaria);
  border-radius: 1rem;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--sombra-superficie-terciaria);
}

.indice-elemento .sala-icon {
  width: 2.95rem;
  height: 2.95rem;
  border-radius: 0.875rem;
}

.indice-superior {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
}

.indice-superior h3 {
  margin: 0;
  font-size: var(--fs-h3);
}

.indice-insignia {
  margin: 0 0 0.3rem 0;
  text-transform: uppercase;
  letter-spacing: 0.09375rem;
  font-size: 0.72rem;
  color: var(--sala-accent-2);
  font-family: var(--font-display);
}

.indice-subtitulo {
  margin: 0.2rem 0 0 0;
  color: var(--texto-suave);
}

.indice-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.indice-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 0.78rem;
  font-family: var(--font-display);
}

.indice-enlaces a {
  color: var(--sala-accent-2);
}

.panel-subtitulo {
  font-size: 1.08rem;
  color: var(--texto-suave);
  margin: 0.2rem 0 0 0;
}

.panel-enlace {
  font-size: 0.92rem;
  color: var(--acento-2);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: var(--font-display);
}

.sala .panel-enlace {
  color: var(--sala-accent-2);
}

.panel-contenido {
  margin-top: 1.2rem;
}

.texto-largo {
  max-width: var(--ancho-lectura);
  font-size: var(--fs-cuerpo-destacado);
  line-height: 1.98;
  letter-spacing: 0.005rem;
}

/* Tarjetas */
}

@layer capa_componentes {
/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 1.25rem;
}

.tarjeta {
  display: grid;
  gap: 0.85rem;
  padding: 1.05rem;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--superficie-secundaria);
  border-radius: 0.95rem;
  border: 0.0625rem solid var(--borde-superficie-secundaria);
  box-shadow: var(--sombra-superficie-secundaria);
}

.tarjeta-destacada {
  border: 0.0625rem solid rgba(92, 191, 179, 0.5);
}

.tarjeta,
.nota-breve,
.mirada-breve,
.anio-tarjeta,
.etiqueta-tarjeta,
.ciclo-tarjeta,
.archivo-tarjeta,
.indice-elemento {
  transition:
    transform var(--duracion-base) var(--curva-estandar),
    box-shadow var(--duracion-base) var(--curva-estandar),
    border-color var(--duracion-rapida) var(--curva-estandar),
    background-color var(--duracion-rapida) var(--curva-estandar);
  backface-visibility: hidden;
}

.tarjeta:hover,
.nota-breve:hover,
.mirada-breve:hover,
.anio-tarjeta:hover,
.etiqueta-tarjeta:hover,
.ciclo-tarjeta:hover,
.indice-elemento:hover {
  transform: translate3d(0, -0.125rem, 0);
  box-shadow: var(--sombra-media);
}

.ciclo-tarjeta,
.archivo-tarjeta {
  content-visibility: auto;
  contain-intrinsic-size: 18rem;
}

.tarjeta-cabecera {
  display: grid;
  gap: 0.2rem;
}

.tarjeta-rubro {
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-size: 0.72rem;
  color: var(--acento-2);
  font-family: var(--font-display);
}

.tarjeta-metadatos {
  font-size: 0.96rem;
  opacity: 0.8;
}

.tarjeta-extracto {
  font-size: 1.04rem;
  line-height: 1.75;
}

.tarjeta-enlace {
  font-size: 0.92rem;
  color: var(--acento-2);
}

/* Listas */

.lista-finas {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  gap: 0.5rem;
}

.aviso {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-radius: 0.75rem;
  border: 0.0625rem dashed rgba(255, 255, 255, 0.25);
  background: rgba(6, 8, 12, 0.75);
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.72;
}

.aviso-cierre {
  border-color: color-mix(in srgb, var(--sala-accent-3), transparent 50%);
  color: var(--texto);
}

.filmografia-lista {
  gap: 0.8rem;
}

.filmografia-elemento {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  border-radius: 0.8rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02), transparent 60%),
    rgba(7, 9, 13, 0.58);
}

.filmografia-superior {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}

.filmografia-titulo {
  display: grid;
  gap: 0.35rem;
}

.filmografia-linea {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

.filmografia-titulo strong {
  font-size: 1.14rem;
  font-weight: 520;
}

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

.filmografia-metadatos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filmografia-nominaciones-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding-top: 0.15rem;
}

.filmografia-nominaciones-panel .nominacion-count {
  margin-left: 0;
  white-space: nowrap;
}

.filmografia-nominaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.filmografia-resultados {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}

.nominaciones-grupo {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
}

.nominaciones-grupo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.nominaciones-grupo-titulo,
.nominaciones-grupo summary {
  color: var(--texto-suave);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-family: var(--font-display);
}

.nominaciones-grupo summary {
  cursor: pointer;
  list-style-position: inside;
}

.nominaciones-grupo--compacto .nominaciones-grupo-lista {
  margin-top: 0.35rem;
  max-width: min(34rem, 100%);
}

.nominacion-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(91, 143, 214, 0.65);
  color: #5b8fd6;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  font-family: var(--font-display);
}

.nominacion-resultado-texto {
  padding-right: 0.35rem;
  border-right: 0.0625rem solid currentColor;
  opacity: 0.78;
}

.nominacion-count {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(255, 255, 255, 0.22);
  color: var(--texto);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  font-family: var(--font-display);
}

.nominaciones-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.nominacion-etiqueta.nom-mejor-pelicula,
.nominacion-etiqueta.nom-mejor-direccion,
.nominacion-etiqueta.nom-mejor-guion-adaptado,
.nominacion-etiqueta.nom-mejor-guion-original,
.nominacion-etiqueta.nom-mejor-fotografia {
  border-color: rgba(91, 143, 214, 0.6);
  color: #5b8fd6;
}

.nominacion-etiqueta.nominacion-ganada,
.nominacion-etiqueta.nominacion-ganador,
.nominacion-etiqueta.nominacion-gano,
.nominacion-etiqueta.nominacion-winner {
  border-color: rgba(230, 173, 100, 0.85);
  color: #e6ad64;
  background: rgba(230, 173, 100, 0.12);
}

.nominacion-etiqueta.nominacion-perdio,
.nominacion-etiqueta.nominacion-perdedor,
.nominacion-etiqueta.nominacion-perdida,
.nominacion-etiqueta.nominacion-loser {
  border-color: rgba(214, 106, 99, 0.48);
  color: #d66a63;
  background: rgba(214, 106, 99, 0.055);
  opacity: 0.88;
}

.ciclo-premiacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(26.25rem 16.25rem at 85% 10%, rgba(230, 173, 100, 0.15), transparent 70%),
    radial-gradient(18.75rem 12.5rem at 10% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.ciclo-premiacion .sala-cabecera::after {
  background: linear-gradient(90deg, transparent, rgba(230, 173, 100, 0.7), transparent);
}

.ciclo-premiacion .sala-icon.grande {
  background: color-mix(in srgb, var(--acento), transparent 84%);
  border-color: rgba(230, 173, 100, 0.58);
  color: color-mix(in srgb, var(--acento), white 10%);
}

.ciclo-premiacion .sala-icon.grande svg {
  opacity: 0.9;
  transform: scale(0.82);
}

.filmografia-estado {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-pildora);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: var(--font-display);
  border: 0.0625rem solid transparent;
}

.filmografia-estado.visto {
  color: #3ddc84;
  border-color: rgba(61, 220, 132, 0.6);
}

.filmografia-estado.pendiente {
  color: #ff5b5b;
  border-color: rgba(255, 91, 91, 0.6);
}

.filmografia-opinion {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  color: var(--acento-2);
  font-family: var(--font-display);
}

@media (max-width: 56.25rem) {
  .filmografia-elemento {
    grid-template-columns: 1fr;
  }
}

.lista-notas {
  display: grid;
  gap: 1.25rem;
}

.miradas-rejilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
}

.nota-breve,
.mirada-breve {
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background:
    radial-gradient(14rem 7.5rem at 12% 8%, color-mix(in srgb, var(--sala-accent), transparent 88%), transparent 74%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.03), transparent 58%),
    var(--superficie-terciaria);
  display: grid;
  gap: 0.72rem;
  box-shadow: var(--sombra-superficie-terciaria);
}

.nota-breve.con-afiche {
  gap: 0.78rem;
}

.mirada-cabecera {
  display: grid;
  gap: 0.62rem;
}

.nota-breve h3,
.mirada-breve h3 {
  margin: 0;
  font-size: clamp(1.34rem, 1.2vw + 1.08rem, 1.86rem);
  font-weight: 520;
  line-height: 1.18;
}

.nota-breve h3 a,
.mirada-breve h3 a {
  color: color-mix(in srgb, var(--texto), white 9%);
}

.nota-breve h3 a:hover,
.mirada-breve h3 a:hover {
  color: color-mix(in srgb, var(--sala-accent-2), white 16%);
  text-shadow: none;
}

.nota-extracto,
.mirada-extracto {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
  max-width: 66ch;
}

.mirada-firma {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.085rem;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
  font-family: var(--font-display);
}

.mirada-sub {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--texto-suave), white 6%);
}

.encabezado-editorial {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

.editorial-subtitulo {
  margin: 0;
  max-width: 62ch;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
  font-size: clamp(1rem, 0.34vw + 0.95rem, 1.16rem);
  line-height: 1.7;
}

.panel-editorial-minimo {
  background: var(--panel-intenso);
  border-color: color-mix(in srgb, var(--sala-accent), transparent 68%);
  box-shadow: var(--sombra-superficie-principal);
}

.cabecera-editorial-minima {
  display: grid;
  gap: 1.05rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.barra-editorial-minima {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}

.etiqueta-editorial-minima {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sala-accent-2), white 9%);
}

.accion-editorial-texto {
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--sala-accent), white 10%);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-decoration: none;
}

.accion-editorial-texto:hover {
  color: color-mix(in srgb, var(--sala-accent), white 22%);
  text-shadow: none;
}

.accion-editorial-texto--enlace {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.32rem;
}

.accion-editorial-texto--enlace::after {
  content: "↗";
  font-size: 0.8rem;
}

.encabezado-editorial-minimo {
  gap: 0.48rem;
}

.encabezado-editorial-minimo .sala-titulo {
  padding-bottom: 0;
  line-height: 1.08;
}

.fila-opinion-minima {
  width: min(100%, 58rem);
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr);
  gap: 0.9rem 1.25rem;
  align-items: start;
}

.fila-opinion-minima--sin-afiche {
  grid-template-columns: minmax(0, 1fr);
}

.opinion-linea-minima {
  min-width: 0;
}

.linea-editorial {
  margin: 0;
  width: 100%;
  display: grid;
  gap: 0.65rem;
}

.linea-editorial--opinion {
  width: 100%;
}

.linea-editorial--plana {
  gap: 0.52rem;
}

.metadatos-editoriales {
  list-style: none;
  margin: 0;
  padding: 0;
}

.metadatos-editoriales-ficha {
  margin: 0;
  padding: 0;
  border-top: none;
}

.linea-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.55rem 0.95rem;
}

.dato-editorial {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
  line-height: 1.32;
}

.dato-editorial + .dato-editorial {
  padding-left: 0;
  border-left: none;
}

.dato-etiqueta {
  font-family: var(--font-display);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: color-mix(in srgb, var(--texto-suave), white 14%);
  line-height: 1.24;
}

.dato-valor {
  font-size: 0.97rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--texto), white 6%);
  overflow-wrap: anywhere;
}

.dato-valor time {
  font-variant-numeric: tabular-nums;
}

.metadato-enlace {
  color: color-mix(in srgb, var(--sala-accent-2), white 8%);
}

.nota-relacion-minima {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
}

.nota-relacion-minima em {
  color: color-mix(in srgb, var(--texto), white 8%);
}

.firma-autor-pie {
  margin: 1.45rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 74%);
  display: flex;
  justify-content: flex-end;
}

.firma-autor-pie-linea {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--texto-suave), white 10%);
}

.firma-autor-pie-nombre {
  color: color-mix(in srgb, var(--texto), white 10%);
}

.firma-autor-pie-linea time {
  font-variant-numeric: tabular-nums;
}

.nota-relacion {
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 62ch;
}

.nota-fecha {
  font-size: 0.78rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--acento-2);
  font-family: var(--font-display);
}

.nota-relacion-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nota-relacion-col {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.nota-relacion-col h3 {
  margin: 0;
}

.nota-relacion-col .nota-fecha {
  margin: 0;
}

.nota-diorama {
  width: 5.25rem;
  height: 8rem;
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0.75rem 1.2rem rgba(0, 0, 0, 0.4));
}

.nota-diorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.22);
  transform: rotate(-2deg);
  box-shadow: 0 0.75rem 1.4rem rgba(0, 0, 0, 0.55);
}

.nota-diorama::before {
  content: "";
  position: absolute;
  bottom: -0.375rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 0.625rem;
  border-radius: var(--radio-pildora);
  background: radial-gradient(50% 100% at 50% 50%, rgba(230, 173, 100, 0.45), transparent 70%);
  filter: blur(0.125rem);
  opacity: 0.8;
}

.nota-diorama::after {
  content: "";
  position: absolute;
  inset: -0.375rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}

.nota-enlace {
  font-size: 0.94rem;
}

.nota-relacion .nota-enlace {
  margin-left: 0.3rem;
}

.nota-sep {
  display: inline-block;
  margin: 0 0.35rem;
  color: var(--texto-suave);
}

/* Archivo */

.archivo-rejilla {
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
}

.listado-editorial .sala-titulo {
  line-height: 1.06;
}

.listado-editorial .sala-subtitulo {
  max-width: 62ch;
  margin-top: 0.42rem;
}

.listado-editorial--ciclos .sala-metadatos-fila {
  gap: 0.45rem;
}

.archivo-grupo {
  margin-bottom: 2rem;
  --archivo-ciclo-color: #e6ad64;
}

.archivo-grupo--activo {
  --archivo-ciclo-color: #e6ad64;
}

.archivo-grupo--cerrado {
  --archivo-ciclo-color: #9c6bff;
}

.archivo-grupo-cabecera {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.62rem;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--archivo-ciclo-color), transparent 72%);
}

.archivo-grupo-rubro {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.105rem;
  font-size: 0.66rem;
  line-height: 1;
  color: color-mix(in srgb, var(--archivo-ciclo-color), white 16%);
  font-family: var(--font-display);
}

.archivo-grupo-rubro::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 100%;
  background: color-mix(in srgb, var(--archivo-ciclo-color), white 12%);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--archivo-ciclo-color), transparent 78%);
}

.archivo-grupo-cabecera h3 {
  margin: 0;
  font-size: clamp(2rem, 2.2vw + 1.25rem, 2.95rem);
  line-height: 1.05;
  letter-spacing: 0.01rem;
  text-wrap: balance;
}

.archivo-grupo.sin-ciclo .archivo-grupo-cabecera {
  border-bottom-color: color-mix(in srgb, var(--texto-suave), transparent 80%);
}

.archivo-grupo.sin-ciclo .archivo-grupo-rubro,
.archivo-grupo.sin-ciclo .archivo-grupo-cabecera h3 {
  color: var(--texto-suave);
}

.archivo-grupo.sin-ciclo .archivo-grupo-rubro::before {
  background: color-mix(in srgb, var(--texto-suave), white 6%);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--texto-suave), transparent 78%);
}

.archivo-aviso {
  margin: 0 0 1.4rem 0;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  border: 0.0625rem dashed rgba(255, 255, 255, 0.22);
  color: var(--texto-suave);
  font-size: 1rem;
}

.ciclo-bloque h3 {
  margin: 0 0 0.9rem 0;
  font-size: clamp(1.38rem, 1.6vw + 1.02rem, 2rem);
  line-height: 1.14;
}

.ciclos-rejilla {
  display: grid;
  gap: 1.35rem;
}

.ciclo-bloque {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.ciclos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
  gap: 1rem;
  margin-top: 0;
}

.ciclo-tarjeta {
  --ciclo-color: #e6ad64;
  background:
    radial-gradient(17rem 9rem at 10% 8%, rgba(230, 173, 100, 0.18), transparent 72%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.03), transparent 58%),
    rgba(8, 10, 14, 0.72);
  border: 0.0625rem solid rgba(230, 173, 100, 0.46);
  border-radius: 1rem;
  padding: 1.08rem 1.16rem 1.18rem;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ciclo-tarjeta-enlace {
  display: grid;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.ciclo-tarjeta-enlace:hover .ciclo-titulo {
  color: color-mix(in srgb, var(--ciclo-color), white 18%);
}

.ciclo-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%);
  opacity: 0.8;
  pointer-events: none;
}

.ciclo-tarjeta::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: calc(1rem - 0.0625rem);
  border: 0.0625rem solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.ciclo-tarjeta.estado-en-curso {
  --ciclo-color: #3ddc84;
  background:
    radial-gradient(17rem 9rem at 10% 8%, rgba(61, 220, 132, 0.2), transparent 72%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.03), transparent 58%),
    rgba(8, 10, 14, 0.72);
  border-color: rgba(61, 220, 132, 0.52);
}

.ciclo-tarjeta.estado-pospuesto {
  --ciclo-color: #ff5b5b;
  background:
    radial-gradient(17rem 9rem at 10% 8%, rgba(255, 91, 91, 0.18), transparent 72%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.03), transparent 58%),
    rgba(8, 10, 14, 0.72);
  border-color: rgba(255, 91, 91, 0.52);
}

.ciclo-tarjeta.estado-cerrado {
  --ciclo-color: #9c6bff;
  background:
    radial-gradient(17rem 9rem at 10% 8%, rgba(156, 107, 255, 0.2), transparent 72%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.03), transparent 58%),
    rgba(8, 10, 14, 0.72);
  border-color: rgba(156, 107, 255, 0.52);
}

.ciclo-tarjeta-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.ciclo-estado {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.095rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(255, 255, 255, 0.32);
  font-family: var(--font-display);
}

.ciclo-periodo {
  display: inline-block;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--texto-suave), white 9%);
  letter-spacing: 0.026rem;
}

.ciclo-titulo {
  margin: 0.18rem 0 0.1rem 0;
  font-size: clamp(1.45rem, 1.55vw + 1.08rem, 2.15rem);
  line-height: 1.14;
}

.ciclo-resumen {
  margin: 0;
  color: color-mix(in srgb, var(--texto-suave), white 9%);
  font-size: 0.96rem;
  line-height: 1.6;
}

.ciclo-metadatos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  margin-top: 0.4rem;
  align-items: center;
}

.ciclo-metadatos span {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.088rem;
  color: color-mix(in srgb, var(--texto), white 6%);
  font-family: var(--font-display);
}

.ciclo-accion {
  color: color-mix(in srgb, var(--ciclo-color), white 20%) !important;
}

.ciclo-color {
  --sala-accent: var(--ciclo-color);
  --sala-accent-2: color-mix(in srgb, var(--ciclo-color), white 30%);
  --sala-accent-3: color-mix(in srgb, var(--ciclo-color), black 20%);
}

.ciclo-color-0 {
  --ciclo-color: #e6ad64;
}

.ciclo-color-1 {
  --ciclo-color: #5cbfb3;
}

.ciclo-color-2 {
  --ciclo-color: #df6a57;
}

.ciclo-color-3 {
  --ciclo-color: #b8c77c;
}

.ciclo-color-4 {
  --ciclo-color: #8fb3f0;
}

.ciclo-color-5 {
  --ciclo-color: #d6957a;
}

.ciclo-color-cerrado {
  --ciclo-color: #9c6bff;
}

.archivo-tarjeta {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.02), transparent 60%),
    var(--superficie-secundaria);
  border: 0.0625rem solid var(--borde-superficie-secundaria);
  border-radius: 1.08rem;
  overflow: hidden;
  overflow: clip;
  display: grid;
  grid-template-columns: clamp(8.6rem, 17vw, 10.25rem) minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  min-height: clamp(12.75rem, 17vw, 15rem);
  box-shadow: var(--sombra-superficie-secundaria);
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}

.archivo-tarjeta:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--sombra-superficie-principal);
}

.archivo-tarjeta.ciclo {
  --archivo-card-color: #e6ad64;
  background:
    linear-gradient(147deg, rgba(230, 173, 100, 0.14), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.02), transparent 60%),
    var(--superficie-secundaria);
  border-color: rgba(230, 173, 100, 0.62);
  box-shadow:
    inset 0 0 0 0.0625rem rgba(230, 173, 100, 0.2),
    0 1.2rem 2.6rem rgba(230, 173, 100, 0.22);
}

.archivo-tarjeta.ciclo.ciclo-cerrado {
  --archivo-card-color: #9c6bff;
  background:
    linear-gradient(147deg, rgba(156, 107, 255, 0.14), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.02), transparent 60%),
    var(--superficie-secundaria);
  border-color: rgba(156, 107, 255, 0.62);
  box-shadow:
    inset 0 0 0 0.0625rem rgba(156, 107, 255, 0.22),
    0 1.2rem 2.6rem rgba(156, 107, 255, 0.2);
}

.archivo-tarjeta.ciclo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, rgba(230, 173, 100, 0.92), rgba(230, 173, 100, 0.35) 62%, transparent);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.archivo-tarjeta.ciclo::after {
  content: none;
}

.archivo-tarjeta.ciclo.ciclo-cerrado::before {
  background: linear-gradient(90deg, rgba(156, 107, 255, 0.94), rgba(156, 107, 255, 0.38) 62%, transparent);
}

.archivo-tarjeta.ciclo.ciclo-cerrado::after {
  content: none;
}

@supports (color: color-mix(in srgb, black, white)) {
  .archivo-tarjeta.ciclo {
    border-color: color-mix(in srgb, var(--archivo-card-color), white 8%);
    box-shadow:
      inset 0 0 0 0.0625rem color-mix(in srgb, var(--archivo-card-color), transparent 70%),
      0 1.2rem 2.6rem color-mix(in srgb, var(--archivo-card-color), transparent 72%);
  }

  .archivo-tarjeta.ciclo::before {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--archivo-card-color), white 18%),
      color-mix(in srgb, var(--archivo-card-color), transparent 28%) 62%,
      transparent
    );
  }
}

.archivo-afiche {
  background: rgba(5, 6, 9, 0.8);
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  align-self: stretch;
  overflow: hidden;
  position: relative;
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.archivo-afiche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center 14%;
  transform: translateZ(0);
}

.archivo-tarjeta.ciclo .archivo-afiche {
  border-right-color: rgba(230, 173, 100, 0.34);
}

.archivo-tarjeta.ciclo.ciclo-cerrado .archivo-afiche {
  border-right-color: rgba(156, 107, 255, 0.34);
}

.afiche-vacio {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--texto-suave);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-family: var(--font-display);
}

.archivo-info {
  padding: 1.1rem 1.2rem 1.24rem 1.2rem;
  display: grid;
  gap: 0.62rem;
  min-width: 0;
  align-content: start;
}

.archivo-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.archivo-fecha {
  font-size: 0.76rem;
  letter-spacing: 0.078rem;
  text-transform: uppercase;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--acento-2);
  font-family: var(--font-display);
}

.archivo-calificacion {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(230, 173, 100, 0.48);
  color: var(--acento);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.056rem;
  font-family: var(--font-display);
}

.archivo-titulo {
  margin: 0;
  font-size: clamp(1.4rem, 1.1vw + 1.05rem, 1.95rem);
  line-height: 1.16;
}

.archivo-titulo a {
  color: color-mix(in srgb, var(--texto), white 10%);
}

.archivo-titulo a:hover {
  color: color-mix(in srgb, var(--acento), white 12%);
  text-shadow: none;
}

.archivo-metadatos {
  margin: 0;
  font-size: 0.84rem;
  letter-spacing: 0.045rem;
  line-height: 1.35;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
  font-family: var(--font-display);
}

.archivo-resumen {
  margin: 0;
  font-size: 1rem;
  line-height: 1.64;
  color: color-mix(in srgb, var(--texto-suave), white 6%);
}

.archivo-ficha,
.archivo-contexto {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.56;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
}

.archivo-contexto {
  font-family: var(--font-display);
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.082rem;
  color: color-mix(in srgb, var(--sala-accent-2), white 10%);
}

.archivo-enlace {
  color: var(--acento-2);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.088rem;
  font-family: var(--font-display);
  margin-top: 0.36rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.archivo-enlace::after {
  content: "↗";
  font-size: 0.82rem;
}

.tarjeta-enlazable {
  cursor: pointer;
}

.tarjeta-enlazable:focus-visible {
  outline: var(--tamano-anillo-foco) solid var(--anillo-foco);
  outline-offset: var(--desfase-anillo-foco);
}

:where(
    .panel-enlace,
    .archivo-enlace,
    .tarjeta-enlace,
    .filmografia-opinion,
    .indice-enlaces a,
    .mapa-elemento,
    .explorador-indice a
  ) {
  transition:
    color var(--duracion-rapida) var(--curva-estandar),
    border-color var(--duracion-rapida) var(--curva-estandar),
    background-color var(--duracion-rapida) var(--curva-estandar),
    box-shadow var(--duracion-rapida) var(--curva-estandar);
}

:where(
    .panel-enlace,
    .archivo-enlace,
    .tarjeta-enlace,
    .filmografia-opinion,
    .indice-enlaces a,
    .mapa-elemento,
    .explorador-indice a
  ):focus-visible {
  outline: var(--tamano-anillo-foco) solid var(--anillo-foco);
  outline-offset: var(--desfase-anillo-foco);
}

/* Detalle opinion */

.opinion-encuadre {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: min(100%, 13rem);
}

.opinion-afiche {
  border-radius: 0.62rem;
  box-shadow: 0 1rem 2.2rem var(--sombra);
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  justify-self: start;
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  margin: 0;
}

/* Mapa */

.mapa-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: 1rem;
}

.mapa-elemento {
  padding: 1rem;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--superficie-terciaria);
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 74%);
  border-radius: 0.875rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 0.88rem;
  font-family: var(--font-display);
  box-shadow: var(--sombra-superficie-terciaria);
}

.explorador-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.9rem;
  margin: 0 0 1.1rem 0;
}

.explorador-busqueda {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 21.25rem);
}

.explorador-busqueda span {
  font-size: 0.74rem;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-family: var(--font-display);
}

.explorador-busqueda input {
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  padding: 0.62rem 0.78rem;
  background: rgba(6, 8, 12, 0.7);
  color: var(--texto);
  font-size: 0.98rem;
}

.explorador-busqueda input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--acento), white 20%);
  box-shadow: 0 0 0 0.1875rem rgba(230, 173, 100, 0.12);
}

.explorador-resumen {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-family: var(--font-display);
}

.explorador-vacio {
  margin: 0.95rem 0 0 0;
  padding: 0.72rem 0.86rem;
  border-radius: 0.75rem;
  border: 0.0625rem dashed rgba(255, 255, 255, 0.24);
  color: var(--texto-suave);
  font-size: 0.92rem;
}

.explorador-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.3rem 0;
}

.explorador-indice a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radio-pildora);
  border: 0.0625rem solid rgba(255, 255, 255, 0.17);
  background: rgba(8, 10, 14, 0.66);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09375rem;
  font-family: var(--font-display);
}

.explorador-indice a small {
  padding: 0.18rem 0.42rem;
  border-radius: var(--radio-pildora);
  background: rgba(230, 173, 100, 0.22);
  color: var(--texto);
  font-size: 0.66rem;
  letter-spacing: 0.0625rem;
}

.explorador-indice a.coincidencia {
  border-color: color-mix(in srgb, var(--acento), transparent 34%);
  background: color-mix(in srgb, var(--acento), transparent 90%);
}

.anios-mosaico,
.etiquetas-mosaico {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
}

.anio-tarjeta,
.etiqueta-tarjeta {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.02), transparent 58%),
    var(--superficie-terciaria);
  border: 0.0625rem solid var(--borde-superficie-terciaria);
  border-radius: 0.875rem;
  padding: 1.05rem;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  box-shadow: var(--sombra-superficie-terciaria);
}

.anio-tarjeta,
.etiqueta-tarjeta,
.nota-breve,
.mirada-breve {
  content-visibility: auto;
  contain-intrinsic-size: 20rem;
}

.anio-tarjeta-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

.etiqueta-tarjeta-cabecera {
  display: grid;
  gap: 0.45rem;
  align-items: start;
}

.etiqueta-tarjeta-cabecera .sala-etiqueta {
  justify-self: start;
}

.anio-tarjeta-cabecera h3,
.etiqueta-tarjeta-cabecera h3 {
  margin: 0;
  font-size: var(--fs-h3);
}

.anios-lista li,
.etiquetas-lista li {
  display: grid;
  gap: 0.2rem;
}

.anio-tarjeta.coincidencia,
.etiqueta-tarjeta.coincidencia {
  border-color: color-mix(in srgb, var(--acento), transparent 35%);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

.anios-elemento.coincidencia a,
.etiquetas-elemento.coincidencia a {
  color: color-mix(in srgb, var(--acento-2), white 12%);
}

.metadato-suave {
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.6;
}

.anios-elemento[hidden],
.etiquetas-elemento[hidden],
[data-anio-tarjeta][hidden],
[data-etiqueta-tarjeta][hidden],
.anios-indice a[hidden],
.etiquetas-indice a[hidden] {
  display: none !important;
}

.etiqueta-bloque,
.anio-bloque {
  scroll-margin-top: 7.5rem;
}

.mapa-acerca {
  margin-top: 1.4rem;
  font-size: var(--fs-cuerpo-destacado);
  line-height: 1.95;
}

.sala--1 {
  --sala-accent: #e6ad64;
  --sala-accent-2: #f0c27a;
  --sala-accent-3: #c78a3f;
  --sala-brillo: rgba(230, 173, 100, 0.26);
}

.sala--2 {
  --sala-accent: #df6a57;
  --sala-accent-2: #f08a7a;
  --sala-accent-3: #b94c3c;
  --sala-brillo: rgba(223, 106, 87, 0.24);
}

.sala--3 {
  --sala-accent: #5b8fd6;
  --sala-accent-2: #7aa9e2;
  --sala-accent-3: #3f6fae;
  --sala-brillo: rgba(91, 143, 214, 0.24);
}

.sala--4 {
  --sala-accent: #79b36a;
  --sala-accent-2: #9bcb8d;
  --sala-accent-3: #5a8d4e;
  --sala-brillo: rgba(121, 179, 106, 0.24);
}

.sala--5 {
  --sala-accent: #b07a55;
  --sala-accent-2: #c09474;
  --sala-accent-3: #8b5c3f;
  --sala-brillo: rgba(176, 122, 85, 0.24);
}

/* Paginas de error */

.contenido-error {
  display: grid;
  gap: 1.35rem;
}

.error-sala {
  position: relative;
  margin-bottom: 0;
}

.error-sala .sala-cabecera {
  margin-bottom: 0;
}

.error-sala .sala-icon.grande {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.12rem;
  font-weight: 520;
  background:
    radial-gradient(130% 105% at 16% 12%, color-mix(in srgb, var(--sala-accent), white 14%), transparent 62%),
    color-mix(in srgb, var(--sala-accent), transparent 84%);
  border-color: color-mix(in srgb, var(--sala-accent), transparent 40%);
  box-shadow:
    0 0.95rem 1.85rem color-mix(in srgb, var(--sala-accent), transparent 84%),
    inset 0 0 0 0.0625rem color-mix(in srgb, var(--sala-accent-2), transparent 68%);
}

.error-codigo {
  display: inline-block;
  min-width: 2.9ch;
  text-align: center;
  color: color-mix(in srgb, var(--sala-accent), white 10%);
  text-shadow: 0 0 0.75rem color-mix(in srgb, var(--sala-accent), transparent 60%);
}

.error-titulo {
  margin: 0;
  font-size: clamp(2.15rem, 3vw, 2.7rem);
  line-height: 1.1;
}

.error-cuerpo {
  display: grid;
  gap: 0.95rem;
}

.error-cuerpo p {
  margin: 0;
  max-width: 68ch;
}

.error-pasos {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
}

.error-pasos li {
  color: color-mix(in srgb, var(--texto-suave), white 6%);
  line-height: 1.62;
}

.error-contexto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.error-contexto-item {
  margin: 0;
  padding: 0.62rem 0.8rem;
  border-radius: 0.72rem;
  border: 0.0625rem solid color-mix(in srgb, var(--sala-accent), transparent 72%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--sala-accent), transparent 93%), transparent 60%),
    rgba(7, 9, 13, 0.52);
  display: grid;
  gap: 0.26rem;
  min-width: 0;
}

.error-contexto-item span {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--texto-suave), white 8%);
}

.error-contexto-item code,
.error-contexto-item strong {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.42;
  color: color-mix(in srgb, var(--texto), white 8%);
}

.error-contexto-item code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.error-acciones {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.error-acciones .boton {
  letter-spacing: 0.09rem;
}

.error-destinos {
  margin-bottom: 0;
}

.error-destinos > h2 {
  margin: 0 0 1.08rem 0;
}

.error-destinos .tarjetas {
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1rem;
}

.error-destinos .tarjeta {
  background:
    linear-gradient(152deg, color-mix(in srgb, var(--sala-accent), transparent 92%), transparent 56%),
    var(--superficie-secundaria);
  border-color: color-mix(in srgb, var(--sala-accent), transparent 74%);
}

.error-destinos .tarjeta:hover {
  border-color: color-mix(in srgb, var(--sala-accent-2), transparent 62%);
}

.error-destinos .tarjeta-rubro {
  color: color-mix(in srgb, var(--acento-2), white 8%);
}

.error-destinos .tarjeta-extracto {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.66;
}

.error-destinos .tarjeta-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.082rem;
  font-size: 0.76rem;
  font-family: var(--font-display);
}

.error-destinos .tarjeta-enlace::after {
  content: "↗";
  font-size: 0.82rem;
}

/* Modo proyector */

body.modo-proyector {
  background: #050608;
}

body.modo-proyector .encabezado-sitio,
body.modo-proyector .pie-sitio,
body.modo-proyector .navegacion-sitio {
  opacity: 0.2;
}

body.modo-proyector .panel-editorial-minimo {
  max-width: 52rem;
  margin: 0 auto 3rem auto;
  border-color: rgba(255, 255, 255, 0.12);
}

body.modo-proyector .panel-editorial-minimo .texto-largo {
  font-size: 1.15rem;
}
}

@layer capa_responsivo {
/* Copyright (c) Miguel Bracamontes. Todos los derechos reservados. */
/* Responsive */

@media (max-width: 68.75rem) {
  .portada {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 56.25rem) {
  :root {
    --salto-ancla: 10.5rem;
  }

  .encabezado-sitio {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    margin-top: 0.55rem;
    top: 0.35rem;
    min-height: auto;
    padding: 0.82rem;
    gap: 0.9rem;
  }

  .marca {
    grid-column: 1;
  }

  .navegacion-sitio {
    grid-column: 1;
    justify-self: center;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    justify-content: stretch;
  }

  .navegacion-sitio a {
    padding: 0.5rem 0.38rem;
    justify-content: center;
  }

  .sala-titulo-fila {
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
  }

  .portada-cabecera {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0.45rem;
    padding-bottom: 0.6rem;
  }

  .portada-cinta-intro {
    justify-self: start;
    text-align: left;
  }

  .portada-texto {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .portada-columna-principal {
    padding-right: 0;
    padding-bottom: 0.75rem;
    border-right: 0;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
  }

  .portada-columna-datos {
    padding: 0.75rem 0.82rem;
  }

  .portada-columna-datos .portada-matriz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portada-panel--editorial {
    min-height: auto;
  }

  .portada-editorial {
    min-height: 0;
  }

  .inicio-puertas-grid,
  .inicio-recientes-grid {
    grid-template-columns: 1fr;
  }

  .inicio-ciclo {
    grid-template-columns: 1fr;
  }

  .portada-matriz--panorama {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabecera-editorial-minima {
    gap: 0.92rem;
  }

  .fila-opinion-minima {
    grid-template-columns: minmax(8.6rem, 11.4rem) minmax(0, 1fr);
    gap: 0.75rem 0.95rem;
  }

  .sala-acciones {
    justify-content: flex-start;
  }

  .indice-superior {
    grid-template-columns: auto 1fr;
  }

  .opinion-encuadre {
    justify-content: flex-start;
  }

  .linea-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ciclos-lista {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .error-acciones {
    gap: 0.55rem;
  }

  .error-contexto {
    gap: 0.6rem;
  }
}

@media (max-width: 43.75rem) {

  :root {
    --gutter-contenedor: 0.625rem;
    --salto-ancla: 1.25rem;
  }

  body {
    background:
      radial-gradient(46rem 32rem at 14% -8%, rgba(230, 173, 100, 0.17), transparent 62%),
      radial-gradient(56rem 36rem at 88% 8%, rgba(92, 191, 179, 0.1), transparent 64%),
      linear-gradient(180deg, var(--fondo), var(--fondo-profundo));
  }

  body::before {
    display: none;
  }

  .panel,
  .panel.sala,
  .sala {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .panel,
  .sala,
  .archivo-tarjeta,
  .ciclo-tarjeta,
  .indice-elemento {
    box-shadow: var(--sombra-superficie-terciaria);
  }

  .sala {
    --desfase-marco-interno: 0.33rem;
    --radio-marco-interno: 0.72rem;
  }

  .encabezado-sitio,
  .contenido,
  .pie-sitio {
    padding-left: var(--gutter-contenedor);
    padding-right: var(--gutter-contenedor);
  }

  .encabezado-sitio {
    position: static;
    top: auto;
    margin-top: 0.4rem;
    border-radius: 0.86rem;
    padding: 0.78rem;
  }

  .contenido {
    padding-top: 0.72rem;
    padding-bottom: 2.1rem;
  }

  .pie-sitio {
    padding-top: 1.3rem;
    padding-bottom: 2.15rem;
  }

  .pie-sitio p {
    gap: 0.48rem;
  }

  .pie-linea {
    gap: 0.42rem;
    font-size: 0.66rem;
    letter-spacing: 0.074rem;
  }

  .pie-separador {
    width: 0.22rem;
    height: 0.22rem;
  }

  .pie-copy-corto {
    font-size: 0.62rem;
    letter-spacing: 0.066rem;
  }

  .titulo-sitio {
    letter-spacing: 0.16rem;
    font-size: 1.12rem;
  }

  .navegacion-sitio {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.24rem;
    font-size: 0.82rem;
    letter-spacing: 0.084rem;
    padding: 0;
  }

  .navegacion-sitio a {
    justify-content: center;
    padding: 0.46rem 0.14rem 0.42rem;
  }

  .portada-panel {
    padding: 0.95rem;
    border-radius: 0.9rem;
    margin-bottom: 1.2rem;
  }

  .panel,
  .panel.sala,
  .indice-panel {
    padding: 1rem;
    border-radius: 0.9rem;
    margin-bottom: 1.2rem;
  }

  .portada-marquee {
    letter-spacing: 0.0875rem;
    gap: 0.6rem;
    font-size: 0.72rem;
  }

  .portada {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .portada-editorial {
    min-height: 0;
  }

  .portada-texto--editorial {
    padding: 0.75rem 0 0.25rem;
  }

  .portada-texto--editorial .portada-titular {
    font-size: clamp(2.1rem, 11vw, 3rem);
    max-width: 12ch;
  }

  .portada-acciones {
    display: grid;
    grid-template-columns: 1fr;
  }

  .boton-portada {
    width: 100%;
  }

  .inicio-destacado {
    padding: 1rem;
    border-radius: 0.92rem;
  }

  .inicio-destacado-contenido>.inicio-seccion-kicker {
    text-align: center;
    margin-bottom: 0.82rem;
  }

  .inicio-destacado-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    justify-items: center;
  }

  .inicio-destacado-afiche {
    width: min(58vw, 11rem);
    border-radius: 0.78rem;
    box-shadow:
      0 1rem 1.8rem rgba(0, 0, 0, 0.38),
      0 0 1.6rem color-mix(in srgb, var(--inicio-destacado-acento), transparent 82%);
  }

  .inicio-destacado-texto {
    width: 100%;
    justify-items: center;
    text-align: center;
    gap: 0.58rem;
  }

  .inicio-destacado-superior {
    justify-content: center;
    gap: 0.52rem;
  }

  .inicio-destacado-fecha {
    justify-items: center;
  }

  .inicio-destacado-texto h2 {
    font-size: clamp(1.85rem, 9vw, 2.35rem);
  }

  .inicio-destacado-meta {
    font-size: 0.96rem;
  }

  .inicio-destacado-extracto {
    width: 100%;
    max-width: 27ch;
    font-size: 1.05rem;
    line-height: 1.68;
    text-align: left;
  }

  .inicio-destacado .panel-enlace {
    justify-self: center;
  }

  .inicio-puerta,
  .inicio-reciente {
    padding: 0.9rem;
    border-radius: 0.72rem;
  }

  .inicio-ciclo {
    padding: 0.92rem;
    border-radius: 0.86rem;
  }

  .portada-matriz--panorama {
    grid-template-columns: 1fr;
  }

  .portada-cabecera {
    padding-bottom: 0.54rem;
  }

  .portada-texto {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .portada-columna-principal {
    padding-bottom: 0.6rem;
  }

  .portada-matriz {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .portada-columna-datos {
    padding: 0.68rem 0.75rem;
  }

  .archivo-tarjeta {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .archivo-afiche {
    width: min(100%, 14.5rem);
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 2 / 3;
    justify-self: center;
    margin: 0.82rem auto 0.12rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
    border-radius: 0.72rem;
    box-shadow: 0 0.72rem 1.4rem rgba(0, 0, 0, 0.28);
  }

  .archivo-afiche img {
    object-fit: contain;
    object-position: center;
    background: rgba(5, 6, 9, 0.92);
  }

  .sala-titulo-fila {
    grid-template-columns: 1fr;
  }

  .error-sala .sala-titulo-fila {
    grid-template-columns: 1fr;
  }

  .error-sala .sala-icon.grande {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 0.84rem;
    letter-spacing: 0.07rem;
  }

  .error-titulo {
    font-size: clamp(1.72rem, 7.1vw, 2.1rem);
    line-height: 1.1;
  }

  .error-pasos {
    padding-left: 1rem;
    gap: 0.45rem;
  }

  .error-contexto {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .error-contexto-item {
    padding: 0.58rem 0.7rem;
  }

  .error-contexto-item code,
  .error-contexto-item strong {
    font-size: 0.84rem;
  }

  .error-acciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .error-acciones .boton {
    width: 100%;
  }

  .error-destinos .tarjetas {
    grid-template-columns: 1fr;
  }

  .barra-editorial-minima {
    align-items: flex-start;
  }

  .sala-icon.grande {
    width: 2.45rem;
    height: 2.45rem;
  }

  .sala-acciones {
    width: 100%;
  }

  .sala-acciones .boton {
    width: 100%;
  }

  .indice-lista {
    gap: 0.9rem;
  }

  .indice-elemento {
    padding: 0.9rem;
    border-radius: 0.85rem;
  }

  .indice-superior {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .indice-superior .panel-enlace {
    margin-top: 0.45rem;
    width: 100%;
    text-align: left;
  }

  .indice-enlaces {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .indice-enlaces a {
    display: block;
    padding: 0.4rem 0.2rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
  }

  .archivo-rejilla {
    gap: 0.9rem;
  }

  .archivo-tarjeta {
    border-radius: 0.85rem;
  }

  .archivo-info {
    padding: 0.94rem;
  }

  .archivo-grupo-cabecera {
    gap: 0.3rem;
    margin-bottom: 0.82rem;
    padding-bottom: 0.46rem;
  }

  .archivo-grupo-rubro {
    font-size: 0.6rem;
    letter-spacing: 0.088rem;
    gap: 0.34rem;
  }

  .archivo-grupo-rubro::before {
    width: 0.38rem;
    height: 0.38rem;
  }

  .archivo-grupo-cabecera h3 {
    font-size: clamp(1.9rem, 7.3vw, 2.28rem);
    line-height: 1.04;
  }

  .archivo-fecha {
    font-size: 0.7rem;
    letter-spacing: 0.064rem;
  }

  .archivo-metadatos {
    font-size: 0.78rem;
    letter-spacing: 0.034rem;
  }

  .archivo-resumen {
    font-size: 0.93rem;
    line-height: 1.58;
  }

  .archivo-ficha {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .archivo-contexto {
    font-size: 0.74rem;
    letter-spacing: 0.071rem;
  }

  .archivo-enlace {
    font-size: 0.79rem;
    letter-spacing: 0.082rem;
  }

  .opinion-encuadre {
    justify-content: center;
    max-width: min(100%, 14.5rem);
    margin: 0 auto;
  }

  .fila-opinion-minima {
    grid-template-columns: 1fr;
    gap: 0.72rem;
  }

  .opinion-afiche {
    max-width: min(100%, 14.25rem);
    margin: 0 auto;
  }

  .texto-largo,
  .panel-contenido p {
    max-width: none;
    font-size: 1.2rem;
    line-height: 1.9;
  }

  .lista-notas {
    gap: 1rem;
  }

  .nota-breve {
    padding: 0.9rem;
  }

  .mirada-cabecera {
    gap: 0.56rem;
  }

  .nota-extracto,
  .mirada-extracto {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .mirada-sub {
    font-size: 0.94rem;
    line-height: 1.56;
  }

  .mirada-firma {
    font-size: 0.68rem;
    letter-spacing: 0.07rem;
  }

  .editorial-subtitulo {
    font-size: 0.94rem;
    line-height: 1.58;
  }

  .linea-editorial {
    gap: 0.5rem;
  }

  .linea-meta {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .dato-editorial {
    gap: 0.1rem;
  }

  .dato-etiqueta {
    font-size: 0.64rem;
    letter-spacing: 0.058rem;
  }

  .dato-valor {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .nota-relacion-minima {
    font-size: 0.92rem;
    line-height: 1.56;
  }

  .firma-autor-pie {
    margin-top: 1.25rem;
    padding-top: 0.72rem;
    justify-content: flex-start;
  }

  .firma-autor-pie-linea {
    font-size: 0.66rem;
    letter-spacing: 0.06875rem;
  }

  .miradas-rejilla {
    grid-template-columns: 1fr;
  }

  .ciclos-lista {
    grid-template-columns: 1fr;
  }

  .ciclo-tarjeta {
    padding: 0.9rem;
  }

  .ciclo-periodo {
    font-size: 0.74rem;
  }

  .archivo-ficha,
  .archivo-contexto {
    font-size: 0.82rem;
  }

  .mapa-rejilla {
    grid-template-columns: 1fr;
  }

  .anios-mosaico,
  .etiquetas-mosaico {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .explorador-barra {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .explorador-busqueda {
    min-width: 0;
  }

  .explorador-indice {
    display: grid;
    grid-template-columns: 1fr;
  }

  .explorador-indice a {
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.72rem;
  }

  .ciclo-premiacion .filmografia-superior {
    grid-template-columns: 1fr;
  }

  .ciclo-premiacion .filmografia-metadatos {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  .ciclo-premiacion .filmografia-nominaciones-panel {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    justify-items: start;
  }

  .ciclo-premiacion .filmografia-nominaciones {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .ciclo-premiacion .filmografia-resultados,
  .ciclo-premiacion .nominaciones-grupo {
    justify-items: start;
  }

  .ciclo-premiacion .nominaciones-grupo-lista {
    justify-content: flex-start;
  }
}

@media (hover: none), (pointer: coarse) {
  .encabezado-sitio,
  .panel,
  .panel.sala,
  .sala {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tarjeta:hover,
  .nota-breve:hover,
  .mirada-breve:hover,
  .anio-tarjeta:hover,
  .etiqueta-tarjeta:hover,
  .ciclo-tarjeta:hover,
  .indice-elemento:hover,
  .archivo-tarjeta:hover {
    transform: none;
  }
}

@media (max-width: 32.5rem) {

  :root {
    --gutter-contenedor: 0.5rem;
  }

  .sala {
    --desfase-marco-interno: 0.25rem;
    --radio-marco-interno: 0.66rem;
  }

  .encabezado-sitio,
  .contenido,
  .pie-sitio {
    padding-left: var(--gutter-contenedor);
    padding-right: var(--gutter-contenedor);
  }

  .pie-linea {
    display: grid;
    justify-items: center;
    gap: 0.26rem;
    font-size: 0.63rem;
    letter-spacing: 0.066rem;
  }

  .pie-separador {
    display: none;
  }

  .pie-copy-corto {
    font-size: 0.6rem;
    letter-spacing: 0.06rem;
  }

  .portada-panel,
  .panel,
  .panel.sala,
  .indice-panel {
    padding: 0.9rem;
    border-radius: 0.8rem;
  }

  .texto-largo,
  .panel-contenido p {
    font-size: 1.16rem;
    line-height: 1.85;
  }

  .linea-editorial {
    gap: 0.45rem;
  }

  .dato-etiqueta {
    font-size: 0.62rem;
    letter-spacing: 0.056rem;
  }

  .dato-valor {
    font-size: 0.88rem;
    line-height: 1.43;
  }

  .firma-autor-pie {
    margin-top: 1.05rem;
    padding-top: 0.62rem;
  }

  .firma-autor-pie-linea {
    font-size: 0.62rem;
    letter-spacing: 0.0625rem;
    gap: 0.3rem;
  }

  .etiqueta-editorial-minima,
  .accion-editorial-texto {
    font-size: 0.66rem;
    letter-spacing: 0.084rem;
  }

  .mirada-firma {
    font-size: 0.66rem;
    letter-spacing: 0.064rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}