/* Gerado por _build/baixar-google-fonts.py - nao editar a mao */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/work-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/work-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/work-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/work-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   SOLARIS — Medicina e Estética
   CSS único do tema. Seções separadas por faixa de comentário.
   Medidas tiradas do site no ar (ver _docs/levantamento.md).
   Não usar @import. Não criar arquivo por componente.
   ========================================================================== */


/* ==========================================================================
   1. FONTES DE ARQUIVO (as licenciadas; as Google entram pelo build)
   ========================================================================== */

@font-face {
  font-family: 'IntroBoldAlt';
  src: url('../fonts/intro-bold-alt.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Recline';
  src: url('../fonts/ReclineLightDemo-jEnOM.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'century-gothic';
  src: url('../fonts/century-gothic.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
  /* --- cores da marca --- */
  --camelo: #C38E5B;          /* fundo das páginas de tratamento */
  --camelo-btn: #AF6426;      /* pílulas de ação */
  --areia: #D4BEA7;
  --bronze: #B9855F;
  --bronze-fundo: #AF794E;
  --bronze-veu: rgba(181, 101, 29, .08);
  --veu-hover: rgba(181, 131, 88, .72);   /* #B58358 — véu do hover nas fotos */

  /* --- neutros --- */
  --branco: #FFFFFF;
  --quase-branco: #F9F9F9;
  --tinta: #111111;
  --tinta-corpo: #0A0A0A;
  --veu-branco: rgba(255, 255, 255, .20);
  --veu-branco-forte: rgba(255, 255, 255, .32);

  /* --- tipografia --- */
  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-nav: 'Work Sans', system-ui, -apple-system, sans-serif;

  --t-titulo: 2.25rem;        /* 36px  — h1/h2 de página */
  --t-titulo-lh: 1.2;
  --t-secao: 2.25rem;         /* 36px  — h2 de seção (medido no ar) */
  --t-corpo: 1.125rem;        /* 18px */
  --t-corpo-lh: 1.4;
  --t-nav: 0.9375rem;         /* 15px */
  --t-btn: 1rem;              /* 16px */

  /* --- medidas --- */
  --container: 1440px;        /* conteúdo — medido no ar */
  --container-largo: 1440px;
  --altura-header: 77px;
  --raio-cartao: 60px;
  --raio-cartao-p: 20px;
  --raio-pilula: 50px;

  --gap: 2rem;
  --faixa-y: 5rem;            /* respiro vertical entre faixas */
}


/* ==========================================================================
   3. RESET E BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: var(--t-corpo-lh);
  color: var(--tinta-corpo);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 400; line-height: var(--t-titulo-lh); }

p { margin: 0 0 1.1em; }

ul { margin: 0 0 1.4em; padding-left: 1.4em; }

li { margin-bottom: .625rem; }   /* 10px, medido no ar */

:focus-visible { outline: 3px solid var(--camelo-btn); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* --------------------------------------------------------------------------
   FAIXA DE TELA CHEIA
   Cada faixa ocupa a altura da janela. Duas salvaguardas para telas baixas:
   - min-height (não height): se o conteúdo for mais alto, a faixa cresce
   - justify-content: safe center: quando não cabe, o navegador alinha no
     início em vez de centralizar — centralizar cortaria o topo, e o topo
     é onde fica o título.
   svh em vez de vh evita o pulo causado pela barra do navegador no celular.
   -------------------------------------------------------------------------- */
.faixa-cheia {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding-block: 80px;          /* garantido em cima e embaixo */
}

/* a primeira faixa fica sob o header fixo */
.faixa-cheia--primeira { padding-top: calc(var(--altura-header) + clamp(1.5rem, 5vh, 3rem)); }

/* --------------------------------------------------------------------------
   ALVOS DE ÂNCORA
   O scroll para exatamente no topo da faixa (scroll-margin-top: 0), e o header
   fixo flutua sobre o respiro superior dela — assim não aparece nenhuma nesga
   da faixa anterior. Esse respiro precisa, então, comportar o header inteiro
   mais 40px de folga, senão o conteúdo fica debaixo do menu.
   O seletor [id] tem prioridade sobre .faixa-cheia, inclusive dentro das
   media queries de tela baixa, que encolhem o respiro das demais faixas.
   -------------------------------------------------------------------------- */
:target, .faixa-cheia[id], #rodape { scroll-margin-top: 0; }

/* nos alvos de âncora o respiro de cima cresce para caber o header + 40px */
.faixa-cheia[id] {
  padding-top: max(80px, calc(var(--altura-header) + 40px));
}

#rodape { padding-top: max(80px, calc(var(--altura-header) + 40px)); }

/* O respiro de 80px é garantido em qualquer altura de tela. Como as faixas
   usam min-height (não height), em tela baixa elas crescem em vez de
   espremer o conteúdo — nada é cortado. */

/* pula para o conteúdo — acessibilidade */
.pular {
  position: absolute; left: -9999px;
  background: var(--branco); color: var(--tinta);
  padding: .75rem 1.25rem; border-radius: var(--raio-pilula); z-index: 200;
}
.pular:focus { left: 1rem; top: 1rem; }


/* ==========================================================================
   4. PÍLULAS DE AÇÃO
   ========================================================================== */

/* Caixa normal por padrão: no site no ar só o CTA do header e o "CLIQUE AQUI"
   dos cartões de categoria são maiúsculos. Os demais ("Saiba mais",
   "Agendar avaliação", "Agendamento") vêm em caixa de frase. */
.pilula {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fonte);
  font-size: var(--t-btn); font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--raio-pilula);
  padding: .9375rem 1.75rem;
  border: 0; cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* os dois casos que são maiúsculos no ar */
.cabecalho .pilula--veu,
.categoria .pilula { text-transform: uppercase; letter-spacing: .02em; }

.pilula:hover { transform: translateY(-2px); }

/* contorno translúcido sobre foto/camelo — o "Agendar Consulta" do header */
.pilula--veu {
  background: var(--veu-branco);
  color: var(--branco);
}
.pilula--veu:hover { background: var(--veu-branco-forte); }

/* sólida — o "Agendamento" do CTA e o "Voltar" */
.pilula--solida {
  background: var(--camelo-btn);
  color: var(--branco);
}
.pilula--solida:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }

.pilula--escura {
  background: #524338; color: var(--branco);
  font-size: 1.25rem; font-weight: 300; letter-spacing: 0;
  padding: .9375rem 1.5rem;
}
.pilula--escura:hover { background: #61503f; }

.pilula--voltar {
  font-size: var(--t-corpo); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  padding: .4375rem 1.375rem;   /* calibrado: 119x39 como no ar */
  line-height: 1.35;
}


/* ==========================================================================
   5. HEADER — fixo, camelo translúcido
   ========================================================================== */

/* Medido no ar: fundo bronze a 8% + blur(30px). É vidro fosco, não uma
   faixa sólida — por isso o logo pode passar da altura sem criar um corte. */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--altura-header);
  display: flex; align-items: center;
  background: var(--bronze-veu);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.cabecalho__interno {
  width: 100%; max-width: var(--container-largo);
  margin-inline: auto; padding-inline: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
}

.marca { flex: 0 0 auto; display: flex; align-items: center; }

/* o logo nunca ultrapassa a altura do header — no ar ele estoura 11px e
   fica disfarçado pelo fundo translúcido; aqui ele simplesmente cabe. */
.marca img {
  width: auto;
  height: auto;
  max-height: calc(var(--altura-header) - 14px);
  max-width: 150px;
}

/* pílula translúcida que envolve o menu */
.menu {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: .3125rem 1.25rem;
  background: var(--veu-branco);
  border-radius: var(--raio-pilula);
}

.menu li { margin: 0; }

/* medido no ar: Poppins 16/400 uppercase, padding 15px */
.menu a {
  display: block; padding: .9375rem;
  font-family: var(--fonte);
  font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: uppercase;
  color: var(--branco);
  border-radius: var(--raio-pilula);
  transition: background-color .2s ease;
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--veu-branco); }

/* hambúrguer — só no mobile */
.hamburguer {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: var(--veu-branco); border: 0; border-radius: 50%;
  cursor: pointer;
}
.hamburguer span {
  display: block; width: 18px; height: 2px; margin: 3px auto;
  background: var(--branco); transition: transform .25s ease, opacity .25s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* ==========================================================================
   6. PÁGINA DE TRATAMENTO
   ========================================================================== */

.tratamento {
  background: var(--camelo);
  padding-bottom: var(--faixa-y);
  color: var(--branco);
}

/* a abertura (cartão + foto) ocupa a altura da tela; o corpo vem depois */
.tratamento__abertura .abertura { margin-top: 2rem; }
.tratamento__abertura .pilula--voltar { align-self: flex-start; }

/* segundo "Voltar", no fim da página, antes do rodapé */
.tratamento__voltar-fim {
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  text-align: center;
}

/* --- abertura: cartão + foto ---
   Medido no ar (viewport 1858, container interno 1392px):
     cartão 840px = 60.34%   foto 612px = 43.97%   sobreposição 60px = 4.31%
   Em flex a proporção se mantém em qualquer largura. */
.abertura {
  display: flex;
  align-items: center;
  margin-top: 6rem;
}

/* páginas cujo cliente ainda não entregou a foto (pequenas suturas, elevação
   de supercílios): sem o segundo item o cartão ficava solto à esquerda com
   metade da faixa vazia. Aqui ele centra e respira. */
.abertura--sem-foto { justify-content: center; }
.abertura--sem-foto .abertura__cartao { margin-right: 0; max-width: 900px; }

.abertura__cartao {
  flex: 0 0 60.34%;
  margin-right: -4.31%;
  background: var(--branco);
  color: var(--tinta-corpo);
  border-radius: var(--raio-cartao);
  padding: 3.875rem 3.75rem;   /* calibrado: cartão fecha em 404px de altura */
  position: relative; z-index: 2;
}

.abertura__cartao h1 {
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
  color: var(--camelo);
  margin-bottom: 1rem;
}

.abertura__cartao p:last-child { margin-bottom: 0; }

.abertura__foto {
  flex: 0 0 43.97%;
  margin: 0 0 0 auto;
  position: relative; z-index: 1;
}
/* o arredondamento vem embutido no PNG — não recortar por CSS */
.abertura__foto img { width: 100%; }

/* --- seções de conteúdo sobre o camelo --- */
.secao { margin-top: 3.5rem; }

.secao h2 {
  font-size: var(--t-secao);
  color: var(--branco);
  margin-bottom: .75rem;
}

.secao p, .secao li { color: var(--branco); }

.secao ul { list-style: disc; }

.secao__nota {
  font-size: 1rem;
  opacity: .88;
  font-style: italic;
}

/* --- cartão de CTA --- */
.cta {
  background: var(--branco);
  color: var(--tinta-corpo);
  border-radius: var(--raio-cartao-p);
  padding: 3rem 2.5rem;
  margin: 4.5rem auto 0;
  max-width: 720px;
  text-align: center;
}

.cta h2 {
  font-size: var(--t-titulo);
  color: var(--tinta);
  margin-bottom: 1rem;
}

.cta p { margin-bottom: 1.25rem; }
.cta p:last-of-type { margin-bottom: 2rem; }


/* ==========================================================================
   6b. HOME — 14 faixas (medidas em _docs/levantamento.md)
   ========================================================================== */

/* --- HERO: foto de fundo, títulos nas duas pontas, descritivo e CTA --- */
.hero {
  position: relative;
  color: var(--branco);
  background: #8a6a4d url('../img/webp/bg-solaris.webp') center center / cover no-repeat;
  /* O respiro de cima é maior que o de baixo de propósito: isso desloca o
     centro do grupo para BAIXO e tira o descritivo da altura da boca da
     modelo, que fica bem no meio vertical da foto. */
}

.hero.faixa-cheia--primeira {
  padding-top: calc(var(--altura-header) + clamp(3rem, 20vh, 13rem));
}

/* espaçamento uniforme entre título, descritivo e botão */
.hero > .container {
  display: flex; flex-direction: column;
  gap: clamp(1.75rem, 6vh, 4rem);
}

/* é um <h1>: as duas metades do título vivem dentro dele */
.hero__titulos {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--gap);
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);   /* medido no ar: 40px */
  line-height: 1;
  font-weight: 400;
}

