/* ============================================
   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;

  /* raios suaves (referência Nina) — bem arredondado, nada de pontudo */
  --r-sm:14px;    /* inputs, selects, pills pequenas, badges */
  --r-md:20px;    /* cards, painéis, modais */
  --r-lg:28px;    /* cards grandes, seções */
  --r-chip:16px;  /* chip de ícone (quadrado arredondado) */
  --r-pill:999px; /* botões — pílula total */

  /* sombras suaves + glow (borda convidativa, estilo Nina) */
  --soft:0 4px 16px -4px rgba(31,66,59,.10), 0 1px 3px rgba(31,66,59,.06);
  --soft-lg:0 14px 40px -14px rgba(31,66,59,.24);
  --glow-jade:0 8px 28px -6px rgba(35,128,107,.42), 0 0 0 1px rgba(35,128,107,.10);
  --glow-rose:0 8px 28px -6px rgba(219,164,164,.55), 0 0 0 1px rgba(219,164,164,.18);
  --borda-suave:1px solid rgba(31,66,59,.08);  /* borda quase invisível — a sombra que segura o card */
  --ease-mola:cubic-bezier(.2,.9,.25,1.15);
}

/* ===== baseline global: nada pontudo ===== */
button,input,select,textarea{border-radius:var(--r-sm)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(71,169,143,.18)}

/* chip de ícone colorido e arredondado (padrão Nina) */
.chip-ic{width:46px;height:46px;border-radius:var(--r-chip);display:grid;place-items:center;flex:none}
.chip-ic.jade{background:var(--verde-100);color:var(--verde-700)}
.chip-ic.rose{background:var(--rosa-100);color:#A2565E}
.chip-ic.sol{background:var(--manteiga-100);color:#8a6a2a}
.chip-ic.menta{background:#DCF0E8;color:var(--verde-700)}

/* card macio (borda quase invisível + sombra segura) */
.card-soft{background:var(--papel);border:var(--borda-suave);border-radius:var(--r-md);box-shadow:var(--soft)}
*{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 — arredondados, glow convidativo (linguagem Apple) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--verde-700);color:var(--creme);
  font-family:var(--sans);font-weight:600;font-size:16px;
  padding:15px 30px;border:none;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;
  box-shadow:var(--soft);
  transition:transform .22s var(--ease-mola),box-shadow .22s ease,background .18s ease;
}
.btn:hover{background:var(--verde-900);transform:translateY(-2px) scale(1.015);box-shadow:var(--glow-jade)}
.btn:active{transform:translateY(0) scale(.99)}
.btn .dot{background:var(--rosa-300);width:.32em;height:.32em}
.btn--ghost{background:color-mix(in srgb,var(--papel) 70%,transparent);color:var(--verde-900);border:1px solid rgba(35,128,107,.35);box-shadow:none}
.btn--ghost:hover{background:var(--verde-100);box-shadow:var(--glow-jade)}
.btn--rosa{background:var(--rosa-500);color:var(--verde-900)}
.btn--rosa:hover{background:var(--rosa-300);box-shadow:var(--glow-rose)}

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

/* a cápsula girando — selo de marca, só a pílula (sem anel de texto) */
.capsula-giro{animation:gira 14s linear infinite;transform-origin:center}
@keyframes gira{to{transform:rotate(360deg)}}

/* 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)}