/* ELIXIR GODS · tienda pre-lanzamiento
   Manual de marca: azul medianoche dominante, crema para el contenido, oro solo como acento.
   Serif = mitología y marca; sans = información. Menos decoración, movimiento lento. */

:root {
  --midnight: #0B1633;
  --midnight-deep: #070F26;
  --midnight-up: #0F1D43;
  --cream: #F4EFE6;
  --cream-2: rgba(244, 239, 230, 0.72);
  --cream-3: rgba(244, 239, 230, 0.5);
  --gold: #B8975A;
  --gold-soft: rgba(184, 151, 90, 0.55);
  --gold-faint: rgba(184, 151, 90, 0.08);
  --line: rgba(244, 239, 230, 0.12);
  --line-strong: rgba(244, 239, 230, 0.26);

  /* Toda la web en Manrope (decisión de Arnau, 02/10/2026). Las dos variables se conservan
     para no tocar cada regla: --serif es la de titulares, --sans la de texto. */
  --serif: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* El cielo vive en el lienzo: profundidad casi invisible, más claro hacia el centro */
html {
  background:
    radial-gradient(120% 85% at 50% 32%, var(--midnight-up) 0%, var(--midnight) 55%, var(--midnight-deep) 100%) fixed,
    var(--midnight);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Estrellas: pocas, lejanas, de brillo desigual; se mueven casi sin que se note */
body::before,
body::after {
  content: ""; position: fixed; left: 0; top: 0; width: 1px; height: 1px;
  border-radius: 50%; pointer-events: none; z-index: -1;
}
body::before {
  box-shadow:
    54.28vw 69.97vh 0 0.3px rgba(232,236,246,0.23),
    50.5vw 64.23vh 0 0.3px rgba(232,236,246,0.36),
    80.94vw 11.7vh 0 0px rgba(232,236,246,0.6),
    93.26vw 1.38vh 0 0.3px rgba(232,236,246,0.49),
    89.25vw 74.72vh 0 0px rgba(232,236,246,0.39),
    16.8vw 33.64vh 0 0px rgba(232,236,246,0.23),
    10.15vw 95.15vh 0 0px rgba(232,236,246,0.43),
    84.72vw 17.98vh 0 0px rgba(232,236,246,0.09),
    98.48vw 59.98vh 0 0px rgba(236,214,170,0.16),
    46.48vw 4.89vh 0 0px rgba(232,236,246,0.3),
    59.59vw 14.65vh 0 0px rgba(236,214,170,0.34),
    34.26vw 87.78vh 0 0.3px rgba(232,236,246,0.42),
    21.2vw 99.0vh 0 0.3px rgba(236,214,170,0.09),
    24.2vw 73.41vh 0 0.3px rgba(232,236,246,0.59),
    43.62vw 74.44vh 0 0px rgba(236,214,170,0.39),
    47.42vw 37.74vh 0 0.3px rgba(232,236,246,0.56),
    96.91vw 39.06vh 0 0px rgba(232,236,246,0.38),
    4.95vw 3.47vh 0 0px rgba(232,236,246,0.46),
    5.16vw 99.88vh 0 0px rgba(236,214,170,0.26),
    55.5vw 23.78vh 0 0.3px rgba(232,236,246,0.17),
    52.33vw 18.54vh 0 0px rgba(232,236,246,0.33),
    9.74vw 95.32vh 0 0px rgba(232,236,246,0.23),
    88.64vw 90.23vh 0 0.3px rgba(232,236,246,0.31),
    3.95vw 74.95vh 0 0px rgba(232,236,246,0.43),
    0.91vw 95.73vh 0 0px rgba(232,236,246,0.55),
    7.73vw 12.91vh 0 0px rgba(232,236,246,0.13),
    44.58vw 7.8vh 0 0px rgba(232,236,246,0.55),
    59.12vw 70.97vh 0 0px rgba(232,236,246,0.29),
    73.0vw 22.89vh 0 0px rgba(232,236,246,0.36),
    5.72vw 37.77vh 0 0px rgba(232,236,246,0.25),
    26.76vw 2.71vh 0 0px rgba(232,236,246,0.1),
    34.85vw 45.11vh 0 0px rgba(232,236,246,0.39),
    4.93vw 75.5vh 0 0px rgba(232,236,246,0.42),
    0.17vw 67.43vh 0 0.3px rgba(232,236,246,0.22),
    22.61vw 26.71vh 0 0px rgba(232,236,246,0.38),
    29.07vw 16.36vh 0 0px rgba(232,236,246,0.27),
    13.26vw 31.75vh 0 0px rgba(236,214,170,0.38),
    1.99vw 78.23vh 0 0px rgba(232,236,246,0.21),
    95.24vw 34.52vh 0 0.3px rgba(232,236,246,0.49),
    88.84vw 96.04vh 0 0px rgba(236,214,170,0.19),
    75.61vw 19.36vh 0 0px rgba(236,214,170,0.18),
    11.55vw 7.14vh 0 0px rgba(236,214,170,0.38),
    19.08vw 30.74vh 0 0.3px rgba(232,236,246,0.53),
    56.35vw 82.87vh 0 0.3px rgba(232,236,246,0.1),
    60.96vw 31.47vh 0 0px rgba(236,214,170,0.39),
    88.22vw 1.65vh 0 0.3px rgba(232,236,246,0.32),
    67.17vw 14.1vh 0 0px rgba(232,236,246,0.55),
    45.16vw 9.14vh 0 0.3px rgba(232,236,246,0.4),
    7.45vw 14.02vh 0 0px rgba(232,236,246,0.55),
    64.87vw 17.62vh 0 0px rgba(232,236,246,0.39),
    57.24vw 29.41vh 0 0px rgba(232,236,246,0.14),
    80.57vw 18.61vh 0 0px rgba(232,236,246,0.37),
    4.85vw 64.14vh 0 0px rgba(232,236,246,0.11),
    86.77vw 62.63vh 0 0px rgba(232,236,246,0.22),
    29.57vw 15.2vh 0 0px rgba(232,236,246,0.38),
    71.6vw 37.16vh 0 0px rgba(232,236,246,0.38),
    94.28vw 51.25vh 0 0px rgba(236,214,170,0.32),
    17.81vw 39.2vh 0 0px rgba(236,214,170,0.11),
    43.98vw 66.22vh 0 0.3px rgba(232,236,246,0.3),
    92.3vw 59.22vh 0 0px rgba(232,236,246,0.56),
    84.09vw 1.24vh 0 0px rgba(232,236,246,0.18),
    41.98vw 56.26vh 0 0px rgba(232,236,246,0.08),
    1.73vw 71.65vh 0 0px rgba(232,236,246,0.39),
    9.88vw 79.37vh 0 0.3px rgba(236,214,170,0.55),
    90.43vw 74.36vh 0 0px rgba(232,236,246,0.38),
    70.27vw 27.63vh 0 0px rgba(232,236,246,0.51),
    28.21vw 9.22vh 0 0px rgba(232,236,246,0.47),
    48.23vw 77.6vh 0 0px rgba(232,236,246,0.35),
    36.3vw 51.4vh 0 0px rgba(232,236,246,0.35),
    52.04vw 87.76vh 0 0px rgba(232,236,246,0.34),
    4.87vw 5.01vh 0 0.3px rgba(232,236,246,0.24),
    55.52vw 76.9vh 0 0px rgba(232,236,246,0.49),
    10.24vw 64.68vh 0 0px rgba(232,236,246,0.58),
    38.69vw 69.69vh 0 0px rgba(232,236,246,0.51),
    4.47vw 77.21vh 0 0px rgba(232,236,246,0.12),
    15.83vw 27.16vh 0 0px rgba(232,236,246,0.39),
    41.43vw 51.8vh 0 0.3px rgba(232,236,246,0.12),
    9.5vw 98.0vh 0 0.3px rgba(232,236,246,0.19),
    85.51vw 78.69vh 0 0px rgba(236,214,170,0.34),
    64.39vw 28.57vh 0 0px rgba(232,236,246,0.26),
    9.61vw 31.38vh 0 0px rgba(232,236,246,0.39),
    95.55vw 42.01vh 0 0px rgba(232,236,246,0.3),
    90.44vw 94.85vh 0 0px rgba(232,236,246,0.38),
    99.59vw 73.8vh 0 0.3px rgba(232,236,246,0.22),
    46.64vw 42.25vh 0 0px rgba(232,236,246,0.48),
    34.18vw 9.76vh 0 0px rgba(232,236,246,0.48),
    7.72vw 92.05vh 0 0px rgba(236,214,170,0.5),
    61.75vw 2.73vh 0 0px rgba(232,236,246,0.09),
    20.14vw 77.36vh 0 0.3px rgba(232,236,246,0.22),
    66.34vw 75.66vh 0 0px rgba(232,236,246,0.48),
    41.43vw 5.73vh 0 0px rgba(232,236,246,0.21),
    6.88vw 56.32vh 0 0px rgba(232,236,246,0.08),
    99.43vw 65.9vh 0 0px rgba(232,236,246,0.29),
    34.98vw 87.19vh 0 0px rgba(232,236,246,0.19),
    61.58vw 44.98vh 0 0px rgba(232,236,246,0.38),
    84.84vw 96.19vh 0 0px rgba(232,236,246,0.41);
  animation: drift 220s linear infinite alternate;
}
body::after {
  box-shadow:
    4.03vw 48.78vh 2px 0.4px rgba(244,239,230,0.55),
    55.9vw 5.53vh 2px 0.4px rgba(244,239,230,0.66),
    4.11vw 64.64vh 2px 0.4px rgba(244,239,230,0.63),
    28.99vw 54.02vh 2px 0.4px rgba(244,239,230,0.56),
    72.73vw 61.75vh 2px 0.4px rgba(244,239,230,0.82),
    93.05vw 84.04vh 2px 0.4px rgba(244,239,230,0.66),
    96.76vw 90.87vh 2px 0.4px rgba(244,239,230,0.58),
    8.29vw 89.7vh 2px 0.4px rgba(244,239,230,0.84),
    1.2vw 27.16vh 2px 0.4px rgba(244,239,230,0.64),
    13.83vw 42.06vh 2px 0.4px rgba(244,239,230,0.6),
    20.62vw 8.59vh 2px 0.4px rgba(240,214,160,0.64),
    42.37vw 24.07vh 2px 0.4px rgba(244,239,230,0.75),
    54.4vw 59.85vh 2px 0.4px rgba(244,239,230,0.64),
    92.54vw 0.74vh 2px 0.4px rgba(244,239,230,0.82);
  animation: drift 300s linear infinite alternate-reverse, twinkle 11s ease-in-out infinite;
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16px, -26px, 0); } }
@keyframes twinkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

