/* =========================================================
   ESTILOS · web de Diego Amaro
   Mobile-first: primero se escribe cómo se ve en celular,
   y con @media (min-width: ...) se ajusta para pantallas grandes.
   ========================================================= */

/* ---------- Variables (colores y medidas en un solo lugar) ----------
   Una variable CSS se define con --nombre y se usa con var(--nombre).
   Si querés cambiar el rojo de todo el sitio, cambiás --acento y listo. */
:root {
  --fondo: #0a0a0a;          /* casi negro */
  --fondo-suave: #141414;    /* un poco más claro, para cajas */
  --texto: #ece8e4;          /* blanco cálido */
  --texto-suave: #a39e99;    /* gris para textos secundarios */
  --acento: #a3161d;         /* EL único color de acento: rojo oscuro */

  --fuente-titulos: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --fuente-texto: 'Barlow', system-ui, sans-serif;

  --alto-header: 64px;
  --margen-lateral: 1.25rem;
  --ancho-maximo: 1200px;

  /* Le avisa al navegador que el sitio es oscuro: así las barras de scroll
     y los controles propios del navegador también se ven oscuros */
  color-scheme: dark;
}

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

html {
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

/* Scroll suave al tocar un enlace del menú, solo si el usuario no pidió menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

a {
  color: inherit;
}

/* Contorno visible al navegar con teclado (Tab), no al hacer clic con el mouse */
:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 4px;
}

/* Bloqueo de scroll: cuando el menú está abierto, la página de atrás no se mueve */
html.menu-abierto,
html.menu-abierto body {
  overflow: hidden;
}

/* ---------- Enlace "Saltar al contenido" ----------
   Está escondido arriba de la pantalla y baja solo cuando recibe foco con Tab. */
.saltar {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--texto);
  color: var(--fondo);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

/* ---------- Marcador de datos faltantes ----------
   Todo lo que diga [PLACEHOLDER] usa esta clase para que se note a simple vista. */
.placeholder {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px dashed var(--acento);
  color: var(--texto);
  font-size: 0.9rem;
}

