/* ==========================================================================
   Clínica ELOS — estilos compartilhados (todas as páginas)
   Medidas de referência: PSD de 1920 px. Fontes em rem (16 px base), espaços em rem/px.
   ========================================================================== */

/* ---------- Tokens (cores e fontes extraídas do PSD) ---------- */
:root {
  --cor-primaria: #854115;        /* marrom da marca: faixas, botões, títulos, rodapé */
  --cor-primaria-clara: #8B4D26;  /* marrom secundário (só onde o PSD usa) */
  --cor-primaria-quente: #A65B32; /* só o título "EXCELÊNCIA EM SAÚDE E ESTÉTICA" da página Clínica ELOS */
  --cor-fundo: #F5F5F5;           /* fundo de página */
  --cor-bege: #E5E1D6;            /* cabeçalho e faixas bege */
  --cor-escura: #363028;          /* faixas escuras */
  --cor-texto: #777167;           /* texto corrido */
  --cor-texto-escuro: #3C3830;    /* texto do hero de Tecnologias */
  --cor-titulo-escuro: #32302D;   /* título "cuidado 360º" */
  --cor-menu: #514E49;            /* menu e logo do cabeçalho */
  --cor-sublinhado-menu: #9C938B;
  --cor-icone: #4B4035;           /* indicador de rolagem */
  --cor-etiqueta: #C2BBB0;        /* etiqueta e divisórias suaves */
  --cor-branca: #FFFFFF;
  --cor-clara: #F5F5F5;           /* texto sobre marrom/escuro, botões claros */
  --cor-whatsapp: #25D366;

  /* Fontes reais do PSD primeiro (se estiverem instaladas), substitutas do Google Fonts em seguida.
     Quando os arquivos chegarem em fonts/, ativar o bloco @font-face abaixo. */
  --fonte-titulo: 'Branch', 'Italiana', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Sofia Pro', 'Outfit', Arial, Helvetica, sans-serif;
  --fonte-ui: 'Franie', 'Urbanist', Arial, Helvetica, sans-serif;

  /* Tipografia (valores do PSD → rem). Acima de 992 px os tamanhos escalam proporcionalmente
     à largura (px do PSD ÷ 1920 = vw), com teto no valor do PSD e piso de leitura — assim as
     quebras de linha do PSD se mantêm em 1440/1366/1280. Abaixo de 992 px (empilhado) ver @media. */
  --tam-texto: clamp(1.0625rem, 1.406vw, 1.6875rem);        /* 27 px */
  --tam-texto-p: clamp(1rem, 1.198vw, 1.4375rem);            /* 23 px */
  --tam-texto-g: clamp(1.125rem, 1.62vw, 1.94375rem);        /* 31.1 px */
  --tam-titulo-hero: clamp(2.6rem, 4.917vw, 5.9rem);         /* 94.4 px */
  --tam-titulo-g: clamp(2.2rem, 3.96vw, 4.75rem);            /* 76 px */
  --tam-titulo-m: clamp(2.1rem, 3.75vw, 4.5rem);             /* 72 px */
  --tam-titulo: clamp(2rem, 3.51vw, 4.2125rem);              /* 67.4 px */
  --tam-titulo-p: clamp(1.8rem, 3.02vw, 3.625rem);           /* 58 px */
  --tam-sobretitulo: clamp(1.25rem, 1.594vw, 1.9125rem);     /* 30.6 px */
  --tam-etiqueta: clamp(0.95rem, 1.344vw, 1.6125rem);        /* 25.8 px */
  --tam-menu: 1.0125rem;                                      /* 16.2 px */
  --tam-rodape: 1.08125rem;                                           /* 17.3 px */
  --tam-botao: 1.25rem;                                               /* 20 px */
  --lh-texto: 1.2;
  --lh-titulo: 1.08;
  --lh-titulo-justo: 0.92;
  --ls-padrao: -0.03em;

  /* Layout */
  --largura-container: 1540px;
  --margem-lateral: clamp(16px, 4vw, 190px);
  --altura-cabecalho: 96px;
  --gap-menu: 66px;
  --altura-botao: 50px;
  --raio-botao: 999px;

  /* Espaços verticais (arredondamento dos respiros do PSD) */
  --espaco-p: clamp(56px, 6vw, 112px);
  --espaco-m: clamp(72px, 8.5vw, 160px);
  --espaco-g: clamp(88px, 11vw, 215px);
  --espaco-xg: clamp(100px, 15vw, 300px);
  --espaco-titulo-texto: clamp(24px, 2.5vw, 48px);
  --espaco-texto-botao: clamp(24px, 2vw, 40px);

  /* Animações */
  --anim-duracao: 0.9s;
  --anim-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fontes reais (ativar quando os arquivos estiverem em site/fonts/)
@font-face { font-family: 'Branch'; src: url('../fonts/Branch-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('../fonts/SofiaPro-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('../fonts/SofiaPro-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('../fonts/SofiaPro-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/Franie-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/Franie-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Franie'; src: url('../fonts/Franie-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
*/

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tam-texto);
  line-height: var(--lh-texto);
  letter-spacing: var(--ls-padrao);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 4px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Container e grids ---------- */
.container {
  width: 100%;
  max-width: calc(var(--largura-container) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}
.container--estreito { max-width: calc(1200px + 2 * var(--margem-lateral)); }
.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}
.duas-colunas--topo { align-items: start; }
.duas-colunas--base { align-items: end; }
.alinha-dir { text-align: right; }
.alinha-centro { text-align: center; }
.coluna-texto { max-width: 46ch; }
.alinha-dir .coluna-texto, .coluna-texto--dir { margin-left: auto; }
.alinha-centro .coluna-texto { margin-inline: auto; }

/* ---------- Tipografia ---------- */
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--tam-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-padrao);
  color: var(--cor-primaria);
}
.titulo--hero { font-size: var(--tam-titulo-hero); line-height: 1; }
.titulo--g { font-size: var(--tam-titulo-g); }
.titulo--m { font-size: var(--tam-titulo-m); }
.titulo--p { font-size: var(--tam-titulo-p); }
.titulo--justo { line-height: var(--lh-titulo-justo); }
.titulo--caixa-alta { text-transform: uppercase; }
.titulo--branco { color: var(--cor-branca); }
.titulo--claro { color: var(--cor-clara); }
.titulo--escuro { color: var(--cor-titulo-escuro); }
.titulo--quente { color: var(--cor-primaria-quente); }

.texto { color: var(--cor-texto); }
.texto p + p { margin-top: 1.2em; }
.texto--branco, .texto--branco p { color: var(--cor-branca); }
.texto--claro, .texto--claro p { color: var(--cor-clara); }
.texto--escuro, .texto--escuro p { color: var(--cor-texto-escuro); }
.texto--primaria, .texto--primaria p { color: var(--cor-primaria); }
.texto--p { font-size: var(--tam-texto-p); }
.texto--g { font-size: var(--tam-texto-g); }
.texto--medio { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); }

