/* ============================================================
   STUDIO MENTA — Landing de Estandes
   Paleta e estrutura. Fonte: Muli (local).
   ============================================================ */

/* ---------- Fonte Muli (local) ---------- */
@font-face{
  font-family:'Muli';
  src:url('assets/fonts/Muli-Regular.woff2') format('woff2'),
      url('assets/fonts/Muli-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Muli';
  src:url('assets/fonts/Muli-Bold.woff2') format('woff2'),
      url('assets/fonts/Muli-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --green:        #6f9080;   /* verde principal (botões / cards / form) */
  --green-dark:   #5c7c6c;
  --green-light:  #B3C9B5;   /* verde da faixa de logos */
  --green-soft:   #dce8dd;   /* fundo do card "Studio Menta" no comparativo */
  --ink:          #2f2f2f;   /* texto escuro */
  --ink-soft:     #555;
  --white:        #ffffff;
  --neutral:      #9aa0a3;   /* header cinza do card "montadora" */
  --neutral-bg:   #f1f3f4;
  --black:        #111111;
  --footer-bg:    #262626;
  --radius:       10px;
  --maxw:         1180px;
  --header-h:     64px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Muli', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  line-height:1.5;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Placeholder genérico (imagens que virão depois) ---------- */
.placeholder{
  position:relative;
  background:
    repeating-linear-gradient(45deg,#e9e9e9 0 12px,#e2e2e2 12px 24px);
  border:1px dashed #bcbcbc;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8a8a8a;
  overflow:hidden;
}
.placeholder__label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  padding:6px 10px;
  background:rgba(255,255,255,.7);
  border-radius:6px;
  pointer-events:none;
}

/* ---------- Títulos de seção ---------- */
.section-title{
  font-size:30px;
  font-weight:700;
  text-align:center;
  color:var(--ink);
  line-height:1.25;
  margin-bottom:14px;
}
.section-title--left{ text-align:left; }
.section-subtitle{
  text-align:center;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 auto 42px;
  font-size:16px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  padding:15px 30px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:filter .15s ease, transform .05s ease;
  text-align:center;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--green); color:var(--white); }
.btn--dark,
.btn--whatsapp{ background:var(--black); color:var(--white); }
.btn--whatsapp{ font-size:14px; padding:11px 22px; }
.btn--whatsapp-dark{ background:var(--black); }
.btn--block{ width:100%; }

/* ícone whatsapp (imagem real, branco sobre botão preto) */
.btn__wa-icon{
  width:17px; height:17px;
  flex:0 0 auto;
  filter:brightness(0) invert(1);
}

.cta-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-top:28px;
}
.cta-group--center{ align-items:center; }

/* ============================================================
   HEADER FIXO
   ============================================================ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.site-header__logo img{ height:34px; width:auto; filter:brightness(0); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:640px;
  margin-top:var(--header-h);
  display:flex;
  align-items:center;
  color:var(--white);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  z-index:0;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.15));
  z-index:1;
}
.hero__content{
  position:relative;
  z-index:2;
  text-align:center;
  padding-top:60px;
  padding-bottom:60px;
}
.hero__eyebrow{
  font-size:18px;
  font-weight:400;
  margin-bottom:14px;
}
.hero__title{
  font-size:52px;
  font-weight:700;
  line-height:1.12;
  max-width:820px;
  margin:0 auto 24px;
}
.hero__subtitle{
  font-size:18px;
  font-weight:400;
  max-width:560px;
  margin:0 auto;
  opacity:.95;
}
.hero .cta-group{ align-items:center; }

/* ============================================================
   FAIXA DE CLIENTES / LOGOS
   ============================================================ */
.clients{ padding:34px 0 8px; text-align:center; }
.clients__title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:18px;
  font-size:16px;
}

