:root{
  --bg:#0c1729;            /* fundo global */
  --surface:#0f1d33;       /* cartões escuros */
  --line:#1c2a41;          /* bordas */
  --text:#f8fafc;          /* texto claro */
  --muted:#b6c2d6;         /* secundário */
  --brand:#1f6feb;         /* pode manter */
  --brand-2:#8b5cf6;
  --ring:rgba(31,111,235,.25);
  --radius:18px;
  --shadow:0 10px 30px rgba(2,6,23,.35);
}
body{background:#0c1729;color:var(--text)}

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
    

    /* Header */
    /* Header transparente no topo */
.header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  border-bottom:0;
  transition: background .18s ease, box-shadow .18s ease;
  padding: 20px 0;
  transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0} /* mantém 15px */
/* Header após rolagem (~0.9) */
.header.scrolled{
  background:rgba(11,19,31,.9); /* #0c1729 @ 0.9 */
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  padding: 20px 0;
  backdrop-filter:saturate(140%) blur(4px);
}


    .wrap{max-width:1100px;margin:0 auto;padding:0 15px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3px}
    .brand-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 12px rgba(96,165,250,.35)}
    .menu{display:flex;gap:18px}
    .menu a{opacity:.86;padding:10px 12px;border-radius:10px}
    .menu a:hover{opacity:1;background:rgba(255,255,255,.06)}

    /* Hero */
    /* REMOVA o bloco body::before anterior e COLOQUE este */
/* fundo da hero invadindo até o topo e +100px */
.hero{position:relative;padding:112px 30px 52px 30px} /* + ~100px de altura efetiva */
.hero::before{
  content:""; position:fixed; inset:0 0 auto 0; height:min(68vh, 660px); z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 30% 0%,
      rgba(12,23,41,0) 0%,
      rgba(12,23,41,.25) 60%,
      rgba(12,23,41,.55) 100%
    ),
    url("img/hero.webp") center/cover no-repeat;
}

/* mobile: ajusta para caber o texto */
@media (max-width:640px){
  .hero{padding:84px 20px 40px 20px}
  .hero::before{height:min(78vh, 520px)}
}


    
    /* stack + centro */
.grid-hero{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:24px;
}
.hero h1,.hero .lead{max-width:900px;margin-left:auto;margin-right:auto}
.hero-cta{justify-content:center}
.hero-card{margin:12px auto 0;max-width:720px}
    .kicker{color:var(--brand);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem}
    h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:.4rem 0 1rem}
    .lead{color:var(--muted);font-size:1.05rem;max-width:60ch}
.cap{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 78%)}
    .hero-cta{display:flex;gap:12px;margin-top:18px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0e1a;font-weight:700;border:none}
    .btn:hover{transform:translateY(-1px)}

    /* Sections */
    section{padding:56px 0;}
    .section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}
    .section-head h2{margin:0;font-size:clamp(22px,3.5vw,30px)}
    .muted{color:var(--muted)}

    /* About */
    .about{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}

    /* Portfolio */
    .pillnav{display:flex;gap:8px;margin:6px 0 18px}
    .pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);cursor:pointer;border:1px solid rgba(255,255,255,.08)}
    .pill.active{background:linear-gradient(135deg,rgba(110,231,183,.14),rgba(96,165,250,.14));border-color:rgba(255,255,255,.14)}

    .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .tile{position:relative;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
    .tile img{display:block;width:100%;height:190px;object-fit:cover;opacity:.92;transition:.25s}
    .tile:hover img{transform:scale(1.03);opacity:1}
    .tile .cap{position:absolute;inset:auto 0 0 0;padding:12px 14px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 78%);font-size:.92rem}
    .cap h3{margin:0 0 6px;font-size:1rem}
    .cap p{margin:0;color:#cbd5e1}

    /* Text cards */
    .post{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
    .post h3{margin:0}
    .post p{margin:0;color:#cbd5e1}
    .post a{align-self:flex-start;margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06)}

    /* Gallery slider */
    .gallery{position:relative}
    .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
    .thumb{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);cursor:pointer}
    .thumb img{width:100%;height:110px;object-fit:cover;display:block}
    .g-viewport{margin-top:14px;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
    .g-viewport img{width:100%;height:440px;object-fit:cover;display:block}
    .g-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%}
    .g-btn{background:rgba(0,0,0,.45);border:none;color:#fff;padding:10px;border-radius:12px;margin:0 8px;cursor:pointer}

    /* Contact */
    form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    form .full{grid-column:1/-1}
    input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0c1020;color:var(--text);outline:none}
    input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
    button.send{margin-top:4px;padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));font-weight:700;color:#0b0e1a}

    /* Footer */
    footer{padding:26px 0;border-top:1px solid rgba(255,255,255,.06);color:#cbd5e1}
    .foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
    .foot .mini{display:flex;gap:12px}
    .foot .mini a{color:#cbd5e1;opacity:.9}

    /* Modal (lightbox, posts, vídeos) */
    .modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.72);opacity:0;pointer-events:none;transition:.2s ease;z-index:100}
    .modal.open{opacity:1;pointer-events:auto}
    .modal-box{max-width:min(900px,92vw);max-height:86vh;overflow:auto;background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:var(--shadow);padding:18px}
    .modal-close{position:sticky;top:0;display:inline-flex;justify-content:center;align-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);float:right}

    /* Responsive */
    @media (max-width: 960px){
      .grid-hero{grid-template-columns:1fr}
      .about{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr 1fr}
      .g-viewport img{height:320px}
    }
    @media (max-width: 640px){
      .menu{display:none}
      .grid{grid-template-columns:1fr}
      form{grid-template-columns:1fr}
      .g-viewport img{height:240px}
      .thumb img{height:74px}
    }
    
