/* ========== 0) Tokens & Reset ========== */
:root{
  --brand: #515A47;
  --ink-on-brand: #fff;
  --border-on-brand: rgba(255,255,255,.18);

  --container: 1200px;
  --gutter: 24px;

  --h-desktop: 48px;
  --h-mobile: 48px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ========== 1) Header / Navbar ========== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--brand); color: var(--ink-on-brand);
  border-bottom: 1px solid var(--border-on-brand);
}

/* Desktop layout: 3 colunas → [vazio] [MENU] [vazio]
   (futuro-prova se você reintroduzir logo) */
.nav-wrap{
  height: var(--h-desktop);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

/* Menu central (desktop) */
nav.primary{
  grid-column: 2;
  display: flex; justify-content: center; align-items: center;
  gap: 16px; flex-wrap: nowrap; white-space: nowrap;
}
nav.primary a,
nav.primary a:link,
nav.primary a:visited{
  color: var(--ink-on-brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 8px;
  opacity: .95;
  transition: background .2s, opacity .2s;
}
nav.primary a:hover{ opacity:1; background: rgba(255,255,255,.14); }
nav.primary a:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }

/* Botão: minimal (só “três palitinhos”) */
.menu-btn{
  appearance:none; background:none; border:0; box-shadow:none; border-radius:0;
  width:44px; height:22px; color:#fff; display:none; /* escondido no desktop */
  display:none;
}
.menu-btn:focus{ outline:none; }
.menu-btn:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:3px; }
.menu-btn svg{ width:22px; height:22px; display:block; }

/* Mobile (até 1024px): mostra só o hambúrguer à ESQUERDA */
@media (max-width:1023.98px){
  .nav-wrap{
    height: var(--h-mobile);
    grid-template-columns: auto 1fr; /* [botão] [espaço] */
  }
  nav.primary{ display: none !important; }
  .menu-btn{
    display: inline-flex !important;
    justify-self: start;
  }
}

/* ========== 2) Painel Mobile ========== */
.mobile-panel{ display:none; }
@media (max-width:1023.98px){
  .mobile-panel{
    width:100%;
    background: var(--brand);
    border-top: 1px solid var(--border-on-brand);
    position: relative; z-index: 49; /* header é 50 */
  }
  .mobile-panel[aria-hidden="false"]{ display:block; }
  .mobile-panel a{
    display:block; color:#fff; text-decoration:none; font-weight:600;
    padding:14px var(--gutter); border-bottom:1px solid var(--border-on-brand);
    white-space: nowrap;
  }
}

/* ===== BANNER — bloco consolidado ===== */

/* Altura ~75% da tela (descontando header) */
.banner{
  min-height: calc(75vh - var(--h-desktop));
  overflow: hidden;
}
@supports (height: 100svh){
  .banner{ min-height: calc(100svh - 25svh - var(--h-desktop)); }
}
@media (max-width: 767.98px){
  .banner{ min-height: calc(75vh - var(--h-mobile)); }
  @supports (height: 100svh){
    .banner{ min-height: calc(100svh - 25svh - var(--h-mobile)); }
  }
}

/* Stack (imagem + CTA na mesma célula) */
.banner > .container{
  display: grid;
  grid-template-areas: "stack";
  align-content: stretch;
  justify-content: stretch;
  min-height: 100%;
  max-width: none;
  padding: 0;
}

