/* ============================================================
   FlexLab · sitio público flexlabcr.com (sesión A, 2026-08-26)
   Dirección aprobada por Juan sobre el mock del canvas:
   blanco pulcro + rosa de acento, nav lateral izquierdo,
   Fredoka (display/cuerpo, minúsculas) + Silkscreen (numeración
   pixel) + Playfair itálica (una palabra acento por titular).
   ============================================================ */

:root {
  --bg: #fbf8f4; /* crema del OS (--page) */
  --bg-soft: #fdf5f8;
  --tint: #fce7f0;
  --pink: #e1146c;
  --pink-deep: #c4105e;
  --ink: #17141a;
  --lime: #d3dc2a;
  --muted: #756c78;
  --hair: rgba(23, 20, 26, 0.08);
  --hair-2: rgba(23, 20, 26, 0.14);
  --shadow: 0 24px 60px rgba(23, 20, 26, 0.12);
  --shadow-pink: 0 14px 34px rgba(225, 20, 108, 0.3);
  --sans: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --pixel: 'Silkscreen', monospace;
  --serif: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* recorta lo que sobresale (dots decorativos) sin crear scroll container ni romper sticky */
.main { overflow-x: clip; }
img { max-width: 100%; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-deep); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.06; margin: 0; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(56px, 8.5vw, 136px); line-height: 0.98; }
h2 { font-size: clamp(40px, 5.5vw, 88px); line-height: 1.02; }
h3 { font-size: 26px; }
p { margin: 0; }
.accent { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); text-transform: none; letter-spacing: 0; }
.kick { font-family: var(--pixel); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }
.lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--muted); }
.fine { font-size: 12.5px; color: var(--muted); }