/* Burger (3 linhas, sem fundo) */
.burger{
  display:none;width:42px;height:38px;padding:0 10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);border-radius:10px;background:transparent;color:#fff;
  align-items:center;justify-content:center;gap:6px;flex-direction:column;border: none;
}
.burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px}
@media (max-width: 960px){ .menu{display:none} .burger{display:inline-flex} }


/* Modal do menu */
.nav-modal{position:fixed;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .22s ease;z-index:120;background:transparent}
.nav-modal.open{opacity:1;pointer-events:auto}
.nav-box{
  position:relative;
  background:rgba(0,0,0,.95); /* +escuro */
  color:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:min(92vw,520px);padding:36px 24px 30px;
  transform:translateY(8px);animation:fadeUp .2s ease forwards
}

@keyframes fadeUp{to{transform:translateY(0)}}
.nav-close{
  position:absolute;top:-14px;right:-14px; /* “quase saindo” na curvinha */
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(2px)
}
/* Links sem fundo + divisória fina 0.5 opacidade */
.nav-links{display:flex;flex-direction:column;margin-top:8px}
.nav-links a{
  display:flex;align-items:center;gap:12px;
  padding:16px 4px;background:transparent;border-radius:0;
  color:#fff;font-weight:800;font-size:1.33rem;text-align:left
}
.nav-links a + a{border-top:1px solid rgba(255,255,255,.5)} /* linha reta */
.nav-links a:hover{background:rgba(255,255,255,.06)}


/* trava scroll */
body.menu-open{overflow:hidden}

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 22px; line-height: 1;
}
.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 22px; /* ajusta o tamanho */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}


.brand-logo{
  width:auto;height:50px;display:block;object-fit:contain; background:none;box-shadow:none
}
@media (max-width:640px){
  .brand-logo{width:auto;height:32px}
}
.header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:0}
.nav{color:#fff}
.menu a{color:#fff}
.menu a:hover{background:rgba(255,255,255,.06)}
.brand{color:#fff}
/* Hero até o topo (sob o header) */
body{position:relative}
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:520px; z-index:-1;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(12,23,41,0) 0%, rgba(12,23,41,.4) 60%, rgba(12,23,41,.75) 100%),
    linear-gradient(180deg, rgba(12,23,41,0) 0%, rgba(12,23,41,.85) 100%),
    url("../img/hero.webp") center/cover no-repeat;
}

/* Quem somos centralizado */
.section-head--center{
  justify-content:center; align-items:center; text-align:center; gap:6px;
}
.about--onecol{display:grid; grid-template-columns:1fr}
.card--center{ text-align:center }
.about-text{ max-width:860px; margin:0 auto; line-height:1.7 }

/* ===== Ajustes 'Quem somos' (apenas CSS adicional) ===== */

/* 1) Subtítulo sempre EMBAIXO do título e centralizado */
.section-head--center{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
}
.section-head--center h2{ margin:0 }               /* título colado ao topo do bloco */
.section-head--center .muted{ display:block }      /* garante quebra de linha */

/* 2) Remove o “box” (fundo/borda/sombra) mas mantém padding do conteúdo */
#sobre .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:22px;               /* mantém o respiro interno */
  border-radius:0;            /* “cru”, sem arredondado */
}

/* 3) Parágrafos com respiro entre si */
.about-text + .about-text{ margin-top:16px }        /* espaço entre os parágrafos */


