/* CONNECT Premium ELITE-375: single external UX stylesheet, original brand/app.css UNMODIFIED. */

/* UX-337 — Design tokens premium complementares sem reestilizar marca */

/* Additive visual system: original brand, header and carousel are out of scope. */
:root{--ux-navy:#061b3d;--ux-blue:#007bff;--ux-cyan:#00e5ff;
  --ux-border:#d6e6f2;--ux-focus:#057ac3;--ux-soft:#f4faff;
  --ux-radius:14px;--ux-copy:#254865;--ux-safe:env(safe-area-inset-bottom,0px)}
:where(.section,.catalog-hero,.catalog-hero-v5,.page-hero,.contract-section,
 .demo-v5,.product-hero-v5,.footer){min-inline-size:0}
:where(.section,.contract-section,.page-hero,.catalog-hero-v5){isolation:isolate}

/* UX-338 — Foco acessível e navegação por teclado */

/* Keyboard and WCAG visible focus without hiding original link outlines. */
:where(a,button,input,select,textarea,summary,[role="button"]):focus-visible{
 outline:3px solid var(--ux-focus);outline-offset:3px}
:where(.footer,.page-hero,.catalog-hero,[class*="dark"]) :is(a,button):focus-visible{
 outline-color:#6ae8ff;outline-offset:4px}
:where(a,button,input,select,textarea):disabled{cursor:not-allowed;opacity:.65}
:where(a,button,input,select,textarea){-webkit-tap-highlight-color:rgba(0,123,255,.15)}
:where(section[id],main[id],article[id]){scroll-margin-block-start:clamp(80px,8vw,105px)}

/* UX-339 — Cards e tabelas com conteúdo sem overflow */

/* Content containment; never crop banners or original image contents. */
:where(.cards,.plans-grid,.catalog-grid-v5,.related-grid-v5,.product-hero-grid-v5,
 .demo-grid,.contract-layout,.footer-grid,.hosting-guide-grid,.connect-access-grid,
 .connect-sales-faq-grid,.benefit-cards-v5)>*{min-inline-size:0;max-inline-size:100%}
:where(.card,.plan-card,.product-card,.related-card,.contract-form,.contract-summary,
 .sales-panel-workspace,.sales-panel-pane,.hosting-guide-grid article){overflow-wrap:anywhere}
:where(.connect-master-table-scroll,.tablewrap,.table-scroll,.comparison-table-wrap,
 .compare-table-scroll){max-inline-size:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
:where(.connect-master-table-scroll,.tablewrap,.table-scroll,.comparison-table-wrap):focus-within{
 box-shadow:0 0 0 2px rgba(0,123,255,.12)}
:where(.section,.catalog-hero,.page-hero) :where(p,li,dd,small){overflow-wrap:break-word}

/* UX-340 — Ultrawide e notebooks com largura fluidamente limitada */

/* Ultrawide: consistent reading-width instead of stretching prose indefinitely. */
@media(min-width:1600px){
 :where(.section,.page-hero,.catalog-hero-v5,.footer) > .container{
  max-inline-size:1240px;margin-inline:auto}
 :where(.intro-copy,.page-hero p,.catalog-hero p,.section-head p){max-inline-size:74ch}
 :where(.catalog-grid-v5,.related-grid-v5,.benefit-cards-v5){column-gap:clamp(16px,1.5vw,26px)}
}
@media(min-width:2200px){
 :where(.section,.page-hero,.catalog-hero-v5,.footer){overflow-x:clip}
}

/* UX-341 — Tablet em 1024px com grades adaptativas */

/* Tablet ergonomics; leave the approved logo, header and carousel unchanged. */
@media(min-width:721px) and (max-width:1100px){
 :where(.catalog-grid-v5,.related-grid-v5,.hosting-guide-grid,.benefit-cards-v5){
  grid-template-columns:repeat(2,minmax(0,1fr))}
 :where(.contract-layout,.connect-sales-faq-grid,.connect-access-grid){
  grid-template-columns:minmax(0,1fr)}
 :where(.section,.contract-section){padding-block:clamp(52px,7vw,86px)}
 :where(.intro-actions,.contract-actions,.conversion-actions){flex-wrap:wrap}
 :where(.contract-actions)>*{min-block-size:44px}
}

/* UX-342 — Smartphones 720px com pilhas e áreas clicáveis */

/* Phone: one-column where card information needs breathing room. */
@media(max-width:720px){
 :where(.catalog-grid-v5,.cards,.plans-grid,.related-grid-v5,.hosting-guide-grid,
  .connect-access-grid,.sales-domains-grid,.connect-sales-faq-grid){
  grid-template-columns:minmax(0,1fr)}
 :where(.section,.contract-section){padding-block:clamp(40px,8vw,65px)}
 :where(.product-card,.plan-card,.contract-form,.contract-summary,.compare-card){
  min-inline-size:0;max-inline-size:100%}
 :where(.contract-actions,.card-actions,.conversion-actions,.intro-actions){flex-wrap:wrap}
 :where(.contract-actions)>.btn,:where(.conversion-actions)>.btn{
  flex:1 1 190px;min-block-size:46px}
 :where(.footer-grid,.footer-bottom){gap:clamp(18px,6vw,28px)}
}

/* UX-343 — Telefones pequenos 400px com prevenção de cortes */

/* 320px/360px: labels wrap rather than being cut off; taps remain usable. */
@media(max-width:400px){
 :where(.container){min-inline-size:0}
 :where(.contract-actions,.card-actions,.conversion-actions,.intro-actions)>*{max-inline-size:100%}
 :where(.btn,.card-actions a,.contract-actions a,.contract-actions button){
  white-space:normal;text-align:center;line-height:1.4}
 :where(.contract-form,.contract-summary,.plan-card,.product-card-body){padding-inline:clamp(13px,4vw,19px)}
 :where(.field,.form-grid,.sales-share-choice){min-inline-size:0}
 :where(input,textarea,select){max-inline-size:100%}
}

/* UX-344 — Landscape com altura reduzida e acesso a CTAs */

/* Low height / landscape: avoid call-to-action overlap with the content. */
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
 :where(.section,.contract-section){padding-block:clamp(28px,5vh,48px)}
 :where(.contract-actions,.conversion-actions){align-items:stretch}
 :where(.contract-actions)>.btn{min-block-size:44px}
 :where(.whatsapp-float){right:max(12px,env(safe-area-inset-right,0px))}
}

/* UX-345 — Movimento reduzido, alto contraste e impressão */

/* Respect motion/contrast settings; approved carousel timing/slide HTML untouched. */
@media(prefers-reduced-motion:reduce){
 :where(.btn,.card,.plan-card,.product-card,.related-card,.nav a){transition:none!important}
 :where(html){scroll-behavior:auto}
}
@media(prefers-contrast:more){
 :where(.btn,.card,.plan-card,.product-card,.contract-form){border-width:2px}
 :where(a,button,input,select,textarea):focus-visible{outline-width:4px}
}
@media(forced-colors:active){
 :where(a,button,input,select,textarea):focus-visible{outline:3px solid Highlight}
 :where(.btn-primary,.btn-ghost,.btn-outline){forced-color-adjust:auto}
}
@media print{
 :where(.mobile-cta,.whatsapp-float,.menu-btn){display:none!important}
 :where(.section,.contract-section){break-inside:avoid}
}

/* UX-346 — Campos, erros de formulário e estados ocupados */

/* Forms: state is accurate to browser constraint validation, no invented payment states. */
:where(.contract-form,.catalog-search,.sales-share-choice) :is(input,select,textarea){
 scroll-margin-block-start:110px}
:where(.contract-form,.catalog-search) :is(input,select,textarea)[aria-invalid="true"]{
 border-color:#bd3348;box-shadow:0 0 0 2px rgba(189,51,72,.10)}
:where(.contract-form,.catalog-search) :is(input,select,textarea):focus-visible{
 outline-offset:2px}
:where(.contract-form) :is(button[type=submit])[aria-busy="true"]{
 cursor:progress;opacity:.78}
:where(.form-note,.field-help,.sales-privacy-reminder){overflow-wrap:anywhere}
:where(.contract-form) fieldset{min-inline-size:0;max-inline-size:100%}
:where(.contract-form) input,:where(.contract-form) select,:where(.contract-form) textarea{
 max-inline-size:100%}

/* UX-347 — CTAs fixos e WhatsApp respeitando safe areas */

/* Keep mobile CTA and WhatsApp reachable without covering fields. */
@media(max-width:720px) and (orientation:portrait){
 body{padding-bottom:max(100px,calc(88px + var(--ux-safe)))}
 :where(.mobile-cta){bottom:max(8px,var(--ux-safe));border-radius:12px;
  box-shadow:0 10px 34px rgba(4,25,57,.25)}
 :where(.mobile-cta a){min-block-size:44px;display:flex;align-items:center;
  justify-content:center;white-space:normal;overflow-wrap:anywhere}
 :where(.whatsapp-float){bottom:calc(75px + var(--ux-safe));
  right:max(10px,env(safe-area-inset-right,0px))}
}

/* UX-348 — Legibilidade de páginas secundárias e microcopy de apoio */

/* Secondary pages: consistent long-form readability without retouching brand art. */
:where(.page-hero,.catalog-hero,.catalog-hero-v5) :where(p,small){
 max-inline-size:78ch;text-wrap:pretty}
:where(.contract-section,.demo-v5,.hosting-guide,.connect-sales-faq) h2{
 overflow-wrap:anywhere}
:where(.contract-section,.demo-v5,.catalog-results,.faq-layout) :where(p,li){
 line-height:1.65}
:where(.contract-demo-link,.text-link,.textlink){text-underline-offset:3px}
:where(.contract-demo-link,.text-link,.textlink):hover{text-decoration:underline}
:where(.footer-grid) :where(a,button):focus-visible{border-radius:4px}

/* UX-349 — Aviso de conectividade contextual, sem bloquear navegação */

.ux-connection-alert[hidden]{display:none!important}
.ux-connection-alert{position:fixed;z-index:35;inset-inline-start:14px;
 inset-block-end:20px;max-inline-size:min(450px,calc(100vw - 28px));
 padding:14px 17px;background:#0a335f;color:#fff;border:1px solid #60cdeb;
 border-radius:12px;font-size:12px;line-height:1.6;font-weight:750;
 box-shadow:0 14px 42px rgba(1,17,37,.22)}
@media(max-width:720px){.ux-connection-alert{
 inset-block-end:calc(170px + var(--ux-safe));
 max-inline-size:calc(100vw - 30px)}}

/* UX-350 — Controle Voltar ao topo apenas após rolagem */

.ux-back-to-top[hidden]{display:none!important}
.ux-back-to-top{position:fixed;z-index:32;
 inset-inline-start:max(14px,env(safe-area-inset-left,0px));
 inset-block-end:18px;display:grid;place-items:center;inline-size:44px;block-size:44px;
 color:#fff;background:#0b518e;border:1px solid #76d1f2;border-radius:50%;
 font-size:24px;font-weight:850;line-height:1;cursor:pointer;
 box-shadow:0 10px 27px rgba(4,39,80,.25)}
.ux-back-to-top:hover{background:#0877b9}
@media(max-width:720px){.ux-back-to-top{
 inset-block-end:calc(87px + var(--ux-safe))}}

/* Consolidated extra premium layer in original cascade order. */
/* LIVE-337 — Tokens UX e camada de estilo isolada sem tocar CSS oficial */

:root{--ux-focus:#0779d9;--ux-ring:0 0 0 3px rgba(0,123,255,.23);--ux-space:clamp(15px,2.3vw,28px)}
.page-hero,.catalog-hero,.section,.benefit-bar,.footer{min-width:0}
.section :where(h1,h2,h3,h4,p,li),.page-hero :where(h1,h2,h3,p){overflow-wrap:break-word}


/* LIVE-338 — Foco visível e navegação por teclado nas páginas */

:is(.nav,.actions,.section,.page-hero,.catalog-hero,.footer,.mobile-cta) :where(a,button,input,select,textarea,summary):focus-visible{
 outline:3px solid var(--ux-focus);outline-offset:3px;box-shadow:var(--ux-ring)
}
.skip-link:focus{left:12px;top:12px;z-index:120;min-height:44px;display:inline-flex;align-items:center}


/* LIVE-339 — Navegação ativa e âncoras sem cabeçalho sobreposto */

:where(main[id],section[id],article[id],div[id]){scroll-margin-top:calc(var(--header-h,86px) + 16px)}
.nav a[aria-current="page"]{text-decoration-thickness:2px;text-underline-offset:6px}
.nav a[aria-current="location"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
:target{scroll-margin-top:calc(var(--header-h,86px) + 16px)}


/* LIVE-340 — Menu responsivo e estados de abertura/fechamento */

.nav a{min-height:40px;display:inline-flex;align-items:center;justify-content:center;max-width:100%;overflow-wrap:anywhere}
.actions{min-width:0}.actions .btn{white-space:normal;text-align:center}
@media(max-width:1080px){
 .nav.open{max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain}
 .nav.open a{justify-content:flex-start;min-height:46px;line-height:1.4}
 .header .menu-btn{min-width:44px;min-height:44px}
}


/* LIVE-341 — CTAs e alvos de toque com espaçamento consistente */

:is(.section,.page-hero,.catalog-hero,.footer,.sales-focus-strip,.mobile-cta) :where(.btn,button,[role="button"]){
 min-height:44px;touch-action:manipulation
}
:is(.section,.page-hero,.catalog-hero,.footer,.sales-focus-strip) .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.35}
:is(.section,.page-hero,.catalog-hero,.footer) :where(a,button):disabled{cursor:not-allowed;opacity:.65}


/* LIVE-342 — Cards, catálogo e comparador com textos sem cortes */

:is(.cards,.plans-grid,.catalog-grid-v5,.comparison-grid,.segment-links,.pricing-grid,.hosting-guide-grid) > *{min-width:0;max-width:100%}
:is(.card,.plan-card,.product-card-v5,.comparison-card,.hosting-guide-grid article){overflow-wrap:anywhere}
:is(.card,.plan-card,.product-card-v5,.comparison-card) :where(p,small,h2,h3,h4){min-width:0;max-width:100%}
.product-card-v5 .card-actions{margin-top:auto}
@media(max-width:450px){.cards,.catalog-grid-v5,.hosting-guide-grid{grid-template-columns:minmax(0,1fr)}}


/* LIVE-343 — Formulários legíveis, validação e estados de envio */

:is(.contract-form,.sales-contract-form,.page-hero,.section) :where(input,select,textarea){max-width:100%;min-width:0;min-height:44px;font-size:16px}
:is(.contract-form,.sales-contract-form) :where(label,fieldset,legend){max-width:100%;min-width:0}
:is(.contract-form,.sales-contract-form) :where(textarea){resize:vertical}
:is(.contract-form,.sales-contract-form) :where(input,select,textarea):focus-visible{outline:3px solid var(--ux-focus);outline-offset:2px}
:is(.contract-form,.sales-contract-form) :where([aria-invalid="true"]){border-color:#bc303e;box-shadow:0 0 0 2px rgba(188,48,62,.10)}
.connect-is-submitting :where(button[type="submit"],input[type="submit"]){opacity:.72;cursor:progress}


/* LIVE-344 — FAQ e componentes expansíveis acessíveis */

:is(.section,.page-hero,.catalog-hero) details{max-width:100%;min-width:0}
:is(.section,.page-hero,.catalog-hero) details summary{cursor:pointer;min-height:44px;touch-action:manipulation;overflow-wrap:anywhere}
:is(.section,.page-hero,.catalog-hero) details[open]{scroll-margin-top:calc(var(--header-h,86px) + 14px)}
:is(.section,.page-hero,.catalog-hero) details :where(p,li){overflow-wrap:anywhere}


/* LIVE-345 — Tabelas e regiões com rolagem horizontal controlada */

:is(.section,.page-hero,.catalog-hero) :where(table){max-width:100%;border-collapse:collapse}
:is(.section,.page-hero,.catalog-hero) :where(.tablewrap,.table-scroll,.comparison-table-wrap,.connect-master-table-scroll){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
:is(.section,.page-hero,.catalog-hero) :where(th,td){overflow-wrap:anywhere}
:where(.catalog-tools,.sort-box,.catalog-search){min-width:0;max-width:100%}


/* LIVE-346 — Smartphones pequenos e áreas seguras */

@media(max-width:480px){
 .section,.page-hero,.catalog-hero{max-width:100%;overflow-wrap:anywhere}
 :is(.intro-actions,.product-hero-actions,.contract-actions,.conversion-actions){flex-wrap:wrap;gap:12px}
 :is(.intro-actions,.product-hero-actions,.contract-actions,.conversion-actions) .btn{min-width:0;max-width:100%;flex:1 1 180px}
 .container{max-width:100%}
 .sales-focus-inner nav a{max-width:100%;overflow-wrap:anywhere;min-height:44px}
 .mobile-cta a{min-height:44px}
}
@media(max-width:355px){.mobile-cta a{font-size:11px}.sales-focus-inner nav{min-width:0}}


/* LIVE-347 — Tablets e notebooks sem quebra de grid */

@media(min-width:481px) and (max-width:1100px){
 :is(.intro-grid,.system-hero,.contract-layout){min-width:0}
 :is(.cards,.catalog-grid-v5,.hosting-guide-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.intro-grid,.system-hero,.contract-layout) > *{min-width:0}
 :is(.section,.page-hero,.catalog-hero) .btn{max-width:100%}
}
@media(min-width:721px) and (max-width:1080px){.nav{gap:12px}.actions{gap:8px}}


/* LIVE-348 — Ultrawide e zoom de 200% com largura máxima */

@media(min-width:1600px){
 .section > .container,.page-hero > .container,.footer > .container{width:min(1240px,calc(100% - 64px))}
 .sales-focus-inner{max-width:1240px}
}
@media(max-width:800px){:is(.section,.page-hero,.catalog-hero) :where(.cards,.plans-grid,.catalog-grid-v5){min-width:0}}
@media(max-width:720px) and (orientation:landscape){.nav.open{max-height:calc(100dvh - 72px)}}


/* LIVE-349 — Movimento reduzido, contraste e impressão */

@media(prefers-reduced-motion:reduce){
 :is(.section,.page-hero,.catalog-hero,.footer,.nav,.actions) :where(a,button,.btn){transition:none!important;animation:none!important}
}
@media(forced-colors:active){
 :is(.nav,.actions,.section,.page-hero,.catalog-hero) :where(a,button):focus-visible{outline:3px solid Highlight}
}
@media print{
 .menu-btn,.mobile-cta,.whatsapp-float{display:none!important}
 .section,.page-hero{break-inside:avoid}
}


/* LIVE-350 navigation overflow lock (original header/logo/carousel CSS untouched) */
@media(max-width:1080px){.connect-menu-open body{overflow:hidden}.connect-menu-open .nav.open{overscroll-behavior:contain}}

/* LIVE-351 — processing state on actual POST only. */
.connect-is-submitting button[aria-busy="true"]{cursor:progress;opacity:.76}

/* LIVE-352 — return-to-top fixed away from WhatsApp and mobile CTAs. */
.connect-back-to-top{position:fixed;left:17px;bottom:25px;z-index:68;width:46px;height:46px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:#075cab;color:#fff;box-shadow:0 10px 34px rgba(6,27,61,.18);font-size:27px;cursor:pointer;touch-action:manipulation}
.connect-back-to-top[hidden]{display:none!important}
.connect-back-to-top:focus-visible{outline:3px solid #00c6ef;outline-offset:3px}
@media(max-width:720px){.connect-back-to-top{bottom:calc(92px + env(safe-area-inset-bottom,0px));left:12px}}
@media(prefers-reduced-motion:reduce){.connect-back-to-top{transition:none!important}}

/* ELITE-360 — Menu mobile: foco, estado, rolagem e fechamento */

/* Keep mobile menu scrollable but avoid cutting off the last CTA on short screens. */
@media(max-width:1080px){
 .nav.open{max-block-size:min(calc(100dvh - 94px),680px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .nav.open a{flex-shrink:0;min-block-size:46px}
 .connect-menu-open body{overflow:hidden}
}


/* ELITE-361 — Links de localização, CTAs e âncoras reais */

/* Section links remain discoverable below the fixed navigation. */
html:focus-within{scroll-padding-block-start:100px}
:where(section[id],main[id],article[id],div[id]):target{scroll-margin-block-start:104px}
.nav a[aria-current="location"]{font-weight:900;text-decoration-thickness:2px}
:where(.btn,a).text-link:focus-visible{text-underline-offset:4px}


/* ELITE-362 — Formulários: confirmação visual, erros e volta no navegador */

/* Only real POST forms use submitting state; no invented payment spinner. */
.connect-is-submitting :where(button[type=submit],input[type=submit]){opacity:.76;cursor:progress}
:where(.contract-form,#contractForm) :is(input,select,textarea):invalid[aria-invalid=true]{outline:2px solid #bc3045;outline-offset:2px}
:where(.contract-form,#contractForm) .field-help{max-inline-size:100%;overflow-wrap:anywhere}


/* ELITE-363 — Cartões e grids: textos compridos e botões consistentes */

/* Cards with long system names, price labels or links wrap naturally. */
:where(.product-card-v5,.demo-card,.related-card,.comparison-card,.plan-card,.catalog-card) :is(h2,h3,h4,p,span){min-inline-size:0;overflow-wrap:anywhere}
:where(.product-card-v5,.demo-card,.related-card,.comparison-card,.plan-card) :where(.btn,a.btn){max-inline-size:100%;min-block-size:44px;white-space:normal;text-align:center}
:where(.catalog-grid-v5,.related-grid-v5,.demo-grid,.comparison-grid)>*{min-inline-size:0;max-inline-size:100%}


/* ELITE-364 — Área fixa de WhatsApp e CTA sem sobreposição */

/* Sticky mobile actions must not cover the form, footer or external support CTA. */
@media(max-width:720px) and (orientation:portrait){
 body:has(.mobile-cta){padding-block-end:max(110px,calc(95px + env(safe-area-inset-bottom,0px)))}
 .mobile-cta{inset-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px));max-inline-size:calc(100% - 16px)}
 .whatsapp-float{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px))}
 .ux-back-to-top{bottom:calc(91px + env(safe-area-inset-bottom,0px));left:max(10px,env(safe-area-inset-left,0px))}
}


/* ELITE-365 — Smartphones compactos 320–390 px com layout fluido */

/* Narrow phones 320px/360px: collapse content, preserve natural original banner aspect ratio. */
@media(max-width:390px){
 :where(.section,.page-hero,.catalog-hero,.contract-section)>.container{padding-inline:12px;min-inline-size:0}
 :where(.catalog-grid-v5,.plans-grid,.demo-grid,.related-grid-v5,.contract-layout,.footer-grid){grid-template-columns:minmax(0,1fr)}
 :where(.intro-actions,.contract-actions,.conversion-actions,.card-actions){flex-wrap:wrap;gap:10px}
 :where(.intro-actions,.contract-actions,.conversion-actions,.card-actions) :is(.btn,a.btn){flex:1 1 100%;max-inline-size:100%;white-space:normal;line-height:1.42}
 .mobile-cta a{min-block-size:46px;font-size:12px;overflow-wrap:anywhere}
}


/* ELITE-366 — Smartphones e tablets 391–820 px com grids estáveis */

/* Phones and tablets: flexible 1/2-column content without horizontal page scrolling. */
@media(min-width:391px) and (max-width:820px){
 :where(.catalog-grid-v5,.demo-grid,.related-grid-v5,.plans-grid,.hosting-guide-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
 :where(.contract-layout,.intro-grid,.comparison-grid){grid-template-columns:minmax(0,1fr)}
 :where(.product-card-v5,.related-card,.plan-card)>*{min-inline-size:0}
}
@media(max-width:580px){
 :where(.catalog-grid-v5,.demo-grid,.related-grid-v5,.plans-grid,.hosting-guide-grid){grid-template-columns:minmax(0,1fr)}
}


/* ELITE-367 — Tablets e notebooks 821–1280 px com leitura legível */

/* Notebook and mid-size tablet width: readable working area. */
@media(min-width:821px) and (max-width:1280px){
 :where(.section,.page-hero,.catalog-hero,.contract-section)>.container{inline-size:min(100% - 40px,1160px)}
 :where(.catalog-grid-v5,.related-grid-v5,.demo-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
 :where(.intro-actions,.contract-actions,.conversion-actions){flex-wrap:wrap}
 :where(.contract-layout) > *{min-inline-size:0}
}


/* ELITE-368 — Desktop 1366–1600 px e hierarquia editorial */

/* Desktops: consistent card alignment, avoid width-induced line breaks in CTAs. */
@media(min-width:1281px) and (max-width:1600px){
 :where(.section,.page-hero,.catalog-hero,.contract-section)>.container{max-inline-size:1240px;margin-inline:auto}
 :where(.cards,.catalog-grid-v5,.related-grid-v5,.demo-grid)>*{min-inline-size:0}
 :where(.card,.product-card-v5,.related-card,.demo-card) :is(.btn,a.btn){max-inline-size:100%}
}


/* ELITE-369 — Ultra-wide 1920–2560 px e proporção sem esticar ativos */

/* Ultra-wide: content does not extend across the full monitor. */
@media(min-width:1601px){
 :where(.section,.page-hero,.catalog-hero,.contract-section,.footer)>.container{width:min(1240px,calc(100% - 80px));margin-inline:auto}
 :where(.intro-copy,.section-head,.contract-intro) p{max-inline-size:74ch}
 :where(.catalog-grid-v5,.related-grid-v5,.demo-grid){column-gap:clamp(20px,1.4vw,28px)}
}


/* ELITE-370 — Landscape baixo: menu, CTAs e campos acessíveis */

/* Short landscape: avoid trapping the user behind a tall menu or CTA. */
@media(orientation:landscape) and (max-height:550px){
 .nav.open{max-block-size:calc(100dvh - 74px);overflow-y:auto}
 :where(.section,.page-hero,.catalog-hero,.contract-section){scroll-margin-block-start:72px}
 :where(.contract-actions,.intro-actions,.conversion-actions){flex-wrap:wrap}
}


/* ELITE-371 — Acessibilidade: foco, contraste, movimento reduzido */

/* High contrast and motion preference: leave carousel logic and image assets untouched. */
@media(prefers-contrast:more){
 :where(.section,.page-hero,.catalog-hero) :where(.btn,button,input,textarea,select){border-width:2px}
 :where(a,button,input,textarea,select):focus-visible{outline:3px solid currentColor;outline-offset:4px}
}
@media(forced-colors:active){:where(a,button,input,textarea,select):focus-visible{outline:3px solid Highlight}}
@media(prefers-reduced-motion:reduce){
 :where(.section,.page-hero,.catalog-hero,.footer) :where(a,button,.btn){transition:none!important}
 .ux-back-to-top{transition:none!important}
}