::selection { background: rgba(184, 151, 90, 0.35); color: var(--cream); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Tipografía ---------- */

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display--m { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cream-3);
}

.lede { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--cream-2); max-width: 34rem; }
.lede strong { color: var(--cream); font-weight: 500; }

.dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 10px rgba(184, 151, 90, 0.6);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---------- Botones: controles editoriales, borde fino ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 34px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent; color: var(--cream);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  transition: border-color 0.6s var(--ease), background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.btn:hover { border-color: var(--cream); background: rgba(244, 239, 230, 0.04); }
.btn--label { border-color: var(--gold-soft); }
.btn--label:hover { border-color: var(--gold); background: var(--gold-faint); }
.btn--sm { height: 40px; padding: 0 20px; font-size: 11px; }
.btn .arrow { transition: transform 0.6s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
}
.tag--launch { color: var(--gold); }
.tag--dev { color: var(--cream-3); }
.tag--dev::before { content: ""; width: 14px; height: 1px; background: currentColor; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 6px;
  transition: border-color 0.6s var(--ease);
}
.link-arrow:hover { border-color: var(--gold); }

/* ---------- Aviso superior ---------- */

.announce {
  position: relative; height: 34px; overflow: hidden;
  background: var(--midnight-deep); color: var(--cream-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.announce p {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
/* el mensaje nuevo entra cuando el anterior ya se ha ido: nunca se solapan */
.announce p.is-active { opacity: 1; transition: opacity 1s var(--ease) 0.7s; }
.announce a { color: var(--cream); border-bottom: 1px solid var(--gold-soft); }
.announce p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .announce { font-size: 9.5px; letter-spacing: 0.1em; } }

/* ---------- Cabecera ---------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 22, 51, 0.74);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; justify-self: start; }
.brand img { height: 17px; width: auto; filter: drop-shadow(0 0 10px rgba(184, 151, 90, 0.16)); }

.nav { display: flex; gap: 36px; }
.nav a {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-3); transition: color 0.6s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); }

.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream-2); transition: color 0.6s var(--ease);
}
.icon-btn:hover { color: var(--cream); }
.icon-btn svg { width: 19px; height: 19px; }
.menu-btn { display: none; }

.lang { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.lang a {
  padding: 6px 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--cream-3);
  border-bottom: 1px solid transparent; transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.lang a:hover { color: var(--cream); }
.lang a[aria-current="true"] { color: var(--cream); border-bottom-color: var(--gold); }

.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
.mobile-nav a {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 24px; font-weight: 500;
}
.mobile-nav.is-open { display: block; }
.mobile-nav .lang-row { display: flex; gap: 10px; padding: 20px 0 4px; }
.mobile-nav .lang-row a {
  display: inline-flex; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
}
.mobile-nav .lang-row a[aria-current="true"] { border-color: var(--gold); color: var(--cream); }

@media (max-width: 900px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; order: -1; }
  .brand { justify-self: center; grid-column: 2; }
  .brand img { height: 14px; }
  .header-actions .btn, .header .header-actions .lang { display: none; }
}

/* ---------- Aviso flotante ---------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px);
  background: var(--midnight-deep); color: var(--cream);
  border: 1px solid var(--gold-soft); border-radius: var(--radius);
  padding: 14px 22px; font-size: 14px;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Portada ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, min(calc(var(--inset) + 640px), 56%)) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  --inset: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.hero-head, .hero-foot { position: relative; z-index: 2; padding-left: var(--inset); padding-right: 32px; }
.hero-head { align-self: end; padding-top: 80px; }
.hero-head .display { margin-top: 26px; }
.hero-foot { padding-top: 28px; padding-bottom: 88px; }
.hero-foot .actions { margin-top: 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-media {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 26%), linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 26%), linear-gradient(to bottom, transparent 0, #000 14%);
  mask-composite: intersect;
}
.hero-media img {
  position: absolute; inset: 0; /* la foto se adapta a la altura del texto, no al revés */
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  animation: settle 4s var(--ease) both;
}
@keyframes settle { from { transform: scale(1.03); opacity: 0; } to { transform: none; opacity: 1; } }

.rise { animation: rise 1.6s var(--ease) both; }
.rise-2 { animation-delay: 0.2s; }
.rise-3 { animation-delay: 0.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-head { padding: 56px var(--gutter) 0; align-self: start; }
  .hero-media {
    grid-column: 1; grid-row: 2; margin-top: -8px; aspect-ratio: 1080 / 1000;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 70%, transparent 100%);
  }
  .hero-media img { object-position: 70% 50%; }
  .hero-foot { grid-row: 3; margin-top: -64px; padding: 0 var(--gutter) 64px; }
  .hero-foot .btn { flex: 1 1 auto; }
}

