/* Lebbe | Proposta LPA — estilos */

/* ---------- Fontes (hospedadas localmente) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bg:#510734;
  --bg-dark:#440529;
  --card:#5A0B3B;
  --accent:#F2884B;
  --text:#FFFFFF;
  --muted:#F3DCE7;
  --grad:linear-gradient(140deg,#E0663F 0%,#C2405A 50%,#8E2A68 100%);
  --pad-x:clamp(20px,5.2vw,64px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--text);font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--text)}
a:hover{color:var(--accent)}
a img{transition:transform .2s}
a:hover img{transform:scale(1.02)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
h1,h2,h3,p{margin:0}
@media (prefers-reduced-motion:reduce){a img{transition:none}a:hover img{transform:none}}

.page{max-width:1240px;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}

.eyebrow{font-size:clamp(13px,1.3vw,16px);font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:840px;overflow:hidden}
.hero__img{position:absolute;top:0;right:0;width:79%;height:100%;object-fit:cover;object-position:70% 50%}
.hero__fade-x{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 30%,rgba(81,7,52,.72) 52%,rgba(81,7,52,.2) 78%,rgba(81,7,52,.35) 100%)}
.hero__fade-y{position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(180deg,rgba(81,7,52,0) 0%,var(--bg) 100%)}
.hero__inner{position:relative;min-height:840px;padding:56px var(--pad-x) 72px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.hero__top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero__logo{height:64px;width:auto}
.hero__for{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.hero__for-label{font-size:14px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
.hero__for-name{font-size:18px;font-weight:500}
.hero__copy{display:flex;flex-direction:column;gap:28px;max-width:700px}
.hero h1{font-size:clamp(40px,6.3vw,78px);font-weight:700;line-height:1.04;letter-spacing:-.025em}
.hero h1 span{color:var(--accent)}
.hero__lead{font-size:clamp(17px,1.8vw,22px);font-weight:300;line-height:1.55;color:var(--muted);max-width:600px}

.stripe{height:10px;background:linear-gradient(90deg,#E0663F 0%,#C2405A 50%,#8E2A68 100%)}

/* ---------- Sobre ---------- */
.about{padding:80px var(--pad-x) 40px;display:flex;flex-direction:column;gap:48px}
.about__row{display:flex;gap:64px;align-items:flex-start}
.about h2{flex:0 0 420px;font-size:clamp(32px,3.6vw,44px);font-weight:700;line-height:1.12;letter-spacing:-1px}
.about h2 span{color:var(--accent)}
.about__text{font-size:clamp(17px,1.6vw,20px);font-weight:300;line-height:1.65;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.stat{border-top:3px solid var(--accent);padding-top:20px;display:flex;flex-direction:column;gap:6px}
.stat__num{font-size:clamp(44px,5.2vw,64px);font-weight:700;line-height:1;letter-spacing:-2px}
.stat__label{font-size:16px;color:var(--muted)}

/* ---------- Serviços ---------- */
.services{padding:40px var(--pad-x) 72px;display:flex;flex-direction:column;gap:22px}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.pill{border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:12px 24px;font-size:clamp(15px,1.5vw,18px);font-weight:500}
.pill--hot{border:0;padding:13px 25px;font-weight:600;background:linear-gradient(90deg,#E0663F 0%,#C2405A 100%)}
.pill--hot2{border:0;padding:13px 25px;font-weight:600;background:linear-gradient(90deg,#C2405A 0%,#8E2A68 100%)}

/* ---------- Cases ---------- */
.cases{background:var(--bg-dark);padding:80px var(--pad-x) 88px;display:flex;flex-direction:column;gap:56px}
.cases__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cases__title{display:flex;flex-direction:column;gap:14px}
.cases h2{font-size:clamp(36px,4.5vw,56px);font-weight:700;line-height:1.05;letter-spacing:-1.5px}
.cases__note{max-width:380px;font-size:16px;line-height:1.6;color:var(--muted);text-align:right}

.case{display:flex;gap:32px;align-items:stretch;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.15)}
.case__info{flex:0 0 372px;display:flex;flex-direction:column;gap:16px}
.logo-box{background:#FFFFFF;border-radius:16px;display:flex;align-items:center;justify-content:center}
.logo-box img{object-fit:contain;width:auto}
.case .logo-box{width:210px;height:104px}
.case .logo-box img{max-width:170px;max-height:76px}
.case__sector{font-size:14px;color:var(--muted)}
.case__label{font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-top:8px}
.case h3{font-size:clamp(21px,2vw,25px);font-weight:700;line-height:1.3}
.case__action{font-size:17px;font-weight:300;line-height:1.6;color:var(--muted)}
.case__posts{display:flex;gap:16px}

.post{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.case .post{width:172px}
.post img{width:100%;object-fit:cover;border-radius:16px}
.case .post img{aspect-ratio:172/306}
.post__handle{font-size:14px;font-weight:600}
.post__metric{font-size:13px;color:var(--muted)}

.result{flex:1 1 auto;border-radius:22px;padding:32px 30px;background:var(--grad);display:flex;flex-direction:column;gap:10px}
.result__label{font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.result__num{font-size:clamp(56px,6.6vw,82px);font-weight:800;line-height:1;letter-spacing:-3px;margin-top:16px}
.result__desc{font-size:20px;line-height:1.4}
.result__extra{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.4);font-size:15px;line-height:1.6}

.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mini{background:var(--card);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px}
.mini .logo-box{height:92px;border-radius:14px}
.mini .logo-box img{max-width:170px;max-height:70px}
.mini__copy{display:flex;flex-direction:column;gap:6px}
.mini h3{font-size:22px;font-weight:700;line-height:1.25}
.mini__text{font-size:15px;font-weight:300;line-height:1.55;color:var(--muted)}
.mini__posts{display:flex;gap:12px}
.mini .post{flex:1 1 0;min-width:0;gap:6px}
.mini .post img{height:250px;border-radius:12px}
.mini .result{flex:0 0 auto;margin-top:auto;border-radius:16px;padding:22px;gap:6px}
.mini .result__label{font-size:13px}
.mini .result__num{font-size:56px;letter-spacing:-2px;margin-top:0}
.mini .result__desc{font-size:15px;line-height:1.45}

/* ---------- Clientes ---------- */
.clients{padding:88px var(--pad-x) 80px;display:flex;flex-direction:column;gap:36px}
.clients__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.clients__title{display:flex;flex-direction:column;gap:14px}
.clients h2{font-size:clamp(32px,3.9vw,48px);font-weight:700;line-height:1.1;letter-spacing:-1px}
.clients__meta{font-size:16px;color:var(--muted)}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.logos .logo-box{height:120px;border-radius:14px;padding:12px}
.logos .logo-box img{max-width:150px;max-height:84px}

/* ---------- Rodapé ---------- */
.footer{margin-top:auto;background:linear-gradient(120deg,#E0663F 0%,#C2405A 45%,#8E2A68 100%);padding:64px var(--pad-x) 60px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.footer__cta{display:flex;flex-direction:column;gap:18px;max-width:620px}
.footer__title{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.1;letter-spacing:-1px}
.footer__sub{font-size:clamp(20px,2.1vw,26px);line-height:1.3}
.footer__brands{display:flex;align-items:center;gap:20px;margin-top:6px;flex-wrap:wrap}
.footer__lebbe{height:56px;width:auto}
.footer__partners{background:#FFFFFF;border-radius:12px;padding:10px 16px;display:flex;align-items:center}
.footer__partners img{height:40px;width:auto}
.contact{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;font-style:normal}
.contact__name{font-size:22px;font-weight:700}
.contact__role{font-size:15px}
.contact a{font-size:17px;font-weight:500;text-decoration:none}
.contact a:hover{color:#FFFFFF;text-decoration:underline}
.whats{margin-top:10px;background:#FFFFFF;color:#1C1C1C !important;border-radius:999px;padding:10px 22px 10px 12px;display:flex;align-items:center;gap:12px;text-decoration:none !important}
.whats:hover{background:#FFF4EC}
.whats img{width:34px;height:34px}
.whats span{font-size:18px;font-weight:600}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .case{flex-wrap:wrap}
  .case__info{flex:1 1 100%}
  .result{flex:1 1 240px}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini:last-child:nth-child(odd){grid-column:1/-1}
  .mini:last-child:nth-child(odd) .mini__posts{max-width:520px}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .about__row{flex-direction:column;gap:24px}
  .about h2{flex:none}
}

/* ---------- Celular ---------- */
@media (max-width:720px){
  .hero,.hero__inner{min-height:0}
  .hero__img{left:0;width:100%;height:460px;object-position:62% 40%}
  .hero__fade-x{background:linear-gradient(180deg,rgba(81,7,52,.85) 0,rgba(81,7,52,0) 130px)}
  .hero__fade-y{top:250px;bottom:auto;height:212px}
  .hero__inner{padding-top:20px;padding-bottom:48px;gap:0;justify-content:flex-start}
  .hero__logo{height:44px}
  .hero__for-label{font-size:11px;letter-spacing:2px}
  .hero__for-name{font-size:14px}
  .hero__copy{margin-top:290px;gap:18px}

  .about{padding-top:56px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .services{padding-bottom:56px}
  .pill,.pill--hot,.pill--hot2{padding:10px 18px}

  .cases{padding-top:56px;padding-bottom:56px;gap:44px}
  .cases__head,.clients__head{flex-direction:column;align-items:flex-start;gap:16px}
  .cases__note{text-align:left}
  .case{flex-direction:column;gap:24px;padding-bottom:44px}
  .case__info{flex:none}
  .case__posts{gap:12px}
  .case .post{flex:1 1 0;width:auto;min-width:0}
  .result{flex:none;padding:26px 24px}
  .result__extra{margin-top:12px}
  .mini-grid{grid-template-columns:1fr}
  .mini{padding:20px}
  .mini .post img{height:auto;aspect-ratio:9/16}

  .clients{padding-top:56px;padding-bottom:56px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .logos .logo-box{height:96px}
  .logos .logo-box img{max-width:120px;max-height:64px}

  .footer{flex-direction:column;align-items:flex-start;padding-top:48px;padding-bottom:48px}
  .contact{align-items:flex-start;text-align:left}
}