/* ============================================================
     Maite Media PT — conceito 03 "Sala Escura"
     Black & Red recuperado, mas com respiro: blocos claros
     alternam com os escuros. O vermelho brilha, não preenche.
     ============================================================ */
  /* Fallbacks metricamente ajustados (size-adjust + overrides) para as fontes do Google Fonts.
   Valores medidos contra Arial: o swap Epilogue/Manrope nao desloca o layout (CLS). */
@font-face { font-family: "Epilogue Fallback"; font-weight: 500 800; font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 106%; ascent-override: 74.5%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 400 500; font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 101.8%; ascent-override: 104.7%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 600 800; font-style: normal;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 98.2%; ascent-override: 108.6%; descent-override: 30.5%; line-gap-override: 0%; }
:root {
    interpolate-size: allow-keywords;
    --void:    #0a0b0d;
    --pit:     #101215;
    --panel:   #16191d;
    --panel-2: #1c2026;
    --edge:    #262b32;
    --edge-hi: rgba(255,255,255,0.10);

    --paper:   #f3f2f0;
    --paper-2: #ffffff;
    --paper-line: #ddd8d6;

    --bone:    #edecea;
    --mist:    #a6acb4;
    --dim:     #868d96;

    --red:     #cc1010;
    --red-lit: #ff2e22;
    --red-glow: rgba(204,16,16,0.40);

    --f-display: "Epilogue", "Epilogue Fallback", Georgia, system-ui, sans-serif;
    --f-body:    "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gutter: clamp(1rem, 5vw, 4.5rem);
    --rhythm: clamp(2.75rem, 6vw, 5.5rem);
  }
  :root:not([data-theme="light"]) { color-scheme: dark; }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--void);
    color: var(--bone);
    font-family: var(--f-body);
    font-size: 16px; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
  p { margin: 0; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  :focus-visible { outline: 2px solid var(--red-lit); outline-offset: 3px; }

  .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

  .label { font-size: 0.71rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dim); }
  .label--red { color: var(--red-lit); }

  .btn {
    font-family: var(--f-body); font-weight: 600; font-size: 0.9rem;
    padding: 0.72rem 1.4rem; text-decoration: none; display: inline-block;
    border: 1px solid transparent; border-radius: 3px;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 200ms ease, transform 120ms ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn--red { background: var(--red); color: #fff; box-shadow: 0 0 0 rgba(204,16,16,0); }
  .btn--red:hover { background: var(--red-lit); box-shadow: 0 6px 26px var(--red-glow); }
  .btn--wire { border-color: #3c424a; color: var(--bone); }
  .btn--wire:hover { border-color: var(--bone); }
  .btn--ink { border-color: #2a2d31; color: #17191c; }
  .btn--ink:hover { background: #17191c; color: var(--paper); }

  /* ══ Header com navegação real (sitemap), não só âncoras ══ */
  /* o vidro é uma camada própria: assim o blur pode desvanecer-se para baixo
     com uma máscara, e o texto atravessa o vidro em vez de bater nele */
  .hdr {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 80;
    background: transparent;
  }
  /* o vidro estende-se 58px abaixo da barra: a dissolução acontece FORA do
     header, que é o que faz o limite desaparecer em vez de se notar o corte */
  .hdr__glass { position: absolute; left: 0; right: 0; top: 0; bottom: -58px; pointer-events: none; }
  /* tinta: escura onde vivem os links, quase limpa na borda de baixo.
     O stop fica em 80% porque o texto desce até aí — abaixo disso o
     contraste já não tem de aguentar nada. */
  .hdr__tint {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      rgba(10,11,13,0.76) 0%,
      rgba(10,11,13,0.72) 50%,
      rgba(10,11,13,0.34) 66%,
      rgba(10,11,13,0.10) 80%,
      rgba(10,11,13,0) 100%);
  }
  @supports (backdrop-filter: blur(1px)) {
    .hdr__tint {
      background: linear-gradient(to bottom,
        rgba(10,11,13,0.72) 0%,
        rgba(10,11,13,0.68) 50%,
        rgba(10,11,13,0.28) 66%,
        rgba(10,11,13,0.08) 80%,
        rgba(10,11,13,0) 100%);
    }
    /* Rampa de desfoque progressivo: cinco camadas, cada uma com o dobro do
       raio da anterior e uma máscara que termina mais acima. Onde se sobrepõem
       os desfoques somam-se, e o resultado é um gradiente contínuo em vez de
       um único blur com um corte. É o que faz o conteúdo dissolver-se ao subir
       em vez de bater numa placa. */
    .hdr__blur { position: absolute; inset: 0; display: block; }
    .hdr__blur:nth-of-type(1) {
      backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    }
    .hdr__blur:nth-of-type(2) {
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 90%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 90%);
    }
    .hdr__blur:nth-of-type(3) {
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 74%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 74%);
    }
    .hdr__blur:nth-of-type(4) {
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 58%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 58%);
    }
    .hdr__blur:nth-of-type(5) {
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 40%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 40%);
    }
  }
  /* Deformação de vidro na faixa onde a barra toca o conteúdo: é aí que uma
     lente distorce, nunca no centro. Se o motor não aceitar url() em
     backdrop-filter a camada não pinta e o resto do vidro fica igual. */
  .hdr__warp {
    position: absolute; inset: 0;
    backdrop-filter: url(#mm-glass);
    -webkit-backdrop-filter: url(#mm-glass);
    -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 56%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 30%, #000 56%, #000 82%, transparent 100%);
  }
  /* Seis camadas de backdrop-filter refiltram a cada frame de scroll. Em ecrãs
     pequenos corta-se a rampa às três mais largas e dispensa-se a dispersão:
     o degradê mantém-se, o custo por frame cai para metade. */
  @media (max-width: 899px) {
    .hdr__blur:nth-of-type(1),
    .hdr__blur:nth-of-type(3) { display: none; }
    .hdr__warp { display: none; }
  }
  .hdr__in { position: relative; z-index: 1; }
  .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-block: 0.8rem; }
  .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
  .brand img { width: 42px; height: 42px; flex: none; }
  .brand b { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.12; }
  .brand span { display: block; font-family: var(--f-body); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mist); }

  .mainnav { display: none; align-items: center; gap: 1.5rem; font-size: 0.89rem; font-weight: 500; }
  @media (min-width: 1000px) { .mainnav { display: flex; } }
  .mainnav > * > a, .mainnav > a { text-decoration: none; color: var(--bone); transition: color 130ms ease; white-space: nowrap; }
  .mainnav a:hover { color: var(--bone); }

  .drop { position: relative; }
  .drop__btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; font: inherit; color: var(--bone); cursor: pointer; padding: 0.4rem 0; }
  .drop__btn:hover, .drop[data-open="true"] .drop__btn { color: var(--bone); }
  .drop__btn svg { transition: transform 180ms ease; }
  .drop[data-open="true"] .drop__btn svg { transform: rotate(180deg); }
  .drop__panel {
    position: absolute; top: calc(100% + 0.55rem); left: -1rem; min-width: 310px;
    transform-origin: top center;
    /* estado fechado: visibility é animável e, ao contrário de [hidden],
       não traz display:none !important a matar a transição. Também tira o
       painel da ordem de tabulação e do leitor de ecrã. */
    opacity: 0; visibility: hidden;
    transform: translateY(-10px) scale(0.985);
    transition:
      opacity 200ms ease,
      transform 300ms cubic-bezier(.16, 1, .3, 1),
      visibility 0s linear 300ms;
    background: rgba(18,20,24,0.94); border: 1px solid var(--edge); border-radius: 6px;
    padding: 0.5rem; display: grid; gap: 1px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  }
  @supports (backdrop-filter: blur(1px)) { .drop__panel { background: rgba(18,20,24,0.78); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); } }
  .drop[data-open="true"] .drop__panel {
    opacity: 1; visibility: visible; transform: none;
    transition:
      opacity 220ms ease,
      transform 420ms cubic-bezier(.16, 1, .3, 1),
      visibility 0s;
  }
  /* cada item entra um instante depois do anterior: é a cascata que faz a
     abertura ler-se como um gesto e não como um bloco que aparece */
  .drop__panel a {
    opacity: 0; transform: translateY(-7px);
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1), background 120ms ease, color 120ms ease;
  }
  .drop[data-open="true"] .drop__panel a { opacity: 1; transform: none; }
  .drop[data-open="true"] .drop__panel a:nth-child(1) { transition-delay: 40ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(2) { transition-delay: 68ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(3) { transition-delay: 96ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(4) { transition-delay: 124ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(5) { transition-delay: 152ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(6) { transition-delay: 180ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(7) { transition-delay: 208ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(8) { transition-delay: 236ms; }
  .drop[data-open="true"] .drop__panel a:nth-child(9) { transition-delay: 264ms; }
  .drop__panel a { display: block; padding: 0.55rem 0.8rem; border-radius: 4px; font-size: 0.87rem; color: var(--mist); text-decoration: none; }
  .drop__panel a:hover { background: rgba(255,255,255,0.05); color: var(--bone); }

  /* ══ Hero ══ */
  .hero { position: relative; overflow: hidden; background: var(--void); }
  .hero__bg { position: absolute; inset: 0; }
  /* a imagem já traz o preto à esquerda; o enquadramento mantém a câmera à vista */
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
  @media (min-width: 900px) { .hero__bg img { object-position: 62% center; } }
  .hero__scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(10,11,13,0.90) 0%, rgba(10,11,13,0.78) 38%, rgba(10,11,13,0.34) 70%, rgba(10,11,13,0.52) 100%),
      linear-gradient(0deg, rgba(10,11,13,0.88) 0%, transparent 52%);
  }
  @media (min-width: 900px) {
    .hero__scrim {
      background:
        linear-gradient(90deg, rgba(10,11,13,0.72) 0%, rgba(10,11,13,0.58) 34%, rgba(10,11,13,0.12) 64%, rgba(10,11,13,0.40) 100%),
        linear-gradient(0deg, rgba(10,11,13,0.72) 0%, transparent 46%);
    }
  }
  .hero__in { position: relative; z-index: 2; padding-block: clamp(2.5rem, 5vw, 4rem); min-height: clamp(400px, 70svh, 600px); display: flex; flex-direction: column; justify-content: center; }
  .hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 20ch; margin-top: 1.1rem; }
  .hero h1 em { font-style: normal; color: var(--red-lit); }
  .hero__lead { margin-top: 1.15rem; max-width: 52ch; font-size: clamp(0.97rem, 1.6vw, 1.06rem); color: #c3c8cf; }
  .hero__row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

  /* ══ Clientes ══ */
  .proof { background: var(--pit); border-top: 1px solid var(--edge); padding-block: clamp(2rem, 5vw, 3rem); }
  .proof__hd { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
  .logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 4px; overflow: hidden; }
  .logos div { background: var(--panel); display: grid; place-items: center; padding: 1.15rem 1rem; transition: background 200ms ease; }
  .logos div:hover { background: var(--panel-2); }
  /* apagadas em repouso, acendem à passagem: deixa a faixa presente sem
     competir com o texto à volta */
  .logos img {
    width: 100%; max-width: 156px; height: auto;
    opacity: 0.58; transform: scale(1);
    transition:
      opacity 260ms cubic-bezier(.25, .8, .28, 1),
      transform 420ms cubic-bezier(.25, .8, .28, 1);
  }
  .logos div:hover img { opacity: 1; transform: scale(1.085); }

  /* ══ Seções ══ */
  .sec { padding-block: var(--rhythm); }
  .sec--dark { background: var(--void); border-top: 1px solid var(--edge); }
  .sec--pit  { background: var(--pit); border-top: 1px solid var(--edge); }
  .sec--light { background: var(--paper); color: #17191c; }
  .sec--light .label { color: #636a72; }
  .sec--light .sec__hd p { color: #5f646b; }

  .sec__hd { max-width: 64ch; margin-bottom: clamp(1.7rem, 3.4vw, 2.5rem); }
  .sec__hd h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: 0.8rem; }
  .sec__hd p { margin-top: 1rem; color: var(--mist); }

  /* ══ Serviços: vidro, profundidade e brilho contido ══ */
  .svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1rem; }
  .card {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 8px; padding: 1.7rem 1.55rem 1.5rem;
    text-decoration: none; display: flex; flex-direction: column;
    background: linear-gradient(168deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 46%, rgba(255,255,255,0.005) 100%), var(--panel);
    border: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 2px rgba(0,0,0,0.5);
    transition: transform 240ms cubic-bezier(.2,.7,.3,1), border-color 240ms ease, box-shadow 240ms ease;
  }
  @supports (backdrop-filter: blur(1px)) { .card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
  /* brilho vermelho que segue o cursor — contido, nunca neon */
  .card::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.04), transparent 70%);
    transition: opacity 280ms ease;
  }
  .card:hover { transform: translateY(-5px); border-color: #3a4048; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 44px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.045); }
  .card:hover::before { opacity: 1; }
  /* fio de luz superior, revelado no hover */
  .card::after {
    content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-lit), transparent);
    opacity: 0; transition: opacity 280ms ease;
  }
  .card:hover::after { opacity: 0.85; }

  .card h3 { font-size: 1.13rem; font-weight: 600; }
  .card > p { margin-top: 0.65rem; font-size: 0.92rem; color: var(--mist); }
  .card__go { margin-top: 1.3rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--red-lit); }
  .card__go span { transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
  .card:hover .card__go span { transform: translateX(5px); }

  /* ══ Indústrias: bloco CLARO, o respiro do conceito ══ */
  /* Três colunas fixas em vez de auto-fit: o auto-fit encheria a largura toda
   e não sobraria a coluna da direita, que é onde vai o mapa. */
.ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 1.7rem 1.5rem; }
@media (min-width: 900px) {
  .sec--mapa .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px); gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
  .sec--mapa .ind { grid-template-columns: repeat(3, 1fr); }
}
/* O painel do mapa é escuro dentro de um bloco claro, pelo mesmo motivo que
   o painel das credenciais é claro dentro de um bloco escuro: o néon só
   existe se houver preto à volta. */
.mapa {
  display: none;
  /* view() mede a caixa do ELEMENTO ANIMADO; um <g> de SVG não tem caixa
     de layout utilizável (20x20px), e o rango esgotava-se em 20px de scroll.
     A timeline declara-se aqui, no div, e consome-se por nome lá dentro. */
  view-timeline-name: --mapaVista;
  position: relative; overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(130% 95% at 62% 22%, #0a1a5e 0%, #000042 55%, #00002a 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,10,0.34);
}
@media (min-width: 900px) { .mapa { display: block; } }

/* "r" não é herdável como atributo SVG, mas é propriedade CSS em SVG2.
   É o que permite manter os círculos sem repetir o raio em cada um. */
.mapa__massa .d0 circle { r: 3.4px; opacity: 0.34; }
.mapa__massa .d1 circle { r: 4.5px; opacity: 0.48; }
.mapa__massa .d2 circle { r: 5.5px; opacity: 0.63; }
.mapa__massa .d3 circle { r: 6.6px; opacity: 0.77; }
.mapa__massa .d4 circle { r: 7.6px; opacity: 0.92; }
.mapa__borda circle { r: 3px; opacity: 0.78; }
.mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* O zoom é um transform num único <g>: o SVG é vetorial, por isso a escala
   é exata a qualquer altura — é isso que o torna seamless. A origem é
   Assunção, para que o enquadramento aterre ali sozinho. */
.mapa__zoom { transform-origin: 599px 724px; transform: scale(1); }
.mapa__asu { opacity: 0; }

/* O zoom deixa de ser uma scroll timeline de CSS: essas são 1:1 com o scroll,
   e um scroll agressivo replicava-se tal e qual no zoom. Agora o scroll define
   apenas o ALVO e o JS persegue-o com interpolação — o gesto do utilizador
   deixa de ser copiado e passa a ser amortecido. */
.mapa__zoom { transition: none; }
.mapa__asu { transition: opacity 600ms ease; }
.mapa__massa { transition: opacity 500ms linear; }

@media (prefers-reduced-motion: no-preference) {
  .mapa__pulso { animation: mapaPulso 2.8s ease-out infinite; transform-origin: 599px 724px; }
  @keyframes mapaPulso {
    0%   { transform: scale(1);   opacity: 0.9; }
    70%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
  }
}

/* sem scroll timelines o mapa fica no enquadramento final, legível e parado */
@supports not (animation-timeline: view()) {
  .mapa__zoom { transform: scale(1.7); }
  .mapa__asu { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa__zoom { transform: scale(1.7); }
  .mapa__asu { opacity: 1; }
}
  .ind article { padding-top: 1rem; border-top: 2px solid #17191c; }
  .ind h3 { font-size: 1.02rem; font-weight: 600; }
  .ind p { margin-top: 0.4rem; font-size: 0.87rem; color: #5f646b; }

  /* ══ Por que Paraguai ══ */
  .pit__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.6rem; }
  .why { display: grid; gap: 1.9rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
  .why article { border-top: 1px solid var(--edge); padding-top: 1.05rem; }
  .why h3 { font-size: 1.03rem; font-weight: 600; }
  .why p { margin-top: 0.45rem; font-size: 0.9rem; color: var(--mist); }

  /* ══ Processo ══ */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 1.8rem 1.5rem; counter-reset: s; }
  .steps article { counter-increment: s; }
  .steps article::before { content: counter(s, decimal-leading-zero); font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; color: var(--red); letter-spacing: 0.08em; display: block; margin-bottom: 0.6rem; }
  .steps h3 { font-size: 1.02rem; font-weight: 600; }
  .steps p { margin-top: 0.4rem; font-size: 0.89rem; color: #5f646b; }


  /* ══ Bloco Paraguai: plano aéreo noturno ══ */
  .sec--pit.has-bg { position: relative; overflow: hidden; }
  .pit__bg { position: absolute; inset: 0; }
  .pit__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; }
  .pit__scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(16,18,21,0.80) 0%, rgba(16,18,21,0.56) 45%, rgba(16,18,21,0.24) 100%),
      linear-gradient(0deg, rgba(16,18,21,0.70) 0%, rgba(16,18,21,0.26) 50%, rgba(16,18,21,0.62) 100%);
  }
  .pit__in { position: relative; z-index: 2; }
  /* sobre a foto, --dim não chega aos 4.5:1 — aqui o eyebrow sobe um tom */
  .sec--pit.has-bg .label { color: var(--mist); }

  /* ══ Fecho ══ */
  /* fundo: sala de finalização desfocada — o contraponto do hero */
  .end { background: var(--void); border-top: 1px solid var(--edge); padding-block: var(--rhythm); position: relative; overflow: hidden; }
  .end__bg { position: absolute; inset: 0; }
  .end__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; }
  @media (min-width: 900px) { .end__bg img { object-position: center; } }
  .end__scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.84) 40%, rgba(10,11,13,0.42) 74%, rgba(10,11,13,0.58) 100%),
      linear-gradient(0deg, rgba(10,11,13,0.70) 0%, transparent 58%);
  }
  @media (min-width: 900px) {
    .end__scrim {
      background:
        linear-gradient(90deg, rgba(10,11,13,0.86) 0%, rgba(10,11,13,0.68) 36%, rgba(10,11,13,0.20) 68%, rgba(10,11,13,0.42) 100%),
        linear-gradient(0deg, rgba(10,11,13,0.55) 0%, transparent 52%);
    }
  }
  .end__in { position: relative; z-index: 2; }
  .end h2 { font-size: clamp(1.75rem, 3.9vw, 2.6rem); max-width: 20ch; }
  .end p { margin-top: 1.05rem; max-width: 46ch; color: var(--mist); }
  .end__row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

  /* faixa de luz que atravessa o fecho — em repouso fica fora de quadro */
  .end::after {
    content: ""; position: absolute; top: -10%; bottom: -10%;
    left: -32vw; width: 24vw; z-index: 3; pointer-events: none;
    transform: translateX(0) skewX(-12deg);
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.09) 36%, rgba(255,92,80,0.18) 54%, rgba(255,255,255,0.06) 70%, transparent 100%);
  }


  /* ══ FAQ: acordeão nativo <details>, sem JavaScript ══ */
  .faq__list { border-top: 1px solid var(--edge); }
  .faq details {
    border-bottom: 1px solid var(--edge);
    transition: background 300ms ease;
  }
  /* o item aberto ganha um fundo quase imperceptível: marca o estado sem
     desenhar uma caixa em volta */
  .faq details[open] { background: rgba(255,255,255,0.022); }

  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    padding: 1.45rem 1rem 1.45rem 0;
    font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 2.1vw, 1.12rem);
    line-height: 1.35; color: var(--bone);
    /* o deslocamento acompanha a abertura: o título avança junto com o conteúdo */
    transition: color 200ms ease, padding-left 420ms cubic-bezier(.16, 1, .3, 1);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: #fff; }
  .faq details[open] summary { padding-left: 0.9rem; }

  /* o sinal roda em vez de trocar de glifo: a mesma forma, outro estado */
  .faq__sign { flex: none; position: relative; width: 16px; height: 16px; margin-top: 0.35rem; }
  .faq__sign::before, .faq__sign::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    background: var(--red-lit); border-radius: 1px;
    transition: transform 460ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease;
  }
  .faq__sign::before { width: 16px; height: 1.5px; }
  .faq__sign::after  { width: 1.5px; height: 16px; }
  .faq details[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
  .faq details[open] .faq__sign::before { transform: rotate(180deg); }

  .faq__body { padding: 0 1rem 1.6rem 0; max-width: 64ch; }
  .faq details[open] .faq__body { padding-left: 0.9rem; }
  .faq__body p { font-size: 0.94rem; color: var(--mist); }
  .faq__body p + p { margin-top: 0.75rem; }
  .faq__body b { color: var(--bone); font-weight: 600; }
  .faq__more { margin-top: 2.4rem; }

  /* O texto não se estica junto com a caixa: entra depois, no espaço já aberto.
     Ao fechar não há atraso, senão o conteúdo ficaria a flutuar enquanto a
     caixa colapsa. A assimetria é o que faz o gesto parecer intencional. */
  .faq__body {
    opacity: 0;
    transform: translateY(-9px);
    transition:
      opacity 170ms ease,
      transform 240ms cubic-bezier(.16, 1, .3, 1),
      padding-left 420ms cubic-bezier(.16, 1, .3, 1);
  }
  .faq details[open] .faq__body {
    opacity: 1;
    transform: none;
    transition:
      opacity 300ms ease 130ms,
      transform 460ms cubic-bezier(.16, 1, .3, 1) 130ms,
      padding-left 420ms cubic-bezier(.16, 1, .3, 1);
  }

  /* abertura animada — degrada para abertura instantânea se não houver suporte */
  @supports selector(details::details-content) {
    @media (prefers-reduced-motion: no-preference) {
      .faq details::details-content {
        block-size: 0; overflow: hidden;
        transition: block-size 460ms cubic-bezier(.16, 1, .3, 1), content-visibility 460ms;
        transition-behavior: allow-discrete;
      }
      .faq details[open]::details-content { block-size: auto; }
    }
  }

  /* ══ Fecho: é a última seção antes do footer, nunca sai pelo topo, então um
     parallax ligado ao scroll quase não se move ali. Estes dois efeitos correm
     no tempo, não no scroll, e por isso estão vivos sempre que se olha a seção.
     Ficam fora do @supports de propósito: não precisam de scroll timelines. ══ */
  @media (prefers-reduced-motion: no-preference) {
    .end__bg img {
      animation: drift 18s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes drift {
      from { transform: scale(1.05) translate(-2.2%, 1.6%); }
      to   { transform: scale(1.18) translate(2.6%, -2.2%); }
    }
    /* a faixa atravessa em 2,3 s e depois descansa: presente, nunca insistente */
    .end::after {
      animation: sweepLoop 9s linear infinite;
      will-change: transform;
    }
    @keyframes sweepLoop {
      0%   { transform: translateX(0) skewX(-12deg); }
      26%  { transform: translateX(140vw) skewX(-12deg); }
      100% { transform: translateX(140vw) skewX(-12deg); }
    }
  }

  /* ══ Footer: o sitemap completo ══ */
  .foot { background: var(--void); border-top: 1px solid var(--edge); padding-block: 2.6rem 2.4rem; }
  .foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .foot h3 { font-family: var(--f-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone); margin-bottom: 0.9rem; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
  .foot a, .foot li { font-size: 0.86rem; color: var(--mist); text-decoration: none; }
  .foot a:hover { color: var(--bone); }
  .foot__legal { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--edge); font-size: 0.76rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }

  /* ══ Parallax — timelines de scroll nativas, tudo no compositor ══ */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* a imagem cresce para que o deslocamento nunca revele as bordas */
      .hero__bg img, .pit__bg img {
        position: absolute; left: 0; width: 100%;
        will-change: transform;
      }
      /* alturas separadas: cada secção tem o seu percurso, e uma altura
         partilhada obrigaria as duas a mover-se com a mesma amplitude */
      .hero__bg img { height: 134%; top: -17%; }
      .pit__bg img  { height: 156%; top: -28%; }
      /* o hero abre no topo do documento: se usasse view() o movimento já
         começaria pela metade, então a timeline é a do scroll da raiz */
      .hero__bg img {
        animation: paraDown linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 110vh;
      }
      @keyframes paraDown {
        from { transform: translateY(-9%) scale(1.02); }
        to   { transform: translateY(9%) scale(1.02); }
      }
      /* o bloco Paraguai está no meio da página, então o rango "cover" chega
         a completar-se. Corre na direção oposta ao hero, para que os dois
         planos leiam como profundidade e não como um único deslize */
      .pit__bg img {
        animation: paraUp linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
      @keyframes paraUp {
        from { transform: translateY(26%) scale(1.04); }
        to   { transform: translateY(-26%) scale(1.04); }
      }
      /* o texto do hero afunda e esmaece ao sair: separa os planos e faz
         o parallax ser percebido como profundidade, não como deslize */
      .hero__in {
        animation: sink linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 88vh;
      }
      @keyframes sink {
        from { transform: translateY(0); opacity: 1; }
        to   { transform: translateY(42px); opacity: 0.2; }
      }
      /* as seções entram com uma elevação curta, a partir de um estado visível */
      .sec__hd, .svc, .ind, .why, .steps, .logos,
      .proof__hd, .pit__cta, .end__in {
        /* a curva não é linear: com uma timeline de scroll o easing distribui-se
           ao longo do percurso, e uma desaceleração longa faz o bloco assentar
           em vez de chegar de repente */
        animation: rise cubic-bezier(.22, .72, .28, 1) both;
        animation-timeline: view();
        animation-range: entry 2% cover 36%;
      }
      @keyframes rise {
        from { transform: translateY(54px) scale(0.982); opacity: 0.16; }
        to   { transform: none; opacity: 1; }
      }
      /* colunas escalonadas: o grid já entra com o rise, e cada artigo soma
         o seu próprio atraso por cima — é o que torna a entrada legível */
      .why article, .ind article, .steps article {
        animation: riseCol cubic-bezier(.22, .72, .28, 1) both;
        animation-timeline: view();
        animation-range: entry 4% cover 30%;
      }
      @keyframes riseCol {
        from { transform: translateY(26px); opacity: 0.25; }
        to   { transform: none; opacity: 1; }
      }
      .why article:nth-child(2), .ind article:nth-child(2), .steps article:nth-child(2) { animation-range: entry 8% cover 34%; }
      .why article:nth-child(3), .ind article:nth-child(3), .steps article:nth-child(3) { animation-range: entry 12% cover 38%; }
      .why article:nth-child(4), .ind article:nth-child(4), .steps article:nth-child(4) { animation-range: entry 16% cover 42%; }
      .why article:nth-child(5), .ind article:nth-child(5), .steps article:nth-child(5) { animation-range: entry 20% cover 46%; }
      .why article:nth-child(6), .ind article:nth-child(6), .steps article:nth-child(6) { animation-range: entry 24% cover 50%; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .card:hover { transform: none; }
    .faq__body, .faq details[open] .faq__body { transform: none !important; transition-delay: 0s !important; }
    .faq details[open] summary, .faq details[open] .faq__body { padding-left: 0 !important; }
    .logos div:hover img { transform: none; }
    .drop__panel, .drop__panel a { transition: none !important; transform: none !important; }
    .drop[data-open="true"] .drop__panel a { transition-delay: 0s !important; }
    .end__bg img { animation: none; }
    .end::after { display: none; }
  }

/* ══ Fundador: retrato e texto lado a lado ══ */
.founder { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .founder { grid-template-columns: 300px 1fr; } }

/* o quadrado vive no contentor, não só na imagem: assim a caixa reserva a
   altura certa antes de a foto carregar e nada salta ao carregar */
.founder__shot {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 300px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 22px 50px rgba(0,0,0,0.55);
}
.founder__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  display: block;
}
/* um véu quente muito leve casa o retrato com a paleta do resto da página */
.founder__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 45%, rgba(10,11,13,0.42) 100%);
}
.founder__name { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin-top: 1.25rem; }
.founder__role { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 0.3rem; }
.founder blockquote {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.35;
  letter-spacing: -0.02em; text-wrap: balance;
}
.founder blockquote + p { margin-top: 1.4rem; color: var(--mist); font-size: 0.95rem; }
.founder p + p { margin-top: 0.8rem; }