/* Imagem ocupa 100% da área (funciona com <img> OU <picture>) */
.banner > .container > :is(img, picture){
  grid-area: stack;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.banner > .container > :is(img, picture) img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* CTA sobre a imagem */
.banner-cta{
  grid-area: stack;
  align-self: end;           /* encosta no rodapé da área do banner */
  justify-self: end;       /* esquerda no desktop */
  margin-left: clamp(16px, 4vw, 40px);
  margin-bottom: clamp(16px, 4vw, 40px);
  z-index: 2;
  text-align: left;
}

/* Mobile: CTA centralizado na base */
@media (max-width: 767.98px){
  .banner-cta{
    justify-self: center;
    margin-left: 0;
    margin-bottom: 16px;
    text-align: center;
  }
}

/* Botão arredondado (visual) */
.banner-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 9999px;
  background: var(--brand, #515A47);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: filter .2s, transform .06s;
}
.banner-cta a:hover{ filter: brightness(.95); }
.banner-cta a:active{ transform: translateY(1px); }
.banner-cta a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* CTA à direita com respiro do canto (desktop) */
.banner-cta{
  justify-self: end;                             /* mantém na direita */
  margin-right: clamp(16px, 40vw, 40px);          /* ← “padding” externo do canto */
  margin-bottom: clamp(16px, 40vh, 40px);         /* respiro da base */
  text-align: right;
}

/* Mobile: centraliza e zera a margem direita */
@media (max-width: 767.98px){
  .banner-cta{
    justify-self: center;
    margin-right: 0;
    margin-bottom: 16px;
    text-align: center;
  }
}

/* (opcional) respeitar áreas seguras em iOS notch */
.banner-cta{
  margin-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
  margin-bottom: max(clamp(16px, 4vw, 40px), env(safe-area-inset-bottom));
}

/* ---- Controles do CTA do banner ---- */
:root{
  /* ajuste como quiser: use px, vw/vh, clamp(...) */
  --cta-right: clamp(24px, 20vw, 200px);   /* ↔ afastar da borda direita */
  --cta-bottom: clamp(24px, 20vh, 140px);   /* ↕ afastar da borda inferior */
}

/* Desktop: ancorado embaixo à DIREITA */
.banner-cta{
  align-self: end;           /* start | center | end  (vertical) */
  justify-self: end;         /* start | center | end  (horizontal) */
  margin-right: var(--cta-right);
  margin-bottom: var(--cta-bottom);
  text-align: right;
}

/* Mobile: centralizado na base (ajuste só a margem inferior) */
@media (max-width: 767.98px){
  .banner-cta{
    align-self: end;
    justify-self: center;
    margin-right: 0;
    margin-bottom: 16px;     /* mude aqui se quiser mais alto/baixo no mobile */
    text-align: center;
  }
}

/* Se preferir ancorar à ESQUERDA no desktop, troque por:
.banner-cta{ align-self:end; justify-self:start; margin-left: var(--cta-right); margin-bottom: var(--cta-bottom); text-align:left; }
*/

/* Se preferir “no MEIO” do banner:
.banner-cta{ align-self:center; justify-self:center; transform: translate(10vw, -5vh); }
  - mova na horizontal com translateX(…) (positivo → direita, negativo → esquerda)
  - mova na vertical   com translateY(…) (negativo → sobe, positivo → desce)
*/

/* ===== Ajustes pedidos (override final) ===== */

/* Maçanetas rápidas (ajuste se quiser) */
:root{
  --cta-desk-height: 54px;   /* altura do botão no desktop */
  --cta-desk-pad-x: 24px;    /* padding lateral */
  --cta-desk-font: 16px;     /* font-size do botão */

  --banner-mobile-percent: 85vh;  /* altura do banner no mobile (fallback) */
  /* se quiser mais alto: 90vh / 95vh; mais baixo: 70vh / 65vh */
}

/* 1) Botão maior no DESKTOP */
@media (min-width: 1024px){
  .banner-cta a{
    min-height: var(--cta-desk-height);
    padding: 0 var(--cta-desk-pad-x);
    font-size: var(--cta-desk-font);
    border-radius: 9999px;
  }
}

/* 2) Banner mais ALTO no MOBILE (fallback com vh) */

/* 2b) Preferir svh quando disponível (altura real da viewport) */

/* ===== Seção “O Projeto” ===== */
/* Container centralizado você já tem via .container; aplico estilo no wrapper interno */
#oprojeto .projeto-wrap{
  background: #515A47;          /* cor de fundo */
  color: #fff;                  /* texto claro */
  border-radius: 16px;          /* borda arredondada */
  padding: 32px;                /* padding nos 4 lados */
  
  display: grid;                /* divide em dois lados */
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto media"; /* força: texto esquerda, vídeo direita */
  gap: 24px;
  align-items: center;
}

/* Garante posição independente da ordem no HTML */
#oprojeto .projeto-texto{ grid-area: texto; }
#oprojeto .projeto-media{ grid-area: media; }

/* Tipografia básica dentro da área de texto */
#oprojeto .projeto-texto h2{ margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
#oprojeto .projeto-texto p{ margin: 0; line-height: 1.7; }

/* Vídeo/thumbnail responsivo, com cantos arredondados */
#oprojeto .projeto-media img{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

/* Responsivo: empilha no mobile mantendo texto acima e vídeo abaixo */
@media (max-width: 1023.98px){
  #oprojeto .projeto-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "media";
    padding: 24px;
    gap: 16px;
  }
  #oprojeto .projeto-texto h2{ font-size: 22px; }
}

/* Espaço entre o banner e a seção seguinte */
:root{
  --gap-desktop: 48px;
  --gap-mobile: 24px;
}

.banner{
  margin-block-end: var(--gap-desktop); /* espaço abaixo do banner (desktop) */
}

@media (max-width: 767.98px){
  .banner{
    margin-block-end: var(--gap-mobile); /* espaço abaixo no mobile */
  }
}

/* Vídeo do "O Projeto" com cantos arredondados (thumb + iframe) */
#oprojeto .projeto-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;     /* mesmo raio da caixa verde */
  overflow: hidden;        /* recorta os cantos do conteúdo interno */
  background: #000;        /* evita barras/branco ao carregar */
}

/* Thumb (botão) e iframe ocupam 100% da área e herdam o recorte */
#oprojeto .projeto-media .yt-trigger,
#oprojeto .projeto-media img,
#oprojeto .projeto-media iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Botão da thumb sem estilos de botão nativo */
#oprojeto .projeto-media .yt-trigger{
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* Play overlay centralizado na thumb (com cantos já arredondados pelo wrapper) */
#oprojeto .projeto-media{ position: relative; }
#oprojeto .projeto-media .yt-trigger{ position: relative; width:100%; height:100%; padding:0; background:transparent; border:0; cursor:pointer; }

