/* =========================================================================
   Club Mi Tribu · hoja de la página de venta.

   🚨 GENERADO. No editar aquí: se sobrescribe.
   La fuente es `landing-pages/venta-club/index.html`; después,
   `python3 landing-pages/venta-club/build.py`.

   Vive aparte de `app.css` a propósito: comparten los tokens pero no los
   componentes, y varias clases (`.btn`, `.muted`) se llaman igual con otra
   pinta. La plantilla desencola `app.css`, así que aquí no hay herencia.
   ========================================================================= */

/* Los mismos tokens que la app del club (theme-club/assets/app.css).
   Georgia con respaldo Gelasio: Android no trae Georgia. */
:root{
  --bg:#ECEBE5;
  --bg-2:#E4E3DC;
  --ink:#1C1C1C;
  --ink-2:#515151;
  --ink-3:#6A6A66;
  --lila:#BF88CE;
  --lila-soft:#EEE1F4;
  --lila-ink:#9948AF;
  --lila-linea:#E5D8EC;
  --line:#D6D5CE;
  --card:#F5F4F0;
  --white:#FFFFFF;
  --ok:#4E7B57;
  --mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:Georgia,"Gelasio","Times New Roman",serif;
  --sans:"Poppins", system-ui, sans-serif;
  --r:14px;
  --sombra:0 10px 30px rgba(28,28,28,.07);
  --sombra-alta:0 22px 50px rgba(28,28,28,.13);
  --ancho:1120px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:var(--ancho); margin:0 auto; padding:0 22px}
section,
.tour,
.vero,
.planes-sec{padding:84px 0}
@media(max-width:720px){ section,.tour,.vero,.planes-sec{padding:56px 0} }

h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.14; letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:1.28rem}

.kicker{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lila-ink); font-weight:500;
}
.lead{font-size:1.06rem; color:var(--ink-2)}
.muted{font-family:var(--mono); font-size:.8rem; color:var(--ink-3); line-height:1.65}

.sec-head{max-width:620px; margin:0 auto 48px; text-align:center}
.sec-head h2{margin:12px 0 14px}
.sec-head p{color:var(--ink-2)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:17px 34px; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.btn.lila{background:var(--lila-ink); border-color:var(--lila-ink); color:#fff}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--white); box-shadow:var(--sombra)}
.btn.claro{background:#fff; border-color:#fff; color:var(--ink)}
@media(max-width:420px){ .btn{padding:16px 18px; font-size:.78rem; letter-spacing:.07em} }

/* ---------- cabecera ---------- */
header{
  /* Sin `position:sticky` a propósito: en el móvil la cabecera se comía 66px
     de una pantalla que ya lleva el aviso de campaña arriba y la barra de
     «Empezar gratis» abajo. Se lee una vez, al principio, y se va. */
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px}
.marca{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:500; white-space:nowrap;
}
.nav-links{display:flex; gap:26px; font-family:var(--mono); font-size:.78rem; color:var(--ink-2)}
.nav-links a:hover{color:var(--lila-ink)}
.nav .btn{padding:11px 22px; font-size:.7rem}
.nav-fin{display:flex; align-items:center; gap:18px}
.ya{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-2); border-bottom:1px solid var(--line); padding-bottom:2px;
}
.ya:hover{color:var(--lila-ink); border-color:var(--lila)}
@media(max-width:900px){ .nav-links{display:none} }
@media(max-width:520px){ .nav-fin{gap:12px} .nav .btn{padding:11px 16px} }

/* ---------- aviso de campaña ---------- */
.aviso{
  background:var(--ink); color:#fff; text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:10px 16px;
}
.aviso b{color:#D9AEE8; font-weight:500}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 76px;
  background:
    radial-gradient(120% 100% at 88% 6%, rgba(191,136,206,.30), transparent 58%),
    radial-gradient(100% 90% at 4% 92%, rgba(191,136,206,.16), transparent 55%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
/* Tres bloques en vez de dos columnas: así en el móvil el teléfono se cuela
   ENTRE el titular y los botones, en vez de quedar debajo de todo —que es
   donde nadie llega—. En escritorio la imagen ocupa las dos filas. */
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:0 56px; align-items:center}
.hero-txt{grid-column:1; grid-row:1; align-self:end}
.hero-acc{grid-column:1; grid-row:2; align-self:start}
.hero-img{grid-column:2; grid-row:1 / span 2; align-self:center}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem); margin:16px 0 18px}
.hero h1 em{font-style:normal; color:var(--lila-ink)}
.hero .lead{max-width:38ch; margin-bottom:0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:26px}

/* El «no se te cobra nada» va PEGADO al botón, no en el pie de la página.
   La objeción salta justo en el instante de pulsar, y es ahí donde hay que
   responderla. */
.riesgo{
  font-family:var(--mono); font-size:.78rem; color:var(--ink-3);
  margin-top:12px; line-height:1.6;
}
.riesgo b{color:var(--ink); font-weight:500}

/* Prueba social en el hero. El tráfico viene del Instagram de Vero: conocen a
   Vero, no conocen el club. El dato de cuánta gente hay dentro es lo que
   convierte «me fío de ella» en «esto funciona». */
.prueba{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink-2);
}
.prueba .estrellas{color:var(--lila-ink); letter-spacing:.12em; font-size:.95rem}
.prueba b{color:var(--ink); font-weight:500}

