:root {
  --color-primary: #f39200;
  --color-second: #12365a;
  --color-third: #f8b235;
  --color-bg: #ffffff;
  --color-text: #222222;
  --blue-dark: #003366;
  --blue-dark-rgb: 243, 146, 0;
  --yellow: #de953f;
  --white: #ffffff;

  --card-margin: 1.8rem;
  --card-padding: 3rem;
  --card-radius: 20px;
  --card-max-width: 20rem;
  --card-gap: 1rem;

  --font-size-text: 1.5rem;
  --font-size-text-small: 1rem;

  --media-padding: 1.3rem;

  /* layout */
  --maxw: 980px;
  --radius: 18px;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);

  /* neon / fondo (azul + negro) */
  --bg-0: #040814;
  --bg-1: #050b18;

  --neon-blue: 74, 167, 255;     /* rgb */
  --neon-cyan: 0, 236, 255;      /* rgb */
  --neon-violet: 138, 99, 255;   /* rgb */
  --neon-yellow: 255, 196, 64;   /* rgb (acento) */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: rgba(255,255,255,0.92);

  /* ✅ FONDO ÚNICO CONTINUO (sin amarillos de fondo) */
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(var(--neon-blue), 0.16), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(var(--neon-violet), 0.14), transparent 62%),
    radial-gradient(900px 520px at 50% 92%, rgba(var(--neon-cyan), 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  background-attachment: fixed;
}

/* capa global sutil tipo “neon haze” */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(var(--neon-blue), 0.08), transparent 60%),
    radial-gradient(1200px 520px at 50% 110%, rgba(var(--neon-violet), 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  mix-blend-mode: screen;
}

/* 🔥 micro-amarillo MUY sutil (no pinta el fondo, solo vida) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
  background:
    radial-gradient(700px 300px at 50% 12%, rgba(var(--neon-yellow), 0.08), transparent 65%);
  mix-blend-mode: screen;
}

/* todo el contenido arriba del fondo */
main, section, header, footer, .hero, .pain, .reframe {
  position: relative;
  z-index: 1;
}

/* =========================
   HERO
   ========================= */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 60px) 16px;
  position: relative;
  overflow: hidden;
}

/* grid futurista solo en hero */
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.22;
  mask-image: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}

.hero__wrap {
  width: 100%;
  max-width: var(--maxw);
  text-align: center;
  padding: clamp(18px, 3vw, 44px);
  position: relative;
  z-index: 1;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

/* texts */
.hero__overline {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  /* ✅ acento amarillo elegante */
  color: rgba(var(--neon-yellow), 0.85);
  text-shadow: 0 0 14px rgba(var(--neon-yellow), 0.18);
}

.hero__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  margin: 0 auto 14px;
  max-width: 780px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

.hero__microcopy {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}

/* =========================
   VSL
   ========================= */
.vsl {
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.vsl__frame {
  width: min(860px, 100%);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;

  border-radius: var(--radius);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-soft);
}

/* glow sutil azul/violeta */
.vsl__frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(620px 260px at 30% 10%, rgba(var(--neon-blue), 0.18), transparent 60%),
    radial-gradient(620px 260px at 70% 10%, rgba(var(--neon-violet), 0.12), transparent 62%);
  pointer-events:none;
}

.vsl__video {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;

  object-fit: contain;
  background: #000;
}

.vsl__video::-webkit-media-controls-overlay-play-button,
.vsl__video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* texto bajo video */
.hero__note {
  margin: 10px auto 18px;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.70);
}

