/* ============================================================
   BRUMA — pieza de demostración de Golden Deer Tech
   Marca ficticia (ginebra botánica).
   Registro cinematográfico: negro pleno, un momento-héroe del
   producto con puesta en escena (luz + viñeta), botella con
   volumen en CSS, escala dramática y revelado al hacer scroll.
   El techo real (nivel gran marca) lo cruza la imagen/vídeo.
   ============================================================ */

:root {
  --bg: #0b120f;
  --bg-2: #131e19;
  --bone: #e8e3d6;
  --muted: #8b968d;
  --faint: #69736b;
  --acc: #a7c5b2;
  --acc-deep: #7fa791;
  --line: rgba(232, 227, 214, 0.14);
  --line-soft: rgba(232, 227, 214, 0.07);

  --display: "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 72rem;
  --gutter: 1.5rem;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

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

a {
  color: inherit;
}

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

::selection {
  background: var(--acc);
  color: var(--bg);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
}

.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1000;
  padding: 0.6rem 0.9rem;
  background: var(--bone);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 150ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Barra de demo --------------------------------------- */
.demo-bar {
  position: relative;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--bone);
  color: var(--bg);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.demo-bar a {
  color: var(--bg);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/* --- Cabecera -------------------------------------------- */
.b-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 18, 15, 0.72);
  backdrop-filter: blur(10px);
}

.b-logo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  text-decoration: none;
}

.b-nav {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.b-nav > a:not(.b-buy) {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}

.b-nav > a:not(.b-buy):hover {
  color: var(--bone);
}

.b-buy {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.b-buy:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--bg);
}

.button.b-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bone);
}

.b-buy-lg {
  min-height: 3.3rem;
  padding-inline: 1.7rem;
  background: var(--bone);
  color: var(--bg);
  font-weight: 600;
}

.b-buy-lg:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--bg);
}

.b-burger {
  display: none;
  flex-direction: column;
  gap: 0.34rem;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}

.b-burger span {
  width: 1.2rem;
  height: 1px;
  background: var(--bone);
  transition: transform 160ms ease, opacity 160ms ease;
}

.b-burger[aria-expanded="true"] span:first-child {
  transform: translateY(0.35rem) rotate(45deg);
}

.b-burger[aria-expanded="true"] span:last-child {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* --- Secciones ------------------------------------------- */
.b-section {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 8rem) 0;
}

.b-section-head {
  margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
}

