/* =========================================================
   MERAKI CLUB
   Se apoya en venta.css (mismos tokens y componentes).
   Aqui solo lo que esta landing necesita de mas.
   ========================================================= */

/* precio con oferta: el anterior tachado y el actual destacado */
.precio-oferta{display:inline-flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;justify-content:center}
.precio-antes{font-family:var(--ui);font-size:clamp(1.1rem,1rem + .6vw,1.4rem);color:var(--texto-mut);
  text-decoration:line-through;text-decoration-thickness:2px}
.sec-dark .precio-antes,.hero .precio-antes{color:var(--sobre-oscuro-soft)}
.precio-ahora{font-family:var(--display);font-weight:600;line-height:1;color:var(--profundo);
  font-size:clamp(2.7rem,7vw,3.9rem);white-space:nowrap}
.sec-dark .precio-ahora,.hero .precio-ahora{color:var(--luz)}
.precio-mes{font-family:var(--ui);font-size:var(--fs-eyebrow);color:var(--texto-soft);letter-spacing:.02em}
.sec-dark .precio-mes,.hero .precio-mes{color:var(--sobre-oscuro-soft)}
.hero .precio-oferta{justify-content:flex-start}

/* video con caratula: no carga YouTube hasta que se pulsa */
.vsl-box{position:relative;max-width:820px;margin:2.6rem auto 0;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:var(--profundo-deep);box-shadow:var(--shadow-soft)}
.vsl-box iframe{width:100%;height:100%;border:none;display:block}
.vsl-facade{position:absolute;inset:0;width:100%;height:100%;border:none;padding:10px;cursor:pointer;
  background:var(--profundo-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;text-align:center;color:var(--sobre-oscuro-soft)}
.vsl-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vsl-facade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(62,46,74,.45) 0%,rgba(62,46,74,.82) 100%)}
.vsl-facade>*{position:relative;z-index:1}
.vsl-play{width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,var(--cta1) 0%,var(--cta2) 100%);color:var(--sobre-cta);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;padding-left:6px;
  box-shadow:0 10px 30px -8px rgba(var(--tierra-rgb),.7);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.vsl-facade:hover .vsl-play{transform:scale(1.08)}
.vsl-label{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--sobre-oscuro);
  text-shadow:0 2px 14px rgba(62,46,74,.9)}
.vsl-hint{font-family:var(--ui);font-size:.85rem;max-width:42ch;opacity:.85}

/* temas del recurso mensual */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.8rem;list-style:none;padding:0}
.chips li{font-family:var(--ui);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--profundo);background:rgba(var(--malva-rgb),.16);
  border:1px solid rgba(var(--malva-rgb),.34);border-radius:999px;padding:.5rem 1.15rem}
.sec-dark .chips li{color:var(--sobre-oscuro);background:rgba(216,184,198,.14);border-color:rgba(216,184,198,.30)}

/* biblioteca del kit de bienvenida */
.kit{list-style:none;display:grid;grid-template-columns:1fr;gap:.75rem;margin:2.2rem auto 0;max-width:800px;padding:0}
@media(min-width:720px){.kit{grid-template-columns:1fr 1fr}}
.kit li{position:relative;padding:.95rem 1.1rem .95rem 2.6rem;line-height:1.45;
  background:var(--crema-warm);border:1px solid rgba(var(--sombra-rgb),.09);border-radius:var(--radius-sm);
  font-size:1.05rem;transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.kit li:hover{transform:translateY(-2px);border-color:rgba(var(--malva-rgb),.42)}
.kit li::before{content:"";position:absolute;left:1.1rem;top:1.42em;width:9px;height:9px;border-radius:50%;
  background:var(--malva-deep);opacity:.9}
.sec-dark .kit li{background:rgba(246,239,233,.07);border-color:rgba(216,184,198,.20);color:var(--sobre-oscuro)}
.sec-dark .kit li::before{background:var(--luz)}

/* lista de beneficios a dos columnas */
.logros{list-style:none;display:grid;grid-template-columns:1fr;gap:1.1rem;margin:2.3rem auto 0;max-width:860px;padding:0}
@media(min-width:800px){.logros{grid-template-columns:1fr 1fr;gap:1.1rem 2.4rem}}
.logros li{position:relative;padding-left:1.9rem;line-height:1.5;font-size:1.08rem}
.logros li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;
  background:var(--turquesa);opacity:.85}
.sec-dark .logros li::before{background:var(--luz)}

/* nota de permanencia */
.nota-libre{font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);
  line-height:1.35;color:var(--malva-deep);margin-top:1.6rem}
.sec-dark .nota-libre{color:var(--luz)}

/* la cabecera es fija: el hero necesita algo menos de aire arriba */
.hero-meraki{padding-top:clamp(2rem,4vw,3rem)}

@media(max-width:640px){
  .vsl-facade{gap:.5rem}
  .vsl-play{width:54px;height:54px;font-size:1.2rem}
  .vsl-label{font-size:1.05rem}
  .vsl-hint{display:none}
}