/* ==========================================================================
   Verano Málaga 2026
   Hoja de estilos única, sin dependencias.

   El contenido son láminas de información ya maquetadas (imágenes y PDF), no
   fotografías, así que nada se recorta: cada lámina se muestra completa y en su
   proporción real.

   Para reajustar el aspecto basta con tocar las variables de :root.
   ========================================================================== */

:root {
  /* Paleta base */
  --sea-900: #071c25;
  --sea-800: #0f3b4c;
  --sea-600: #2f88a3;
  --sea-400: #4fa8bd;

  --sand-100: #fbf6ee;
  --sand-200: #f4ece0;
  --sand-300: #e8d5b7;

  --clay-500: #c96f4f;
  --clay-600: #b0573a;

  /* Un color por sección, en el orden en que se publican. */
  --section-1: #0f3b4c;
  --section-2: #2f88a3;
  --section-3: #4b7f52;
  --section-4: #c96f4f;
  --section-5: #6b5b8f;
  --section-6: #b8892b;
  --section-7: #4a6572;

  --bg: var(--sand-100);
  --bg-elevated: #ffffff;
  --text: #10232b;
  --text-muted: #5b6f78;
  --border: rgb(15 59 76 / 12%);
  --accent: var(--sea-600);
  --accent-contrast: #ffffff;

  /* Serif del sistema en los títulos para dar carácter editorial, sans en el
     cuerpo. Sin fuentes web: nada que descargar. */
  --font-display: ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(7 28 37 / 8%), 0 2px 8px rgb(7 28 37 / 6%);
  --shadow-md: 0 4px 12px rgb(7 28 37 / 10%), 0 12px 32px rgb(7 28 37 / 10%);
  --shadow-lg: 0 8px 24px rgb(7 28 37 / 16%), 0 24px 64px rgb(7 28 37 / 18%);

  --transition-fast: 160ms;
  --transition-base: 280ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --content-max: 72rem;
  /* Con celdas de 16rem, este ancho da tres columnas en escritorio. */
  --sheet-max: 56rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--sea-900);
    --bg-elevated: #0d2b36;
    --text: var(--sand-200);
    --text-muted: #93aab4;
    --border: rgb(165 213 224 / 16%);
    --accent: var(--sea-400);
    --accent-contrast: var(--sea-900);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 24%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 36%), 0 12px 32px rgb(0 0 0 / 30%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 44%), 0 24px 64px rgb(0 0 0 / 40%);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--transition-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.noscript {
  padding: var(--space-5);
  text-align: center;
}

/* ==========================================================================
   Fondo decorativo
   Degradados, sin ninguna imagen: la pantalla de acceso es pública y no debe
   mostrar contenido real.
   ========================================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 42rem at 12% 18%, rgb(79 168 189 / 24%), transparent 62%),
    radial-gradient(38rem 38rem at 88% 8%, rgb(232 213 183 / 38%), transparent 60%),
    radial-gradient(46rem 46rem at 76% 92%, rgb(201 111 79 / 18%), transparent 64%);
  animation: drift 42s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
  .backdrop {
    opacity: 0.5;
  }
}

@keyframes drift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-2%, -1.5%, 0);
  }
}

/* ==========================================================================
   Botones
   ========================================================================== */

.button {
  --button-bg: transparent;
  --button-fg: var(--text);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--transition-fast) var(--ease),
    box-shadow var(--transition-fast) var(--ease),
    background-color var(--transition-fast) var(--ease);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.99);
}

.button--primary {
  --button-bg: var(--accent);
  --button-fg: var(--accent-contrast);
  box-shadow: var(--shadow-md);
}

.button--ghost {
  --button-bg: rgb(255 255 255 / 72%);
  border-color: var(--border);
  backdrop-filter: blur(12px);
  font-size: var(--step--1);
  padding: var(--space-2) var(--space-4);
  min-height: 2.25rem;
}

@media (prefers-color-scheme: dark) {
  .button--ghost {
    --button-bg: rgb(13 43 54 / 72%);
  }
}

