:root{
  --azul:#0665c7;
  --azul-escuro:#021d39;
  --texto:#0f172a;
  --texto-claro:#ffffff;
  --bg:#FFFFFF;
  --bege:#d9cab9;
  --amarelo:#ffd22f;
  --cinza:#6b7280;
  --borda:#d9d9d9;
  --sucesso:#138a36;
  --erro:#c62828;
  --sombra:0 18px 40px rgba(0,0,0,.12);
  --radius:22px;
  --max:1336px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--texto);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}

.tape{
  background:repeating-linear-gradient(-14deg, var(--amarelo) 0 120px, #111 120px 136px);
  color:#111;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  overflow:hidden;
  white-space:nowrap;
}
.tape span{
  display:inline-block;
  padding:10px 20px;
  color:#111;
  background:transparent;
}

.hero{
  position:relative;
  width:100%;
  background-image:url('img/sliders/desktop.jpg');
  background-size:2500px 745px;
  background-position:center top;
  background-repeat:no-repeat;
  min-height:745px;
  aspect-ratio:auto;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.18), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events:none;
}
.hero-grid{
  display:flex;
  align-items:flex-end;
  min-height:745px;
  height:auto;
  position:relative;
  z-index:1;
  padding:58px 0 40px;
}
.hero-copy{
  margin-top:auto;
  margin-bottom:6px;
  max-width:520px;
}
.brand-box{
  display:inline-block;
  background:#fff;
  padding:16px 18px;
  border-radius:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  margin-bottom:30px;
}
.brand-logo{
  background:var(--azul);
  color:#fff;
  font-size:34px;
  font-weight:900;
  line-height:1;
  padding:10px 16px;
  display:inline-block;
}
.brand-sub{
  text-align:center;
  color:#666;
  font-size:15px;
  font-weight:700;
  margin-top:8px;
  letter-spacing:.11em;
}
.hero h1{
  font-size:40px;
  line-height:1.02;
  margin:0 0 20px;
  color:#fff;
  max-width:520px;
}
.hero p{
  font-size:23px;
  line-height:1.45;
  color:#fff;
  max-width:500px;
  margin:0 0 32px;
  font-weight: 400;
}
.hero b{

  font-weight: 800;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:270px;
  padding:18px 28px;
  border-radius:999px;
  background:var(--azul);
  color:#fff;
  font-weight:800;
  font-size:18px;
  box-shadow:0 12px 24px rgba(6,101,199,.25);
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

.showcase{
  position:relative;
  min-height:620px;
}
.desk{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:180px;
  background:linear-gradient(180deg, #c89260, #a96c42);
  border-top-left-radius:22px;
  box-shadow:var(--sombra);
}
.desk::before{
  content:'';
  position:absolute;
  inset:12px 12px auto 12px;
  height:18px;
  border-radius:20px;
  background:rgba(255,255,255,.16);
}
.product{
  position:absolute;
  box-shadow:0 20px 32px rgba(0,0,0,.18);
}
.suitcase{
  left:18px;bottom:95px;width:180px;height:300px;border-radius:28px;background:linear-gradient(180deg,#1f6e46,#11502f);
}
.suitcase::before,.suitcase::after{content:'';position:absolute;background:rgba(255,255,255,.16);left:20px;right:20px;height:4px;border-radius:6px}
.suitcase::before{top:70px}.suitcase::after{top:150px}
.suitcase .handle{position:absolute;top:-62px;left:50%;transform:translateX(-50%);width:10px;height:68px;background:#666;border-radius:8px}
.suitcase .handle::before{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:54px;height:16px;border:6px solid #666;border-bottom:none;border-radius:20px 20px 0 0}
.suitcase .rod{position:absolute;top:-18px;width:6px;height:36px;background:#888;border-radius:8px}.suitcase .rod.r1{left:72px}.suitcase .rod.r2{right:72px}
.suitcase .w{position:absolute;bottom:-12px;width:24px;height:24px;background:#333;border-radius:50%}.suitcase .w.w1{left:24px}.suitcase .w.w2{right:24px}
.suitcase .w.w3{left:56px}.suitcase .w.w4{right:56px}
.logo-on{position:absolute;color:#fff;font-weight:800;font-size:22px;left:50%;top:52%;transform:translate(-50%,-50%);text-shadow:0 2px 5px rgba(0,0,0,.2)}

.bag{left:255px;bottom:115px;width:150px;height:190px;background:linear-gradient(180deg,#6e1c7d,#8f2fa3);border-radius:12px 12px 20px 20px}
.bag::before,.bag::after{content:'';position:absolute;top:-36px;width:42px;height:56px;border:9px solid #5d156a;border-bottom:none;border-radius:30px 30px 0 0}
.bag::before{left:24px}.bag::after{right:24px}
.bag span{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:700}

.backpack{right:32px;bottom:110px;width:210px;height:280px;border-radius:32px;background:linear-gradient(180deg,#d9d9d9,#c4c4c4)}
.backpack::before{content:'';position:absolute;top:-16px;left:62px;right:62px;height:22px;border:7px solid #8d8d8d;border-bottom:none;border-radius:30px 30px 0 0}
.backpack::after{content:'';position:absolute;top:68px;left:20px;right:20px;height:2px;background:#b1b1b1}
.backpack span{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);color:#0a6ab8;font-size:20px;font-weight:800}

.notebook{right:165px;bottom:38px;width:180px;height:26px;background:#2e5d93;border-radius:4px;transform:skew(-18deg);box-shadow:0 8px 18px rgba(0,0,0,.14)}
.notebook::before{content:'Diário';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skew(18deg);color:#fff;font-weight:700;font-size:15px}

.pen{right:98px;bottom:54px;width:110px;height:8px;background:#5e646c;border-radius:10px;transform:rotate(-18deg)}
.bottle{right:88px;bottom:70px;width:38px;height:140px;background:linear-gradient(180deg,#222,#444);border-radius:16px 16px 12px 12px}
.bottle::before{content:'';position:absolute;top:-18px;left:9px;width:20px;height:26px;background:#1f1f1f;border-radius:8px}
.bottle::after{content:'BRASTEMP';position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(90deg);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em}
.cup{right:0;bottom:65px;width:72px;height:96px;background:linear-gradient(180deg,#b00,#8e1111);border-radius:0 0 22px 22px}
.cup::before{content:'';position:absolute;top:-18px;left:8px;right:8px;height:22px;background:#111;border-radius:14px}
.cup::after{content:'JATINEX';position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:800}
.case{right:18px;bottom:16px;width:70px;height:56px;background:#fff;border-radius:18px;box-shadow:0 8px 14px rgba(0,0,0,.12)}
.case::after{content:'De';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:#666;font-weight:700}

.strip{
  background:var(--azul);
  color:#fff;
  overflow:hidden;
}
.strip-track{
  display:flex;
  gap:34px;
  white-space:nowrap;
  padding:20px 0;
  line-height: 1.8em;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  width:max-content;
  animation:strip-scroll 24s linear infinite;
}
@keyframes strip-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

section{padding:72px 0}
.section-title{
  font-size:40px;
  text-align:center;
  margin:0 0 18px;
  line-height:1.08;
}
.section-sub{
  text-align:center;
  font-size:22px;
  color:#374151;
  max-width:960px;
  margin:0 auto 40px;
  line-height:1.5;
}
.clients-carousel{
  margin-top:34px;
  overflow:hidden;
  padding:20px 0;
}
.clients-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:clientes-scroll 38s linear infinite;
}
.client-logo{
  flex:0 0 auto;
  width:190px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 18px;
}
.client-logo img{
  max-width:155px;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@keyframes clientes-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.banners-carousel{
  margin-top:30px;
  overflow:hidden;
  padding:12px 0;
}
.banners-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:banners-scroll 32s linear infinite;
}
.banner-logo{
  flex:0 0 auto;
  width:480px;
  height:450px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 12px;
}
.banner-logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
@keyframes banners-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.curadoria-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  align-items:end;
  margin-top:30px;
}
.gift{
  background:#fff;
  border-radius:26px;
  box-shadow:var(--sombra);
  min-height:320px;
  position:relative;
  overflow:hidden;
  padding:24px;
}
.gift.green{background:linear-gradient(180deg,#0d7b44,#0e5c32)}
.gift.black{background:linear-gradient(180deg,#50555d,#2f343a)}
.gift.orange{background:linear-gradient(180deg,#1c1c1c,#111)}
.gift.kraft{background:linear-gradient(180deg,#d4af86,#bc9465)}
.gift .label{position:absolute;left:24px;bottom:22px;color:#fff;font-size:24px;font-weight:800}
.gift.black .label,.gift.kraft .label{color:#fff}
.wine-box,.pen-box,.orange-box,.kraft-box{position:absolute;inset:0}

.wine-box::before{content:'';position:absolute;left:24px;top:34px;width:200px;height:250px;background:#083e26;border-radius:8px;box-shadow:inset -24px 0 0 rgba(255,255,255,.12)}
.wine-box::after{content:'';position:absolute;left:120px;top:104px;width:54px;height:150px;background:#5c2113;border-radius:14px 14px 8px 8px;box-shadow:-88px 18px 0 -18px #ddd}
.wine-glass{position:absolute;left:64px;top:114px;width:34px;height:92px;border:4px solid #ddd;border-top:none;border-radius:0 0 16px 16px}
.wine-glass::before{content:'';position:absolute;top:-34px;left:-12px;width:54px;height:40px;border:4px solid #ddd;border-bottom:none;border-radius:0 0 10px 10px;transform:rotate(180deg)}
.wine-glass::after{content:'';position:absolute;bottom:-28px;left:12px;width:6px;height:30px;background:#ddd;box-shadow:-16px 28px 0 12px #ddd}

.pen-box::before{content:'';position:absolute;left:36px;top:60px;width:260px;height:120px;background:#1d1d1f;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pen-box::after{content:'';position:absolute;left:100px;top:194px;width:140px;height:10px;background:#111;border-radius:10px;transform:rotate(20deg);box-shadow:28px 18px 0 0 #2d2d2d}
.pen-detail{position:absolute;left:228px;top:190px;width:20px;height:20px;border-radius:50%;background:#d9d9d9}

.orange-box::before{content:'';position:absolute;left:38px;top:44px;width:280px;height:240px;background:#111;border-radius:10px;box-shadow:inset 0 0 0 4px #3b2a17}
.orange-box::after{content:'';position:absolute;left:74px;top:82px;width:92px;height:154px;background:#ef7a1a;border-radius:12px;box-shadow:120px 10px 0 -14px #ef7a1a, 120px 92px 0 -28px #f39a3d, 182px 118px 0 -38px #fafafa}
.orange-book{position:absolute;left:82px;top:88px;width:80px;height:144px;background:#ef7a1a;border-radius:6px}
.orange-bottle{position:absolute;left:204px;top:88px;width:40px;height:140px;background:#ef7a1a;border-radius:18px}
.orange-case{position:absolute;left:258px;top:84px;width:76px;height:56px;background:#ef7a1a;border-radius:26px}
.orange-buds{position:absolute;left:266px;top:172px;width:66px;height:56px;background:#f2f2f2;border-radius:16px}

.kraft-box::before{content:'';position:absolute;left:48px;top:54px;width:220px;height:228px;background:#b98e60;border-radius:8px;transform:skew(0deg,-2deg)}
.kraft-box::after{content:'';position:absolute;left:210px;top:82px;width:82px;height:174px;background:#c79b6e;transform:skew(0deg,10deg);border-radius:2px}

.center{text-align:center}
.spacer-40{margin-top:40px}

.form-wrap{
  max-width:760px;
  margin:0 auto;
}
.alert{
  padding:14px 16px;
  border-radius:12px;
  margin-bottom:20px;
  font-weight:700;
}
.alert.success{background:rgba(19,138,54,.12);color:var(--sucesso);border:1px solid rgba(19,138,54,.25)}
.alert.error{background:rgba(198,40,40,.1);color:var(--erro);border:1px solid rgba(198,40,40,.2)}
form{
  display:grid;
  gap:16px;
  margin-top:20px;
}
label{
  display:block;
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
}
input{
  width:100%;
  height:64px;
  border:none;
  border-radius:12px;
  background:#f7f7f7;
  padding:0 18px;
  font-size:17px;
  color:#111;
  outline:none;
  border:1px solid #ececec;
}
input:focus{border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(6,101,199,.08)}
button{
  width:220px;
  height:62px;
  border:none;
  border-radius:12px;
  background:var(--azul);
  color:#fff;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  margin:8px auto 0;
  transition:.25s ease;
}
button:hover{filter:brightness(1.05);transform:translateY(-2px)}

footer{
  background:#02152c;
  color:#fff;
  padding:44px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-logo{
  display:inline-block;
  background:#fff;
  color:var(--azul);
  font-weight:900;
  font-size:24px;
  padding: 0;
  margin-bottom:16px;
}

.footer-logo img{
  width:240px;

  object-fit:contain;
}
.footer.footer-title{font-size:22px;font-weight:800;margin:0 0 16px}
.footer-text,.footer-link{font-size:18px;line-height:1.8;color:#fff;}
.footer-item{display:flex;align-items:flex-start;gap:10px}
.footer-item img{width:24px;height:24px;object-fit:contain;margin-top:6px;flex:0 0 24px}
.footer-item a{color:#fff;}
.socials{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.socials a{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0a84ff}
.socials img{width:40px;height:40px;object-fit:contain}
.copyright{margin-top:18px;font-size:18px;}

@media (max-width: 1100px){
  .hero-grid{min-height:680px;height:auto;align-items:flex-end;padding:44px 0 24px}
  .hero-copy{text-align:left;margin-bottom:0;max-width:500px}
  .hero h1,.hero p{max-width:100%}
  .showcase{min-height:540px;max-width:760px;margin:0 auto}
  .curadoria-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .hero{
    background-image:url('img/sliders/mobile-800-full.jpg');
    background-size:cover;
    aspect-ratio:auto;
    background-position:center top;
  }
  .tape{font-size:12px}
  .brand-logo{font-size:26px}
  .brand-sub{font-size:12px}
  .hero-grid{min-height:760px;height:auto;padding:10px 0 24px;align-items:flex-end}
  .hero-copy{text-align:center;max-width:100%;margin-bottom:60px}
  .hero h1,.hero p{margin-left:auto;margin-right:auto}
  .hero h1{font-size:40px;margin: 0 0 10px;}
  .hero p{font-size:19px;margin: 0 0 10px;}
  .btn{min-width:100%;padding:16px 22px;font-size:17px}
  .strip-track{gap:20px;font-size:12px;animation-duration:20s}
  .section-title{font-size:34px}
  .section-sub{font-size:18px}
  .clients-carousel{padding:16px 0}
  .clients-track{animation-duration:30s}
  .client-logo{width:160px;height:82px;margin:0 10px}
  .client-logo img{max-width:132px;max-height:54px}
  .banners-track{animation-duration:26s}
  .banner-logo{width:min(360px, calc(100vw - 32px));height:300px;margin:0 0}
  .banner-logo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
  .curadoria-grid{grid-template-columns:1fr}
  .footer-title{font-size:18px;margin:0 0 10px}
  .footer-text,.footer-link{font-size:14px;line-height:1.5}
  .footer-item{gap:8px}
  .footer-item img{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
  .socials{gap:8px;margin-top:10px}
  .socials img{width:30px;height:30px}
  .copyright{font-size:13px;margin-top:12px}
  .showcase{min-height:480px;transform:scale(.84);transform-origin:top center;margin-top:-20px;margin-bottom:-20px}
  .desk{height:150px}
  .suitcase{left:8px;width:150px;height:250px}
  .bag{left:176px;width:126px;height:160px}
  .backpack{right:10px;width:170px;height:228px}
  .notebook{right:126px;width:138px}
  .pen{right:72px;width:82px}
  .bottle{right:74px;height:118px}
  .cup{width:60px;height:82px}
  .case{width:58px;height:48px}
  input{height:58px}
  button{width:100%;height:58px}
}