/* CTA */
.hero__cta {
  display: grid;
  gap: 10px;
  place-items: center;
  margin-top: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: fit-content;
  padding: 13px 18px;
  border-radius: 14px;
  text-decoration: none;

  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(10,12,18,0.95);

  /* ✅ amarillo solo en elementos clave */
  background: linear-gradient(
    135deg,
    rgba(var(--neon-yellow), 0.95) 0%,
    rgba(var(--neon-yellow), 0.75) 60%,
    #ffd27a 100%
  );

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 18px 42px rgba(var(--neon-yellow), 0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition: transform .18s ease, filter .18s ease;
}

.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn i { font-size: 16px; }

.hero__friction {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
}

/* Móvil intacto */
@media (max-width: 520px) {
  .hero__wrap { padding: 16px; border-radius: var(--radius); }
  .btn {
    width: 100%;
    max-width: 520px;
    padding: 13px 14px;
    letter-spacing: 0.10em;
  }
}

/* Desktop: video sin barras laterales */
@media (min-width: 1024px) {
  .hero { padding: 28px 16px; }
  .hero__wrap { padding: 26px 28px; }

  .hero__title {
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .hero__subtitle { font-size: 16px; margin-bottom: 10px; }
  .hero__microcopy { margin-bottom: 12px; }
  .vsl { margin-bottom: 12px; }
  .hero__note { margin: 8px auto 12px; }

  .vsl__frame {
    width: min(780px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 42vh;
  }

  .vsl__video {
    object-fit: cover;
    object-position: center;
    background: transparent;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .vsl__frame { max-height: 55vh; width: min(600px, 100%); }
  .hero__wrap { padding: 22px 26px; }
  .hero__title { font-size: 32px; }
}

/* =========================
   FIX: Desktop video completo (sin zoom)
   ========================= */
@media (min-width: 1024px) {
  /* Mantén el frame igual */
  .vsl__frame {
    width: min(600px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 42vh;
    background: #000; /* para que las barras se vean “pro” */
  }

  /* ✅ VIDEO COMPLETO (con barras laterales si hace falta) */
  .vsl__video {
    object-fit: contain;      /* <-- clave: NO recorta */
    object-position: center;
    background: #000;         /* barras negras a los lados */
  }
}

/* =========================
   FIX sombra al reproducir video
   ========================= */

/* Quita sombra del contenedor del video */
.vsl__frame{
  box-shadow: none;
}

/* Quita glow superpuesto del video */
.vsl__frame::before{
  display: none;
}

/* =========================
   SECCIÓN PAIN
   ========================= */
.pain{
  padding: clamp(26px, 4vw, 64px) 16px;
}

.pain__wrap{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;

  padding: clamp(18px, 3vw, 36px);
}

.pain__head{ margin-bottom: 18px; }

.pain__title{
  margin: 0;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.pain__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 14px;
  align-items: start;
}

.pain__card{
  border-radius: 14px;
  padding: 14px 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.pain__card:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--neon-blue), 0.35);
  background: rgba(0,0,0,0.36);
}

.pain__icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.pain__icon i{
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}

.pain__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}

/* ✅ card destacada con halo amarillo */
.pain__card--accent{
  background: linear-gradient(135deg, rgba(58,164,255,0.10) 0%, rgba(138,99,255,0.12) 60%, rgba(0,0,0,0.30) 100%);
  border-color: rgba(var(--neon-yellow), 0.35);
  box-shadow:
    0 0 0 1px rgba(var(--neon-yellow), 0.12),
    0 0 26px rgba(var(--neon-yellow), 0.18);
}

/* =========================
   SECCIÓN REFRAME (TRANSPARENTE)
   ========================= */
.reframe{
  padding: 0 16px clamp(28px, 4vw, 64px);
}

.reframe__wrap{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 56px);
  text-align: center;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.reframe__kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}

.reframe__title{
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
}

/* ✅ highlight amarillo SOLO en el mensaje clave */
.reframe__title span{
  display: inline-block;
  margin-top: 6px;
  padding: 0 6px 2px;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, transparent 62%, rgba(var(--neon-yellow), 0.22) 62%);
}

.reframe__lead{
  margin: 0 auto 10px;
  max-width: 820px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.75;
  color: rgba(255,255,255,0.76);
}

.reframe__lead--strong{
  margin-top: 6px;
  color: rgba(255,255,255,0.88);
  font-weight: 650;
}

