/* ═══════════════════════════════════════════════════════════════
   LEX — components.css
   Componentes reutilizáveis: nav · footer · botões · cards · forms
   ═══════════════════════════════════════════════════════════════ */

/* ── Navegação ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-mid) var(--ease-out),
              background var(--duration-mid) var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--color-blue-ghost);
}

/* Logo: azul por padrão; branco apenas com o nav transparente sobre hero escuro */
.nav__logo-white { display: none; }

/* Nav transparente sobre o hero escuro (home, antes de rolar para fora da hero) */
body.hero-dark .nav:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
body.hero-dark .nav:not(.is-scrolled) .nav__link { color: #fff; }
body.hero-dark .nav:not(.is-scrolled) .nav__link::after { background: #fff; }
body.hero-dark .nav:not(.is-scrolled) .nav__toggle span { background: #fff; }
body.hero-dark .nav:not(.is-scrolled) .nav__logo-blue { display: none; }
body.hero-dark .nav:not(.is-scrolled) .nav__logo-white { display: block; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.nav__logo {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: var(--font-medium);
  letter-spacing: 0.28em;
  color: var(--color-black);
}
.nav__logo img {
  height: 52px;
  width: auto;
  display: block;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav__link {
  position: relative;
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  letter-spacing: 0.05em;
  color: var(--color-black);
  padding-block: 4px;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-mid) var(--ease-smooth);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--color-blue); }

/* Seletor de idioma PT/EN */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.nav__lang-btn {
  font-size: 11px;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  color: var(--color-gray-light);
  transition: color var(--duration-mid) var(--ease-out);
}
.nav__lang-btn:hover { color: var(--color-black); }
.nav__lang-btn.is-active { color: var(--color-blue); }
.nav__lang-sep { font-size: 11px; color: var(--color-blue-ghost); }

body.hero-dark .nav:not(.is-scrolled) .nav__lang-btn { color: rgba(255, 255, 255, 0.55); }
body.hero-dark .nav:not(.is-scrolled) .nav__lang-btn.is-active { color: #fff; }
body.hero-dark .nav:not(.is-scrolled) .nav__lang-sep { color: rgba(255, 255, 255, 0.3); }

/* Seletor de idioma — menu mobile */
.nav__mobile-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-lg);
}
.nav__mobile-lang .nav__lang-btn { font-size: 14px; }
.nav__mobile-lang .nav__lang-sep { font-size: 14px; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1001;
}
.nav__toggle span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1px;
  background: var(--color-black);
  transition: transform var(--duration-mid) var(--ease-smooth),
              opacity var(--duration-fast);
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 26px; }
.nav__toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Menu mobile fullscreen */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--container-padding);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-mid) var(--ease-out),
              visibility var(--duration-mid);
}
.nav__mobile.is-open { opacity: 1; visibility: visible; }
.nav__mobile-link {
  font-size: clamp(32px, 8vw, 56px);
  font-weight: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-black);
  transition: color var(--duration-mid);
}
.nav__mobile-link:hover { color: var(--color-blue); }
.nav__mobile-meta {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ── Botões ─────────────────────────────────────────────────── */

/* Link de texto com seta (CTA principal não-convencional) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  color: var(--color-black);
  position: relative;
}
.link-arrow span:first-child { position: relative; }
.link-arrow span:first-child::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-mid) var(--ease-smooth);
}
.link-arrow:hover span:first-child::after { transform: scaleX(1); }
.link-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-mid) var(--ease-smooth);
}
.link-arrow:hover svg { transform: translateX(6px); }
.link-arrow--light { color: var(--color-white); }
.link-arrow--blue  { color: var(--color-blue); }

/* Botão outline com fill de baixo para cima */
.btn {
  --btn-fg: var(--color-black);
  --btn-fill: var(--color-black);
  --btn-fg-hover: var(--color-white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 16px var(--space-lg);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  color: var(--btn-fg);
  border: 1px solid var(--btn-fg);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--duration-mid) var(--ease-out),
              transform var(--duration-mid) var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform var(--duration-mid) var(--ease-smooth);
  z-index: -1;
}
.btn:hover { color: var(--btn-fg-hover); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }
.btn--light {
  --btn-fg: var(--color-white);
  --btn-fill: var(--color-white);
  --btn-fg-hover: var(--color-blue);
}
.btn--blue {
  --btn-fg: var(--color-blue);
  --btn-fill: var(--color-blue);
  --btn-fg-hover: var(--color-white);
}
/* Botão preenchido — CTA primário em fundos claros */
.btn--primary {
  --btn-fg: var(--color-white);
  --btn-fg-hover: var(--color-white);
  --btn-fill: var(--color-blue-dark);
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Cards de serviço ───────────────────────────────────────── */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-blue-ghost);
  cursor: pointer;
  transition: transform var(--duration-mid) var(--ease-smooth);
}
.service-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-mid) var(--ease-smooth);
}
.service-card:hover { transform: translateY(-4px); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.service-card__num {
  font-size: 14px;
  font-weight: var(--font-display);
  color: var(--color-gray-light);
  letter-spacing: 0.05em;
}
.service-card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-blue);
  transition: transform 0.35s var(--ease-smooth), color var(--duration-mid);
}
.service-card__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.service-card:hover .service-card__icon { transform: translateY(-4px); color: var(--color-blue-dark); }
.service-card:hover .link-arrow svg { transform: translateX(6px); }
.service-card__title {
  font-size: var(--text-subhead);
  font-weight: var(--font-light);
  letter-spacing: -0.01em;
  color: var(--color-black);
}
.service-card__desc {
  font-size: var(--text-body);
  color: var(--color-gray-mid);
  line-height: 1.7;
  max-width: 42ch;
}
.service-card .link-arrow { margin-top: auto; }

