/* ============================================================
   NEXTREVIEW v2 — ESTILOS
   Navy premium + dorado + acentos Google.
   Profundidad 3D, glassmorphism, gradientes mesh, motion.
   Tipografía: Space Grotesk (títulos) + Inter (texto)
   ============================================================ */

:root {
  /* Color */
  --navy-950: #050B1A;
  --navy-900: #0A1228;
  --navy-800: #0F172A;
  --navy-700: #1E293B;
  --blue-700: #1E3A8A;
  --blue-500: #2563EB;
  --blue-400: #3B82F6;
  --gold-500: #F59E0B;
  --gold-400: #FBBF24;
  --gold-300: #FCD34D;
  --gold-700: #A16207;
  --wa-green: #25D366;
  --wa-green-dark: #1DA851;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --muted: #EEF2F7;
  --border: #E2E8F0;
  --text: #0F172A;
  --text-soft: #475569;
  --text-on-dark: #F1F5F9;
  --text-on-dark-soft: #B6C2D6;
  --glass: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .14);

  /* Tipo */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Ritmo */
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .18);
  --shadow-deep: 0 40px 90px -20px rgba(5, 11, 26, .55);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Capas */
  --z-header: 100;
  --z-float: 200;
  --z-modal: 1000;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.7rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 1em; }

a { color: var(--blue-500); }

.container { width: min(1160px, 100% - 40px); margin-inline: auto; position: relative; }
.container--narrow { width: min(820px, 100% - 40px); }

.icon { width: 20px; height: 20px; flex: none; }
.star { width: 16px; height: 16px; fill: var(--gold-400); flex: none; }

