body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  overflow-x: hidden;
}

/* LUCES DORADAS */
body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.25), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 215, 0, 0.2), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(184, 134, 11, 0.15), transparent 40%);
  animation: moveLights 12s infinite alternate;
}

/* LÍNEA ENERGÍA DORADA */
body::after {
  content: "";
  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(212,175,55,0.08) 50%, /* 👈 MÁS SUAVE */
      transparent 60%
    ),

    radial-gradient(
      circle at 50% 80%,
      rgba(212,175,55,0.10), /* 👈 MUY SUTIL */
      transparent 70%
    ),

    radial-gradient(
      circle at 30% 90%,
      rgba(212,175,55,0.06),
      transparent 75%
    );

  background-size: 200% 200%;
  animation: energy 8s linear infinite;

  pointer-events: none;
  z-index: 0;
}

/* ANIMACIONES */
@keyframes moveLights {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-80px, -40px); }
}

@keyframes energy {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* HERO */
.hero {
    
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* CONTENIDO */
.hero-content {
  max-width: 600px;
  padding: 20px;
}

/* TITULOS */
.hero h1 {
  color: #d4af37;
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.hero h2 {
  font-size: 38px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 20px;
  color: white;
}

/* TEXTO */
.hero p {
  color: #ccccccea;
  font-size: 16px;
  margin-bottom: 30px;
}

/* BOTÓN */
.btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: rgb(0, 0, 0);
  padding: 15px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

/* HOVER BOTÓN */
/* BOTÓN ORO METÁLICO */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );

  animation: shineMove 2.5s infinite;
}

.btn {
  position: relative;
  overflow: hidden;
}

@keyframes shineMove {
  0% { left: -100%; }
  100% { left: 100%; }
}
/* ANIMACIÓN BRILLO */
@keyframes goldShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/* SECCIÓN */
.testimonials {
  padding: 100px 20px;
  text-align: center;
}

/* TITULO */
.testimonials h2 {
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* CONTENEDOR */
.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* TARJETAS */
.card {
  width: 110px;
  padding: 0px;
  border-radius: 15px;
  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,0.3);
  transition: 0.4s;
  opacity: 0.6;
}

/* TARJETA CENTRAL */
.card.active {
  transform: scale(1.1);
  border: 2px solid #d4af37;
  opacity: 1;
  box-shadow: 0 0 30px rgba(212,175,55,0.3);
}

/* LATERALES */
.card.side {
  transform: scale(0.9);
}

/* IMAGEN */
.card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #d4af37;
}

/* ESTRELLAS */
.stars {
  color: #d4af37;
  margin: 10px 0;
}

/* TEXTO */
.card p {
  font-size: 14px;
  color: #ccc;
}

/* NOMBRE */
.card span {
  display: block;
  margin-top: 10px;
  color: #d4af37;
}

/* DOTS */
.dots {
  margin-top: 20px;
}

.dot {
  height: 8px;
  width: 8px;
  margin: 0 5px;
  background: #555;
  border-radius: 50%;
  display: inline-block;
}

.dot.active {
  background: #d4af37;
}
/* TESTIMONIOS */
.testimonials {
  padding: 100px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* CONTENEDOR */
.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* TARJETAS */
.card {
  width: 220px;
  padding: 20px;
  border-radius: 15px;
  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,0.3);
  transition: all 0.5s ease;
  opacity: 0.6;
}

/* ACTIVA */
.card.active {
  transform: scale(1.1);
  border: 2px solid #d4af37;
  opacity: 1;
  box-shadow: 0 0 30px rgba(212,175,55,0.3);
}

/* LATERALES */
.card.side {
  transform: scale(0.9);
}

/* IMAGEN */
.card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #d4af37;
}

/* ESTRELLAS */
.stars {
  color: #d4af37;
  margin: 10px 0;
}

/* TEXTO */
.card p {
  font-size: 14px;
  color: #ccc;
}

/* NOMBRE */
.card span {
  display: block;
  margin-top: 10px;
  color: #d4af37;
}

/* DOTS */
.dots {
  margin-top: 20px;
}

.dot {
  height: 8px;
  width: 8px;
  margin: 0 5px;
  background: #555;
  border-radius: 50%;
  display: inline-block;
}

.dot.active {
  background: #d4af37;
}
/* CONTENEDOR */
.slider {
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: auto;
}

/* FILA */
.cards {
  display: flex;
  transition: transform 0.6s ease;
  align-items: center;
}

/* TARJETAS */
.card {
  min-width: 260px;
  margin: 0 15px;
  flex-shrink: 0; 
}.testimonials h2 {
  color: #ffffff;
}
/* SECCIÓN EXPERIENCIA */
.experience {
  padding: 80px 20px;
}

/* CONTENEDOR */
.exp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1000px;
  margin: auto;
  flex-wrap: wrap;
}

/* IMAGEN */
.exp-image img {
  width: 300px;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}

/* TEXTO */
.exp-text {
  max-width: 400px;
}

.exp-text h2 {
  color: #ccc;
  font-size: 18px;
  margin-bottom: 10px;
}

.exp-text h1 {
  color: #d4af37;
  font-size: 28px;
  line-height: 1.3;
}

/* ========================= */
/* AUTORIDAD */
/* ========================= */

.authority {
  padding: 100px 20px;
  text-align: center;
  position: relative;
}

/* CONTENEDOR */
.authority-container {
  max-width: 900px;
  margin: auto;
}

/* IMAGEN */
.authority-img img {
  width: 100%;
  max-width: 350px;
  border-radius: 20px;
  margin-bottom: 40px;
  transition: 0.4s;
  box-shadow: 0 0 40px rgba(212,175,55,0.2);
}

/* HOVER PRO */
.authority-img img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 60px rgba(212,175,55,0.5);
}

/* TEXTO DORADO */
.authority-sub {
  font-size: 22px;
  font-style: italic;
  margin-bottom: 40px;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* TEXTO PRINCIPAL */
.authority-main {
  font-size: 26px;
  line-height: 1.5;
  color: #fff;
  font-weight: 600;
}

/* RESALTADO */
.authority-main span {
  color: #d4af37;
  font-weight: 700;
}
/* ========================= */
/* IMAGEN FINAL */
/* ========================= */

.final-image {
  padding: 80px 20px;
  text-align: center;
}

.final-image img {
  width: 100%;
  max-width: 900px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(212,175,55,0.3);
  transition: 0.4s;
}

/* EFECTO PRO */
.final-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 60px rgba(171, 171, 28, 0.6);
}
/* ========================= */
/* SECCIÓN BLANCA PRO */
/* ========================= */

/* ANIMACIONES */
@keyframes moveGold {
  100% { transform: translate(-100px, -50px); }
}

@keyframes shineGold {
  100% { background-position: -200% 0; }
}

/* CONTENIDO */
.system-container {
  max-width: 1100px;
  margin: auto;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #d4af37;
}

/* TITULO */
.system-pro h1 {
  font-size: 38px;
  color: #d4af37;
  margin-bottom: 20px;
}

/* DESCRIPCIÓN */
.system-desc {
  color: #ffffff;
  max-width: 700px;
  margin: auto;
  margin-bottom: 60px;
}

/* RESALTADO */
.system-pro span {
  color: #d4af37;
  font-weight: bold;
}

/* CONTENIDO FLEX */
.system-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* IMAGEN */
.system-img img {
  max-width: 350px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* TEXTO */
.system-text {
  max-width: 400px;
  text-align: left;
}

.system-text h2 {
  color: #d4af37;
  margin-bottom: 15px;
}

.system-text p {
  color: #ffffff;
}

/* LISTA */
.system-list {
  max-width: 600px;
  margin: auto;
  text-align: left;
}

.system-list h3 {
  margin-bottom: 25px;
  color: #ffffff;
}

/* ITEMS */
.system-list li {
  margin-bottom: 18px;
  padding-left: 30px;
  position: relative;
  color: #ffffff;
  transition: 0.3s;
}

/* PUNTO DORADO */
.system-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4af37, #f5d76e);
  box-shadow: 0 0 10px rgba(212,175,55,0.5);
}