.titulo + .texto { margin-top: var(--espaco-titulo-texto); }
.texto + .botao, .texto + .botao-linha { margin-top: var(--espaco-texto-botao); }

.sobretitulo {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-style: italic;
  font-size: var(--tam-sobretitulo);
  line-height: 1.1;
  color: var(--cor-primaria);
}
.sobretitulo--branco { color: var(--cor-branca); }
.sobretitulo--regular { font-weight: 400; font-style: normal; font-size: var(--tam-texto); color: var(--cor-texto); }
.sobretitulo + .titulo { margin-top: 0.6rem; }

.etiqueta {
  font-family: var(--fonte-ui);
  font-weight: 600;
  font-size: var(--tam-etiqueta);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cor-etiqueta);
}
.etiqueta + .titulo { margin-top: 1.5rem; }

.pre-titulo { margin-bottom: 0.75rem; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-botao);
  padding: 0.55em 1.6em;
  border-radius: var(--raio-botao);
  background: var(--cor-primaria);
  color: var(--cor-clara);
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: var(--tam-botao);
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  text-align: center;
  white-space: nowrap;
  transition: transform 0.35s var(--anim-curva), background-color 0.35s, box-shadow 0.35s, color 0.35s;
}
.botao:hover, .botao:focus-visible {
  transform: translateY(-2px);
  background: #6F350F;
  box-shadow: 0 10px 24px rgba(133, 65, 21, 0.28);
}
.botao--caixa-alta { text-transform: uppercase; }
.botao--sofia { font-family: var(--fonte-texto); font-weight: 400; font-size: var(--tam-texto); }
.botao--sofia-bold { font-family: var(--fonte-texto); font-weight: 700; font-size: var(--tam-texto); }
.botao--g { min-height: 58px; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.44rem); padding: 0.55em 1.5em; }
.botao--p { min-height: 49px; font-size: 1.22rem; }
.botao--claro { background: var(--cor-clara); color: var(--cor-escura); }
.botao--claro:hover, .botao--claro:focus-visible { background: var(--cor-branca); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.botao--claro-primaria { background: var(--cor-clara); color: var(--cor-primaria); }
.botao--claro-primaria:hover, .botao--claro-primaria:focus-visible { background: var(--cor-branca); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.botao--secundaria { background: var(--cor-primaria-clara); }
.botao--secundaria:hover, .botao--secundaria:focus-visible { background: #73401F; }
.botao--branco-texto { color: var(--cor-branca); }
@media (max-width: 576px) { .botao { white-space: normal; } }

/* ---------- Faixas de cor (full-bleed) ---------- */
.faixa { background: var(--cor-primaria); color: var(--cor-branca); }
.faixa--escura { background: var(--cor-escura); color: var(--cor-clara); }
.faixa--bege { background: var(--cor-bege); }
.faixa .titulo, .faixa--escura .titulo { color: inherit; }
.faixa .texto, .faixa .texto p, .faixa--escura .texto, .faixa--escura .texto p { color: inherit; }
.faixa--bege { color: var(--cor-texto); }
.faixa--bege .titulo { color: var(--cor-primaria); }

/* ---------- Fotos ---------- */
.foto { position: relative; overflow: hidden; background: var(--cor-bege); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--pb img { filter: grayscale(1); }

/* ---------- Divisórias ---------- */
.divisoria { border: 0; border-top: 1px solid var(--cor-primaria); margin: 0; }
.divisoria--suave { border-top-color: var(--cor-etiqueta); }
.divisoria--clara { border-top-color: var(--cor-clara); }

/* ---------- Indicador de rolagem (círculo + seta) ---------- */
.indicador-rolagem {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cor-icone);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--cor-icone);
  animation: flutuar 2.4s ease-in-out infinite;
}
.indicador-rolagem svg { width: 13px; height: 12px; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: relative;
  z-index: 50;
  background: var(--cor-bege);
  height: var(--altura-cabecalho);
}
.cabecalho__inner {
  height: 100%;
  padding: 0 78px 0 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cabecalho__logo { flex: 0 0 auto; }
.cabecalho__logo img { width: 145px; height: 43px; }
.menu__lista { display: flex; align-items: center; gap: var(--gap-menu); }
.menu__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--fonte-ui);
  font-size: var(--tam-menu);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cor-menu);
  letter-spacing: 0;
  white-space: nowrap;
}
.menu__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cor-sublinhado-menu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--anim-curva);
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: scaleX(1); }
.menu__link--ativo { font-weight: 700; }
.menu__link--cta::after { transform: scaleX(1); }
.menu__link--cta:hover::after { transform-origin: right; transform: scaleX(0); }
.cabecalho__menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
}
.cabecalho__menu-botao span {
  display: block;
  height: 2px;
  background: var(--cor-menu);
  transition: transform 0.35s, opacity 0.35s;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cor-primaria);
  color: var(--cor-branca);
  font-family: var(--fonte-ui);
  font-size: var(--tam-rodape);
  line-height: 32px;
  letter-spacing: var(--ls-padrao);
}
.rodape__inner {
  display: grid;
  grid-template-columns: 558fr 377fr 436fr 330fr;   /* proporções do PSD (x 131 / 689 / 1066 / 1502 → 1832) */
  padding: 50px 4.6% 56px 6.8%;
  min-height: 285px;
  align-items: start;
}
.rodape__logo img { width: 286px; height: 85px; margin-top: 5px; }
.rodape__titulo {
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
}
.rodape__link { display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.3s; }
.rodape__link:hover { opacity: 0.75; }
.rodape__icone { width: 19px; height: 19px; flex: 0 0 auto; }
.rodape address { font-style: normal; }

