/*
 * CLÁUDIA — sistema visual
 * Linguagem: sóbria e premium, inspirada no macOS — superfícies claras, linhas finas,
 * sombras suaves em camadas, tipografia precisa. A marca vive na serifa (Cormorant)
 * e na cor terracota; a interface vive no sans (SF Pro no Mac/iPhone, Inter no resto).
 * Grelha de 4 px.
 */
:root {
  /* Marca (doc. secção 2) */
  --creme: #F7F3EE;
  --branco: #FFFFFF;
  --areia: #EBE3D9;
  --nude: #DCC2B8;
  --terracota: #A56456;          /* ação principal (contraste AA com branco) */
  --terracota-escuro: #8A5043;
  --terracota-suave: #F6EBE6;
  --salvia: #9DAE94;
  --salvia-escuro: #586B51;
  --salvia-suave: #EDF1EA;
  --alerta: #B04A3E;
  --alerta-suave: #F8E9E6;
  --champanhe: #CDB79A;          /* detalhe discreto: filetes, sublinhados */

  /* Texto */
  --carvao: #262320;             /* principal */
  --taupe: #756A62;              /* secundário */
  --taupe-claro: #A99E97;        /* terciário */

  /* Linhas e superfícies */
  --linha: rgba(38, 35, 32, .08);
  --linha-forte: rgba(38, 35, 32, .14);
  --cinza: #EEEAE5;
  --sup-2: #FBF9F7;              /* superfície secundária (cabeçalhos de tabela, campos) */
  --vidro: rgba(250, 248, 245, .78);

  /* Tipografia (inalterada) */
  --f-titulo: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-texto: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Raios */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 13px;
  --r-l: 18px;
  --r-xl: 24px;

  /* Sombras em camadas (mais profundidade, tom quente) */
  --sombra-xs: 0 0 0 .5px rgba(38, 35, 32, .07), 0 1px 2px rgba(38, 35, 32, .05);
  --sombra: 0 0 0 .5px rgba(38, 35, 32, .055), 0 1px 2px rgba(38, 35, 32, .03), 0 6px 16px -4px rgba(38, 35, 32, .06), 0 18px 42px -26px rgba(38, 35, 32, .12);
  --sombra-alta: 0 0 0 .5px rgba(38, 35, 32, .07), 0 10px 28px -8px rgba(38, 35, 32, .12), 0 30px 70px -24px rgba(38, 35, 32, .20);
  --anel-foco: 0 0 0 4px rgba(165, 100, 86, .16);

  --trans: 180ms cubic-bezier(.2, .8, .2, 1);
  --seg-topo: env(safe-area-inset-top, 0px);
  --seg-baixo: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: radial-gradient(1100px 520px at 50% -14%, #FDFBF8 0%, rgba(253, 251, 248, 0) 64%), var(--creme);
  color: var(--carvao);
  font: 400 14px/1.5 var(--f-texto);
  letter-spacing: -.006em;
  font-feature-settings: 'cv11', 'ss01', 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hierarquia: títulos de página em serifa de marca; títulos de secção em sans. */
h1, .marca {
  font-family: var(--f-titulo);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: 34px; }
h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .75em; }

a { color: var(--terracota); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--terracota-escuro); }

.marca { letter-spacing: .3em; font-weight: 600; color: var(--carvao); }
.marca small {
  display: block; font-family: var(--f-texto); font-size: 10px;
  letter-spacing: .18em; font-weight: 500; color: var(--taupe); margin-top: 6px; text-transform: uppercase;
}

.subtil { color: var(--taupe); }
.pequeno { font-size: 12.5px; }
.centro { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.maiuscula-inicial::first-letter { text-transform: uppercase; }
.sobretitulo { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); margin: 0; }

::selection { background: var(--terracota-suave); }
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--r-s); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Logótipo (substituível — ver js/core/marca.js) ---------- */
.logo-txt { display: block; }
.logo-txt small { display: block; font-family: var(--f-texto); font-size: .42em; letter-spacing: .2em; font-weight: 500; color: var(--taupe); margin-top: .5em; text-transform: uppercase; white-space: nowrap; }
.logo-img { display: block; height: 1.6em; width: auto; max-width: 100%; }
.logo-img.simbolo { height: 1.4em; }
.logo-mono { font-family: var(--f-titulo); font-weight: 600; }
.retrato { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--branco), 0 0 0 3px var(--nude); }
.retrato.vazio-r { display: inline-grid; place-items: center; background: linear-gradient(160deg, #F3E6DF, #E2CFC4); color: var(--terracota-escuro); font: italic 600 20px var(--f-titulo); }
.so-movel { display: none; }
@media (max-width: 767px) { .so-movel { display: contents; } }