/* ================================================================
   00) TOKENS
   ================================================================ */
:root{
  --brand:        #582c5c;
  --brand-700:    #6d3770;
  --accent:       #cba3b1;
  --ink:          #5a207b;
  --ink-on-dark:  #ffffff;
  --paper:        #ffffff;

  --paper-80:     rgba(255,255,255,.8);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-2xl:   0 25px 50px -12px rgba(0,0,0,.25);

  --radius-full:  9999px;
  --radius-card:  12px;

  --container-w:  80rem; /* ~1280px */

  /* Ritmo vertical (base desktop/tablet; mobile no bloco final) */
  --space-y-md: 64px;
  --space-y-lg: 80px;
}

/* ================================================================
   01) BASE
   ================================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body{
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background-image: url(images/background.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ display: block; max-width: 100%; height: auto; }

/* ================================================================
   02) NAV
   ================================================================ */
.nav{
  display: flex; justify-content: center; gap: 3rem;
  padding: 2rem 1rem 0; color: var(--ink);
}

.nav__link{
  font-size: 1.125rem; font-weight: 500; color: var(--ink);
  text-decoration: none; transition: opacity .15s ease;
}
.nav__link:hover{ opacity: .7; }
@media (min-width:1280px){
  .nav__link{ font-size: 24px; font-weight: 400; }
}

/* ================================================================
   03) HERO
   ================================================================ */
.hero{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px 32px; /* padding base; mobile é ajustado no bloco final */
  overflow-x: hidden;
}
.hero__logoWrap{ position: relative; z-index: 10; margin: 0px 0 48px; }
.hero__lead{
  position: relative; z-index: 10;
  text-align: center; color: var(--ink);
  max-width: 60rem; margin: 0 auto 40px;
  font-weight: 300; font-size: 18px;
}
.hero__ctaRow{
  position: relative; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  padding: 0 10px;
}

@media (min-width:1280px){ .hero__lead{ font-size: 28px; } }
@media (min-width:640px){ .hero__ctaRow{ padding: 0 50px; } }

/* ================================================================
   04) BOTÕES
   ================================================================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap; font-weight: 500;
  text-decoration: none; user-select: none;
  border-radius: var(--radius-full);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn--ghost{
  padding: 10px 20px; font-size: 1.125rem; font-weight: bold; line-height: 1.5rem;
  background: var(--paper-80); color: var(--ink);
  border: 1px solid #fff; box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover{ background: #fff; }
.btn--solid{
  padding: 24px 40px; font-size: 1.125rem; line-height: 1.75rem;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-lg);
}
.btn--solid:hover{ background: var(--brand-700); }

/* ================================================================
   05) SEÇÕES E TÍTULOS
   ================================================================ */
.section{ width: 100%; }
@media (min-width:1280px){ .section{ padding: var(--space-y-lg) 16px; } }

.hero + .section { padding-top: 48px !important; }