.b-section-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.b-section-head p {
  max-width: 30rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.b-kicker {
  margin: 0 0 1.4rem;
  color: var(--acc);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* --- Hero: foto de producto + niebla animada por encima ---- */
.b-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* Vídeo de la botella (escena real con humo). Póster = imagen fija. */
.b-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Disuelve la marca de agua del generador. Como object-fit:cover la
   remapea a distinta altura según el aspecto del hero, usamos una FRANJA
   vertical de desenfoque sobre el humo de la derecha que cubre todo el
   rango donde puede caer. Se funde en el humo, sin blob oscuro. */
.b-wm {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  -webkit-mask: radial-gradient(ellipse at center, #000 42%, transparent 80%);
  mask: radial-gradient(ellipse at center, #000 42%, transparent 80%);
}

/* Niebla animada por encima de la foto (mezcla aditiva = suma luz) */
.b-fog {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Viñeta cinematográfica (oscurece bordes, contiene la escena) */
.b-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(130% 105% at 62% 50%, transparent 42%, rgba(0, 0, 0, 0.34) 80%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(to right, rgba(6, 10, 8, 0.55) 0%, rgba(6, 10, 8, 0.18) 34%, transparent 58%);
}

.b-hero-inner {
  position: relative;
  z-index: 3;
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vh, 7rem);
}

.b-hero-copy {
  max-width: 33rem;
}

.b-hero h1 {
  margin: 0 0 1.7rem;
  font-size: clamp(3rem, 6.6vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.b-hero h1 em {
  font-style: normal;
  color: var(--acc);
}

.b-claim {
  max-width: 32rem;
  margin: 0 0 2.4rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.75;
}

.b-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

.b-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bone);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.b-textlink:hover {
  color: var(--acc);
}

/* Fundido a negro de la base del hero: cose la costura con la sección
   de abajo (mismo --bg), sin aclarar el fondo. */
.b-fogfront {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 74%,
    rgba(11, 18, 15, 0.7) 90%,
    var(--bg) 100%);
}

/* --- El destilado ---------------------------------------- */
.b-destilado {
  border-top: 1px solid var(--line);
}

.b-dest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.b-dest-copy {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  font-weight: 300;
}

.b-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.b-stats > div {
  padding: 1.3rem;
  background: var(--bg);
}

.b-stats dt {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-stats dd {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
}

.b-stats dd span {
  margin-left: 0.15rem;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* --- Botánicos ------------------------------------------- */
.b-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.b-notes li {
  padding: 1.6rem 1.4rem;
  background: var(--bg);
}

.b-notes span {
  color: var(--acc);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.b-notes b {
  display: block;
  margin: 0.7rem 0 0.3rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.b-notes small {
  color: var(--muted);
  font-size: 0.86rem;
}

.b-notes-note {
  margin: 1.4rem 0 0;
  color: var(--faint);
  font-size: 0.86rem;
  font-style: italic;
}

/* --- Cómo servir ----------------------------------------- */
.b-serves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.b-serve {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
}

.b-serve-i {
  margin: 0 0 1rem;
  color: var(--acc);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.b-serve h3 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
}

.b-serve p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

/* --- Comprar --------------------------------------------- */
.b-buy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--acc-deep);
}

.b-buy-copy h2 {
  margin: 0.6rem 0 0.8rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  letter-spacing: 0.02em;
}

.b-buy-copy p {
  margin: 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.b-buy-action {
  text-align: right;
}

.b-price {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
}

.b-price span {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.b-buy-note {
  margin: 0.9rem 0 0;
  color: var(--faint);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.b-buy-note.is-done {
  color: var(--acc);
}

/* --- Pie ------------------------------------------------- */
.b-footer {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 3rem;
  border-top: 1px solid var(--line);
}

.b-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.b-logo-sm {
  font-size: 1.15rem;
}

.b-legal {
  margin: 0;
  color: var(--acc);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.b-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
}

.b-footer-bottom p {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.b-footer-bottom b {
  color: var(--bone);
}

.b-credit a {
  color: var(--acc);
  text-decoration: none;
}

.b-credit a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/* --- Verificación de edad (age gate) --------------------- */
.b-age {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 10, 8, 0.94);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.js .b-age {
  display: flex;
}

.b-age.is-done {
  display: none;
}

/* Bloquea el scroll del fondo mientras el gate está activo */
.b-age-lock {
  overflow: hidden;
}

.b-age-panel {
  width: min(30rem, 100%);
  padding: clamp(2rem, 5vw, 3.2rem);
  border: 1px solid var(--acc-deep);
  background: var(--bg);
  text-align: center;
}

.b-age-brand {
  margin: 0 0 1.6rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--bone);
}

.b-age-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
}

.b-age-lede {
  margin: 0.8rem auto 1.9rem;
  max-width: 24rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.b-age-fields {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.b-age-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.b-age-fields input {
  width: 4rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--bone);
  font-family: var(--display);
  font-size: 1.3rem;
  text-align: center;
  letter-spacing: 0.06em;
}

.b-age-fields label:last-child input {
  width: 6rem;
}

.b-age-fields input:focus-visible {
  border-color: var(--acc);
  outline: none;
}

.b-age-enter {
  width: 100%;
}

.b-age-msg {
  margin: 1.1rem 0 0;
  color: #d8a2a2;
  font-size: 0.86rem;
}

.b-age-legal {
  margin: 1.9rem auto 0;
  max-width: 24rem;
  color: var(--faint);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

/* --- Revelado al hacer scroll (atmósfera) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .b-age {
    animation: b-age-in 260ms ease both;
  }

  @keyframes b-age-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .b-reveal {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .b-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 60rem) {
  .b-burger {
    display: flex;
  }

  .b-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.2rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }

  .js .b-nav {
    display: none;
  }

  .js .b-nav.is-open {
    display: flex;
  }

  .b-nav > a:not(.b-buy) {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .b-buy {
    margin-top: 0.8rem;
    text-align: center;
  }

  /* Botella arriba-derecha, texto abajo sobre la zona oscura */
  .b-hero-bg {
    object-position: 64% 24%;
  }

  .b-hero-inner {
    align-items: flex-end;
    padding-block: 6rem 3.5rem;
  }

  .b-hero-copy {
    max-width: none;
    text-shadow: 0 1px 24px rgba(6, 10, 8, 0.7);
  }

  /* Refuerza la legibilidad del texto sobre la foto en móvil */
  .b-vignette {
    background:
      radial-gradient(130% 105% at 62% 30%, transparent 40%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.6) 100%),
      linear-gradient(to top, rgba(6, 10, 8, 0.82) 4%, rgba(6, 10, 8, 0.3) 34%, transparent 60%);
  }

  .b-dest-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .b-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  /* En móvil (pantalla estrecha y muy alta) object-fit:cover amplía la
     escena y la botella ocupa la derecha del hero. Se baja un poco la altura
     (72svh) para que la botella entre entera, y el texto se sube (flex-start)
     y se acota a la mitad izquierda para que no se cruce con la botella.
     object-position 64% 26% mantiene la marca de agua del generador fuera del
     recorte visible (el parche .b-wm asume centro). */
  .b-hero,
  .b-hero-inner {
    min-height: 72svh;
  }

  .b-hero-inner {
    align-items: flex-start;
  }

  .b-hero-bg {
    object-position: 64% 26%;
  }

  /* La lede (el texto más largo) se queda a la izquierda, despejada de la
     botella. En % para que aguante en cualquier ancho de móvil. */
  .b-claim {
    max-width: 57%;
  }

  .b-serves,
  .b-notes,
  .b-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .b-buy-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .b-buy-action {
    text-align: left;
  }

  .b-buy-action .button {
    width: 100%;
  }
}

/* --- Movimiento reducido --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}