/* ═══════════════════════════════════════════════════
   4R Montagens — Styles (Light Theme)
   Design System: Space Grotesk + Inter, grafite + bege
   ═══════════════════════════════════════════════════ */

/* ─── Reset & Tokens ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* brand */
  --grafite:       #2E353B;
  --grafite-light: #3D454C;
  --grafite-90:    rgba(46,53,59,.9);
  --bege:          #B8AC97;
  --bege-dark:     #9E9280;
  --bege-pale:     #E8E2D8;
  --bege-10:       rgba(184,172,151,.1);
  --bege-20:       rgba(184,172,151,.2);

  /* neutrals */
  --white:       #FFFFFF;
  --offwhite:    #F7F5F2;
  --cinza-bg:    #FAFAF9;
  --cinza-claro: #E0DDD8;
  --cinza-borda: #D4D0CA;
  --cinza-texto: #6B7280;

  /* feedback */
  --green:  #22C55E;
  --red:    #EF4444;

  /* shadows */
  --shadow-sm:  0 1px 3px rgba(46,53,59,.06);
  --shadow-md:  0 4px 12px rgba(46,53,59,.08);
  --shadow-lg:  0 12px 32px rgba(46,53,59,.12);
  --shadow-xl:  0 20px 48px rgba(46,53,59,.16);

  /* spacing */
  --section-y: clamp(5rem, 10vw, 8rem);

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* transitions */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --t-fast: .2s;
  --t-base: .35s;
  --t-slow: .6s;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--grafite);
  background:var(--white);
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ─── Container ─── */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
}

/* ─── Typography ─── */
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.15}
h1{font-size:clamp(2.5rem,5vw,4rem)}
h2{font-size:clamp(2rem,3.5vw,3rem)}
h3{font-size:clamp(1.15rem,2vw,1.35rem)}

.section__tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bege-dark);
  margin-bottom:.75rem;
}

.section__title{
  margin-bottom:1rem;
  color:var(--grafite);
}
.section__title--center{text-align:center}

.section__intro{
  max-width:640px;
  color:var(--cinza-texto);
  margin-bottom:3rem;
  font-size:1.05rem;
}

/* ─── Sections ─── */
.section{
  padding:var(--section-y) 0;
}
.section--alt{
  background:var(--offwhite);
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:.95rem;
  padding:.75rem 1.75rem;
  border-radius:var(--radius-md);
  border:2px solid transparent;
  cursor:pointer;
  transition:all var(--t-base) var(--ease-out);
  white-space:nowrap;
}
.btn--lg{padding:.9rem 2.25rem;font-size:1rem}
.btn--primary{
  background:var(--grafite);color:var(--white);
  border-color:var(--grafite);
}
.btn--primary:hover{
  background:var(--grafite-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn--bege{
  background:var(--bege);color:var(--white);
  border-color:var(--bege);
}
.btn--bege:hover{
  background:var(--bege-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn--outline{
  background:var(--white);color:var(--grafite);
  border-color:var(--white);
}
.btn--outline:hover{
  background:rgba(255,255,255,.85);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn--whatsapp{
  background:#25D366;color:var(--white);
  border-color:#25D366;
  justify-content:center;
  width:100%;
}
.btn--whatsapp:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:all var(--t-base) var(--ease-out);
}
.header--scrolled{
  border-bottom-color:var(--cinza-borda);
  box-shadow:var(--shadow-sm);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.header__logo{display:flex;align-items:center}
.header__logo-img{
  height:55px;
  width:auto;
}
.footer__logo-link{display:inline-block}
.footer__logo-img{
  height:70px;
  width:auto;
}

/* Nav */
.nav__list{display:flex;gap:2rem;align-items:center}
.nav__link{
  position:relative;
  font-size:.9rem;font-weight:500;
  color:var(--grafite);
  padding:.25rem 0;
  transition:color var(--t-fast);
}
.nav__link::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;
  background:var(--bege);
  transition:width var(--t-base) var(--ease-out);
}
.nav__link:hover,.nav__link.active{color:var(--bege-dark)}
.nav__link:hover::after,.nav__link.active::after{width:100%}

.header__cta{font-size:.85rem;padding:.6rem 1.4rem}

/* ── Hamburger ── */
.nav-toggle{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:.5rem;
}
.nav-toggle__bar{
  width:24px;height:2px;
  background:var(--grafite);
  border-radius:2px;
  transition:all var(--t-base) var(--ease-out);
}
.nav-toggle.active .nav-toggle__bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle.active .nav-toggle__bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:8rem 0 4rem;
  background:var(--white);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/69.jpg') center/cover no-repeat;
  transform:scaleX(-1);
  z-index:0;
  filter:brightness(.9) contrast(1.1);
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.7) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.015) 2px, rgba(255,255,255,.015) 4px);
  z-index:0;
}

