/* ===================================================================
   Landing do Ninho — escura, mobile-first.

   A paleta NÃO é inventada: são os tokens da classe .dark de
   src/styles.css do app. A landing é o modo escuro do Ninho, não um
   tema novo.

   Escrita mobile-first de propósito: a maioria dos acessos vem de
   celular. As media queries só ADICIONAM a partir de 760px/1040px.
   =================================================================== */
:root{
  --bg:oklch(0.24 0.03 274);
  --bg-2:oklch(0.21 0.028 274);
  --fg:oklch(0.96 0.008 268);
  --card:oklch(0.29 0.032 274);
  --primary:oklch(0.74 0.075 258);
  --primary-fg:oklch(0.22 0.03 274);
  --accent:oklch(0.7 0.07 305);
  --muted:oklch(0.34 0.033 274);
  --muted-fg:oklch(0.73 0.025 272);
  --border:oklch(1 0 0/12%);
  --border-forte:oklch(1 0 0/20%);
  --lilac:oklch(0.5 0.06 305);
  --lilac-fg:oklch(0.97 0.01 300);
  --sand:oklch(0.38 0.03 88);
  --sucesso:oklch(0.72 0.09 160);
  --alerta:oklch(0.82 0.11 78);
  --perigo:oklch(0.63 0.17 20);

  --grad:linear-gradient(135deg,var(--primary),var(--accent));
  --brilho:0 10px 34px -10px oklch(0.7 0.07 305/.55);
  --brilho-forte:0 14px 46px -12px oklch(0.7 0.07 305/.75);
  --raio:1.25rem;
  --display:"Fraunces",Georgia,serif;
  --sans:"Manrope",ui-sans-serif,system-ui,sans-serif;

  --gutter:1.25rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* o clip fica no <html>: overflow-x:hidden aqui tornaria o body um
     container de rolagem e quebraria o position:sticky do cabecalho */
  /* espaço para a barra fixa de ação no celular */
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.wrap{width:100%;padding-inline:var(--gutter);margin-inline:auto;max-width:1180px}
section{padding-block:clamp(3rem,9vw,6rem)}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,11vw,4.75rem)}
h2{font-size:clamp(2rem,8.5vw,3.5rem)}
h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;line-height:1.3;letter-spacing:0}
p{color:var(--muted-fg)}
.lead{font-size:clamp(1rem,4vw,1.15rem);max-width:54ch}




/* ------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.9rem 1.7rem;border-radius:999px;
  font-weight:700;font-size:1rem;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-1{background:var(--grad);color:var(--primary-fg);box-shadow:var(--brilho)}
.btn-1:active{transform:scale(.98)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--border-forte)}
@media (hover:hover){
  .btn-1:hover{box-shadow:var(--brilho-forte);transform:translateY(-2px)}
  .btn-2:hover{border-color:var(--accent)}
}


/* --------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;overflow:hidden;
  --altura-veu:52%;
  padding-top:clamp(18rem,58vh,27rem);padding-bottom:3.5rem}

/* A arte fica NITIDA no topo do hero. O texto comeca abaixo dela, e o
   desfoque existe so na faixa onde o texto cobre a imagem — feito com
   backdrop-filter num veu que entra suave, em vez de borrar a foto inteira. */
.hero-fundo{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero-fundo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  opacity:.95;
}

/* Veu que borra apenas o que esta atras dele. A mascara faz a borda de cima
   derreter, para nao aparecer uma linha reta cortando a foto. */