.hero__titulos strong { font-weight: 700; display: block; }
.hero__titulos > span > span { font-weight: 300; display: block; }
.hero__esq, .hero__dir { display: block; }
.hero__dir { text-align: right; }

/* medido no ar: 1224px, o mesmo vidro do header (bronze 8% + blur 30px),
   radius 20px e borda cinza de 1px. Texto 18px em peso 300. */
.hero__descritivo {
  max-width: 1224px; margin-inline: auto;
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 1.125rem; font-weight: 300;
  background: var(--bronze-veu);
  border: 1px solid #888888;
  border-radius: 20px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.hero__cta { margin: 0; text-align: center; }

/* --- CATEGORIAS: 4 cartões sobre a parede de pedra --- */
.categorias {
  background: #6f6a5e url('../img/webp/ChatGPT-Image-25-de-mai.-de-2026-10_36_04.webp') center center / cover no-repeat;
}

.categorias__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;                       /* medido no ar */
  max-width: 1288px; margin-inline: auto;
}

.categoria {
  position: relative; overflow: hidden;
  min-height: 474px;               /* medido no ar */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .5rem;
  padding: 2rem 1.25rem;
  text-align: center; color: var(--branco);
  background: var(--camelo);
  border: 1px solid rgba(255, 255, 255, .55);
}