.section--white{ background: #fff; }
.section--accent{ background: var(--accent); opacity: 0.8; position: relative; overflow: hidden; }

.section--padXL{
  padding-left: clamp(16px, 8vw, 100px);
  padding-right: clamp(16px, 8vw, 100px);
}

.section__wrap{ max-width: var(--container-w); margin: 0 auto; box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
.section__ctaRight{
  max-width: var(--container-w); margin: 32px auto 0;
  display: flex; justify-content: flex-end; padding: 0 16px;
}

.section__title{
  margin: 0 0 48px;
  text-align: center;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: .01em;
}
@media (min-width:768px){ .section__title{ font-size: 46px; } }
.section__title--ink{ color: var(--ink); }
.section__title--white{ color: #fff; }

/* ================================================================
   06) SPARKLES
   ================================================================ */
@keyframes twinkle{
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.6); }
}
.sparkles{
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.sparkleDot{
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; opacity: .6; animation-name: twinkle; animation-iteration-count: infinite;
  will-change: opacity, transform;
}

/* ================================================================
   07) COMO FUNCIONA
   ================================================================ */

.section--tight {
    padding-bottom: 0;
    width: 100%;
    background-color: #a5608e;
}

/* container principal do bloco de processo (fundo full-width) */
.process {
  padding: 32px 0;           /* altura visual da faixa; ajuste se quiser menor/maior */
  box-sizing: border-box;
}

/* wrap interno: conteúdo centralizado e com gutter interno */
.process__wrap {
  max-width: var(--container-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;   /* gutter interno para mobile */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* imagem dos gatos (mantém proporção e limitado em altura) */
.process__img {
  display: block;
  max-width: 100%;
  max-height: 220px; /* ajuste fino */
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* labels abaixo da imagem (criar | experimentar | ...) */
.process__labels {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  color: #fff;
  font-weight: 600;
  font-family: inherit;
}

/* estilo individual das labels */
.process__label {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* separador visual entre labels (barra) */
.process__sep {
  color: rgba(255,255,255,0.8);
  opacity: 0.9;
  margin: 0 .25rem;
}

/* alternativa: passos dentro de faixa (se for usar .process__steps) */
.process__steps {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* garante que ilustrações e fases estejam centralizadas e não "empurrem" o container */
.illus,
.phases {
  max-width: var(--container-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* layout das fases (grid, responsivo) */
.phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  margin: 24px auto 0;
}
@media (min-width:768px){
  .phases { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* títulos e textos das fases (mantém cor branca, sem bagunçar alinhamento) */
.phase__title{
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.phase__text{
  color: #fff;
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
}

/* pequenas proteções contra overflow horizontal inesperado */
.process,
.section,
.formats,
.footer {
  box-sizing: border-box;
}

/* Regra final de fallback: centraliza como “last resort” se algo ainda deslocar */
.section--tight .process__wrap,
.section--tight .illus,
.section--tight .phases {
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}


/* ================================================================
   08) PULO DO GATO
   ================================================================ */
.pgato{ max-width: 80rem; margin: 0 auto; position: relative; box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
.pgato .section__title { margin: 0; text-align: left; }
.pgato__copy{ max-width: 55rem; }
.pgato__note{ color: #fff; margin: 0 0 48px; font-style: italic; text-align: right; }
.pgato__list{ list-style: none; padding: 0; margin: 0; }
.pgato__item{
  display: flex; gap: 12px; align-items: flex-start; color: #fff;
  font-size: 24px; line-height: 1.15; margin-bottom: 24px;
}
.pgato__cat{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 24rem; display: none;
}
.pgato__cat img{ width: 100%; height: auto; }
@media (min-width:768px){ .pgato__cat{ display: block; } }
@media (max-width:640px){ .pgato__item{ font-size: 18px; } .pgato .section__title { font-size: 18px;}}

/* ================================================================
   09) ONDE ESTOU (polaroids)
   ================================================================ */
.levels{
  display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 48px;
}
@media (min-width:768px){ .levels{ grid-template-columns: repeat(3,1fr); } }

.polaroid{
  background: var(--paper); padding: 16px; border-radius: var(--radius-card);
  box-shadow: var(--shadow-2xl);
  transform: rotate(0deg);
  transition: transform .3s ease;
}
.polaroid--rotL{ transform: rotate(-2deg); }
.polaroid--rotR{ transform: rotate(1deg); }
.polaroid:hover{ transform: rotate(0deg); }

.polaroid__media{
  aspect-ratio: 1 / 1; margin-bottom: 16px; overflow: hidden; position: relative;
}
.polaroid__media img{ width: 100%; height: 100%; object-fit: cover; }
.bg--gray{ background: #e5e7eb; }
.bg--orange{ background: #fed7aa; }

.polaroid--over{ position: relative; overflow: visible; }
.polaroid__flycat{
  position: absolute; top: 0; right: 0; width: 60%; height: auto; pointer-events: none;
  transform: translate(20%, -10%);
  z-index: 10;
}

.polaroid__text{ text-align: center; }
.polaroid__title{ font-size: 1.125rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.polaroid__desc{ font-size: .875rem; color: var(--ink); margin: 0; }

/* ================================================================
   10) FORMATOS
   ================================================================ */
.formats {
  background-color: #5b1f74; /* roxo da faixa */
  text-align: center;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  box-sizing: border-box;
}
.formats__wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-family: inherit;        /* herda Nunito do body */
  font-weight: 200;
  color: #fff;
  font-size: 4rem;
  text-transform: uppercase;
}
.formats__item:not(:last-child)::after {
  content: ">>";
  margin-left: 2rem;
  color: #fff;
  opacity: 0.8;
  font-size: 1.5rem;
}

/* ================================================================
   11) O QUE JÁ FIZEMOS
   ================================================================ */
.portfolio{
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start;
}
@media (min-width:768px){ .portfolio{ grid-template-columns: 1fr 1fr; } }
.portfolio__main{ display: none; }
@media (min-width:768px){
  .portfolio__main{ display: block; }
  .portfolio__main img{ width: 100%; height: auto; object-fit: contain; max-height: 600px; }
}
.portfolio__list{ display: grid; gap: 24px; }

.proj{
  display: grid; grid-template-columns: 12rem 1fr; gap: 24px;
  padding-bottom: 24px; border-bottom: 1px solid #e5e7eb;
}
.proj:last-child{ border-bottom: 0; padding-bottom: 0; }
.proj__thumb{ width: 12rem; height: 7rem; border-radius: var(--radius-card); overflow: hidden; }
.proj__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.bg--pink{ background: #fce7f3; }
.bg--orangeSoft{ background: #ffedd5; }
.bg--redSoft{ background: #fee2e2; }
.bg--red{ background: #fecaca; }

.proj__phase{ font-size: .75rem; color: var(--ink); font-weight: bold; margin: 0 0 4px; }
.proj__title{ font-size: 1.5rem; font-weight: 300; color: var(--ink); margin: 0 0 8px; }
.proj__link{ color: var(--ink); text-decoration: underline; }
.proj__link:hover{ text-decoration: none; }
.proj__link--static{ color: var(--ink); text-decoration: underline; margin: 0; }

/* ================================================================
   12) FOOTER
   ================================================================ */
.footer{ width: 100%; box-sizing: border-box; }
.footer__inner{
  padding: 64px 16px; max-width: var(--container-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  box-sizing: border-box;
}
.footer__brand img{ width: 20rem; height: auto; object-fit: cover; }
.footer__contact{ text-align: right; }
.footer__contact h2{ margin: 0 0 8px; color: #fff; font-size: 1.875rem; font-weight: 300; }
.footer__contact a{ color: #fff; font-size: 1.25rem; text-decoration: underline; }
.footer__contact a:hover{ opacity: .8; }
.footer__bar{ background: var(--brand); height: 48px; }

/* ================================================================
   X) MOBILE OVERRIDES (tudo centralizado aqui)
   ================================================================ */

/* <= 768px (tablets e celulares “grandes”) */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-bottom: 20px;
    padding-top: 60px;
  }
  .section { padding: 40px 16px; }
  .section--padXL {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: clamp(16px, 8vw, 100px);
    padding-right: clamp(16px, 8vw, 100px);
  }
  .section__title { font-size: 24px; margin-bottom: 40px; }
  .formats__wrap {
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.3rem;
  }
  .formats__divider { display: none; }
  .process__steps {
    display: flex; justify-content: center; gap: 1rem;
    font-family: inherit; font-weight: bold; font-size: 1rem;
    color: #fff; margin-bottom: 0; margin-top: -10px;
  }
}

/* <= 480px (celulares pequenos) */
@media (max-width: 480px) {
  :root { --mobile-x: 16px; }
  .nav,
  .hero,
  .section__wrap,
  .footer__inner {
    padding-left: var(--mobile-x);
    padding-right: var(--mobile-x);
    box-sizing: border-box;
  }
  .pgato {
    padding-left: calc(var(--mobile-x) - 6px);
    padding-right: calc(var(--mobile-x) - 6px);
    box-sizing: border-box;
  }
  .nav { gap: 0.5rem; padding: 10px 6px; }
  .section { padding-top: 32px; padding-bottom: 48px; }
  .section__title { font-size: 20px; margin-bottom: 32px; }
  .hero__ctaRow { gap: 16px; }
  .pgato__item{ font-size: 14px; }
}

/* END */