/* =============================================================================
   KAÔ STUDIO — DESIGN SYSTEM
   components.css · Camada 3 (componente). Aponta só para semânticos.
   ============================================================================= */

/* =============================================================================
   A PÉTALA (§7) — raio assimétrico na diagonal.
   Dois cantos opostos arredondados, dois opostos retos. A mistura é canto a
   canto, na diagonal — nunca um lado inteiro redondo.

   Orientação A: TL + BR arredondados | Orientação B: TR + BL arredondados.
   - Alternância estática por ordem de leitura: JS marca .petala--a / .petala--b
     alternadamente ao percorrer o documento (kao.js). No gerador de LP é
     automático e obrigatório; no site à mão pode-se fixar com data-petala.
   - Giro no hover/toque (componentes clicáveis): inverte a diagonal como sinal
     de interação. Significado à parte da alternância estática — nunca ambíguo
     (repouso = classe; interação = :hover).
   - O raio escala com o tamanho do bloco via --petala-r.
   ============================================================================= */
[class*="petala"] { --petala-r: var(--kao-radius-md); }
.petala-sm { --petala-r: var(--kao-radius-sm); }
.petala-md { --petala-r: var(--kao-radius-md); }
.petala-lg { --petala-r: var(--kao-radius-lg); }
.petala-xl { --petala-r: var(--kao-radius-xl); }

.petala,
.petala--a { border-radius: var(--petala-r) 0 var(--petala-r) 0; }
.petala--b { border-radius: 0 var(--petala-r) 0 var(--petala-r); }

/* Giro no hover — só em clicáveis marcados .is-interactive */
.is-interactive {
  transition: border-radius var(--dur-med) var(--ease-petala),
              transform var(--dur-med) var(--ease-petala),
              background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
.petala--a.is-interactive:hover,
.petala--a.is-interactive:focus-visible { border-radius: 0 var(--petala-r) 0 var(--petala-r); }
.petala--b.is-interactive:hover,
.petala--b.is-interactive:focus-visible { border-radius: var(--petala-r) 0 var(--petala-r) 0; }

/* =============================================================================
   BOTÕES (§10 alvo 44px)
   ============================================================================= */
.btn {
  --petala-r: var(--kao-radius-md);
  display: inline-flex; align-items: center; gap: 0.75em;
  min-height: var(--kao-touch-target-min);
  padding: 0.85em 1.5em;
  font-family: var(--font-grotesk); font-weight: 500; font-size: 1rem;
  line-height: 1; letter-spacing: 0.01em;
  border: var(--kao-border-width) solid transparent;
}
.btn__dot {
  display: grid; place-items: center;
  width: 2.1em; height: 2.1em; margin-right: -0.4em;
  border-radius: 999px; background: var(--color-identity); color: var(--kao-color-creme);
  transition: transform var(--dur-med) var(--ease-petala);
}
.btn:hover .btn__dot { transform: translateX(4px) rotate(-8deg); }
.btn--primary { background: var(--color-identity); color: var(--kao-color-creme); }
.btn--primary:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--solid { background: var(--kao-color-bordo); color: var(--kao-color-creme); }
.btn--solid .btn__dot { background: var(--color-identity); }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--ghost .btn__dot { background: var(--color-identity); }
.btn--light { background: var(--kao-color-creme); color: var(--kao-color-bordo); }
/* Compacto — menos margem em volta do texto (ex.: "Começar" no header) */
.btn--sm { padding: 0.45em 0.85em; font-size: 0.95rem; gap: 0.45em; font-weight: 600; }
.btn--sm .btn__dot { width: 1.7em; height: 1.7em; margin-right: -0.2em; }

/* =============================================================================
   NAV / HEADER (ref. agenciy) — logo esq · nav centro · CTA dir, em pétala
   ============================================================================= */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: clamp(12px, 2vw, 22px);
  transition: transform var(--dur-med) var(--ease-petala); }
/* Recolhe ao descer; reaparece ao subir (JS alterna .is-hidden) */
.header.is-hidden { transform: translateY(-170%); }
/* Bar = só a linha de layout (logo | menu | CTA). Sem fundo: logo e Começar flutuam. */
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kao-space-16);
  padding: 0;
}
.header__logo { height: clamp(80px, 9vw, 124px); width: auto; }   /* ~4x maior */
.header__logo svg, .header__logo img { height: 100%; width: auto; display: block; }