/* foto de fundo só nos cartões que têm (Corporais e Cirúrgicos, no ar) */
.categoria__foto {
  position: absolute; inset: 0; z-index: 0;
  object-fit: cover; width: 100%; height: 100%;
}

/* o véu do hover: como no original, um elemento dentro do link que recebe
   rgba(0,0,0,.35). Fica acima da foto e abaixo do texto. */
.categoria__veu {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, 0);
  transition: background-color .28s ease;
  pointer-events: none;
}
.categoria:hover .categoria__veu,
.categoria:focus-visible .categoria__veu { background: rgba(0, 0, 0, .35); }

.categoria > *:not(.categoria__foto):not(.categoria__veu) {
  position: relative; z-index: 2;
}

.categoria__logo { width: 74px; margin-bottom: .75rem; }

.categoria__rotulo {
  font-size: .8125rem; font-weight: 300;
  letter-spacing: -1px;            /* medido no ar */
}

.categoria h3 {
  margin: 0; font-size: 1.25rem; font-weight: 300;
  text-transform: uppercase; letter-spacing: .01em;
}

.categoria__seta { font-size: 1.75rem; line-height: 1; margin: .25rem 0 .75rem; }

.categoria p { font-size: .75rem; margin: 0 0 auto; }

/* pílula meramente visual: quem é clicável é o cartão inteiro */
.categoria .pilula {
  margin-top: 1.25rem;
  font-size: .8125rem; padding: .625rem 1.25rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .8);
  color: var(--branco);
  pointer-events: none;
}
.categoria:hover .pilula { background: var(--veu-branco); }

/* --- TECNOLOGIAS --- */
.tecnologias {
  background: var(--areia);
  color: var(--tinta);
}

/* Medido no ar: h1 150px Poppins 400 branco, centralizado, lh 1 */
.tecnologias__titulo {
  font-size: clamp(3rem, 10vw, 150px);
  line-height: 1; font-weight: 400;
  color: var(--branco);
  text-align: center;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* topo da faixa: 3 cartões à esquerda, equipamentos à direita.
   Alinhados pela BASE: como a foto é bem mais alta que os cartões, ela sobe
   até a altura do título e ocupa o espaço vertical livre — é assim no ar. */
.tec-topo {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.tec-destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 244px));
  gap: 1.25rem;
}

/* Encostada na direita do container e alinhada pela base com os cartões.
   A altura acompanha a janela (48vh) para preencher o espaço livre da faixa,
   com piso de 260px em telas baixas e teto de 560px em monitores grandes. */
.tec-equipamentos {
  margin: 0;
  justify-self: end;
  align-self: end;
}
.tec-equipamentos img {
  width: auto;
  max-width: 100%;
  height: clamp(260px, 48vh, 560px);
  object-fit: contain;
  object-position: bottom right;
}

/* cada item = tags FORA, acima, e o cartão abaixo (é assim no ar) */
.tec-item { display: flex; flex-direction: column; }

.tec-item__tags {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-bottom: .625rem;
}

.tec-item__tags span {
  font-size: .875rem; font-weight: 500; line-height: 1.3;
  color: #222222;
  padding: 2px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 32px;
}

.tec-card {
  display: flex; flex-direction: column; flex: 1;
  padding: 20px 15px 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 32px;
  background: transparent;
  color: var(--branco);
}

.tec-card h3 {
  margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 600;
  color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px;
}

.tec-card p { font-size: 1.125rem; line-height: 1.4; margin-bottom: 1rem; }

.tec-card .pilula {
  align-self: flex-end; margin: auto 0 15px;
  font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--branco); color: #000000;
}

/* Grade IRREGULAR, medida no ar: 4 colunas de 333px, gap 20px, linhas de 150px.
   Radiofrequência e Carboxiterapia ocupam 2 colunas; Criomodelagem e Luz Pulsada
   ocupam 2 linhas. As posições vêm inline, de home.json. */
.tec-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: 20px;
}

.tec-foto {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: var(--quase-branco);
  display: flex; align-items: flex-end;
  color: var(--tinta);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tec-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

/* véu bronze (#B58358) que aparece no hover */
.tec-foto::after {
  content: ''; position: absolute; inset: 0;
  background: var(--veu-hover);
  opacity: 0;
  transition: opacity .3s ease;
}

.tec-foto:hover, .tec-foto:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(60, 40, 24, .22);
}
/* o véu já carrega a transparência no token; aqui só o liga */
.tec-foto:hover::after, .tec-foto:focus-visible::after { opacity: 1; }

/* o rótulo vira branco sobre o véu bronze, para manter contraste */
.tec-foto:hover span, .tec-foto:focus-visible span { color: var(--branco); }
.tec-foto:hover img, .tec-foto:focus-visible img { transform: scale(1.04); }

/* rótulo escuro, sem véu no estado normal — é assim no ar.
   z-index acima do véu para continuar legível no hover. */
.tec-foto span {
  position: relative; z-index: 2;
  padding: 1rem 1.125rem;
  font-size: 1.25rem; font-weight: 400;
  color: var(--tinta);
  transition: color .3s ease;
}

/* o box "Conheça todas as tecnologias": sem foto, borda fina e seta */
.tec-todas {
  display: flex; flex-direction: column; justify-content: center; gap: .75rem;
  max-width: 400px;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(17, 17, 17, .35);
  border-radius: 20px;
  color: var(--tinta);
  transition: background-color .25s ease;
}
.tec-todas:hover { background: rgba(255, 255, 255, .35); }
.tec-todas > span:first-child { font-size: 1.375rem; line-height: 1.25; }

.tec-todas__seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-size: 1.25rem; line-height: 1;
  color: var(--branco); background: var(--tinta);
  border-radius: 50%;
}

/* --- MBP e SLIM 360: faixas com foto de fundo --- */
.faixa-foto {
  position: relative;
  color: var(--branco);
  background-color: #6b5a4a;
  background-repeat: no-repeat;
  background-size: cover;
}
.faixa-foto::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(30, 22, 16, .42);
}
.faixa-foto > * { position: relative; z-index: 1; }

.mbp { background-image: url('../img/webp/bg2.webp'); background-position: center center; }
.slim { background-image: url('../img/webp/bg3.webp'); background-position: 100% 50%; }
.quem-somos { background-image: url('../img/webp/bg4_02.webp'); background-position: center center; }

.faixa-foto__sobretitulo {
  font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  opacity: .9; margin-bottom: .75rem;
}

.faixa-foto h2 { font-size: var(--t-titulo); max-width: 22ch; }
.faixa-foto p { max-width: 62ch; }

/* --- MBP: linha no topo + bloco centralizado ---
   O rótulo e o contador ficam presos a 80px do topo da faixa; o título, o
   texto e o botão continuam centralizados no espaço que sobra. Usamos
   margin:auto no bloco central em vez de posicionamento absoluto para que,
   em tela baixa, a faixa cresça em vez de sobrepor. */
