/* ==========================================================================
   components.css — botoes, logo, nav, drawer, cards, figuras, botao flutuante.
   Espelha specs/design.md §6 e §7.
   ========================================================================== */

/* --- Botoes · design.md §6 ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 52px; padding-inline: var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-btn); font-weight: 600; letter-spacing: var(--ls-btn);
  line-height: 1; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 1024px) { .btn { min-height: 56px; padding-inline: 2.25rem; } }

/* Primario — unica cor de acao · branco sobre rosewood-800 = 6.5:1 */
.btn--primary { background: var(--rosewood-800); color: var(--white); box-shadow: var(--shadow-md); }
.btn--primary:focus-visible { outline-offset: 3px; }

/* Secundario — borda 1.5px, unica excecao a regra de 1px */
.btn--secondary { background: transparent; color: var(--ink-900); border: 1.5px solid var(--ink-900); }

/* Terciario — link com seta.
   Mantem min-height 44px: e uma CTA de verdade e precisa ser alcancavel no
   toque (site.md §11). O padding negativo lateral evita que o alvo maior
   desalinhe o texto com o resto do card. */
.btn--link {
  min-height: 44px; padding: 0 var(--space-2); margin-inline: calc(var(--space-2) * -1);
  gap: var(--space-2);
  color: var(--rosewood-800); letter-spacing: 0.1em;
  background: none; border: 0;
}
.btn--link::after { content: "\2192"; transition: transform var(--dur-hover) var(--ease); }

@media (hover: hover) {
  .btn--primary:hover { background: var(--rosewood-900); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .btn--secondary:hover { background: var(--ink-900); color: var(--white); }
  .btn--link:hover { text-decoration: underline; text-underline-offset: 6px; }
  .btn--link:hover::after { transform: translateX(4px); }
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
@media (hover: none) { .btn:active { transform: scale(0.98); } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Lado a lado sempre que couber: dois botoes empilhados comem a dobra */
@media (max-width: 399px) { .btn-row .btn:not(.btn--link) { width: 100%; } }

/* --- Logo · design.md §3.0 · lockup monocromatico de duas linhas ---------- */
.logo { display: inline-block; text-align: center; text-decoration: none; color: var(--ink-900); }
.logo__name {
  display: block;
  font-family: var(--font-script); font-weight: 400;
  font-size: var(--fs-logo); line-height: 1.3; letter-spacing: 0;
}
.logo__tag {
  display: block; margin-top: 6px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: inherit;
}
.section--dark .logo, .nav__drawer .logo { color: inherit; }

/* --- Navegacao · design.md §11 e §12 --------------------------------------
   Pill flutuante: a barra nao encosta no topo, flutua sobre o conteudo com
   backdrop-filter. O raio abre de pill para --radius-lg quando o menu mobile
   expande, e volta depois que ele fecha. Portado do conceito de mini-navbar
   para CSS puro, na paleta do projeto (memoria.md D26).
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset-block-start: var(--space-4); inset-inline: 0; z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;                 /* so a pill recebe clique */
}

.nav__inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  width: calc(100% - var(--gutter) * 2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  transition: background-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}
/* Mais opaca depois que a pagina rola, para o texto atras nao vazar */
.nav.is-scrolled .nav__inner { background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-md); }
/* O conceito original abria o raio da pill ao expandir o menu. Aqui o menu
   mobile e um drawer opaco em tela cheia (z-150) que cobre a pill, entao o
   efeito nunca apareceria — removido em vez de virar codigo morto. */

@media (max-width: 1023px) { .nav .logo__tag { display: none; } }

.nav__side { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-6); }

/* Link com o rotulo rolando para cima no hover: dois rotulos empilhados numa
   janela de uma linha. Precisa de tres niveis — o link da o alvo de toque, a
   mascara corta, e a pilha desliza. Cortar no proprio link nao funciona: o
   overflow clipa na caixa de padding e os dois rotulos aparecem. */