/* O menu É o pill glass — justo ao texto, no espaçamento do botão Começar (ref.) */
.nav {
  display: flex; align-items: center; gap: 0.15rem;
  padding: 0.45em 0.55em;
  --petala-r: var(--kao-radius-md);                                        /* pétala, menos redondo que a ref. */
  border-radius: var(--petala-r) 0 var(--petala-r) 0;
  background: color-mix(in srgb, var(--kao-color-creme) 56%, transparent); /* transparência (glass) */
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: var(--kao-border-width) solid color-mix(in srgb, var(--kao-color-creme) 32%, transparent);
  transition: background var(--dur-med) ease, box-shadow var(--dur-med) ease;
}
.header.is-scrolled .nav { background: color-mix(in srgb, var(--kao-color-creme) 72%, transparent); box-shadow: var(--shadow-md); }
.nav a {
  padding: 0.5em 0.85em; border-radius: var(--kao-radius-sm) 0 var(--kao-radius-sm) 0;
  font-weight: 600; font-size: 0.95rem;
  color: var(--color-text-on-light); transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav a:hover { background: color-mix(in srgb, var(--color-identity) 16%, transparent); }
.nav a[aria-current="page"] { background: var(--kao-color-bordo); color: var(--kao-color-creme); }
.header__cta { display: flex; align-items: center; gap: 0.5rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 999px; background: var(--kao-color-bordo); color: var(--kao-color-creme); border: 0; }

@media (max-width: 880px) {
  .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center;
    gap: 0.5rem; background: var(--kao-color-bordo); padding: 2rem; border: 0; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: translateY(-100%); transition: transform var(--dur-med) var(--ease-petala); z-index: 99; }
  .nav.is-open { transform: none; }
  .nav a { color: var(--kao-color-creme); font-size: 1.5rem; }
  .nav-toggle { display: grid; place-items: center; }
}

/* =============================================================================
   HERO — vídeo B&W + headline âmbar (§5.3)
   ============================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--kao-color-creme); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.72); z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,14,14,0.35) 0%, rgba(14,14,14,0.15) 40%, rgba(14,14,14,0.78) 100%); }
.hero .container { position: relative; z-index: 2; padding-block: clamp(180px, 22vh, 250px) clamp(120px, 15vh, 200px); width: 100%; }
.hero__title .hl { color: var(--kao-color-laranja-ambar); display: block; }
.hero__title { max-width: 16ch; font-size: clamp(2.7rem, 8.4vw, 7.5rem); }
.hero__sub { max-width: 46ch; margin-top: var(--kao-space-24); color: color-mix(in srgb, var(--kao-color-creme) 92%, transparent); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--kao-space-24); margin-top: var(--kao-space-32);
  font-size: 0.9rem; letter-spacing: 0.04em; opacity: 0.85; }
.hero__scroll { position: absolute; right: var(--container-pad); bottom: clamp(24px,5vh,48px); z-index: 2;
  writing-mode: vertical-rl; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }

/* =============================================================================
   QUEBRA LATERAL CURVADA — a 1ª seção sobe sobre a hero com topo curvo.
   Regra: o grão NÃO entra na faixa curvada do topo.
   ============================================================================= */
.section--curve-top {
  position: relative; z-index: 3;
  margin-top: clamp(-52px, -3.2vw, -28px);
  border-top-left-radius: clamp(48px, 8vw, 130px);
  border-top-right-radius: clamp(48px, 8vw, 130px);
  overflow: hidden;
}
.section--curve-top.surface::before { top: clamp(48px, 8vw, 130px); }  /* faixa curvada sem grão */

/* Primeira seção — statement grande preenchendo a tela */
.primeira { min-height: 80vh; display: flex; align-items: center; }
.primeira__inner { width: 100%; }
.primeira__title { max-width: 15ch; }
.primeira__lead { max-width: 54ch; margin-top: clamp(24px, 4vw, 48px); font-size: clamp(1.25rem, 2.2vw, 1.9rem); }

/* =============================================================================
   CARDS genéricos
   ============================================================================= */
.card { --petala-r: var(--kao-radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.card--action { display: flex; flex-direction: column; gap: var(--kao-space-16); }

/* =============================================================================
   BENTO / STATS (ref. agero + Luxfolio) — grid modular assimétrico (§9)
   ============================================================================= */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--kao-space-16); }
.bento > * { grid-column: span 6; }
.col-3 { grid-column: span 3 !important; }
.col-4 { grid-column: span 4 !important; }
.col-5 { grid-column: span 5 !important; }
.col-6 { grid-column: span 6 !important; }
.col-7 { grid-column: span 7 !important; }
.col-8 { grid-column: span 8 !important; }
.col-12 { grid-column: 1 / -1 !important; }
.row-2 { grid-row: span 2; }
@media (max-width: 760px) { .bento > * { grid-column: span 12 !important; } }

.stat { display: flex; flex-direction: column; justify-content: space-between; gap: var(--kao-space-24);
  min-height: 210px; padding: clamp(1.4rem, 2.5vw, 2rem); }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.85; letter-spacing: -0.02em; }
