/* ==========================================================================
   chrome.css
   UI persistente: announcement bar, header, drawer mobile, footer, FAB.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Announcement bar — oferta 1ª parceria                                  */
/* ---------------------------------------------------------------------- */

.announce {
  background: var(--carloman-burgundy);
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  z-index: calc(var(--z-header) + 1);
  position: relative;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding-block: 0.55rem;
  flex-wrap: wrap;
}
.announce__inner strong {
  color: var(--joy);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  font-size: 0.95rem;
}
.announce__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--joy);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 oklch(72% 0.215 145 / 0.55);
  animation: announceDot 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes announceDot {
  0%   { box-shadow: 0 0 0 0    oklch(72% 0.215 145 / 0.6); }
  70%  { box-shadow: 0 0 0 10px oklch(72% 0.215 145 / 0); }
  100% { box-shadow: 0 0 0 0    oklch(72% 0.215 145 / 0); }
}
.announce__link {
  color: var(--paper);
  font-weight: var(--w-semi);
  border-bottom: 1px solid oklch(99% 0.005 27.5 / 0.50);
  padding-bottom: 1px;
  transition: border-color var(--duration) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.25rem;
}
.announce__link:hover { border-color: var(--paper); }
@media (max-width: 540px) {
  .announce__inner { font-size: 0.72rem; padding-block: 0.45rem; }
  .announce__inner strong { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .announce__dot { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: oklch(98.5% 0.003 27.5 / 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}
.header[data-scrolled="true"] {
  border-bottom-color: var(--rule);
  background: oklch(98.5% 0.003 27.5 / 0.94);
  box-shadow: 0 8px 24px -16px oklch(56% 0.215 27.5 / 0.20);
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--space-m);
  padding-block: 0.875rem;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.header__brand img {
  height: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  width: auto;
}

.header__nav { justify-self: end; }
.header__nav ul {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
}
.header__nav a {
  font-size: var(--step--1);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  padding-block: 0.25rem;
  position: relative;
  transition: color var(--duration) var(--ease-out);
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transition: right var(--duration) var(--ease-out);
}
.header__nav a:hover {
  color: var(--brand);
}
.header__nav a:hover::after { right: 0; }

.header__phone {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--w-bold);
  color: var(--brand);
  letter-spacing: var(--track-tight);
  font-feature-settings: "tnum";
}

.header__cta {
  padding: 0.7rem 1.1rem;
  font-size: var(--step--1);
}

/* Link da marca-irmã (OOH) — texto + setinha externa, após o CTA primário. */
.header__ooh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--step--1);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  white-space: nowrap;
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--duration) var(--ease-out);
}
.header__ooh-icon {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}
.header__ooh::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transition: right var(--duration) var(--ease-out);
}
.header__ooh:hover { color: var(--brand); }
.header__ooh:hover::after { right: 0; }

.header__menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: var(--hairline-strong);
  border-radius: var(--radius-pill);
  color: var(--brand);
  border-color: var(--brand);
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header__menu-toggle:hover {
  background: var(--brand);
  color: var(--paper);
  border-color: var(--brand);
}
.header__menu-toggle:active { transform: scale(0.94); }
.header__menu-toggle svg { width: 1.125rem; height: 1.125rem; }

/* Hide progressivo: phone (1280) → ooh (1024) → nav (900) → CTA (720).
   O botão OOH e o telefone seguem acessíveis no drawer mobile. */
