/* ===========================================================
   REVO — "Studio" page (the club, renamed)
   Aligned to the home's dark / premium language: everything sits
   on the living gradient, glass cards (like the therapies),
   teal-dot labels, white display headlines. Loads AFTER
   revo-amanecer.css. Type system is set in-page.
   =========================================================== */

/* ---------- hero (dark, foto de la fachada) ---------- */
.st-hero{ position:relative; min-height:90svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(60px,9vh,120px); overflow:hidden; }
.st-hero-media{ position:absolute; inset:0; z-index:0; }
.st-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.st-hero-media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,13,34,.32) 0%, rgba(9,13,34,.14) 24%, rgba(8,11,30,.46) 52%, rgba(6,9,28,.82) 100%),
    linear-gradient(90deg, rgba(7,10,30,.55) 0%, rgba(7,10,30,0) 60%); }
.st-hero .wrap{ position:relative; z-index:2; width:100%; }
.st-hero .eyebrow{ margin-bottom:30px; }
.st-hero h1{ font-family:var(--display); font-weight:400; font-size:clamp(56px,9vw,132px); line-height:.9; letter-spacing:-.022em; margin:0; color:#fff; }
.st-hero .lede{ margin-top:32px; max-width:44ch; font-size:clamp(18px,1.7vw,25px); line-height:1.5; color:rgba(255,255,255,.88); font-weight:500; }
.st-limit{ display:inline-flex; align-items:center; gap:11px; margin-top:30px; padding:12px 20px; border-radius:100px;
  font-size:13px; color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }
.st-limit .blip{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px rgba(104,129,252,.85); }

/* ---------- section head (on dark) ---------- */
.st-head{ max-width:960px; margin:0 0 60px; }
.st-head .eyebrow{ margin-bottom:26px; }
.st-head h2{ font-family:var(--display); font-weight:400; font-size:clamp(36px,5.4vw,82px); line-height:1.0; letter-spacing:-.02em; margin:0; color:#fff; }
.st-head .intro{ margin:26px 0 0; font-size:clamp(17px,1.4vw,21px); line-height:1.5; color:rgba(255,255,255,.74); max-width:52ch; }
.on-light .st-head h2{ color:var(--ink-dark); }
.on-light .st-head .intro{ color:rgba(17,19,24,.66); }

/* ---------- includes (white moment, like the home's method/medical) ---------- */
.incl-list{ display:flex; flex-direction:column; border-top:1px solid rgba(17,19,24,.18); max-width:1060px; }
.incl-item{ display:grid; grid-template-columns:30px 1fr; gap:20px; padding:32px 0; border-bottom:1px solid rgba(17,19,24,.1);
  opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.incl-item.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .incl-item{ opacity:1; transform:none; } }
.incl-item .arr{ font-size:20px; color:var(--indigo); line-height:1.3; }
.incl-item h4{ font-family:var(--display); font-weight:500; font-size:clamp(20px,1.8vw,26px); line-height:1.16; margin:0; color:var(--ink-dark); letter-spacing:-.01em; }
.incl-item p{ margin:10px 0 0; font-size:15.5px; line-height:1.66; color:rgba(17,19,24,.64); max-width:68ch; }
.incl-partners{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.incl-partners span{ font-size:12.5px; color:var(--ink-dark); padding:8px 15px; border:1px solid rgba(17,19,24,.2); border-radius:100px; background:rgba(104,129,252,.05); }

/* ---------- tiers (glass cards, like the therapies) ---------- */
.tiers{ display:flex; flex-direction:column; gap:26px; }
.tier{ position:relative; display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:clamp(36px,4vw,64px);
  padding:clamp(34px,3.6vw,54px); border-radius:26px; isolation:isolate; overflow:hidden;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 34px 70px -30px rgba(6,9,32,.6), 0 10px 24px -12px rgba(6,9,32,.45),
    inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.08);
  opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.tier::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; border:1px solid rgba(255,255,255,.18); }
.tier.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .tier{ opacity:1; transform:none; } }
.tier > *{ position:relative; z-index:2; }
.tier--feature{ background:rgba(104,129,252,.12);
  box-shadow:0 44px 96px -40px rgba(104,129,252,.6), 0 12px 28px -14px rgba(6,9,32,.5),
    inset 1px 1px 0 rgba(255,255,255,.26), inset -1px -1px 0 rgba(255,255,255,.1); }
.tier--feature::after{ border-color:rgba(140,160,255,.5); }
/* identity column */
.tier-tag{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:-.01em; color:var(--teal); margin-bottom:18px; }
.tier-tag .blip{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px rgba(104,129,252,.8); }
.tier-name{ font-family:var(--display); font-weight:500; font-size:clamp(28px,3.1vw,42px); line-height:1.0; letter-spacing:-.018em; margin:0; color:#fff; }
.tier-price{ font-family:var(--display); font-weight:500; font-size:clamp(38px,4.6vw,60px); line-height:1; letter-spacing:-.02em; color:#fff; margin:14px 0 0; }
.tier-price small{ font-family:var(--sans); font-size:.32em; font-weight:500; color:rgba(255,255,255,.55); letter-spacing:-.01em; }
.tier-oneliner{ margin:18px 0 0; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.72); max-width:34ch; }
.tier-id .btn{ margin-top:28px; }
.tier-members{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:12.5px; color:rgba(255,255,255,.7); }
.tier-members .blip{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px rgba(104,129,252,.7); }
/* contents column */
.tier-sub{ font-size:14.5px; font-weight:700; color:#fff; margin:0 0 22px; letter-spacing:-.01em; }
.tier-ul{ display:flex; flex-direction:column; gap:0; }
.tier-ul li{ position:relative; padding:14px 0 14px 26px; border-bottom:1px solid rgba(255,255,255,.1); font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.82); }
.tier-ul li:last-child{ border-bottom:0; }
.tier-ul li::before{ content:""; position:absolute; left:0; top:1.42em; width:13px; height:1px; background:var(--teal); }
.tier-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.tier-group .g-label{ display:block; font-size:11px; font-weight:700; letter-spacing:-.01em; color:var(--teal); padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid rgba(104,129,252,.4); }
.tier-group .tier-ul li{ font-size:14.5px; padding-left:22px; }
.tier-group .tier-ul li::before{ width:11px; top:1.32em; }
.tier-note{ grid-column:1 / -1; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
  font-style:italic; font-size:14px; line-height:1.6; color:rgba(255,255,255,.56); max-width:70ch; }
@media (max-width:920px){
  .tier{ grid-template-columns:1fr; gap:30px; }
  .tier-oneliner{ max-width:48ch; }
  .tier-groups{ grid-template-columns:1fr; gap:8px; }
  .tier-group{ padding-top:8px; }
}

/* ---------- closing CTA (centered, like the club moment) ---------- */
.st-cta{ text-align:center; padding:clamp(120px,18vh,220px) 0; }
.st-cta .eyebrow{ justify-content:center; margin-bottom:30px; }
.st-cta h2{ font-family:var(--display); font-weight:400; font-size:clamp(60px,10vw,160px); line-height:.92; letter-spacing:-.02em; margin:0 auto; color:#fff; }
.st-cta .cta-btns{ display:flex; gap:14px; justify-content:center; margin-top:46px; flex-wrap:wrap; }

/* ---------- footer on dark ---------- */
.site-footer{ color:var(--ink-light); }
.site-footer .footer-inner{ border-top-color:rgba(255,255,255,.14); }
.site-footer .footer-tag{ color:rgba(255,255,255,.6); }
.site-footer .footer-col a{ color:rgba(255,255,255,.66); }
.site-footer .footer-col a:hover{ color:#fff; }
.site-footer .footer-bottom{ color:rgba(255,255,255,.45); border-top-color:rgba(255,255,255,.14); }
.site-footer .logo-img{ filter:none; }

/* ===========================================================
   Sección 2 — split a dos columnas (variante B)
   =========================================================== */
.incl-split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,5vw,72px); align-items:start; }
.incl-split .st-head{ margin:0; max-width:none; }

/* ---------- Sección 2 como hoja blanca sobre el azul ----------
   Antes el fondo se fundía de blanco a azul a pantalla completa
   (transición turbia, con un punto medio azul lavado). Ahora el
   azul permanece debajo todo el rato y la sección flota como una
   hoja blanca a ancho completo con esquinas redondeadas; al
   entrar en los planes el azul ya está ahí y solo se revela. */
.st-sheet{ position:relative; z-index:2; }
.st-sheet::before{ content:""; position:absolute; inset:0; z-index:-1;
  left:50%; width:100vw; transform:translateX(-50%);
  background:#fff; border-radius:0;
  box-shadow:0 60px 120px -70px rgba(6,9,32,.55); }
.incl-split .st-head .intro{ max-width:34ch; }
.incl-split .incl-list{ border-top:1px solid rgba(17,19,24,.18); max-width:none; }
@media (max-width:900px){ .incl-split{ grid-template-columns:1fr; gap:36px; } .incl-split .st-head{ position:static; } }

/* ===========================================================
   Sección 3 — tarjetas verticales compactas (variante 3.2)
   Densas para caber en una pantalla; CTA al final de cada una.
   =========================================================== */
.plans-section{ padding-top:clamp(56px,8vh,90px); padding-bottom:clamp(56px,8vh,90px); }
.plans-section .st-head{ margin-bottom:34px; }
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; border-radius:18px; padding:30px 30px; isolation:isolate; overflow:hidden;
  --lg-rim:1.6;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(15px) saturate(1.3); -webkit-backdrop-filter:blur(15px) saturate(1.3);
  box-shadow:
    0 34px 70px -28px rgba(6,9,32,.6),
    0 10px 24px -12px rgba(6,9,32,.45),
    inset 1px 1px 0     rgba(255,255,255, calc(var(--lg-rim) * .28)),
    inset 1.5px 1.5px 1px rgba(255,255,255, calc(var(--lg-rim) * .15)),
    inset -1px -1px 0   rgba(255,255,255, calc(var(--lg-rim) * .12)),
    inset 0 0 20px      rgba(255,255,255, calc(var(--lg-rim) * .05));
  transition:transform .5s var(--ease), box-shadow .5s; }
.plan::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(125deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 20%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 88%, rgba(255,255,255,.06) 100%);
  mix-blend-mode:screen; }
