/* =====================================================
   MOBILE · optimizaciones para celular (se carga al final)
   ===================================================== */
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img{max-width:100%}
a,button,summary{-webkit-tap-highlight-color:rgba(242,97,80,.15);touch-action:manipulation}

/* dispositivos táctiles: sin efectos que dependen de hover */
@media (hover:none){
  .card:hover,.person:hover,.tile:hover,.btn--lg:hover{transform:none;box-shadow:none}
  .card::before,.person::before,.tech__item::before{display:none}
  .tile span{opacity:1;transform:none}
  .team-photo:hover img,.duo figure:hover img{transform:none}
}

/* áreas de toque cómodas (≥44px) */
@media (max-width:980px){
  .brand{min-height:44px}
  .footer nav{flex-wrap:wrap;gap:4px 20px}
  .footer nav a,.footer__info a{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:760px){
  :root{--r:24px}
  .container{width:calc(100% - 40px)}
  .container--narrow{width:calc(100% - 40px)}

  /* nav */
  .nav{padding-top:env(safe-area-inset-top)}
  .nav__inner{padding-inline:20px}
  .burger{width:44px;height:44px;margin-right:-10px}
  .burger span{left:11px;right:11px}
  .burger span:first-child{top:18px}.burger span:last-child{top:25px}
  .nav__links{max-height:calc(100svh - 56px);overflow-y:auto;background:rgba(251,251,253,.98);padding:8px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 30px 60px rgba(0,0,0,.12)}
  .nav__links a{padding:16px 0;min-height:52px;display:flex;align-items:center}
  .nav__links a:last-child{border-bottom:0}

  /* hero */
  .hero{padding:104px 0 32px}
  .display{font-size:clamp(38px,11.5vw,52px)}
  .lead{font-size:17px}
  .hero__cta{margin-top:28px}
  .hero__cta .btn{padding:16px 24px;min-height:52px}
  .stage{margin-top:44px}
  .stage__card{height:clamp(280px,78vw,380px);border-radius:28px 28px 0 0}
  .chip{padding:8px 12px;border-radius:14px;font-size:11.5px}
  .chip b{font-size:16px}
  .chip small{font-size:10.5px}
  .chip--a{left:3%;top:5%}
  .chip--b{right:3%;bottom:5%}
  .chip--c{display:none}

  /* trust */
  .trust__grid{gap:24px 12px;padding:40px 0}
  .trust strong{font-size:clamp(30px,9vw,40px)}
  .trust span{font-size:13px;display:block;line-height:1.3;margin-top:4px}

  /* secciones */
  .section{padding:64px 0}
  .section__head{margin-bottom:36px}
  .h2{font-size:clamp(28px,8.4vw,38px)}
  .eyebrow{font-size:14px;margin-bottom:10px}

  /* tarjetas */
  .bento,.tech,.team,.quotes{gap:14px}
  .card{padding:26px;min-height:0}
  .card h3{font-size:23px}
  .card p{font-size:16px}
  .card .ico+h3{margin-top:22px}
  .card--xl{min-height:400px}
  .card--dark p{margin-bottom:16px}
  .card--blue{min-height:300px}
  .link,.link--light{min-height:44px;font-size:17px}
  .tech__item{padding:26px 22px}
  .tech__num{margin-bottom:10px}
  .section--dark{margin:0 8px}

  /* pasos */
  .steps{gap:0}
  .steps li{padding:22px 0}
  .steps h3{font-size:20px}

  /* equipo */
  .team-photo{border-radius:24px;aspect-ratio:4/3}
  .duo{gap:14px}
  .duo figure{border-radius:24px;aspect-ratio:4/4.4}
  .team-names{font-size:16px;margin-top:24px}

  /* opiniones */
  .quote{padding:26px}
  .quote p{font-size:17px}

  /* instagram */
  .stories{gap:12px 8px;margin-bottom:32px;justify-content:space-between}
  .stories a{width:62px;font-size:11.5px;min-height:44px}
  .ring{width:62px;height:62px}
  .ring b{font-size:24px}
  .feed{gap:10px}
  .tile{padding:16px;border-radius:20px}
  .tile em{top:14px;left:16px;font-size:10.5px}
  .tile strong{font-size:clamp(16px,4.8vw,20px)}
  .tile span{display:none}
  .center .btn{width:100%;margin-top:10px;min-height:52px}

  /* faq */
  .faq details{padding:0 20px;border-radius:18px}
  .faq summary{font-size:16px;padding:18px 0;min-height:56px;align-items:center}
  .faq details p{font-size:16px;padding-bottom:20px}

  /* footer */
  .footer{padding:32px 0 calc(96px + env(safe-area-inset-bottom))}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:12px}
  .footer__info{gap:20px;margin-top:20px}
  .credit{margin-top:16px}

  /* WhatsApp flotante: respeta barra inferior del teléfono */
  .wa{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:58px;height:58px}

  /* rendimiento: menos blur/animaciones pesadas en móvil */
  .hero-bg i{filter:blur(24px);animation-duration:26s}
  .reveal{filter:none;transform:translateY(24px)}
  .reveal.in{transform:none}
  .btn--lg{animation:none;box-shadow:0 14px 30px -14px rgba(242,97,80,.6)}
  .btn--lg::after{animation-duration:5s}
  .chip{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92)}
  .marquee{padding:16px 0}
  .marquee span{font-size:14px;padding:8px 16px}
  .aligners i{animation:none}

  /* experiencia (scroll): altura estable con barra del navegador */
  .story__pin{height:100svh}
  .story__word{-webkit-text-stroke:1px rgba(255,255,255,.09)}
  .story__txt{bottom:calc(11svh + env(safe-area-inset-bottom))}
  .scene p{font-size:16px;margin-top:14px}
  .scene .btn{margin-top:22px;min-height:52px}
}

/* teléfonos muy angostos */
@media (max-width:360px){
  .container,.container--narrow{width:calc(100% - 32px)}
  .nav__inner{padding-inline:16px}
  .trust span{font-size:12px}
  .stories a{width:56px}
  .ring{width:56px;height:56px}
}

/* paisaje en teléfono: que la escena no se corte */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding-top:84px}
  .story{height:420vh}
}