/* ==========================================================================
   Imaginar Soluções Criativas — design tokens
   ========================================================================== */
:root{
  --magenta: #EA1E8B;
  --magenta-dark: #B71570;
  --magenta-soft: #FDE6F2;
  --yellow: #FFF112;
  --yellow-soft: #FFF9CE;
  --yellow-deep: #F4C430;
  --graphite: #221F20;
  --graphite-soft: #4A4547;
  --off-white: #F8F6F2;
  --off-white-2: #F1EEE8;
  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --fs-hero: clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem);
  --fs-section: clamp(2.125rem, 1.6rem + 2.4vw, 4rem);
  --fs-manifesto: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  --container: 1240px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--off-white);
  color: var(--graphite);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}
@media(min-width:768px){ .container{ padding-inline: 40px; } }

.eyebrow{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--magenta);
  margin-bottom:14px;
}
.eyebrow--claro{ color: var(--yellow); }

.section-title{
  font-size: var(--fs-section);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  max-width: 16ch;
}
.section-title--claro{ color: var(--white); }

.section-sub{
  margin-top:18px;
  max-width: 46ch;
  color: var(--graphite-soft);
}

.placeholder-info{
  display:inline-block;
  margin-top:10px;
  padding: 6px 12px;
  font-size:.78rem;
  font-weight:600;
  border-radius: 999px;
  background: var(--yellow-soft);
  border:1px dashed var(--yellow-deep);
  color:#7a5b00;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight:700;
  font-size:.95rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background: var(--magenta); color: var(--white); }
