/* ==========================================================================
   Dra. Juliane Guimarães — Design Tokens

   A paleta é a DELA, medida: a captura dos destaques do @drajulianeguimaraes-
   dentista foi recortada no centro de cada círculo e cada cor saiu pela
   mediana dos pixels (mediana, não média, para o anel preto da borda não
   puxar o tom). Cada token abaixo é um destaque do perfil dela:

     Toxin          #5C0628   h336 s88 l19   vinho profundo
     Depoimentos    #A57865   h18  s26 l52   caramelo
     Ballet         #FFFFFF                  branco
     Bioestimulador #9A585C   h356 s27 l47   malva
     Harmoniza      #C8606E   h352 s49 l58   rosé
     Clareamento    #ED9F9F   h0   s68 l78   blush

   O fundo preto também é dela: é como o perfil se apresenta. Por isso este
   site é escuro, enquanto o do Instituto Koe é claro e azul e o da Dra.
   Cristiane é creme e dourado. Três clientes, três marcas.
   ========================================================================== */

:root {
  /* ---- Marca (medidas no perfil) ---- */
  --ju-vinho:    #5C0628;  /* Toxin */
  --ju-caramelo: #A57865;  /* Depoimentos */
  --ju-malva:    #9A585C;  /* Bioestimulador */
  --ju-rose:     #C8606E;  /* Harmoniza */
  --ju-blush:    #ED9F9F;  /* Clareamento */
  --ju-branco:   #FFFFFF;  /* Ballet */

  /* ---- Fundo: o preto do perfil, com um respiro quente ---- */
  --ju-preto:    #0B090B;
  --ju-carvao:   #151114;
  --ju-carvao-2: #1F1920;

  /* ---- Derivadas (só variação, nenhuma cor nova) ---- */
  --vinho-glow:  rgba(92, 6, 40, 0.55);
  --rose-12:     rgba(200, 96, 110, 0.12);
  --rose-24:     rgba(200, 96, 110, 0.24);
  --rose-40:     rgba(200, 96, 110, 0.40);
  --blush-16:    rgba(237, 159, 159, 0.16);
  --branco-06:   rgba(255, 255, 255, 0.06);
  --branco-12:   rgba(255, 255, 255, 0.12);

  /* ---- Texto sobre o escuro ----
     O rosé puro (#C8606E) sobre o preto dá ~4,3:1 — serve para título grande
     e detalhe, não para corpo. Corpo usa os brancos abaixo. */
  --txt-forte:  #F6F1F3;
  --txt-corpo:  rgba(246, 241, 243, 0.74);
  --txt-suave:  rgba(246, 241, 243, 0.52);
  --txt-realce: var(--ju-blush);

  --borda:      rgba(255, 255, 255, 0.10);
  --borda-rose: rgba(200, 96, 110, 0.32);

  /* ---- Tipografia ----
     Serifa de alto contraste (estética facial pede isso) + sans geométrica.
     De propósito diferente da Cormorant + Jost da Dra. Cristiane. */
  --f-titulo: "Playfair Display", "Georgia", serif;
  --f-corpo:  "DM Sans", "Segoe UI", system-ui, sans-serif;

  --t-display: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);
  --t-h2:      clamp(1.9rem, 1.3rem + 2.5vw, 3.2rem);
  --t-h3:      clamp(1.15rem, 1.03rem + 0.5vw, 1.4rem);
  --t-lead:    clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  --t-sm:      0.9rem;
  --t-xs:      0.78rem;
  --t-micro:   0.72rem;

  /* ---- Espaçamento ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-secao: clamp(4.5rem, 3rem + 6vw, 9rem);

  --largura-max: 1200px;
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);

  /* ---- Raios: o círculo é o motivo da marca dela (os destaques) ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sombra-1: 0 2px 10px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 20px 60px rgba(0, 0, 0, 0.55);
  --sombra-rose: 0 10px 34px rgba(200, 96, 110, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;

  --header-h: 72px;
}

@media (max-width: 860px) {
  :root { --header-h: 60px; }
}