:root{--pink:#e92b87;--orange:#ff8a00;--purple:#5f2eaa;--ink:#18131d;--muted:#665f6b;--cream:#fff8f4;--radius:28px;--shadow:0 24px 60px rgba(48,16,46,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Roboto,Arial,sans-serif;background:#fff}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}h1,h2,h3,.button,.main-nav{font-family:"Baloo 2",sans-serif}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(3rem,6vw,6.3rem);line-height:.92;letter-spacing:-.05em}h2{font-size:clamp(2.1rem,4vw,4rem);line-height:1.02;letter-spacing:-.035em}.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:.78rem}.eyebrow--pink{color:var(--pink)}.site-header{height:78px;display:flex;align-items:center;padding:0 max(5vw,24px);gap:32px;background:#fff;position:relative;z-index:10}.site-header--dark{background:#050505;color:#fff;border-bottom:1px solid #333}.brand img{width:150px;max-height:46px;object-fit:contain}.main-nav{display:flex;gap:28px;margin-left:auto;font-weight:700}.main-nav a:hover{color:var(--pink)}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 26px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;cursor:pointer;font-size:.85rem}.button--pink{background:var(--pink);color:#fff}.button--orange{background:var(--orange);color:#fff}.button--dark{background:var(--ink);color:#fff}.consumer-hero{min-height:calc(100vh - 78px);padding:9vw max(8vw,28px);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;color:#fff;background:#120a10 url("../images/background.png") center/cover no-repeat;gap:4vw}.consumer-hero h1{color:#fff;margin-bottom:32px}.consumer-hero h1 span{color:var(--orange)}.consumer-hero__content>p:not(.eyebrow){font-size:1.1rem;line-height:1.65;max-width:620px}.consumer-hero__devices{width:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}.newsletter{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.newsletter input{flex:1;min-width:240px}.business-hero{min-height:720px;padding:80px max(7vw,28px) 0;display:grid;grid-template-columns:1.05fr .8fr;align-items:end;color:#fff;background:#ef68a3 url("../images/backgroud-top.png") center/cover no-repeat;overflow:hidden}.business-hero__content{align-self:center;max-width:720px;padding-bottom:80px}.business-hero h1{margin-bottom:28px}.business-hero p:not(.eyebrow){font-size:1.3rem;line-height:1.55;max-width:630px}.business-hero img{max-height:640px;justify-self:center}.section{padding:110px max(8vw,28px)}.solution{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw;background:var(--cream)}.solution p:not(.eyebrow){color:var(--muted);font-size:1.05rem;line-height:1.75}.partner-section{text-align:center;color:#fff;background:linear-gradient(135deg,#5f2eaa,#d72982)}.partner-section h2{margin-bottom:50px}.logo-track{overflow:hidden}.logo-row{display:grid;grid-template-columns:repeat(7,1fr);gap:16px}.logo-row img{width:100%;background:#fff;border-radius:16px;padding:10px;box-shadow:0 10px 25px rgba(22,5,35,.18)}.benefits{text-align:center}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;text-align:left}.benefit-grid article{padding:34px;border:1px solid #eee4eb;border-radius:var(--radius);box-shadow:0 12px 40px rgba(34,12,32,.06)}.benefit-grid span{display:block;color:var(--pink);font-family:"Baloo 2";font-size:1.5rem;font-weight:800}.benefit-grid h3{font-size:1.7rem;margin:12px 0}.benefit-grid p{line-height:1.6;color:var(--muted)}.legal-note{margin:38px auto 0;max-width:820px;color:#7a707b;font-size:.8rem;line-height:1.55}.contact-section{padding:80px max(8vw,28px) 0;background:linear-gradient(135deg,#fff4ec,#ffe7f4);display:grid;grid-template-columns:.8fr 1fr;gap:7vw;align-items:end}.contact-section>img{max-height:680px;justify-self:center}.contact-card{background:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:48px;box-shadow:var(--shadow);align-self:end}.contact-card h2{font-size:clamp(2rem,3.4vw,3.3rem)}form label{display:block;font-weight:700;font-size:.86rem;margin:15px 0 7px}input,textarea{width:100%;border:1px solid #dcd3da;border-radius:12px;padding:14px 16px;font:inherit;background:#fff}textarea{resize:vertical}.contact-card .button{margin-top:20px;width:100%}.form-message{margin:12px 0 0;font-size:.88rem;font-weight:700}.site-footer{display:flex;justify-content:space-between;gap:24px;padding:26px max(5vw,24px);background:var(--purple);color:#fff;font-size:.85rem}.site-footer div,.site-footer nav{display:flex;gap:14px;flex-wrap:wrap}.site-footer--dark{background:#100d12}.site-footer a:hover{text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.main-nav{display:none}.site-header{justify-content:space-between}.consumer-hero,.business-hero,.solution,.contact-section{grid-template-columns:1fr}.consumer-hero{padding-top:70px;text-align:center}.consumer-hero__devices{max-width:650px;margin:auto}.business-hero{padding-top:70px}.business-hero__content{padding-bottom:20px}.business-hero img{max-height:500px}.solution img{grid-row:1}.logo-row{grid-template-columns:repeat(3,1fr)}.benefit-grid{grid-template-columns:1fr}.contact-section>img{display:none}.contact-card{margin-top:30px}.site-footer{flex-direction:column}}@media(max-width:560px){.site-header{height:68px;padding:0 16px}.brand img{width:120px}.site-header .button{padding:10px 15px;font-size:.7rem}.consumer-hero{min-height:calc(100vh - 68px);padding:64px 22px}.newsletter{display:block}.newsletter input,.newsletter button{width:100%;margin-top:10px}.business-hero{min-height:auto;padding:70px 22px 0}.business-hero h1{font-size:3.2rem}.section{padding:72px 22px}.logo-row{grid-template-columns:repeat(2,1fr)}.contact-section{padding:40px 18px 0}.contact-card{padding:28px 22px}.site-footer{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.form-message[data-status="success"]{color:#247443}
.form-message[data-status="error"]{color:#b42318}
.button:disabled{cursor:wait;opacity:.65}
.site-header--dark .site-header__inner>.button{margin-left:auto}
.business-hero{min-height:calc(100svh - 78px)}
.product-logo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;margin-top:48px}
.product-logo-grid img{width:100%;aspect-ratio:1/.58;object-fit:contain;background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 25px rgba(22,5,35,.18)}
@media(max-width:1100px){.product-logo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.product-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.product-logo-grid img{border-radius:14px;padding:10px}}
@media(max-width:460px){.product-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.business-hero{min-height:calc(100svh - 68px)}}

/* Efeitos dos boxes */
.product-logo-grid img,.benefit-grid article{
  border:1px solid rgba(255,255,255,.3);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,filter .28s ease;
  will-change:transform;
}
.benefit-grid article{position:relative;overflow:hidden;background:#fff}
.benefit-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,transparent 30%,rgba(233,43,135,.08) 50%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .55s ease;
  pointer-events:none;
}
@media(hover:hover){
  .product-logo-grid img:hover{
    transform:translateY(-8px) scale(1.035);
    border-color:rgba(255,138,0,.85);
    box-shadow:0 20px 42px rgba(37,8,48,.3),0 0 0 3px rgba(255,255,255,.18);
    filter:saturate(1.12);
  }
  .benefit-grid article:hover{
    transform:translateY(-9px);
    border-color:rgba(233,43,135,.35);
    box-shadow:0 22px 50px rgba(95,46,170,.15);
  }
  .benefit-grid article:hover::before{transform:translateX(110%)}
}
@media(prefers-reduced-motion:reduce){
  .product-logo-grid img,.benefit-grid article,.benefit-grid article::before{transition:none}
}

/* Os arquivos originais são quadrados e possuem margens brancas internas.
   O recorte central amplia a marca sem distorcer sua proporção. */
.product-logo-grid img{
  object-fit:cover;
  object-position:center;
  padding:15px;
}
.product-logo-grid img[alt="Coquetel"],
.product-logo-grid img[alt="Deezer"],
.product-logo-grid img[alt="EducaBolso"],
.product-logo-grid img[alt="Imagina Só"]{object-fit:contain;padding:10px}
@media(max-width:760px){.product-logo-grid img{padding:10px}}

/* Hero em camadas: fundo e personagem respondem ao scroll em velocidades diferentes. */
.business-hero{
  --hero-bg-y:0px;
  background-position:center calc(50% + var(--hero-bg-y));
}
.business-hero .business-hero__visual{
  --hero-person-y:0px;
  width:min(calc(100% + var(--main-bleed)),720px);
  max-width:none;
  max-height:none;
  margin-right:calc(0px - var(--main-bleed));
  justify-self:end;
  transform:translateY(var(--hero-person-y)) scale(1.14);
  transform-origin:center bottom;
  will-change:transform;
}
@media(max-width:900px){
  .business-hero .business-hero__visual{width:min(88vw,650px);max-width:650px;margin-right:0;justify-self:center;transform:translateY(var(--hero-person-y)) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){
  .business-hero{background-position:center}
  .business-hero .business-hero__visual{transform:scale(1.14);will-change:auto}
}

/* Faixas full-width com conteúdo central limitado a 1140px. */
:root{
  --main-content-width:1140px;
  --main-gutter:clamp(22px,4vw,64px);
}
.main-container{
  --main-bleed:max(var(--main-gutter),calc((100vw - var(--main-content-width))/2));
  width:calc(100% - var(--main-gutter) - var(--main-gutter));
  max-width:1140px;
  margin-inline:auto;
}

.site-header{
  padding:0;
  display:block;
}
.site-header__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:32px;
}
.site-footer{
  padding:26px 0;
  display:block;
}
.site-footer .site-footer__inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap;
}

