/* =========================================================================
   LAYOUT NOVO — Ana Cristina Schneider
   Fontes auto-hospedadas, sem CDN, sem rastreador, sem JavaScript.
   O movimento vem de escala, deslocamento e assimetria — nada se mexe.
   Transições só em hover e na sanfona.
   ========================================================================= */

/* --- Fontes (SIL OFL) --------------------------------------------------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/ebgaramond-latin-var.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/ebgaramond-italic-latin-var.woff2') format('woff2');
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-latin-var.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* --- Paleta ------------------------------------------------------------- */
:root {
  --papel:   #FAF6F0;
  --creme:   #F5EDE1;
  --areia:   #EFE7DA;
  --branco:  #FFFFFF;
  --tint:    #E7EDEA;
  --tint-2:  #DFE8E4;
  --verde:   #566B65;
  --fundo-verde: #3E4F4A;
  --verde-hover: #455752;
  --tinta:   #2E3A37;
  --tinta-2: #5A5C51;
  --filete:  #DDD2C0;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Karla', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --leitura: 36rem;
  --largura: 74rem;
  --transicao: 280ms cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 48em) { body { font-size: 1.1875rem; } }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* Títulos: peso 400 e dimensionamento óptico automático — em corpo grande
   o desenho afina sozinho, e no corpo pequeno engrossa e continua legível. */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 .5em;
  color: var(--tinta);
}

a { color: var(--verde); text-underline-offset: .2em; transition: color var(--transicao); }
a:hover { color: var(--verde-hover); }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

/* --- Estrutura ---------------------------------------------------------- */
.secao { padding: 4.5rem 1.5rem; position: relative; }
@media (min-width: 48em) { .secao { padding: 8rem 2.5rem; } }
.secao-curta { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 48em) { .secao-curta { padding-top: 4.5rem; padding-bottom: 4.5rem; } }
/* folga extra no topo: usada onde o título/subtítulo ficavam colados no
   que vem antes da seção */
.secao--folga-topo { padding-top: 6.5rem; }
@media (min-width: 48em) { .secao--folga-topo { padding-top: 10.5rem; } }

.envelope { max-width: var(--largura); margin: 0 auto; }
.leitura  { max-width: var(--leitura); }
.centro   { margin-left: auto; margin-right: auto; }

.topo-grade > *, .dupla > *, .cartoes > *, .horarios > *, .rodape-grade > * { min-width: 0; }

.bg-areia { background: var(--areia); }
.bg-creme { background: var(--creme); }
.bg-verde {
  background: var(--fundo-verde);
  color: #DCE5E1;
  /* leve variação de luz: tira o aspecto de retângulo chapado */
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
}
.bg-verde h1, .bg-verde h2, .bg-verde h3 { color: var(--branco); }
.bg-verde a { color: var(--branco); }

/* --- Etiqueta de seção: itálico serifado com um fio, no lugar do
       rótulo em caixa alta que dava ar de modelo pronto ------------------ */
.etiqueta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: 0;
  color: var(--verde);
  margin: 0 0 1.25rem;
}
.etiqueta::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.cabecalho-centro .etiqueta { justify-content: center; }
.bg-verde .etiqueta { color: #B6C8C2; }

/* --- Títulos ------------------------------------------------------------ */
.titulo-secao {
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.6rem);
  margin: 0 0 1.1rem;
  max-width: 20ch;
}
.cabecalho-centro { text-align: center; }
.cabecalho-centro .titulo-secao { max-width: 24ch; margin-left: auto; margin-right: auto; }