/* Responsive */
@media (max-width: 900px){
  .pain__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .pain__wrap{ padding: 16px; }
  .pain__card{ padding: 13px 12px; }
  .pain__text{ font-size: 13.5px; }
  .reframe__wrap{ padding: 22px 16px 28px; }
}

/* =========================
   WHATSAPP FLOAT BUTTON
   ========================= */

.wa-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  width: 58px;
  height: 58px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  text-decoration: none;

  /* base azul oscuro */
  background: linear-gradient(
    135deg,
    rgba(20, 36, 78, 0.95),
    rgba(10, 18, 46, 0.95)
  );

  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 0 0 0 rgba(var(--neon-yellow), 0.0);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.wa-float i{
  font-size: 28px;
  color: rgba(255,255,255,0.92);
  transition: color .25s ease, transform .25s ease;
}

/* hover neon amarillo */
.wa-float:hover{
  transform: translateY(-3px) scale(1.04);

  background: linear-gradient(
    135deg,
    rgba(var(--neon-yellow), 0.95),
    rgba(var(--neon-yellow), 0.75)
  );

  box-shadow:
    0 14px 36px rgba(var(--neon-yellow), 0.45),
    0 0 26px rgba(var(--neon-yellow), 0.55);
}

.wa-float:hover i{
  color: rgba(10,12,18,0.95);
  transform: scale(1.08);
}

/* pequeño pulse sutil para llamar la atención */
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--neon-yellow), 0.0); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--neon-yellow), 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(var(--neon-yellow), 0.0); }
}

.wa-float{
  animation: waPulse 3.5s infinite;
}

/* móvil: un poco más compacto */
@media (max-width: 520px){
  .wa-float{
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
  }
  .wa-float i{
    font-size: 24px;
  }
}


/* =========================
   SECCIÓN: QUÉ ES / QUÉ NO ES
   FONDO AZUL SÓLIDO
   ========================= */

.isnot{
  background-color: #01040d; /* azul fuerte */
  padding: clamp(50px, 6vw, 100px) 16px;
}

.isnot__wrap{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

/* Header */
.isnot__head{
  margin-bottom: clamp(24px, 4vw, 36px);
}

.isnot__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.isnot__title span{
  color: rgba(var(--neon-yellow), 0.95);
}

.isnot__sub{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

/* Grid */
.isnot__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
  text-align: left;
}

/* Columns */
.isnot__col{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
}

/* Badge */
.isnot__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
}

.isnot__badge i{
  font-size: 18px;
}

.isnot__badge--yes{
  box-shadow: 0 0 18px rgba(var(--neon-cyan), 0.18);
}

.isnot__badge--no{
  box-shadow: 0 0 18px rgba(var(--neon-violet), 0.18);
}

.isnot__colTitle{
  margin: 0 0 14px;
}

/* List */
.isnot__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.isnot__item{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.80);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.isnot__item:hover{
  border-color: rgba(var(--neon-yellow), 0.45);
  box-shadow: 0 0 28px rgba(var(--neon-yellow), 0.25);
}

.isnot__mark{
  font-size: 18px;
  line-height: 1;
}

/* Footer */
.isnot__footer{
  margin-top: clamp(28px, 5vw, 42px);
}

.isnot__line1{
  margin: 0 0 12px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  color: #ffffff;
}

.isnot__line2{
  display: inline-block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(10,12,18,0.95);
  background: linear-gradient(
    135deg,
    rgba(var(--neon-yellow), 0.95),
    rgba(var(--neon-yellow), 0.75)
  );
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(var(--neon-yellow), 0.35);
}

/* Responsive */
@media (max-width: 900px){
  .isnot__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .isnot__col{
    padding: 16px;
  }
  .isnot__item{
    padding: 11px 12px;
  }
}


/* =========================
   SECCIÓN: OUTCOME (AL TERMINAR)
   ========================= */

.outcome{
  padding: clamp(40px, 6vw, 90px) 16px;
}

