/* Gracias v3 (7 nov 2026): la versión B que eligió David, con sus cambios. El metal de la app solo en el primer cuarto
   de la pantalla y degradado a negro; el resto, negro. Los testimonios son la sección de la home tal cual. */
:root{--tlc-ease:cubic-bezier(.22,1,.36,1);--tlc-carta:#0f0f0f;--tlc-tenue:rgba(255,255,255,.58);--tlc-linea-suave:rgba(255,255,255,.07);
  --tlc-texto:rgba(255,255,255,.82);--tlc-margen:20px;--gray-2:rgba(255,255,255,0.75);--tlc-linea:rgba(255,255,255,.12);--tlc-radio:20px}
html,body{height:auto}
.fondo{position:absolute;top:0;left:0;right:0;height:max(27svh,230px);z-index:0}
.fondo::after{content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 55%,#000 100%)}
.pantalla{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 18px) 24px 8px}
.arriba{display:flex;align-items:center;justify-content:space-between}

/* David, con más peso */
.quien{display:flex;align-items:center;gap:14px;margin-top:24px}
.quien .avatar{width:64px;height:64px;flex:0 0 64px;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 0 5px rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}
.quien .nom{display:flex;align-items:center;gap:6px;font-size:17px;line-height:20px;font-weight:700}
.quien .nom svg{width:17px;height:17px;flex:0 0 17px}
.quien .rol{margin-top:2px;font-size:12px;line-height:16px;color:var(--t2)}
.ig{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 10px 5px 6px;border-radius:50px;font-size:12px;line-height:1.2;font-weight:700}
.ig .flecha{width:14px;height:14px;flex:0 0 14px;stroke-width:2;color:var(--t2)}
.ig svg{width:18px;height:18px;flex:0 0 18px}
.ig b{font-weight:700}
.ig .n{color:var(--t3)}

/* La cita */
.etq{margin-top:22px;font-size:12px;color:var(--t2)}
.fecha{margin-top:2px;font-size:56px;line-height:54px;font-weight:700}
.fecha small{display:block;font-size:22px;line-height:28px;font-weight:700;color:var(--plata)}
.chips{margin-top:12px}
.chip svg.marca{width:18px;height:18px;flex:0 0 18px}