.stat__num sup { font-size: 0.4em; vertical-align: super; margin-left: 0.1em; }
.stat__label { font-size: 0.95rem; opacity: 0.85; max-width: 26ch; }

/* Linha de stats — 4 caixas lado a lado, mesma altura (ref. Luxfolio) */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kao-space-16); }
.stat-row .stat { min-height: clamp(180px, 20vw, 208px); justify-content: flex-end; }
.stat__hl { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.02; letter-spacing: -0.01em; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-row { grid-template-columns: 1fr; } }

/* Seção mais colada no conteúdo de cima */
.section--tight-top { padding-top: clamp(24px, 4vw, 56px); }

/* =============================================================================
   BRAÇOS DO ECOSSISTEMA — cards com cor de identidade (multimarca)
   ============================================================================= */
.arm { position: relative; overflow: hidden; min-height: 340px; padding: clamp(1.5rem,3vw,2.4rem);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--color-identity); color: var(--color-text-on-identity); --petala-r: var(--kao-radius-lg); }
.arm--amber { color: var(--kao-color-bordo); }
.arm__kicker { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.arm__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem,3.5vw,3rem); line-height: 0.95; }
.arm__desc { max-width: 34ch; opacity: 0.92; }
.arm__symbol { position: absolute; right: -12%; bottom: -14%; width: 62%; opacity: 0.14;
  transition: transform var(--dur-slow) var(--ease-petala), opacity var(--dur-med) ease; }
.arm:hover .arm__symbol { transform: rotate(8deg) scale(1.06); opacity: 0.22; }

/* Afordância de clique nos braços */
.arm--clickable { cursor: pointer; }
.arm--clickable:focus-visible { outline: var(--kao-focus-ring-width) solid var(--focus-ring-color); outline-offset: 3px; }
.arm__more { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.6rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.82;
  transition: opacity var(--dur-fast) ease, gap var(--dur-fast) ease; }
.arm--clickable:hover .arm__more, .arm--clickable:focus-visible .arm__more { opacity: 1; gap: 0.75em; }

/* =============================================================================
   POP-UP LIQUID GLASS (Ecossistema) — translúcido, blur, texto por cima
   ============================================================================= */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.modal__scrim { position: absolute; inset: 0; background: rgba(12, 8, 8, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-med) ease; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__panel {
  position: relative; z-index: 1; width: min(560px, 100%); padding: clamp(28px, 4vw, 48px);
  --petala-r: var(--kao-radius-xl);
  border-radius: var(--petala-r) 0 var(--petala-r) 0;
  color: var(--kao-color-creme);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--color-identity) 34%, rgba(18,16,14,0.46)),
      color-mix(in srgb, var(--color-identity) 14%, rgba(18,16,14,0.62)));
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255, 237, 189, 0.28);
  box-shadow: 0 30px 90px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.30);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-med) var(--ease-petala), transform var(--dur-med) var(--ease-petala);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,237,189,0.14); color: var(--kao-color-creme); font-size: 1.5rem; line-height: 1; }
.modal__close:hover { background: rgba(255,237,189,0.24); }
.modal__kicker { color: color-mix(in srgb, var(--kao-color-creme) 82%, transparent); }
.modal__title { font-family: var(--font-display); font-weight: 600; line-height: 1.0;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0.6rem 0 0; letter-spacing: -0.01em; }
.modal__desc { margin: 1rem 0 1.75rem; opacity: 0.92; max-width: 46ch; }
.modal__cta { margin-top: 0.25rem; }

/* =============================================================================
   GALERIA DE PROJETOS (ref. illuminated-season) — full-bleed, pétala, P&B->cor
   ============================================================================= */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(200px, 24vw, 300px); gap: var(--kao-space-12); }
.shot { position: relative; overflow: hidden; --petala-r: var(--kao-radius-lg); min-height: 200px; background: #111; margin: 0; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03); transition: filter var(--dur-slow) var(--ease-petala), transform var(--dur-slow) var(--ease-petala); }
.shot:hover img, .shot:focus-within img { filter: grayscale(0) contrast(1); transform: scale(1.04); }
.shot__cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 1rem 1.2rem; margin: 0;
  color: var(--kao-color-creme); font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.45rem); line-height: 1; letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