/* ---------- Datos ---------- */

.specs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.specs li { padding: 30px var(--gutter); border-left: 1px solid var(--line); }
.specs li:first-child { border-left: 0; }
.specs .k { font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-3); }
.specs .v { display: block; margin-top: 8px; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
@media (max-width: 900px) {
  .specs ul { grid-template-columns: repeat(2, 1fr); }
  .specs li:nth-child(3) { border-left: 0; }
  .specs li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .specs li { padding: 22px var(--gutter); }
}

/* ---------- Secciones ---------- */

.section { padding: clamp(96px, 12vw, 168px) 0; }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-head .display { margin-top: 20px; max-width: 18ch; }
.section-head .lede { margin-top: 22px; }

/* ---------- El Olympo: cartas mínimas, sin cajas ---------- */

.grid-products { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-products--line { --g: clamp(20px, 3vw, 40px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); row-gap: clamp(48px, 6vw, 72px); }
.grid-products--line > .card { flex: 0 1 calc((100% - 2 * var(--g)) / 3); }
@media (max-width: 980px) { .grid-products--line > .card { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 620px) { .grid-products--line > .card { flex-basis: 100%; } }
.grid-products--four { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
@media (max-width: 1100px) { .grid-products--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-products--four { grid-template-columns: 1fr; } }

.card { position: relative; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card-link { display: flex; flex-direction: column; height: 100%; }
.card-media {
  position: relative; aspect-ratio: 4 / 4.6; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--midnight-deep);
  transition: border-color 0.8s var(--ease);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.card--live:hover .card-media { border-color: var(--gold-soft); }
.card--live:hover .card-media img { transform: scale(1.025); }

.card-label { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 6px 0; }
.card-label .name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 2.4vw, 2.3rem); line-height: 1; }
.card-label .kind { margin-top: 10px; font-family: var(--serif); font-style: normal; font-size: clamp(1.25rem, 1.5vw, 1.4rem); line-height: 1.2; color: var(--cream-2); }
.card-label .foot {
  margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-3);
}
.card-label .go { display: inline-flex; align-items: center; gap: 8px; color: var(--cream-2); }
.card-label .go .arrow { transition: transform 0.6s var(--ease); }
.card--live:hover .go .arrow { transform: translateX(3px); }

.card--locked { cursor: default; }
.card--locked .card-label .name { color: var(--cream-2); }
.card-media--soon { background: radial-gradient(60% 50% at 50% 42%, rgba(184, 151, 90, 0.07), transparent 72%), var(--midnight-deep); }
.silhouette { position: absolute; inset: 0; width: 100%; height: 100%; }
.soon {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  padding: 10px 16px 10px 20px; white-space: nowrap;
  border: 1px solid var(--gold-soft); border-radius: var(--radius); background: rgba(7, 15, 38, 0.6);
  font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cream);
}

/* ---------- Ritual (imagen + texto) ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.split-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 880 / 1020; border: 1px solid var(--line); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy .display { margin: 22px 0 28px; }
.split-copy p + p { margin-top: 16px; }
.split-copy .actions { margin-top: 40px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-media { aspect-ratio: 4 / 3.6; } }

/* ---------- Fórmula ---------- */

.formula-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.formula-figure { margin: 0; }
.formula-figure .ph { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.formula-figure img { width: 100%; height: 100%; object-fit: cover; }
.formula-figure figcaption { margin-top: 14px; font-family: var(--serif); font-style: normal; font-size: 1.05rem; color: var(--cream-3); }
.formula { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.formula li { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.formula .f-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1.1; }
.formula .f-type { font-size: 13px; color: var(--cream-3); }
.formula-note { margin-top: 18px; font-size: 13px; color: var(--cream-2); }
@media (max-width: 900px) { .formula-wrap { grid-template-columns: 1fr; } .formula-figure .ph { aspect-ratio: 4 / 3; } }

/* ---------- Preguntas ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 112px); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.3;
  transition: color 0.6s var(--ease);
}
.accordion summary:hover { color: var(--cream); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 11px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1px 11px no-repeat;
  transition: transform 0.8s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .answer { padding: 0 0 26px; color: var(--cream-2); max-width: 40rem; }
.accordion .answer p + p, .accordion .answer ul + p { margin-top: 12px; }
.accordion .answer ul { margin: 0; padding-left: 18px; }
.accordion .answer li + li { margin-top: 6px; }
.accordion .answer .fine { font-size: 13px; color: var(--cream-3); }

/* ---------- Lista de espera: una frase, mucho espacio ---------- */

.waitlist {
  position: relative;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 80% at 50% 45%, rgba(244, 239, 230, 0.035), transparent 70%);
}
.waitlist-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 44px; }
.waitlist .display { margin-top: 20px; }
.waitlist .lede { margin: 22px auto 0; }
.waitlist .form { max-width: 560px; }

/* ---------- Formulario ---------- */

.form { width: 100%; }
.form-row { display: flex; gap: 12px; }
.field {
  flex: 1; min-width: 0; height: 54px; padding: 0 20px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: rgba(7, 15, 38, 0.55); color: var(--cream);
  font-size: 16px; transition: border-color 0.6s var(--ease);
}
.field::placeholder { color: var(--cream-3); }
.field:hover { border-color: rgba(244, 239, 230, 0.4); }
.field:focus { outline: none; border-color: var(--gold); }
.form .btn { height: 54px; }
.consent {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; text-align: left;
  font-size: 13px; line-height: 1.55; color: var(--cream-2); cursor: pointer;
}
.consent input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 17px; height: 17px; margin: 1px 0 0; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  display: grid; place-content: center; transition: border-color 0.4s, background-color 0.4s;
}
.consent input::after {
  content: ""; width: 9px; height: 5px; border: solid var(--midnight); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.consent input:checked { background: var(--gold); border-color: var(--gold); }
.consent input:checked::after { opacity: 1; }
.consent a, .legal a:not(.btn) { color: var(--cream); border-bottom: 1px solid var(--gold-soft); }
.form-status { margin-top: 12px; font-size: 14px; text-align: left; }
.form-status:empty { margin: 0; }
.form-status.is-error { color: #E8B9A0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid var(--gold-soft); background: var(--gold-faint);
}
.form-done svg { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 2px; }
.form-done strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.form-done p { color: var(--cream-2); font-size: 14.5px; margin-top: 2px; }
@media (max-width: 520px) { .form-row { flex-direction: column; } .field { flex: none; width: 100%; } .form .btn { width: 100%; } }

/* ---------- Pie ---------- */

.footer { padding: clamp(80px, 10vw, 128px) 0 36px; font-size: 14px; }
.footer-mark { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-bottom: clamp(64px, 8vw, 104px); }
.footer-mark img { width: min(560px, 78vw); height: auto; filter: drop-shadow(0 0 22px rgba(184, 151, 90, 0.16)); }
.footer-mark p { font-family: var(--serif); font-style: normal; font-size: 1.3rem; color: var(--cream-2); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-top: 48px; border-top: 1px solid var(--line); }
.footer-top > div > p { color: var(--cream-3); max-width: 24rem; }
.footer h4 { margin: 0 0 16px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-3); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 10px; }
.footer li a { color: var(--cream-2); transition: color 0.6s var(--ease); }
.footer li a:hover { color: var(--cream); }
.footer li .off { color: var(--cream-3); }
.footer li .off em { font-style: normal; font-size: 12px; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--cream-3); font-size: 12.5px;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }

/* ---------- Productos ---------- */

.page-intro { padding: clamp(72px, 10vw, 136px) 0 clamp(40px, 5vw, 64px); }
.page-intro .display { margin-top: 22px; }
.page-intro .lede { margin-top: 26px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.chip {
  height: 38px; padding: 0 18px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); color: var(--cream-2);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}
.chip span { color: var(--cream-3); }
.chip:hover { color: var(--cream); border-color: var(--cream-2); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--cream); background: var(--gold-faint); }

/* ---------- Ficha de producto ---------- */

.crumbs { padding-top: 28px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-3); }
.crumbs a { color: var(--cream-2); }
.crumbs a:hover { color: var(--cream); }
.crumbs span[aria-hidden] { margin: 0 10px; }

.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 96px); padding-top: 28px; padding-bottom: clamp(80px, 10vw, 136px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.gallery { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery-stage { position: relative; aspect-ratio: 880 / 1020; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--midnight-deep); }
.gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.gallery-slide.is-active { opacity: 1; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 12px; margin-top: 14px; }
.thumb { width: 76px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); opacity: 0.55; transition: opacity 0.6s, border-color 0.6s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 1; }
.thumb[aria-current="true"] { opacity: 1; border-color: var(--gold); }

.buy { padding-top: 8px; }
.buy h1 { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: 0.95; }
.buy .kind { margin-top: 12px; font-family: var(--serif); font-style: normal; font-size: clamp(1.45rem, 2vw, 1.7rem); color: var(--cream-2); }
.buy .desc { margin-top: 24px; color: var(--cream-2); max-width: 32rem; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; }
.facts li { list-style: none; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--line); font-size: 12.5px; color: var(--cream-2); }

