/* Laguna Swim · pantalla de Inicio de la app
   Mismo lenguaje que Competir, Tools, Coach y Tienda: fondo azul profundo,
   tarjetas de vidrio, dorado como acento. Solo presentacion; los IDs que
   usa el JS (fb-status, hero-frase-*, home-stat-*, home-top5, home-muro*,
   wfc-*) se conservan. Animaciones en inicio.js. */
.ls-inicio{
  --oro:#ffd700; --oro-2:#ffb800; --cielo:#38bdf8; --bajo:#7cc8f2;
  --abismo:#03101f; --noche:#071e38; --wa:#22c55e; --wa-ink:#03210e;
  --vidrio:linear-gradient(160deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 100%);
  --borde:rgba(255,255,255,.16);
  --hi:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
  --sombra:0 14px 36px rgba(0,8,20,.38);
  --r:24px; --r-sm:16px;
  --suave:rgba(255,255,255,.7);
  --resorte:cubic-bezier(.34,1.4,.64,1);
  --glide:cubic-bezier(.16,1,.3,1);
  --face:-apple-system,'SF Pro Display','Inter',system-ui,'Segoe UI',sans-serif;
  position:relative;z-index:1;
  margin:0 -1rem;
  padding-bottom:12px;
  font-family:var(--face);color:#fff;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
body.v3-fluid .ls-inicio *{transition:none}
.ls-inicio h1,.ls-inicio h2,.ls-inicio h3,.ls-inicio p{margin-top:0;margin-bottom:0;font-family:var(--face)}
.ls-inicio :focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* ================= PORTADA ================= */
.ls-hero{position:relative;min-height:calc(100svh - 150px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  border-radius:0 0 32px 32px;margin-bottom:8px}
.ls-hero-media{position:absolute;inset:0;z-index:-3}
.ls-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transform-origin:55% 40%;animation:lsKen 22s ease-in-out infinite alternate}
@keyframes lsKen{from{transform:scale(1.08) translate3d(0,0,0)}to{transform:scale(1.22) translate3d(-2%,-2%,0)}}
.ls-hero-velo{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(3,16,31,.6) 0%,rgba(3,16,31,.25) 26%,rgba(5,26,58,.78) 52%,rgba(5,26,58,.98) 100%),
    radial-gradient(120% 70% at 50% 110%,rgba(56,189,248,.35),transparent 60%)}
/* reflejos de agua que se mueven sobre la foto */
.ls-hero-luz{position:absolute;inset:-20%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.35;
  background:
    radial-gradient(18% 9% at 20% 30%,rgba(124,200,242,.55),transparent 70%),
    radial-gradient(22% 8% at 70% 22%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(16% 10% at 45% 60%,rgba(56,189,248,.45),transparent 70%),
    radial-gradient(20% 7% at 85% 70%,rgba(255,215,0,.22),transparent 70%);
  filter:blur(18px);animation:lsLuz 14s ease-in-out infinite alternate}
@keyframes lsLuz{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,-3%,0) rotate(4deg)}100%{transform:translate3d(-3%,2%,0) rotate(-3deg)}}
.ls-hero-in{width:100%;max-width:1180px;margin:0 auto;padding:22px clamp(18px,4vw,48px) clamp(28px,5vh,52px)}
.ls-hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:auto;position:absolute;top:16px;left:clamp(18px,4vw,48px);right:clamp(18px,4vw,48px)}
.ls-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.8125rem;font-weight:600;
  background:rgba(3,16,36,.45);border:1px solid var(--borde);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ls-punto{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:lsPulso 2.2s infinite}
