/* ==========================================================================
   FV GRAFIA — demo Grou
   Dirección de arte: "bin de montaje". La firma es la TIRA DE SELECCIÓN:
   los fotogramas en fila con la toma marcada SEL y los descartes atenuados.
   Paleta muestreada de sus propias fotos: negro de escenario, cian de sus
   sombras y ámbar de la luz de recorte. El magenta del cartel del festival
   vive SOLO dentro del bloque de Alhama Baila, que es donde es literal.
   ========================================================================== */

:root {
  --sala:      #08090B;
  --sala-2:    #101317;
  --cian:      #1FC7BE;
  --cian-hondo:#0E5C58;
  --ambar:     #FF6A1F;
  --magenta:   #E8317F;
  --humo:      #C6CFCE;
  --humo-2:    #8B9997;
  --papel:     #F2F4F3;

  --caja: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --display: "Syne", "Trebuchet MS", sans-serif;
  --cuerpo:  "Manrope", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sala);
  color: var(--humo);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;

}

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

.caja { width: min(100% - 2.5rem, var(--caja)); margin-inline: auto; }
@media (max-width: 640px) { .caja { width: min(100% - 1.75rem, var(--caja)); } }

.mono {
  font-family: var(--mono);
  font-size: .78rem;           /* 12.5px: por encima del suelo de 11px */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo-2);
}
.mono .sep { color: var(--cian); padding: 0 .35em; }
/* variante en caja baja: para las lineas largas, donde la versalita se lee mal */
.mono--frase { text-transform: none; letter-spacing: .035em; }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ambar); color: var(--sala); padding: .8rem 1.2rem;
  font-family: var(--mono); font-size: .78rem; text-decoration: none;
}
.saltar:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
}

/* ---------- títulos ---------- */
.titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.6rem);   /* hasta 89px */
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--papel);
  margin: 0 0 1.4rem;
  text-transform: lowercase;
}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: transparent;
}
.cabecera.scrolled {
  background: rgba(8,9,11,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(198,207,206,.14);
}
.cabecera__fila {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 76px;
}

.marca {
  display: inline-flex; align-items: baseline; gap: .18em;
  font-family: var(--display); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -.03em; text-decoration: none; color: var(--papel);
  margin-right: auto;
}
.marca__fv { color: var(--ambar); }
.marca__resto { color: var(--papel); opacity: .92; }

.nav { display: flex; gap: 1.9rem; }
.nav a {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--humo-2);
  padding: .35rem 0; position: relative;
  transition: color .22s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--cian);
  transition: right .28s var(--ease);
}
.nav a.active { color: var(--papel); }
.nav a.active::after { right: 0; }
@media (hover: hover) { .nav a:hover { color: var(--papel); } }

