.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: var(--r8);
  border: none; cursor: pointer; transition: background .2s, transform .1s;
}
.btn-primary { background: var(--bd-sand-400); color: var(--bd-navy-950); }
.btn-primary:hover { background: var(--bd-sand-300); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r16);
  padding: 32px;
}

/* ── Cabecera a sangre de páginas interiores ──────────────────────────────────
   Mismo lenguaje que bio.design: banda fotográfica ancha, antetítulo en
   mayúsculas espaciadas y el titular encima, alineado abajo a la izquierda. */
.page-hero {
  position: relative;
  min-height: clamp(280px, 38vw, 440px);
  display: flex;
  align-items: flex-end;
  background-color: var(--bd-navy-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* El degradado va en ::before para que el contenido (z-index 1) quede por encima
   sin necesidad de tocar el apilado del resto de la página. */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(6,14,26,.92) 0%,
    rgba(6,14,26,.62) 38%,
    rgba(6,14,26,.20) 70%,
    rgba(6,14,26,.35) 100%
  );
}
.page-hero > .container {
  position: relative;
  z-index: 1;
  padding-bottom: 44px;
  padding-top: 80px;
  width: 100%;
}
.page-hero-eyebrow {
  display: block;
  font-family: var(--font-h);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--bd-sand-300);
  /* El antetítulo cae más arriba que el titular, donde el degradado ya es débil, y
     sobre zonas claras de la foto (un techo de paja, arena al sol) se volvía ilegible.
     La sombra lo despega del fondo sin recuadrarlo. */
  text-shadow: 0 1px 3px rgba(6,14,26,.95), 0 2px 16px rgba(6,14,26,.85);
  margin-bottom: 12px;
}
.page-hero h1 {
  margin-bottom: 12px;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(6,14,26,.7);
}
.page-hero-sub {
  margin: 0;
  max-width: 56ch;
  font-size: 17px;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 14px rgba(6,14,26,.8);
}
/* La primera sección tras la cabecera no necesita tanto aire por arriba. */
.page-hero + section { padding-top: 64px; }

/* ── Bloques de foto y texto alternados ──────────────────────────────────────
   La tarjeta de texto se solapa sobre la foto, alternando lado, como los
   overlap-left / overlap-right de la web oficial. */
.feature-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
}
.feature-split:last-child { margin-bottom: 0; }
.feature-split-media {
  border-radius: var(--r16);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.feature-split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.feature-split-body {
  position: relative;
  z-index: 1;
  margin-left: -56px;
  background: rgba(10,22,40,.94);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r16);
  padding: 36px;
  backdrop-filter: blur(6px);
}
/* Al invertir hay que invertir también las proporciones de las columnas: si no, la
   foto se queda con la columna estrecha y los dos bloques salen descompensados. */
.feature-split.reverse { grid-template-columns: .95fr 1.05fr; }
.feature-split.reverse .feature-split-media { order: 2; }
.feature-split.reverse .feature-split-body {
  order: 1;
  margin-left: 0;
  margin-right: -56px;
}
.feature-split-body h2 { font-size: clamp(21px, 2.4vw, 28px); }
.feature-split-body p:last-child { margin-bottom: 0; }