/* Valores fluidos param de crescer quando o conteúdo chega a 1140px. */
h1{font-size:clamp(3rem,6vw,4.275rem)}
h2{font-size:clamp(2.1rem,4vw,2.85rem)}
.contact-card h2{font-size:clamp(2rem,3.4vw,2.425rem)}

.consumer-hero{
  padding:min(9vw,103px) 0;
  display:flex;
  align-items:center;
  gap:0;
  overflow:hidden;
}
.consumer-hero__inner{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:clamp(24px,4vw,46px);
}
.consumer-hero__devices{
  width:calc(100% + var(--main-bleed));
  max-width:none;
  justify-self:start;
}

.business-hero{
  padding:80px 0 0;
  display:flex;
  align-items:stretch;
}
.business-hero__inner{
  display:grid;
  grid-template-columns:1.05fr .8fr;
  align-items:end;
}

.section{padding:110px 0}
.solution{
  display:block;
  overflow:hidden;
}
.solution__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(32px,7vw,80px);
}
.solution__visual{
  width:calc(100% + var(--main-bleed));
  max-width:none;
  justify-self:start;
}

.contact-section{
  padding:80px 0 0;
  display:block;
  overflow:hidden;
}
.contact-section__inner{
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:clamp(32px,7vw,80px);
  align-items:end;
}
.contact-section__visual{
  width:min(126%,644px);
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  justify-self:center;
  align-self:end;
}

