/* Overdrive — Direção C: "Entrada Calibrada" (teste, não usar em produção).
   Sem canvas/WebGL: o momento autoral é a coreografia de entrada do hero
   (molduras que convergem, botões que "encaixam") + uma régua de progresso
   de scroll. Tudo aditivo sobre v1/css/styles.css, nada sobrescrito lá. */

/* -------------------------------------------------------------------------
   Molduras de calibração
   ------------------------------------------------------------------------- */

.hero__frame {
  position: absolute;
  top: 96px;
  right: -28px;
  bottom: 4px;
  left: -28px;
  pointer-events: none;
}

/* Em telas estreitas .hero__content quase não tem folga lateral — a moldura
   flutuando para fora (-28px) seria cortada pelo overflow:hidden do .hero.
   Recolhe para dentro do próprio bloco de conteúdo. */
@media (max-width: 640px) {
  .hero__frame {
    top: 72px;
    right: 4px;
    bottom: 4px;
    left: 4px;
  }
}

.hero__frame-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  /* Repouso sem JS/antes da coreografia: já no lugar certo — sem isso, uma
     falha de script deixaria a moldura ausente em vez de apenas estática. */
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.hero__frame-corner--tl { top: 0; left: 0; border-top: 1.5px solid var(--sm-green-300); border-left: 1.5px solid var(--sm-green-300); }
.hero__frame-corner--tr { top: 0; right: 0; border-top: 1.5px solid var(--sm-green-300); border-right: 1.5px solid var(--sm-green-300); }
.hero__frame-corner--br { bottom: 0; right: 0; border-bottom: 1.5px solid var(--sm-green-300); border-right: 1.5px solid var(--sm-green-300); }
.hero__frame-corner--bl { bottom: 0; left: 0; border-bottom: 1.5px solid var(--sm-green-300); border-left: 1.5px solid var(--sm-green-300); }

/* -------------------------------------------------------------------------
   Botões — desativa o rise-in herdado do container; cada botão "encaixa"
   individualmente via WAAPI (js/hero-calibrated.js). Visível por padrão:
   se o script falhar, os botões continuam clicáveis e visíveis.
   ------------------------------------------------------------------------- */

.hero__actions { animation: none; }
.hero__action { opacity: 1; }

/* -------------------------------------------------------------------------
   Régua de progresso de scroll — some inteira sem suporte a scroll-timeline
   ou sob prefers-reduced-motion, em vez de aparecer quebrada/estática.
   ------------------------------------------------------------------------- */

.scroll-ruler { display: none; }

@supports (animation-timeline: scroll()) {
  .scroll-ruler {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 300;
    background-color: rgba(20, 33, 27, 0.35);
    background-image: repeating-linear-gradient(to right, rgba(241, 238, 230, 0.25) 0 1px, transparent 1px 24px);
  }

  .scroll-ruler::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sm-green-500);
    transform: scaleX(0);
    transform-origin: left;
    animation: scroll-ruler-progress linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes scroll-ruler-progress {
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-ruler { display: none; }
}

/* -------------------------------------------------------------------------
   Equipe — telefone direto por advogado
   (aditivo, como o resto deste arquivo; v1/css/styles.css não é tocado)
   ------------------------------------------------------------------------- */

.team-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sm-space-3);
  font-size: var(--sm-text-sm);
  font-weight: var(--sm-weight-semibold);
  color: var(--sm-green-700);
  text-decoration: none;
  transition: color var(--sm-duration) var(--sm-ease);
}

.team-card__phone svg { width: 15px; height: 15px; flex-shrink: 0; }

.team-card__phone:hover { color: var(--sm-green-800); }

/* Alinha o telefone na base de todos os cards, independente de o nome
   quebrar em uma ou duas linhas. */
.team-card { display: flex; flex-direction: column; }
.team-card__media { flex: none; }
.team-card__phone { margin-top: auto; padding-top: var(--sm-space-3); align-self: flex-start; }