/*
 * Gymetric — estilos del website público (gymetric.app)
 *
 * Extraído del <style> inline de resources/views/website/home.blade.php.
 * Es CSS puro: no usa sintaxis Blade ni url() a imágenes, así que puede
 * servirse como archivo estático. Ver docs/DEPLOY_WEBSITE.md.
 */

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ overscroll-behavior-y:none; }
body{ background:#ffffff; }
::selection{ background:#C6EF43; color:#0F2A47; }
#main-header{ transition:background 0.3s ease, box-shadow 0.3s ease; }
#main-nav{ transition:background 0.3s ease, border-color 0.3s ease; }
#main-nav{ position:relative; }
#main-nav a{ position:relative; z-index:2; border-radius:100px; transition:color .3s ease; }
#nav-pill{
  position:absolute;
  top:7px;
  bottom:7px;
  left:0;
  z-index:1;
  width:0;
  border-radius:100px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
#header-cta{ transition:background 0.22s ease, color 0.22s ease, border-color 0.22s ease; cursor:pointer; }
#header-cta:hover{ background:#C6EF43 !important; color:#0F2A47 !important; border-color:#C6EF43 !important; }
#beneficios{ margin-top:-20px; }
#beneficios-cards > div,
#modulos-cards > div{
  transition:border-color .28s ease, box-shadow .28s ease;
}
@media(hover:hover){
  #beneficios-cards > div:hover,
  #modulos-cards > div:hover{
    border-color:#C6EF43 !important;
    box-shadow:0 0 0 1px rgba(198,239,67,.18), 0 16px 38px -24px rgba(91,138,46,.65) !important;
  }
}
.scroll-reveal{
  opacity:0;
  translate:0 34px;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, translate;
}
.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}
@media(prefers-reduced-motion:reduce){
  .scroll-reveal{
    opacity:1;
    translate:none;
    transition:none;
  }
  #mob-overlay, #mob-close-btn, #mob-overlay nav a, #mob-overlay .mob-cta{ transition:none; }
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-9px) rotate(-3deg); } }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.12); } }
@keyframes heroAccessProgress{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

/* ── HERO CARD STACK ──
   La tarjeta de analítica funciona como plano base y las notificaciones
   cruzan sus bordes. Las sombras cortas separan las capas; los halos
   amplios aportan luz sin añadir elementos al fondo del hero. */
#hero-mockup{
  isolation:isolate;
  background:
    radial-gradient(circle at 48% 49%, transparent 0 35.5%, rgba(198,239,67,.14) 35.8%, rgba(198,239,67,.14) 36.05%, transparent 36.35%),
    radial-gradient(circle at 48% 49%, transparent 0 52%, rgba(198,239,67,.22) 52.25%, rgba(198,239,67,.22) 52.5%, transparent 52.8%);
}
#hero-mockup::before,
#hero-mockup::after{
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  filter:blur(46px);
}
#hero-mockup::before{
  width:330px;
  height:250px;
  left:54px;
  top:190px;
  background:rgba(255,255,255,.12);
}
#hero-mockup::after{
  width:270px;
  height:190px;
  right:-12px;
  bottom:34px;
  background:rgba(198,239,67,.2);
}
#hero-mockup > div{
  transform:translateZ(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;
}
#hero-access-card{
  min-height:72px !important;
  padding:9px 14px !important;
}
#hero-access-card > div:first-child{
  min-height:54px;
}
#hero-access-card > div:first-child > div:first-child{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
}
#hero-access-card > div:first-child > *{
  align-self:center !important;
}
#hero-access-card > div:first-child > div:nth-child(3){
  padding-top:0 !important;
}
#hero-access-card > div:last-child{
  width:42% !important;
  transform:none !important;
  animation:none !important;
}

@media(min-width:1301px){
  #hero-mockup{ height:610px !important; }
  #hero-attendance-card{
    top:124px !important;
    left:18px !important;
    width:455px !important;
    border-radius:23px !important;
    box-shadow:
      0 2px 5px rgba(15,42,71,.12),
      0 30px 66px -28px rgba(6,22,39,.7),
      -18px 30px 62px -38px rgba(198,239,67,.78),
      0 0 34px -25px rgba(255,255,255,.9) !important;
  }
  #hero-reader-card{
    top:24px !important;
    right:0 !important;
    width:344px !important;
    z-index:5 !important;
    box-shadow:
      0 2px 5px rgba(15,42,71,.14),
      0 25px 52px -24px rgba(6,22,39,.72),
      -14px 18px 38px -25px rgba(198,239,67,.8) !important;
  }
  #hero-members-card{
    top:372px !important;
    right:0 !important;
    width:365px !important;
    z-index:4 !important;
    box-shadow:
      0 4px 9px rgba(15,42,71,.18),
      0 38px 82px -25px rgba(6,22,39,.84),
      0 18px 38px -24px rgba(6,22,39,.52),
      20px 28px 56px -34px rgba(198,239,67,.76) !important;
  }
  #hero-access-card{
    top:506px !important;
    left:38px !important;
    width:292px !important;
    z-index:6 !important;
    box-shadow:
      0 3px 7px rgba(15,42,71,.16),
      0 28px 56px -22px rgba(6,22,39,.7),
      0 24px 54px -20px rgba(198,239,67,.86),
      0 0 26px -14px rgba(198,239,67,.52) !important;
  }
}