/* bolinha + ícone */
#oprojeto .yt-play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  border-radius: 9999px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: grid; place-items: center;
  pointer-events: none;            /* clique passa para o botão */
}
#oprojeto .yt-play svg{
  width: clamp(18px, 2.6vw, 28px);
  height: clamp(18px, 2.6vw, 28px);
  color: #fff;
}

/* feedback visual */
#oprojeto .projeto-media .yt-trigger:hover .yt-play{ background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference){
  #oprojeto .projeto-media .yt-trigger:hover .yt-play{ transform: translate(-50%,-50%) scale(1.04); transition: transform .2s ease, background .2s ease; }
}

/* foco acessível no botão (realça a bolinha) */
#oprojeto .projeto-media .yt-trigger:focus-visible .yt-play{ outline: 2px solid #fff; outline-offset: 3px; }

/* ===== Peças — Carrossel (viewport + track) ===== */
#pecas .pecas-wrap{ position: relative; }

#pecas .pecas-viewport{
  overflow: hidden;             /* janela */
}

#pecas .pecas-track{
  --cols: 3;                    /* quantos cards visíveis no desktop */
  --gap: 20px;
  display: flex;                /* trilho */
  gap: var(--gap);
  will-change: scroll-position; /* suaviza no scrollBy */
}

/* Cada card ocupa 1/--cols da largura da viewport */
#pecas .peca-card{
  flex: 0 0 calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  max-width: calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  transition: transform .2s ease;
}
#pecas .peca-card img{
  width: 100%;
  aspect-ratio: 0.5 / 0.75;
  height: auto;
  object-fit: cover;
  transition: transform .3s ease;
}
#pecas .peca-card:hover img,
#pecas .peca-card.is-zoom img{
  transform: scale(1.06);
}
#pecas .peca-card figcaption{
  font-size: 14px;
  padding: 8px 10px;
  color: #374151;
}

/* Setas */
#pecas .pecas-prev,
#pecas .pecas-next{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, transform .06s ease, opacity .2s ease;
}
#pecas .pecas-prev{ left: 8px; }
#pecas .pecas-next{ right: 8px; }
#pecas .pecas-prev:hover, #pecas .pecas-next:hover{ background: rgba(0,0,0,.7); }
#pecas .pecas-prev:active{ transform: translateY(-50%) translateY(1px); }
#pecas .pecas-next:active{ transform: translateY(-50%) translateY(1px); }
#pecas .pecas-prev[disabled], #pecas .pecas-next[disabled]{ opacity: .4; cursor: default; }
#pecas .pecas-prev svg, #pecas .pecas-next svg{ width: 20px; height: 20px; display: block; }

/* Breakpoints: 3 / 2 / 1 cards */
@media (max-width: 1200px){ #pecas .pecas-track{ --cols: 3; } }
@media (max-width: 900px){  #pecas .pecas-track{ --cols: 2; } }
@media (max-width: 560px){  #pecas .pecas-track{ --cols: 1; } }

/* Carrossel: quem rola é o VIEWPORT */
#pecas .pecas-viewport{
  overflow-x: auto;          /* antes estava só hidden */
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox: esconde a barra */
}
#pecas .pecas-viewport::-webkit-scrollbar{ display: none; } /* WebKit */

/* Título da seção Peças */
#pecas #pecas-title{
  font-family: inherit;        /* mesma fonte do body (Inter) */
  color: inherit;              /* mesma cor do contexto */
  text-align: center;          /* centraliza na linha */
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);  /* responsivo e consistente com o site */
  line-height: 1.25;
  margin: 0 0 16px;            /* espaço abaixo do título */
}

/* (opcional) mais respiro antes do carrossel */
#pecas .pecas-viewport{ margin-top: 18px; }

/* Espaço extra antes do título da seção Peças */
:root{
  --sec-gap-desktop: 72px;  /* ajuste aqui se quiser mais/menos */
  --sec-gap-mobile: 40px;
}

#pecas{
  margin-top: var(--sec-gap-desktop);                 /* respiro em relação à seção anterior */
  scroll-margin-top: calc(var(--h-desktop) + 12px);   /* âncora compensa o header sticky */
}

@media (max-width: 1023.98px){
  #pecas{ scroll-margin-top: calc(var(--h-mobile) + 12px); }
}

@media (max-width: 767.98px){
  #pecas{ margin-top: var(--sec-gap-mobile); }
}

/* mantém o h2 centralizado e sem margem superior extra */
#pecas #pecas-title{ margin-top: 0; }

/* === Ajuste de espaço entre Banner e #oprojeto no MOBILE === */
@media (max-width: 767.98px){
  /* reduz o espaço do banner */
  .banner{
    margin-block-end: 12px !important; /* antes era 24px */
  }
  /* zera o topo da próxima seção para evitar “soma” */
  #oprojeto{
    margin-top: 0 !important;          /* antes podia estar 24/40/72px */
  }
}

