/* layout.css — container, header, navegação, footer
 * Header com banner como textura de fundo, logo image, menu mobile profissional
 * Mobile-first: estilos base = mobile, media queries adicionam complexidade
 */
@layer layout {
  /* ============ CONTAINER ============ */
  .container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }
  .container--tight { max-inline-size: var(--container-tight); }

  /* ============ HEADER ============
   * Estrutura: <header class="site-header">
   *   <div class="site-header__bg" aria-hidden="true">  ← banner como textura
   *   <div class="site-header__veil" aria-hidden="true"> ← gradient escuro por cima
   *   <div class="topbar">                              ← faixa fina opcional
   *   <div class="container site-header__bar">          ← conteúdo principal
   */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    isolation: isolate; /* contém o ::before do background dentro do header */
    transition: backdrop-filter var(--dur-base) var(--ease-out);
  }

  /* ============ TOPBAR — status "atendendo" + telefone direto ============ */
  .topbar {
    position: relative;
    z-index: 1;
    background: color-mix(in oklab, var(--bg-deep) 80%, transparent);
    border-block-end: 1px solid color-mix(in oklab, var(--bg-line) 60%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: 8px;
    min-block-size: 32px;
  }
  .topbar__status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .topbar__status strong {
    color: var(--fg);
    font-weight: 600;
  }
  .topbar__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .topbar__meta a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .topbar__meta a:hover { color: var(--brand); }
  .topbar__meta svg { inline-size: 13px; block-size: 13px; }

  /* Some no mobile pra liberar espaço */
  @media (max-width: 640px) {
    .topbar__meta { display: none; }
    .topbar__inner { justify-content: center; }
  }
  /* Some completamente quando o user rolou — header compacto não precisa */
  .site-header.is-scrolled .topbar {
    block-size: 0;
    min-block-size: 0;
    padding: 0;
    overflow: hidden;
    border-block-end-color: transparent;
    opacity: 0;
    transition: block-size var(--dur-base) var(--ease-out),
                opacity    var(--dur-base) var(--ease-out);
  }
  .site-header.is-scrolled .topbar__inner {
    padding-block: 0;
    min-block-size: 0;
  }

  /* Banner textura — camada 1 (atrás de tudo) */
  .site-header__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/header-bg-768.jpg");
    background-image: image-set(
      url("../img/header-bg-768.avif") type("image/avif"),
      url("../img/header-bg-768.webp") type("image/webp"),
      url("../img/header-bg-768.jpg") type("image/jpeg")
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.55;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  @media (min-width: 769px) {
    .site-header__bg {
      background-image: url("../img/header-bg-1280.jpg");
      background-image: image-set(
        url("../img/header-bg-1280.avif") type("image/avif"),
        url("../img/header-bg-1280.webp") type("image/webp"),
        url("../img/header-bg-1280.jpg") type("image/jpeg")
      );
    }
  }
  @media (min-width: 1281px) {
    .site-header__bg {
      background-image: url("../img/header-bg-1920.jpg");
      background-image: image-set(
        url("../img/header-bg-1920.avif") type("image/avif"),
        url("../img/header-bg-1920.webp") type("image/webp"),
        url("../img/header-bg-1920.jpg") type("image/jpeg")
      );
    }
  }

  /* Veil — camada 2 (entre banner e conteúdo) — gradient escurece o banner */
  .site-header__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg) 70%, transparent) 0%,
        color-mix(in oklab, var(--bg) 88%, transparent) 100%
      ),
      radial-gradient(
        ellipse 60% 100% at 50% 40%,
        color-mix(in oklab, var(--brand-soft) 28%, transparent) 0%,
        transparent 70%
      );
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-block-end: 1px solid transparent;
    transition: backdrop-filter var(--dur-base) var(--ease-out),
                border-color    var(--dur-base) var(--ease-out);
  }

  /* Estado scrolled — header mais denso e compacto */
  .site-header.is-scrolled .site-header__bg { opacity: 0.28; }
  .site-header.is-scrolled .site-header__veil {
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg) 92%, transparent) 0%,
        color-mix(in oklab, var(--bg) 96%, transparent) 100%
      );
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-block-end-color: var(--bg-line);
  }
  .site-header.is-scrolled .site-header__bar { block-size: var(--header-h-scrl); }

  @supports not (backdrop-filter: blur(1px)) {
    .site-header__veil { background: var(--bg-elev); }
  }

  .site-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    block-size: var(--header-h);
    transition: block-size var(--dur-base) var(--ease-out);
  }

  /* ============ BRAND (logo image) ============ */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    z-index: 2; /* fica acima do drawer mobile */
  }
  .brand__logo {
    inline-size: 44px;
    block-size: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--brand) 35%, transparent));
    transition: transform var(--dur-base) var(--ease-spring),
                filter    var(--dur-base) var(--ease-out);
  }
  .brand:is(:hover, :focus-visible) .brand__logo {
    transform: rotate(-4deg) scale(1.05);
  }
  .site-header.is-scrolled .brand__logo {
    inline-size: 38px;
    block-size: 38px;
  }

  .brand__text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
  }
  .brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    letter-spacing: -0.01em;
    color: var(--fg);
  }
  .brand__tag {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-block-start: 2px;
  }

  /* ============ NAV DESKTOP ============ */
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__link {
    position: relative;
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg-muted);
    text-decoration: none;
    border-radius: var(--r-md);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav__link:hover { color: var(--fg); }
  .nav__link.is-active { color: var(--brand); }
  .nav__link.is-active::after {
    content: "";
    position: absolute;
    inset-block-end: 4px;
    inset-inline-start: 50%;
    inline-size: 18px;
    block-size: 2px;
    background: var(--brand);
    border-radius: 2px;
    transform: translateX(-50%);
  }

  .nav__cta { margin-inline-start: var(--sp-3); }

  /* ============ MENU TOGGLE (mobile) ============
   * Botão circular premium: borda brand sutil, glow on hover,
   * animação refinada hamburger → X.
   */
  .menu-toggle {
    display: none;
    position: relative;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    background: color-mix(in oklab, var(--bg-card) 75%, transparent);
    border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--bg-line));
    border-radius: 14px;
    color: var(--fg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 102;
    overflow: hidden;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  /* Glow brand pulsando sutilmente — chama atenção sem ofender */
  .menu-toggle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: -1;
  }
  .menu-toggle:is(:hover, :focus-visible) {
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 24px -8px var(--brand-glow);
  }
  .menu-toggle:is(:hover, :focus-visible)::before { opacity: 0.6; }

  /* Estado aberto: borda brand sólida + glow ativo */
  body.menu-open .menu-toggle {
    border-color: var(--brand);
    background: color-mix(in oklab, var(--brand) 12%, var(--bg-card));
    box-shadow: 0 0 28px -6px var(--brand-glow);
  }

  .menu-toggle__bars {
    position: relative;
    inline-size: 20px;
    block-size: 14px;
  }
  .menu-toggle__bars::before,
  .menu-toggle__bars::after,
  .menu-toggle__bars span {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 420ms var(--ease-spring),
                opacity   220ms var(--ease-out),
                inline-size 320ms var(--ease-out),
                inset-inline-start 320ms var(--ease-out);
    transform-origin: center;
  }
  .menu-toggle__bars::before { inset-block-start: 0; }
  .menu-toggle__bars span     { inset-block-start: 6px; inline-size: 75%; inset-inline-start: 25%; }
  .menu-toggle__bars::after  { inset-block-end: 0; inline-size: 60%; }

  /* Hover: barras alinham (preview de simetria) */
  .menu-toggle:is(:hover, :focus-visible) .menu-toggle__bars span,
  .menu-toggle:is(:hover, :focus-visible) .menu-toggle__bars::after {
    inline-size: 100%;
    inset-inline-start: 0;
  }

  /* Aberto: vira X perfeito */
  body.menu-open .menu-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
    inline-size: 100%;
    inset-inline-start: 0;
  }
  body.menu-open .menu-toggle__bars span {
    opacity: 0;
    transform: translateX(-10px);
  }
  body.menu-open .menu-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
    inline-size: 100%;
    inset-inline-start: 0;
  }

  /* ============ MENU OVERLAY (backdrop mobile) ============ */
  .menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, var(--bg-deep) 75%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  body.menu-open .menu-overlay {
    display: block;
    opacity: 1;
  }

  /* ============ NAV MOBILE — FULL-SCREEN EDITORIAL OVERLAY ============
   * ÚNICA fonte de verdade da visibilidade: clip-path do container do drawer,
   * alternado pela classe body.menu-open. Efeitos decorativos apenas decoram
   * — todos são CONFINADOS e repousam por DEFAULT no estado seguro.
   *
   * Sequência de abertura (ao tocar no hambúrguer):
   *  0ms    → revelação por clip-path: circle() com origem no hambúrguer (740ms)
   *  280ms  → linha brand corre no topo (scaleX, confinada a 2px)
   *  340ms  → eyebrow "Menu · Navegação" desce do topo
   *  380ms+ → links entram um por um vindo da direita (stagger 60ms, blur clearing)
   *  760ms  → CTA WhatsApp sobe
   *  840ms  → rodapé (socials + tag) sobe
   *
   * Fechamento (ao tocar no X) — sempre mais rápido que a abertura:
   *  0ms    → conteúdo sai simultaneamente (220–260ms, delays zerados)
   *  0ms    → clip-path colapsa de volta ao hambúrguer (420ms ≈ 57% da abertura)
   *  420ms  → visibility: hidden — menu sumiu, zero resíduo visual
   *
   * MODO DE FALHA BENIGNO (navegadores in-app que descartam animações):
   * se qualquer transição for interrompida/descartada, o menu apenas
   * aparece ou some — nenhuma camada full-screen depende de animação
   * terminar, nenhum fill-mode segura frame intermediário sobre o conteúdo.
   */
  @media (max-width: 860px) {
    .nav__cta { display: none; }
    .menu-toggle { display: inline-flex; }

    /* O <nav> vira a tela inteira */
    .nav {
      position: fixed;
      inset: 0;
      inline-size: 100%;
      block-size: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 0;
      padding: calc(var(--header-h) + var(--sp-6)) clamp(1.5rem, 8vw, 3rem) clamp(1.5rem, 5vw, 3rem);
      background: var(--bg-deep);
      background-image:
        radial-gradient(
          ellipse 100% 80% at 100% 0%,
          color-mix(in oklab, var(--brand) 28%, transparent),
          transparent 70%),
        radial-gradient(
          ellipse 80% 70% at 0% 100%,
          color-mix(in oklab, var(--brand-soft) 32%, transparent),
          transparent 70%),
        radial-gradient(
          ellipse 50% 40% at 50% 50%,
          color-mix(in oklab, var(--brand-deep) 18%, transparent),
          transparent 80%);
      border-inline-start: none;
      box-shadow: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 100;

      /* Estado fechado = DEFAULT seguro: clip-path origem no botão hambúrguer.
       * Se nenhuma transição rodar, o menu simplesmente não está lá. */
      -webkit-clip-path: circle(0% at calc(100% - 44px) 44px);
      clip-path: circle(0% at calc(100% - 44px) 44px);
      transition: clip-path 420ms var(--ease-out),
                  -webkit-clip-path 420ms var(--ease-out),
                  visibility 0ms linear 420ms;
      visibility: hidden;
      -webkit-overflow-scrolling: touch;
      isolation: isolate;
    }
    body.menu-open .nav {
      -webkit-clip-path: circle(150% at calc(100% - 44px) 44px);
      clip-path: circle(150% at calc(100% - 44px) 44px);
      visibility: visible;
      transition: clip-path 740ms var(--ease-out),
                  -webkit-clip-path 740ms var(--ease-out),
                  visibility 0ms linear 0ms;
    }

    /* ⚠️ ANTI-PADRÃO REMOVIDO (v19): existia aqui uma "cortina" .nav::before —
     * gradiente vermelho full-screen varrendo a viewport via
     * `animation: nav-curtain-in/out ... forwards`. Em webviews (Instagram/
     * Facebook), que estrangulam/descartam animações, o `forwards` segurava
     * o frame intermediário (translateX(0)) e o gradiente ficava preso
     * cobrindo o drawer — exatamente o modo de falha catastrófico proibido.
     * O gesto cinematográfico de abertura é EXCLUSIVAMENTE a revelação por
     * clip-path acima; acentos decorativos abaixo são todos confinados
     * (linha de 2px, grid com mask, glows radiais no background).
     * NÃO reintroduzir camadas full-screen dependentes de animação terminar. */

    /* GRID industrial decorativo — atrás do conteúdo */
    .nav::after {
      content: "";
      position: absolute;
      inset-block-start: var(--header-h);
      inset-inline: clamp(1.5rem, 8vw, 3rem);
      block-size: 2px;
      background: linear-gradient(
        90deg,
        var(--brand) 0%,
        var(--brand-hot) 50%,
        transparent 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 500ms var(--ease-out) 280ms;
      z-index: 1;
    }
    body.menu-open .nav::after { transform: scaleX(1); }

    /* Grid decorativo no <nav> usando uma camada extra (a .nav__grid) */
    .nav__grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right, color-mix(in oklab, var(--fg) 5%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in oklab, var(--fg) 5%, transparent) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
      opacity: 0;
      transition: opacity 400ms var(--ease-out) 300ms;
      pointer-events: none;
      z-index: 0;
    }
    body.menu-open .nav__grid { opacity: 0.55; }

    /* ===== HEADER do drawer: eyebrow + linha brand ===== */
    .nav__heading {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      padding-block-end: var(--sp-5);
      opacity: 0;
      transform: translateY(-12px);
      transition: opacity 400ms var(--ease-out) 340ms,
                  transform 400ms var(--ease-out) 340ms;
      position: relative;
      z-index: 3;
    }
    body.menu-open .nav__heading {
      opacity: 1;
      transform: translateY(0);
    }
    .nav__heading-eyebrow {
      font-size: var(--fs-xs);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--brand);
      font-weight: 600;
      position: relative;
      padding-inline-start: 18px;
    }
    /* Bolinha brand antes do eyebrow */
    .nav__heading-eyebrow::before {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 0;
      inline-size: 8px;
      block-size: 8px;
      background: var(--brand-hot);
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 12px var(--brand-hot);
      animation: nav-eyebrow-dot 2s var(--ease-in-out) infinite;
    }
    @keyframes nav-eyebrow-dot {
      0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
      50%      { transform: translateY(-50%) scale(1.4); opacity: 0.6; }
    }
    .nav__heading-line { display: none; }

    /* ===== LINKS — layout editorial com numeração ===== */
    .nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: nav-counter;
      position: relative;
      z-index: 3;
    }
    .nav__list > li {
      counter-increment: nav-counter;
      border-block-end: 1px solid color-mix(in oklab, var(--fg) 7%, transparent);
      opacity: 0;
      transform: translateX(48px);
      filter: blur(8px);
      transition: opacity 600ms var(--ease-out),
                  transform 600ms var(--ease-out),
                  filter 600ms var(--ease-out);
    }
    .nav__list > li:last-child { border-block-end: none; }

    /* Stagger ao abrir — vindo da direita, com blur clearing */
    body.menu-open .nav__list > li {
      opacity: 1;
      transform: translateX(0);
      filter: blur(0);
    }
    body.menu-open .nav__list > li:nth-child(1) { transition-delay: 380ms; }
    body.menu-open .nav__list > li:nth-child(2) { transition-delay: 440ms; }
    body.menu-open .nav__list > li:nth-child(3) { transition-delay: 500ms; }
    body.menu-open .nav__list > li:nth-child(4) { transition-delay: 560ms; }
    body.menu-open .nav__list > li:nth-child(5) { transition-delay: 620ms; }
    body.menu-open .nav__list > li:nth-child(6) { transition-delay: 680ms; }

    body:not(.menu-open) .nav__list > li {
      transition-duration: 260ms;
      transition-delay: 0ms;
    }

    .nav__link {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: var(--sp-4);
      padding-block: clamp(var(--sp-3), 2.8vw, var(--sp-4));
      padding-inline: 0;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 6vw, 2.25rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--fg);
      text-decoration: none;
      border-radius: 0;
      transition: color 300ms var(--ease-out),
                  padding-inline-start 300ms var(--ease-out),
                  letter-spacing 300ms var(--ease-out);
      overflow: hidden;
    }
    .nav__link::before {
      content: counter(nav-counter, decimal-leading-zero);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--fg-dim);
      transition: color 300ms var(--ease-out);
      align-self: start;
      margin-block-start: 0.85em;
    }
    .nav__link::after {
      content: "";
      inline-size: 28px;
      block-size: 2px;
      background: var(--brand);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 320ms var(--ease-out);
      align-self: center;
    }
    .nav__link:hover,
    .nav__link:focus-visible,
    .nav__link.is-active {
      color: var(--brand);
      padding-inline-start: var(--sp-3);
      background: none;
      letter-spacing: 0;
    }
    .nav__link:hover::before,
    .nav__link:focus-visible::before,
    .nav__link.is-active::before {
      color: var(--brand);
    }
    .nav__link:hover::after,
    .nav__link:focus-visible::after,
    .nav__link.is-active::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    /* CTA grande dentro do drawer */
    .nav__mobile-cta {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      margin-block-start: var(--sp-5);
      opacity: 0;
      transform: translateY(20px);
      filter: blur(8px);
      transition: opacity 500ms var(--ease-out) 760ms,
                  transform 500ms var(--ease-out) 760ms,
                  filter 500ms var(--ease-out) 760ms;
      position: relative;
      z-index: 3;
    }
    body.menu-open .nav__mobile-cta {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    body:not(.menu-open) .nav__mobile-cta {
      transition-duration: 220ms;
      transition-delay: 0ms;
    }
    .nav__mobile-cta .btn {
      inline-size: 100%;
      padding-block: var(--sp-4);
      font-size: var(--fs-md);
    }

    /* Rodapé do drawer: socials + tag */
    .nav__mobile-foot {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--sp-4);
      padding-block-start: var(--sp-5);
      border-block-start: 1px solid color-mix(in oklab, var(--fg) 7%, transparent);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 500ms var(--ease-out) 840ms,
                  transform 500ms var(--ease-out) 840ms;
      position: relative;
      z-index: 3;
    }
    body.menu-open .nav__mobile-foot {
      opacity: 1;
      transform: translateY(0);
    }
    body:not(.menu-open) .nav__mobile-foot {
      transition-duration: 220ms;
      transition-delay: 0ms;
    }
    .nav__mobile-foot-socials {
      display: inline-flex;
      gap: var(--sp-2);
    }
    .nav__mobile-foot-socials a {
      inline-size: 44px;
      block-size: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in oklab, var(--fg) 5%, transparent);
      border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
      border-radius: var(--r-md);
      color: var(--fg-muted);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: border-color var(--dur-fast) var(--ease-out),
                  background var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .nav__mobile-foot-socials a svg {
      position: relative;
      z-index: 1;
      transition: color var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .nav__mobile-foot-socials a:hover,
    .nav__mobile-foot-socials a:focus-visible {
      transform: translateY(-2px);
    }
    .nav__mobile-foot-socials a:hover svg,
    .nav__mobile-foot-socials a:focus-visible svg {
      color: #fff;
      transform: scale(1.08);
    }
    .nav__mobile-foot-socials a.social--instagram::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      opacity: 0;
      transition: opacity 280ms var(--ease-out);
      z-index: 0;
    }
    .nav__mobile-foot-socials a.social--whatsapp::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
      opacity: 0;
      transition: opacity 280ms var(--ease-out);
      z-index: 0;
    }
    .nav__mobile-foot-socials a.social--instagram:hover::before,
    .nav__mobile-foot-socials a.social--instagram:focus-visible::before,
    .nav__mobile-foot-socials a.social--whatsapp:hover::before,
    .nav__mobile-foot-socials a.social--whatsapp:focus-visible::before {
      opacity: 1;
    }
    .nav__mobile-foot-socials a.social--instagram:hover,
    .nav__mobile-foot-socials a.social--instagram:focus-visible,
    .nav__mobile-foot-socials a.social--whatsapp:hover,
    .nav__mobile-foot-socials a.social--whatsapp:focus-visible {
      border-color: transparent;
    }
    .nav__mobile-foot-socials a.social--phone:hover,
    .nav__mobile-foot-socials a.social--phone:focus-visible {
      border-color: var(--brand);
      background: color-mix(in oklab, var(--brand) 12%, transparent);
    }
    .nav__mobile-foot-socials a.social--phone:hover svg,
    .nav__mobile-foot-socials a.social--phone:focus-visible svg {
      color: var(--brand);
    }
    .nav__mobile-foot-socials svg {
      inline-size: 18px;
      block-size: 18px;
    }
    .nav__mobile-foot-tag {
      font-size: var(--fs-xs);
      color: var(--fg-dim);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .nav__mobile-foot-tag strong {
      display: block;
      color: var(--fg);
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: none;
      font-size: var(--fs-sm);
      margin-block-start: 4px;
    }

    body.menu-open { overflow: hidden; }

    .menu-overlay { display: none !important; }
  }

  /* ====== REDUCED MOTION: cross-fade simples ====== */
  @media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .nav {
      -webkit-clip-path: none !important;
      clip-path: none !important;
      opacity: 0;
      transition: opacity 200ms linear, visibility 0ms linear 200ms;
    }
    body.menu-open .nav {
      opacity: 1;
      transition: opacity 200ms linear, visibility 0ms linear 0ms;
    }
    .nav__grid,
    .nav__heading,
    .nav__list > li,
    .nav__mobile-cta,
    .nav__mobile-foot {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
      animation: none !important;
    }
    .nav::after { transform: scaleX(1) !important; transition: none !important; }
    .nav__heading-eyebrow::before { animation: none !important; }
  }

  @media (min-width: 861px) {
    .nav__heading,
    .nav__mobile-cta,
    .nav__mobile-foot,
    .nav__grid { display: none; }
  }

  /* ============ FOOTER ============ */
  .site-footer {
    position: relative;
    margin-block-start: var(--sp-9);
    padding-block-start: var(--sp-8);
    padding-block-end: var(--sp-6);
    background: var(--bg-deep);
    border-block-start: 1px solid var(--bg-line);
    overflow: hidden;
    isolation: isolate;
  }

  /* Veil escuro do footer — garante leitura do texto */
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg-deep);
    pointer-events: none;
  }
  /* Linha brand fina no topo do footer (a barra original) */
  .site-footer::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--brand) 50%,
      transparent 100%
    );
    opacity: 0.5;
    z-index: 1;
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin-block-end: var(--sp-7);
  }
  @media (max-width: 860px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .footer__col--brand { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .footer__grid { grid-template-columns: 1fr; }
  }

  .footer__col h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg);
    margin-block-end: var(--sp-4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer__col a {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .footer__col a:hover { color: var(--brand); }

  .footer__brand-row {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-4);
  }
  .footer__brand-logo {
    inline-size: 48px;
    block-size: 48px;
    object-fit: contain;
  }
  .footer__brand-mark {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--fg);
  }
  .footer__brand-mark span { color: var(--brand); }

  /* ============ FOOTER LOGO FEATURED ============
   * A nova logo é uma peça gráfica completa (monograma + nome + tagline + barbell).
   * Tratamos com peso visual mas contido — mobile-first com tamanhos fluidos.
   * Glow sutil brand ao redor para integrar com a paleta sem competir.
   */
  .footer__logo-featured {
    display: flex;
    justify-content: flex-start;
    margin-block-end: var(--sp-4);
    position: relative;
  }
  .footer__logo-featured picture {
    display: inline-block;
    position: relative;
    line-height: 0;
  }
  .footer__logo-img {
    inline-size: clamp(140px, 22vw, 200px);
    block-size: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--r-lg);
    /* Glow sutil brand atrás da logo — integra com a paleta */
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent),
      0 12px 40px -16px color-mix(in oklab, var(--brand) 35%, transparent),
      0 4px 16px -4px rgba(0, 0, 0, 0.4);
    transition: transform 480ms var(--ease-spring),
                box-shadow 480ms var(--ease-out);
  }
  .footer__logo-img:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent),
      0 18px 50px -14px color-mix(in oklab, var(--brand) 50%, transparent),
      0 6px 20px -4px rgba(0, 0, 0, 0.5);
  }
  @media (max-width: 640px) {
    .footer__logo-featured {
      justify-content: center;
      margin-block-end: var(--sp-5);
    }
    .footer__logo-img {
      inline-size: clamp(120px, 32vw, 180px);
    }
  }

  .footer__desc {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    margin-block-end: var(--sp-4);
    max-inline-size: 36ch;
    line-height: 1.6;
  }

  /* ============ SCHEDULE STATUS — indicador live de atendimento ============
   * Estados visuais distintos baseados em estado real (horário do usuário):
   *  - is-open   = verde brand, dot pulsando devagar (sinal "live")
   *  - is-closed = neutro fg-dim, dot estático
   *
   * Por que não pulsa rápido: pulse rápido = ansiedade. Aqui é informacional,
   * não persuasivo. Cor de status (verde/cinza) faz o trabalho sozinha.
   */
  .schedule-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    margin-block-end: var(--sp-3);
    background: color-mix(in oklab, var(--bg-card) 50%, transparent);
    border: 1px solid var(--bg-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
    transition: background 320ms var(--ease-out),
                border-color 320ms var(--ease-out),
                color 320ms var(--ease-out);
  }
  .schedule-status__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--fg-dim);
    flex-shrink: 0;
    transition: background 320ms var(--ease-out),
                box-shadow 320ms var(--ease-out);
  }
  .schedule-status.is-open {
    background: color-mix(in oklab, #25D366 12%, transparent);
    border-color: color-mix(in oklab, #25D366 35%, transparent);
    color: color-mix(in oklab, #25D366 80%, var(--fg));
  }
  .schedule-status.is-open .schedule-status__dot {
    background: #25D366;
    box-shadow: 0 0 0 0 color-mix(in oklab, #25D366 60%, transparent);
    animation: schedule-pulse 2.8s ease-in-out infinite;
  }
  .schedule-status.is-closed {
    background: color-mix(in oklab, var(--bg-card) 70%, transparent);
    border-color: var(--bg-line);
    color: var(--fg-dim);
  }
  .schedule-status.is-closed .schedule-status__dot {
    background: color-mix(in oklab, var(--fg) 25%, transparent);
  }
  @keyframes schedule-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, #25D366 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, #25D366 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .schedule-status.is-open .schedule-status__dot { animation: none; }
  }

  /* Lista de horários — visual leve, escaneável */
  .schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .schedule-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    padding-block: 0.25rem;
    border-block-end: 1px dashed color-mix(in oklab, var(--fg) 7%, transparent);
  }
  .schedule-list li:last-child { border-block-end: none; }
  .schedule-list__day {
    color: var(--fg-muted);
    font-weight: 500;
  }
  .schedule-list__hours {
    color: var(--fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }

  .footer__social {
    display: inline-flex;
    gap: var(--sp-2);
  }
  .footer__social a {
    inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--bg-card) 60%, transparent);
    border: 1px solid var(--bg-line);
    border-radius: var(--r-md);
    color: var(--fg-muted);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .footer__social svg {
    position: relative;
    z-index: 1;
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .footer__social a:hover,
  .footer__social a:focus-visible {
    transform: translateY(-2px);
  }
  .footer__social a:hover svg,
  .footer__social a:focus-visible svg {
    color: #fff;
    transform: scale(1.08);
  }

  /* Instagram — gradiente oficial revelado no hover */
  .footer__social a.social--instagram::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
      #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
    z-index: 0;
  }
  .footer__social a.social--instagram:hover,
  .footer__social a.social--instagram:focus-visible { border-color: transparent; }
  .footer__social a.social--instagram:hover::before,
  .footer__social a.social--instagram:focus-visible::before { opacity: 1; }

  /* WhatsApp — verde oficial #25D366 */
  .footer__social a.social--whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
    z-index: 0;
  }
  .footer__social a.social--whatsapp:hover,
  .footer__social a.social--whatsapp:focus-visible { border-color: transparent; }
  .footer__social a.social--whatsapp:hover::before,
  .footer__social a.social--whatsapp:focus-visible::before { opacity: 1; }

  .footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--bg-line);
    font-size: var(--fs-xs);
    color: var(--fg-dim);
  }
  .footer__legal-left {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
  }
  .footer__copy { color: var(--fg-dim); }

  /* CREF badge — destaque por contraste de cor + ícone shield, sem ser agressivo.
     Marca regulamentar é credibilidade: deve ser legível mas não competir com CTA. */
  .cref-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: color-mix(in oklab, var(--brand) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .cref-badge svg {
    inline-size: 14px;
    block-size: 14px;
    color: var(--brand);
    flex-shrink: 0;
  }
  .cref-badge strong {
    color: var(--fg);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* Variante inline — usada na seção Sobre como prova de autoridade.
     Margem block-end + max-inline-size para respiração; texto completo. */
  .cref-badge--inline {
    margin-block: var(--sp-3) var(--sp-4);
    padding: 0.5rem 0.875rem;
    white-space: normal;
    max-inline-size: max-content;
  }
  @media (max-width: 480px) {
    .cref-badge--inline {
      font-size: 0.7rem;
      gap: 0.4rem;
    }
  }
  .footer__legal {
    display: inline-flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer__legal a {
    color: var(--fg-dim);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .footer__legal a:hover { color: var(--fg); }
  .footer__legal button {
    background: none;
    border: none;
    color: var(--fg-dim);
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .footer__legal button:hover { color: var(--fg); }

  @media (max-width: 640px) {
    .footer__bar { flex-direction: column; align-items: flex-start; }
  }
}