/* ==========================================================================
   PR Gestão Empresarial — Componentes reutilizáveis
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Eyebrow / títulos de seção
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.on-dark .eyebrow,
.section--dark .eyebrow,
.section--graphite .eyebrow { color: var(--text-on-dark-muted); }

.section-heading { max-width: 62ch; }
.section-heading--wide { max-width: 78ch; }
.section-heading > * + * { margin-top: var(--space-4); }
.section-heading__title { font-size: var(--fs-h2); }
.section-heading__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: 56ch;
}
.section--dark .section-heading__lead,
.section--graphite .section-heading__lead,
.on-dark .section-heading__lead { color: var(--text-on-dark-muted); }

.section-head-row {
  display: grid;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}
@media (min-width: 900px) {
  .section-head-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   2. Botões e links de ação
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-7);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--pr-ink); color: var(--pr-white); }
.btn--primary:hover { background: var(--pr-graphite); }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--pr-ink); background: rgba(12, 13, 15, .04); }

.btn--on-dark { background: var(--pr-white); color: var(--pr-ink); }
.btn--on-dark:hover { background: var(--pr-platinum); }

.btn--ghost-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--line-on-dark-strong);
}
.btn--ghost-dark:hover { border-color: var(--pr-white); background: rgba(255, 255, 255, .07); }

/* Botão em aço escovado — CTA de contato do header e do menu mobile.
   O reflexo atravessa a superfície de tempos em tempos, como luz batendo
   em metal polido; a maior parte do ciclo fica sem brilho. */
.btn--metal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--metal-ink);
  border-color: var(--metal-edge);
  background-image: var(--metal-face);
  font-size: .9225rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    0 6px 18px -12px rgba(0, 0, 0, .9);
}
.btn--metal .btn__label { position: relative; z-index: 2; }
.btn--metal::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: 0;
  z-index: 1;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .18),
    rgba(255, 255, 255, .88),
    rgba(255, 255, 255, .18),
    transparent
  );
  transform: translateX(-180%) skewX(-20deg);
  animation: metal-shine 5.5s cubic-bezier(.42, 0, .2, 1) infinite;
}
.btn--metal:hover {
  filter: brightness(1.08) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    0 10px 22px -12px rgba(0, 0, 0, .95);
}

@keyframes metal-shine {
  0%, 64%   { transform: translateX(-180%) skewX(-20deg); }
  90%, 100% { transform: translateX(420%) skewX(-20deg); }
}

.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: var(--fs-micro); }
.btn--block { width: 100%; }

/* .btn--sm vem depois de .btn--metal na folha, então o CTA metálico precisa
   reafirmar o próprio corpo e ganhar respiro para a caixa alta. */
.btn--metal.btn--sm {
  font-size: .9225rem;
  min-height: 44px;
  padding-inline: var(--space-6);
}

/* Link com seta — microinteração discreta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--text);
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.link-arrow__icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }
.on-dark .link-arrow,
.section--dark .link-arrow,
.section--graphite .link-arrow { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   3. Placeholder de mídia (SOMENTE desenvolvimento)
   Ocupa a proporção real planejada para permitir avaliar a composição.
   -------------------------------------------------------------------------- */
.media-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  padding: var(--space-6);
  text-align: center;
  border: 1px dashed var(--dev-border);
  border-radius: var(--radius-md);
  background-color: var(--dev-fill);
  background-image: repeating-linear-gradient(
    135deg,
    var(--dev-hatch) 0 8px,
    transparent 8px 18px
  );
  color: var(--dev-text);
  overflow: hidden;
}
.media-ph__label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.media-ph__note {
  font-size: var(--fs-micro);
  line-height: 1.4;
  opacity: .85;
  max-width: 32ch;
}
.media-ph__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: .625rem;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  opacity: .5;
}
.media-ph--on-dark {
  border-color: var(--dev-border-on-dark);
  background-color: var(--dev-fill-on-dark);
  background-image: repeating-linear-gradient(
    135deg,
    var(--dev-hatch-on-dark) 0 8px,
    transparent 8px 18px
  );
  color: var(--dev-text-on-dark);
}
.media-ph--fill { height: 100%; aspect-ratio: auto; }
.media-ph--flush { border-radius: 0; }

/* --------------------------------------------------------------------------
   4. Marcação textual de conteúdo pendente (desenvolvimento)
   -------------------------------------------------------------------------- */
.pending {
  display: inline;
  font-size: var(--fs-micro);
  font-style: italic;
  color: var(--dev-text);
  line-height: 1.45;
}
.pending::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .55em;
  vertical-align: middle;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.pending--block { display: block; }
.on-dark .pending,
.section--dark .pending,
.section--graphite .pending { color: var(--dev-text-on-dark); }

/* --------------------------------------------------------------------------
   5. Rail — carrossel horizontal no mobile
   -------------------------------------------------------------------------- */
