/* ============================================================
   SWEET LIVE — CAPA COMÚN DE ACABADO  (sl.css)
   Se carga en todas las páginas públicas DESPUÉS del <style> propio.
   Solo refina: accesibilidad, contraste, tacto, movimiento y menú móvil.
   No cambia la identidad (negro · blanco · #004ce8 · #ff001f · Airstrike).
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --nav-h:84px;
  interpolate-size:allow-keywords;
}
html{scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Superficies del navegador con la marca */
::selection{background:var(--blue);color:#fff}
html{scrollbar-color:#1c1c1c #000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#1c1c1c;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}
input,textarea,select{caret-color:var(--blue)}

/* Foco visible para teclado (antes no existía) */
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.session-card:focus-visible{outline-offset:-2px}
.session-card:focus-visible .session-play{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Enlace para saltar al contenido */
.skip-link{position:fixed;top:12px;left:12px;z-index:10001;background:var(--blue);color:#fff;padding:10px 16px;font:700 12px/1 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease-out)}
.skip-link:focus-visible{transform:none}

/* Botones: propiedades concretas + respuesta al pulsar */
.btn,.filter-btn,.form-submit,.nav-cta,.header-switch-btn,.mention-cta{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--ease-out)!important;
  -webkit-tap-highlight-color:transparent;
}
.btn:active,.filter-btn:active,.form-submit:active,.nav-cta:active,.header-switch-btn:active,.mention-cta:active{transform:scale(.97)!important}
.session-card:active,.social-card:active,.platform-card:active,.b2b-card:active{transform:scale(.99)}
.session-card,.social-card,.platform-card{transition:transform .2s var(--ease-out),background-color .3s ease,border-color .3s ease}
.form-submit{cursor:pointer}
.form-submit[disabled]{opacity:.5;cursor:not-allowed}

/* Hover de miniaturas: curvas propias */
.session-thumb{transition:transform .6s var(--ease-out),filter .4s ease!important}
.session-play{transition:opacity .25s ease,transform .3s var(--ease-out)!important}
.toast{transition:transform .35s var(--ease-drawer)!important}

/* En pantallas táctiles el hover se queda "pegado": lo neutralizamos */
@media (hover:none){
  .session-card:hover .session-thumb{transform:none;filter:brightness(.7) saturate(.8)}
  .session-card:hover .session-play{opacity:0}
  .session-card:hover .session-overlay{background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%)}
  .social-card:hover .social-arrow{transform:none}
}

/* Contraste: los textos secundarios estaban por debajo de 4.5:1 */
.hero-tagline,.pack-desc,.contact-info p,.contact-tagline{color:rgba(255,255,255,.62)!important}
.page-desc{color:rgba(255,255,255,.58)!important}
.stat-label,.social-handle,.session-duration,.pack-price-label{color:rgba(255,255,255,.55)!important}
.social-metric,.form-note,.footer-copy{color:rgba(255,255,255,.5)!important}
.footer-links a{color:rgba(255,255,255,.55)!important}
.footer-links a:hover{color:var(--blue)!important}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(255,255,255,.4)!important}
.faq-a{color:rgba(255,255,255,.62)!important}
.nav-links a{color:rgba(255,255,255,.62)}
.social-arrow{color:rgba(255,255,255,.3)}
.count-bar{color:rgba(255,255,255,.45)!important}

/* Números tabulares en cifras */
.stat-num,.count-num,.session-num{font-variant-numeric:tabular-nums}

/* FAQ nativo (<details>): accesible por teclado y visible para Google */
details.faq-item{background:#060606;padding:0;transition:background-color .2s ease}
details.faq-item:hover{background:#0a0a0a}
details.faq-item summary{list-style:none;cursor:pointer;padding:32px 30px}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item .faq-a{display:block!important;margin:0 30px;padding:16px 0 30px}
details.faq-item[open] .faq-arrow{transform:rotate(45deg)}
details.faq-item .faq-arrow{transition:transform .25s var(--ease-out)!important}
details.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease-out),content-visibility .3s allow-discrete}
details.faq-item[open]::details-content{block-size:auto}
.faq-grid{align-items:start}

/* Formularios: 16px en móvil para que iOS no haga zoom al escribir */
@media (max-width:900px){
  .form-input,.form-select,.form-textarea{font-size:16px!important;letter-spacing:.5px!important}
}

/* Sesiones: la tarjeta filtrada se oculta sin romper la rejilla */
.session-card[hidden]{display:none!important}

/* ── MENÚ MÓVIL ─────────────────────────────────────────────── */
.nav-toggle{display:none}
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex;align-items:center;gap:10px;position:relative;z-index:102;
    background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;
    font:700 12px/1 Arial,sans-serif;letter-spacing:2.5px;text-transform:uppercase;
    padding:0 16px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .2s ease,transform .16s var(--ease-out);
  }
  .nav-toggle:active{transform:scale(.97)}
  .nav-toggle-bars{position:relative;width:16px;height:10px}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
  .nav-toggle-bars::before{top:0}
  .nav-toggle-bars::after{top:8.5px}
  .nav-open .nav-toggle{border-color:var(--blue)}
  .nav-open .nav-toggle-bars::before{top:4.25px;transform:rotate(45deg)}
  .nav-open .nav-toggle-bars::after{top:4.25px;transform:rotate(-45deg)}

  .nav .nav-links{
    display:flex!important;position:fixed;inset:0;z-index:101;flex-direction:column;justify-content:center;gap:0;
    padding:100px 24px calc(40px + env(safe-area-inset-bottom));background:#000;
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .45s var(--ease-drawer),visibility 0s linear .45s;
  }
  .nav-open .nav .nav-links{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease-drawer),visibility 0s}
  .nav .nav-links li{border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease}
  .nav-open .nav .nav-links li{opacity:1;transform:none;transition:opacity .4s ease,transform .5s var(--ease-out)}
  .nav-open .nav .nav-links li:nth-child(1){transition-delay:.08s}
  .nav-open .nav .nav-links li:nth-child(2){transition-delay:.12s}
  .nav-open .nav .nav-links li:nth-child(3){transition-delay:.16s}
  .nav-open .nav .nav-links li:nth-child(4){transition-delay:.2s}
  .nav-open .nav .nav-links li:nth-child(5){transition-delay:.24s}
  .nav .nav-links a{display:block;padding:18px 0;font-family:'Airstrike',sans-serif;font-size:clamp(34px,10vw,52px);letter-spacing:1px;color:#fff;line-height:1}
  .nav .nav-links a.active{color:var(--blue)}
  .nav .nav-links .nav-cta{background:transparent!important;color:var(--blue)!important;padding:18px 0!important;font-weight:400!important}
  .nav-open{overflow:hidden}
  /* backdrop-filter crea un bloque contenedor: se quita al abrir para que el panel ocupe la pantalla */
  .nav-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000}
  .nav-logo{position:relative;z-index:102}
}