/* HOVER */
.system-list li:hover {
  transform: translateX(6px);
}
.system-img {
  padding: 5px;
  border-radius: 20px;
  background: linear-gradient(45deg, #d4af37, transparent, #d4af37);
}

.system-img img {
  max-width: 350px;
  border-radius: 15px;
  display: block;
  transition: 0.4s;
  animation: float 4s ease-in-out infinite;
}

/* HOVER */
.system-img img:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 30px rgba(212,175,55,0.3),
    0 0 60px rgba(212,175,55,0.2);
}

@keyframes float {
  50% { transform: translateY(-10px); }
}
/* ========================= */
/* GALERÍA PRO */
/* ========================= */

.program-images {
  padding: 120px 20px;
  text-align: center;
}

.program-title {
  color: #fff;
  margin-bottom: 60px;
  font-size: 32px;
}

/* GRID */
.program-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

/* CAJA */
.img-box {
  position: relative;
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(45deg, #d4af37, transparent, #d4af37);
  transition: 0.4s;
}

/* IMAGEN */
.img-box img {
  width: 100%;
  border-radius: 18px;
  display: block;
}

/* EFECTO GLOW */
.img-box:hover {
  transform: scale(1.03);
  box-shadow: 
    0 0 20px rgba(212,175,55,0.4),
    0 0 60px rgba(212,175,55,0.3);
}

/* BRILLO ANIMADO */
.img-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(212,175,55,0.4),
    transparent
  );
  opacity: 0;
  transition: 0.4s;
}

.img-box:hover::before {
  opacity: 1;
}
/* ========================= */
/* FONDO NEGRO + DORADO */
/* ========================= */

.program-images {
  padding: 120px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* LUCES DORADAS */
.program-images::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.25), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,215,0,0.2), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(184,134,11,0.15), transparent 40%);
  animation: goldMove 12s infinite alternate;
  z-index: -1;
}

/* LÍNEA DE ENERGÍA */
.program-images::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(212,175,55,0.15) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: goldEnergy 6s linear infinite;
  z-index: -1;
}

/* ANIMACIONES */
@keyframes goldMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(-80px,-40px); }
}

@keyframes goldEnergy {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ========================= */
/* OFERTA PREMIUM */
/* ========================= */

.offer {
  padding: 100px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* FONDO DORADO ANIMADO */
.offer::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.2), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,215,0,0.15), transparent 40%);
  animation: offerMove 10s infinite alternate;
  z-index: -1;
}

.offer::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(212,175,55,0.15) 50%,
    transparent 60%
  );
  animation: offerShine 6s linear infinite;
  z-index: -1;
}

@keyframes offerMove {
  100% { transform: translate(-80px, -40px); }
}

@keyframes offerShine {
  100% { background-position: -200% 0; }
}

/* PRECIO */
.offer-price {
  font-size: 50px;
  color: #fff;
  margin-bottom: 10px;
}

.offer-price span {
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212,175,55,0.5);
}

/* DESCUENTO */
.offer-discount {
  font-size: 20px;
  color: #ccc;
  margin-bottom: 40px;
}

.offer-discount .old {
  text-decoration: line-through;
  color: #888;
  margin-right: 10px;
}

.offer-discount strong {
  color: #d4af37;
}

/* BOTÓN */
.offer-btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 20px 30px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  max-width: 600px;
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}

/* TEXTO SECUNDARIO */
.offer-btn span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

/* BRILLO BOTÓN */
.offer-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: btnShine 3s infinite;
}

@keyframes btnShine {
  100% { left: 100%; }
}

/* HOVER */
.offer-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(212,175,55,0.6);
}

/* ALERTA */
.offer-warning {
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
}
/* BOTÓN WHATSAPP PRO */
.wp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  z-index: 999;
  cursor: pointer;
}

.wp-float img {
  width: 100%;
  filter: brightness(0) saturate(100%) invert(74%) sepia(36%) saturate(500%) hue-rotate(5deg);
  transition: 0.3s;
}

/* GLOW */
.wp-float:hover img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px gold);
}
/* BOTÓN */
.menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 28px;
  color: #d4af37;
  cursor: pointer;
  z-index: 1000;
}

/* PANEL */
.side-panel {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #0a0a0a;
  padding: 30px 20px;
  transition: 0.4s;
  z-index: 999;
  border-right: 1px solid rgba(212,175,55,0.3);
}

/* ACTIVO */
.side-panel.active {
  left: 0;
}

/* TITULO */
.side-panel h3 {
  color: #d4af37;
  margin-bottom: 30px;
}

/* LINKS */
.side-panel a {
  display: block;
  color: #ccc;
  text-decoration: none;
  margin-bottom: 20px;
  transition: 0.3s;
}

/* HOVER */
.side-panel a:hover {
  color: #d4af37;
  transform: translateX(5px);
}

/* EFECTO LUZ */
.side-panel::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,0.15), transparent 40%);
  z-index: -1;
}
/* PANEL PRO */
.side-panel {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: #050505;
  padding: 30px 20px;
  transition: 0.4s;
  z-index: 999;
  border-right: 1px solid rgba(212,175,55,0.2);
  backdrop-filter: blur(10px);
}

/* ACTIVO */
.side-panel.active {
  left: 0;
}

/* EFECTO FONDO */
.side-panel::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,0.15), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(212,175,55,0.08), transparent 40%);
  z-index: -1;
}

/* TITULO */
.side-panel h3 {
  color: #d4af37;
  margin-bottom: 40px;
  font-size: 20px;
}

/* ITEMS */
.menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 12px;
  text-decoration: none;
  color: #ccc;
  transition: 0.3s;
  position: relative;
}

/* CAJA ICONO */
.icon-box {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  /* BORDE NEON */
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 
    0 0 10px rgba(212,175,55,0.2),
    inset 0 0 10px rgba(212,175,55,0.1);
}

/* TEXTO */
.menu-item span {
  font-size: 16px;
}

/* HOVER */
.menu-item:hover {
  background: rgba(212,175,55,0.05);
  transform: translateX(8px);
}

/* HOVER ICONO */
.menu-item:hover .icon-box {
  box-shadow: 
    0 0 15px rgba(212,175,55,0.5),
    0 0 30px rgba(212,175,55,0.3),
    inset 0 0 15px rgba(212,175,55,0.2);
  border: 1px solid #d4af37;
}

/* BOTÓN */
.menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 28px;
  color: #d4af37;
  cursor: pointer;
  z-index: 1000;
  transition: 0.3s;
}

.menu-toggle:hover {
  transform: scale(1.1);
  text-shadow: 0 0 10px rgba(212,175,55,0.6);
}
/* ITEM */
.menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #ccc;
  transition: 0.3s;
}

/* ICONO CAJA */
.icon-box {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,0.2);
}

/* ICONO SVG */
.icon-box svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  stroke-width: 1.8;
  fill: none;
  transition: 0.3s;
}

/* TEXTO */
.menu-item span {
  font-size: 16px;
}

/* HOVER */
.menu-item:hover {
  background: rgba(212,175,55,0.05);
  transform: translateX(6px);
}

/* EFECTO DORADO EN HOVER */
.menu-item:hover .icon-box {
  border: 1px solid #d4af37;
  box-shadow: 0 0 15px rgba(212,175,55,0.4);
}

.menu-item:hover svg {
  stroke: #d4af37;
}

/* ========================= */
/* VIDEO FINAL PRO */
/* ========================= */

