/* ============================================================
   ruby.css — wilderbrain.com. Folha unica: home, lista e artigo.

   O conceito: a pagina e a PAREDE DO QUARTO dela, nao um consultorio.
   Gesso rosado no chao, tinta cor de vinho no lugar do preto (a raiz do
   cabelo dela), e o adesivo rosa-chiclete dos Reels colado por cima.

   Tres regras que nao se quebram:
   1. ROSA E ADESIVO, NUNCA CHAO. Area rosa maior que um paragrafo esta errada.
   2. ROSA E DOURADO NUNCA SAO COR DE TEXTO. #F79AC0 sobre o gesso da 1,9:1.
   3. ZERO GRADIENTE. Vinho->rosa e assinatura de deck de MLM de bem-estar.

   Tema claro, comprometido: gesso rosado invertido vira bordel, e nas fotos
   dela a roupa preta some no escuro. color-scheme trava o auto-invert.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  color-scheme: light;

  /* --- CHAO: gesso rosado, ~10% de saturacao de proposito --- */
  --bg:#F6EAE6;
  --bg2:#EFDDD8;
  --panel:#FFFBF9;
  --panel2:#F2E1DC;
  --line:#E2CBC5;
  --line2:#CFAAA2;

  /* --- TINTA: preto de vinho. #000 nao entra na pagina --- */
  --ink:#2A1119;        /* corpo      14.9:1 sobre --bg  AAA */
  --ink-soft:#5A3038;   /* dek        9.3:1  AAA */
  --dim:#6E4A50;        /* meta       6.5:1  AA */

  /* --- MARCA --- */
  --wine:#8A1F3D;       /* link, kicker, regra   7.6:1  AA */
  --wine-deep:#4A0F22;  /* moldura deslocada, rodape */
  --wine-wash:#F3DCE1;
  --copper:#C0512A;     /* 4.0:1 — SO em titulo 24px+, filete, marcador */
  --bubble:#F79AC0;     /* o adesivo. SO fundo, nunca texto */
  --bubble-ink:#1A0A10;
  --olive:#4A5D33;      /* a cor do "aqui esta a fonte"  6.1:1 */
  --olive-wash:#E9E7D8;
  --gold:#B8873C;       /* filete e marcador, nunca palavra */
  --focus:#8A1F3D;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --fs-h1:clamp(41px, 30px + 5.2vw, 74px);
  --fs-h2:clamp(28px, 23px + 1.9vw, 42px);
  --fs-lead:clamp(19px, 17px + .9vw, 25px);
  --fs-body:clamp(17px, 16px + .25vw, 19px);
  --fs-meta:13.5px;
  --lh-body:1.68;

  --max:1180px;
  --read:68ch;
  --gut:clamp(18px, 4vw, 32px);
  --step:clamp(30px, 5vw, 58px);
  --r:14px;
  --shift:10px;         /* o deslocamento da moldura = A assinatura */
  --tilt:-1.2deg;       /* so o adesivo gira. nada mais */
  --dur:.16s;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-body);line-height:var(--lh-body);font-feature-settings:"kern","liga"}
img{max-width:100%;display:block}
a{color:var(--wine);text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--wine);color:#fff;
  padding:10px 16px;border-radius:8px;text-decoration:none}