.rail { display: grid; gap: var(--space-4); }
@media (max-width: 767px) {
  .rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: var(--space-3);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
}
.rail-hint {
  margin-top: var(--space-4);
  font-size: var(--fs-micro);
  color: var(--text-subtle);
}
.section--dark .rail-hint,
.section--graphite .rail-hint { color: var(--text-on-dark-subtle); }
@media (min-width: 768px) { .rail-hint { display: none; } }

/* --------------------------------------------------------------------------
   6. Formulário (estrutural — sem envio neste corte)
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label {
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.field__control {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--pr-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field__control:hover { border-color: var(--pr-silver); }
.field__control:focus-visible {
  border-color: var(--pr-ink);
  box-shadow: 0 0 0 3px rgba(12, 13, 15, .1);
  outline: none;
}
textarea.field__control { min-height: 132px; resize: vertical; }

/* --------------------------------------------------------------------------
   7. Botão flutuante de WhatsApp
   Sem número confirmado neste corte: leva à seção de contato,
   não abre conversa e não expõe telefone.
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--metal-edge);
  color: var(--metal-ink);
  /* Realce diagonal por cima do aço escovado */
  background-image:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .58), transparent 46%),
    var(--metal-face);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -2px 5px rgba(0, 0, 0, .35),
    0 12px 28px -12px rgba(0, 0, 0, .95);
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
@media (min-width: 1024px) { .whatsapp-float { width: 60px; height: 60px; } }

.whatsapp-float__icon { position: relative; z-index: 2; }

/* Halo aceso atrás da peça metálica: é ele que dá presença ao botão sem
   precisar mexer no disco em si. z-index negativo o mantém sob a face. */
.whatsapp-float__halo {
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(219, 226, 233, .5) 0%,
    rgba(198, 207, 216, .24) 42%,
    transparent 70%
  );
  animation: metal-halo 2.6s ease-in-out infinite;
}

/* Pulse: a peça metálica fica parada; quem se expande são dois anéis
   externos, como uma onda luminosa saindo da borda. */
.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 239, 245, .92);
  pointer-events: none;
  animation: metal-pulse 2.6s cubic-bezier(.2, .55, .3, 1) infinite;
}
.whatsapp-float::after { animation-delay: 1.3s; }

.whatsapp-float:hover { transform: translateY(-2px); filter: brightness(1.06); }

@keyframes metal-pulse {
  0%   { transform: scale(.94); opacity: .95; }
  65%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes metal-halo {
  0%, 100% { opacity: .45; transform: scale(.96); }
  50%      { opacity: .95; transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   8. Moldura de mídia
   Padrão único para toda foto aplicada: a caixa define a proporção e a imagem
   é posicionada de forma absoluta dentro dela. Depender de `height: 100%` em
   caixas dimensionadas por `aspect-ratio` produz resultados inconsistentes.
   -------------------------------------------------------------------------- */
.svc__media,
.seg-feature__media,
.diferenciais__media,
.apresentacao__portrait,
.hero__figure,
.galeria__grid > * { position: relative; }

.svc__media > img,
.seg-feature__media > img,
.diferenciais__media > img,
.apresentacao__portrait > img,
.hero__figure > img,
.galeria__grid > * > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Movimento reduzido: os acabamentos metálicos permanecem, o movimento sai. */
@media (prefers-reduced-motion: reduce) {
  .btn--metal::after { animation: none; opacity: 0; }
  .whatsapp-float::before,
  .whatsapp-float::after {
    animation: none;
    transform: none;
    opacity: .5;
  }
  .whatsapp-float__halo { animation: none; transform: none; opacity: .6; }
}

/* ==========================================================================
   FORMULÁRIO DE CONTATO (.wa-form) — Corte 12
   Compartilhado pela Home e por /contato, por isso mora aqui e não em
   home.css nem em internal.css.

   O formulário NÃO envia nada: monta a mensagem e abre o WhatsApp. Isso muda
   o desenho de uma coisa só — o botão diz "Enviar pelo WhatsApp" e traz o
   ícone do canal, para que a ação seja lida antes do clique, não depois.
   Os controles reaproveitam .field / .field__control, que já existiam.
   ========================================================================== */
.wa-form__grid { display: grid; gap: var(--space-5); }
@media (min-width: 560px) {
  .wa-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  /* O assunto é o campo mais largo e fecha a grade sozinho. */
  .wa-form__grid .field:last-child { grid-column: 1 / -1; }
}

.field__req { color: var(--text-subtle); font-weight: var(--weight-regular); }

/* O <select> não herda a seta do sistema quando recebe borda própria; a seta
   vem embutida como imagem para não exigir um wrapper só por causa dela. */
.field__control--select {
  appearance: none;
  padding-right: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c828c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-5) center;
}

.wa-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}
.wa-form__submit { flex: none; }
.wa-form__note {
  flex: 1 1 16ch;
  margin: 0;
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
  color: var(--text-subtle);
}
.wa-form__note--noscript { margin-top: var(--space-5); }
.wa-form__note a { border-bottom: 1px solid var(--line-strong); }