/* ============================================================
   ÁLVARO CAÑADAS — Hoja de estilos
   ------------------------------------------------------------
   Paleta del dossier (sección 07): negro / carbón / gris / blanco.

   CÓMO ESTÁ ORGANIZADO ESTE ARCHIVO:
     1. Variables y estilos base (colores, fuentes, resets)
     2. Componentes reutilizables (botones)
     3. Cada sección de la página, en el mismo orden que el HTML
     4. Animación "reveal" (aparición al hacer scroll)
     5. Responsive (adaptación a tablet y móvil) al final

   NOMENCLATURA DE CLASES (metodología BEM simplificada):
     .bloque          → componente (ej: .card)
     .bloque__parte   → elemento dentro del componente (ej: .card__media)
     .bloque--variante→ variación del componente (ej: .btn--light)
     .is-*            → estados que activa/desactiva el JavaScript
   ============================================================ */

/* :root define VARIABLES CSS: valores con nombre que se reutilizan
   en todo el archivo con var(--nombre). Si el cliente quiere cambiar
   un color o una fuente, se toca solo aquí. */
:root {
  --negro: #0a0a0a;
  --carbon-2: #1f1f1f;
  --gris: #8a8a8a;
  --gris-claro: #d4d4d4;
  --blanco: #ffffff;
  --hueso: #f5f4f2;

  --font-display: "Archivo Expanded", "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;

  /* Ancho máximo del contenido y padding lateral.
     clamp(mínimo, preferido, máximo) hace el valor "fluido":
     crece con la pantalla pero nunca se sale de esos límites. */
  --max: 1200px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

/* Reset básico: quitamos márgenes por defecto del navegador y hacemos
   que el padding/borde se incluya dentro del ancho de cada caja
   (box-sizing: border-box), que es mucho más predecible. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Al pulsar un enlace del menú (#contacto, #galeria...) la página
   se desplaza suavemente en vez de saltar de golpe. */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--negro);
  color: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.2; }