@media(hover:hover) and (min-width:1301px){
  #hero-reader-card:hover{ transform:translate3d(0,-4px,0); }
  #hero-members-card:hover{ transform:translate3d(0,-4px,0); }
  #hero-access-card:hover{ transform:translate3d(0,-4px,0); }
}
@keyframes modulosSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes modulosSpinRev{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
.modulos-arc-spin,
.modulos-arc-spin-rev,
.modulos-ticks{
  transform-box:view-box;
  transform-origin:center;
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.modulos-arc-spin{ animation:modulosSpin 7s linear infinite; }
.modulos-arc-spin-rev{ animation:modulosSpinRev 11s linear infinite; }
.modulos-ticks{ animation:modulosSpin 26s linear infinite; }

/* Safari anterior a 16.4 no soporta la propiedad individual `translate`. */
@supports not (translate:0 1px){
  .scroll-reveal{ translate:none; }
  .scroll-reveal.is-visible{ translate:none; }
}

/* ── MOBILE NAV ── */
#mob-menu-btn{ display:none; width:40px; height:40px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); border-radius:10px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; flex-shrink:0; }
#mob-menu-btn span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; }
#mob-overlay{
  display:flex;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(15,42,71,.985);
  flex-direction:column;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  translate:0 -14px;
  transition:opacity .34s cubic-bezier(.22,1,.36,1), translate .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
  will-change:opacity, translate;
}
#mob-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  translate:0 0;
  transition-delay:0s;
}
#mob-close-btn{ align-self:flex-end; width:38px; height:38px; background:rgba(255,255,255,0.1); border:none; border-radius:10px; cursor:pointer; color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; opacity:0; transform:rotate(-18deg) scale(.86); transition:opacity .3s ease .08s, transform .38s cubic-bezier(.22,1,.36,1) .08s, background .22s ease; }
#mob-overlay.open #mob-close-btn{ opacity:1; transform:rotate(0) scale(1); }
#mob-close-btn:hover{ background:rgba(255,255,255,.17); }
#mob-overlay nav{ display:flex; flex-direction:column; gap:4px; margin-top:36px; flex:1; }
#mob-overlay nav a{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; color:rgba(255,255,255,0.7); text-decoration:none; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.07); opacity:0; translate:0 18px; transition:opacity .28s ease, translate .38s cubic-bezier(.22,1,.36,1), color .22s ease; }
#mob-overlay.open nav a{ opacity:1; translate:0 0; }
#mob-overlay.open nav a:nth-child(1){ transition-delay:.06s; }
#mob-overlay.open nav a:nth-child(2){ transition-delay:.10s; }
#mob-overlay.open nav a:nth-child(3){ transition-delay:.14s; }
#mob-overlay.open nav a:nth-child(4){ transition-delay:.18s; }
#mob-overlay.open nav a:nth-child(5){ transition-delay:.22s; }
#mob-overlay nav a:first-child{ color:#fff; }
#mob-overlay .mob-cta{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:#0F2A47; background:#C6EF43; padding:15px 26px; border-radius:100px; text-decoration:none; margin-top:28px; align-self:flex-start; opacity:0; translate:0 16px; transition:opacity .3s ease, translate .4s cubic-bezier(.22,1,.36,1), box-shadow .22s ease; }
#mob-overlay.open .mob-cta{ opacity:1; translate:0 0; transition-delay:.25s; }

