/* Página de vendas · Confecção Individual Feline. Mesmo visual do pitch (apresentacao.carolinalore.com.br):
   preto quente, oxblood em bloco, marfim; Bodoni Moda nos títulos (opsz 18, peso 500), Inter Tight no corpo.
   Desenho chapado; volume só nas fotos. Pensada primeiro pro celular (o link chega pelo WhatsApp). */
:root{
  --noite-0:#0f0d0c; --noite-1:#161312; --noite-2:#1c1817; --noite-3:#221e1c;
  --oxblood:#4a1210; --oxblood-vivo:#b04a3f; --oxblood-claro:#d49a8f;
  --pedra:#6a6962; --pedra-clara:#a8a49a;
  --marfim-texto:#e4e1d9; --marfim-corpo:#c9c4ba; --marfim-numero:#efebe3;
  --papel:#e6e2d9; --tinta:#1a1614; --tinta-corpo:#2e2926; --tinta-apoio:#57534c;
  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --lado:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noite-0);scroll-behavior:smooth}
body{background:var(--noite-1);color:var(--marfim-corpo);font:300 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
ul,ol{list-style:none}

h1,h2,h3{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 18;color:var(--marfim-texto);letter-spacing:-.015em}
em{font-style:italic;color:var(--oxblood-claro)}
h1{font-size:clamp(44px,11vw,104px);line-height:1}
h1 em{display:block;font-size:1.45em;line-height:.95;letter-spacing:-.03em}
h2{font-size:clamp(32px,7.4vw,66px);line-height:1.08}
h3{font-size:clamp(24px,5.6vw,34px);line-height:1.15}
.eyebrow{font:500 13px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--pedra-clara)}
.corpo{font-size:clamp(18px,4.4vw,22px);color:var(--marfim-corpo);margin-top:18px}
.destaque{font:500 clamp(24px,5.6vw,38px)/1.25 var(--display);font-variation-settings:"opsz" 18;color:var(--marfim-texto);margin-top:24px}
.filete{display:flex;align-items:center;width:180px;margin:16px 0 22px}
.filete::before{content:"";width:10px;height:15px;border:1.5px solid var(--pedra-clara);border-radius:50%;flex:0 0 auto}
.filete::after{content:"";height:1px;flex:1;background:var(--pedra)}
.filete i{display:none}
.centro,.centro-txt{text-align:center}
.centro .filete,.hero .filete{margin-inline:auto;justify-content:center}

.botao{display:inline-block;margin-top:34px;background:var(--oxblood);border:1px solid var(--oxblood-vivo);color:var(--marfim-numero);text-decoration:none;font:600 15px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;padding:21px 40px 21px 46px;transition:background .2s ease}
.botao:hover{background:#5c1915}
.botao.grande{font-size:17px;padding:24px 52px 24px 58px}

.botao-claro{background:var(--marfim-numero);border-color:var(--marfim-numero);color:var(--oxblood);letter-spacing:.2em;padding:20px 26px 20px 30px;white-space:nowrap}
.botao-claro:hover{background:#fff}
.rachado-txt .botao{margin-top:28px}

/* barra fixa no celular: aparece depois da abertura e some no fechamento */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--lado) calc(12px + env(safe-area-inset-bottom));background:rgba(15,13,12,.96);border-top:1px solid rgba(176,74,63,.55);text-decoration:none;transform:translateY(110%);transition:transform .45s cubic-bezier(.16,.84,.44,1)}
.barra-fixa.mostra{transform:none}
.barra-fixa span{font:500 18px/1.1 var(--display);font-variation-settings:"opsz" 18;color:var(--marfim-texto)}
.barra-fixa b{background:var(--oxblood);border:1px solid var(--oxblood-vivo);color:var(--marfim-numero);font:600 13px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;padding:14px 18px 14px 22px;white-space:nowrap}
.rodape{padding-bottom:110px}

/* entrada suave ao rolar */
.r{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform 1s cubic-bezier(.16,.84,.44,1)}
.r.vis{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.r{opacity:1;transform:none;transition:none}}

.bloco{padding:88px var(--lado);max-width:1100px;margin:0 auto}
.bloco.centro .corpo,.bloco.centro .destaque{max-width:760px;margin-inline:auto}
.escuro2{max-width:none;background:var(--noite-2)}
.escuro2 > *{max-width:1100px;margin-inline:auto}

