/* =========================================================
   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;
}

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;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.04em;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* =================== BRAND / NAV =================== */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.brand__logo {
  display: block;
  width: auto;
  height: 32px;
}

/* =================== 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");
  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;
  margin: 0 0 22px;
  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;
}
.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 14px 30px -12px var(--accent-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--accent-glow); }
.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: 56px 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");
  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%);
}
.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(32px, 3.2vw, 44px);
  letter-spacing: 0.12em;
  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: 1280px;
  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; }
.pricing__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.06em;
  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 30px 60px -30px var(--accent-glow);
  /* Subtle lift to reinforce this as the recommended pack */
  transform: scale(1.02);
}
.price-card--popular:hover { transform: scale(1.02) translateY(-2px); }
.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;
}
.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 {
  height: 150px;
  width: auto;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.55));
}
.price-card__stack--three img { height: 130px; }
.price-card__stack--six {
  gap: 3px;
  flex-wrap: wrap;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.price-card__stack--six img { height: 92px; }
.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: 36px 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; }
  .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; }

  .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

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

@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; }
  .pricing__title { font-size: 22px; }
  .nav__inner { padding: 18px 18px; }
  .btn { padding: 16px 22px; font-size: 13px; }
}