@media (max-width: 1280px) {
  .header__phone { display: none; }
}
@media (max-width: 1024px) {
  .header__ooh { display: none; }
}
@media (max-width: 900px) {
  .header__nav { display: none; }
  .header__menu-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
  .header__cta { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Mobile drawer                                                          */
/* ---------------------------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg-red);
  color: var(--fg-on-red);
  padding: var(--space-l) var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-l);
  transform: translateY(-100%);
  transition: transform var(--duration-slow) var(--ease-out);
  visibility: hidden;
}
.mobile-nav[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
}
.mobile-nav__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-nav__close {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid oklch(95% 0.005 27.5 / 0.30);
  border-radius: var(--radius-pill);
  color: var(--paper);
  transition: background var(--duration) var(--ease-out);
}
.mobile-nav__close:hover { background: oklch(95% 0.005 27.5 / 0.10); }

.mobile-nav__list {
  display: grid;
  gap: var(--space-s);
  align-content: center;
}
.mobile-nav__list a {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.85rem;
  padding-inline: 0.25rem;
}
/* Link da marca-irmã (OOH) no drawer: destacado com borda superior + sub-label. */
.mobile-nav__ooh {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 1px solid oklch(95% 0.005 27.5 / 0.22);
}
.mobile-nav__ooh span {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  color: var(--fg-on-deep-soft);
  letter-spacing: 0;
}

.mobile-nav__foot {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--step--1);
  color: var(--fg-on-deep-soft);
}
.mobile-nav__foot a { font-weight: var(--w-semi); color: var(--paper); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
/* ======================================================================
   RODAPÉ PADRÃO CARLOMAN — clone do standard (Linha Parceiros)
   Mesma empresa (Comunicação Visual): esta LP replica o rodapé de
   /parceiros ao pé da letra — estrutura, tipografia e paleta.
   Fonte: PARCEIROS/landing-page/src/components/footer/Footer.tsx
   Os neutros do standard entram escopados aqui: a paleta de texto desta LP
   é verde por decisão própria (--ink-soft/--ink-mute), e o rodapé não a usa.
   4 colunas (12-grid: 4/3/3/2): Marca · Contato · Endereço · Redes.
   ====================================================================== */
.footer {
  --f-surface: #FFFFFF;
  --f-lua: #E2E2E2;
  --f-ink: #151515;
  --f-ink-muted: #3A3A3A;
  --f-ink-soft: #707070;
  --f-red: #E91619;
  --f-green: #00C530;
  --f-green-deep: #005616;
  /* Escala tipográfica do standard (--text-xs / --text-sm / --text-base). */
  --text-xs-std: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm-std: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --text-base-std: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  background: var(--f-surface);
  color: var(--f-ink-muted);
  border-top: 1px solid var(--f-lua);
  /* Topo = pt-10/12 do standard. Base folgada: o FAB do WhatsApp é fixed e,
     com a página rolada até o fim, cobriria a barra inferior — o respiro o
     deixa flutuar em espaço vazio. Espelha bottom + height de .whatsapp-fab. */
  padding-block: 2.5rem calc(clamp(1rem, 0.5rem + 1.5vw, 1.75rem) + 4rem + 1.5rem);
}
@media (min-width: 768px) {
  .footer { padding-block-start: 3rem; }
}

/* --- Grid principal ---------------------------------------------------- */
.footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer__main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .footer__brand         { grid-column: span 4; }
  .footer__col--contato  { grid-column: span 3; }
  .footer__col--endereco { grid-column: span 3; }
  .footer__col--redes    { grid-column: span 2; }
}

/* --- Coluna 1: marca --------------------------------------------------- */
.footer__brand img { height: 2.5rem; width: auto; }
@media (min-width: 768px) { .footer__brand img { height: 2.75rem; } }
.footer__motto {
  margin-block-start: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm-std);
  color: var(--f-ink);
  line-height: 1.375;
  max-width: 26ch;
}
/* text-sm md:text-base, como no standard. */
@media (min-width: 768px) {
  .footer__motto { font-size: var(--text-base-std); }
}
.footer__motto span { color: var(--f-red); }
.footer__kicker {
  margin-block-start: 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--f-green);
}

/* --- Eyebrow das colunas (bolinha, como no standard) ------------------- */
.footer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: var(--text-xs-std);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-block-end: 0.75rem;
}
.footer__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}
.footer__eyebrow--red   { color: var(--f-red); }
.footer__eyebrow--green { color: var(--f-green-deep); }

/* --- Coluna 2: contato ------------------------------------------------- */
.footer__contact { display: grid; gap: 0.5rem; font-size: var(--text-sm-std); }
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--f-ink);
  font-weight: 500;
  transition: color var(--duration) var(--ease-out);
}
.footer__contact a:hover { color: var(--f-green-deep); }
.footer__contact li:nth-child(2) a:hover { color: var(--f-red); }
.footer__contact-soft {
  font-weight: 400 !important;
  font-size: var(--text-xs-std);
  color: var(--f-ink-muted) !important;
}
.footer__contact-soft:hover { color: var(--f-red) !important; }
.footer__dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; }
.footer__dot--green { background: var(--f-green); }
.footer__dot--red { background: var(--f-red); }

/* --- Coluna 3: endereço ------------------------------------------------ */
.footer__addr {
  font-style: normal;
  font-size: var(--text-sm-std);
  line-height: 1.6;
  color: var(--f-ink);
}
.footer__addr-soft { color: var(--f-ink-muted); font-size: var(--text-xs-std); }