.hero-veu{
  position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  height:var(--altura-veu);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--bg) 30%,transparent) 0%,
    color-mix(in oklab,var(--bg) 72%,transparent) 30%,
    color-mix(in oklab,var(--bg) 90%,transparent) 65%,
    var(--bg) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);
}
.hero-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg) 22%,transparent) 0%,
      color-mix(in oklab,var(--bg) 60%,transparent) 42%,
      color-mix(in oklab,var(--bg) 84%,transparent) 78%,
      var(--bg) 100%),
    radial-gradient(120% 70% at 50% 12%, oklch(0.7 0.07 305/.20), transparent 70%);
}
.hero h1{margin:.9rem 0 1.1rem}
.hero h1 em{font-style:italic;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.hero .lead{color:color-mix(in oklab,var(--fg) 78%,transparent)}
.hero-acoes{display:flex;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.hero-acoes .btn{flex:1 1 auto;min-width:190px}
@media (min-width:760px){
  /* no celular o botao ocupa a linha toda; no desktop esticar fica desengonçado */
  .hero-acoes .btn{flex:0 0 auto}
}
@media (min-width:1040px){
  /* com a arte no fundo, o hero e uma coluna so; o texto nao passa de 20ch
     de largura para nao atravessar a gestante */
  .hero-texto{max-width:34rem}
  .hero{--altura-veu:50%;padding-top:clamp(15rem,44vh,22rem);padding-bottom:6rem}
}



/* -------------------------------------------------------- cartões */
.cabeca{margin-bottom:2rem}
.cabeca h2,
.duas h2{margin:.8rem 0 .9rem}

.grade{display:grid;gap:.9rem}
@media (min-width:760px){.grade-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.grade-3{grid-template-columns:repeat(3,1fr)}}

/* barra de destaque à esquerda — padrão da referência 2 */
.cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--raio);
  padding:1.3rem 1.3rem 1.4rem;position:relative;overflow:hidden;
}
.cartao::before{
  content:"";position:absolute;left:0;top:1.25rem;bottom:1.25rem;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent);
}
.cartao h3{margin-bottom:.45rem;padding-left:.85rem}
.cartao p{font-size:.94rem;padding-left:.85rem}
.cartao .icone{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:oklch(1 0 0/6%);color:var(--accent);margin:0 0 .9rem .85rem;
}
.cartao .icone svg{width:21px;height:21px}

/* selos de gravidade — cores do app: primary, warning, destructive */
.selo{background:var(--card);border:1px solid var(--border);border-radius:var(--raio);padding:1.3rem}
.selo .tag{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:.36rem .8rem;border-radius:999px;margin-bottom:.85rem;
}
.t-info{background:color-mix(in oklab,var(--primary) 26%,transparent);color:var(--fg);border:1px solid color-mix(in oklab,var(--primary) 45%,transparent)}
.t-conv{background:color-mix(in oklab,var(--alerta) 22%,transparent);color:var(--fg);border:1px solid color-mix(in oklab,var(--alerta) 45%,transparent)}
.t-agora{background:color-mix(in oklab,var(--perigo) 26%,transparent);color:var(--fg);border:1px solid color-mix(in oklab,var(--perigo) 55%,transparent)}
.selo p{font-size:.94rem}

/* -------------------------------------------------- passos numerados */
.passos{display:grid;gap:.9rem;margin-top:1.8rem;counter-reset:p}
.passo{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--raio);padding:1.2rem;
}
.passo .n{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:var(--primary-fg);font-weight:800;font-size:.92rem;
}
.passo h3{margin-bottom:.3rem}
.passo p{font-size:.92rem}

/* --------------------------------------------------------- lista */
.lista{list-style:none;display:grid;gap:.85rem;margin-top:1.4rem}
.lista li{display:flex;gap:.75rem;align-items:flex-start;font-size:.96rem;color:var(--muted-fg)}
.lista .m{
  flex:none;width:22px;height:22px;border-radius:7px;background:var(--lilac);color:var(--lilac-fg);
  display:grid;place-items:center;margin-top:.15rem;
}
.lista .m svg{width:13px;height:13px}
.lista b{color:var(--fg);font-weight:700}