/* ── BIOMETRÍA: composición editorial, sin mosaico de cards ── */
#biometria-grid{
  display:flex !important;
  flex-direction:column;
  gap:0 !important;
}
#biometria-grid > div{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:16px;
  row-gap:5px;
  padding:21px 0 !important;
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.15) !important;
  border-radius:0 !important;
}
#biometria-grid > div:last-child{
  border-bottom:1px solid rgba(255,255,255,.15) !important;
}
#biometria-grid > div > div:first-child{
  grid-column:1;
  grid-row:1 / span 2;
  width:40px !important;
  height:40px !important;
  margin:0 !important;
  border-radius:11px !important;
}
#biometria-grid > div > h3{
  grid-column:2;
  grid-row:1;
  margin:1px 0 0 !important;
  line-height:1.25;
}
#biometria-grid > div > p{
  grid-column:2;
  grid-row:2;
  max-width:560px;
}
#biometria-device-stage{ display:contents; }
@media(min-width:1250px){
  #biometria-inner{
    display:grid;
    grid-template-columns:230px minmax(260px,.82fr) minmax(420px,1.18fr);
    align-items:center;
    gap:38px;
    padding:62px !important;
  }
  #biometria-device-stage{
    position:relative;
    isolation:isolate;
    display:flex;
    width:230px;
    height:278px;
    align-items:center;
    justify-content:center;
    justify-self:center;
  }
  #biometria-device-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    left:28px;
    right:28px;
    bottom:34px;
    height:18px;
    border-radius:50%;
    background:rgba(198,239,67,.18);
    filter:blur(12px);
  }
  #biometria-device{
    position:relative !important;
    z-index:1;
    width:205px !important;
    top:auto !important;
    right:auto !important;
    transform:translateY(-9px);
    filter:drop-shadow(0 28px 28px rgba(0,0,0,.48)) !important;
  }
  #biometria-header{
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* ── TABLET (≤1100px) ── */
@media(max-width:1100px){
  #header-inner{ padding:18px 28px !important; }
  #main-nav{ display:none !important; }
  #header-cta{ display:none !important; }
  #mob-menu-btn{ display:flex; }

  #inicio{ grid-template-columns:1fr !important; padding:80px 28px 60px !important; gap:0 !important; }
  #hero-mockup{
    display:block !important;
    width:min(100%, 600px) !important;
    height:520px !important;
    margin:44px auto 0 !important;
    background:
      radial-gradient(circle at 48% 50%, transparent 0 36%, rgba(198,239,67,.13) 36.3%, rgba(198,239,67,.13) 36.6%, transparent 36.9%),
      radial-gradient(circle at 48% 50%, transparent 0 52%, rgba(198,239,67,.18) 52.3%, rgba(198,239,67,.18) 52.6%, transparent 52.9%) !important;
  }
  #hero-mockup::before,
  #hero-mockup::after{ display:none; }
  #hero-mockup > div{
    position:absolute !important;
    transform:none !important;
  }
  #hero-attendance-card{
    top:84px !important;
    left:0 !important;
    right:auto !important;
    width:76% !important;
  }
  #hero-reader-card{
    top:8px !important;
    right:0 !important;
    left:auto !important;
    width:56% !important;
    min-height:86px !important;
  }
  #hero-members-card{
    top:292px !important;
    right:0 !important;
    left:auto !important;
    width:60% !important;
  }
  #hero-access-card{
    top:430px !important;
    left:5% !important;
    right:auto !important;
    width:48% !important;
  }
  #inicio h1{ font-size:36px !important; line-height:1.1 !important; }
  #hero-wave{ height:170px !important; }

  #beneficios{ margin-top:-8px !important; padding:56px 28px 80px !important; }
  #beneficios-grid{ grid-template-columns:1fr !important; }
  #beneficios-cards{ grid-template-columns:1fr 1fr !important; }

  #modulos > div{ padding:0 28px !important; }
  #modulos-diagram{ max-width:760px !important; }

  #app-movil > div{ padding:0 28px !important; }
  #app-header h2{ font-size:34px !important; }
  #app-card-wrap{ margin-top:105px !important; }
  #app-inner{ display:block !important; min-height:0 !important; padding:290px 36px 52px !important; }
  #app-cta-block{ width:100% !important; flex-direction:column !important; align-items:center !important; gap:24px !important; max-width:680px !important; margin:0 auto !important; text-align:center; }
  #app-cta-block > div{ width:100%; }
  #app-cta-block > a{ white-space:normal !important; }
  #app-phone-col{ left:50% !important; right:auto !important; bottom:auto !important; top:-92px !important; transform:translateX(-50%) !important; }
  #app-phone-col img{ width:250px !important; }

  #como-funciona > div{ padding:0 20px !important; }
  #steps-timeline{ grid-template-columns:1fr 1fr !important; gap:36px 0 !important; }
  #steps-timeline > div[style*="position:absolute"]{ display:none !important; }

  #faq-grid{ grid-template-columns:1fr !important; gap:0 !important; }

  #biometria-grid{ grid-template-columns:1fr !important; }
  #biometria-inner{ padding:42px 32px !important; }
  #biometria-device{ width:190px !important; right:22px !important; top:22px !important; }
  #biometria-header{ max-width:650px !important; padding-right:150px; }

  #demo > div{ padding:0 20px !important; }
  #demo-inner{ grid-template-columns:1fr !important; padding:52px 36px !important; gap:42px !important; }
  #demo-inner h2{ font-size:34px !important; }

  #footer-inner{ padding:0 28px !important; }
  #footer-grid{ grid-template-columns:1fr 1fr !important; gap:36px !important; }
}