/* 1 · hero: no celular, foto inteira em cima e texto embaixo (sem cobrir o rosto); na tela larga, lado a lado */
.hero{position:relative;overflow:hidden;background:var(--noite-0)}
.hero picture{display:block;position:relative}
.hero-foto{width:100%;aspect-ratio:1300/1613;object-fit:cover;object-position:50% 30%;animation:aproxima 18s cubic-bezier(.2,.6,.3,1) both}
@keyframes aproxima{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1300/1613;background:linear-gradient(180deg,rgba(15,13,12,0) 62%,rgba(15,13,12,1) 99%);pointer-events:none}
.hero-txt{position:relative;z-index:1;width:100%;padding:0 var(--lado) 72px;margin-top:-90px;text-align:center}
.hero .eyebrow{color:var(--marfim-texto)}
.lead{margin:22px auto 0;max-width:520px;font:500 clamp(20px,5vw,26px)/1.35 var(--display);font-variation-settings:"opsz" 18;color:var(--marfim-texto)}

/* 2 · mármore rachado */
.rachado{background:var(--noite-0)}
.rachado-foto img{width:100%;height:auto}
.rachado-txt{padding:40px var(--lado) 88px;max-width:1100px;margin:0 auto}
.cinco{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cinco li{background:var(--noite-3);border:1px solid rgba(168,164,154,.25);color:var(--marfim-texto);font:500 19px/1 var(--display);font-variation-settings:"opsz" 18;padding:12px 16px 13px}
.causa{margin-top:28px;background:var(--oxblood);padding:24px 24px 26px;border-left:0}
.causa .eyebrow{color:var(--oxblood-claro)}
.causa-frase{margin-top:10px;font:500 clamp(26px,6vw,40px)/1.15 var(--display);font-variation-settings:"opsz" 18}

/* 3 · A e B / duas opções */
.duas{display:grid}
.lado{padding:64px var(--lado)}
.lado-a{background:var(--noite-3)}
.lado-b{background:var(--oxblood)}
.lado-b .eyebrow{color:var(--oxblood-claro)}
.letra{font:italic 400 120px/1 var(--display);color:var(--marfim-numero);margin:6px 0 20px}
.traco li{position:relative;padding-left:34px;font-size:clamp(17px,4.2vw,20px);line-height:1.5}
.traco li + li{margin-top:14px}
.traco li::before{content:"";position:absolute;left:0;top:.78em;width:20px;height:1px;background:var(--oxblood-claro)}
.lado-b .traco li{color:var(--marfim-texto)}
.lado-b .traco li::before{background:var(--marfim-corpo)}
.op{margin-top:18px;font-size:clamp(18px,4.4vw,22px)}
.op-b{font:500 clamp(24px,5.6vw,34px)/1.25 var(--display);font-variation-settings:"opsz" 18;color:var(--marfim-texto)}
.op-pergunta{margin-top:18px;font:500 clamp(20px,5vw,26px)/1.3 var(--display);font-variation-settings:"opsz" 18}

/* papel: mármore, quadro */
.papel{background:var(--papel);color:var(--tinta-corpo)}
.papel h2{color:var(--tinta)}
.papel em{color:var(--oxblood)}
.papel .eyebrow{color:var(--tinta-apoio)}
.papel .corpo{color:var(--tinta-corpo)}
.marmore,.quadro{display:grid;padding:40px var(--lado) 80px;gap:10px;align-items:center}
.marmore-arte,.quadro-arte{position:relative;max-width:560px;margin:0 auto;width:100%}
.marmore-arte img,.quadro-arte img{mix-blend-mode:multiply;width:100%}
.marmore-arte .m2{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease 1s}
.marmore-arte.vis .m2{opacity:1}
.marmore-arte.vis .m1{opacity:0;transition:opacity 2s ease 1s}

/* cenas com a Carol */
.cena{position:relative;background:var(--noite-0)}
.cena-foto{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:70% 40%}
.cena-txt{padding:36px var(--lado) 80px;max-width:1100px;margin:0 auto}
.cena-txt .destaque:first-child{margin-top:0}
.cena-txt .eyebrow{margin-top:26px}
.cena-dir .cena-foto{object-position:22% 40%}

/* 6 · gente e casos */
.gente{display:grid;gap:44px;margin:44px 0 16px}
.pessoa h3{margin-top:20px}
.pessoa p{margin-top:8px}
.pessoa-foto{overflow:hidden;aspect-ratio:4/5}
.pessoa-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.print{background:#fff;padding:14px}
.print img{width:100%}
.casos{display:grid;gap:52px;margin-top:44px}
.par{display:grid;gap:8px}
.caso-foto{overflow:hidden;aspect-ratio:16/10}
.caso-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.numero{margin-top:20px;font:italic 400 64px/1 var(--display);color:var(--marfim-numero)}
.caso h3{margin-top:8px;font-style:italic;color:var(--oxblood-claro)}
.caso p:last-child{margin-top:8px}

/* 7 · oferta */
.oferta{background:var(--noite-0);padding:88px var(--lado)}
.oferta > *{max-width:1000px;margin-inline:auto}
.oferta-topo{display:grid;gap:10px;align-items:center}
.noventa{font:italic 400 clamp(150px,40vw,300px)/.85 var(--display);color:var(--marfim-numero);letter-spacing:-.05em}
.etapas{margin-top:56px;border-top:1px solid var(--pedra)}
.etapas > li{display:grid;grid-template-columns:62px 1fr;gap:6px;padding:34px 0;border-bottom:1px solid rgba(106,105,98,.55)}
.etapas .n{font:italic 400 40px/1 var(--display);color:var(--oxblood-claro)}
.etapas h3{margin-bottom:12px}
.etapas p + p{margin-top:12px}
.fecho-etapa{font:500 21px/1.35 var(--display);font-variation-settings:"opsz" 18}
.itens{margin-top:16px;border-top:1px solid rgba(106,105,98,.55)}
.itens li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid rgba(106,105,98,.4);color:var(--marfim-texto)}
.itens li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:13px;border:1.5px solid var(--oxblood-claro);border-radius:50%}