.video-section {
  padding: 120px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* FONDO DORADO */
.video-section::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.2), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,215,0,0.15), transparent 40%);
  animation: moveLights 10s infinite alternate;
  z-index: -1;
}

/* CONTENEDOR */
.video-container {
  max-width: 900px;
  margin: auto;
}

/* TITULO */
.video-title {
  font-size: 34px;
  color: #fff;
  margin-bottom: 15px;
}

/* SUB */
.video-sub {
  color: #ccc;
  margin-bottom: 40px;
}

/* BORDE PRO */
.video-box {
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(45deg, #d4af37, transparent, #d4af37);
  transition: 0.4s;
}

/* HOVER */
.video-box:hover {
  box-shadow: 
    0 0 20px rgba(212,175,55,0.4),
    0 0 60px rgba(212,175,55,0.2);
}

/* VIDEO */
.video-box iframe,
.video-placeholder {
  width: 100%;
  height: 450px;
  border-radius: 18px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  font-size: 20px;
}

/* TEXTO FINAL */
.video-warning {
  margin-top: 20px;
  color: #d4af37;
  font-size: 14px;
}
.video-box {
  overflow: hidden; /* 👈 CLAVE */
}

.video-box video {
  width: 100%;
  height: auto; /* 👈 evita que se deforme */
  max-height: 500px; /* opcional */
  border-radius: 18px;
  display: block;
}
/* ========================= */
/* WARNING SECTION PRO */
/* ========================= */

.warning {
  padding: 100px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* FONDO DORADO ANIMADO */
.warning::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.25), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,215,0,0.2), transparent 40%);
  animation: moveLights 10s infinite alternate;
  z-index: -1;
}

/* CAJA */
.warning-box {
  max-width: 900px;
  margin: auto;
  padding: 50px 30px;
  border-radius: 20px;

  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,0.3);

  box-shadow:
    0 0 20px rgba(212,175,55,0.2),
    0 0 60px rgba(212,175,55,0.1);
}

/* TITULO */
.warning-title {
  color: #ff3b3b;
  font-size: 34px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* SUB */
.warning-sub {
  color: #fff;
  font-size: 26px;
  margin-bottom: 25px;
}

/* TEXTO */
.warning-text {
  color: #ccc;
  font-size: 18px;
  margin-bottom: 20px;
}

/* FINAL */
.warning-final {
  color: #ddd;
  font-size: 18px;
}

/* RESALTADOS */
.warning span {
  color: #d4af37;
  font-weight: bold;
}

.warning strong {
  color: #fff;
}
/* ========================= */
/* FINAL ABSOLUTO */
/* ========================= */

.about-final {
  padding: 120px 20px;
  background: #000;
  position: relative;
  overflow: hidden;
}

/* EFECTO DORADO */
.about-final::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,0.2), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(212,175,55,0.15), transparent 40%);
  animation: finalMove 12s infinite alternate;
  z-index: 0;
}

.about-final::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(212,175,55,0.15) 50%,
    transparent 60%
  );
  animation: finalShine 6s linear infinite;
  z-index: 0;
}

@keyframes finalMove {
  100% { transform: translate(-80px, -40px); }
}

@keyframes finalShine {
  100% { background-position: -200% 0; }
}

/* CONTENIDO */
.about-final-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* TEXTO */
.about-final-text {
  max-width: 500px;
}

.about-final-text h2 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 20px;
}

.about-final-text span {
  color: #d4af37;
}

.about-final-text p {
  color: #ccc;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* DESTACADO */
.final-highlight {
  margin-top: 20px;
  font-weight: bold;
  color: #fff;
}

/* IMAGEN */
.about-final-img img {
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  transition: 0.4s;
  box-shadow: 0 0 40px rgba(212,175,55,0.2);
}

.about-final-img img:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 40px rgba(212,175,55,0.4),
    0 0 80px rgba(212,175,55,0.2);
}
/* TITULO ARRIBA */
.about-title {
  text-align: center;
  font-size: 40px;
  color: #fff;
  margin-bottom: 60px;
}

.about-title span {
  color: #d4af37;
}

/* CONTENEDOR */
.about-final-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* TEXTO DERECHA */
.about-final-text {
  max-width: 500px;
  text-align: left;
}

/* IMAGEN IZQUIERDA */
.about-final-img {
  display: flex;
  justify-content: center;
}
/* ========================= */
/* FIX GLOBAL SIN PARCHES */
/* ========================= */

.video-section,
.warning,
.about-final,
.program-images,
.offer {
  background: transparent !important;
}

/* Quitar fondos duplicados */
.video-section::before,
.warning::before,
.about-final::before,
.program-images::before,
.offer::before,
.video-section::after,
.warning::after,
.about-final::after,
.program-images::after,
.offer::after {
  display: none !important;
}
/* ========================= */
/* DIFUMINADO DORADO DESDE ABAJO */
/* ========================= */

/* Aplica desde esta sección hacia abajo */
.program-images,
.video-section,
.warning,
.about-final {
  position: relative;
  z-index: 1;
}

/* CAPA DORADA GLOBAL */
.program-images::after,
.video-section::after,
.warning::after,
.about-final::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 50% 20%,
    rgba(212,175,55,0.18),
    transparent 60%
  );

  pointer-events: none;
  z-index: -1;
}

/* REFUERZO PROGRESIVO (más abajo = más dorado) */
.video-section::after {
  background: radial-gradient(
    circle at 50% 30%,
    rgba(212,175,55,0.22),
    transparent 65%
  );
}

.warning::after {
  background: radial-gradient(
    circle at 50% 40%,
    rgba(212,175,55,0.28),
    transparent 70%
  );
}

.about-final::after {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212,175,55,0.35),
    transparent 75%
  );
}
/* ========================= */
/* RESPONSIVE MOBILE FIX */
/* ========================= */

@media (max-width: 768px) {

  /* HERO */
  .hero {
    height: auto;
    padding: 80px 20px;
  }

  .hero h2 {
    font-size: 28px;
  }

  /* TARJETAS */
  .cards {
    flex-direction: column;
    gap: 20px;
  }

  .card {
    width: 90%;
    margin: auto;
  }

  /* EXPERIENCIA */
  .exp-container {
    flex-direction: column;
    text-align: center;
  }

  .exp-image img {
    width: 100%;
  }

  /* AUTORIDAD */
  .about-final-container {
    flex-direction: column;
    text-align: center;
  }

  .about-final-text {
    text-align: center;
  }

  /* VIDEO */
  .video-box iframe,
  .video-box video {
    height: 250px;
  }

  /* TÍTULOS */
  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 22px !important;
  }

  /* PADDING GENERAL */
  section {
    padding: 60px 15px !important;
  }
}
/* Optimización animaciones */
body::before,
body::after {
  will-change: transform;
}

/* Reduce velocidad (menos carga CPU) */
@keyframes moveLights {
  100% { transform: translate(-40px, -20px); }
}
/* ========================= */
/* PRODUCT SECTION PRO */
/* ========================= */

.product-section {
  padding: 120px 20px;
  text-align: center;
  position: relative;
}

/* CONTENEDOR */
.product-container {
  max-width: 1000px;
  margin: auto;
}

/* TEXTO SUPERIOR */
.product-top {
  color: #ccc;
  font-style: italic;
  margin-bottom: 20px;
}

/* TITULO */
.product-text h1 {
  font-size: 36px;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 25px;
}

