/* Umami Labs · efectos de la parte media y baja */

/* ---- tarjetas en cascada ---- */
.rv{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.fugas .rv,.niches .rv,.perks .rv,.steps .rv,.agents .rv,.law .rv,.works .rv,.levels .rv{transform:translateY(40px) scale(.97)}
.fugas .rv.in,.niches .rv.in,.perks .rv.in,.steps .rv.in,.agents .rv.in,.law .rv.in,.works .rv.in,.levels .rv.in{transform:none}

/* ---- capturas que se revelan ---- */
.wipe{clip-path:inset(0 100% 0 0 round 14px);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.wipe.in{clip-path:inset(0 0 0 0 round 14px)}
.ph.wipe{clip-path:inset(100% 0 0 0 round 30px)}
.ph.wipe.in{clip-path:inset(0 0 0 0 round 30px);transition-delay:.35s}

/* ---- galería de Franjose que pasa sola ---- */
.tabs button{position:relative;overflow:hidden}
.tabs button .tb{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red)}
.tabs button[aria-selected="true"] .tb{animation:tabbar 4.5s linear forwards}
.tabs.paused button .tb{animation:none;width:0}
@keyframes tabbar{to{width:100%}}
#gal-img{transition:opacity .35s,transform .6s cubic-bezier(.2,.8,.2,1)}
#gal-img.swap{opacity:0;transform:scale(1.03)}

/* ---- trabajos en horizontal (ordenador) ---- */
.hs-on .hscroll{position:relative}
.hs-on .hs-sticky{position:sticky;top:66px;height:calc(100vh - 66px);display:flex;align-items:center;overflow:hidden}
.hs-on .works{display:flex;gap:24px;margin-top:0;will-change:transform;padding-right:24px}
.hs-on .works .work{flex:none;width:min(560px,44vw)}
.hs-count{display:none}
.hs-on .hs-count{display:flex;align-items:center;gap:14px;margin-top:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hs-count .tr{width:160px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.hs-count .tr i{display:block;height:100%;width:0;background:var(--red)}
/* móvil: se desliza con el dedo */
@media (max-width:1020px){
  .works{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .works::-webkit-scrollbar{display:none}
  .works .work{flex:none;width:86%;scroll-snap-align:center}
  .swipe-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .swipe-hint i{display:inline-block;animation:nudge 1.4s infinite}
}
.swipe-hint{display:none}
@keyframes nudge{50%{transform:translateX(8px)}}

/* ---- Bronce, Plata y Oro: tres lingotes a la misma altura ---- */
.levels{align-items:stretch;gap:18px}
.level{position:relative;overflow:hidden;isolation:isolate;border-top:0;padding:28px 26px 30px;border-radius:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 22px 40px -26px rgba(22,21,27,.5)}
.level.b{background:linear-gradient(150deg,#F6D6B8 0%,#D9A273 45%,#B57A4B 100%)}
.level.p{background:linear-gradient(150deg,#FBFAFD 0%,#D9D7E0 45%,#AFADB9 100%)}
.level.o{background:linear-gradient(150deg,#FFF0B8 0%,#EBC14E 45%,#C9961F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 26px 60px -22px rgba(216,166,49,.85)}
.level::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 45%,transparent 60%);transform:translateX(-120%);animation:shine 3.6s 1.2s infinite}
.level.p::after{animation-delay:1.5s}.level.o::after{animation-delay:1.8s}
@keyframes shine{40%,100%{transform:translateX(120%)}}
.level .stars{font-size:20px;letter-spacing:.15em;color:rgba(22,21,27,.7)}
.level h3{font-size:30px;margin:0;letter-spacing:-.02em}
.level p{font-size:15.5px;line-height:1.5;color:rgba(22,21,27,.82)}
.level .badge8{align-self:flex-start;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#FFD66B;padding:5px 10px;border-radius:999px}
.levels .level.rv{transform:translateY(60px) rotateX(18deg);transform-origin:50% 100%;opacity:0}
.levels .level.rv.in{transform:none;opacity:1}
@media (max-width:760px){.levels{grid-template-columns:1fr}.level h3{font-size:26px}}

/* ---- cuenta atrás de Verifactu ---- */
.clock{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.clock > div{border:1px solid var(--dk3);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(255,106,74,.08),transparent)}
.clock .mono{color:var(--red3);font-size:11.5px}
.clock .digits{display:flex;gap:10px;flex-wrap:wrap}
.clock .digits span{display:flex;flex-direction:column;align-items:center;min-width:66px;background:#0D0C11;border-radius:12px;padding:10px 8px 8px;border:1px solid var(--dk3)}
.clock .digits b{font-family:var(--f-head);font-weight:700;font-size:30px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.clock .digits small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dkmute);margin-top:6px}
.clock .digits b.tick{animation:tick .35s}
@keyframes tick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}
@media (max-width:760px){.clock{grid-template-columns:1fr}.clock .digits span{min-width:58px}.clock .digits b{font-size:24px}}

/* ---- línea de pasos que se dibuja ---- */
.steps{position:relative}
.track-line{position:absolute;left:24px;right:24px;top:49px;height:3px;background:var(--line);border-radius:3px;z-index:0}
.track-line i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--red3));border-radius:3px}
.step{position:relative;z-index:1}
.step .n{transition:transform .5s cubic-bezier(.2,.9,.3,1.5),box-shadow .5s,background .3s;background:var(--mute)}
.step.lit .n{background:var(--red);transform:scale(1.18);box-shadow:0 0 0 8px rgba(229,72,42,.15)}
@media (max-width:760px){.track-line{display:none}}

/* ---- cita que se ilumina ---- */
.socio blockquote .qw{color:rgba(244,242,238,.18);transition:color .3s}
.socio blockquote .qw.on{color:#fff}
.socio blockquote .qw.on.hl{color:var(--red3)}

/* ---- precio fundador con borde de luz ---- */
.perk.hot{position:relative;overflow:hidden;isolation:isolate}
.perk.hot::before{content:'';position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,var(--red3) 80%,#FFD1C2 85%,transparent 92%);animation:spin 4s linear infinite}
.perk.hot::after{content:'';position:absolute;inset:2px;border-radius:calc(var(--r) - 2px);background:var(--ink);z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}
.seats{display:flex;gap:8px;margin-top:6px}
.seats i{width:22px;height:22px;border-radius:50%;border:2px solid var(--red3);position:relative;animation:seat 2.4s infinite}
.seats i:nth-child(2){animation-delay:.2s}.seats i:nth-child(3){animation-delay:.4s}.seats i:nth-child(4){animation-delay:.6s}.seats i:nth-child(5){animation-delay:.8s}
@keyframes seat{0%,60%,100%{background:transparent}30%{background:var(--red3)}}
.perk .n{transition:transform .4s}
.perk:hover .n{transform:translateX(6px)}

/* ---- preguntas que se abren suave ---- */
.faq details p{animation:faqIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq summary::after{transition:transform .3s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--red2)}

/* ---- contacto con texto gigante y fondo vivo ---- */
#contacto{overflow:hidden}
.bigword{position:absolute;left:0;bottom:-0.12em;white-space:nowrap;font-family:var(--f-head);font-weight:700;font-size:clamp(90px,17vw,260px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.12);pointer-events:none;z-index:-1;will-change:transform}
.contact .f{position:relative}
.blob{position:absolute;width:520px;height:520px;right:-120px;top:-80px;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;background:conic-gradient(from 0deg,#E5482A,#4A3AA8,#FF6A4A,#E5482A);animation:spin 14s linear infinite;pointer-events:none}
.f input,.f select,.f textarea{transition:border-color .2s,box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,42,.15);outline:none}
.ways a{transition:padding-left .3s,color .3s}
.ways a:hover{padding-left:10px;color:var(--red3)}

@media (prefers-reduced-motion:reduce){
  .wipe,.ph.wipe{clip-path:none!important}
  .level::after{animation:none}
  .levels .level.rv{transform:none;opacity:1}
  .perk.hot::before,.blob,.seats i{animation:none}
  .socio blockquote .qw{color:#fff}
  .track-line i{transform:none}
  .fugas .rv,.niches .rv,.perks .rv,.steps .rv,.agents .rv,.law .rv,.works .rv,.levels .rv{transform:none}
}