.packs { border: 0; margin: 40px 0 0; padding: 0; }
.packs legend { padding: 0; display: flex; justify-content: space-between; width: 100%; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-2); }
.packs legend span { color: var(--cream-3); }
.pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pack { position: relative; cursor: pointer; }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack-body {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 10px 18px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  transition: border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}
.pack-n { font-family: var(--serif); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.pack-u { margin-top: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-2); }
.pack-d { margin-top: 8px; font-size: 13px; color: var(--cream-3); }
.pack:hover .pack-body { border-color: var(--cream-2); }
.pack input:checked + .pack-body { border-color: var(--gold); background: var(--gold-faint); }
.pack input:focus-visible + .pack-body { outline: 1px solid var(--gold); outline-offset: 3px; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.price-row span:first-child { color: var(--cream-3); }

.launch { margin-top: 26px; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(7, 15, 38, 0.45); }
.launch h2 { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: 2.2rem; line-height: 1.05; }
.launch > p { margin-top: 10px; color: var(--cream-2); font-size: 15px; }
.launch .form { margin-top: 22px; }
.launch .form-row { flex-direction: column; }
.launch .field, .launch .form .btn { width: 100%; flex: none; }
.launch .picked { margin-top: 14px; font-size: 13px; color: var(--cream-3); }
.launch .picked strong { color: var(--cream); font-weight: 500; }
.assurances { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--cream-2); }
.assurances li { display: flex; gap: 10px; align-items: center; }
.assurances svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.buy .accordion { margin-top: 40px; }

.band { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); min-height: clamp(440px, 44vw, 620px); display: flex; align-items: center; padding: clamp(32px, 6vw, 88px); }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 22, 51, 0.96) 0%, rgba(11, 22, 51, 0.72) 40%, rgba(11, 22, 51, 0.08) 76%); }
.band-copy { position: relative; z-index: 1; max-width: 34rem; }
.band-copy .display { margin: 20px 0 24px; }
@media (max-width: 700px) {
  .band { align-items: flex-end; min-height: 540px; }
  .band img { object-position: 64% 40%; }
  .band::after { background: linear-gradient(to top, rgba(11, 22, 51, 0.97) 0%, rgba(11, 22, 51, 0.72) 48%, rgba(11, 22, 51, 0.06) 82%); }
}

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(7, 15, 38, 0.94); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%); transition: transform 0.8s var(--ease);
}
.sticky-buy strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.1; }
.sticky-buy .tag { font-size: 9.5px; }
.sticky-buy.is-visible { transform: none; }
@media (max-width: 900px) { .sticky-buy { display: flex; } .sticky-buy ~ .footer { padding-bottom: 110px; } }

/* ---------- Página legal ---------- */

.legal { max-width: 46rem; padding-bottom: clamp(80px, 10vw, 136px); }
.legal h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--cream-2); }
.legal p + p { margin-top: 10px; }
.legal .form { margin-top: 20px; max-width: 34rem; }
.legal .updated { margin-top: 22px; font-size: 13px; color: var(--cream-3); }

/* ---------- Entradas: solo desplazamiento, el contenido es visible siempre ---------- */

.js .reveal { transform: translateY(14px); transition: transform 1.4s var(--ease); }
.js .reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { transform: none; }
}

/* =========================================================
   Tienda (estructura de ecommerce sobre la marca ELIXIR GODS)
   ========================================================= */

/* Cesta */
.cart { position: relative; }
.cart-count {
  position: absolute; top: 5px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--gold); color: var(--midnight); font-size: 9px; font-weight: 600; letter-spacing: 0;
}

/* Portada a pantalla completa */
.hero-full {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: min(86svh, 820px); border-bottom: 1px solid var(--line);
}
.hero-full picture { position: absolute; inset: 0; }
.hero-full-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: settle 4s var(--ease) both; }
.hero-full::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 22, 51, 0.9) 0%, rgba(11, 22, 51, 0.55) 36%, rgba(11, 22, 51, 0) 60%),
    linear-gradient(to top, rgba(7, 15, 38, 0.55) 0%, transparent 32%);
}
.hero-full-copy { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.hero-full-copy .display { margin-top: 26px; max-width: 12ch; }
.hero-full-copy .lede { margin-top: 26px; }
.hero-full-copy .actions { margin-top: 40px; }
@media (max-width: 700px) {
  /* en móvil, imagen arriba y texto debajo: el titular nunca tapa el bote */
  .hero-full { display: block; min-height: 0; }
  .hero-full picture { position: relative; display: block; height: min(120vw, 560px); }
  .hero-full picture::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to top, var(--midnight), rgba(11, 22, 51, 0)); }
  .hero-full-img { object-position: 50% 60%; }
  .hero-full::after { display: none; }
  .hero-full-copy { margin-top: -28px; padding-top: 0; padding-bottom: 56px; }
  .hero-full-copy .display { max-width: none; }
  .hero-full-copy .btn { flex: 1 1 auto; }
}

/* Tira del Olympo */
.olympo-strip { border-bottom: 1px solid var(--line); }
.strip-inner {
  display: flex; justify-content: space-between; gap: 32px; overflow-x: auto; scrollbar-width: none;
  padding-top: 28px; padding-bottom: 28px;
}
.strip-inner::-webkit-scrollbar { display: none; }
.god { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.god-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--cream-2); transition: color 0.6s var(--ease); }
.god-domain { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-3); }
.god.is-live .god-name, .god:hover .god-name { color: var(--cream); }
.god.is-live .god-domain { color: var(--gold); }