/* DESCRIPCIÓN */
.product-desc {
  color: #ccc;
  max-width: 800px;
  margin: auto;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* IMAGEN */
.product-image img {
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
  box-shadow: 
    0 0 30px rgba(212,175,55,0.2),
    0 0 60px rgba(212,175,55,0.1);
  transition: 0.4s;
}

/* HOVER */
.product-image img:hover {
  transform: scale(1.03);
  box-shadow: 
    0 0 40px rgba(212,175,55,0.4),
    0 0 80px rgba(212,175,55,0.2);
}

/* TEXTO FINAL */
.product-bottom {
  margin-top: 40px;
  color: #ccc;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .product-text h1 {
    font-size: 26px;
  }

  .product-top,
  .product-desc,
  .product-bottom {
    font-size: 14px;
  }
}
/* ========================= */
/* BONUS SECTION PRO */
/* ========================= */

.bonus-section {
  padding: 120px 20px;
  text-align: center;
}

/* TITULO */
.bonus-title {
  font-size: 32px;
  margin-bottom: 60px;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GRID */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: auto;
}

/* TARJETAS */
.bonus-card {
  border-radius: 15px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
}

/* IMÁGENES */
.bonus-card img {
  width: 100%;
  display: block;
  border-radius: 15px;
}

/* EFECTO HOVER */
.bonus-card:hover {
  transform: scale(1.03);
  box-shadow: 
    0 0 20px rgba(212,175,55,0.3),
    0 0 50px rgba(212,175,55,0.2);
}

/* CENTRAR EL ÚLTIMO */
.bonus-center {
  grid-column: span 2;
  max-width: 500px;
  margin: auto;
}
/* ========================= */
/* SECCIÓN 2 VIDEOS */
/* ========================= */

.dual-video {
  padding: 100px 20px;
  text-align: center;
}

.dual-video-title {
  font-size: 28px;
  margin-bottom: 50px;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dual-video-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  max-width: 1000px;
  margin: auto;
  flex-wrap: wrap;
}

/* 👇 NUEVA CLASE (NO AFECTA NADA MÁS) */
.dual-box {
  flex: 1;
  min-width: 300px;
  max-width: 480px;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(212,175,55,0.2);
}

/* VIDEO SOLO AQUÍ */
.dual-box video {
  width: 100%;
  height: auto;
  display: block;
}

/* PLACEHOLDER */
.dual-box .video-placeholder {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  font-size: 18px;
  opacity: 0.7;
}

/* HOVER */
.dual-box:hover {
  box-shadow: 
    0 0 30px rgba(212,175,55,0.4),
    0 0 60px rgba(212,175,55,0.2);
  transform: scale(1.02);
  transition: 0.3s;
}
/* ========================= */
/* VALUE SECTION */
/* ========================= */

.value-section {
  padding: 120px 20px;
}

.value-container {
  display: flex;
  gap: 60px;
  max-width: 1100px;
  margin: auto;
  flex-wrap: wrap;
}

/* IZQUIERDA */
.value-left {
  flex: 1;
  min-width: 300px;
  color: #ccc;
}

.value-left p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.value-highlight {
  color: #d4af37;
  font-weight: bold;
}

.value-final {
  margin-top: 20px;
  font-size: 18px;
  color: #fff;
}

/* IMAGEN */
.value-image {
  margin-top: 30px;
}

.value-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(212,175,55,0.2);
}

/* DERECHA */
.value-right {
  flex: 1;
  min-width: 300px;
}

/* TITULO */
.value-box-title {
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  margin-bottom: 25px;
}

/* LISTA */
.value-list {
  list-style: none;
  padding: 0;
}

/* ITEMS */
.value-list li {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
  color: #ddd;
}

/* ICONO */
.value-list li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: #d4af37;
}

/* RESALTADO */
.value-list strong {
  color: #fff;
}
@media (max-width: 768px) {

  .value-container {
    flex-direction: column;
  }

  .value-image img {
    margin: auto;
    display: block;
  }

}
/* ========================= */
/* PRE CTA SECTION */
/* ========================= */

.pre-cta {
  padding: 120px 20px;
  text-align: center;
}

/* TITULO */
.pre-title {
  font-size: 28px;
  margin-bottom: 60px;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ITEMS */
.pre-items {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* ITEM */
.pre-item h3 {
  color: #fff;
  margin-bottom: 10px;
}

.pre-item p {
  color: #ccc;
  font-size: 14px;
}

/* FLECHA */
.pre-arrow {
  font-size: 40px;
  color: #d4af37;
  margin: 20px 0;
  animation: bounceArrow 1.5s infinite;
}

@keyframes bounceArrow {
  50% { transform: translateY(10px); }
}

/* BOTÓN */
.pre-btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 20px 30px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  max-width: 600px;
  transition: 0.3s;
  box-shadow: 0 0 20px rgba(212,175,55,0.3);
}

/* TEXTO SECUNDARIO */
.pre-btn span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

/* HOVER */
.pre-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(212,175,55,0.6);
}

/* WARNING */
.pre-warning {
  margin-top: 20px;
  color: #fff;
  opacity: 0.8;
  font-size: 14px;
}
@media (max-width: 768px) {

  .pre-items {
    gap: 30px;
  }

  .pre-btn {
    width: 100%;
  }

}
/* ========================= */
/* OFFER STACK */
/* ========================= */

.offer-stack {
  padding: 120px 20px;
  text-align: center;
}

/* TITULO */
.offer-stack-title {
  color: #fff;
  font-size: 28px;
  margin-bottom: 50px;
}

/* CAJA */
.offer-stack-box {
  max-width: 800px;
  margin: auto;
  padding: 40px;

  background: #000000;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.3);

  box-shadow:
    0 0 30px rgba(212,175,55,0.15);
}

/* SUBTITULO */
.offer-stack-box h3 {
  color: #d4af37;
  margin-bottom: 30px;
}

/* LISTAS */
.offer-list,
.bonus-list {
  text-align: left;
  margin-bottom: 30px;
}

.offer-list li,
.bonus-list li {
  margin-bottom: 12px;
  color: #ffffff;
  position: relative;
  padding-left: 25px;
  
}

/* CHECK */
.offer-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #d4af37;
}

/* BONOS */
.bonus-title {
  color: #d4af37;
  margin-bottom: 20px;
}

.bonus-list strong {
  color: #fff;
}

/* PRECIO */
.price-box {
  margin: 40px 0;
  
}


.old-price {
  color: #ff4d4d;
  font-size: 22px;
  text-decoration: line-through;
}

.new-price {
  font-size: 36px;
  color: #d4af37;
  font-weight: bold;
}

/* BOTÓN */
.offer-final-btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000000;
  padding: 20px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;

  box-shadow: 0 0 25px rgba(212,175,55,0.4);
  transition: 0.3s;
}

.offer-final-btn span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

/* HOVER */
.offer-final-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(212,175,55,0.7);
}

/* NOTA */
.offer-note {
  margin-top: 15px;
  color: #ccc;
  font-size: 14px;
}
@media (max-width: 768px) {

  .offer-stack-box {
    padding: 25px;
  }

  .new-price {
    font-size: 28px;
  }

  .offer-final-btn {
    width: 100%;
  }

}
/* ========================= */
/* NAVBAR PREMIUM */
/* ========================= */

