/* UX móvil: estas reglas se cargan después de las variantes visuales existentes. */
:where(a, button, input, select, textarea, video):focus-visible{outline:3px solid #649be8;outline-offset:4px}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.blog-list .bcard{min-width:0}
.svc2-item:focus-visible p{opacity:1;max-height:none}
.lp2-proc:focus-visible .lp2-proc-d{opacity:1;max-height:none;margin-top:.55rem}
@media(max-width:900px){
  #hdr,#hdr.scrolled{height:66px;padding-inline:max(1rem,env(safe-area-inset-left)) max(1rem,env(safe-area-inset-right))}
  #hdr .brand{min-width:0;gap:8px}
  #hdr .brand span{font-size:12px}
  #hdr .burger{display:flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px}
  #hdr .nav{inset:66px 0 auto;max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
  #hdr .nav.open{visibility:visible}
  #hdr .nav a,#hdr .nav .nav-cta{display:flex;align-items:center;min-height:44px;font-size:16px;padding:12px}
  .btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;min-height:44px;line-height:1.4}
  .field{min-width:0}
  .field input,.field select,.field textarea{font-size:16px;min-height:48px}
  .lp2-hero-inner{padding-block:100px 90px}
  .lp2-cta-copy{padding:clamp(1.25rem,5vw,2.4rem)}
  .floats{bottom:calc(.85rem + env(safe-area-inset-bottom));right:calc(.85rem + env(safe-area-inset-right))}
  .cookie{left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));width:auto;max-width:none;z-index:210}
  .cookie button{min-height:44px;min-width:80px;font-size:13px}
  .foot-col a,.art-back{min-height:44px;display:flex;align-items:center}
  footer{padding-bottom:calc(7rem + env(safe-area-inset-bottom))}
}
@media(max-width:768px){
  .tcard{flex-basis:100%;min-width:0;padding:1.25rem}
  .testi-head{padding-inline:1.4rem}
  .testi-arrow{width:44px;height:44px}
}
@media(max-width:700px){
  .hero h1{font-size:clamp(2.25rem,9.2vw,4rem);line-height:1.04}
  .hero h1 span,.hero h1 em{line-height:1.04}
  .hero-content{min-width:0;width:100%}
  .hero .section-scroll{bottom:1rem}
  .lapt-grid{min-width:0}
  .cir-photo img{max-width:100%}
  .cir-name{font-size:clamp(2rem,10vw,3.5rem)}
  .svc2-item p{font-size:14px;max-height:none}
  .lp2-what-copy h2,.lp2-cta-copy h2{font-size:clamp(1.7rem,7.8vw,2.5rem)}
  .lp2-what-copy,.lp2-cta-copy,.art-author>div{min-width:0}
  .lp2-what-copy h2,.lp2-cta-copy h2,.art-page h1,.art-page h2,.art-page a{overflow-wrap:anywhere}
  .blog-list{grid-template-columns:1fr}
  .art-cta-in{padding:1.5rem 1rem}
  .art-cta-btns .btn,.hero-btns .btn{width:100%}
  #faq .acc-q{gap:8px;padding:.9rem .75rem}
  #faq .acc-q::before{display:none}
  #faq .acc-q .ic{flex:none}
  #faq .acc-a p{padding:.2rem .75rem 1.1rem}
  .bdot,.bdot.active{width:44px;height:44px;border-radius:50%;background:transparent;display:grid;place-items:center}
  .bdot::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(12,39,66,.3)}
  .bdot.active::before{width:20px;border-radius:4px;background:var(--blue)}
  .blog-dots{gap:0;margin-top:1rem}
  .lp2-acc-q{padding:1rem;line-height:1.5}
}
@media(hover:none),(pointer:coarse){
  .svc2-item p,.lp2-proc-d{opacity:1;max-height:none}
  .lp2-proc-d{margin-top:.55rem}
  .svc2-item:hover,.lp2-proc:hover,.bcard:hover{transform:none}
  .svc2-item::before{background:linear-gradient(180deg,rgba(5,7,10,.14),rgba(7,17,29,.45) 34%,rgba(7,17,29,.96))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}