/* === Banner: altura no MOBILE controlada por variáveis === */
:root{
  /* ajuste aqui conforme o gosto: 60svh, 65svh, 70svh... */
  --banner-mobile-height-vh: 25vh;   /* fallback */
  --banner-mobile-height-svh: 25svh; /* real viewport height quando suportado */
}

@media (max-width: 767.98px){
  .banner{
    /* usa o fallback (vh) */
    min-height: calc(var(--banner-mobile-height-vh) - var(--h-mobile)) !important;
    margin-block-end: 12px !important; /* reduz o espaço abaixo do banner */
  }
}

@supports (height: 100svh){
  @media (max-width: 767.98px){
    .banner{
      /* prefere svh (ignora o 85svh antigo que você tinha) */
      min-height: calc(var(--banner-mobile-height-svh) - var(--h-mobile)) !important;
    }
  }
}

/* Centraliza o CTA da seção Peças */
#pecas .pecas-cta{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Botão outline no mesmo padrão do banner */
.btn{
  appearance:none; border:0; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px; border-radius:9999px; font-weight:700; text-decoration:none;
  transition: filter .2s ease, transform .06s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid #000; outline-offset:3px; }

/* Variante outline (usa cor da marca) */
.btn--outline{
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
  box-shadow: none;
}
.btn--outline:hover{
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.btn--outline:focus-visible{
  outline-color: var(--brand);
}

/* ===== Seção: Apoio e Parcerias (variante azul) ===== */
#apoio-sebrae .projeto-wrap.is-azul{
  background: #2a4fda;      /* azul */
  color: #fff;              /* texto claro */
  border-radius: 16px;
  padding: 32px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto media"; /* texto à esquerda, vídeo à direita */
  gap: 24px;
  align-items: center;
}

/* Áreas */
#apoio-sebrae .projeto-texto{ grid-area: texto; }
#apoio-sebrae .projeto-media{ grid-area: media; }

/* Tipografia local (opcional, herda do site) */
#apoio-sebrae .projeto-texto h2{ margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
#apoio-sebrae .projeto-texto p{ margin: 0; line-height: 1.7; }

/* Vídeo/thumbnail com cantos arredondados (igual ao projeto) */
#apoio-sebrae .projeto-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#apoio-sebrae .projeto-media .yt-trigger,
#apoio-sebrae .projeto-media img,
#apoio-sebrae .projeto-media iframe{
  display: block; width: 100%; height: 100%; border: 0;
}
#apoio-sebrae .projeto-media .yt-trigger{ padding: 0; background: transparent; cursor: pointer; }

/* Ícone de play sobre a thumb */
#apoio-sebrae .yt-play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  border-radius: 9999px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: grid; place-items: center;
  pointer-events: none;
}
#apoio-sebrae .yt-play svg{ width: clamp(18px, 2.6vw, 28px); height: clamp(18px, 2.6vw, 28px); color: #fff; }
#apoio-sebrae .projeto-media .yt-trigger:hover .yt-play{ background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference){
  #apoio-sebrae .projeto-media .yt-trigger:hover .yt-play{
    transform: translate(-50%,-50%) scale(1.04);
    transition: transform .2s ease, background .2s ease;
  }
}
#apoio-sebrae .projeto-media .yt-trigger:focus-visible .yt-play{ outline: 2px solid #fff; outline-offset: 3px; }

/* Responsivo: empilha no mobile (texto em cima, vídeo embaixo) */
@media (max-width: 1023.98px){
  #apoio-sebrae .projeto-wrap.is-azul{
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "media";
    padding: 24px;
    gap: 16px;
  }
  #apoio-sebrae .projeto-texto h2{ font-size: 22px; }
}

/* Espaçamento da seção e compensação de âncora (header sticky) */
#apoio-sebrae{
  margin-top: var(--sec-gap-desktop, 72px);
  scroll-margin-top: calc(var(--h-desktop) + 12px);
}
@media (max-width: 1023.98px){
  #apoio-sebrae{ scroll-margin-top: calc(var(--h-mobile) + 12px); }
}
@media (max-width: 767.98px){
  #apoio-sebrae{ margin-top: var(--sec-gap-mobile, 40px); }
}

/* ===== Seção: Bilros (variante âmbar) ===== */
#bilros .projeto-wrap.is-bilros{
  background: #c37e1e;   /* cor da seção */
  color: #fff;
  border-radius: 16px;
  padding: 32px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto media"; /* texto esquerda, vídeo direita */
  gap: 24px;
  align-items: center;
}

/* Áreas */
#bilros .projeto-texto{ grid-area: texto; }
#bilros .projeto-media{ grid-area: media; }

/* Tipografia */
#bilros .projeto-texto h2{ margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
#bilros .projeto-texto p{ margin: 0; line-height: 1.7; }

/* Vídeo (thumb + iframe) com cantos arredondados */
#bilros .projeto-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#bilros .projeto-media .yt-trigger,
#bilros .projeto-media img,
#bilros .projeto-media iframe{
  display: block; width: 100%; height: 100%; border: 0;
}
#bilros .projeto-media .yt-trigger{ padding: 0; background: transparent; cursor: pointer; }

