/* =========================================================
   NÜMO · Coffee Energy Pocket Spray
   Dark + copper landing page
   ========================================================= */

:root {
  --bg-0: #07060a;
  --bg-1: #0c0a0e;
  --bg-card: #1a1410;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --ink: #f4ece4;
  --ink-soft: #c8bdb1;
  --ink-mute: #8e827a;

  --accent: #c5704d;
  --accent-hot: #d88a63;
  --accent-glow: rgba(197, 112, 77, 0.45);

  --container: 1180px;
  --radius: 14px;

  /* Vertical rhythm — every full-bleed section uses one of these */
  --space-section: 96px;
  --space-section-sm: 64px;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 15.5px;
  --text-lg: 18px;
  --text-display-sm: 28px;
  --text-display: clamp(28px, 3.4vw, 44px);

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The nav is now fixed, so offset in-page anchor jumps (#pricing, #how) by
   roughly the nav height to keep targets from hiding under the bar. */
html {
  scroll-padding-top: 90px;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Accessible focus ring for keyboard users — copper to match the brand */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Mouse users keep the clean look */
:focus:not(:focus-visible) {
  outline: none;
}

.accent {
  color: var(--accent);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* One recipe for every major section heading (duo, boost, pricing) so
   consecutive sections don't read as different type systems. */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* =================== BRAND / NAV =================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above page content (max z-index 2) but below every overlay:
     checkout modal (100), cart drawer (200), contact modal (9999). */
  z-index: 50;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
/* Transparent over the hero for an immersive top; once the user scrolls a
   little, a blurred dark slab slides in behind the nav so the logo + cart
   icon stay legible over page content. Toggled by js/nav.js — mirrors the
   mobile nav behaviour. */
.nav--scrolled {
  background: rgba(7, 6, 10, .82);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .nav--scrolled {
    background: rgba(7, 6, 10, .6);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
}
.nav__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: padding .25s ease;
}
/* Tighten the bar slightly once it gains its backdrop. */
.nav--scrolled .nav__inner {
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.brand__logo {
  display: block;
  width: auto;
  height: 32px;
}
/* Centre nav links (fills the empty middle of the bar on wide screens and
   gives a persistent path to the packs / sections). Hidden on narrow desktop
   via the 980 breakpoint. */
.nav__menu {
  display: flex;
  gap: 34px;
  margin-left: 44px;   /* sit just right of the logo, with breathing room */
  margin-right: auto;  /* push the cart icon to the far right */
}
.nav__menu a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transition: color .2s ease;
}
.nav__menu a:hover { color: var(--accent); }

/* =================== HERO =================== */
.hero {
  position: relative;
  overflow: hidden;
  /* Scales with the viewport but is bounded so the hero never feels cramped
     on small laptops nor wastes scroll on huge displays. */
  min-height: clamp(680px, 80vh, 880px);
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* Constrain to the same canvas the rest of the page lives in, so when the
     viewport is wider than the container the image stops at the same edge as
     all other sections instead of bleeding to the screen edges. */
  max-width: 1280px;
  background-image: url("../images/Hero.webp?v=6");
  background-size: cover;
  /* Anchor on the right so the product/spray stays visible at any width */
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Soft horizontal fade so the image edges dissolve into the black hero
     background rather than cutting sharply at the container's left/right. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Strong dark gradient on the left so the headline always reads */
    linear-gradient(90deg, rgba(7,6,10,.96) 0%, rgba(7,6,10,.78) 30%, rgba(7,6,10,.30) 55%, rgba(7,6,10,0) 80%),
    /* Soft top-bottom vignette */
    linear-gradient(180deg, rgba(7,6,10,.55) 0%, transparent 25%, transparent 70%, rgba(7,6,10,.65) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 28px 110px;
  display: flex;
  align-items: center;
  min-height: clamp(680px, 80vh, 880px);
}
.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
/* Staggered entrance — each child rises in a moment after the previous */
.hero__copy > * { animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) both; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .18s; }
.hero__copy > *:nth-child(3) { animation-delay: .30s; }
.hero__copy > *:nth-child(4) { animation-delay: .42s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { animation: none; }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  /* Negative left margin cancels the large optical side-bearing of the 92px
     bold "E"/"B" (measured ~6px inset) so the title's ink edge lines up with
     the eyebrow / lead / button above and below it. Reset on the centred
     ≤980 layout. */
  margin: 0 0 22px -5px;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero__title .accent {
  font-weight: 900;
}
.hero__title-sub {
  display: inline-block;
  font-weight: 800;
  font-size: 0.48em;
  letter-spacing: 0.02em;
  line-height: 1.1;
  /* Pull the sub-line tight to BOOST so the title reads as one unit, not two */
  margin-top: -0.15em;
  /* Counter the title's -5px so the smaller sub-line (less side-bearing) still
     lines up with the rest instead of poking out to the left. */
  margin-left: 3px;
}
.hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 460px;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.hero__reassure {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__scroll {
  display: none;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin: 0;
}

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  padding: 24px 40px;
  border-radius: 4px;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.btn--primary {
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(197, 112, 77, 0.30);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(197, 112, 77, 0.34); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn--ghost:hover { background: rgba(197,112,77,.08); }

/* =================== FEATURES ROW =================== */
.features {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.features__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  color: var(--ink);
}
.feature__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.feature__icon svg { width: 38px; height: 38px; }
.feature p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.20em;
}

/* =================== DUO SECTION =================== */
.duo {
  position: relative;
  background: #000;
  padding: 0;
  overflow: hidden;
}
.duo__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: center;
}
.duo__media {
  position: relative;
  width: 100%;
  /* Slightly taller than the native 16:9 source. Combined with `cover` and
     a left anchor, this zooms in on the bottle so the product reads big and
     the spray cloud extends across the column toward the copy. */
  aspect-ratio: 5 / 4;
  background-image: url("../images/Banner2.webp?v=3");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  /* The image is already on a black background, so a soft right-edge fade
     dissolves any visible seam into the section's black surface. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}
/* Centre the DUO copy column so the short title sits centred over the 3-step
   row below it instead of hanging off to the left. */
.duo__copy { text-align: center; }
.lead {
  color: var(--ink-soft);
  margin: 0 0 36px;
  font-size: 17.5px;
  line-height: 1.55;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.step__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.step__icon svg { width: 50px; height: 50px; }
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.20em;
  color: var(--ink);
  margin: 0;
}
.step__text {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* =================== BOOST CAROUSEL =================== */
.boost {
  padding: var(--space-section) 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.boost__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.boost__sub {
  text-align: center;
  color: var(--ink-mute);
  font-size: 16px;
  margin: 0 0 40px;
  padding: 0 28px;
}
.boost__track {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.boost-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.boost-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .9),
    0 0 0 1px var(--accent);
}
.boost-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.boost-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 100%);
}
.boost-card h3 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  margin: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  line-height: 1.25;
}

/* =================== PRICING =================== */
.pricing {
  background: var(--bg-0);
  padding: var(--space-section-sm) 0;
}
.pricing__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.pricing__head { margin-bottom: 32px; text-align: center; }
/* Matches .section-title — was a fixed 34px that read smaller than the duo/
   boost heads despite being the conversion peak. */
.pricing__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.pricing__sub {
  margin: 0;
  color: var(--ink-mute);
  font-size: 17px;
}
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.price-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.price-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.price-card--popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -30px rgba(197, 112, 77, 0.26);
  /* Subtle lift to reinforce this as the recommended pack */
  transform: scale(1.02);
}
.price-card--popular:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow: 0 0 0 1px var(--accent), 0 24px 48px -28px rgba(197, 112, 77, 0.30);
}
.price-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #1a0e08;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 6px 14px;
  border-radius: 4px;
}
/* Secondary "value" badge (Pack 6) — muted so the copper RECOMENDADO on the
   centre card stays the visual lead. */
.price-card__badge--value {
  background: var(--bg-card);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  letter-spacing: 0.10em;
}
.price-card__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.20em;
  color: var(--ink);
  margin: 0 0 14px;
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.price-card__perunit {
  margin: 6px 0 0;
  color: var(--ink-mute);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.price-card__stack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
  /* Grow to fill the card height so the CTA below sits at the bottom edge,
     keeping the three "COMPRAR" buttons aligned across the row. */
  flex: 1;
  width: 100%;
  min-height: 130px;
}
.price-card__stack img {
  /* Tall designer bottle (~3:1 aspect); size by height, width follows. */
  height: 220px;
  width: auto;
  /* Soft double contact shadow grounds the bottle without a mirror reflection. */
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.65)) drop-shadow(0 5px 5px rgba(0,0,0,.4));
}
.price-card__stack--three img { height: 190px; }
.price-card__stack--six {
  /* Force a 3+3 grid: at height:130px the bottle renders ~42px wide
     (natural aspect 0.32). 3 × 42 + 2 × 4 gap = 134; max-width 140 leaves
     just enough room for 3 in a row, forcing the next 3 to wrap. */
  gap: 4px;
  flex-wrap: wrap;
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
}
.price-card__stack--six img {
  height: 130px;
}
.price-card .btn {
  width: 80%;
  padding: 16px 22px;
  font-size: 16px;
}