.text-gradient {
  background: linear-gradient(100deg, var(--gold-400), var(--gold-500) 55%, var(--gold-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-underline-gold {
  text-decoration: underline;
  text-decoration-color: var(--gold-400);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

/* ============ BOTONES ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .2s, border-color .2s, color .2s, filter .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }
/* El contenido va por encima del barrido de brillo */
.btn > * { position: relative; z-index: 1; }

/* Brillo barrido en hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900);
  box-shadow: 0 6px 20px rgba(245, 158, 11, .35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover {
  box-shadow: 0 14px 34px rgba(245, 158, 11, .5), inset 0 1px 0 rgba(255,255,255,.4);
  filter: brightness(1.05);
}
.btn--primary:not(.js-magnetic):hover { transform: translateY(-2px); }

.btn--ghost {
  background: var(--glass);
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--outline:hover { border-color: var(--navy-800); transform: translateY(-2px); }
.section--gradient .btn--outline {
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, .3);
}
.section--gradient .btn--outline:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255,255,255,.06); }

.btn--whatsapp { background: var(--wa-green); color: #fff; box-shadow: 0 6px 18px rgba(37, 211, 102, .3); }
.btn--whatsapp:hover { background: var(--wa-green-dark); box-shadow: 0 12px 28px rgba(37, 211, 102, .4); }
.btn--whatsapp:not(.js-magnetic):hover { transform: translateY(-2px); }
.btn--whatsapp .icon { fill: currentColor; }

.btn--sm { padding: 10px 20px; min-height: 44px; font-size: .9rem; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Botón magnético: el JS mueve la posición vía variables */
.js-magnetic {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .35s var(--ease), box-shadow .25s var(--ease), filter .2s;
}

/* ============ HEADER ============ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color .3s, box-shadow .3s;
}
.header.is-scrolled {
  /* Fondo sólido (sin backdrop-filter): un filtro de desenfoque en un elemento
     fixed que aparece al hacer scroll provoca repintados defectuosos en Chrome
     (elementos gigantes/blancos). Un color casi opaco da el mismo efecto visual
     sin ese problema. */
  background: rgba(9, 16, 35, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-md);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.logo { display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.logo__stars { display: flex; gap: 2px; }
.logo__stars .star { width: 10px; height: 10px; }
.logo__text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: -.02em;
}
.logo__text em { font-style: normal; color: var(--blue-400); }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  position: relative;
  color: var(--text-on-dark-soft);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color .2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }

.header__cta { display: flex; gap: 10px; }

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s var(--ease), opacity .2s;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 24px;
  background: rgba(8, 15, 33, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu .btn { margin-top: 14px; }
.mobile-menu.is-open { display: flex; }

/* ============ FONDOS DECORATIVOS (mesh + estrellas) ============ */
.section__bg, .hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
  animation: meshDrift 18s ease-in-out infinite alternate;
}
.mesh--1 { width: 560px; height: 560px; top: -180px; left: -120px; background: radial-gradient(circle, var(--blue-700), transparent 65%); }
.mesh--2 { width: 480px; height: 480px; top: 30%; right: -160px; background: radial-gradient(circle, rgba(245,158,11,.5), transparent 65%); animation-delay: -5s; animation-duration: 22s; }
.mesh--3 { width: 420px; height: 420px; bottom: -160px; left: 28%; background: radial-gradient(circle, var(--blue-500), transparent 65%); animation-delay: -10s; opacity: .4; }
.mesh--sol { width: 620px; height: 620px; top: -200px; right: -180px; background: radial-gradient(circle, var(--blue-700), transparent 65%); }
.mesh--pack { width: 560px; height: 560px; bottom: -240px; right: -160px; background: radial-gradient(circle, rgba(245,158,11,.4), transparent 65%); }
.mesh--cta { width: 560px; height: 560px; top: -200px; left: 30%; background: radial-gradient(circle, var(--blue-500), transparent 65%); }

@keyframes meshDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

/* Estrellas titilantes (puro CSS, sin imágenes) */
.starfield { position: absolute; inset: 0; }
.starfield::before, .starfield::after {
  content: "";
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.starfield--a::before {
  box-shadow:
    8vw 12vh 0 rgba(255,255,255,.8), 22vw 28vh 0 rgba(255,255,255,.5),
    35vw 8vh 0 rgba(255,255,255,.7), 48vw 32vh 0 rgba(251,191,36,.8),
    61vw 14vh 0 rgba(255,255,255,.6), 74vw 38vh 0 rgba(255,255,255,.45),
    88vw 10vh 0 rgba(255,255,255,.7), 15vw 52vh 0 rgba(255,255,255,.5),
    42vw 58vh 0 rgba(251,191,36,.6), 67vw 62vh 0 rgba(255,255,255,.55),
    92vw 48vh 0 rgba(255,255,255,.6), 5vw 72vh 0 rgba(255,255,255,.4);
}
.starfield--a::after {
  box-shadow:
    12vw 34vh 0 rgba(255,255,255,.5), 28vw 16vh 0 rgba(255,255,255,.65),
    55vw 22vh 0 rgba(255,255,255,.5), 70vw 6vh 0 rgba(251,191,36,.7),
    82vw 26vh 0 rgba(255,255,255,.55), 38vw 44vh 0 rgba(255,255,255,.4),
    95vw 66vh 0 rgba(255,255,255,.5), 18vw 64vh 0 rgba(251,191,36,.5);
  animation-delay: -2s;
}
.starfield--b::before {
  box-shadow:
    10vw 18vh 0 rgba(255,255,255,.6), 30vw 40vh 0 rgba(255,255,255,.45),
    52vw 12vh 0 rgba(251,191,36,.7), 76vw 30vh 0 rgba(255,255,255,.55),
    90vw 16vh 0 rgba(255,255,255,.5), 24vw 70vh 0 rgba(255,255,255,.4),
    58vw 66vh 0 rgba(255,255,255,.5), 84vw 58vh 0 rgba(251,191,36,.6);
  animation-delay: -1s;
}
.starfield--b::after {
  box-shadow:
    6vw 44vh 0 rgba(255,255,255,.5), 44vw 26vh 0 rgba(255,255,255,.6),
    64vw 46vh 0 rgba(255,255,255,.4), 97vw 36vh 0 rgba(255,255,255,.55),
    36vw 80vh 0 rgba(251,191,36,.5), 72vw 76vh 0 rgba(255,255,255,.45);
  animation-delay: -3s;
}
@keyframes twinkle {
  from { opacity: .25; }
  to   { opacity: 1; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 700px at 75% -10%, #14224A 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: var(--text-on-dark);
  padding: 150px 0 110px;
  overflow: hidden;
  /* Aísla la composición del hero (escena 3D) para que no interfiera con el
     header fijo al hacer scroll. */
  isolation: isolate;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 56px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold-300);
  margin-bottom: 22px;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(251,191,36,.6);
  animation: dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}

.hero__title {
  font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4rem);
  font-weight: 700;
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--text-on-dark-soft);
  max-width: 34em;
  margin-bottom: 30px;
}
.hero__sub strong { color: #fff; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 0;
  margin: 0;
  font-size: .92rem;
  color: var(--text-on-dark-soft);
}
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust .icon { width: 17px; height: 17px; color: var(--gold-400); }

.hero__fade {
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}

/* --- Escena 3D --- */
.hero__visual { position: relative; }
.scene {
  position: relative;
  height: clamp(420px, 46vw, 540px);
  perspective: 1100px;
}
.scene__halo {
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(ellipse at 45% 40%, rgba(37, 99, 235, .35), transparent 60%);
  filter: blur(30px);
}

/* El tilt del cursor anima estas variables; al registrarlas con @property
   podemos transicionarlas suavemente (vuelta gradual al soltar el cursor). */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 6deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: -12deg; }

.plate {
  --rx: 6deg;
  --ry: -12deg;
  position: absolute;
  top: 4%;
  left: 8%;
  width: min(64%, 320px);
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  animation: plateFloat 7s ease-in-out infinite;
  background:
    linear-gradient(155deg, #16213F 0%, var(--navy-800) 45%, #0B1430 100%);
  border: 1px solid rgba(251, 191, 36, .35);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 60px rgba(37, 99, 235, .25);
  /* Suaviza el seguimiento del cursor y la vuelta al estado de reposo. */
  transition: --rx .25s ease-out, --ry .25s ease-out;
}
@keyframes plateFloat {
  0%, 100% { transform: translateY(0)     rotateX(var(--rx)) rotateY(var(--ry)); }
  50%      { transform: translateY(-14px) rotateX(var(--rx)) rotateY(var(--ry)); }
}

.plate__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 20px;
  text-align: center;
  transform: translateZ(28px);
}
.plate__stars { display: flex; gap: 5px; }
.plate__stars .star { width: 20px; height: 20px; filter: drop-shadow(0 2px 6px rgba(251,191,36,.5)); }
.plate__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, .8rem + 1vw, 1.3rem);
  color: #fff;
  line-height: 1.25;
  margin: 0;
}
.plate__sub {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0;
}
.plate__g {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.plate__g svg { width: 30px; height: 30px; }
.plate__nfc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-on-dark-soft);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  padding: 7px 14px;
  border-radius: 999px;
}
.plate__nfc svg { width: 16px; height: 16px; color: var(--gold-400); animation: nfcBlink 2.4s ease-in-out infinite; }
@keyframes nfcBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.plate__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 62%);
  background-size: 250% 100%;
  animation: shineSweep 5.5s ease-in-out infinite;
  pointer-events: none;
  transform: translateZ(30px);
}
@keyframes shineSweep {
  0%, 20%  { background-position: 120% 0; }
  60%, 100%{ background-position: -130% 0; }
}
.plate__edge {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(8px);
  pointer-events: none;
}