/* Accent line top */
.hero__accent-line{
  position:absolute;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--bege),var(--bege-dark),var(--bege));
}

/* Bg pattern */
.hero__bg-pattern{
  display:none;
  position:absolute;top:0;right:0;
  width:50%;height:100%;
  background:
    radial-gradient(ellipse at 80% 20%, var(--bege-10) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 80%, var(--bege-10) 0%, transparent 50%);
  pointer-events:none;
}
.hero__bg-pattern::before{
  content:'';position:absolute;
  top:10%;right:5%;
  width:300px;height:300px;
  border:1px solid var(--bege-20);
  border-radius:50%;
  animation:hero-float 12s ease-in-out infinite;
}
.hero__bg-pattern::after{
  content:'';position:absolute;
  bottom:15%;right:15%;
  width:200px;height:200px;
  border:1px solid var(--bege-20);
  border-radius:50%;
  animation:hero-float 16s ease-in-out infinite reverse;
}

@keyframes hero-float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-20px,20px)}
}

.hero__content{position:relative;z-index:1;text-align:left}

.hero__tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1);
  padding:.4rem 1rem;
  border-radius:var(--radius-sm);
  margin-bottom:1.5rem;
}

.hero__title{
  color:var(--white);
  margin-bottom:1.5rem;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.hero__title-accent{
  color:rgba(255,255,255,.9);
}

.hero__subtitle{
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  color:rgba(255,255,255,.8);
  max-width:580px;
  margin-bottom:2.5rem;
  line-height:1.8;
}

.hero__actions{
  display:flex;gap:1rem;
  flex-wrap:wrap;
  margin-bottom:4rem;
}

/* Hero stats */
.hero__stats{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  padding-top:3rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.stat{text-align:left}
.stat__number{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2rem,3vw,2.75rem);
  font-weight:700;
  color:var(--white);
  line-height:1.1;
}
.stat__number::before{content:'+'}
.stat__label{
  display:block;
  font-size:.8rem;
  color:rgba(255,255,255,.75);
  margin-top:.35rem;
}

/* ═══════════════════════════════════════════════════
   SOBRE
   ═══════════════════════════════════════════════════ */
.sobre__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.sobre__text{
  color:var(--cinza-texto);
  margin-bottom:1.25rem;
  font-size:1.02rem;
}
.sobre__text strong{color:var(--grafite);font-weight:600}

/* Timeline */
.sobre__timeline{margin-top:3rem}

/* Carrossel wrapper */
.tl-carousel{display:flex;align-items:flex-start;gap:.75rem}
.tl-carousel__viewport{overflow:hidden;flex:1}
.tl-carousel__btn{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--cinza-borda);
  background:var(--white);
  color:var(--grafite);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);
  margin-top:8px;
}
.tl-carousel__btn:hover:not(:disabled){
  background:var(--grafite);color:var(--white);border-color:var(--grafite);
}
.tl-carousel__btn:disabled{opacity:.35;cursor:default}

