/* ==========================================================================
   JOSÉ REYZ: LOCUTOR
   styles.css: Fase 3
   Só tokens. Nenhum valor de cor, tamanho ou espaço literal fora do :root.
   Referência: DESIGN-SYSTEM.md §2 (tokens), §3 (tipo), §4 (espaço),
   §5 (raio/profundidade), §6 (componentes), §7 (movimento).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- primitivas: grafite (hue 265, croma mínimo) ---- */
  --graphite-950: oklch(0.165 0.008 265);
  --graphite-900: oklch(0.21 0.009 265);
  --graphite-850: oklch(0.255 0.01 265);
  --graphite-800: oklch(0.3 0.011 265);
  --graphite-600: oklch(0.55 0.008 265);

  /* ---- primitivas: osso (texto quente, nunca branco puro) ---- */
  --bone-050: oklch(0.955 0.004 90);
  --bone-300: oklch(0.775 0.006 90);
  --bone-400: oklch(0.655 0.007 90);

  /* ---- primitivas: latão (o único acento) ---- */
  --brass-300: oklch(0.865 0.115 86);
  --brass-400: oklch(0.805 0.112 82);
  --brass-900: oklch(0.19 0.02 80);

  /* ---- semânticas: superfícies ---- */
  --color-bg: var(--graphite-950);
  --color-surface: var(--graphite-900);
  --color-surface-2: var(--graphite-850);
  --color-surface-3: var(--graphite-800);

  /* ---- semânticas: texto ---- */
  --color-text: var(--bone-050);
  --color-text-muted: var(--bone-300);
  --color-text-subtle: var(--bone-400);

  /* ---- semânticas: ação ---- */
  --color-accent: var(--brass-400);
  --color-accent-hover: var(--brass-300);
  --color-on-accent: var(--brass-900);
  --color-focus: var(--color-accent);

  /* ---- semânticas: linha ---- */
  --color-border: var(--graphite-600);

  /* ---- tipografia ---- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs: 0.8125rem;
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --text-2xl: clamp(2rem, 1.45rem + 2.3vw, 2.875rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);
  --text-4xl: clamp(3.25rem, 0.9rem + 11.6vw, 10rem);

  --leading-display: 0.95;
  --leading-heading: 1.06;
  --leading-lead: 1.35;
  --leading-body: 1.6;
  --leading-small: 1.45;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-wordmark: 0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --measure: 62ch;
  --measure-narrow: 44ch;

  /* ---- espaço (base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-space: clamp(5rem, 7.5vw, 8rem);

  /* ---- layout ---- */
  --container-max: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --grid-gap: var(--space-6);
  --header-height: 4.5rem;
  /* margem externa igual dos dois lados: 20–56px, ou o que centraliza o container */
  --edge: max(var(--gutter), calc((100% - var(--container-max)) / 2));

  /* ---- raio e profundidade ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;
  --shadow-md: 0 10px 30px oklch(0 0 0 / 0.45);

  /* ---- movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 80ms;
  --dur-base: 120ms;
  --dur-slow: 180ms;
  --dur-reveal: 320ms;
  --reveal-step: 40ms;
  --reveal-shift: 1rem;

  /* ---- camadas ---- */
  --z-header: 100;
  --z-float: 200;
  --z-skip: 300;

  /* ---- componente: botão ---- */
  --btn-height: 3rem;
  --btn-height-sm: 2.75rem;
  --btn-padding-inline: var(--space-6);
  --btn-gap: var(--space-2);
  --btn-radius: var(--radius-sm);
  --btn-font: var(--weight-medium) var(--text-base) / 1 var(--font-body);
  --btn-transition: var(--dur-base) var(--ease-out);

  /* ---- componente: mídia ---- */
  --float-size: 3.5rem;
  --float-offset: var(--space-6);
  --play-size: 4rem;
  --dur-image: 600ms;
}


/* ==========================================================================
   1. RESET ENXUTO
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body,
h1, h2, h3, p, ul, ol, figure, details, summary {
  margin: 0;
}

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

img, svg, iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--text-2xl);
}

/* títulos de faixa e de bloco: Poppins, não Playfair (DESIGN-SYSTEM §3.1) */
h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-lead);
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-4);
  z-index: var(--z-skip);
  transform: translateY(-150%);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(var(--space-2));
}