.button[data-loading] {
  pointer-events: none;
  opacity: 0.75;
}

.button[data-loading] .button__label {
  visibility: hidden;
}

.spinner {
  display: none;
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.button[data-loading] .spinner {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* ==========================================================================
   Vistas
   ========================================================================== */

.view {
  max-width: var(--content-max);
  margin-inline: auto;
  padding:
    max(var(--space-5), env(safe-area-inset-top))
    max(var(--space-5), env(safe-area-inset-right))
    max(var(--space-7), env(safe-area-inset-bottom))
    max(var(--space-5), env(safe-area-inset-left));
}

/* --------------------------------------------------------------------------
   Vista 1: acceso
   -------------------------------------------------------------------------- */

.view--access {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.access {
  width: min(28rem, 100%);
  text-align: center;
}

/* Logo de la pantalla de acceso.
   Se limita por altura y no por anchura, de modo que sirve igual un logo
   apaisado que uno cuadrado sin deformarse. */
.access__logo {
  max-height: 6rem;
  max-width: min(18rem, 80%);
  width: auto;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  object-fit: contain;
}

/* El logo tiene contornos en azul marino y texto en azul oscuro sobre fondo
   transparente, que sobre un fondo oscuro se pierden. En modo oscuro se le da
   una base clara para que conserve el contraste. */
@media (prefers-color-scheme: dark) {
  .access__logo {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 94%);
  }
}

.access__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.access__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.access__lead {
  color: var(--text-muted);
  margin-bottom: var(--space-7);
  text-wrap: pretty;
}

.access__form {
  display: grid;
  gap: var(--space-4);
}

.access__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
}

.access__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  transition:
    border-color var(--transition-fast) var(--ease),
    box-shadow var(--transition-fast) var(--ease);
}

.access__input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.access__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 4px rgb(47 136 163 / 18%);
}

.access__input[aria-invalid='true'] {
  border-color: var(--clay-600);
  animation: shake 320ms var(--ease);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.access__error {
  min-height: 1.5rem;
  font-size: var(--step--1);
  color: var(--clay-600);
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .access__error {
    color: #f0a08a;
  }
}

/* --------------------------------------------------------------------------
   Cabecera del índice
   -------------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Vista 2: índice de secciones

   Sin portadas: el contenido son horarios y cartelería, y un recorte de un
   horario no dice nada. Cada sección se identifica por su color, su número y
   su título.
   -------------------------------------------------------------------------- */

.sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-4);
}

.section-card {
  --card-color: var(--section-1);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 11rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--card-color), color-mix(in oklab, var(--card-color) 72%, black));
  color: #fff;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-base) var(--ease),
    box-shadow var(--transition-base) var(--ease);
}

.section-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.section-card[data-index='1'] { --card-color: var(--section-1); }
.section-card[data-index='2'] { --card-color: var(--section-2); }
.section-card[data-index='3'] { --card-color: var(--section-3); }
.section-card[data-index='4'] { --card-color: var(--section-4); }
.section-card[data-index='5'] { --card-color: var(--section-5); }
.section-card[data-index='6'] { --card-color: var(--section-6); }
.section-card[data-index='7'] { --card-color: var(--section-7); }

/* Número grande de fondo: da ritmo visual y refuerza el orden de lectura. */
.section-card__number {
  position: absolute;
  top: -0.35em;
  right: 0.1em;
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(255 255 255 / 12%);
  pointer-events: none;
}

.section-card__title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section-card__meta {
  position: relative;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  opacity: 0.82;
}

/* --------------------------------------------------------------------------
   Vista 3: láminas de una sección
   -------------------------------------------------------------------------- */

.section-header {
  --header-color: var(--section-1);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--header-color), color-mix(in oklab, var(--header-color) 72%, black));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.section-header[data-index='1'] { --header-color: var(--section-1); }
.section-header[data-index='2'] { --header-color: var(--section-2); }
.section-header[data-index='3'] { --header-color: var(--section-3); }
.section-header[data-index='4'] { --header-color: var(--section-4); }
.section-header[data-index='5'] { --header-color: var(--section-5); }
.section-header[data-index='6'] { --header-color: var(--section-6); }
.section-header[data-index='7'] { --header-color: var(--section-7); }

