/*
Theme Name: VOLTA Landing
Version: 1.1.0
Description: Landing VOLTA com páginas "Quem somos" e "Manifesto" habilitadas e links no header. Preparado para imagens .png embutidas em /assets/img.
*/
:root{--bg:#0E0F10;--fg:#ffffff;--muted:#b8bec9;--accent1:#FFC400;--accent2:#00D1FF;--accent3:#FF4D6D;--accent4:#7CF19E}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0E0F10;color:var(--fg);font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1200px,92vw);margin:0 auto}
.gradient-text{background:linear-gradient(90deg,var(--accent2),var(--accent3),var(--accent1));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:#111;color:#fff;border:2px solid #222;padding:.9rem 1.2rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;transition:transform .1s ease, background .2s ease}
.btn:hover{transform:translateY(-2px);background:#181818}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px)}
.noise-overlay{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url('assets/img/noise.png?v=1');mix-blend-mode:overlay}
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,15,16,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{font-family:'Bebas Neue',sans-serif;letter-spacing:.5px;font-size:1.8rem}
.nav{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.nav a.pill{padding:.5rem .8rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#121212}
/* =========================
   CART ICON PREMIUM
   ========================= */

.nav .cart-icon{
  font-size: 26px;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,196,0,.15), rgba(0,209,255,.15));
  backdrop-filter: blur(6px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover sofisticado */
.nav .cart-icon:hover{
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    0 0 18px rgba(0,209,255,.25);
  border-color: rgba(255,255,255,.35);
}
/* HERO (usando imagem sem texto) */
.hero{
  position: relative;
  overflow: hidden;
  /* usa dvh no mobile para lidar com barras do navegador */
  min-height: 88dvh;
  padding: 0;
  display: grid;
  align-items: stretch;
}
@supports not (height: 100dvh) {
  .hero { min-height: 88vh; }
}

/* Overlay para contraste */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 20% 30%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}

/* CAMADAS (corrigido o >) */
.hero > .container{
  position: relative;
  z-index: 2; /* conteúdo por cima do overlay */
}
/* Camada de slides precisa ser ABSOLUTA dentro do hero */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;     /* evita vazamentos quando slide usa padding */
  contain: layout paint; /* otimiza composição em mobile */
}

/* Cada slide é absoluto e ocupa a tela toda */
.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;        /* para alinhar o .container interno */
  align-items: center;
  padding: 5rem 0;      /* respiro */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none; /* só o ativo recebe clique */
  transition: opacity .6s ease-in-out;
  will-change: opacity;
  transform: translateZ(0); /* aceleração GPU, ajuda no mobile */
}
/* Só o ativo aparece */
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Overlay opcional de contraste sobre todos os slides */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 100% at 20% 30%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
  pointer-events:none;
  z-index: 1;
}

/* O conteúdo interno dos slides vem acima do overlay */
.hero-slide > .container {
  position: relative;
  z-index: 2;
}

/* Dots de navegação por cima de tudo */
.hero-nav{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.6rem;
  z-index:5;
}
.hero-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;transition:background .3s ease, transform .2s ease;
}
.hero-dot.active{ background:#fff; transform: scale(1.1); }

/* Ajustes mobile */
@media (max-width: 900px){
  .hero-slide { padding: 3.5rem 0; }
}

/* Tipografia/spacing do conteúdo do hero */
.hero h1{
  font-family:'Bebas Neue',sans-serif;
  line-height:.9;
  font-size:clamp(2.6rem,6vw,6rem);
  margin:.6rem 0 1rem;
}
.hero p{ font-size:clamp(1rem,2.4vw,1.4rem); color:var(--muted); }
.hero .cta{ margin-top:1.2rem; }

/* Mobile */
@media (max-width:900px){
  .polaroids{ display:none; }
  .hero-slide{ padding: 3.5rem 0; } /* menos respiro para telas pequenas */
}

/* =======================
   HERO CARROSSEL
   ======================= */

.hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;
  display:grid;
  align-items:center;
  padding:5rem 0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .7s ease-in-out;
}

.hero-slide.active{
  opacity:1;
  z-index:1;
}

/* Overlay mantém contraste */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 100% at 20% 30%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
  pointer-events:none;
  z-index:1;
}

.hero-slide .container{
  position:relative;
  z-index:2;
}

/* Navegação */
.hero-nav{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.6rem;
  z-index:5;
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:background .3s ease;
}

.hero-dot.active{
  background:#fff;
}
/* =======================
   Seção vídeo (fundo na seção inteira)
   ======================= */
.section-video{
  padding:4rem 0;
  /* usa a custom property --video-bg, com fallback inline no HTML */
  background: var(--video-bg) center/cover no-repeat;
  background-attachment:scroll;
  min-height:60vh;
}

.section-video h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,5vw,3.5rem);
}

/* brilho sutil */
.section-video .play::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}

.section-video h2{ /* título visível, sem duplicidade */
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,5vw,3.5rem);
  margin:0 0 1rem 0;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Seção desejo/impacto */
.duo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  padding: 4rem 0;
}