/* --- faixa animada (mantida do snippet original) --- */
.sm-logos{
  width:100%;
  background:var(--green-light);
  overflow:hidden;
  padding:22px 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  box-sizing:border-box;
}
.sm-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:sm-scroll 45s linear infinite;
}
.sm-logos:hover .sm-track{ animation-play-state:paused; }
.sm-track img{
  height:38px;
  width:auto;
  margin:0 38px;
  object-fit:contain;
  flex:0 0 auto;
  filter:brightness(0) saturate(100%) invert(18%) sepia(12%) saturate(900%) hue-rotate(75deg);
  opacity:.92;
}
@keyframes sm-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media(max-width:600px){
  .sm-track img{ height:30px; margin:0 26px; }
  .sm-track{ animation-duration:32s; }
}

/* ============================================================
   PROJETOS (GALERIA)
   ============================================================ */
.projects{ padding:64px 0; }
.projects__grid{ margin-bottom:8px; }
.projects__row{
  display:grid;
  gap:16px;
  margin-bottom:16px;
}
/* larguras desiguais reproduzindo a composição de referência */
.projects__row--1{ grid-template-columns:1fr 1.35fr 1.35fr; }
.projects__row--2{ grid-template-columns:1.7fr 1.35fr 0.95fr; }

.project-card{
  height:250px;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  padding:0;
  border:none;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.project-card img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .3s ease;
}
.project-card.placeholder{ border:1px dashed #bcbcbc; }
.project-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18); }
.project-card:hover img{ transform:scale(1.04); }

/* ============================================================
   COMPARATIVO
   ============================================================ */
.compare{ padding:56px 0; background:#fafafa; }
.compare__cards{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:18px;
  max-width:860px;
  margin:36px auto 0;
}
.compare-card{
  flex:1;
  border-radius:10px;
  overflow:hidden;
  background:var(--neutral-bg);
}
.compare-card__head{
  color:var(--white);
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  padding:14px 20px;
}
.compare-card--neutral .compare-card__head{ background:var(--neutral); }
.compare-card--brand{ background:var(--green-soft); }
.compare-card--brand .compare-card__head{ background:var(--green); }
.compare-card__list{
  list-style:none;
  padding:18px 24px 24px;
}
.compare-card__list li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
  font-size:15px;
  color:var(--ink);
}
.compare-card__list li::before{
  content:"•";
  position:absolute; left:0;
  color:var(--ink-soft);
}
.compare__x{
  align-self:center;
  color:#c7c7c7;
  font-size:26px;
  font-weight:700;
  flex:0 0 auto;
}

/* ============================================================
   PASSOS (COMO FUNCIONA)
   ============================================================ */
.steps{ padding:64px 0; }
.steps__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:960px;
  margin:0 auto;
  text-align:center;
}
.step__icon{ height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.step__icon img{ height:56px; width:auto; }
.step__title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  margin-bottom:10px;
}
.step__text{ color:var(--ink-soft); font-size:15px; max-width:280px; margin:0 auto; }

.steps__line{
  position:relative;
  max-width:960px;
  margin:26px auto 0;
  height:2px;
  background:var(--green);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0 14%;
}
.steps__dot{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--green);
}

/* ============================================================
   DEPOIMENTO / INSTAGRAM
   ============================================================ */