.topbar {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* CONTENEDOR */
.topbar-container {
  max-width: 1100px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 20px;

  border-radius: 50px;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(15px);

  border: 1px solid rgba(212,175,55,0.2);

  box-shadow:
    0 0 20px rgba(212,175,55,0.1),
    inset 0 0 10px rgba(212,175,55,0.05);
}

/* LOGO */
.logo img {
  height: 35px;
}

/* MENU */
.menu {
  display: flex;
  gap: 25px;
}

.menu a {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

/* HOVER */
.menu a:hover {
  color: #d4af37;
}

/* BOTÓN */
.topbar-btn {
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 15px 18px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;

  box-shadow: 0 0 15px rgba(212,175,55,0.3);
  transition: 0.3s;
}

/* HOVER */
.topbar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(212,175,55,0.6);
}
/* NAVBAR SIEMPRE ENCIMA */
.topbar {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 999999;

}
/* ========================= */
/* NAVBAR FIJO EN MÓVIL */
/* ========================= */

@media (max-width: 768px) {

  .topbar {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 9999999;
    padding: 0 10px;
  }

  .topbar-container {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;

    padding: 10px 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* LOGO MÁS PEQUEÑO */
  .logo img {
    height: 28px;
  }

  /* OCULTAR MENÚ EN MÓVIL (opcional pero recomendado) */
  .menu {
    display: none;
  }

  /* BOTÓN MÁS PEQUEÑO */
  .topbar-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

}
.topbar-container {
  backdrop-filter: blur(20px);
}
/* ========================= */
/* NUEVO HERO PRO */
/* ========================= */

.hero-new {
  padding: 120px 20px;
}

.hero-new-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  align-items: center;
}

/* IZQUIERDA */
.hero-left {
  flex: 1;
  min-width: 300px;
}

.hero-top {
  color: #d4af37;
  font-style: italic;
  margin-bottom: 20px;
}

.hero-quote {
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
}

.hero-desc {
  color: #ccc;
  line-height: 1.6;
}

/* DERECHA */
.hero-right {
  flex: 1;
  min-width: 300px;
  text-align: center;

  background: #0a0a0a;
  padding: 30px;
  border-radius: 15px;

  border: 1px solid rgba(212,175,55,0.2);
}

/* BADGE */
.badge {
  display: inline-block;
  margin-bottom: 15px;
  color: #ff4d4d;
  font-weight: bold;
}

/* IMAGEN */
.hero-right img {
  width: 100%;
  max-width: 300px;
  margin: 20px 0;
}

/* TITULO */
.hero-right h3 {
  color: #d4af37;
  margin-bottom: 15px;
}

/* PRECIO */
.price {
  color: #ccc;
  margin-bottom: 20px;
}

.price span {
  text-decoration: line-through;
  color: #888;
}

.price strong {
  color: #d4af37;
}

/* BOTÓN */
.hero-btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

  .hero-new-container {
    flex-direction: column;
    text-align: center;
  }

  .hero-quote {
    font-size: 22px;
  }

}
/* LOGO HERO */
.hero-logo {
  margin-bottom: 20px;
}

.hero-logo img {
  width: 300px;
  max-width: 100%;
  opacity: 0.95;

  filter: drop-shadow(0 0 10px rgba(212,175,55,0.3));
}
/* ========================= */
/* NAVBAR MOBILE FIX REAL */
/* ========================= */

@media (max-width: 768px) {

  .topbar {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 9999999;
    padding: 0 10px;
  }

  .topbar-container {
    width: 100%;
    max-width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 15px;
    border-radius: 20px;

    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
  }

  /* 👇 CLAVE: mostrar menú en móvil */
  .menu {
    display: flex !important;
    gap: 10px;
  }

  .menu a {
    font-size: 12px;
    color: #fff;
  }

  /* BOTÓN */
  .topbar-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* LOGO */
  .logo img {
    height: 25px;
  }

}
@media (max-width: 768px) {

  .topbar-container {
    justify-content: center;
    gap: 15px;
  }

  /* LOGO IZQUIERDA ABSOLUTO */
  .logo {
    position: absolute;
    left: 15px;
  }

  /* BOTÓN DERECHA ABSOLUTO */
  .topbar-btn {
    position: absolute;
    right: 15px;
  }

  /* MENÚ CENTRADO REAL */
  .menu {
    display: none;
    justify-content: center;
    gap: 12px;
  }

  .menu a {
    font-size: 12px;
  }

}
/* ========================= */
/* LUXURY SECTION */
/* ========================= */

.lux-section {
  padding: 120px 20px;
  text-align: center;
  position: relative;
}

/* CONTENEDOR */
.lux-container {
  max-width: 1100px;
  margin: auto;
}

/* TITULO */
.lux-title {
  font-size: 32px;
  margin-bottom: 20px;

  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* DESCRIPCIÓN */
.lux-desc {
  max-width: 800px;
  margin: auto;
  color: #ccc;
  font-style: italic;
  margin-bottom: 60px;
}

/* SUBTITULO */
.lux-sub {
  font-size: 24px;
  color: #fff;
  margin-bottom: 50px;
}

/* GRID */
.lux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* CARD */
.lux-card {
  background: #0a0a0a;
  padding: 30px;
  border-radius: 15px;

  border: 1px solid rgba(212,175,55,0.2);

  transition: 0.4s;

  box-shadow:
    0 0 20px rgba(212,175,55,0.05);
}

/* HOVER PRO */
.lux-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 0 30px rgba(212,175,55,0.2),
    0 0 60px rgba(212,175,55,0.1);
}

/* TITULO CARD */
.lux-card-title {
  font-size: 18px;
  margin-bottom: 15px;

  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* TEXTO */
.lux-card p {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

  .lux-grid {
    grid-template-columns: 1fr;
  }

  .lux-title {
    font-size: 24px;
  }

  .lux-sub {
    font-size: 20px;
  }

}
/* ========================= */
/* STEPS SECTION LUXURY */
/* ========================= */

.steps-section {
  padding: 120px 20px;
  text-align: center;
}

/* CONTENEDOR */
.steps-container {
  max-width: 1100px;
  margin: auto;
}

/* TITULO */
.steps-title {
  font-size: 32px;
  margin-bottom: 10px;

  background: linear-gradient(45deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SUB */
.steps-sub {
  color: #ccc;
  font-style: italic;
  margin-bottom: 60px;
}

/* GRID */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 50px;
}

/* CARDS */
.step-card {
  background: #111;
  padding: 25px;
  border-radius: 12px;

  border: 1px solid rgba(212,175,55,0.2);

  transition: 0.3s;
}

/* HOVER */
.step-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 25px rgba(212,175,55,0.2),
    0 0 50px rgba(212,175,55,0.1);
}

/* TITULO PASO */
.step-card h3 {
  color: #d4af37;
  margin-bottom: 15px;
  font-size: 20px;
}

/* TEXTO */
.step-card p {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
}

/* BOTÓN */
.steps-btn {
  display: inline-block;

  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;

  padding: 20px 30px;
  border-radius: 10px;

  font-weight: bold;
  text-decoration: none;

  max-width: 600px;

  box-shadow: 0 0 25px rgba(212,175,55,0.3);

  transition: 0.3s;
}

/* TEXTO SECUNDARIO */
.steps-btn span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

/* HOVER */
.steps-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(212,175,55,0.6);
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-title {
    font-size: 24px;
  }

}
/* ========================= */
/* LUXURY OFFER SECTION */
/* ========================= */

.offer-luxury {
  padding: 120px 20px;
  background: #ffffff;
  text-align: center;
}

/* CONTENEDOR PREMIUM */
.offer-box {
  max-width: 850px;
  margin: auto;
  padding: 50px 30px;
  border-radius: 20px;

  background: #0a0a0a;
  color: #ccc;
  position: relative;
  overflow: hidden;
}

/* 🔥 BORDE DORADO ANIMADO */
.offer-box::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;

  background: linear-gradient(
    120deg,
    transparent,
    #d4af37,
    transparent,
    #f5d76e,
    transparent
  );

  background-size: 300% 300%;
  animation: borderMove 4s linear infinite;

  z-index: 0;
}

/* FONDO INTERNO */
.offer-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: 18px;
  z-index: 1;
}

/* TODO EL CONTENIDO ENCIMA */
.offer-box * {
  position: relative;
  z-index: 2;
}

/* ANIMACIÓN BORDE */
@keyframes borderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* TITULO */
.offer-title {
  color: #d4af37;
  font-size: 26px;
  margin-bottom: 25px;
}

/* LISTAS */
.offer-list,
.bonus-list {
  text-align: left;
  margin-bottom: 25px;
}