/* Rejilla de productos */
.product-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 32px); row-gap: clamp(40px, 5vw, 64px);
}
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .product-grid, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product[hidden] { display: none; }
.product-link { display: block; }
.product-media {
  position: relative; aspect-ratio: 4 / 4.6; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--midnight-deep);
  transition: border-color 0.8s var(--ease);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.product-link:hover .product-media { border-color: var(--gold-soft); }
.product-link:hover .product-media img { transform: scale(1.03); }
.badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 9px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius); background: rgba(7, 15, 38, 0.6);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.product-info { padding-top: 16px; }
.product-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; }
.product-kind { margin-top: 4px; font-family: var(--serif); font-style: normal; font-size: 1.05rem; color: var(--cream-2); }
.product-price { margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-3); }
.product--locked { cursor: default; }
.product--locked .product-name { color: var(--cream-2); }
.product-media--soon { background: radial-gradient(60% 50% at 50% 42%, rgba(184, 151, 90, 0.07), transparent 72%), var(--midnight-deep); }
.product .soon { font-size: 12px; letter-spacing: 0.28em; padding: 8px 12px 8px 15px; }
@media (max-width: 560px) {
  .product .soon { font-size: 9.5px; letter-spacing: 0.22em; padding: 6px 8px 6px 10px; }
  .badge { font-size: 8.5px; padding: 4px 6px; top: 8px; left: 8px; }
  .product-kind { font-size: 0.95rem; }
}

/* Barra de la tienda: filtros, número de productos y orden */
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 44px; }
.shop-bar .filters { margin-bottom: 0; }
.shop-meta { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--cream-3); }
.sort select {
  appearance: none; -webkit-appearance: none; height: 38px; padding: 0 36px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background-color: transparent; color: var(--cream);
  font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B8975A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 7px;
}
.sort select:focus { outline: none; border-color: var(--gold); }
.sort option { color: #0B1633; background: #F4EFE6; }

/* Frase de marca */
.statement { padding: clamp(100px, 14vw, 200px) 0; text-align: center; }
.statement-text {
  margin: 0 auto; max-width: 22ch; text-wrap: balance;
  font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.15;
}

/* Accesos grandes */
.section--tight { padding-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 32px); }
.tile { position: relative; display: block; aspect-ratio: 1 / 1.05; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 15, 38, 0.92) 0%, rgba(7, 15, 38, 0.2) 46%, transparent 70%); }
.tile-copy { position: absolute; z-index: 1; left: clamp(20px, 3vw, 40px); bottom: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.tile-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; }
.tile-link { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-2); transition: color 0.6s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.tile:hover .tile-link { color: var(--cream); }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr; } .tile { aspect-ratio: 1 / 0.95; } }

/* Adelanto de la marca y llamada final */
.brand-teaser { padding: clamp(110px, 14vw, 200px) 0; text-align: center; }
.brand-teaser .wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.brand-teaser .lede { margin: 0 auto; }

/* Página de la marca */
.brand-hero { padding: clamp(110px, 15vw, 210px) 0 clamp(90px, 10vw, 140px); text-align: center; }
.brand-hero .display { margin-top: 26px; font-size: clamp(3.4rem, 9vw, 8rem); line-height: 0.98; }
.brand-hero .lede { margin: 32px auto 0; max-width: 38rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.story-copy .display { margin: 20px 0 26px; }
.story-copy .lede + .lede { margin-top: 16px; }
.story-media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); padding-top: 52px; }
.pillar h3 { margin: 18px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1.1; }
.pillar p { color: var(--cream-2); }
@media (max-width: 900px) { .story, .pillars { grid-template-columns: 1fr; } }

/* Galería de la ficha en 4:5 */
.gallery-stage { aspect-ratio: 4 / 5; }

/* ---------- Ajustes para Manrope (02/10/2026) ---------- */
/* Una geométrica pide titulares más cerrados y con algo más de peso que la serif anterior. */
.display { font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; }
.buy h1, .tile-title, .launch h2, .pack-n, .card-label .name { font-weight: 600; letter-spacing: -0.03em; }
.pillar h3, .product-name, .god-name, .specs .v, .formula .f-name, .legal h2, .sticky-buy strong, .form-done strong { letter-spacing: -0.02em; }
.statement-text { font-weight: 500; letter-spacing: -0.03em; }
.product-kind, .card-label .kind, .buy .kind { letter-spacing: -0.005em; }
.product-kind { font-size: 0.95rem; }
.footer-mark p, .formula-figure figcaption { letter-spacing: -0.01em; }

/* ---------- El problema (portada) ---------- */
.problem .pillars { margin-top: clamp(40px, 5vw, 64px); }
.problem-close {
  margin-top: clamp(48px, 6vw, 80px); max-width: 24ch; text-wrap: balance;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--cream-3);
}
.problem-close strong { display: block; color: var(--cream); font-weight: 600; }