.cabecera__cta {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  color: var(--sala); background: var(--ambar);
  padding: .62rem 1.05rem;
  transition: background-color .22s var(--ease);
}
@media (hover: hover) { .cabecera__cta:hover { background: #ff8446; } }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  padding: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--papel); margin: 5px auto; width: 24px; }

@media (max-width: 900px) {
  .burger { display: block; }
  .cabecera__cta { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--sala-2);
    padding: 0 1.75rem;
    max-height: 0; overflow: hidden;
    transition: max-height .34s var(--ease);
    border-bottom: 1px solid rgba(198,207,206,.14);
  }
  .nav.open { max-height: 340px; }
  .nav a { padding: 1.05rem 0; border-bottom: 1px solid rgba(198,207,206,.1); font-size: .84rem; }
  .nav a:last-child { border-bottom: 0; }
}

/* ==========================================================================
   PORTADA — foto a sangre, texto encima. Velo + grano porque el original
   es de 1080px y en escritorio hay que escalarla.
   ========================================================================== */
.portada {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8rem 0 5.5rem;
  overflow: hidden;
  isolation: isolate;
}
.portada__foto {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 42%;
}
.portada__velo {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(8,9,11,.72) 0%, rgba(8,9,11,.24) 34%, rgba(8,9,11,.9) 88%),
    linear-gradient(80deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.1) 62%);
}
/* grano procedural: tapa la blandura del reescalado */
.grano {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

.portada__contenido { position: relative; }

.portada__titular {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 11.2vw, 10.5rem);  /* hasta 168px: salto de 14x sobre el mono */
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--papel);
  margin: 0 0 1.6rem;
}
.portada__titular em {
  font-style: normal;
  color: var(--ambar);
}
.portada__bajada {
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  color: var(--humo);
  margin: 0 0 2.4rem;
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

.boton {
  display: inline-block;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.5rem; border: 1px solid transparent; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.boton--accion { background: var(--ambar); color: var(--sala); font-weight: 500; }
.boton--fantasma { background: transparent; color: var(--papel); border-color: rgba(242,244,243,.42); }
.boton--ancho { width: 100%; text-align: center; }
@media (hover: hover) {
  .boton--accion:hover { background: #ff8446; }
  .boton--fantasma:hover { border-color: var(--cian); color: var(--cian); }
}

.portada__pie {
  position: absolute; left: 0; right: 0; bottom: 1.6rem;
  width: min(100% - 2.5rem, var(--caja)); margin-inline: auto;
  font-size: .75rem; color: rgba(198,207,206,.62);
}
@media (max-width: 640px) { .portada__pie { display: none; } }

/* ==========================================================================
   LA SELECCIÓN — la firma
   ========================================================================== */
.bin { padding: 6.5rem 0 5rem; background: var(--sala); }
@media (max-width: 640px) { .bin { padding: 4.5rem 0 2.5rem; } }

.bin__intro {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem;
}
.bin__intro .titulo { margin: 0; }
.bin__meta b { color: var(--cian); font-weight: 500; }

.visor { margin: 0 0 2.6rem; }
.visor__marco {
  position: relative;
  width: fit-content; max-width: 100%; margin-inline: auto;
  background: #000;
  border: 1px solid rgba(198,207,206,.16);
}
.visor__marco img {
  width: auto; max-width: 100%; height: clamp(320px, 56vh, 600px);
  object-fit: contain;
  transition: opacity .28s var(--ease);
}
.visor__marco.cambiando img { opacity: .25; }

.visor__sel {
  position: absolute; top: 12px; left: 12px;
  font-size: .75rem; letter-spacing: .18em; font-weight: 500;
  color: var(--sala); background: var(--cian);
  padding: .22rem .55rem;
}
.visor__ampliar {
  position: absolute; bottom: 12px; right: 12px;
  font-size: .75rem; letter-spacing: .1em;
  color: var(--papel); background: rgba(8,9,11,.72);
  border: 1px solid rgba(242,244,243,.34);
  padding: .42rem .8rem; cursor: pointer;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
@media (hover: hover) { .visor__ampliar:hover { border-color: var(--cian); color: var(--cian); } }

.visor__pie {
  max-width: 980px; margin: .9rem auto 0;
  display: flex; align-items: baseline; gap: .9rem;
  color: var(--humo-2); font-size: .95rem;
}
.visor__pie .mono { color: var(--cian); font-size: .78rem; }

/* --- la tira --- */
.tira { position: relative; padding-top: 1.5rem; }
.tira__linea {
  position: relative;
  height: 1px; background: rgba(198,207,206,.3);
  width: min(100% - 2.5rem, var(--caja)); margin: 0 auto 1rem;
}
.tira__cabezal {
  position: absolute; top: -4px; left: 0;
  width: 2px; height: 9px; background: var(--cian);
  transition: left .34s var(--ease);
}
.tira__lista {
  list-style: none; margin: 0;
  padding: 0 max(1.25rem, calc((100% - var(--caja)) / 2)) .6rem;
  display: flex; gap: .7rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tira__lista::-webkit-scrollbar { height: 4px; }
.tira__lista::-webkit-scrollbar-thumb { background: rgba(198,207,206,.28); }

.cuadro {
  position: relative;
  flex: 0 0 auto;
  width: 218px; height: 140px;
  padding: 0; border: 1px solid rgba(198,207,206,.16); background: #000;
  cursor: pointer; overflow: hidden;
  opacity: .55;
  transition: opacity .24s var(--ease), border-color .24s var(--ease);
}
.cuadro img { width: 100%; height: 100%; object-fit: cover; }
.cuadro__num {
  position: absolute; left: 7px; bottom: 6px;
  font-size: .75rem; color: var(--papel);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.cuadro.is-sel { opacity: 1; border-color: var(--cian); border-width: 2px; }
.cuadro.is-sel .cuadro__num { color: var(--cian); }
@media (hover: hover) { .cuadro:hover { opacity: 1; } }

@media (max-width: 640px) {
  .cuadro { width: 168px; height: 112px; }
  /* en movil la foto manda: alto natural, nada de bandas negras arriba y abajo */
  .visor__marco img { height: auto; width: 100%; max-height: 68vh; }
}

/* ==========================================================================
   QUÉ HAGO
   ========================================================================== */
.servicios { padding: 5rem 0 6rem; border-top: 1px solid rgba(198,207,206,.12); }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(198,207,206,.14); }
@media (max-width: 900px) { .rejilla { grid-template-columns: 1fr; } }

.carta { background: var(--sala); padding: 2.4rem 2rem 2.6rem; }
.carta h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.42rem; letter-spacing: -.02em; line-height: 1.15;
  color: var(--papel); margin: 0 0 .9rem;
}
.carta p { margin: 0; color: var(--humo-2); font-size: .99rem; }

/* ==========================================================================
   ALHAMA BAILA — el único sitio donde entra el magenta del cartel
   ========================================================================== */
.festival {
  background: var(--sala-2);
  padding: 5.5rem 0 6rem;
  border-top: 2px solid var(--magenta);
}
.festival__rejilla {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 900px) { .festival__rejilla { grid-template-columns: 1fr; gap: 2.4rem; } }

.festival__etiqueta { color: var(--magenta); margin: 0 0 1.1rem; }
/* el filete magenta del cartel: es el unico sitio de la web donde entra */
.festival__filete { height: 6px; width: 132px; background: var(--magenta); margin-bottom: 1.4rem; }
.festival__pie b { color: var(--magenta); font-weight: 500; }
.titulo--festival {
  font-size: clamp(3rem, 8.5vw, 7rem);
  color: var(--papel);
  margin-bottom: 1.5rem;
}
.festival__texto p { max-width: 44ch; color: var(--humo); }
.festival__pie { margin-top: 1.6rem; color: var(--humo-2); }

.festival__fotos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; align-items: start; }
.festival__foto { margin: 0; overflow: hidden; background: #000; }
.festival__foto img { width: 100%; height: 100%; object-fit: cover; }
.festival__foto--alta img { aspect-ratio: 3 / 4; }
.festival__fotos .festival__foto:last-child img { aspect-ratio: 3 / 4; object-position: center 68%; }

/* ==========================================================================
   QUIÉN ESTÁ DETRÁS
   ========================================================================== */
.sobre { padding: 6rem 0; }
.sobre__rejilla { display: grid; grid-template-columns: .85fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .sobre__rejilla { grid-template-columns: 1fr; gap: 2.2rem; } }

.sobre__foto { margin: 0; background: #000; overflow: hidden; }
.sobre__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 35%; }
.sobre__texto p { max-width: 50ch; }
.sobre__handle { margin-top: 1.8rem; }
.sobre__handle a { color: var(--cian); text-decoration: none; }
@media (hover: hover) { .sobre__handle a:hover { text-decoration: underline; } }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto { padding: 5rem 0 6.5rem; border-top: 1px solid rgba(198,207,206,.12); }
.contacto__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .contacto__rejilla { grid-template-columns: 1fr; gap: 2.4rem; } }

.contacto__intro p { max-width: 42ch; margin-bottom: 2rem; }

.formulario { display: grid; gap: 1.2rem; }
.campo { display: grid; gap: .45rem; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .campo--doble { grid-template-columns: 1fr; } }
.campo--doble > div { display: grid; gap: .45rem; }

.formulario label {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--humo-2);
}
.formulario input, .formulario select, .formulario textarea {
  font-family: var(--cuerpo); font-size: 1rem;
  background: var(--sala-2); color: var(--papel);
  border: 1px solid rgba(198,207,206,.24);
  padding: .82rem .9rem; width: 100%;
  transition: border-color .22s var(--ease);
}
.formulario textarea { resize: vertical; }
.formulario input::placeholder, .formulario textarea::placeholder { color: rgba(198,207,206,.42); }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--cian); }
.formulario .invalid { border-color: var(--magenta); }