.offer-list li,
.bonus-list li {
  margin-bottom: 12px;
  line-height: 1.5;
}

/* BONUS */
.bonus-title {
  color: #d4af37;
  margin: 30px 0 15px;
}

/* PRECIO */
.price-box {
  margin: 30px 0;
}

.old-price {
  color: red;
  font-size: 20px;
  text-decoration: line-through;
}

.new-price {
  color: #d4af37;
  font-size: 32px;
  font-weight: bold;
}

/* BOTÓN */
.offer-btn {
  display: inline-block;
  margin-top: 15px;

  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 20px 30px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;

  box-shadow: 0 0 25px rgba(212,175,55,0.4);
  transition: 0.3s;
}

.offer-btn span {
  display: block;
  font-size: 13px;
  margin-top: 5px;
}

/* HOVER */
.offer-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(212,175,55,0.7);
}

/* NOTA */
.offer-note {
  margin-top: 15px;
  font-size: 13px;
  color: #000000;
}
/* ========================= */
/* LUXURY CARD BLANCA PRO */
/* ========================= */

.offer-luxury {
  padding: 120px 20px;
  background: #000000;
  display: flex;
  justify-content: center;
}

/* TARJETA */
.offer-box {
  position: relative;
  max-width: 850px;
  width: 100%;
  padding: 50px 30px;
  border-radius: 20px;
  background: #040404;

  /* sombra elegante */
  box-shadow:
    0 10px 40px rgba(0,0,0,0.08);

  overflow: hidden;
}

/* 🔥 BORDE ANIMADO FLOTANTE */
.offer-box::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 22px;

  background: linear-gradient(
    120deg,
    transparent,
    #d4af37,
    #f5d76e,
    #d4af37,
    transparent
  );

  background-size: 300% 300%;
  animation: borderFlow 6s linear infinite;

  filter: blur(6px); /* glow suave */
  opacity: 0.7;

  z-index: 0;
}

/* CAPA BLANCA INTERIOR */
.offer-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #f0ecec;
  border-radius: 18px;
  z-index: 1;
}

/* CONTENIDO ENCIMA */
.offer-box * {
  position: relative;
  z-index: 2;
}

/* ANIMACIÓN BORDE */
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* EFECTO FLOTANTE */
.offer-box {
  animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
  50% {
    transform: translateY(-8px);
  }
}

/* TITULO */
.offer-title {
  font-size: 26px;
  color: #111;
  margin-bottom: 25px;
}

/* LISTAS */
.offer-list,
.bonus-list {
  text-align: left;
  margin-bottom: 20px;
  color: #555;
}

.offer-list li,
.bonus-list li {
  margin-bottom: 12px;
}

/* BONUS */
.bonus-title {
  color: #e5ba30;
  margin: 30px 0 15px;
}

/* PRECIO */
.price-box {
  margin: 30px 0;
}

.old-price {
  color: red;
  text-decoration: line-through;
}

.new-price {
  color: #d4af37;
  font-size: 32px;
  font-weight: bold;
}

/* BOTÓN */
.offer-btn {
  display: inline-block;
  background: linear-gradient(45deg, #d4af37, #f5d76e);
  color: #000;
  padding: 18px 25px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  margin-top: 15px;

  box-shadow: 0 0 20px rgba(212,175,55,0.3);
  transition: 0.3s;
}

.offer-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(212,175,55,0.6);
}

.offer-btn span {
  display: block;
  font-size: 13px;
  margin-top: 5px;
}
/* FIX TEXTO EN FONDO BLANCO */
.offer-box {
  color: #222 !important;
}

.offer-title {
  color: #111 !important;
}

.offer-list li,
.bonus-list li {
  color: #444 !important;
}

.old-price {
  color: #e63946 !important;
}

.new-price {
  color: #d4af37 !important;
}

.offer-box {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212,175,55,0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(212,175,55,0.5);
  }
}

/* ========================= */
/* FAQ SECTION PREMIUM */
/* ========================= */

.faq-section {
  padding: 100px 20px;
  text-align: center;
  position: relative;
}

/* TITULO */
.faq-title {
  font-size: 32px;
  margin-bottom: 50px;
  color: #d4af37;
}

/* CAJA */
.faq-box {
  max-width: 1100px;
  margin: auto;
  padding: 50px;
  border-radius: 20px;

  background: #0a0a0a;
  position: relative;
  overflow: hidden;

  /* glow base */
  box-shadow:
    0 0 20px rgba(212,175,55,0.15),
    0 0 60px rgba(212,175,55,0.08);
}

/* ⚡ BORDE ELÉCTRICO */
.faq-box::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;

  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #f5d76e,
    #d4af37,
    transparent
  );

  background-size: 300% 100%;
  animation: electricMove 3s linear infinite;

  z-index: 0;
  filter: blur(6px);
}

/* CAPA INTERIOR */
.faq-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: 18px;
  z-index: 1;
}

/* CONTENIDO ENCIMA */
.faq-box * {
  position: relative;
  z-index: 2;
}

/* ANIMACIÓN ELECTRICIDAD */
@keyframes electricMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* GRID */
.faq-grid {
  display: flex;
  gap: 40px;
  text-align: left;
  flex-wrap: wrap;
}

/* COLUMNAS */
.faq-col {
  flex: 1;
  min-width: 300px;
}

/* TEXTO */
.faq-col p {
  margin-bottom: 20px;
  color: #ccc;
  line-height: 1.6;
}

/* PREGUNTAS */
.faq-col strong {
  color: #fff;
}
/* ========================= */
/* FOOTER PREMIUM */
/* ========================= */

.footer {
  padding: 80px 20px 30px;
  background: #050505;
  color: #ccc;
}

/* CONTENEDOR */
.footer-container {
  max-width: 1100px;
  margin: auto;

  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

/* COLUMNAS */
.footer-col {
  flex: 1;
  min-width: 200px;
}

/* LOGO */
.footer-logo {
  width: 140px;
  margin-bottom: 15px;
}

/* TEXTO */
.footer-desc {
  font-size: 14px;
  margin-bottom: 20px;
  color: #aaa;
}

/* REDES */
.footer-social {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,0.2);

  transition: 0.3s;
}

.footer-social img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* HOVER PRO */
.footer-social a:hover {
  transform: scale(1.1);
  border: 1px solid #d4af37;
  box-shadow: 0 0 15px rgba(212,175,55,0.5);
}

/* EMAIL */
.footer-email {
  font-size: 13px;
  color: #888;
}

/* TITULOS */
.footer-col h3 {
  color: #d4af37;
  margin-bottom: 15px;
}

/* LINKS */
.footer-col a {
  display: block;
  text-decoration: none;
  color: #ccc;
  margin-bottom: 10px;
  font-size: 14px;
  transition: 0.3s;
}

.footer-col a:hover {
  color: #d4af37;
  transform: translateX(5px);
}

/* BOTTOM */
.footer-bottom {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;

  border-top: 1px solid rgba(212,175,55,0.1);

  font-size: 13px;
  color: #777;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
}
/* ========================= */
/* WHATSAPP CTA */
/* ========================= */