@media(max-width:900px){
  .site-header__inner{justify-content:space-between}
  .site-footer .site-footer__inner{flex-direction:column}

  .consumer-hero__inner,
  .business-hero__inner,
  .solution__inner,
  .contact-section__inner{grid-template-columns:1fr}

  .consumer-hero{padding-top:70px}
  .consumer-hero__devices{
    width:100%;
    max-width:650px;
    margin-inline:auto;
    justify-self:center;
  }
  .business-hero{padding-top:70px}
  .solution__visual{
    width:100%;
    max-width:650px;
    grid-row:1;
    justify-self:center;
  }
  .contact-section__visual{display:none}
}

@media(max-width:560px){
  .site-header{
    --main-gutter:16px;
    padding:0;
  }
  .consumer-hero{padding:64px 0}
  .business-hero{padding:70px 0 0}
  .section{padding:72px 0}
  .contact-section{
    --main-gutter:18px;
    padding:40px 0 0;
  }
  .site-footer{
    --main-gutter:18px;
    padding:24px 0;
  }
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .business-hero .business-hero__visual{transform:scale(1.06)}
}

/* Formulário de contato em popup. */
.contact-card>p:not(.eyebrow){
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.65;
}
.contact-card>.button{margin-top:8px}
.contact-modal{
  width:min(620px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:var(--radius);
  color:var(--ink);
  background:#fff;
  box-shadow:0 30px 90px rgba(24,19,29,.28);
  overflow:hidden;
}
.contact-modal[open]{animation:modal-in .22s ease-out}
.contact-modal::backdrop{
  background:rgba(24,19,29,.66);
  backdrop-filter:blur(4px);
  animation:backdrop-in .2s ease-out;
}
.contact-modal__content{
  max-height:calc(100dvh - 32px);
  padding:38px 40px;
  overflow-y:auto;
}
.contact-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.contact-modal__header h2{
  font-size:clamp(1.8rem,4vw,2.5rem);
  margin-bottom:8px;
}
.contact-modal__close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f8edf3;
  color:var(--ink);
  cursor:pointer;
  font:400 2rem/1 Arial,sans-serif;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.contact-modal__close:hover{background:var(--pink);color:#fff;transform:rotate(4deg)}
.contact-modal form>.button{margin-top:20px;width:100%}
body:has(.contact-modal[open]){overflow:hidden}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{background:rgba(24,19,29,0)}to{background:rgba(24,19,29,.66)}}

@media(max-width:560px){
  .contact-modal{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:20px}
  .contact-modal__content{max-height:calc(100dvh - 20px);padding:26px 22px}
  .contact-modal__header{gap:14px}
  .contact-modal__close{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .contact-modal[open],.contact-modal::backdrop{animation:none}
}