/* ============================================================
   ILUMINA CARE, design system
   Traduzido do Manual da Marca v1.0 (agosto/2026).
   Toda cor e todo tamanho do site sai daqui. Nada de hex solto
   no CSS de seção.
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- paleta principal (manual, item 2.5) ---------- */
  --caramelo: #97491D;   /* C29 M71 Y100 K20 */
  --rosa: #F7D4E3;       /* C2  M16 Y4   K0  */
  --chumbo: #2A2828;     /* C70 M64 Y63  K63 */
  --branco: #FFFFFF;

  /* ---------- paleta secundária (manual, item 2.6: 20/40/60/80%) ---------- */
  --caramelo-80: #AC6D4A;
  --caramelo-60: #C19277;
  --caramelo-40: #D5B6A5;
  --caramelo-20: #EADBD2;
  --rosa-80: #F9DDE9;
  --rosa-60: #FAE5EE;
  --rosa-40: #FCEEF4;
  --rosa-20: #FDF6F9;
  --chumbo-80: #444040;
  --chumbo-60: #665F5E;
  --chumbo-40: #908887;
  --chumbo-20: #C2BDBB;

  /* ---------- papéis ----------
     Regra da casa: o fundo do site é BRANCO PURO, do topo ao rodapé.
     Cor da marca entra em elemento (tipo, botão, selo, foto), nunca
     como fundo de página. Os cinzas saem da rampa de chumbo do
     manual (item 2.6), por isso não puxam para bege.                */
  --tinta: var(--chumbo);
  --tinta-suave: var(--chumbo-60);
  --tinta-tenue: var(--chumbo-40);
  --fundo: #FFFFFF;
  --superficie: #FFFFFF;
  --linha: #E9E6E5;
  --fio: #D6D1CF;
  --acento: var(--caramelo);
  --acento-escuro: #7C3B16;

  /* ---------- tipografia ---------- */
  --fonte: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-mega: clamp(40px, 6.2vw, 78px);
  --t-h1: clamp(34px, 4.8vw, 58px);
  --t-h2: clamp(27px, 3.4vw, 42px);
  --t-h3: clamp(19px, 1.9vw, 23px);
  --t-corpo-g: clamp(17px, 1.5vw, 19px);
  --t-corpo: 16px;
  --t-peq: 14px;
  --t-micro: 12px;
  --t-rotulo: 11px;

  --peso-display: 200;   /* Montserrat Thin/ExtraLight, como o manual */
  --peso-titulo: 300;
  --peso-corpo: 400;
  --peso-forte: 600;

  --track-rotulo: .2em;
  --track-display: .005em;

  /* ---------- ritmo ---------- */
  --e1: 4px;
  --e2: 8px;
  --e3: 16px;
  --e4: 24px;
  --e5: 40px;
  --e6: 64px;
  --e7: 96px;
  --e8: 132px;

  --secao-y: clamp(56px, 8vw, 108px);
  --largura: 1240px;
  --largura-estreita: 880px;
  --leitura: 62ch;

  --raio: 3px;
  --raio-g: 6px;
  --sombra: 0 1px 2px rgba(42, 40, 40, .04), 0 8px 24px rgba(42, 40, 40, .04);
  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   base
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* ============================================================
   tipografia
   ============================================================ */

.display {
  font-size: var(--t-mega);
  font-weight: var(--peso-display);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.t-h1 { font-size: var(--t-h1); font-weight: var(--peso-display); line-height: 1.08; text-wrap: balance; }
.t-h2 { font-size: var(--t-h2); font-weight: var(--peso-display); line-height: 1.14; text-wrap: balance; }
.t-h3 { font-size: var(--t-h3); font-weight: var(--peso-forte); line-height: 1.3; text-wrap: balance; }

.rotulo {
  display: block;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--acento);
}

.intro {
  font-size: var(--t-corpo-g);
  font-weight: 300;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: var(--leitura);
}

.leitura { max-width: var(--leitura); }
.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   estrutura
   ============================================================ */