/* En escritorios compactos se conserva el collage, reduciendo cada capa
   de forma independiente para no convertir el mockup en una lista. */
@media(min-width:1101px) and (max-width:1300px){
  #hero-mockup{
    height:570px !important;
    min-width:0;
  }
  #hero-mockup > div{
    position:absolute !important;
  }
  #hero-attendance-card{
    top:114px !important;
    left:0 !important;
    width:min(82%, 410px) !important;
  }
  #hero-reader-card{
    top:22px !important;
    right:0 !important;
    width:min(76%, 324px) !important;
  }
  #hero-members-card{
    top:344px !important;
    right:0 !important;
    width:min(76%, 340px) !important;
    box-shadow:
      0 4px 9px rgba(15,42,71,.18),
      0 34px 74px -24px rgba(6,22,39,.82),
      0 16px 34px -22px rgba(6,22,39,.48),
      16px 24px 48px -32px rgba(198,239,67,.7) !important;
  }
  #hero-access-card{
    top:484px !important;
    left:12px !important;
    width:min(66%, 288px) !important;
  }
}

/* ── HERO PHONE COLLAGE (≤600px) ── */
@media(max-width:600px){
  #hero-mockup{
    width:min(100%, 360px) !important;
    height:445px !important;
    margin-top:38px !important;
    background:
      radial-gradient(circle at 50% 48%, transparent 0 40%, rgba(198,239,67,.13) 40.4%, rgba(198,239,67,.13) 40.8%, transparent 41.2%) !important;
  }
  #hero-attendance-card{
    top:78px !important;
    left:-4px !important;
    width:100% !important;
    border-radius:17px !important;
  }
  #hero-attendance-card > div:first-child{
    padding:11px 12px 10px !important;
  }
  #hero-attendance-card > div:first-child > div:first-child > div:first-child{
    font-size:8px !important;
  }
  #hero-attendance-card > div:first-child > div:first-child > div:last-child{
    font-size:15px !important;
  }
  #hero-attendance-card > div:first-child > div:last-child{
    display:none !important;
  }
  #hero-attendance-card > div:last-child{
    padding:8px 10px 9px !important;
  }
  #hero-reader-card{
    top:0 !important;
    right:8px !important;
    width:84% !important;
    min-height:68px !important;
    padding:8px 10px 9px 9px !important;
    border-left-width:5px !important;
    border-radius:14px !important;
  }
  #hero-reader-card > div:first-child{
    grid-template-columns:30px minmax(0,1fr) 14px !important;
    column-gap:7px !important;
    align-items:center !important;
  }
  #hero-reader-card > div:first-child > div:first-child{
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
  }
  #hero-reader-card > div:first-child > div:nth-child(3){
    display:none !important;
  }
  #hero-reader-card > div:first-child > i{
    width:15px !important;
    height:15px !important;
  }
  #hero-reader-card > div:first-child > div:nth-child(2) > div:first-child{
    margin-bottom:2px !important;
    font-size:8px !important;
  }
  #hero-reader-card > div:first-child > div:nth-child(2) > div:nth-child(2){
    font-size:13px !important;
  }
  #hero-reader-card > div:first-child > div:nth-child(2) > div:last-child{
    margin-top:2px !important;
    font-size:9px !important;
  }
  #hero-members-card{
    top:272px !important;
    right:-8px !important;
    width:90% !important;
    border-radius:15px !important;
    box-shadow:
      0 3px 8px rgba(15,42,71,.18),
      0 18px 34px -12px rgba(6,22,39,.5),
      10px 16px 30px -22px rgba(198,239,67,.48) !important;
  }
  #hero-members-card > div{
    grid-template-columns:34px 3px minmax(0,1fr) auto 13px !important;
    gap:6px !important;
    padding:8px 9px !important;
  }
  #hero-members-card > div > div:first-child{
    font-size:11px !important;
  }
  #hero-members-card > div > div:nth-child(2){
    width:3px !important;
    height:30px !important;
  }
  #hero-members-card > div > div:nth-child(3) > div:first-child{
    font-size:11px !important;
  }
  #hero-members-card > div > span{
    gap:4px !important;
    padding:4px 6px !important;
    font-size:8px !important;
  }
  #hero-members-card > div:nth-child(3){
    display:none !important;
  }
  #hero-access-card{
    top:376px !important;
    left:8px !important;
    width:82% !important;
    min-height:62px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
  }
  #hero-access-card > div:first-child{
    min-height:46px !important;
    gap:8px !important;
  }
  #hero-access-card > div:first-child > div:first-child{
    width:36px !important;
    height:36px !important;
    border-radius:10px !important;
  }
  #hero-access-card > div:first-child > div:nth-child(2) > div:first-child{
    font-size:14px !important;
  }
  #hero-access-card > div:first-child > div:nth-child(2) > div:last-child{
    margin-top:2px !important;
    font-size:10px !important;
  }
  #hero-access-card > div:first-child > div:nth-child(3){
    font-size:10px !important;
  }
  #hero-access-card > div:first-child > i{
    width:16px !important;
    height:16px !important;
  }
}

