/* Sani Química – página "Em breve" */
:root{
  --bg:#01150c;
  --bg-2:#0b1815;
  --lime:#8cc63f;
  --lime-text:#95c94a;
  --green:#2f8a32;
  --green-dark:#0a4a2f;
  --band:#003818;
  --white:#fff;
  --text:#e9efec;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Kaushan Script","Brush Script MT",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.4;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:6px}

.icon{width:2rem;height:2rem;flex:none;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon .fill{fill:var(--lime);stroke:none}

/* ---------- Mobile / tablet (stacked) ---------- */
.stage{position:relative;background:radial-gradient(120% 70% at 70% 20%,#16251f 0%,var(--bg-2) 45%,var(--bg) 100%)}
.brand{padding:2.25rem 1.5rem 0}
.brand__logo{width:min(15rem,70vw);height:auto;margin-left:-.4rem}
.brand__tagline{margin-top:.35rem;font-style:italic;font-weight:300;font-size:.95rem;color:var(--text)}

.intro{padding:1.5rem 1.5rem 2.5rem}
.intro__rule{display:block;width:2.6rem;height:2px;background:var(--lime);margin-bottom:1.25rem}
.intro__title{font-weight:400;font-size:clamp(1.9rem,7.4vw,2.6rem);line-height:1.15;color:var(--white);letter-spacing:-.01em}
.intro__title span{font-weight:700;color:var(--lime-text)}
.intro__text{margin-top:1rem;font-size:1.05rem;max-width:26rem;color:var(--text)}
.intro__news{margin-top:1rem;font-weight:700;color:var(--lime-text);font-size:1.05rem}

.features{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.75rem}
.features__item{display:flex;flex-direction:column;gap:.5rem;padding:0 .75rem;font-size:.85rem;line-height:1.3;color:var(--text)}
.features__item:first-child{padding-left:0}
.features__item + .features__item{border-left:1px solid rgba(140,198,63,.7)}
@media (max-width:479px){
  .features{grid-template-columns:1fr;gap:.9rem}
  .features__item{flex-direction:row;align-items:center;gap:.8rem;padding:0;font-size:.95rem}
  .features__item + .features__item{border-left:0}
  .features br{display:none}
  .band__logo{width:7rem}
}

.contacts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2rem}
.contact{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:1rem;text-decoration:none;color:var(--white);padding:.35rem .9rem .35rem .35rem;border-radius:999px;border:1px solid transparent;transition:border-color .2s,background-color .2s}
.contact .icon--box{width:2.25rem;height:2.25rem}
.contact:hover{border-color:rgba(140,198,63,.6)}
.contact--whatsapp{border-color:var(--lime);background:rgba(140,198,63,.08)}
.contact--whatsapp:hover{background:rgba(140,198,63,.2)}

.soon{position:relative;min-height:clamp(26rem,120vw,40rem);padding:2.5rem 1.5rem 12rem;
  background:#bfe4f7 url("../assets/hero-photo.jpg") center bottom/cover no-repeat;
  background-image:image-set(url("../assets/hero-photo.webp") type("image/webp"),url("../assets/hero-photo.jpg") type("image/jpeg"));
  color:var(--green-dark)}
.soon__title{font-family:var(--script);font-weight:400;font-size:clamp(2.3rem,10vw,3.4rem);line-height:1.05;color:var(--green-dark);transform:rotate(-7deg);transform-origin:left bottom;max-width:max-content;text-shadow:0 1px 12px rgba(255,255,255,.45)}
.soon__swoosh{width:min(16rem,70vw);height:1.4rem;margin:.2rem 0 0 2rem;transform:rotate(-4deg)}
.soon__text{margin:1rem 0 0 2rem;font-weight:500;font-size:1rem;color:#12472c;text-shadow:0 0 8px rgba(255,255,255,.7)}

.band{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:linear-gradient(180deg,#0c4a22,var(--band));border-top:4px solid var(--lime)}
.band__logo{width:8.5rem;height:auto}
.band__rule{flex:none;width:1px;align-self:stretch;background:rgba(140,198,63,.7)}
.band__text{font-size:.9rem;line-height:1.35;color:var(--white)}

@media (min-width:640px){
  .brand{padding:3rem 3rem 0}
  .intro{padding:2rem 3rem 3.5rem}
  .features{max-width:34rem}
  .features__item{padding:0 1.25rem}
  .soon{padding:3.5rem 3rem 14rem;min-height:36rem;background-position:center 80%}
  .band{padding:1.75rem 3rem;justify-content:center}
}

/* ---------- Desktop: faithful 16:9 composition ---------- */
@media (min-width:1024px){
  body{display:flex;justify-content:center}
  .stage{width:100%;max-width:2400px;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;
    background:var(--bg) url("../assets/hero-desktop.jpg") center/cover no-repeat;
    background-image:image-set(url("../assets/hero-desktop.webp") type("image/webp"),url("../assets/hero-desktop.jpg") type("image/jpeg"))}
  /* 1cqw = 10.24px in the 1024×576 Canva artboard; vw values are fallbacks for browsers without container units */
  .brand{position:absolute;left:6.45vw;left:6.45cqw;top:2.5vw;top:2.5cqw;padding:0;width:28vw;width:28cqw}
  .brand__logo{width:26.4vw;width:26.4cqw;margin:0}
  .brand__tagline{margin-top:.2vw;margin-top:.2cqw;margin-left:.7vw;margin-left:.7cqw;font-size:1.38vw;font-size:1.38cqw}

  .intro{position:absolute;left:7.1vw;left:7.1cqw;top:15.9vw;top:15.9cqw;width:36vw;width:36cqw;padding:0}
  .intro__rule{width:4vw;width:4cqw;height:.2vw;height:.2cqw;margin-bottom:1.6vw;margin-bottom:1.6cqw}
  .intro__title{font-size:3.25vw;font-size:3.25cqw;line-height:1.2;white-space:nowrap}
  .intro__title span{font-size:.95em}
  .intro__text{margin-top:.8vw;margin-top:.8cqw;font-size:1.56vw;font-size:1.56cqw;line-height:1.22;max-width:30vw;max-width:30cqw}
  .intro__news{margin-top:1.2vw;margin-top:1.2cqw;font-size:1.5vw;font-size:1.5cqw}

  .features{margin-top:2.2vw;margin-top:2.2cqw;max-width:none;grid-template-columns:10vw 12.4vw 12vw;grid-template-columns:10cqw 12.4cqw 12cqw}
  .features__item{gap:.5vw;gap:.5cqw;padding:0 0 0 2.4vw;padding:0 0 0 2.4cqw;font-size:1.22vw;font-size:1.22cqw}
  .features__item:first-child{padding-left:0}
  .icon{width:3.2vw;width:3.2cqw;height:3.2vw;height:3.2cqw}

  .contacts{margin-top:3.1vw;margin-top:3.1cqw;gap:0;flex-wrap:nowrap}
  .contacts li + li{border-left:1px solid rgba(140,198,63,.7);margin-left:2vw;margin-left:2cqw;padding-left:2vw;padding-left:2cqw}
  .contact{gap:.9vw;gap:.9cqw;font-size:1.3vw;font-size:1.3cqw;padding:.25vw 1vw .25vw .25vw;padding:.25cqw 1cqw .25cqw .25cqw}
  .contact .icon--box{width:3.3vw;width:3.3cqw;height:3.3vw;height:3.3cqw}

  .soon{position:absolute;left:65.4vw;left:65.4cqw;top:7vw;top:7cqw;min-height:0;padding:0;background:none}
  .soon__title{font-size:4.25vw;font-size:4.25cqw;line-height:1.02;transform:rotate(-8deg);text-shadow:none}
  .soon__swoosh{width:22vw;width:22cqw;height:3vw;height:3cqw;margin:-2vw 0 0 5vw;margin:-2cqw 0 0 5cqw;transform:rotate(-3deg)}
  .soon__text{margin:1.4vw 0 0 7.6vw;margin:1.4cqw 0 0 7.6cqw;font-size:1.32vw;font-size:1.32cqw;line-height:1.3;white-space:nowrap;text-shadow:0 0 .6vw rgba(255,255,255,.8);text-shadow:0 0 .6cqw rgba(255,255,255,.8)}

  .band{position:absolute;left:71.3vw;left:71.3cqw;top:47vw;top:47cqw;padding:0;gap:1.2vw;gap:1.2cqw;background:none;border:0}
  .band__logo{width:12.2vw;width:12.2cqw}
  .band__rule{flex:none;height:3.8vw;height:3.8cqw;align-self:center}
  .band__text{font-size:1.1vw;font-size:1.1cqw;line-height:1.35;white-space:nowrap}
}

/* entrance animation */
@media (prefers-reduced-motion:no-preference){
  .brand,.intro,.soon,.band{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .intro{animation-delay:.1s}.soon{animation-delay:.25s}.band{animation-delay:.35s}
  @keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}