.outcome__wrap{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

/* kicker */
.outcome__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--neon-yellow), 0.90);
  text-shadow: 0 0 16px rgba(var(--neon-yellow), 0.18);
}

/* title */
.outcome__title{
  margin: 0 auto 18px;
  max-width: 900px;
  font-size: clamp(24px, 3.0vw, 42px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
}

.outcome__title span{
  display: inline-block;
  padding: 0 6px 2px;
  background: linear-gradient(180deg, transparent 62%, rgba(var(--neon-yellow), 0.22) 62%);
}

/* list */
.outcome__list{
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  max-width: 860px;

  display: grid;
  gap: 12px;
}

/* item card */
.outcome__item{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;

  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);

  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.outcome__item:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--neon-yellow), 0.30);
  box-shadow: 0 0 28px rgba(var(--neon-yellow), 0.14);
}

/* icon */
.outcome__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
}

.outcome__icon i{
  font-size: 20px;
  color: rgba(var(--neon-yellow), 0.92);
  text-shadow: 0 0 16px rgba(var(--neon-yellow), 0.16);
}

/* text */
.outcome__text{
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}

/* note */
.outcome__note{
  margin: 0 auto;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.70);
}

/* responsive */
@media (max-width: 520px){
  .outcome__item{
    grid-template-columns: 40px 1fr;
    padding: 13px 12px;
    border-radius: 14px;
  }

  .outcome__icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .outcome__icon i{
    font-size: 18px;
  }

  .outcome__text{
    font-size: 13.8px;
  }
}

/* =========================
   FIT XL – ESTILO MANIFIESTO
   ========================= */

.fit-xl{
  padding: clamp(60px, 8vw, 140px) 16px;
}

.fit-xl__wrap{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

/* BLOQUES */
.fit-xl__block{
  max-width: 820px;
  margin: 0 auto;
}

/* TITULO PRINCIPAL */
.fit-xl__title{
  margin: 0 0 28px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
}

.fit-xl__title span{
  display: inline-block;
  padding: 0 10px 6px;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(var(--neon-yellow), 0.28) 60%
  );
}

/* SUBTITULO */
.fit-xl__subtitle{
  margin: 0 0 22px;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.90);
}

/* LISTAS */
.fit-xl__list{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: 18px;

  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
}

/* bullets minimalistas */
.fit-xl__list li{
  position: relative;
  padding-left: 34px;
}

.fit-xl__list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 34px;
  line-height: 1;
  color: rgba(var(--neon-yellow), 0.95);
}

/* lista NO ES */
.fit-xl__list--no{
  color: rgba(255,255,255,0.65);
}

.fit-xl__list--no li::before{
  color: rgba(255,255,255,0.35);
}

/* DIVISOR */
.fit-xl__divider{
  width: 2px;
  height: 64px;
  margin: clamp(48px, 6vw, 72px) auto;

  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--neon-yellow), 0.85),
    transparent
  );

  box-shadow: 0 0 24px rgba(var(--neon-yellow), 0.45);
}

/* RESPONSIVE */
@media (max-width: 520px){
  .fit-xl__divider{
    height: 48px;
  }

  .fit-xl__list{
    font-size: 16.5px;
    gap: 14px;
  }

  .fit-xl__list li{
    padding-left: 26px;
  }

  .fit-xl__list li::before{
    font-size: 26px;
  }
}

/* =========================
   FIT2 – FORMAL / PREMIUM (SÍ / NO)
   ========================= */

/* ✅ Menos espacio con la sección anterior + ✅ espacio abajo real */
.fit2{
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(60px, 8vw, 120px); /* 🔥 aire inferior REAL */
}