.button--back {
  align-self: flex-start;
  --button-bg: rgb(255 255 255 / 18%);
  border-color: rgb(255 255 255 / 24%);
  color: #fff;
}

.section-header__text {
  position: relative;
}

.section-header__number {
  position: absolute;
  top: -1.1em;
  right: 0;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(255 255 255 / 12%);
  pointer-events: none;
}

.section-header__title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.section-header__meta {
  position: relative;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  opacity: 0.85;
}

/* Rejilla de láminas: hasta tres columnas en escritorio, dos en tableta y una en
   móvil. Nada se recorta nunca. */
.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-5) var(--space-4);
  max-width: var(--sheet-max);
  margin-inline: auto;
}

.sheet {
  display: flex;
  flex-direction: column;
  content-visibility: auto;
  contain-intrinsic-size: auto 20rem;
}

/* Los documentos ocupan la fila completa: así cabe el nombre entero y quedan
   claramente separados de las láminas que hay antes y después. */
.sheet--document {
  grid-column: 1 / -1;
  contain-intrinsic-size: auto 5rem;
}

/* Lámina de imagen ------------------------------------------------------- */

.sheet__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Color de la lámina mientras carga, para que no aparezca un hueco. */
  background: var(--sheet-color, var(--sand-200));
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition:
    transform var(--transition-fast) var(--ease),
    box-shadow var(--transition-fast) var(--ease);
}

.sheet__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Ni cover ni recorte: la lámina se ve entera. El espacio se reserva con los
   atributos width y height de la propia imagen. */
.sheet__image {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease);
}

.sheet__image.is-loaded {
  opacity: 1;
}

/* En cuanto hay más de una columna, todas las celdas miden lo mismo. Si cada
   lámina conservara su altura natural, una horizontal junto a dos verticales
   dejaría un hueco y descolocaría los pies de foto de esa fila.
   La proporción es la de las láminas verticales, que son la mayoría, así que
   apenas dejan margen; una horizontal se centra sobre su color medio y sigue
   viéndose completa, porque el ajuste es contain y no recorta nada. */
@media (min-width: 36rem) {
  .sheet__button {
    aspect-ratio: var(--sheet-ratio, 18 / 25);
    display: grid;
    place-items: center;
  }

  .sheet__image {
    height: 100%;
    object-fit: contain;
  }
}

.sheet__caption {
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Lámina de documento ---------------------------------------------------- */

.sheet__doc {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-fast) var(--ease),
    box-shadow var(--transition-fast) var(--ease);
}