/* Ondas NFC */
.nfc-waves {
  position: absolute;
  top: 44%;
  left: 56%;
  width: 0; height: 0;
}
.nfc-waves span {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, .65);
  animation: wave 2.6s ease-out infinite;
  opacity: 0;
}
.nfc-waves span:nth-child(2) { animation-delay: .65s; }
.nfc-waves span:nth-child(3) { animation-delay: 1.3s; }
@keyframes wave {
  0%   { transform: scale(.3); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Móvil que se acerca */
.phone {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: min(38%, 190px);
  aspect-ratio: 9 / 18.5;
  border-radius: 28px;
  background: linear-gradient(165deg, #2A3550, #121A33);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-deep);
  padding: 10px;
  animation: phoneApproach 6s ease-in-out infinite;
}
@keyframes phoneApproach {
  0%, 12%  { transform: translate(26px, 30px) rotate(8deg); }
  38%, 78% { transform: translate(0, 0) rotate(0); }
  100%     { transform: translate(26px, 30px) rotate(8deg); }
}
.phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 9px;
  border-radius: 999px;
  background: #0A0F20;
}
.phone__screen {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF, #EFF3FA);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
}
.phone__g { width: 34px; height: 34px; }
.phone__label {
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0;
  text-align: center;
}
.phone__stars { display: flex; gap: 3px; }
.phone__stars .star { width: 15px; height: 15px; }
.star--pop { animation: starPop 6s ease-in-out infinite; transform-origin: center; }
.phone__stars .star--pop:nth-child(1) { animation-delay: 0s; }
.phone__stars .star--pop:nth-child(2) { animation-delay: .12s; }
.phone__stars .star--pop:nth-child(3) { animation-delay: .24s; }
.phone__stars .star--pop:nth-child(4) { animation-delay: .36s; }
.phone__stars .star--pop:nth-child(5) { animation-delay: .48s; }
@keyframes starPop {
  0%, 38%   { transform: scale(0); opacity: 0; }
  44%       { transform: scale(1.35); opacity: 1; }
  48%, 88%  { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(0); opacity: 0; }
}
.phone__bar {
  width: 70%; height: 6px;
  border-radius: 4px;
  background: #DCE3EE;
}
.phone__bar--short { width: 45%; }

/* Chips flotantes glass.
   Sin backdrop-filter: estos chips están dentro de la escena 3D (preserve-3d),
   y el desenfoque de fondo dentro de un contexto 3D se renderiza mal en Chrome.
   Un fondo sólido translúcido da el mismo aspecto sin riesgos. */
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 26, 53, .92);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.chip__g { width: 17px; height: 17px; }
.chip--g { top: -2%; right: 8%; }
.chip--zap { bottom: 6%; left: 0; color: var(--gold-300); }
.chip--zap .icon { width: 15px; height: 15px; }
.float-1 { animation: floaty 5.5s ease-in-out infinite; }
.float-2 { animation: floaty 6.5s ease-in-out -2s infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ============ BANDA DE DATOS (contadores) ============ */
.stats {
  position: relative;
  background: var(--bg);
  padding: 8px 0 56px;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stat {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
  line-height: 1;
  background: linear-gradient(120deg, var(--blue-700), var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--text-soft); font-size: .95rem; margin: 0; }

/* ============ SECCIONES ============ */
.section { position: relative; padding: 88px 0; overflow: hidden; }
.section--light { background: var(--bg); }
.section--muted { background: var(--muted); }
.section--navy {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color: var(--text-on-dark);
}
.section--gradient {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--blue-700) 120%);
  color: var(--text-on-dark);
}
.section--cta {
  background:
    radial-gradient(900px 500px at 50% 120%, rgba(245,158,11,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: var(--text-on-dark);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 12px;
}
.eyebrow--gold { color: var(--gold-400); }

.section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section__head p { color: var(--text-soft); font-size: 1.05rem; margin: 0; }
.section__head--ondark p { color: var(--text-on-dark-soft); }

/* ============ DOLOR ============ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}
.pain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pain-card:hover { box-shadow: var(--shadow-lg); }
.pain-card__quote {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy-800);
  margin-bottom: 10px;
}
/* Sección "El problema" (confianza): icono + titular + texto */
.pain-card__icon {
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .05));
  color: var(--gold-500);
  margin-bottom: 18px;
  /* Rebote sutil al entrar la tarjeta */
  transition: transform .35s var(--ease);
}
.pain-card:hover .pain-card__icon { transform: translateY(-3px) rotate(-4deg); }
.pain-card__icon svg { width: 25px; height: 25px; }
.pain-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.22;
  color: var(--navy-800);
  margin: 0 0 10px;
}
.pain-card p { color: var(--text-soft); margin: 0; }