p { max-width: 62ch; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Botones ----------
   Un estilo base (.btn) y tres variantes de color según el fondo
   donde se usen: --light (fondo claro), --ghost (transparente con
   borde) y --dark (fondo oscuro). */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn--light { background: var(--blanco); color: var(--negro); }
.btn--light:hover { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn--ghost { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color: var(--blanco); }
.btn--dark { background: var(--negro); color: var(--blanco); }
.btn--dark:hover { background: var(--carbon-2); }

/* ---------- Menú de navegación ----------
   position: fixed lo deja "pegado" arriba aunque hagas scroll.
   Empieza transparente (se ve sobre la foto de portada) y el JS
   le añade .is-scrolled al bajar para darle fondo oscuro. */
.nav {
  position: fixed;
  inset: 0 0 auto 0; /* atajo para: top 0, derecha 0, abajo auto, izquierda 0 */
  z-index: 1000;     /* por encima del resto de la pagina y del panel movil */
  /* Degradado oscuro permanente (oscuro arriba, transparente abajo): da
     contraste al logo y al hamburguesa sobre CUALQUIER sección, sea clara
     u oscura, sin depender de detectar el scroll. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  transition: background 0.3s, box-shadow 0.3s;
}
/* Al bajar más de 40px, el JavaScript añade esta clase y el fondo pasa a
   ser oscuro sólido y uniforme, para máxima legibilidad de los enlaces. */
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--blanco);
  text-decoration: none;
  /* Sombra sutil para que el nombre se lea aunque el menú esté en modo
     transparente sobre una sección de fondo claro. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.nav__links a {
  color: var(--gris-claro);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--blanco); }
.nav__cta {
  border: 1.5px solid var(--blanco);
  padding: 0.55rem 1.2rem;
  color: var(--blanco) !important;
  transition: background 0.2s, color 0.2s !important;
}
.nav__cta:hover { background: var(--blanco); color: var(--negro) !important; }

/* Botón hamburguesa: oculto en escritorio (display: none),
   se muestra en móvil desde el bloque responsive del final.
   Los 3 <span> son las 3 rayitas; con .is-open se transforman en X. */
.nav__burger {
  display: none;
  position: relative;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1002;
}
.nav__burger span {
  width: 26px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  /* Halo oscuro alrededor de cada rayita para que se vean SIEMPRE, aunque
     el menú esté transparente sobre una sección de fondo claro (bug en móvil
     al salir de la portada). Doble capa para un contorno denso; no se nota
     sobre fondos oscuros. */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s, opacity 0.3s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Portada (hero) ----------
   Ocupa toda la altura de la pantalla con la foto de fondo y el
   texto encima, apoyado en la parte inferior. */
.hero {
  position: relative;
  /* 100svh = 100% de la altura visible de la pantalla.
     La "s" (small) evita el salto que provoca la barra del
     navegador en móviles al hacer scroll. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* la foto llena toda la pantalla */
  /* object-position controla qué parte se ve cuando la foto se recorta.
     "center 30%" muestra al ciclista y algo de paisaje sin cortar la cabeza. */
  object-position: center 30%;
}
/* En monitores grandes la foto se recorta más arriba y abajo; bajamos un
   poco el encuadre para que el ciclista quede mejor centrado en pantalla. */
@media (min-width: 1600px) {
  .hero__foto { object-position: center 42%; }
}
/* Capa de degradado oscuro sobre la foto para que el texto blanco
   se lea bien, sea cual sea la imagen que se ponga. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.15) 45%, rgba(10,10,10,0.88) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(4rem, 10vh, 7rem);
}
.hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gris-claro);
  margin-bottom: 1.2rem;
}
.hero__title {
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
/* "quién soy" va en <em>: aquí lo convertimos en texto hueco
   (solo contorno blanco), un recurso muy editorial/deportivo. */
.hero__title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--blanco);
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  right: var(--pad);
  z-index: 2;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.hero__scroll span {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--blanco);
  animation: scrollhint 2s ease-in-out infinite;
}
@keyframes scrollhint {
  0% { top: -30%; }
  100% { top: 110%; }
}

/* ---------- Secciones ----------
   El dossier pide alternar bloques claros y oscuros: cada <section>
   del HTML lleva .section--light o .section--dark. */
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section--compact { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section--light { background: var(--hueso); color: var(--negro); }
.section--dark { background: var(--negro); color: var(--blanco); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gris);
  margin-bottom: 1rem;
}

.lead { font-size: 1.1rem; color: var(--gris-claro); margin-bottom: 3rem; }
.section--light .lead { color: #444; }

/* ---------- Layout a dos columnas (sobre mí / contacto) ----------
   CSS Grid: dos columnas, la derecha un 15% más ancha (1fr / 1.15fr).
   "fr" = fracción del espacio disponible.
   En móvil pasa a una sola columna (ver bloque responsive). */
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;   /* proporción vertical fija, tipo retrato */
  object-fit: cover;     /* la foto rellena el hueco sin deformarse */
}
.split__text p { margin-bottom: 1.1rem; color: #333; }
.section--dark .split__text p { color: var(--gris-claro); }

.quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  line-height: 1.25;
  margin-top: 2rem;
  padding-left: 1.2rem;
  border-left: 4px solid var(--negro);
}

/* ---------- Tarjetas de disciplinas ----------
   Rejilla de 3 columnas iguales. Al pasar el ratón, la foto hace
   un zoom suave (transform: scale en .card:hover). */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: 3rem;
}
.card__media { overflow: hidden; margin-bottom: 1.2rem; }
.card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .card__media img { transform: scale(1.04); }
.card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--gris);
  display: block;
  margin-bottom: 0.4rem;
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--gris-claro); font-size: 0.95rem; }

/* ---------- Galería ----------
   Galería "justificada" con flexbox: todas las fotos tienen la misma
   altura y se estiran (flex-grow) para llenar cada fila por completo,
   así NUNCA queda un hueco, tenga las fotos que tenga.

   Para añadir o quitar fotos basta con copiar/borrar un <figure> en el
   HTML: la galería se recoloca sola sin tocar este CSS. */
.gallery {
  max-width: var(--max);    /* limita el ancho para que las fotos no salgan gigantes */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 3rem var(--pad) 0;
}
.gallery__item {
  flex: 1 1 260px;          /* base 260px, pero crece para rellenar la fila */
  height: 380px;
  overflow: hidden;
  margin: 0;
  cursor: pointer;          /* indica que la foto se puede abrir en grande */
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* la foto rellena su hueco sin deformarse */
  display: block;
  transition: transform 0.6s ease;
}
.gallery__item:hover img { transform: scale(1.05); }