/* La tira de cifras baja del bloque de texto al pie de la captura: en el hero
   se comía el sitio del botón. */
.tira{
  list-style:none; display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  margin-top:22px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.tira b{font-family:var(--display); font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--ink)}
@media(max-width:900px){
  /* Apretado a propósito: cada píxel que se ahorra aquí arriba es un píxel más
     de la captura asomando bajo el botón. */
  .hero{padding:34px 0 48px}
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .hero-txt,.hero-acc,.hero-img{grid-column:1; grid-row:auto; align-self:auto}
  .hero .lead{max-width:none; margin-bottom:0}
  .hero-cta{margin-top:0}
  .hero-cta .btn{width:100%}
  .prueba{margin-top:18px; padding-top:18px}
}
@media(max-width:720px){
  /* En el móvil ya hay una barra fija abajo con la misma llamada: dos botones
     iguales a la vez sobran. */
  .nav > .btn{display:none}
  .nav{justify-content:flex-start}
}

/* ---------- marco de móvil ---------- */
.movil{
  width:min(340px,82vw); margin:0 auto; position:relative;
  border-radius:44px; background:#15140F; padding:10px;
  box-shadow:0 34px 70px rgba(60,30,75,.24), 0 4px 14px rgba(0,0,0,.18);
}
.movil .pantalla{border-radius:35px; overflow:hidden; background:#000; position:relative}
.movil .pantalla img{width:100%}
.movil.grande{width:min(330px,84vw)}

/* ---------- recorrido por la app ---------- */
.tour{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.paso{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center;
  padding:62px 0; border-bottom:1px solid var(--line);
}
.paso:first-of-type{padding-top:0}
.paso:last-child{border-bottom:0; padding-bottom:0}
.paso:nth-child(even) .paso-txt{order:-1}
.paso h3{font-size:clamp(1.5rem,2.6vw,2rem); margin:12px 0 12px}
.paso p{color:var(--ink-2); max-width:44ch}
.paso ul{list-style:none; margin-top:20px; display:grid; gap:11px}
.paso ul li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-2)}
.paso ul li::before{
  content:""; flex:0 0 auto; width:19px; height:19px; margin-top:3px;
  border-radius:50%; background:var(--lila);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/13px no-repeat;
}
@media(max-width:900px){
  .paso{grid-template-columns:1fr; gap:30px; padding:40px 0}
  .paso:nth-child(even) .paso-txt{order:0}
  .paso p{max-width:none}
  /* La captura entera son 672 px de alto por cada una de las cuatro. Se
     recorta por abajo: lo que hay que ver de cada pantalla está arriba. */
  .paso .movil .pantalla{aspect-ratio:402/600}
  .paso .movil .pantalla img{height:100%; object-fit:cover; object-position:top center}
}

/* ---------- la tira del problema ---------- */
.tira-problema{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--line);
}
.tira-problema li{background:var(--white); padding:24px 22px; font-size:.94rem; color:var(--ink-2); line-height:1.55}
.tira-problema li b{
  display:block; font-family:var(--display); font-size:1.2rem; font-weight:400;
  color:var(--ink); margin-bottom:7px; line-height:1.25;
}
@media(max-width:820px){ .tira-problema{grid-template-columns:1fr} }