.subtitulo-secao {
  font-size: 1.1875rem;
  color: var(--tinta-2);
  max-width: 46ch;
  margin: 0 0 3rem;
}
@media (min-width: 48em) { .subtitulo-secao { font-size: 1.3125rem; } }
.cabecalho-centro .subtitulo-secao { margin-left: auto; margin-right: auto; }
.bg-verde .subtitulo-secao { color: #C3D2CD; }

/* --- Botão -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .95rem 2.1rem;
  background: var(--verde);
  color: var(--branco);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(46,58,55,.06);
  transition: background-color var(--transicao), color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}
.btn::after {
  content: "";
  width: .42rem; height: .42rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transicao);
}
.btn:hover {
  background: var(--verde-hover);
  color: var(--branco);
  box-shadow: 0 10px 26px rgba(46,58,55,.16);
  transform: translateY(-2px);
}
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* contorno, para quando há dois botões juntos */
.btn--linha {
  background: transparent;
  color: var(--verde);
  box-shadow: inset 0 0 0 1.5px rgba(86,107,101,.45);
}
.btn--linha:hover {
  background: var(--verde);
  color: var(--branco);
  box-shadow: 0 10px 26px rgba(46,58,55,.16);
}
/* claro, sobre a faixa verde */
.btn--claro, .bg-verde .btn--claro { background: var(--branco); color: var(--verde); }
.btn--claro:hover, .bg-verde .btn--claro:hover { background: var(--creme); color: var(--verde-hover); }

/* --- Bloco de chamada: a frase fica no texto, não dentro do botão ------- */
.chamada { margin: 2.75rem 0 0; }
.chamada-centro { margin: 3.25rem auto 0; text-align: center; max-width: 40rem; }
.chamada .frase-chamada {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  margin: 0 0 1.1rem;
  max-width: 34ch;
}
@media (min-width: 48em) { .chamada .frase-chamada { font-size: 1.5625rem; } }
.chamada-centro .frase-chamada { margin-left: auto; margin-right: auto; }
.bg-verde .frase-chamada { color: var(--branco); }
.chamada .miudo { font-size: .9375rem; color: var(--tinta-2); margin: .9rem 0 0; }
.bg-verde .miudo { color: #B6C8C2; }

/* =========================== TOPO ====================================== */
.topo { padding: 2.5rem 1.5rem 4rem; }
@media (min-width: 48em) { .topo { padding: 3.5rem 2.5rem 7rem; } }

.marca { width: 12.5rem; margin: 0 0 4.5rem; }
@media (min-width: 60em) { .marca { margin-bottom: 6rem; } }

.topo-grade { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 60em) {
  .topo-grade { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* foto do topo: um pouco maior que antes e alinhada ao topo da coluna */
.figura-arco--topo { align-self: start; }

.topo h1 {
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  line-height: 1.06;
  margin: 0 0 1.5rem;
}
.topo .lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 40ch;
}
@media (min-width: 48em) { .topo .lead { font-size: 1.25rem; } }

/* a primeira frase do parágrafo puxa a leitura */
.topo .lead-forte {
  font-family: var(--serif);
  /* um degrau acima do corpo do texto (~1.15x), não um salto grande */
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.34;
  color: var(--tinta);
  margin: 0 0 1.1rem;
  max-width: 34ch;
}
@media (min-width: 48em) { .topo .lead-forte { font-size: 1.5625rem; } }

.credencial-topo {
  margin: 2.25rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-2);
  padding-left: 1.1rem;
  border-left: 2px solid var(--filete);
}
.credencial-topo strong { display: block; color: var(--tinta); font-weight: 600; }

/* foto em arco, com painel deslocado atrás — o desencontro é o movimento */
.figura-arco { position: relative; margin: 0; }
.figura-arco .fundo {
  position: absolute;
  /* no celular o deslocamento é menor que o padding da seção (1.5rem),
     senão o painel ultrapassa a tela e cria rolagem horizontal */
  inset: 1.5rem -1rem -1rem 1.5rem;
  background: var(--tint);
  border-radius: 999px 999px 1.5rem 1.5rem;
}
@media (min-width: 60em) {
  .figura-arco .fundo { inset: 2rem -1.75rem -1.75rem 2rem; }
}
.figura-arco picture, .figura-arco img {
  position: relative;
  border-radius: 999px 999px 1.5rem 1.5rem;
}
.figura-arco img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
}

/* =========================== CENAS: 4 BLOCOS =========================== */
.cartoes { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 46em) {
  .cartoes { grid-template-columns: 1fr 1fr; gap: 2rem 2.25rem; }
  /* coluna da direita desce: quebra a grade de quatro quadrados iguais */
  .cartoes > :nth-child(even) { margin-top: 4rem; }
}
@media (min-width: 48em) { .cartoes { margin-top: 4rem; } }

.cartao {
  position: relative;
  background: var(--branco);
  border-radius: 1.75rem;
  padding: 2.25rem 1.9rem 2rem;
  box-shadow: 0 1px 2px rgba(46,58,55,.04), 0 14px 32px rgba(46,58,55,.055);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
@media (min-width: 48em) { .cartao { padding: 2.9rem 2.6rem 2.6rem; } }
/* alterna o fundo: dois brancos, dois no verde diluído */
.cartao:nth-child(4n+2), .cartao:nth-child(4n+3) { background: var(--tint); box-shadow: none; }
.cartao:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(46,58,55,.05), 0 22px 48px rgba(46,58,55,.12); }

/* numeral grande e discreto, no canto — não mais uma bolinha centrada */
.cartao .selo {
  position: absolute;
  top: 1.4rem; right: 1.8rem;
  font-family: var(--serif);
  font-size: 3.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--verde);
  opacity: .17;
  pointer-events: none;
}
.cartao h3 {
  font-size: 1.625rem;
  line-height: 1.18;
  margin: 0 0 .85rem;
  max-width: 22ch;
}
@media (min-width: 48em) { .cartao h3 { font-size: 1.8125rem; } }
.cartao p { color: var(--tinta-2); font-size: 1.0625rem; margin: 0; }
@media (min-width: 48em) { .cartao p { font-size: 1.125rem; } }