/* ==========================================================================
   5. BOTÕES (§6.1)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-inline);
  border-radius: var(--btn-radius);
  font: var(--btn-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--btn-transition),
    color var(--btn-transition),
    transform var(--btn-transition);
}

.btn--sm {
  min-height: var(--btn-height-sm);
  padding-inline: var(--space-4);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--secondary {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

.btn--secondary:hover {
  background-color: var(--color-surface-3);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
}

.btn--ghost:hover {
  background-color: var(--color-surface-2);
}

.btn:active {
  transform: scale(0.985);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   6. HEADER E NAVEGAÇÃO (§6.6)
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-height);
  padding-inline: var(--gutter);
  background-color: var(--color-bg);
  transition: background-color var(--dur-slow) var(--ease-out);
}

/* estado aplicado pelo script.js ao rolar: degrau de tom, nunca sombra */
.site-header.is-stuck {
  background-color: var(--color-surface);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  margin-inline-start: auto;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding-block-end: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* traço dourado que cresce sob o link: detalhe de marca, sem filete permanente */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--color-text);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.menu-toggle {
  display: none;
  inline-size: var(--btn-height-sm);
  block-size: var(--btn-height-sm);
  place-content: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  background-color: var(--color-text);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Mobile: nav recolhida apenas quando o JS está disponível */
@media (max-width: 1023.98px) {
  .js .site-nav {
    display: none;
  }

  .js .menu-toggle {
    display: grid;
  }

  .js .site-nav.is-open {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding: var(--space-6) var(--gutter) var(--space-8);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md); /* taste-skill-ignore: painel do menu é overlay real */
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-header__actions .btn {
    display: none;
  }
}

/* estado aberto do botão de menu */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* ==========================================================================
   7. ESTRUTURA DE SEÇÃO (§1.5 · §4.2)
   ========================================================================== */

main {
  display: block;
}

.section {
  padding-block: var(--section-space);
  padding-inline: var(--edge);
}

.section__head {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-16);
}

.section__lead {
  max-inline-size: var(--measure);
  color: var(--color-text-muted);
}

/* cabeçalho em duas colunas: o título à esquerda, a frase de apoio à direita */
@media (min-width: 1024px) {
  .section__head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }

  .section__head--split h2 {
    grid-column: 1 / span 5;
  }

  .section__head--split .section__lead {
    grid-column: 7 / span 5;
    margin-block-end: var(--space-1);
  }
}

/* ==========================================================================
   8. HERÓI: split 7/5 (§1.6)
   ========================================================================== */

.hero {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-12);
  padding-inline: var(--edge);
}

.hero__text {
  display: grid;
  gap: var(--space-6);
  align-content: center;
  justify-items: start;
}

.hero__lead {
  max-inline-size: var(--measure-narrow);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
}

@media (max-width: 639.98px) {
  .hero__actions {
    inline-size: 100%;
  }

  .hero__actions .btn {
    inline-size: 100%;
  }

  /* mesma composição de botões do herói */
  .contact__actions .btn {
    inline-size: 100%;
  }
}

.hero__media {
  margin: 0;
  /* no mobile a foto é uma faixa de borda a borda */
  margin-inline: calc(var(--edge) * -1);
  background-color: var(--color-surface);
  overflow: hidden;
  position: relative;
}

/* costura: a foto entra no grafite pela borda esquerda, sem linha reta */
@media (min-width: 1024px) {
  .hero__media::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 26%;
    background: linear-gradient(to right, var(--color-bg), transparent); /* taste-skill-ignore: scrim neutro de costura */
    pointer-events: none;
  }
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
  /* tratamento único de foto (DESIGN-SYSTEM §1.6): escurece e assenta a luz do estúdio na paleta */
  filter: brightness(0.9) saturate(0.82);
  animation: hero-in 800ms var(--ease-out) both;
}

@keyframes hero-in {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1);
  }
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: stretch;
    padding-inline-start: var(--edge);
    padding-inline-end: 0;
  }

  .hero__text {
    grid-column: 1 / span 6;
  }

  .hero__media {
    grid-column: 7 / -1;
    margin-inline: 0;
    block-size: clamp(24rem, 38vw, 36rem);
  }

  .hero__media img {
    aspect-ratio: auto;
  }
}


/* ==========================================================================
   9. AS QUATRO VOZES: índice editorial, sem caixa
   ========================================================================== */

.console {
  display: grid;
}

