/* ==========================================================================
   Julyane Cordeiro Beauty — folha de estilo
   Tema claro e escuro via variáveis CSS. Tipografia: DM Serif Display + DM Sans.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#f7f4f2;
  --ink:#1b1512;
  --ink-2:#6f635c;
  --line:#e6dfd9;
  --line-strong:#d6ccc4;
  --btn-bg:#2b201b;
  --btn-fg:#fbf8f6;
  --band-bg:#2b201b;
  --band-fg:#f4efec;
  --band-muted:#b6a79f;
  --accent:#8a6552;
  --shadow:0 18px 40px -28px rgba(43,32,27,.45);
  --show-light:block;
  --show-dark:none;
  --img-bg:#efeae6;

  --step-0:1rem;
  --maxw:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141110;
    --bg-soft:#1b1715;
    --ink:#f2ece8;
    --ink-2:#a99e97;
    --line:#2c2724;
    --line-strong:#3a332f;
    --btn-bg:#efe6e0;
    --btn-fg:#191311;
    --band-bg:#0e0c0b;
    --band-fg:#f2ece8;
    --band-muted:#8f837c;
    --accent:#c99e86;
    --shadow:0 18px 40px -28px rgba(0,0,0,.8);
    --show-light:none;
    --show-dark:block;
    --img-bg:#221d1a;
  }
}
:root[data-theme="dark"]{
  --bg:#141110;
  --bg-soft:#1b1715;
  --ink:#f2ece8;
  --ink-2:#a99e97;
  --line:#2c2724;
  --line-strong:#3a332f;
  --btn-bg:#efe6e0;
  --btn-fg:#191311;
  --band-bg:#0e0c0b;
  --band-fg:#f2ece8;
  --band-muted:#8f837c;
  --accent:#c99e86;
  --shadow:0 18px 40px -28px rgba(0,0,0,.8);
  --show-light:none;
  --show-dark:block;
  --img-bg:#221d1a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Quem liga "reduzir movimento" no aparelho não perde a navegação:
   perde só os deslocamentos (ver o bloco no fim do arquivo). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .float:hover{transform:none}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"DM Serif Display","Georgia","Times New Roman",serif;font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2.55rem,8vw,4.5rem);line-height:1.06}
h2{font-size:clamp(1.8rem,4.3vw,2.65rem);line-height:1.14}
h3{font-size:1.24rem;line-height:1.3}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.eyebrow{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;margin:0;
}
.lead{color:var(--ink-2);font-size:1.06rem;max-width:56ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- header ---------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:26px;height:auto}
.logo-l{display:var(--show-light)}
.logo-d{display:var(--show-dark)}
.brand span{
  font-family:"DM Sans",sans-serif;font-weight:400;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.25;
}
nav.desk{display:none;gap:26px}
nav.desk a{
  position:relative;text-decoration:none;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);padding-block:6px;transition:color .3s ease;
}
/* sublinhado que cresce da esquerda no hover e na seção em que o leitor está */
nav.desk a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
nav.desk a:hover,nav.desk a.is-active{color:var(--ink)}
nav.desk a:hover::after,nav.desk a.is-active::after{transform:scaleX(1)}
.drawer nav a.is-active{color:var(--accent)}
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
}
.drawer{border-top:1px solid var(--line);background:var(--bg)}
.drawer nav{display:flex;flex-direction:column;padding-block:8px 16px}
.drawer nav a{
  text-decoration:none;padding:11px 0;font-size:.95rem;letter-spacing:.06em;
  border-bottom:1px solid var(--line);
}
.drawer nav a:last-child{border-bottom:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  border:1px solid transparent;transition:transform .2s ease,opacity .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--btn-bg);color:var(--btn-fg)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:.74rem}
.btn svg{width:16px;height:16px;flex:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,7vw,84px) clamp(40px,6vw,72px)}
.hero-grid{display:grid;gap:clamp(30px,5vw,56px);align-items:center}
.hero h1{margin-block:14px 0}
.hero h1 em{font-style:italic;display:block;font-size:.5em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:14px}
.hero .lead{margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-art{position:relative;isolation:isolate}
.hero-art .big{
  aspect-ratio:4/5;width:100%;max-width:100%;object-fit:cover;object-position:50% 28%;background:var(--img-bg);
  border-radius:2px;
}
.credentials{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.credentials div{padding:20px 4px}
.credentials div + div{border-top:1px solid var(--line)}
.credentials strong{
  display:block;font-family:"DM Serif Display","Georgia",serif;font-weight:400;font-size:1.48rem;line-height:1.2;
}
.credentials span{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- sections ---------- */
section{scroll-margin-top:84px}
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-soft{background:var(--bg-soft)}
.sec-head{max-width:62ch}
.sec-head h2{margin-top:12px}
.sec-head .lead{margin-top:16px}

.about{display:grid;gap:clamp(28px,5vw,60px);align-items:start;margin-top:8px}
.about-photo{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;
  background:var(--img-bg);border-radius:2px;
}
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.facts li{
  padding:15px 0;border-top:1px solid var(--line);display:flex;gap:14px;align-items:baseline;
}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts li b{
  font-family:"DM Sans",sans-serif;font-weight:500;color:var(--accent);font-size:.8rem;
  letter-spacing:.14em;flex:none;min-width:2.4em;
}

/* ---------- services ---------- */
.group{margin-top:clamp(42px,6vw,66px)}
.group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line-strong);
}
.group-head h3{font-size:clamp(1.45rem,3.4vw,1.95rem)}
.group-head .tag{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.grid{display:grid;gap:20px;margin-top:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(2,1fr)}
.item figure{margin:0}
.item img{
  width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--img-bg);border-radius:2px;
  transition:opacity .3s ease;
}
.item:hover img{opacity:.88}
.item figcaption{margin-top:13px}
.item .name{font-family:"DM Serif Display","Georgia",serif;font-size:1.06rem;line-height:1.3}
.item .note{font-size:.84rem;color:var(--ink-2);margin-top:3px;line-height:1.55}
.wide img{aspect-ratio:4/5;object-position:50% 28%}
.note-row{
  margin-top:22px;font-size:.87rem;color:var(--ink-2);
  padding-top:14px;border-top:1px solid var(--line);
}
.note-row b{font-weight:400;color:var(--ink)}

.feature{display:grid;gap:26px;margin-top:26px;align-items:center}
.feature img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--img-bg);border-radius:2px}
.feature .badge{
  display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}