.plan::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,.18); pointer-events:none; z-index:4; }
.plan > *{ position:relative; z-index:2; }
.plan:hover{ transform:translateY(-10px);
  box-shadow:0 54px 96px -30px rgba(6,9,32,.62), 0 14px 28px -12px rgba(6,9,32,.5),
    inset 1px 1px 0 rgba(255,255,255, calc(var(--lg-rim) * .34)),
    inset 1.5px 1.5px 1px rgba(255,255,255, calc(var(--lg-rim) * .18)),
    inset -1px -1px 0 rgba(255,255,255, calc(var(--lg-rim) * .14)),
    inset 0 0 22px rgba(255,255,255, calc(var(--lg-rim) * .06)); }
.plan--feature{ --lg-rim:2; background:rgba(255,255,255,.09); }
.plan--feature::after{ border-color:rgba(255,255,255,.3); }
.plan-tag{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:-.01em; color:var(--teal); margin-bottom:12px; }
.plan-tag .blip{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px rgba(104,129,252,.85); }
.plan-name{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.4vw,32px); line-height:1; letter-spacing:-.018em; margin:0; color:#fff; }
.plan-price{ font-family:var(--display); font-weight:500; font-size:clamp(30px,3vw,40px); line-height:1; letter-spacing:-.02em; color:#fff; margin:8px 0 0; }
.plan-price small{ font-family:var(--sans); font-size:.32em; font-weight:500; color:rgba(255,255,255,.55); letter-spacing:-.01em; }
.plan-one{ margin:10px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.72); max-width:36ch; }
.plan-members{ display:inline-flex; align-items:center; gap:8px; margin-top:11px; font-size:11.5px; color:rgba(255,255,255,.72); }
.plan-members .blip{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px rgba(104,129,252,.75); }
.plan-div{ height:1px; background:rgba(255,255,255,.16); margin:16px 0 14px; }
.plan-sub{ font-size:12px; font-weight:700; color:#fff; margin:0 0 10px; letter-spacing:-.01em; }
.plan-badge{ position:absolute; top:24px; right:26px; z-index:3;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.92);
  padding:9px 15px; border-radius:100px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.05); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.plan-glabel{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin:14px 0 7px; }
