/* Boost Your Web — generado desde Figma "Pagina Venta BYW 2"
   Desktop: lienzo de 1440px (reescalado desde 1956) · Mobile: 390px

   --u es la unidad del lienzo: 1 unidad de diseño en pixeles de pantalla.
   Como --b no lleva unidad, 100vw / var(--b) SI es una longitud valida, y
   numero * longitud tambien lo es. Nada de transform:scale() con px, que es
   justo lo que rompia la version anterior. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#08070C;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:none}
a{text-decoration:none;color:inherit}

.maq--d{--u:calc(100vw / 1440)}
.maq--m{--u:calc(100vw / 390)}

.s{position:relative;width:100%;overflow:hidden;
   height:calc(var(--sh) * var(--u))}
.s--scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.s--scroll::-webkit-scrollbar{height:6px}
.s--scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px}
.maq{position:relative;overflow:hidden}
.lz{position:relative;overflow:hidden;
    width:calc(var(--sw) * var(--u));
    height:calc(var(--sh) * var(--u))}

.e,.t{position:absolute;
      left:calc(var(--x) * var(--u));
      top:calc(var(--y) * var(--u));
      width:calc(var(--w) * var(--u))}
.e{height:calc(var(--h) * var(--u));object-fit:cover;
   /* Todo va en posicion absoluta: sin esto, lo dibujado despues tapa al
      carrusel y se traga el deslizamiento. */
   pointer-events:none}
.t{margin:0;
   font-size:calc(var(--fs) * var(--u));
   line-height:calc(var(--lh) * var(--u));
   letter-spacing:calc(var(--ls, 0) * var(--u))}
.t{pointer-events:none;z-index:1}  /* encima de los resplandores con mix-blend-mode, que tenian de morado al texto negro */
.parr{display:block;height:.9em}
a.t{pointer-events:auto;cursor:pointer;transition:filter .15s ease;z-index:4}
a.boton{display:flex;align-items:center;justify-content:center;min-height:calc(var(--h) * var(--u));height:auto;padding:calc(6 * var(--u)) calc(14 * var(--u));text-align:center;
   box-sizing:border-box;transition:filter .15s ease,transform .15s ease}
a.boton:hover{filter:brightness(1.1);transform:translateY(calc(-1 * var(--u)))}
a.t:hover{filter:brightness(1.12)}

.timer{position:absolute;z-index:2;display:flex;align-items:center;gap:calc(var(--sep) * var(--u));
     left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
     width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
     font-family:'Unbounded',system-ui,sans-serif;font-weight:800;color:#7D2DF5;
     font-size:calc(var(--fs) * var(--u));font-variant-numeric:tabular-nums}
.tm-caja{display:flex;align-items:center;justify-content:center;background:#fff;
     width:calc(var(--caja) * var(--u));height:calc(var(--caja) * var(--u));
     border-radius:calc(9.2 * var(--u));box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.18)}