/* ---------- llamada suelta ----------
   Dieciséis pantallas de scroll con el botón solo al principio y al final es
   pedirle a la gente que se acuerde de volver. Va uno cada pocas secciones,
   justo después de lo que acaba de convencer. */
.cta-suelto{text-align:center; margin-top:44px}
.cta-suelto .riesgo{margin-top:14px}

/* ---------- los tres pasos del alta ---------- */
.pasos-alta{
  list-style:none; counter-reset:paso; max-width:660px; margin:0 auto;
  display:grid; gap:14px;
}
.pasos-alta li{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px 22px 66px; position:relative; box-shadow:var(--sombra);
  color:var(--ink-2); font-size:.96rem;
}
.pasos-alta li::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; left:22px; top:20px;
  width:30px; height:30px; border-radius:50%;
  background:var(--lila-soft); color:var(--lila-ink);
  font-family:var(--display); font-size:1rem;
  display:grid; place-items:center;
}
.pasos-alta li b{display:block; color:var(--ink); font-weight:500; margin-bottom:4px}

/* ---------- lo que entra, en lista ----------
   Antes eran seis tarjetas: 1.500 px de scroll en el móvil para repetir lo que
   el recorrido acaba de enseñar con capturas. */
.entra{
  list-style:none; max-width:680px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--line);
}
.entra li{background:var(--white); padding:20px 22px}
.entra li b{
  display:block; font-family:var(--display); font-size:1.5rem; line-height:1;
  font-weight:400; margin-bottom:7px;
}
.entra li span{font-size:.92rem; color:var(--ink-2); line-height:1.5}
@media(max-width:560px){ .entra{grid-template-columns:1fr} }

/* ---------- tarjetas ---------- */
.rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tarjeta{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; box-shadow:var(--sombra);
}
.tarjeta .num{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lila-ink); display:block; margin-bottom:12px;
}
.tarjeta h3{margin-bottom:9px}
.tarjeta p{font-size:.94rem; color:var(--ink-2)}
@media(max-width:880px){ .rejilla{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .rejilla{grid-template-columns:1fr} }

/* ---------- vero ---------- */
.vero{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.vero-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center}
.vero-foto{border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra-alta)}
.vero h2{margin:12px 0 18px}
.vero p{color:var(--ink-2); margin-bottom:14px}
@media(max-width:880px){ .vero-grid{grid-template-columns:1fr; gap:34px} }