.plan-glabel:first-of-type{ margin-top:0; }
.plan-ul{ display:flex; flex-direction:column; gap:0; }
.plan-ul li{ position:relative; padding:5px 0 5px 18px; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.84); }
.plan-ul li::before{ content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--teal); }
.plan-ul:last-of-type{ margin-bottom:30px; }
.plan-note{ margin-top:12px; font-style:italic; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.56); }
.plan .btn{ margin-top:auto; align-self:flex-start; }
.plan-cta-gap{ margin-top:18px; }
@media (max-width:820px){ .plan-grid{ grid-template-columns:1fr; } .plan .btn{ margin-top:18px; } }

/* ===========================================================
   Cómo hacerse miembro — pasos numerados sobre el azul
   =========================================================== */
.join-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; border-top:1px solid rgba(255,255,255,.2); }
.join-step{ padding:34px 28px 36px 0; border-right:1px solid rgba(255,255,255,.14); }
.join-step:last-child{ border-right:0; }
.join-step:not(:first-child){ padding-left:28px; }
.join-num{ font-family:var(--display); font-weight:400; font-size:clamp(40px,4vw,54px); line-height:1; color:var(--teal); letter-spacing:-.02em; }
.join-step h4{ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,23px); margin:20px 0 12px; color:#fff; letter-spacing:-.01em; line-height:1.1; }
.join-step p{ font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.7); margin:0; }
.join-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:clamp(40px,5vh,64px); }
.join-foot .join-note{ font-size:13.5px; color:rgba(255,255,255,.6); max-width:34ch; }
@media (max-width:900px){
  .join-steps{ grid-template-columns:1fr 1fr; }
  .join-step{ border-bottom:1px solid rgba(255,255,255,.14); padding:30px 24px 32px; border-right:1px solid rgba(255,255,255,.14); }
  .join-step:nth-child(2n){ border-right:0; }
  .join-step:not(:first-child){ padding-left:24px; }
}
@media (max-width:560px){
  .join-steps{ grid-template-columns:1fr; }
  .join-step{ border-right:0; padding:28px 0; }
  .join-step:not(:first-child){ padding-left:0; }
}
@media (max-width:600px){
  /* hero a pantalla completa en móvil */
  .st-hero{ min-height:100svh; }
  /* titulares grandes → más pequeños en móvil */
  .st-hero h1{ font-size:clamp(38px,11vw,52px); }
  .st-head h2{ font-size:clamp(28px,8.2vw,40px); }
  .st-cta h2{ font-size:clamp(40px,12vw,58px); }
  .tier-name{ font-size:clamp(25px,7vw,34px); }
  .tier-price{ font-size:clamp(34px,9vw,46px); }
}