.whatsapp-cta {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

/* BOTÓN CAJA */
.whatsapp-box {
  max-width: 900px;
  width: 100%;
  padding: 30px;

  text-align: center;
  text-decoration: none;

  border-radius: 10px;

  background: linear-gradient(45deg, #b8964b, #d4af37);

  color: #fff;

  box-shadow: 
    0 10px 30px rgba(0,0,0,0.2),
    0 0 20px rgba(212,175,55,0.3);

  transition: 0.3s;
}

/* TEXTO */
.whatsapp-box h2 {
  font-size: 20px;
  margin-bottom: 5px;
}

.whatsapp-box p {
  font-size: 14px;
  opacity: 0.9;
}

/* HOVER */
.whatsapp-box:hover {
  transform: scale(1.03);
  box-shadow: 
    0 0 40px rgba(212,175,55,0.6),
    0 0 80px rgba(212,175,55,0.2);
}
.wp-icon {
  width: 40px;
  margin-bottom: 10px;
  filter: brightness(0) invert(1);
  }
  section {
  padding: 60px 20px !important;
}
/* 🔥 FIX BONOS VISIBILIDAD + ESTILO */

.bonus-list li {
  color: #e6e6e6 !important; /* texto claro */
  font-size: 15px;
  line-height: 1.6;
}

/* BONO #1, #2, etc */
.bonus-list strong {
  color: #d4af37 !important; /* dorado */
  font-weight: 700;
}

/* ESPACIADO */
.bonus-list li {
  margin-bottom: 10px;
}

/* OPCIONAL: MEJOR LEGIBILIDAD */
.offer-box {
  color: #222 !important;
}
/* 🔥 FIX LISTA SUPERIOR (beneficios) */

.offer-list li {
  color: #e6e6e6 !important;
  font-size: 15px;
}

/* CHECK DORADO */
.offer-list li::before {
  color: #d4af37;
}

/* SI NO TIENE CLASE */
.offer-box ul li {
  color: #e6e6e6 !important;
}
/* ========================= */
/* 📱 FIX MOBILE CENTRADO TOTAL */
/* ========================= */

@media (max-width: 768px) {

  /* CENTRAR TODO */
  body {
    text-align: center;
  }

  section {
    text-align: center !important;
  }

  /* CONTENEDORES */
  .hero-new-container,
  .product-container,
  .system-container,
  .value-container,
  .about-final-container,
  .steps-container,
  .offer-box,
  .faq-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* NAVBAR */
  .topbar-container {
    justify-content: center !important;
    position: relative;
  }

  .logo {
    position: absolute;
    left: 10px;
  }

  .topbar-btn {
    position: absolute;
    right: 10px;
  }

  .menu {
    display: none !important; /* opcional: ocultar menú en móvil */
  }

  /* TEXTOS */
  h1, h2, h3, p {
    text-align: center !important;
  }

  /* BOTONES */
  .hero-btn,
  .offer-btn,
  .offer-final-btn,
  .pre-btn,
  .steps-btn {
    width: 100%;
    max-width: 320px;
    margin: 20px auto;
    display: block;
  }

  /* CARDS / GRID */
  .cards,
  .lux-grid,
  .steps-grid,
  .bonus-grid {
    flex-direction: column !important;
    display: flex !important;
    align-items: center;
  }

  /* IMÁGENES */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ESPACIADO */
  section {
    padding: 60px 15px !important;
  }

}
.trustpilot-wrapper {
  margin-top: 25px;
}
.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.hero-new {
  padding-top: 140px; /* ajusta según el alto del header */
}
.trustpilot-section {
  display: flex;
  justify-content: center;
  margin: 60px 0;
}

/* TARJETA */
.trustpilot-card {
  display: inline-block;
  padding: 15px;
  border-radius: 15px;
  transition: 0.4s ease;
  position: relative;
}

/* IMAGEN (AQUÍ CONTROLAS EL TAMAÑO) */
.trustpilot-card img {
  width: 400px; /* 👈 CAMBIA ESTO */
  border-radius: 10px;
  transition: 0.4s ease;
}

/* EFECTO HOVER (SUBE + GLOW VERDE) */
.trustpilot-card:hover {
  transform: translateY(-10px);
}

.trustpilot-card:hover::before {
  opacity: 1;
}

/* LUZ VERDE DETRÁS */
.trustpilot-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0, 182, 122, 0.6), transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(20px);
  opacity: 0;
  transition: 0.4s ease;
  z-index: -1;
}

/* EFECTO AL HACER CLICK */
.trustpilot-card:active {
  transform: scale(0.95);

}
.trustpilot-section {
  margin-top: -20px; /* 👈 lo sube */
}

.value-title {
  color: #d4af37 !important;
}

.value-sub {
  color: #ccc !important;
}
html {
  scroll-behavior: smooth;
}

@media (max-width: 768px) {

  /* CONTENEDOR PRINCIPAL */
  .hero-new-container {
    display: flex;
    flex-direction: column; /* 👈 CLAVE */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
  }

  /* IZQUIERDA */
  .hero-left {
    width: 100%;
    max-width: 400px;
  }

  /* DERECHA (TARJETA) */
  .hero-right {
    width: 100%;
    max-width: 350px;
    margin-top: 30px;
  }

  /* CENTRAR TEXTO */
  .hero-left p,
  .hero-left h2 {
    text-align: center;
  }

}
/* =========================
   FIX MOBILE LIMPIO (REAL)
========================= */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .hero-new-container,
  .product-container,
  .value-container,
  .authority-container,
  .system-container,
  .offer-container,
  .lux-container,
  .steps-container,
  .footer-container {

    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box;
  }

}
@media (max-width: 768px) {
  .system-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .system-content {
    flex-direction: column;
    align-items: center;
  }
}

/* =========================
   📱 NAVBAR DORADO PREMIUM (FIX REAL)
========================= */

@media (max-width: 768px) {

  .topbar {
    position: fixed;
    top: 12px;
    left: 0;
    width: 100%;
    z-index: 999999;

    display: flex;
    justify-content: center;
  }

  .topbar-container {
    width: 92%;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    border-radius: 40px;

    /* 🔥 FONDO NEGRO PREMIUM */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(14px);

    /* 🔥 BORDE DORADO */
    border: 1px solid rgba(212,175,55,0.35);

    /* 🔥 GLOW DORADO */
    box-shadow:
      0 0 20px rgba(212,175,55,0.25),
      inset 0 0 10px rgba(212,175,55,0.08);
  }

  /* LOGO */
  .logo {
    display: flex;
    align-items: center;
  }

  .logo img {
    height: 24px;
  }

  /* OCULTAR MENU NORMAL */
  .menu {
    display: none !important;
  }

  /* OCULTAR BOTÓN (opcional) */
  .topbar-btn {
    display: none;
  }

  /* =========================
     🍔 HAMBURGUESA PRO
  ========================= */

  .menu-toggle {
    width: 26px;
    height: 18px;
    position: relative;
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #d4af37, #f5d76e);
    left: 0;
    transition: 0.3s;
  }

  .menu-toggle span:nth-child(1) {
    top: 0;
  }

  .menu-toggle span:nth-child(2) {
    top: 8px;
  }

  .menu-toggle span:nth-child(3) {
    bottom: 0;
  }

}
@media (max-width: 768px) {

  .topbar {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 999999;

    display: flex;
    justify-content: center;
  }

  .topbar-container {
    width: 95%;
    padding: 10px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 30px;

    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(212,175,55,0.3);

    box-shadow:
      0 0 15px rgba(212,175,55,0.2),
      inset 0 0 10px rgba(212,175,55,0.05);
  }

  /* LOGO */
  .logo img {
    height: 22px;
  }

  /* 🔥 MENÚ VISIBLE EN MÓVIL */
  .menu {
    display: flex !important;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;

    /* scroll bonito */
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  /* LINKS */
  .menu a {
    font-size: 11px;
    color: #ccc;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 10px;
    transition: 0.3s;
  }

  .menu a:hover {
    color: #d4af37;
    background: rgba(212,175,55,0.08);
  }

  /* BOTÓN */
  .topbar-btn {
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 12px;
  }

}
@media (max-width: 768px) {
  .menu a[href="#inicio"] {
    display: none;
  }
}
@media (max-width: 768px) {

  .topbar-container {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 👈 magia */
    align-items: center;
    width: 95%;
  }

  .logo {
    position: static; /* ❌ quitamos absolute */
  }

  .topbar-btn {
    position: static; /* ❌ quitamos absolute */
  }

  .menu {
    display: flex !important;
    justify-content: center;
    gap: 10px;
  }

}
/* CONTENEDOR */
.hero-video-new {
  margin-top: 30px;
  max-width: 480px; /* 👈 controlas tamaño */
}

/* 🔥 MARCO PREMIUM ANIMADO */
.video-frame {
  position: relative;
  border-radius: 20px;
  padding: 3px;
  overflow: hidden;

  background: linear-gradient(
    120deg,
    transparent,
    #d4af37,
    #f5d76e,
    #d4af37,
    transparent
  );

  background-size: 300% 300%;
  animation: borderLuxury 5s linear infinite;

  box-shadow:
    0 0 25px rgba(212,175,55,0.3),
    0 0 60px rgba(212,175,55,0.15);
}

/* INTERIOR NEGRO */
.video-frame video {
  width: 100%;
  display: block;
  border-radius: 18px;
  background: #000;
}
/* ANIMACIÓN */
@keyframes borderLuxury {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (max-width: 768px) {
  .hero-video-new {
    max-width: 100%;
  }
}
.review-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}
.review-card {
  position: relative;
  display: inline-block;
  border-radius: 20px;
}
.review-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;

  background: radial-gradient(
    circle,
    rgba(0,182,122,0.35),
    transparent 70%
  );

  transform: translate(-50%, -50%);
  filter: blur(40px);
  z-index: 0;
}
.review-card img {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 600px;

  border-radius: 15px;
  display: block;

  background: #fff; /* 👈 CLAVE PARA QUE SE VEA LIMPIA */
  padding: 5px; /* pequeño margen blanco elegante */

  box-shadow:
    0 0 20px rgba(0,182,122,0.2);

  transition: 0.3s ease;
}
.review-card img:hover {
  transform: scale(1.03);

  box-shadow:
    0 0 40px rgba(0,182,122,0.5),
    0 0 80px rgba(0,182,122,0.2);
}

