/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --c-hero:    #0B6E4F;
  --c-problem: #1C1F26;
  --c-numbers: #9C6B00;
  --c-roadmap: #1B3A5C;
  --c-coverage:#0E6B6D;
  --c-cta:     #5B7F1E;
  --tile-green:  #1d9e75;
  --tile-blue:   #2f6fae;
  --tile-amber:  #d9a404;
  --tile-purple: #6c4fb0;
  --tile-red:    #b9272f;
  --tile-teal:   #117a7c;
  --tile-dark:   #15171c;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background:#0a0a0a; color:#fff; overflow:hidden; height:100vh;
}
button, input, textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.logo {
  position:fixed; top:18px; left:32px;
  z-index:100; display:flex; align-items:center;
}
.logo img { height:34px; width:auto; display:block; }

/* ── Site nav ──────────────────────────────────────────────────────────────── */
.site-nav {
  position:fixed; top:26px; left:50%; transform:translateX(-50%);
  z-index:100; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
}
.site-nav-link {
  font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:.9;
  padding:8px 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  transition:all .2s;
}
.site-nav-link:hover { background:rgba(255,255,255,.14); }

/* ── Top social (canto superior direito) ───────────────────────────────────── */
.top-social {
  position:fixed; top:22px; right:32px;
  display:flex; align-items:center; gap:6px; z-index:100;
}
.top-social-link {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:#fff; transition:background .2s, opacity .2s; opacity:.8;
}
.top-social-link:hover { background:rgba(255,255,255,.18); opacity:1; }
.top-social-link svg { width:15px; height:15px; }

