/* Mobile QA corrections only. Desktop and tablet rules remain authoritative. */
@media(max-width:620px){
 html,body{max-width:100%;overflow-x:clip}
 main>section{max-width:100%;overflow-x:clip}
 main :is(h1,h2,h3,h4,p,li,blockquote){word-break:normal;overflow-wrap:break-word;hyphens:none}
 main .container,.journey-shell{min-width:0}

 /* Header and hero */
 .header .header-shell{width:calc(100% - 24px);margin-inline:auto}
 .header .brand{min-width:0!important}
 .header .menu{min-width:44px!important;min-height:44px!important}
 .header #primary-navigation{left:12px!important;right:12px!important;width:auto;max-width:none}
 #home .hero-stage{width:calc(100% - 32px)!important}
 #home .actions{gap:14px!important}
 #home .actions>a.action-ui{min-height:50px!important}

 /* One active conversation stays centered; slide changes no longer leave a
    previous panel outside the viewport. */
 #dores .phones{display:block!important;width:100%;max-width:374px;margin:38px auto 22px!important;overflow:hidden!important}
 #dores .phone{display:none!important;width:min(350px,calc(100vw - 40px))!important;min-width:0!important;margin:0 auto!important}
 #dores .phone.active{display:block!important}
 #dores .dots{display:flex;justify-content:center;gap:8px}

 /* Mobile composition for the fragmented-management orbit. */
 #software-cycle .problem-orbit{position:relative;width:100%;height:600px;margin:38px auto 48px;overflow:visible}
 #software-cycle .orbit-ring{display:block;left:50%;top:45%;transform:translate(-50%,-50%)}
 #software-cycle .orbit-ring--outer{width:min(300px,78vw);height:min(300px,78vw)}
 #software-cycle .orbit-ring--inner{width:min(198px,52vw);height:min(198px,52vw)}
 #software-cycle .orbit-connectors{display:block;position:absolute;left:50%;top:45%;width:min(300px,78vw);height:min(300px,78vw);transform:translate(-50%,-50%)}
 #software-cycle .orbit-connectors{animation:none}
 #software-cycle .orbit-connectors>i{left:50%;top:50%;width:230px;transform-origin:0 50%}
 #software-cycle .orbit-connectors>i:nth-child(1){transform:rotate(-90deg)}
 #software-cycle .orbit-connectors>i:nth-child(2){transform:rotate(116deg)}
 #software-cycle .orbit-connectors>i:nth-child(3){transform:rotate(67deg)}
 #software-cycle .orbit-light{display:block}
 #software-cycle .problem-core{position:absolute;left:50%;top:45%;width:156px;height:156px;margin:0;padding:18px;transform:translate(-50%,-50%)}
 #software-cycle .problem-core>b{margin-top:-8px;margin-bottom:5px;color:#9ee0ff;font-size:40px;line-height:1;text-shadow:0 0 10px rgba(73,182,243,.48);animation:fragment-infinity-mobile 3.6s ease-in-out infinite}
 #software-cycle .problem-core>strong{max-width:126px;margin:0 0 8px;font-size:14px;line-height:1.16}
 #software-cycle .problem-core>span{display:block;width:108px;max-width:none;margin:0;font-size:8.8px;line-height:1.32}
 #software-cycle .orbit-track{position:absolute;inset:0;display:block;width:100%;height:100%;transform:none}
 #software-cycle .problem-card{position:absolute!important;z-index:5;min-height:0;margin:0!important;padding:14px!important}
 #software-cycle .problem-card h3{margin:9px 0 7px;font-size:12px;line-height:1.3}
 #software-cycle .problem-card p{margin:0;font-size:9.5px;line-height:1.45}
 #software-cycle .problem-card>div b{font-size:10px}
 #software-cycle .problem-card--one{left:50%!important;top:0!important;width:min(200px,68%);transform:translateX(-50%);animation:fragment-card-one-mobile 4.8s ease-in-out infinite}
 #software-cycle .problem-card--two{left:0!important;top:auto!important;bottom:0;width:calc(50% - 6px);animation:fragment-card-mobile 5.2s .55s ease-in-out infinite}
 #software-cycle .problem-card--three{right:0;left:auto!important;top:auto!important;bottom:0;width:calc(50% - 6px);animation:fragment-card-mobile 5s 1.1s ease-in-out infinite}

 /* Cards retain their information while using the available width. */
 .sector-grid,.governance-grid{align-items:start}
 .sector-card,.governance-grid article{min-width:0;padding:24px 20px}
 .audience-card,.informative-card,.comparison-panel{min-width:0}
 .comparison-approved .comparison-connection{height:54px!important}
 .comparison-approved .refined-connection{width:54px;height:54px;margin:auto}

 /* Journey becomes a clear vertical sequence. The connector remains behind
    each numbered marker instead of crossing its label and copy. */
 #como-funciona-v2 .journey-line{left:39px!important;top:150px!important}
 #como-funciona-v2 .journey-step{display:grid;grid-template-columns:1fr!important;gap:14px!important;padding:22px 16px!important}
 #como-funciona-v2 .journey-marker{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:auto;min-width:0}
 #como-funciona-v2 .journey-marker b{flex:0 0 42px;width:42px;height:42px}
 #como-funciona-v2 .journey-marker span{position:static!important;display:inline-flex;width:auto!important;max-width:calc(100% - 52px);min-height:32px;align-items:center;padding:6px 10px;font-size:10px!important;line-height:1.35;text-align:left;white-space:normal!important}
 #como-funciona-v2 .journey-copy,#como-funciona-v2 .demo-surface{grid-column:1!important;min-width:0}
 #como-funciona-v2 .journey-copy{padding-left:0}
 #como-funciona-v2 .journey-copy h3{font-size:23px;overflow-wrap:normal}
 #como-funciona-v2 .journey-copy p{font-size:14px;line-height:1.65}
 #como-funciona-v2 .demo-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
 #como-funciona-v2 .demo-bar>*{min-width:0;white-space:normal}
 #como-funciona-v2 .config-ui label{min-width:0}
 #como-funciona-v2 .review-cursor{display:none}
 #como-funciona-v2 .live-ui{padding-inline:8px}

 /* All twelve resource simulations are contained by the panel. The selector
    remains horizontally scrollable with explicit edge spacing for touch. */
 #plataforma .platform-dock{scroll-padding-inline:12px;padding-inline:8px;overscroll-behavior-x:contain}
 #plataforma .platform-panel,#plataforma .platform-copy,#plataforma .platform-mockup{min-width:0!important;max-width:100%!important}
 #plataforma .platform-copy{padding:22px!important}
 #plataforma .platform-mockup{padding:16px!important}
 #plataforma .mock-window{width:100%!important;max-width:100%!important;min-width:0!important}
 #plataforma .mock-window *{min-width:0}
 #plataforma .mock-top{gap:8px;align-items:flex-start}
 #plataforma .mock-top>*{white-space:normal!important;overflow-wrap:break-word}
 #plataforma .mock-row{min-width:0}
 #plataforma .process-flow{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
 #plataforma .process-flow span{min-width:76px;flex:0 0 auto}

 /* Network labels remain distinct at the narrowest supported width. */
 #agentes .network-shell{position:relative;width:100%!important;margin-inline:auto;transform:translateX(7.5px)}
 #agentes .network-stage{max-width:100%}

 /* Keep the menu glyph centered without changing its 44px touch target. */
 .header .menu.action-ui{padding:0!important;line-height:1!important}
 .header .menu.action-ui>span{position:absolute!important;inset:0!important;display:flex;width:auto;height:auto;align-items:center;justify-content:center;line-height:1}
 #agentes .network-detail{min-width:0}

 /* Footer remains plain text while each line has a comfortable touch row. */
 #rodape .footer-compact-inner{gap:8px;padding-block:18px}
 #rodape .footer-compact-inner>a.action-ui{display:flex!important;min-height:38px!important;align-items:center;justify-content:center;padding:6px 0!important}
}