@keyframes lsPulso{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ls-inicio #fb-status{margin:0;font:600 .75rem/1 var(--face);padding:7px 11px;border-radius:999px;
  background:rgba(3,16,36,.45);border:1px solid var(--borde);color:var(--suave);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ls-inicio #fb-status.conn-ok{color:#86efac}
.ls-inicio #fb-status.conn-bad{color:#fca5a5}

.ls-display{font-size:clamp(3.4rem,15.5vw,8.5rem);font-weight:900;letter-spacing:-.045em;line-height:.9;margin-top:28vh!important}
.ls-display > span{display:block;overflow:hidden;padding-bottom:.06em}
.ls-display > span > span{display:inline-block}
.ls-l1{color:#fff;text-shadow:0 6px 30px rgba(0,8,20,.45)}
.ls-oro-txt{display:inline-block;padding-right:.04em;background:linear-gradient(100deg,#b8860b 0%,#ffd700 30%,#fff3b0 46%,#ffd700 62%,#d4a106 100%);background-size:220% 100%;filter:drop-shadow(0 6px 24px rgba(0,8,20,.4));
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lsOro 6s ease-in-out infinite}
@keyframes lsOro{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.ls-verso{margin-top:12px!important;font-size:.9375rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.ls-apoyo{margin-top:16px!important;font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);line-height:1.4;max-width:32ch;color:rgba(255,255,255,.88)}
.ls-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ls-sellos{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.875rem;color:var(--suave)}
.ls-sellos b{color:#fff;font-weight:800}
.ls-sellos li+li::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--oro);margin:0 12px 2px -10px;vertical-align:middle}

/* entrada de la portada */
.ls-in{opacity:0;transform:translateY(26px);animation:lsSube .9s var(--glide) forwards;animation-delay:calc(var(--d,0) * 110ms + 150ms)}
.ls-display .ls-in{transform:translateY(105%);animation-name:lsAsoma;animation-duration:1.1s}
@keyframes lsSube{to{opacity:1;transform:none}}
@keyframes lsAsoma{to{opacity:1;transform:none}}

/* ================= BOTONES ================= */
.ls-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 1.5em;border-radius:16px;border:0;cursor:pointer;
  font:800 .98rem/1.1 var(--face);letter-spacing:.01em;text-decoration:none;text-align:center;color:#fff;-webkit-appearance:none;
  transition:transform .35s var(--resorte),box-shadow .25s,background-color .2s!important}
.ls-btn:active{transform:scale(.95)}
.ls-btn-wa{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 10px 28px rgba(34,197,94,.35)}
.ls-btn-oro{background:linear-gradient(135deg,#ffe14d,#ffd700 45%,#e6b800);color:#071e38;box-shadow:0 10px 26px rgba(255,215,0,.25)}
.ls-btn-vidrio,.ls-btn-linea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ls-btn-linea{background:transparent}
.ls-btn-azul{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;box-shadow:0 10px 26px rgba(14,165,233,.3)}
@media (hover:hover){
  .ls-btn:hover{transform:translateY(-2px)}
  .ls-btn-wa:hover{box-shadow:0 14px 34px rgba(34,197,94,.5)}
  .ls-btn-vidrio:hover,.ls-btn-linea:hover{background:rgba(255,255,255,.18)}
}
/* destello que recorre el boton principal */
.ls-brillo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:lsDestello 3.6s ease-in-out 1.6s infinite}
@keyframes lsDestello{0%{left:-60%}35%,100%{left:130%}}

/* ================= SECCIONES DE VIDRIO ================= */
.ls-c{max-width:1180px;margin:14px clamp(10px,2.5vw,24px) 0;padding:clamp(22px,4vw,40px);border-radius:28px;position:relative;
  background:var(--vidrio);border:1px solid var(--borde);box-shadow:var(--hi),var(--sombra);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6)}
@media (min-width:1228px){.ls-c{margin-left:auto;margin-right:auto}}
.ls-h2{font-size:clamp(1.75rem,6.5vw,2.75rem);font-weight:900;letter-spacing:-.035em;line-height:1.02;margin-bottom:14px!important}
.ls-s{color:var(--oro)}
.ls-h3{font-size:1rem;font-weight:800;letter-spacing:.02em;margin:26px 0 10px!important;color:var(--bajo)}
.ls-texto{font-size:1rem;color:rgba(255,255,255,.85);max-width:48ch}
.ls-texto strong{color:#fff}
.ls-nota{font-size:.8125rem;margin-top:12px!important;max-width:48ch;color:var(--suave)}
.ls-dato{font-size:.875rem;font-weight:600;color:var(--bajo)}

/* revelado al hacer scroll (lo activa inicio.js) */
.ls-js .ls-rev{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s var(--glide),transform .9s var(--glide)!important;transition-delay:calc(var(--i,0) * 70ms)!important}
.ls-js .ls-rev.ls-ya{opacity:1;transform:none}

/* ---------- frase ---------- */
.ls-frase{overflow:hidden}
.ls-frase::before{content:"\201C";position:absolute;right:14px;top:-34px;font:900 11rem/1 Georgia,serif;color:rgba(255,215,0,.14);pointer-events:none}
.ls-inicio .hero-frase{margin:6px 0 0;padding:0;border:0;animation:none}
.ls-inicio .hero-frase blockquote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(1.35rem,1.05rem + 1.6vw,2rem);line-height:1.3;max-width:30ch;color:#fff;text-wrap:balance}
.ls-inicio .hero-frase blockquote::before{content:none}
.ls-inicio .hero-frase figcaption{margin-top:12px;font-size:.9375rem;color:var(--oro);font-weight:700}
.ls-frase-pie{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}

/* ---------- horarios ---------- */
.ls-sedes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:18px}
.ls-sede{position:relative;overflow:hidden;border-radius:var(--r);padding:20px;background:rgba(3,16,36,.42);border:1px solid rgba(255,255,255,.12);
  transition:transform .4s var(--resorte),border-color .2s!important}
.ls-sede:active{transform:scale(.98)}
@media (hover:hover){.ls-sede:hover{transform:translateY(-4px);border-color:rgba(255,215,0,.45)}}
.ls-sede-foto{display:block;width:calc(100% + 40px);height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 55%;margin:-20px -20px 16px;
  transition:transform 1.2s var(--glide)!important}
@media (hover:hover){.ls-sede:hover .ls-sede-foto{transform:scale(1.06)}}
.ls-sede h3{font-size:1.125rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ls-horas{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ls-horas span{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;padding:6px 12px;border-radius:12px;background:rgba(56,189,248,.14);color:var(--cielo);border:1px solid rgba(56,189,248,.3)}
.ls-precio{margin-top:12px!important;font-size:.9375rem;color:var(--suave)}
.ls-precio b{font-size:1.5rem;color:var(--oro);font-weight:900}
.ls-sede-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ls-sede-btns .ls-btn{flex:1 1 120px;min-height:46px;padding:0 1em;white-space:nowrap;font-size:.9rem}

/* ---------- semana del equipo ---------- */
.ls-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.ls-cifras div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 6px;border-radius:var(--r-sm);
  background:rgba(3,16,36,.42);border:1px solid rgba(255,215,0,.22)}
.ls-cifras b{font-size:clamp(1.9rem,8vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--oro);font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(255,215,0,.25)}
.ls-cifras span{font-size:.8rem;font-weight:600;line-height:1.25;margin-top:8px;color:var(--suave)}
.ls-cifras b.ls-late{animation:lsLate .6s var(--resorte)}
@keyframes lsLate{40%{transform:scale(1.18)}}
.ls-top5{font-family:var(--face)}
.ls-top5 > div{border-radius:14px!important;padding:11px 13px!important;margin-bottom:6px!important;background:rgba(3,16,36,.42)!important;border:1px solid rgba(255,255,255,.08)}
.ls-top5 > div:first-child{background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,215,0,.05))!important;border-color:rgba(255,215,0,.35)}
.ls-cargando{text-align:center;padding:14px;color:var(--suave)}
.ls-semana .ls-acciones .ls-btn-linea{border:1px solid rgba(255,255,255,.25)}

/* ---------- filas (simuladores, unete) ---------- */
.ls-lista{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ls-fila{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:14px;min-height:70px;padding:16px 16px 16px 18px;border-radius:var(--r-sm);
  background:rgba(3,16,36,.42);border:1px solid rgba(255,255,255,.1);color:#fff;transition:transform .4s var(--resorte),border-color .2s,background-color .2s!important}
.ls-fila:active{transform:scale(.97)}
@media (hover:hover){.ls-fila:hover{border-color:rgba(255,215,0,.45);background:rgba(3,16,36,.6)}.ls-fila:hover .ls-flecha{transform:translateX(4px)}}
.ls-fila:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.ls-fila-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ls-fila-txt b{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ls-fila-txt > span{font-size:.84rem;line-height:1.4;color:var(--suave)}
.ls-nuevo{font-style:normal;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:6px;padding:3px 8px;border-radius:999px;
  background:var(--oro);color:#071e38;box-shadow:0 0 0 0 rgba(255,215,0,.5);animation:lsPulsoOro 2.4s infinite}
@keyframes lsPulsoOro{0%{box-shadow:0 0 0 0 rgba(255,215,0,.5)}70%{box-shadow:0 0 0 8px rgba(255,215,0,0)}100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}}
.ls-flecha{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,215,0,.14);border:1px solid rgba(255,215,0,.35);position:relative;transition:transform .35s var(--resorte)!important}
.ls-flecha::before{content:"";position:absolute;left:10px;top:12px;width:8px;height:8px;border:solid var(--oro);border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}

/* ---------- eventos ---------- */
.ls-evento{position:relative;display:flex;flex-direction:column;gap:5px;margin-top:12px;padding:20px;border-radius:var(--r);overflow:hidden;
  background:rgba(3,16,36,.5);border:1px solid rgba(255,215,0,.35);color:#fff;text-decoration:none;transition:transform .4s var(--resorte)!important}
.ls-evento::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b)}
.ls-evento:active{transform:scale(.98)}
@media (hover:hover){a.ls-evento:hover{transform:translateY(-3px)}}
.ls-evento .ls-flecha{position:absolute;right:16px;top:18px}
.ls-evento-cinta{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);padding-right:46px}
.ls-evento-nombre{font-size:clamp(1.3rem,1rem + 1.6vw,1.9rem);font-weight:900;letter-spacing:-.025em;line-height:1.1;color:#fff;text-decoration:none;padding-right:46px}
a.ls-evento-nombre{text-decoration:underline;text-decoration-color:rgba(255,215,0,.5);text-decoration-thickness:2px;text-underline-offset:.15em}
.ls-evento-fecha{font-size:.98rem;font-weight:800;color:var(--cielo)}
.ls-evento-lugar{font-size:.875rem;color:var(--suave);max-width:52ch}
.ls-evento-wfc{border-color:rgba(56,189,248,.35)}
.ls-evento-wfc::before{background:linear-gradient(90deg,#0ea5e9,#7dd3fc,#0ea5e9)}
.ls-cuenta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0}
.ls-cuenta div{display:flex;flex-direction:column;align-items:center;padding:12px 4px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ls-cuenta b{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--oro);font-variant-numeric:tabular-nums}
.ls-cuenta span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;color:var(--suave)}
#wfc-s{display:inline-block;animation:lsTic 1s steps(1) infinite}
@keyframes lsTic{0%{opacity:1}50%{opacity:.75}}
.ls-evento-wfc .ls-btn{align-self:stretch}

/* ---------- muro ---------- */
.ls-muro .home-muro{margin:14px 0}
.ls-muro .home-muro-card{font-family:var(--face)}

/* ---------- coach ---------- */
.ls-coach-nombre{font-size:clamp(1.4rem,1.1rem + 1.6vw,2rem);font-weight:900;letter-spacing:-.025em;line-height:1.1;margin-bottom:8px!important}
.ls-coach .ls-cifras{margin-bottom:20px}

/* ---------- unete ---------- */
.ls-firma{margin-top:24px!important;font-weight:800;letter-spacing:.06em;color:var(--oro);text-align:center}

/* ---------- fotos ---------- */
.ls-foto-marco{margin:16px 0 0;position:relative;border-radius:var(--r);overflow:hidden}
.ls-foto-marco img{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:560px;object-fit:cover;object-position:50% 60%;transition:transform 1.4s var(--glide)!important}
.ls-foto-marco figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;
  background:rgba(3,16,36,.55);border:1px solid var(--borde);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ls-js .ls-foto-marco img{transform:scale(1.1)}
.ls-js .ls-ya .ls-foto-marco img,.ls-js .ls-foto-marco.ls-ya img{transform:none}
.ls-eventos .ls-foto-marco + .ls-evento{margin-top:12px}
.ls-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.ls-par figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden}
.ls-par img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;transition:transform 1.2s var(--glide)!important}
@media (hover:hover){.ls-par figure:hover img{transform:scale(1.06)}}
.ls-par figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:12px;font-size:.72rem;font-weight:700;line-height:1.3;
  background:rgba(3,16,36,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  .ls-hero{min-height:calc(100svh - 120px);border-radius:0 0 40px 40px}
  .ls-display{margin-top:22vh!important}
  .ls-hero-media img{object-position:70% 38%}
  .ls-hero-velo{background:
    linear-gradient(90deg,rgba(3,16,31,.95) 0%,rgba(3,16,31,.82) 32%,rgba(3,16,31,.3) 62%,rgba(3,16,31,.1) 100%),
    linear-gradient(180deg,rgba(3,16,31,.5) 0%,transparent 30%,transparent 70%,rgba(5,26,58,.9) 100%)}
  .ls-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-par{gap:14px}
}

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .ls-hero-media img,.ls-hero-luz,.ls-punto,.ls-oro-txt,.ls-brillo::after,.ls-nuevo,#wfc-s{animation:none}
  .ls-in,.ls-display .ls-in{opacity:1;transform:none;animation:none}
  .ls-js .ls-rev{opacity:1;transform:none;transition:none!important}
  .ls-js .ls-foto-marco img{transform:none}
}

/* ---------- menu inferior: iconos dibujados, activo en oro ---------- */
body.v7 .bnav-item{font-size:.6875rem!important;font-weight:700;opacity:.72}
body.v7 .bnav-item.active{opacity:1;color:var(--gold,#ffd700);background:rgba(255,215,0,.14);box-shadow:none}
.bnav-icon svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}