/* ===== 'Quem somos' centralizado (título, linha de apoio e texto) ===== */
/* Título + linha de apoio CENTRALIZADOS; texto à ESQUERDA */
#sobre .section-head--center{
  align-items:center !important;
  text-align:center !important;
}
#sobre .card--center{
  text-align:left !important;
}
#sobre .about-text{
  max-width:860px;
  margin:0 auto;          /* centraliza o bloco */
  text-align:left !important; /* mas alinha o texto à esquerda */
}
/* ===== Contato (sem box, header central e campos sem borda) ===== */

/* cabeçalho central, como em 'Quem somos' */
#contato .section-head{ justify-content:center; align-items:center; text-align:center; }
#contato .section-head .muted{ display:none } /* remove a linha de apoio antiga */

/* remove o box geral que envolvia o form */
#contato .card{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* campos sem borda, fundos escuros e foco limpo */
#contato input, #contato textarea{
  border:0 !important;
  background:rgba(255,255,255,.04);
  color:var(--text);
}
#contato input::placeholder, #contato textarea::placeholder{ color:rgba(255,255,255,.6) }
#contato input:focus, #contato textarea:focus{
  outline: none;
  box-shadow:0 0 0 3px rgba(139,92,246,.28); /* leve realce no foco */
}

/* botão com padding maior */
#contato .send{
  padding:16px 40px;        /* “40px na volta do enviar” (laterais) */
  font-weight:800;
}

/* espaçamento consistente do bloco de contato */
#contato form{ margin-top:10px }

/* ===== 'Enviar mensagem' igual ao botão 'Ver portfólio' visível na hero ===== */
#contato form{ justify-items:center }
#contato .send{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;                /* mesmo padding */
  border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0e1a;                    /* texto escuro, como no Ver portfólio */
  font-weight:700;                  /* peso equivalente */
  width:auto; grid-column:1 / -1; justify-self:center;
  transition:transform .15s ease;
}
#contato .send:hover{ transform:translateY(-1px) }

/* Fazer o botão do contato herdar exatamente .btn + .btn.primary */
.btn.primary.send{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0e1a; font-weight:700;
  font-size: inherit;
}
/* Centralizar o botão dentro da grid do form, sem mexer no estilo visual */
#contato form{ justify-items:center }
#contato .send{ grid-column:1/-1; justify-self:center }

/* ===== Footer novo ===== */
footer{
  padding:26px 0;
  border-top:0;
  background:rgba(0,0,0,.25); /* preto 75% sobre o azul */
}
.foot{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:16px;
}
.foot-copy{
  color:rgba(255,255,255,.35);
  font-size:.8rem;
}
.foot-logo{
  width:auto; height:40px; object-fit:contain; border-radius:10px; display:block;
}

/* <= 991px: centraliza texto e logo (logo em cima) */
@media (max-width: 991px){
  .foot{ grid-template-columns:1fr; justify-items:center; text-align:center }
  .foot-logo{ order:-1; margin-bottom:8px }
}

/* ===== Portfolio — alinhamentos e vídeo ===== */
/* Título grande à DIREITA, “títulozinhos” nos cards à ESQUERDA */
#portfolio .section-head{ justify-content:flex-end; text-align:right }
#portfolio .cap{ text-align:left }  /* títulos dos cards à esquerda */
#portfolio .section-head .muted{ display:none } /* removemos as pílulas, dispensar subtítulo antigo */

/* Ícone de play sobre a thumbnail */
.tile.video{position:relative}
.tile.video .play{
  position:absolute; left:14px; top:14px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.55);
}
.tile.video .play::before{
  content:""; position:absolute; inset:0; margin:auto;
  border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent #fff;
  left:15px; top:10px;
}

/* Modal escura para vídeos */
.modal-box.dark{ background:#0b1220; border-color:rgba(255,255,255,.08) }

/* Modal de vídeo maior */
.modal-box.dark{
  width:min(96vw, 1200px);
  max-height:90vh;
}

/* Botão play (vira botão real) */
.tile.video{ position:relative }
.tile.video .inline-play{
  position:absolute; left:14px; top:14px; width:40px; height:40px;
  border-radius:50%; border:0; cursor:pointer; 
  background:rgba(0,0,0,.55);
}
.tile.video .inline-play::before{
  content:""; position:absolute; inset:0; margin:auto;
  border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent #fff;
  left:15px; top:10px;
}

/* Quando tocando inline, o card vira um player 16:9 */
.tile.video.playing img{ display:none }
.tile.video .inline-viewport{ position:relative; padding-top:56.25%; border-radius:16px; overflow:hidden }
.tile.video .inline-viewport iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }


/* ===== Vídeo: hover preview sem ícone; modal grande já feita ===== */

