/* ==========================================================================
   Dra. Laiz Andrade · BASE
   --------------------------------------------------------------------------
   O QUE ESTE ARQUIVO E, DEPOIS DE 10/09/2026
   Ate esta data ele carregava o sistema visual inteiro do site, no tratamento
   "soft UI" de julho. O sistema "Recorte" foi aprovado pelo Victor e passou a
   valer nas doze paginas, entao este arquivo foi reduzido ao que ele de fato
   e: a BASE. Reset, grade, estrutura do cabecalho, do rodape, da tarja de
   consentimento e do botao flutuante. Cor, borda, sombra e componente vivem
   em `recorte.css`, que carrega depois deste.

   O QUE SAIU, E POR QUE NAO FOI SO FAXINA
   Foram removidas 135 classes que nao existem em nenhum HTML do site: todo o
   vocabulario antigo (`.card--rosa`, `.step`, `.blog-card`, `.faq-item`,
   `.cv-*`, `.hero__glass`, `.section--*-fx`, `.policy-*`, `.value-card`...).
   Elas nao eram inofensivas: carregavam os quatro efeitos que o sistema novo
   proibiu (par de sombra clara e escura, sombra interna, vidro desfocado e
   gradiente terminando em branco) e, num arquivo publicado, CSS morto e
   armadilha para quem vier depois copiar uma classe que ja nao vale.

   ⚠️ O que NAO pode sair daqui, mesmo parecendo orfao:
     · `@keyframes floaty`  → o `.r-deco` do recorte.css depende dele
     · `@keyframes wordIn`  → idem, `.word-in`
     · `.nav-mobile.is-open` → o `main.js` liga e desliga esta classe
     · `.form-msg.is-error` e `.is-success` estao no recorte.css e o `main.js`
       reescreve o className inteiro com esses nomes
   ========================================================================== */

/* ---------------------------------- RESET -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--grafite);
  font: 400 var(--text-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* 10/09/2026 · o ULTIMO uso de um derivado inventado no site sai daqui.
   A cor de link era --cta-azul-hover #4E6373, que nao existe no brandbook da
   Jedoline. Ela cumpria contraste (5,59:1 sobre creme), e nao era esse o
   problema: era ser uma setima cor conduzindo o site.
   O link passa a seguir a regra que o sistema ja aplica dentro de superficie
   cromatica: tinta grafite (12,10:1 sobre creme) e SUBLINHADO como marca. Cor
   sozinha nunca deveria carregar a informacao de que algo e clicavel, entao a
   troca melhora acessibilidade e paleta no mesmo movimento. */
a { color: var(--grafite); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--grafite); text-decoration-thickness: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: var(--lh-display); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
/* O navegador aplica `margin: 1em 40px` em <figure> por padrao, e isso nunca
   tinha sido zerado aqui. Num monitor os 80px somem no meio da largura; num
   celular de 390px eles comem 20% da tela, e foi o que estreitou os dois cards
   de citacao do site (o da home rodava com 262px onde havia 342 disponiveis). */
figure { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--grafite); color: var(--creme); padding: 12px 20px;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------- GRADE -------------------------------- */
.wrap { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--margin-mobile); }
@media (min-width: 860px) { .wrap { padding-inline: var(--margin-desktop); } }

/* ------------------------------- ANIMACOES ------------------------------- */
/* ⚠️ Os dois @keyframes abaixo sao usados pelo `recorte.css` (`.r-deco` e
   `.word-in`). Apagar aqui quebra la, sem erro de console. */
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes wordIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Cada frase da headline e um bloco: duas frases nunca dividem a mesma linha,
   preservando o par de ritmo ("Crescer com cuidado." / "Acolher com amor."). */
.h1-beat { display: block; text-wrap: balance; }

/* ---------------------------------- CABECALHO ----------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--creme); }
.site-header__bar {
  max-width: var(--max-content); margin-inline: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 10px var(--margin-mobile);
}
@media (min-width: 860px) { .site-header__bar { padding-block: 12px; } }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 44px; display: block; }
@media (min-width: 860px) { .brand img { height: 54px; } }

.nav-pill { display: none; align-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-pill); }
@media (min-width: 860px) { .nav-pill { display: flex; gap: 6px; } }
.nav-pill a {
  font: 600 14px var(--font-body); color: var(--grafite); text-decoration: none;
  padding: 9px 16px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-pill a[aria-current="page"] { font-weight: 700; }

.header-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font-body);
  text-decoration: none; padding: 11px 18px; border-radius: var(--radius-pill);
}
.header-cta:active { transform: scale(.98); }
.header-cta span { display: none; }
@media (min-width: 500px) { .header-cta span { display: inline; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-pill); background: var(--creme);
  color: var(--grafite); cursor: pointer; flex: none;
}
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 20px; height: 20px; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 80; background: var(--creme); padding: 20px var(--margin-mobile);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
/* ⚠️ `is-open` e ligada e desligada pelo `main.js`. Nao renomear. */
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.nav-mobile__top img { height: 34px; }
.nav-mobile__close {
  width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--creme);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--grafite);
}
.nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nav-mobile a:not(.btn) {
  display: block; font: 700 19px var(--font-display); color: var(--grafite); text-decoration: none;
  padding: 14px 8px; border-bottom: 1px solid rgba(58, 42, 46, .08);
}
.nav-mobile__cta { margin-top: var(--sp-4); }
@media (min-width: 860px) { .nav-mobile { display: none; } }