/* ============ SOLUCIÓN integrada ============ */
.solve {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: 36px 36px 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.solve::before {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(245,158,11,.28), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.solve__head { max-width: 560px; margin-bottom: 22px; }
.solve__head h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); color: #fff; margin-bottom: 8px; }
.solve__head p { color: var(--text-on-dark-soft); margin: 0; }
.solve__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 16px;
}
.compare {
  border-radius: var(--radius);
  padding: 16px 22px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.compare--bad { background: rgba(255,255,255,.04); opacity: .85; }
.compare--bad .compare__steps { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.4); }
.compare--good {
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.05));
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 10px 30px rgba(245,158,11,.12);
}
.compare__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin-bottom: 4px;
}
.compare--good .compare__label { color: var(--gold-300); }
.compare__steps { font-family: var(--font-head); font-weight: 600; color: #fff; }

/* Antes / Después en 3 tiempos (sección "El problema") */
.compare__beats { display: flex; flex-direction: column; gap: 4px; }
.compare__beats > span {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.28;
  color: #fff;
}
.compare--bad .compare__beats > span { color: var(--text-on-dark-soft); }
.compare__gone {
  color: rgba(255, 255, 255, .4) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, .3);
}
.compare__win { color: var(--gold-300) !important; font-weight: 700; }
/* Acento dorado en "confianza" del titular de la oportunidad */
.solve__accent { font-style: normal; color: var(--gold-300); }
.compare__arrow {
  display: grid;
  place-items: center;
  color: var(--gold-400);
}

/* ============ CÓMO FUNCIONA + PRODUCTO ============ */
.work { display: grid; gap: 56px; }
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
  margin: 0;
}
.step {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 34px 26px 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.step:hover { border-color: rgba(251,191,36,.4); box-shadow: 0 24px 50px -16px rgba(5,11,26,.6); }
.step h3 { color: #fff; }
.step__num {
  position: absolute;
  top: -16px;
  left: 24px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900);
  box-shadow: 0 6px 16px rgba(245,158,11,.4);
}
.step__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: var(--gold-300);
  margin-bottom: 16px;
}
.step__icon svg { width: 26px; height: 26px; }
.step p { color: var(--text-on-dark-soft); margin: 0; }

/* Producto: qué incluye */
.include {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.include__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.include__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
.include__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 18, 40, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
}
.include__tag .icon { width: 15px; height: 15px; color: var(--gold-400); }
.include__copy h3 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }

.checklist {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.checklist .icon {
  width: 22px; height: 22px;
  color: var(--gold-400);
  margin-top: 2px;
}
.checklist span { color: var(--text-on-dark-soft); }
.checklist strong { color: #fff; }

/* ============ MARQUEE ============ */
.marquee {
  background: var(--navy-900);
  border-block: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}
.marquee__group span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-on-dark-soft);
  white-space: nowrap;
}
.marquee__group .star { width: 13px; height: 13px; opacity: .8; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ OBJECIONES ============ */
.objections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.objection {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.objection:hover {
  border-color: rgba(245,158,11,.5);
  box-shadow: var(--shadow-lg);
}
.objection h3 { color: var(--navy-800); font-size: 1.05rem; margin-bottom: 10px; }
.objection p { color: var(--text-soft); margin: 0; font-size: .96rem; }
.objection strong { color: var(--navy-800); }

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0;
  margin: 0 0 36px;
}
.badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: var(--shadow-sm);
}
.badges .icon { width: 16px; height: 16px; color: var(--gold-500); }

.compliance {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 780px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.compliance__icon { width: 34px; height: 34px; flex: none; color: var(--gold-500); }
.compliance p { margin: 0; color: var(--text-soft); font-size: .95rem; }
.compliance strong { color: var(--navy-800); }

/* ============ PRECIOS ============ */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.price-card:hover {
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 30px 60px -18px rgba(5,11,26,.65);
}
.price-card--featured {
  background: linear-gradient(165deg, rgba(251,191,36,.14), rgba(255,255,255,.05) 55%);
  border-color: rgba(251,191,36,.5);
  box-shadow: 0 24px 60px -14px rgba(245,158,11,.35);
}
.price-card--featured:hover { border-color: rgba(251,191,36,.8); }
.price-card__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(245,158,11,.45);
}
.price-card__badge .star { width: 13px; height: 13px; fill: var(--navy-900); }
.price-card__name { font-size: 1.2rem; color: #fff; margin-bottom: 4px; }
.price-card__for { color: var(--text-on-dark-soft); font-size: .92rem; min-height: 2.8em; margin-bottom: 10px; }
.price-card__price { margin-bottom: 4px; }
.price-card__price .amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.9rem);
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price-card__per { color: var(--text-on-dark-soft); font-size: .88rem; margin: 0 0 14px; }
.price-card__per em { font-style: normal; color: var(--gold-300); font-weight: 600; }
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 9px;
  color: var(--text-on-dark-soft);
  font-size: .94rem;
  flex-grow: 1;
}
.price-card__list li {
  position: relative;
  padding-left: 24px;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 13px; height: 13px;
  background: var(--gold-400);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.pricing__note {
  text-align: center;
  color: var(--text-on-dark-soft);
  font-size: .95rem;
  margin: 34px 0 0;
}
.pricing__note a { color: var(--gold-300); font-weight: 600; }

/* ============ FAQ ============ */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .3s;
}
.faq__item[open] { box-shadow: var(--shadow-md); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 18px 22px;
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--blue-400); outline-offset: -3px; border-radius: var(--radius); }
.faq__chevron {
  flex: none;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--gold-500);
  border-bottom: 2.5px solid var(--gold-500);
  transform: rotate(45deg);
  transition: transform .35s var(--ease);
  margin-top: -4px;
}
.faq__item[open] .faq__chevron { transform: rotate(225deg); margin-top: 4px; }
.faq__body { padding: 0 22px; }
.faq__body p { color: var(--text-soft); margin: 0 0 18px; }