/* some o “playzinho” antigo */
.tile.video .inline-play{ display:none !important }

/* viewport do preview (iframe) sobre a thumb */
.tile.video{ position:relative }
.tile.video .preview-viewport{
  position:absolute; inset:0; border-radius:16px; overflow:hidden; z-index:2;
}
.tile.video.previewing img{ opacity:0 }
.tile.video img{ transition:opacity .2s ease }

/* Click passa pelo preview para o <a.open-modal> abrir a modal */
.tile.video .preview-viewport{ pointer-events:none }

/* ===== Modal de vídeo grande, centralizada e com close redondo ===== */

/* caixa da modal: 90% no desktop, 95% no mobile */
.modal-box.dark{
  width:min(90vw, 1400px) !important;
  max-height:90vh !important;
  margin:0 auto;                 /* centraliza horizontalmente */
  position:relative;             /* para posicionar o X */
}
@media (max-width:820px){
  .modal-box.dark{
    width:95vw !important;
    max-height:95vh !important;
  }
}

/* centraliza o vídeo dentro da modal */
.modal-box .iframe-16by9{
  max-width:1280px;              /* limite de largura do player */
  margin:0 auto;                 /* centraliza o bloco do player */
}

/* botão fechar redondo no canto superior direito (quase “saindo”) */
.modal-close{
  position:absolute !important;
  top:-14px; right:-14px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(2px);
}

/* garante que a modal toda esteja centrada na tela */
.modal{ display:grid; place-items:center }

/* ===== Modal de vídeo: 90% da página (L/H), sem barra horizontal ===== */
.modal{ display:grid; place-items:center; overflow:hidden } /* sem scroll lateral no overlay */

.modal-box.dark{
  width:90vw !important;            /* 90% largura */
  max-width:90vw !important;
  max-height:90vh !important;        /* 90% altura */
  overflow:auto;                     /* só scroll vertical quando precisar */
  box-sizing:border-box;
  margin:0 auto;
  position:relative;
}
@media (max-width:820px){
  .modal-box.dark{
    width:95vw !important;
    max-width:95vw !important;
    max-height:95vh !important;
  }
}

/* Player centralizado e 100% da largura da caixa */
.modal-box.dark .iframe-16by9{ max-width:none !important; width:100% !important; margin:0 auto }
.modal-box.dark .iframe-16by9 iframe{ width:100% !important; height:100% !important; }

/* Botões de navegação (prev/next) dentro da modal */
.modal-nav{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; padding:8px;
}
.modal-arrow{
  pointer-events:auto; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff;
  width:42px;height:42px;border-radius:50%; display:grid; place-items:center;
}
@media (max-width:820px){
  .modal-nav{ inset:auto 0 10px 0; justify-content:center; gap:10px }
}
/* ===== Modal de vídeo — overlay preto .75, sem cantos, 90% da tela ===== */
/* Overlay preto 0.75, sem corte lateral e z-index alto */
.modal{
  display:grid; place-items:center;
  background:rgba(0,0,0,.75) !important;
  overflow:visible;                 /* deixa as setas ficarem fora */
  z-index:10000;
}

/* Caixa 90% (95% mobile) e SEM scroll horizontal */
.modal-box.dark{
  background:#000 !important;
  border:none !important; border-radius:0 !important;
  width:90vw !important; max-width:90vw !important;
  max-height:90vh !important; height:auto;
  padding:24px 30px 30px;           /* 30px “na volta” do vídeo */
  box-sizing:border-box;
  overflow:hidden;                  /* remove barra horizontal */
  position:relative; margin:0 auto;
}
@media (max-width:820px){
  .modal-box.dark{
    width:95vw !important; max-width:95vw !important; max-height:95vh !important;
    padding:18px 20px 20px;
  }
}


/* Botão fechar (z-index alto) — “quase saindo” no canto */
.modal-close{
  position:absolute !important; top:-18px; right:-18px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12);
  color:#fff; backdrop-filter:blur(2px); z-index:3;
}

/* Chevrons FORA da caixa (visualmente) */
.modal-nav{ position:absolute; inset:0; pointer-events:none }
.modal-arrow{
  pointer-events:auto; background:transparent; border:0; width:32px; height:32px;
  position:absolute; top:50%; transform:translateY(-50%);
}
/* desenha o chevron com bordas (sem bolinha) */
.modal-arrow::before{
  content:""; display:block; width:18px; height:18px; border-right:3px solid #fff; border-bottom:3px solid #fff;
  transform:rotate(-45deg); margin:auto;
}
.modal-arrow.prev{ left:-28px }   /* “fora” visualmente */
.modal-arrow.next{ right:-28px; transform:translateY(-50%) rotate(180deg) } /* vira para a direita */

