/*
 * Daniela Bicalho · Beleza Integrada — site institucional
 * Conceito B + Manual de marca (setembro 2026).
 *
 * Proporção de cor do manual: marfim 60% · eucalipto 20% · mata 15% · argila 5%.
 * Texto pequeno em fundo claro: mata ou sálvia escura. Sálvia clara só em filetes e áreas de cor.
 */

:root {
  --marfim:     #F6F4EF;
  --eucalipto:  #DCE3DA;
  --argila:     #C9A79A;
  --salvia:     #7C8C79;
  --salvia-esc: #5E6B5F;
  --mata:       #2E3A32;
  --ink-2:      #4A564C;
  --ink-3:      #3E4A40;
  --branco:     #FFFFFF;
  --linha:      #EDEFE9;
  --linha-2:    #D3DACF;
  --mata-linha: #55635A;
  --mata-texto: #B8C4B5;
  --erro:       #B07A6A;

  --display: "Marcellus", Georgia, serif;
  --texto:   "Karla", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --petala: 999px 999px 999px 0;
  --largura: 1180px;
  --gutter: clamp(20px, 4vw, 34px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--marfim);
  color: var(--mata);
  font-family: var(--texto);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 500; color: var(--mata); }

:focus-visible { outline: 2px solid var(--argila); outline-offset: 3px; border-radius: 6px; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--mata); color: var(--marfim);
  padding: 10px 18px; border-radius: 999px; font-size: 13px;
}
.pular:focus { top: 12px; }

.faixa { padding: clamp(64px, 9vw, 104px) var(--gutter); }
.faixa--branca { background: var(--branco); }
.faixa--eucalipto { background: var(--eucalipto); }
.faixa--mata { background: var(--mata); color: var(--eucalipto); }
.faixa--estreita { padding-top: clamp(48px, 6vw, 64px); padding-bottom: clamp(48px, 6vw, 64px); }
.conteudo { max-width: var(--largura); margin: 0 auto; }

/* ── Tipografia ─────────────────────────────────────────────────────────── */
.rotulo {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--salvia-esc);
}
.faixa--mata .rotulo { color: var(--argila); }
.dado {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--salvia-esc);
}
.titulo-pagina { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; letter-spacing: -0.005em; }
.titulo-secao  { font-size: clamp(28px, 3.4vw, 40px); }
.faixa--mata h2, .faixa--mata h3 { color: var(--marfim); }
.lead { font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.75; color: var(--ink-2); max-width: 480px; }
.faixa--mata .lead { color: var(--eucalipto); }
.nota { font-size: 12.5px; line-height: 1.65; color: var(--salvia-esc); }
.faixa--mata .nota { color: var(--mata-texto); }

.cabeca-secao {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 44px);
}
.cabeca-secao > div { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cabeca-secao .nota { max-width: 340px; }

/* ── Assinatura ─────────────────────────────────────────────────────────── */
.assinatura { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1.2; white-space: nowrap; }
.assinatura--vertical { white-space: normal; }
.assinatura__nome {
  font-family: var(--display); font-size: 16px; letter-spacing: 0.13em; text-transform: uppercase;
}
.assinatura__sub {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--salvia-esc);
}
.assinatura--vertical { align-items: center; gap: 12px; text-align: center; }
.assinatura--vertical .assinatura__nome { font-size: 24px; letter-spacing: 0.14em; }
.assinatura--vertical .assinatura__filete { width: 42px; height: 1px; background: var(--argila); }
.assinatura--vertical .assinatura__sub { font-size: 8.5px; letter-spacing: 0.32em; }
.faixa--mata .assinatura__nome { color: var(--marfim); }
.faixa--mata .assinatura__sub { color: var(--mata-texto); }