/* Timeline — layout original */
.timeline{
  display:flex;
  position:relative;
  transition:transform .4s var(--ease-out);
  will-change:transform;
}
.timeline__item::before{
  content:'';position:absolute;
  top:16px;left:0;right:0;
  height:2px;
  background:var(--bege-pale);
  z-index:0;
}
.timeline__item{
  flex:0 0 25%;
  text-align:center;
  position:relative;
  padding-top:2.5rem;
}
.timeline__dot{
  position:absolute;
  top:10px;left:50%;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--bege);
  border:3px solid var(--white);
  box-shadow:0 0 0 2px var(--bege);
  transform:translateX(-50%);
  z-index:1;
  transition:all var(--t-base) var(--ease-out);
}
.timeline__item:hover .timeline__dot{
  background:var(--grafite);
  box-shadow:0 0 0 2px var(--grafite);
  transform:translateX(-50%) scale(1.3);
}
.timeline__year{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:1.35rem;
  color:var(--grafite);
  transition:color var(--t-fast);
}
.timeline__item:hover .timeline__year{color:var(--bege-dark)}
.timeline__desc{
  display:block;
  font-size:.85rem;
  color:var(--cinza-texto);
  margin-top:.35rem;
  line-height:1.4;
  max-width:180px;
  margin-left:auto;
  margin-right:auto;
}

/* Visual side */
.sobre__image-wrapper{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.sobre__image{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-lg);
  display:block;
}

.sobre__numbers{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1rem;margin-top:1.5rem;
}
.sobre__number-item{
  background:var(--offwhite);
  padding:1.5rem;
  border-radius:var(--radius-md);
  border:1px solid var(--cinza-borda);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sobre__number-text{text-align:left}
.sobre__number-icon{
  color:var(--bege);
  opacity:.5;
  flex-shrink:0;
}
.sobre__number-value{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.75rem;font-weight:700;
  color:var(--bege-dark);
}
.sobre__number-label{
  display:block;
  font-size:.8rem;
  color:var(--cinza-texto);
  margin-top:.25rem;
}

/* Normas */
.sobre__normas{margin-top:1.5rem}
.sobre__normas-title{
  font-size:.85rem;font-weight:600;
  color:var(--grafite);
  margin-bottom:.75rem;
}
.sobre__normas-list{display:flex;flex-wrap:wrap;gap:.5rem}
.norma-tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;font-weight:600;
  letter-spacing:.04em;
  color:var(--bege-dark);
  background:var(--bege-10);
  border:1px solid var(--bege-20);
  padding:.3rem .75rem;
  border-radius:var(--radius-sm);
  transition:all var(--t-fast);
}
.norma-tag:hover{
  background:var(--bege-20);
  border-color:var(--bege);
}

/* ═══════════════════════════════════════════════════
   SERVIÇOS
   ═══════════════════════════════════════════════════ */
.servicos__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}
.servico-card{
  background:var(--white);
  padding:2rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--cinza-borda);
  transition:all var(--t-base) var(--ease-out);
}
.servico-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--bege);
}
.servico-card__icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bege-10);
  border-radius:var(--radius-md);
  color:var(--bege-dark);
  margin-bottom:1.25rem;
  transition:all var(--t-base) var(--ease-out);
}
.servico-card:hover .servico-card__icon{
  background:var(--bege);
  color:var(--white);
}
.servico-card__title{
  margin-bottom:.75rem;
  color:var(--grafite);
}
.servico-card__desc{
  font-size:.92rem;
  color:var(--cinza-texto);
  line-height:1.7;
}

/* ═══════════════════════════════════════════════════
   PORTFÓLIO
   ═══════════════════════════════════════════════════ */
/* Filters */
.portfolio__filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:2.5rem;
}
.portfolio__filter{
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;font-weight:600;
  padding:.5rem 1.25rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--cinza-borda);
  background:var(--white);
  color:var(--cinza-texto);
  cursor:pointer;
  transition:all var(--t-fast);
}
.portfolio__filter:hover{
  border-color:var(--bege);color:var(--bege-dark);
}
.portfolio__filter.active{
  background:var(--grafite);
  color:var(--white);
  border-color:var(--grafite);
}

/* Grid */
.portfolio__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}
.portfolio__item{
  background:var(--white);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--cinza-borda);
  transition:all var(--t-base) var(--ease-out);
  cursor:pointer;
  overflow:hidden;
}
.portfolio__item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--bege);
}
.portfolio__item.hidden{
  display:none;
}

