/* ============ RESET LOCAL Y TOKENS ============ */
:root{
  --cb-green:#80ca65;
  --cb-green-2:#00a45e;
  --cb-magenta:#ff1f8b;
  --ink:#222;
  --muted:#6c757d;
  --bg:#f7f9fb;
  --wrap: min(1180px, 92vw);
}

*{
  box-sizing:border-box
}

html,body{
  height:100%
}

body.lp-body{
  margin:0; 
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); 
  background:#fff; 
  line-height:1.45;
  -webkit-font-smoothing:antialiased; 
  text-rendering:optimizeLegibility;
}

/* ============ HEADER ============ */
.lp-header{
  position:fixed; 
  inset:auto 0 0 0; 
  top:0; 
  height:100px;
  background:rgba(255,255,255,.96); 
  backdrop-filter:saturate(1.4) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06); 
  z-index:20;
  box-shadow:0 6px 18px rgba(54, 0, 26, 0.25)
}
.lp-container{
  width:var(--wrap); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding-inline:8px;
}
.lp-brand img{display:block; height:50px; width:auto}
.lp-brand-fallback{font-weight:800; font-size:1.15rem; color:var(--cb-green)}
.lp-right-logo{height:40px; width:auto; display:block}
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.1rem; border-radius:999px; font-weight:800; text-decoration:none;
  color:#fff; background:#ff1f8b;
  box-shadow:0 6px 18px rgba(0,153,68,.18);
}
.lp-btn:hover{filter:brightness(.98)}
.lp-btn--magenta{background:var(--cb-magenta); box-shadow:0 6px 18px rgba(255,31,139,.25)}

/* ============ PAGE / HERO ============ */
.lp-page > *:first-child{ margin-top:0 !important; }
.lp-hero{ margin-top:0 !important; }

.lp-hero{
  position: relative;
  display: block;         /* el contenedor se adapta al contenido */
  background: transparent;/* sin fondo forzado */
  margin: 0;
  padding: 0;
}

.lp-hero-img{
  width: 100%;            /* ocupa ancho completo */
  height: auto;           /* altura proporcional, evita espacio extra */
  display: block;
  object-fit: contain;    /* siempre muestra completa la imagen */
  object-position: center;
}


.lp-hero-fallback{
  color:#fff;
  padding:3rem;
  text-align:center;
}


/* ============ SECTIONS WRAPPER ============ */
.lp-wrap{width:var(--wrap); margin: clamp(36px,5vw,64px) auto}
.lp-h2{
  font-size:clamp(1.6rem,1.5rem + 1.2vw,2.5rem);
  letter-spacing:.6px; font-weight:900; color:var(--cb-green);
  margin:0 0 1rem 0;
}

/* ============ BENEFICIOS ============ */
.lp-benefit-list{display:grid; gap:28px; margin-top:.75rem}
.lp-benefit{
  border-radius:18px; background:#fff; box-shadow:0 16px 38px rgba(0,0,0,.06);
  padding:24px; transition:transform .25s ease, box-shadow .25s ease;
}
.lp-benefit:hover{transform:translateY(-2px); box-shadow:0 24px 46px rgba(0,0,0,.08)}
.lp-benefit-head{display:flex; align-items:center; gap:14px; margin-bottom:.35rem}
.lp-benefit-icon{width:36px; height:36px; object-fit:contain; filter:hue-rotate(320deg)}
.lp-benefit-title{font-size:clamp(1.15rem,1.1rem + .6vw,1.6rem); margin:0; font-weight:800}
.lp-benefit-desc{margin:.4rem 0 0 0; color:#333; font-size:clamp(1rem,.95rem + .25vw,1.15rem)}
.lp-cta{text-align:center; margin-top:22px}

/* Grid responsivo de beneficios */
@media (min-width: 720px){
  .lp-benefit-list{grid-template-columns:1fr}
}
@media (min-width: 992px){
  .lp-benefit-list{grid-template-columns:repeat(1,1fr)}
}

/* ============ VIDEO ============ */
.lp-video-frame{
  border-radius:24px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.10);
  aspect-ratio:21/9; background:#000;
}
.lp-video-frame iframe{width:100%; height:100%; border:0; display:block}

