@charset "UTF-8";
/*
Theme Name: Elena Rios
Theme URI: https://elenarios.com.br
Author: Guia-se Lagoa Santa
Author URI: https://lagoasantaguiase.com.br
Description: Tema de Elena Rios — Neuropsicologia Infantojuvenil e Orientação de Pais, Lagoa Santa/MG.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: elena-rios
*/
/* ==========================================================================
   Elena Rios — Neuropsicologia Infantojuvenil
   Paleta e tipografia conforme Manual da Marca
   ========================================================================== */

/* ---------- Fontes ---------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/CormorantGaramond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('assets/fonts/PublicSans.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variáveis (Manual da Marca) ---------- */

:root {
  --tinta: #1C3629;
  --principal: #97BBA9;
  --media: #599175;
  --clara: #E0EBE6;

  --bg: #F6F8F7;
  --text: #1f2e24;
  --text-muted: #5c6e61;
  --border: rgba(29, 53, 37, 0.15);
  --accent: #599175;
}

/* Sem @media (prefers-color-scheme: dark) automático de propósito — Verde
   Elena é a cor predominante da marca (decisão explícita da cliente), o
   site não deve trocar pra Tinta só porque o aparelho do visitante está em
   modo escuro. As variáveis abaixo continuam disponíveis pra uma troca
   manual futura (ex: botão de tema), via atributo data-theme. */
:root[data-theme="dark"] {
  --bg: #141b16;
  --text: #E4ECE6;
  --text-muted: #93a99b;
  --border: rgba(228, 236, 230, 0.16);
  --accent: #97BBA9;
}
:root[data-theme="light"] {
  --bg: #F6F8F7;
  --text: #1f2e24;
  --text-muted: #5c6e61;
  --border: rgba(29, 53, 37, 0.15);
  --accent: #599175;
}

/* ---------- Reset / Base ---------- */

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Compensa o header fixo ao rolar até uma âncora (#sobre, #especialidades,
   #contato etc.) — sem isso a seção nasce parcialmente escondida atrás do
   header. Usado por scrollIntoView() em assets/js/main.js. */
#topo, #sobre, #especialidades, #diferencial {
  scroll-margin-top: 100px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}

/* ---------- Header / Footer (site completo) ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 18px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header_inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header_logo {
  display: block;
  flex: none;
  color: var(--tinta);
  line-height: 0;
}
.site-header_logo svg {
  height: 52px;
  width: auto;
  display: block;
}

.site-header_nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  font-size: 20px;
}
.site-header_nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
}
.site-header_nav a.is-active,
.site-header_nav a:hover {
  color: var(--accent);
}

.site-header_fechar,
.site-header_backdrop {
  display: none;
}

.site-header_toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-header_toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.menu-aberto .site-header_toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-aberto .site-header_toggle span:nth-child(2) { opacity: 0; }
body.menu-aberto .site-header_toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Compensa a altura do header fixo pra o conteúdo não nascer escondido
   embaixo dele — só nas páginas que usam header.php (a tela "Em Breve" e
   o manual da marca são páginas standalone, não têm .site-header). */
.site-header + main {
  padding-top: 89px;
}

@media (max-width: 780px) {
  .site-header_nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: #FFFFFF;
    z-index: 220;
    padding: 24px 28px 32px;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.14);
    overflow-y: auto;
  }
  body.menu-aberto .site-header_nav {
    transform: translateX(0);
  }
  .site-header_nav ul {
    flex-direction: column;
    gap: 22px;
    font-size: 21px;
    margin-top: 40px;
  }
  .site-header_fechar {
    display: block;
    align-self: flex-end;
    width: 36px;
    height: 36px;
    font-size: 30px;
    line-height: 1;
    background: none;
    border: none;
    color: var(--tinta);
    cursor: pointer;
  }
  .site-header_toggle { display: flex; }

  .site-header_backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--tinta);
    opacity: 0;
    visibility: hidden;
    z-index: 210;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  body.menu-aberto .site-header_backdrop {
    opacity: 0.92;
    visibility: visible;
  }
  body.menu-aberto {
    overflow: hidden;
  }
}