.portfolio__image{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:all var(--t-base) var(--ease-out);
}
.portfolio__item:hover .portfolio__image{
  transform:scale(1.04);
}
.portfolio__info{padding:1rem 1.15rem 1.15rem}
.portfolio__info h3{
  font-size:.95rem;
  margin-bottom:.25rem;
  color:var(--grafite);
}
.portfolio__info p{
  font-size:.8rem;
  color:var(--cinza-texto);
  margin-bottom:.5rem;
}
.portfolio__client{
  display:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bege-dark);
  background:var(--bege-10);
  padding:.2rem .6rem;
  border-radius:4px;
}

/* ═══════════════════════════════════════════════════
   CLIENTES
   ═══════════════════════════════════════════════════ */
.clientes__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
  margin-top:2.5rem;
}
.cliente-logo{
  background:var(--white);
  border:1px solid var(--cinza-borda);
  border-radius:var(--radius-md);
  padding:1.5rem 1rem;
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:.85rem;
  color:var(--cinza-texto);
  transition:all var(--t-base) var(--ease-out);
}
.cliente-logo:hover{
  border-color:var(--bege);
  color:var(--grafite);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   CONTATO
   ═══════════════════════════════════════════════════ */
.contato__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:4rem;
  align-items:start;
}
.contato__intro{
  color:var(--cinza-texto);
  margin-bottom:2rem;
  font-size:1.02rem;
}

/* Form */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.5rem}
.form__group{margin-bottom:.5rem}
.form__label{
  display:block;
  font-size:.85rem;font-weight:600;
  color:var(--grafite);
  margin-bottom:.4rem;
}
.form__input{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:.95rem;
  padding:.75rem 1rem;
  border:1px solid var(--cinza-borda);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--grafite);
  transition:all var(--t-fast);
  outline:none;
}
.form__input::placeholder{color:var(--cinza-borda)}
.form__input:focus{
  border-color:var(--bege);
  box-shadow:0 0 0 3px var(--bege-10);
}
.form__input.error{border-color:var(--red)}
.form__error{
  display:block;
  font-size:.75rem;color:var(--red);
  margin-top:.25rem;
  min-height:1rem;
}
.form__textarea{resize:vertical;min-height:120px}

/* Checkbox */
.form__checkbox-group{margin-bottom:1rem}
.form__checkbox-label{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.88rem;color:var(--cinza-texto);
  cursor:pointer;line-height:1.5;
}
.form__checkbox{
  width:18px;height:18px;flex-shrink:0;
  margin-top:2px;
  accent-color:var(--bege);
  cursor:pointer;
}
.form__checkbox-label a{
  color:var(--bege-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color var(--t-fast);
}
.form__checkbox-label a:hover{color:var(--grafite)}

.form__submit{width:100%;justify-content:center;margin-top:.5rem}

/* Contact sidebar */
.contato__info{display:flex;flex-direction:column;gap:2rem}
.contato__info-block h3{
  font-size:1rem;font-weight:700;
  color:var(--grafite);
  margin-bottom:1rem;
}
.contato__list{display:flex;flex-direction:column;gap:.75rem}
.contato__list li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:.92rem;color:var(--cinza-texto);
}
.contato__list li svg{color:var(--bege);flex-shrink:0;margin-top:2px}
.contato__list a:hover{color:var(--bege-dark)}

.mapa-placeholder{
  width:100%;aspect-ratio:4/3;
  background:var(--offwhite);
  border:2px dashed var(--cinza-borda);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.5rem;
  color:var(--cinza-texto);
  font-size:.8rem;
}
.mapa-placeholder svg{opacity:.4}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer{
  background:var(--grafite);
  color:rgba(255,255,255,.7);
  padding:4rem 0 0;
}
.footer__inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__desc{
  font-size:.9rem;
  margin-top:1rem;
  line-height:1.7;
}
.footer__links h4{
  color:var(--white);
  font-size:.9rem;font-weight:600;
  margin-bottom:1rem;
}
.footer__links ul{display:flex;flex-direction:column;gap:.35rem}
.footer__links a{font-size:.85rem;transition:color var(--t-fast)}
.footer__links a:hover{color:var(--bege)}
.footer__contato li,
.footer__endereco li{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.85rem;
}
.footer__contato svg,
.footer__endereco svg{
  flex-shrink:0;
  margin-top:2px;
  opacity:.6;
  transition:opacity var(--t-fast);
}
.footer__contato li:hover svg,
.footer__endereco li:hover svg{
  opacity:1;
}

