/* ==========================================================================
   Laboratório Siqueira — IPHS
   Folha de estilo única, organizada em camadas nativas (@layer).
   A ordem declarada abaixo define a cascata: nada depende de especificidade
   alta para vencer, o que mantém o arquivo previsível conforme ele cresce.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }

  ul, ol { list-style: none; padding: 0; }

  h1, h2, h3, h4 {
    line-height: 1.05;
    text-wrap: balance;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  p { text-wrap: pretty; }

  /* Português tem palavras longas ("Citopatologia", "anatomopatologista").
     Sem isto, um único termo pode alargar a coluna em telas de 360px. */
  h1, h2, h3, h4, p, li, summary, a { overflow-wrap: break-word; }

  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }

  :target { scroll-margin-top: calc(var(--header-h) + 2rem); }
}

/* ==========================================================================
   TOKENS
   Paleta derivada integralmente da logo oficial (logo.svg).
   Nenhuma cor foi inventada: #312783 · #2D2E83 · #1D71B8 · #36A9E1.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Marca ------------------------------------------------------- */
    --navy-900: #0B1233;   /* derivado, para os blocos escuros */
    --navy-800: #131C4A;
    --navy-700: #2D2E83;   /* logo */
    --blue-600: #1D71B8;   /* logo — cor de ação */
    --blue-500: #2B84D0;
    --cyan-400: #36A9E1;   /* logo — acento único */
    --ice-100:  #E7F0F9;
    --ice-50:   #F5F9FD;
    --white:    #FFFFFF;
    --ink:      #0E1522;
    --muted:    #5A6B84;

    /* --- Semânticos (reescritos por .is-dark) ------------------------ */
    --bg:          var(--ice-50);
    --surface:     var(--white);
    --surface-alt: var(--ice-100);
    --text:        var(--ink);
    --text-muted:  var(--muted);
    --action:      var(--blue-600);
    --accent:      var(--cyan-400);
    --border:      rgba(11, 18, 51, 0.10);
    --border-soft: rgba(11, 18, 51, 0.06);

    /* --- Tipografia --------------------------------------------------- */
    --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.15rem, 1.06rem + 0.42vw, 1.4rem);
    --step-2:  clamp(1.45rem, 1.25rem + 0.95vw, 2.1rem);
    --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
    --step-4:  clamp(2.3rem, 1.7rem + 2.9vw, 4.2rem);
    --step-5:  clamp(2.7rem, 1.65rem + 4.9vw, 5.75rem);

    /* --- Espaço e grid ------------------------------------------------ */
    --maxw: 1280px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 9vw, 8.5rem);
    --header-h: 78px;
    --header-top: clamp(0.65rem, 1.6vw, 1.15rem);

    /* --- Raios --------------------------------------------------------- */
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-xl: 40px;
    --r-pill: 999px;

    /* --- Sombras (dois níveis, matiz azul) ----------------------------- */
    --shadow-1: 0 1px 2px rgba(11, 18, 51, 0.04), 0 10px 28px rgba(11, 18, 51, 0.06);
    --shadow-2: 0 2px 4px rgba(11, 18, 51, 0.05), 0 28px 64px rgba(11, 18, 51, 0.11);

    /* --- Movimento ------------------------------------------------------ */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-fast: 0.2s;
    --dur: 0.4s;
  }

  /* Contexto escuro: só troca os tokens semânticos.
     Todos os componentes herdam automaticamente, sem override por seletor. */
  .is-dark {
    --bg:          var(--navy-900);
    --surface:     rgba(255, 255, 255, 0.05);
    --surface-alt: rgba(255, 255, 255, 0.08);
    --text:        var(--white);
    --text-muted:  #A7B8D6;
    --action:      var(--cyan-400);
    --border:      rgba(255, 255, 255, 0.16);
    --border-soft: rgba(255, 255, 255, 0.09);

    color: var(--text);
    background-color: var(--bg);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  /* Fonte variável self-hosted — um único arquivo cobre 400 a 800.
     size-adjust no fallback mantém CLS próximo de zero durante o swap. */
  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
      U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: "Manrope Fallback";
    src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
    size-adjust: 101%;
    ascent-override: 100%;
    descent-override: 26%;
    line-gap-override: 0%;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 2rem);
  }

  body {
    font-family: var(--font), "Manrope Fallback";
    font-size: var(--step-0);
    font-weight: 400;
    color: var(--text);
    background-color: var(--bg);
  }

  /* Sem overflow no <body>: a propriedade seria propagada para o viewport,
     distorcendo a largura de layout e quebrando o pin do ScrollTrigger.
     Cada seção que gera transbordo decorativo o contém por conta própria
     (.hero, .timeline, .arc, .spec__media). */

  /* Trava de scroll usada pelo menu mobile */
  body.is-locked { overflow: hidden; }

  ::selection {
    background: var(--cyan-400);
    color: var(--navy-900);
  }

  :focus-visible {
    outline: 2px solid var(--cyan-400);
    outline-offset: 3px;
    border-radius: 4px;
  }

  strong, b { font-weight: 700; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Todo filho direto de um grid de conteúdo tem min-width zerado.
     Sem isto, `min-width: auto` (= min-content) faz uma palavra longa
     estourar a coluna e ignorar o max-width em telas estreitas. */
  .section-head > *,
  .hero__content > *,
  .institute__copy > *,
  .faq__head > *,
  .contact__copy > *,
  .stats__item,
  .timeline__item { min-width: 0; }

  .section {
    position: relative;
    padding-block: var(--section-y);
    background-color: var(--bg);
    color: var(--text);
  }

  /* Blocos escuros sangram a largura toda e recebem cantos suaves
     para não brigarem com o restante da página. */
  .section--dark {
    border-radius: clamp(24px, 4vw, 48px);
    margin-inline: clamp(0px, 1.5vw, 20px);
    overflow: hidden;
  }

  .skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -120%);
    padding: 0.75rem 1.5rem;
    background: var(--navy-900);
    color: var(--white);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 700;
    transition: transform var(--dur-fast) var(--ease);
  }

  .skip-link:focus-visible { transform: translate(-50%, 0); }
}

