@import url("produtos-base.css");

/* Páginas de produto — padrão mais limpo e consistente */
.hero{padding:58px 0 64px}
.hero__grid{gap:48px}
.hero__sub{max-width:610px}
.visual--photo{min-height:410px}
.visual__photo-card--mockup{width:min(100%,560px);background:transparent;box-shadow:0 20px 48px rgba(72,48,136,.10)}
.float-card{box-shadow:0 12px 28px rgba(70,47,130,.09),0 0 0 1px rgba(95,69,174,.06)}
.section{padding:64px 0}
.head{max-width:700px;margin-bottom:30px}
.head h2{font-size:clamp(24px,2.6vw,34px)}
.steps,.feature-grid,.benefits{gap:14px}
.step,.feature,.benefit{border-radius:18px;box-shadow:0 0 0 1px rgba(98,72,178,.06),0 10px 24px rgba(74,52,140,.035)}
.product-image-strip{padding-bottom:64px}
.product-image-strip__card{border-radius:24px;padding:24px;background:linear-gradient(135deg,#f5f1ff,#fff)}
.product-image-strip__media{border-radius:18px}
.cta{padding-bottom:64px}
.cta__box{border-radius:24px}

/* Pedido Eletrônico — seção Recursos mais compacta */
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos{padding:50px 0}
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head{max-width:620px;margin-bottom:24px}
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head .kicker{margin-bottom:8px;padding:6px 10px;font-size:9.5px}
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head h2{font-size:clamp(22px,2.15vw,29px);line-height:1.12;margin-bottom:8px}
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head p{max-width:550px;font-size:12.2px;line-height:1.65}

/* Imagens explicativas adicionais, integradas ao conteúdo e sem moldura externa */
.feature-grid::after{content:"";grid-column:1/-1;display:block;width:min(100%,980px);aspect-ratio:1200/760;margin:30px auto 0;background-position:center;background-repeat:no-repeat;background-size:contain}
body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) .feature-grid::after{background-image:url("../assets/images/pedido-eletronico-detalhes.svg")}
body:has(.hero img[src*="televendas-mockup-topo"]) .feature-grid::after{background-image:url("../assets/images/televendas-detalhes.svg")}

@media(max-width:960px){
  .hero__grid{gap:32px}
  .visual--photo{min-height:360px}
  .feature-grid::after{width:min(100%,900px);margin-top:24px}
}

@media(max-width:620px){
  .hero{padding:44px 0 48px}
  .hero h1{font-size:33px}
  .visual--photo{min-height:300px}
  .visual__photo-card--mockup{width:min(94vw,500px)}
  .section{padding:50px 0}
  .head{margin-bottom:24px}
  .product-image-strip{padding-bottom:50px}
  .product-image-strip__card{padding:16px;border-radius:20px}
  .cta{padding-bottom:50px}
  .feature-grid::after{width:100%;margin-top:18px}
  body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos{padding:42px 0}
  body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head{margin-bottom:20px}
  body:has(.hero img[src*="pedido-eletronico-mockup-topo"]) #recursos .head h2{font-size:23px}
}