.duo .panel {
  border-radius: 16px;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(255,196,0,.25),
    rgba(0,209,255,.25),
    rgba(255,77,109,.25)
  );
  border: 1px solid rgba(255,255,255,.12);
}

.duo h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
}

/* Banner CTA */
.duo-visual {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.duo-visual img {
  width: 100%;
  height: auto;      /* ✨ mantém a proporção original */
  display: block;
  }

/* Ajuste de espaçamento entre conteúdo e imagem do painel */
.panel-with-image .panel-content {
    margin-bottom: 1.5rem;
}
/* =======================================
   PAINEL DE THUMBS (sempre empilhado)
   ======================================= */

/* O painel em si (1 coluna sempre) */
.panel-thumbs{
  display: block; /* evita herdar grid de panel-with-image */
}

/* A grade interna de thumbs: 1 coluna no desktop e mobile */
.panel-thumbs .grid{
  display: grid;
  grid-template-columns: 1fr !important; /* força empilhar sempre */
  gap: 1rem;
  margin-top: 1.25rem;
}

/* Thumb mantém proporção e crop correto */
.panel-thumbs .thumb{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}
.panel-thumbs .thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Layout mobile */
@media (max-width: 900px) {
  .duo {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .duo-visual {
    order: -1; /* imagem primeiro no mobile */
  }
}

/* Seção Loop 01 (nota: o HTML atual usa .duo .grid com <figure>, então estilize .thumb) */
.thumb{aspect-ratio:4/3;border-radius:14px;overflow:hidden}
/* ===== CTA FINAL — Ícones no rodapé do banner ===== */

/* A .cta-final já usa background com contain/cover no seu tema.
   Garantimos que a .container ocupe a altura do banner para
   empurrar os ícones para baixo. */
.cta-final {
  /* já existente no seu tema:
     aspect-ratio, background, etc. */
  display: grid;
  place-items: stretch;
}
  /* Garante o fundo (root-relative evita quebrar em subpaths) */
  background:
    url('/wp-content/themes/volta-landing-1.1.0/assets/img/footer-bg.png') center / contain no-repeat,
    linear-gradient(#0E0F10,#0E0F10);
}

.cta-final .container{
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* joga conteúdo para a base do banner */
  min-height: 100%;          /* ocupa toda a área útil do banner */
  gap: 0;                    /* sem espaço extra */
  padding: 1rem;             /* respira dentro do banner */
}

/* Barra de ícones */
.cta-final .socials{
  display: inline-flex;
  gap: .9rem;
  align-items: center;
  justify-content: center;   /* centraliza na base */
  margin-top: .75rem;
}

/* Botões/ícones clicáveis */
.cta-final .socials .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 6px 20px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .25s ease, color .2s ease, background .2s ease;
  text-decoration: none;
}

.cta-final .socials .icon:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 16px rgba(0,209,255,.22);
  background: rgba(0,0,0,.42);
  color: #fff;
}
.cta-final .socials .icon svg{ display:block; }
/* SVGs herdam a cor (currentColor) */
.cta-final .socials .icon svg{
  display: block;
}

/* Responsivo: um respiro extra no mobile */
@media (max-width: 900px){
  .cta-final .container{padding: .8rem;}
  .cta-final .socials .icon{width: 40px; height: 40px;}
}

/* Rodapé base */
.site-footer{
  background: #0E0F10;     /* preto sólido */
  color: #ffffff;          /* texto branco por padrão */
}
/* Faixa inferior (menu + dados + copyright) */
.footer-bottom{
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* 3 colunas no desktop */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
  gap: 1.6rem 2rem;                   /* linhas x colunas */
  align-items: start;
}

/* Coluna 1: menu */
.footer-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.footer-menu a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  padding: .35rem 0;
  transition: color .2s ease, opacity .2s ease;
  line-height: 1.35;
}
.footer-menu a::before{
  content: "→";
  font-weight: 700;
  color: var(--accent2);
  opacity: .9;
}
.footer-menu a:hover{
  color: #e9edf3;
}

/* Coluna 2: dados */
.footer-meta{
  text-align: left;
  color: #e0e5ef;
  line-height: 1.6;
}
.footer-meta .company,
.footer-meta .cnpj{
  margin: 0 0 .35rem 0;
  font-size: .98rem;
}
.footer-meta strong{ color:#fff; }

/* Coluna 3: copyright */
.footer-copy{
  font-size: .92rem;
  color: #cfd6e4;
  display: flex;
  align-items: center;    /* verticalmente centralizado */
  justify-content: flex-start;
}
.footer-copy p{ margin: 0; }

/* Responsivo: empilha em 1 coluna no mobile */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .footer-copy{
    order: 3;            /* aparece por último no mobile */
  }
}
/* Páginas internas */
.page-hero{min-height:46vh;display:grid;align-items:end;padding:4rem 0;background:linear-gradient(160deg, rgba(0,209,255,.6), rgba(255,196,0,.6) 40%, rgba(255,77,109,.55) 80%)}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,6vw,4.6rem);margin:0}
.page-section{padding:3rem 0;border-top:1px solid rgba(255,255,255,.08)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.2rem}

