/*
Theme Name: Vienna Consórcios
Theme URI: https://viennaconsorcios.com.br
Author: MKW
Description: Tema de página única da Vienna Consórcios, com cotação de veículos e imóveis pelo WhatsApp. Criado por MKW.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: vienna-consorcios
*/

@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/outfit-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/outfit-600.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:800;font-style:normal;font-display:swap;src:url(assets/fonts/outfit-800.woff2) format("woff2")}

:root{
  --navy:#111B23;
  --navy-2:#18252F;
  --navy-3:#22323E;
  --green:#00C346;
  --gray:#B3B3B3;
  --white:#F9F9F9;
  --ink-soft:#4A5761;
  --slant:26px;
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.55;color:var(--white);background:var(--navy);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.on-green :focus-visible,.cta-veiculo:focus-visible{outline-color:var(--navy)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---------- topo ---------- */
.topo{position:relative;z-index:2;padding-block:22px}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:26px;width:auto}
.topo-link{font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 4px;border-bottom:2px solid var(--green)}
.topo-link:hover{color:var(--green)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-bottom:72px}
.hero-mural{position:absolute;top:50%;right:-16%;width:74%;display:grid;gap:8px;transform:translateY(-50%) rotate(-13deg);opacity:.6;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 2%,#000 48%);mask-image:linear-gradient(to right,transparent 2%,#000 48%)}
.hero-mural .mural-linha figure{width:236px;height:236px}
.hero-mural.anima .mural-linha{animation:corre 140s linear infinite}
.hero-mural.anima .mural-linha.inv{animation-direction:reverse}
.hero-corpo{position:relative;z-index:1;padding-top:clamp(36px,7vw,88px)}
.hero h1{font-weight:800;font-size:clamp(2.5rem,6.6vw,5.25rem);line-height:1;letter-spacing:-.025em;max-width:13ch;text-wrap:balance}
.hero-sub{text-wrap:pretty;margin-top:24px;max-width:50ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:#D5DADD}

.escolha{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;max-width:920px}
.cta{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:190px;padding:26px calc(var(--slant) + 26px) 24px;text-decoration:none;
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);transition:transform .18s ease}
.cta + .cta{margin-left:calc(var(--slant) * -1 + 10px)}
.cta:hover{transform:translateY(-4px)}
.cta-imovel{background:var(--white);color:var(--navy)}
.cta-veiculo{background:var(--green);color:var(--navy)}
.cta-titulo{font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.015em}
.cta-detalhe{display:block;margin-top:8px;font-size:.98rem;font-weight:400;opacity:.8}
.cta-acao{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem}
.cta-acao svg{width:22px;height:22px;flex:none}
.provas{display:flex;flex-wrap:wrap;gap:18px 40px;margin-top:34px}
.provas li{position:relative;padding-left:20px;font-size:.95rem;line-height:1.35;color:var(--gray)}
.provas li::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:8px;background:var(--green);transform:skewX(-12deg)}
.provas strong{display:block;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--white)}

@media (prefers-reduced-motion:no-preference){
  .cta{animation:entra .7s cubic-bezier(.2,.7,.2,1) both}
  .cta-imovel{animation-delay:.12s}
  @keyframes entra{from{opacity:0;transform:translate(-36px,36px)}to{opacity:1;transform:none}}
}

/* ---------- atendimento ---------- */
.atendimento{background:var(--white);color:var(--navy);padding-block:clamp(64px,9vw,112px)}
.atendimento h2,.faturados h2,.fecho h2{font-weight:800;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.atendimento h2{max-width:22ch}
.atendimento-intro{margin-top:18px;max-width:58ch;color:var(--ink-soft);font-size:1.1rem}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:52px;counter-reset:passo}
.passos li{counter-increment:passo;border-top:3px solid var(--green);padding-top:18px}
.passos li::before{content:counter(passo);display:block;font-weight:800;font-size:2.6rem;line-height:1;color:var(--green);margin-bottom:14px}
.passos h3{font-weight:600;font-size:1.25rem;line-height:1.2}
.passos p{margin-top:8px;color:var(--ink-soft);font-size:1rem}

/* ---------- faturados ---------- */
.faturados{padding-block:clamp(64px,9vw,112px) clamp(56px,7vw,88px)}
.faturados-cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.faturados-cabeca p{max-width:44ch;color:#D5DADD}
.faturados-cabeca a{color:var(--green);font-weight:600}
.faixa{display:flex;margin-top:44px;margin-inline:auto;max-width:1680px;padding-inline:24px;gap:0}
.faixa figure{position:relative;flex:1 1 0;min-width:0;height:380px;transition:flex-grow .35s ease;clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);background:var(--navy-2)}
.faixa figure + figure{margin-left:calc(var(--slant) * -1 + 8px)}
.faixa img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (min-width:901px){.faixa figure:hover{flex-grow:1.7}}
.faixa figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px calc(var(--slant) + 14px) 16px;font-weight:600;font-size:1rem;background:linear-gradient(to top,rgba(17,27,35,.92),rgba(17,27,35,0))}