/* ══ Liquid glass do hero: o fundo reage ao cursor, o texto nunca ══
   A camada vive entre o scrim e o conteúdo (z-index 1 contra 2), por isso
   distorce apenas a imagem. A máscara é escrita pelo JS como um rasto de
   elipses — não um círculo — e por isso precisa de composição aditiva. */
.hero__liquid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  backdrop-filter: url(#mm-liquid);
  -webkit-backdrop-filter: url(#mm-liquid);
  -webkit-mask-image: var(--trail, none);
  mask-image: var(--trail, none);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero[data-liquid="on"] .hero__liquid { opacity: 1; }

/* sem ponteiro fino (toque) não há cursor a seguir: a camada não pinta */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero__liquid { display: none; }
}

/* ══ Credenciais: painel claro dentro do bloco escuro ══
   Os dois logotipos são arte escura e a cores — sobre o fundo da secção
   desapareceriam. O painel branco resolve isso e, de passagem, faz o
   conjunto ler-se como um selo institucional. */
.creds {
  background: var(--paper-2);
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.4rem);
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
@media (min-width: 700px) { .creds { grid-template-columns: 1fr 1fr; } }
.creds__item { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 700px) {
  .creds__item + .creds__item { border-left: 1px solid var(--paper-line); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
}
.creds__logo { display: flex; align-items: center; min-height: 52px; }
/* height:auto é o que impede a caixa de esticar: os dois logotipos têm
   proporções muito diferentes (300:132 e 405:80) e partilham a mesma faixa */
.creds__logo img { width: auto; height: auto; max-width: 190px; max-height: 52px; object-fit: contain; }
.creds__item p { font-size: 0.88rem; line-height: 1.6; color: #4a4f57; }
.creds__item b { color: #17191c; font-weight: 600; }

/* ══ Redes no rodapé: ícones na barra legal, não uma quinta coluna ══
   Uma quinta coluna num grid de quatro deixa sempre uma órfã na linha
   seguinte. A barra legal já existe e tem espaço livre à direita. */
.foot__legal { justify-content: space-between; align-items: center; }
.foot__legal > span { white-space: nowrap; }
.social { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.social a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 6px;
  color: var(--mist);
  transition: color 180ms ease, background 180ms ease;
}
.social a:hover { color: var(--bone); background: rgba(255,255,255,0.06); }
.social svg { width: 17px; height: 17px; display: block; }
@media (max-width: 600px) { .social { margin-left: 0; } }

/* ══ Estúdio: números-chave, ficha técnica e galeria ══ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kpis div { border-top: 1px solid var(--edge); padding-top: 1rem; }
.kpis b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; color: var(--bone); letter-spacing: -0.01em; }
.kpis b small { font-size: 0.5em; font-weight: 600; color: var(--red-lit); margin-left: 0.15em; }
.kpis span { display: block; margin-top: 0.55rem; font-size: 0.82rem; color: var(--mist); }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.specs div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--edge); font-size: 0.9rem; }
.specs dt { color: var(--dim); font-weight: 600; }
.specs dd { color: var(--bone); }

.gal { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gal figure { position: relative; overflow: hidden; border-radius: 6px; background: var(--panel); }
.gal img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(10,11,13,0.82), transparent); }
@media (min-width: 760px) {
  .gal--lead { grid-template-columns: 2fr 1fr; }
  .gal--lead figure:first-child { grid-row: span 2; }
  .gal--lead figure:first-child img { aspect-ratio: auto; min-height: 100%; }
}
.gal--rooms { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gal--rooms { grid-template-columns: repeat(4, 1fr); } }
.gal--rooms + .why { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

/* ══ Perguntas frequentes (details/summary) ══ */
.qa { max-width: 78ch; }
.qa details { border-top: 1px solid var(--paper-line); }
.qa details:last-child { border-bottom: 1px solid var(--paper-line); }
.qa summary { cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative; font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: #17191c; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--red); transition: transform 180ms ease; }
.qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa p { padding: 0 2rem 1.2rem 0; font-size: 0.92rem; color: #4a4f57; }
.qa__more { margin-top: 1.4rem; font-size: 0.9rem; color: #5f646b; }
.qa__more a { color: var(--red); }

/* ══ Estúdio: héroe cinematográfico — os refletores acendem com o scroll ══
   Duas cópias da mesma foto empilhadas: uma escura (base) e outra clara que só
   aparece através de uma máscara de gradientes radiais, um por refletor. O JS só
   escreve --l1…--l6 (0–1) e --lf; o resto é CSS. Sem JS ou com movimento
   reduzido, tudo fica aceso (valores padrão = 1). */
.lh { --l1:1; --l2:1; --l3:1; --l4:1; --l5:1; --l6:1; --lf:1; position: relative; height: 100svh; background: #050607; }
.lh.is-js { height: 270svh; }
.lh__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.lh__stage { position: absolute; top: 0; left: 50%; width: max(100vw, calc(100svh * 1.3334)); aspect-ratio: 4 / 3; transform: translateX(-50%); }
.lh__stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lh__base { filter: brightness(.17) contrast(1.2) saturate(.55); }
.lh__lit { filter: brightness(calc(1 + var(--lf) * .12));
  -webkit-mask-image:
    radial-gradient(ellipse calc(var(--l1)*30%) calc(var(--l1)*40%) at 51% 28%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l2)*30%) calc(var(--l2)*40%) at 18% 23%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l3)*30%) calc(var(--l3)*40%) at 21% 12%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l4)*32%) calc(var(--l4)*42%) at 35% 3%,  #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l5)*46%) calc(var(--l5)*58%) at 49% 45%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l6)*46%) calc(var(--l6)*58%) at 64% 43%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--lf)*280%) calc(var(--lf)*280%) at 55% 38%, #000 58%, transparent 100%);
  mask-image:
    radial-gradient(ellipse calc(var(--l1)*30%) calc(var(--l1)*40%) at 51% 28%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l2)*30%) calc(var(--l2)*40%) at 18% 23%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l3)*30%) calc(var(--l3)*40%) at 21% 12%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l4)*32%) calc(var(--l4)*42%) at 35% 3%,  #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l5)*46%) calc(var(--l5)*58%) at 49% 45%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--l6)*46%) calc(var(--l6)*58%) at 64% 43%, #000 0%, transparent 100%),
    radial-gradient(ellipse calc(var(--lf)*280%) calc(var(--lf)*280%) at 55% 38%, #000 58%, transparent 100%);
}
/* halo de cada refletor: soma luz por cima (screen), nasce pequeno e cresce */
.lh__g { position: absolute; width: 20%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,246,228,.95) 0, rgba(255,222,180,.38) 13%, rgba(255,200,150,0) 60%); }
.lh__g--1 { left: 51%; top: 28%; opacity: var(--l1); scale: calc(.35 + var(--l1) * .75); }
.lh__g--2 { left: 18%; top: 23%; opacity: var(--l2); scale: calc(.35 + var(--l2) * .75); }
.lh__g--3 { left: 21%; top: 12%; opacity: var(--l3); scale: calc(.35 + var(--l3) * .75); }
.lh__g--4 { left: 35%; top: 3%;  opacity: var(--l4); scale: calc(.35 + var(--l4) * .75); }
.lh__g--5 { left: 49%; top: 45%; opacity: var(--l5); scale: calc(.3 + var(--l5) * .9); }
.lh__g--6 { left: 64%; top: 43%; opacity: var(--l6); scale: calc(.3 + var(--l6) * .9); }
.lh__scrim { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--lf) * .3);
  background: linear-gradient(to top, rgba(5,6,7,.94) 0%, rgba(5,6,7,.7) 32%, rgba(5,6,7,0) 64%), linear-gradient(to right, rgba(5,6,7,.55), transparent 50%); }