/* ── Cards de insight ───────────────────────────────────────── */
.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-black);
}
.insight-card__media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-sm);
}
.insight-card__media img {
  transition: transform var(--duration-slow) var(--ease-smooth);
}
.insight-card:hover .insight-card__media img { transform: scale(1.04); }
.insight-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.insight-card__date {
  font-size: var(--text-label);
  color: var(--color-gray-light);
  font-variant-numeric: tabular-nums;
}
.insight-card__title {
  font-size: var(--text-subhead);
  font-weight: var(--font-light);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black);
  transition: color var(--duration-mid) var(--ease-out);
  margin-top: var(--space-xs);
}
.insight-card:hover .insight-card__title { color: var(--color-blue); }
.insight-card__img {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.insight-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-smooth); }
.insight-card:hover .insight-card__img img { transform: scale(1.03); }
.insight-card__excerpt {
  font-size: var(--text-small);
  color: var(--color-gray-mid);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-card__link {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-gray-mid);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ── Formulário float-label ─────────────────────────────────── */
.field {
  position: relative;
  border-bottom: 1px solid var(--color-blue-ghost);
  transition: border-color var(--duration-mid);
}
.field:focus-within { border-bottom-color: var(--color-blue); }
.field__input,
.field__textarea,
.field__select {
  width: 100%;
  padding: 24px 0 12px;
  background: transparent;
  border: none;
  font-size: var(--text-body);
  color: var(--color-black);
  outline: none;
}
.field__textarea { resize: vertical; min-height: 64px; line-height: 1.6; }
.field__label {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: var(--text-body);
  color: var(--color-gray-light);
  pointer-events: none;
  transition: transform var(--duration-mid) var(--ease-smooth),
              font-size var(--duration-mid) var(--ease-smooth),
              color var(--duration-mid);
  transform-origin: left;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field__textarea:focus + .field__label,
.field__textarea:not(:placeholder-shown) + .field__label,
.field--filled .field__label {
  transform: translateY(-20px) scale(0.78);
  color: var(--color-blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--color-black);
}
.field__select:required:invalid { color: var(--color-gray-light); }
.field__arrow {
  position: absolute;
  right: 0;
  top: 24px;
  width: 14px;
  height: 14px;
  color: var(--color-blue);
  pointer-events: none;
}

.form-feedback {
  font-size: var(--text-small);
  min-height: 1.4em;
  transition: color var(--duration-mid);
}
.form-feedback.is-success { color: var(--success); }
.form-feedback.is-error   { color: var(--danger); }

/* Estado de erro inline por campo */
.field--error { border-bottom-color: var(--danger) !important; }
.field__err {
  display: block;
  font-size: var(--text-label);
  color: var(--danger);
  margin-top: 4px;
  letter-spacing: 0.03em;
}
/* Indicador de campo obrigatório */
.field__input[required] + .field__label::after,
.field__select[required] + .field__label::after {
  content: ' *';
  color: var(--danger);
  opacity: 0.7;
}

/* ── Footer (azul profundo) ─────────────────────────────────── */
.footer {
  background-color: var(--color-blue-deep);
  background-image: var(--tex-noise), var(--grad-deep);
  background-blend-mode: soft-light, normal;
  color: var(--color-white);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.footer__brand-logo {
  margin-bottom: var(--space-md);
}
.footer__brand-logo img {
  height: 52px;
  width: auto;
  display: block;
}
.footer__brand-tag {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.62);
  max-width: 32ch;
  line-height: 1.6;
}
.footer__col-title {
  font-size: var(--text-label);
  font-weight: var(--font-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: var(--space-md);
}
.footer__col a,
.footer__col p {
  display: block;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-xs);
  transition: color var(--duration-mid), transform var(--duration-mid) var(--ease-out);
  width: fit-content;
}
.footer__col a:hover { color: var(--color-white); transform: translateX(5px); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  flex-wrap: wrap;
}
.footer__cities {
  display: flex;
  gap: var(--space-md);
}
.footer__cities span,
.footer__legal,
.footer__credit {
  font-size: var(--text-label);
  font-weight: var(--font-light);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal a,
.footer__credit a { color: rgba(255, 255, 255, 0.72); transition: color var(--duration-mid); }
.footer__legal a:hover,
.footer__credit a:hover { color: var(--color-white); }

/* ── Hero de página interna ─────────────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-blue-tint);
  background: var(--grad-tint);
  padding-top: calc(80px + var(--space-xl));
  padding-bottom: var(--space-2xl);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .display { font-size: clamp(44px, 6.4vw, 88px); margin-bottom: var(--space-md); }
.page-hero .label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-lg);
}
.page-hero .label::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--color-blue);
}
.page-hero__sub { max-width: 30ch; margin-top: var(--space-md); }

/* Faixa azul na base da hero interna — "fatia" do hero do index (gradiente + noise) */
.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  z-index: 2;
  background-color: var(--color-blue-deep);
  background-image: var(--tex-noise), linear-gradient(165deg, #3E556A 0%, #30445A 52%, var(--color-blue-deep) 100%);
  background-blend-mode: soft-light, normal;
  pointer-events: none;
}

/* Detalhes azuis sutis (eco do hero do index) */
.page-hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--color-blue); }
.page-hero__decor .ph-dots { position: absolute; top: 116px; right: 6%; width: 116px; opacity: 0.18; }
.page-hero__decor .ph-ring { position: absolute; width: 320px; height: 320px; left: -6%; bottom: -18%; opacity: 0.1; }
.page-hero__decor .ph-art {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(170px, 22vw, 280px);
  color: rgba(74, 101, 128, 0.32);
}
.page-hero__decor .ph-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .page-hero__decor .ph-art { display: none; } }