.testimonial{ padding:64px 0; }
.testimonial__inner{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:48px;
  align-items:start;
}
.testimonial__card{
  background:var(--green);
  color:var(--white);
  border-radius:10px;
  padding:30px 44px;
  margin-top:24px;
  position:relative;
  text-align:center;
}
.testimonial__quote{ font-size:14px; line-height:1.6; opacity:.95; min-height:150px; }
.testimonial__stars{ margin-top:18px; letter-spacing:3px; }
.testimonial__author{ font-weight:700; margin-top:14px; }
.testimonial__role{ font-size:13px; opacity:.9; }
.testimonial__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:26px; line-height:1;
  background:none; border:none; color:#fff;
  opacity:.75; cursor:pointer; padding:6px 8px;
  transition:opacity .15s;
  font-family:inherit;
}
.testimonial__nav:hover{ opacity:1; }
.testimonial__nav--prev{ left:6px; }
.testimonial__nav--next{ right:6px; }
.testimonial__dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:18px;
}
.testimonial__dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none; padding:0; cursor:pointer;
  transition:background .15s;
}
.testimonial__dot.is-active{ background:#fff; }

/* embed oficial do Instagram */
.testimonial__right{ min-width:0; }
.testimonial__right .instagram-media{
  margin:0 auto !important;
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.form-section{ padding:70px 0 90px; }
.form-section__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:0;
  max-width:1120px;
}
.form-card{
  background:var(--green);
  color:var(--white);
  padding:44px 48px;
  border-radius:4px;
  z-index:2;
}
.form-card__title{
  font-size:32px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:28px;
}
.form{ display:flex; flex-direction:column; gap:14px; }
.form__input{
  font-family:inherit;
  font-size:15px;
  padding:14px 16px;
  border:none;
  border-radius:4px;
  background:var(--white);
  color:var(--ink);
}
.form__input::placeholder{ color:#9a9a9a; }
.form__consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.4;
  margin:6px 0 8px;
}
.form__consent input{ margin-top:3px; flex:0 0 auto; }
.form__message{
  margin-top:14px;
  padding:12px 16px;
  border-radius:6px;
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.form__message--ok{ background:rgba(255,255,255,.92); color:var(--green-dark); }
.form__message--err{ background:#fbeaea; color:#a33; }
.form-section__image{
  border-radius:4px;
  margin:24px 0 24px -40px;
  min-height:420px;
  overflow:hidden;
}
.form-section__image img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer{ background:var(--footer-bg); color:var(--white); padding:40px 0 24px; }
.site-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer__logo{ height:40px; width:auto; filter:brightness(0) invert(1); }
.site-footer__social{ display:flex; gap:18px; }
.social-icon{
  display:inline-flex;
  opacity:.92;
  transition:opacity .15s;
}
.social-icon:hover{ opacity:1; }
.social-icon img{
  width:28px; height:28px;
  filter:brightness(0) invert(1); /* ícones pretos -> brancos no rodapé escuro */
}
.site-footer__bottom{
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  font-size:13px;
  color:rgba(255,255,255,.7);
}
.site-footer__credit strong{ color:var(--white); }

/* ============================================================
   MODAL DE PROJETOS
   ============================================================ */
.modal{
  position:fixed; inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal.is-open{ display:flex; }
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.modal__box{
  position:relative;
  z-index:2;
  background:var(--white);
  border-radius:8px;
  max-width:1000px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal__close{
  position:absolute; top:14px; right:16px;
  z-index:3;
  background:none; border:none;
  font-size:22px; color:#888;
  cursor:pointer;
}
.modal__media{
  position:relative;
  min-height:460px;
  border:none;
  background:#000;
}
.modal__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:absolute;
  inset:0;
}
.modal__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  background:rgba(0,0,0,.55); color:#fff;
  border:none; cursor:pointer;
  width:36px; height:52px;
  font-size:24px;
}
.modal__arrow--prev{ left:0; }
.modal__arrow--next{ right:0; }
.modal__content{ padding:48px 40px; display:flex; flex-direction:column; justify-content:center; }
.modal__title{ font-size:26px; font-weight:700; margin-bottom:18px; text-align:right; }
.modal__text{ color:var(--ink-soft); font-size:15px; line-height:1.7; text-align:right; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media(max-width:900px){
  .hero__title{ font-size:36px; }
  .projects__grid{ grid-template-columns:repeat(2,1fr); }
  .compare__cards{ flex-direction:column; }
  .compare__x{ transform:rotate(90deg); }
  .steps__grid{ grid-template-columns:1fr; }
  .steps__line{ display:none; }
  .testimonial__inner{ grid-template-columns:1fr; }
  .testimonial__right{ max-width:380px; margin:0 auto; }
  .section-title--left{ text-align:center; }
  .form-section__inner{ grid-template-columns:1fr; }
  .form-section__image{ margin:0; min-height:260px; }
  .modal__box{ grid-template-columns:1fr; }
  .modal__title, .modal__text{ text-align:left; }
}
@media(max-width:560px){
  .hero__title{ font-size:30px; }
  .section-title{ font-size:24px; }
  .projects__grid{ grid-template-columns:1fr; }
  .container{ padding:0 18px; }
  .form-card{ padding:32px 24px; }
}