/* ---------- Nuestra historia (página Marca) ---------- */
.founders-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 112px); align-items: start; }
.founders .display { margin-top: 20px; }
.founders-copy .lede { max-width: 38rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.founders-copy .lede + .lede { margin-top: 18px; }
.founders-copy .lede:last-child { color: var(--cream); font-weight: 500; }
@media (max-width: 900px) { .founders-inner { grid-template-columns: 1fr; } }


/* ---------- Ingredientes con foto (página Morpheo, 02/10/2026) ---------- */
.ingredients {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 32px); row-gap: clamp(36px, 4.5vw, 56px);
}
.ingredient .ph { aspect-ratio: 3 / 4; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--midnight-deep); transition: border-color 0.8s var(--ease); }
.ingredient img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.ingredient:hover .ph { border-color: var(--gold-soft); }
.ingredient:hover img { transform: scale(1.03); }
.ingredient .f-name { display: block; font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.ingredient .f-type { display: block; margin-top: 6px; font-size: 13px; color: var(--cream-3); }
.ingredients + .formula-note { margin-top: 32px; }
@media (max-width: 980px) { .ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Portada en dos pases: logo sobre el cielo, después Morpheo (02/10/2026) ---------- */
.hero-slider { position: relative; display: grid; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--midnight-deep); }
.hero-slide { grid-area: 1 / 1; position: relative; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.4s var(--ease), visibility 0s; }
.hero-slider .hero-full { height: 100%; border-bottom: 0; }
.hero-slide--brand { display: flex; align-items: center; justify-content: center; min-height: min(86svh, 820px); overflow: hidden; }
.hero-slide--brand::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 46%, rgba(40, 66, 140, 0.5), transparent 72%), linear-gradient(to bottom, #060D22, #0B1633 55%, #070F26);
}
.hero-slide--brand::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(38% 30% at 30% 40%, rgba(184, 151, 90, 0.10), transparent 70%), radial-gradient(34% 28% at 72% 62%, rgba(90, 120, 200, 0.16), transparent 70%);
  animation: sky-drift 26s ease-in-out infinite alternate;
}
@keyframes sky-drift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.hero-sky, .hero-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.hero-brand { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.6vw, 34px); padding: 0 var(--gutter); text-align: center; }
.hero-logo { width: min(80vw, 900px); height: auto; filter: drop-shadow(0 0 44px rgba(244, 239, 230, 0.16)); }
.hero-tagline { font-size: clamp(10.5px, 1.05vw, 13px); font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--cream-2); }
.slider-dots { position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vw, 34px); z-index: 3; display: flex; justify-content: center; gap: 10px; }
.slider-dots button { width: 36px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(244, 239, 230, 0.26); cursor: pointer; transition: background 0.6s var(--ease); }
.slider-dots button::before { content: ""; display: block; height: 22px; margin-top: -10px; }
.slider-dots button.is-active { background: var(--cream); }
@media (max-width: 700px) { .hero-slide--brand { min-height: min(120vw, 560px); } .hero-logo { width: 86vw; } }
@media (prefers-reduced-motion: reduce) { .hero-slide--brand::after { animation: none; } }

/* Cinco productos en una fila */
.product-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .product-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .product-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------- Portada a pantalla completa, con el menú flotando (02/10/2026) ---------- */
.header--floating {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease);
}
.header--floating:not(.is-solid) .btn--ghost { border-color: transparent; }
.header--floating:not(.is-solid) .nav a { color: var(--cream-2); }
.header--floating:not(.is-solid) .nav a:hover, .header--floating:not(.is-solid) .nav a[aria-current="page"] { color: var(--cream); }
.header--floating.is-solid, .header--floating:has(.mobile-nav.is-open) {
  background: rgba(11, 22, 51, 0.82); border-bottom-color: var(--line);
  backdrop-filter: saturate(120%) blur(14px); -webkit-backdrop-filter: saturate(120%) blur(14px);
}
.header--floating ~ main .hero-slider { min-height: 100svh; border-bottom: 0; }
.header--floating ~ main .hero-slide--brand { min-height: 100svh; }
.header--floating ~ main .hero-slider .hero-full { min-height: 100svh; }
.hero-slide--brand::after { animation-duration: 16s; }
@media (max-width: 700px) {
  .header--floating ~ main .hero-slide--brand { min-height: 100svh; }
  .header--floating ~ main .hero-slider .hero-full { min-height: 100svh; }
}

/* ---------- Ingredientes: dosis y qué hace cada uno ---------- */
.ingredient .f-meta { display: block; margin-top: 8px; }
.ingredient .f-dose { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ingredient .f-form { margin-left: 8px; font-size: 12px; color: var(--cream-3); }
.ingredient .f-what { margin-top: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--cream-2); }