.site-footer {
  padding: 24px 24px;
  background: var(--tinta);
  color: var(--clara);
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer_inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.site-footer_copy {
  margin: 0;
  text-align: left;
}
.site-footer_topo {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--clara);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-footer_topo:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}
.site-footer_direita {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-footer_instagram {
  color: var(--clara);
  text-decoration: none;
  opacity: 0.85;
}
.site-footer_instagram:hover {
  opacity: 1;
}
.site-footer_credito {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--clara);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.site-footer_credito:hover {
  opacity: 1;
}
.site-footer_credito_badge {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer_credito_badge img {
  width: 13px;
  height: 13px;
}
@media (max-width: 780px) {
  .site-footer {
    padding-bottom: 100px;
  }
  .site-footer_inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }
  .site-footer_topo {
    order: -1;
  }
  .site-footer_direita {
    justify-self: center;
  }
}
/* Abaixo de 720px o botão do WhatsApp sobe pro topo (ver .whatsapp-float),
   então o rodapé não precisa mais da folga extra embaixo. */
@media (max-width: 720px) {
  .site-footer {
    padding-bottom: 24px;
  }
}

.whatsapp-float {
  position: fixed;
  left: 36px;
  bottom: 36px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--principal);
  border: 1px solid var(--media);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 40;
}
/* Só no mobile: sobe pro canto superior esquerdo (abaixo do header fixo),
   em vez do inferior — em telas maiores continua embaixo, sem mudança. */
@media (max-width: 720px) {
  .whatsapp-float {
    top: 100px;
    left: 20px;
    bottom: auto;
  }
}

/* ---------- Revelação suave ao rolar a tela ---------- */

/* Só esconde de início quando o JS já rodou (html.no-js vira html sem essa
   classe, ver <script> no <head>) — sem JS, o conteúdo já nasce visível em
   vez de ficar preso em opacity:0 pra sempre. JS adiciona .reveal-visivel
   via IntersectionObserver, ver assets/js/main.js. */
html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
html:not(.no-js) .reveal.reveal-visivel {
  opacity: 1;
  transform: none;
}

/* Hero: só fade, sem subir/deslocar — as outras seções mantêm o
   translateY normal, só o Hero é o primeiro que a pessoa vê ao carregar
   (inclusive a cada F5), então o movimento ali chamava mais atenção. */
html:not(.no-js) .hero .reveal {
  transform: none;
}

.reveal-atraso-1 { transition-delay: 0.15s; }