/* ── MOMENTO DE ENTRADA (solo portada) ─────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .hero-title .t-sweet,.hero-title .t-line2{animation:sl-reveal .9s var(--ease-out) both}
  .hero-title .t-line2{animation-delay:.09s}
  .hero-sub,.hero-ctas{animation:sl-rise .7s var(--ease-out) .25s both}
  .hero-ctas{animation-delay:.32s}
}
@keyframes sl-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes sl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Movimiento reducido: fuera desplazamientos, se mantienen fundidos */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .scroll-hint{animation:none!important;opacity:.5}
}

/* El subtítulo de portada ahora forma parte del <h1> (SEO): conserva su aspecto original */
.hero-title .hero-eyebrow{font-family:Arial,sans-serif;font-size:11px;line-height:1.4;letter-spacing:5px;font-weight:400}
.session-name{font-weight:400}
@media (max-width:900px){
  .count-bar{flex-wrap:wrap;gap:6px 20px}
  .count-bar>span:first-child{white-space:nowrap}
}
@media (max-width:580px){.count-bar>span:last-child{display:none}}

/* Aviso inferior: se esconde por completo aunque el texto ocupe dos líneas en móvil */
.toast{transform:translateX(-50%) translateY(calc(100% + 40px));visibility:hidden;max-width:calc(100vw - 32px);text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);visibility:visible}
@media (max-width:580px){.hero-title .hero-eyebrow{letter-spacing:3px}}

/* ══ Segunda pasada: Taste · Make Interfaces Feel Better ══ */

/* Texto: titulares equilibrados, párrafos sin palabras huérfanas */
h1,h2,h3,.section-title,.page-title,.pack-title,.pack-name,.faq-title,.b2b-title,.bottom-cta-title,.value-title{text-wrap:balance}
p,li,.pack-tagline,.faq-a,.platform-desc,.b2b-card-desc,.policy-item-text,.value-text{text-wrap:pretty}

/* Pulsación: 0.96 (valor de MIFB) */
.btn:active,.filter-btn:active,.form-submit:active,.nav-cta:active,.header-switch-btn:active,.mention-cta:active,.nav-toggle:active{transform:scale(.96)!important}

/* Miniaturas: contorno 1px blanco al 10% para un borde limpio sobre negro */
.session-thumb{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}

/* Portada: 100dvh evita saltos con la barra de Safari en iPhone */
#portada{min-height:100vh;min-height:100dvh}

/* Áreas táctiles de 44px en móvil */
@media (max-width:900px){
  .filter-btn{min-height:44px}
  .footer-links{display:flex!important;flex-wrap:wrap;gap:4px 22px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* Sesiones: aparecen al entrar en pantalla (CSS puro, sin JS; solo navegadores compatibles) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sessions-grid .session-card{animation:sl-card linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes sl-card{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}