@media (max-width:820px){
  .modal-arrow{ top:auto; bottom:-26px; transform:none } /* chevrons embaixo no mobile */
  .modal-arrow.next{ right:calc(50% - 20px); transform:rotate(180deg) }
  .modal-arrow.prev{ left:calc(50% - 20px) }
}


/* Título colado ao vídeo */
.modal-box.dark .video-title{
  color:#fff; font-weight:800; font-size:1.05rem;
  margin:0 0 8px 0;                /* cola no player */
}

/* Player 16:9 ocupando a largura interna */
.modal-box.dark .iframe-16by9{ width:100%; aspect-ratio:16/9; position:relative; }
.modal-box.dark .iframe-16by9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Close acima de tudo */
.modal-close{
  position:absolute !important; top:-18px; right:-18px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12);
  color:#fff; backdrop-filter:blur(2px);
  z-index:10001;                    /* garante sobre a caixa e setas */
}

/* Chevrons fora da caixa, clicáveis */
.modal-nav{
  position:absolute; left:0; right:0; top:0; bottom:0;
  pointer-events:none; z-index:10002;        /* acima da caixa */
}
.modal-arrow{
  pointer-events:auto; background:transparent; border:0;
  width:32px; height:32px; position:absolute; top:50%;
  transform:translateY(-50%); cursor:pointer;
}
.modal-arrow::before{
  content:""; display:block; width:18px; height:18px;
  border-right:3px solid #fff; border-bottom:3px solid #fff;
  margin:auto;
}
.modal-arrow.prev{ left:-36px }                /* fora da caixa (esq.) */
.modal-arrow.prev::before{ transform:rotate(135deg) }     /* ‹ */
.modal-arrow.next{ right:-36px }               /* fora da caixa (dir.) */
.modal-arrow.next::before{ transform:rotate(-45deg) }     /* › */

@media (max-width:820px){
  .modal-arrow{ top:auto; bottom:-28px; transform:none }
  .modal-arrow.prev{ left:calc(50% - 44px) }
  .modal-arrow.next{ right:calc(50% - 44px) }
}
/* ===== MODAL DE VÍDEO “SÓ O PLAYER” ===== */
.modal.video-only{
  display:grid; place-items:center;
  background:rgba(0,0,0,.75) !important; /* overlay */
  overflow:hidden; z-index:10000;
}

/* antes estava com width:90vw etc. */
.modal.video-only .modal-box{
  background:transparent !important;
  border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0;
  width:auto; height:auto;             /* <-- encaixa no player */
  max-width:none !important; max-height:none !important;
  overflow:hidden; position:relative;
}


/* vídeo 80% da tela (desktop) centralizado, sem margem extra */
.modal.video-only .video-fit{
  width:min(80vw, calc(80vh * 16 / 9));
  aspect-ratio:16 / 9;
}
.modal.video-only iframe{
  display:block; width:100%; height:100%; border:0;
}

/* mobile: 90% da tela */
@media (max-width:820px){
  .modal.video-only .video-fit{
    width:min(90vw, calc(90vh * 16 / 9));
  }
}

/* mobile: até 90% da tela */
@media (max-width: 820px){
  .modal.video-only .video-fit{
    width:min(90vw, calc(90vh * 16 / 9));
  }
}

.modal.video-only{
  display:grid; place-items:center;
  background:rgba(0,0,0,.75) !important;
  overflow:hidden; z-index:10000;
}