h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.06;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
h1{font-size:var(--fs-h1)}
h1 em{font-style:normal;color:var(--wine)}
h2{font-size:var(--fs-h2);font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 72}
/* o contraste de tracking (titulo apertado x kicker aberto) e metade do "estiloso" */
h3{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wine)}
h4{font-family:var(--body);font-size:17px;font-weight:600;margin-bottom:9px}
p{margin-bottom:15px}
p:last-child{margin-bottom:0}
b{font-weight:600;color:#1F0B12}
em{font-style:italic}
.lead{font-size:var(--fs-lead);line-height:1.44;color:var(--ink-soft)}
.dim{color:var(--dim);font-size:var(--fs-meta)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- cabecalho ---------- */
.bar{position:sticky;top:0;z-index:50;background:rgba(246,234,230,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--max);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;line-height:1.05;flex:0 0 auto}
.brand span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.06em;color:var(--dim);text-transform:lowercase;margin-top:3px}
.nav{display:flex;gap:19px;flex-wrap:wrap}
.nav a{color:var(--dim);text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover{color:var(--wine)}
@media(max-width:720px){ .nav{display:none} }

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,74px) 0 clamp(26px,4vw,38px);border-bottom:1px solid var(--line)}
.hero h1{max-width:15ch}
.hero .lead{max-width:52ch;margin-top:20px}

/* ---------- busca e filtros ---------- */
.tools{border-bottom:1px solid var(--line);background:var(--bg2)}
.tools .in{max-width:var(--max);margin:0 auto;padding:16px var(--gut);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 260px;min-width:210px}
.search input{width:100%;background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;padding:12px 14px;color:var(--ink);font-size:15.5px;font-family:inherit}
.search input::placeholder{color:#9B7A7E}
.search input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(138,31,61,.14)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--line2);color:var(--dim);border-radius:100px;
  padding:7px 15px;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--wine);color:var(--wine)}

/* ---------- cartoes ---------- */
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  gap:clamp(24px,3vw,38px);padding:clamp(30px,5vw,52px) 0}
.post{text-decoration:none;color:inherit;display:block}
/* A MOLDURA DESLOCADA: bloco solido de vinho empurrado 10px atras da foto.
   Zero sombra, zero blur — a profundidade vem do deslocamento. */
.frame{position:relative;margin-bottom:19px}
.frame::after{content:"";position:absolute;inset:0;background:var(--wine-deep);
  transform:translate(var(--shift),var(--shift));z-index:0;transition:transform var(--dur)}
.frame .ph,.frame .hero-img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;
  object-fit:cover;background:var(--panel2);border:2px solid var(--wine-deep)}
.post:hover .frame::after{transform:translate(calc(var(--shift) + 3px),calc(var(--shift) + 3px))}
.post .from{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--dim);
  margin-bottom:8px}
.post h2{font-size:clamp(23px,2.4vw,27px);margin-bottom:9px}
.post:hover h2{color:var(--wine)}
.post p{color:var(--ink-soft);font-size:15.5px;line-height:1.52;margin-bottom:12px}
.meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--dim)}
.tag{font-family:var(--body);border:1px solid var(--line2);border-radius:100px;
  padding:3px 11px;font-size:11.5px;font-weight:500;color:var(--dim);text-decoration:none}
a.tag:hover{border-color:var(--wine);color:var(--wine)}
.empty{padding:56px 0;color:var(--dim);text-align:center}

/* ---------- paginacao ---------- */
.pag{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 0 64px;border-top:1px solid var(--line)}
.pag a{font-weight:600;text-decoration:none;padding:14px 0}
.pag .pg{font-family:var(--mono);font-size:13px;color:var(--dim)}

/* ---------- arquivo ---------- */
.mes{padding:26px 0;border-top:1px solid var(--line)}
.mes h3{margin-bottom:14px}
.lista{list-style:none;margin:0}
.lista li{display:flex;justify-content:space-between;gap:20px;padding:9px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.lista a{text-decoration:none;font-weight:500}
.lista a:hover{text-decoration:underline}
.lista .dim{font-family:var(--mono);white-space:nowrap;font-size:12px}

/* ---------- artigo ---------- */
.art{max-width:var(--read);margin:0 auto;padding:0 var(--gut)}
.art .top{padding:clamp(38px,6vw,64px) 0 0}
.pill{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--wine);border-bottom:2px solid var(--copper);padding-bottom:3px;margin-bottom:20px}
.art h1{margin-bottom:18px}
.art .sell{font-size:var(--fs-lead);line-height:1.44;color:var(--ink-soft);margin-bottom:20px}
.art .top .meta{padding-bottom:8px}
.frame.big{margin:clamp(26px,4vw,40px) 0 0}
.frame.big .hero-img{aspect-ratio:3/2}
.art section{padding:var(--step) 0;border-top:1px solid var(--line)}
.art section:first-of-type{border-top:0}
.art h2{margin-bottom:18px}
.mid{margin:26px 0;border:2px solid var(--wine-deep);width:100%}