.especialidades_grade .reveal:nth-child(1) { transition-delay: 0s; }
.especialidades_grade .reveal:nth-child(2) { transition-delay: 0.08s; }
.especialidades_grade .reveal:nth-child(3) { transition-delay: 0.16s; }
.especialidades_grade .reveal:nth-child(4) { transition-delay: 0.24s; }
.especialidades_grade .reveal:nth-child(5) { transition-delay: 0.32s; }
.especialidades_grade .reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Elementos compartilhados (botões, rótulos, texto) ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: 'Public Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.botao svg { flex: none; }
.botao-pequeno {
  padding: 10px 20px;
  font-size: 12.5px;
}
.botao-tinta {
  background: var(--tinta);
  color: #FFFFFF;
}
.botao-tinta:hover { opacity: 0.88; }
.botao-principal {
  background: var(--media);
  color: #FFFFFF;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
}
.botao-principal:hover { opacity: 0.9; }
.botao-contorno {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.botao-contorno:hover { background: var(--tinta); color: #FFFFFF; }
.botao-linha {
  background: transparent;
  border-color: var(--clara);
  color: var(--tinta);
}
.botao-linha:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.eyebrow {
  font-family: 'Public Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--media);
  margin: 0 0 10px;
}
.eyebrow-claro { color: var(--principal); }

.titulo-secao {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--text);
  text-wrap: balance;
}
.titulo-claro { color: #FFFFFF; }

.texto-corpo {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 46ch;
}
.texto-corpo p { margin: 0 0 14px; }
.texto-corpo p:last-child { margin-bottom: 0; }
.texto-claro,
.texto-claro p { color: rgba(255,255,255,0.82); }

.elenarios-placeholder-foto {
  width: 100%;
  height: 100%;
  background: var(--clara);
  display: flex;
  align-items: center;
  justify-content: center;
}
.elenarios-placeholder-foto_simbolo {
  width: 42%;
  color: var(--principal);
}
.elenarios-placeholder-foto_simbolo svg { display: block; width: 100%; height: auto; }

/* ---------- Hero ---------- */

.hero {
  background: var(--clara);
  padding: 56px 24px 96px;
}
.hero_inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hero_media {
  position: relative;
}
.hero_foto {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: var(--clara);
}
.hero_foto img { width: 100%; height: 100%; object-fit: cover; }

/* Acima do notebook (ver @media max-width:720px pro mobile), a foto cresce
   de volta pra uma proporção mais alta — presa em 16/8 ela fica curta
   demais em monitores grandes, sobrando espaço vazio na tela. */
@media (min-width: 1367px) {
  .hero_foto { aspect-ratio: 16 / 10; }
}

.hero_cartao {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 46px 50px;
  box-shadow: 0 20px 45px rgba(28, 54, 41, 0.16);
  max-width: 580px;
  position: absolute;
  right: 28px;
  bottom: 28px;
}
.hero_cartao_eyebrow {
  font-family: 'Public Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--media);
  margin: 0 0 14px;
}
.hero_cartao_nome {
  font-size: 60px;
  margin: 0 0 6px;
  color: var(--tinta);
}
.hero_cartao_sub {
  font-family: 'Public Sans', sans-serif;
  font-size: 19px;
  color: var(--text-muted);
  margin: 0 0 4px;
}
/* A última linha de subtítulo (só a linha 1, se não houver linha 2) é
   quem reserva o espaço antes do botão — assim funciona com 1 ou 2 linhas
   sem precisar de duas regras diferentes. O botão continua no tamanho
   normal do rótulo (.botao/.botao-tinta), não escala junto com o cartão. */
.hero_cartao_sub:last-of-type {
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .hero { padding: 40px 20px 40px; }
  .hero_foto { aspect-ratio: 4 / 5; border-radius: 16px; }
  .hero_cartao {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin: -48px 8px 0;
    max-width: none;
    padding: 26px 24px;
  }
  /* Mobile fica como estava antes do cartão crescer no desktop. */
  .hero_cartao_eyebrow { font-size: 11.5px; margin-bottom: 10px; }
  .hero_cartao_nome { font-size: 40px; margin-bottom: 4px; }
  .hero_cartao_sub { font-size: 14px; margin-bottom: 4px; }
  .hero_cartao_sub-2 { display: none; }
  /* :last-of-type não serve aqui — pega o último <p> por tag (a linha 2,
     escondida acima), não por classe, então a folga tinha de ir num
     elemento sempre visível: o próprio botão. */
  .hero_cartao .botao { margin-top: 10px; }
}


/* ---------- Sobre ---------- */

.sobre {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 480px;
}
.sobre_foto { position: relative; aspect-ratio: 4 / 3.7; }
.sobre_foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre_painel {
  background: var(--media);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sobre_painel_inner {
  padding: 56px;
  max-width: 460px;
  position: relative;
}

/* Linhas de fundo animadas — decorativas, atrás do texto, se movendo bem
   devagar pra dar vida a um painel escuro sem chamar atenção do conteúdo.
   Reaproveitada em qualquer seção com fundo escuro (Sobre, Diferencial). */
.painel-linhas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.painel-linhas svg {
  width: 100%;
  height: 100%;
  display: block;
}
.painel-linha {
  stroke: var(--clara);
  stroke-width: 1.2;
  opacity: 0.16;
}
.painel-linha-a { animation: linha-circula-a 28s ease-in-out infinite; }
.painel-linha-b { animation: linha-circula-b 34s ease-in-out infinite; }
.painel-linha-c { animation: linha-circula-a 24s ease-in-out infinite reverse; }

/* Percurso com pontos irregulares (espaçamento e distâncias diferentes
   entre si) pra parecer uma circulação livre pelo painel, não uma forma
   geométrica fechada (círculo/losango) se repetindo. */
@keyframes linha-circula-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  14%  { transform: translate(48px, -18px) rotate(2deg); }
  29%  { transform: translate(85px, -62px) rotate(-4deg); }
  41%  { transform: translate(52px, -95px) rotate(3deg); }
  58%  { transform: translate(-12px, -70px) rotate(-2deg); }
  70%  { transform: translate(-58px, -88px) rotate(5deg); }
  84%  { transform: translate(-70px, -22px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes linha-circula-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  16%  { transform: translate(-45px, 26px) rotate(-3deg); }
  33%  { transform: translate(-78px, 68px) rotate(4deg); }
  47%  { transform: translate(-40px, 96px) rotate(-2deg); }
  63%  { transform: translate(22px, 78px) rotate(3deg); }
  77%  { transform: translate(64px, 92px) rotate(-4deg); }
  90%  { transform: translate(70px, 30px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .painel-linha { animation: none; }
}

@media (max-width: 780px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre_foto { aspect-ratio: 4 / 3; }
  .sobre_painel_inner { padding: 40px 24px; max-width: none; }
}

/* ---------- Especialidades ---------- */

.especialidades {
  position: relative;
  overflow: hidden;
  padding: 140px 24px;
  text-align: center;
}
/* Brilho delicado na base, como se uma luz Tinta viesse de baixo — prepara
   a transição pra próxima seção (Diferencial), que já nasce com fundo
   Tinta sólido logo em seguida. */
.especialidades::after,
.especialidades::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 140vw;
  height: 150px;
  background: radial-gradient(ellipse at center, rgba(28, 54, 41, 0.8) 0%, rgba(28, 54, 41, 0.5) 45%, rgba(28, 54, 41, 0) 75%);
  filter: blur(40px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.especialidades::after { bottom: -120px; }
/* Espelha o mesmo brilho no topo, virado pra baixo — mesma sensação de luz
   entrando por cima. */
.especialidades::before { top: -120px; }
.especialidades_cabecalho { position: relative; z-index: 1; max-width: 560px; margin: 0 auto 48px; }
.especialidades_cabecalho .eyebrow { display: block; text-align: center; }
.especialidades > .botao { position: relative; z-index: 1; }
.especialidades_grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 44px;
}
.especialidade_cartao {
  perspective: 1200px;
}
.especialidade_cartao_inner {
  position: relative;
  min-height: 170px;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.especialidade_cartao:hover .especialidade_cartao_inner,
.especialidade_cartao:focus-within .especialidade_cartao_inner {
  transform: rotateY(180deg);
}
.especialidade_cartao_frente,
.especialidade_cartao_verso {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  padding: 32px 20px;
  text-align: left;
}
.especialidade_cartao_frente {
  background: var(--principal);
  border: 1px solid var(--media);
}
.especialidade_cartao_icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clara);
  margin-bottom: 18px;
}
.especialidade_cartao_nome {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.especialidade_cartao_verso {
  background: var(--tinta);
  color: var(--clara);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
}
.especialidade_cartao_descricao {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.especialidade_cartao_girar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .especialidade_cartao_inner { transition: none; }
}

@media (max-width: 900px) {
  .especialidades_grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .especialidades_grade { grid-template-columns: 1fr; }
  .especialidades { padding: 64px 20px; }
}

/* Só no mobile: hover gruda ligado no touch até tocar fora, então a virada
   passa a ser por clique (ver .virado, alternado via JS em main.js) — o
   hover é neutralizado aqui só nessa faixa de tela, sem mexer no desktop. */
@media (max-width: 720px) {
  .especialidade_cartao_girar {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--tinta);
  }
  .especialidade_cartao:hover .especialidade_cartao_inner {
    transform: none;
  }
  .especialidade_cartao.virado .especialidade_cartao_inner {
    transform: rotateY(180deg);
  }
}

/* ---------- Diferencial ---------- */

.diferencial {
  background: var(--tinta);
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 48px;
  padding: 140px 24px;
  position: relative;
  overflow: hidden;
}
.diferencial_texto { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
.diferencial_texto .botao { margin-top: 24px; }
.diferencial_texto .botao-linha { color: var(--clara); }
.diferencial_foto { position: relative; z-index: 1; }
.diferencial_foto {
  aspect-ratio: 4 / 3.6;
  border-radius: 16px;
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.diferencial_foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 780px) {
  .diferencial { grid-template-columns: 1fr; padding: 56px 20px; }
  .diferencial_foto { order: -1; }
}

/* ---------- Contato ---------- */

.contato {
  background: var(--tinta);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  padding: 88px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.contato_coluna .titulo-secao { font-size: 28px; }
.contato_horarios {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,0.82);
}
.contato_horarios-vazio { max-width: 42ch; }

.contato_form_cartao {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px;
}
.contato_form { display: flex; flex-direction: column; gap: 14px; }
.contato_campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.contato_campo input,
.contato_campo textarea {
  font-family: 'Public Sans', sans-serif;
  font-size: 14.5px;
  color: var(--text);
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  resize: vertical;
}
.contato_campo input:focus,
.contato_campo textarea:focus {
  outline: none;
  border-bottom-color: var(--media);
}
.contato_honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contato_aviso {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 16px;
}
.contato_aviso-sucesso { background: var(--clara); color: var(--tinta); }
.contato_aviso-erro { background: #F6DEDE; color: #7A2B2B; }

@media (max-width: 780px) {
  .contato { grid-template-columns: 1fr; padding: 56px 20px; }
}

/* ---------- "Em Breve" (template-parts/em-breve-content.php) ---------- */

body#em-breve {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.em-breve_card {
  max-width: 520px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.em-breve_mark {
  width: 84px;
  height: 84px;
  color: var(--principal);
  margin-bottom: 8px;
}
.em-breve_mark svg { width: 100%; height: 100%; display: block; }

.em-breve_clock {
  width: 56px;
  height: 56px;
  margin: 28px 0;
}
.em-breve_clock line {
  stroke-linecap: round;
}
.em-breve_clock .hour {
  stroke: var(--tinta);
  stroke-width: 5;
  transform-origin: 100px 100px;
  animation: em-breve-spin 9s linear infinite;
}
.em-breve_clock .minute {
  stroke: var(--media);
  stroke-width: 3.2;
  transform-origin: 100px 100px;
  animation: em-breve-spin 3.4s linear infinite;
}
@keyframes em-breve-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .em-breve_clock .hour, .em-breve_clock .minute { animation: none; }
}

.em-breve_card h1 {
  font-style: italic;
  font-size: clamp(40px, 9vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}

.em-breve_lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 40ch;
  margin: 0 0 36px;
}

.em-breve_tagline {
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.9;
  margin: 0 0 28px;
}

.em-breve_footer {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  width: 100%;
  max-width: 220px;
}

.em-breve_credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.em-breve_credit:hover,
.em-breve_credit:focus-visible {
  opacity: 1;
}
.em-breve_credit_badge {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--border);
}
.em-breve_credit img {
  width: 15px;
  height: 15px;
  display: block;
}