/* ---------- Una noche con Morpheo ---------- */
.timeline {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px);
}
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line-strong); }
.tl-step { position: relative; padding-top: 36px; }
.tl-dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--cream-2); background: var(--midnight); }
.tl-step.is-key .tl-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(184, 151, 90, 0.7); }
.tl-time { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.tl-step h3 { margin: 10px 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.tl-text { font-size: 0.96rem; color: var(--cream-2); }
.tl-who { margin-top: 12px; font-size: 12px; color: var(--cream-3); }
.night-note { margin-top: clamp(36px, 4vw, 52px); max-width: 44rem; font-size: 0.95rem; color: var(--cream-3); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: 6px; right: auto; top: 4px; bottom: 0; width: 1px; height: auto; }
  .tl-step { padding: 0 0 30px 36px; }
  .tl-dot { top: 2px; }
}

/* ---------- Portada: cielo oscuro y el logo con luz (02/10/2026) ---------- */
.hero-slide--brand::before { background: linear-gradient(to bottom, #040817, #060C20 50%, #040817); }
.hero-slide--brand::after {
  inset: 0;
  background: radial-gradient(46% 20% at 50% 49%, rgba(244, 239, 230, 0.07), transparent 72%);
  animation: logo-breathe 7s ease-in-out infinite alternate;
}
@keyframes logo-breathe { from { opacity: 0.55; } to { opacity: 1; } }
.hero-logo {
  filter: drop-shadow(0 0 14px rgba(244, 239, 230, 0.55)) drop-shadow(0 0 46px rgba(244, 239, 230, 0.28)) drop-shadow(0 0 120px rgba(184, 151, 90, 0.22));
}

/* ---------- Portada más recogida ---------- */
.section--home { padding: clamp(64px, 7.5vw, 104px) 0; }
.section--home + .section--home { padding-top: 0; }
.header--floating ~ main .statement { padding: clamp(72px, 9vw, 128px) 0; }
.header--floating ~ main #formula { padding-bottom: clamp(64px, 7.5vw, 104px); }
.problem-close { margin-top: clamp(36px, 4.5vw, 56px); }
.header--floating ~ main .waitlist { padding: clamp(64px, 7.5vw, 104px) 0; }
.header--floating ~ main .brand-teaser { padding: clamp(72px, 9vw, 128px) 0; }
.header--floating ~ main #preguntas { padding: clamp(64px, 7.5vw, 104px) 0; }
.ingredient .f-meta .f-form:first-child { margin-left: 0; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* ---------- El problema: la frase grande primero, y aparte (02/10/2026) ---------- */
.problem-lead {
  margin: 22px 0 0; max-width: 17ch; text-wrap: balance;
  font-size: clamp(2.5rem, 5.6vw, 5.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em;
  color: var(--cream-3);
}
.problem-lead strong { display: block; color: var(--cream); font-weight: 600; }
.problem-head { margin-top: clamp(48px, 6vw, 84px); }
.problem-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.problem-head .lede { margin-top: 12px; }
.problem .pillars { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Segunda pantalla: el bote flotando en el espacio (02/10/2026) ---------- */
.hero-full--float::after {
  background:
    linear-gradient(90deg, rgba(6, 12, 32, 0.92) 0%, rgba(6, 12, 32, 0.62) 38%, rgba(6, 12, 32, 0) 64%),
    linear-gradient(to top, rgba(6, 12, 32, 0.5) 0%, transparent 30%);
}
.hero-full--float .hero-full-img { object-position: 100% 50%; }
.hero-float {
  position: absolute; z-index: 1; top: 52%; right: clamp(8%, 17vw, 24%);
  height: min(70%, 620px); aspect-ratio: 626 / 1662; transform: translateY(-50%);
}
.hero-float-bottle {
  height: 100%; width: auto; transform: rotate(15deg);
  filter: drop-shadow(0 44px 54px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 70px rgba(110, 140, 230, 0.2));
  animation: bottle-float 9s ease-in-out infinite;
}
@keyframes bottle-float {
  0%, 100% { transform: translate3d(0, -12px, 0) rotate(13deg); }
  50% { transform: translate3d(8px, 14px, 0) rotate(17deg); }
}
@media (max-width: 700px) {
  .hero-full--float picture::after { height: 45%; }
  .hero-float { top: calc(min(120vw, 560px) * 0.5); right: 50%; height: calc(min(120vw, 560px) * 0.78); transform: translate(50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .hero-float-bottle { animation: none; } }
.header--floating .lang a { color: var(--cream-2); }
.hero-slider { grid-template-columns: minmax(0, 1fr); }

/* ---------- Segunda pantalla: una sola foto, quieta (02/10/2026) ---------- */
.hero-full--float .hero-full-img { object-position: 72% 50%; animation: none; }
@media (max-width: 700px) { .hero-full--float .hero-full-img { object-position: 50% 50%; } }

/* ---------- Página de la marca: menos aire entre bloques ---------- */
.brand-hero { padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 6vw, 84px); }
.section--brand { padding: clamp(56px, 6.5vw, 92px) 0; }

/* ---------- Barra de avisos: solo el mensaje visible recibe el clic ---------- */
.announce p { pointer-events: none; }
.announce p.is-active { pointer-events: auto; }
.announce a { cursor: pointer; }
.legal a { color: var(--cream); border-bottom: 1px solid var(--gold-soft); }

/* ---------- Portada: flechas del pase ---------- */
.slider-arrow {
  position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; transform: translateY(-50%);
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244, 239, 230, 0.3); background: rgba(7, 15, 38, 0.35); color: #F4EFE6;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow:hover { background: rgba(7, 15, 38, 0.7); border-color: rgba(244, 239, 230, 0.7); }
.slider-arrow--prev { left: clamp(10px, 2vw, 28px); }
.slider-arrow--next { right: clamp(10px, 2vw, 28px); }
@media (max-width: 700px) { .slider-arrow { top: auto; bottom: 12px; transform: none; width: 40px; height: 40px; } }

/* ---------- La frase con sus fotos ---------- */
.life { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.life-copy .problem-lead { margin-top: 0; font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.life-copy .lede { margin-top: 26px; }
.life-copy .actions { margin-top: 34px; }
.life-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.life-grid figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; }
.life-grid figure.wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.life-grid img { width: 100%; height: 100%; object-fit: cover; }
.life-grid figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #F4EFE6;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.life-grid figure::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(4, 8, 22, 0.7), transparent); }
.life-grid figure.wide figcaption { font-size: clamp(1.1rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; text-transform: none; left: 18px; bottom: 14px; }
@media (max-width: 900px) { .life { grid-template-columns: 1fr; } }

/* ---------- Los ingredientes en una tira ---------- */
.ing-strip { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); text-align: center; }
.ing-strip .ico { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: 50% 55%; border: 1px solid var(--line-strong); }
.ing-strip li span:last-child { display: block; margin-top: 12px; font-size: clamp(0.8rem, 1.05vw, 0.98rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
@media (max-width: 800px) { .ing-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } }

/* ---------- Ventana de la lista de espera ---------- */
.popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(4, 8, 22, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.popup[hidden] { display: none; }
.popup-card {
  position: relative; width: min(100%, 540px); padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(244, 239, 230, 0.22); border-radius: 8px; color: #F4EFE6;
  background: radial-gradient(90% 70% at 50% 0%, rgba(40, 66, 140, 0.5), transparent 70%), #0B1633;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}
.popup-card .display { margin-top: 18px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.popup-card .lede { margin-top: 16px; }
.popup-card .form { margin-top: 26px; }
.popup-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 239, 230, 0.7); cursor: pointer; }
.popup-close svg { width: 20px; height: 20px; }
.popup-close:hover { color: #F4EFE6; background: rgba(244, 239, 230, 0.08); }
.popup-card .form-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.popup-card .form-row .btn { width: 100%; }

/* ---------- Portada: la frase final, centrada entre los ingredientes y la lista de espera (02/10/2026) ---------- */
/* El blanco conserva su alto de antes; la frase queda justo en medio: mismo aire arriba que abajo. */
.header--floating ~ main #formula { padding-bottom: 0; }
.header--floating ~ main .statement { padding: clamp(104px, 12.5vw, 180px) 0; }