.manifesto{font-size:clamp(1.05rem,2.1vw,1.35rem);line-height:1.6;color:#e5e8ee}
.manifesto .callout{padding:1rem 1.2rem;border-left:4px solid var(--accent1);background:rgba(255,196,0,.12);border-radius:8px;margin:1rem 0;color:#fff}

@media (max-width:900px){
  .polaroids{display:none}
  .duo{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}
/* Wrapper elegante para o vídeo do Instagram */ /* mantém seu background se quiser continuar usando */
.section-video {  
  padding: 2rem 0;
}

.section-video .ig-card {
  max-width: min(900px, 92vw);  /* mais largo em desktop, fluido no mobile */
  margin: 0 auto;               /* centraliza */
  border-radius: 18px;
  overflow: hidden;             /* clip nas bordas arredondadas */
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  background: #000;             /* fundo neutro por trás do player */
  position: relative;
}

/* Mantém 9:16 como padrão (Reels) */
.section-video .ig-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;         /* browsers modernos */
  background: #000;
}
/* Fallback para navegadores sem aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .section-video .ig-aspect {
    height: 0;
    padding-top: calc(100% * 16 / 9); /* 9:16 */
  }
  .section-video .ig-aspect > * {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Iframe/Embed ocupa todo o espaço do card */
.section-video .ig-aspect iframe,
.section-video .ig-aspect blockquote,
.section-video .ig-aspect .instagram-media {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  background: transparent;
}

/* Opcional: esconde caption do embed oficial pra ficar mais clean */
.section-video .instagram-media,
.section-video blockquote.instagram-media {
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Layout maior no desktop, compacto no mobile */
@media (min-width: 1200px) {
  .section-video .ig-card {
    max-width: 980px;
    border-radius: 22px;
  }
}

/* Variante 16:9 (se for vídeo horizontal) — use a classe .is-16x9 no HTML */
.section-video .ig-aspect.is-16x9 {
  aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 1 / 1) {
  .section-video .ig-aspect.is-16x9 {
    padding-top: 56.25%;
  }
}
/* =========================
   HERO – Polaroids (fix de camadas e mobile)
   ========================= */

/* 1) Base: escopado ao .hero, sem regra global .polaroids */
.hero .polaroids{
  position: absolute;
  right: 3vw;
  top: 10vh;
  display: grid;
  gap: 1rem;
  z-index: 2; /* abaixo do conteúdo (.hero > .container z-index:3) */
  pointer-events: none; /* evita bloquear cliques no texto/CTAs */
}

.hero .polaroids .card{
  width: min(260px, 28vw);
  transform: rotate(-2deg);
  border-radius: 10px;
  background: #fff;
  padding: .5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Fundos das polaroids (ajuste os paths se necessário) */
.hero .polaroids .card:nth-child(1){
  background: url('assets/img/polaroid1.png?v=1') center/cover no-repeat;
}
.hero .polaroids .card:nth-child(2){
  background: url('assets/img/polaroid2.png?v=1') center/cover no-repeat;
  transform: rotate(3deg);
}

/* 2) Conteúdo do hero por cima das polaroids e overlay */
.hero > .container{
  position: relative;
  z-index: 3; /* texto/CTAs acima das polaroids */
}

/* 3) Mobile: reposiciona OU oculta para não sobrepor o texto */
@media (max-width: 900px){
  /* Opção A — Reposicionar e reduzir para não tapar o texto */
  .hero .polaroids{
    top: auto;
    bottom: 6vh;       /* desce para base do hero */
    right: 4vw;
    gap: .75rem;
    z-index: 1;        /* ainda mais atrás no mobile */
    opacity: .7;       /* menos intrusivo, opcional */
  }
  .hero .polaroids .card{
    width: min(160px, 36vw);
    transform: rotate(-1.5deg);
  }
  .hero .polaroids .card:nth-child(2){
    transform: rotate(2deg);
  }

 .hero .polaroids{ display: none; }
}

/* 4) (Higienização) Evita que alguma regra global interfira */
.polaroids{
  position: static; /* neutraliza qualquer regra global indesejada */
}
/* =======================================
   PAINEL DE THUMBS (sempre empilhado)
   ======================================= */

/* Use esta classe no segundo painel: <div class="panel panel-thumbs"> */
.panel-thumbs{
  display: block; /* evita herdar grid de panel-with-image */
}

/* Sempre 1 coluna (PC e mobile) */
.panel-thumbs .grid{
  display: grid;
  grid-template-columns: 1fr !important; /* força empilhar sempre */
  gap: 1rem;
  margin-top: 1.25rem;
}

/* Thumb com proporção e crop corretos */
.panel-thumbs .thumb{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}
.panel-thumbs .thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =======================================
   MOBILE GERAL DA SEÇÃO .duo (mantenha)
   ======================================= */
@media (max-width: 900px) {
  .duo {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .duo-visual {
    order: -1; /* imagem primeiro no mobile */
  }
}

/* (Higienização) Evitar duplicidade da regra .thumb genérica:
   remova ou deixe APENAS esta versão abaixo.
*/
.thumb{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}