.fit2__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Header */
.fit2__head{
  text-align: center;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.fit2__kicker{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.fit2__headline{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
}

.fit2__sub{
  margin: 0 auto;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* Grid */
.fit2__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Cards */
.fit2__card{
  position: relative;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

/* sutil acento */
.fit2__card::before{
  content:"";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: rgba(var(--neon-yellow), 0.55);
  box-shadow: 0 0 18px rgba(var(--neon-yellow), 0.22);
}

.fit2__card--no::before{
  background: rgba(255,255,255,0.22);
  box-shadow: none;
}

.fit2__title{
  margin: 0 0 14px;
}

/* Pills */
.fit2__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

.fit2__pill i{
  font-size: 18px;
}

.fit2__pill--yes i{
  color: rgba(var(--neon-yellow), 0.95);
  text-shadow: 0 0 14px rgba(var(--neon-yellow), 0.18);
}

.fit2__pill--no i{
  color: rgba(255,255,255,0.60);
}

/* Lists */
.fit2__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fit2__item{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;

  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);

  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.80);
}

.fit2__list--no .fit2__item{
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.68);
}

/* Dots */
.fit2__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
}

.fit2__dot--yes{
  background: rgba(var(--neon-yellow), 0.95);
  box-shadow: 0 0 14px rgba(var(--neon-yellow), 0.28);
}

.fit2__dot--no{
  background: rgba(255,255,255,0.30);
}

/* Footer */
.fit2__footer{
  margin-top: clamp(18px, 3vw, 28px);
  text-align: center;
}

.fit2__line{
  width: 64px;
  height: 2px;
  margin: 0 auto 12px;
  background: rgba(var(--neon-yellow), 0.85);
  box-shadow: 0 0 18px rgba(var(--neon-yellow), 0.25);
  border-radius: 999px;
}

.fit2__footText{
  margin: 0 auto;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* =========================
   CTA FINAL – FIT2
   ========================= */

.fit2__cta{
  margin-top: clamp(24px, 4vw, 40px);
  display: flex;
  justify-content: center;
}

.fit2__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 16px;
  text-decoration: none;

  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;

  color: rgba(10,12,18,0.95);
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-third)
  );

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 38px rgba(243,146,0,0.28);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.fit2__btn i{
  font-size: 18px;
}

.fit2__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(243,146,0,0.45);
  filter: brightness(1.05);
}

/* Responsive */
@media (max-width: 900px){
  .fit2__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .fit2__card{ padding: 16px; }
  .fit2__item{ padding: 11px 11px; font-size: 13.8px; }
  .fit2__btn{
    width: 100%;
    justify-content: center;
    max-width: 360px;
  }
}

/* Desktop grande: todavía más aire inferior visual */
@media (min-width: 1024px){
  .fit2{
    padding-bottom: 50px;
  }
}

/* =========================
   FIX ESPACIO LATERAL – MÓVIL
   ========================= */

@media (max-width: 520px){

  /* Más aire a los lados de toda la sección */
  .fit2{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* El wrap también respira (clave) */
  .fit2__wrap{
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Las cards no se pegan al borde */
  .fit2__card{
    padding-left: 14px;
    padding-right: 14px;
  }

}

/* =========================
   BUY – SECCIÓN DE COMPRA
   ========================= */

.buy{
  padding: clamp(56px, 7vw, 110px) 16px;
}

.buy__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

.buy__head{
  text-align: center;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.buy__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.buy__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
}

.buy__sub{
  margin: 0 auto;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.74);
}

/* Card principal */
.buy__card{
  position: relative;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* glow superior (sin fondo amarillo, solo acento) */
.buy__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(18,54,90,0.55), transparent 60%),
    radial-gradient(420px 220px at 80% 10%, rgba(120,90,255,0.25), transparent 60%),
    radial-gradient(420px 240px at 50% 0%, rgba(243,146,0,0.10), transparent 60%);
  pointer-events:none;
}

/* Badge preventa */
.buy__badge{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.92);
}

.buy__badge i{
  font-size: 18px;
  color: rgba(var(--neon-yellow), 0.95);
  text-shadow: 0 0 14px rgba(var(--neon-yellow), 0.20);
}

/* Grid interno */
.buy__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  padding-top: clamp(64px, 6vw, 78px); /* deja espacio al badge */
}