/* ---------- Botão flutuante de WhatsApp ---------- */
.whatsapp-flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cor-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--anim-curva), box-shadow 0.35s;
}
.whatsapp-flutuante img { width: 32px; height: 32px; }
.whatsapp-flutuante:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }

/* ---------- Animações de entrada (JS adiciona .revelar--visivel) ---------- */
.revelar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--anim-duracao) var(--anim-curva), transform var(--anim-duracao) var(--anim-curva);
  transition-delay: var(--atraso, 0s);
  will-change: opacity, transform;
}
.revelar--esq { transform: translateX(-40px); }
.revelar--dir { transform: translateX(40px); }
.revelar--zoom { transform: scale(1.05); }
.revelar--visivel { opacity: 1; transform: none; }
.foto.revelar img { transform: scale(1.06); transition: transform 1.4s var(--anim-curva); }
.foto.revelar--visivel img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .foto.revelar img { transform: none; }
  .indicador-rolagem { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsivo ---------- */
/* Menu em linha só cabe com folga a partir de ~1760 px: entre 1201 e 1760 encolhe fonte e vão; até 1200 vira hambúrguer */
@media (max-width: 1760px) {
  .cabecalho__inner { padding: 0 40px; }
  .menu__lista { gap: clamp(20px, 3vw, 66px); }
  .menu__link { font-size: clamp(0.8125rem, 0.3rem + 0.72vw, 1.0125rem); }
}
@media (max-width: 1200px) {
  .rodape__inner {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px 24px;
    padding: 48px 40px;
  }
  .rodape__logo { grid-column: 1 / -1; }
  .cabecalho__inner { padding: 0 24px; }
  .cabecalho__menu-botao { display: flex; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cor-bege);
    padding: 12px 24px 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, transform 0.35s var(--anim-curva), visibility 0s 0.35s;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
  }
  .menu--aberto { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s var(--anim-curva); }
  .menu__lista { flex-direction: column; align-items: flex-start; gap: 4px; }
  .menu__link { padding: 10px 0; font-size: 1.1rem; }
  .menu__link--cta::after { display: none; }
  .menu__link--cta { color: var(--cor-primaria); font-weight: 700; }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .cabecalho__menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}
@media (max-width: 992px) {
  :root {
    --tam-texto: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
    --tam-titulo-hero: clamp(2.6rem, 1.8rem + 4vw, 4rem);
    --tam-titulo-g: clamp(2.2rem, 1.6rem + 3.2vw, 3.4rem);
    --tam-titulo-m: clamp(2.1rem, 1.5rem + 3vw, 3.2rem);
    --tam-titulo: clamp(2rem, 1.4rem + 3vw, 3rem);
    --tam-titulo-p: clamp(1.8rem, 1.3rem + 2.6vw, 2.6rem);
  }
  .duas-colunas { grid-template-columns: 1fr; }
  .duas-colunas > .foto { order: -1; }
  .alinha-dir { text-align: left; }
  .alinha-dir .coluna-texto, .coluna-texto--dir { margin-left: 0; }
  .coluna-texto { max-width: 100%; }
}
@media (max-width: 768px) {
  :root { --altura-cabecalho: 72px; }
  .cabecalho__logo img { width: 120px; height: auto; }
  .rodape__inner { grid-template-columns: 1fr; padding: 40px 24px; }
  .rodape__logo img { width: 220px; height: auto; }
  .whatsapp-flutuante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
@media (max-width: 576px) {
  .titulo br { display: none; }
}