/* ============ STEPS ============ */
.lp-steps-grid{display:grid; gap:28px; grid-template-columns:1fr}
.lp-step{
  background:#f1f8f2; border:1px solid rgba(0,0,0,.06);
  border-radius:22px; padding:22px; box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.lp-step-icon{width:64px; height:64px; object-fit:contain; margin-bottom:.35rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}
.lp-step-title{margin:.25rem 0 .25rem; font-weight:800; font-size:clamp(1.05rem,1rem + .4vw,1.35rem); color:#333}
.lp-step-desc{margin:0; color:#4a4a4a; font-size:clamp(.98rem,.95rem + .15vw,1.05rem)}

/* CTA tile */
.lp-step-cta{
  background:var(--cb-magenta); color:#fff; display:grid; place-content:center; text-decoration:none;
  border:none; box-shadow:0 16px 40px rgba(255,31,139,.25);
}
.lp-step-cta-text{font-weight:900; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem); line-height:1.05; letter-spacing:.3px}
.lp-step-cta-arrow{font-size:2.2rem; margin-top:18px}

/* Steps grid responsive */
@media (min-width: 720px){
  .lp-steps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1100px){
  .lp-steps-grid{grid-template-columns:repeat(3,1fr)}
}

/* ============ ANIMACIONES SCROLL-IN ============ */
[data-anim]{opacity:0; transform:translate3d(0,8px,0); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1)}
[data-anim="fade"]{transform:none}
[data-anim="up"]{transform:translate3d(0,20px,0)}
[data-anim="scale"]{transform:scale(.96)}
.is-in{opacity:1; transform:none}
[data-anim].is-in{transition-delay:var(--d,0ms)}

/* ============ UTILIDADES ============ */
.lp-section-note{color:var(--muted); font-size:.95rem}

/* ========================================= */
/* ===== LOGIN/REGISTRO: SOLO COLUMNA DERECHA (SIN IFRAME A LA VISTA) ===== */
.lp-embed{
  --sec-bg:#f8f8f8;
  background:var(--sec-bg);
  padding:clamp(20px,5vw,34px) 0;
}
.lp-embed .lp-wrap{width:min(1370px,96vw)}
.lp-embed-grid{
  display:grid;
  gap:18px;
  align-items:start;
  grid-template-columns:1fr; /* siempre 1 columna visible */
}
/* Oculta cualquier contenedor legado del iframe */
.lp-embed-left{display:none !important}

/* checklist derecha */
.lp-checklist{list-style:none; padding:0; margin:10px 0 22px; display:grid; gap:18px}
.lp-checklist li{
  background:#fff; border-radius:16px; padding:18px 18px 16px 52px; position:relative;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.lp-checklist li::before{
  content:""; position:absolute; left:16px; top:18px; width:22px; height:22px; border-radius:50%; background:var(--cb-green);
  box-shadow:0 6px 14px rgba(0,153,68,.25);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/18px 18px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/18px 18px no-repeat;
}
.lp-checklist strong{display:block; font-weight:900; letter-spacing:.2px; margin-bottom:6px}
.lp-checklist p{margin:0; color:#444}

/* CTA derecha */
.lp-embed-cta{margin-top:16px}

/* ========================================= */
/* ============ MODAL DE REGISTRO (IFRAME) ============ */
/* Estructura esperada:
  <div class="lp-modal" id="registro-modal" aria-hidden="true">
    <div class="lp-modal__overlay"></div>
    <div class="lp-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="registro-title">
      <button class="lp-modal__close" aria-label="Cerrar">×</button>
      <h3 id="registro-title" class="lp-modal__title">Registro</h3>
      <div class="lp-modal__body">
        <iframe class="lp-modal__iframe" src="https://sistema.clubox.us/registerES.php" ...></iframe>
      </div>
    </div>
  </div>
*/

body.modal-open{overflow:hidden}

.lp-modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  visibility:hidden; opacity:0;
  transition:opacity .25s ease, visibility .25s ease;
}
.lp-modal.is-open{visibility:visible; opacity:1}

.lp-modal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:saturate(1.2) blur(2px);
  opacity:0; transition:opacity .25s ease;
}
.lp-modal.is-open .lp-modal__overlay{opacity:1}