.tm-sep{width:calc(var(--sep) * var(--u));text-align:center;margin:0 calc(-1 * var(--sep) * var(--u))}
.svgbox{position:absolute;pointer-events:none;
     left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
     width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.svgbox svg{width:100%;height:100%;display:block;overflow:visible}
.rec{position:absolute;overflow:hidden;pointer-events:none;
     left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
     width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.rec > .e{position:absolute}
.btn-zona{position:absolute;z-index:8;display:block;cursor:pointer;
     left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
     width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.carr{position:absolute;z-index:3;pointer-events:auto;touch-action:pan-x;
      left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
      width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
      overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
.carr::-webkit-scrollbar{display:none}
.carr-in{position:relative;
         width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}

.maq--m{display:block}
.maq--d{display:none}
@media (min-width:900px){
  .maq--m{display:none}
  .maq--d{display:block}
}

/* "Este programa es para ti si..." — el diseño ya trae una pastilla con el
   degradado morado-rosa-naranja: no es una excepcion, es el estado activo.
   Aqui se le da a las diez, encendiendolo al pasar el raton. */
.pastilla{position:absolute;z-index:5;display:flex;
   align-items:center;justify-content:center;text-align:center;color:#fff;
   font-family:'Raleway',system-ui,sans-serif;
   left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
   width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
   border-radius:calc(var(--rad) * var(--u));
   font-size:calc(var(--fs) * var(--u));line-height:calc(var(--lh) * var(--u));
   transition:transform .25s ease, box-shadow .25s ease;
   isolation:isolate}
.pastilla p{margin:0}
.pastilla b{font-weight:700}
.pastilla span{font-weight:400}
/* El degradado va en una capa aparte: animar background-image no interpola,
   pero la opacidad de una capa encima si. */
.pastilla::before{content:"";position:absolute;inset:0;z-index:-1;
   border-radius:inherit;opacity:0;transition:opacity .28s ease;
   background:linear-gradient(90deg,#7D2DF5 0%,#F01E5A 50%,#FBAA47 100%)}
.pastilla:hover::before,.pastilla:focus-visible::before{opacity:1}
.pastilla:hover,.pastilla:focus-visible{
   transform:scale(1.015);outline:none;
   box-shadow:0 calc(6 * var(--u)) calc(26 * var(--u)) rgba(240,30,90,.35)}
@media (prefers-reduced-motion:reduce){
  .pastilla{transition:none}
  .pastilla::before{transition:none}
  .pastilla:hover{transform:none}
}

/* Pie: el diseño trae las cinco etiquetas en un solo texto; aqui son enlaces. */
.pie{position:absolute;z-index:6;display:flex;align-items:center;gap:calc(18 * var(--u));
  left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));min-height:calc(var(--h) * var(--u));
  font-family:'Poppins',system-ui,sans-serif;font-size:calc(var(--fs) * var(--u));
  line-height:1.5;color:rgba(255,255,255,.85)}
.pie--wrap{flex-wrap:wrap;justify-content:center;gap:calc(10 * var(--u))}
.pie a{color:inherit;text-decoration:none;transition:color .15s ease}
.pie a:hover{color:#E9C46A;text-decoration:underline}

/* Formulario "Aparta tu lugar": controles reales sobre el lienzo. */
.fo{position:absolute;inset:0;z-index:6;pointer-events:none}
.fo > *{position:absolute;pointer-events:auto;
  left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
  font-family:'Poppins',system-ui,sans-serif;box-sizing:border-box}
.fo-op{display:flex;flex-direction:column;justify-content:center;gap:calc(2 * var(--u));
  padding:0 calc(16 * var(--u));text-align:left;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.03);border:calc(1 * var(--u)) solid rgba(255,255,255,.14);
  border-radius:calc(12 * var(--u));transition:border-color .18s ease,background .18s ease}
.fo-op:hover{border-color:rgba(255,255,255,.35)}
.fo-op.is-on{background:rgba(233,196,106,.08);border-color:#E9C46A}
.fo-op-n{font-weight:700;font-size:calc(var(--fs) * var(--u));line-height:1.4}
.fo-op-p{font-weight:400;font-size:calc(var(--fs) * var(--u));line-height:1.4;color:rgba(255,255,255,.75)}
.fo-campo{padding:0 calc(16 * var(--u));color:#fff;font-size:calc(var(--fs) * var(--u));
  background:rgba(255,255,255,.03);border:calc(1 * var(--u)) solid rgba(255,255,255,.14);
  border-radius:calc(12 * var(--u));outline:none;transition:border-color .18s ease}
.fo-campo::placeholder{color:rgba(255,255,255,.55)}
.fo-campo:focus{border-color:#E9C46A}
.fo-campo.mal{border-color:#F0506E}
.fo-lada{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);
  font-size:calc(var(--fs) * var(--u));background:rgba(255,255,255,.03);
  border:calc(1 * var(--u)) solid rgba(255,255,255,.14);border-radius:calc(12 * var(--u))}
.fo-cta{display:flex;align-items:center;justify-content:center;gap:calc(4 * var(--u));
  font-weight:700;letter-spacing:calc(.5 * var(--u));color:#1A1206;cursor:pointer;border:0;
  font-size:calc(var(--fs) * var(--u));border-radius:999px;
  background:linear-gradient(90deg,#FAE099 0%,#E9C46A 50%,#B8872B 100%);
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(233,196,106,.25);
  transition:transform .15s ease,filter .15s ease}
.fo-cta:hover{filter:brightness(1.06);transform:translateY(calc(-1 * var(--u)))}
.fo-legal{margin:0;display:block;text-align:center;height:auto;
  color:rgba(255,255,255,.55);font-size:calc(var(--fs) * var(--u));line-height:1.5}
.fo-legal a{color:rgba(255,255,255,.8);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.fo-op,.fo-campo,.fo-cta{transition:none}}

/* Preguntas frecuentes: <details> de verdad, apiladas y con su flecha. */
.faq{position:absolute;z-index:6;display:flex;flex-direction:column;
  gap:calc(12 * var(--u));
  left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));font-family:'Poppins',system-ui,sans-serif}
.faq-it{background:rgba(255,255,255,.043);border:calc(.8 * var(--u)) solid rgba(160,120,255,.26);
  border-radius:calc(12.4 * var(--u));padding:calc(14 * var(--u)) calc(18 * var(--u));
  transition:border-color .2s ease,background .2s ease}
.faq-it[open]{background:rgba(255,255,255,.06);border-color:rgba(160,120,255,.45)}
.faq-it summary{display:flex;align-items:center;justify-content:space-between;
  gap:calc(12 * var(--u));cursor:pointer;list-style:none;color:#fff;font-weight:500;
  font-size:calc(var(--fs) * var(--u));line-height:1.45}
.faq-it summary::-webkit-details-marker{display:none}
.faq-sig{width:calc(8 * var(--u));height:calc(8 * var(--u));flex:none;
  border-right:calc(1.6 * var(--u)) solid rgba(255,255,255,.75);
  border-bottom:calc(1.6 * var(--u)) solid rgba(255,255,255,.75);
  transform:rotate(45deg) translateY(calc(-2 * var(--u)));transition:transform .2s ease}
.faq-it[open] .faq-sig{transform:rotate(-135deg) translateY(calc(-2 * var(--u)))}
.faq-it p{margin:calc(10 * var(--u)) 0 0;color:rgba(255,255,255,.72);
  font-size:calc(var(--fs) * var(--u));line-height:1.72}
.faq-ver{color:rgba(255,255,255,.65);font-size:calc(var(--fs) * var(--u));
  text-decoration:underline;align-self:flex-start}
.faq-ver:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.faq-it,.faq-sig{transition:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a.t{transition:none}
}