/* ==========================================================================
   COMPONENTES
   Cada componente aparece uma única vez e é reutilizado em toda a página.
   ========================================================================== */
@layer components {

  /* --- Cabeçalho de seção ------------------------------------------- */
  .section-head {
    display: grid;
    gap: 1.25rem;
    max-width: min(62ch, 100%);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--action);
  }

  .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    opacity: 0.55;
  }

  .section-head h2 { font-size: var(--step-3); }

  .lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 400;
  }

  /* --- Botões --------------------------------------------------------
     Um componente, três variantes. A seta circular é a assinatura de
     interação repetida em header, hero, resultados e contato.          */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--border);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.55rem 0.6rem 0.55rem 1.5rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    will-change: transform;
  }

  .btn__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy-900);
    overflow: hidden;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .btn__arrow svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur) var(--ease-out);
  }

  .btn:hover .btn__arrow svg,
  .btn:focus-visible .btn__arrow svg { transform: translate(3px, -3px); }

  .btn--solid {
    --btn-bg: var(--action);
    --btn-fg: var(--white);
    --btn-bd: transparent;
    box-shadow: 0 8px 24px rgba(29, 113, 184, 0.24);
  }

  .btn--solid:hover { --btn-bg: var(--blue-500); }

  .is-dark .btn--solid {
    --btn-bg: var(--cyan-400);
    --btn-fg: var(--navy-900);
    box-shadow: 0 10px 34px rgba(54, 169, 225, 0.28);
  }

  .is-dark .btn--solid .btn__arrow {
    background: var(--navy-900);
    color: var(--cyan-400);
  }

  .btn--outline {
    --btn-bd: var(--border);
    background: var(--surface);
  }

  .btn--outline .btn__arrow {
    background: var(--surface-alt);
    color: var(--action);
  }

  .btn--outline:hover {
    --btn-bd: var(--action);
    box-shadow: var(--shadow-1);
  }

  .btn--outline:hover .btn__arrow {
    background: var(--action);
    color: var(--white);
  }

  .is-dark .btn--outline .btn__arrow { color: var(--cyan-400); }
  .is-dark .btn--outline:hover .btn__arrow { color: var(--navy-900); background: var(--cyan-400); }

  .btn--ghost {
    --btn-bd: transparent;
    padding-inline: 0.25rem 0.6rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--text-muted);
  }

  .btn--ghost .btn__arrow {
    width: 30px;
    height: 30px;
    background: var(--surface-alt);
    color: var(--action);
  }

  .btn--ghost:hover { color: var(--action); }

  /* Maior em altura e presença, não em corpo de texto: dois CTAs grandes lado
     a lado precisam caber na coluna do Hero sem quebrar linha. */
  .btn--lg {
    min-height: 62px;
    padding-left: 1.75rem;
  }

  .btn--lg .btn__arrow { width: 46px; height: 46px; }
  .btn--lg .btn__arrow svg { width: 18px; height: 18px; }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1rem;
  }

  /* --- Selo de vidro --------------------------------------------------
     Usado apenas ancorado a imagens, no máximo 2 por composição.        */
  .glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: var(--shadow-1);
    color: var(--ink);
  }

  .glass-badge__value {
    display: block;
    font-size: var(--step-1);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .glass-badge__label {
    display: block;
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.3;
  }

  .glass-badge__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-700), var(--cyan-400));
    color: var(--white);
  }

  .glass-badge__icon svg { width: 17px; height: 17px; }

  /* --- Máscara em arco -------------------------------------------------
     Motivo visual do site, derivado da curva do símbolo da logo.        */
  .arc {
    border-radius: 999px 999px var(--r-lg) var(--r-lg);
    overflow: hidden;
  }

  .arc--soft { border-radius: clamp(80px, 18vw, 200px) clamp(80px, 18vw, 200px) var(--r-lg) var(--r-lg); }

  /* --- Mídia ------------------------------------------------------------
     Moldura recortada + quadro interno. A separação existe porque o parallax
     move o quadro e o hover escala a imagem: transforms em elementos
     diferentes não disputam a mesma propriedade.                          */
  .media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--ice-100), var(--white));
  }

  .media__frame {
    position: absolute;
    inset: 0;
    display: block;
    will-change: transform;
  }

  /* Sobra vertical para o parallax deslizar sem revelar as bordas. */
  .media__frame[data-parallax] { inset: -9% 0; }

  .media__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cada foto tem o seu ponto de interesse; quem enquadra é o HTML, via
       `style="--focus: ..."`. O padrão serve para a maioria. */
    object-position: var(--focus, center);
    transition: transform 0.9s var(--ease-out), filter 0.7s var(--ease);
  }

  .media:hover .media__img,
  .media:focus-within .media__img {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.02);
  }

  /* Brilho diagonal que atravessa a imagem no hover. O retorno acontece sem
     transição, para que só a passagem seja visível. */
  .media--shine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg,
      transparent 34%, rgba(255, 255, 255, 0.45) 47%, rgba(180, 226, 250, 0.28) 53%, transparent 64%);
    transform: translateX(-130%);
  }

  .media--shine:hover::after,
  .media--shine:focus-within::after {
    transform: translateX(130%);
    transition: transform 1.15s var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    .media--shine::after { display: none; }
    .media:hover .media__img,
    .media:focus-within .media__img { transform: none; filter: none; }
  }

  /* --- Camada de partículas ---------------------------------------------
     Sempre atrás do conteúdo e sem capturar ponteiro: a interação com o
     cursor é alimentada por JS (ver js/modules/particles.js).             */
  .particles-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .particles-layer canvas { display: block; }

  /* --- Halo do cursor -----------------------------------------------------
     Puramente decorativo. O cursor nativo continua visível e nada depende
     deste elemento para ser clicado.                                       */
  .cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    scale: 1;
    /* Só ciano, sem componente escuro: qualquer cinza no gradiente suja o
       fundo branco. Núcleo bem fraco, queda longa até transparente. */
    background: radial-gradient(circle closest-side,
      rgba(54, 169, 225, 0.16),
      rgba(54, 169, 225, 0.07) 42%,
      rgba(54, 169, 225, 0) 76%);
    /* `scale` é propriedade independente: não conflita com o `transform`
       escrito pelo GSAP para acompanhar o cursor. */
    transition: opacity 0.4s var(--ease), scale 0.4s var(--ease-out);
    will-change: transform;
  }

  .cursor-glow.is-visible { opacity: 1; }
  .cursor-glow.is-active { scale: 1.45; }

  @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor-glow { display: none; }
  }

  /* --- Accordion (details/summary nativo) ------------------------------ */
  .accordion { border-top: 1px solid var(--border); }

  .accordion__item { border-bottom: 1px solid var(--border); }

  .accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color var(--dur-fast) var(--ease);
  }

  .accordion__summary:hover { color: var(--action); }

  .accordion__icon {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .accordion__icon::before,
  .accordion__icon::after {
    content: "";
    position: absolute;
    inset: 50% 25%;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
  }

  .accordion__icon::after { transform: translateY(-50%) rotate(90deg); }

  .accordion__item[open] .accordion__icon {
    background: var(--action);
    border-color: var(--action);
    color: var(--white);
  }

  .accordion__item[open] .accordion__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

  .accordion__body {
    padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
    max-width: min(68ch, 100%);
    color: var(--text-muted);
  }

  .accordion__body > * + * { margin-top: 0.75rem; }

  /* --- Item de contato -------------------------------------------------- */
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--border-soft);
  }

  .contact-item__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
  }

  .contact-item__icon svg { width: 18px; height: 18px; }

  .contact-item__label {
    display: block;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .contact-item__value {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color var(--dur-fast) var(--ease);
  }

  a.contact-item__value:hover { color: var(--accent); }

  .contact-item__hint {
    display: block;
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  /* --- Estados de reveal ------------------------------------------------
     Aplicado só quando o JS está ativo, para que a página continue
     inteiramente legível sem JavaScript.                                */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease-out) var(--reveal-delay, 0s),
                transform 0.7s var(--ease-out) var(--reveal-delay, 0s);
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  }
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pending {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }

  .pending svg { width: 14px; height: 14px; flex: 0 0 auto; }
}