/* ---------------------------------- BOTAO --------------------------------- */
/* Só a estrutura. Cor, borda e sombra vivem no `recorte.css`. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 15.5px var(--font-body); text-decoration: none; cursor: pointer;
  padding: 15px 26px; border-radius: var(--radius-pill);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--block { width: 100%; }

/* ---------------------------------- RODAPE -------------------------------- */
.site-footer { background: var(--grafite); color: var(--creme); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); padding-block: var(--sp-7) var(--sp-4); border-bottom: 1px solid rgba(244, 243, 225, .18); }
.footer-brand img { height: 64px; width: auto; margin-bottom: 14px; }
.footer-brand p:first-of-type { font: 400 20px/1.3 var(--font-script); margin: 0 0 6px; }
.footer-brand p:last-of-type { font-size: 13.5px; margin: 0; opacity: .8; }
.site-footer h3 { font: 400 15px var(--font-display); margin: 0 0 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer-nav a { font: 500 14px var(--font-body); }
.footer-bottom { padding-top: 24px; padding-bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: 12.5px; line-height: 1.6; opacity: .75; }

/* ------------------------------ BOTAO FLUTUANTE ---------------------------- */
/* Só posicao e tamanho. A cor e os dois aneis estao no `recorte.css`. */
.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.whatsapp-float svg { width: 26px; height: 26px; }
@media (min-width: 860px) { .whatsapp-float { width: 62px; height: 62px; right: 22px; bottom: 22px; } }

/* ------------------------------ TARJA DE CONSENTIMENTO --------------------- */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--grafite); color: var(--creme);
  padding: 18px var(--margin-mobile); transform: translateY(100%); transition: transform var(--dur-base) var(--ease-out);
}
.consent-banner.is-visible { transform: translateY(0); }
.consent-banner__inner { max-width: var(--max-content); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; }
.consent-banner p { font-size: 14px; line-height: 1.6; max-width: 62ch; margin: 0; }
.consent-banner__actions { display: flex; gap: 12px; flex: none; }

/* --------------------------------- UTILITARIOS ----------------------------- */
.text-center { text-align: center; }
.js-only { display: none; }
.js-enabled .js-only { display: block; }
/* Compostos com hifen ("pre-natal", "pos-alta") sao ponto de quebra legitimo
   para o navegador, e em titulo curto no celular a linha terminava em "pre-"
   com "natal" comecando a linha seguinte. Parece erro de digitacao. Onde isso
   acontece, o composto vira um bloco so. */
.nowrap { white-space: nowrap; }
/* Nivel de titulo e semantica; tamanho e apresentacao. Tres paginas pulavam de
   h1 direto para h3, o que quebra a navegacao por titulos de leitor de tela.
   Os titulos sobem de nivel e esta classe mantem o corpo que eles ja tinham,
   para que nada mude de aparencia. */
.h-size-3 { font-size: var(--text-h3); line-height: var(--lh-h3); }

/* ============================================================================
   ALVO DE TOQUE, 08/09/2026 — mantido na integra
   ----------------------------------------------------------------------------
   Medido a 390px: os links do rodape tinham 16px de altura e o CTA do cabecalho
   38px. A WCAG 2.5.8 (nivel AA) pede 24x24 CSS px; a diretriz da Apple e do
   Material pedem 44. Dezesseis reprova nas duas.

   A correcao e de area clicavel, nao de tamanho de letra: o texto continua no
   mesmo corpo, o que cresce e o recuo vertical do link.
   ============================================================================ */
.footer-nav a, .footer-bottom a { display: inline-block; padding-block: 6px; }
.footer-nav { gap: 2px; }

@media (max-width: 859px) {
  /* 14px de recuo + 16px de conteudo = 44px de alvo. */
  .header-cta { padding-block: 14px; }
  .footer-nav a, .footer-bottom a { padding-block: 8px; }
  .footer-nav { gap: 0; }
}

/* Telas muito estreitas (360px e abaixo): mais 8px de cada lado vem da margem
   da pagina. E o ultimo lugar de onde ainda da para tirar largura sem que o
   conteudo encoste na borda. */
@media (max-width: 380px) {
  :root { --margin-mobile: 18px; }
}