/* A linha do topo sai do fluxo (absoluta a 80px) para que o bloco central
   permaneça centralizado na faixa INTEIRA, e não no que sobra abaixo dela. */
.mbp__topo {
  position: absolute; top: 80px; left: 0; right: 0;
  z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap);
}
.mbp__topo p { margin: 0; }

.mbp__numero { font-size: 1.0625rem; opacity: .92; }

/* Em tela baixa a linha volta ao fluxo: absoluta, ela sobreporia o título.
   O respiro segue em 80px — a faixa cresce se precisar. */
@media (max-height: 760px) {
  .mbp { justify-content: flex-start; }
  .mbp__topo { position: static; flex: 0 0 auto; }
  .mbp__centro { margin-block: auto; }
}

@media (max-width: 860px) {
  .mbp__topo { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* --- SLIM 360: todo o conteúdo dentro de um círculo desfocado ---
   O círculo é um disco bronze translúcido com desfoque do que está atrás,
   e a borda some suavemente no gradiente (não é um anel duro). */
.slim { align-items: center; }

/* Valores lidos do DevTools do site no ar: é a mesma classe .glass do header
   (fundo bronze a 8% + blur 30px), com borda sólida e raio de 1000px. A forma
   de disco vem do raio enorme sobre uma caixa de 50% com 100px de padding
   vertical — não de aspect-ratio. */
/* CÍRCULO PERFEITO
   aspect-ratio: 1 garante o redondo; o conteúdo fica no quadrado inscrito
   (lado = diâmetro / raiz de 2 ≈ 70,7%), que é a maior área retangular que
   cabe dentro de um círculo. O diâmetro é limitado também pela altura da
   janela, e o JS aumenta o diâmetro se o conteúdo não couber. */
.slim__circulo {
  --diametro: min(660px, 84vw, 84vh);
  width: var(--diametro);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  background: rgba(181, 101, 29, .08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 2px solid #B07D50;
  border-radius: 50%;
}

.slim__conteudo {
  width: 70.7%;              /* quadrado inscrito */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem;
}

.slim__circulo h2 { margin: 0; font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.15; }
.slim__circulo p { margin: 0; font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.35; }

/* a barra bicolor (tom.png) que fica sob o título */
.slim__barra { width: 100%; max-width: 400px; height: auto; }

.slim__pilares {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.5rem;
}
.slim__pilares li {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: .9375rem;
}
.slim__ponto {
  width: 18px; height: 18px; border-radius: 50%;
  flex: 0 0 auto;
}
.slim__ponto--camelo { background: var(--camelo); }
.slim__ponto--claro { background: #E8CFB4; }

/* telas baixas: 100px de padding vertical não cabem */
@media (max-width: 860px) {
  /* abaixo disso o disco viraria uma fatia estreita: vira cápsula */
  .slim__circulo {
    width: 100%;
    aspect-ratio: auto;
    border-radius: 48px;
    padding: 2.5rem 1.75rem;
  }
  .slim__conteudo { width: 100%; }
}

.quem-somos h2 {
  font-size: clamp(2rem, 3.3vw, 3.125rem);   /* medido no ar: 50px */
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.quem-somos h2 span { font-weight: 300; display: block; }
.quem-somos h2 strong { font-weight: 700; display: block; }
.quem-somos__texto { max-width: 672px; }   /* coluna esquerda, medida no ar */
.quem-somos__texto p { font-size: 1rem; line-height: 1.4; }

/* --- DEPOIMENTOS ---
   Medido no ar: fundo #B57654, título 48px branco à esquerda numa coluna de
   552px, depoimentos em 15px como texto corrido (não cartões), e a foto das
   clientes (650x353) à direita. */
.depoimentos { background: #B57654; color: var(--branco); }

.depoimentos__grade {
  display: grid;
  grid-template-columns: minmax(0, 552fr) minmax(0, 650fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.depoimentos h2 {
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  line-height: 1.2; font-weight: 400;
  text-align: left; margin-bottom: 1.75rem;
}
.depoimentos h2 strong { font-weight: 700; }

.depoimentos__texto p {
  font-size: .9375rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.depoimentos__texto p:last-child { margin-bottom: 0; }
.depoimentos__texto cite { font-style: italic; }

.depoimentos__foto { margin: 0; }
.depoimentos__foto img { width: 100%; max-width: 650px; margin-inline: auto; }

/* --- BLOG ---
   Medido no ar: faixa #D4BEA7 (mesmo tom da Tecnologias), título 48px branco
   em caixa alta, resumo em 16px branco, e os cartões SEM fundo — o conteúdo
   fica direto sobre a faixa, centralizado. */
.blog { background: #D4BEA7; color: var(--branco); }

.blog__cabeca { text-align: center; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.blog__cabeca h2 {
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  font-weight: 400; text-transform: uppercase;
  color: var(--branco); margin-bottom: .35rem;
}
.blog__cabeca p { font-size: 1.125rem; color: var(--branco); margin: 0; }

.blog__grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.post-card {
  display: flex; flex-direction: column;
  background: transparent;
  text-align: center;
  color: var(--branco);
}
.post-card img {
  width: 100%;
  aspect-ratio: 2 / 1;      /* medido no ar: ~397x195 */
  object-fit: cover;
  border-radius: 18px;
  transition: transform .35s ease;
}
.post-card h3 {
  margin: 0; padding: 1.25rem 0 .75rem;
  font-size: clamp(1.25rem, 1.75vw, 1.625rem);
  font-weight: 400; line-height: 1.05;
  color: var(--branco);
}
.post-card p { margin: 0; font-size: 1rem; line-height: 1.3125; }

.post-card:hover img { transform: scale(1.03); }
.post-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* botão para a listagem completa, abaixo dos três cards da home */
.blog__todos { text-align: center; margin: clamp(2rem, 5vh, 3rem) 0 0; }


/* --- listagem do blog e página do artigo ---------------------------------
   Reaproveitam a anatomia da página de tratamento: abertura em altura de
   tela sobre o camelo e o corpo em cartões brancos. */
/* o camelo vem do próprio bloco, como em .tratamento — sem isto o texto
   branco cairia sobre o fundo branco do body */
.listagem,
.artigo {
  background: var(--camelo);
  color: var(--branco);
}
.artigo { padding-bottom: var(--faixa-y); }

.listagem h1 {
  font-size: var(--t-titulo);
  font-weight: 400; line-height: 1.1;
  margin: 2rem 0 .5rem;
}
.listagem__intro {
  font-size: 1.125rem; line-height: 1.4;
  max-width: 60ch; margin: 0 0 clamp(2rem, 5vh, 3rem);
}
/* na listagem os cards respiram mais que na faixa da home */
.listagem .blog__grade { gap: clamp(2rem, 4vw, 3.5rem) 2.5rem; }

/* O artigo é uma coluna só, centrada na página. 760px dá cerca de 72
   caracteres por linha no corpo: a 1440px a linha cheia passaria de 200 e o
   olho se perde ao voltar para a esquerda. O texto continua alinhado à
   esquerda — centralizar linha a linha atrapalha a leitura de um texto longo.

   A largura é em pixels, não em ch: ch depende do tamanho da fonte de cada
   elemento, e o mesmo "72ch" rendia quase o dobro no h1 do que no parágrafo,
   deixando cada bloco começando num lugar. */
.artigo { --coluna: 760px; }

.artigo__abertura h1 {
  font-size: var(--t-titulo);
  font-weight: 400; line-height: 1.1;
  margin: 2rem auto .5rem;
}
.artigo__meta {
  font-size: .875rem; letter-spacing: 1px; text-transform: uppercase;
  opacity: .85; margin: 0 auto 1.5rem;
}
/* o navegador dá 40px de margem lateral a <figure> por padrão. O WordPress
   zera isso no seu próprio reset e o protótipo não, e a capa saía deslocada
   entre os dois. Definindo aqui, os dois ficam iguais. */
.artigo__capa { margin: 0 auto 1rem; }

.artigo__abertura h1,
.artigo__meta,
.artigo__capa,
.artigo__corpo > *,
/* o protótipo envolve cada bloco num .secao; no WordPress o corpo sai do
   editor, em h2/p/ul soltos. A regra cobre os dois. */
.artigo__corpo .secao {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
}

.artigo__capa img {
  width: 100%;
  aspect-ratio: 2 / 1; object-fit: cover;
  border-radius: var(--raio-cartao);
}

.artigo__corpo { padding-block: clamp(2rem, 6vh, 4rem); }

/* o "Voltar ao blog" do fim acompanha a coluna */
.artigo .tratamento__voltar-fim { text-align: center; }

.artigo__navegacao {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}
.artigo__navegacao a { color: var(--branco); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .blog__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .blog__grade { grid-template-columns: 1fr; }
  .artigo__navegacao { flex-direction: column; }
}

.fechamento img { max-width: 460px; }


/* ==========================================================================
   6c. LP ÍNDICE (corporais / cirúrgicos / estéticos)
   Desenho tirado dos PSDs em _materiais-solaris:
   hero com foto + título + grade de pílulas, depois prévias alternando lado.
   ========================================================================== */

.lp-hero {
  position: relative;
  color: var(--branco);
  background-color: #5d4a39;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* véu para o título e as pílulas se sustentarem sobre qualquer foto */
.lp-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(40, 30, 22, .72) 0%,
                                      rgba(40, 30, 22, .38) 55%,
                                      rgba(40, 30, 22, .18) 100%);
}
.lp-hero > * { position: relative; z-index: 1; }

.lp-hero__titulo {
  font-size: clamp(1.875rem, 3.6vw, 3.125rem);
  line-height: 1.12;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}
.lp-hero__titulo strong { display: block; font-weight: 700; color: var(--areia); }
.lp-hero__titulo span { display: block; font-weight: 300; }

/* Grade de pílulas — medida no ar: 4 colunas de 297px, gap 68px na horizontal
   e 30px na vertical. O preenchimento é POR COLUNA (grid-auto-flow: column),
   que é como o DOM do site no ar está ordenado; com o fluxo padrão por linha
   a sequência sairia embaralhada. */
.lp-pilulas {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--linhas, 4), auto);
  grid-auto-columns: minmax(0, 297px);
  justify-content: start;
  gap: 30px 68px;
}
.lp-pilulas li { margin: 0; }

.lp-pilulas a {
  display: flex; align-items: center; justify-content: center;
  min-height: 57px; padding: .5rem 1rem;
  text-align: center; font-size: 1rem; line-height: 1.2;
  color: var(--branco);
  background: rgba(175, 121, 78, .78);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--raio-pilula);
  transition: background-color .22s ease, transform .22s ease;
}
.lp-pilulas a:hover, .lp-pilulas a:focus-visible {
  background: var(--camelo-btn);
  transform: translateY(-2px);
}

/* --- prévias alternadas --- */
.lp-previa { padding: clamp(2.5rem, 6vh, 4.5rem) 0; }

/* padrão A: faixa camelo, cartão branco à esquerda */
.lp-previa--a { background: var(--camelo); }
/* padrão B: faixa branca, cartão camelo à direita */
.lp-previa--b { background: var(--branco); }

.lp-previa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 0;
}

.lp-previa__cartao {
  padding: 3rem 2.75rem;
  border-radius: var(--raio-cartao);
  position: relative; z-index: 2;
}
.lp-previa__cartao h2 { font-size: 1.75rem; margin-bottom: 1rem; font-weight: 700; }
.lp-previa__cartao p { font-size: 1rem; }
.lp-previa__cartao p:last-of-type { margin-bottom: 1.75rem; }

.lp-previa--a .lp-previa__cartao {
  background: var(--branco); color: var(--tinta-corpo);
  margin-right: -3rem;
}
.lp-previa--a .lp-previa__cartao h2 { color: var(--camelo); }

.lp-previa--b .lp-previa__cartao {
  background: var(--camelo); color: var(--tinta-corpo);
  margin-left: -3rem;
}
.lp-previa--b .lp-previa__cartao h2 { color: var(--branco); }

/* o botão inverte junto com o cartão */
.lp-previa__btn { text-transform: none; font-weight: 500; padding: .6875rem 1.5rem; }
.lp-previa--a .lp-previa__btn { background: var(--camelo-btn); color: var(--branco); }
.lp-previa--b .lp-previa__btn { background: var(--branco); color: var(--tinta); }

.lp-previa__foto { margin: 0; }
.lp-previa__foto img { width: 100%; border-radius: 28px; }

/* na faixa B a foto vem primeiro e o cartão avança sobre ela */
.lp-previa--b .lp-previa__foto { z-index: 1; }


/* ==========================================================================
   6d. LP DEDICADA DA BLEFAROPLASTIA
   Desenho próprio, medido no ar. Ver _docs/levantamento.md, seção 5g.
   ========================================================================== */

/* --- HERO: a foto ocupa a faixa inteira, sem véu ---
   O original não escurece o lado esquerdo: a própria foto já é clara e
   suave ali. Um gradiente sobre ela mudava a cor da faixa. --- */
.blefaro-hero {
  position: relative;
  color: var(--branco);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* medido no ar: 50px/400, lh 60px, coluna de 675px */
.blefaro-hero__titulo {
  max-width: 675px;
  font-size: clamp(1.875rem, 3.3vw, 3.125rem);
  line-height: 1.2; font-weight: 400;
  margin-bottom: 2rem;
}

/* provas à esquerda, assinatura da médica à direita — como no ar */
.blefaro-hero__rodape {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 8vh, 5rem);
}

.blefaro-hero__provas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 1.5rem;
}
.blefaro-hero__provas li {
  margin: 0; font-size: .75rem; line-height: 1.45;
}

.blefaro-hero__assinatura {
  margin: 0; font-size: .8125rem; line-height: 1.5;
  text-align: left; flex: 0 0 auto;
}

@media (max-width: 860px) {
  .blefaro-hero__rodape { flex-direction: column; align-items: flex-start; }
}

/* --- VOCÊ SE RECONHECE: cartão de vidro à esquerda, título à direita --- */
.blefaro-reconhece {
  color: var(--tinta);
  /* ancorada no TOPO: quando a faixa encurta, o corte acontece embaixo e a
     cabeça da modelo é preservada. Com `bottom` ou `center` a altura menor
     comia o rosto primeiro. */
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.blefaro-reconhece__grade {
  display: grid;
  grid-template-columns: minmax(0, 527fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  /* a linha precisa ser mais alta que o cartão: no ar o título desce até
     cerca de 180px abaixo da base dele, e sem altura extra não haveria
     para onde descer */
  min-height: min(72vh, 640px);
}

/* o mesmo vidro do header e do Slim, aqui com radius 30px */
.blefaro-vidro {
  max-width: 527px;
  padding: 2.5rem 60px;
  background: var(--bronze-veu);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 30px;
}
.blefaro-vidro ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.blefaro-vidro li {
  position: relative;
  margin-bottom: 1.125rem; padding-left: 1.125rem;
  font-size: 1.125rem; line-height: 1.4; color: #282828;
}
.blefaro-vidro li::before {
  content: '•'; position: absolute; left: 0; top: -.05em;
  color: var(--camelo-btn); font-size: 1.25em; line-height: 1;
}

/* medido no ar: 40px/400 preto, à direita */
.blefaro-reconhece__titulo {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.2; font-weight: 400;
  color: #000000;
  /* 325px é a largura medida no ar; 12ch quebrava uma palavra por linha */
  max-width: 325px;
  justify-self: end;
  align-self: end;      /* ancorado na base da faixa, como no ar */
  margin-bottom: 0;
}

/* --- ISSO NÃO É FALTA DE CUIDADO ---
   Medido no ar: cartão branco 1413x771 radius 30px. Dentro dele, à esquerda
   o título com o botão e a coluna de texto lado a lado; à direita a foto
   (572x711) encostada na borda e recortada pelo radius do cartão.
   As proporções são percentuais para o cartão respirar em telas menores. */
.blefaro-cuidado { color: #282828; }

.blefaro-cuidado__cartao {
  display: grid;
  grid-template-columns: minmax(0, 572fr) minmax(0, 572fr);
  align-items: center;
  gap: 3.4%;                      /* 48px de 1413 */
  /* O original reserva 221px (15,6%) de recuo à esquerda, que ficavam vazios.
     Reduzido para sobrar largura ao botão e ao parágrafo. */
  padding-left: clamp(1.75rem, 4%, 3.5rem);
  background: var(--branco);
  border-radius: 30px;
  overflow: hidden;               /* recorta a foto no canto arredondado */
}

/* título ocupando as duas subcolunas; botão e texto lado a lado embaixo */
.blefaro-cuidado__conteudo {
  display: grid;
  /* o parágrafo fica um pouco mais largo que o botão: com colunas iguais
     ele quebrava em dez linhas estreitas */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: end;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(1.5rem, 4vh, 2.5rem);
  padding-block: 30px; padding-right: clamp(1rem, 2vw, 2rem);
}
.blefaro-cuidado__titulo {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 4.375rem);
  line-height: 1.2; font-weight: 700;
}
/* medido: 262px, 22px/400, lh 30.8 */
.blefaro-cuidado__texto {
  grid-column: 2; grid-row: 2;
  margin: 0; font-size: clamp(1rem, 1.45vw, 1.375rem); line-height: 1.4;
}
.blefaro-cuidado__texto strong { font-weight: 700; }
.blefaro-cuidado__cartao .pilula--tinta {
  grid-column: 1; grid-row: 2;
  justify-self: start; align-self: end;
  text-align: center;
}

.blefaro-cuidado__foto { margin: 0; align-self: stretch; }
.blefaro-cuidado__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* botão sólido escuro, medido: #282828, radius 50, 20px/500 uppercase */
.pilula--tinta {
  background: #282828; color: var(--branco);
  font-size: 1.25rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .02em;
  padding: 1.25rem 2rem;
}
.pilula--tinta:hover { background: #3b3b3b; }

/* botão de contorno claro, usado sobre o vidro */
.pilula--contorno {
  background: transparent; color: #282828;
  border: 1px solid rgba(40, 40, 40, .55);
  font-weight: 500;
}
.pilula--contorno:hover { background: rgba(255, 255, 255, .35); }

/* --- GALERIA DE RESULTADOS (a faixa que faltava) ---
   Medido: fundo #DEDDDF, 4 imagens ex1..ex4 de 283x283 (cada uma já é um par
   antes/depois empilhado), título e CTA centralizados. */
.blefaro-galeria { color: var(--tinta); text-align: center; }
.blefaro-galeria__titulo {
  font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 600; margin-bottom: .25rem;
}
.blefaro-galeria__sub { font-size: 1.125rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.blefaro-galeria__grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 283px));
  gap: 1.5rem; justify-content: center;
}
.blefaro-galeria__grade figure { margin: 0; }
.blefaro-galeria__grade img { width: 100%; border-radius: 8px; }
.blefaro-galeria__cta { margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; }

/* --- DEPOIMENTOS: fundo camelo, fotos à esquerda, cartões à direita --- */
.blefaro-depos { color: var(--tinta); }

.blefaro-depos__grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}

.blefaro-depos__titulo {
  font-size: clamp(1.75rem, 3.3vw, 3.125rem);
  line-height: 1.2; font-weight: 400;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.blefaro-depos__titulo strong { font-weight: 700; }

.blefaro-depos__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 262px)); gap: 1.5rem; }
.blefaro-depos__fotos img { width: 100%; border-radius: 12px; }

.blefaro-depos__cartoes { display: flex; flex-direction: column; gap: 2.5rem; }

.blefaro-depo {
  position: relative;
  margin: 0; padding: 2rem 2rem 1.75rem;
  background: var(--branco);
  border-radius: 12px;
}
/* selo de aspas escuro, saindo pelo canto superior esquerdo */
.blefaro-depo__aspas {
  position: absolute; top: -18px; left: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: #282828; color: var(--branco);
  border-radius: 8px;
  font-size: 1.5rem; line-height: 0; padding-top: .35em;
}
.blefaro-depo__estrelas {
  margin: 0 0 1rem; font-size: 1.125rem; letter-spacing: .08em; color: var(--tinta);
}
.blefaro-depo blockquote { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.5; }
.blefaro-depo figcaption { display: flex; flex-direction: column; gap: .0625rem; }
.blefaro-depo figcaption strong { font-weight: 700; font-size: .9375rem; }
.blefaro-depo figcaption span { font-size: .875rem; }

/* --- DRA. PRISCILA ---
   A foto é o FUNDO da faixa, ancorada no topo para não cortar a cabeça
   quando a janela é baixa. O texto ocupa a metade esquerda, onde a própria
   imagem é lisa. */
.blefaro-medica {
  color: var(--tinta);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.blefaro-medica__texto { max-width: 52%; }

.blefaro-medica__nome {
  font-size: clamp(1.75rem, 3.3vw, 3.125rem); line-height: 1.15;
  font-weight: 700; margin-bottom: 1.25rem;
}
.blefaro-medica__nome span { display: block; }
.blefaro-medica__nome strong { display: block; font-weight: 700; }

.blefaro-medica__sub { font-size: 1.125rem; margin-bottom: 1.25rem; }

.blefaro-medica__credenciais { list-style: disc; margin: 0; padding-left: 1.25rem; }
.blefaro-medica__credenciais li { margin-bottom: .75rem; font-size: 1rem; line-height: 1.45; }


/* --- MÉTODO BPN: fundo camelo, selo à esquerda, passos em lista à direita --- */
.blefaro-metodo { color: var(--tinta); }

.blefaro-metodo__grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}

.blefaro-metodo__selo { margin: 0 0 2.5rem; line-height: .95; }
.blefaro-metodo__selo span {
  display: block; font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 300;
  letter-spacing: .02em;
}
.blefaro-metodo__selo strong {
  display: block; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700;
}
.blefaro-metodo__nome { font-weight: 400; }
.blefaro-metodo__esq p { font-size: 1rem; line-height: 1.5; }

.blefaro-metodo__titulo-passos {
  font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 700; margin-bottom: 1.25rem;
}

.blefaro-passos { list-style: none; margin: 0; padding: 0; }
.blefaro-passos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.blefaro-passos__n {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1;
  color: var(--tinta);
}
.blefaro-passos h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; }
.blefaro-passos p { margin: 0; font-size: .9375rem; line-height: 1.45; }

.blefaro-metodo__cta { text-align: center; margin: clamp(2rem, 5vh, 3rem) 0 0; }

@media (max-width: 1100px) {
  .blefaro-galeria__grade { grid-template-columns: repeat(2, minmax(0, 283px)); }
  .blefaro-depos__grade,
  .blefaro-metodo__grade { grid-template-columns: 1fr; }
  /* em tela estreita a foto de fundo atrapalha a leitura: some */
  .blefaro-medica { background-image: none !important; }
  .blefaro-medica__texto { max-width: none; }
}

@media (max-width: 700px) {
  .blefaro-galeria__grade { grid-template-columns: 1fr; }
  .blefaro-depos__fotos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .blefaro-reconhece__grade { grid-template-columns: 1fr; min-height: 0; }
  .blefaro-reconhece__titulo { max-width: none; order: -1; align-self: auto; }
  /* no desktop o cartão cai sobre a parte clara da foto e os 8% de véu bastam;
     empilhado ele cobre o cabelo escuro e o texto #282828 some — aqui o fundo
     fecha em creme para garantir a leitura */
  .blefaro-vidro {
    max-width: none; padding: 2rem 1.75rem;
    background: rgba(248, 227, 210, .93);
  }
  .blefaro-hero__provas { grid-template-columns: 1fr; gap: 1rem; }

  /* o cartão empilha: conteúdo em cima, foto embaixo */
  .blefaro-cuidado__cartao { grid-template-columns: 1fr; padding-left: 0; gap: 0; }
  .blefaro-cuidado__conteudo { padding: 2rem 1.75rem; }
  .blefaro-cuidado__foto img { max-height: 380px; }
}

@media (max-width: 700px) {
  .blefaro-passos { grid-template-columns: 1fr; }
  .blefaro-cuidado__conteudo { grid-template-columns: 1fr; }
  .blefaro-cuidado__texto,
  .blefaro-cuidado__cartao .pilula--tinta { grid-column: 1; grid-row: auto; }
}

/* --- editorial: o que é, para quem é indicada -----------------------------
   No site são três colunas (200px / flexível / 200px) dentro de um wrapper de
   1200px, ou seja, uma coluna de texto de 800px centrada. Reproduzo com uma
   caixa de 800px e margem automática — mesmo resultado, sem colunas vazias. */
.blefaro-editorial { color: var(--tinta); text-align: center; }
.blefaro-editorial__caixa { width: min(800px, 100%); margin-inline: auto; }
.blefaro-editorial__titulo {
  /* 48px no site; encolhe em tela estreita para não estourar a largura */
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1.5rem;
}
.blefaro-editorial p {
  font-size: 1.125rem;      /* 18px */
  line-height: 1.4;
  margin: 0 0 1.4em;
}
.blefaro-editorial p:last-child { margin-bottom: 0; }

/* --- as três listas -------------------------------------------------------
   Duas colunas de 50% centradas verticalmente. A da esquerda empilha dois
   blocos (o segundo com 100px de respiro), a da direita tem um só — é esse
   desencontro de altura que produz o escalonamento visual do original. */
.blefaro-listas { color: var(--tinta); }
.blefaro-listas__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  /* o site envolve estas faixas num wrapper de 1200px, não nos 1440px do
     container padrão — daí as duas colunas de 600px. A calha não vem de um
     gap: a coluna da esquerda tem padding zerado e a da direita mantém os
     20px padrão das colunas do construtor. */
  width: min(1200px, 100% - 3rem);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  gap: 0;
}
.blefaro-listas__coluna + .blefaro-listas__coluna { padding-inline: 20px; }
.blefaro-lista--segundo { margin-top: 100px; }
.blefaro-lista__titulo {
  font-size: 1.375rem;      /* 22px */
  line-height: 1.36;
  font-weight: 700;
  margin: 0 0 1rem;
}
.blefaro-lista__titulo span { display: block; }
.blefaro-lista ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.4;
}
.blefaro-lista li { margin-bottom: .6em; }
.blefaro-lista li:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .blefaro-listas__grade { grid-template-columns: 1fr; }
  /* empilhado, os três blocos precisam do mesmo respiro entre si */
  .blefaro-listas__coluna + .blefaro-listas__coluna { margin-top: 50px; padding-inline: 0; }
  .blefaro-lista--segundo { margin-top: 50px; }
}