/* =========================================================
   HEADER FIJO SEMITRANSPARENTE
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0; /* arriba de todo, de borde a borde */
  z-index: 100;
  height: var(--alto-header);
  padding: 0 var(--margen-lateral);
  /* En iPhone con notch, deja lugar a los costados si se gira el teléfono */
  padding-left: max(var(--margen-lateral), env(safe-area-inset-left));
  padding-right: max(var(--margen-lateral), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*
  backdrop-filter: blur() desenfoca lo que pasa POR DETRÁS del header.
  Truco: lo ponemos en un pseudo-elemento (::before) y no en el header mismo,
  porque si el header tuviera backdrop-filter, el menú a pantalla completa
  (que está adentro) quedaría encerrado en los 64px del header.
  Para más o menos desenfoque, cambiá el número de blur(); para más o menos
  transparencia, el último número de rgba (0 = invisible, 1 = sólido).
*/
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* zona cómoda para el dedo */
  position: relative;
  z-index: 2; /* queda por encima del menú abierto */
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

/* ---------- Selector de idioma ES / EN ----------
   Escondido si no hay JavaScript (sin JS no podría cambiar nada).
   margin-left: auto lo empuja a la derecha, al lado de la hamburguesa.
   El idioma activo (aria-pressed="true") va en blanco con rayita roja abajo. */
.idioma {
  display: none;
}

.js .idioma {
  position: relative;
  z-index: 2; /* queda visible también con el menú abierto */
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0.5rem;
}

.idioma__boton {
  min-width: 36px;
  min-height: 44px; /* área cómoda para el dedo */
  padding: 0 0.3rem;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.3s ease;
}

.idioma__boton:hover {
  color: var(--texto);
}

.idioma__boton[aria-pressed="true"] {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.idioma__barra {
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* ---------- Botón hamburguesa (dos líneas que se convierten en X) ---------- */
.hamburguesa {
  position: relative;
  z-index: 2;
  width: 44px;  /* 44px: tamaño mínimo cómodo para el dedo */
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
}

.hamburguesa__linea {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s ease;
}

.hamburguesa__linea:nth-child(1) { top: 17px; }
.hamburguesa__linea:nth-child(2) { top: 25px; }

/* Cuando el menú está abierto, las dos líneas giran y forman una X */
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- Menú en celular: pantalla completa ----------
   Cerrado está invisible (visibility: hidden también lo saca del orden del Tab).
   Al abrirlo, JS agrega la clase "menu-abierto" a <html> y aparece con un fundido. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
  opacity: 0;
  visibility: hidden;
  /* Al cerrar: primero se desvanece (0.4s) y recién después se oculta del todo */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

html.menu-abierto .menu {
  opacity: 1;
  visibility: visible;
  /* Al abrir: se vuelve visible al instante (para poder darle foco) y después aparece */
  transition: opacity 0.4s ease, visibility 0s;
}

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.menu__lista a {
  display: block;
  padding: 0.35rem 1rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
}

/* Al pasar el mouse: el texto sigue blanco y aparece una rayita roja abajo.
   (No pintamos el texto de rojo: sobre negro tiene poco contraste y cuesta leerlo) */
.menu__lista a:hover {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

/* ---------- Menú en escritorio: enlaces en línea dentro del header ---------- */
@media (min-width: 860px) {
  .hamburguesa {
    display: none;
  }

  /* En escritorio el orden es: nombre ... enlaces del menú · ES / EN.
     "order" cambia el orden en pantalla sin tocar el HTML. */
  .menu {
    order: 1;
    margin-left: auto;
  }

  .js .idioma {
    order: 2;
    margin-left: 1.75rem;
    margin-right: -0.3rem;
  }

  .menu {
    position: static;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .menu__lista {
    display: flex;
    gap: 2rem;
  }

  .menu__lista a {
    padding: 0.95rem 0; /* zona de 44 px de alto para el mouse o el dedo */
    font-family: var(--fuente-texto);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
  }
}

/* =========================================================
   1. PORTADA
   ========================================================= */
.portada {
  position: relative;
  /*
    100svh = 100% del alto "pequeño" de la pantalla: en celular no queda tapada
    por la barra del navegador (también en el navegador interno de Instagram).
    La línea de 100vh queda como respaldo para navegadores viejos que no entienden svh.
  */
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
}

.portada__foto {
  position: absolute;
  inset: 0;
}

/* object-fit: cover llena todo el recuadro sin deformar la foto (recorta lo que sobra).
   object-position elige qué parte se mantiene visible al recortar. */
.portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/*
  Degradé negro abajo para que el nombre se lea bien.
  Va de casi negro (abajo) a transparente (a mitad de la foto) y es neutro:
  no le cambia el color a la foto. Para que suba más, aumentá el último %.
*/
.portada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--fondo) 0%,
    rgba(10, 10, 10, 0.7) 20%,
    rgba(10, 10, 10, 0) 55%
  );
  pointer-events: none;
}

.portada__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 var(--margen-lateral);
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
}

/* clamp(mínimo, ideal, máximo): el nombre crece con el ancho de pantalla
   (19vw = 19% del ancho) pero nunca baja de 3.5rem ni pasa de 11rem. */
.portada__nombre {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(3.5rem, 19vw, 11rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.portada__bajada {
  margin: 0.9rem 0 0;
  padding-left: 0.2rem;
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (min-width: 860px) {
  .portada__texto {
    padding: 0 2.5rem 3.5rem;
  }
}

/* =========================================================
   SECCIONES (estructura común a todas)
   ========================================================= */
.seccion {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 5rem var(--margen-lateral);
  /*
    scroll-margin-top: cuando tocás un enlace del menú, la sección frena
    un poco más abajo para que el header fijo no le tape el título.
  */
  scroll-margin-top: var(--alto-header);
}

.seccion__titulo {
  margin: 0 0 2rem;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Detalle mínimo: una rayita roja debajo de cada título */
.seccion__titulo::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.9rem;
  background: var(--acento);
}

@media (min-width: 860px) {
  .seccion {
    padding: 7rem 2.5rem;
  }
}

/* =========================================================
   DETALLES DECORATIVOS DE SECCIÓN (de Presentación a Booking)
   Todo es CSS puro, sin imágenes y sin animaciones.
   ========================================================= */

/*
  GRILLA DE FONDO
  "seccion--deco" dibuja una grilla de líneas finísimas con dos degradados
  (uno horizontal y otro vertical) repetidos cada 48px.
  Va en un pseudo-elemento (::before) con z-index -1 para quedar DETRÁS
  del contenido; "isolation: isolate" evita que se vaya detrás de la página.
  mask-image la desvanece hacia los bordes para que no termine de golpe.
  Para hacerla más o menos visible, cambiá el 0.045 (tiene que quedar < 0.06).
  overflow: hidden recorta la palabra fantasma en el borde de la sección.
*/
.seccion--deco {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.seccion--deco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(236, 232, 228, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 232, 228, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}

/*
  CRUCES (+) EN DOS ESQUINAS
  La clase "cruces" pone una + arriba a la izquierda y otra abajo a la derecha
  del bloque, un poquito afuera. Son pseudo-elementos: no existen en el HTML,
  así que los lectores de pantalla no las leen.
*/
.cruces {
  position: relative;
}

.cruces::before,
.cruces::after {
  content: '+';
  position: absolute;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--acento);
  pointer-events: none;
}

.cruces::before {
  top: -1.1rem;
  left: -0.35rem;
}

.cruces::after {
  right: -0.35rem;
  bottom: -1.1rem;
}

/*
  PALABRA FANTASMA + ETIQUETA DE NIVEL
  "encabezado-deco" es la caja que tiene la etiqueta y el título.
  La palabra fantasma va absoluta, alineada a la derecha y detrás (z-index -1).
  -webkit-text-stroke dibuja solo el contorno de las letras; el relleno es transparente.
  Tamaño con clamp(mínimo, ideal, máximo): en celular depende del ancho de la
  pantalla (vw) y está calculado para que una palabra de 9 letras
  (IDENTIDAD, PROTOCOLO) entre completa a 390px.
*/
.encabezado-deco {
  position: relative;
  isolation: isolate;
}

.seccion__fantasma {
  position: absolute;
  top: -0.2em;
  right: 0;
  z-index: -1;
  font-family: var(--fuente-titulos);
  font-size: clamp(3.5rem, 21vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--acento);
  opacity: 0.16; /* 0.16 en pantallas anchas; en celular sube a 0.28 (abajo). Más alto = se nota más */
  pointer-events: none;
  user-select: none;
}

/* En celular (hasta 600 px) la palabra fantasma se nota más.
   Solo cambia la opacidad: el tamaño queda igual */
@media (max-width: 600px) {
  .seccion__fantasma {
    opacity: 0.28;
  }
}

/* Etiqueta chica arriba del título: gris claro (contraste 7,5:1 sobre el fondo) */
.seccion__nivel {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* En escritorio el título de Presentación está en una columna más angosta:
   la palabra se ajusta para entrar completa en esa columna */
@media (min-width: 860px) {
  .seccion__fantasma {
    font-size: clamp(5rem, 10vw, 9rem);
  }
}

/* Texto que no se ve en pantalla pero sí lo leen los lectores de pantalla
   (por ejemplo: "se abre en una pestaña nueva") */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Subtítulos chicos en mayúsculas espaciadas (se repiten en varias secciones) */
.etiqueta {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   2. PRESENTACIÓN
   En celular: foto arriba y texto abajo. En escritorio: lado a lado.
   ========================================================= */
.presentacion {
  display: grid;
  gap: 2.5rem;
}

/* aspect-ratio fija la proporción de la caja (4 de ancho por 5 de alto),
   así en celular la foto vertical no ocupa una pantalla y media */
.presentacion__foto {
  aspect-ratio: 4 / 5;
  background: var(--fondo-suave);
}

.presentacion__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.presentacion__texto p {
  max-width: 34em; /* líneas no muy largas: se leen mejor */
  margin: 0 0 1rem;
}

@media (min-width: 860px) {
  .presentacion {
    grid-template-columns: 5fr 6fr; /* la columna del texto un poco más ancha */
    gap: 4rem;
    align-items: center;
  }
}

/* =========================================================
   3. LANZAMIENTOS
   CSS Grid: repeat(2, 1fr) = 2 columnas iguales. Con más ancho, 3 y después 4.
   Para cambiar cuántas columnas hay, tocá esos números.
   ========================================================= */
.lanzamientos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}

/* Son 10: 2 columnas (5 filas) en celular y tablet, y 5 columnas (2 filas) en
   escritorio. Con 3 o 4 columnas quedaría una última fila incompleta.
   Si cambia la cantidad de lanzamientos, conviene revisar estos números. */
@media (min-width: 600px) {
  .lanzamientos { gap: 2.5rem 1.5rem; }
}

@media (min-width: 1000px) {
  .lanzamientos { grid-template-columns: repeat(5, 1fr); gap: 3rem 1.5rem; }
}

/* El fondo gris queda a la vista si falta la tapa (recuadro de relleno) */
.lanzamiento__tapa {
  aspect-ratio: 1 / 1;
  margin-bottom: 0.85rem;
  background: #2a2a2a;
}

.lanzamiento__tapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta chica "Compilado", arriba del título (usa el estilo .etiqueta) */
.lanzamiento__compilado {
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
}

.lanzamiento__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.lanzamiento__artista {
  margin: 0.15rem 0 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* El sello se destaca: blanco, en mayúsculas y con una rayita roja al costado */
.lanzamiento__sello {
  margin: 0.65rem 0 0;
  padding-left: 0.5rem;
  border-left: 2px solid var(--acento);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.lanzamiento__meta {
  margin: 0.35rem 0 0;
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* min-height: 44px agranda la zona que se puede tocar con el dedo,
   sin que el texto se vea distinto (el resto queda como espacio vacío) */
.lanzamiento__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration-color: var(--acento);
  text-underline-offset: 4px;
}

.lanzamiento .placeholder {
  display: block;
  width: fit-content; /* el recuadro mide lo que mide el texto */
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Botón "Ver todo en Beatport" debajo de la grilla */
.lanzamientos__todo {
  margin-top: 2.5rem;
}

/* =========================================================
   4. ESCUCHAR
   ========================================================= */
.spotify {
  display: block;
  border: 0;
  border-radius: 12px;
  background: var(--fondo-suave);
}

.plataformas {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* si no entran en una fila, bajan a la siguiente */
  gap: 0.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

a.boton:hover {
  background: var(--acento);
  border-color: var(--acento);
}


/* =========================================================
   5. VIDEOS
   ========================================================= */
.videos {
  display: grid;
  gap: 3rem;
}

@media (min-width: 860px) {
  .videos {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* La tarjeta es un <button>: se puede tocar, y también usar con teclado (Tab + Enter) */
.video__tarjeta {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* proporción de video */
  padding: 0;
  border: 0;
  background: var(--fondo-suave);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.video__miniatura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón de play: un círculo con un triángulo dibujado con bordes (truco CSS clásico) */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border: 2px solid var(--texto);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.video__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--texto);
}

.video__tarjeta:hover .video__play,
.video__tarjeta:focus-visible .video__play {
  background: var(--acento);
  border-color: var(--acento);
}

/* Respaldo si la miniatura no carga: recuadro gris con el título */
.video__respaldo {
  display: none;
}

.video__tarjeta.sin-miniatura .video__miniatura {
  display: none;
}

.video__tarjeta.sin-miniatura .video__respaldo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: #2a2a2a;
  font-weight: 600;
  text-align: left;
}

/* Cuando se toca, la tarjeta se reemplaza por este marco con el reproductor */
.video__marco {
  aspect-ratio: 16 / 9;
  background: #000;
}

.video__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__lugar {
  margin: 1rem 0 0.35rem;
}

.video__titulo {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.video__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.video__enlace:hover {
  text-decoration-thickness: 4px; /* la rayita roja engorda; el texto queda blanco */
}

/* =========================================================
   6. EVENTOS
   ========================================================= */

/* ---------- Línea de ciudades ----------
   Cada país (con sus ciudades) es un bloque. En celular van uno debajo
   del otro; en escritorio se ponen en fila y bajan de línea si no entran. */
.ciudades {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 2.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.ciudades__pais {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}

/* El país en blanco con la rayita roja (igual que el sello en Lanzamientos) */
.ciudades dt {
  padding-left: 0.5rem;
  border-left: 2px solid var(--acento);
}

.ciudades dd {
  margin: 0;
  color: var(--texto-suave);
}

@media (min-width: 860px) {
  .ciudades {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem 2.5rem;
  }
}

/* ---------- Galería ----------
   Grid de cuadros iguales: 2 columnas en celular y 4 en escritorio.
   Con 8 fotos quedan 4 filas de 2 o 2 filas de 4, sin huecos.
   Como las fotos mezclan verticales y horizontales, cada una se recorta
   a un cuadrado (aspect-ratio: 1 / 1) con object-fit: cover. */
.galeria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0.75rem;
}

@media (min-width: 860px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1rem;
  }
}

.evento {
  margin: 0; /* <figure> trae márgenes de fábrica: los sacamos */
}

.evento__foto {
  aspect-ratio: 1 / 1;
  background: var(--fondo-suave);
}

.evento__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pie de foto: chico, en mayúsculas y gris, como el resto de las etiquetas */
.evento__pie {
  margin-top: 0.6rem;
  color: var(--texto-suave);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* =========================================================
   7. BOOKING Y AGENCIA
   ========================================================= */
.booking {
  display: grid;
  gap: 2rem;
}

.booking__subtitulo {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
  Logo de RISE: fijamos la ALTURA y dejamos el ancho en "auto", así el
  navegador calcula el ancho según la proporción original y nunca se deforma.
  Para agrandarlo o achicarlo, cambiá los 80px (celular) y 110px (escritorio).
*/
.booking__logo {
  width: auto;
  height: 80px;
  margin-bottom: 1.25rem;
}

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

.booking__lista li + li {
  margin-top: 0.15rem;
}

/* Mails e Instagram: subrayado rojo, como los demás enlaces del sitio.
   overflow-wrap: anywhere deja cortar un mail largo si no entra en el celular. */
.booking__lista a {
  display: inline-block;
  padding: 0.75rem 0; /* relleno arriba y abajo: zona de 44 px para el dedo */
  overflow-wrap: anywhere;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.booking__lista a:hover {
  text-decoration-thickness: 4px; /* la rayita roja engorda; el texto queda blanco */
}

/* Technical setup: el equipo en mayúsculas chicas y los modelos debajo */
.setup {
  margin: 0;
}

.setup div + div {
  margin-top: 0.85rem;
}

.setup dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.setup dd {
  margin: 0.15rem 0 0;
  color: var(--texto-suave);
}

@media (min-width: 860px) {
  .booking {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .booking__logo {
    height: 110px;
  }
}

/* =========================================================
   8. PIE CON INSTAGRAM
   ========================================================= */
.pie {
  padding: 4rem var(--margen-lateral);
  padding-bottom: max(4rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  scroll-margin-top: var(--alto-header);
}

.pie__instagram {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.pie__etiqueta {
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pie__usuario {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

.pie__instagram:hover .pie__usuario {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
}

/* =========================================================
   MOVIMIENTO
   ========================================================= */

/*
  FADE-IN AL ENTRAR EN PANTALLA
  Solo si <html> tiene la clase "js": sin JavaScript nada queda escondido.
  Arranca transparente y 24px más abajo; cuando JS le agrega "en-pantalla",
  la transición lo lleva a su lugar. Para hacerlo más lento o más rápido,
  cambiá los 1s; para que suba más o menos, cambiá los 24px.
*/
.js .aparecer {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}

.js .aparecer.en-pantalla {
  opacity: 1;
  transform: none;
}

/*
  ZOOM MUY LENTO EN LAS FOTOS
  La foto vive dentro de una caja con overflow: hidden, así al agrandarse no se sale.
  La transición de 8s hace que el zoom sea casi imperceptible y suave.
  - En escritorio (hover: hover = hay mouse): se activa al pasar el mouse.
  - En celular (hover: none = pantalla táctil): se activa al entrar en pantalla.
  Para cambiar la intensidad, tocá el 1.06 (1 = sin zoom); para la velocidad, los 8s.
*/
.foto-zoom {
  overflow: hidden;
}

.foto-zoom img {
  transition: transform 8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (hover: hover) {
  .foto-zoom:hover img {
    transform: scale(1.06);
  }
}

@media (hover: none) {
  .foto-zoom.en-pantalla img {
    transform: scale(1.06);
  }
}

/*
  prefers-reduced-motion: si la persona configuró su teléfono o compu para
  "reducir movimiento", apagamos todas las animaciones y mostramos todo quieto.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .js .aparecer {
    opacity: 1;
    transform: none;
  }

  .foto-zoom img {
    transform: none !important;
  }
}