/* ============ CTA FINAL ============ */
.section--cta { padding: 110px 0; }
.cta-final h2 { margin-bottom: 14px; }
.cta-final p { color: var(--text-on-dark-soft); font-size: 1.1rem; margin-bottom: 32px; }
.cta-final__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ============ FOOTER ============ */
.footer {
  background: var(--navy-950);
  color: var(--text-on-dark-soft);
  padding: 48px 0 36px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer__inner { display: grid; gap: 22px; text-align: center; justify-items: center; }
.logo__text--footer { font-size: 1.5rem; }
.footer__brand p { margin: 6px 0 0; font-size: .92rem; }
.footer__nav, .footer__legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.footer__nav a, .footer__legal-nav a {
  color: var(--text-on-dark-soft);
  text-decoration: none;
  font-size: .92rem;
  transition: color .2s;
}
.footer__nav a:hover, .footer__legal-nav a:hover { color: #fff; }
.footer__legal-nav { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); width: 100%; }
.footer__legal-nav a { font-size: .85rem; }
.footer__legal { font-size: .8rem; max-width: 640px; margin: 0; opacity: .75; }

/* ============ WHATSAPP FLOTANTE ============ */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-float);
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa-green);
  box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
  transition: transform .25s var(--ease), box-shadow .25s;
  animation: waPulse 3s ease-out infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 14px 36px rgba(37, 211, 102, .55); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@keyframes waPulse {
  0%   { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ============ CHECKOUT ============ */
.checkout { position: fixed; inset: 0; z-index: var(--z-modal); }
.checkout[hidden] { display: none; }
.checkout__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 26, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s var(--ease);
}
.checkout__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  background: var(--bg);
  box-shadow: -30px 0 80px rgba(5, 11, 26, .4);
  padding: 30px 30px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideInPanel .45s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInPanel {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
body.checkout-open { overflow: hidden; }

.checkout__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.checkout__close:hover { background: var(--muted); transform: rotate(90deg); }
.checkout__close svg { width: 20px; height: 20px; }
.checkout__panel h2 { font-size: 1.5rem; margin: 4px 0 6px; padding-right: 48px; }
.checkout__sub { color: var(--text-soft); margin-bottom: 22px; }

.pack-picker { border: 0; padding: 0; margin: 0 0 22px; }
.pack-picker legend {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 10px;
}
.pack-picker__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pack-option { position: relative; cursor: pointer; }
.pack-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.pack-option__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 8px;
  font-size: .85rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pack-option__box strong { font-family: var(--font-head); }
.pack-option__box span { color: var(--text-soft); }
.pack-option__box em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-700);
}
.pack-option input:checked + .pack-option__box {
  border-color: var(--gold-500);
  box-shadow: 0 6px 18px rgba(245, 158, 11, .25);
  transform: translateY(-2px);
}
.pack-option input:focus-visible + .pack-option__box { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .88rem; }
.field label span[aria-hidden] { color: var(--gold-700); }
.field__optional { font-weight: 400; color: var(--text-soft); font-size: .8rem; }
.field input {
  font: inherit;
  padding: 12px 14px;
  min-height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.field input.is-invalid { border-color: #DC2626; }
.field__error { color: #DC2626; font-size: .8rem; min-height: 1.1em; }
.field__hint { color: var(--text-soft); font-size: .8rem; }

.checkout__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: var(--text-on-dark);
}
.checkout__summary small { color: var(--text-on-dark-soft); font-size: .78rem; }
.checkout__summary strong {
  font-family: var(--font-head);
  font-size: 1.45rem;
  color: var(--gold-300);
}
.checkout__actions { display: grid; gap: 10px; }
.checkout__note { color: var(--text-soft); font-size: .82rem; text-align: center; margin: 6px 0 0; }

/* ============ REVEAL (scroll) ============ */
/* El estado oculto SOLO se aplica si el JS está activo (html.js). Así, si el
   script no cargara, el contenido se ve igualmente (nunca queda invisible). */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Solo mantenemos una capa de composición mientras el elemento aún no ha
   aparecido; al terminar la transición se libera (evita decenas de capas
   permanentes que provocan tirones al hacer scroll). */
.js .reveal:not(.is-visible) { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 130px 0 90px; }
  .hero__copy { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__ctas, .hero__trust { justify-content: center; }
  .hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .scene { height: clamp(400px, 60vw, 500px); }
  .include { grid-template-columns: 1fr; gap: 36px; }
  .include__media { max-width: 480px; margin-inline: auto; width: 100%; }
  .objections { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav, .header__cta { display: none; }
  .header__burger { display: flex; margin-left: auto; }
  .header { background: rgba(9, 16, 35, .94); }
  .stats__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pain-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .solve { padding: 28px 22px 32px; }
  .solve__compare { grid-template-columns: 1fr; }
  .compare__arrow svg { transform: rotate(90deg); }
  .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .price-card--featured { order: -1; }
  .price-card__for { min-height: 0; }
  .section { padding: 70px 0; }
}

@media (max-width: 560px) {
  .hero { padding: 112px 0 70px; }
  .hero__ctas .btn { width: 100%; }
  .scene { height: clamp(360px, 96vw, 430px); }
  .plate { left: 2%; width: 62%; }
  .phone { right: 0; width: 40%; }
  .chip--g { right: 0; top: -4%; }
  .objections { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .checkout__panel { padding: 24px 18px 36px; }
  .cta-final__btns .btn { width: 100%; }
  .compliance { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 420px) {
  .container { width: calc(100% - 28px); }
  .hero__title { font-size: 2.1rem; }
  .pack-picker__options { grid-template-columns: 1fr; }
  .pack-option__box { flex-direction: row; justify-content: space-between; padding: 12px 16px; }
  .chip--zap { display: none; }
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

/* ============================================================
   PULIDO PREMIUM — micro-interacciones (solo transform/opacity,
   robustas, sin reflow). La media query de reduced-motion de abajo
   las neutraliza automáticamente.
   ============================================================ */

/* Elevación suave de tarjetas al pasar el cursor (solo ratón). */
@media (hover: hover) and (pointer: fine) {
  .pain-card:hover,
  .objection:hover,
  .step:hover,
  .price-card:hover { transform: translateY(-6px); }
  .price-card--featured { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
  .price-card--featured:hover { transform: translateY(-6px) scale(1.02); }
  /* Los números de dato laten ligeramente al pasar por encima. */
  .stat:hover .stat__num { transform: scale(1.06); }
  .stat__num { display: inline-block; transition: transform .25s var(--ease); }
}

/* Brillo dorado que recorre lentamente el texto en degradado. */
.text-gradient {
  background-size: 220% auto;
  animation: goldShimmer 7s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* Subrayado dorado que se "dibuja" al aparecer la sección.
   Por defecto se ve (a prueba de "sin JS"); solo se oculta para dibujarse
   cuando el JS está activo y el bloque aún no ha aparecido. */
.text-underline-gold {
  text-decoration: none;
  background-image: linear-gradient(var(--gold-400), var(--gold-400));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  padding-bottom: 3px;
  transition: background-size .7s var(--ease) .2s;
}
.js .reveal:not(.is-visible) .text-underline-gold { background-size: 0% 4px; }
.reveal.is-visible .text-underline-gold { background-size: 100% 4px; }

/* Tabla comparativa: "Otras formas" vs "Con NextReview" */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs__col {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.vs__col--good {
  background: linear-gradient(165deg, rgba(251, 191, 36, .13), rgba(255, 255, 255, .04) 60%);
  border-color: rgba(251, 191, 36, .4);
}
.vs__title { font-family: var(--font-head); font-size: 1.1rem; color: #fff; margin: 0 0 16px; }
.vs__col--good .vs__title { color: var(--gold-300); }
.vs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vs__list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--text-on-dark-soft); }
.vs__list strong { color: #fff; }
.vs__mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem; margin-top: 1px;
}
.vs__mark--x { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.vs__mark--ok { background: rgba(251, 191, 36, .18); color: var(--gold-300); }
.vs__mark--ok .icon { width: 14px; height: 14px; }
@media (max-width: 680px) { .vs { grid-template-columns: 1fr; } }

/* Nota del fundador */
.founder { text-align: center; }
.founder__quote { margin: 22px auto 20px; max-width: 60ch; }
.founder__quote p { color: var(--text-soft); font-size: 1.06rem; line-height: 1.75; margin: 0 0 14px; }
.founder__quote strong { color: var(--navy-800); }
.founder__sign { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy-800); margin: 0; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js-magnetic { transform: none !important; }
  .marquee__track { animation: none; transform: none; }
  .plate { transform: rotateX(6deg) rotateY(-12deg); animation: none; }
  .phone { animation: none; transform: none; }
  .star--pop { animation: none; transform: scale(1); opacity: 1; }
  .plate__shine, .nfc-waves { display: none; }
  .mesh { animation: none; }
  .gprofile--rival { animation: none; }
}

/* ============================================================
   MEJORAS v8 — persuasión + CTAs (estética navy + dorado)
   ============================================================ */

/* Estrellas dentro del badge del hero (sustituyen al punto) */
.hero__badge-stars { display: inline-flex; gap: 3px; }
.hero__badge-stars .star { width: 13px; height: 13px; fill: var(--gold-400); }

/* Microcopy de garantía bajo los CTA */
.hero__microcopy {
  margin: -14px 0 22px;
  font-size: .92rem;
  color: var(--text-on-dark-soft);
}
.hero__microcopy strong { color: #fff; }

/* CTA dentro del bloque solución */
.solve__cta { margin-top: 28px; text-align: center; }

/* ---------- El de al lado (aversión a la pérdida) ---------- */
.enemy {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.enemy__vs {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-300);
  letter-spacing: .08em;
  opacity: .9;
}
.gprofile {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-md);
}
.gprofile--rival {
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 20px 50px -24px rgba(245,158,11,.4);
  animation: rivalGlow 3.4s ease-in-out infinite;
}
@keyframes rivalGlow {
  0%, 100% { box-shadow: 0 20px 50px -26px rgba(245,158,11,.32); }
  50%      { box-shadow: 0 24px 58px -22px rgba(245,158,11,.55); }
}
.gprofile__head { display: flex; align-items: center; gap: 14px; }
.gprofile__pin {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--glass-border);
  position: relative;
}
.gprofile__pin::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--text-on-dark-soft);
}
.gprofile__pin--rival::after { background: var(--gold-400); }
.gprofile__name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0 0 3px; }
.gprofile__rating { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .9rem; color: var(--text-on-dark-soft); flex-wrap: wrap; }
.gprofile__rating strong { color: #fff; font-size: 1.02rem; }
.gprofile__stars { display: inline-flex; gap: 1px; }
.gprofile__stars .star { width: 13px; height: 13px; fill: var(--gold-400); }
.gprofile__count { font-size: .86rem; }
.gprofile__note {
  display: flex; align-items: center; gap: 7px;
  margin: 14px 0 0;
  font-size: .85rem; font-weight: 600;
}
.gprofile__note .icon { width: 15px; height: 15px; }
.gprofile__note--flat { color: var(--text-on-dark-soft); opacity: .8; }
.gprofile__note--up { color: #34D399; }
.enemy__line {
  margin: 30px auto 0;
  max-width: 40em;
  text-align: center;
  font-size: 1.08rem;
  color: var(--text-on-dark-soft);
}
.enemy__line strong { color: #fff; }
.enemy__cta { margin-top: 26px; text-align: center; }

/* ---------- Valor / anclaje ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(245,158,11,.4); }
.value-card__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.06));
  color: var(--gold-500);
}
.value-card__icon svg { width: 26px; height: 26px; }
.value-card__big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--navy-800);
  margin: 0 0 8px;
}
.value-card p:not(.value-card__big) { color: var(--text-soft); margin: 0; font-size: .96rem; }
.value-card strong { color: var(--navy-800); }
.value__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- FAQ sobre fondo oscuro ---------- */
.faq--ondark .faq__item {
  background: rgba(255,255,255,.05);
  border-color: var(--glass-border);
  box-shadow: none;
}
.faq--ondark .faq__item[open] { border-color: rgba(245,158,11,.4); }
.faq--ondark .faq__item summary { color: #fff; }
.faq--ondark .faq__body p { color: var(--text-on-dark-soft); }
.faq--ondark .faq__body a { color: var(--gold-300); }

/* Badges y compliance sobre oscuro */
.badges--ondark li {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: var(--glass-border);
}
.badges--ondark .icon { color: var(--gold-400); }
.compliance--ondark {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
}
.compliance--ondark p { color: var(--text-on-dark-soft); }
.compliance--ondark strong { color: #fff; }

/* Microcopy CTA final */
.cta-final__micro { margin-top: 18px; font-size: .92rem; color: var(--text-on-dark-soft); }

/* CTA centrado al final del bloque de dudas */
.dudas__cta { margin-top: 34px; text-align: center; }

/* Cuando dos secciones claras van seguidas, junta un poco la de abajo */
.section--nopad-top { padding-top: 0; }

/* Responsive de las secciones nuevas */
@media (max-width: 780px) {
  .value-grid { grid-template-columns: 1fr; }
  .enemy { grid-template-columns: 1fr; }
  .enemy__vs { justify-self: center; }
}

/* ============================================================
   HERO — FOTO REAL DE LA PLACA (sustituye la escena CSS)
   Flota, tiene barrido de brillo y se inclina con el cursor
   (el tilt anima --rx/--ry sobre #plate, que ahora es esta foto).
   ============================================================ */
.scene { display: flex; align-items: center; justify-content: center; }

/* La placa va RECORTADA (png/webp con transparencia): flota sobre el navy
   como un producto de catálogo, sin mano ni suelo de fondo. */
.hero-card {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(360px, 80%);
  animation: heroCardFloat 7s ease-in-out infinite;
  /* RENDIMIENTO — NO poner aquí ningún filter ni preserve-3d.
     Este elemento se mueve sin parar; un drop-shadow encima obliga a Chrome a
     recalcular la sombra en CADA fotograma (eso hacía que fuese a tirones en
     móvil). will-change lo sube a su propia capa: la GPU solo la desplaza. */
  will-change: transform;
}
/* La sombra va en la IMAGEN, que está quieta dentro del contenedor: el
   navegador la calcula una vez, la cachea y luego solo mueve la capa.
   Sigue siendo drop-shadow para que abrace la silueta, no una caja. */
.hero-card img {
  width: 100%; height: auto; display: block;
  filter:
    drop-shadow(0 30px 45px rgba(0, 0, 0, .55))
    drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}
/* Brillo que recorre la placa: se recorta a su silueta con la máscara */
.hero-card__shine {
  position: absolute;
  inset: 0;
  /* Respaldo: si el navegador ignora la máscara, el brillo queda como un
     rectángulo redondeado sobre la placa (que ya es un cuadrado redondeado),
     así nunca se ve un brillo cuadrado sobre el fondo transparente. */
  border-radius: 5%;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.45) 48%, rgba(255,255,255,.08) 56%, transparent 64%);
  background-size: 250% 100%;
  animation: shineSweep 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  /* La máscara recorta el brillo a la silueta exacta de la placa */
  -webkit-mask: url("../assets/placa-cutout.webp") center / contain no-repeat;
          mask: url("../assets/placa-cutout.webp") center / contain no-repeat;
}
.hero-card__tag {
  position: absolute;
  /* Justo DEBAJO de la placa: si la solapamos, tapa el lema
     "RESEÑAS. CONFIANZA. CLIENTES." impreso en el producto. */
  left: 50%; bottom: -34px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(9, 16, 35, .92);
  border: 1px solid var(--glass-border);
  font-size: .76rem; font-weight: 600; color: #fff;
  white-space: nowrap;
}
.hero-card__tag svg { width: 15px; height: 15px; color: var(--gold-400); }
/* --tap lo baja el JS un instante al tocar la placa (efecto "pulsar").
   Al registrarlo con @property la vuelta al 1 es suave, no un salto. */
@property --tap { syntax: "<number>"; inherits: false; initial-value: 1; }
.hero-card { --tap: 1; transition: --tap .18s var(--ease); }

/* Flotar más marcado + balanceo, para que no se quede soso */
@keyframes heroCardFloat {
  0%   { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) rotate(0deg) scale(var(--tap)); }
  50%  { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-22px) rotate(-1.2deg) scale(var(--tap)); }
  100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) rotate(0deg) scale(var(--tap)); }
}

/* La placa invita a tocarla */
.hero-card { cursor: pointer; }

/* Halo dorado que respira detrás de la placa */
.hero__visual .scene__halo {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, .22), transparent 62%),
    radial-gradient(ellipse at 45% 40%, rgba(37, 99, 235, .35), transparent 60%);
  animation: haloBreath 4.5s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* ---------- Estrellas que salen de la placa ---------- */
.sparks {
  position: absolute;
  top: 62%; left: 50%;
  width: 0; height: 0;
  z-index: 3;
  pointer-events: none;
}
.spark {
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0;
  animation: sparkFly var(--dur, 900ms) cubic-bezier(.18, .7, .3, 1) var(--delay, 0ms) forwards;
}
.spark svg {
  width: 100%; height: 100%;
  fill: var(--gold-400);
  filter: drop-shadow(0 2px 9px rgba(251, 191, 36, .85));
}
@keyframes sparkFly {
  0%   { transform: translate(0, 0) scale(.25) rotate(0deg); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(var(--rot)); opacity: 0; }
}

/* Las ondas NFC salen DEL icono de la placa (antes quedaban ocultas detrás):
   refuerzan el "acerca el móvil aquí" sin tapar el mensaje. */
.hero__visual .nfc-waves {
  z-index: 2;
  top: 62%;
  left: 50%;
}
.hero__visual .nfc-waves span { border-color: rgba(251, 191, 36, .5); }

/* Demo en vídeo dentro del bloque "Tu pedido incluye".
   Es una grabación vertical de móvil: la mostramos a ancho de móvil y
   centrada, así queda equilibrada con la columna de texto (si la dejamos
   a todo el ancho se va a ~900px de alto y descuadra la sección). */
.include__frame--video {
  max-width: 320px;
  margin-inline: auto;
}
.include__frame--video video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--navy-900);
}