/* ==== POSTS (grade 3 colunas) ==== */
.grid.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:991px){ .grid.posts{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .grid.posts{ grid-template-columns:1fr } }

.tile.post{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px }
.tile.post h3{ color:#fff; font-weight:700; margin:0 0 8px 0; line-height:1.2 }
.tile.post .excerpt{ color:rgba(255,255,255,.85); margin:0 0 12px 0 }
.read-more{ display:inline-flex; align-items:center; gap:8px; color:#fff; opacity:.9; text-decoration:none; font-weight:600 }
.read-more span{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; border:1px solid rgba(255,255,255,.4) }

/* ==== MODAL de Post (preta, rolável) ==== */
.modal.post{ display:grid; place-items:center; background:rgba(0,0,0,.75) }
.post-box{ width:min(900px, 92vw); max-height:90vh; overflow:auto; background:#000; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:24px 22px; position:relative }
.post-content h2{ margin:0 0 12px 0; font-weight:800 }
.post-content p{ margin:0 0 12px 0; }
.modal.post .modal-close{ position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff }
/* ==== Cards de Texto (miniaturas) ==== */
.tile.post h3{
  font-size:1.35rem;         /* maior no card */
  line-height:1.15;
  font-weight:800;           /* mais “peso” no título */
}
.tile.post .excerpt{ font-size:.96rem }

/* ==== Modal de Texto ==== */
.post-box{
  /* mais “respiro”: 60 desktop / 30 mobile */
  padding:60px 60px 56px;
  overflow:auto;             /* rolagem do conteúdo preservada */
  position:relative;
}
@media (max-width:820px){
  .post-box{ padding:30px 30px 28px }
}

/* tipografia da modal */
.post-content h2{
  font-size:1.75rem;         /* título maior */
  line-height:1.15;
  font-weight:900;
  margin:0 0 14px 0;
}
.post-content p{ font-size:.97rem; line-height:1.6 } /* corpo um pouco menor */

/* botão fechar: acima de tudo, no canto superior direito da caixa */
.modal.post{ z-index:10000 }            /* overlay alto */
.modal.post .modal-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff;
  z-index:10001;                         /* por cima do conteúdo */
  backdrop-filter:blur(2px);
}
/* ===== Cards de texto: corpo menor + botão alinhado na base ===== */
.grid.posts{ align-items:stretch }              /* estica as células da linha */
.tile.post{
  display:flex; flex-direction:column;          /* coluna para “colar” o botão embaixo */
  height:100%;
}
.tile.post .excerpt{
  font-size:.90rem; line-height:1.55;           /* corpo um pouco menor (card) */
}
.tile.post .read-more{
  margin-top:auto;                               /* empurra o botão para a base */
  align-self:flex-start;                         /* mantém alinhado à esquerda */
}

/* ===== Modal de texto: corpo um pouco menor ===== */
.post-content p{ font-size:.94rem; line-height:1.65 }


/* ===== Altura padrão cross-seções (evita “achatamento”) ===== */
:root{ --tileH: 230px; }                      /* desktop padrão */
@media (max-width:1200px){ :root{ --tileH: 210px } }
@media (max-width:820px){  :root{ --tileH: 190px } }

.grid .tile{ min-height: var(--tileH); }      /* estica células */
.grid.posts{ align-items:stretch }            /* já tínhamos p/ posts */

/* Vídeos: garante área mínima de thumb */
.tile.video a{ display:block; position:relative; min-height:var(--tileH); }
.tile.video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile.video .cap{ position:absolute; left:14px; right:14px; bottom:12px; }

/* Peças (thumbs) */
.grid.pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:991px){ .grid.pieces{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid.pieces{ grid-template-columns:1fr } }

.tile.piece{ padding:0; border-radius:16px; overflow:hidden; }
.tile.piece img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== LIGHTBOX (galeria das peças) ===== */
.modal.lightbox{ display:grid; place-items:center; background:rgba(0,0,0,.85); z-index:10000 }
.lightbox-box{ background:transparent; border:0; box-shadow:none; padding:0; position:relative; }
.lightbox-img{ max-width:80vw; max-height:80vh; display:block; border-radius:16px; }

.modal.lightbox .modal-close{
  position:absolute; top:-18px; right:-18px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff; z-index:10001; backdrop-filter:blur(2px);
}

/* Chevrons */
.lightbox-nav{ position:absolute; inset:0; pointer-events:none; }
.lb{ pointer-events:auto; background:transparent; border:0; width:34px; height:34px; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; }
.lb::before{ content:""; width:18px; height:18px; display:block; border-right:3px solid #fff; border-bottom:3px solid #fff; margin:auto; }
.lb.prev{ left:-40px; }
.lb.prev::before{ transform:rotate(135deg); }
.lb.next{ right:-40px; }
.lb.next::before{ transform:rotate(-45deg); }

@media (max-width:820px){
  .lb{ top:auto; bottom:-28px; transform:none }
  .lb.prev{ left:calc(50% - 44px) }
  .lb.next{ right:calc(50% - 44px) }
}

.lightbox-count{
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:600; opacity:.8;
}

/* ==== Altura/ratio uniformes para miniaturas (Vídeos e Peças) ==== */
/* 16:9 padrão, fixo, para não “achatar” nas larguras intermediárias */
:root{ --tileH: 230px; }                 /* ajuste fino se quiser */
@media (max-width:1200px){ :root{ --tileH: 210px } }
@media (max-width:820px){  :root{ --tileH: 190px } }

/* usa o MESMO estilo de tile dos vídeos também para as peças (.media) */
.tile.video a,
.tile.media a{
  display:block; /*position:relative;*/
  border-radius:16px; overflow:hidden;
  aspect-ratio:16/9;                      /* alturas iguais */
  min-height:var(--tileH);
  background:#0b0e1a;
}
.tile.video img,
.tile.media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transform:scale(1); transition:transform .35s ease, opacity .35s ease;
}
.tile.video a:hover img,
.tile.media a:hover img{ transform:scale(1.03) }

/* legenda/capa — igual a vídeos */
.tile.video .cap,
.tile.media .cap{
  position:absolute; left:14px; right:14px; bottom:12px;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.tile.video .cap h3,
.tile.media .cap h3{
  margin:0; font-weight:800; font-size:1rem; line-height:1.15;
}

/* grade 3 colunas, igual aos vídeos */
#pecas.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:991px){ #pecas.grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ #pecas.grid{ grid-template-columns:1fr } }
/* antes tinha left/right/bottom com 14/12px */
.tile.video .cap,
.tile.media .cap{
  position:absolute;
  left:0; right:0; bottom:0;          /* cola nas laterais e base */
  padding:10px 12px;
  color:#fff;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.65) 100%
  );                                   /* degradê preenchendo a largura toda */
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.tile.video .cap h3,
.tile.media .cap h3{
  margin:0; font-weight:800; font-size:1rem; line-height:1.15;
}
/* já usamos object-fit: cover; faltava dizer explicitamente o centro */
.tile.video img,
.tile.media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;   /* <-- garante centralização real */
  display:block;
  transform:scale(1);
  transition:transform .35s ease, opacity .35s ease;
}
/* === Altura/ratio padrão já usada nos vídeos/peças === */
:root{ --tileH: 230px; }                 /* mesmo valor dos vídeos */
@media (max-width:1200px){ :root{ --tileH: 210px } }
@media (max-width:820px){  :root{ --tileH: 190px } }

/* === GRADE DOS TEXTOS (3 colunas, mesma altura por linha) === */
#textos.grid {
  display: grid;
  gap: 20px;                 /* mantém o gap entre cards */
  align-items: stretch;      /* cada linha toma a altura do maior */
}

/* Card de texto: altura automática */
.tile.post{
  height: auto;              /* <— sem altura fixa */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Título: sem clamp, sem overflow */
.tile.post h3{
  margin: 0 0 8px 0;
  font-weight: 800;
  line-height: 1.15;
  font-size: 1.35rem;
  overflow: visible;             /* <— garante que não corta */
  display: block;                /* remove -webkit-box/-line-clamp */
}

/* Corpo: sem clamp, sem overflow */
.tile.post .excerpt{
  font-size: .90rem;
  line-height: 1.55;
  margin: 0 0 12px 0;
  overflow: visible;             /* <— garante que não corta */
  display: block;                /* remove -webkit-line-clamp */
}

/* Botão sempre “colado” na base, independentemente do texto */
.tile.post .read-more{
  margin-top: auto;
  align-self: flex-start;
}
/* OVERLAY */
.modal.lightbox{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4vmin;                    /* margem respirando nas bordas */
  background: rgba(0,0,0,.85);       /* overlay */
  z-index: 10000;
  overflow: hidden;                  /* nada de barras no overlay */
}

/* BOX da imagem (sem scroll) */
.modal.lightbox .lightbox-box{
  position: relative;
  max-width: 80vw;                   /* controla o “quanto” ela cresce */
  max-height: 80vh;
  border-radius: 16px;               /* cantos arredondados iguais */
  overflow: hidden;                  /* remove barras internas */
  background: #0b0e10;               /* fundo neutro atrás da imagem */
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* IMAGEM: sempre na proporção, “contain” dentro do box */
.modal.lightbox .lightbox-img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;               /* mantém proporção sem cortar */
  border-radius: inherit;            /* cantos iguais da caixa */
}

/* Botão Fechar por cima do box */
.modal.lightbox .modal-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #000; line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(2px);
  font-size: x-large;
}

/* Chevrons fora do box (desktop) */
.modal.lightbox .lightbox-nav{ position:absolute; inset:0; pointer-events: none; }
.modal.lightbox .lb{
  pointer-events: auto;
  background: transparent; border: 0;
  width: 34px; height: 34px;
  position: absolute; top: 50%; transform: translateY(-50%);
  cursor: pointer;
}
.modal.lightbox .lb::before{
  content:""; width:18px; height:18px; display:block;
  border-right:3px solid #fff; border-bottom:3px solid #fff;
  margin:auto;
}
.modal.lightbox .lb.prev{ left: -48px; }
.modal.lightbox .lb.prev::before{ transform: rotate(135deg); }
.modal.lightbox .lb.next{ right: -48px; }
.modal.lightbox .lb.next::before{ transform: rotate(-45deg); }

/* Em mobile as setas vão para baixo, centralizadas */
@media (max-width: 820px){
  .modal.lightbox{ padding: 3vmin; }
  .modal.lightbox .lb{
    top: auto; bottom: -42px; transform: none;
  }
  .modal.lightbox .lb.prev{ left: calc(50% - 48px); }
  .modal.lightbox .lb.next{ right: calc(50% - 48px); }
}

/* === Portfólio igual ao "Quem somos" === */
#portfolio .section-head{ 
  justify-content:center !important; 
  text-align:center !important; 
}
#portfolio .section-head .muted{ display:block } /* se houver subtítulo */

#portfolio .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:22px 0 40px 0;
  border-radius:0;
}
#portfolio .card--center{ text-align:left !important; }