/* ── MOBILE (≤768px) ── */
@media(max-width:768px){
  #beneficios{ margin-top:0 !important; }
  #beneficios h2{ font-size:28px !important; }
  #beneficios-cards{ grid-template-columns:1fr !important; }

  #modulos{ padding:56px 0 56px !important; }
  #modulos > div{ padding:0 20px !important; }
  #modulos-header{ margin-bottom:32px !important; }
  #modulos-header h2{ font-size:28px !important; }
  #modulos-diagram{ display:flex !important; flex-direction:column !important; align-items:center !important; aspect-ratio:auto !important; max-width:100% !important; margin-bottom:34px !important; zoom:1 !important; overflow:visible; }
  #modulos-lines{ display:none !important; }
  .modulos-overlay-dot{ display:none !important; }
  #modulos-hub{ width:100px !important; margin-bottom:38px !important; }
  #modulos-cards{
    display:flex !important;
    gap:12px !important;
    width:100% !important;
    padding:2px 0 4px;
    position:relative;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:13%;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    clip-path:inset(0 12%);
  }
  #modulos-cards::-webkit-scrollbar{ display:none; }
  #modulos-cards::before,
  #modulos-cards::after{
    content:"";
    flex:0 0 calc(13% - 12px);
    height:1px;
  }
  #modulos-hub::after{
    content:"";
    position:absolute;
    z-index:0;
    bottom:-40px;
    height:40px;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(180deg, #C6EF43, rgba(15,42,71,.3));
  }
  #modulos-cards > div{
    flex:0 0 74%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    margin:0 !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:auto !important;
    min-width:0;
    padding:13px 15px !important;
    justify-content:center !important;
    border-color:rgba(15,42,71,.12) !important;
    border-radius:15px !important;
    box-shadow:none !important;
    z-index:1;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  #modulos-cards > div.is-carousel-active{
    border-color:rgba(198,239,67,.8) !important;
    box-shadow:0 0 0 1px rgba(198,239,67,.12) !important;
  }
  #modulos-carousel-nav{
    display:flex !important;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:14px;
  }
  #modulos-carousel-nav button{
    width:38px;
    height:38px;
    border:1px solid #0F2A47;
    border-radius:50%;
    background:#0F2A47;
    color:#fff;
    font:700 17px 'Manrope',sans-serif;
    cursor:pointer;
    outline:none;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 8px 18px -12px rgba(15,42,71,.75);
    transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  #modulos-carousel-nav button:hover{
    background:#C6EF43;
    color:#0F2A47;
    border-color:#C6EF43;
    transform:translateY(-1px);
    box-shadow:0 10px 22px -12px rgba(15,42,71,.72);
  }
  #modulos-carousel-nav button:active{
    transform:scale(.94);
    box-shadow:none;
  }
  #modulos-carousel-nav button:focus-visible{
    outline:2px solid #C6EF43;
    outline-offset:3px;
  }
  #modulos-carousel-status{
    min-width:54px;
    text-align:center;
    color:#435058;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
  }
  #modulos-features{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
    padding:17px 10px !important;
    background:#0F2A47 !important;
    border:0 !important;
    border-radius:18px !important;
  }
  #modulos-features > div{
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:8px !important;
    padding:0 7px !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    text-align:center;
  }
  #modulos-features > div:first-child{ border-left:0 !important; }
  #modulos-features > div > i,
  #modulos-features > div > svg{
    width:22px !important;
    height:22px !important;
  }
  #modulos-features > div > div > div:first-child{
    color:#fff !important;
    font-size:11px !important;
    line-height:1.2;
  }
  #modulos-features > div > div > div:last-child{
    display:none;
  }

  #app-header h2{ font-size:26px !important; }
  #app-movil{ padding:72px 0 72px !important; }
  #app-card-wrap{ margin-top:72px !important; }
  #app-inner{ border-radius:24px !important; padding:276px 20px 38px !important; }
  #app-cta-block{ gap:20px !important; }
  #app-cta-block h3{ font-size:22px !important; line-height:1.2 !important; margin-bottom:14px !important; }
  #app-cta-block p{ font-size:14px !important; line-height:1.6 !important; }
  #app-cta-block > a{ width:100%; max-width:280px; justify-content:center; }
  #app-phone-col{ top:-48px !important; }
  #app-phone-col img{ width:210px !important; }

  #como-funciona > div{ padding:0 12px !important; }
  #steps-timeline{ grid-template-columns:1fr !important; gap:32px !important; }
  #como-funciona h2{ font-size:24px !important; }

  #faq-section h2{ font-size:26px !important; }
  #faq-wrapper{ padding:60px 20px 30px !important; }

  #biometria{ padding:64px 20px 0 !important; }
  #biometria-inner{ padding:34px 22px !important; border-radius:24px !important; }
  #biometria-header h2{ font-size:27px !important; }
  #biometria-device{ position:relative !important; width:180px !important; top:auto !important; right:auto !important; display:block; margin:-8px auto 20px; }
  #biometria-header{ padding-right:0; text-align:center; }

  #demo-inner{ padding:44px 24px !important; }
  #demo-inner h2{ font-size:26px !important; }
  #demo-form-grid{ grid-template-columns:1fr !important; }
  .demo-field.full{ grid-column:auto; }
  #demo-form-card{ padding:24px 18px !important; }

  #footer-grid{ grid-template-columns:1fr !important; }
  #footer-inner{ padding:0 20px !important; }

  #wa-float{ bottom:18px !important; right:18px !important; padding:14px !important; }
  #wa-float-text{ display:none !important; }

  #beneficios{ padding:48px 20px 72px !important; }
  #inicio{ padding:80px 20px 56px !important; }
  #como-funciona > div{ padding:0 12px !important; }
}

