/* =============================================================================
   SARAPURA — HOJA DE ESTILO
   Todo lo visual sale del Brandbook 2023. Las decisiones están anotadas contra
   la lámina que las respalda, para que se puedan auditar.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS DE MARCA
   Paleta institucional (lámina "Paleta cromática institucional"): blanco, negro
   #1A1A1A y sus grises al 75/50/25%. El manual permite sumar tonos cercanos,
   "como un azul marino oscuro": de ahí --azul-noche.
   La paleta amplia (lámina "Combinaciones de color posibles") son degradés
   vibrantes: se usan como acento, nunca como fondo de lectura.
-------------------------------------------------------------------------- */
:root {
  --blanco: #ffffff;
  --negro: #1a1a1a;
  --negro-profundo: #0d0d0d;
  --gris-75: #545454;
  --gris-50: #8d8d8d;
  --gris-25: #c6c6c6;
  --azul-noche: #121a2e;

  /* Degradés de la paleta amplia. Vibrantes y llamativos, sin pasteles. */
  --degrade-violeta: linear-gradient(120deg, #7a00ff, #0b4ce8);
  --degrade-magenta: linear-gradient(120deg, #ff00a8, #ff2d1e);
  --degrade-celeste: linear-gradient(120deg, #45e0ff, #7a6bff);
  --degrade-verde: linear-gradient(120deg, #23d18b, #1e6bff);
  --degrade-solar: linear-gradient(120deg, #ffd500, #ff7a00);

  /* EL ACENTO
     De toda la paleta amplia, el celeste es el unico degrade que pasa contraste
     AA sobre el fondo: 12:1 en su punto mas claro y 4.9:1 en el mas oscuro. Por
     eso es el que se usa como acento. Los dos extremos quedan expuestos como
     tokens sueltos porque el degrade tambien se dibuja dentro de un SVG, donde
     no entra un linear-gradient de CSS.
     Cambiar el acento del sitio = cambiar estas dos lineas. */
  --acento-desde: #45e0ff;
  --acento-hasta: #7a6bff;
  --degrade-acento: linear-gradient(120deg, var(--acento-desde), var(--acento-hasta));

  --fondo: var(--negro-profundo);
  --texto: var(--blanco);
  --texto-suave: var(--gris-25);
  --linea: rgba(255, 255, 255, 0.14);

  /* Ritmo. Un solo lugar donde cambiar el aire de todo el sitio. */
  --aire-seccion: clamp(4.5rem, 9vw, 9rem);
  --ancho: 78rem;
  --borde-suave: 2px;
  --alto-cabecera: 5rem;

  /* Interletra -40 del manual ("Se recomienda usar una interletra de -40 pt"). */
  --interletra-display: -0.04em;
}

/* -----------------------------------------------------------------------------
   2. TIPOGRAFÍA
   Futura es la tipográfica principal del manual. Del sitio actual heredamos dos
   pesos reales (regular y heavy); las variantes Book/Medium/Demi de Futura PT
   requieren licencia y todavía no están.
-------------------------------------------------------------------------- */
@font-face {
  font-family: 'Futura';
  src: url('/assets/fuentes/Futura.woff2') format('woff2'), url('/assets/fuentes/Futura.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fuentes/Futura-Heavy.woff2') format('woff2'), url('/assets/fuentes/Futura-Heavy.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   3. BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Futura', 'Futura PT', 'Avenir Next', system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* POSTER SIEMPRE VISIBLE
   Los videos de las tarjetas cargan recien al entrar en pantalla (`preload="none"`
   + IntersectionObserver). Hasta que eso pasa, el navegador no pinta el `poster`:
   deja el hueco vacio, que en el celular se ve como una caja negra enorme. Lo
   mismo ocurre con `prefers-reduced-motion`, donde el video no arranca nunca.
   Poniendo el poster como fondo del propio <video>, el espacio nunca queda vacio:
   se ve la foto y el video aparece encima cuando puede. */
video[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* `hidden` tiene que ganar siempre: nuestros display (flex/grid) lo pisaban. */
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: #7a00ff; color: var(--blanco); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.definiciones { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blanco); color: var(--negro);
  padding: 0.6rem 1rem; transition: top 0.2s;
}
.saltar:focus { top: 1rem; }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   4. TÍTULOS Y TEXTOS
   Textos largos en caja baja: el manual lo pide explícitamente ("los textos en
   caja alta tienden a cansar la vista").
-------------------------------------------------------------------------- */
.titulo {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: var(--interletra-display);
  font-weight: 400;
  text-wrap: balance;
}
.titulo--grande { max-width: 20ch; }

.parrafo { color: var(--texto-suave); margin-block: 0 1rem; max-width: 62ch; }
.parrafo:last-child { margin-bottom: 0; }
.parrafo--destacado { color: var(--blanco); font-size: 1.15em; max-width: 48ch; }

.kicker {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gris-50);
  margin-bottom: 1.25rem;
}
.kicker__marca { width: 0.7rem; height: auto; color: var(--gris-50); }
/* La S se dibuja con el degrade definido en el <svg class="definiciones">. */
.kicker__marca path { stroke: url(#degrade-acento); }

.encabezado-seccion { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado-seccion .parrafo { margin-top: 1.25rem; }

/* -----------------------------------------------------------------------------
   5. BOTONES
   La píldora con flecha viene del set iconográfico del manual.
-------------------------------------------------------------------------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.boton {
  --boton-fondo: transparent;
  --boton-texto: var(--blanco);
  --boton-borde: var(--blanco);
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--boton-borde);
  border-radius: 999px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.boton__flecha { width: 1.1rem; transition: transform 0.25s; }
.boton:hover { transform: translateY(-1px); }
.boton:hover .boton__flecha { transform: translateX(4px); }

.boton--primaria { --boton-fondo: var(--blanco); --boton-texto: var(--negro); }
.boton--primaria:hover { --boton-fondo: var(--gris-25); --boton-borde: var(--gris-25); }

.boton--secundaria { --boton-borde: var(--linea); }
.boton--secundaria:hover { --boton-borde: var(--blanco); }

.boton--compacta { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.boton--compacta .boton__flecha { width: 0.95rem; }
/* De las dos etiquetas del botón, la corta aparece recién en pantallas angostas. */
.boton__corto { display: none; }

.icono { width: 1.25rem; height: 1.25rem; flex: none; }

/* -----------------------------------------------------------------------------
   6. CABECERA
-------------------------------------------------------------------------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--alto-cabecera);
  display: flex; align-items: center;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.cabecera[data-fija] {
  background: rgba(13, 13, 13, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}
.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.cabecera__marca { color: var(--blanco); }
.logotipo { width: 7.5rem; height: auto; }

.cabecera__nav ul { display: flex; gap: 1.75rem; font-size: 0.95rem; }
.cabecera__nav a { position: relative; padding-block: 0.25rem; color: var(--gris-25); transition: color 0.2s; }
.cabecera__nav a:hover, .cabecera__nav a[aria-current] { color: var(--blanco); }
.cabecera__nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--degrade-acento); transition: right 0.25s;
}
.cabecera__nav a:hover::after, .cabecera__nav a[aria-current]::after { right: 0; }

.cabecera__acciones { display: flex; align-items: center; gap: 1rem; }
.idioma {
  font-size: 0.8rem; letter-spacing: 0.14em; color: var(--gris-50);
  border: 1px solid var(--linea); border-radius: 999px; padding: 0.3rem 0.6rem;
  transition: color 0.2s, border-color 0.2s;
}
.idioma:hover { color: var(--blanco); border-color: var(--blanco); }

.hamburguesa {
  display: none; width: 2.5rem; height: 2.5rem;
  background: none; border: 1px solid var(--linea); border-radius: 999px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.hamburguesa__linea { width: 1rem; height: 1px; background: var(--blanco); transition: transform 0.25s, opacity 0.25s; }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:first-child { transform: translateY(3px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: var(--alto-cabecera) 0 auto 0;
  background: rgba(13, 13, 13, 0.98);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linea);
  padding: 1.5rem 1.25rem 2rem;
  /* En pantallas bajas (iPhone SE, o cualquier iPhone con las barras de Safari
     a la vista) los 7 enlaces + el CTA + el pie no entran: el panel es fijo, así
     que lo que sobra queda sin forma de alcanzarse. Se acota a la pantalla y se
     deja scrollear adentro. */
  max-height: calc(100svh - var(--alto-cabecera));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movil ul { display: grid; gap: 0.25rem; }
.menu-movil a {
  display: block; padding: 0.85rem 0;
  font-size: 1.5rem; letter-spacing: var(--interletra-display);
  border-bottom: 1px solid var(--linea);
}
.menu-movil .boton { margin-top: 1.5rem; width: 100%; justify-content: space-between; }
.menu-movil__pie { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.menu-movil__idioma { color: var(--gris-50); letter-spacing: 0.14em; padding: 0.5rem 0; }

/* -----------------------------------------------------------------------------
   7. HERO
   Video de fiesta + la S de línea como trama, tal como muestra el manual en
   "Piezas de Branding".
-------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--alto-cabecera) + 3rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.86) 0%, rgba(13, 13, 13, 0.42) 40%, rgba(13, 13, 13, 0.94) 100%),
    radial-gradient(70% 60% at 70% 30%, rgba(122, 0, 255, 0.18), transparent 70%);
}
.hero__trama {
  position: absolute; z-index: -1;
  right: -6vw; top: 50%; transform: translateY(-50%);
  width: min(46vw, 30rem); height: auto;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.hero__interior { position: relative; }
.hero__kicker {
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gris-25); margin-bottom: 1.5rem;
}
.hero__titulo {
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: var(--interletra-display);
  font-weight: 400;
  max-width: 16ch;
  text-wrap: balance;
}
.hero__bajada { margin-top: 1.5rem; max-width: 44ch; color: var(--gris-25); }
.hero__bajar {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  color: var(--gris-50);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* -----------------------------------------------------------------------------
   8. SECCIONES
-------------------------------------------------------------------------- */
.seccion { padding-block: var(--aire-seccion); }

/* Sin hero que ocupe el alto de la cabecera, la primera sección tiene que
   despejarla a mano: si no, el antetítulo queda tapado. */
main > .seccion:first-child { padding-top: calc(var(--alto-cabecera) + var(--aire-seccion)); }
.seccion--nosotros { border-top: 1px solid var(--linea); }

.dos-columnas {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}


/* Fiestas ------------------------------------------------------------------ */
.fiestas {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.fiesta {
  position: relative; display: block; overflow: hidden;
  background: var(--negro);
  border: 1px solid var(--linea);
}
.fiesta__foto { aspect-ratio: 3 / 4; overflow: hidden; }
.fiesta__foto img,
.fiesta__foto video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; }
.fiesta:hover .fiesta__foto img,
.fiesta:hover .fiesta__foto video { transform: scale(1.04); }
.fiesta__texto {
  position: absolute; inset: auto 0 0 0;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(13, 13, 13, 0.92) 55%);
}
.fiesta__nombre { font-size: 1.6rem; letter-spacing: var(--interletra-display); font-weight: 400; }
.fiesta__resumen { color: var(--gris-25); margin-top: 0.4rem; font-size: 0.98rem; }
.fiesta__accion {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.fiesta__accion .icono { width: 1rem; transition: transform 0.25s; }
.fiesta:hover .fiesta__accion .icono { transform: translateX(4px); }
.fiesta:hover .fiesta__accion .icono path { stroke: url(#degrade-acento); }

/* Proceso ------------------------------------------------------------------ */
.pasos {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  counter-reset: paso;
}
.paso { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.paso__numero {
  display: block; font-size: 1.1rem; letter-spacing: 0.2em; color: var(--gris-25);
  margin-bottom: 1rem;
}
/* El degrade sobre el numero, con el gris de respaldo si el navegador no sabe
   recortar el fondo contra el texto. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .paso__numero {
    background: var(--degrade-acento);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.paso__titulo { font-size: 1.35rem; font-weight: 400; letter-spacing: var(--interletra-display); }
.paso__texto { color: var(--texto-suave); margin-top: 0.6rem; font-size: 0.98rem; }

/* Espacios ----------------------------------------------------------------- */
.espacios { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.espacio {
  border: 1px solid var(--linea);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, rgba(18, 26, 46, 0.55), transparent 60%);
}
.espacio__logo { width: 10rem; height: auto; margin-bottom: 1.5rem; filter: brightness(0) invert(1); opacity: 0.9; }
.espacio__isologo { width: 2.5rem; height: auto; color: var(--blanco); margin-bottom: 1.5rem; }
.espacio__nombre { font-size: 1.6rem; font-weight: 400; letter-spacing: var(--interletra-display); }
.espacio__texto { color: var(--texto-suave); margin-top: 0.75rem; }
.espacio__detalle {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; color: var(--gris-50); font-size: 0.9rem;
}
.espacio .boton { margin-top: 1.75rem; }

/* DJs ---------------------------------------------------------------------- */
.seccion--djs-home { border-top: 1px solid var(--linea); }

/* El adelanto de la home: caras en tira, sin datos, para invitar al directorio. */
.caras {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.cara { position: relative; display: block; overflow: hidden; border: 1px solid var(--linea); }
.cara img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; transition: transform 0.5s ease; }
.cara:hover img { transform: scale(1.05); }
.cara__nombre {
  position: absolute; inset: auto 0 0 0;
  padding: 2rem 0.9rem 0.8rem;
  background: linear-gradient(180deg, transparent, rgba(13, 13, 13, 0.9));
  font-size: 0.9rem; letter-spacing: 0.02em;
}

/* Chips para filtrar el directorio por estilo. */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filtro {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-25);
  background: none; border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filtro:hover { color: var(--blanco); border-color: var(--gris-50); }
.filtro[aria-pressed='true'] { color: var(--negro); background: var(--blanco); border-color: var(--blanco); }
.djs__vacio { color: var(--gris-50); margin-top: 2rem; }

/* El directorio completo: tarjeta con foto, datos y géneros. */
.pagina-djs main > .seccion:first-child { padding-top: calc(var(--alto-cabecera) + var(--aire-seccion)); }
.djs {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.dj { display: flex; flex-direction: column; border: 1px solid var(--linea); background: var(--negro); transition: border-color 0.25s; }
.dj:hover { border-color: var(--gris-50); }
.dj__foto { overflow: hidden; }
.dj__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; transition: transform 0.5s ease; }
.dj:hover .dj__foto img { transform: scale(1.04); }
.dj__texto { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; flex: 1; }
.dj__nombre { font-size: 1.35rem; font-weight: 400; letter-spacing: var(--interletra-display); }
.dj__datos { color: var(--gris-50); font-size: 0.85rem; }
.dj__frase {
  color: var(--gris-25); font-size: 0.92rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dj__generos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.dj__generos li {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-25);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.25rem 0.6rem;
}
.dj__accion {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 0.9rem;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.dj__accion .icono { width: 1rem; transition: transform 0.25s; }
.dj:hover .dj__accion .icono { transform: translateX(4px); }
.dj:hover .dj__accion .icono path { stroke: url(#degrade-acento); }

/* Música ------------------------------------------------------------------- */
.musica {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.musica__spotify { border: 0; border-radius: 12px; }

/* -----------------------------------------------------------------------------
   9. PORTADA DE SUBPÁGINA
-------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: min(80svh, 44rem);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--alto-cabecera) + 4rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden; isolation: isolate;
}
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
.portada::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.88), rgba(13, 13, 13, 0.55) 45%, rgba(13, 13, 13, 0.96));
}
.portada__interior { position: relative; }
.portada__trama {
  position: absolute; right: -2rem; bottom: 0; width: min(28vw, 16rem);
  color: rgba(255, 255, 255, 0.14); pointer-events: none;
}
.portada__kicker {
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gris-25); margin-bottom: 1.25rem;
}
.portada__titulo {
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.25rem);
  line-height: 1; letter-spacing: var(--interletra-display); font-weight: 400;
  max-width: 18ch; text-wrap: balance;
}
.portada__bajada { margin-top: 1.5rem; max-width: 52ch; color: var(--gris-25); }

.incluye { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.incluye__item { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.incluye__titulo { font-size: 1.3rem; font-weight: 400; letter-spacing: var(--interletra-display); }
.incluye__texto { color: var(--texto-suave); margin-top: 0.6rem; font-size: 0.98rem; }

.seccion--otras { border-top: 1px solid var(--linea); }

/* Llamada final ------------------------------------------------------------ */
.seccion--llamada { border-top: 1px solid var(--linea); }
.llamada { position: relative; text-align: center; display: grid; justify-items: center; overflow: hidden; }
.llamada__trama {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(60vw, 26rem); color: rgba(255, 255, 255, 0.07); z-index: -1;
}
.llamada .parrafo { margin-top: 1.25rem; }
.llamada .acciones { justify-content: center; }

/* -----------------------------------------------------------------------------
   10. CONTACTO Y FORMULARIO
-------------------------------------------------------------------------- */
.seccion--contacto { border-top: 1px solid var(--linea); }
.contacto {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}
.contacto__nota { color: var(--gris-50); font-size: 0.9rem; }

/* En la home (sin formulario), los datos directos van en un panel a la derecha
   con el mismo tratamiento que el formulario, para que la fila quede en equilibrio. */
.contacto__panel {
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, rgba(18, 26, 46, 0.5), transparent 55%);
}
.contacto__intro .contacto__nota { margin-top: 2.5rem; }
.contacto__directo { display: grid; gap: 0.9rem; margin-top: 1rem; }
.contacto__directo li { display: flex; align-items: center; gap: 0.75rem; }
.contacto__directo a { display: inline-block; padding-block: 0.35rem; border-bottom: 1px solid var(--linea); transition: border-color 0.2s; }
.contacto__directo a:hover { border-bottom-color: var(--blanco); }
.contacto__horario { margin-top: 1.5rem; color: var(--gris-50); font-size: 0.9rem; }

.formulario {
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, rgba(18, 26, 46, 0.5), transparent 55%);
}
.formulario__titulo { font-size: 1.5rem; font-weight: 400; letter-spacing: var(--interletra-display); }
.formulario__bajada { color: var(--texto-suave); margin-top: 0.75rem; font-size: 0.95rem; }
.formulario__campos {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  margin-top: 2rem;
}
.campo { display: grid; gap: 0.4rem; margin: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-50); }
.campo label span { color: var(--gris-50); margin-left: 0.2rem; }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--blanco);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linea);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--blanco); background: rgba(255, 255, 255, 0.07); outline: none;
}
.campo select option { background: var(--negro); }
.campo__ayuda { font-size: 0.8rem; color: var(--gris-50); }
.formulario__envio { display: grid; gap: 0.9rem; margin-top: 2rem; justify-items: start; }
.formulario__aviso { font-size: 0.8rem; color: var(--gris-50); }

/* El renglón donde el formulario cuenta cómo salió el envío. Vacío no ocupa. */
.formulario__estado:empty { display: none; }
.formulario__estado {
  font-size: 0.95rem; line-height: 1.5;
  border-left: 2px solid var(--linea);
  padding-left: 0.9rem;
  max-width: 34rem;
}
.formulario__estado--trabajando { color: var(--gris-25); }
.formulario__estado--exito {
  color: var(--blanco);
  border-image: var(--degrade-acento) 1;
}
/* El error se marca con el borde y el texto en blanco: el manual veta el rojo. */
.formulario__estado--error { color: var(--blanco); border-left-color: var(--blanco); }

/* -----------------------------------------------------------------------------
   11. PIE Y BOTÓN FLOTANTE
-------------------------------------------------------------------------- */
.pie { border-top: 1px solid var(--linea); padding-top: clamp(3rem, 6vw, 5rem); }
.pie__interior {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
}
.pie__isologo { width: 2.75rem; height: auto; color: var(--blanco); }
.pie__lema { margin-top: 1rem; color: var(--gris-50); font-size: 0.95rem; }
.pie__columnas { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.pie__titulo {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gris-50); font-weight: 400; margin-bottom: 1rem;
}
.pie__columnas li { font-size: 0.95rem; }
.pie__columnas a { display: inline-block; padding-block: 0.45rem; }
.pie__columnas a { color: var(--gris-25); transition: color 0.2s; }
.pie__columnas a:hover { color: var(--blanco); }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 4rem); padding-block: 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--gris-50); font-size: 0.85rem;
}

.whatsapp-flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: 999px;
  background: rgba(13, 13, 13, 0.9); backdrop-filter: blur(8px);
  color: var(--blanco);
  transition: transform 0.25s, border-color 0.25s;
}
.whatsapp-flotante:hover { transform: translateY(-2px); border-color: var(--blanco); }
.whatsapp-flotante .icono { width: 1.5rem; height: 1.5rem; }

/* -----------------------------------------------------------------------------
   12. ADAPTACIONES
-------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .cabecera__nav { display: none; }
  .hamburguesa { display: flex; }
  /* El CTA se queda en la barra: es la acción del sitio y en el celular es donde
     más se necesita. El que se va es el selector de idioma, que ya estaba
     repetido en el pie del menú. */
  .cabecera__acciones .idioma { display: none; }
  .cabecera__interior { gap: 1rem; }
  .cabecera__acciones { gap: 0.6rem; }
  .dos-columnas, .musica { grid-template-columns: 1fr; }
  .pie__interior { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .hero { min-height: 92svh; }
  .whatsapp-flotante { width: 3rem; height: 3rem; }
  /* Acá el botón dice sólo "Cotizá" y suelta la flecha: entra al lado del logo
     sin apretar la barra ni pisar la hamburguesa. */
  .cabecera__acciones .boton--compacta { padding: 0.55rem 0.9rem; }
  .cabecera__acciones .boton__largo { display: none; }
  .cabecera__acciones .boton__corto { display: inline; }
  .cabecera__acciones .boton__flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* El loop del hero también es movimiento: se reemplaza por su póster. */
  .hero__video { display: none; }
  .hero { background: url('/assets/img/hero-poster.jpg') center / cover no-repeat; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   FONDOS DE CONTACTO Y 404
   Dos páginas que no tienen foto propia. Se les pone una textura muy tenue
   detrás del bloque, acotada por la clase del cuerpo para no afectar al
   mismo bloque de contacto cuando aparece en la home.
   -------------------------------------------------------------------------- */
.pagina-contacto .seccion--contacto,
.pagina-404 .seccion--llamada {
  position: relative;
  isolation: isolate;
}

.pagina-contacto .seccion--contacto::before,
.pagina-404 .seccion--llamada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  /* El texto va encima de todo el bloque: la textura se apaga hacia los bordes
     para que nunca compita con la lectura. */
  mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 35%, transparent 100%);
}

.pagina-contacto .seccion--contacto::before {
  background-image: url('/assets/img/fondo-contacto.jpg');
  background-image: image-set(
    url('/assets/img/fondo-contacto.webp') type('image/webp'),
    url('/assets/img/fondo-contacto.jpg') type('image/jpeg')
  );
}

.pagina-404 .seccion--llamada::before {
  background-image: url('/assets/img/fondo-404.jpg');
  background-image: image-set(
    url('/assets/img/fondo-404.webp') type('image/webp'),
    url('/assets/img/fondo-404.jpg') type('image/jpeg')
  );
}

/* Las modalidades de soporte técnico llevan foto: pierden el filete superior
   (la imagen ya separa) y la foto sigue el lenguaje de las tarjetas de fiesta. */
.soporte__item { border-top: 0; padding-top: 0; }
.soporte__foto { margin: 0 0 1.25rem; border: 1px solid var(--linea); overflow: hidden; }
.soporte__foto img,
.soporte__foto video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Captación de salones al cierre de soporte técnico: es otra audiencia (dueños de
   espacios, no clientes de fiesta), así que se separa del resto con su propio marco. */
.seccion--salones { padding-block: 0 var(--aire-seccion); }
.seccion--salones .soporte__salones { margin-top: 0; }

.soporte__salones {
  margin-top: 3.5rem;
  border: 1px solid var(--linea);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  background: linear-gradient(160deg, rgba(18, 26, 46, 0.5), transparent 60%);
}
.soporte__salones-titulo {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  letter-spacing: var(--interletra-display);
  max-width: 30ch;
  text-wrap: balance;
}

/* -----------------------------------------------------------------------------
   13. ENCABEZADOS CON ANTETÍTULO
   El H1 de home, fiestas y DJs lleva adentro su línea chica: así el término que
   la gente busca ("dj para casamientos en buenos aires") entra en el encabezado
   sin sacarle tamaño a la frase de marca, que sigue siendo lo que se ve.
   El ancho de línea pasa del H1 a la frase, para que el antetítulo no se corte.
--------------------------------------------------------------------------- */
.hero__titulo,
.portada__titulo,
.titulo--con-kicker { max-width: none; }

.hero__frase { display: block; max-width: 16ch; }
.portada__frase { display: block; max-width: 18ch; }
.titulo__frase { display: block; max-width: 20ch; }

.hero__titulo .hero__kicker,
.portada__titulo .portada__kicker,
.titulo--con-kicker .kicker {
  display: flex;
  line-height: 1.5;
  font-weight: 400;
  text-wrap: initial;
}