@media (max-width: 767px) {
  .blefaro-editorial p,
  .blefaro-lista ul { font-size: 1rem; }   /* 16px, como no site */
}


/* ==========================================================================
   7. RODAPÉ
   ========================================================================== */

.rodape {
  position: relative;
  color: var(--branco);
  background: #3b3630 url('../img/webp/bg4.webp') center top / cover no-repeat;
  padding: 4.5rem 0 2rem;
}

/* véu para garantir contraste do texto sobre a foto */
.rodape::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(30, 26, 22, .55);
}

.rodape__interno { position: relative; z-index: 1; }

/* Medido no ar: logo grande (image-Photoroom-2), rubricas 36px #D4BEA7
   em caixa alta com 1px de espaçamento, e o texto das colunas em 18px
   também #D4BEA7 — não branco. */
.rodape__marca { text-align: center; margin-bottom: clamp(2rem, 6vh, 4rem); }
.rodape__marca img {
  width: min(572px, 72%);
  height: auto;
  margin-inline: auto;
}

.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1040px;
  margin-inline: auto;
}

.rodape h2 {
  font-family: var(--fonte);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 400;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--areia);
  margin-bottom: 1rem;
}

.rodape p, .rodape li {
  font-size: 1.125rem;
  color: var(--areia);
  margin-bottom: .5rem;
}

