/* VOOC Vistory — complemento ao site.css. Tokens em vooc-tokens.css. */
.heroi.vistory { padding: 72px 0 40px; }
.heroi .rotulo, .secao .rotulo { display:block; font-size: var(--vooc-rotulo); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--vooc-tinta); margin-bottom: 14px; }
.heroi .meta { font-size: var(--vooc-apoio); color: var(--vooc-tinta); margin: 12px 0 0; }
.botoes { display:flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }
.botao { display:inline-block; padding: 12px 22px; background: var(--vooc-azul); color: #fff; text-decoration: none; font-family: var(--vooc-texto); font-weight: 600; font-size: var(--vooc-apoio); border: 2px solid var(--vooc-azul); cursor: pointer; }
.botao:hover, .botao:focus-visible { background: var(--vooc-profundo); border-color: var(--vooc-profundo); }
.botao.secundario { background: transparent; color: var(--vooc-azul); }
.botao.secundario:hover { background: #fff; }
.hero-img img { width: 100%; height: auto; border: 1px solid rgba(28,26,23,.08); background: #fff; }
.hero-img { margin: 0; }
.grade.telas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade.telas figure, .grade.telefones figure { margin: 0; background: #fff; border: 1px solid rgba(28,26,23,.08); padding: 10px; }
.grade.telas img { width: 100%; height: auto; display:block; }
.grade.telefones { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 22px; }
.grade.telefones img { width: 100%; height: auto; }
figcaption { font-size: 13px; color: var(--vooc-tinta); margin-top: 8px; line-height: 1.4; }
.cartao.post img { width: 100%; height: auto; border: 1px solid rgba(28,26,23,.08); background:#fff; margin-bottom: 6px; }
.cartao.post h3 a { color: var(--vooc-azul); text-decoration: none; }
.cartao.post h3 a:hover { text-decoration: underline; }
.sub-h3 { margin: 34px 0 14px; font-family: var(--vooc-titulo); font-weight: 500; font-size: var(--vooc-titulo3); color: var(--vooc-azul); }
.artigo .corpo { max-width: 760px; margin: 36px auto 0; }
.artigo .corpo h2 { margin: 40px 0 12px; font-size: clamp(24px, 3vw, var(--vooc-titulo2)); }
.artigo .corpo h3 { margin: 28px 0 8px; font-family: var(--vooc-titulo); font-weight: 500; font-size: var(--vooc-titulo3); color: var(--vooc-azul); }
.artigo .corpo p, .artigo .corpo li { max-width: none; }
.artigo .corpo figure { margin: 28px 0; background: #fff; border: 1px solid rgba(28,26,23,.08); padding: 10px; }
.artigo .corpo figure img { width: 100%; height: auto; display: block; }
.artigo .corpo figure img.phone { width: auto; max-height: 560px; margin: 0 auto; }
.cta { margin: 48px 0 0; padding: 32px 36px; background: #fff; border: 1px solid rgba(28,26,23,.08); border-left: 3px solid var(--vooc-ouro); }
.cta h2 { margin: 0 0 8px; font-size: var(--vooc-titulo3); }
.cta p { max-width: none; }
.passos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.passos li { counter-increment: p; background: #fff; border: 1px solid rgba(28,26,23,.08); padding: 24px; }
.passos li::before { content: counter(p); display:block; font-family: var(--vooc-titulo); font-size: 33px; color: var(--vooc-azul); line-height: 1; margin-bottom: 10px; }
.passos strong { display:block; margin-bottom: 6px; }
.passos p { margin: 0; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); max-width: none; }
.regras { margin: 28px 0 0; padding-left: 20px; font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; background: #fff; border: 1px solid rgba(28,26,23,.08); padding: 32px; }
.formulario label { display:flex; flex-direction: column; gap: 6px; font-size: var(--vooc-apoio); font-weight: 600; }
.formulario input, .formulario textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid rgba(28,26,23,.25); background: var(--vooc-marfim); color: var(--vooc-tinta); }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--vooc-azul); outline-offset: 1px; }
.formulario label:has(textarea), .formulario .legal, .formulario .botoes, .formulario .erro, .formulario .ok { grid-column: 1 / -1; }
.formulario .hp { position:absolute; left:-9999px; }
.formulario .legal { font-size: 13px; margin: 0; }
.formulario .erro { color: #8B1E1E; }
@media (max-width: 720px) { .formulario { grid-template-columns: 1fr; padding: 22px; } .heroi.vistory { padding: 48px 0 28px; } }

/* carrossel do herói */
.carrossel { padding: 40px 0 28px; outline: none; }
.carrossel:focus-visible { outline: 2px solid var(--vooc-azul); outline-offset: -2px; }
.titulo-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.carrossel .slide { display:none; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.carrossel .slide.ativo { display:grid; animation: aparece .5s ease; }
@keyframes aparece { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce) { .carrossel .slide.ativo { animation:none; } }
.carrossel .texto h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 49px); line-height: 1.12; }
.carrossel .texto .vooc-destaque { margin: 0; max-width: 52ch; }
.carrossel .nota { font-size: 13.5px; line-height: 1.5; color: var(--vooc-tinta); background: #fff; border-left: 2px solid var(--vooc-ouro); padding: 10px 14px; margin: 16px 0 0; max-width: 52ch; }
.carrossel figure { margin: 0; background:#fff; border: 1px solid rgba(28,26,23,.08); padding: 10px; box-shadow: 0 18px 40px -28px rgba(21,44,99,.45); }
.carrossel figure img { width:100%; height:auto; display:block; }
.carrossel .controles { display:flex; align-items:center; justify-content:center; gap: 18px; margin-top: 26px; }
.carrossel .controles button.ant, .carrossel .controles button.prox { width: 40px; height: 40px; border: 1px solid var(--vooc-azul); background: transparent; color: var(--vooc-azul); font-size: 18px; cursor:pointer; }
.carrossel .controles button.ant:hover, .carrossel .controles button.prox:hover { background: var(--vooc-azul); color:#fff; }
.carrossel .pontos { display:flex; gap: 10px; }
.carrossel .pontos button { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--vooc-azul); background: transparent; padding:0; cursor:pointer; }
.carrossel .pontos button[aria-selected="true"] { background: var(--vooc-azul); }
@media (max-width: 860px) { .carrossel .slide { grid-template-columns: 1fr; gap: 22px; } .carrossel .texto h2 { font-size: 30px; } }

/* "Como é por dentro": botão Ver, sempre visível, ao lado da legenda */
#telas figure.ampliavel { position: relative; }
#telas figure.ampliavel img { cursor: zoom-in; }
#telas figure.ampliavel figcaption { display:flex; align-items:center; justify-content:space-between; gap: 10px; }
#telas figure.ampliavel .ampliar { flex: none; padding: 5px 12px; border: 1px solid var(--vooc-azul); background: transparent; color: var(--vooc-azul); font: 600 12.5px/1 var(--vooc-texto); letter-spacing:.06em; text-transform: uppercase; cursor: zoom-in; }
#telas figure.ampliavel .ampliar:hover, #telas figure.ampliavel .ampliar:focus-visible { background: var(--vooc-azul); color:#fff; }
#telas figure.ampliavel .ampliar:focus-visible { outline: 2px solid var(--vooc-ouro); outline-offset: 2px; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(28,26,23,.86); display:flex; align-items:center; justify-content:center; padding: 24px; }
.lightbox[hidden] { display:none; }
.lightbox figure { margin:0; max-width: min(1280px, 96vw); max-height: 92vh; display:flex; flex-direction:column; gap:10px; }
.lightbox img { max-width: 100%; max-height: calc(92vh - 3em); width:auto; height:auto; object-fit: contain; background:#fff; border: 1px solid rgba(255,255,255,.2); }
.lightbox figcaption { color: var(--vooc-marfim); font-size: 15px; text-align:center; }
.lightbox .fechar { position:absolute; top:18px; right:18px; padding: 10px 16px; border: 1px solid var(--vooc-marfim); background: transparent; color: var(--vooc-marfim); font: 600 14px var(--vooc-texto); cursor:pointer; }
.lightbox .fechar:hover, .lightbox .fechar:focus-visible { background: var(--vooc-marfim); color: var(--vooc-profundo); }
body.com-lightbox { overflow:hidden; }