/* ---------- testimonios ---------- */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.testi{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.testi p{font-size:.98rem; color:var(--ink); margin-bottom:20px; flex:1}
.testi .quien{display:flex; align-items:center; gap:11px}
.testi .av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--lila-soft); color:var(--lila-ink);
  display:grid; place-items:center; font-family:var(--display); font-size:1rem;
}
.testi .quien b{font-size:.9rem; font-weight:500; display:block}
.testi .quien small{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
/* Seis tarjetas apiladas son 1.600 px de scroll en un móvil. En carrusel
   ocupan una pantalla y se leen igual; el corte de la tercera ya avisa de que
   hay más. */
@media(max-width:880px){
  .testis{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:0 -22px; padding:4px 22px 20px; scrollbar-width:none;
  }
  .testis::-webkit-scrollbar{display:none}
  .testi{flex:0 0 80%; scroll-snap-align:center; margin:0}
}

/* ---------- planes ---------- */
.planes-sec{background:var(--bg-2); border-top:1px solid var(--line)}
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 26px 28px; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--sombra);
}
.plan.mejor{background:var(--lila-soft); border-color:var(--lila-linea); box-shadow:var(--sombra-alta)}
.plan .tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--lila-ink); color:#fff; padding:6px 14px; border-radius:999px; white-space:nowrap;
}
.plan h3{font-size:1.15rem; margin-bottom:14px}
.plan .precio{font-family:var(--display); font-size:2.5rem; line-height:1; margin-bottom:4px}
.plan .cada{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.plan .detalle{font-size:.9rem; color:var(--ink-2); margin:16px 0 24px; flex:1}
.plan .btn{width:100%}
/* El bloque de planes lo pinta `[cmt_planes]` (plugin), y trae su propio
   marcado: `h4` en vez de `h3`, el precio dentro de un `<b>` con su `<span>`
   al lado, y `es-mejor` en vez de `mejor`. Se le da aquí la misma pinta que al
   de la maqueta, en vez de tocar el shortcode: lo usan más sitios.
   ⚠️ Los selectores del precio van con `>` a propósito: `wc_price()` mete sus
   propios `<span>` dentro del `<b>`, y sin el hijo directo se les aplicaría la
   letra de la etiqueta «cada mes» al importe. */
.plan h4{font-family:var(--display); font-weight:400; font-size:1.15rem; margin-bottom:14px}
.plan .precio > b{display:block; font-weight:400; font-size:2.5rem; line-height:1}
.plan .precio > span{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.plan.es-mejor{background:var(--lila-soft); border-color:var(--lila-linea); box-shadow:var(--sombra-alta)}
.plan.es-mejor .btn{background:var(--lila-ink); border-color:var(--lila-ink); color:#fff}

.planes-nota{text-align:center; margin-top:26px}
@media(max-width:880px){ .planes{grid-template-columns:1fr; gap:26px} }

.incluye{
  list-style:none; max-width:520px; margin:44px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:11px 24px;
}
.incluye li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--ink-2)}
.incluye li::before{
  content:""; flex:0 0 auto; width:18px; height:18px; margin-top:3px;
  border-radius:50%; background:var(--ok);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
}
@media(max-width:560px){ .incluye{grid-template-columns:1fr} }

/* ---------- garantía ---------- */
.garantia{
  max-width:640px; margin:0 auto; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; box-shadow:var(--sombra);
}
.garantia h3{margin-bottom:10px}
.garantia p{color:var(--ink-2); font-size:.95rem}

/* ---------- faq ---------- */
.faq{max-width:760px; margin:0 auto}
details{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:12px; padding:0 24px;
}
details[open]{box-shadow:var(--sombra)}
summary{
  list-style:none; cursor:pointer; font-family:var(--display); font-size:1.1rem;
  padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--sans); font-weight:300; font-size:1.5rem; color:var(--lila-ink); transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details .cuerpo{padding-bottom:22px; color:var(--ink-2); font-size:.95rem}
details .cuerpo p+p{margin-top:10px}
details ul{margin:10px 0 0 18px; font-size:.95rem}

/* ---------- cierre ---------- */
.cierre{
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(191,136,206,.55), transparent 62%),
    var(--ink);
  color:#fff; text-align:center;
}
.cierre h2{color:#fff; margin:14px 0 16px}
.cierre p{color:rgba(255,255,255,.82); max-width:46ch; margin:0 auto 30px}
.cierre .kicker{color:#EEDCF5}
.cierre .muted{color:rgba(255,255,255,.6); margin-top:18px}

/* ---------- pie ---------- */
footer{background:var(--ink); color:#A9A49E; padding:44px 0 30px; font-size:.86rem; border-top:1px solid rgba(255,255,255,.09)}
.pie{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:center}
.pie img{height:26px; width:auto; opacity:.9}
.pie-links{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem}
.pie-links a{padding:13px 0}   /* 18 px de texto + padding = 44, el mínimo para el dedo */
footer a:hover{color:#fff}
.pie-abajo{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#7A7570;
}

/* ---------- barra fija de móvil ---------- */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(236,235,229,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.barra-movil .btn{width:100%}
/* El precio, en la barra. Un botón que no dice lo que cuesta después se pulsa
   menos: la duda («¿esto me mete en algo?») pesa más que la curiosidad. */
.barra-nota{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--ink-3); text-align:center; margin-bottom:8px;
}
.barra-nota b{color:var(--ink); font-weight:500}
@media(max-width:720px){
  .barra-movil{display:block}
  body{padding-bottom:108px}
}

/* En el móvil todo lo secundario subía a duras penas de los 11 px. */
@media(max-width:720px){
  section{padding:48px 0}
  .kicker{font-size:.75rem}
  .muted{font-size:.84rem}
  .tira,
  .tarjeta .num,
  .plan .cada,
  .testi .quien small{font-size:.72rem}
  .tarjeta{padding:26px 22px}
  .sec-head{margin-bottom:36px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}