.rodape ul { list-style: none; padding: 0; margin: 0; }

.rodape li { display: flex; align-items: center; gap: .625rem; }

/* o e-mail é uma palavra só de 34 caracteres: sem isto ele não cabe em telas
   de 320px e empurra o rodapé inteiro para fora da viewport */
.rodape a, .rodape p { overflow-wrap: anywhere; }
.rodape li { min-width: 0; }

/* ícones em contorno, como no ar */
.rodape li svg {
  width: 22px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: var(--areia); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rodape li svg circle:first-child { stroke-width: 1.1; }

.rodape a:hover { text-decoration: underline; }

.rodape__fim {
  position: relative; z-index: 1;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  font-size: .875rem; line-height: 1.6;
  text-align: center; color: var(--branco);
}
.rodape__fim strong { font-weight: 700; }

/* o botão flutuante "Pergunte à IA" do site no ar foi retirado a pedido:
   não faz parte deste projeto */


/* ==========================================================================
   8. RESPONSIVO
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --t-titulo: 2rem; --t-secao: 1.5rem; }

  .menu {
    position: fixed; inset: var(--altura-header) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 1.5rem 1.5rem;
    /* creme da marca — o laranja cheio brigava com o conteúdo por baixo */
    background: rgba(248, 227, 210, .98);
    border-radius: 0 0 24px 24px;
    display: none;
  }
  .menu[data-aberto="true"] { display: flex; }

  /* sobre o creme o texto branco sumiria: inverte para a tinta escura */
  .menu a { padding: .875rem 1.25rem; font-size: 1rem; color: var(--tinta-2); }
  .menu a:hover,
  .menu a[aria-current="page"] { background: rgba(175, 100, 38, .14); }

  .hamburguer { display: block; }

  .cabecalho__interno { gap: 1rem; }
}

