/* ============================================
   YANNE MORAES — tokens e base da marca (v2)
   Conceito: "a dose" — realidade com ponto final.
   Jade alegre + manteiga + rosê + creme editorial
   ============================================ */
:root{
  /* jades (verde alegre, mar — não musgo) */
  --verde-900:#1F423B;
  --verde-700:#23806B;
  --verde-500:#47A98F;
  --verde-300:#9BCDBF;
  --verde-100:#E1F0E9;
  --oliva-legado:#8C906B;

  /* rosês (o 🩷 que ela já usa) */
  --rosa-500:#DBA4A4;
  --rosa-300:#EFCFCB;
  --rosa-100:#F8ECEA;

  /* manteiga (a cor do vestido dela) */
  --manteiga-500:#EBCF9C;
  --manteiga-300:#F4E3C0;
  --manteiga-100:#FAF1DD;

  /* neutros */
  --creme:#FBF8F1;
  --ink:#223E36;
  --papel:#FFFEFA;

  /* degradês da marca */
  --grad-jade:linear-gradient(92deg,#23806B,#47A98F 60%,#5FBBA0);
  --grad-dose:linear-gradient(120deg,#47A98F,#DBA4A4);
  --grad-sol:linear-gradient(120deg,#F4E3C0,#F8ECEA);

  /* semânticas */
  --ok:#2E7D5B;
  --alerta:#C08A3E;
  --erro:#B0524A;
  --info:#5C7A8A;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --hairline:1px solid rgba(31,66,59,.18);
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--creme);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
em,.it{font-family:var(--serif);font-style:italic;font-weight:500}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* o ponto — elemento da marca */
.dot{display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--rosa-500);margin-left:.08em;transform:translateY(-.03em)}

/* eyebrow editorial */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--verde-700);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--verde-700)}

/* botões — cantos retos, modernista */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--verde-700);color:var(--creme);
  font-family:var(--sans);font-weight:600;font-size:16px;
  padding:16px 30px;border:none;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--verde-900);transform:translateY(-1px)}
.btn .dot{background:var(--rosa-300);width:.32em;height:.32em}
.btn--ghost{background:transparent;color:var(--verde-900);border:1px solid var(--verde-700)}
.btn--ghost:hover{background:var(--verde-100)}
.btn--rosa{background:var(--rosa-500);color:var(--verde-900)}
.btn--rosa:hover{background:var(--rosa-300)}

/* moldura arch (janela) p/ retratos */
.arch{border-radius:999px 999px 6px 6px;overflow:hidden;position:relative}
.arch img{width:100%;height:100%;object-fit:cover}

/* hairline sections */
.rule{border-top:var(--hairline)}

::selection{background:var(--rosa-300);color:var(--verde-900)}

/* ============================================
   v2 — a dose (cápsula), glow e degradês
   ============================================ */

/* texto com degradê jade (usar em UMA palavra por título, no máximo) */
.grad-text{
  background:var(--grad-jade);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* glow de fundo — blobs suaves atrás de seções (pai precisa de position:relative) */
.glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.glow--jade{background:rgba(71,169,143,.30)}
.glow--rose{background:rgba(219,164,164,.32)}
.glow--sol{background:rgba(235,207,156,.38)}

/* a cápsula — símbolo da dose (meio franqueza, meio carinho) */
.capsula{display:inline-block;vertical-align:middle}
.capsula svg{display:block}

/* botão com glow no hover */
.btn:hover{box-shadow:0 8px 28px -8px rgba(35,128,107,.55)}
.btn--rosa:hover{box-shadow:0 8px 28px -8px rgba(219,164,164,.7)}