/* Left */
.buy__incluyeTitle{
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.buy__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.buy__item{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;

  padding: 14px;
  border-radius: 16px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.buy__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.buy__icon i{
  font-size: 20px;
  color: rgba(255,255,255,0.86);
}

.buy__text strong{
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2px;
}

.buy__text span{
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
}

/* Right */
.buy__right{
  display: grid;
  gap: 14px;
}

.buy__priceBox{
  border-radius: 20px;
  padding: 18px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.12);
}

.buy__priceLabel{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.buy__priceLabel--strong{
  margin-top: 14px;
  color: rgba(255,255,255,0.78);
}

.buy__priceOld{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
}

.buy__priceOld span{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-left: 6px;
  color: rgba(255,255,255,0.45);
}

.buy__priceNow{
  margin: 0;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(var(--neon-yellow), 0.96);
  text-shadow: 0 0 26px rgba(var(--neon-yellow), 0.20);
}

.buy__priceNow span{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-left: 8px;
  color: rgba(255,255,255,0.70);
}

.buy__micro{
  margin: 12px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.74);
}

.buy__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;

  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;

  color: rgba(10,12,18,0.95);
  background: linear-gradient(135deg, var(--color-primary), var(--color-third));
  border: 1px solid rgba(255,255,255,0.18);

  box-shadow: 0 16px 40px rgba(243,146,0,0.25);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.buy__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 36px rgba(243,146,0,0.42);
}

.buy__btn i{ font-size: 18px; }

.buy__friction{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
}

/* Trust row */
.buy__trust{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.buy__trustItem{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 10px;
  border-radius: 14px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);

  font-size: 12px;
}

.buy__trustItem i{
  font-size: 16px;
  color: rgba(255,255,255,0.80);
}

/* Responsive */
@media (max-width: 900px){
  .buy__grid{
    grid-template-columns: 1fr;
  }
  .buy__trust{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .buy{
    padding: 44px 16px;
  }
  .buy__grid{
    padding: 18px;
    padding-top: 62px;
  }
  .buy__badge{
    left: 12px;
    top: 12px;
  }
  .buy__item{
    padding: 13px;
  }
}

/* =========================
   BONOS STEP – TIMELINE
   ========================= */

.bonos-step{
  padding: clamp(56px, 7vw, 110px) 16px;
}

.bonos-step__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

.bonos-step__head{
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.bonos-step__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
}

.bonos-step__sub{
  margin: 0 auto;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* layout como la referencia */
.bonos-step__grid{
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: start;
}

/* texto vertical "Bonos" */
.bonos-step__side{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
}

.bonos-step__side span{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.10);
  user-select: none;
}

/* lista timeline */
.bonos-step__list{
  position: relative;
  display: grid;
  gap: 16px;
  padding-left: 42px; /* espacio para la línea y el punto */
}

/* línea vertical */
.bonos-step__list::before{
  content:"";
  position: absolute;
  left: 18px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(var(--neon-yellow), 0.45),
    rgba(255,255,255,0.10)
  );
  opacity: 0.85;
}

/* item */
.bonos-step__item{
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: stretch;
}

/* punto en la línea */
.bonos-step__item::before{
  content:"";
  position: absolute;
  left: -28px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--neon-yellow), 0.95);
  box-shadow: 0 0 18px rgba(var(--neon-yellow), 0.35);
}

/* pill "Bonus 01" */
.bonos-step__pill{
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonos-step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);

  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

/* card */
.bonos-step__card{
  border-radius: 18px;
  padding: 16px 16px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

/* leve highlight como la tarjeta marcada en tu estilo */
.bonos-step__card--accent{
  background: linear-gradient(
    135deg,
    rgba(18,54,90,0.40) 0%,
    rgba(120,90,255,0.16) 55%,
    rgba(0,0,0,0.26) 100%
  );
  border-color: rgba(255,255,255,0.14);
}

.bonos-step__cardTitle{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
}

.bonos-step__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
}