@media (max-width: 1100px) {
  .categorias__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tec-destaques { grid-template-columns: repeat(2, minmax(0, 244px)); }

  /* equipamentos vão para baixo dos cartões */
  .tec-topo { grid-template-columns: 1fr; }
  .tec-equipamentos { justify-self: center; }

  /* a grade irregular vira 2 colunas — as posições vêm inline (de home.json),
     então precisam de !important para serem descartadas aqui */
  .tec-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .tec-fotos > * { grid-column: auto !important; grid-row: auto !important; }
  .tec-todas { max-width: none; }
}

@media (max-width: 860px) {
  :root { --faixa-y: 3rem; --raio-cartao: 36px; }

  .hero { min-height: 0; padding-top: calc(var(--altura-header) + 2rem); }
  .hero__titulos { flex-direction: column; text-align: center; gap: .25rem; }
  .hero__dir { text-align: center; }
  .hero__descritivo { padding: 1.25rem; font-size: 1rem; }
  .faixa-foto h2, .faixa-foto p { max-width: none; }

  .abertura { flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; }
  .abertura__cartao { flex: 1 1 auto; margin-right: 0; padding: 2.25rem 1.75rem; order: 2; }
  .abertura__foto { flex: 1 1 auto; margin: 0 auto; max-width: 520px; order: 1; }

  .tec-destaques { grid-template-columns: 1fr; }
  .tec-fotos { grid-template-columns: 1fr; grid-auto-rows: 160px; }
  .categorias__grade { max-width: 640px; }

  /* LP: prévias empilham, cartão volta a ocupar a largura toda */
  .lp-previa__grade { grid-template-columns: 1fr; gap: 1.25rem; }
  .lp-previa--a .lp-previa__cartao,
  .lp-previa--b .lp-previa__cartao { margin: 0; padding: 2rem 1.5rem; order: 2; }
  .lp-previa__foto { order: 1; }
  .lp-pilulas {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 16px;
  }
  .depoimentos__grade { grid-template-columns: 1fr; }
  .depoimentos__foto { order: 2; }
  .blog__grade { grid-template-columns: 1fr; gap: 2rem; max-width: 460px; margin-inline: auto; }
  .rodape__colunas { grid-template-columns: 1fr; gap: 2.5rem; }
  .rodape { text-align: center; }
  .rodape li { justify-content: center; }

  .cta { padding: 2.25rem 1.5rem; }
}