/* Ilustrações da hero "se desenhando" (traço) */
.ph-draw [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: heroDraw 1.5s var(--ease-smooth) forwards;
}
.ph-draw [pathLength]:nth-child(2) { animation-delay: 0.12s; }
.ph-draw [pathLength]:nth-child(3) { animation-delay: 0.24s; }
.ph-draw [pathLength]:nth-child(4) { animation-delay: 0.36s; }
.ph-draw [pathLength]:nth-child(5) { animation-delay: 0.48s; }
.ph-draw [pathLength]:nth-child(6) { animation-delay: 0.60s; }
@keyframes heroDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ph-draw [pathLength] { animation: none; stroke-dashoffset: 0; }
}

/* ── CTA final (compartilhado) ──────────────────────────────── */
.cta-final { position: relative; overflow: hidden; }
.cta-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
}
.cta-final__ring {
  position: absolute;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
.cta-final .display { font-size: clamp(40px, 6.5vw, 88px); }
.cta-final em { color: var(--color-blue); }
.cta-final.section--blue .display,
.cta-final.section--deep .display { color: var(--color-white); }
.cta-final.section--blue em,
.cta-final.section--deep em {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

/* ── CTA variante clara (fundo off-white) ───────────────────── */
.cta-final--light { border-top: 1px solid var(--color-blue-ghost); }
.cta-final--light .cta-final__inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: var(--space-2xl);
}
.cta-final--light .cta-final__copy { flex: 1 1 0; min-width: 0; }
.cta-final--light .cta-final__copy .label { display: block; margin-bottom: var(--space-sm); }
.cta-final--light .cta-final__copy .display { font-size: clamp(36px, 5vw, 72px); }
.cta-final--light em { color: var(--color-blue); font-style: normal; }
.cta-final--light .btn { flex-shrink: 0; }

@media (max-width: 768px) {
  .page-hero { padding-top: calc(80px + var(--space-lg)); }
  /* Mobile: todos os CTAs alinhados à esquerda */
  .cta-final__inner { align-items: flex-start; text-align: left; }
  .cta-final--light .cta-final__inner { flex-direction: column; align-items: flex-start; }
}

/* ── WhatsApp flutuante ─────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 900;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #6E9C82 0%, #517A62 100%);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(81, 122, 98, 0.55);
  transition: filter var(--duration-mid) var(--ease-out),
              box-shadow var(--duration-mid) var(--ease-out),
              transform var(--duration-mid) var(--ease-smooth);
}
.wa-float:hover {
  filter: brightness(1.07);
  box-shadow: 0 12px 30px -8px rgba(81, 122, 98, 0.7);
  transform: translateY(-4px);
}
.wa-float svg { width: 26px; height: 26px; }

/* ── Botões sociais (circulares — eco do logo) ──────────────── */
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue-tint);
  color: var(--color-blue);
  flex-shrink: 0;
  transition: color var(--duration-mid), background var(--duration-mid),
              transform var(--duration-mid) var(--ease-out);
}
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover {
  color: #fff;
  background: var(--color-blue);
  transform: translateY(-3px);
}
.footer__social { display: flex; gap: 8px; margin-top: var(--space-lg); }
.footer__social .social-btn { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.footer__social .social-btn:hover { background: var(--color-white); color: var(--color-blue-deep); }
.nav__mobile-social { display: flex; gap: 12px; margin-top: var(--space-lg); }

/* ── Responsivo dos componentes ─────────────────────────────── */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-lg); }
}
@media (max-width: 768px) {
  .nav__menu { display: none; }
  .nav__toggle { display: block; }
  .nav__logo img { height: 52px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}