#portfolio .about-text{
  max-width:860px;
  margin:0 auto;
  text-align:left !important;
  line-height:1.7;
}

/* NAV: comportamento consistente em desktop */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--header-h, 96px) + 12px)}


/* === ANCORAS: SUAVIZAÇÃO GLOBAL + OFFSET DO HEADER === */
html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top: 108px } /* ajuste se seu header tiver outra altura */

/* ===================================================================== *
 * PORTFÓLIO — subtítulos explicativos acima de #textos e #pecas
 * Herda o visual do bloco introdutório do Portfólio:
 *   .about.about--onecol > .card.card--center > .about-text
 * ===================================================================== */
.portfolio-note{
  margin: 10px 0 18px;   /* respiro curto, igual ao bloco introdutório */
}
/* Nada além: tipografia/cores já vêm de .about-text e .card--center. */

/* ===================================================================== *
 * VÍDEOS — Legendas sob cada card (fora do overlay .cap)
 * Mantém o visual do tile e usa fonte “um pouco menor”.
 * ===================================================================== */
.tile.video .tile-caption{
  margin: 0;                   /* zera margens padrão do <p> */
  padding: 10px 12px 12px;     /* respiro interno do bloco de legenda */
  font-size: .85rem;           /* ~8% menor que .cap (0.92rem) */
  line-height: 1.35;           /* leitura confortável em 2–5 linhas */
  color: #cbd5e1;              /* cor já usada em textos secundários */
   background: transparent;     /* usa o fundo do próprio .tile */
}


