/* ============================================================
   PRECIFICA BEAUTY — Página 2 (problema → solução)
   Carrega depois de styles.css: só acrescenta as seções novas
   e troca as imagens do topo. Mesmos tokens, mesmo ritmo.
   ============================================================ */

:root{
  --perda:#A3412F;          /* vermelho terroso: prejuízo, sem gritar */
  --perda-claro:#E9B9A9;
}

/* ---------- Hero: mesma imagem da página original (styles.css) ---------- */

/* ---------- Prejuízo: imagem + conta que termina negativa ---------- */
.cena{
  margin-top:clamp(32px,3.6vw,56px);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-2);
}
.cena img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center 60%}
.flow__v--menos{color:var(--brown-500)}
.flow__v--neg{color:var(--perda)}
.flow--prejuizo .flow__step--end .flow__v{color:var(--perda)}
.flow--prejuizo .flow__bar::before{background:linear-gradient(90deg,var(--perda),var(--brown-400))}
@media (max-width:767.98px){
  .flow--prejuizo .flow__step--end.trilha-passou{background:linear-gradient(145deg,#5A2A1E,#2E1A14)}
  .flow--prejuizo .flow__step--end.trilha-passou .flow__v{color:var(--perda-claro)}
}

/* ---------- Sinais ---------- */
.section--sinais{background:var(--nude-0)}
.sinais{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);
  margin-top:clamp(40px,4.5vw,68px);
}
.sinal{
  display:flex;align-items:flex-start;gap:16px;
  padding:clamp(20px,1.9vw,28px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .4s var(--spring);
}
.sinal:hover{transform:translateY(-3px)}
.sinal__n{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(163,65,47,.35);color:var(--perda);
  font-size:.75rem;font-weight:500;
}
.sinal p{
  font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.5;
  letter-spacing:-.008em;color:var(--ink-2);padding-top:5px;
}
.sinal b{font-weight:500;color:var(--ink)}

/* ---------- Pergunta ---------- */
.section--pergunta{background:var(--nude-1);border-block:1px solid var(--line-2)}
.pergunta{max-width:760px;margin-inline:auto;text-align:center;display:grid;gap:clamp(18px,1.8vw,26px)}
.pergunta__txt{
  font-size:clamp(1.0625rem,1.35vw,1.375rem);line-height:1.55;
  letter-spacing:-.011em;color:var(--ink-2);text-wrap:pretty;
}
.pergunta__txt b{font-weight:500;color:var(--ink)}
.pergunta__sim{font-weight:500;font-size:clamp(1.125rem,1.5vw,1.5rem);letter-spacing:-.024em;color:var(--brown-600)}

/* ---------- 3 passos ---------- */
.section--passos{background:var(--nude-0)}

/* ---------- Ganhos ---------- */
.section--ganhos{background:var(--nude-1);border-top:1px solid var(--line-2)}
.ganhos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(40px,4.5vw,68px);
}
.ganho__p{margin-top:12px;font-size:.9375rem;line-height:1.55;color:var(--muted);letter-spacing:-.004em}

/* ---------- É pra você que ---------- */
.pravoce{
  margin-top:clamp(40px,4.5vw,72px);
  border-radius:5px;
  padding:clamp(32px,4vw,60px) clamp(24px,4vw,64px);
  background:var(--grad-brown-dark);color:#fff;
}
.pravoce__t{font-weight:500;font-size:clamp(1.375rem,2.2vw,2rem);letter-spacing:-.028em;text-align:center}
.pravoce__l{
  margin:clamp(22px,2.4vw,34px) auto 0;max-width:720px;
  display:grid;gap:12px;
}
.pravoce__l li{
  position:relative;padding:14px 18px 14px 50px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.45;color:rgba(250,247,242,.9);
}
.pravoce__l li::before{
  content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;
  background:url('assets/check.svg') center/contain no-repeat;
}
.pravoce__l em{font-style:normal;font-weight:500;color:#fff}

/* ---------- Oferta: texto de apoio no escuro ---------- */
.lead--onDark{color:rgba(250,247,242,.72);max-width:52ch}

/* ---------- Como recebe ---------- */
.section--entrega{background:var(--nude-0)}
.entrega{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(40px,4.5vw,68px);
}
.entrega__passo{
  padding:clamp(24px,2.2vw,34px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
}
.entrega__n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--brown-800);color:#fff;font-size:.875rem;font-weight:500;
}
.entrega__t{margin-top:18px;font-weight:500;font-size:clamp(1.0625rem,1.25vw,1.25rem);letter-spacing:-.022em}
.entrega__p{margin-top:8px;font-size:.9375rem;line-height:1.55;color:var(--muted)}

/* ---------- Duas opções ---------- */
.section--opcoes{background:var(--nude-1);border-block:1px solid var(--line-2)}
.opcoes{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(40px,4.5vw,68px);
}
.opcao{
  padding:clamp(24px,2.6vw,40px);
  border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line);
}
.opcao p{margin-top:16px;font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.5;letter-spacing:-.012em;color:var(--muted)}
.opcao__tag{
  display:inline-block;padding:5px 10px;border-radius:5px;
  border:1px solid var(--muted-2);color:var(--muted);
  font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.opcao--certa{background:var(--grad-brown-dark);border-color:transparent}
.opcao--certa p{color:rgba(250,247,242,.9)}
.opcao--certa .opcao__tag{border-color:rgba(255,255,255,.5);color:#fff}
.opcoes__cta{max-width:576px;margin:clamp(8px,1vw,14px) auto 0;text-align:center}
.opcoes__pe{margin-top:14px;font-size:.875rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.section--faq{background:var(--nude-0)}
.faq{max-width:820px;margin:clamp(32px,3.6vw,56px) auto 0;display:grid;gap:10px}
.faq__item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  font-weight:500;font-size:clamp(1rem,1.15vw,1.125rem);letter-spacing:-.016em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:9px;height:9px;margin-top:-4px;
  border-right:1.6px solid var(--brown-500);border-bottom:1.6px solid var(--brown-500);
  transform:rotate(45deg);transition:transform .35s var(--spring);
}
.faq__item[open] summary::after{transform:rotate(225deg);margin-top:4px}
.faq__item p{padding:0 22px 20px;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.faq__item summary:focus-visible{outline:2px solid var(--brown-400);outline-offset:-2px;border-radius:var(--r-md)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1023.98px){
  .sinais{grid-template-columns:1fr 1fr}
  .ganhos{grid-template-columns:1fr 1fr}
}

@media (max-width:767.98px){
  .cena{margin-top:28px;border-radius:var(--r-md)}
  .cena img{aspect-ratio:3/4}
  .sinais,.ganhos,.entrega,.opcoes{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .sinal{padding:18px;gap:14px}
  .pravoce{margin-top:32px;padding:28px 16px}
  .pravoce__l li{padding:13px 14px 13px 44px;font-size:.9375rem}
  .pravoce__l li::before{left:14px;width:18px;height:18px}
  .entrega__passo,.opcao{padding:22px}
  .faq{margin-top:28px}
  .faq__item summary{padding:16px 18px;font-size:1rem}
  .faq__item p{padding:0 18px 18px}
}

/* ---------- Por que a gente pode resolver: foto maior no desktop ----------
   Coluna da foto do mesmo tamanho da do texto e na proporção natural do
   retrato (1122×1402): nada é cortado nem esticado. Usa o arquivo local em
   resolução cheia para não perder nitidez no tamanho maior. */
@media (min-width:1024px){
  .autora{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    max-width:1200px;
  }
  .autora__foto{display:block}
  .autora__img{
    height:auto;min-height:0;
    aspect-ratio:1122/1402;
    background-image:url('assets/biteti.webp');
    background-position:center;
    background-size:cover;
  }
}

/* ---------- Quebras de linha no celular ----------
   Títulos e frases curtas: linhas equilibradas (sem uma palavra sobrando
   embaixo). Parágrafos longos: "pretty", que evita a última palavra sozinha. */
@media (max-width:767.98px){
  .h2,.lead,.kicker,.statement p,.pergunta__sim,.pravoce__t,
  .qcard__quote,.entrega__t,.entrega__p,.faq__item summary,
  .opcoes__pe,.ncard__t,.cta span{text-wrap:balance}
  .sec__lead p,.qcard__answer,.note p,.sinal p,.pergunta__txt,.ganho__p,
  .pravoce__l li,.opcao p,.faq__item p,.resultado__hist,.autora__corpo p,
  .garantia__p,.offer__sub{text-wrap:pretty}
}
@media (max-width:767.98px){
  /* a frase em destaque vira bloco próprio para equilibrar as linhas dela */
  .statement em{display:block;text-wrap:balance}
  .pravoce__l li{text-wrap:balance}
}

/* ---------- Hero no mobile/tablet: degradê do fundo sólido → transparente ----------
   Mesma imagem da página original. O recorte mostra um pouco mais de creme
   acima dos aparelhos (39/52), só o suficiente para o degradê e uma camada na cor exata do
   fundo do hero (#FCF2EB) começa sólida no topo e some para baixo, antes de
   chegar aos aparelhos: não há emenda entre o texto e a imagem. */
@media (max-width:1023.98px){
  .hero{--hero-bg:#FCF2EB;background:var(--hero-bg)}
  .hero__pic{position:relative;aspect-ratio:39/52;margin-top:10px}
  .hero__pic::before{
    content:"";position:absolute;left:0;right:0;top:-1px;
    height:8%;
    pointer-events:none;
    background:linear-gradient(180deg,
      var(--hero-bg) 0%,
      rgba(252,242,235,.94) 14%,
      rgba(252,242,235,.78) 30%,
      rgba(252,242,235,.52) 50%,
      rgba(252,242,235,.24) 72%,
      rgba(252,242,235,.06) 90%,
      rgba(252,242,235,0) 100%);
  }
}

/* ---------- Ajustes de texto ----------
   Frase em destaque do bloco escuro: linha própria. Cabe → uma linha só;
   não cabe → duas linhas equilibradas (nunca um pedaço solto embaixo). */
.statement em{display:block;text-wrap:balance}

/* Texto da dor: um parágrafo só, em 3 linhas equilibradas no desktop */
.sec__lead--junto{max-width:100%}
/* o texto inteiro mede ~111em: com 40em por linha, o balance fecha em 3 linhas */
.sec__lead--junto p{max-width:40em;margin-inline:auto;text-wrap:balance}
@media (max-width:767.98px){
  .sec__lead--junto p{text-wrap:pretty}
}

/* "Eu sei como é. Trabalhar muito…": um parágrafo corrido, sem quebra forçada.
   O destaque volta a ser inline; as linhas se equilibram sozinhas. */
.statement--linha em{display:inline}
.statement--linha p{text-wrap:balance}

/* Botão das "duas opções": sem sombra e com borda 100% arredondada (pílula).
   Só neste botão — o da oferta continua como estava. */
.opcoes__cta .cta,
.opcoes__cta .cta:hover{
  border-radius:var(--r-pill);
  box-shadow:none;
}

/* ---------- Hero: largura do texto de apoio ----------
   Desktop: título e texto ocupam a mesma largura da coluna, com as bordas
   direitas alinhadas (sem o título encolher e o texto passar dele).
   Mobile: o texto usa a largura toda da tela, sem equilibrar (que estreitava). */
@media (min-width:1024px){
  .hero__copy #hero-title{text-wrap:pretty}
  .hero__copy .lead{max-width:none;text-wrap:pretty}
}
@media (max-width:1023.98px){
  .hero__copy .lead{text-wrap:pretty;max-width:none}
}
/* A coluna de texto do hero ficava estreita (~418px em 1440) porque herdava a
   margem lateral grande do resto da página, e o título caía em 4 linhas.
   No hero a margem é própria e a coluna vai até 48% da largura — os aparelhos
   da imagem começam em 51%, então o texto nunca encosta neles. */
@media (min-width:1024px){
  .hero{--hero-g:var(--gutter)}
  .hero .shell{padding-inline:var(--hero-g)}
  .hero__copy{max-width:min(640px, calc(48vw - var(--hero-g)))}
}

/* ---------- Títulos de uma linha só no desktop ----------
   "6 sinais…" e "3 passos…" medem ~22em: no desktop ficam numa linha, e a
   fonte só diminui se a largura útil não comportar (nunca transborda).
   No celular quebram em linhas equilibradas. */
@media (min-width:1024px){
  .h2--linha{
    white-space:nowrap;
    font-size:min(clamp(1.95rem,3.1vw,3.35rem), calc((100vw - 2 * var(--gutter)) / 23.5));
  }
}

/* ---------- Etiquetas dos cards "Por que ela não percebe" / "O custo…" ----------
   Sem borda, um pouco maiores, coladas no canto de cima. */
.notes .note__tag{
  border:0;padding:0;border-radius:0;
  margin-bottom:10px;
  font-size:.75rem;letter-spacing:.12em;
  color:var(--brown-500);
}

/* ---------- "É pra você que": cantos mais arredondados ---------- */
.pravoce{border-radius:28px}
.pravoce__l li{border-radius:16px}
@media (max-width:767.98px){
  .pravoce{border-radius:22px}
  .pravoce__l li{border-radius:14px}
}

/* ============================================================
   MARGENS LATERAIS DA PÁGINA 2
   Desktop (≥1440px): 320px em todas as seções, do topo ao rodapé.
   Notebook/tablet seguem o styles.css. Mobile: 1.35em.
   ============================================================ */
@media (min-width:1440px){
  :root{--gutter:320px}
  /* topo: mesma margem; a coluna vai até 50% (os aparelhos começam em 51%)
     e o título acompanha essa coluna mais estreita */
  .hero{--hero-g:320px}
  .hero__copy{max-width:calc(50vw - 320px)}
  .hero__copy #hero-title{font-size:clamp(2.125rem,2.6vw,3.375rem)}
}
@media (max-width:767.98px){
  :root{--gutter:1.35em}
}

/* produto em 1440–1679: com 320px de margem a área útil fica em ~800px;
   aparelho e rótulos encolhem um pouco para os rótulos não passarem da margem */
@media (min-width:1440px) and (max-width:1679.98px){
  .showcase{gap:22px}
  .phone--lg{--pw:300px}
  .orbit--left .orbit__item:nth-child(1),
  .orbit--left .orbit__item:nth-child(3){transform:translateX(-18px)}
  .orbit--right .orbit__item:nth-child(1),
  .orbit--right .orbit__item:nth-child(4){transform:translateX(18px)}
  .orbit--left .orbit__item:nth-child(1):hover,
  .orbit--left .orbit__item:nth-child(3):hover{transform:translateX(-18px) translateY(-2px)}
  .orbit--right .orbit__item:nth-child(1):hover,
  .orbit--right .orbit__item:nth-child(4):hover{transform:translateX(18px) translateY(-2px)}
}

/* Desktop: mesmo respiro curto entre o texto de apoio e os blocos que o
   styles.css já usa em .cards3/.flow/.grid6 (o padrão de 40–68px sobrava) */
@media (min-width:1024px){
  .sinais,.ganhos,.entrega,.opcoes{margin-top:clamp(24px,2.2vw,38px)}
}

/* Resultados: valor e "faturados" sempre na mesma linha */
.resultado__valor{white-space:nowrap}

/* "Opção 1" / "Opção 2": sem a borda em volta, grandes, no topo do card */
.opcao__tag{
  display:block;border:0;padding:0;border-radius:0;
  font-size:clamp(1.375rem,1.8vw,1.75rem);font-weight:500;
  letter-spacing:-.026em;text-transform:none;line-height:1.1;
  color:var(--ink);
}
.opcao--certa .opcao__tag{color:#fff}
.opcao p{margin-top:12px}

/* ---------- 6 sinais: card com imagem em cima ----------
   Imagem recuada dentro do card, com cantos arredondados e o selo
   "Sinal 0X" no canto superior direito; o texto vem logo abaixo. */
.sinal{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:8px;
  border-radius:20px;
}
.sinal__fig{
  position:relative;margin:0;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#8A6A4F,#3E2D22);
  aspect-ratio:16/9;
}
.sinal__fig img{width:100%;height:100%;object-fit:cover;display:block}
.sinal__selo{
  position:absolute;top:0;right:0;
  padding:7px 12px;
  border-bottom-left-radius:12px;
  background:var(--white);color:var(--perda);
  font-size:.75rem;font-weight:500;letter-spacing:-.004em;
}
.sinal p{
  padding:clamp(16px,1.5vw,22px) clamp(12px,1.1vw,16px) clamp(14px,1.3vw,18px);
}
@media (max-width:767.98px){
  .sinal{padding:7px;border-radius:18px}
  .sinal__fig{border-radius:12px}
  .sinal p{padding:14px 10px 12px}
}

/* cards "Com o Precifica você vai": o destaque marrom do scroll (app.js)
   também clareia o texto de apoio, que antes ficava apagado no fundo escuro */
.ganho__p{transition:color .6s var(--spring)}
.ncard.is-destaque .ganho__p{color:rgba(250,247,242,.8)}