/* Ícone de play */
#bilros .yt-play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  border-radius: 9999px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: grid; place-items: center;
  pointer-events: none;
}
#bilros .yt-play svg{ width: clamp(18px, 2.6vw, 28px); height: clamp(18px, 2.6vw, 28px); color: #fff; }
#bilros .projeto-media .yt-trigger:hover .yt-play{ background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference){
  #bilros .projeto-media .yt-trigger:hover .yt-play{
    transform: translate(-50%,-50%) scale(1.04);
    transition: transform .2s ease, background .2s ease;
  }
}
#bilros .projeto-media .yt-trigger:focus-visible .yt-play{ outline: 2px solid #fff; outline-offset: 3px; }

/* Responsivo: empilha no mobile mantendo texto acima e vídeo abaixo */
@media (max-width: 1023.98px){
  #bilros .projeto-wrap.is-bilros{
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "media";
    padding: 24px;
    gap: 16px;
  }
  #bilros .projeto-texto h2{ font-size: 22px; }
}

/* Espaçamento e âncora (header sticky) */
#bilros{
  margin-top: var(--sec-gap-desktop, 72px);
  scroll-margin-top: calc(var(--h-desktop) + 12px);
}
@media (max-width: 1023.98px){
  #bilros{ scroll-margin-top: calc(var(--h-mobile) + 12px); }
}
@media (max-width: 767.98px){
  #bilros{ margin-top: var(--sec-gap-mobile, 40px); }
}

/* ===== Seção: Bordados (variante laranja) ===== */
#bordados .projeto-wrap.is-bordados{
  background: #e46f2e;  /* tom alaranjado (ajuste se quiser) */
  color: #fff;
  border-radius: 16px;
  padding: 32px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto media"; /* texto esquerda, vídeo direita */
  gap: 24px;
  align-items: center;
}

/* Áreas */
#bordados .projeto-texto{ grid-area: texto; }
#bordados .projeto-media{ grid-area: media; }

/* Tipografia */
#bordados .projeto-texto h2{ margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
#bordados .projeto-texto p{ margin: 0; line-height: 1.7; }

/* Vídeo com cantos arredondados (thumb + iframe) */
#bordados .projeto-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#bordados .projeto-media .yt-trigger,
#bordados .projeto-media img,
#bordados .projeto-media iframe{
  display: block; width: 100%; height: 100%; border: 0;
}
#bordados .projeto-media .yt-trigger{ padding: 0; background: transparent; cursor: pointer; }

/* Ícone de play */
#bordados .yt-play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  border-radius: 9999px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: grid; place-items: center;
  pointer-events: none;
}
#bordados .yt-play svg{ width: clamp(18px, 2.6vw, 28px); height: clamp(18px, 2.6vw, 28px); color: #fff; }
#bordados .projeto-media .yt-trigger:hover .yt-play{ background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference){
  #bordados .projeto-media .yt-trigger:hover .yt-play{
    transform: translate(-50%,-50%) scale(1.04);
    transition: transform .2s ease, background .2s ease;
  }
}
#bordados .projeto-media .yt-trigger:focus-visible .yt-play{ outline: 2px solid #fff; outline-offset: 3px; }

/* Responsivo: empilha no mobile */
@media (max-width: 1023.98px){
  #bordados .projeto-wrap.is-bordados{
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "media";
    padding: 24px;
    gap: 16px;
  }
  #bordados .projeto-texto h2{ font-size: 22px; }
}

/* Espaçamento e âncora (header sticky) */
#bordados{
  margin-top: var(--sec-gap-desktop, 72px);
  scroll-margin-top: calc(var(--h-desktop) + 12px);
}
@media (max-width: 1023.98px){
  #bordados{ scroll-margin-top: calc(var(--h-mobile) + 12px); }
}
@media (max-width: 767.98px){
  #bordados{ margin-top: var(--sec-gap-mobile, 40px); }
}

/* ===== Seção: Sobre nós (variante branca com FOTO) ===== */
#sobre .projeto-wrap.is-branco{
  background: #fff;                /* fundo branco */
  color: #333;                     /* texto escuro para contraste */
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(0,0,0,.06); /* (opcional) contorno suave */

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto media"; /* texto à esquerda, foto à direita */
  gap: 24px;
  align-items: center;
}

/* Áreas */
#sobre .projeto-texto{ grid-area: texto; }
#sobre .projeto-media.foto{ grid-area: media; }

/* Tipografia */
#sobre .projeto-texto h2{ margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
#sobre .projeto-texto p{ margin: 0; line-height: 1.7; }

/* FOTO com cantos arredondados e proporção 1:1.5 (≈ 2:3) */
#sobre .projeto-media.foto{
  position: relative;
  aspect-ratio: 2 / 3;     /* 1 : 1.5 */
  border-radius: 16px;
  overflow: hidden;
  background: #eee;        /* fallback enquanto carrega */
}
#sobre .projeto-media.foto img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* preenche a moldura com crop controlado */
}

