/* ultrafibra.tec.br – visual inspirado na Mais Fibra (roxo + rosa, Roboto) */
:root{
  --roxo:#6F3FA0; --roxo-esc:#3a1858; --roxo-bg:rgba(111,63,160,.08);
  --rosa-m:#D11967; --rosa-m2:#EF4AA8; --rosa-m-bg:rgba(209,25,103,.1);
  --grad:linear-gradient(135deg,#D11967,#EF4AA8);
  /* nomes herdados do formulário da Vero (mesma estrutura) */
  --rosa:var(--roxo); --rosa-bg:var(--roxo-bg); --laranja:var(--rosa-m);
  --tinta:#151A24; --texto:#2f3540; --cinza:#5F6673; --linha:#e6e6ea; --fundo:#f3f3f4; --caixa:#f6f4f9;
  --verde:#157347; --zap:#25D366; --raio:18px; --sombra:0 6px 24px rgba(21,26,36,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:var(--texto);background:#fff;line-height:1.5;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--roxo)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;color:var(--tinta)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:500}
h3{font-size:1.1rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:64px 0}
.sec-cinza{background:var(--fundo)}
.sub{color:var(--cinza);max-width:720px;margin:-2px 0 28px}
[hidden]{display:none!important}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 2px 14px rgba(21,26,36,.06)}
.nav{display:flex;align-items:center;gap:30px;min-height:82px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-txt{font-weight:900;font-size:1.35rem;letter-spacing:.02em;color:var(--roxo);white-space:nowrap}
.logo-txt em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .links{display:flex;gap:26px}
.nav .links a{color:var(--cinza);text-decoration:none;font-weight:500}
.nav .links a.ativo,.nav .links a:hover{color:var(--roxo)}
.pill-marca{margin-left:auto;display:flex;flex-direction:column;align-items:center;text-decoration:none;background:linear-gradient(135deg,#3a1858,#1d0b2e);color:#fff;border-radius:14px;padding:9px 18px;box-shadow:0 8px 22px rgba(58,24,88,.35)}
.pill-marca b{font-weight:900;letter-spacing:.04em;color:#e9c8ff}.pill-marca b em{font-style:normal;color:#fff}
.pill-marca small{font-size:.74rem;opacity:.92}
.menu-btn{display:none;background:none;border:0;color:var(--roxo);font-size:1.8rem;cursor:pointer;margin-left:auto}
@media (max-width:900px){
  .nav{flex-wrap:wrap;gap:10px;min-height:68px}
  .logo .logo-selo{width:40px;height:40px}
  .menu-btn{display:block}
  .nav .links,.pill-marca{display:none}
  .nav.aberto .links{display:flex;flex-direction:column;width:100%;gap:12px;padding:6px 0 16px}
}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:15px 28px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s;font-family:inherit;color:#fff}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-grad{background:var(--grad);box-shadow:0 10px 24px rgba(209,25,103,.25)}
.btn-roxo{background:var(--roxo);box-shadow:0 10px 24px rgba(111,63,160,.28)}
.btn-zap{background:var(--zap)}
.btn-bloco{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
.chip-rosa{display:inline-block;background:var(--rosa-m-bg);color:var(--rosa-m);font-weight:700;font-size:.82rem;border-radius:999px;padding:6px 14px}

/* ---------- Hero ---------- */
.hero{background:var(--fundo);padding:56px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.eyebrow{color:var(--roxo);font-weight:700;letter-spacing:.12em;margin:18px 0 6px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
.lead{color:var(--cinza);font-size:1.12rem;margin:0 0 18px}
.bolinhas{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.bolinhas li{position:relative;padding-left:30px;font-size:1.08rem;color:var(--tinta)}
.bolinhas li:before{content:"";position:absolute;left:2px;top:.32em;width:12px;height:12px;border-radius:50%;background:var(--rosa-m);box-shadow:0 0 0 5px rgba(209,25,103,.14)}
.btn-hero{min-width:min(100%,400px);margin-bottom:22px}
.cobertura{background:#fff;border-radius:var(--raio);padding:18px;box-shadow:var(--sombra);max-width:520px}
.cob-tit{margin:0 0 10px;font-weight:700;color:var(--tinta)}
.cob-campos{display:grid;grid-template-columns:1.3fr 1fr auto;gap:8px;margin-bottom:10px;align-items:center}
.cob-campos input[type=text],.cob-campos input:not([type]),.cob-campos input[inputmode]{padding:13px 14px;border:1.5px solid #d9d6df;border-radius:10px;font:inherit;width:100%;min-width:0}
.cob-campos input:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px var(--roxo-bg)}
.sem-num{font-size:.86rem;color:var(--cinza);display:flex;gap:6px;align-items:center;white-space:nowrap}
.sem-num input{accent-color:var(--roxo)}
.cob-msg{margin:10px 0 0;font-size:.9rem;color:var(--cinza)}
.cobertura.ok .cob-msg{background:var(--roxo-bg);color:#3d2163;border-radius:12px;padding:10px 14px}
.cobertura.erro .cob-msg{color:#c0262d}
.hero-arte{position:relative;min-height:440px}
.circulo{position:absolute;right:0;top:0;width:min(420px,92%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#a46be0,#6F3FA0 55%,#4b2275);overflow:hidden;display:grid;place-items:center;box-shadow:0 30px 60px rgba(111,63,160,.3)}
.arte-wifi{width:58%;position:relative;z-index:2}
.raio{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#ffb3e0,#fff);opacity:.8;animation:fluxo 3.2s linear infinite}
.r1{width:60%;top:72%;left:-60%}.r2{width:45%;top:80%;left:-45%;animation-delay:1.1s}.r3{width:70%;top:22%;left:-70%;animation-delay:2.1s}
@keyframes fluxo{to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.raio{animation:none;display:none}}
.mini-card{position:absolute;left:0;bottom:10px;background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(21,26,36,.14);display:flex;flex-direction:column;gap:2px;max-width:220px}
.mini-card b{font-size:1.6rem;color:var(--tinta);margin-top:8px}
.mini-card strong{font-size:1.15rem;color:var(--tinta)}
.mini-card small{color:var(--cinza)}
@media (max-width:900px){
  .hero{padding:30px 0 40px}
  .hero-grid{grid-template-columns:1fr}
  .hero-arte{min-height:300px;order:-1;display:none}
  .cob-campos{grid-template-columns:1fr 1fr}
  .sem-num{grid-column:1/-1}
  .btn-hero{width:100%}
}

/* ---------- Planos ---------- */
.tit-grande{font-weight:400;max-width:800px}
.abas{display:flex;gap:24px;border-bottom:1px solid var(--linha);margin-bottom:28px}
.abas button{background:none;border:0;padding:10px 2px;font:inherit;font-weight:500;color:var(--cinza);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.abas button.ativo{color:var(--roxo);border-color:var(--roxo)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--linha);border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(21,26,36,.12)}
.card-dest{border:2px solid var(--rosa-m)}
.card-topo{display:flex;align-items:center;justify-content:space-between;min-height:30px}
.card .cat{color:var(--roxo);font-weight:700;font-size:.9rem;margin-left:auto}
.vel{font-size:1.4rem;color:var(--tinta);font-weight:500}
.vel b{font-size:2.6rem;font-weight:900;letter-spacing:-.02em}
.de{color:var(--cinza);font-size:.92rem}
.preco b{font-size:2rem;color:var(--tinta);font-weight:900}
.preco span{color:var(--cinza);font-weight:500}
.selo-verde{align-self:flex-start;background:#eefbf3;color:var(--verde);font-weight:700;font-size:.8rem;border-radius:999px;padding:5px 12px}
.itens{list-style:none;padding:0;margin:6px 0;display:grid;gap:8px;font-size:.95rem}
.itens li{display:flex;align-items:center;gap:8px;color:var(--tinta)}
.itens svg{width:18px;height:18px;color:var(--roxo);flex:0 0 18px}
.selo-prime{display:inline-flex;flex-direction:column;line-height:1;background:#0f1b2d;color:#fff;border-radius:6px;padding:4px 6px;font-size:.62rem;flex:0 0 auto}
.selo-prime i{font-style:normal;font-weight:700}.selo-prime b{color:#4fc3f7;font-size:.72rem}
.frase{color:var(--cinza);font-size:.9rem;margin:2px 0 10px;flex:1}
.mais{font-size:.85rem;color:var(--cinza)}
.mais summary{cursor:pointer;color:var(--roxo);font-weight:500;text-align:center;list-style:none;padding-top:6px}
.mais summary::-webkit-details-marker{display:none}
.mais summary:after{content:" ▼";font-size:.7em}
.mais[open] summary:after{content:" ▲"}
.avisos{margin-top:26px;font-size:.84rem;color:var(--cinza)}
.avisos p{margin:4px 0}

/* ---------- Benefícios ---------- */
.sec-roxa{background:linear-gradient(135deg,#6F3FA0,#3a1858);color:#fff}
.sec-roxa h2,.sec-roxa h3{color:#fff}.sec-roxa .sub{color:rgba(255,255,255,.85)}
.beneficios{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.beneficio{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--raio);padding:22px}
.beneficio .ic{font-size:1.8rem;margin-bottom:8px}
.beneficio p{margin:0;color:rgba(255,255,255,.88);font-size:.95rem}

/* ---------- Passos ---------- */
.como{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.passos{counter-reset:p;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:16px}
.passos li{counter-increment:p;position:relative;padding-left:56px}
.passos li:before{content:counter(p);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.passos b{display:block;color:var(--tinta)}.passos span{color:var(--cinza)}
.como .btn{margin:4px 8px 4px 0}
.destaque-preco{background:var(--fundo);border-radius:28px;padding:34px;text-align:center}
.destaque-preco b{display:block;font-size:3.6rem;font-weight:900;color:var(--roxo);margin:10px 0 0}
.destaque-preco b small{font-size:1.1rem;color:var(--cinza);font-weight:500}
@media (max-width:800px){.como{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{background:#fff;border-radius:14px;padding:16px 20px;box-shadow:0 2px 8px rgba(21,26,36,.05)}
.faq summary{cursor:pointer;font-weight:700;color:var(--tinta)}
.faq p{margin:10px 0 0;color:var(--cinza)}

/* ---------- Rodapé ---------- */
.rodape{background:#1d0b2e;color:rgba(255,255,255,.82);padding:48px 0 90px;font-size:.92rem}
.rodape .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.rodape h3{color:#fff;font-size:1rem}
.rodape a{color:#fff}
.rodape .logo-rod{margin-bottom:12px}.rodape .logo-txt{color:#e9c8ff}
.rodape .legal{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;font-size:.78rem;color:rgba(255,255,255,.6)}
.rodape .legal p{margin:0 0 8px}
@media (max-width:800px){.rodape .grid{grid-template-columns:1fr}}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:10px;background:var(--zap);color:#fff;text-decoration:none;border-radius:16px;padding:10px 18px 10px 10px;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.zap-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.zap-ic svg{width:26px;height:26px;fill:#fff}
.zap-txt{display:flex;flex-direction:column;line-height:1.15}.zap-txt b{font-size:1rem}.zap-txt small{font-weight:700;font-size:.85rem}
@media (max-width:600px){.zap-txt{display:none}.zap-flutuante{padding:8px;border-radius:50%}}

/* ---------- Páginas de texto ---------- */
.texto-legal{max-width:820px}.texto-legal h1{font-size:2rem}.texto-legal h2{font-size:1.2rem;font-weight:700;margin-top:1.4em}

/* ---------- Campos ---------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:700;font-size:.88rem;color:var(--tinta);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:1.5px solid #d6d6d6;border-radius:10px;font-size:1rem;font-family:inherit;background:#fff;color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(214,48,102,.15)}
.campo.erro input,.campo.erro select{border-color:#d93025}
.campo .msg{color:#d93025;font-size:.84rem;margin-top:4px;display:none}
.campo.erro .msg{display:block}
.campo input[type=radio],.campo input[type=checkbox]{width:auto;padding:0;margin:3px 0 0;border:0;box-shadow:none;flex:0 0 auto;accent-color:var(--rosa);transform:scale(1.15)}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.linha3{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media (max-width:560px){.linha2,.linha3{grid-template-columns:1fr}}
.ajuda{font-size:.82rem;color:var(--cinza);margin-top:4px}

/* ---------- Pedido ---------- */
.pedido{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.bloco{background:#fff;border-radius:var(--raio);padding:24px;margin-bottom:16px;box-shadow:var(--sombra)}
.bloco h2{font-size:1.15rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.bloco h2 .n{width:28px;height:28px;border-radius:50%;background:var(--laranja);color:#fff;display:grid;place-items:center;font-size:.9rem}
.resumo{position:sticky;top:100px;background:#fff;border:2px solid var(--rosa);border-radius:var(--raio);padding:22px;box-shadow:var(--sombra)}
.resumo .total{font-size:2rem;font-weight:700;color:var(--rosa)}
.resumo .linha{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--linha);font-size:.93rem}
.resumo .linha[hidden]{display:none}
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#lista-opcoes{grid-template-columns:repeat(3,1fr)}
.opcao{border:1.5px solid #d6d6d6;border-radius:10px;padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;font-size:.92rem;background:#fff}
.opcao:has(input:checked){border-color:var(--rosa);background:var(--rosa-bg)}
.opcao b{display:block;color:var(--tinta);font-size:.92rem}
.opcao small{color:var(--cinza)}
@media (max-width:900px){.pedido{grid-template-columns:1fr}.resumo{position:static;order:-1}}
@media (max-width:700px){#lista-opcoes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.opcoes{grid-template-columns:1fr}}
.aviso-erro{background:#fdecea;color:#8a1c12;border-radius:10px;padding:12px 14px;margin-bottom:14px;display:none}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;font-weight:400!important}
.oculto{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ok-box{max-width:620px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--raio);padding:40px 28px;box-shadow:var(--sombra)}
.ok-box .ic{width:72px;height:72px;border-radius:50%;background:#e6f7ed;color:var(--verde);display:grid;place-items:center;margin:0 auto 16px;font-size:2.4rem}

.campo .opcao,.campo .aceite{display:flex}
.campo .opcao{margin:0}

/* ---------- Pedido: descrição e total mensal ---------- */
.desc-plano{background:var(--caixa);border-radius:12px;padding:14px 16px;margin:-4px 0 16px}
.desc-plano p{margin:0 0 8px;font-weight:700;color:var(--tinta)}
.desc-plano ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.desc-plano li{position:relative;padding-left:22px;font-size:.92rem}
.desc-plano li:before{content:"✓";position:absolute;left:0;color:var(--rosa);font-weight:700}
@media (max-width:560px){.desc-plano ul{grid-template-columns:1fr}}
.total-mensal{border:2px solid var(--rosa);background:var(--rosa-bg);border-radius:14px;padding:14px 18px;margin:4px 0 18px}
.tm-linha{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;padding:3px 0;color:var(--texto)}
.tm-linha[hidden]{display:none}
#tm-desc{color:var(--verde);font-weight:700;white-space:nowrap}
.tm-total{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px dashed var(--rosa);margin-top:8px;padding-top:10px}
.tm-total span{font-weight:700;color:var(--tinta);font-size:1.05rem}
.tm-total small{display:block;font-weight:400;font-size:.8rem;color:var(--cinza)}
.tm-total b{font-size:1.9rem;color:var(--rosa);white-space:nowrap}
.so-total .tm-total{border-top:0;margin-top:0;padding-top:0}

/* ---------- Pedido: documentos ---------- */
.tag-opcional{font-size:.72rem;font-weight:700;color:var(--cinza);background:var(--caixa);border-radius:99px;padding:3px 9px;margin-left:4px}
.docs-intro{margin:-6px 0 14px;font-size:.93rem}
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.docs-grid .msg{grid-column:1/-1;display:none;color:#d93025;font-size:.84rem}
.docs-grid.erro .msg{display:block}
.doc-slot{position:relative;display:block;border:2px dashed #cfcfcf;border-radius:14px;min-height:150px;cursor:pointer;background:#fafafa;overflow:hidden;transition:border-color .2s}
.doc-slot:hover{border-color:var(--rosa)}
.doc-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.doc-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;min-height:150px;text-align:center;padding:12px;pointer-events:none}
.doc-ic{font-size:1.8rem}
.doc-vazio b{color:var(--tinta)}
.doc-vazio small{color:var(--cinza);font-size:.8rem}
.doc-ok{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.doc-ok[hidden]{display:none}
.doc-ok img{flex:1;width:100%;min-height:0;object-fit:contain;background:#f1f1f1}
.doc-ok img[src=""]{display:none}
.doc-nome{font-size:.78rem;padding:6px 36px 6px 10px;background:var(--rosa-bg);color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
.doc-remover{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:.9rem;z-index:2}
.doc-slot.tem{border-style:solid;border-color:var(--verde)}
.doc-slot.pdf .doc-ok:before{content:"📄 PDF";display:grid;place-items:center;flex:1;font-size:1.4rem;color:var(--tinta)}
@media (max-width:420px){.doc-slot,.doc-vazio{min-height:130px}}
/* ---------- Correção mobile (Safari/iPhone): nada pode passar da largura da tela ---------- */
.pedido{grid-template-columns:minmax(0,1fr) 360px}
.pedido>*,.bloco,.campo,.opcoes,.opcao,.resumo{min-width:0}
.campo select,.campo input,.campo textarea{max-width:100%;min-width:0}
.resumo .linha{flex-wrap:wrap}
.resumo .linha b{overflow-wrap:anywhere;min-width:0;flex:1 1 60%}
.resumo .linha span{flex:0 0 auto}
@media (max-width:900px){.pedido{grid-template-columns:minmax(0,1fr)}}
/* ---------- Ajuste mobile: total mensal e vencimento ---------- */
[data-campo="vencimento"] .opcao{position:relative;justify-content:center;padding:12px 4px}
[data-campo="vencimento"] .opcao input{position:absolute;opacity:0;pointer-events:none}
[data-campo="vencimento"] .opcao b{font-size:1rem}
.tm-linha span:last-child{white-space:nowrap}
@media (max-width:560px){
  .total-mensal{padding:14px}
  .tm-linha{font-size:.88rem}
  .tm-total{flex-direction:column;align-items:flex-start;gap:2px}
  .tm-total b{font-size:2.1rem;line-height:1.1}
  .tm-total small{display:inline}
  .tm-total small:before{content:" · "}
}

/* ---------- Ajustes do pedido no tema Ultra Fibra ---------- */
.pedido h1{color:var(--tinta)}
.bloco h2{color:var(--tinta);font-weight:700}
.resumo{border-color:var(--roxo)}
.resumo .total{color:var(--roxo)}
.tm-total b{color:var(--roxo)}
#tm-base{text-decoration:line-through;color:var(--cinza)}
#tm-desc{color:var(--verde);font-weight:700}
.total-mensal.so-total .tm-total{border-top:0;margin-top:0;padding-top:0}
.card .btn{padding:14px 10px;white-space:nowrap;font-size:.96rem}

/* ---------- Foto do topo ---------- */
.foto-hero{display:block;position:absolute;right:0;top:0;width:min(470px,100%);border-radius:32px;overflow:hidden;box-shadow:0 30px 60px rgba(111,63,160,.28)}
.foto-hero img{width:100%;height:auto;aspect-ratio:900/933;object-fit:cover}
.hero-arte .mini-card{z-index:2}
@media (max-width:900px){
  .hero-arte{display:block;min-height:0;order:-1;margin-bottom:6px}
  .foto-hero{position:relative;width:100%;border-radius:22px}
  .foto-hero img{aspect-ratio:800/641}
  .hero-arte .mini-card{display:none}
  .hero-grid{gap:18px}
}

/* ---------- Banner do topo (foto + texto em HTML) ---------- */
.banner-topo{position:relative;background:#2a0f4a;overflow:hidden}
.banner-img img{width:100%;height:clamp(340px,33.4vw,520px);object-fit:cover;object-position:left center}
.banner-conteudo{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end}
.banner-txt{width:min(48%,560px);color:#fff;padding-right:4%}
.banner-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.banner-logo .logo-txt{color:#fff;font-size:1.5rem}
.banner-logo .logo-txt em{background:linear-gradient(135deg,#ff8fd0,#ffb86b);-webkit-background-clip:text;background-clip:text;color:transparent}
.banner-eyebrow{margin:0;letter-spacing:.14em;font-weight:300;font-size:clamp(1rem,1.8vw,1.5rem)}
.banner-tit{margin:4px 0 12px;font-weight:900;line-height:.98;font-size:clamp(2.4rem,5.2vw,4.6rem);letter-spacing:-.02em}
.banner-tit span{background:linear-gradient(90deg,#ff8fd0,#ffb86b);-webkit-background-clip:text;background-clip:text;color:transparent}
.banner-preco{margin:0 0 18px;font-size:clamp(1rem,1.5vw,1.25rem);opacity:.95}
.banner-preco b{font-size:1.25em}
.banner-topo + .hero{padding-top:44px}
.hero-form{align-self:center}
.hero-form .cobertura{max-width:none;margin-top:8px}
/* foto do casal na seção de passos */
.como .hero-arte{position:relative;min-height:0}
.como .foto-hero{position:relative;width:100%}
.como .mini-card{left:-16px;bottom:22px}
@media (max-width:900px){
  .como .hero-arte{display:block;order:0}
  .como .mini-card{display:flex;left:12px;bottom:12px;padding:10px 12px}
}
@media (max-width:760px){
  .banner-img img{height:auto;aspect-ratio:820/540;object-position:center}
  .banner-conteudo{position:relative;inset:auto;display:block;background:linear-gradient(180deg,#3a1858,#2a0f4a);padding:22px 24px 26px}
  .banner-txt{width:auto;padding:0}
  .banner-logo{margin-bottom:10px}.banner-logo .logo-selo{width:40px;height:40px}
  .banner-tit{font-size:2.5rem}
}