/* 8 · a.C. / d.C. */
.ac{display:flex;align-items:center;justify-content:center;gap:26px;font:400 clamp(64px,18vw,150px)/1 var(--display);color:var(--marfim-texto)}
.ac i{width:1px;align-self:stretch;background:var(--pedra-clara)}
.hist{display:grid;gap:56px;margin-top:56px}
.hist h3{margin-bottom:18px}
.hist-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.hist-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* 10 · passos */
.passos{display:grid;gap:34px;margin-top:52px;border-top:1px solid var(--pedra);padding-top:34px}
.passos .n{font:italic 400 44px/1 var(--display);color:var(--oxblood-claro)}
.passos h3{margin:12px 0 8px}

/* 11 · final */
.final{position:relative;background:var(--noite-0)}
.final-foto{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:61% 40%}
.final-txt{padding:40px var(--lado) 90px;text-align:center}
.final-txt .eyebrow{max-width:520px;margin:0 auto 22px;line-height:1.6}
.selo{width:84px;margin:44px auto 0}
.rodape{padding:28px var(--lado) 40px;text-align:center;font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--pedra);background:var(--noite-0)}

/* ---------- telas largas ---------- */
@media (min-width:900px){
  :root{--lado:64px}
  body{font-size:19px}
  .hero{min-height:100vh;display:flex;align-items:center}
  .hero picture{position:absolute;inset:0}
  .hero-foto{height:100%;aspect-ratio:auto;object-position:60% 40%}
  .hero::after{inset:0;aspect-ratio:auto;background:linear-gradient(90deg,rgba(15,13,12,.92) 0%,rgba(15,13,12,.55) 42%,rgba(15,13,12,0) 62%)}
  .hero-txt{text-align:left;max-width:760px;padding:0 0 0 7vw;margin-top:0}
  .hero .filete{margin-inline:0;justify-content:flex-start}
  .lead{margin-left:0}
  .bloco{padding:130px var(--lado)}
  .rachado{display:grid;grid-template-columns:1.25fr 1fr;align-items:center}
  .rachado-txt{padding:60px var(--lado) 60px 20px}
  .duas{grid-template-columns:1fr 1fr}
  .lado{padding:110px 70px}
  .marmore,.quadro{grid-template-columns:1fr 1fr;padding:90px var(--lado);gap:60px}
  .quadro{grid-template-columns:1fr 1fr}
  .quadro-arte{order:2}
  .cena{min-height:88vh;display:flex;align-items:center}
  .cena-foto{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 40%}
  .cena-txt{position:relative;width:100%;padding:0 var(--lado)}
  .cena-txt > *{max-width:560px}
  .cena-dir .cena-foto{object-position:50% 40%}
  .cena-dir .cena-txt > *{margin-left:auto}
  .gente{grid-template-columns:repeat(3,1fr);gap:40px}
  .pessoa .print{min-height:0}
  .casos{grid-template-columns:repeat(3,1fr);gap:40px}
  .oferta{padding:140px var(--lado)}
  .oferta-topo{grid-template-columns:auto 1fr;gap:60px}
  .etapas > li{grid-template-columns:110px 1fr;padding:44px 0}
  .etapas .n{font-size:56px}
  .hist{grid-template-columns:1fr 1fr;gap:70px}
  .passos{grid-template-columns:repeat(3,1fr);gap:48px}
  .final{min-height:100vh;display:flex;align-items:center}
  .final-foto{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 50%}
  .final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,12,.9) 0%,rgba(15,13,12,.5) 45%,rgba(15,13,12,0) 60%)}
  .final-txt{position:relative;z-index:1;text-align:left;max-width:680px;padding:0 0 0 7vw}
  .final-txt .eyebrow{margin-left:0}
  .selo{margin-left:0}
  .barra-fixa{display:none}
  .rodape{padding-bottom:40px}
}