/* Faixa Drone — fora a fora, fechando a galeria */
.shot--band { width: 100%; min-height: clamp(260px, 40vw, 460px); border-radius: 0; margin-top: var(--kao-space-12); }
.shot--band .shot__cap { font-size: clamp(1.6rem, 4.5vw, 3.4rem); padding: clamp(1.2rem, 3vw, 2.6rem); }
.shot::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55)); opacity: 0; transition: opacity var(--dur-med) ease; }
.shot:hover::after, .shot:focus-within::after { opacity: 1; }
/* Galeria responsiva — 2 por linha no tablet, 1 no celular; cor já ativa (sem hover no toque) */
@media (max-width: 760px) {
  .gallery { grid-auto-rows: clamp(180px, 44vw, 240px); }
  .gallery .shot { grid-column: span 6 !important; }
  .shot img { filter: grayscale(0) contrast(1); }   /* fallback sem JS: já colorido */
  .shot::after { opacity: 1; }
  /* Opção 1: com JS, começa em P&B e ganha cor ao entrar na tela (o "passe o olhar" no toque) */
  .shot.reveal-scroll img { filter: grayscale(1) contrast(1.03); }
  .shot.reveal-scroll.is-colored img { filter: grayscale(0) contrast(1); }
}
@media (max-width: 480px) {
  .gallery .shot { grid-column: span 12 !important; }
}

/* =============================================================================
   MÉTODO / PROCESSO (ref. agenciy "our process" + Nocta 01·02·03)
   ============================================================================= */
.process { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--kao-space-32);
  padding-block: clamp(1.5rem, 3vw, 2.4rem); border-top: var(--kao-border-width) solid color-mix(in srgb, currentColor 18%, transparent);
  transition: padding-left var(--dur-med) var(--ease-petala); }
.step:last-child { border-bottom: var(--kao-border-width) solid color-mix(in srgb, currentColor 18%, transparent); }
.step__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.8; letter-spacing: -0.03em; color: color-mix(in srgb, currentColor 22%, transparent);
  transition: color var(--dur-med) ease; order: 2; }
.step__body { order: 1; }
.step__title { font-family: var(--font-grotesk); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.step__desc { max-width: 52ch; opacity: 0.82; margin-top: 0.5rem; }
/* efeito de destaque que faltava (§) — a etapa ativa acende na cor de identidade */
.step:hover { padding-left: clamp(8px, 2vw, 28px); }
.step:hover .step__num { color: var(--color-identity); }
.step:hover .step__title { color: var(--color-identity); }

/* =============================================================================
   DEPOIMENTOS (ref. agenciy)
   ============================================================================= */
.quote { display: flex; flex-direction: column; gap: var(--kao-space-24); min-height: 240px; justify-content: space-between; }
.quote__text { font-family: var(--font-display); font-weight: 500; text-transform: none;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; }
.quote__who { display: flex; align-items: center; gap: 0.75rem; }
.quote__avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--color-identity);
  display: grid; place-items: center; font-weight: 600; color: var(--kao-color-creme); }
.quote__name { font-weight: 600; }
.quote__role { font-size: 0.85rem; opacity: 0.7; }

/* =============================================================================
   FUNDADOR (ref. "meet finton")
   ============================================================================= */
.founder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.founder__photo { position: relative; overflow: hidden; --petala-r: var(--kao-radius-xl); aspect-ratio: 4/5; background: #1a1a1a; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } }

/* =============================================================================
   CTA + RODAPÉ (ref. agero final + Luxfolio wordmark gigante)
   ============================================================================= */
.footer { padding-top: var(--section-pad); }
.footer__wordmark { width: 100%; margin-top: clamp(2rem, 6vw, 5rem); opacity: 0.96; }
.footer__wordmark svg, .footer__wordmark img { width: 100%; height: auto; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kao-space-32); }
.footer__col { display: flex; flex-direction: column; gap: 0.4rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: var(--kao-space-48); padding-top: var(--kao-space-24);
  border-top: var(--kao-border-width) solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: 0.85rem; opacity: 0.75; }

/* =============================================================================
   CHIP DE MARCA (seletor multimarca — styleguide)
   ============================================================================= */
.brand-switch { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.brand-switch button {
  padding: 0.5em 1em; border-radius: 999px; font-weight: 500; font-size: 0.9rem;
  border: var(--kao-border-width) solid color-mix(in srgb, currentColor 30%, transparent); background: transparent;
}
.brand-switch button[aria-pressed="true"] { background: var(--color-identity); color: var(--color-text-on-identity); border-color: transparent; }

/* =============================================================================
   PROTEÇÃO DO SÍMBOLO (§3) — utilitário de área de proteção
   A margem mínima = altura da ponta da estrela. Aqui expressa como var relativa
   ao tamanho do símbolo (~14% da altura), aplicada em todos os lados.
   ============================================================================= */
.simbolo-guard { --guard: 14%; display: inline-block; padding: var(--guard); }
.simbolo-guard > svg, .simbolo-guard > img { display: block; width: 100%; height: auto; }