*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif;}
body{background:#020617;color:#fff;overflow-x:hidden;}

/* BACKGROUND */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, #48ccf5, transparent),
    radial-gradient(circle at 80% 70%, #403bff, #0000001a),
    #1d3cdd;
  z-index:-1;
}

/* NAV */
nav{
  position:fixed;
  width:100%;
  padding:20px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

.logo span{color:#ff3b3f;}

/* HAMBURGER */
.menu-btn{
  width:32px;
  height:22px;
  position:relative;
  cursor:pointer;
  z-index:3001;
}

.menu-btn span{
  position:absolute;
  width:100%;
  height:3px;
  background:white;
  transition:.3s ease;
}

.menu-btn span:nth-child(1){top:0;}
.menu-btn span:nth-child(2){top:9px;}
.menu-btn span:nth-child(3){bottom:0;}

.menu-btn.active span:nth-child(1){
  transform:rotate(45deg);
  top:9px;
}
.menu-btn.active span:nth-child(2){
  opacity:0;
}
.menu-btn.active span:nth-child(3){
  transform:rotate(-45deg);
  bottom:10px;
}

/* MENU */
.menu{
  position:fixed;
  inset:0;
  background: rgb(64 5 101 / 82%);
  backdrop-filter:blur(5px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:900;
  opacity:0;
  pointer-events:none;
}

.menu a{
  font-size:2.5rem;
  margin:15px 0;
  color:#fff;
  text-decoration:none;
  opacity:0;
  font-weight: bold;
}

ul.submenu {
  transition: all 2.2s ease;
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

h1{font-size:4rem;}
h1 span{color:#ff3b3f;}

.word{
  display:inline-block;
}

/* ACCORDION */
.accordion{
  max-width:700px;
  margin:auto;
  padding:80px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
}

.item{
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:20px 0;
}

.header{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  align-items:center;
}

.icon{
  font-size:1.5rem;
  transition:.3s;
}

.content{
  height:0;
  overflow:hidden;
  opacity:0;
}

/* FOOTER */
footer{
  padding:80px 10%;
  background:rgba(255,255,255,.03);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
}

.copy{
  text-align:center;
  padding:20px;
  font-size:12px;
  opacity:.5;
}

/* PARALLAX */
.focus-parallax{
  height:120vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  position:relative;
}

.focus-inner{
  text-align:center;
  max-width:900px;
  padding:0 20px;
}

.focus-text{
  font-size:2.8rem;
  font-weight:600;
  line-height:1.3;
  color:white;
  will-change:transform, opacity, filter;
}

/* ========================= */
/* SCROLLBAR MINIMALISTA */
/* ========================= */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* ========================= */
/* LOGOS INFINITO PREMIUM */
/* ========================= */

.logos{
  padding:90px 0;
  overflow:hidden;
  position:relative;
}

/* fade más suave tipo Apple */
.logos::before,
.logos::after{
  content:"";
  position:absolute;
  top:0;
  width:160px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.logos::before{
  left:0;
  background:linear-gradient(to right, #3faaec 30%, transparent);
}

.logos::after{
  right:0;
  background:linear-gradient(to left, #384af1 30%, transparent);
}

.logos-track{
  display:flex;
  width:max-content;
  animation: scroll 22s linear infinite;
  will-change: transform;
}

.logos-group{
  display:flex;
  align-items:center;
  gap:90px;
  padding:0 50px;
  flex-shrink:0;
}

/* efecto premium en logos */
.logos-group img{
  height:70px;
  opacity:0.55;
  filter: grayscale(100%) blur(0.2px);
  transition: all 0.4s ease;
  transform: translateZ(0);
}

.logos-group img:hover{
  opacity:1;
  filter: grayscale(0%) blur(0px);
  transform: scale(1.08);
}

/* movimiento perfecto continuo */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* pausa elegante */
.logos:hover .logos-track{
  animation-play-state: paused;
}

/* suaviza percepción de movimiento (truco visual) */
.logos-group img:nth-child(odd){
  opacity:0.5;
}

.logos-group img:nth-child(even){
  opacity:0.65;
}

.quote{
  position:relative;
}

/* comilla inicial */
.quote::before{
  content:"“";
  position:absolute;
  top:-30px;
  left:-60px;
  font-size:120px;
  opacity:0.5;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}

/* comilla final */
.quote::after{
  content:"”";
  position:absolute;
  bottom:-40px;
  right:-50px;
  font-size:120px;
  opacity:0.5;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}

.video-section{
  padding:120px 10%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* contenedor centrado real */
.video-wrapper{
  position:relative;
  width:100%;
  max-width:1000px;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);

  /* 🔥 CENTRADO PERFECTO */
  margin:0 auto;
}

/* video siempre cubre bien */
.video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* overlay centrado */
.video-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  background:radial-gradient(circle at center, rgba(0,0,0,0.2), rgba(0,0,0,0.65));
  transition:0.4s ease;
  z-index:2;
}

/* botón play */
.play-button{
  width:80px;
  height:80px;
  border:2px solid rgba(255,255,255,0.8);
  border-radius:50%;
  position:relative;
  transition:0.3s ease;
  margin-bottom: 15px;
}

.play-button::after{
  content:"";
  position:absolute;
  top:50%;
  left:52%;
  transform:translate(-50%,-50%);
  border-left:16px solid white;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

/* hover */
.video-overlay:hover .play-button{
  transform:scale(1.08);
}

/* cuando reproduce */
.video-section.playing .video-overlay{
  opacity:0;
  pointer-events:none;
}

.video{
  background:#000;
}

/* ========================= */
/* SOCIAL ICONS */
/* ========================= */
.social-icons{
  display:flex;
  justify-content:center;
  gap:50px;
  margin-top:25px;
}

.social-icons a{
  font-size:28px;
  color:rgba(255,255,255);
  transition:all 0.3s ease;
}

.social-icons a:hover{
  color:#3640ff;
  transform:translateY(-3px) scale(1.5);
}


/* BENEFICIOS */
.benefits{
  padding:100px 10%;
  text-align:center;
}

.benefits-title{
  font-size:2.5rem;
  margin-bottom:60px;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

.benefit-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  padding:35px 25px;
  border-radius:18px;
  transition:0.4s ease;
  backdrop-filter:blur(10px);
}

.benefit-card:hover{
  transform:translateY(-10px);
  border-color:#48ccf5;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.benefit-card .icon{
  font-size:32px;
  margin-bottom:15px;
}

.benefit-card h3{
  margin-bottom:10px;
  font-size:1.2rem;
}

.benefit-card p{
  font-size:0.95rem;
  opacity:0.7;
}


/* PLAN CHECKLIST */
.plan-checklist{
  padding:100px 10%;
  text-align:center;
}

.plan-check-title{
  font-size:2.6rem;
  margin-bottom:10px;
}

.plan-check-subtitle{
  opacity:0.7;
  margin-bottom:50px;
}

/* caja central tipo “tarjeta premium” */
.plan-box{
  max-width:700px;
  margin:0 auto;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:40px;
  backdrop-filter:blur(10px);
  text-align:left;
}

/* items tipo checklist */
.check-item{
  font-size:1.05rem;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  gap:10px;
  transition:0.3s ease;
}

.check-item:last-child{
  border-bottom:none;
}

.check-item:hover{
  transform:translateX(5px);
  color:#48ccf5;
}

/* CONTACTO ULTRA MODERNO */
.contact-ultra{
  padding:140px 8%;
}

/* layout limpio tipo Apple */
.contact-container{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
}

/* IZQUIERDA */
.contact-left h2{
  font-size:3rem;
  letter-spacing:-1px;
  margin-bottom:15px;
}

.contact-left p{
  opacity:0.75;
  line-height:1.6;
  margin-bottom:25px;
}

.contact-points div{
  margin:10px 0;
  font-size:0.95rem;
  opacity:0.9;
}

/* FORM CONTENEDOR */
.contact-form-ultra{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:45px;
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,0.1);
}

/* CAMPOS ULTRA LIMPIOS */
.field{
  position:relative;
  margin-bottom:22px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:18px 14px;
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.15);
  background:transparent;
  color:#fff;
  outline:none;
  font-size:1rem;
}

/* LABEL flotante minimalista */
.field span{
  position:absolute;
  left:0;
  top:18px;
  font-size:0.95rem;
  opacity:0.6;
  transition:0.25s ease;
  pointer-events:none;
}

/* animación clean */
.field input:focus + span,
.field input:valid + span,
.field textarea:focus + span,
.field textarea:valid + span{
  top:-10px;
  font-size:0.75rem;
  opacity:1;
  color:#48ccf5;
}

/* BOTÓN PREMIUM */
.contact-form-ultra button{
  width:100%;
  padding:16px;
  border:none;
  border-radius:5px;
  background:#ffffff;
  color:#636363;
  font-weight:600;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:0.3s ease;
  font-size: 14px;
}

/* glow sutil */
.btn-glow{
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(72,204,245,0.4),transparent);
  transition:0.5s;
}

.contact-form-ultra button:hover .btn-glow{
  left:100%;
}

.contact-form-ultra button:hover{
  transform:translateY(-10px);
  background: #9cc8fff7;
  color: #fff;
  box-shadow: 10px 10px 10px #00000042;
}

/* RESPONSIVE REAL */
@media(max-width:900px){
  .contact-container{
    grid-template-columns:1fr;
    gap:40px;
  }

  .contact-left h2{
    font-size:2.4rem;
  }
}

/* PLANES COMPARATIVO */
.plans{
  padding:120px 10%;
  text-align:center;
}

.plans-title{
  font-size:2.8rem;
  margin-bottom:10px;
}

.plans-subtitle{
  opacity:0.7;
  margin-bottom:60px;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.plan-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:40px 25px;
  backdrop-filter:blur(12px);
  transition:0.4s ease;
}

.plan-card:hover{
  transform:translateY(-10px);
  border-color:#48ccf5;
}

/* destacado */
.plan-card.featured{
  border: 1px solid #ffffff;
  transform:scale(1.05);
}

.badge{
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  background:#ff3b3f;
  padding:6px 14px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:bold;
}

.price{
  font-size:2rem;
  margin:20px 0;
  font-weight: 900;
}

.price span{
  font-size:0.9rem;
  opacity:0.6;
}

.plan-list{
  list-style-type:disc;
  text-align:left;
  margin:20px 0 30px;
  padding-left:20px;
}

.plan-list li{
  margin-bottom:10px;
  opacity:0.85;
}

/* botón */
.plan-card button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:#000;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.plan-card button:hover{
  transform:translateY(-2px);
}

.plan-card.featured{
  box-shadow: 0 0 0 0px #c3c3c3, 0 20px 40px rgb(255 255 255 / 40%);
}

.plans-terms{
  margin-top:40px;
  text-align:center;
}

.plans-terms a{
  font-size:0.85rem;
  opacity:0.6;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.2);
  transition:0.3s ease;
}

.plans-terms a:hover{
  opacity:1;
  border-color:#48ccf5;
  color:#48ccf5;
}

#thankYouPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.popup-content h2 {
  color: #28a745;
}

#closePopupBtn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

#closePopupBtn:hover {
  background-color: #218838;
}

  /* Estilos para el botón flotante de WhatsApp */
  .whatsapp-btn {
    position: fixed;
    bottom: 30px; /* Distancia desde el fondo de la página */
    right: 10px;  /* Distancia desde el lado derecho de la página */
    
    border-radius: 50%;
    
    
    transition: background-color 0.3s ease;
    z-index: 1000;
  }

  .whatsapp-btn img {
    width: 90px;
    height: 90px;
  }

  .whatsapp-btn:hover {
    background-color: none; /* Color verde más oscuro al pasar el ratón */
  }


  .legal-page{
  padding:180px 20px 120px;
  position:relative;
  z-index:2;
}

.legal-container{
  max-width:1000px;
  margin:auto;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:30px;
  padding:60px;
  backdrop-filter:blur(10px);
}

.legal-container h1{
  font-size:52px;
  margin-bottom:20px;
  color:#fff;
}

.legal-update{
  opacity:.7;
  margin-bottom:50px;
  color:#fff;
}

.legal-container h2{
  margin-top:45px;
  margin-bottom:15px;
  color:#fff;
  font-size:28px;
}

.legal-container p{
  line-height:1.9;
  margin-bottom:20px;
  color:#dcdcdc;
  font-size:17px;
}

.legal-container ul{
  padding-left:20px;
}

.legal-container li{
  margin-bottom:12px;
  color:#dcdcdc;
  line-height:1.8;
}

.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{
  font-size:12px;
  text-decoration:none;
  color:#fff;
  font-family:arial;
  transition:.3s;
}

.footer-links a:hover{
  opacity:.7;
}

.footer-links span{
  color:#fff;
  opacity:.6;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
}

@media(max-width:768px){

  .legal-container{
    padding:35px 25px;
  }

  .legal-container h1{
    font-size:38px;
  }

  .legal-container h2{
    font-size:24px;
  }

}


.legal-page{
  padding:180px 20px 120px;
  position:relative;
  z-index:2;
}

.legal-container{
  max-width:1000px;
  margin:auto;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:30px;
  padding:60px;
  backdrop-filter:blur(10px);
}

.legal-container h1{
  font-size:52px;
  margin-bottom:20px;
  color:#fff;
}

.legal-update{
  opacity:.7;
  margin-bottom:50px;
  color:#fff;
}

.legal-container h2{
  margin-top:45px;
  margin-bottom:15px;
  color:#fff;
  font-size:28px;
}

.legal-container p{
  line-height:1.9;
  margin-bottom:20px;
  color:#dcdcdc;
  font-size:17px;
}

.legal-container ul{
  padding-left:20px;
}

.legal-container li{
  margin-bottom:12px;
  color:#dcdcdc;
  line-height:1.8;
}

@media(max-width:768px){

  .legal-container{
    padding:35px 25px;
  }

  .legal-container h1{
    font-size:38px;
  }

  .legal-container h2{
    font-size:24px;
  }

}