/* Timeline compacto para móvil y previews en orientación vertical. */
@media(max-width:900px){
  #como-funciona{
    padding:64px 0 28px !important;
  }
  #como-funciona > div{
    padding:0 20px !important;
  }
  #como-funciona > div > div:first-child{
    margin-bottom:38px !important;
  }
  #como-funciona h2{
    max-width:520px;
    margin-inline:auto !important;
    font-size:27px !important;
    line-height:1.14 !important;
  }
  #steps-timeline{
    display:flex !important;
    flex-direction:column;
    gap:0 !important;
    max-width:580px;
    margin:0 auto;
    position:relative;
  }
  #steps-connector,
  #steps-timeline > div[style*="position:absolute"]{
    display:none !important;
  }
  #steps-timeline::before{
    content:"";
    position:absolute;
    z-index:0;
    top:23px;
    bottom:23px;
    left:23px;
    width:2px;
    background:linear-gradient(180deg, rgba(198,239,67,.85), rgba(15,42,71,.14));
  }
  #steps-timeline .timeline-step{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    row-gap:5px;
    padding:0 0 28px !important;
    text-align:left !important;
  }
  #steps-timeline .timeline-step:last-child{
    padding-bottom:0 !important;
  }
  #steps-timeline .timeline-step > div:first-child{
    grid-column:1;
    grid-row:1 / span 2;
    width:46px !important;
    height:46px !important;
    margin:0 !important;
    font-size:18px !important;
    box-shadow:0 0 0 6px #F3F5F4 !important;
  }
  #steps-timeline .timeline-step > div:nth-child(2){
    grid-column:2;
    grid-row:1;
    margin:1px 0 0 !important;
    font-size:17px !important;
    line-height:1.25;
  }
  #steps-timeline .timeline-step > div:nth-child(3){
    grid-column:2;
    grid-row:2;
    font-size:14px !important;
    line-height:1.5 !important;
  }
}