/* Responsive */
@media (max-width: 900px){
  .bonos-step__grid{
    grid-template-columns: 1fr;
  }
  .bonos-step__side{
    display: none; /* en móvil quitamos el texto vertical */
  }
  .bonos-step__list{
    padding-left: 38px;
  }
}

@media (max-width: 520px){
  .bonos-step{
    padding: 48px 16px;
  }
  .bonos-step__item{
    grid-template-columns: 1fr;
  }
  .bonos-step__pill{
    justify-content: flex-start;
  }
  .bonos-step__item::before{
    top: 22px;
  }
}

/* Ajuste fino: menos espacio arriba en sección Bonos */
.bonos-step{
  padding-top: clamp(24px, 4vw, 38px); /* antes estaba mucho más alto */
}

/* =========================
   SOCIAL PROOF – BANNER
   ========================= */

.social-proof{
  padding: clamp(44px, 6vw, 90px) 16px;
  position: relative;

  /* “bloque sólido” como la referencia, sin cortes */
  background: linear-gradient(180deg,
    rgba(4, 18, 40, 0.95) 0%,
    rgba(3, 14, 30, 0.98) 100%
  );
}

.social-proof::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .9;

  /* glow sutil (sin amarillo en fondo) */
  background:
    radial-gradient(700px 320px at 50% 30%, rgba(18,54,90,0.55), transparent 60%),
    radial-gradient(800px 380px at 20% 90%, rgba(80,120,255,0.18), transparent 60%);
}

.social-proof__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.social-proof__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.social-proof__title{
  margin: 0 auto 22px;
  max-width: 980px;

  /* grande pero controlado si el texto crece */
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.02em;

  text-transform: uppercase;
  color: rgba(255,255,255,0.96);
}

/* Quotes */
.social-proof__quotes{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.social-proof__quote{
  margin: 0;
  padding: 14px 16px;

  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);

  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.80);
}

/* detalle neon amarillito SOLO en acentos, no en fondo */
.social-proof__quote::before{
  content:"";
  display:inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;

  background: rgba(var(--neon-yellow), 0.95);
  box-shadow: 0 0 16px rgba(var(--neon-yellow), 0.22);
}

/* Mobile */
@media (max-width: 520px){
  .social-proof__title{
    text-transform: none; /* se lee mejor en pantallas pequeñas */
    letter-spacing: -0.01em;
  }
  .social-proof__quote{
    padding: 13px 14px;
  }
}

/* =========================
   FAQ – ACORDEÓN (+ -> X)
   ========================= */

.faq{
  padding: clamp(56px, 7vw, 110px) 16px;
}

.faq__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