/* =================== TRUST =================== */
.trust {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
}
.trust__item svg {
  width: 38px;
  height: 38px;
  color: var(--accent);
  flex-shrink: 0;
}
.trust__item p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.trust__item strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 15px;
}

/* =================== FOOTER =================== */
.footer {
  background: var(--bg-0);
  padding: var(--space-section-sm) 0 30px;
  border-top: 1px solid var(--line);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
/* Subdue the wordmark in the footer so it doesn't compete with the nav lockup */
.footer .brand { color: var(--ink-mute); }
.footer .brand__logo { height: 26px; opacity: 0.85; }
.footer__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__links a {
  font-size: 15px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.footer__links a:hover { color: var(--accent); }
.footer__copy {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }
  .hero__media {
    /* On narrow screens, push the image to the top of the section so the
       product sits above the headline like the reference shot */
    background-position: 70% top;
    background-size: 140% auto;
    background-repeat: no-repeat;
    /* Reserve image height at the top */
    inset: 0 0 auto 0;
    height: 56vw;
    min-height: 320px;
    max-height: 480px;
  }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(7,6,10,0) 0%, rgba(7,6,10,0) 30%, rgba(7,6,10,.7) 60%, rgba(7,6,10,.95) 100%);
  }
  .hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60vw 24px 80px;
    min-height: auto;
  }
  .hero__copy { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  /* The side-bearing nudge is for the left-aligned layout only. */
  .hero__title, .hero__title-sub { margin-left: 0; }
  .hero__scroll { display: block; }

  .features__inner { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .duo { padding: 70px 0 90px; }
  .duo__media {
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
  .duo__inner { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .steps { max-width: 460px; margin: 0 auto; }

  .boost__track { grid-template-columns: repeat(2, 1fr); }
  .boost-card { aspect-ratio: 4 / 5; }

  .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .nav__menu { display: none; }
}

/* Pricing keeps its 3-up row down to ~820px (cards stay comfortably wide),
   then stacks — so it doesn't collapse to a lone centred card while the rest
   of the page (features/trust at 2-col) still fills the width. */
@media (max-width: 820px) {
  /* Wider gap once stacked so the protruding card badges (RECOMENDADO /
     MEJOR PRECIO) clear the card above instead of overlapping it. */
  .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 34px; }
}

@media (max-width: 560px) {
  .hero__title { font-size: 44px; }
  .features__inner { grid-template-columns: repeat(2, 1fr); }
  .boost__track { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .nav__inner { padding: 18px 18px; }
  .btn { padding: 16px 22px; font-size: 13px; }
}