.sheet__doc:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sheet__badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  background: var(--clay-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Nombre y detalle en dos líneas. Al ser spans, sin display:block quedaban
   pegados en la misma línea. */
.sheet__doc-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.sheet__doc-name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sheet__doc-meta {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.sheet__doc-open {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}

.sheets__empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Visor de láminas
   -------------------------------------------------------------------------- */

.viewer {
  width: 100dvw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overscroll-behavior: contain;
}

.viewer::backdrop {
  background: rgb(4 14 19 / 94%);
  backdrop-filter: blur(16px);
}

/* La apertura se anima con CSS y no con View Transitions: los elementos del top
   layer, como un diálogo modal, no se capturan de forma fiable en los
   snapshots de la transición. */
.viewer[open] {
  animation: viewer-in 300ms var(--ease);
}

.viewer[open]::backdrop {
  animation: backdrop-in 300ms var(--ease);
}

@keyframes viewer-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

/* Estado ajustado: la lámina cabe entera en pantalla.

   Centrado con flex y no con grid a propósito. En un grid la fila tiene altura
   automática, así que el max-height en porcentaje de la lámina no se resolvía
   contra la ventana: un cartel vertical se mostraba a su altura natural, se
   salía por abajo y, al estar el desplazamiento desactivado en este estado,
   quedaba recortado sin manera de recorrerlo. En flex el porcentaje se resuelve
   contra la altura del contenedor, que sí está definida. */
.viewer__scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(3.5rem + env(safe-area-inset-top))
    max(var(--space-4), env(safe-area-inset-right))
    calc(3rem + env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  cursor: zoom-in;
}

.viewer__image {
  max-width: 100%;
  max-height: 100%;
  /* Un elemento flex no se encoge por debajo de su contenido si no se le
     permite: sin esto, la lámina volvería a desbordar por abajo. */
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease);
}

.viewer__image.is-loaded {
  opacity: 1;
}

/* Estado ampliado: la lámina se muestra a tamaño legible y el contenedor se
   desplaza. Es lo que permite leer un horario denso en un móvil.

   Aquí el contenedor deja de ser grid centrado a propósito. Al centrar con
   place-items, una lámina más ancha que la pantalla desborda por los dos lados
   y el izquierdo queda fuera del área desplazable: es inalcanzable, se pierde
   parte de la lámina. Con display block y margin auto en la imagen, el reparto
   solo ocurre cuando sobra espacio, así que nada queda fuera de alcance. */
.viewer__scroll.is-zoomed {
  display: block;
  overflow: auto;
  cursor: grab;
  overscroll-behavior: contain;
  /* Barras visibles a propósito. En macOS están ocultas hasta que algo se
     desplaza, así que nada indicaba que hubiera lámina más allá del borde. */
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 45%) rgb(255 255 255 / 12%);
}

.viewer__scroll.is-zoomed::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.viewer__scroll.is-zoomed::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 12%);
}

.viewer__scroll.is-zoomed::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(255 255 255 / 45%);
}

.viewer__scroll.is-zoomed::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / 65%);
}

.viewer__scroll.is-zoomed.is-panning {
  cursor: grabbing;
}

.viewer__scroll.is-zoomed .viewer__image {
  display: block;
  margin-inline: auto;
  max-width: none;
  max-height: none;
  width: var(--zoom-width, 200%);
  border-radius: 0;
}

.viewer__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding:
    max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    var(--space-3)
    max(var(--space-3), env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgb(4 14 19 / 72%), transparent);
}

.viewer__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: 600;
  opacity: 0.9;
}

.viewer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.viewer__button {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  padding-inline: var(--space-4);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease);
}

.viewer__button:hover {
  background: rgb(255 255 255 / 24%);
}

.viewer__button--icon {
  width: 2.25rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}

.viewer__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease);
}

.viewer__nav:hover {
  background: rgb(255 255 255 / 24%);
}

.viewer__nav--prev {
  left: max(var(--space-3), env(safe-area-inset-left));
}

.viewer__nav--next {
  right: max(var(--space-3), env(safe-area-inset-right));
}

.viewer__nav[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

.viewer__counter {
  position: absolute;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(12px);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* Con la lámina ampliada, los controles laterales estorban. */
.viewer:has(.is-zoomed) .viewer__nav {
  display: none;
}

@media (width < 40rem) {
  .viewer__nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Aviso flotante
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  z-index: 50;
  translate: -50% 0;
  width: min(26rem, calc(100vw - 2rem));
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: var(--step--1);
  text-align: center;
  animation: toast-in var(--transition-base) var(--ease);
}

@keyframes toast-in {
  from {
    opacity: 0;
    translate: -50% 1rem;
  }
}

/* ==========================================================================
   View Transitions
   Soportado en Chrome 111+, Safari 18+ y Firefox 144+. Donde no lo esté, la
   vista cambia sin animación y no se rompe nada.
   ========================================================================== */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--transition-base);
  animation-timing-function: var(--ease);
}

/* La tarjeta pulsada del índice se expande hasta convertirse en la cabecera de
   la sección. Ambas comparten color, así que el recorrido se lee como un único
   bloque que crece. */
::view-transition-group(hero) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease);
}

/* ==========================================================================
   Accesibilidad: movimiento reducido
   ========================================================================== */

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

  .backdrop {
    animation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}