.pay{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.pay li{
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;
  font-size:.82rem;letter-spacing:.06em;color:var(--ink-2);
}

/* ---------- local + contato ---------- */
.cards{display:grid;gap:18px;margin-top:34px}
.card{
  border:1px solid var(--line);border-radius:3px;padding:26px 24px;background:var(--bg);
  display:flex;flex-direction:column;gap:12px;
}
.card .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.card .v{font-family:"DM Serif Display","Georgia",serif;font-size:1.18rem;line-height:1.4}
.card .v small{display:block;font-family:"DM Sans",sans-serif;font-size:.92rem;color:var(--ink-2);margin-top:6px;line-height:1.6}
.card a.btn{align-self:flex-start;margin-top:6px}

/* ---------- footer ---------- */
footer{background:var(--band-bg);color:var(--band-fg);padding-block:clamp(48px,7vw,76px) 40px;margin-top:0}
footer .fwrap{display:grid;gap:34px}
footer img.mark{width:132px}
footer h2{font-size:clamp(1.7rem,4vw,2.3rem)}
footer a{color:var(--band-fg);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
footer a:hover{border-bottom-color:var(--band-fg)}
.fmeta{font-size:.86rem;color:var(--band-muted);line-height:1.9}
.fbottom{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
}

/* ---------- float ---------- */
.float{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  width:54px;height:54px;border-radius:50%;background:#25a35a;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  text-decoration:none;transition:transform .2s ease;
}
.float:hover{transform:scale(1.06)}
.float svg{width:27px;height:27px}

@media (min-width:620px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .credentials{grid-template-columns:repeat(3,1fr)}
  .credentials div + div{border-top:0;border-left:1px solid var(--line);padding-left:24px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr 1fr;gap:44px}
  footer .fwrap{grid-template-columns:1.3fr 1fr;align-items:end}
}
@media (min-width:900px){
  .bar{min-height:76px}
  nav.desk{display:flex}
  .menu-btn{display:none}
  .drawer{display:none!important}
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .about{grid-template-columns:.85fr 1.15fr;gap:64px}
  .grid{gap:26px}
}

[hidden]{display:none!important}

/* ==========================================================================
   Animação de chegada — roda quando o leitor clica num item do menu
   e a rolagem suave termina na seção de destino.
   ========================================================================== */
@keyframes jcb-entra{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.jcb-arriving :is(.sec-head,.about) > *,
.jcb-arriving.cards > *{
  animation:jcb-entra .6s cubic-bezier(.22,.61,.36,1) both;
}
.jcb-arriving :is(.sec-head,.about) > *:nth-child(2),
.jcb-arriving.cards > *:nth-child(2){animation-delay:.08s}
.jcb-arriving :is(.sec-head,.about) > *:nth-child(3),
.jcb-arriving.cards > *:nth-child(3){animation-delay:.16s}
.jcb-arriving :is(.sec-head,.about) > *:nth-child(4),
.jcb-arriving.cards > *:nth-child(4){animation-delay:.24s}

/* Versão sem deslocamento da animação de chegada — precisa vir DEPOIS da
   definição original para substituí-la. */
@media (prefers-reduced-motion: reduce){
  @keyframes jcb-entra{
    from{opacity:0}
    to{opacity:1}
  }
}