/* --- Coluna 4: redes --------------------------------------------------- */
.footer__social { display: flex; gap: 0.5rem; margin-block-end: 0.5rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--f-lua);
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    transform 160ms var(--ease-out);
}
.footer__social a:hover { transform: translateY(-2px); }
.footer__social-ig { color: var(--f-red); }
.footer__social-ig:hover { background: var(--f-red); color: #fff; border-color: var(--f-red); }
.footer__social-fb { color: var(--f-green-deep); }
.footer__social-fb:hover { background: var(--f-green-deep); color: #fff; border-color: var(--f-green-deep); }
.footer__social-wa { color: var(--f-green); }
.footer__social-wa:hover { background: var(--f-green); color: #fff; border-color: var(--f-green); }
.footer__handle {
  font-size: var(--text-xs-std);
  font-weight: 600;
  color: var(--f-green);
}

/* --- Barra inferior ---------------------------------------------------- */
.footer__bottom {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--f-lua);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .footer__bottom { margin-block-start: 2.5rem; flex-direction: row; align-items: center; }
}
.footer__copy,
.footer__impact {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  /* Anula o `p { max-width: 65ch }` do base.css: a 10px isso trava a barra em
     ~437px e quebra a linha à toa. Medida de leitura é pra corpo de texto. */
  max-width: none;
}
.footer__copy {
  color: var(--f-ink-muted);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.footer__copy strong { color: var(--f-red); font-weight: 700; }
.footer__copy a {
  color: var(--f-ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.footer__copy a:hover { color: var(--f-red); border-color: var(--f-red); }
.footer__impact { color: var(--f-ink-soft); }

/* --- Tag Antimatter: crédito discreto ---------------------------------- */
/* O SVG pinta as formas com gradientes radiais brancos, então currentColor
   não pega. Usado como máscara: lê o alfa e a cor vem do background —
   monocromático com o rodapé em qualquer superfície, sem editar o arquivo. */
.antimatter-tag {
  display: inline-block;
  width: 140px;
  aspect-ratio: 937.85 / 145.24;
  background-color: currentColor;
  color: var(--f-ink-soft);
  -webkit-mask: url("../assets/logos/tag-by-antimatter.svg") center / contain no-repeat;
          mask: url("../assets/logos/tag-by-antimatter.svg") center / contain no-repeat;
  opacity: 0.38;
  transition: opacity var(--duration) var(--ease-out);
}
.antimatter-tag:hover,
.antimatter-tag:focus-visible { opacity: 0.8; }
/* Centralizada no vão entre o copyright e a frase de impacto: os dois autos
   dividem o espaço livre em partes iguais. Não vai no canto direito porque o
   FAB do WhatsApp é fixed e cobre ali com a página rolada até o fim.
   Só a partir de md — no mobile a barra empilha e a tag alinha à esquerda. */
@media (min-width: 768px) {
  .footer__bottom .antimatter-tag { margin-inline: auto; }
}
/* ---------------------------------------------------------------------- */
/* WhatsApp FAB                                                           */
/* ---------------------------------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: var(--z-fab);
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-deep);
  color: var(--paper);
  border-radius: var(--radius-pill);
  isolation: isolate;
  box-shadow:
    0 12px 28px -10px oklch(36% 0.13 152 / 0.55),
    inset 0 1px 0 oklch(99% 0.005 27.5 / 0.18),
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.10);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.whatsapp-fab svg { width: 1.65rem; height: 1.65rem; }

/* Halo sonar: anel que expande continuamente */
.whatsapp-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  z-index: -1;
  pointer-events: none;
  animation: fabSonar 4s cubic-bezier(0.22, 1, 0.36, 1) 2s infinite;
}
@keyframes fabSonar {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.whatsapp-fab:hover {
  background: oklch(30% 0.130 152.0);
  transform: translateY(-3px);
  box-shadow:
    0 16px 36px -12px oklch(36% 0.13 152 / 0.65),
    inset 0 1px 0 oklch(99% 0.005 27.5 / 0.22),
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.14);
}
.whatsapp-fab:active {
  transform: translateY(-1px) scale(0.96);
  transition-duration: 80ms;
}
.whatsapp-fab:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1.5px var(--paper),
    0 0 0 4px var(--accent-deep);
}
.whatsapp-fab:hover::before { animation-play-state: paused; }

/* ---------------------------------------------------------------------- */
/* Páginas legais (privacidade.html, termos.html)                         */
/* ---------------------------------------------------------------------- */

.legal {
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
  max-width: 48rem;
  margin-inline: auto;
}
.legal h1 {
  font-size: var(--step-4);
  margin-bottom: var(--space-m);
}
.legal h2 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}
.legal p,
.legal li {
  font-size: var(--step-0);
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
  line-height: 1.65;
  max-width: 64ch;
}
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal a { border-bottom: 1px solid var(--rule-strong); }
.legal a:hover { border-bottom-color: var(--brand); color: var(--brand); }