.band {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
}

/* traço dourado que fecha a linha sob o cursor: o mesmo idioma da navegação */
.band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.band:hover::after,
.band:focus-within::after {
  transform: scaleX(1);
}

.band__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.band__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-out);
}

.band:hover .band__icon,
.band:focus-within .band__icon {
  color: var(--color-accent);
}

.band__meta {
  display: flex;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.7;
  color: var(--color-accent);
}

.band__desc {
  max-inline-size: 46ch;
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-out);
}

.band:hover .band__desc,
.band:focus-within .band__desc {
  color: var(--color-text);
}

/* a nota de diferencial dentro da descrição fala mais alto que o resto */
.band__desc strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ação em texto: alvo de 44px sem desenhar um botão em cada linha */
.band .btn {
  justify-self: start;
  min-height: 2.75rem;
  padding-inline: 0;
  background-color: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.32em;
  text-decoration-color: var(--color-text-muted);
  transition:
    color var(--dur-base) var(--ease-out),
    text-decoration-color var(--dur-base) var(--ease-out);
}

.band .btn:hover {
  background-color: transparent;
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

@media (min-width: 1024px) {
  .band {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--grid-gap);
    align-items: center;
    padding-block: var(--space-8);
  }

  .band__title {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .band__meta {
    grid-column: 1 / span 4;
    grid-row: 2;
    padding-inline-start: calc(1.5rem + var(--space-2));
  }

  .band__desc {
    grid-column: 5 / span 4;
    grid-row: 1 / span 2;
  }

  .band .btn {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    justify-self: end;
    text-align: end;
    text-wrap: balance;
  }
}

/* ==========================================================================
   10. DEMONSTRAÇÕES (§6.8)
   ========================================================================== */

.player {
  /* sem painel: o player é um objeto claro solto no grafite, não um bloco de cor */
  max-inline-size: 46rem;
  margin-block: 0 var(--space-12);
  margin-inline: auto;
}

.player iframe {
  inline-size: 100%;
  block-size: 22rem;
  border: 0;
  border-radius: var(--radius-sm);
}

.player figcaption {
  padding-block-start: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.player a {
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}

.player a:hover {
  color: var(--color-text);
}

.video-grid {
  display: grid;
  gap: var(--space-8);
}

.video {
  margin: 0;
}

.video__facade {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}

.video__facade img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.92);
  transition: transform var(--dur-image) var(--ease-out);
}

.video__facade:hover img,
.video__facade:focus-visible img {
  transform: scale(1.04);
}

.video__facade:active {
  transform: scale(0.99);
}

.video__facade:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: var(--play-size);
  block-size: var(--play-size);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-3);
  color: var(--color-text);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    scale var(--dur-base) var(--ease-out);
}

.video__play svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* dourado só no hover: o acento não se repete em 4 ícones parados */
.video__facade:hover .video__play,
.video__facade:focus-visible .video__play {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  scale: 1.05;
}

.video figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-lead);
}

.video-grid__more {
  margin-block-start: var(--space-8);
}

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


/* ==========================================================================
   11. A FRASE: respiro com uma barra dourada
   ========================================================================== */

.declaration {
  padding-block: calc(var(--section-space) * 1.4);
  padding-inline: var(--edge);
}

.declaration__text {
  max-inline-size: 20ch;
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* no tablet a frase já pode ter presença de título */
@media (min-width: 768px) {
  .declaration__text {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   12. SOBRE (§1.5: split 5/7)
   ========================================================================== */

.about__media {
  margin: 0;
  background-color: var(--color-surface);
}

/* no telefone e no tablet o retrato não precisa ocupar a largura toda */
@media (max-width: 1023.98px) {
  .about__media {
    max-inline-size: 30rem;
    margin-inline: auto;
  }
}

.about__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius-md);
  filter: brightness(1.02) saturate(0.82);
}

.about__text {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  margin-block-start: var(--space-8);
}

.about__text p {
  max-inline-size: var(--measure);
  color: var(--color-text-muted);
}

.about__facts {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.about__facts li {
  position: relative;
  padding-inline-start: var(--space-4);
  color: var(--color-text);
}

.about__facts li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0;
  inline-size: var(--space-1);
  block-size: var(--space-1);
  background-color: var(--color-text-subtle);
}

.about__cta {
  margin-block-start: var(--space-2);
}

@media (min-width: 1024px) {
  .about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .about__media {
    grid-column: 1 / span 5;
  }

  .about__text {
    grid-column: 7 / span 6;
    margin-block-start: 0;
  }
}

/* ==========================================================================
   13. FAQ (§6.5)
   ========================================================================== */

.faq__head {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.faq__list {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}

.faq__item {
  border-radius: var(--radius-sm);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-lead);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-base) var(--ease-out);
}