.lh__in { position: absolute; inset: auto 0 0; padding-bottom: clamp(1.6rem, 5vh, 3.2rem); z-index: 3; }
.lh__in h1 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.04; max-width: 19ch; margin-top: .8rem; }
.lh__in h1 em { font-style: normal; color: var(--red-lit); }
.lh__lead { max-width: 54ch; margin-top: 1rem; font-size: clamp(.92rem, 1.35vw, 1.05rem); color: #c9cdd3; }
.lh__row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.lh__chips { list-style: none; margin: 1.6rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; }
.lh__chips li { display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 600; color: var(--bone); opacity: calc(.26 + var(--v) * .74); }
.lh__chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffe9c4; box-shadow: 0 0 calc(var(--v) * 12px) calc(var(--v) * 3px) rgba(255,214,150,.9); opacity: calc(.3 + var(--v) * .7); }
.lh__chips li:nth-child(1) { --v: var(--l1); } .lh__chips li:nth-child(2) { --v: var(--l2); } .lh__chips li:nth-child(3) { --v: var(--l3); }
.lh__chips li:nth-child(4) { --v: var(--l4); } .lh__chips li:nth-child(5) { --v: var(--l5); } .lh__chips li:nth-child(6) { --v: var(--l6); }
.lh__hint { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(1.6rem, 5vh, 3.2rem); display: none; align-items: center; gap: .7rem; font: 700 .68rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); writing-mode: vertical-rl; transition: opacity .4s; }
.lh__hint::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--red-lit), transparent); animation: lhHint 1.8s ease-in-out infinite; }
@keyframes lhHint { 0%,100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
.lh.is-js .lh__hint { display: flex; opacity: calc(var(--l4) * -1 + 1); }
@media (max-width: 820px) {
  .lh__stage { transform: translateX(-36%); }
  .lh__in h1 { max-width: none; }
  .lh__chips { gap: .45rem 1.1rem; margin-top: 1.1rem; padding-top: .8rem; }
  .lh__chips li { font-size: .74rem; }
  .lh__hint { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .lh.is-js { height: 100svh; } .lh__hint::after { animation: none; } }

/* ══ Painéis que se expandem (ambientes + ficha) ══ */
.pd { display: flex; gap: .5rem; height: clamp(380px, 44vw, 470px); }
.pd-p { all: unset; cursor: pointer; position: relative; flex: 1; border-radius: 10px; overflow: hidden; transition: flex .6s cubic-bezier(.2,.7,.2,1); background: var(--panel); min-width: 0; }
.pd-p:focus-visible { outline: 2px solid var(--red-lit); outline-offset: 2px; }
.pd-p.on { flex: 5.2; }
.pd-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.8); transition: filter .5s; }
.pd-p.on img, .pd-p:hover img { filter: none; }
.pd-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,13,.92), transparent 62%); }
.pd-n { position: absolute; z-index: 2; top: .9rem; left: .9rem; font: 700 .72rem var(--f-display); letter-spacing: .12em; color: var(--red-lit); }
.pd-c { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1rem; }
.pd-t { display: block; margin: 0; font: 600 1rem var(--f-display); white-space: nowrap; color: #fff; }
.pd-l { list-style: none; margin: .55rem 0 0; padding: 0; font-size: .82rem; color: #d4d7dc; display: none; gap: .28rem; }
.pd-p.on .pd-l { display: grid; }
.pd-l > span { display: block; }
.pd-l > span::before { content: "—"; color: var(--red-lit); margin-right: .5rem; }
.pd-p:not(.on) .pd-t { position: absolute; left: 0; bottom: 0; transform-origin: left bottom; transform: rotate(-90deg) translate(0, 100%); font-size: .88rem; opacity: .9; }
.pdet { margin-top: 1.4rem; border-top: 1px solid var(--edge); }
.pdet summary { cursor: pointer; list-style: none; padding: 1rem 0; font: 600 .95rem var(--f-display); display: flex; justify-content: space-between; }
.pdet summary::-webkit-details-marker { display: none; }
.pdet summary::after { content: "+"; color: var(--red-lit); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.pdet[open] summary::after { transform: rotate(45deg); }
.pdet dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .1rem 2.5rem; margin: 0 0 .6rem; }
.pdet dl div { display: flex; gap: 1rem; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--edge); font-size: .86rem; }
.pdet dt { color: var(--dim); } .pdet dd { margin: 0; text-align: right; }
@media (max-width: 820px) {
  .pd { flex-direction: column; height: auto; }
  .pd-p { flex: none; height: 64px; } .pd-p.on { flex: none; height: 310px; }
  .pd-p:not(.on) .pd-t { position: static; transform: none; }
}
.lh__in h1, .lh__in .label, .lh__lead { text-shadow: 0 2px 22px rgba(0,0,0,.7); }

/* h1 dentro de .sec__hd (páginas que abrem direto numa seção) e subtítulos de grupo do FAQ */
.sec__hd h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; margin-top: .8rem; }
.faq__group { font-size: clamp(1.05rem, 2vw, 1.25rem); margin: clamp(2rem, 4vw, 3rem) 0 .2rem; color: var(--bone); }
.faq__group + .faq { margin-top: 0; }

