/* Tema do Kit Clínica: acolhedor. Creme e neutros quentes, Fraunces nos
 * títulos, fotos com cantos orgânicos e arcos. As cores da clínica entram
 * como acento; o fundo quente é do tema. */

:root {
  --fundo: #fbf7f1;
  --superficie: #ffffff;
  --superficie-2: #f4ede3;
  --texto: #221b16;
  --texto-suave: #6b5f55;
  --borda: rgb(34 27 22 / 0.1);
  --fonte-titulo: 'Fraunces', Georgia, serif;
  --raio-grande: 30px;
  --sombra: 0 1px 2px rgb(60 40 20 / 0.05), 0 18px 40px -20px rgb(60 40 20 / 0.22);
  --sombra-alta: 0 2px 6px rgb(60 40 20 / 0.06), 0 30px 60px -26px rgb(60 40 20 / 0.35);
}

h1, h2 { font-variation-settings: 'opsz' 72, 'SOFT' 100; letter-spacing: -0.01em; }
h1 { font-weight: 500; font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.06; }
h3 { font-weight: 600; }

/* Hero: foto em arco, forma quente atrás e o cartão da nota por cima. */
.abertura {
  background:
    radial-gradient(60% 70% at 100% 0%, var(--destaque-suave), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, var(--primaria-suave), transparent 70%);
}
.abertura-foto {
  position: relative; z-index: 1;
  border-radius: 240px 240px var(--raio-grande) var(--raio-grande);
  aspect-ratio: 4 / 4.8;
}
.forma {
  position: absolute; z-index: 0; right: -6%; top: 10%; width: 72%; aspect-ratio: 1;
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
  background: var(--cor-destaque); opacity: 0.35; filter: blur(2px);
  animation: respirar 12s ease-in-out infinite alternate;
}
@keyframes respirar {
  to { border-radius: 56% 44% 52% 48% / 45% 55% 45% 55%; transform: rotate(8deg) scale(1.04); }
}
.nota-cartao { bottom: 12%; }

/* Diferenciais em cartões leves logo depois dos números. */
.diferenciais li { padding: 24px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borda); }

/* Números em faixa quente. */
.numeros { background: var(--superficie-2); border: 0; }

/* Especialidades em bento: a primeira ganha destaque e duas colunas. */
.cartao { background: var(--superficie); }
.cartao:first-child { background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-color: transparent; }
.cartao:first-child p { color: inherit; }
.cartao:first-child .selo {
  background: color-mix(in srgb, var(--cor-sobre-primaria) 16%, transparent); color: var(--cor-sobre-primaria);
}
.cartao h3 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.4rem; }

/* Ansiedade: bloco colorido com forma orgânica ao fundo. */
.ansiedade { position: relative; overflow: hidden; }
.ansiedade::after {
  content: ''; position: absolute; right: -10%; bottom: -30%; width: 50%; aspect-ratio: 1;
  border-radius: 50%; background: color-mix(in srgb, var(--cor-sobre-primaria) 8%, transparent);
}
.ansiedade .conteiner { position: relative; z-index: 1; }

/* Equipe em arcos. */
.equipe img { border-radius: 200px 200px var(--raio-grande) var(--raio-grande); }

/* Galeria com cantos suaves. */
.fotos img { border-radius: var(--raio-grande); }

.depoimento figure { background: var(--superficie); }
.faixa-trilho li { background: var(--superficie); }
.duvidas { background: var(--superficie-2); }
.agendar { background: var(--fundo); }
.onde { background: var(--superficie-2); }

@media (min-width: 1100px) {
  .cartoes { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .cartao:first-child { grid-column: span 2; padding: 36px; }
  .cartao:first-child h3 { font-size: 1.9rem; }
  /* Seis cards fecham duas linhas certas: o último também ocupa duas colunas. */
  .cartao:last-child:nth-child(6) { grid-column: span 2; }
}