/* ---------- Formatos de colaboración (sección "Para marcas") ----------
   Lista numerada en 2 columnas con separadores finos, estilo dossier. */
.formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 3.5rem;
}
.format {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.2rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.format span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--gris);
  flex-shrink: 0;
}
.format p { color: var(--gris-claro); font-size: 0.98rem; }

.sectors h3 {
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: var(--gris);
}
.sectors ul { list-style: none; }
.sectors li {
  padding: 0.7rem 0;
  color: var(--gris-claro);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sectors li strong { color: var(--blanco); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; }

/* ---------- Pilares del diferencial ----------
   3 columnas con una barra negra arriba a modo de subrayado. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}
.pillar {
  border-top: 4px solid var(--negro);
  padding-top: 1.4rem;
}
.pillar h3 { margin-bottom: 0.8rem; }
.pillar p { color: #444; font-size: 0.98rem; }

/* ---------- Redes ---------- */
.socials-wrap { text-align: center; }
.socials-wrap .eyebrow { margin-bottom: 0.8rem; }
.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.social {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--blanco);
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 0.9rem 1.8rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.social:hover {
  background: var(--blanco);
  color: var(--negro);
  border-color: var(--blanco);
}

/* ---------- Contacto / formulario ----------
   El formulario usa Grid con gap para separar los campos sin
   necesidad de márgenes manuales en cada uno. */
.split--contact { align-items: start; }
.contact-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--negro);
  text-decoration: none;
  border-bottom: 3px solid var(--negro);
  margin-top: 1rem;
}

.form { display: grid; gap: 1.2rem; }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.form label { display: grid; gap: 0.4rem; }
.form label span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #555;
}
.form input,
.form select,
.form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  background: var(--blanco);
  border: 1.5px solid #ccc;
  color: var(--negro);
  transition: border-color 0.2s;
  width: 100%;
}
.form textarea { resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--negro);
}
.form .btn { justify-self: start; }

/* Aviso que aparece bajo el botón tras enviar (lo activa el JS) */
.form__aviso {
  font-size: 0.9rem;
  color: #444;
  max-width: 100%;
  margin-top: -0.3rem;
}
.form__aviso[hidden] { display: none; }

/* ---------- Sponsors / carrusel de logos ----------
   Sección con fondo blanco (para que los logos, que tienen partes
   oscuras, se vean bien) y una cinta de logos que se desplaza sola. */