/* ══ Pular para o conteúdo ══ */
.skip {
  position: fixed; left: 0.75rem; top: -5rem; z-index: 300;
  background: var(--paper-2); color: #17191c; padding: 0.7rem 1.1rem; border-radius: 3px;
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.skip:focus { top: max(0.75rem, env(safe-area-inset-top, 0px)); outline: 2px solid var(--red-lit); outline-offset: 2px; }
main:focus { outline: none; }

/* ══ Menu móvel / tablet (< 1000 px) ══
   Botão + painel que desce sob a barra. Fechado, o painel usa visibility:hidden
   (fora da ordem de tabulação e do leitor de ecrã). Sem JS, o <noscript> do
   <head> mostra o painel em linha, por isso todos os links continuam acessíveis. */
.burger, .mnav, .mnav__scrim { display: none; }
@media (max-width: 999px) {
  .hdr__in { gap: 0.7rem; }
  .hdr__cta { margin-left: auto; white-space: nowrap; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; margin-right: -0.35rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--edge-hi); border-radius: 4px;
    color: var(--bone); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .burger:hover { border-color: rgba(255,255,255,0.28); }
  .burger__ic { position: relative; display: block; width: 18px; height: 12px; }
  .burger__ic i {
    position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1), opacity 160ms ease, top 260ms cubic-bezier(.16, 1, .3, 1);
  }
  .burger__ic i:nth-child(1) { top: 0; }
  .burger__ic i:nth-child(2) { top: 5.25px; }
  .burger__ic i:nth-child(3) { top: 10.5px; }
  .hdr[data-menu="open"] .burger__ic i:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
  .hdr[data-menu="open"] .burger__ic i:nth-child(2) { opacity: 0; }
  .hdr[data-menu="open"] .burger__ic i:nth-child(3) { top: 5.25px; transform: rotate(-45deg); }

  .mnav__scrim {
    display: block; position: fixed; inset: 0; background: rgba(4,5,6,0.62);
    opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .hdr[data-menu="open"] .mnav__scrim { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s; }

  .mnav {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
    max-height: calc(100vh - 4.7rem); max-height: calc(100dvh - 4.7rem - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: rgba(13,15,18,0.98); border-bottom: 1px solid var(--edge);
    box-shadow: 0 28px 60px rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 260ms;
  }
  @supports (backdrop-filter: blur(1px)) { .mnav { background: rgba(13,15,18,0.92); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); } }
  .hdr[data-menu="open"] .mnav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 200ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .mnav__in { max-width: 1180px; margin-inline: auto; padding: 1.1rem var(--gutter) 1.5rem; display: grid; gap: 0.9rem; }
  .mnav__t { font-size: 0.71rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--mist); }
  .mnav ul { list-style: none; margin: 0; padding: 0; }
  .mnav a:not(.btn) {
    display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0.1rem;
    color: var(--bone); text-decoration: none; font-size: 0.97rem; font-weight: 500;
    border-bottom: 1px solid var(--edge);
  }
  .mnav a:not(.btn):hover { color: #fff; }
  .mnav__svc { display: grid; margin-top: -0.4rem; }
  .mnav__pg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .mnav__pg a:not(.btn) { font-weight: 600; }
  .mnav__cta { text-align: center; padding-block: 0.9rem; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .mnav__svc { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }
}
@media (max-width: 560px) { .brand span { display: none; } }
@media (max-width: 440px) {
  .hdr__cta { padding: 0.62rem 0.95rem; font-size: 0.84rem; text-transform: capitalize; }
  .hdr__cta-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 349px) { .hdr__cta { display: none; } }
html.mm-lock { overflow: hidden; }

/* ══ Aviso de cookies (consent.js) ══ */
.cc {
  position: fixed; z-index: 70;
  left: max(0.75rem, env(safe-area-inset-left, 0px)); right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  max-width: 780px; margin-inline: auto;
  display: grid; gap: 0.85rem; padding: 1rem 1.1rem;
  background: rgba(18,20,24,0.97); border: 1px solid var(--edge-hi); border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  font-size: 0.83rem; line-height: 1.55; color: var(--mist);
}
@supports (backdrop-filter: blur(1px)) { .cc { background: rgba(18,20,24,0.88); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } }
.cc[hidden] { display: none; }
.cc:focus { outline: none; }
.cc h2 { font-family: var(--f-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--bone); margin: 0 0 0.2rem; }
.cc p + p { margin-top: 0.3rem; }
.cc a { color: var(--bone); text-underline-offset: 2px; }
.cc__cur { color: var(--bone); }
.cc__row { display: flex; gap: 0.6rem; }
.cc__btn {
  flex: 1; min-height: 44px; padding: 0.6rem 1.2rem; border-radius: 3px; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 0.88rem;
  background: transparent; color: var(--bone); border: 1px solid #5d646e;
  transition: border-color 140ms ease, background 140ms ease;
}
.cc__btn:hover { border-color: var(--bone); background: rgba(255,255,255,0.06); }
@media (min-width: 640px) {
  .cc { grid-template-columns: 1fr auto; align-items: center; gap: 1.4rem; }
  .cc__btn { flex: none; min-width: 7.5rem; }
}
.foot .foot__btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 0.86rem; color: var(--mist);
}
.foot .foot__btn:hover { color: var(--bone); }

/* ══ Movimento reduzido ══ */
@media (prefers-reduced-motion: reduce) {
  .burger__ic i, .mnav, .mnav__scrim, .skip, .cc__btn { transition: none !important; }
}