/* ============================================================
   RENDIMIENTO EN MÓVIL — Chrome iba a tirones con todo activo.
   En pantallas pequeñas quitamos lo caro y dejamos lo que luce:
   la placa flotando + las estrellas (ambas son solo transform/opacity,
   que van por GPU). Lo que se queda fuera:
   · el brillo: mezcla (mix-blend) + máscara + animar background-position
     obligan a repintar la placa entera en cada fotograma.
   · el halo latiendo: animar un elemento con blur DENTRO del contexto 3D
     de .scene es justo el combo que ya nos rompió Chrome antes.
   · la sombra de cada estrella: 7 filtros animándose a la vez.
   ============================================================ */
@media (max-width: 700px) {
  .hero-card__shine { display: none; }
  .hero__visual .scene__halo { animation: none; }
  .spark svg { filter: none; }
  /* Una sola sombra (más barata) y algo más ceñida */
  .hero-card img { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { animation: none; transform: rotateX(6deg) rotateY(-12deg); cursor: default; will-change: auto; }
  .hero-card__shine { display: none; }
  /* Sin estrellas ni halo latiendo para quien pide menos movimiento
     (el JS ya no las genera, esto es el cinturón de seguridad). */
  .sparks { display: none; }
  .hero__visual .scene__halo { animation: none; }
}

/* ============================================================
   BARRA DE COMPRA FIJA (solo móvil) — más conversión
   ============================================================ */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(9, 16, 35, .97);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .6);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.buybar__text { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.buybar__price { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.08rem; }
.buybar__note { font-size: .74rem; color: var(--text-on-dark-soft); }
.buybar__wa {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--wa-green);
  display: grid; place-items: center;
}
.buybar__wa svg { width: 24px; height: 24px; fill: #fff; }
.buybar__btn { white-space: nowrap; min-height: 46px; }

@media (max-width: 700px) {
  .buybar { display: flex; }
  body.show-buybar .buybar { transform: translateY(0); }
  /* En móvil la WhatsApp va DENTRO de la barra: ocultamos el botón flotante
     para no amontonar (así nunca se solapan). */
  .wa-float { display: none; }
  /* Que el último bloque del footer no quede tapado por la barra */
  .footer { padding-bottom: 96px; }
}