@keyframes fragment-card-mobile{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes fragment-card-one-mobile{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-5px)}
}
@keyframes fragment-infinity-mobile{
  0%,100%{opacity:.88;transform:scale(1);text-shadow:0 0 8px rgba(73,182,243,.35)}
  50%{opacity:1;transform:scale(1.05);text-shadow:0 0 12px rgba(112,202,250,.55)}
}

@media(max-width:360px){
 #software-cycle .problem-orbit{height:620px}
 #software-cycle .problem-card{padding:12px!important}
 #software-cycle .problem-card h3{font-size:11px}
 #software-cycle .problem-card p{font-size:9px}
}

@media(max-width:360px){
 #home h1{font-size:29px!important}
 #home .lead{font-size:15px!important;line-height:1.6!important}
 #agentes .network-node.action-ui{width:62px}
 #agentes .network-node.action-ui>span{width:40px;min-height:40px}
 #agentes .network-node.action-ui>b{font-size:8px;line-height:1.25}
 #agentes .network-node.action-ui>small{display:none}
 #plataforma .platform-copy{padding:20px 18px!important}
 #plataforma .platform-mockup{padding:12px!important}
}

@media(max-width:740px) and (orientation:landscape){
 .header #primary-navigation{max-height:calc(100svh - 108px)!important;overflow-y:auto}
 #home.hero{padding-top:116px!important}
 #home .lead{max-width:680px}
}

@media(prefers-reduced-motion:reduce){
 #dores .phones,#plataforma .platform-dock{scroll-behavior:auto!important}
 #software-cycle .problem-card,#software-cycle .problem-core>b{animation:none!important}
}

/* Hero: two equal touch targets, stacked on phones. */
@media(max-width:600px){
 #home .actions{flex-direction:column!important;align-items:center!important;gap:12px!important}
 #home .actions>a.action-ui{width:100%!important;max-width:340px!important;min-height:50px!important;box-sizing:border-box}
}