/* ==========================================================================
   CHROME — preloader, cabeçalho, navegação e botão flutuante
   ========================================================================== */
@layer components {

  /* --- Preloader ------------------------------------------------------- */
  .preloader { display: none; }

  .js .preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    background: var(--ice-50);
  }

  .preloader__mark {
    width: clamp(46px, 7vw, 66px);
    height: auto;
    clip-path: inset(100% 0 0 0);
  }

  /* --- Cabeçalho -------------------------------------------------------- */
  .site-header {
    position: fixed;
    top: var(--header-top);
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* A pílula tem a largura do próprio conteúdo — em telas largas ela flutua
     centralizada em vez de atravessar a tela inteira. */
  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 2.4vw, 2.75rem);
    width: fit-content;
    max-width: min(100% - clamp(1.5rem, 5vw, 5rem), var(--maxw));
    margin-inline: auto;
    min-height: var(--header-h);
    padding: 0.5rem 0.6rem 0.5rem clamp(0.9rem, 2.6vw, 2.75rem);
  }

  /* Em telas menores a barra ocupa a largura disponível: com poucos itens,
     espalhar marca / CTA / menu lê melhor do que uma pílula apertada. */
  @media (max-width: 959.98px) {
    .site-header__inner { width: 100%; }
  }

  /* O vidro mora num pseudo-elemento de propósito: `backdrop-filter` no
     próprio .site-header__inner o transformaria em bloco de contenção dos
     descendentes `position: fixed`, e o painel mobile passaria a se ancorar
     na pílula em vez da viewport. */
  .site-header__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(22px) saturate(1.9);
    -webkit-backdrop-filter: blur(22px) saturate(1.9);
    box-shadow: 0 1px 2px rgba(11, 18, 51, 0.04), 0 12px 40px rgba(11, 18, 51, 0.07);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    pointer-events: none;
  }

  .site-header.is-scrolled .site-header__inner::before {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 2px rgba(11, 18, 51, 0.05), 0 16px 46px rgba(11, 18, 51, 0.12);
  }

  .brand, .nav, .header-cta, .burger { position: relative; z-index: 2; }

  /* --- Marca ------------------------------------------------------------ */
  .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .brand img {
    width: clamp(104px, 27vw, 175px);
    height: auto;
  }

  /* --- Navegação -------------------------------------------------------- */
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.8vw, 2.9rem);
  }

  .nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.4rem;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--action);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }

  .nav__link:hover { color: var(--ink); }
  .nav__link[aria-current="location"] { color: var(--ink); }
  .nav__link[aria-current="location"]::after { transform: scaleX(1); }

  .nav__cta-mobile { display: none; }

  /* --- CTA de resultados no cabeçalho ----------------------------------- */
  .header-cta {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 46px;
    padding: 0.3rem 0.3rem 0.3rem clamp(0.8rem, 1.8vw, 1.35rem);
    gap: clamp(0.5rem, 1.4vw, 0.9rem);
  }

  .header-cta .btn__arrow { width: 36px; height: 36px; }
  .header-cta .btn__arrow svg { width: 14px; height: 14px; }
  .header-cta__label { font-size: var(--step--1); }

  /* --- Botão do menu ----------------------------------------------------- */
  .burger {
    display: none;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    background: var(--white);
  }

  .burger svg { width: 19px; height: 19px; }
  .burger__close { display: none; }

  /* --- Painel mobile ------------------------------------------------------ */
  @media (max-width: 959.98px) {
    /* Folha que desce a partir da pílula, em vez de cobrir a tela inteira:
       o cabeçalho continua visível e não há disputa de empilhamento. */
    .nav {
      position: fixed;
      top: calc(var(--header-top) + var(--header-h) + 0.6rem);
      left: clamp(0.75rem, 2.5vw, 2.5rem);
      right: clamp(0.75rem, 2.5vw, 2.5rem);
      max-height: calc(100dvh - var(--header-top) - var(--header-h) - 2.5rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      display: grid;
      justify-items: start;
      gap: 1.75rem;
      padding: clamp(1.5rem, 5vw, 2.25rem);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: var(--r-lg);
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(34px) saturate(1.9);
      -webkit-backdrop-filter: blur(34px) saturate(1.9);
      box-shadow: var(--shadow-2);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.75rem) scale(0.98);
      transform-origin: top center;
      transition: opacity var(--dur) var(--ease),
                  transform var(--dur) var(--ease),
                  visibility 0s linear var(--dur);
    }

    .site-header[data-open="true"] .nav {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .nav__list {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      width: 100%;
    }

    .nav__link {
      font-size: clamp(1.2rem, 4.4vw, 1.5rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      padding-block: 0.5rem;
    }

    .nav__link::after { display: none; }
    .nav__link[aria-current="location"] { color: var(--action); }

    .nav__cta-mobile { display: inline-flex; }

    .burger { display: grid; }
    .site-header[data-open="true"] .burger__open { display: none; }
    .site-header[data-open="true"] .burger__close { display: block; }
  }

  @media (min-width: 960px) {
    .nav { margin-inline: auto; }
  }

  /* --- FAB WhatsApp -------------------------------------------------------
     Cor de marca, não o verde do WhatsApp: o ícone e o rótulo já garantem o
     reconhecimento, e a paleta permanece consistente.                      */
  .fab {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 56px;
    padding: 0 1.15rem 0 1.05rem;
    border-radius: var(--r-pill);
    background: var(--navy-900);
    color: var(--white);
    font-weight: 700;
    font-size: var(--step--1);
    box-shadow: 0 10px 30px rgba(11, 18, 51, 0.28);
    opacity: 0;
    transform: translateY(1rem) scale(0.9);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .fab.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .fab__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--cyan-400);
  }

  .fab__label {
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  /* Recolhe para ícone quando o usuário rola para baixo */
  .fab.is-compact .fab__label { max-width: 0; opacity: 0; }
  .fab.is-compact { padding-inline: 1rem; }

  /* Anel de respiração — lento e discreto */
  .fab__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid var(--cyan-400);
    opacity: 0;
    animation: fab-breathe 4.5s var(--ease) infinite;
    pointer-events: none;
  }

  @keyframes fab-breathe {
    0%   { transform: scale(1);    opacity: 0.45; }
    70%  { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fab__ring { animation: none; }
  }
}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
@layer sections {

  /* ------------------------------------------------------------------ HERO */
  .hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5.5rem));
    padding-bottom: clamp(3.5rem, 8vw, 7rem);
    overflow: hidden;
  }

  .hero__glow {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    background:
      radial-gradient(60% 55% at 78% 18%, rgba(54, 169, 225, 0.20), transparent 65%),
      radial-gradient(50% 50% at 12% 8%, rgba(45, 46, 131, 0.12), transparent 65%),
      linear-gradient(180deg, var(--ice-100), var(--ice-50) 55%);
    pointer-events: none;
  }

  /* Aurora: manchas de luz que derivam devagar atrás de tudo.
     São gradientes radiais animados só por `transform` — sem filter, sem
     repaint de layout. É o que tira a monotonia do fundo claro. */
  .hero__aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero__aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
  }

  .hero__aurora span:nth-child(1) {
    width: min(52vw, 760px);
    aspect-ratio: 1;
    top: -18%;
    right: -8%;
    background: radial-gradient(circle closest-side, rgba(54, 169, 225, 0.34), rgba(54, 169, 225, 0) 70%);
    animation: aurora-a 24s ease-in-out infinite alternate;
  }

  .hero__aurora span:nth-child(2) {
    width: min(44vw, 620px);
    aspect-ratio: 1;
    bottom: -24%;
    left: -12%;
    background: radial-gradient(circle closest-side, rgba(45, 46, 131, 0.20), rgba(45, 46, 131, 0) 70%);
    animation: aurora-b 31s ease-in-out infinite alternate;
  }

  .hero__aurora span:nth-child(3) {
    width: min(34vw, 480px);
    aspect-ratio: 1;
    top: 38%;
    left: 34%;
    background: radial-gradient(circle closest-side, rgba(49, 39, 131, 0.14), rgba(49, 39, 131, 0) 70%);
    animation: aurora-c 27s ease-in-out infinite alternate;
  }

  @keyframes aurora-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-7%, 9%, 0) scale(1.16); }
  }

  @keyframes aurora-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(9%, -8%, 0) scale(0.94); }
  }

  @keyframes aurora-c {
    from { transform: translate3d(0, 0, 0) scale(0.92); }
    to   { transform: translate3d(6%, -12%, 0) scale(1.2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__aurora span { animation: none; }
  }

  .hero__watermark {
    position: absolute;
    top: 8%;
    left: -8%;
    width: min(38vw, 420px);
    aspect-ratio: 45.5 / 62.8;
    background: url("../assets/brand/symbol.svg") no-repeat center / contain;
    opacity: 0.04;
    pointer-events: none;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2.75rem, 6vw, 4rem);
    align-items: center;
  }

  .hero__content { display: grid; gap: clamp(1.5rem, 2.5vw, 1.9rem); justify-items: start; }

  .hero__title {
    position: relative;
    font-size: var(--step-5);
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .hero__line { display: block; }

  .hero__line--accent {
    background: linear-gradient(100deg,
      var(--navy-700) 0%, var(--blue-600) 34%, var(--blue-500) 50%, var(--blue-600) 66%, var(--navy-700) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Com line-height 0.95 a caixa de pintura cortaria a descendente do "ç" e
       do "g" — background-clip: text pinta apenas dentro da caixa da linha. */
    padding-bottom: 0.14em;
    animation: accent-drift 14s ease-in-out infinite alternate;
  }

  @keyframes accent-drift {
    from { background-position: 14% 0; }
    to   { background-position: 86% 0; }
  }

  /* Varredura: fios de luz que atravessam a headline de tempos em tempos.
     Referência ao gesto de leitura de uma lâmina — e é o que quebra a
     estática do bloco de texto sem competir com a leitura. */
  .hero__scan {
    position: absolute;
    left: -3%;
    right: -3%;
    top: -4%;
    height: 108%;
    overflow: hidden;
    pointer-events: none;
  }

  /* O fio ocupa toda a altura do bloco e desenha 1px no topo. Assim
     `translateY(100%)` percorre exatamente a headline, em qualquer viewport,
     sem depender de valor fixo em px. */
  .hero__scan::before,
  .hero__scan::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
      transparent, rgba(54, 169, 225, 0.9) 30%, rgba(45, 46, 131, 0.45) 70%, transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: hero-scan 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
  }

  .hero__scan::after {
    animation-delay: 4.5s;
    opacity: 0.5;
    background-image: linear-gradient(90deg,
      transparent, rgba(45, 46, 131, 0.55) 40%, transparent);
  }

  @keyframes hero-scan {
    0%   { transform: translateY(-6px); opacity: 0; }
    6%   { opacity: 1; }
    38%  { opacity: 1; }
    46%  { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(100%); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__scan { display: none; }
    .hero__line--accent { animation: none; background-position: 50% 0; }
  }

  .hero__lead {
    max-width: min(46ch, 100%);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-muted);
  }

  .hero__hint {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }

  .hero__hint:hover { color: var(--action); border-color: currentColor; }

  .hero__media { position: relative; }

  /* A fachada é uma foto horizontal dentro de um arco vertical: o recorte
     sobe um pouco para manter o letreiro e a entrada no enquadramento. */
  .hero__figure .media__img { object-position: 50% 42%; }

  .hero__figure {
    aspect-ratio: 4 / 5;
    max-height: 74vh;
    margin-inline: auto;
    max-width: 520px;
    /* Sombra neutra + halo ciano difuso: o arco passa a "iluminar" o fundo. */
    box-shadow: var(--shadow-2), 0 40px 110px -34px rgba(29, 113, 184, 0.55);
  }

  .hero__figure:hover { box-shadow: var(--shadow-2), 0 46px 130px -30px rgba(29, 113, 184, 0.75); }

  .hero__badge { position: absolute; z-index: 3; }
  .hero__badge--a { top: 12%; left: max(0px, -1.5rem); }
  .hero__badge--b { bottom: 9%; right: max(0px, -1rem); }

  @media (min-width: 960px) {
    .hero__inner { grid-template-columns: 1.02fr 0.98fr; }
  }

  @media (max-width: 559.98px) {
    .hero__badge--a { top: 6%; left: 0; }
    .hero__badge--b { bottom: 5%; right: 0; }
    .glass-badge { padding: 0.6rem 0.9rem; gap: 0.6rem; }
    .glass-badge__icon { width: 28px; height: 28px; }
  }

  /* --------------------------------------------------------- ESPECIALIDADES */
  .specialties { position: relative; }

  .spec { border-top: 1px solid var(--border); }
  .spec:last-child { border-bottom: 1px solid var(--border); }

  .spec__row {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2.25rem);
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
  }

  .spec__num {
    flex: 0 0 auto;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    padding-top: 0.45em;
  }

  .spec__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(38px, 8vw, 46px);
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--action);
    background: var(--surface);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }

  .spec__icon svg { width: 47%; height: 47%; }

  .spec.is-active .spec__icon,
  .spec__row:hover .spec__icon {
    background: var(--action);
    border-color: var(--action);
    color: var(--white);
  }

  .spec__title {
    font-size: var(--step-2);
    margin-bottom: 0.6rem;
    transition: color var(--dur) var(--ease);
  }

  .spec__desc { color: var(--text-muted); max-width: min(46ch, 100%); }

  .spec__media {
    margin-top: 0.5rem;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .specialties__foot { margin-top: 2rem; }

  @media (min-width: 960px) {
    .specialties__list { width: 56%; }

    .spec__media {
      position: absolute;
      top: 50%;
      right: 0;
      width: 40%;
      margin: 0;
      border-radius: var(--r-lg);
      transform: translateY(-50%) scale(0.97);
      opacity: 0;
      visibility: hidden;
      box-shadow: var(--shadow-2);
      transition: opacity var(--dur) var(--ease),
                  transform var(--dur) var(--ease-out),
                  visibility 0s linear var(--dur);
    }

    .spec.is-active .spec__media {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) scale(1);
      transition-delay: 0s;
    }

    .spec.is-active .spec__title { color: var(--action); }
    .spec__row { cursor: default; }
  }

  /* ------------------------------------------------------------- O INSTITUTO */
  .institute__intro {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }

  .institute__copy { display: grid; gap: 1.25rem; }
  .institute__copy h2 { font-size: var(--step-3); }
  .institute__copy p:not(.lead) { color: var(--text-muted); }

  .institute__media { position: relative; }

  .institute__figure {
    aspect-ratio: 3 / 2;
    border-radius: clamp(60px, 12vw, 140px) var(--r-lg) clamp(60px, 12vw, 140px) var(--r-lg);
    box-shadow: var(--shadow-2);
  }

  .institute__badge { position: absolute; left: max(0px, -1.25rem); bottom: -1.25rem; }

  @media (min-width: 900px) {
    .institute__intro { grid-template-columns: 1fr 1fr; }
  }

  /* --------------------------------------------------------- LINHA DO TEMPO */
  .timeline {
    margin-top: clamp(3rem, 7vw, 5.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
  }

  .timeline__track { display: grid; gap: 1.5rem; }

  .timeline__item {
    position: relative;
    padding-top: 1.75rem;
    border-top: 2px solid var(--border);
  }

  .timeline__item::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
  }

  .timeline__year {
    display: block;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
  }

  .timeline__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
  .timeline__text { color: var(--text-muted); font-size: var(--step-0); }

  @media (min-width: 900px) {
    .timeline { overflow: hidden; }

    .timeline__track {
      display: flex;
      gap: clamp(1.5rem, 3vw, 2.5rem);
      width: max-content;
      will-change: transform;
    }

    .timeline__item { flex: 0 0 auto; width: min(38vw, 360px); }
  }

  /* --------------------------------------------------------------- NÚMEROS */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
  }

  .stats__icon {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    margin-bottom: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
  }

  .stats__icon svg { width: 19px; height: 19px; }

  .stats__value {
    display: block;
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--navy-700);
    font-variant-numeric: tabular-nums;
  }

  .stats__value--text { font-size: var(--step-2); }

  .stats__label {
    display: block;
    margin-top: 0.6rem;
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--text-muted);
    max-width: min(26ch, 100%);
  }

  @media (min-width: 860px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* -------------------------------------------------------- CORPO CLÍNICO */
  .staff {
    display: grid;
    gap: clamp(2rem, 4vw, 2.75rem);
  }

  .staff__photo .media__img { object-position: var(--focus, center 12%); }

  .staff__photo {
    aspect-ratio: 4 / 5;
    border-radius: clamp(90px, 16vw, 170px) clamp(90px, 16vw, 170px) var(--r-lg) var(--r-lg);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-1);
  }

  /* Reserva duas linhas: os nomes têm comprimentos diferentes e sem isso o
     divisor de "Formação e títulos" desalinha entre as colunas. */
  .staff__name { font-size: var(--step-2); min-height: 2.1em; }

  .staff__role {
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--action);
  }

  .staff__crm {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  .staff__crm svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }

  .staff__details { margin-top: 1.1rem; border-top: 1px solid var(--border); }

  .staff__details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.9rem;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
  }

  .staff__details summary::after {
    content: "+";
    font-size: 1.15em;
    line-height: 1;
  }

  .staff__details[open] summary::after { content: "–"; }
  .staff__details summary:hover { color: var(--action); }

  .staff__details p {
    padding-top: 0.85rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-muted);
  }

  @media (min-width: 700px) {
    .staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1000px) {
    .staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ------------------------------------------------------------ RESULTADOS */
  .section--results { isolation: isolate; }

  .results__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Fallback estático: se o particles.js não subir, a seção segue completa. */
    background:
      radial-gradient(70% 60% at 50% 0%, rgba(54, 169, 225, 0.22), transparent 70%),
      radial-gradient(50% 50% at 88% 100%, rgba(45, 46, 131, 0.55), transparent 70%);
  }

  .results__inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  /* Itens de grid têm min-width: auto (= min-content) e podem estourar a
     coluna em telas estreitas. Zerar é o que faz o max-width valer. */
  .results__inner > * { min-width: 0; }

  .results__title { font-size: var(--step-4); max-width: min(18ch, 100%); }
  .results__lead { max-width: min(52ch, 100%); }

  .results__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
  }


  /* --------------------------------------------------------- APLICATIVO */
  .section--app {
    overflow: hidden;
    background: linear-gradient(180deg, var(--ice-50), var(--white) 55%, var(--ice-50));
  }

  .app__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(48% 46% at 78% 34%, rgba(54, 169, 225, 0.20), transparent 68%),
      radial-gradient(40% 40% at 14% 78%, rgba(45, 46, 131, 0.12), transparent 70%);
  }

  .app {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(3rem, 7vw, 4.5rem);
    align-items: end;
  }

  .app__copy { align-self: center; }

  .app__copy { display: grid; gap: 1.35rem; justify-items: start; }
  .app__copy h2 { font-size: var(--step-3); }

  /* Chip da marca do parceiro: as cores do Allis não pertencem à paleta do
     site, então ficam contidas num cartão branco em vez de soltas na página. */
  .app__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 1.15rem 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--shadow-1);
  }

  .app__brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ice-50);
  }

  .app__brand-mark img { width: 24px; height: auto; }

  .app__brand-text strong {
    display: block;
    font-size: var(--step-0);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .app__brand-text span {
    display: block;
    font-size: var(--step--1);
    line-height: 1.3;
    color: var(--text-muted);
  }

  /* --- Lista de recursos ------------------------------------------------- */
  .app__features { display: grid; gap: 1.1rem; }

  .app__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .app__features strong {
    display: block;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .app__features li > span:last-child {
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-muted);
  }

  .app__feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--action);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .app__feature-icon svg { width: 18px; height: 18px; }

  .app__features li:hover .app__feature-icon {
    background: var(--action);
    color: var(--white);
  }

  /* --- Botões das lojas ---------------------------------------------------
     Selos oficiais: não recebem tratamento de cor, apenas elevação no hover. */
  .app__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.5rem;
  }

  .app__store {
    display: block;
    border-radius: 11px;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
  }

  .app__store img { width: clamp(140px, 38vw, 168px); height: auto; }

  .app__store:hover,
  .app__store:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(11, 18, 51, 0.22);
  }

  /* --- Palco do aparelho --------------------------------------------------- */
  /* O aparelho encosta na borda inferior da seção, como se estivesse saindo
     dela. A margem negativa cancela o padding da seção e ainda avança alguns
     pixels, para que a flutuação (que sobe até 12px) nunca abra uma fresta. */
  .app__stage {
    position: relative;
    display: grid;
    place-items: end center;
    margin-bottom: calc((var(--section-y) + 20px) * -1);
    perspective: 1400px;
    isolation: isolate;
  }

  .app__halo {
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(112%, 620px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(3, 169, 156, 0.22), rgba(200, 86, 137, 0.10) 46%, rgba(3, 169, 156, 0) 74%);
    pointer-events: none;
  }

  /* Anel de luz: um cônico girando, recortado em aro por uma máscara radial.
     Só transform é animado — o gradiente em si nunca é recalculado. */
  .app__ring {
    position: absolute;
    top: 46%;
    left: 50%;
    /* Maior que o aparelho de propósito: o aro precisa escapar pelas laterais,
       senão a mão e o celular o escondem por completo. */
    width: min(132%, 720px);
    aspect-ratio: 1;
    /* Centralização por `translate` (propriedade individual), não por
       `transform`: a ordem de aplicação é translate → rotate → scale →
       transform. Com o translate dentro de `transform` ele entraria DEPOIS da
       rotação, e o anel orbitaria em vez de girar no próprio eixo. */
    translate: -50% -50%;
    rotate: 0deg;
    border-radius: 50%;
    pointer-events: none;
    /* Cores amostradas da logo do Allis: turquesa #03A99C e rosa #C85689.
       É a única passagem do site fora da paleta do laboratório — vale porque
       identifica o parceiro exatamente onde ele está sendo apresentado. */
    background: conic-gradient(from 0deg,
      rgba(3, 169, 156, 0) 0deg,
      rgba(3, 169, 156, 0.95) 44deg,
      rgba(3, 169, 156, 0.35) 98deg,
      rgba(3, 169, 156, 0) 148deg,
      rgba(200, 86, 137, 0) 222deg,
      rgba(200, 86, 137, 0.85) 268deg,
      rgba(200, 86, 137, 0) 328deg);
    /* `closest-side` faz 100% valer metade da largura — sem isso o raio é
       medido até o canto e o aro encolhe para dentro do aparelho.
       Faixa estreita e bordas curtas: é o que separa "fio de luz" de "mancha". */
    -webkit-mask: radial-gradient(circle closest-side, transparent 89.5%, #000 91.5%, #000 94%, transparent 95.5%);
    mask: radial-gradient(circle closest-side, transparent 89.5%, #000 91.5%, #000 94%, transparent 95.5%);
    animation: app-ring 16s linear infinite;
    will-change: rotate;
  }

  @keyframes app-ring {
    to { rotate: 360deg; }
  }

  .app__float { position: relative; z-index: 1; will-change: transform; }

  .app__device {
    width: min(100%, 460px);
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(11, 18, 51, 0.28));
    transform-style: preserve-3d;
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .app__ring { animation: none; }
  }

  @media (min-width: 900px) {
    .app { grid-template-columns: 1.04fr 0.96fr; }
    .app__features { gap: 1.25rem; }
  }

  /* ------------------------------------------------------------------- FAQ */
  .faq { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
  .faq__head { display: grid; gap: 1.25rem; justify-items: start; }
  .faq__head h2 { font-size: var(--step-3); }

  @media (min-width: 900px) {
    .faq { grid-template-columns: 0.85fr 1.15fr; }
    .faq__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  }

  /* --------------------------------------------------------------- CONTATO */
  .section--contact {
    border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0;
    overflow: hidden;
  }

  .contact {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
  }
  .contact__copy { display: grid; gap: 1.25rem; justify-items: start; }
  .contact__copy h2 { font-size: var(--step-3); }
  .contact__map { margin-top: 1.75rem; }

  @media (min-width: 900px) {
    .contact { grid-template-columns: 1fr 1fr; }
    .contact__copy { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  }

  /* ---------------------------------------------------------------- RODAPÉ */
  .site-footer {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
    background: var(--navy-900);
  }

  .site-footer__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--border-soft);
  }

  .site-footer__brand img { width: clamp(170px, 20vw, 210px); margin-bottom: 1.25rem; }

  .site-footer__brand p {
    max-width: min(42ch, 100%);
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-muted);
  }

  .site-footer__title {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
  }

  .site-footer__inner ul { display: grid; gap: 0.6rem; }

  .site-footer__inner li a {
    font-size: var(--step--1);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
  }

  .site-footer__inner li a:hover { color: var(--white); }

  .site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .site-footer__social svg { width: 16px; height: 16px; flex: 0 0 auto; }

  .site-footer__legal {
    position: relative;
    z-index: 1;
    padding-top: 1.75rem;
    font-size: var(--step--1);
    color: var(--text-muted);
    text-align: center;
  }

  @media (min-width: 760px) {
    .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr; }
  }
}