/* =========================== VÍDEO ===================================== */
.video-quadro {
  max-width: 54rem;
  margin: 3rem auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 1.75rem;
  background: var(--branco);
  box-shadow: 0 2px 6px rgba(46,58,55,.05), 0 24px 60px rgba(46,58,55,.10);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 1.5rem;
  color: var(--tinta-2);
  transition: box-shadow var(--transicao);
}
.video-quadro:hover { box-shadow: 0 2px 6px rgba(46,58,55,.06), 0 30px 70px rgba(46,58,55,.16); }
.play {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--verde);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(62,79,74,.28);
  transition: background-color var(--transicao), transform var(--transicao);
}
.video-quadro:hover .play { background: var(--verde-hover); transform: scale(1.05); }
.play::after {
  content: "";
  border-left: 1.15rem solid var(--branco);
  border-top: .72rem solid transparent;
  border-bottom: .72rem solid transparent;
  margin-left: .32rem;
}
.pendente { font-size: .9375rem; margin: 0; }

/* =========================== A FRASE =================================== */
.frase { overflow: hidden; padding-top: 7rem; padding-bottom: 7rem; }
@media (min-width: 48em) { .frase { padding-top: 11rem; padding-bottom: 11rem; } }

.frase .envelope { position: relative; }
/* monograma deslocado para a borda, em vez de centrado atrás do texto */
.frase .marca-dagua {
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%);
  width: 22rem;
  opacity: .10;
  pointer-events: none;
}
@media (max-width: 47.99em) { .frase .marca-dagua { width: 15rem; right: -12%; opacity: .08; } }

.frase p {
  position: relative;
  font-family: var(--serif);
  /* mesmo tamanho dos títulos de seção — nunca maior */
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin: 0;
}
.frase-isolada {
  color: #DBD8D3;
}
.frase-isolada em {
  font-style: normal;
  color: #FFFFFF;
}

/* =========================== TEXTO + FOTO ============================== */
.dupla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60em) {
  .dupla { grid-template-columns: 1fr .85fr; gap: 5rem; }
  .dupla.inverte { grid-template-columns: .85fr 1fr; }
  .dupla.inverte .dupla-figura { order: -1; }
}
.dupla-texto { max-width: 40rem; }
.dupla-texto p { color: var(--tinta-2); }
.dupla-texto p strong { color: var(--tinta); }

/* mesmo tamanho do texto corrido, só com mais espaço em volta */
.fecho { margin-top: 2rem; }
@media (min-width: 48em) { .fecho { margin-top: 2.5rem; } }

/* primeira frase maior: cria degrau de leitura dentro do bloco */
.abre-bloco {
  font-family: var(--serif);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.42;
  color: var(--tinta) !important;
  margin-bottom: 1.4rem;
}
@media (min-width: 48em) { .abre-bloco { font-size: 1.6875rem; } }

.figura-suave { margin: 0; position: relative; }
.figura-suave img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.75rem;
  box-shadow: 0 2px 6px rgba(46,58,55,.06), 0 22px 50px rgba(46,58,55,.12);
}
.figura-suave .fundo {
  position: absolute;
  inset: -1.5rem -1.5rem 1.5rem 1.5rem;
  background: var(--tint);
  border-radius: 1.75rem;
}
.dupla.inverte .figura-suave .fundo { inset: -1.5rem 1.5rem 1.5rem -1.5rem; }

/* ficha de credenciais */
.ficha { margin: 0 0 2.25rem; padding-left: 1.25rem; border-left: 3px solid var(--verde); }
.ficha .nome {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 400;
  line-height: 1.1; margin: 0 0 .3rem; color: var(--tinta);
}
@media (min-width: 48em) { .ficha .nome { font-size: 2.2rem; } }
.ficha .dados { font-size: .9375rem; color: var(--tinta-2); margin: 0; }