/* Proceso con animación */
.proceso{margin-top:20px}
.paso{display:grid;grid-template-columns:22px 1fr;gap:12px;position:relative;padding-bottom:12px}
.paso:last-child{padding-bottom:0}
.paso:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:24px;bottom:2px;width:1px;background:rgba(255,255,255,.16)}
.paso .relleno{position:absolute;left:10.5px;top:24px;bottom:2px;width:1px;background:var(--plata);transform-origin:top;transform:scaleY(0)}
.dot{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:#000;font-size:10px;color:var(--t3)}
.paso.hecho .dot{background:var(--plata);border-color:var(--plata);color:#000}
.paso.ahora .dot{border-color:#fff;color:#fff}
.dot .lucide{width:12px;height:12px;flex-basis:12px;stroke-width:2.4}
.paso b{display:block;font-size:13px;line-height:17px}
.paso p{font-size:12px;line-height:16px;color:var(--t2)}
.paso.ahora b{color:#fff}
.paso.ahora p strong{color:#fff}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes llena{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.anim .paso{animation:entra .6s var(--ease) both}
.anim .paso:nth-child(1){animation-delay:.15s} .anim .paso:nth-child(2){animation-delay:.45s}
.anim .paso:nth-child(3){animation-delay:.75s} .anim .paso:nth-child(4){animation-delay:1.05s}
.anim .paso.hecho .relleno{animation:llena .7s var(--ease) .5s both}
.anim .paso.ahora .dot{animation:pulso 2.2s var(--ease) 1.2s infinite}
@media (prefers-reduced-motion:reduce){.anim .paso,.anim .paso.hecho .relleno,.anim .paso.ahora .dot{animation:none}.paso.hecho .relleno{transform:none}}

.botones{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.botones .btn{width:100%}
.btn svg.marca{width:18px;height:18px;flex:0 0 18px}

/* Debajo del primer pantallazo */
.sec{max-width:480px;margin:0 auto;padding:64px 24px 0;text-align:center}
.sec h2{font-size:17px;line-height:1.3;font-weight:700;text-wrap:balance}
.sec .txt{margin-top:10px;color:var(--t2)}
.rasgos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;text-align:left}
.rasgo{display:flex;align-items:center;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--b1);background:#111;font-size:13px}
.rasgo .lucide{color:var(--plata)}
.yt-lista{display:flex;flex-direction:column;gap:14px;margin-top:20px;text-align:left}
.yt{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start}
.yt .mini{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111;border:1px solid var(--b1)}
.yt .mini img{width:100%;height:100%;object-fit:cover;display:block}
.yt .dur{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:5px;font-size:11px;font-weight:700;background:rgba(0,0,0,.8)}
.yt .info b{display:block;font-size:13px;line-height:17px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yt .meta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--t3)}
.yt .meta svg{width:16px;height:16px;flex:0 0 16px}
section.fb{padding:64px 0 0}
.fb .container{max-width:430px;margin:0 auto;padding:0 24px}
.members-header{text-align:center}
.members-header h2{font-size:17px;line-height:1.2;margin-bottom:8px;font-weight:700}
.members-header p{font-size:12px;color:var(--t3)}
footer{padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;color:rgba(255,255,255,.4)}
.aviso{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);opacity:0;z-index:30;max-width:86vw;
  padding:10px 16px;border-radius:50px;background:#fff;color:#000;font-size:12px;font-weight:700;transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.aviso.ver{opacity:1;transform:translate(-50%,0)}
.proto{position:static;transform:none;text-align:center;padding:0 0 24px}
@media (min-width:769px){.sec h2,.members-header h2{font-size:24px}}

/* ---- Agenda, sin plazas y rechazo (heredan la gracias v3) ---- */
.titulo{margin-top:22px;font-size:22px;line-height:1.25;font-weight:700;text-wrap:balance}
.lead{margin-top:8px;color:var(--t2)}
.lead + .lead{margin-top:6px}
.dato{margin-top:10px;font-size:12px;color:var(--t3)}
.dato b{color:#fff}
.punto.plata{background:var(--plata);box-shadow:0 0 0 3px rgba(200,200,200,.18)}
.punto.no{background:rgba(255,255,255,.5);box-shadow:none}
.paso.hueco .dot{border-style:dashed}
.agenda{margin-top:18px;border:1px solid var(--b1);border-radius:20px;background:rgba(255,255,255,.02);padding:16px}
.agenda-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agenda-cab b{font-size:13px}
.agenda-cab span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t3)}
.agenda-cab svg{width:16px;height:16px;flex:0 0 16px}
.dias{display:flex;gap:8px;margin-top:14px}
.dia{flex:0 0 auto;min-width:78px;padding:10px 12px;border:1px solid var(--b2);border-radius:13px;text-align:center;transition:border-color .25s var(--ease)}
.dia small{display:block;font-size:12px;line-height:16px;color:var(--t2)}
.dia b{display:block;font-size:13px;line-height:17px}
.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.hora{padding:11px 4px;border:1px solid var(--b2);border-radius:50px;font-size:13px;font-weight:700;text-align:center;transition:border-color .25s var(--ease)}
.dia[aria-pressed="true"],.hora[aria-pressed="true"]{border-color:transparent;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#f5f5f5 0%,#e0e0e0 25%,#b0b0b0 50%,#8a8a8a 75%,#c8c8c8 100%) border-box}
.nota-horas{margin-top:10px;font-size:11px;color:var(--t3)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.reservar{width:100%;margin-top:12px}
.corregir{display:block;margin:40px auto 0;text-align:center;font-size:12px;color:var(--t3);text-decoration:underline}

/* ---- Barra de pasos arriba del todo (8 nov 2026, versión A elegida por David): fija al hacer scroll ---- */
/* Fondo como el header de la home (.sticky-nav de thelegacyclub.es): negro al 70 % con desenfoque de 16 px arriba que se
   funde a transparente abajo. Va en un ::before para que el fundido no apague los pasos. El fundido ocupa los últimos 40 px:
   con la página quieta caen dentro de la barra (detrás solo hay metal) y, al hacer scroll, la capa baja 40 px para que los
   pasos queden siempre sobre desenfoque y el texto que pasa por debajo no se cruce con ellos. */
.nav-pasos{position:sticky;top:0;z-index:20;padding:calc(env(safe-area-inset-top,0px) + 14px) 0 12px}
.nav-pasos::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) calc(100% - 40px),rgba(0,0,0,0) 100%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 40px),transparent 100%);
  transition:bottom .4s ease}
.nav-pasos.fija::before{bottom:-40px}
.np-in{max-width:480px;margin:0 auto;padding:0 24px}
.np-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.np-cuenta{font-size:12px;color:var(--t2)}
.np-cuenta b{color:#fff;font-weight:700}
.np{list-style:none;display:flex;margin-top:14px}
.np-dot{display:grid;place-items:center}
.np-dot svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.np-txt{margin-top:10px;font-size:12px;line-height:16px;color:var(--t2)}
.np-txt b{color:#fff}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pantalla.con-nav{padding-top:10px}
.aviso-wa{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:16px;border:1px solid var(--b1);background:#0d0d0d;font-size:12px;line-height:17px;color:var(--t2)}
.aviso-wa svg{width:18px;height:18px;flex:0 0 18px;margin-top:-1px}
.aviso-wa strong{color:#fff}
.paso-agenda{display:block;margin-top:14px;font-size:12px;font-weight:700;color:#fff}
.paso-agenda span{color:var(--t3);font-weight:300}

/* A · Pasos con puntos y línea, etiqueta debajo */
.v-a .np li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.v-a .np li::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:1px;background:rgba(255,255,255,.18);z-index:0}
.v-a .np li:first-child::before{display:none}
.v-a .np li.hecho::before,.v-a .np li.ahora::before{background:var(--plata)}
.v-a .np-dot{position:relative;z-index:1;width:23px;height:23px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:#000;font-size:10px;color:var(--t3)}
.v-a .np li.hecho .np-dot{background:var(--plata);border-color:var(--plata);color:#000}
.v-a .np li.ahora .np-dot{border-color:#fff;color:#fff;animation:pulso 2.2s var(--ease) .6s infinite}
.v-a .np li.pausa .np-dot{border-style:dashed;color:var(--t2)}
.v-a .np-t{font-size:11px;line-height:13px;color:var(--t3)}
.v-a .np li.hecho .np-t{color:var(--t2)}
.v-a .np li.ahora .np-t{color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){.v-a .np li.ahora .np-dot{animation:none}}
.v-a .np-txt{display:none}
.dias .dia{flex:1;min-width:0}

/* ---- Animaciones de reserva (8 nov 2026): botón reservando, velo con check al completar y entrada en cascada ---- */
.btn.cargando{position:relative;overflow:hidden;pointer-events:none}
.btn.cargando::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.14) 45%,transparent 70%);
  transform:translateX(-100%);animation:barrido 1.1s var(--ease) infinite}
@keyframes barrido{to{transform:translateX(100%)}}
.puntos{display:inline-flex;gap:3px;margin-left:6px}
.puntos i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.25;animation:punto 1s ease-in-out infinite}
.puntos i:nth-child(2){animation-delay:.15s}.puntos i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,100%{opacity:.25}50%{opacity:1}}
.btn.hecho{background:#fff;color:#000;pointer-events:none}
.btn.hecho svg{width:18px;height:18px;stroke:#000;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:dibujar .45s var(--ease) forwards}
.hora,.dia{transition:border-color .25s var(--ease),transform .2s var(--ease)}
.hora:active,.dia:active{transform:scale(.96)}
.reservar:not([disabled]){animation:activo .5s var(--ease)}
@keyframes activo{0%{transform:scale(.98);box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{transform:none;box-shadow:0 0 0 12px rgba(255,255,255,0)}}

.velo{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.velo.ver,html.con-velo .velo{opacity:1;pointer-events:auto}
html.con-velo .velo.fuera{opacity:0;pointer-events:none}
.velo-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px}
.velo-ok svg{width:84px;height:84px}
.velo-ok .aro{fill:none;stroke:var(--plata);stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240}
.velo-ok .ck{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.velo-ok.anima .aro{animation:dibujar .8s var(--ease) .1s forwards}
.velo-ok.anima .ck{animation:dibujar .45s var(--ease) .75s forwards}
.velo-t{margin-top:20px;font-size:22px;line-height:1.2;font-weight:700;opacity:0}
.velo-s{margin-top:6px;font-size:13px;color:var(--t2);opacity:0}
.velo-ok.anima .velo-t{animation:subir .6s var(--ease) .9s forwards}
.velo-ok.anima .velo-s{animation:subir .6s var(--ease) 1.05s forwards}
@keyframes dibujar{to{stroke-dashoffset:0}}
@keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cascada{opacity:0;transform:translateY(14px)}
.cascada.dentro{animation:subir .7s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){
  .btn.cargando::after,.puntos i,.reservar:not([disabled]){animation:none}
  .velo-ok .aro,.velo-ok .ck{stroke-dashoffset:0;animation:none!important}
  .velo-t,.velo-s{opacity:1;animation:none!important}
  .cascada{opacity:1;transform:none;animation:none!important}
}
.btn.cargando[disabled],.btn.hecho[disabled]{opacity:1;cursor:default}

/* ---- Proceso v2 (8 nov 2026, David: revisión de 3 a 5 s, «se tiene que sentir que hay un proceso», en verde y con pulso) ---- */
:root{--verde:#22c55e}
.v2-estado{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px;width:100%;max-width:420px}
.v2-icono{position:relative;width:104px;height:104px;display:grid;place-items:center}
.v2-onda{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--verde);opacity:0;animation:v2onda 2.1s var(--ease) infinite}
.v2-onda:nth-child(2){animation-delay:.7s}.v2-onda:nth-child(3){animation-delay:1.4s}
.v2-nucleo{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(34,197,94,.12);border:1.5px solid rgba(34,197,94,.55);display:grid;place-items:center;
  transition:width .5s var(--ease),height .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease)}
.v2-nucleo i{width:10px;height:10px;border-radius:50%;background:var(--verde);animation:v2late 1.2s ease-in-out infinite}
.v2-nucleo svg{position:absolute;width:34px;height:34px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.v2-estado.ok .v2-onda{animation:none;opacity:0}
.v2-estado.ok .v2-nucleo{width:88px;height:88px;background:var(--verde);border-color:var(--verde);box-shadow:0 0 0 12px rgba(34,197,94,.14),0 0 60px rgba(34,197,94,.35)}
.v2-estado.ok .v2-nucleo i{display:none}
.v2-estado.ok .v2-nucleo svg{animation:dibujar .5s var(--ease) .35s forwards}
.v2-t{margin-top:24px;font-size:21px;line-height:1.25;font-weight:700;transition:opacity .22s var(--ease)}
.v2-s{margin-top:8px;font-size:13px;line-height:1.55;color:var(--t2);min-height:40px;transition:opacity .22s var(--ease)}
.v2-t.cambia,.v2-s.cambia{opacity:0}
.v2-lista{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px;text-align:left;width:100%;max-width:240px;transition:opacity .3s var(--ease)}
.v2-lista:empty,.v2-lista.fuera{opacity:0;height:0;margin:0;overflow:hidden}
.v2-lista li{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--t3);transition:color .3s var(--ease)}
.v2-lista li b{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
.v2-lista li b svg{width:11px;height:11px;stroke:#000;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.v2-lista li.ahora{color:#fff}
.v2-lista li.ahora b{border-color:var(--verde);animation:v2late 1s ease-in-out infinite}
.v2-lista li.hecho{color:#fff}
.v2-lista li.hecho b{background:var(--verde);border-color:var(--verde);animation:none}
.v2-lista li.hecho b svg{opacity:1}
@keyframes v2onda{0%{transform:scale(.42);opacity:.75}100%{transform:scale(1.3);opacity:0}}
@keyframes v2late{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
.btn.verde{background:var(--verde);color:#fff;pointer-events:none}
.btn.verde svg{width:18px;height:18px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:dibujar .45s var(--ease) forwards}
/* Paso aprobado en verde (Solicitud en la pantalla de reserva) */
.v-a .np li.aprobada .np-dot{background:var(--verde);border-color:var(--verde);color:#fff}
.v-a .np li.aprobada .np-t{color:var(--verde);font-weight:700}
.v-a .np li.aprobada + li::before{background:var(--verde)}
.pill-verde{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:6px 12px;border-radius:50px;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.1);font-size:12px;line-height:1.2;color:#86efac}
.pill-verde i{width:6px;height:6px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:v2late 1.6s ease-in-out infinite}
.pill-verde + .titulo{margin-top:12px}
@media (prefers-reduced-motion:reduce){.v2-onda,.v2-nucleo i,.v2-lista li.ahora b,.pill-verde i{animation:none}.v2-estado.ok .v2-nucleo svg{stroke-dashoffset:0;animation:none}}