/* ============================================================
   COPPARO — style-v2.css
   Versão 2 · Direção "showroom editorial" · Premium acessível
   Bordô como marca, mostarda em destaques, neutros quentes
   ============================================================ */
:root{
  --bordo:#7c1d2e;
  --bordo-2:#5e1422;
  --bordo-claro:#a63a4c;
  --mostarda:#e0a721;
  --mostarda-2:#f6e6c0;
  --tinta:#221e1a;
  --tinta-2:#574f46;
  --areia:#f6f2ea;
  --areia-2:#ece4d7;
  --branco:#fff;
  --linha:#e2d9cb;
  --wa:#189c4d;
  --wa-2:#137a3c;
  --raio:14px;
  --sombra:0 14px 36px rgba(45,30,20,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--areia);color:var(--tinta);
  line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.05rem,5.1vw,3.5rem);text-wrap:balance}
h2{font-size:clamp(1.7rem,3.7vw,2.5rem);text-wrap:balance}
h3{font-size:1.16rem}
p{text-wrap:pretty}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.wrap-estreito{max-width:840px;margin:0 auto;padding:0 22px}
section{padding:84px 0}
.secao-clara{background:var(--branco)}
.secao-areia{background:var(--areia-2)}
.secao-escura{background:var(--tinta);color:#efe8dd}
.secao-escura h2,.secao-escura h3{color:#fff}
.secao-escura .sub{color:#c9bfb2}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.79rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--bordo);margin-bottom:14px}
.kicker::before{content:"";width:26px;height:3px;background:var(--mostarda);border-radius:2px}
.secao-escura .kicker{color:var(--mostarda)}
.sub{color:var(--tinta-2);max-width:64ch;margin-top:14px;font-size:1.06rem}
.centro{text-align:center}
.centro .sub{margin-inline:auto}
.centro .kicker{justify-content:center}
.skip-link{position:absolute;left:-999px;top:0;background:var(--bordo);color:#fff;padding:10px 18px;z-index:300;border-radius:0 0 8px 0}
.skip-link:focus{left:0;top:0}

/* ---------------- Botões ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:1rem;
  padding:15px 26px;border-radius:10px;text-decoration:none;border:2px solid transparent;cursor:pointer;min-height:50px;
  font-family:inherit;transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--mostarda);outline-offset:3px}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn-1{background:var(--bordo);color:#fff;box-shadow:0 4px 14px rgba(124,29,46,.26)}
.btn-1:hover{background:var(--bordo-2)}
.btn-2{background:transparent;color:var(--bordo);border-color:var(--bordo)}
.btn-2:hover{background:rgba(124,29,46,.08)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(24,156,77,.22)}
.btn-wa:hover{background:var(--wa-2)}
.btn-claro{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.72);backdrop-filter:blur(3px)}
.btn-claro:hover{background:rgba(255,255,255,.2)}
.btn-mostarda{background:var(--mostarda);color:var(--tinta)}
.btn-mostarda:hover{background:#c9931a}
.btn-bloco{width:100%}
.grupo-btn{display:flex;flex-wrap:wrap;gap:12px}
.tel-inline{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  text-decoration-color:var(--mostarda)}

/* ---------------- Topo ---------------- */
.topo{position:sticky;top:0;z-index:150;background:rgba(246,242,234,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s}
.topo.fixo{border-bottom-color:var(--linha);box-shadow:0 4px 18px rgba(45,30,20,.07)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.marca img{height:46px;width:auto}
.nav{display:flex;gap:24px;list-style:none;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:.94rem;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--mostarda)}
.topo-cta{display:flex;gap:10px;align-items:center}
.topo-cta .btn{padding:11px 18px;min-height:44px;font-size:.94rem}
.abrir-menu{display:none;background:var(--branco);border:2px solid var(--linha);border-radius:10px;padding:10px 12px;cursor:pointer}
.abrir-menu span{display:block;width:20px;height:2px;background:var(--tinta);margin:4px 0}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;color:#fff;display:flex;align-items:flex-end;min-height:min(92vh,820px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(30,18,14,.30) 0%,rgba(30,18,14,.50) 46%,rgba(28,16,12,.90) 100%)}
.hero-in{width:100%;padding:130px 0 54px}
.hero h1{max-width:19ch;margin-bottom:16px}
.hero .hero-sub{font-size:clamp(1.04rem,2.2vw,1.26rem);max-width:50ch;color:#f3ece1;margin-bottom:30px}
.hero-selo{position:absolute;top:100px;right:28px;width:clamp(86px,10vw,132px);z-index:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.pilula{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(5px);padding:8px 15px;border-radius:999px;font-size:.86rem;font-weight:600;margin-bottom:20px}
.pilula svg{width:15px;height:15px;fill:var(--mostarda)}
.hero-apoio{margin-top:18px;font-size:.95rem;color:#e8ded1}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:7px 14px;font-size:.85rem;font-weight:600}

/* ---------------- Faixa de confiança ---------------- */
.confianca{background:var(--bordo);color:#fff;padding:0}
.confianca-in{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.conf{padding:26px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.16)}
.conf:last-child{border-right:0}
.conf b{display:block;font-family:'Fraunces',serif;font-size:1.42rem;color:var(--mostarda);line-height:1.1}
.conf small{display:block;font-size:.83rem;color:#f2ded9;margin-top:5px;line-height:1.35}

/* ---------------- Etapas / funil ---------------- */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;counter-reset:passo}
.etapa{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:30px 26px;position:relative}
.etapa::before{counter-increment:passo;content:counter(passo);position:absolute;top:-18px;left:26px;
  width:38px;height:38px;border-radius:50%;background:var(--mostarda);color:var(--tinta);
  font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.etapa h3{margin:10px 0 8px}
.etapa p{color:var(--tinta-2);font-size:.96rem}

/* ---------------- Dores / soluções ---------------- */
.dores{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.dor{background:var(--branco);border:1px solid var(--linha);border-left:5px solid var(--bordo);border-radius:12px;padding:24px}
.dor h3{font-size:1.04rem;margin-bottom:7px}
.dor p{color:var(--tinta-2);font-size:.95rem}

/* ---------------- Editorial ---------------- */
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mosaico{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:158px;gap:14px}
.mosaico img{width:100%;height:100%;object-fit:cover;border-radius:var(--raio)}
.mosaico img:nth-child(1){grid-column:span 2;grid-row:span 2}
.selo-flutua{display:inline-flex;align-items:center;gap:12px;background:var(--mostarda-2);border:1px solid var(--mostarda);
  border-radius:12px;padding:14px 18px;margin-top:24px;font-size:.95rem;font-weight:600}
.selo-flutua img{width:46px;height:46px}

/* ---------------- Categorias ---------------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:36px}
.cat{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--branco);border:1px solid var(--linha);
  text-decoration:none;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;grid-column:span 2}
.cat:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.cat img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .4s}
.cat:hover img{transform:scale(1.05)}
.cat-txt{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-txt p{font-size:.93rem;color:var(--tinta-2);flex:1}
.cat-acao{color:var(--bordo);font-weight:700;font-size:.93rem}
.cat-acao::after{content:" →"}
.cat.grande{grid-column:span 3}
/* 16/10 é a proporção real das ilustrações de categoria (1200x750) — evita cortar o título dentro da imagem */
.cat.grande img{aspect-ratio:16/10}
.tag{position:absolute;top:14px;left:14px;background:var(--mostarda);color:var(--tinta);font-weight:700;
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px}

/* ---------------- Calculadora (ímã) ---------------- */
.calc{background:linear-gradient(140deg,var(--bordo) 0%,var(--bordo-2) 100%);color:#fff;border-radius:20px;
  padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;box-shadow:var(--sombra)}
.calc h2{color:#fff}
.calc .sub{color:#f3dcd8}
.calc-box{background:rgba(255,255,255,.97);border-radius:var(--raio);padding:26px;color:var(--tinta)}
.calc-linha{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.calc-box label{font-weight:600;font-size:.88rem;display:block;margin-bottom:5px}
.calc-box input,.calc-box select{width:100%;padding:12px 14px;border:1.6px solid var(--linha);border-radius:9px;
  font:inherit;background:#fff;color:var(--tinta)}
.calc-box input:focus,.calc-box select:focus{outline:2px solid var(--mostarda);border-color:var(--mostarda)}
.calc-res{background:var(--mostarda-2);border:1px solid var(--mostarda);border-radius:10px;padding:16px 18px;margin:16px 0}
.calc-res b{font-family:'Fraunces',serif;font-size:1.7rem;display:block;color:var(--bordo)}
.calc-res small{color:var(--tinta-2);display:block;margin-top:4px}
.calc-nota{font-size:.82rem;color:var(--tinta-2);margin-top:12px}

/* ---------------- Ofertas ---------------- */
.ofertas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:34px}
.oferta{background:var(--branco);border:1px solid var(--linha);border-top:5px solid var(--mostarda);
  border-radius:var(--raio);padding:26px;display:flex;flex-direction:column;gap:6px}
.oferta .preco{font-family:'Fraunces',serif;font-size:1.85rem;color:var(--bordo);margin-top:6px}
.oferta .un{font-size:.86rem;color:var(--tinta-2)}
.oferta .obs{font-size:.86rem;color:var(--tinta-2);margin:10px 0 16px;flex:1}
.aviso{font-size:.86rem;color:var(--tinta-2);margin-top:20px}

/* ---------------- Galeria ---------------- */
.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:34px}
.galeria img,.galeria video{width:100%;height:100%;object-fit:cover;border-radius:var(--raio);background:#000}
.gA{grid-column:span 4;aspect-ratio:16/9}
.gB{grid-column:span 2;aspect-ratio:3/4}
.gC,.gD,.gE{grid-column:span 2;aspect-ratio:3/4}

/* ---------------- Prova social ---------------- */
.nota{display:flex;align-items:center;gap:22px;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);padding:24px 28px;flex-wrap:wrap;margin-top:30px}
.nota .n{font-family:'Fraunces',serif;font-size:2.9rem;color:var(--bordo);line-height:1}
.estrelas{color:var(--mostarda);letter-spacing:3px;font-size:1.05rem}
.nota small{color:var(--tinta-2);display:block;margin-top:3px}
.depos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.depo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:26px;
  display:flex;flex-direction:column;gap:10px}
.depo p{color:var(--tinta-2);font-size:.96rem}
.depo cite{font-style:normal;font-weight:700;font-size:.88rem}
.depo cite span{display:block;font-weight:400;color:var(--tinta-2);font-size:.83rem;margin-top:2px}

/* ---------------- FAQ ---------------- */
.faq-lista{margin-top:30px}
.faq-lista details{background:var(--branco);border:1px solid var(--linha);border-radius:12px;margin-bottom:11px;padding:0 22px}
.faq-lista summary{cursor:pointer;font-weight:600;padding:18px 32px 18px 0;list-style:none;position:relative}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.45rem;color:var(--bordo);line-height:1}
.faq-lista details[open] summary::after{content:"–"}
.faq-lista details p{padding:0 0 18px;color:var(--tinta-2);font-size:.96rem}

/* ---------------- Localização ---------------- */
.local{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;margin-top:34px}
.mapa{border:0;width:100%;height:100%;min-height:380px;border-radius:var(--raio)}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:28px}
.linha-info{display:flex;gap:13px;margin-bottom:16px}
.linha-info svg{width:21px;height:21px;fill:var(--bordo);flex:none;margin-top:3px}
.linha-info small{display:block;color:var(--tinta-2)}
.cartao .btn{width:100%;margin-bottom:10px}

/* ---------------- Formulário ---------------- */
.form-cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:30px;max-width:780px;margin-top:30px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campos .full{grid-column:1/-1}
.campos label{font-weight:600;font-size:.89rem;display:block;margin-bottom:5px}
.campos input,.campos select,.campos textarea{width:100%;padding:13px 15px;border:1.6px solid var(--linha);
  border-radius:9px;font:inherit;background:#fff;color:var(--tinta)}
.campos input:focus,.campos select:focus,.campos textarea:focus{outline:2px solid var(--mostarda);border-color:var(--mostarda)}
.erro{color:#a3212f;font-size:.84rem;display:none;margin-top:5px}
.aceite{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--tinta-2)}
.aceite input{width:auto;margin-top:4px}

/* ---------------- Banda final ---------------- */
.banda{background:var(--tinta);color:#fff;text-align:center}
.banda h2{color:#fff}
.banda .sub{color:#c9bfb2;margin-inline:auto}
.banda .grupo-btn{justify-content:center;margin-top:28px}

/* ---------------- Migalhas ---------------- */
.migalhas{font-size:.85rem;color:var(--tinta-2);padding:18px 0 0}
.migalhas a{color:var(--bordo);text-decoration:none}
.migalhas a:hover{text-decoration:underline}

/* ---------------- Rodapé ---------------- */
.rodape{background:var(--tinta);color:#c9bfb2;font-size:.93rem;padding:62px 0 118px}
.rodape-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:36px;margin-bottom:36px}
.rodape img{max-width:260px;margin-bottom:18px}
.rodape h4{color:#fff;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px;font-family:inherit;font-weight:700}
.rodape a{color:var(--mostarda);text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape ul{list-style:none}
.rodape li{margin-bottom:9px}
.rodape-fim{border-top:1px solid rgba(255,255,255,.13);padding-top:22px;text-align:center;font-size:.83rem}

/* ---------------- Barra mobile ---------------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;grid-template-columns:1fr 1.5fr 1fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  border-top:1px solid var(--linha);box-shadow:0 -4px 18px rgba(45,30,20,.08)}
.barra .btn{padding:12px 6px;font-size:.9rem;min-height:46px}

/* ---------------- Cookies ---------------- */
.cookies{position:fixed;left:14px;right:14px;bottom:88px;z-index:210;background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;padding:16px 20px;font-size:.87rem;box-shadow:var(--sombra);display:none;max-width:540px;margin:0 auto}
.cookies a{color:var(--bordo)}
.cookies button{margin-left:10px;background:var(--bordo);color:#fff;border:0;border-radius:8px;padding:8px 16px;
  font-weight:600;cursor:pointer;font-family:inherit}

/* ---------------- Reveal ---------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .cat,.cat img,.btn{transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- Responsivo ---------------- */
@media(max-width:1000px){
  .confianca-in{grid-template-columns:repeat(3,1fr)}
  .conf:nth-child(3){border-right:0}
  .conf{border-bottom:1px solid rgba(255,255,255,.16)}
  .editorial{grid-template-columns:1fr;gap:32px}
  .calc{grid-template-columns:1fr;padding:32px}
  .local{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(4,1fr)}
  .cat,.cat.grande{grid-column:span 2}
  .etapas,.dores,.depos{grid-template-columns:1fr 1fr}
  .rodape-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  section{padding:58px 0}
  .nav,.topo-cta .btn-2{display:none}
  .abrir-menu{display:block}
  .nav.aberto{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:absolute;top:76px;left:0;right:0;
    background:var(--branco);border-bottom:1px solid var(--linha);padding:20px 22px;box-shadow:var(--sombra)}
  .barra{display:grid}
  .rodape{padding-bottom:140px}
  .confianca-in{grid-template-columns:repeat(2,1fr)}
  .conf:nth-child(3){border-right:1px solid rgba(255,255,255,.16)}
  .conf:nth-child(even){border-right:0}
  .cats,.etapas,.dores,.depos,.campos,.calc-linha{grid-template-columns:1fr}
  .cat,.cat.grande{grid-column:span 1}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .gA{grid-column:span 2;aspect-ratio:16/10}
  .gB,.gC,.gD,.gE{grid-column:span 1}
  .mosaico{grid-auto-rows:120px}
  /* em telas altas e estreitas, 92vh deixa a caixa muito mais alta que larga e o object-fit:cover
     corta quase toda a largura da imagem — troca para uma altura baseada na largura da tela */
  .hero{min-height:min(90vw,600px)}
  /* a foto da fachada tem o selo "desde 2014" no lado direito — desloca o enquadramento
     pra manter o selo visível em vez de cortar pelo centro */
  .hero img[src*="fachada-copparo"]{object-position:68% 32%}
  .hero-in{padding-top:104px}
  .hero-selo{top:92px;right:16px}
  .rodape-grid{grid-template-columns:1fr}
  .calc{padding:24px}
  .calc-box{padding:20px}
}

/* ============================================================
   ABERTURA (preloader) — fundo claro; o ícone real (casinha + sorriso)
   "clica" para abrir e dissolve na logo completa, sem alterar cores/traço
   ============================================================ */
.abertura{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:#faf7f2;transition:opacity .6s ease,visibility .6s ease}
.abertura[hidden]{display:none}
/* fundo: brilho radial que respira + textura de linhas finas da marca */
.abertura::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 55% at 50% 42%,rgba(224,167,33,.16) 0%,rgba(224,167,33,0) 60%),
             radial-gradient(90% 80% at 50% 45%,#ffffff 0%,#f8f4ec 55%,#efe7d9 100%);
  animation:respira 4s ease-in-out infinite}
/* grade sutil que aparece atrás, como uma planta de piso */
.abertura::after{content:"";position:absolute;inset:-2px;z-index:0;opacity:0;
  background-image:linear-gradient(rgba(124,29,46,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(124,29,46,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 42%,#000 0%,transparent 70%);
          mask-image:radial-gradient(60% 60% at 50% 42%,#000 0%,transparent 70%);
  animation:gradeEntra 1.2s ease .2s forwards}
.abertura.saindo{opacity:0;visibility:hidden;transition:opacity .6s ease .55s,visibility .6s ease .55s}
/* cortinas de saída — ficam fora da tela durante toda a entrada (não podem cobrir o cartão),
   e só entram em cena no fechamento: fecham cobrindo tudo por um instante e reabrem revelando o site */
.abertura .cortina{position:absolute;top:0;bottom:0;width:52%;z-index:1;background:#7c1d2e}
.abertura .cortina.esq{left:0;transform:translateX(-102%)}
.abertura .cortina.dir{right:0;transform:translateX(102%)}
.abertura.saindo .cortina.esq{animation:cortinaEsq 1.1s cubic-bezier(.6,0,.3,1) forwards}
.abertura.saindo .cortina.dir{animation:cortinaDir 1.1s cubic-bezier(.6,0,.3,1) forwards}
.abertura-in{position:relative;z-index:3;text-align:center;padding:26px;max-width:480px}

/* cartão da marca — entra com leve profundidade, com reflexo de piso (efeito do vídeo de referência) */
.abertura-marca{position:relative;display:inline-block;overflow:hidden;
  padding:34px 42px;border-radius:22px;background:#fff;
  box-shadow:0 30px 70px rgba(45,30,20,.16),0 8px 20px rgba(45,30,20,.08),inset 0 1px 0 rgba(255,255,255,.95);
  opacity:0;transform:translateY(22px) scale(.94);
  -webkit-box-reflect:below 6px linear-gradient(transparent, transparent 55%, rgba(255,255,255,.32));
  animation:cartaoEntra 1.05s cubic-bezier(.16,.84,.28,1) .35s forwards}
/* halo colorido girando por trás do cartão (igual à versão aprovada) */
.abertura-marca::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:24px;
  background:conic-gradient(from 0deg,var(--mostarda),var(--bordo),var(--mostarda),var(--bordo),var(--mostarda));
  filter:blur(11px);opacity:0;animation:haloEntra .9s ease .5s forwards,gira 6s linear infinite}
/* faíscas — pequenos brilhos que piscam perto do cartão, como no vídeo de referência */
.abertura-marca .faisca{position:absolute;z-index:4;width:12px;height:12px;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,var(--mostarda) 45%,transparent 75%);
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
  opacity:0}
.abertura-marca .faisca.f1{top:16px;left:26px;animation:faiscar 1.7s ease 1.15s}
.abertura-marca .faisca.f2{bottom:20px;right:32px;width:9px;height:9px;animation:faiscar 1.5s ease 1.85s}
/* palco com a proporção exata da logo, para o ícone e a logo completa ficarem centralizados um sobre o outro */
.abertura-marca-palco{position:relative;width:min(360px,70vw);aspect-ratio:934/337}
/* anel fino, cor da marca (sem preenchimento) — o "clique" no ícone */
.abertura-marca .clique-anel{position:absolute;left:50%;top:50%;z-index:1;width:46%;aspect-ratio:1/1;
  border-radius:50%;border:2px solid rgba(124,29,46,.45);pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.7);
  animation:anelClique .6s cubic-bezier(.22,.85,.3,1) 1.05s forwards}
/* ícone real recortado da própria logo (casinha + sorriso amarelo) — "clica", brilha como energia
   ligando (inspirado no vídeo de referência) e dissolve na logo completa. O glow SOME por completo
   antes de assentar, então não sobra nenhuma sombra na imagem parada. */
.abertura-icone{position:absolute;left:50%;top:50%;z-index:2;width:46%;height:auto;display:block;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.55);
  filter:drop-shadow(0 0 0 rgba(214,52,44,0));
  animation:iconeClique 1.55s cubic-bezier(.33,1,.4,1) .45s forwards}
/* logo completa real, sem nenhum filtro de cor — some por baixo do ícone e assume o lugar dela */
.abertura-completa{position:absolute;inset:0;z-index:1;width:100%;height:auto;display:block;
  opacity:0;transform:scale(.94);
  animation:completaEntra .7s cubic-bezier(.16,.84,.28,1) 1.75s forwards}
/* brilho neutro varrendo o cartão, discreto, depois que a logo completa assenta */
.abertura-marca .brilho{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:22px;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-130%);animation:varre 1s ease 2.5s forwards}

.abertura-barra{position:relative;width:170px;height:3px;border-radius:2px;background:rgba(124,29,46,.12);
  margin:36px auto 0;overflow:hidden;opacity:0;animation:sobe .5s ease 2.55s forwards}
.abertura-barra i{position:absolute;inset:0;display:block;border-radius:2px;
  background:linear-gradient(90deg,var(--bordo),var(--mostarda));
  transform:translateX(-100%);animation:carrega .55s cubic-bezier(.5,0,.2,1) 2.6s forwards}

@keyframes respira{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes gradeEntra{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
/* cortinas: entram da lateral, fecham cobrindo tudo por um instante, e reabrem revelando o site */
@keyframes cortinaEsq{0%{transform:translateX(-102%)}42%,58%{transform:translateX(0)}100%{transform:translateX(-102%)}}
@keyframes cortinaDir{0%{transform:translateX(102%)}42%,58%{transform:translateX(0)}100%{transform:translateX(102%)}}
@keyframes cartaoEntra{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
@keyframes haloEntra{to{opacity:.55}}
@keyframes gira{to{transform:rotate(360deg)}}
/* o anel de clique: dispara no instante em que o ícone "aperta" */
@keyframes anelClique{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  30%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}
/* ícone real: entra, "aperta" como um clique e solta com um leve quique, depois dissolve.
   O brilho vermelho (drop-shadow só de glow, sem deslocamento) acende no impacto do clique
   e apaga por completo antes de assentar — igual a uma "ignição", não uma sombra permanente. */
@keyframes iconeClique{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55);
     filter:drop-shadow(0 0 0 rgba(214,52,44,0))}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.1);
     filter:drop-shadow(0 0 10px rgba(214,52,44,.65))}
  45%{transform:translate(-50%,-50%) scale(.93);
     filter:drop-shadow(0 0 20px rgba(214,52,44,.95)) drop-shadow(0 0 38px rgba(214,52,44,.4))}
  60%{transform:translate(-50%,-50%) scale(1.04);
     filter:drop-shadow(0 0 8px rgba(214,52,44,.4))}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);
     filter:drop-shadow(0 0 0 rgba(214,52,44,0))}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12);
     filter:drop-shadow(0 0 0 rgba(214,52,44,0))}
}
@keyframes faiscar{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(20deg)}
}
/* logo completa: some por baixo, exatamente como é, sem mudar cor */
@keyframes completaEntra{to{opacity:1;transform:scale(1)}}
@keyframes varre{to{transform:translateX(130%)}}
@keyframes sobe{to{opacity:1;transform:none}}
@keyframes carrega{to{transform:translateX(0)}}
body.travado{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .abertura *,.abertura::before,.abertura::after{animation:none!important}
  .abertura-marca,.abertura-barra{opacity:1;transform:none}
  .abertura-icone,.abertura-marca .clique-anel,.abertura-marca .faisca{display:none}
  .abertura-completa{opacity:1;transform:none}
  .abertura-marca::before{opacity:.4}
  .abertura .cortina{display:none}
}
@media(max-width:520px){
  .abertura-marca{padding:24px 26px;border-radius:18px}
  .abertura .cortina{width:54%}
}

/* logo do topo e do rodapé em alta densidade */
.marca img{height:46px;width:auto;image-rendering:auto}
.rodape img{max-width:270px;width:100%;height:auto}