.review-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.review-container img {
  display: block;
  margin: auto; /* 👈 CLAVE */
}
.review-container img {
  max-width: 85%;
}

.video-frame {
  position: relative;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 70px;
  height: 70px;

  background: rgba(0,0,0,0.6);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  color: #fff;

  cursor: pointer;
  z-index: 10;

  transition: 0.3s;
}
.play-btn {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}
.video-placeholder {
  position: relative;
  overflow: hidden;
}

.video-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

@media (max-width: 768px) {

  /* CONTENEDOR PRINCIPAL */
  .hero-new-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* LADO IZQUIERDO */
  .hero-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* TEXTOS */
  .hero-left p,
  .hero-left h1,
  .hero-left h2 {
    text-align: center;
  }

  /* VIDEO */
  .hero-video-new {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .video-frame {
    width: 100%;
    max-width: 100%;
  }

  /* BOTONES */
  .hero-left button,
  .hero-left a {
    margin: 0 auto;
  }

}
.benefits-section {
  padding: 80px 20px;
  text-align: center;
}

.benefits-title {
  color: #fff;
  font-size: 32px;
  margin-bottom: 50px;
}

/* GRID */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* TARJETA TECNOLÓGICA */
.card-tech {
  position: relative;
  padding: 30px;
  border-radius: 20px;

  background: linear-gradient(145deg, rgba(20,20,20,0.9), rgba(10,10,10,0.9));
  border: 1px solid rgba(212, 175, 55, 0.3);

  overflow: hidden;
  transition: 0.3s;
}

/* BORDE DORADO ANIMADO */
.card-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;

  background: linear-gradient(120deg, transparent, #d4af37, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: borderMove 4s linear infinite;
}

/* EFECTO TECNOLÓGICO */
.card-tech::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212,175,55,0.08), transparent 70%);
  top: -50%;
  left: -50%;
}

/* ICONO */
.card-icon {
  font-size: 18px;
  color: #d4af37;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

/* TEXTO */
.card-tech h3 {
  color: #fff;
  margin-bottom: 10px;
}

.card-tech p {
  color: #aaa;
  font-size: 14px;
}

/* HOVER */
.card-tech:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

/* ANIMACIÓN */
@keyframes borderMove {
  0% { background-position: 0% }
  100% { background-position: 200% }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}
/* ICONOS */
.card-icon {
  font-size: 28px;
  color: #d4af37;
  margin-bottom: 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 60px;
  height: 60px;

  margin-left: auto;
  margin-right: auto;

  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);

  box-shadow: 
    0 0 15px rgba(212, 175, 55, 0.3),
    inset 0 0 10px rgba(212, 175, 55, 0.2);

  transition: 0.3s;
}

/* HOVER ICONO */
.card-tech:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 
    0 0 25px rgba(212, 175, 55, 0.6),
    inset 0 0 15px rgba(212, 175, 55, 0.3);
}
/* ICONOS */
.card-icon {
  font-size: 28px;
  color: #d4af37;
  margin-bottom: 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 60px;
  height: 60px;

  margin-left: auto;
  margin-right: auto;

  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);

  box-shadow: 
    0 0 15px rgba(212, 175, 55, 0.3),
    inset 0 0 10px rgba(212, 175, 55, 0.2);

  transition: 0.3s;
}

/* HOVER ICONO */
.card-tech:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 
    0 0 25px rgba(212, 175, 55, 0.6),
    inset 0 0 15px rgba(212, 175, 55, 0.3);
}

.bonos-section {
  padding: 80px 40px;
  text-align: center;
}

.bonos-title {
  color: #d4af37;
  font-size: 32px;
  margin-bottom: 50px;
}

/* GRID */
.bonos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* CARD */
.bono-card {
  position: relative;
  padding: 30px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0a0a0a, #111);
  border: 1px solid rgba(212, 175, 55, 0.25);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* EFECTO DIFERENTE */
.bono-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(212,175,55,0.25), transparent 60%);
  opacity: 0;
  transition: 0.4s;
}

.bono-card:hover::before {
  opacity: 1;
}

/* HOVER */
.bono-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 30px rgba(212,175,55,0.25);
}

/* ICONOS (NUEVO ESTILO) */
.bono-icon {
  font-size: 28px;
  margin-bottom: 15px;
  display: inline-block;
  padding: 12px;
  border-radius: 12px;
  background: rgba(212,175,55,0.1);
  box-shadow: 0 0 15px rgba(212,175,55,0.2);
}

/* TEXTO */
.bono-card h3 {
  color: #d4af37;
  font-size: 18px;
  margin-bottom: 10px;
}

.bono-card p {
  color: #ccc;
  font-size: 14px;
}

/* CARD CENTRAL */
.bono-card-center {
  grid-column: span 2;
  max-width: 500px;
  margin: 0 auto;
}
/* 📱 MOBILE BONOS */
@media (max-width: 768px) {

  .bonos-section {
    padding: 50px 20px;
  }

  .bonos-title {
    font-size: 22px;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 30px;
  }

  .bonos-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .bono-card {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
  }

  .bono-card h3 {
    font-size: 16px;
    text-align: center;
  }

  .bono-card p {
    font-size: 14px;
    text-align: center;
  }

  .bono-icon {
    margin: 0 auto 12px;
    font-size: 24px;
  }

  /* 🔥 EL BONO 5 (el grande) */
  .bono-card-center {
    max-width: 100%;
    margin: 0;
  }

}
.footer-social a {
  width: 48px;
  height: 48px;

  display: flex;              /* 🔥 clave */
  align-items: center;        /* centra vertical */
  justify-content: center;    /* centra horizontal */

  border-radius: 10px;
  background: #0b0b0b;
  border: 1px solid rgba(212,175,55,0.3);

  transition: 0.3s;
}