.btn--primary:hover{ background: var(--magenta-dark); transform: translateY(-2px); }
.btn--secondary{ background:transparent; color: var(--graphite); border:1.5px solid rgba(34,31,32,.25); }
.btn--secondary:hover{ border-color: var(--graphite); transform: translateY(-2px); }
.btn--claro{ background: var(--yellow); color: var(--graphite); }
.btn--claro:hover{ background: var(--white); transform: translateY(-2px); }

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:100;
  padding: 18px 0;
  transition: padding .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.header.is-scrolled{
  padding: 10px 0;
  background: rgba(248,246,242,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(34,31,32,.06);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header__logo{ display:flex; align-items:center; gap:8px; color: var(--magenta); flex-shrink:0; }
.header__mark{ width:32px; height:32px; }
.header__word{ font-size:1.3rem; font-weight:800; line-height:1; display:flex; flex-direction:column; }
.header__word small{ font-size:.5rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--graphite-soft); }
.header__logo--footer{ color: var(--yellow); }
.header__logo--footer .header__word small{ color: rgba(248,246,242,.6); }

.header__nav{ display:none; gap:32px; font-weight:600; font-size:.95rem; }
.header__nav a{ position:relative; padding:4px 0; }
.header__nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--magenta);
  transition: width .25s var(--ease);
}
.header__nav a:hover::after{ width:100%; }
.header__cta{ display:none; }
.header__burger{
  width:40px; height:40px; border:none; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.header__burger span{ width:22px; height:2px; background: var(--graphite); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.header__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.header__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; top:0;
  background: var(--off-white);
  display:flex; flex-direction:column; justify-content:center; gap:36px;
  padding: 40px 24px;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  z-index:99;
}
.mobile-menu.is-open{ transform:none; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:22px; }
.mobile-menu nav a{ font-size:1.6rem; font-weight:800; }
.mobile-menu .btn{ align-self:flex-start; }

@media(min-width:1024px){
  .header__nav{ display:flex; }
  .header__cta{ display:inline-flex; }
  .header__burger{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding: 56px 0 80px; overflow:hidden; }
.hero__inner{ display:flex; flex-direction:column; gap:48px; }
.hero__content{ max-width: 640px; }
.hero__headline{
  font-size: var(--fs-hero);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  max-width: 11ch;
}
.hero__headline .hl{ color: var(--magenta); }
.hero__sub{ margin-top:24px; max-width:42ch; color: var(--graphite-soft); font-size:1.05rem; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__visual{ position:relative; }
.hero__shape{ position:absolute; border-radius:50%; z-index:0; }
.hero__shape--yellow{ width:180px; height:180px; background: var(--yellow); top:-40px; right:-40px; opacity:.85; }
.hero__shape--magenta{ width:120px; height:120px; background: var(--magenta-soft); bottom:10%; left:-30px; }

/* placeholder photo blocks */
.ph{
  position:relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--off-white-2), #E7E2D8);
  border:1px solid rgba(34,31,32,.08);
  overflow:hidden;
  z-index:1;
}
.ph--dark{ background: linear-gradient(155deg, #2E2A2B, #1a1717); border-color: rgba(255,255,255,.08); }
.ph__body{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  height:100%; padding:32px; text-align:center;
  color: rgba(34,31,32,.45);
}
.ph--dark .ph__body{ color: rgba(255,255,255,.4); }
.ph__icon{ width:34px; height:34px; }
.ph__body p{ font-size:.78rem; font-weight:600; max-width:22ch; letter-spacing:.01em; }
.ph__tag{
  position:absolute; top:18px; left:18px; z-index:2;
  background: rgba(34,31,32,.85); color: var(--white);
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  padding:6px 12px; border-radius:999px;
}

.ph--main{ aspect-ratio: 4/5; width:100%; }
.ph--small{ aspect-ratio: 1/1; width:44%; position:absolute; right:-6%; bottom:-8%; box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.ph--overlap{ border: 4px solid var(--off-white); }
.ph--wide{ aspect-ratio: 16/11; width:100%; }
.ph--tall{ aspect-ratio: 3/4; width:100%; }

@media(min-width:1024px){
  .hero__inner{ flex-direction:row; align-items:center; gap:40px; }
  .hero__content{ flex: 0 0 54%; }
  .hero__visual{ flex: 0 0 40%; }
}

/* ==========================================================================
   FAIXA DE AMPLITUDE
   ========================================================================== */
.faixa{ background: var(--magenta); color: var(--off-white); padding: 40px 0 28px; overflow:hidden; }
.faixa__title{ font-weight:800; font-size:1.15rem; margin-bottom:22px; }
.faixa__track{ display:flex; width:max-content; animation: marquee 38s linear infinite; }
.faixa__group{ display:flex; align-items:center; gap:14px; padding-right:14px; font-weight:600; font-size:1rem; white-space:nowrap; }
.faixa__group .dot{ color: var(--yellow); font-weight:800; }
.faixa:hover .faixa__track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media(prefers-reduced-motion: reduce){ .faixa__track{ animation:none; overflow-x:auto; } }

/* ==========================================================================
   SOLUÇÕES
   ========================================================================== */
.solucoes{ padding: 96px 0 40px; }
.bloco{ padding: 56px 0; }
.bloco__inner{ display:flex; flex-direction:column; gap:32px; }
.bloco__visual{ position:relative; }
.bloco__num{
  position:absolute; top:-22px; left:-6px; z-index:2;
  font-size:4.5rem; font-weight:800; color: var(--off-white);
  -webkit-text-stroke: 1.5px rgba(34,31,32,.15);
  line-height:1;
}
.bloco__content h3{ font-size: clamp(1.5rem,1.2rem + 1.4vw,2.1rem); font-weight:800; max-width:14ch; line-height:1.15; }
.bloco__label{ margin-top:10px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--magenta); }
.bloco__lista{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.bloco__lista li{
  padding-left:20px; position:relative; font-weight:600; color: var(--graphite-soft);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.bloco__lista li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background: var(--yellow-deep); }
.bloco__lista li:hover{ transform: translateX(4px); color: var(--graphite); }

@media(min-width:1024px){
  .bloco__inner{ flex-direction:row; align-items:center; gap:64px; }
  .bloco__visual, .bloco__content{ flex:1; }
  .bloco--inverso .bloco__inner{ flex-direction:row-reverse; }
}

/* ==========================================================================
   PORTFÓLIO
   ========================================================================== */
.portfolio{ padding: 40px 0 100px; }
.galeria{
  margin-top:48px;
  display:grid; grid-template-columns: repeat(2,1fr); gap:16px;
}
.galeria__item{ min-height:220px; cursor:pointer; }
.galeria__item--big{ grid-column: span 2; aspect-ratio: 16/10; }
.galeria__item--tall{ aspect-ratio: 3/4; }
.galeria__item--wide{ grid-column: span 2; aspect-ratio: 21/9; }
.galeria__cat{
  position:absolute; bottom:16px; left:16px; z-index:2;
  background: rgba(255,255,255,.92); color: var(--graphite);
  font-size:.75rem; font-weight:700; padding:6px 12px; border-radius:999px;
  opacity:0; transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.galeria__item:hover .galeria__cat, .carrossel__item:hover .galeria__cat{ opacity:1; transform:none; }
.galeria__item .ph__body, .carrossel__item .ph__body{ transition: transform .4s var(--ease); }
.galeria__item:hover .ph__body, .carrossel__item:hover .ph__body{ transform: scale(1.03); }
.galeria__aviso{ margin-top:20px; font-size:.82rem; color: var(--graphite-soft); font-style:italic; }

@media(min-width:768px){
  .galeria{ grid-template-columns: repeat(4,1fr); }
  .galeria__item--big{ grid-column: span 2; grid-row: span 2; }
}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{ position:relative; background: var(--magenta); color: var(--white); padding: 110px 0; overflow:hidden; }
.manifesto__shape{
  position:absolute; width:520px; height:520px; right:-160px; top:-160px;
  background: var(--yellow); border-radius:50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity:.9;
}
.manifesto__inner{ position:relative; z-index:1; max-width:820px; }
.manifesto__headline{ font-size: var(--fs-manifesto); font-weight:800; line-height:1.05; letter-spacing:-.01em; }
.manifesto__texto{ margin-top:28px; font-size:1.1rem; max-width:52ch; opacity:.92; }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.funciona{ padding: 100px 0; }
.timeline{ margin-top:56px; display:flex; flex-direction:column; gap:40px; position:relative; }
.timeline::before{ content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background: rgba(34,31,32,.12); }
.timeline__item{ position:relative; padding-left:64px; }
.timeline__num{
  position:absolute; left:0; top:-4px; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; color: var(--white); background: var(--magenta);
}
.timeline__num--circle{ border-radius:50%; }
.timeline__num--quarter{ border-radius: 0 50% 50% 50%; background: var(--yellow-deep); color: var(--graphite); }
.timeline__num--block{ border-radius: var(--radius-sm); }
.timeline__item h3{ font-size:1.25rem; font-weight:800; margin-bottom:8px; }
.timeline__item p{ color: var(--graphite-soft); max-width:46ch; }
.funciona__cta{ margin-top:56px; }

@media(min-width:1024px){
  .timeline{ flex-direction:row; }
  .timeline::before{ left:24px; right:24px; top:23px; bottom:auto; width:auto; height:2px; }
  .timeline__item{ flex:1; padding-left:0; padding-top:64px; }
  .timeline__num{ left:0; top:0; }
}

/* ==========================================================================
   EMPRESAS
   ========================================================================== */
.empresas{ background: var(--graphite); color: var(--white); padding: 96px 0; }
.empresas__inner{ display:flex; flex-direction:column; gap:44px; }
.empresas__texto{ margin-top:22px; color: rgba(248,246,242,.75); max-width:48ch; }
.empresas__lista{ margin-top:26px; display:grid; grid-template-columns: 1fr 1fr; gap:12px 20px; }
.empresas__lista li{ padding-left:18px; position:relative; font-weight:600; font-size:.92rem; color: rgba(248,246,242,.9); }
.empresas__lista li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--yellow); }
.empresas__content .btn{ margin-top:34px; }
.empresas .ph{ background: linear-gradient(155deg, #2E2A2B, #141212); }

@media(min-width:1024px){
  .empresas__inner{ flex-direction:row; align-items:center; gap:64px; }
  .empresas__visual, .empresas__content{ flex:1; }
}

/* ==========================================================================
   PERSONALIZADOS
   ========================================================================== */
.personalizados{ background: var(--yellow-soft); padding: 96px 0; }
.carrossel{
  margin-top:44px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 4px 24px 20px;
  scrollbar-width: thin;
}
@media(min-width:768px){ .carrossel{ padding-inline: 40px; } }
.carrossel__item{
  flex: 0 0 220px; aspect-ratio: 4/5; scroll-snap-align:start; position:relative; cursor:pointer;
  background: linear-gradient(155deg, var(--white), var(--off-white-2));
}
.personalizados__cta{ margin-top:12px; text-align:center; }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.sobre{ padding: 96px 0; }
.sobre__inner{ display:flex; flex-direction:column; gap:40px; }
.sobre__content p{ margin-top:20px; color: var(--graphite-soft); max-width:52ch; }
.sobre__content p:first-of-type{ margin-top:0; }

@media(min-width:1024px){
  .sobre__inner{ flex-direction:row; align-items:center; gap:64px; }
  .sobre__visual, .sobre__content{ flex:1; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding: 96px 0 110px; }
.accordion{ margin-top:44px; max-width:760px; border-top:1px solid rgba(34,31,32,.12); }
.accordion__item{ border-bottom:1px solid rgba(34,31,32,.12); }
.accordion__trigger{
  width:100%; background:none; border:none; padding:22px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:1.02rem; font-weight:700; text-align:left; color: var(--graphite);
}
.accordion__icon{ width:20px; height:20px; flex-shrink:0; transition: transform .3s var(--ease); color: var(--magenta); }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform: rotate(180deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.accordion__panel p{ padding: 0 4px 22px; color: var(--graphite-soft); max-width:60ch; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-final{ position:relative; background: var(--magenta); color: var(--white); padding: 120px 0; overflow:hidden; text-align:left; }
.cta-final__shape{ position:absolute; background: var(--yellow); border-radius:50%; opacity:.9; }
.cta-final__shape--top{ width:280px; height:280px; top:-140px; right:-100px; }
.cta-final__shape--bottom{ width:200px; height:200px; bottom:-100px; left:-80px; clip-path: polygon(0 0,100% 0,100% 100%); }
.cta-final__inner{ position:relative; z-index:1; }
.cta-final__headline{ font-size: var(--fs-manifesto); font-weight:800; line-height:1.05; }
.cta-final__headline span{ color: var(--yellow); }
.cta-final__texto{ margin-top:26px; max-width:52ch; opacity:.92; font-size:1.05rem; }
.cta-final .btn{ margin-top:38px; }

@media(max-width:640px){
  .cta-final .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--graphite); color: rgba(248,246,242,.75); padding: 70px 0 30px; }
.footer__inner{ display:flex; flex-direction:column; gap:44px; }
.footer__brand p{ margin-top:16px; max-width:34ch; font-size:.88rem; }
.footer__col-title{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--yellow); margin-bottom:16px; }
.footer__nav, .footer__contato{ display:flex; flex-direction:column; gap:12px; font-size:.92rem; }
.footer__nav a:hover, .footer__contato a:hover{ color: var(--white); }
.footer__contato .placeholder-info{ background:transparent; border-color: rgba(255,241,18,.4); color: var(--yellow); margin-top:4px; }
.footer__copy{ margin-top:56px; font-size:.78rem; opacity:.5; }

@media(min-width:768px){
  .footer__inner{ flex-direction:row; justify-content:space-between; gap:40px; }
}