.formulario__nota { margin: -.4rem 0 0; font-size: .75rem; text-transform: none; letter-spacing: .04em; }
.formulario__ok {
  margin: 0; padding: .9rem 1rem;
  background: rgba(31,199,190,.12); border-left: 2px solid var(--cian);
  color: var(--papel); font-size: .95rem;
}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: #000; padding: 4rem 0 1.5rem; border-top: 1px solid rgba(198,207,206,.14); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
@media (max-width: 760px) { .pie__rejilla { grid-template-columns: 1fr; gap: 1.8rem; } }

.marca--pie { font-size: 1.6rem; margin: 0 0 .8rem; }
.pie__col h2 {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cian); font-weight: 500;
  margin: 0 0 .8rem;
}
.pie__col p { margin: 0; color: var(--humo-2); font-size: .95rem; line-height: 1.85; }
.pie__col a { color: var(--humo); text-decoration: none; }
@media (hover: hover) { .pie__col a:hover { color: var(--cian); } }

.pie__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.8rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(198,207,206,.12);
}
.pie__legal { display: flex; gap: 1.2rem; }
.pie__legal a {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--humo-2); text-decoration: none;
}
@media (hover: hover) { .pie__legal a:hover { color: var(--papel); } }
.pie__copy { margin: 0; margin-left: auto; font-size: .82rem; color: var(--humo-2); }
.demo-aviso {
  flex-basis: 100%; margin: .4rem 0 0;
  font-size: .76rem; color: rgba(198,207,206,.5);
}

/* ==========================================================================
   BARRA MÓVIL
   ========================================================================== */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    border-top: 1px solid rgba(198,207,206,.18);
  }
  .barra-movil a {
    font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
    text-transform: uppercase; text-decoration: none;
    padding: 1rem; text-align: center;
  }
  .barra-movil__ig { background: var(--sala-2); color: var(--papel); }
  .barra-movil__dm { background: var(--ambar); color: var(--sala); font-weight: 500; }
  body { padding-bottom: 54px; }
  .pie { padding-bottom: 2.5rem; }
}

/* ==========================================================================
   LIGHTBOX (el comportamiento lo pone grou-runtime.css)
   ========================================================================== */
.lightbox img { max-width: 92vw; max-height: 86vh; }
.lightbox__cerrar {
  position: absolute; top: 18px; right: 20px;
  background: none; border: 0; color: var(--papel);
  font-size: 2.2rem; line-height: 1; cursor: pointer; padding: .2rem .5rem;
}