.nav__link {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-600);
  transition: color var(--dur-hover) var(--ease);
}
.nav__link-mask { display: block; overflow: hidden; height: 1.15em; }
.nav__link-mask > span {
  display: block; line-height: 1.15em;
  transition: transform var(--dur-hover) var(--ease);
}
.nav__link-mask > span:last-child { color: var(--rosewood-800); }
.nav__link.is-active { color: var(--ink-900); }
@media (hover: hover) {
  .nav__link:hover .nav__link-mask > span { transform: translateY(-1.15em); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link:hover .nav__link-mask > span { transform: none; }
  .nav__link:hover { color: var(--rosewood-800); }
}

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-900);
  transition: background-color var(--dur-hover) var(--ease);
}
.nav__toggle svg { width: 22px; height: 22px; }
@media (hover: hover) { .nav__toggle:hover { background: var(--blush-100); } }

.nav .btn--primary { min-height: 44px; padding-inline: var(--space-5); }

@media (min-width: 1024px) {
  .nav { inset-block-start: var(--space-5); }
  .nav__inner {
    width: auto; max-width: calc(100% - var(--space-8));
    gap: var(--space-8);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-7);
  }
  .nav__side { display: flex; align-items: center; }
  .nav__side--end { justify-content: flex-end; }
  .nav__toggle { display: none; }
}

/* Drawer mobile — tela cheia, foco preso, CTA fixa no rodape */
.nav__drawer {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--gutter) var(--space-7);
  background: var(--blush-50); color: var(--ink-900);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-hover) var(--ease), visibility var(--dur-hover);
}
.nav__drawer[data-open="true"] { visibility: visible; opacity: 1; }
.nav__drawer-top { display: flex; align-items: center; justify-content: space-between; }
.nav__drawer-list {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-5); text-align: center;
}
.nav__drawer-list a {
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink-900); padding: var(--space-2) var(--space-4);
}
.nav__drawer .btn--primary { width: 100%; }
@media (min-width: 1024px) { .nav__drawer { display: none; } }

body.is-locked { overflow: hidden; }

/* --- Cards · design.md §7 ------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease),
              border-color 400ms var(--ease);
}
@media (min-width: 1024px) { .card { padding: var(--space-7); } }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--rose-300); }
}

/* Card de servico: icone -> 24 -> H4 -> 12 -> texto -> 24 -> link */
.card--service { display: flex; flex-direction: column; align-items: flex-start; }
.card__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blush-100); color: var(--rosewood-700);
  margin-bottom: var(--space-5);
}
.card__icon svg { width: 28px; height: 28px; }
.card--service h3 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-h4); }
.card--service p { margin-top: var(--space-3); color: var(--ink-600); }
.card--service .btn--link { margin-top: var(--space-5); }

/* --- Figuras -------------------------------------------------------------- */
.figure { margin: 0; }
.figure__media {
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--blush-100);
}
.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption {
  margin-top: var(--space-4); font-size: var(--fs-small); font-weight: 500;
  /* ink-600, nao ink-500: sobre --surface-alt o ink-500 cai para 4.3:1.
     A tabela de design.md §2.5 so tinha verificado fundo branco. */
  color: var(--ink-600);
}

.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

@media (hover: hover) {
  .figure--zoom .figure__media img { transition: transform 700ms var(--ease); }
  .figure--zoom:hover .figure__media img { transform: scale(1.04); }
}

/* --- Botao flutuante do WhatsApp · design.md §6.4 ------------------------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--rosewood-800); color: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: scale(0.9); pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease),
              background-color var(--dur-hover) var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa-float svg { width: 26px; height: 26px; }
@media (hover: hover) { .wa-float:hover { background: var(--rosewood-900); } }
@media (min-width: 1024px) { .wa-float { right: 24px; bottom: 24px; width: 60px; height: 60px; } }