/* En móvil se apila y desaparece el solape, que ahí no aporta y aprieta el texto. */
@media (max-width: 860px) {
  /* .reverse se repite aquí a propósito: `.feature-split.reverse` tiene dos clases y
     gana en especificidad a `.feature-split`, así que sin esta línea el bloque
     invertido NO se apila y la foto se queda en unos 115px de ancho. */
  .feature-split,
  .feature-split.reverse { grid-template-columns: 1fr; margin-bottom: 36px; }
  .feature-split-body,
  .feature-split.reverse .feature-split-body {
    margin: -28px 16px 0;
    padding: 28px;
  }
  .feature-split.reverse .feature-split-media { order: 0; }
  .feature-split.reverse .feature-split-body { order: 0; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.gallery-item {
  border-radius: var(--r16);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

.gallery-filters { display: flex; gap: 10px; margin-bottom: 28px; }
.gallery-filter-btn {
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--r999);
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.6);
  cursor: pointer; transition: all .15s;
}
.gallery-filter-btn.active, .gallery-filter-btn:hover { background: var(--bd-sand-400); color: var(--bd-navy-950); border-color: var(--bd-sand-400); }

.quiz-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r8);
  padding: 12px 16px;
  font-size: 15px;
  color: #fff;
  font-family: var(--font-b);
  transition: border-color .2s;
}
.quiz-input:focus { outline: none; border-color: var(--bd-sand-400); }
.quiz-input::placeholder { color: rgba(255,255,255,.25); }
.quiz-step h2 { margin-bottom: 20px; }
.quiz-step label { display: block; font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.quiz-success { text-align: center; padding: 20px; }

/* El fondo es la foto real de la portada del catálogo: bokeh azul y, abajo del todo,
   la banda de purpurina dorada. Se ancla abajo para que esa banda quede siempre
   visible bajo el logo, como en la referencia de marca. */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  /* Sin este padding, en móvil la línea "by Apavi Green…" llega pegada a los bordes.
     Las capas de fondo van en absolute inset:0, así que no les afecta. */
  padding: 0 20px;
  background-color: var(--bd-navy-950);
  background-image: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Cáusticas de agua: dos capas de la misma textura tileable moviéndose en
   direcciones y a velocidades distintas. Su interferencia es lo que da la sensación
   de agua viva sobre el fondo de la piscina. Cada capa se desplaza exactamente el
   tamaño de un tile, así que el bucle no tiene salto. */
.hero-water {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* En una piscina real la luz se concentra en el fondo, no en toda la columna de
     agua. La máscara concentra las cáusticas en la mitad inferior: queda más creíble
     y deja limpia la zona del logotipo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, rgba(0,0,0,.35) 42%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 8%, rgba(0,0,0,.35) 42%, #000 78%);
}
.hero-water::before,
.hero-water::after {
  content: '';
  position: absolute; inset: -40%;
  background-image: url('../img/caustics.png');
  background-repeat: repeat;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Celdas grandes: con tiles pequeños el patrón se lee como una maraña y tapa el
   bokeh de la foto, en vez de parecer luz sobre el fondo de la piscina. */
.hero-water::before {
  background-size: 900px 900px;
  opacity: .13;
  animation: caustics-drift-a 34s linear infinite;
}
.hero-water::after {
  background-size: 620px 620px;
  opacity: .07;
  animation: caustics-drift-b 47s linear infinite;
}
@keyframes caustics-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(900px, -900px, 0); }
}
@keyframes caustics-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-620px, -1240px, 0); }
}

/* Velo de profundidad: oscurece el centro para que el logo y los botones mantengan
   contraste sobre la foto, sin tapar la banda dorada del borde inferior. */
.hero-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(6,14,26,.72) 0%, rgba(6,14,26,.30) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(6,14,26,.55) 0%, transparent 30%);
}
/* Emblema oficial: proporción 190.05 x 111.43 (ratio 1.706), vectorizado del catálogo. */
.hero-emblem-stage {
  perspective: 800px;
  width: clamp(124px, 16vw, 168px);
  aspect-ratio: 190.05 / 111.43;
  margin-bottom: 30px;
  z-index: 1;
}
.hero-emblem {
  width: 100%; height: 100%;
  animation: hero-spin 6s linear infinite;
  transform-style: preserve-3d;
}
@keyframes hero-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
/* Wordmark oficial: proporción 359.24 x 108.93 (ratio 3.298). Va como imagen, no
   como texto con una fuente aproximada, para conservar las letras reales de marca. */
.hero-wordmark {
  margin: 0;
  line-height: 0;
  z-index: 1;
}
.hero-wordmark img {
  width: clamp(250px, 40vw, 420px);
  height: auto;
}
/* Sobre la foto hace falta más contraste que sobre un fondo plano. */
.hero-by-line {
  z-index: 1;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 12px rgba(6,14,26,.9);
  margin-top: 10px;
}
.hero-by-line strong { color: #fff; }
.hero-cta-row { z-index: 1; display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-emblem,
  .hero-water::before,
  .hero-water::after { animation: none; }
}