/* Responsivo: empilha no mobile (texto em cima, foto embaixo) */
@media (max-width: 1023.98px){
  #sobre .projeto-wrap.is-branco{
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "media";
    padding: 24px;
    gap: 16px;
  }
  #sobre .projeto-texto h2{ font-size: 22px; }
}

/* Espaçamento e âncora (header sticky) */
#sobre{
  margin-top: var(--sec-gap-desktop, 72px);
  scroll-margin-top: calc(var(--h-desktop) + 12px);
}
@media (max-width: 1023.98px){
  #sobre{ scroll-margin-top: calc(var(--h-mobile) + 12px); }
}
@media (max-width: 767.98px){
  #sobre{ margin-top: var(--sec-gap-mobile, 40px); }
}

/* ===== Como comprar (limpo: só cartões + CTA) ===== */
#como-comprar .comprar-wrap{
  background:#515A47; color:#ffffff;
  border-radius:16px; padding:28px;
}
#como-comprar #como-title{
  margin:0 0 6px; text-align:center; font-weight:700;
  font-size:clamp(20px,2.2vw,24px);
}
#como-comprar .comprar-sub{
  margin:0 0 18px; text-align:center; opacity:.85; font-size:14px;
}

/* Grids das linhas */
#como-comprar .steps-grid{
  display:grid;
  gap: clamp(16px, 2.4vw, 24px);
}
#como-comprar .steps-top{    grid-template-columns: repeat(3, 1fr); }
#como-comprar .steps-bottom{ grid-template-columns: repeat(2, 1fr); margin-top: clamp(12px,2vw,16px); }

/* Cartões */
#como-comprar .card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px 16px 16px;
  min-height:150px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
#como-comprar .card:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
#como-comprar .card h3{
  margin:0 0 6px;
  font-size:16px; line-height:1.25; color:#2b2b2b;
}
#como-comprar .card p{
  margin:0; font-size:14px; line-height:1.55; color:#3a3a3a;
}

/* Responsivo */
@media (max-width: 1023.98px){
  #como-comprar .steps-top{    grid-template-columns: repeat(2, 1fr); }
  #como-comprar .steps-bottom{ grid-template-columns: 1fr; }
}
@media (max-width: 767.98px){
  #como-comprar .steps-top,
  #como-comprar .steps-bottom{ grid-template-columns: 1fr; }
}

/* CTA centralizado (reutiliza .btn .btn--whatsapp já existentes) */
#como-comprar .comprar-cta{
  display:flex; justify-content:center; margin-top:12px; color:#ffffff
}

/* ===== Footer ===== */
.site-footer{ margin-top: clamp(40px, 7vw, 72px); }

/* faixa verde */
.footer-main{
  background: var(--brand);
  color: var(--ink-on-brand);
  padding: 28px 0;
  border-top: 1px solid var(--border-on-brand);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; /* brand | contato | social */
  gap: 24px;
  align-items: start;
}
.footer-name{ margin: 0 0 6px; font-size: 18px; }
.footer-title{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .9;
}
.footer-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-main a{
  color: var(--ink-on-brand);
  text-decoration: none;
}
.footer-main a:hover{ text-decoration: underline; }
.ig-link{ display: inline-flex; align-items: center; gap: 8px; }
.ig-link svg{ display:block; }

/* faixa branca inferior */
.footer-bottom{
  background: #fff;
  color: #333;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.footer-bottom-wrap{
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 13px;
}

/* acessibilidade do foco */
.footer-main a:focus-visible,
.footer-bottom a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* responsivo */
@media (max-width: 1023.98px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px){
  .footer-grid{ grid-template-columns: 1fr; gap: 16px; }
  .footer-bottom-wrap{ font-size: 12px; }
}

/* utilitário para esconder apenas visualmente (acessível a leitores de tela) */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Link do Instagram na seção Bilros */
#bilros .projeto-texto a,
#bilros .projeto-texto a:link,
#bilros .projeto-texto a:visited{
  color: #fff;               /* branco */
  text-decoration: none;     /* sem sublinhado */
  font-weight: 700;          /* dá um destaque */
}

#bilros .projeto-texto a:hover{
  text-decoration: none;     /* mantém sem sublinhado no hover */
  filter: brightness(.95);   /* leve feedback */
}

#bilros .projeto-texto a:focus-visible{
  outline: 2px solid #fff;   /* foco acessível */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Wrapper de vídeo comum a todas as seções */
.projeto-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000; /* se a imagem não cobrir, isso apareceria — evitamos com object-fit */
}
.projeto-media .yt-trigger{
  padding: 0;
  background: transparent;
  cursor: pointer;
  border: 0;
}

/* Thumb e iframe ocupam 100% do wrapper */
.projeto-media img,
.projeto-media iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Faz a thumb “cobrir” a moldura (sem listras) */
.projeto-media img{
  object-fit: cover;
}

/* Se por algum motivo alguma thumb ainda tiver style inline (height:auto), força aqui */
.projeto-media img{ height: 100% !important; }

/* limite de altura sem corte; a imagem reduz se passar do limite */
#bilros .projeto-media img,
#bordados .projeto-media img{
  max-height: clamp(280px, 40vw, 560px); /* ajuste à vontade */
  width: auto;                            /* mantém proporção */
}