.lp-modal__dialog{
  position:relative;
  width:min(1200px, 94vw);
  max-height:90svh;
  background:#fff; border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  transform:translateY(10px) scale(.98);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
}
.lp-modal.is-open .lp-modal__dialog{transform:none; opacity:1}

.lp-modal__title{
  margin:0; padding:18px 64px 12px 22px;
  font-weight:900; font-size:clamp(1.1rem,1rem + .6vw,1.6rem);
  color:#222; border-bottom:1px solid rgba(0,0,0,.06);
}
.lp-modal__close{
  position:absolute; right:10px; top:10px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  border:0; background:#f3f5f7; color:#111; font-size:22px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.lp-modal__close:hover{filter:brightness(.98)}

.lp-modal__body{
  padding:0; overflow:auto; -webkit-overflow-scrolling:touch;
}

/* Iframe del modal: alturas responsivas (no auto-ajustable por cross-origin) */
.lp-modal__iframe{
  display:block; border:0; width:100%;
  height:clamp(70svh, 78vh, 85svh);
}

/* Variante compacta en móviles pequeños */
@media (max-width: 480px){
  .lp-modal__dialog{width:96vw; max-height:92svh; border-radius:16px}
  .lp-modal__iframe{height:80svh}
}


/* Botones que disparan el modal: opcional realce */
.lp-btn[data-open="registro-modal"]{ /* atributo que puedes usar para hook JS */
  position:relative; isolation:isolate;
}
.lp-btn[data-open="registro-modal"]::after{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition:opacity .2s ease;
}
.lp-btn[data-open="registro-modal"]:hover::after{opacity:.8}

/* ========================================= */
/* ===== Limpieza de estilos heredados del iframe embebido ===== */
/* Ya no se usa el contenedor del iframe en la sección */
.lp-embed-frame,
.registro-form__iframe{display:none !important}


/* ===== CINTA PROMO ===== */
.lp-promo{ background:var(--promo-bg,#ec0f9b); color:#fff; padding: clamp(8px,6vw,30px) 0 }
.lp-promo .lp-wrap{ width:min(1370px,96vw) }
.lp-promo-grid{ display:grid; align-items:center; gap:24px; grid-template-columns:1fr; }
.lp-promo-ill img{ width:100%; height:auto; display:block; }
.lp-promo-copy{ text-align:center; }
.lp-promo-title{
  margin:0 0 16px; font-weight:900; line-height:1.05;
  font-size:clamp(1.6rem,1.2rem + 2.2vw,3rem);
}
.lp-btn--white{
  background:#fff; color:#111; box-shadow:0 8px 22px rgba(255,255,255,.25);
  border-radius:999px; padding:.9rem 1.4rem; font-weight:900;
}
@media (min-width: 960px){
  .lp-promo-grid{ grid-template-columns: 1fr 1fr; }
  .lp-promo-copy{ text-align:left; justify-self:end; }
}

/* ===== TESTIMONIOS ===== */
.lp-testimonials{ background:var(--sec-bg,#e8f4e8); padding: clamp(36px,6vw,30px) 0 }
.lp-testimonials-title{ text-align:center; color:#69a16f }
.lp-t-grid{
  width:100%; margin-top:24px;
  display:grid; gap:22px; grid-template-columns:1fr;
}
@media (min-width: 900px){
  .lp-t-grid{ grid-template-columns: repeat(3, 1fr); }
}
.lp-t-card{
  background:transparent; border:none; display:flex; flex-direction:column; gap:14px;
}
.lp-t-photo{
  width:100%; height:auto; border-radius:22px; object-fit:cover;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.lp-t-bubble{
  margin-top:-26px; margin-inline:18px; padding:16px 18px;
  background:#fff; border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,.07);
}
.lp-t-quote{ margin:0 0 10px; color:#2f2f2f; font-size:clamp(1rem, .95rem + .2vw, 1.1rem)}
.lp-t-author{ margin:0; color:#1b1b1b }
.lp-t-role{ color:#6a6a6a; font-weight:600; margin-left:.25rem }

/* Botón promo con highlight */
.lp-btn[data-open="registro-modal"]{ position:relative; isolation:isolate }
.lp-btn[data-open="registro-modal"]::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition:opacity .2s ease
}
.lp-btn[data-open="registro-modal"]:hover::after{ opacity:.8 }


/* ===== TIENDAS RECOMENDADAS ===== */
.lp-stores{ background:var(--sec-bg,#fff); padding: clamp(28px,5vw,60px) 0 }
.lp-stores-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr;           /* móvil: título arriba, logos abajo */
}
.lp-stores-title{ color:#69a16f; margin:0 }

.lp-stores-logos{ width:100% }
.lp-logos{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(16px,2.5vw,28px);
  /* grilla auto-ajustable, centrada */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items:center; justify-items:center;
}
.lp-logo{
  display:grid; place-items:center;
  background:#fff; border-radius:16px;
  padding: clamp(10px,1.8vw,16px);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.lp-logo img{
  display:block; max-height: var(--logo-h, 72px);
  width:auto; height:auto; object-fit:contain;
  filter: none; /* logos nítidos */
}
.lp-logo a{ display:grid; place-items:center; text-decoration:none }

/* Desktop: título a la izquierda, logos a la derecha */
@media (min-width: 1100px){
  .lp-stores-grid{
    grid-template-columns: .9fr 1.1fr;
  }
}


/* ===== FOOTER ===== */
.lp-footer{
  background:var(--footer-bg,#ec0f9b);
  color:#fff;
  padding: clamp(18px,6vw,14px) 0;
  border-top-left-radius: var(--footer-radius,26px);
  border-top-right-radius: var(--footer-radius,26px);
}
.lp-footer .lp-wrap{ width:min(1370px,96vw) }

.lp-footer-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr;            /* móvil */
}
@media (min-width: 1100px){
  .lp-footer-grid{ grid-template-columns: 1.4fr .6fr; }
}

.lp-footer-title{
  margin:0 0 18px; font-weight:900; color:#fff;
  font-size:clamp(1.3rem,1rem + 1.6vw,2.2rem);
}

.lp-fcols{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width: 900px){
  .lp-fcols{ grid-template-columns: repeat(3, 1fr); }
}
.lp-fcol h4{ margin:.2rem 0 .35rem; color:#fff; font-weight:800 }
.lp-fcol p{ margin:0; color:#f8f8f8; line-height:1.55 }

.lp-footer-right{ justify-self:center }
@media (min-width:1100px){
  .lp-footer-right{ justify-self:end }
}
.lp-socials{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; align-items:center; justify-content:center;
}
.lp-socials a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:#fff; color:#111; text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}
.lp-socials a:hover{ transform: translateY(-2px); filter: brightness(.98) }


/* El footer nunca deja hueco debajo */
.lp-footer{ margin-bottom: -200px !important; }

/* Evita márgenes “colapsados” del último bloque de la página */
.lp-page > *:last-child{ margin-bottom:0 !important; }

/* Seguridad extra para evitar desplazamientos horizontales */
html, body{ overflow-x:hidden; }

/* ====== TABLET ====== */
@media (max-width: 991.98px){
  .lp-container{ padding-inline:12px; }
  .lp-h2{ font-size:clamp(1.4rem, 1.1rem + 1.6vw, 2rem); }
  .lp-steps-grid{ grid-template-columns:1fr 1fr; }       /* ya tenías 2 cols desde 720, lo reforzamos */
  .lp-benefit{ padding:20px; }
  .lp-step{ padding:18px; }
  .lp-promo-grid{ grid-template-columns:1fr; text-align:center; }
  .lp-promo-copy{ justify-self:center; text-align:center; }
  .lp-stores-grid{ grid-template-columns:1fr; }
  .lp-footer-grid{ grid-template-columns:1fr; }
  .lp-fcols{ grid-template-columns:1fr 1fr; gap:18px; }
}

/* ====== MÓVIL ====== */
@media (max-width: 599.98px){
  /* Header más compacto en móvil */
  .lp-header{ height:60px; }
  .lp-brand img, .lp-right-logo{ height:34px; }
  .lp-btn{ padding:.6rem 1rem; }

  .lp-hero{ 
    top: -30px;
    bottom: -100px; }

  /* Ajustes de paddings y fuentes */
  .lp-wrap{ width:min(1180px, 94vw); margin: clamp(24px, 5vw, 40px) auto; }
  .lp-h2{ font-size:clamp(1.25rem, 1.05rem + 1.6vw, 1.8rem); }

  .lp-benefit-list{ gap:18px; }
  .lp-step-title{ font-size:clamp(1rem, .95rem + .4vw, 1.2rem); }
  .lp-step-desc{ font-size:clamp(.95rem, .9rem + .2vw, 1.02rem); }

  /* Checklist y tiendas más respirables */
  .lp-checklist{ gap:14px; }
  .lp-logo{ padding:12px; }
  .lp-logos{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  /* Testimonios: 1 por fila */
  .lp-t-grid{ grid-template-columns:1fr; gap:18px; }
  .lp-t-bubble{ margin-inline:12px; }

  /* Footer columnas en una sola */
  .lp-fcols{ grid-template-columns:1fr; }
  .lp-socials{ gap:10px; }
  .lp-socials a{ width:40px; height:40px; }
}

/* ====== ALTAS DENSIDADES / LANDSCAPE PEQUEÑO ====== */
@media (max-height: 480px) and (orientation: landscape){
  .lp-hero{ min-height: calc(100vh - 60px); }
}


/* Evita que la línea del header parezca “hueco” al superponerse sobre el hero oscuro */
.lp-header{ border-bottom-color: rgba(0,0,0,.08); }

/* Imágenes siempre bloque para eliminar “espacio bajo línea base” */
img{ display:block; }

/* Los contenedores nunca generan separación por colapso de márgenes internos */
.lp-hero, .lp-promo, .lp-testimonials, .lp-stores, .lp-embed, .lp-footer{
  overflow: clip; /* más seguro que hidden para no recortar sombras internas */
}

/* ====== AJUSTES PARA PÁRRAFOS Y CONTENIDO DE TEXTO ====== */
.doc-banner__content,
.lp-content,
.lp-wrap {
  padding-left: 20px;
  padding-right: 20px;
}

/* En pantallas más pequeñas, reducimos un poco la separación */
@media (max-width: 599.98px){
  .doc-banner__content,
  .lp-content,
  .lp-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ===== Fix móviles: PASO A PASO ===== */
@media (max-width: 599.98px){
  /* 1) Una sola columna y espacios más compactos */
  .lp-steps-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 2) Tarjetas sin recortes y con ancho fluido */
  .lp-step{
    padding: 16px !important;
    border-radius: 16px;
    overflow: visible;          /* evita cortes del contenido */
    max-width: 100%;
  }
  .lp-step *{ max-width: 100%; }

  /* 3) Icono y tipografías ajustadas */
  .lp-step-icon{ width: 48px; height: 48px; }
  .lp-step-title{
    margin-top: 8px;
    font-size: clamp(1rem, 0.95rem + .4vw, 1.15rem);
  }
  .lp-step-desc{
    font-size: .95rem;
    line-height: 1.45;
  }

  /* 4) Evita cortes por palabras largas */
  .lp-step-title,
  .lp-step-desc{
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 5) CTA tile adaptado */
  .lp-step-cta{
    padding: 20px;
    min-height: auto;
    text-align: center;
  }
  .lp-step-cta-text{
    font-size: clamp(1.2rem, 1rem + 1.8vw, 1.6rem);
  }
}