/* ── FAQ accordion ── */
.faq-item{ background:#fff; border:1px solid rgba(15,42,71,0.10); border-radius:16px; margin-bottom:14px; transition:border-color .25s ease, box-shadow .25s ease; }
.faq-item.open{ border-color:rgba(198,239,67,0.9); box-shadow:0 14px 34px -18px rgba(15,42,71,0.28); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:20px 22px; cursor:pointer; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16.5px; color:#161616; line-height:1.35; }
.faq-icon{ width:30px; height:30px; min-width:30px; border-radius:9px; background:#F1F2EE; display:flex; align-items:center; justify-content:center; position:relative; transition:background .25s ease; }
.faq-item.open .faq-icon{ background:#C6EF43; }
.faq-icon::before, .faq-icon::after{ content:''; position:absolute; background:#0F2A47; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.faq-icon::before{ width:13px; height:2px; }
.faq-icon::after{ width:2px; height:13px; }
.faq-item.open .faq-icon::after{ transform:rotate(90deg); opacity:0; }
.faq-item.open .faq-icon::before{ transform:rotate(180deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a{ overflow:hidden; }
.faq-a p{ font-size:15px; line-height:1.65; color:#435058; margin:0; padding:0 22px 22px; }
#faq-grid:has(> .faq-item:nth-child(1).open):has(> .faq-item:nth-child(2).open) > .faq-item:nth-child(-n+2){
  align-self:stretch;
}
#demo-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.demo-field{ display:flex; flex-direction:column; gap:8px; }
.demo-field.full{ grid-column:1/-1; }
.demo-field label{ font-size:12px; font-weight:700; color:rgba(255,255,255,.72); letter-spacing:.03em; text-transform:uppercase; }
.demo-field input, .demo-field select{
  width:100%; height:52px; padding:0 16px; border-radius:13px;
  border:1px solid rgba(255,255,255,.18); outline:none;
  background:rgba(255,255,255,.08); color:#fff;
  font:500 14px 'Manrope',sans-serif;
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.demo-field input::placeholder{ color:rgba(255,255,255,.38); }
.demo-field select{ appearance:none; cursor:pointer; color-scheme:dark; }
.demo-field input:focus, .demo-field select:focus{
  border-color:#C6EF43; background:rgba(255,255,255,.11); box-shadow:0 0 0 3px rgba(198,239,67,.12);
}
#demo-submit{ transition:transform .22s ease, box-shadow .22s ease, background .22s ease; }
#demo-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(198,239,67,.26); background:#d0f85a !important; }

/* ── Mini-kiosk (card de acceso animada) ──────────────────────────────── */
.gm-kiosk-preview-card{
  position:relative; overflow:hidden;
  background:#0F2A47; color:#F1F2EE;
  border-radius:24px;
  display:flex; flex-direction:column;
}
.gm-kiosk-preview-mesh{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(241,242,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,242,238,.05) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events:none;
}
.gm-kiosk-preview-glow{
  position:absolute; top:-60px; right:-60px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(198,239,67,.28), transparent 60%);
  filter:blur(18px); pointer-events:none;
}
.gm-mk{
  position:relative; z-index:1;
  padding:24px 24px 22px;
  display:flex; flex-direction:column; align-items:stretch; flex:1;
}
.gm-mk-top{ display:flex; }
.gm-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.gm-pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.gm-pill.is-lime{ background:#C6EF43; color:#0F2A47; }
.gm-pill.is-err{ background:rgba(220,62,62,.16); color:#ff8a8a; }
.gm-mk-ring{
  position:relative;
  width:100%; max-width:240px; aspect-ratio:1 / 1;
  margin:14px auto 4px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.gm-mk-ring.state-scanning{ transform:scale(.98); }
.gm-mk-ring.state-success{ transform:scale(1.04); }
.gm-mk-ring.state-deny{ transform:scale(.96); }
.gm-fp-rings{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gm-fp-spin{ transform-origin:130px 130px; animation:gmMkSpin 7s linear infinite; }
.gm-fp-spin-rev{ transform-origin:130px 130px; animation:gmMkSpinRev 11s linear infinite; }
@keyframes gmMkSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes gmMkSpinRev{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
.gm-mk-ring.state-deny .gm-fp-spin,
.gm-mk-ring.state-deny .gm-fp-spin-rev{ animation-play-state:paused; }
.gm-fp-inner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 12px rgba(198,239,67,.45));
  animation:gmMkPulse 2.4s ease-in-out infinite;
  transition:filter .3s;
}
.gm-mk-ring.state-scanning .gm-fp-inner{ filter:drop-shadow(0 0 24px rgba(198,239,67,.7)); }
.gm-mk-ring.state-success .gm-fp-inner{ filter:drop-shadow(0 0 36px rgba(198,239,67,.9)); animation:none; }
.gm-mk-ring.state-deny .gm-fp-inner{ filter:drop-shadow(0 0 28px rgba(220,62,62,.6)); animation:none; }
@keyframes gmMkPulse{
  0%, 100%{ filter:drop-shadow(0 0 10px rgba(198,239,67,.35)); }
  50%{ filter:drop-shadow(0 0 18px rgba(198,239,67,.65)); }
}
.gm-fp-icon{ color:#C6EF43; display:block; flex-shrink:0; transition:color .3s; }
.gm-mk-ring.state-success .gm-fp-icon{ color:#d4ff5a; }
.gm-mk-ring.state-deny .gm-fp-icon{ color:#ff8a8a; }
.gm-mk-title{
  font-family:'Space Grotesk','Manrope',sans-serif;
  font-size:24px; font-weight:700;
  text-align:center; letter-spacing:-.01em;
  margin-top:14px; color:#F1F2EE;
}
.gm-mk-sub{ text-align:center; font-size:13px; color:rgba(241,242,238,.65); margin-top:4px; }
.gm-mk-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(241,242,238,.12), transparent);
  margin:20px 0 16px;
}
.gm-mk-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:20px; margin-top:auto; }
.gm-mk-stat{ display:flex; align-items:flex-start; gap:8px; }
.gm-mk-stat-l{ font-size:11px; font-weight:700; color:#F1F2EE; line-height:1.2; }
.gm-mk-stat-v{ font-size:11px; color:rgba(241,242,238,.55); margin-top:2px; }
.gm-mk-cta{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#C6EF43; color:#0F2A47;
  border:none; border-radius:12px;
  padding:14px 18px; cursor:default;
  font-family:inherit; font-weight:700; font-size:15px; letter-spacing:.01em;
  text-decoration:none; transition:all .2s;
  box-shadow:0 12px 30px -10px rgba(198,239,67,.45);
}
@media (prefers-reduced-motion: reduce){
  .gm-fp-spin, .gm-fp-spin-rev, .gm-fp-inner{ animation:none !important; }
}

/* ── Notificaciones (toasts) — sincronizadas con el mini-kiosk ────────── */
.gm-toast-stack{
  position:fixed; bottom:24px; right:24px; z-index:1600;
  width:340px; display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.gm-toast-stack > *{ pointer-events:auto; }
@media (max-width:720px){ .gm-toast-stack{ width:auto; left:12px; right:12px; bottom:16px; } }
@keyframes gmToastIn{
  from{ opacity:0; transform:translateY(40px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes gmToastOut{
  from{ opacity:1; transform:translateY(0); max-height:200px; }
  to{ opacity:0; transform:translateY(40px); max-height:0; padding-top:0; padding-bottom:0; margin-top:-10px; }
}
@keyframes gmToastProgress{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Variante 'card' — eventos de sistema */
.gm-toast{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  padding:14px 14px 16px 18px; background:#fff;
  border:1px solid rgba(15,42,71,.08); border-left:4px solid #0F2A47;
  border-radius:14px; box-shadow:0 14px 36px -14px rgba(15,42,71,.4);
  overflow:hidden; animation:gmToastIn .32s cubic-bezier(.2,.85,.25,1);
}
.gm-toast.is-leaving{ animation:gmToastOut .24s ease forwards; }
.gm-toast-chip{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.gm-toast-chip svg{ width:15px; height:15px; }
.gm-toast-body{ flex:1; min-width:0; }
.gm-toast-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-right:28px; }
.gm-toast-kind{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6B7A85; }
.gm-toast-time{ font-size:11px; color:#6B7A85; font-weight:600; }
.gm-toast-title{ font-size:14px; font-weight:700; color:#0F2A47; margin-top:3px; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-toast-msg{ font-size:12px; color:#6B7A85; margin-top:2px; line-height:1.4; }
.gm-toast-close{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:6px;
  background:transparent; border:none; cursor:pointer; color:#6B7A85;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;
}
.gm-toast-close svg{ width:14px; height:14px; }
.gm-toast-close:hover{ background:#F4F5F1; color:#0F2A47; }
.gm-toast-progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left; animation:gmToastProgress linear forwards; opacity:.55; }
/* Variante 'solid' — ingresos de clientes (fondo del color del estado) */
.gm-ntf{ position:relative; pointer-events:auto; animation:gmToastIn .32s cubic-bezier(.2,.85,.25,1); }
.gm-ntf.is-leaving{ animation:gmToastOut .24s ease forwards; }
.gm-ntf-ms{ display:flex; align-items:center; gap:11px; padding:11px 12px 13px 12px; border-radius:12px; overflow:hidden; box-shadow:0 14px 36px -14px rgba(15,42,71,.5); }
.gm-ntf-ms-ico{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.gm-ntf-ms-ico svg{ width:17px; height:17px; }
.gm-ntf-ms-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.gm-ntf-ms-title{ font-size:13px; font-weight:700; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-ntf-ms-msg{ font-size:11px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-ntf-ms-time{ font-size:10.5px; font-weight:600; flex-shrink:0; align-self:flex-start; }
.gm-ntf-x{ background:none; border:none; cursor:pointer; color:inherit; opacity:.5; display:flex; align-items:center; justify-content:center; padding:2px; border-radius:6px; flex-shrink:0; transition:opacity .15s; }
.gm-ntf-x svg{ width:14px; height:14px; }
.gm-ntf-x:hover{ opacity:1; }