/* === Bilros/Bordados: foto (sem faixa preta) === */
#bilros .projeto-media,
#bordados .projeto-media{
  aspect-ratio: auto !important;      /* remove 16:9 fixo */
  background: transparent !important; /* tira o fundo preto */
  overflow: hidden;                    /* mantém cantos arredondados sem vazar */
  border-radius: 16px;
}

/* A imagem controla a altura da seção */
#bilros .projeto-media img,
#bordados .projeto-media img{
  display: block;
  width: 100%;     /* preenche a coluna; troque para 'auto' se quiser tamanho natural */
  height: auto;    /* mantém proporção */
  object-fit: contain; /* não é estritamente necessário com height:auto, mas segura bem */
}

/* (opcional) limite de altura sem corte – só no desktop/tablet */
@media (min-width: 768px){
  #bilros .projeto-media img,
  #bordados .projeto-media img{
    max-height: clamp(320px, 40vw, 560px);
  }
}

/* APOIO: play no canto inferior direito (sem cobrir o logo) */
#apoio-sebrae .projeto-media { position: relative; }

#apoio-sebrae .yt-play{
  /* desfaz centralização padrão */
  left: auto !important;
  top: auto !important;
  transform: none !important;

  /* posiciona no canto inferior direito com respiro e safe-area */
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));

  /* tamanho responsivo (menor em telas pequenas) */
  width: clamp(44px, 7vw, 64px);
  height: clamp(44px, 7vw, 64px);

  background: rgba(0,0,0,.35);      /* mais discreto pra não poluir o logo */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 2;                        /* garante acima da thumb */
}

#apoio-sebrae .yt-play svg{
  width: 55%;
  height: 55%;
}

/* feedback no hover/foco (opcional) */
#apoio-sebrae .projeto-media .yt-trigger:hover .yt-play{
  background: rgba(0,0,0,.5);
}
#apoio-sebrae .projeto-media .yt-trigger:focus-visible .yt-play{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* PROJETO & APOIO: play no canto inferior direito, discreto */
#oprojeto .projeto-media,
#apoio-sebrae .projeto-media{ position: relative; }

#oprojeto .yt-play,
#apoio-sebrae .yt-play{
  /* desfaz centralização padrão */
  left: auto !important;
  top: auto !important;
  transform: none !important;

  /* canto inferior direito com respiro e safe-area */
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));

  /* tamanho responsivo */
  width: clamp(44px, 7vw, 64px);
  height: clamp(44px, 7vw, 64px);

  background: rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 2;
}
#oprojeto .yt-play svg,
#apoio-sebrae .yt-play svg{
  width: 55%;
  height: 55%;
}

/* feedback no hover/foco */
#oprojeto .projeto-media .yt-trigger:hover .yt-play,
#apoio-sebrae .projeto-media .yt-trigger:hover .yt-play{
  background: rgba(0,0,0,.5);
}
#oprojeto .projeto-media .yt-trigger:focus-visible .yt-play,
#apoio-sebrae .projeto-media .yt-trigger:focus-visible .yt-play{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Link do edital – branco, sem sublinhado, com estados acessíveis */
#apoio-sebrae .projeto-texto .link-apoio,
#apoio-sebrae .projeto-texto .link-apoio:link,
#apoio-sebrae .projeto-texto .link-apoio:visited{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 4px;              /* dá “hit area” pro hover/foco */
  border-radius: 6px;
}

#apoio-sebrae .projeto-texto .link-apoio:hover{
  background: rgba(255,255,255,.14);  /* feedback sem sublinhar */
}

#apoio-sebrae .projeto-texto .link-apoio:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Alinha a âncora #inicio abaixo do header fixo */
#inicio{
  scroll-margin-top: calc(var(--h-desktop) + 8px);
}
@media (max-width:1023.98px){
  #inicio{
    scroll-margin-top: calc(var(--h-mobile) + 8px);
  }
}

/* Bordados: link branco, sem sublinhado (padrão Bilros) */
#bordados .projeto-texto .link-ig-bordados,
#bordados .projeto-texto .link-ig-bordados:link,
#bordados .projeto-texto .link-ig-bordados:visited{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 6px;
}

#bordados .projeto-texto .link-ig-bordados:hover{
  background: rgba(255,255,255,.14);
}

#bordados .projeto-texto .link-ig-bordados:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== Banner: corrigir overflow e limitar por breakpoint ===== */

/* Variáveis de controle (ajuste à vontade) */
:root{
  --banner-desk-min: 560px;      /* altura mínima no desktop */
  --banner-desk-max: 72vh;       /* altura máxima no desktop */
  --banner-mob-height: 64svh;    /* altura fixa no mobile (usa svh quando disponível) */
  --cta-bottom-desk: clamp(12px, 6vh, 56px);
  --cta-bottom-mob: 16px;

  /* Ponto focal da imagem (onde “centraliza” o crop) */
  --banner-obj-x: 50%;
  --banner-obj-y: 50%;
}