.faq__item:hover .faq__question {
  color: var(--color-text);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1;
  transition:
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.faq__item:hover .faq__question::after {
  color: var(--color-accent);
}

.faq__item[open] .faq__question::after {
  color: var(--color-accent);
  transform: rotate(45deg);
}

.faq__question:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.faq__answer {
  padding-block-end: var(--space-6);
  max-inline-size: var(--measure);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .faq {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .faq__head {
    grid-column: 1 / span 4;
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-6));
  }

  .faq__list {
    grid-column: 6 / span 7;
    margin-block-start: 0;
  }
}


/* ==========================================================================
   14. CONTATO (§1.5: campo de cor, sem formulário)
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-8);
}

.contact .section__head {
  margin-block-end: 0;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.contact__grid {
  display: grid;
  gap: var(--space-8);
}

.contact__grid h3 {
  margin-block-end: var(--space-4);
}

.contact__list {
  display: grid;
  gap: var(--space-2);
}

.contact__list a,
.site-footer a {
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}

.contact__list a {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.contact__list a:hover {
  color: var(--color-text-muted);
}

.contact__steps ol {
  display: grid;
  gap: var(--space-4);
  padding-inline-start: var(--space-6);
  list-style: decimal;
  color: var(--color-text-muted);
}

.contact__steps ::marker {
  color: var(--color-text-subtle);
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .contact .section__head,
  .contact__actions,
  .contact__grid {
    grid-column: 1 / -1;
  }

  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .contact__channels {
    grid-column: 1 / span 6;
  }

  .contact__steps {
    grid-column: 8 / span 5;
  }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-12) calc(var(--float-offset) * 2 + var(--float-size));
  padding-inline: var(--edge);
  background-color: var(--color-bg);
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-display);
}

.site-footer__wordmark a {
  text-decoration: none;
}

.site-footer__tagline {
  max-inline-size: var(--measure-narrow);
  color: var(--color-text-muted);
}

.site-footer__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block-start: var(--space-2);
}

.site-footer__social a {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__social a:hover {
  color: var(--color-text);
}

.site-footer__legal {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-small);
}

.site-footer__top a {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.site-footer__top a:hover {
  color: var(--color-text);
}

/* ==========================================================================
   16. BOTÃO FLUTUANTE (§6.7)
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  inset-block-end: var(--float-offset);
  inset-inline-end: var(--float-offset);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  inline-size: var(--float-size);
  block-size: var(--float-size);
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-md); /* taste-skill-ignore: botão flutuante é o único elemento que flutua */
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.whatsapp-float svg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.whatsapp-float:hover {
  background-color: var(--color-accent-hover);
  transform: scale(1.04);
}

.whatsapp-float:active {
  transform: scale(0.98);
}

/* anel em cor de texto: dourado sobre dourado não apareceria */
.whatsapp-float:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* ==========================================================================
   17. REVELAÇÃO E MIÍDIA TROCADA (Fase 4)
   ========================================================================== */

/* o <button> da facade é substituído por este iframe no clique */
.video__embed {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

/* estado inicial aplicado pelo script.js; sem JS nada é escondido */
.reveal {
  opacity: 0;
  translate: 0 var(--reveal-shift);
  transition:
    opacity var(--dur-reveal) var(--ease-out) calc(var(--reveal-index, 0) * var(--reveal-step)),
    translate var(--dur-reveal) var(--ease-out) calc(var(--reveal-index, 0) * var(--reveal-step));
}

.reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}


/* ==========================================================================
   18. ÂNCORAS E MOVIMENTO REDUZIDO
   ========================================================================== */

#especialidades,
#demonstracoes,
#sobre,
#faq,
#contato {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

.hero__media {
  overflow: hidden;
}

@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;
  }

  .hero__media img {
    animation: none;
    transform: none;
  }

  .reveal {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .btn:active,
  .video__facade:active,
  .whatsapp-float:hover,
  .whatsapp-float:active {
    transform: none;
  }
}