.faixa { padding-left: var(--e4); padding-right: var(--e4); }
.miolo { max-width: var(--largura); margin-inline: auto; }
.miolo-estreito { max-width: var(--largura-estreita); margin-inline: auto; }

.secao { padding-top: var(--secao-y); padding-bottom: var(--secao-y); background: var(--fundo); }
/* separação entre seções vem de fio e respiro, não de fundo colorido */
.secao--fio { border-top: 1px solid var(--linha); }

.cabecalho-secao { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e5); }
.cabecalho-secao .intro { margin-top: calc(var(--e1) * -1); }

/* ============================================================
   botões
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 15px var(--e4);
  border-radius: var(--raio);
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn--cheio { background: var(--acento); color: var(--branco); }
.btn--cheio:hover { background: var(--acento-escuro); }
.btn--linha { border: 1px solid var(--fio); color: var(--tinta); }
.btn--linha:hover { border-color: var(--acento); color: var(--acento); }
.btn--claro { background: var(--branco); color: var(--chumbo); }
.btn--claro:hover { background: var(--rosa); }
.btn--largo { width: 100%; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-peq);
  font-weight: var(--peso-forte);
  color: var(--acento);
}
.link-seta svg { width: 14px; height: 14px; transition: transform var(--transicao); }
.link-seta:hover svg { transform: translateX(3px); }

/* ============================================================
   estrela do logo, usada como marcador da marca
   ============================================================ */

.estrela { width: 12px; height: 12px; color: var(--acento); flex: none; }


/* ============================================================
   moldura de foto (placeholder enquanto não há fotografia)
   Cada moldura carrega o briefing da foto que entra no lugar.
   ============================================================ */

.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background:
    radial-gradient(120% 90% at 24% 16%, rgba(255, 255, 255, .96), transparent 62%),
    linear-gradient(150deg, var(--rosa-20) 0%, var(--rosa-60) 46%, var(--rosa) 100%);
  isolation: isolate;
}
.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(42, 40, 40, .1) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: .5;
  mix-blend-mode: multiply;
}
/* marca d'água em caramelo suave, para a moldura não virar bloco rosa chapado */
.foto__marca {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  height: auto;
  color: var(--caramelo);
  opacity: .22;
}
.foto__brief {
  position: absolute;
  left: var(--e3);
  bottom: var(--e3);
  right: var(--e3);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  width: fit-content;
  max-width: calc(100% - var(--e5));
  padding: 7px 11px;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  color: var(--tinta-suave);
  font-size: var(--t-micro);
  line-height: 1.35;
  text-align: left;
}
.foto__brief b {
  font-weight: var(--peso-forte);
  color: var(--acento);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  flex: none;
}
.foto--escura {
  border-color: transparent;
  background:
    radial-gradient(80% 60% at 68% 20%, rgba(247, 212, 227, .46), transparent 64%),
    radial-gradient(90% 70% at 20% 90%, rgba(151, 73, 29, .5), transparent 66%),
    linear-gradient(160deg, var(--chumbo-80) 0%, var(--chumbo) 74%);
}
.foto--escura .foto__marca { color: var(--rosa); opacity: .32; }
.foto--caramelo {
  border-color: transparent;
  background:
    radial-gradient(100% 80% at 25% 20%, rgba(255, 255, 255, .3), transparent 58%),
    linear-gradient(155deg, var(--caramelo-60) 0%, var(--caramelo) 88%);
}
.foto--caramelo .foto__marca { color: var(--branco); opacity: .38; }

.r-1x1 { aspect-ratio: 1 / 1; }
.r-4x5 { aspect-ratio: 4 / 5; }
.r-3x4 { aspect-ratio: 3 / 4; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-16x9 { aspect-ratio: 16 / 9; }

/* marcação de conteúdo que ainda é de exemplo */
.rascunho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px dashed var(--fio);
  border-radius: var(--raio);
  font-size: 10px;
  font-weight: var(--peso-forte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

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