/* Garante que nada vaze para criar barra horizontal */
html, body { overflow-x: hidden; }
.banner{ overflow: clip; }

/* Stack do banner (imagem + CTA na mesma célula) */
.banner > .container{
  display: grid;
  grid-template-areas: "stack";
  max-width: none;
  padding: 0;
  height: 100%;
}
.banner > .container > :is(img, picture){
  grid-area: stack;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                          /* preenche sem distorcer */
  object-position: var(--banner-obj-x) var(--banner-obj-y);
}

/* REMOVE alturas antigas baseadas em min-height */
.banner{ min-height: 0 !important; }

/* Desktop: limita por altura (evita banner “comprido”) */
@media (min-width: 1024px){
  .banner{
    height: clamp(var(--banner-desk-min), var(--banner-desk-max), 820px);
  }
  .banner-cta{
    justify-self: end;
    margin-right: clamp(16px, 4vw, 40px);
    margin-bottom: var(--cta-bottom-desk);
    text-align: right;
  }
}

/* Mobile: define uma altura estável e centraliza o CTA */
@media (max-width: 1023.98px){
  /* fallback vh para browsers sem svh */
  .banner{ height: calc(64vh - var(--h-mobile)); }
  .banner-cta{
    justify-self: center;
    margin-right: 0;
    margin-bottom: var(--cta-bottom-mob);
    text-align: center;
  }
}

/* Se o navegador suportar svh, preferir a leitura real da viewport */
@supports (height: 100svh){
  @media (max-width: 1023.98px){
    .banner{ height: calc(var(--banner-mob-height) - var(--h-mobile)); }
  }
}

/* === FIX CTA do banner (desktop) — garante sobreposição e posição === */

/* 1) Container do banner é a pilha */
.banner > .container{
  display: grid;
  grid-template-areas: "stack";
  position: relative;          /* reforça contexto de empilhamento */
}

/* 2) Imagem preenche a pilha */
.banner > .container > :is(img, picture){
  grid-area: stack;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--banner-obj-x, 50%) var(--banner-obj-y, 50%);
  z-index: 1;                  /* imagem fica atrás */
}

/* 3) CTA fica na mesma área, por cima da imagem */
.banner-cta{
  grid-area: stack;
  z-index: 3;                  /* 👈 garante ficar visível por cima */
  align-self: end;
  justify-self: end;           /* canto inferior direito no desktop */
  margin-right: clamp(16px, 4vw, 40px);
  margin-bottom: clamp(12px, 6vh, 56px);
  text-align: right;
}

/* Mobile mantém CTA centralizado na base */
@media (max-width: 1023.98px){
  .banner-cta{
    justify-self: center;
    margin-right: 0;
    margin-bottom: 16px;
    text-align: center;
  }
}

/* --- Garantir que o CTA do banner fique por cima das seções seguintes --- */
.banner{
  position: relative;   /* cria stacking context */
  z-index: 5;           /* pinta acima dos irmãos subsequentes */
}

/* As seções abaixo ficam em um plano “normal” */
#oprojeto, #pecas, #apoio-sebrae, #bilros, #bordados, #sobre, #como-comprar{
  position: relative;   /* explícito, mas sem z-index alto */
  z-index: 0;
}

/* Pequeno respiro dentro do banner para o CTA não “colar” na borda */
.banner > .container{
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Mantém o CTA acima da imagem dentro do banner */
.banner-cta{
  grid-area: stack;
  z-index: 10;
}

/* =========================
   BANNER + CTA (override final)
   ========================= */

/* 1) Banner vira referência de empilhamento e âncora do CTA */
.banner{
  position: relative !important;
  z-index: 100 !important;    /* acima das seções seguintes */
  overflow: clip;              /* evita vazamento horizontal */
}

/* 2) Container do banner também relativo (âncora do absolute) */
.banner > .container{
  position: relative !important;
  display: block !important;   /* neutraliza grid anterior */
  height: 100%;
  padding: 0;
}

/* 3) Imagem preenche o banner */
.banner > .container > :is(img, picture){
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50%;
}

/* 4) CTA absolutamente posicionado dentro do banner (desktop) */
.banner-cta{
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: clamp(16px, 4vw, 40px) !important;
  bottom: clamp(12px, 6vh, 56px) !important;
  margin: 0 !important;
  z-index: 101 !important;    /* acima da imagem e de qualquer vizinho */
  text-align: right !important;
}

/* 5) Mobile: CTA centralizado na base */
@media (max-width: 1023.98px){
  .banner-cta{
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    text-align: center !important;
  }
}

/* 6) Garanta que as seções abaixo não “saltem” por cima */
#oprojeto, #pecas, #apoio-sebrae, #bilros, #bordados, #sobre, #como-comprar{
  position: relative;
  z-index: 0;                  /* plano normal */
}

/* 7) (opcional) altura do banner pra não “apertar” o CTA */
@media (min-width:1024px){
  .banner{ height: clamp(560px, 72vh, 820px) !important; }
}
@media (max-width:1023.98px){
  .banner{ height: calc(64svh - var(--h-mobile)) !important; }
}