/* ------------------------------------------------------- telefone */
.duas{display:grid;gap:2.2rem}
@media (min-width:1040px){
  .duas{grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem}
  .duas.invertida > *:first-child{order:2}
}
.telefone{
  width:min(300px,100%);margin-inline:auto;background:var(--card);
  border:1px solid var(--border-forte);border-radius:30px;padding:1rem;
  box-shadow:0 30px 70px -30px oklch(0 0 0/.7);position:relative;
}
.telefone::after{
  content:"";position:absolute;inset:-14% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,oklch(0.7 0.07 305/.3),transparent 70%);
}
.telefone .barrinha-topo{width:70px;height:5px;border-radius:99px;background:var(--muted);margin:0 auto .9rem}
.mini{
  background:var(--bg-2);border:1px solid var(--border);border-radius:15px;
  padding:.8rem .85rem;display:flex;gap:.7rem;align-items:center;margin-bottom:.55rem;
}
.mini:last-child{margin-bottom:0}
.mini .bolha{flex:none;width:32px;height:32px;border-radius:10px;background:oklch(1 0 0/6%);display:grid;place-items:center;font-size:.95rem}
.mini .t1{font-size:.85rem;font-weight:700;display:block;line-height:1.25}
.mini .t2{font-size:.74rem;color:var(--muted-fg);display:block}
.mini .prog{display:block;height:5px;border-radius:99px;background:var(--muted);overflow:hidden;margin-top:.35rem}
.mini .prog i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.anel{display:flex;align-items:center;gap:.85rem;padding:.1rem .1rem 1rem}
.anel .a1{font-family:var(--display);font-size:1.3rem;line-height:1.1}
.anel .a2{font-size:.76rem;color:var(--muted-fg)}

/* ---------------------------------------------------------- final */
.final{
  border:1px solid var(--border-forte);border-radius:26px;padding:2.4rem 1.4rem;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,oklch(0.7 0.07 305/.22),transparent 68%),var(--card);
}
.final h2{margin:.9rem 0 .9rem}
.final .lead{margin-inline:auto}
.final .btn{margin-top:1.8rem;width:100%;max-width:340px}

/* --------------------------------------------------------- rodapé */
footer{border-top:1px solid var(--border);padding-top:2.6rem;padding-bottom:2.5rem}
/* marca gigante no rodapé — padrão da referência 1 */
.marca-gigante{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(3.4rem,20vw,9rem);
  background:linear-gradient(180deg,var(--fg),color-mix(in oklab,var(--fg) 35%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:1.8rem;
}
.rodape-cols{display:grid;gap:1.8rem;margin-bottom:2rem}
@media (min-width:760px){.rodape-cols{grid-template-columns:repeat(2,1fr)}}
.rodape-cols h4{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:.8rem}
.rodape-cols a{display:flex;align-items:center;min-height:44px;font-weight:600}
@media (hover:hover){.rodape-cols a:hover{color:var(--accent)}}
.aviso{font-size:.83rem;color:var(--muted-fg);line-height:1.6;border-top:1px solid var(--border);padding-top:1.4rem}
.copy{font-size:.82rem;color:var(--muted-fg);margin-top:1rem}

/* ------------------------------------------- barra fixa no celular */
/* A barra so aparece depois que a rolagem comeca: no topo ela competia com o
   botao principal do hero e tapava a arte. O estado vem do js/barra.js. */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  transform:translateY(115%);
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
  will-change:transform;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--border);
  display:flex;gap:.7rem;align-items:center;
}
.barra-fixa[data-visivel="true"]{transform:none}
.barra-fixa .txt{flex:1;min-width:0;font-size:.8rem;color:var(--muted-fg);line-height:1.3}
.barra-fixa .btn{min-height:46px;padding:.65rem 1.25rem;font-size:.95rem;flex:none}
@media (min-width:1040px){
  .barra-fixa{display:none}
  body{padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* classes que substituem atributos style= — sem elas a CSP precisaria de
   'unsafe-inline' em style-src, que é justamente o que queremos evitar */
.cresce{flex:1;min-width:0}
.arte-bebe{margin:.4rem auto 1rem;width:74%}
.p0{width:0}
.p66{width:66%}
.p70{width:70%}