.faq__head{
  text-align: center;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.faq__kicker{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.faq__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
}

.faq__sub{
  margin: 0 auto;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* list */
.faq__list{
  display: grid;
  gap: 14px;
}

/* item card */
.faq__item{
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* question button */
.faq__q{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 14px;
  align-items: center;

  padding: 16px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;

  color: rgba(255,255,255,0.92);
}

.faq__q:focus-visible{
  outline: 2px solid rgba(var(--neon-yellow), 0.65);
  outline-offset: 3px;
  border-radius: 16px;
}

.faq__qText{
  font-size: 15px;
  line-height: 1.5;
  font-weight: 750;
  color: rgba(255,255,255,0.90);
}

/* icon circle (+ / x) */
.faq__icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  justify-self: end;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

/* + built with 2 lines */
.faq__icon::before,
.faq__icon::after{
  content:"";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--neon-yellow), 0.95);
  box-shadow: 0 0 16px rgba(var(--neon-yellow), 0.20);
  transition: transform .22s ease, opacity .22s ease;
}

.faq__icon::after{
  transform: rotate(90deg);
}

/* answer wrapper (animated) */
.faq__a{
  height: 0;
  overflow: hidden;
  transition: height .26s ease;
}

/* answer inner */
.faq__aInner{
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.76);

  transform: translateY(-6px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* opened state */
.faq__item.is-open .faq__aInner{
  transform: translateY(0);
  opacity: 1;
}

.faq__item.is-open .faq__icon{
  transform: rotate(180deg);
  border-color: rgba(var(--neon-yellow), 0.35);
  background: rgba(0,0,0,0.32);
}

/* turn + into X */
.faq__item.is-open .faq__icon::before{
  transform: rotate(45deg);
}

.faq__item.is-open .faq__icon::after{
  transform: rotate(-45deg);
}

/* mobile */
@media (max-width: 520px){
  .faq__q{
    padding: 14px 14px;
    grid-template-columns: 1fr 40px;
  }
  .faq__qText{
    font-size: 14.5px;
  }
  .faq__aInner{
    padding: 0 14px 14px;
  }
}

/* =========================
   FOOTER – EL QUE TENGA TIENDA
   ========================= */

.site-footer{
  width: 100%;
  padding: 22px 16px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.site-footer__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__text{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
}

.site-footer__link{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;

  color: rgba(var(--neon-yellow), 0.90);
  transition: color .18s ease, text-shadow .18s ease;
}

.site-footer__link:hover{
  color: rgba(var(--neon-yellow), 1);
  text-shadow: 0 0 14px rgba(var(--neon-yellow), 0.45);
}

/* Mobile */
@media (max-width: 520px){
  .site-footer__wrap{
    flex-direction: column;
    text-align: center;
  }
}


/* ===============================
   FULLSCREEN LOADER
================================ */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(74,167,255,.18), transparent 55%),
    radial-gradient(900px 520px at 80% 75%, rgba(255,196,64,.14), transparent 60%),
    linear-gradient(180deg, #040814, #050b18);

  transition: opacity .6s ease, visibility .6s ease;
}

/* oculto */
.loader--hidden{
  opacity: 0;
  visibility: hidden;
}

/* contenido */
.loader__inner{
  text-align: center;
  color: #fff;
}

/* icono girando */
.loader__icon{
  font-size: 52px;
  color: var(--color-primary);
  animation: spin 1.2s linear infinite;
  display: inline-block;
}

/* texto */
.loader__text{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* animación */
@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* responsive */
@media (max-width: 640px){
  .loader__icon{
    font-size: 44px;
  }
}

/* =========================
   TESTIMONIOS (IMÁGENES)
   ========================= */

.testi{
  position: relative;
  padding: clamp(36px, 5vw, 72px) 16px;
}

.testi__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

.testi__head{
  text-align: center;
  margin-bottom: clamp(16px, 3vw, 26px);
}

.testi__kicker{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.testi__title{
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
}

.testi__sub{
  margin: 0 auto;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

/* GRID */
.testi__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* CARD */
.testi__card{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);

  /* importante: que no pegue a los lados en móvil */
  width: 100%;
}

.testi__card img{
  width: 100%;
  height: auto;
  display: block;
  /* tus imágenes ya traen texto, no las deformamos */
  object-fit: cover;
}

/* hover sutil (premium) */
@media (hover:hover){
  .testi__card{
    transition: transform .18s ease, border-color .18s ease, filter .18s ease;
  }
  .testi__card:hover{
    transform: translateY(-2px);
    border-color: rgba(var(--neon-blue), 0.25);
    filter: brightness(1.02);
  }
}

/* RESPONSIVE */
@media (max-width: 980px){
  .testi__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .testi{
    padding: 28px 16px;
  }
  .testi__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* “aire” lateral garantizado aunque el contenedor esté al límite */
  .testi__wrap{
    padding: 0 2px;
  }
}


.buy__check{
  display: inline-flex;
  margin-left: 8px;
  transform: translateY(1px);
  filter: drop-shadow(0 0 10px rgba(var(--neon-yellow),0.35));
}

.buy__full{
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: .12em;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}

.buy__sub--fulltext{
  margin-top: 10px;
  color: rgba(255,255,255,0.78);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}