/* ---- layout: sidebar + main ---- */
.layout { display: flex; min-height: 100dvh; align-items: flex-start; }
section[id], div[id] { scroll-margin-top: 80px; }
.sidebar {
  width: 210px; flex-shrink: 0; border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 34px 30px; position: sticky; top: 0; height: 100dvh; align-self: flex-start;
}
.wordmark { font-weight: 600; font-size: 34px; text-transform: lowercase; letter-spacing: -0.01em; line-height: 1; }
.wordmark .fx { color: var(--pink); } .wordmark .dot { color: var(--ink); } .wordmark .lb { color: var(--lime); }
.wordmark-sm { font-size: 22px; }
.nav-col { display: flex; flex-direction: column; gap: 22px; }
.nav-col a { font-size: 13.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.15s; }
.nav-col a:hover { color: var(--ink); }
.nav-col a { display: inline-flex; align-items: center; gap: 8px; }
.nav-col a svg { display: none; }
.nav-col a.active { color: var(--pink); font-weight: 700; }
.nav-col a.active svg { display: inline; }
.nav-col a .subnav { display: block; font-family: var(--pixel); font-size: 7.5px; letter-spacing: 0.08em; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
.nav-col a.active .subnav { color: var(--pink); }
.nav-col a.con-sub { flex-direction: column; align-items: flex-start; gap: 0; }
.nav-col a.con-sub .fila { display: inline-flex; align-items: center; gap: 8px; }
.nav-dots { width: 84px; height: 68px; margin-top: 8px; background-image: radial-gradient(rgba(225, 20, 108, 0.3) 1.5px, transparent 1.5px); background-size: 14px 14px; }
.sidebar-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pagenum { font-family: var(--pixel); font-size: 11px; color: var(--pink); }
.pageline { width: 44px; height: 3px; background: var(--tint); border-radius: 999px; }
.pageline i { display: block; height: 3px; background: var(--pink); border-radius: 999px; width: 16px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; padding: 16px 30px; font-size: 15.5px; font-weight: 600;
  font-family: var(--sans); line-height: 1; white-space: nowrap; border: none; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background 0.15s, border-color 0.15s; will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-pink:hover { box-shadow: 0 20px 44px rgba(225, 20, 108, 0.42); }
.btn:active { transform: scale(0.96); }
.btn-pink { background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }
.btn-pink:hover { background: var(--pink-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair-2); }
.btn-ghost:hover { background: #d3dc2a; border-color: #d3dc2a; color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { color: #fff; opacity: 0.92; }
.btn-lime { background: #d3dc2a; color: var(--ink); box-shadow: 0 14px 34px rgba(211, 220, 42, 0.35); }
.btn-lime:hover { background: #c3cc1f; color: var(--ink); }
.btn-entrar { animation: pulso 3s var(--ease) infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(225, 20, 108, 0.32); } 60% { box-shadow: 0 0 0 14px rgba(225, 20, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 20, 108, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-entrar { animation: none; } }
.btn-sm { padding: 11px 20px; font-size: 13.5px; }
.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700; background: var(--tint); color: var(--pink-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.link-wa { font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-wa:hover { color: var(--ink); }
.link-more { font-size: 12.5px; font-weight: 700; color: var(--pink); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- ticker ---- */
.ticker { border-bottom: 1px solid var(--hair); padding: 9px 0; overflow: hidden; white-space: nowrap; max-width: 100%; }
.ticker span { display: inline-block; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); animation: tk 40s linear infinite; }
@keyframes tk { from { transform: translateX(20%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; padding-left: 40px; } }

/* ---- secciones ---- */
.sec { padding: clamp(36px, 4.5vw, 56px) clamp(22px, 4vw, 56px); border-top: 1px solid var(--hair); }
.sec:first-of-type, .sec.no-line { border-top: none; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: clamp(20px, 2.6vw, 30px); flex-wrap: wrap; }
.sec-note { font-family: var(--pixel); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- hero / carrusel ---- */
.hero { position: relative; }
.slide { display: none; }
.slide.on { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4.5vw, 56px); align-items: center; min-height: clamp(430px, 42vw, 620px); }
.hero h1 { font-size: clamp(44px, 5.8vw, 92px); min-height: 2.05em; }
.hero .slide-copy .lead { min-height: 4.9em; }
.slide.on .slide-copy > * { animation: heroTxt 0.55s var(--ease) backwards; }
.slide.on .slide-copy > *:nth-child(1) { animation-delay: 0.02s; }
.slide.on .slide-copy > *:nth-child(2) { animation-delay: 0.08s; }
.slide.on .slide-copy > *:nth-child(3) { animation-delay: 0.14s; }
.slide.on .slide-copy > *:nth-child(4) { animation-delay: 0.2s; }
.slide.on .slide-copy > *:nth-child(5) { animation-delay: 0.26s; }
.slide.on .photo-wrap { animation: heroImg 0.6s var(--ease) backwards; animation-delay: 0.06s; }
@keyframes heroTxt { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroImg { from { opacity: 0; transform: translateX(26px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide.on .slide-copy > *, .slide.on .photo-wrap { animation: none; } }
.slide-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.slide-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hero-meta { display: flex; gap: 28px; margin-top: 10px; flex-wrap: wrap; }
.hero-meta .stp { display: flex; flex-direction: column; gap: 2px; }
.hero-meta .stp b { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-meta .stp .n { font-family: var(--pixel); font-size: 10px; color: var(--pink); }
.photo-wrap { position: relative; }
.photo-wrap .dots { position: absolute; top: -22px; right: -22px; width: 110px; height: 110px; background-image: radial-gradient(rgba(225, 20, 108, 0.3) 1.5px, transparent 1.5px); background-size: 14px 14px; }
.photo { display: block; width: 100%; height: clamp(280px, 32vw, 430px); object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); position: relative; }
.hero .photo { height: clamp(300px, 30vw, 430px); }
.float-card { position: absolute; background: rgba(255, 255, 255, 0.95); border-radius: 18px; padding: 13px 17px; box-shadow: 0 16px 40px rgba(23, 20, 26, 0.16); display: flex; flex-direction: column; gap: 2px; }
.float-card .t { font-family: var(--pixel); font-size: 8.5px; text-transform: uppercase; color: var(--muted); }
.float-card .v { font-size: 18px; font-weight: 700; line-height: 1.15; }
.float-card.bl { bottom: 22px; left: -16px; } .float-card.tr { top: 20px; right: 16px; } .float-card.br { bottom: 20px; right: 16px; }
.carrusel-nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.carrusel-nav .cnt { font-family: var(--pixel); font-size: 10px; color: var(--pink); min-width: 52px; }
.cdots { display: flex; gap: 6px; align-items: center; }
.cdots button { width: 6px; height: 6px; border-radius: 999px; background: var(--tint); border: none; padding: 0; cursor: pointer; transition: all 0.25s var(--ease); }
.cdots button.on { width: 22px; background: var(--pink); }
.carrusel-nav .lbl { font-size: 12px; color: var(--muted); text-transform: lowercase; }

/* ---- clases (reserva embebida) ---- */
.clases { display: flex; flex-direction: column; gap: 16px; }
.clase-row { display: flex; align-items: center; gap: 22px; border: 1px solid var(--hair-2); border-radius: 26px; padding: 24px 30px; transition: box-shadow 0.2s, transform 0.2s; position: relative; overflow: hidden; background-size: cover; background-position: center 30%; }
/* patrón del OS: velo claro por sede sobre la ilustración, texto en tinta */
.clase-row.conimg { cursor: pointer; }
.clase-row .acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.clase-row .btn-detalle { background: rgba(255, 255, 255, 0.92); color: var(--ink); border: none; }
.clase-row .btn-detalle:hover { background: #fff; color: var(--ink); }
.clase-row.conimg { border: none; padding: 28px 30px; }
.clase-row.conimg > * { position: relative; }
.clase-row.conimg .fecha { background: rgba(255, 255, 255, 0.92); }
.clase-row.conimg .info .d { color: var(--muted-2, #5e5245); }
.sede-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-family: var(--pixel); font-size: 8px; letter-spacing: 0.06em; margin-left: 10px; vertical-align: middle; }
.clase-row:hover { box-shadow: 0 14px 36px rgba(23, 20, 26, 0.08); transform: translateY(-1px); }
.clase-row .fecha { width: 88px; flex-shrink: 0; text-align: center; background: var(--tint); border-radius: 18px; padding: 14px 6px; }
.clase-row .fecha b { display: block; font-size: 30px; line-height: 1.1; color: var(--pink-deep); }
.clase-row .fecha span { font-family: var(--pixel); font-size: 10px; text-transform: uppercase; color: var(--pink); }
.clase-row .info { flex: 1; min-width: 0; }
.clase-row .info .n { font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.clase-row .info .d { font-size: 16px; color: var(--muted); margin-top: 3px; }
.clases-vacio { border: 1px dashed var(--hair-2); border-radius: 20px; padding: 18px 20px; font-size: 14px; color: var(--muted); }

/* ---- servicios grid ---- */
.serv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; }
.serv { display: flex; flex-direction: column; gap: 12px; padding: 0 26px; border-right: 1px solid var(--hair); }
.serv:nth-child(3n) { border-right: none; padding-right: 0; }
.serv:nth-child(3n + 1) { padding-left: 0; }
.serv img { width: 100%; height: 130px; object-fit: cover; border-radius: 16px; }
.serv .num { font-family: var(--pixel); font-size: 11px; color: var(--pink); }
.serv h3 { font-size: 19px; font-weight: 700; }
.serv p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.badge { background: var(--pink); color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.badge-soft { background: var(--tint); color: var(--pink-deep); border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }

/* ---- splits y cards ---- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 56px); align-items: center; }
.split-divided { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.split-divided > div { display: flex; flex-direction: column; gap: 14px; }
.split-divided > div:first-child { padding-right: 44px; border-right: 1px solid var(--hair); }
.split-divided > div:last-child { padding-left: 44px; }
.col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.checks.mini li { font-size: 13.5px; gap: 9px; }
.checks.mini .chk { width: 18px; height: 18px; font-size: 10px; }
.checks .chk { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 800; margin-top: 1px; }
.price-card { background: var(--bg-soft); border: 1px solid rgba(225, 20, 108, 0.14); border-radius: 28px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 15px; box-shadow: var(--shadow); }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: clamp(38px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.03em; }
.price span { font-size: 15px; color: var(--muted); }
.mathnote { font-size: 13px; line-height: 1.5; color: var(--pink-deep); font-weight: 600; background: var(--tint); border-radius: 14px; padding: 12px 15px; }
.panel { border: 1.5px solid rgba(225, 20, 108, 0.25); border-radius: 32px; padding: clamp(24px, 3.2vw, 44px); position: relative; box-shadow: 0 24px 60px rgba(225, 20, 108, 0.08); }
.panel .badge-top { position: absolute; top: -14px; left: 44px; }
.stack { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.stack .row { display: flex; justify-content: space-between; gap: 14px; }
.stack .row span:last-child { color: var(--muted); white-space: nowrap; }
.stack .total { border-top: 1px solid var(--hair-2); margin-top: 4px; padding-top: 12px; font-weight: 700; }
.stack .total s { text-decoration-color: var(--pink); }
.stack .paga { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.stack .paga .precio { font-size: clamp(32px, 3.4vw, 42px); letter-spacing: -0.02em; color: var(--pink); }

/* ---- wallets ---- */
.wallets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wallets img { height: 42px; width: auto; border-radius: 8px; }
.wallets .fine { max-width: 250px; }

/* ---- split de 3 (servicios empresariales) ---- */
.split-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 36px; }
.split-3 > div { display: flex; flex-direction: column; gap: 14px; }

/* ---- hook pill + chips infográficos ---- */
.hook { display: inline-flex; align-items: center; gap: 8px; background: var(--tint); color: var(--pink-deep); border-radius: 18px; padding: 11px 17px; font-size: 14.5px; font-weight: 600; line-height: 1.4; max-width: 560px; }
.datos { display: flex; gap: 10px; flex-wrap: wrap; }
.dato { border: 1px solid var(--hair-2); border-radius: 16px; padding: 11px 15px; display: flex; flex-direction: column; gap: 1px; min-width: 96px; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.dato:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 20, 26, 0.08); }
.dato b { font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; }
.dato span { font-family: var(--pixel); font-size: 8px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }

/* ---- los días del club ---- */
.dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.dia { border: 1px solid var(--hair-2); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.25s var(--ease); }
.dia.vis { opacity: 1; transform: none; }
.dia:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(23, 20, 26, 0.1); }
.dia.lima { background: rgba(240, 242, 176, 0.45); border-color: rgba(160, 163, 26, 0.3); }
.dia.rosa { background: rgba(250, 208, 226, 0.45); border-color: rgba(225, 20, 108, 0.25); }
.dia.crema { background: rgba(227, 226, 215, 0.45); border-color: rgba(23, 20, 26, 0.14); }
@media (prefers-reduced-motion: reduce) { .dia { opacity: 1; transform: none; transition: none; } }
.dia .d { font-family: var(--pixel); font-size: 10px; color: var(--pink); text-transform: uppercase; letter-spacing: 0.08em; }
.dia b { font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; }
.dia span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---- opciones de compra flexlates ---- */
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.opcion { position: relative; border-radius: 28px; padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.opcion.mensual { background: var(--bg-soft); border: 1px solid rgba(225, 20, 108, 0.14); box-shadow: var(--shadow); }
.opcion.trimestral { border: 1.5px solid rgba(225, 20, 108, 0.3); box-shadow: 0 24px 60px rgba(225, 20, 108, 0.1); }
.opcion .nombre { font-family: var(--pixel); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }
.opcion .badge-top { position: absolute; top: -14px; left: 28px; }
.opcion .abajo { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---- pasos ---- */
.pasos { display: flex; flex-direction: column; gap: 14px; }
.paso { display: flex; gap: 14px; align-items: flex-start; }
.paso .n { font-family: var(--pixel); font-size: 10px; color: var(--pink); margin-top: 3px; flex-shrink: 0; }
.paso p { font-size: 14.5px; line-height: 1.5; }

/* ---- faq (AEO) ---- */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 0; font-size: 15.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--pixel); font-size: 13px; color: var(--pink); }
.faq details[open] summary::after { content: '–'; }
.faq .a { padding: 0 0 17px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 640px; }

/* ---- blog ---- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.post-card { display: flex; flex-direction: column; gap: 12px; }
.post-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 18px; }
.post-card h3 { font-size: 19px; line-height: 1.25; }
.post-card h3 a { color: var(--ink); } .post-card h3 a:hover { color: var(--pink); }
.post-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.post-meta { font-family: var(--pixel); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.article { max-width: 720px; }
.article .cuerpo { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.article .cuerpo h2 { font-size: 32px; margin-top: 12px; }
.article .cuerpo p, .article .cuerpo li { font-size: 15.5px; line-height: 1.7; color: #3d3742; }
.article .cuerpo ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 14px clamp(22px, 4vw, 56px); border-bottom: 1px solid var(--hair); }
.crumbs .sep { color: var(--pink); }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .num { margin-left: auto; font-family: var(--pixel); font-size: 9px; text-transform: uppercase; color: var(--pink); }

/* ---- cierre + footer ---- */
.cierre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(44px, 6vw, 72px) clamp(22px, 4vw, 56px); border-top: 1px solid var(--hair); }
.cierre .lead { max-width: 440px; }
.footer { border-top: 1px solid var(--hair); padding: 26px clamp(22px, 4vw, 56px) 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer a { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.footer a:hover { color: var(--ink); }

/* ---- whatsapp flotante ---- */
.float-wa { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 9px; background: #25d366; color: #fff; border-radius: 999px; padding: 14px 20px; font-size: 14px; font-weight: 700; text-transform: lowercase; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4); transition: transform 0.18s var(--ease), box-shadow 0.25s; }
.float-wa:hover { transform: translateY(-3px) scale(1.04); color: #fff; box-shadow: 0 20px 44px rgba(37, 211, 102, 0.5); }
.float-wa svg { flex-shrink: 0; }
@media (max-width: 900px) { .float-wa { padding: 14px; } .float-wa .txt { display: none; } }

/* ---- topbar + menú móvil ---- */
.topbar { display: none; }
.menu-movil { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open .menu-movil { display: flex; }

@media (max-width: 900px) {
  .layout { display: block; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: rgba(251, 248, 244, 0.92); backdrop-filter: blur(12px); z-index: 40; }
  .topbar .acts { display: flex; align-items: center; gap: 12px; }
  .burger { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: none; border: none; cursor: pointer; }
  .burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 999px; }
  .burger span:last-child { width: 13px; background: var(--pink); }
  .menu-movil { position: fixed; inset: 0; background: var(--bg); z-index: 60; flex-direction: column; padding: 0 20px 26px; overflow-y: auto; }
  .menu-movil .top { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
  .menu-movil .cerrar { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); padding: 6px; }
  .mm-links { display: flex; flex-direction: column; margin-top: 8px; }
  .mm-links a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair-2); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
  .mm-links a.active { color: var(--pink); }
  .mm-links .num { font-family: var(--pixel); font-size: 10px; color: var(--pink); flex-shrink: 0; }
  .mm-thumbs { display: flex; gap: 10px; margin-top: 20px; }
  .mm-thumbs a { position: relative; flex: 1; }
  .mm-thumbs img { display: block; width: 100%; height: 72px; object-fit: cover; border-radius: 14px; }
  .mm-thumbs span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; font-weight: 600; color: #fff; text-transform: lowercase; padding: 16px 6px 5px; background: linear-gradient(180deg, transparent, rgba(23, 20, 26, 0.75) 75%); text-align: center; border-radius: 0 0 14px 14px; }
  .mm-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
  .mm-foot .ubi { font-family: var(--pixel); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }

  .slide.on { grid-template-columns: 1fr; }
  .slide .photo-wrap { order: -1; }
  .photo { height: 250px; }
  .float-card.bl { left: 12px; }
  .slide-ctas { width: 100%; } .slide-ctas .btn-pink { flex: 1; }
  .serv-grid { grid-template-columns: 1fr; gap: 0; }
  .serv { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--hair); padding: 14px 0; gap: 14px; }
  .serv img { width: 76px; height: 60px; flex-shrink: 0; }
  .serv .grp { display: flex; flex-direction: column; gap: 3px; flex: 1; }
  .serv:last-child { border-bottom: none; }
  .split, .split-divided { grid-template-columns: 1fr; }
  .split-3 { grid-template-columns: 1fr; }
  .split-divided > div:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--hair); padding-bottom: 24px; }
  .split-divided > div:last-child { padding-left: 0; padding-top: 24px; }
  .posts { grid-template-columns: 1fr; }
  .clase-row { flex-wrap: wrap; padding: 20px; gap: 14px; }
  .clase-row.conimg { padding: 22px 20px; }
  .opciones { grid-template-columns: 1fr; }
  .dias { grid-template-columns: 1fr; }
  .slide.on { min-height: 0; }
  .hero h1 { min-height: 0; }
  .hero .slide-copy .lead { min-height: 0; }
  .clase-row .fecha { width: 64px; padding: 9px 4px; }
  .clase-row .fecha b { font-size: 22px; }
  .clase-row .info .n { font-size: 17px; }
  .clase-row .info .d { font-size: 14px; }
  .panel .badge-top { left: 22px; }
  .btn { width: 100%; }
  .btn-sm, .topbar .btn, .carrusel-nav .btn { width: auto; }
}

/* ============ [E] sesión nocturna: lead magnet, quiz, calc, reseñas, retiro, propuesta ============ */

/* F47 · lead magnet */
.lead-magnet { background: var(--ink); color: var(--bg); border-radius: 30px; padding: clamp(26px, 3.4vw, 46px); position: relative; overflow: hidden; }
.lead-magnet::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(225, 20, 108, 0.35); filter: blur(10px); }
.lead-magnet .kick { color: #d3dc2a; }
.lead-magnet .lead { color: rgba(251, 248, 244, 0.75); }
.lead-magnet h2 .accent, .lead-magnet .accent { color: #f7a8c9; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; position: relative; z-index: 1; }
.lead-form input { flex: 1 1 220px; border: 1px solid rgba(251, 248, 244, 0.25); background: rgba(251, 248, 244, 0.08); color: var(--bg); border-radius: 999px; padding: 14px 20px; font-family: var(--sans); font-size: 15px; outline: none; }
.lead-form input::placeholder { color: rgba(251, 248, 244, 0.45); }
.lead-form input:focus { border-color: var(--pink); }
.lead-magnet .fine { color: rgba(251, 248, 244, 0.55); }
.lead-magnet .lead-ok { font-size: 14.5px; color: #d3dc2a; font-weight: 600; }
.lead-magnet .lead-ok a { color: #d3dc2a; }

/* F43 · quiz */
.quiz { margin-top: 26px; background: var(--bg-soft); border: 1px solid var(--hair); border-radius: 30px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); }
.quiz .q h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 10px 0 18px; }
.quiz .ops { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.quiz .ops button { text-align: left; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--hair-2); border-radius: 16px; padding: 15px 19px; cursor: pointer; transition: all 0.18s var(--ease); }
.quiz .ops button:hover { border-color: var(--pink); background: var(--tint); transform: translateX(4px); }
.quiz .resultado h2 { color: var(--pink-deep); }

/* F44 · calculadora */
.calc { background: #fff; border: 1px solid var(--hair); border-radius: 30px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.calc label { font-weight: 600; font-size: 16px; }
.calc-ctrl { display: flex; align-items: center; gap: 18px; }
.calc-ctrl input[type='range'] { flex: 1; max-width: 420px; accent-color: var(--pink); height: 6px; }
.calc-ctrl b { font-size: 30px; min-width: 36px; text-align: center; color: var(--pink); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.calc-card { border: 1px solid var(--hair); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; background: var(--bg); }
.calc-card .t { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.calc-card b { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.calc-card .s { font-size: 12.5px; color: var(--muted); }
.calc-card.rosa { background: var(--tint); border-color: rgba(225, 20, 108, 0.25); }
.calc-card.rosa b { color: var(--pink-deep); }
.calc-card.lima { background: #f4f6c8; border-color: rgba(160, 163, 26, 0.35); }
.calc-card.lima b { color: #6b6e12; }

/* F41 · reseñas */
.resenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.resena { margin: 0; background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.resena .estrellas { color: var(--pink); letter-spacing: 2px; font-size: 14px; }
.resena blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.resena figcaption { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* F46 · contador de campos */
.campos-chip { display: inline-block; margin-left: 8px; background: #f4f6c8; color: #6b6e12; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.campos-chip.pocos { background: var(--tint); color: var(--pink-deep); }
.campos-chip.lleno { background: var(--ink); color: var(--bg); }

/* F49 · propuesta imprimible */
.prop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.prop-fecha { font-size: 13px; color: var(--muted); }
.prop-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 34px; border-top: 1px solid var(--hair-2); padding-top: 20px; font-size: 13.5px; line-height: 1.6; }
[contenteditable='true'] { outline: none; border-bottom: 1px dashed rgba(225, 20, 108, 0.4); }
@media print {
  .topbar, .sidebar, .float-wa, .menu-movil, .footer, .no-print, .ticker { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
  [contenteditable='true'] { border-bottom: none; }
}

/* ============ [auditoría 27-ago] jerarquía, dos frases, 1:1 sin foto ============ */

/* #7 · la fórmula del título queda para 2-3 secciones; el resto usa .plain */
h2.plain { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.01em; }

/* #1 · las dos frases que separan el club del siguiente paso */
.dos-frases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.frase { border: 1px solid var(--hair-2); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; background: #fff; }
.frase .tag { align-self: flex-start; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.frase .tag.lima { background: #f4f6c8; color: #6b6e12; }
.frase .tag.rosa { background: var(--tint); color: var(--pink-deep); }
.frase p { margin: 0; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.5; }
@media (max-width: 720px) { .dos-frases { grid-template-columns: 1fr; } }

/* #3 · panel del 1:1 mientras llega la foto real de Kat */
.panel-aplicacion { background: var(--bg-soft); border: 1px solid var(--hair); border-radius: 26px; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); align-self: start; }

/* #9 · las tarjetas de día son visibles por defecto; el JS agrega .pre y las revela
   (antes arrancaban en opacity:0 y sin observer solo se veía la primera) */
.dia { opacity: 1; transform: none; }
.dia.pre { opacity: 0; transform: translateY(16px); }

/* ============ [28-ago] hero→club, los dos clubes con foto real, preview de la app ============ */

/* qué es el club: los dos clubes */
.club-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.club-card { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; border: 1px solid var(--hair-2); background: var(--bg-soft); box-shadow: var(--shadow); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); color: var(--ink); text-decoration: none; }
.club-card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(23, 20, 26, 0.18); }
.club-card img { width: 100%; height: clamp(190px, 22vw, 300px); object-fit: cover; display: block; }
.club-info { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 5px; }
.club-info b { font-size: clamp(18px, 2vw, 24px); text-transform: uppercase; letter-spacing: 0.02em; }
.club-info > span:last-child { font-size: 13.5px; color: var(--muted); }
.ctag { align-self: flex-start; font-family: var(--pixel); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.ctag.lima { background: #f4f6c8; color: #6b6e12; }
.ctag.rosa { background: var(--tint); color: var(--pink-deep); }
.ctag.crema { background: var(--bg-soft); border: 1px solid var(--hair-2); color: var(--muted); }
.club-virtual { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--hair-2); border-radius: 18px; padding: 13px 18px; margin: 14px 0 18px; font-size: 14.5px; }
.club-virtual .ctag { align-self: center; }
.club-virtual a { color: var(--pink); font-weight: 700; text-decoration: none; margin-left: auto; }
@media (max-width: 700px) { .club-duo { grid-template-columns: 1fr; } .club-virtual a { margin-left: 0; } }

/* preview de la app: macbook + iphone con capturas reales */
.app-show { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
.devices { position: relative; padding-bottom: 9%; }
.macbook { width: 92%; }
.mb-screen { background: #17141a; border-radius: 16px 16px 0 0; padding: 12px 12px 16px; box-shadow: 0 24px 60px rgba(23, 20, 26, 0.25); }
.mb-screen img { width: 100%; border-radius: 6px; display: block; }
.mb-base { height: 13px; background: linear-gradient(#dbd8d0, #b7b4ac); border-radius: 0 0 14px 14px; position: relative; }
.mb-base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 110px; height: 6px; background: #a3a098; border-radius: 0 0 8px 8px; }
.iphone { position: absolute; right: 0; bottom: 0; width: 27%; min-width: 122px; background: #17141a; border-radius: clamp(22px, 2.6vw, 34px); padding: 8px; box-shadow: 0 30px 60px rgba(23, 20, 26, 0.35); }
.iphone::before { content: ''; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 32%; height: 12px; background: #17141a; border-radius: 999px; z-index: 2; }
.iphone img { width: 100%; border-radius: clamp(15px, 2vw, 26px); display: block; }
.app-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.app-mini { display: flex; align-items: center; gap: 14px; border: 1px solid var(--hair); border-radius: 18px; padding: 10px 14px; background: var(--card, #fff); }
.app-mini img { width: 74px; border-radius: 10px; display: block; }
.app-mini .fine { max-width: 30ch; }
@media (max-width: 820px) { .app-show { grid-template-columns: 1fr; } .devices { padding-bottom: 12%; } }

/* Demo animada de reserva, compuesta y reproducida con HyperFrames. */
.hf-reserva-wrap { display:grid; gap:18px; }
.hf-reserva-wrap hyperframes-player { display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--hair); border-radius:30px; background:var(--bg); box-shadow:0 28px 70px rgba(23,20,26,.16); }
.hf-reserva-wrap .hf-reserva-mobile { display:none; }
.hf-reserva-fallback { display:block; width:100%; border-radius:30px; }
.hf-reserva-pasos { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hf-reserva-pasos > div { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; padding:14px 15px; border:1px solid var(--hair); border-radius:18px; background:#fff; }
.hf-reserva-pasos > div > span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--lime); font-family:var(--pixel); font-size:10px; font-weight:700; }
.hf-reserva-pasos p,.hf-reserva-pasos b,.hf-reserva-pasos small { display:block; margin:0; }
.hf-reserva-pasos b { font-size:15px; }
.hf-reserva-pasos small { margin-top:2px; color:var(--muted); font-size:11px; line-height:1.3; }
.hf-reserva-cta { width:min(480px,100%); justify-self:center; }
@media (max-width:620px) {
  .hf-reserva-wrap { margin:0 -10px; }
  .hf-reserva-wrap .hf-reserva-desktop { display:none; }
  .hf-reserva-wrap .hf-reserva-mobile { display:block; aspect-ratio:9/16; border-radius:28px; }
  .hf-reserva-pasos { grid-template-columns:1fr; padding:0 10px; }
  .hf-reserva-cta { width:calc(100% - 20px); }
}

/* ============================================================
   [28-ago · v2] LIQUID GLASS · vibe iOS 26 (repo archisvaze/liquid-glass)
   Base para TODOS los navegadores: blur + saturate + tinte + rim de luz.
   La refracción SVG (feDisplacementMap) entra solo en Chromium desktop
   via body.lg-svg (la agrega site.js). Los iPhone ven el glass limpio.
   ============================================================ */

:root {
  --lg-w: 232px;
  --lg-mini: 68px;
  --lg-gap: 16px;
  --lg-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.30));
  --lg-border: rgba(255, 255, 255, 0.75);
  --lg-shadow: 0 22px 55px rgba(23, 20, 26, 0.16);
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -22px 34px -26px rgba(225, 20, 108, 0.22), inset 1px 0 0 rgba(255, 255, 255, 0.45);
}

/* ambiente: manchas de color fijas detrás del contenido, para que el vidrio refracte algo */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 8% -4%, rgba(225, 20, 108, 0.10), transparent 62%),
    radial-gradient(640px 460px at 96% 12%, rgba(211, 220, 42, 0.14), transparent 60%),
    radial-gradient(700px 520px at 4% 88%, rgba(211, 220, 42, 0.10), transparent 62%),
    radial-gradient(560px 480px at 90% 92%, rgba(225, 20, 108, 0.08), transparent 60%);
}

/* ---- la sidebar: panel flotante de vidrio, redondeado y retraíble ---- */
@media (min-width: 901px) {
  .layout { display: block; }
  .sidebar {
    position: fixed; top: var(--lg-gap); left: var(--lg-gap); bottom: var(--lg-gap);
    width: var(--lg-w); height: auto; z-index: 55;
    border-right: none; border-radius: 30px;
    padding: 24px 26px 26px;
    background: var(--lg-bg);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid var(--lg-border);
    box-shadow: var(--lg-shadow), var(--lg-rim);
    overflow: hidden;
    transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1), padding 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* brillo especular arriba-izquierda, como el demo */
  .sidebar::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 60% at 12% 0%, rgba(255, 255, 255, 0.55), transparent 46%);
    mix-blend-mode: soft-light;
  }
  .main { margin-left: calc(var(--lg-w) + var(--lg-gap) * 2); transition: margin-left 0.45s cubic-bezier(0.32, 0.72, 0, 1); }

  .lado-full { display: flex; flex-direction: column; justify-content: space-between; height: 100%; opacity: 1; transition: opacity 0.22s ease 0.18s; }
  .lg-toggle {
    position: absolute; top: 14px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.45); color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s;
  }
  .lg-toggle:hover { background: rgba(255, 255, 255, 0.8); color: var(--ink); }
  .lado-mini {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding-top: 58px; background: none; border: none; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .lado-mini .iso {
    width: 40px; height: 40px; border-radius: 13px; background: var(--pink); color: #fff;
    font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); letter-spacing: 0.02em; box-shadow: var(--shadow-pink);
  }
  .lado-mini .iso span { color: var(--lime); }
  .lado-mini .vert {
    writing-mode: vertical-rl; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--muted);
  }
  /* estado retraído (html.side-mini lo pone un script inline antes del primer paint) */
  html.side-mini .sidebar { width: var(--lg-mini); padding: 24px 10px 26px; }
  html.side-mini .main { margin-left: calc(var(--lg-mini) + var(--lg-gap) * 2); }
  html.side-mini .lado-full { opacity: 0; pointer-events: none; transition-delay: 0s; }
  html.side-mini .lado-mini { opacity: 1; pointer-events: auto; transition-delay: 0.16s; }
  html.side-mini .lg-toggle { transform: rotate(180deg); right: 19px; }
}
@media (min-width: 901px) and (max-width: 1120px) { :root { --lg-w: 204px; } .sidebar { padding: 24px 20px 26px; } }

/* ---- navbar móvil: píldora de vidrio flotante (vibe navbar de CRAIA) ---- */
@media (max-width: 900px) {
  .topbar {
    position: fixed; top: 10px; left: 12px; right: 12px; z-index: 45;
    border: 1px solid var(--lg-border); border-bottom: 1px solid var(--lg-border);
    border-radius: 999px; padding: 10px 12px 10px 20px;
    background: var(--lg-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.7);
    backdrop-filter: blur(24px) saturate(1.7);
    box-shadow: 0 12px 34px rgba(23, 20, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
  .main { padding-top: 68px; }
  .menu-movil {
    inset: 10px; border-radius: 28px; z-index: 60;
    background: rgba(23, 20, 26, 0.78); color: var(--bg);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .menu-movil .wordmark .dot, .menu-movil .cerrar { color: var(--bg); }
  .mm-links a { color: rgba(251, 248, 244, 0.85); }
  .mm-links a.active, .mm-links a:hover { color: #f7a8c9; }
  .mm-links .num { color: rgba(251, 248, 244, 0.4); }
}

/* refracción líquida real (solo Chromium desktop, body.lg-svg lo activa site.js) */
body.lg-svg .sidebar {
  -webkit-backdrop-filter: url(#lg-dist) blur(2px) saturate(1.7);
  backdrop-filter: url(#lg-dist) blur(2px) saturate(1.7);
}

@media (prefers-reduced-motion: reduce) { .sidebar, .main, .lg-toggle, .lado-full, .lado-mini { transition: none; } }
@media print { .main { margin-left: 0 !important; padding-top: 0 !important; } body::before { display: none; } }

/* ---- club cards v2: cuándo, dónde exacto y cómo llegar ---- */
.club-info .lugar { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--muted); }
.club-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.club-acciones .btn { padding: 9px 16px; font-size: 12px; }

/* ============ [28-ago · v2.1] refinamientos dictados por Juan ============ */

/* doble CTA del hero: pregunta gancho + botón al método */
.cta-doble { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--lg-border); border-radius: 18px; padding: 13px 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cta-doble span { font-size: 13.5px; font-weight: 600; color: var(--pink-deep); }
.cta-doble .btn { padding: 10px 18px; font-size: 12.5px; }

/* rail retraído: un icono de vidrio por sección, con entradita escalonada */
.lado-mini { padding-top: 54px; gap: 10px; }
.lado-mini .vert { display: none; }
.lado-mini .iso { margin-bottom: 6px; text-decoration: none; }
.lado-mini a:not(.iso) {
  width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.18s var(--ease), color 0.15s, background 0.15s;
  opacity: 0; transform: translateX(-10px);
}
.lado-mini a:not(.iso) svg { width: 19px; height: 19px; }
.lado-mini a:not(.iso):hover { color: var(--pink); background: rgba(255, 255, 255, 0.85); transform: scale(1.1); }
.lado-mini a.active { color: var(--pink); background: var(--tint); border-color: rgba(225, 20, 108, 0.35); }
html.side-mini .lado-mini a:not(.iso) { opacity: 1; transform: none; transition: opacity 0.3s ease calc(0.12s + var(--i) * 0.05s), transform 0.3s var(--ease) calc(0.12s + var(--i) * 0.05s), color 0.15s, background 0.15s; }
@media (prefers-reduced-motion: reduce) { .lado-mini a:not(.iso) { opacity: 1; transform: none; transition: none; } }

/* el plan en grande dentro de las tarjetas del método */
.plan-big { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; margin: -4px 0 2px; }
.opcion.trimestral .plan-big { color: var(--pink-deep); }

/* sede: imagen entera con panel de vidrio encima */
.club-card.entera { position: relative; border: none; background: none; overflow: hidden; border-radius: 24px; box-shadow: var(--lg-shadow); }
.club-card.entera img { width: 100%; height: clamp(300px, 30vw, 400px); object-fit: cover; display: block; }
.club-vidrio {
  position: absolute; left: 12px; right: 12px; bottom: 12px; border-radius: 18px; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 26px rgba(23, 20, 26, 0.18);
}
.club-vidrio b { font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; }
.club-vidrio .lugar { font-size: 12.5px; color: var(--ink); opacity: 0.75; }
.club-acciones { margin-top: 10px; }

/* la pestaña de cada sede: mapa + punto de encuentro + apps */
.sede-plus { margin-top: 10px; border: 1px solid var(--hair2); border-radius: 18px; background: var(--card); overflow: hidden; }
.sede-plus summary { list-style: none; cursor: pointer; padding: 13px 17px; font-weight: 700; font-size: 13.5px; color: var(--pink-deep); display: flex; align-items: center; gap: 6px; }
.sede-plus summary::-webkit-details-marker { display: none; }
.sede-plus summary::after { content: '˅'; margin-left: auto; color: var(--muted); transition: transform 0.25s var(--ease); }
.sede-plus[open] summary::after { transform: rotate(180deg); }
.sede-caja { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.sede-caja iframe { width: 100%; height: 210px; border: none; border-radius: 14px; display: block; }
.sede-caja p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.sede-caja p b, .sede-caja p a { color: var(--ink); }
.sede-apps { display: flex; gap: 8px; flex-wrap: wrap; }
.sede-apps .btn { padding: 8px 14px; font-size: 11.5px; }

/* iPhone realista (proporción y detalles de un iPhone Pro real, pantalla 390×844) */
.iphone {
  border-radius: 44px; padding: 9px;
  background: linear-gradient(145deg, #3a3a3e 0%, #1b1b1e 40%, #2c2c30 100%);
  box-shadow: 0 34px 70px rgba(23, 20, 26, 0.4), inset 0 0 0 2px #0d0d0f, inset 0 0 0 3.5px rgba(255, 255, 255, 0.16);
}
.iphone img { border-radius: 36px; }
.iphone::before {
  content: ''; position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
  width: 27%; height: 20px; background: #000; border-radius: 999px; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.iphone::after {
  content: ''; position: absolute; right: -2.5px; top: 26%; width: 2.5px; height: 13%;
  background: linear-gradient(#4a4a4e, #232326); border-radius: 0 3px 3px 0;
}

/* guía paso a paso de cada sede */
.guia-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.guia-pasos figure { margin: 0; background: var(--bg); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.guia-pasos img { width: 100%; height: 130px; object-fit: cover; display: block; }
.guia-pasos figcaption { padding: 9px 12px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.guia-pasos figcaption b { color: var(--pink); font-family: var(--pixel); font-size: 9px; margin-right: 3px; }

/* ============ [E8 · 28-ago] hero editorial estilo VitalityVibe/Skylar: información ordenada,
   titular gigante con acento serif y pastillita de foto, foto real 4K con datos en vidrio ============ */

.hero-vv { padding: clamp(10px, 3vh, 34px) clamp(22px, 4vw, 56px) 6px; }
.hv-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(20px, 3.4vh, 34px); }
.hv-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--lg-bg); border: 1px solid var(--lg-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border-radius: 999px; padding: 9px 17px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink);
  box-shadow: 0 10px 26px rgba(23, 20, 26, 0.08);
}
.hv-chip:first-child { transform: rotate(-1.4deg); }
.hv-chip:last-child { transform: rotate(1.1deg); }
.hv-chip .pto { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(225, 20, 108, 0.18); }
.hv-titulo {
  margin: 0 0 clamp(18px, 3vh, 30px); font-size: clamp(42px, 7.2vw, 100px);
  line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; text-transform: lowercase;
}
.hv-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); letter-spacing: -0.01em; }
.hv-pill { display: inline-block; width: 1.55em; height: 0.82em; margin: 0 0.14em; vertical-align: -0.09em; border-radius: 999px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(23, 20, 26, 0.18); transform: rotate(-3deg); }
.hv-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vh, 28px); }
.hv-lead { margin: 0; max-width: 470px; font-size: clamp(14.5px, 1.4vw, 17px); line-height: 1.6; color: var(--muted); }
.hv-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hv-media { position: relative; margin: 0; border-radius: 30px; overflow: hidden; box-shadow: 0 40px 90px rgba(23, 20, 26, 0.26); border: 1px solid rgba(255, 255, 255, 0.55); }
.hv-media > img { width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; }
.hv-datos { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hv-dato {
  background: rgba(20, 18, 24, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 18px; padding: 13px 17px;
  color: #fff; display: flex; flex-direction: column; gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hv-dato b { font-size: clamp(17px, 1.8vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hv-dato span { font-size: 11.5px; line-height: 1.35; opacity: 0.82; }
.hv-dato.accion { background: rgba(225, 20, 108, 0.72); border-color: rgba(255, 255, 255, 0.5); transition: background 0.2s, transform 0.2s; }
.hv-dato.accion:hover { background: rgba(225, 20, 108, 0.88); transform: translateY(-2px); color: #fff; }
@media (max-width: 900px) {
  .hv-media > img { aspect-ratio: 4 / 5; object-position: 44% 60%; }
  .hv-datos { grid-template-columns: 1fr 1fr; gap: 8px; left: 10px; right: 10px; bottom: 10px; }
  .hv-dato { padding: 11px 13px; border-radius: 15px; }
  .hv-dato span { font-size: 10.5px; }
  .hv-titulo { font-size: clamp(38px, 11.5vw, 54px); }
  .hv-pill { border-width: 2px; }
}

/* ============ [E9 · 28-ago] hero cine: el corte de Palmier de Juan a pantalla completa ============ */

/* el home vuelve a ser full-bleed: el hero corre debajo de la navbar de vidrio */
@media (min-width: 901px) {
  body:has(.hero-cine) .main { margin-left: 0; }
  body:has(.hero-cine) .main > *:not(.hero-cine) { margin-left: calc(var(--lg-w) + var(--lg-gap) * 2); }
  html.side-mini body:has(.hero-cine) .main > *:not(.hero-cine) { margin-left: calc(var(--lg-mini) + var(--lg-gap) * 2); }
}
@media (max-width: 900px) { body:has(.hero-cine) .main { padding-top: 0; } }

.hero-cine { position: relative; min-height: 100dvh; overflow: hidden; background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.hc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 26, 0.5) 0%, rgba(23, 20, 26, 0.12) 32%, rgba(23, 20, 26, 0.06) 55%, rgba(23, 20, 26, 0.58) 100%); }
.hc-arriba { position: relative; z-index: 2; text-align: center; padding: clamp(88px, 13vh, 152px) 20px 0; color: #fff; }
.hc-titulo {
  margin: 0; font-size: clamp(56px, 10.5vw, 164px); line-height: 0.92; font-weight: 700;
  letter-spacing: -0.045em; text-transform: lowercase;
  text-shadow: 0 12px 46px rgba(23, 20, 26, 0.55), 0 3px 12px rgba(23, 20, 26, 0.4);
}
.hc-titulo .fx { color: var(--pink); }
.hc-titulo .lb { color: var(--lime); }
.hc-sub { margin: 18px auto 0; max-width: 960px; font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; line-height: 1.45; text-shadow: 0 4px 20px rgba(23, 20, 26, 0.55); }
.hc-sub .hl {
  display: inline-block; font-style: normal; font-weight: 800; font-size: 1.22em;
  background: var(--lime); color: var(--ink); padding: 1px 14px 3px; border-radius: 12px;
  transform: rotate(-1.6deg); text-shadow: none; box-shadow: 0 10px 26px rgba(23, 20, 26, 0.3);
}
.hc-stats { display: flex; gap: clamp(30px, 5.5vw, 84px); justify-content: center; flex-wrap: wrap; color: #fff; text-align: left; padding-bottom: 4px; }
.hc-stat b { display: block; font-size: clamp(27px, 3.1vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 6px 24px rgba(23, 20, 26, 0.55); }
.hc-stat span { display: block; margin-top: 7px; font-family: var(--pixel); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.88; text-shadow: 0 3px 12px rgba(23, 20, 26, 0.6); }
.hc-abajo { position: relative; z-index: 2; padding: 0 clamp(14px, 3vw, 40px) clamp(16px, 3.4vh, 34px); display: flex; flex-direction: column; gap: 14px; }
.hc-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 24px auto 28px; }
.btn-vidrio {
  background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-vidrio:hover { background: rgba(255, 255, 255, 0.34); color: #fff; }
.hv-datos.enhero { position: static; width: 100%; max-width: 1120px; margin: 0 auto; }
@media (min-width: 901px) {
  .hero-cine .hc-arriba, .hero-cine .hc-abajo { margin-left: calc(var(--lg-w) + var(--lg-gap) * 2); transition: margin-left 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
  html.side-mini .hero-cine .hc-arriba, html.side-mini .hero-cine .hc-abajo { margin-left: calc(var(--lg-mini) + var(--lg-gap) * 2); }
}
@media (max-width: 900px) {
  .hc-titulo { font-size: clamp(46px, 15.5vw, 76px); }
  .hc-sub { font-size: 18px; max-width: 380px; }
  .hc-arriba { padding-top: 96px; }
  .hv-datos.enhero { grid-template-columns: 1fr 1fr; }
  .hc-ctas { grid-template-columns: 1fr; max-width: 380px; gap: 10px; margin-top: 20px; }
}

/* títulos con vida: más grandes, con espiral, burbuja o circulado en los 3 colores */
h2.plain.grande { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02; }
.deco-espiral { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12'%3E%3Cpath d='M3 8 q11-9 22 0 t22 0 t22 0 t22 0 t22 0 t22 0' fill='none' stroke='%23d3dc2a' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") bottom left / 100% 12px no-repeat; padding-bottom: 16px; }
.deco-burbuja { position: relative; z-index: 1; white-space: nowrap; }
.deco-burbuja::before { content: ''; position: absolute; inset: -2px -16px -6px; background: var(--tint); border-radius: 999px; z-index: -1; transform: rotate(-1.2deg); }
.deco-burbuja.lima::before { background: rgba(211, 220, 42, 0.28); }
.deco-circulo { position: relative; white-space: nowrap; }
.deco-circulo::after { content: ''; position: absolute; inset: -8px -18px -10px; border: 3.5px solid var(--pink); border-radius: 50%; transform: rotate(-3deg); pointer-events: none; }

/* hooks del club + chip de instagram */
.hooks-club { display: flex; gap: 10px; flex-wrap: wrap; }
.hook.lima { background: rgba(211, 220, 42, 0.25); color: var(--lime-ink); }
.ig-chip { display: inline-flex; align-items: baseline; gap: 8px; background: var(--card); border: 1px solid var(--hair2); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; color: var(--muted); box-shadow: var(--shadow); }
.ig-chip .n { font-size: 22px; font-weight: 700; color: var(--pink); letter-spacing: -0.02em; }

/* sedes gigantes: una debajo de la otra, crecen al entrar en pantalla, guía adentro */
.club-duo.grande { grid-template-columns: 1fr; max-width: 920px; gap: 30px; }
.club-duo.grande .club-card.entera img { height: clamp(400px, 56vh, 620px); }
.crece { transform: scale(0.93); opacity: 0.8; transition: transform 0.8s var(--ease), opacity 0.8s var(--ease); }
.crece.crecio { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .crece { transform: none; opacity: 1; transition: none; } }

.sede-plus.dentro { position: absolute; top: 12px; left: 12px; right: 12px; bottom: auto; z-index: 6; margin: 0; border: none; background: none; border-radius: 0; overflow: visible; }
.sede-plus.dentro summary { width: max-content; max-width: 100%; background: rgba(23, 20, 26, 0.66); color: var(--bg); border-radius: 999px; padding: 10px 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.25); }
.sede-plus.dentro summary::after { color: rgba(251, 248, 244, 0.7); margin-left: 10px; }
.sede-plus.dentro[open] { bottom: 12px; display: flex; flex-direction: column; }
.sede-plus.dentro[open] summary { margin-bottom: 8px; flex-shrink: 0; }
.sede-plus.dentro .sede-caja { display: none; }
.sede-plus.dentro[open] .sede-caja { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow: auto; background: rgba(251, 248, 244, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 20px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.8); }
.sede-plus.dentro .sede-caja iframe { flex-shrink: 0; height: 170px; }

/* ordenamiento ultra detallado: cada sección del home lleva su número + etiqueta + línea */
.sec-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-eyebrow .num { font-family: var(--pixel); font-size: 10px; color: var(--pink); background: var(--tint); border-radius: 999px; padding: 5px 10px; letter-spacing: 0.1em; }
.sec-eyebrow .lab { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sec-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--hair-2); }

/* ============ [E11 · 28-ago] layering VitalityVibe: dupla de caminos, sedes en dos columnas
   gigantes y paneles de sección alternando rosa / verde / crema ============ */

.dos-caminos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
.camino { border-radius: 32px; padding: clamp(26px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.camino.lima { background: #f2f4c4; }
.camino.rosa { background: var(--tint); }
.camino h3 { margin: 0; font-size: clamp(30px, 3.6vw, 54px); line-height: 0.98; letter-spacing: -0.03em; text-transform: lowercase; }
.camino p { margin: 0; color: var(--muted); font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.55; max-width: 460px; }
.camino .btn { margin-top: 6px; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: #2a2530; color: var(--bg); }

/* las dos sedes como columnas gigantes lado a lado */
.club-duo.grande { grid-template-columns: 1fr 1fr; max-width: none; gap: clamp(14px, 1.8vw, 26px); }
.club-duo.grande .club-card.entera img { height: clamp(440px, 68vh, 720px); }

/* paneles de sección con los tres fondos de la marca */
.sec.panel { border-top: 0; border-radius: 36px; margin-top: clamp(10px, 1.6vw, 22px); margin-right: clamp(10px, 1.6vw, 22px); margin-bottom: clamp(10px, 1.6vw, 22px); }
.sec.panel.rosa { background: var(--tint); }
.sec.panel.verde { background: #f2f4c4; }
.sec.panel + .sec { border-top: 0; }
.sec.panel .sec-eyebrow .num { background: rgba(255, 255, 255, 0.7); }
.sec.panel.rosa .dia { background: #fff; }
.sec.panel .sec-eyebrow::after { background: rgba(23, 20, 26, 0.12); }

@media (max-width: 900px) {
  .dos-caminos { grid-template-columns: 1fr; }
  .club-duo.grande { grid-template-columns: 1fr; }
  .club-duo.grande .club-card.entera img { height: clamp(380px, 52vh, 540px); }
  .sec.panel { margin-left: 10px; margin-right: 10px; border-radius: 26px; }
  .hc-sub br { display: none; }
  .hc-stats { gap: 22px; }
}

/* ============================================================
   FOTOS REALES · sesión 28-ago con Kat
   Patrones para poblar el sitio con el archivo fotográfico.
   Densidad variable a propósito: unas secciones se invaden de
   fotos y otras respiran. Los nombres f-XXXX son el código del
   catálogo, para que Kat y el agente hablen el mismo idioma.
   ============================================================ */

/* tira full-bleed: rompe el ancho de la columna y desfila fotos */
.tira { margin: clamp(26px, 4vw, 48px) 0; position: relative; }
.tira-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tira-scroll::-webkit-scrollbar { height: 6px; }
.tira-scroll::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 99px; }
.tira-scroll figure { flex: 0 0 auto; scroll-snap-align: start; position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.tira-scroll img { display: block; height: clamp(190px, 22vw, 280px); width: auto; object-fit: cover; }
.tira-scroll figure.alta img { height: clamp(240px, 28vw, 350px); }
.tira-scroll figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; color: #fff; font-size: 12.5px; font-weight: 500; background: linear-gradient(transparent, rgba(23, 20, 26, 0.72)); }
.tira-lbl { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; }

/* mosaico irregular: unas grandes, unas altas, sin ritmo de formulario */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: clamp(20px, 3vw, 34px) 0; }
.mosaico figure { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); margin: 0; }
.mosaico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mosaico .w2 { grid-column: span 2; }
.mosaico .h2 { grid-row: span 2; }
.mosaico figure { min-height: 140px; }
.mosaico figure.h2 { min-height: 290px; }
.mosaico figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 9px; color: #fff; font-size: 12px; font-weight: 500; background: linear-gradient(transparent, rgba(23, 20, 26, 0.7)); }
@media (max-width: 720px) { .mosaico { grid-template-columns: repeat(2, 1fr); } .mosaico figure.h2 { min-height: 200px; } }

/* banda: una sola foto gigante que toma el ancho, con vidrio encima */
.banda { position: relative; border-radius: 32px; overflow: hidden; margin: clamp(22px, 3.4vw, 40px) 0; box-shadow: var(--shadow); }
.banda img { display: block; width: 100%; height: clamp(280px, 40vw, 480px); object-fit: cover; }
.banda .vidrio { position: absolute; left: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px); max-width: 560px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 24px; padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 8px; }
.banda .vidrio b { font-size: clamp(19px, 2.4vw, 26px); line-height: 1.15; }
.banda .vidrio p { font-size: 14.5px; color: var(--muted); margin: 0; }
.banda.alta img { height: clamp(340px, 52vw, 620px); }

/* duo: dos fotos con etiqueta, para contrastes (fuerza vs soltura) */
.duo-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 18px); margin: clamp(18px, 2.6vw, 30px) 0; }
.duo-fotos figure { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); margin: 0; }
.duo-fotos img { display: block; width: 100%; height: clamp(230px, 30vw, 380px); object-fit: cover; }
.duo-fotos figcaption { position: absolute; inset: auto 0 0 0; padding: 30px 16px 14px; color: #fff; background: linear-gradient(transparent, rgba(23, 20, 26, 0.8)); }
.duo-fotos figcaption b { display: block; font-size: 16px; margin-bottom: 3px; }
.duo-fotos figcaption span { font-size: 13px; opacity: 0.92; line-height: 1.4; }
@media (max-width: 620px) { .duo-fotos { grid-template-columns: 1fr; } }

/* foto suelta: una sola, ladeada, para romper la cuadrícula */
.foto-suelta { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); margin: 0; }
.foto-suelta img { display: block; width: 100%; height: clamp(220px, 26vw, 330px); object-fit: cover; }
.foto-suelta.ladeada { transform: rotate(-1.4deg); }
.foto-suelta.ladeada-der { transform: rotate(1.6deg); }

/* muro: pared densa de caritas, la "invasión" */
.muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; margin: clamp(20px, 3vw, 32px) 0; }
.muro img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.muro img:nth-child(4n) { border-radius: 999px; }

/* pasos con foto: los 4 movimientos del método */
.movs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(12px, 1.8vw, 20px); margin-top: clamp(18px, 2.6vw, 28px); }
.mov { background: #fff; border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.mov img { display: block; width: 100%; height: 172px; object-fit: cover; }
.mov .cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 7px; }
.mov .n { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.08em; color: var(--pink); text-transform: uppercase; }
.mov b { font-size: 19px; }
.mov p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* franja de fotos que sangra a los bordes de la sección */
.sangra { margin-left: calc(var(--pad-x, 0px) * -1); margin-right: calc(var(--pad-x, 0px) * -1); }

/* ============ [E12 · 28-ago noche] la ronda de integración: club por detrás de todo ============ */

/* el hero: flex rosa · lab lima · club en pastilla rosa (como el highlight de gratuito) */
.hc-titulo .pillclub {
  display: inline-block; background: var(--pink); color: #fff; padding: 0 0.2em 0.05em;
  border-radius: 0.2em; transform: rotate(-1.4deg); text-shadow: none;
  box-shadow: 0 14px 34px rgba(23, 20, 26, 0.35);
}

/* tiras full-bleed: site.js les quita el margen para que corran de borde a borde por
   detrás de la sidebar; .pan es el paneo automático (el contenido se clona en js) */
.tira { overflow: hidden; }
.tira.pan .tira-scroll { overflow: visible; width: max-content; gap: 0; animation: tira-pan var(--pan-dur, 60s) linear infinite; }
.tira.pan .tira-scroll figure { margin-right: 14px; flex-shrink: 0; }
.tira.pan:hover .tira-scroll { animation-play-state: paused; }
@keyframes tira-pan { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tira.pan .tira-scroll { animation: none; } }
.tira.pegada { margin-top: -6px; padding: 18px 0 6px; }

/* ── qué es el club, inmersivo: el muro de fotos detrás de TODO (sidebar incluida) ── */
.club-inmerso { position: relative; overflow: hidden; padding: clamp(40px, 6vh, 76px) 0 clamp(28px, 4vh, 48px); }
.ci-fondo { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; }
.ci-fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-velo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(251, 248, 244, 0.82) 14%, rgba(251, 248, 244, 0.62) 42%, rgba(251, 248, 244, 0.55) 70%, var(--bg) 100%); }
.ci-arriba, .ci-sedes, .ci-pie { position: relative; z-index: 2; padding-right: clamp(22px, 4vw, 56px); }
.ci-arriba { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: clamp(22px, 3.4vh, 38px); }
.ci-titulo { margin: 0; font-size: clamp(40px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.03em; }
.ci-lead { margin: 0; max-width: 620px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--ink); background: rgba(251, 248, 244, 0.55); border-radius: 16px; padding: 4px 8px 4px 0; }
.club-inmerso .hook { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.club-inmerso .sec-eyebrow::after { background: rgba(23, 20, 26, 0.2); }

/* las sedes XL: nombre gigante, micro-shading lima/rosa, toda la tarjeta lleva a su página */
.ci-sedes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); margin-bottom: clamp(18px, 2.6vh, 30px); }
.sede-xl { position: relative; display: block; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 70px rgba(23, 20, 26, 0.28); border: 1px solid rgba(255, 255, 255, 0.5); }
.sede-xl img { width: 100%; height: clamp(460px, 64vh, 700px); object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.sede-xl:hover img { transform: scale(1.045); }
.sede-xl .sx-velo { position: absolute; inset: 0; transition: opacity 0.3s; }
.sede-xl.lima .sx-velo { background: linear-gradient(180deg, rgba(211, 220, 42, 0.16) 0%, rgba(211, 220, 42, 0.05) 38%, rgba(23, 20, 26, 0.72) 100%); }
.sede-xl.rosa .sx-velo { background: linear-gradient(180deg, rgba(225, 20, 108, 0.16) 0%, rgba(225, 20, 108, 0.05) 38%, rgba(23, 20, 26, 0.72) 100%); }
.sx-txt { position: absolute; left: clamp(18px, 2.4vw, 34px); right: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2.4vh, 30px); display: flex; flex-direction: column; gap: 8px; color: #fff; }
.sx-dia { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.94; }
.sede-xl.lima .sx-dia { color: var(--lime); }
.sede-xl.rosa .sx-dia { color: #ffb1d3; }
.sx-nombre { font-size: clamp(40px, 4.8vw, 88px); font-weight: 700; line-height: 0.92; letter-spacing: -0.035em; text-transform: lowercase; text-shadow: 0 10px 34px rgba(23, 20, 26, 0.5); }
.sx-ir { font-size: 13px; font-weight: 700; opacity: 0.92; }
.sede-xl:hover .sx-ir { text-decoration: underline; }
.ci-pie { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ci-pie .club-virtual { margin: 0; flex: 1; min-width: 300px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(251, 248, 244, 0.82); }
.ci-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* la página propia de cada sede */
.sede-hero { position: relative; overflow: hidden; }
.sede-hero img { width: 100%; height: clamp(420px, 62vh, 640px); object-fit: cover; display: block; }
.sede-hero .sx-velo { position: absolute; inset: 0; }
.sede-hero.lima .sx-velo { background: linear-gradient(180deg, rgba(211, 220, 42, 0.14) 0%, rgba(23, 20, 26, 0.14) 40%, rgba(23, 20, 26, 0.7) 100%); }
.sede-hero.rosa .sx-velo { background: linear-gradient(180deg, rgba(225, 20, 108, 0.14) 0%, rgba(23, 20, 26, 0.14) 40%, rgba(23, 20, 26, 0.7) 100%); }
.sh-txt { position: absolute; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vh, 44px); display: flex; flex-direction: column; gap: 10px; color: #fff; }
.sh-txt .sx-nombre { font-size: clamp(48px, 7vw, 120px); }
.sh-punto { font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; opacity: 0.94; }
.sh-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sede-mapa iframe { width: 100%; height: clamp(240px, 34vh, 360px); border: 0; border-radius: 20px; display: block; }

/* el método, imponente y con menos texto */
.met-head { margin-bottom: clamp(18px, 3vh, 30px); }
.met-titulo { margin: 0; font-size: clamp(48px, 7.4vw, 122px); line-height: 0.94; letter-spacing: -0.04em; text-transform: lowercase; }
.met-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); }
.met-sub { margin: 10px 0 0; font-size: clamp(16px, 1.8vw, 23px); color: var(--muted); max-width: 640px; }
.met-sub b { color: var(--pink-deep); }

/* cómo reservar: los 3 pasos con la app al lado */
.pasos-reserva { display: flex; flex-direction: column; gap: 16px; }
.paso { display: flex; gap: 14px; align-items: flex-start; }
.paso .pnum { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--pink); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.paso b { font-size: clamp(16px, 1.5vw, 19px); }
.paso p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 380px; }

@media (max-width: 900px) {
  .ci-sedes { grid-template-columns: 1fr; }
  .sede-xl img { height: clamp(360px, 48vh, 480px); }
  .ci-arriba, .ci-sedes, .ci-pie { padding-left: 16px; padding-right: 16px; }
  .sx-nombre { font-size: clamp(44px, 12vw, 64px); }
  .sh-txt .sx-nombre { font-size: clamp(44px, 12vw, 68px); }
  .met-titulo { font-size: clamp(40px, 11vw, 58px); }
}
@media (min-width: 901px) {
  /* el contenido del club inmersivo respeta la sidebar; el fondo corre por detrás */
  .ci-arriba, .ci-sedes, .ci-pie { padding-left: calc(var(--lg-w) + var(--lg-gap) * 2 + clamp(22px, 4vw, 56px)); transition: padding-left 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
  html.side-mini .ci-arriba, html.side-mini .ci-sedes, html.side-mini .ci-pie { padding-left: calc(var(--lg-mini) + var(--lg-gap) * 2 + clamp(22px, 4vw, 56px)); }
  body:has(.hero-cine) .main > .club-inmerso { margin-left: 0; }
}

/* ============ [E13 · 28-ago noche 2] rutas, sedes y afinados visuales ============ */

/* el punto del wordmark en los titulares gigantes */
.hc-titulo .dot { color: #fff; }
.met-titulo .fx { color: var(--pink); }
.met-titulo .dot { color: var(--ink); }
.met-titulo .lb { color: #a0a31a; }
.met-titulo .pillclub { display: inline-block; background: var(--pink); color: #fff; padding: 0 0.2em 0.05em; border-radius: 0.18em; transform: rotate(-1.2deg); }
.fxlates { color: var(--pink-deep); font-weight: 800; }

/* la tira sin la franja blanca: cada foto cuelga a su altura */
.tira-scroll { align-items: center; }

/* los 4 movimientos como mapa de progresión: pines numerados unidos por la ruta punteada */
.movs { position: relative; counter-reset: mov; padding-top: 24px; }
.movs::before { content: ''; position: absolute; top: 46px; left: 5%; right: 5%; border-top: 3px dashed rgba(225, 20, 108, 0.4); }
.mov { counter-increment: mov; position: relative; z-index: 1; overflow: visible; }
.mov::before {
  content: counter(mov); position: absolute; top: -20px; left: 14px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--pink); color: #fff; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  border: 3px solid #fff; box-shadow: 0 10px 24px rgba(225, 20, 108, 0.35);
}
.mov img { border-radius: 21px 21px 0 0; }
.mov .n { display: none; }

/* la guía de sede como ruta: pines de mapa unidos por línea punteada */
.guia-pasos.ruta { position: relative; counter-reset: paso; padding-top: 22px; }
.guia-pasos.ruta::before { content: ''; position: absolute; top: 44px; left: 5%; right: 5%; border-top: 3px dashed rgba(23, 20, 26, 0.28); }
.guia-pasos.ruta figure { counter-increment: paso; position: relative; overflow: visible; z-index: 1; }
.guia-pasos.ruta figure::before {
  content: counter(paso); position: absolute; top: -18px; left: 12px; width: 42px; height: 42px;
  border-radius: 50% 50% 50% 8px; background: var(--ink); color: var(--lime); font-weight: 700;
  font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 2;
  border: 3px solid #fff; box-shadow: 0 10px 22px rgba(23, 20, 26, 0.3); transform: rotate(-8deg);
}
.guia-pasos.ruta img { border-radius: 13px 13px 0 0; height: 150px; }
.guia-pasos.ruta figcaption { font-size: 12.5px; }

/* botones grandes de navegación con su icono, debajo del mapa */
.mapa-apps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.app-btn {
  display: inline-flex; align-items: center; gap: 11px; padding: 13px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--hair-2); font-weight: 700; font-size: 14.5px;
  color: var(--ink); box-shadow: 0 12px 30px rgba(23, 20, 26, 0.1); transition: transform 0.15s, box-shadow 0.15s;
}
.app-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(23, 20, 26, 0.16); color: var(--ink); }
.app-btn svg { width: 23px; height: 23px; flex-shrink: 0; }
@media (max-width: 700px) { .mapa-apps { gap: 8px; } .app-btn { padding: 11px 16px; font-size: 13px; } }

/* [E14] la lupa del muro: cada foto del muro se abre en grande */
.muro img { cursor: zoom-in; transition: transform 0.2s; }
.muro img:hover { transform: scale(1.05); }
.foto-lupa {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(23, 20, 26, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s; cursor: zoom-out; padding: 24px;
}
.foto-lupa.abierta { opacity: 1; pointer-events: auto; }
.foto-lupa img { max-width: min(92vw, 680px); max-height: 86vh; border-radius: 22px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); border: 3px solid rgba(255, 255, 255, 0.9); }

/* ============ [E15 · 29-ago] la ronda de review de Kat: QUE TODO SE LEA ============ */

/* fuera la letra pixel en los labels informativos: Fredoka legible en todos lados */
.sec-eyebrow .num { font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 5px 12px; letter-spacing: 0.02em; }
.sec-eyebrow .lab { font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--ink); }
.tira-lbl { font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.hc-stat span { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.95; }
.sx-dia { font-family: var(--sans); font-size: clamp(13px, 1.2vw, 15.5px); font-weight: 700; letter-spacing: 0.08em; }
.sx-ir { font-size: clamp(14px, 1.2vw, 16.5px); text-decoration: underline; text-underline-offset: 3px; }
.sh-punto { font-weight: 700; }
.hooks-club .hook { font-size: clamp(14px, 1.35vw, 16.5px); padding: 11px 18px; }
.ctag { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; }
.duo-fotos figcaption b { font-size: clamp(16px, 1.6vw, 20px); }
.duo-fotos figcaption span { font-size: clamp(13.5px, 1.3vw, 15.5px); opacity: 0.96; }
.duo-fotos figcaption { background: linear-gradient(transparent, rgba(23, 20, 26, 0.88)); padding-top: 44px; }
.mov b { font-size: clamp(19px, 1.8vw, 23px); }
.mov p { font-size: clamp(13.5px, 1.25vw, 15px); }
.guia-pasos.ruta figcaption { font-size: 13.5px; color: var(--ink); }
.mosaico figcaption, .tira-scroll figcaption { font-size: 13.5px; font-weight: 600; }
.ci-lead { font-size: clamp(16px, 1.6vw, 19.5px); }
.dato b { font-size: clamp(24px, 2.4vw, 34px); }
.dato span { font-size: 13px; font-weight: 600; }

/* la tira nunca se detiene (Kat: "no me gusta que pare") */
.tira.pan:hover .tira-scroll { animation-play-state: running; }

/* el subtítulo comercial, en grande de verdad */
.met-sub { font-size: clamp(19px, 2.4vw, 32px); line-height: 1.3; color: var(--ink); max-width: 900px; }
.met-sub b, .met-sub .fxlates { font-size: 1.05em; }

/* beneficios XL: el "gift" de pagar esto, grande y con su ícono */
.beneficios-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: clamp(20px, 3vh, 32px) 0; }
.ben { background: #fff; border: 1px solid var(--hair); border-radius: 26px; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); transition: transform 0.25s var(--ease); }
.ben:hover { transform: translateY(-4px) rotate(-0.5deg); }
.ben .bi { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; }
.ben b { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.15; text-transform: lowercase; }
.ben span { font-size: clamp(13px, 1.2vw, 14.5px); color: var(--muted); line-height: 1.45; }

/* el botón-pregunta al método y el de ojitos */
.btn-grande { font-size: clamp(15px, 1.5vw, 18px); padding: 16px 30px; }
.btn-ojos span { font-size: 1.2em; margin-right: 2px; }

/* flex en casa como tarjeta grande */
.virtual-xl { position: relative; display: block; flex: 1; min-width: min(100%, 460px); border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 20, 26, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
.virtual-xl img { width: 100%; height: clamp(200px, 26vh, 280px); object-fit: cover; object-position: center 30%; display: block; transition: transform 0.6s var(--ease); }
.virtual-xl:hover img { transform: scale(1.04); }
.virtual-xl .sx-velo { background: linear-gradient(180deg, rgba(23, 20, 26, 0.05) 0%, rgba(23, 20, 26, 0.66) 100%); }
.vx-txt { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; flex-direction: column; gap: 5px; color: #fff; }
.vx-nombre { font-size: clamp(30px, 3.2vw, 48px); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; text-shadow: 0 8px 26px rgba(23, 20, 26, 0.5); }

/* testimonios giratorios (aparecen cuando haya RESENAS) */
.testi { flex: 0 0 auto; width: min(78vw, 380px); background: #fff; border: 1px solid var(--hair); border-radius: 24px; padding: 22px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.testi blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.testi blockquote::before { content: '“'; font-family: var(--serif); font-size: 34px; color: var(--pink); line-height: 0; margin-right: 4px; vertical-align: -10px; }
.testi figcaption { font-size: 13px; font-weight: 700; color: var(--pink-deep); }

/* enviá tu pregunta */
.faq-pregunta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; background: var(--tint); border-radius: 24px; padding: 20px 26px; }
.faq-pregunta b { font-size: clamp(17px, 1.7vw, 22px); }

/* cumpleaños y empresarial, menos aburridos: tarjetas blancas con aire */
#cumple .checks li span:last-child, #empresarial .checks li span:last-child { font-size: 14.5px; }
#empresarial .split-3 > div { background: #fff; border: 1px solid var(--hair); border-radius: 26px; padding: clamp(18px, 2vw, 28px); box-shadow: var(--shadow); }
#empresarial .split-3 { gap: clamp(14px, 1.8vw, 22px); }
#empresarial .kick { font-size: 12px; font-family: var(--sans); font-weight: 700; letter-spacing: 0.08em; }

/* ============ [E16 · 29-ago] testimonios reales + planes con pestañas ============ */

/* el switch de planes: pastilla grande, jugosa, con el ahorro colgado */
.plan-switch { display: flex; justify-content: center; gap: 0; margin: clamp(20px, 3vh, 34px) 0 18px; background: #fff; border: 1px solid var(--hair-2); border-radius: 999px; padding: 6px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; box-shadow: var(--shadow); }
.ps-btn { border: 0; background: none; font-family: var(--sans); font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; padding: 13px 26px; border-radius: 999px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; transition: background 0.2s, color 0.2s; }
.ps-btn.activo { background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }
.ps-badge { font-size: 11px; font-weight: 800; background: var(--lime); color: var(--ink); border-radius: 999px; padding: 3px 10px; letter-spacing: 0.03em; }
.ps-btn.activo .ps-badge { transform: rotate(-2deg); }

/* una tarjeta a la vez, centrada y grande, con entrada animada */
.opciones.interactivas { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.opciones.interactivas .opcion { display: none; }
.opciones.interactivas.ver-mensual .opcion.mensual,
.opciones.interactivas.ver-trimestral .opcion.trimestral { display: flex; animation: plan-entra 0.45s var(--ease); }
@keyframes plan-entra { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .opciones.interactivas .opcion { animation: none !important; } }

/* ============ [E17 · 29-ago] ronda sección por sección: el club, escaneable ============ */

/* la ceja del club, más presente */
.club-inmerso .sec-eyebrow .num { font-size: 15px; padding: 6px 14px; }
.club-inmerso .sec-eyebrow .lab { font-size: 16px; letter-spacing: 0.1em; }

/* respuesta a la izquierda, preguntas GRANDES a la derecha */
.ci-arriba { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 46px); align-items: center; }
.ci-izq { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ci-preguntas { display: flex; flex-direction: column; gap: 14px; }
.ci-q {
  margin: 0; font-size: clamp(21px, 2.5vw, 38px); font-weight: 700; line-height: 1.16; letter-spacing: -0.015em;
  background: rgba(251, 248, 244, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 26px; padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 30px);
  box-shadow: var(--shadow); transform: rotate(-0.8deg);
}
.ci-q.lima { transform: rotate(0.9deg); background: rgba(242, 244, 196, 0.82); }
.ci-q em { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--pink); }
.ci-q.lima em { color: #6b6e12; }
.ig-chip { font-size: 15px; }
.ig-chip .n { font-size: 26px; }

/* el botón de mapa de las sedes */
.sx-boton {
  display: inline-flex; align-items: center; gap: 10px; width: max-content;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: clamp(14px, 1.25vw, 16.5px);
  font-weight: 700; border-radius: 999px; padding: 12px 22px; margin-top: 4px;
  box-shadow: 0 14px 34px rgba(23, 20, 26, 0.3); transition: transform 0.2s var(--ease), background 0.2s;
}
.sx-boton svg { width: 19px; height: 19px; color: var(--pink); }
.sede-xl:hover .sx-boton { transform: translateY(-3px) scale(1.03); background: #fff; }

/* flex en casa: el arte tiene la pared vacía a la izquierda: ahí va el texto, en tinta */
.virtual-xl img { object-position: right center; }
.virtual-xl .sx-velo { background: linear-gradient(90deg, rgba(251, 246, 238, 0.94) 0%, rgba(251, 246, 238, 0.72) 38%, rgba(251, 246, 238, 0) 62%); }
.vx-txt { left: clamp(18px, 2.4vw, 32px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 62%; color: var(--ink); }
.vx-txt .sx-dia { color: var(--pink-deep); }
.vx-nombre { text-shadow: none; font-size: clamp(32px, 3.6vw, 54px); }
.vx-ir { font-size: clamp(14px, 1.25vw, 16.5px); font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ci-arriba { grid-template-columns: 1fr; }
  .ci-q { font-size: clamp(19px, 5.4vw, 26px); }
  .vx-txt { max-width: 74%; }
}

/* ============ [E18 · 29-ago] ronda 2 del repaso: reservar más grande, CTAs apiladas ============ */

/* cómo reservar: TODO más grande */
.paso .pnum { width: 56px; height: 56px; font-size: 24px; }
.paso b { font-size: clamp(19px, 1.9vw, 25px); }
.paso p { font-size: clamp(14.5px, 1.35vw, 17px); max-width: 460px; margin-top: 5px; }
.pasos-reserva { gap: 22px; }
.pasos-reserva .btn { font-size: clamp(15px, 1.5vw, 18px); padding: 16px 30px; }
.pasos-reserva .fine { font-size: 13.5px; }

/* las preguntas del club, más al centro */
.ci-preguntas { max-width: 540px; margin-right: auto; }

/* el chip de la comunidad, protagonista */
.ig-chip { font-size: clamp(16px, 1.6vw, 20px); padding: 13px 26px; }
.ig-chip .n { font-size: clamp(28px, 2.8vw, 40px); }

/* las dos acciones del club: apiladas, gigantes, con flecha viva */
.ci-ctas.apiladas { flex-direction: column; align-items: stretch; gap: 12px; width: min(560px, 100%); }
.accion-xl {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 22px; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  font-size: clamp(18px, 1.9vw, 25px); font-weight: 700; text-transform: lowercase;
  box-shadow: var(--shadow); transition: transform 0.22s var(--ease), box-shadow 0.22s;
}
.accion-xl.rosa { background: var(--pink); color: #fff; transform: rotate(-0.6deg); }
.accion-xl.tinta { background: var(--ink); color: var(--bg); transform: rotate(0.5deg); }
.accion-xl .ax-flecha { font-size: 1.25em; transition: transform 0.22s var(--ease); }
.accion-xl:hover { transform: translateY(-3px) rotate(0deg) scale(1.015); color: #fff; box-shadow: 0 22px 50px rgba(23, 20, 26, 0.28); }
.accion-xl.tinta:hover { color: var(--bg); }
.accion-xl:hover .ax-flecha { transform: translateX(8px); }

/* ============ [E19 · 29-ago] club.html pizarra + qué llevar + sedes respiradas + lupa global ============ */

/* las sedes del home: info a la izquierda, botón de mapa abajo a la derecha, día bien visible */
.sx-txt.fila { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 18px; }
.sx-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sx-dia { font-size: clamp(15px, 1.5vw, 19px); }
@media (max-width: 700px) { .sx-txt.fila { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* la pizarra de anuncios de las actividades */
.pizarra {
  background: linear-gradient(160deg, #f6ead9, #f1e2cc); border: 1px solid rgba(23, 20, 26, 0.1);
  border-radius: 34px; padding: clamp(22px, 3vw, 40px); margin-bottom: 34px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px);
  box-shadow: inset 0 2px 14px rgba(23, 20, 26, 0.06);
}
.nota { position: relative; background: #fff; border-radius: 18px; padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 14px 30px rgba(23, 20, 26, 0.12); }
.nota:nth-child(odd) { transform: rotate(-1.1deg); }
.nota:nth-child(even) { transform: rotate(0.9deg); }
.nota:hover { transform: rotate(0deg) translateY(-4px); transition: transform 0.25s var(--ease); }
.nota::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--pink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 3px 6px rgba(23, 20, 26, 0.3); }
.nota.lima::before { background: #a0a31a; }
.nota.crema::before { background: var(--ink); }
.nota .d { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink-deep); }
.nota.lima .d { color: #6b6e12; }
.nota b { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.1; }
.nota span:last-child { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.nota.chica { grid-column: span 1; }
@media (max-width: 860px) { .pizarra { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pizarra { grid-template-columns: 1fr; } }

/* qué llevar: chips grandes con su espacio */
.llevar-chips { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
.llevar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow); }
.llevar .li { font-size: 30px; }
.llevar b { font-size: 16.5px; display: block; }
.llevar span:last-child { font-size: 13px; color: var(--muted); }

/* el kick del cierre, visible */
.cierre .kick, section .kick { font-size: 13px; letter-spacing: 0.14em; }

/* toda foto se agranda con la lupa */
.mosaico img, .tira-scroll figure img { cursor: zoom-in; }

/* ============ [E20 · 29-ago] club.html afinado: pizarra pareja, teléfono en los pasos, wallet y kick grandes ============ */

/* la pizarra sin huecos: 3 notas arriba, 2 abajo ocupando toda la fila */
.pizarra { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pizarra .nota { grid-column: span 2; }
.pizarra .nota.chica { grid-column: span 3; }
@media (max-width: 860px) { .pizarra { grid-template-columns: 1fr 1fr; } .pizarra .nota, .pizarra .nota.chica { grid-column: span 1; } }
@media (max-width: 560px) { .pizarra { grid-template-columns: 1fr; } }

/* los pasos con el teléfono al lado */
.pasos-con-app { display: flex; gap: clamp(16px, 2vw, 28px); align-items: center; }
.pasos-con-app .pasos { flex: 1; min-width: 0; }
.iphone.chico { flex-shrink: 0; width: clamp(130px, 13vw, 180px); border-radius: 26px; border: 6px solid var(--ink); overflow: hidden; box-shadow: 0 20px 46px rgba(23, 20, 26, 0.28); transform: rotate(2deg); }
.iphone.chico img { display: block; width: 100%; }
@media (max-width: 560px) { .iphone.chico { display: none; } }

/* el carné en el wallet, legible */
.wallets .fine { font-size: 15px; line-height: 1.5; }
.wallets img { height: 44px; }

/* empezá hoy, de verdad grande */
.cierre .kick { font-family: var(--sans); font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: 0.12em; color: var(--pink); }

/* ============ [E21 · 29-ago] barrido global: adiós a la letra mini en TODO el sitio ============ */

/* los labels pixel pasan a Fredoka legible en todo el sitio (la pixel queda decorativa) */
.kick { font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: 0.11em; }
.sec-note { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.07em; }
.fine { font-size: 14.5px; }
.paso .n { font-family: var(--sans); font-size: 17px; font-weight: 700; margin-top: 0; }
.pasos .paso p { font-size: 15.5px; line-height: 1.55; }
.checks li { font-size: 15.5px; }
.dia .d { font-family: var(--sans); font-size: 13px; font-weight: 700; }
.footer, .footer nav a { font-size: 14.5px; }
.mathnote { font-size: 14px; }
.link-more { font-size: 15px; }
.crumbs, .crumbs a { font-size: 13.5px; }
.clases-vacio { font-size: 15px; }
.faq summary { font-size: 16.5px; }
.faq .a { font-size: 15px; }
.stack .row { font-size: 14.5px; }
.price span { font-size: 14.5px; }
.plan-big { }
.wallets .fine { font-size: 16px; }
.wallets img { height: 48px; }

/* el teléfono de "así de fácil", protagonista de verdad */
.iphone.chico { width: clamp(170px, 16vw, 230px); }

/* ============ [E22 · 29-ago] voz grande + testimonios en muro ============ */

/* el subtítulo de oferta, enorme y clickeable */
.met-sub.xl { font-size: clamp(23px, 3vw, 42px); line-height: 1.22; letter-spacing: -0.01em; }
.met-sub.xl .fxlates { text-decoration: underline; text-decoration-color: rgba(225, 20, 108, 0.4); text-decoration-thickness: 3px; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.met-sub.xl .fxlates:hover { text-decoration-color: var(--pink); }

/* los testimonios como muro de notitas: rotadas, se enderezan y crecen al hover */
.testi-zona { margin-top: clamp(26px, 4vh, 44px); }
.testi-muro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.testi-muro .testi { width: auto; }
.testi-muro .testi:nth-child(3n+1) { transform: rotate(-1.2deg); }
.testi-muro .testi:nth-child(3n+2) { transform: rotate(0.8deg); }
.testi-muro .testi:nth-child(3n) { transform: rotate(-0.4deg); }
.testi-muro .testi { transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.testi-muro .testi:hover { transform: rotate(0deg) translateY(-5px) scale(1.02); box-shadow: 0 26px 56px rgba(23, 20, 26, 0.16); z-index: 2; }

/* la promesa del método, protagonista */
.promesa-grande {
  margin-top: 22px; max-width: 760px; background: var(--tint); border-radius: 26px;
  padding: clamp(20px, 2.4vw, 32px); font-size: clamp(18px, 2vw, 26px); line-height: 1.45; color: var(--ink);
}
.promesa-grande b { color: var(--pink-deep); }

/* el teléfono de "así de fácil", grande de verdad */
.iphone.chico { width: clamp(200px, 19vw, 270px); transform: rotate(2deg) translateY(-6px); }

/* [E22b] FIX: .iphone base es absolute (para el mockup del home) y el teléfono de
   "así de fácil" lo heredaba: por eso flotaba ENCIMA del calendario. Acá se aterriza. */
.iphone.chico { position: static; right: auto; bottom: auto; border: 0; overflow: visible; border-radius: clamp(22px, 2.6vw, 34px); }

/* [E24] cumpleaños más llamativo y legible */
#cumple .hook { font-size: clamp(16px, 1.8vw, 22px); padding: 12px 20px; }
#cumple .checks li { font-size: 16.5px; }
#cumple .dato b { font-size: clamp(26px, 2.8vw, 38px); }

/* ============ [E25 · 29-ago] la lista fresca de Juan (post mata-caché) ============ */

/* títulos de sub-sección: grandes, bonitos, pegados a su contenido */
.sub-seccion { margin: 0 0 16px; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.02em; text-transform: lowercase; }

/* beneficios en bento de colores: distinto al ojo de las tarjetas blancas de movimientos */
.beneficios-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: clamp(18px, 2.6vh, 30px) 0; }
.benb { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); border-radius: 26px; padding: clamp(20px, 2.4vw, 34px); box-shadow: var(--shadow); transition: transform 0.25s var(--ease); }
.benb:hover { transform: translateY(-4px) rotate(-0.4deg); }
.benb .bi { font-size: clamp(40px, 4.2vw, 62px); line-height: 1; flex-shrink: 0; }
.benb b { display: block; font-size: clamp(19px, 2vw, 26px); line-height: 1.12; text-transform: lowercase; }
.benb span:last-child { font-size: clamp(13.5px, 1.3vw, 15.5px); line-height: 1.45; display: block; margin-top: 4px; }
.benb.rosa { background: var(--pink); color: #fff; }
.benb.rosa span:last-child { color: rgba(255, 255, 255, 0.88); }
.benb.lima { background: #eef2b0; color: var(--ink); }
.benb.lima span:last-child { color: #6b6e12; }
.benb.tinta { background: var(--ink); color: var(--bg); }
.benb.tinta span:last-child { color: rgba(251, 248, 244, 0.75); }
.benb.crema { background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.benb.crema span:last-child { color: var(--muted); }
@media (max-width: 700px) { .beneficios-bento { grid-template-columns: 1fr; } }

/* la banda de testimonios que pasa (vive junto al fondo sutil) */
.testi-banda .testi { width: min(74vw, 360px); margin-right: 14px; }

/* la foto del cumple, con el encuadre arriba (estaba muy abajo) */
.banda img { object-position: center 26%; }

/* ============ [E26 · 29-ago] cumple encuadrado bien + empresarial con vida ============ */

/* la foto del cumple: el círculo de chicas está ABAJO de la foto (antes se veían puros árboles) */
.banda img { object-position: center 78%; }

/* condominios / empresas / marcas: tarjetas de colores, vivas al hover */
#empresarial .split-3 > div { transition: transform 0.25s var(--ease), box-shadow 0.25s; overflow: hidden; }
#empresarial .split-3 > div:nth-child(1) { background: #fff; transform: rotate(-0.5deg); }
#empresarial .split-3 > div:nth-child(2) { background: var(--tint); transform: rotate(0.4deg); }
#empresarial .split-3 > div:nth-child(3) { background: #eef2b0; transform: rotate(-0.3deg); }
#empresarial .split-3 > div:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 60px rgba(23, 20, 26, 0.18); }
#empresarial .foto-suelta { overflow: hidden; }
#empresarial .foto-suelta img { transition: transform 0.6s var(--ease); }
#empresarial .split-3 > div:hover .foto-suelta img { transform: scale(1.06); }
#empresarial .split-3 h3, #empresarial .split-3 b { text-transform: lowercase; }
#empresarial .split-3 .btn { font-size: 15px; padding: 14px 24px; }

/* ============ [E27 · 30-ago] testimonios como CONVERSACIONES + fotos con presencia ============ */

/* las burbujas: identidad de chat (colita, colores alternos, entrada animada) */
.testi { border-radius: 24px 24px 24px 8px; border: 0; }
.testi:nth-child(3n+2) { background: var(--tint); border-radius: 24px 24px 8px 24px; }
.testi:nth-child(3n) { background: #f3f5c9; }
.testi figcaption { display: flex; align-items: center; gap: 6px; }
.testi figcaption::before { content: '💬'; font-size: 14px; }
.llega-anim { opacity: 0; transform: translateY(18px) scale(0.96); }
.llega-anim.llego { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s); }
@media (prefers-reduced-motion: reduce) { .llega-anim { opacity: 1; transform: none; } }

/* la probadita de conversación bajo el hero */
.conv-hero { padding-top: clamp(18px, 3vh, 30px); padding-bottom: 6px; }
.conv-lista { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.testi.conv { display: flex; gap: 14px; align-items: flex-start; width: min(88%, 560px); }
.testi.conv:nth-child(odd) { align-self: flex-start; }
.testi.conv:nth-child(even) { align-self: flex-end; flex-direction: row-reverse; border-radius: 24px 24px 8px 24px; }
.conv-foto { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(23, 20, 26, 0.18); }
.conv-cuerpo blockquote { margin: 0; font-size: 15.5px; line-height: 1.5; }
.conv-cuerpo figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--pink-deep); }

/* condominios/empresas/marcas: la foto absorbe la tarjeta hasta las esquinas de arriba */
#empresarial .split-3 > div { padding-top: 0; }
#empresarial .split-3 .foto-suelta { margin: 0 calc(-1 * clamp(18px, 2vw, 28px)) 16px; border-radius: 26px 26px 0 0; transform: none; }
#empresarial .split-3 .foto-suelta img { height: clamp(190px, 20vw, 250px); width: 100%; }

/* kat solo para vos: la imagen manda */
#uno-a-uno .foto-suelta { max-width: none; }

/* ============ [E28 · 30-ago] mega-ronda: chat vivo, planes duales, 1:1 premium, botones cuadrados ============ */

/* burbujas pegadas a las fotos de la tira */
.tira-scroll figure.con-burbuja { overflow: visible; }
.tira-scroll figure.con-burbuja img { border-radius: 20px; }
.burbuja-foto {
  position: absolute; top: -14px; left: 12px; max-width: 240px; z-index: 3;
  background: #fff; border-radius: 18px 18px 18px 6px; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink); box-shadow: 0 12px 28px rgba(23, 20, 26, 0.22);
}
.burbuja-foto.der { left: auto; right: 12px; border-radius: 18px 18px 6px 18px; }
.burbuja-foto b { color: var(--pink-deep); font-weight: 700; }
.ver-testis { display: flex; justify-content: center; padding: 16px clamp(22px, 4vw, 56px) 0; }

/* sombras suaves en burbujas (fuera la sombra fea) */
.testi { box-shadow: 0 10px 24px rgba(23, 20, 26, 0.08); }

/* el chat de las chicas: un teléfono con la conversación viva */
.chat-zona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(20px, 3vw, 46px); align-items: center; margin-top: clamp(26px, 4vh, 44px); }
.chat-tel { background: var(--ink); border-radius: 38px; padding: 10px; box-shadow: 0 34px 80px rgba(23, 20, 26, 0.35); }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; color: #fff; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--pink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.chat-cab b { font-size: 15px; display: block; }
.chat-estado { font-size: 12px; opacity: 0.75; color: #fff; }
.chat-msgs { background: var(--bg); border-radius: 30px; height: clamp(380px, 48vh, 520px); overflow: hidden; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 86%; background: #fff; border-radius: 18px 18px 18px 6px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(23, 20, 26, 0.08); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); display: none; }
.chat-msg.visible { display: block; opacity: 1; transform: none; }
.chat-msg:nth-child(even) { align-self: flex-end; background: var(--tint); border-radius: 18px 18px 6px 18px; }
.chat-msg .quien { font-size: 11.5px; font-weight: 700; color: var(--pink-deep); display: block; margin-bottom: 2px; }
.chat-msg p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.chat-typing { display: none; align-self: flex-start; background: #fff; border-radius: 18px 18px 18px 6px; padding: 12px 16px; gap: 4px; box-shadow: 0 8px 18px rgba(23, 20, 26, 0.08); }
.chat-typing.visible { display: flex; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 900px) { .chat-zona { grid-template-columns: 1fr; } .chat-tel { max-width: 400px; margin: 0 auto; width: 100%; } }

/* planes duales: el activo grande, el otro pequeñito al lado (clic para intercambiar) */
.plan-switch { transform: scale(1.12); margin-bottom: 26px; }
.opciones.interactivas { grid-template-columns: 240px minmax(0, 1fr); max-width: 1020px; gap: clamp(14px, 1.8vw, 24px); align-items: start; }
.opciones.interactivas .opcion { display: flex; }
.opciones.interactivas.ver-trimestral .opcion.mensual,
.opciones.interactivas.ver-mensual .opcion.trimestral {
  order: -1; transform: scale(0.96); cursor: pointer; max-height: 420px; overflow: hidden;
  opacity: 0.72; position: relative; transition: opacity 0.25s, transform 0.25s;
}
.opciones.interactivas.ver-trimestral .opcion.mensual::after,
.opciones.interactivas.ver-mensual .opcion.trimestral::after {
  content: 'ver este plan →'; position: absolute; inset: auto 0 0; padding: 40px 0 16px; text-align: center;
  font-weight: 700; font-size: 14px; color: var(--pink-deep);
  background: linear-gradient(transparent, #fff 55%);
}
.opciones.interactivas.ver-trimestral .opcion.mensual:hover,
.opciones.interactivas.ver-mensual .opcion.trimestral:hover { opacity: 1; transform: scale(0.99); }
@media (max-width: 900px) {
  .opciones.interactivas { grid-template-columns: 1fr; }
  .opciones.interactivas.ver-trimestral .opcion.mensual,
  .opciones.interactivas.ver-mensual .opcion.trimestral { order: 2; max-height: 200px; }
}

/* empresarial: tarjetas parejas con el botón cuadrado anclado abajo */
#empresarial .split-3 > div { display: flex; flex-direction: column; }
#empresarial .split-3 .abajo-tarjeta { margin-top: auto; width: 100%; font-size: clamp(16px, 1.5vw, 20px); }
#empresarial .datos .dato b { font-size: clamp(24px, 2.4vw, 34px); }

/* el 1:1 premium: centrado, imponente, con cupos EN VIVO y glow */
.uno-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.uno-titulo { margin: 0; font-size: clamp(38px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.03em; text-transform: lowercase; }
.uno-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); }
.cupos-live { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.cupos-live .pulso { width: 10px; height: 10px; border-radius: 50%; background: #3ecf6e; animation: pulso 1.6s infinite; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.55); } 55% { box-shadow: 0 0 0 9px rgba(62, 207, 110, 0); } }
.uno-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(16px, 2.4vh, 26px); }
.uno-cierre { display: flex; flex-direction: column; align-items: center; margin-top: clamp(18px, 2.8vh, 30px); }
@media (max-width: 700px) { .uno-fotos { grid-template-columns: 1fr; } }

/* glow premium en el nav: la entrada del 1 a 1 llama */
.nav-col a[href="#uno-a-uno"], .nav-col a[href$="kat.html"] { position: relative; color: var(--pink-deep); font-weight: 700; text-shadow: 0 0 14px rgba(225, 20, 108, 0.35); animation: glow-nav 2.6s ease-in-out infinite; }
.lado-mini a[href="#uno-a-uno"], .lado-mini a[href$="kat.html"] { color: var(--pink); box-shadow: 0 0 18px rgba(225, 20, 108, 0.4), inset 0 0 10px rgba(225, 20, 108, 0.12); animation: glow-nav 2.6s ease-in-out infinite; }
@keyframes glow-nav { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }

/* las redes del footer */
.redes { display: flex; gap: 12px; }
.redes .red { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
.redes .red svg { width: 20px; height: 20px; }
.redes .red:hover { transform: translateY(-3px); background: var(--pink); color: #fff; }

/* metodo · dónde se da: tarjetas XL como las sedes */
.donde-xl .club-card img { height: clamp(420px, 56vh, 620px) !important; }
.donde-xl .club-vidrio b { font-size: clamp(26px, 2.8vw, 42px); }

/* ===== School-first website + landing directa de Reserva gratis ===== */
.skool-web { background:linear-gradient(145deg,#17141a,#24151d); color:#fff; border-radius:34px; padding:clamp(28px,5vw,68px); }
.skool-web .sec-eyebrow .lab,.skool-web .sec-eyebrow .num { color:#ff85b8; }
.skool-web-head { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:34px; align-items:end; }
.skool-web .lead { color:rgba(255,255,255,.7); }
.skool-web-flow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:15px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.06); }
.skool-web-flow span { padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.09); font-size:12px; font-weight:700; }
.skool-web-flow b { color:var(--lime); }
.skool-beneficios { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:28px; }
.skool-beneficios article { position:relative; min-height:220px; display:flex; flex-direction:column; align-items:flex-start; padding:18px; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:rgba(255,255,255,.06); }
.skool-beneficios article.activo { background:linear-gradient(145deg,rgba(225,20,108,.22),rgba(255,255,255,.06)); }
.skool-beneficios article.por-definir { opacity:.76; border-style:dashed; }
.sb-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:rgba(255,255,255,.1); font-size:23px; }
.sb-status { margin-top:14px; color:var(--lime); font:700 7px 'Silkscreen',monospace; letter-spacing:.8px; text-transform:uppercase; }
.skool-beneficios h3 { margin-top:8px; font-size:18px; line-height:1.05; }
.skool-beneficios p { margin-top:7px; color:rgba(255,255,255,.62); font-size:12px; line-height:1.45; }
.skool-page-beneficios article,.skool-page-beneficios article.activo { min-height:240px; color:var(--ink); background:linear-gradient(145deg,#fff,#fae0eb); border-color:rgba(225,20,108,.16); }
.skool-page-beneficios .sb-status { color:var(--pink-deep); }
.skool-page-beneficios p { color:var(--muted); font-size:13px; }
.skool-web-note { margin-top:18px; padding:13px 15px; border-radius:16px; color:rgba(255,255,255,.72); background:rgba(211,220,42,.09); border:1px solid rgba(211,220,42,.22); font-size:12px; }
.skool-web-note b { color:var(--lime); }
.skool-web-ctas { display:flex; flex-wrap:wrap; gap:11px; margin-top:18px; }
.skool-web .btn-ghost { color:#fff; border-color:rgba(255,255,255,.2); }
.retiro-web { border-radius:34px; padding:clamp(28px,5vw,58px); background:linear-gradient(145deg,#fbe1ec,#f4f6c6); }
.retiro-web-hero { position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; border-radius:30px; background:#17141a; }
.retiro-web-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.retiro-web-velo { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,18,24,.05),rgba(76,12,42,.88)); }
.retiro-web-copy { position:relative; z-index:1; max-width:720px; padding:clamp(26px,6vw,64px); color:#fff; }
.retiro-web-copy h2 { margin-top:13px; font-size:clamp(38px,6vw,66px); line-height:.94; }
.retiro-web-copy h2 em { color:var(--lime); font-family:'Playfair Display',serif; font-weight:500; }
.retiro-web-copy p { max-width:620px; margin:16px 0; color:rgba(255,255,255,.78); font-size:17px; line-height:1.48; }
.retiro-web-copy .fine { display:block; max-width:650px; margin-top:13px; color:rgba(255,255,255,.58); }
.retiro-web-ctas { display:flex; flex-wrap:wrap; gap:10px; }
.retiro-web .btn-vidrio { color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); }
.retiro-web-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.retiro-web-grid img { width:100%; height:220px; object-fit:cover; border-radius:20px; }
.retiro-page-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.retiro-page-grid figure { min-height:300px; overflow:hidden; border-radius:26px; background:var(--tint); }
.retiro-page-grid figure.grande { grid-column:1/-1; min-height:480px; }
.retiro-page-grid img { width:100%; height:100%; display:block; object-fit:cover; }
.mat-puente .split { align-items:center; }
.mat-device { min-height:300px; display:grid; place-items:center; border-radius:28px; background:linear-gradient(145deg,var(--tint),#f3f5c8); }
.mat-device .iphone { position:static; transform:rotate(3deg); }

.reserva-ad-body { background:#fbf8f4; color:var(--ink); }
.reserva-ad-top { max-width:1080px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 auto; padding:20px 24px; }
.reserva-ad-top > span { color:var(--muted); font:700 8px 'Silkscreen',monospace; letter-spacing:.9px; text-transform:uppercase; }
.reserva-ad { max-width:1080px; margin:0 auto; padding:0 24px 100px; }
.reserva-ad-hero { position:relative; min-height:680px; display:flex; align-items:flex-end; overflow:hidden; border-radius:34px; background:#17141a; box-shadow:var(--shadow); }
.reserva-ad-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reserva-ad-velo { position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,20,26,.06),rgba(23,20,26,.88)); }
.reserva-ad-copy { position:relative; z-index:1; max-width:720px; padding:clamp(28px,6vw,70px); color:#fff; }
.reserva-ad-copy h1 { margin-top:14px; font-size:clamp(42px,7vw,76px); line-height:.94; }
.reserva-ad-copy h1 em { color:var(--lime); font-family:'Playfair Display',serif; font-weight:500; }
.reserva-ad-copy p { max-width:620px; margin:18px 0; color:rgba(255,255,255,.78); font-size:18px; line-height:1.45; }
.reserva-ad-copy small { display:block; margin-top:11px; color:rgba(255,255,255,.58); font-size:11px; }
.reserva-ad-pasos { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.reserva-ad-pasos > div { padding:20px; border:1px solid var(--hair); border-radius:22px; background:#fff; }
.reserva-ad-pasos span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--pink); font:700 10px 'Silkscreen',monospace; }
.reserva-ad-pasos b { display:block; margin-top:12px; font-size:17px; }
.reserva-ad-pasos p { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4; }
.reserva-ad-fechas,.reserva-ad-siguiente { margin-top:70px; }
.reserva-ad-fechas h2,.reserva-ad-siguiente h2 { margin:8px 0 22px; font-size:clamp(34px,5vw,54px); }
.reserva-ad-fechas .accion-xl { margin:22px auto 0; }
.reserva-ad-siguiente { padding:clamp(28px,5vw,58px); border-radius:30px; color:#fff; background:#17141a; }
.reserva-ad-siguiente > p { max-width:780px; color:rgba(255,255,255,.68); line-height:1.5; }
.reserva-ad-mini { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.reserva-ad-mini span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; }
.reserva-ad-siguiente .fine { color:rgba(255,255,255,.48); }
.reserva-ad-mat { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:18px; padding:26px; border-radius:24px; background:var(--lime); }
.reserva-ad-mat h2 { margin-top:6px; font-size:30px; }
.reserva-ad-mat p { margin-top:5px; color:#4f500b; }
.reserva-ad-mat .btn { flex-shrink:0; }
.reserva-ad-sticky { position:fixed; z-index:80; right:22px; bottom:22px; padding:14px 20px; border-radius:999px; color:#fff; background:var(--pink); box-shadow:0 14px 34px rgba(225,20,108,.35); font-weight:700; }

@media (max-width:900px) {
  .skool-web-head { grid-template-columns:1fr; }
  .skool-beneficios { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reserva-ad-hero { min-height:620px; }
}
@media (max-width:620px) {
  .skool-web { margin:0 -10px; padding:26px 18px; border-radius:26px; }
  .skool-beneficios { grid-template-columns:1fr; }
  .skool-beneficios article { min-height:0; }
  .retiro-web { margin:0 -10px; padding:18px; border-radius:26px; }
  .retiro-web-hero { min-height:620px; border-radius:24px; }
  .retiro-web-copy { padding:24px 20px 30px; }
  .retiro-web-copy h2 { font-size:43px; }
  .retiro-web-copy p { font-size:14px; }
  .retiro-web-ctas .btn { width:100%; }
  .retiro-web-grid { grid-template-columns:1fr 1fr; }
  .retiro-web-grid img { height:170px; }
  .retiro-web-grid img:first-child { grid-column:1/-1; height:240px; }
  .retiro-page-grid { grid-template-columns:1fr; }
  .retiro-page-grid figure,.retiro-page-grid figure.grande { grid-column:auto; min-height:260px; }
  .reserva-ad-top { padding:16px; }
  .reserva-ad-top > span { max-width:150px; text-align:right; font-size:6px; }
  .reserva-ad { padding:0 12px 96px; }
  .reserva-ad-hero { min-height:650px; border-radius:26px; }
  .reserva-ad-copy { padding:24px 20px 34px; }
  .reserva-ad-copy h1 { font-size:43px; }
  .reserva-ad-copy p { font-size:15px; }
  .reserva-ad-copy .btn { width:100%; }
  .reserva-ad-pasos { grid-template-columns:1fr; }
  .reserva-ad-fechas,.reserva-ad-siguiente { margin-top:46px; }
  .reserva-ad-siguiente { padding:26px 20px; }
  .reserva-ad-mat { align-items:flex-start; flex-direction:column; }
  .reserva-ad-mat .btn { width:100%; }
  .reserva-ad-sticky { right:12px; left:12px; bottom:12px; text-align:center; }
}

/* Hero de anuncio a pantalla completa + comunidad como fondo del flujo */
.reserva-ad-top { position:absolute; z-index:6; top:0; right:0; left:0; max-width:none; padding:24px clamp(22px,5vw,72px); color:#fff; }
.reserva-ad-top .wordmark { filter:drop-shadow(0 2px 10px rgba(0,0,0,.22)); }
.reserva-ad-top > span { color:rgba(255,255,255,.78); text-shadow:0 2px 12px rgba(0,0,0,.35); }
.reserva-ad { max-width:none; padding:0; }
.reserva-ad-hero { min-height:100svh; width:100%; border-radius:0; box-shadow:none; }
.reserva-ad-hero video { object-position:center; }
.reserva-ad-velo { background:linear-gradient(180deg,rgba(23,20,26,.18) 0%,rgba(23,20,26,.08) 28%,rgba(23,20,26,.88) 100%); }
.reserva-ad-copy { width:min(100%,1080px); max-width:1080px; margin:0 auto; padding:clamp(90px,12vh,150px) clamp(24px,6vw,76px) clamp(54px,9vh,92px); }
.reserva-ad-copy > p { max-width:670px; }
.reserva-ad-content { position:relative; isolation:isolate; overflow:hidden; padding:76px 24px 110px; }
.reserva-ad-content::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(251,248,244,.76),rgba(251,248,244,.9) 42%,rgba(251,248,244,.78)); backdrop-filter:blur(2px); }
.reserva-ad-girls { position:absolute; z-index:-2; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(320px,42vw); gap:8px; background:#f8dce8; }
.reserva-ad-girls img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(.92); }
.reserva-ad-girls img:nth-child(2),.reserva-ad-girls img:nth-child(5) { transform:translateY(70px); }
.reserva-ad-content-inner { position:relative; z-index:1; width:min(100%,1080px); margin:0 auto; }
.reserva-ad-pasos { margin-top:0; }
.reserva-ad-pasos > div,.reserva-ad-fechas { background:rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(23,20,26,.1); backdrop-filter:blur(14px); }
.reserva-ad-fechas { padding:clamp(22px,4vw,42px); border:1px solid rgba(255,255,255,.72); border-radius:30px; }
.reserva-ad-siguiente { box-shadow:0 22px 54px rgba(23,20,26,.2); }
.reserva-ad-mat { box-shadow:0 18px 44px rgba(23,20,26,.12); }

@media (max-width:620px) {
  .reserva-ad-top { padding:18px 16px; }
  .reserva-ad-top > span { max-width:180px; color:rgba(255,255,255,.84); }
  .reserva-ad-hero { min-height:100svh; border-radius:0; }
  .reserva-ad-copy { padding:100px 20px 88px; }
  .reserva-ad-content { padding:44px 12px 100px; }
  .reserva-ad-girls { grid-template-columns:1fr 1fr; grid-auto-rows:360px; gap:5px; }
  .reserva-ad-girls img:nth-child(2),.reserva-ad-girls img:nth-child(5) { transform:translateY(40px); }
  .reserva-ad-content::after { background:linear-gradient(180deg,rgba(251,248,244,.78),rgba(251,248,244,.92) 45%,rgba(251,248,244,.8)); }
  .reserva-ad-fechas { padding:20px 12px; border-radius:24px; }
}
.school-editorial { padding:clamp(28px,5vw,64px); background:#f4f0e9; border:1px solid rgba(20,18,24,.07); border-radius:32px; }
.school-editorial-head { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:44px; margin-bottom:30px; }
.school-editorial-head h2 { margin:0; text-transform:none; font-size:clamp(38px,5.5vw,70px); line-height:1.02; letter-spacing:-1.5px; }
.school-editorial-head h2 span { color:var(--pink); }
.school-editorial-head > p { max-width:420px; margin:0 0 5px; color:#665f65; font-size:18px; line-height:1.55; }
.school-editorial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.school-editorial-grid article { overflow:hidden; border-radius:24px; background:#fff; }
.school-editorial-grid img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.school-editorial-grid article > div { padding:26px; }
.school-editorial-number { color:#a40b4d; font:700 10px 'Silkscreen',monospace; letter-spacing:1px; }
.school-editorial-grid h3 { margin:12px 0 10px; font-size:clamp(23px,2.4vw,32px); line-height:1.12; text-transform:none; }
.school-editorial-grid p { margin:0; color:#665f65; font-size:16px; line-height:1.55; }
.school-editorial-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:28px; }
.school-editorial-footer b { font-size:17px; }
.school-editorial-footer p { margin:6px 0 0; color:#665f65; font-size:14px; }
.school-back-to-club { padding:20px 0 40px; text-align:center; }
.retiro-web-velo { background:linear-gradient(180deg,rgba(20,18,24,.04),rgba(20,18,24,.85)); }
@media(max-width:760px) {
  .school-editorial { padding:26px 18px; border-radius:26px; }
  .school-editorial-head { grid-template-columns:1fr; gap:18px; margin-bottom:24px; }
  .school-editorial-head h2 { font-size:42px; }
  .school-editorial-head > p { font-size:16px; }
  .school-editorial-grid { grid-template-columns:1fr; gap:16px; }
  .school-editorial-grid article > div { padding:22px; }
  .school-editorial-footer { align-items:stretch; }
  .school-editorial-footer .btn { width:100%; }
}
/* Acciones de entrada: junto a la promesa, no al pie del video. */
.hero-choice-actions .accion-xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 100px;
  padding: 18px 24px;
  border-radius: 22px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.15;
  text-transform: none;
  white-space: normal;
  text-align: left;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero-choice-actions .ax-txt { min-width: 0; }
.hero-choice-actions .ax-flecha { flex: 0 0 auto; }
.hero-choice-actions .ax-whatsapp { width: 36px; height: 36px; flex: 0 0 36px; }
.hero-choice-actions .rosa, .hero-choice-actions .rosa:hover { background: rgba(225,20,108,.9); color: #fff; }
.hero-choice-actions .comunidad {
  background: rgba(37,211,102,.9);
  border: 1px solid transparent;
  color: #141218;
  box-shadow: 0 3px 12px rgba(20,18,24,.12);
}
.hero-choice-actions .comunidad:hover { background: rgba(37,211,102,.9); color: #141218; }
.hero-choice-actions .accion-xl:focus-visible { outline: 3px solid #d3dc2a; outline-offset: 4px; }
.reserva-ad-ctas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0 0; max-width: 760px; }
@media (max-width: 900px) {
  .hero-choice-actions .accion-xl { width: 100%; padding: 18px 20px; font-size: 24px; }
  .reserva-ad-ctas { grid-template-columns: 1fr; max-width: 420px; }
}
/* El catálogo completo debe seguir accesible en pantallas de poca altura. */
@media (min-width: 901px) {
  .lado-full { min-height: 0; }
  .lado-full > .wordmark, .lado-full > .sidebar-foot { flex-shrink: 0; }
  .lado-full > .nav-col {
    flex: 1 1 auto;
    min-height: 0;
    margin: 24px 0;
    gap: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nav-col a { flex-shrink: 0; }
  .nav-col a .fila { max-width: 100%; }
  .lado-mini { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .lado-mini a { flex-shrink: 0; }
}
.menu-movil, .lado-full > .nav-col, .lado-mini { scrollbar-width: none; }
.menu-movil::-webkit-scrollbar, .lado-full > .nav-col::-webkit-scrollbar, .lado-mini::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.nav-open .float-wa { visibility: hidden; pointer-events: none; }
@media (min-width: 901px) {
  .lado-full .nav-col a { transition: color .15s, opacity .24s ease calc(.12s + var(--nav-i,0) * .035s), transform .32s var(--ease) calc(.12s + var(--nav-i,0) * .035s); }
  html.side-mini .lado-full .nav-col a { opacity: 0; transform: translateX(-12px); transition-delay: 0s; }
  html:not(.side-mini) .lado-full .nav-col a { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .menu-movil {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0,-18px,0) scale(.98);
    transform-origin: top right;
    transition: opacity .22s ease, transform .34s var(--ease), visibility 0s linear .34s;
    overscroll-behavior: contain;
    overflow-x: hidden;
  }
  body.nav-open .menu-movil { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
  .menu-movil .top { position: sticky; top: 0; z-index: 2; flex-shrink: 0; margin: 0 -20px; padding: 16px 20px; background: rgba(23,20,26,.88); backdrop-filter: blur(18px); }
  .menu-movil .cerrar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); }
  .mm-links a { opacity: 0; transform: translateY(12px); transition: opacity .23s ease, transform .34s var(--ease); }
  body.nav-open .mm-links a { opacity: 1; transform: none; transition-delay: calc(.06s + var(--nav-i,0) * .035s); }
  .mm-foot .btn { min-height: 58px; border-radius: 16px; padding: 16px 20px; font-size: 18px; }
  .menu-movil .mm-foot .btn-ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.55); color: #fff; box-shadow: none; }
  .menu-movil .mm-foot .btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-movil, .mm-links a, .lado-full .nav-col a { transition: none !important; animation: none !important; transform: none !important; }
}