.sponsors { background: #fff; overflow: hidden; }
.sponsors__head { text-align: center; margin-bottom: 3.5rem; }
/* El eyebrow y el párrafo son <p>, que por defecto tienen un ancho máximo
   (regla global) y se quedaban pegados a la izquierda. Con margin auto
   centramos sus bloques para que todo quede alineado al centro. */
.sponsors__head .eyebrow { margin: 0 auto 1rem; }
.sponsors__head h2 { margin-bottom: 1.2rem; }
.sponsors__head p { max-width: 46ch; margin: 0 auto; color: #444; }
.sponsors__head .btn { margin-top: 1.8rem; }

/* Ventana del carrusel: oculta lo que se sale y difumina los bordes
   izquierdo/derecho para que los logos entren y salgan con suavidad. */
.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* La cinta con los logos. width: max-content deja que ocupe lo que
   necesite; la animación la desplaza hacia la izquierda en bucle. */
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: marquee 22s linear infinite;
}
.marquee__logo {
  width: auto;
  flex-shrink: 0;
}
/* Cada logo lleva una altura distinta para que TODOS pesen visualmente
   igual en la línea: Carboxtrem ocupa menos su caja (símbolo + texto
   apilados), así que va algo más grande; Cycling Monkey, más compacto.
   El selector [src*="..."] los distingue por el nombre del archivo. */
.marquee__logo[src*="carboxtrem"]    { height: 74px; }
.marquee__logo[src*="cyclingmonkey"] { height: 50px; }
/* Se desplaza media cinta (-50%): como hay dos bloques de logos idénticos,
   al llegar a la mitad la copia queda en la posición inicial y el bucle
   se ve continuo, sin saltos. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Al pasar el ratón por encima, el carrusel se pausa. */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Si el usuario prefiere sin movimiento, mostramos los logos quietos. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--negro);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3rem 0;
}
.footer__inner { text-align: center; }
.footer__logo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 auto 0.4rem;
}
.footer__tag {
  color: var(--gris);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 auto 1.2rem;
}
.footer__copy { color: #555; font-size: 0.8rem; margin: 0 auto; }
/* Crédito del desarrollador: discreto, sin llamar la atención */
.footer__credito {
  color: #444;
  font-size: 0.75rem;
  margin: 0.9rem auto 0;
}
.footer__credito a {
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.2s, border-color 0.2s;
}
.footer__credito a:hover {
  color: var(--blanco);
  border-color: var(--blanco);
}

/* ---------- Animación de aparición (reveal) ----------
   Funciona en pareja con el JavaScript:
     - Aquí: los elementos .reveal empiezan invisibles y 24px
       más abajo de su posición final.
     - JS (main.js): cuando el elemento entra en pantalla le añade
       .is-visible, y la "transition" anima el cambio suavemente. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Si el usuario tiene activado "reducir movimiento" en su sistema
   (por mareos, accesibilidad...), desactivamos las animaciones. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Lightbox (visor de galería) ----------
   Capa fija que cubre toda la pantalla por encima de todo (z-index alto).
   El atributo hidden del HTML la oculta; el JS lo quita para mostrarla. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: aparecer 0.25s ease;
}
.lightbox[hidden] { display: none; }   /* refuerza el ocultado en todos los navegadores */

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* La foto: se ve entera (contain) sin superar el tamaño de la pantalla */
.lightbox__img {
  max-width: 88vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

/* Botones de cerrar (arriba dcha.) y flechas (a los lados).
   Diseño discreto: círculos pequeños y semitransparentes que se
   iluminan un poco al pasar el ratón. flex centra el símbolo dentro. */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--blanco);
  cursor: pointer;
  line-height: 0;                 /* evita que el símbolo se descentre */
  transition: background 0.2s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox__close {
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.5rem;
}
/* Las flechas se colocan a los lados y centradas en vertical */
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
}
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }

/* ============================================================
   RESPONSIVE
   Las @media query aplican estilos SOLO cuando la pantalla mide
   menos que el ancho indicado. Diseñamos primero para escritorio
   y aquí adaptamos a tablet (900px) y móvil (760px).
   ============================================================ */

/* Tablet: los layouts de varias columnas pasan a 1 o 2 */
@media (max-width: 900px) {
  .split, .split--contact { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .formats { grid-template-columns: 1fr; }
  .cards { gap: 2rem; }
  /* Galería en tablet: fotos algo más bajas (el reparto lo sigue haciendo flex) */
  .gallery__item { height: 320px; }
}

/* Móvil: aparece la hamburguesa y el menú se convierte en un
   panel a pantalla completa que entra desde la derecha */
@media (max-width: 760px) {
  .nav {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: none;
  }

  .nav.is-open {
    height: 100vh;
    height: 100dvh;
    background: var(--negro);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav.is-open .nav__burger {
    position: fixed;
    top: 1.1rem;
    right: var(--pad);
  }

  .nav__burger { display: flex; }
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: var(--negro);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    /* Oculto en móvil hasta que se pulsa el botón hamburguesa. Usamos
       display (no transform ni opacity) para que mostrar/ocultar sea
       instantáneo y 100% fiable en cualquier móvil. */
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    position: relative;
    z-index: 1;
    color: var(--blanco);
    font-size: 1.1rem;
  }
  .form__row { grid-template-columns: 1fr; }
  /* Galería en móvil: cada foto ocupa todo el ancho y se ve COMPLETA
     (altura automática, sin recortar), respetando su proporción vertical. */
  .gallery__item { flex-basis: 100%; height: auto; }
  .gallery__item img { height: auto; }

  /* En móvil los botones del visor se pegan un poco más a los bordes */
  .lightbox { padding: 1rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__close { top: 1rem; right: 1rem; }
}