/* =========================== COMO FUNCIONA ============================= */
.galeria-consultorio {
  display: grid; gap: 1.25rem;
  max-width: 32rem; margin: 2.5rem auto 3.5rem;
}
@media (min-width: 40em) { .galeria-consultorio { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (min-width: 48em) { .galeria-consultorio { margin-top: 4rem; margin-bottom: 4.5rem; } }
.galeria-consultorio figure { margin: 0; align-self: end; }
.galeria-consultorio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.75rem;
  box-shadow: 0 2px 6px rgba(46,58,55,.06), 0 22px 50px rgba(46,58,55,.12);
}

.horarios { display: grid; gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
/* horários no final da coluna, logo acima do botão: espaço bom nos dois lados */
.horarios--fim { margin-top: 3rem; }
@media (min-width: 48em) { .horarios--fim { margin-top: 3.5rem; } }
@media (min-width: 40em) { .horarios { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.horarios li {
  background: var(--branco);
  border-radius: 1.25rem;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 1px 2px rgba(46,58,55,.04), 0 10px 26px rgba(46,58,55,.06);
}
.horarios .modo {
  font-family: var(--serif); font-style: italic; font-size: 1.1875rem;
  color: var(--verde); margin: 0 0 .35rem;
}
.horarios .quando { margin: 0; font-size: 1.0625rem; line-height: 1.5; }

/* =========================== SANFONA =================================== */
.sanfona { display: grid; gap: .9rem; max-width: 54rem; margin: 0 auto; }
.sanfona details {
  background: var(--branco);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(46,58,55,.04), 0 10px 26px rgba(46,58,55,.06);
  transition: box-shadow var(--transicao);
}
.sanfona details[open] { box-shadow: 0 2px 4px rgba(46,58,55,.05), 0 18px 40px rgba(46,58,55,.10); }
.sanfona summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 1.5rem 1.6rem;
  font-family: var(--serif);
  font-size: 1.3125rem; font-weight: 400; line-height: 1.28;
  color: var(--tinta);
  transition: color var(--transicao);
}
@media (min-width: 48em) { .sanfona summary { font-size: 1.5rem; padding: 1.75rem 2rem; } }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: var(--verde); }

.sinal {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--tint); position: relative;
  transition: background-color var(--transicao), transform var(--transicao);
}
.sinal::before, .sinal::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .8rem; height: 1.5px; background: var(--verde);
  transform: translate(-50%,-50%);
  transition: opacity var(--transicao), background-color var(--transicao);
}
.sinal::after { transform: translate(-50%,-50%) rotate(90deg); }
summary:hover .sinal { background: var(--tint-2); }
details[open] .sinal { background: var(--verde); transform: rotate(90deg); }
details[open] .sinal::before, details[open] .sinal::after { background: var(--branco); }
details[open] .sinal::after { opacity: 0; }

.sanfona .resposta { padding: 0 1.6rem 1.75rem; color: var(--tinta-2); }
@media (min-width: 48em) { .sanfona .resposta { padding: 0 2rem 2rem; max-width: 52ch; } }
.sanfona .resposta p { margin: 0; }

/* =========================== RODAPÉ ==================================== */
.rodape { padding: 4.5rem 1.5rem 7rem; }
@media (min-width: 48em) { .rodape { padding: 6rem 2.5rem 4.5rem; } }
.rodape .chamada { margin-top: 0; }

.rodape-grade { display: grid; gap: 3rem; }
@media (min-width: 60em) { .rodape-grade { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; } }

.rodape .marca-rodape { width: 14rem; margin: 0 0 2rem; }
.rodape .endereco { font-size: 1rem; line-height: 1.7; color: #C3D2CD; margin: 0 0 1.75rem; }
.rodape .endereco strong { display: block; color: var(--branco); font-weight: 600; }

.contatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.contatos a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--branco); text-decoration-color: rgba(255,255,255,.35);
  transition: text-decoration-color var(--transicao);
}
.contatos a:hover { text-decoration-color: var(--branco); }

.aviso {
  margin-top: 4rem; padding-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .9375rem; color: #B6C8C2;
}
.emergencia {
  background: rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1.15rem 1.4rem; margin-top: 1.25rem;
  font-size: .9375rem; color: var(--creme);
}
.emergencia strong { color: var(--branco); }
.creditos { margin-top: 2.5rem; font-size: .875rem; color: #B6C8C2; }

/* =========================== WHATSAPP ================================== */
.wa {
  position: fixed; right: 1.15rem; bottom: 1.15rem;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--verde);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(46,58,55,.28);
  z-index: 20;
  transition: background-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.wa:hover { background: var(--verde-hover); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(46,58,55,.34); }
.wa svg { width: 2.35rem; height: 2.35rem; fill: var(--branco); }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 1rem; top: 1rem; z-index: 30;
  background: var(--branco); color: var(--verde);
  padding: .75rem 1rem; border-radius: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .cartao:hover, .wa:hover, .video-quadro:hover .play { transform: none; }
}
@media print { .wa { display: none; } }