.petala { display: inline-block; width: 32px; height: 32px; border-radius: var(--petala); background: var(--eucalipto); flex-shrink: 0; }
.petala--argila { background: var(--argila); }
.petala--salvia { background: var(--salvia); }
.petala--marfim { background: var(--marfim); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--texto); font-weight: 400; font-size: 13px; letter-spacing: 0.06em;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.botao--primario { background: var(--mata); color: var(--marfim); }
.botao--primario:hover { background: #222C25; }
.botao--secundario { border-color: var(--mata); color: var(--mata); background: transparent; }
.botao--secundario:hover { background: var(--mata); color: var(--marfim); }
.botao--destaque { background: var(--argila); color: var(--mata); }
.botao--destaque:hover { background: #BE998B; }
.botao--claro { border-color: #6B7A68; color: var(--marfim); background: transparent; }
.botao--claro:hover { border-color: var(--marfim); }
.botao--pequeno { padding: 12px 22px; font-size: 12px; }
.botao--largo { width: 100%; }
.botoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__barra {
  max-width: var(--largura); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topo__nav { display: flex; align-items: center; gap: 20px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.topo__nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.topo__nav a:hover { color: var(--mata); }
.topo__nav a[aria-current="page"] { color: var(--mata); border-bottom-color: var(--argila); }
.topo__acoes { display: flex; align-items: center; gap: 10px; }
.topo__entrar svg { width: 13px; height: 13px; flex-shrink: 0; }
.topo__menu {
  display: none; background: none; border: 1px solid var(--eucalipto); border-radius: 999px;
  width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; color: var(--mata);
}
.topo__menu svg { width: 18px; height: 18px; }

.gaveta { display: none; }

@media (max-width: 1240px) {
  .topo__nav { display: none; }
  .topo__menu { display: inline-flex; }
  .gaveta {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: var(--marfim); padding: 18px var(--gutter) 32px;
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    overflow-y: auto;
  }
  .gaveta[data-aberta="true"] { transform: none; visibility: visible; transition: transform .3s ease; }
  .gaveta__topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--linha-2); }
  .gaveta nav { display: flex; flex-direction: column; padding: 18px 0 28px; }
  .gaveta nav a { font-family: var(--display); font-size: 25px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .gaveta .botoes { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
  .topo__acoes .botao--primario { display: none; }
  .topo__barra { padding-top: 13px; padding-bottom: 13px; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 76px) var(--gutter) clamp(64px, 8vw, 96px); }
.hero__grade {
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 80px); align-items: center;
}
.hero__texto { display: flex; flex-direction: column; gap: 24px; }
.hero__numeros { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 10px; }
.retrato {
  aspect-ratio: 4 / 5; border-radius: 240px 240px 24px 24px; overflow: hidden; background: var(--eucalipto);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 18%; }
.hero .retrato { max-width: 480px; justify-self: end; width: 100%; }

@media (max-width: 860px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero .retrato { justify-self: stretch; max-width: none; order: -1; aspect-ratio: 5 / 4; border-radius: 180px 180px 20px 20px; }
  .hero .retrato img { object-position: 50% 14%; }
}

/* ── Cartões ────────────────────────────────────────────────────────────── */
.grade { display: grid; gap: 18px; }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 48px); }

.cartao {
  background: var(--marfim); border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.faixa:not(.faixa--branca) .cartao { background: var(--branco); }
.cartao h3 { font-size: 22px; }
.cartao p { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.cartao .lista-simples { margin-top: 4px; }
.cartao--borda { border: 1px solid var(--eucalipto); }

.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-simples li {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--linha); font-family: var(--mono); font-size: 11px; color: var(--salvia-esc);
}
.lista-simples li span:last-child { color: var(--mata); text-align: right; }

/* ── Etapas ─────────────────────────────────────────────────────────────── */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: etapa; }
.etapa { background: var(--branco); padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
.etapa:first-child { border-radius: 18px 0 0 18px; }
.etapa:last-child { border-radius: 0 18px 18px 0; }
.etapa h3 { font-size: 20px; }
.etapa p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.etapa .dado { color: var(--salvia-esc); }
@media (max-width: 960px) {
  .etapa:first-child { border-radius: 18px 18px 0 0; }
  .etapa:last-child { border-radius: 0 0 18px 18px; }
}

/* ── Resultados (antes/depois) ──────────────────────────────────────────── */
.caso { background: var(--branco); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.faixa--branca .caso { background: var(--marfim); }
.caso__foto {
  aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--eucalipto);
  position: relative; display: flex; flex-direction: column;
}
.caso__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Enquanto as fotos padronizadas não chegam: faixas antes/depois do manual */
.caso__foto--reserva { background: repeating-linear-gradient(135deg, #E3E7DE 0 9px, #EDF0E9 9px 18px); }
.caso__faixa {
  background: var(--eucalipto); color: var(--mata); text-align: center; padding: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
}
.caso__metade { flex: 1; }
.caso__legenda { display: flex; flex-direction: column; gap: 3px; padding: 0 4px 6px; }
.caso__legenda span:first-child { font-size: 14px; }

/* ── Sobre ──────────────────────────────────────────────────────────────── */
.sobre { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.sobre .retrato { border-radius: 20px 20px 200px 200px; }
.sobre .retrato img { object-position: 50% 30%; }
.sobre__texto { display: flex; flex-direction: column; gap: 20px; }
.sobre__texto p { color: var(--ink-2); max-width: 560px; }
.citacao {
  font-family: var(--display); font-size: clamp(22px, 2.3vw, 27px); line-height: 1.42; color: var(--mata);
  border-left: 1px solid var(--argila); padding-left: 22px; margin: 6px 0;
}
@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre .retrato { max-width: 380px; }
}

/* ── Depoimentos ────────────────────────────────────────────────────────── */
.depoimento { display: flex; flex-direction: column; gap: 14px; }
.depoimento blockquote {
  margin: 0; font-family: var(--display); font-size: clamp(21px, 2vw, 25px); line-height: 1.45; text-wrap: pretty;
}
.depoimento .relato { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.depoimento figcaption { display: flex; flex-direction: column; gap: 2px; }
.depoimento figcaption span:first-child { font-size: 13.5px; }
figure { margin: 0; }

/* ── Dúvidas ────────────────────────────────────────────────────────────── */
.duvidas { display: flex; flex-direction: column; gap: 8px; }
.duvida { background: var(--marfim); border-radius: 12px; }
.faixa:not(.faixa--branca) .duvida { background: var(--branco); }
.duvida summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  font-size: 15px; font-weight: 400; color: var(--ink-3);
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: "+"; font-family: var(--mono); font-size: 15px; color: var(--salvia-esc);
  transition: transform .2s; flex-shrink: 0;
}
.duvida[open] summary::after { transform: rotate(45deg); }
.duvida p { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); max-width: 640px; }

/* ── Formulários ────────────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo .campo__rotulo {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--salvia-esc);
}
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: 14.5px; font-weight: 300; color: var(--mata);
  background: var(--branco); border: 1px solid var(--eucalipto); border-radius: 12px;
  padding: 14px 16px; width: 100%; outline: none; transition: border-color .2s;
}
.campo textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.campo input:focus, .campo textarea:focus { border-color: var(--salvia); }
.campo input::placeholder, .campo textarea::placeholder { color: #8C978C; }
.faixa--mata .campo label { color: var(--mata-texto); }
.faixa--mata .campo input, .faixa--mata .campo textarea {
  background: transparent; border-color: var(--mata-linha); color: var(--marfim);
}
.faixa--mata .campo input:focus, .faixa--mata .campo textarea:focus { border-color: var(--argila); }
.faixa--mata .campo input::placeholder, .faixa--mata .campo textarea::placeholder { color: #8E9C90; }
.formulario .botao { margin-top: 6px; }
.formulario__aviso { font-size: 12.5px; color: var(--argila); min-height: 1em; }

/* ── Contato ────────────────────────────────────────────────────────────── */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.contato__texto { display: flex; flex-direction: column; gap: 16px; }
.contato__texto p { font-size: 15px; max-width: 400px; }
.contato__link {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--argila);
  margin-top: 6px;
}
.contato__link:hover { color: var(--marfim); }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } }

/* ── Vídeo (depoimentos) ────────────────────────────────────────────────── */
.video-reserva {
  aspect-ratio: 16 / 10; border-radius: 18px;
  background: repeating-linear-gradient(135deg, #E3E7DE 0 9px, #EDF0E9 9px 18px);
  display: flex; align-items: center; justify-content: center;
}
.video-reserva span { font-family: var(--mono); font-size: 10px; color: var(--salvia-esc); background: var(--marfim); padding: 7px 14px; border-radius: 999px; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape { background: var(--marfim); border-top: 1px solid var(--linha-2); padding: 56px var(--gutter) 36px; }
.rodape__grade {
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 36px;
}
.rodape__coluna { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-2); }
.rodape__coluna .rotulo { margin-bottom: 4px; }
.rodape__coluna a:hover { color: var(--mata); }
.rodape__marca { display: flex; flex-direction: column; gap: 18px; }
.rodape__marca p { font-size: 13.5px; color: var(--ink-2); max-width: 300px; }
.rodape__base {
  max-width: var(--largura); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--linha-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salvia-esc);
}
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ── Cabeçalho de página interna ────────────────────────────────────────── */
.abertura { padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(40px, 5vw, 56px); }
.abertura .conteudo { display: flex; flex-direction: column; gap: 16px; }
.abertura .lead { max-width: 600px; }

.parceiros-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.parceiros-hero__texto { display: flex; flex-direction: column; gap: 20px; }
.parceiros-hero .retrato { border-radius: 200px 200px 20px 20px; background: #3B4A3F; max-width: 440px; justify-self: end; width: 100%; }
.parceiros-hero .retrato img { object-position: 48% 16%; }
@media (max-width: 860px) {
  .parceiros-hero { grid-template-columns: 1fr; }
  .parceiros-hero .retrato { justify-self: stretch; max-width: none; aspect-ratio: 5 / 4; }
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro { text-align: center; }
.mt-lg { margin-top: clamp(40px, 5vw, 56px); }