@media (max-width: 700px) {
  /* cartões de tratamento: um por linha no celular.
     Precisa vir depois do bloco de 1100px, que os põe em duas colunas —
     mesma especificidade, quem ganha é a última regra do arquivo. */
  .categorias__grade { grid-template-columns: 1fr; max-width: 380px; }
}

@media (max-width: 560px) {
  /* o CTA do header não pode quebrar em duas linhas e engolir o cabeçalho */
  .cabecalho .pilula--veu {
    font-size: .8125rem;
    padding: .625rem 1rem;
    white-space: nowrap;
  }
  .cabecalho__interno { gap: .625rem; padding-inline: 1rem; }
}

@media (max-width: 480px) {
  :root { --t-titulo: 1.625rem; --t-corpo: 1.0625rem; }
  .marca img { width: 118px; }
  .container { padding-inline: 1.125rem; }

  /* abaixo disso "Agendar Consulta" não cabe em uma linha:
     o rótulo encurta para "Agendar" em vez de quebrar em duas. */
  .so-largo { display: none; }
}


/* ==========================================================================
   9. MOVIMENTO
   ========================================================================== */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .revela { opacity: 1; transform: none; }

  /* o véu do hover continua (é feedback, não enfeite); o movimento some */
  .tec-foto:hover, .tec-foto:focus-visible { transform: none; }
  .tec-foto:hover img, .tec-foto:focus-visible img { transform: none; }
  .pilula:hover, .lp-pilulas a:hover, .post-card:hover { transform: none; }
}

/* em tela de toque não existe hover: o véu nunca deve ficar preso aceso */
@media (hover: none) {
  .tec-foto:hover { transform: none; box-shadow: none; }
  .tec-foto:hover::after { opacity: 0; }
  .tec-foto:hover img { transform: none; }
}