/* ============================================
   PROVITA ANESTESIA — INTERNAS
   Estilos compartilhados das páginas internas:
   hero interno, seções de texto e componentes
   específicos de página (MVV, frase-marca, etc.).
   Reaproveitado por Sobre, Atuação, Equipe, etc.
   Mobile-first. Só variáveis de tokens.css.
   ============================================ */

/* ════════════════════════════════════════════
   HERO INTERNO — reutilizável em todas as páginas
   ════════════════════════════════════════════ */

.hero-interno {
  position: relative;
  padding-block: clamp(3rem, 8vw, 5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-interno__fundo {
  position: absolute;
  inset: 0;
  background: var(--gradiente-marca);
  z-index: 0;
}

.hero-interno__conteudo {
  position: relative;
  z-index: 1;
  color: var(--cor-branco);
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.hero-interno__sobretitulo {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-caption);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cor-verde-agua);
  margin-bottom: var(--esp-sm);
}

.hero-interno__titulo {
  font-size: var(--fs-h1);
  color: var(--cor-branco);
  line-height: 1.1;
}

/* ════════════════════════════════════════════
   PÁGINA SOBRE — Quem Somos / MVV / Frase
   ════════════════════════════════════════════ */

.sobre-texto {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--cor-texto);
  max-width: 65ch;
  margin-inline: auto;
}

/* Grade Missão · Visão · Valores */
.mvv__grade {
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: 1fr;
}

.mvv-card {
  background: var(--cor-branco); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); padding: var(--esp-lg);
  display: flex; flex-direction: column; gap: var(--esp-sm);
  transition: var(--transicao);
}
.mvv-card:hover { box-shadow: var(--sombra-suave); border-color: transparent; }

.mvv-card__icone {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: var(--cor-fundo-alt);
  border-radius: var(--raio-md); color: var(--cor-verde-agua); flex-shrink: 0;
}
.mvv-card__titulo { color: var(--cor-azul-profundo); }
.mvv-card__texto { color: var(--cor-texto-suave); line-height: 1.7; flex-grow: 1; }

/* Pílulas de valores */
.valores__lista { display: flex; flex-wrap: wrap; gap: var(--esp-xs); margin-top: var(--esp-xs); }
.valor-tag {
  background: var(--cor-fundo-alt); color: var(--cor-azul-profundo);
  padding: 0.4rem 0.9rem; border-radius: var(--raio-full);
  font-size: var(--fs-caption); font-weight: var(--peso-medio);
  border: 1px solid var(--cor-borda);
}

/* Bloco frase-conceito da marca */
.frase-marca { background: var(--cor-fundo-alt); padding-block: var(--esp-2xl); text-align: center; }
.frase-marca__aspas {
  font-family: var(--fonte-titulo); font-size: clamp(3rem, 6vw, 5rem);
  color: var(--cor-verde-agua); line-height: 0.5;
  display: block; margin-bottom: var(--esp-sm); opacity: 0.6;
}
.frase-marca__texto {
  font-family: var(--fonte-titulo); font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--cor-azul-profundo); font-style: italic;
  max-width: 18ch; margin-inline: auto; line-height: 1.2;
}

/* CTA de encerramento de página interna */
.interno-cta { text-align: center; padding-block: var(--esp-xl); }

/* 3 colunas no desktop para MVV */
@media (min-width: 768px) {
  .mvv__grade { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════
   PASSOS NUMERADOS — reutilizável (Atuação, Parcerias)
   ════════════════════════════════════════════ */
.passos__grade { display: grid; grid-template-columns: 1fr; gap: var(--esp-md); }

.passo {
  background: var(--cor-branco); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md); padding: var(--esp-md);
  display: flex; flex-direction: column; gap: var(--esp-xs);
  transition: var(--transicao);
}
.passo:hover { box-shadow: var(--sombra-suave); border-color: transparent; }

.passo__num {
  font-family: var(--fonte-titulo); font-size: 2.5rem;
  color: var(--cor-verde-agua); line-height: 1; font-weight: var(--peso-titulo);
}
.passo__titulo { color: var(--cor-azul-profundo); }
.passo__texto { color: var(--cor-texto-suave); font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 640px) { .passos__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .passos__grade { grid-template-columns: repeat(4, 1fr); } }