.footer__bottom{padding:1.5rem 0}
.footer__bottom-inner{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;
}
.footer__credits a{color:var(--bege);font-weight:500}
.footer__credits a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════
   MODAL PROJETO
   ═══════════════════════════════════════════════════ */
.modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
}
.modal.open{display:flex}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.65);
}
.modal__panel{
  position:relative;
  background:var(--white);
  border-radius:var(--radius-lg);
  width:90vw;max-width:960px;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.3);
  animation:modalSlideUp .35s var(--ease-out);
}
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.modal__close{
  position:sticky;top:0;float:right;
  font-size:1.8rem;color:var(--cinza-texto);
  background:var(--white);border:none;cursor:pointer;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  margin:1rem 1rem 0 0;
  z-index:1;
  transition:color var(--t-fast), background var(--t-fast);
}
.modal__close:hover{color:var(--grafite);background:var(--offwhite)}
.modal__header{
  padding:2rem 2.5rem 1.5rem;
  clear:right;
}
.modal__title{
  font-size:1.35rem;
  color:var(--grafite);
  margin-bottom:.35rem;
}
.modal__local{
  font-size:.95rem;
  color:var(--cinza-texto);
  margin-bottom:.6rem;
}
.modal__client{
  display:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bege-dark);
  background:var(--bege-10);
  padding:.2rem .6rem;
  border-radius:4px;
}
.modal__mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:0 2.5rem 2.5rem;
}
.modal__mosaic img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-sm);
  display:block;
}
@media(max-width:768px){
  .modal__panel{width:95vw;max-height:90vh}
  .modal__header{padding:1.5rem 1.5rem 1rem}
  .modal__mosaic{
    grid-template-columns:repeat(2,1fr);
    gap:4px;
    padding:0 1.5rem 1.5rem;
  }
}
@media(max-width:480px){
  .modal__mosaic{grid-template-columns:repeat(2,1fr)}
  .modal__title{font-size:1.15rem}
}

/* ═══════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* Staggered children delay */
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1024px){
  .portfolio__grid{grid-template-columns:repeat(3,1fr)}
  .clientes__grid{grid-template-columns:repeat(4,1fr)}
  .sobre__grid{gap:3rem}
  .servicos__grid{gap:1rem}
}

@media(max-width:768px){
  /* Nav */
  .nav{
    position:fixed;top:72px;left:0;right:0;
    background:var(--white);
    border-bottom:1px solid var(--cinza-borda);
    padding:1.5rem;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:all var(--t-base) var(--ease-out);
  }
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__list{flex-direction:column;gap:1rem;align-items:flex-start}
  .nav__link{font-size:1.1rem}
  .header__cta{display:none}
  .nav-toggle{display:flex}

  /* Hero */
  .hero{min-height:auto;padding:7rem 0 3rem}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .hero__bg-pattern{width:100%;opacity:.5}

  /* Sobre */
  .sobre__grid{grid-template-columns:1fr}
  .timeline__item{flex-basis:33.333%}

  /* Serviços */
  .servicos__grid{grid-template-columns:1fr}

  /* Portfolio */
  .portfolio__grid{grid-template-columns:repeat(2,1fr)}

  /* Clientes */
  .clientes__grid{grid-template-columns:repeat(3,1fr)}

  /* Contato */
  .contato__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}

  /* Footer */
  .footer__inner{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__bottom-inner{flex-direction:column;gap:.5rem;text-align:center}
}

@media(max-width:480px){
  .hero__stats{grid-template-columns:1fr 1fr}
  .portfolio__grid{grid-template-columns:1fr}
  .clientes__grid{grid-template-columns:repeat(2,1fr)}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%;justify-content:center}
  .timeline__item{flex-basis:50%}
  .footer__inner{grid-template-columns:1fr;gap:2rem}
}