.mural{position:relative;margin-top:18px;display:grid;gap:8px;overflow-x:auto;scrollbar-width:none}
.mural::-webkit-scrollbar{display:none}
.mural.anima{overflow:hidden}
.mural-linha{display:flex;width:max-content;padding-left:8px}
.mural-linha figure{position:relative;flex:none;width:208px;height:208px;margin-left:-8px;background:var(--navy-2);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.mural-linha img{width:100%;height:100%;object-fit:cover}
.mural-linha figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 10px;font-weight:600;font-size:.85rem;line-height:1.2;background:linear-gradient(to top,rgba(17,27,35,.92),rgba(17,27,35,0))}
.mural.anima .mural-linha{animation:corre 90s linear infinite}
.mural.anima .mural-linha.inv{animation-direction:reverse}
.mural.anima:hover .mural-linha{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- instagram ---------- */
.insta{background:var(--white);color:var(--navy);padding-block:clamp(64px,9vw,112px);overflow:hidden}
.insta .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:center}
.insta-num{display:block;font-weight:800;font-size:clamp(4.2rem,11vw,9rem);line-height:.88;letter-spacing:-.04em;color:var(--green)}
.insta h2{margin-top:14px;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.insta p{margin-top:16px;max-width:46ch;color:var(--ink-soft);font-size:1.1rem}
.insta-btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:16px 26px;background:var(--navy);color:var(--white);font-weight:600;text-decoration:none;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:background .18s ease}
.insta-btn:hover{background:#000}
.insta-btn svg{width:22px;height:22px}
.insta-tela{position:relative;justify-self:center;width:min(300px,78vw);aspect-ratio:9/16;border-radius:34px;border:8px solid var(--navy);background:var(--navy);overflow:hidden;transform:rotate(4deg);box-shadow:24px 28px 0 var(--green)}
.insta-tela img,.insta-tela video{width:100%;height:100%;object-fit:cover}
.insta-tela span{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:99px;background:rgba(17,27,35,.78);color:var(--white);font-size:.82rem;font-weight:600}

/* ---------- numeros ---------- */
.numeros{background:var(--green);color:var(--navy);padding-block:clamp(48px,6vw,72px)}
.numeros ul{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.numeros strong{display:block;font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em}
.numeros span{display:block;margin-top:10px;font-size:1rem;line-height:1.4;max-width:24ch}

/* ---------- duvidas ---------- */
.duvidas{background:var(--navy-2);padding-block:clamp(64px,9vw,104px)}
.duvidas .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,88px);align-items:start}
.duvidas h2{font-weight:800;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.duvidas-intro{margin-top:16px;color:#D5DADD;max-width:34ch}
.duvidas details{border-top:1px solid var(--navy-3)}
.duvidas details:last-child{border-bottom:1px solid var(--navy-3)}
.duvidas summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:600;font-size:1.15rem;line-height:1.3;cursor:pointer;list-style:none}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"+";flex:none;font-weight:400;font-size:1.7rem;line-height:1;color:var(--green)}
.duvidas details[open] summary::after{content:"\2212"}
.duvidas summary h3{font:inherit;margin:0}
.duvidas details p{padding:0 40px 22px 0;color:#D5DADD;max-width:62ch}

/* ---------- fecho ---------- */
.fecho{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,112px)}
.fecho h2{max-width:18ch}
.fecho p{margin-top:16px;max-width:52ch;color:#D5DADD}
.fecho .escolha{margin-top:36px}
.fecho .cta{min-height:150px;animation:none}

/* ---------- rodape ---------- */
.rodape{border-top:1px solid var(--navy-3);padding-block:36px 110px;font-size:.9rem;color:var(--gray)}
.rodape .wrap{display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:start}
.rodape img{height:20px;width:auto;margin-top:4px}
.rodape p + p{margin-top:10px}
.rodape .legal{font-size:.82rem;color:#8C969D;max-width:90ch}

/* ---------- barra fixa ---------- */
.barra{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(17,27,35,.94);border-top:1px solid var(--navy-3);
  transform:translateY(110%);transition:transform .25s ease;visibility:hidden}
.barra.visivel{transform:none;visibility:visible}
.barra a{flex:1 1 0;max-width:260px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:6px;font-weight:600;font-size:.98rem;text-decoration:none;color:var(--navy)}
.barra svg{width:20px;height:20px;flex:none}
.barra .b-imovel{background:var(--white)}
.barra .b-veiculo{background:var(--green)}
@media (prefers-reduced-motion:reduce){.barra,.cta,.faixa figure{transition:none}html{scroll-behavior:auto}}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .duvidas .wrap{grid-template-columns:1fr}
  .hero-mural{right:-45%;width:150%;opacity:.2;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 92%);mask-image:linear-gradient(to bottom,#000 30%,transparent 92%)}
  .insta .wrap{grid-template-columns:1fr}
  .insta-tela{margin-top:8px}
  .passos{grid-template-columns:1fr 1fr}
  .numeros ul{grid-template-columns:1fr 1fr}
  .faixa{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:24px;scrollbar-width:none}
  .faixa::-webkit-scrollbar{display:none}
  .faixa figure{flex:0 0 68vw;height:340px;scroll-snap-align:center}
}
@media (max-width:640px){
  :root{--slant:16px}
  .mural .mural-linha figure{width:168px;height:168px}
  .hero-mural .mural-linha figure{width:180px;height:180px}
  .wrap{padding-inline:20px}
  .logo img{height:22px}
  .hero{padding-bottom:56px}
  .hero-marca{right:-40%;top:6%;width:130vw}
  .escolha{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .cta{min-height:0;gap:18px;padding:22px calc(var(--slant) + 20px) 20px}
  .cta + .cta{margin-left:0}
  .fecho .cta{min-height:0}
  .passos{grid-template-columns:1fr;gap:26px;margin-top:40px}
  .passos li{display:grid;grid-template-columns:48px 1fr;column-gap:8px}
  .passos li::before{grid-row:1 / span 2;font-size:2.2rem;margin:0}
  .passos p{grid-column:2}
  .numeros ul{gap:28px 20px}
  .rodape .wrap{grid-template-columns:1fr}
  .faixa{padding-inline:20px}
  .faixa figure{flex-basis:78vw}
}