/* === Faixa Cenp – abaixo da hero === */
.cenp-strip{
  background:#ffffff;
  padding:32px 0;
  color:#0c1729;
  border-top:1px solid rgba(15,29,51,.06);
  border-bottom:1px solid rgba(15,29,51,.06);
}

.cenp-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.cenp-logo{
  max-width:220px;   /* logo maior */
  width:100%;
  height:auto;
  display:block;
}

.cenp-seal{
  max-width:140px;   /* selo menor */
  width:100%;
  height:auto;
  display:block;
}


.cenp-text{
  flex:1;
  text-align:center;
  max-width:560px;
  margin:0 auto;
}

.cenp-title{
  margin:0 0 6px;
  font-size:clamp(20px,3vw,28px);  /* um pouco menor que o h1 da hero */
  font-weight:800;
  color:var(--bg);                 /* azul-escuro do fundo */
}

.cenp-support{
  margin:0;
  font-size:.98rem;
  line-height:1.5;
  color:#475569;
}

/* Mobile: abaixo de 767px */
@media (max-width:767px){
  .cenp-inner{
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
  .cenp-text{
    text-align:center;
  }
  /* ordem: título/linha → selo → logo Cenp */
  .cenp-seal{
    order:2;
  }
  .cenp-seal{
    margin:40px 0;     /* afasta 40px acima e abaixo */
}
  .cenp-logo{
    order:3;
  }
}

/* === Faixa CENP – antes do footer === */
.cenp-cert{
  background:#161b2a;
  padding:48px 0;
  text-align:center;
}

.cenp-cert-inner{
  text-align:center;
}

.cenp-cert-seal,
.cenp-cert-logo{
  display:block;
  margin:0 auto;
  height:auto;
}

.cenp-cert-seal{
  max-width:140px;
  margin-bottom:24px;
}

.cenp-cert-title{
  margin:0 0 8px;
  font-size:clamp(18px,2.4vw,22px);
  font-weight:800;
  opacity:.5;
}

.cenp-cert-text{
  max-width:720px;
  margin:0 auto 20px;
  font-size:.85rem;
  line-height:1.6;
  color:#e2e8f0;
  opacity:.5;
}


.cenp-cert-logo{
  max-width:220px;
}