/* ── Minimap ───────────────────────────────────────────────────────────────── */
/* Célula central do d-pad (linha do meio, coluna do meio)                     */
.minimap {
  position:fixed;
  bottom: calc(var(--dp-bottom) + var(--dp-size) + var(--dp-gap) + 2px);
  right:  calc(var(--dp-right) + var(--dp-size) + var(--dp-gap));
  width:  var(--dp-size);
  display:grid; gap:4px; z-index:101;
  align-content:center; justify-content:center;
  pointer-events:none;
}
.minimap div { pointer-events:all; }
.minimap div { background:rgba(255,255,255,.28); cursor:pointer; transition:background .25s, transform .25s; }
.minimap div.active { background:#fff; transform:scale(1.35); }

/* ── Panel counter ─────────────────────────────────────────────────────────── */
.panel-counter {
  position:fixed; bottom:28px; left:32px; font-size:11px;
  letter-spacing:2px; opacity:.55; z-index:100; text-transform:uppercase;
}

/* ── D-pad cluster (bottom-left) ───────────────────────────────────────────── */
/*  Layout:       [  ↑  ]
                  [←][·][→]    (· = espaço central, reservado para minimap row)
                  [  ↓  ]
    O cluster fica a bottom:28px left:32px, mas as setas são posicionadas
    em relação ao viewport e alinhadas entre si usando uma âncora comum.    */

/* Âncora do d-pad: canto inferior-esquerdo                                    */
:root { --dp-right:32px; --dp-bottom:28px; --dp-size:38px; --dp-gap:4px; }

.edge-nav {
  position:fixed;
  width:var(--dp-size); height:var(--dp-size);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer; z-index:102;
  transition:background .2s, opacity .3s, border-color .2s;
  border:none; opacity:0;
}
.edge-nav:not(.hidden):hover { background:rgba(255,255,255,.22); opacity:1 !important; border-color:rgba(255,255,255,.35); }
.edge-nav svg { width:14px; height:14px; }

/* Posições calculadas a partir do canto inferior-esquerdo                     */
/* ↓  — linha 1 (mais baixo), coluna central                                  */
.edge-nav.down  {
  bottom: calc(var(--dp-bottom));
  right:  calc(var(--dp-right) + var(--dp-size) + var(--dp-gap));
  left: auto;
}
/* ← — linha 2 (meio), coluna 3 (mais à direita)                              */
.edge-nav.left  {
  bottom: calc(var(--dp-bottom) + var(--dp-size) + var(--dp-gap));
  right:  var(--dp-right);
  left: auto;
}
/* → — linha 2 (meio), coluna 1 (mais à esquerda do cluster)                  */
.edge-nav.right {
  bottom: calc(var(--dp-bottom) + var(--dp-size) + var(--dp-gap));
  right:  calc(var(--dp-right) + (var(--dp-size) + var(--dp-gap)) * 2);
  left: auto;
}
/* ↑  — linha 3 (topo), coluna central                                        */
.edge-nav.up    {
  bottom: calc(var(--dp-bottom) + (var(--dp-size) + var(--dp-gap)) * 2);
  right:  calc(var(--dp-right) + var(--dp-size) + var(--dp-gap));
  left: auto;
}
/* Remover transforms anteriores                                               */
.edge-nav.up, .edge-nav.down, .edge-nav.left, .edge-nav.right { transform:none; }

.edge-nav.hidden { opacity:0 !important; pointer-events:none; }

/* Mostrar levemente (não zero) quando o cursor está perto do cluster ──────── */
.edge-nav:not(.hidden) { opacity:.35; }

/* ── Chat toggle button (centro direito) ───────────────────────────────────── */
.chat-btn {
  position:fixed; right:0; left:auto; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-right:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:100; color:#fff;
  opacity:.3; transition:opacity .3s, background .2s, transform .2s;
  border-radius:6px 0 0 6px;
}
.chat-btn:hover {
  opacity:1;
  background:rgba(255,255,255,.18);
  transform:translateY(-50%) translateX(-3px);
}
.chat-btn svg { width:18px; height:18px; }

/* Painel de chat — desliza da direita para dentro ───────────────────────── */
.chat-panel {
  position:fixed; right:-340px; left:auto; top:50%; transform:translateY(-50%);
  width:320px; max-height:480px;
  background:#111; border:1px solid rgba(255,255,255,.15);
  border-radius:8px 0 0 8px;
  display:flex; flex-direction:column;
  z-index:200; transition:right .35s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.chat-panel.open { right:0; }

.chat-panel-header {
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:700; letter-spacing:.5px;
}
.chat-panel-close {
  background:none; border:none; color:rgba(255,255,255,.5);
  cursor:pointer; font-size:20px; line-height:1; padding:0 2px;
  transition:color .2s;
}
.chat-panel-close:hover { color:#fff; }

.chat-messages {
  flex:1; overflow-y:auto; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.chat-msg {
  font-size:13px; line-height:1.5; padding:9px 12px;
  border-radius:4px; max-width:85%;
}
.chat-msg.bot  { background:rgba(255,255,255,.08); align-self:flex-start; }
.chat-msg.user { background:rgba(93,202,165,.2); align-self:flex-end; text-align:right; }

.chat-input-row {
  padding:10px 12px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; gap:8px;
}
.chat-input-row input {
  flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; padding:8px 12px; font-size:13px; border-radius:3px;
}
.chat-input-row input:focus { outline:none; border-color:rgba(255,255,255,.4); }
.chat-input-row input::placeholder { color:rgba(255,255,255,.35); }
.chat-send {
  background:rgba(93,202,165,.25); border:1px solid rgba(93,202,165,.4);
  color:#5dcaa5; padding:8px 14px; font-size:12px; font-weight:700;
  cursor:pointer; border-radius:3px; transition:background .2s;
}
.chat-send:hover { background:rgba(93,202,165,.4); }
#canvas2d {
  display:grid;
  transition:transform .85s cubic-bezier(.77,0,.175,1);
  will-change:transform;
}

.panel {
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.panel-inner {
  text-align:center; z-index:2;
  opacity:0; transform:translateY(46px);
  transition:opacity .7s ease .15s, transform .7s cubic-bezier(.22,1,.36,1) .15s;
  padding:1.5rem 2rem; max-width:960px; width:100%;
  max-height:94vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.panel.active .panel-inner { opacity:1; transform:translateY(0); }

/* ── Typography helpers ────────────────────────────────────────────────────── */
.panel-eyebrow {
  font-size:11px; letter-spacing:5px; text-transform:uppercase;
  opacity:.75; font-weight:600;
}
.panel-title {
  font-weight:200; font-size:clamp(1.8rem, 4.5vw, 3.6rem);
  line-height:1.08; letter-spacing:-.5px;
}
.panel-title b { font-weight:700; }
.panel-sub {
  font-size:.97rem; line-height:1.7; opacity:.82;
  max-width:540px; font-weight:300;
}
.hl {
  background:rgba(255,255,255,.16); padding:0 10px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; font-weight:700;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:14px 36px; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; border:none; cursor:pointer;
  transition:transform .15s, filter .15s;
}
.btn:hover   { filter:brightness(1.12); }
.btn:active  { transform:scale(.96); }
.btn-primary { background:#fff; color:#111; }
.btn-outline, .btn.outline {
  background:transparent; border:2px solid rgba(255,255,255,.65); color:#fff;
}
.btn-light { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn:focus-visible, .tile:focus-visible,
.edge-nav:focus-visible, .minimap div:focus-visible {
  outline:2px solid #fff; outline-offset:3px;
}

/* ── Tile grid ─────────────────────────────────────────────────────────────── */
.tile-grid {
  display:grid; gap:3px; width:100%;
}
.tiles-three { grid-template-columns:repeat(3, 1fr); }
.tiles-four  { grid-template-columns:repeat(4, 1fr); }
.tiles-two   { grid-template-columns:repeat(2, 1fr); }

.tile {
  background:var(--tile-color, #2a2a2a);
  padding:18px; min-height:100px;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-align:left; overflow:hidden;
  transition:transform .15s ease, filter .15s ease;
  cursor:default;
}
.tile:hover { filter:brightness(1.08); }
.tile-ico   { font-size:26px; margin-bottom:auto; line-height:1; }
.tile-label { font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; }
.tile-sub   { font-size:11.5px; opacity:.85; margin-top:5px; font-weight:400; line-height:1.5; }
.tile-n     { font-size:2rem; font-weight:700; line-height:1; margin-bottom:6px; }

/* ── Flip tiles ────────────────────────────────────────────────────────────── */
.tile.flip { perspective:1000px; }
.tile.flip .tile-inner {
  position:relative; width:100%; height:100%; min-height:110px;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.tile.flip.flipped .tile-inner { transform:rotateY(180deg); }
.tile-face {
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px; text-align:left;
}
.tile-face.back { transform:rotateY(180deg); }

/* ── Pills ─────────────────────────────────────────────────────────────────── */
.pill-row {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.pill {
  padding:6px 16px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); white-space:nowrap;
}

/* ── Timeline ──────────────────────────────────────────────────────────────── */
.timeline {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; width:100%;
}
.timeline-item {
  display:flex; flex-direction:column; gap:0;
}
.timeline-year {
  font-size:22px; font-weight:700; opacity:.55; padding:10px 14px 6px;
  background:rgba(255,255,255,.06);
}
.timeline-card {
  flex:1; background:rgba(255,255,255,.08); padding:14px;
  display:flex; flex-direction:column; gap:6px;
}
.timeline-card .tile-sub { font-size:11px; }

/* ── Coverage meter ────────────────────────────────────────────────────────── */
.meter {
  height:4px; background:rgba(255,255,255,.2); margin-top:10px; overflow:hidden;
}
.meter div { height:100%; background:#fff; }

/* ── About grid ────────────────────────────────────────────────────────────── */
.about-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:100%;
}
.about-card {
  background:rgba(255,255,255,.09); padding:18px;
  display:flex; flex-direction:column; gap:6px;
}

/* ── Portfolio grid ────────────────────────────────────────────────────────── */
.portfolio-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; width:100%;
}
.project-card {
  background:rgba(255,255,255,.09); border:none; color:#fff;
  padding:22px 18px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:8px;
  transition:background .2s, transform .15s;
}
.project-card:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.project-card-top  { font-size:10px; letter-spacing:2px; text-transform:uppercase; opacity:.6; }
.project-card-title{ font-weight:700; font-size:15px; }
.project-card-text { font-size:12px; opacity:.8; line-height:1.5; }

/* ── News grid ─────────────────────────────────────────────────────────────── */
.news-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; width:100%;
}
.news-card {
  background:rgba(255,255,255,.07); padding:20px 18px;
  display:flex; flex-direction:column; gap:8px;
}
.news-label {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  opacity:.6; font-weight:700;
}
.news-card h3 { font-size:14px; font-weight:700; line-height:1.4; }
.news-card p  { font-size:12px; opacity:.75; line-height:1.5; }
.news-card a  { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; opacity:.8; margin-top:auto; }
.news-card a:hover { opacity:1; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq-list {
  display:flex; flex-direction:column; gap:3px; width:100%;
}
.faq-item {
  background:rgba(255,255,255,.08); padding:16px 20px;
  display:flex; flex-direction:column; gap:6px; text-align:left;
}

/* ── CTA grid ──────────────────────────────────────────────────────────────── */
.cta-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:4px; width:100%; max-width:600px;
}
.tile-cta {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:14px; font-weight:700; padding:24px 20px; text-align:center;
  cursor:pointer; transition:background .2s;
}
.tile-cta:hover { background:rgba(255,255,255,.25); }
.tile-cta-muted { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); }

.panel-foot {
  font-size:12px; opacity:.6; letter-spacing:.5px;
}

/* ── Contact form ──────────────────────────────────────────────────────────── */
.contact-form {
  display:flex; flex-direction:column; gap:12px; width:100%; max-width:600px; text-align:left;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field    { display:flex; flex-direction:column; gap:4px; }
.field span { font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.7; font-weight:600; }
.field input, .field textarea {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  padding:10px 14px; font-size:14px; resize:vertical;
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:rgba(255,255,255,.5);
}
.error         { font-size:11px; color:#ff8080; min-height:14px; display:block; }
.error-input   { border-color:#ff6b6b !important; }
.form-status   { font-size:13px; opacity:.85; min-height:18px; }

.social-links { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.social-link  {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; opacity: .75;
  transition: opacity .2s, background .2s;
}
.social-link svg { width: 20px; height: 20px; }
.social-link:hover { opacity:1; background:rgba(255,255,255,.1); }


/* ── Floating bits ─────────────────────────────────────────────────────────── */
.bit {
  position:absolute; opacity:0;
  animation:driftUp linear infinite; pointer-events:none;
}
@keyframes driftUp {
  0%   { transform:translateY(110vh) rotate(0deg);  opacity:0; }
  8%   { opacity:.5; }
  92%  { opacity:.35; }
  100% { transform:translateY(-10vh) rotate(90deg); opacity:0; }
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.84);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:200;
}
.modal.active    { display:flex; }
.modal-content   {
  width:min(900px,100%); background:#111; position:relative;
  padding:18px; border:1px solid rgba(255,255,255,.14);
}
.modal-close     {
  position:absolute; top:10px; right:12px; background:transparent;
  border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer;
}
.modal-title     { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
#gallery-main    {
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#222; margin-bottom:12px;
}
.gallery-thumbs  { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.gallery-thumb   { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; border:2px solid transparent; background:#222; }
.gallery-thumb.active { border-color:#fff; }

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bit { display:none; }
  .panel-inner, .tile.flip .tile-inner { transition-duration:.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 760 px)
   As dimensões do canvas e painéis são aplicadas via JS (window.innerWidth /
   innerHeight em px reais). O CSS aqui trata apenas de layout de componentes.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── Tablet intermédio (761–960px) — tiles passam a 2 colunas ─────────────── */
@media (min-width:761px) and (max-width:960px) {
  .tiles-four  { grid-template-columns: repeat(2,1fr); }
  .panel-title { font-size: clamp(1.6rem, 3.8vw, 2.8rem); }
  .panel-inner { padding: 1rem 1.5rem; gap: .75rem; }
  .timeline    { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:760px) {

  /* ── Ocultar controlos de canvas e elementos desktop ────────────────────── */
  .minimap, .panel-counter, .edge-nav,
  .chat-btn, .chat-panel, .top-social { display:none !important; }

  /* Contact form social links — hidden on mobile */
  .social-links { display: none; }

  /* ══════════════════════════════════════════════════════════════════════════
     BARRA DE TOPO — logo à esquerda, hambúrguer à direita
     Altura fixa: 48px. Funciona com qualquer número de itens de nav.
     ══════════════════════════════════════════════════════════════════════════ */

  .logo {
    position: fixed;
    top: 0; left: 0;
    height: 48px;
    margin: 0; padding: 0 14px;
    display: flex; align-items: center; gap: 8px;
    background: transparent;
    z-index: 300;
  }
  .logo img { height: 24px; }

  /* Nav desktop fica escondida — o drawer substitui-a */
  .site-nav { display: none; }

  /* ── Botão hambúrguer (injectado por nav-mobile.js) ─────────────────────── */
  .nav-burger {
    position: fixed;
    top: 0; right: 0;
    width: 48px; height: 48px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    background: transparent;
    border: none; cursor: pointer; z-index: 300;
    padding: 0;
  }
  .nav-burger span {
    display: block;
    width: 20px; height: 2px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }
  /* Estado aberto — transforma em × */
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Barra de topo — totalmente transparente ────────────────────────────── */
  .nav-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    background: transparent;
    border-bottom: none;
    z-index: 299;
  }

  /* ── Drawer — preto sólido, fullscreen abaixo da topbar ─────────────────── */
  .nav-drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    display: flex; flex-direction: column;
    justify-content: center;
    z-index: 297;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .nav-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-drawer .site-nav-link {
    display: block;
    padding: 20px 32px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: #fff;
    transition: background .15s, padding-left .2s;
  }
  .nav-drawer .site-nav-link:first-child { margin-top: 48px; }
  .nav-drawer .site-nav-link:last-child { border-bottom: none; }
  .nav-drawer .site-nav-link:hover { background: rgba(255,255,255,.05); padding-left: 40px; }

  /* Social icons row inside drawer */
  .drawer-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: auto;
  }
  .drawer-social .top-social-link {
    opacity: .75;
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.15);
  }
  .drawer-social .top-social-link:hover { opacity: 1; background: rgba(255,255,255,.08); }
  .drawer-social .top-social-link svg { width: 20px; height: 20px; }

  /* ══════════════════════════════════════════════════════════════════════════
     CANVAS E PAINÉIS
     ══════════════════════════════════════════════════════════════════════════ */

  #canvas2d { transition: transform .85s cubic-bezier(.77,0,.175,1); }

  .panel-inner {
    max-width: none;
    padding: 64px 18px 24px;
    gap: .85rem;
    align-items: flex-start;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .panel-inner::-webkit-scrollbar { display: none; }

  /* ── Tipografia ──────────────────────────────────────────────────────────── */
  .panel-title   { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.12; }
  .panel-sub     { font-size: .86rem; max-width: 100%; }
  .panel-eyebrow { font-size: 10px; letter-spacing: 4px; }

  /* ── Tiles ───────────────────────────────────────────────────────────────── */
  .tile-grid,
  .tiles-three,
  .tiles-four    { grid-template-columns: repeat(2,1fr); gap: 3px; }
  .tiles-two     { grid-template-columns: 1fr; }
  .tile          { min-height: 86px; }
  .tile.flip .tile-inner { min-height: 100px; }

  /* ── Timeline ────────────────────────────────────────────────────────────── */
  .timeline      { grid-template-columns: 1fr 1fr; gap: 3px; }
  .timeline-year { font-size: 16px; }

  /* ── About ───────────────────────────────────────────────────────────────── */
  .about-grid { grid-template-columns: 1fr 1fr; gap: 3px; }
  .about-card { padding: 12px; }

  /* ── Portfolio ───────────────────────────────────────────────────────────── */
  .portfolio-grid { grid-template-columns: 1fr; gap: 3px; }

  /* ── Notícias — 1 coluna em mobile ──────────────────────────────────────── */
  .news-grid,
  .news-panel-grid { grid-template-columns: 1fr; gap: 3px; }

  /* ── CTA ─────────────────────────────────────────────────────────────────── */
  .cta-grid  { grid-template-columns: 1fr; max-width: 100%; }
  .tile-cta  { padding: 18px 16px; }

  /* ── Formulário ──────────────────────────────────────────────────────────── */
  .contact-form { max-width: 100%; }
  .form-row     { grid-template-columns: 1fr; }
  .field input,
  .field textarea { font-size: 16px; } /* evita zoom iOS */

  /* buttons */
  .btn { padding: 12px 24px; font-size: 12px; }

  /* ── Modal ───────────────────────────────────────────────────────────────── */
  .modal          { padding: 0; align-items: flex-end; }
  .modal-content  { width: 100%; max-height: 88dvh; overflow-y: auto; padding: 16px; }
  .gallery-thumbs { grid-template-columns: repeat(3,1fr); }

  /* ── Bits — desactivar (performance) ────────────────────────────────────── */
  .bit { display: none; }
}

/* ── Lang switcher ────────────────────────────────────────────────────────── */
.lang-switcher {
  position: fixed;
  top: 50%;
  right: calc(var(--social-right, 48px) + 8px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 150;
}

.lang-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 7px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  line-height: 1;
}

.lang-btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.lang-btn.active,
.lang-btn[aria-pressed="true"] {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

@media (max-width: 760px) {
  .lang-switcher {
    position: fixed;
    top: 0;
    right: 48px;
    transform: none;
    flex-direction: row;
    height: 48px;
    align-items: center;
    gap: 2px;
    z-index: 300;
    background: transparent;
    padding: 0 8px;
    border-bottom: none;
  }
  .lang-btn {
    padding: 4px 6px;
    font-size: 9px;
  }
}

/* ── Tall-content panel (e.g. Contact form) ─────────────────────────────────
   Some panels (forms, long lists) exceed the vertical space available when
   centred. .panel-tall switches the panel to top-aligned scrolling content,
   with enough top padding to clear the fixed nav/logo bar. ───────────────── */
.panel-tall {
  align-items: flex-start;
}
.panel-tall .panel-inner {
  justify-content: flex-start;
  padding-top: calc(64px + 1.5rem);
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-tall .panel-inner::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  .panel-tall .panel-inner {
    padding-top: 64px;
  }
}