/* listas */
ul{list-style:none;margin:16px 0}
ul li{position:relative;padding-left:24px;margin-bottom:11px}
ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;
  background:var(--copper)}
ol{list-style:none;counter-reset:s;margin:20px 0}
ol li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:20px}
ol li::before{content:counter(s);position:absolute;left:0;top:-1px;width:36px;height:36px;
  background:var(--wine);color:#FFF6F8;font-family:var(--display);font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center}

/* ---------- blocos ----------
   Ritmo travado: bloco -> 2 a 4 paragrafos de prosa limpa -> bloco.
   Dois blocos coloridos seguidos e onde a pagina vira folheto de farmacia. */
.card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line2);
  padding:22px 24px;margin:24px 0}
.card h4{color:var(--ink)}
.card.red{background:var(--wine-wash);border-color:#E3B9C3;border-left-color:var(--wine)}
.card.red h4{color:var(--wine)}
.card.green{background:var(--olive-wash);border-color:#D3D0BC;border-left-color:var(--olive)}
.card.green h4{color:var(--olive)}
.card.green li::before{background:var(--olive)}
/* O RECIBO. "The size of it" — n, duracao, tamanho do efeito, em monoespacada.
   Num nicho onde ninguem mostra a conta, esta e a defesa dela. */
.card.gold{background:var(--panel);border:1px dashed var(--line2);border-left:4px solid var(--gold)}
.card.gold h4{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.card.gold ul li,.card.gold p{font-family:var(--mono);font-size:13.5px;line-height:1.72;
  color:var(--ink-soft)}
.card.gold li::before{background:var(--gold);width:5px;height:5px}

/* O ADESIVO ROSA. A caixa de texto que ja e a marca dos Reels dela, importada
   pra pagina. Unico elemento girado do site inteiro — por isso o olho pega.
   Preto sobre rosa, jamais rosa sobre coisa nenhuma. */
.alert{background:var(--bubble);color:var(--bubble-ink);padding:26px 28px;margin:34px 0;
  transform:rotate(var(--tilt))}
.alert p{font-family:var(--display);font-size:clamp(20px,3.4vw,26px);line-height:1.28;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 48;margin:0}
.alert a{color:var(--bubble-ink)}

/* fonte externa: cor da fita da regata dela = "aqui esta o papel" */
.art section a[rel="noopener"]{color:var(--olive);text-decoration-color:#9FAE8A}

/* ---------- fim do artigo ---------- */
.tail{border-top:1px solid var(--line)}
.tail h3{margin-bottom:20px}
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.more .post h2{font-size:19px}
.more .post p{font-size:14px;margin-bottom:0}
.more .from,.more .meta{display:none}
.bonus{background:var(--panel);border:1px solid var(--line2);padding:32px 26px;
  text-align:center;margin-bottom:40px}
.bonus h2{font-size:clamp(24px,4vw,32px);margin-bottom:12px}
.bonus p{color:var(--ink-soft);max-width:32rem;margin:0 auto 22px}
.btn{display:inline-block;background:var(--wine);color:#FFF6F8;padding:15px 30px;
  font-size:16px;font-weight:600;text-decoration:none}
.btn:hover{background:var(--wine-deep)}

/* ---------- rodape ---------- */
.foot{background:var(--wine-deep);color:#E8CDD5;margin-top:clamp(40px,6vw,72px);
  padding:clamp(38px,5vw,58px) 0}
.foot .in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);text-align:center}
.foot .wm{font-family:var(--display);font-weight:700;font-size:30px;color:#FFF6F8;
  letter-spacing:-.02em;margin-bottom:4px}
.foot .give{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:#C79AA6;margin-bottom:26px}
.fnav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.fnav a{color:#E8CDD5;font-size:14px;text-decoration:none}
.fnav a:hover{color:#fff;text-decoration:underline}
.foot .legal{font-size:12.5px;line-height:1.62;color:#B78D99;max-width:60ch;
  margin:0 auto 12px}

@media(max-width:560px){
  .frame::after{transform:translate(7px,7px)}
  .alert{padding:22px 20px}
}

/* ---------- banner de guias na home ---------- */
.guides-banner{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0 -6px;}
@media(max-width:640px){ .guides-banner{grid-template-columns:1fr;} }
.guide-card{display:flex; gap:14px; align-items:center; background:var(--panel);
  border:1px solid var(--line2); border-radius:10px; padding:12px; text-decoration:none; color:inherit;}
.guide-card:hover{border-color:var(--wine);}
.guide-card img{width:64px; height:80px; object-fit:cover; border-radius:6px; flex:none;}
.guide-card .tag{margin:0 0 3px;}
.guide-card h3{font-size:17px; margin-bottom:2px;}
.guide-card p{font-size:13px; color:var(--ink-soft); margin:0;}

/* ---------- PAGINA DE CAPTURA (lead gate) ----------
   Mesma ideia estrutural de um link-in-bio de oferta gratuita: hero com
   titulo + form + imagem do produto, beneficios, segundo form no fim. */
.lg-hero{background:var(--bg2); border-bottom:1px solid var(--line);
  padding:clamp(32px,5vw,56px) 0;}
.lg-hero .in{max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center;}
@media(max-width:760px){ .lg-hero .in{grid-template-columns:1fr;} }
.lg-hero h1{margin-bottom:14px;}
.lg-hero .dek{font-size:var(--fs-lead); line-height:1.44; color:var(--ink-soft); margin-bottom:22px;}
.lg-hero .frame{margin-bottom:0;}
.lg-hero .frame .hero-img{aspect-ratio:4/5;}

.lg-form{display:flex; flex-direction:column; gap:10px; max-width:420px;}
.lg-form input{background:var(--panel); border:1px solid var(--line2); border-radius:8px;
  padding:13px 15px; color:var(--ink); font-size:15px; font-family:inherit;}
.lg-form input:focus{outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(138,31,61,.14);}
.lg-form .lg-erro{color:var(--wine); font-size:13px;}
.lg-form .lg-fine{font-size:12.5px; color:var(--dim);}
.lg-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden;}

.lg-benefits{list-style:none; margin:20px 0; padding:0;}
.lg-benefits li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:16px; line-height:1.5;}
.lg-benefits li::before{content:"✓"; flex:none; width:24px; height:24px; border-radius:100px;
  background:var(--olive-wash); color:var(--olive); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:2px;}

.lg-founding{background:var(--wine-wash); border:1px solid #E3B9C3; border-radius:10px;
  padding:16px 20px; margin:26px 0; font-size:14.5px; color:var(--ink-soft);}
.lg-founding b{color:var(--wine);}

/* ---------- impressao ---------- */
@media print{
  @page{size:Letter;margin:15mm}
  body{background:#fff;font-size:11pt}
  .bar,.tools,.pag,.more,.bonus,.fnav,.skip{display:none!important}
  .art{max-width:none;padding:0}
  .frame::after{display:none}
  .alert{transform:none;border:2px solid var(--wine)}
  .card,.alert,.frame{break-inside:avoid}
  .foot{background:#fff;color:#4A0F22;border-top:1px solid #ccc}
  .foot .wm,.foot .legal,.foot .give{color:#4A0F22}
}