@import url('/venda-v4.css');

html,body{max-width:100%;overflow-x:clip}
.shell{width:min(1160px,calc(100% - 72px))}

.hero{height:auto;min-height:0;max-height:none;padding:34px 0 28px}
.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px}
.hero-copy,.product-stage{min-width:0}
.hero h1{max-width:500px;font-size:clamp(41px,4vw,56px);line-height:.97;text-wrap:balance}
.hero-copy>p{max-width:465px;font-size:clamp(15px,1.15vw,17px)}
.product-stage{height:388px}
.editor-panel{top:36px;width:min(425px,76%);height:258px;padding:13px}
.panel-body{grid-template-columns:64px 1fr;gap:9px;padding-top:9px}
.panel-nav{gap:4px}.panel-nav span{height:19px}
.panel-form{gap:7px}.panel-line{height:28px}.panel-module{height:40px}
.phone{left:8%;bottom:4px;width:184px;height:352px}
.phone-page{padding:29px 14px 14px}
.phone-page .shape{width:88px;height:88px;margin-bottom:12px}
.phone-page .kicker{font-size:13px}
.phone-page h3{max-width:100%;font-size:28px;line-height:.94;overflow-wrap:normal;word-break:normal}
.phone-page p{font-size:10px;margin-top:9px}
.phone-page .social{margin-top:10px;width:25px;height:25px}
.phone-page .links{gap:5px;margin-top:11px}.phone-page .link{height:23px}
.phone-page.editorial{padding:24px 13px 13px}
.phone-page.editorial .mini-rule{margin:4px 0 10px}
.phone-page.editorial .shape{height:102px;margin-bottom:10px}
.phone-page.editorial h3{font-size:25px;line-height:.9}
.phone-page.editorial p{font-size:9px;line-height:1.35}
.phone-page.afetivo::before{z-index:0;width:135px;height:135px;left:-58px;top:-5px}
.phone-page.afetivo>*{position:relative;z-index:1}
.phone-page.afetivo .shape{width:82px;height:82px}
.label-one{top:72px}.label-two{bottom:34px}.label-three{top:43px}
.hero-dots{left:222px;bottom:8px}

.section{padding:40px 0}
.section-head{margin-bottom:18px}
.section h2{font-size:clamp(33px,3.5vw,44px);text-wrap:balance}
.section-head p{font-size:14px}
.model-explorer{gap:18px}
.model-stage{min-height:395px}
.browser{min-height:359px}.browser-preview{height:323px;padding:16px}
.desktop-page{width:min(600px,90%);padding:20px}
.desktop-page h3{font-size:39px}.desktop-page p{font-size:13px}
.desktop-page.afetivo::before{z-index:0}
.desktop-page.afetivo>*{position:relative;z-index:1}

/* Páginas reais: três exemplos compactos e categorizados */
.real-section{padding:32px 0 34px}
.real-section .section-head{margin-bottom:14px}
.real-grid{gap:12px}
.case{padding:14px;border-radius:22px;box-shadow:4px 4px 0 rgba(255,255,255,.14)}
.case-person{gap:8px;min-width:0}
.case-person>div:last-child{min-width:0}
.case-person>div:last-child::before{display:inline-flex;align-items:center;padding:4px 7px;margin-bottom:4px;border:1px solid currentColor;border-radius:999px;font-size:7px;font-weight:950;letter-spacing:.09em;line-height:1;text-transform:uppercase;content:"pessoal"}
.case-mundo .case-person>div:last-child::before{content:"de marca"}
.case small{display:none}
.case-photo{width:42px;height:42px;flex:0 0 42px;border-radius:13px;box-shadow:2px 2px 0 var(--dark)}
.case h3{margin-top:2px;font-size:19px}
.case-open{padding:6px 8px;font-size:8px;white-space:nowrap}
.case-window{height:145px;margin-top:10px;padding:9px;border-radius:15px;box-shadow:3px 3px 0 var(--dark)}
.case-mini-top{padding-bottom:7px}
.case-mini-layout{grid-template-columns:58px 1fr;gap:8px;padding-top:8px}
.case-avatar{height:80px;border-radius:16px}
.case-content{gap:5px}
.case-title-line{height:9px}
.case-text-line{height:5px}
.case-buttons{gap:4px;margin-top:3px}
.case-button{height:21px;border-width:1.5px;border-radius:6px}
.case-caption{margin-top:10px;font-size:10.5px;line-height:1.35}
.case-mundo{background:#bfe9f4;color:var(--dark)}
.case-mundo .case-photo,.case-mundo .case-avatar{background-color:#fff;background-image:url('/mundo-ar/portal-logo-oficial.webp')!important;background-repeat:no-repeat;background-position:center;background-size:88% auto}
.case-mundo .case-avatar{border-radius:16px}
.case-mundo .case-title-line{background:#249fca}
.case-mundo .case-button{background:#dff2fa}

.pricing-top{display:block;margin-bottom:17px}
.pricing-note{display:none}
.plans{gap:14px}
.process-section{padding-top:32px}
.process-line{display:none}
.faq-wrap{margin-top:0;gap:28px}
.final{padding-bottom:38px}

@media(min-width:641px){
  .real-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .shell{width:min(100% - 44px,1160px)}
  .hero{padding:28px 0 22px}
  .hero-grid{gap:14px}
  .product-stage{height:360px}
  .faq-wrap{gap:18px}
  .case-head{align-items:flex-start}
}

@media(max-width:640px){
  .shell{width:min(100% - 28px,1160px)}
  .hero{padding:22px 0 14px}
  .hero h1{font-size:34px;max-width:340px}
  .hero-copy>p{font-size:14px}
  .product-stage{height:232px;margin-top:6px}
  .editor-panel{top:8px;width:72%;height:158px}
  .phone{left:6px;width:122px;height:226px}
  .phone-page{padding:22px 9px 9px}
  .phone-page .shape{width:62px;height:62px;margin-bottom:8px}
  .phone-page .kicker{font-size:9px}
  .phone-page h3{font-size:19px}
  .phone-page p{font-size:6.5px;margin-top:6px}
  .phone-page .social{width:18px;height:18px;margin-top:6px}
  .phone-page .links{margin-top:6px;gap:3px}.phone-page .link{height:14px}
  .phone-page.editorial{padding:19px 9px 8px}
  .phone-page.editorial .shape{height:74px;margin-bottom:6px}
  .phone-page.editorial h3{font-size:17px}
  .phone-page.afetivo::before{width:92px;height:92px;left:-40px;top:-4px}
  .hero-dots{left:140px;bottom:2px}
  .section{padding:32px 0}
  .section h2{font-size:29px}
  .model-stage{min-height:278px}
  .browser{min-height:254px}.browser-preview{height:225px}
  .real-section{padding:28px 0 30px}
  .real-grid{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .real-grid::-webkit-scrollbar{display:none}
  .case{min-width:84%;scroll-snap-align:start}
  .pricing-top{margin-bottom:14px}
  .faq-wrap{margin-top:0}
  .final{padding-bottom:30px}
}