/* ===========================================================
   KROMOS — Landing Page
   Baseado na estrutura do template PrintPark, com identidade
   visual da Kromos (paleta CMYK) e tipografia Montserrat.
=========================================================== */

:root{
  --pink:        #E42484;
  --pink-dark:   #C01A6E;
  --pink-tint:   #FDEAF3;
  --cyan:        #00A8E4;
  --cyan-tint:   #E7F6FC;
  --yellow:      #FCE500;
  --dark:        #262626;
  --dark-2:      #1B1B1B;
  --cream:       #FBF1E6;
  --peach:       #FCEFE4;
  --gray:        #6C6C72;
  --gray-light:  #E7E4E1;
  --white:       #FFFFFF;

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 45px -20px rgba(38,38,38,.18);
  --container: 1220px;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  color:var(--dark);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }

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

/* fluid, near full-bleed wrapper — used by header + hero so they span
   almost edge-to-edge like the reference, instead of sitting inside
   the narrower centered 1220px container */
.container-fluid{
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding:0 48px;
}

h1,h2,h3,h4{ font-weight:800; line-height:1.2; letter-spacing:-.01em; }
h2{ font-size:clamp(28px,3.6vw,42px); }
h3{ font-size:19px; }
p{ color:var(--gray); }

/* ---------- utils ---------- */
.tag,.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--pink); text-transform:uppercase; margin-bottom:14px;
}
.eyebrow--light{ color:var(--yellow); }
.h-light{ color:var(--white); }
.p-light{ color:#c9c9c9; }
.highlight{ color:var(--pink); position:relative; }

.section{ padding:96px 0; }
.section--tint{ background:var(--cyan-tint); }

.section--photo{
  position:relative; background:#1B1B1B url('atendimento-bg.jpg') center/cover no-repeat;
  isolation:isolate;
}
.section--photo::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg,rgba(10,10,12,.88) 0%,rgba(10,10,12,.72) 45%,rgba(10,10,12,.6) 100%);
}
.section--photo > .container{ position:relative; z-index:1; }
.section--peach{ background:var(--peach); }
.section--dark{ background:var(--dark-2); }

.section__head{ max-width:840px; margin:0 auto 56px; text-align:center; }
.section__head p{ max-width:620px; margin:14px auto 0; font-size:16px; }
.section__head--left{ max-width:640px; margin:0 0 36px; text-align:left; }
.section__head--left p{ max-width:640px; margin:14px 0 0; }

.grid{ display:grid; gap:28px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--5{ grid-template-columns:repeat(5,1fr); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:100px; font-weight:700; font-size:14px;
  letter-spacing:.02em; white-space:nowrap; transition:.25s ease;
  text-transform:uppercase;
}
.btn--primary{ background:var(--pink); color:var(--white); box-shadow:0 14px 30px -10px rgba(228,36,132,.55); }
.btn--primary:hover{ background:var(--pink-dark); transform:translateY(-2px); }
.btn--outline{ border:2px solid var(--dark); color:var(--dark); padding:13px 28px; }
.btn--outline:hover{ background:var(--dark); color:var(--white); }
.btn--dark{ background:var(--dark-2); color:var(--white); }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--sm{ padding:11px 22px; font-size:12px; }
.btn--block{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px;
  color:var(--dark); border-bottom:2px solid var(--yellow);
}
.link-more:hover{ color:var(--pink); }
.link-more--upper{ text-transform:uppercase; letter-spacing:.04em; font-size:13px; }

/* =====================================================
   TOPBAR — barra plana, de ponta a ponta (igual à referência)
===================================================== */
.topbar{
  background:var(--white); color:var(--gray); font-size:13px;
  border-bottom:1px solid var(--gray-light);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:13px 24px; flex-wrap:wrap;
}
.topbar__links{ display:flex; gap:22px; }
.topbar__linkitem{ display:flex; align-items:center; gap:9px; color:var(--dark); font-weight:600; font-size:13px; }
.topbar__linkitem:hover{ color:var(--pink); }
.topbar__icon{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:var(--pink-tint); color:var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.topbar__badge{
  display:inline-flex; align-items:center; gap:9px; background:var(--peach); color:var(--dark);
  font-weight:600; font-size:12.5px; padding:9px 20px; border-radius:100px;
}
.topbar__badge i{ color:var(--pink); font-size:14px; }
.topbar__badge strong{ font-weight:700; }
.topbar__badge a{ color:var(--pink); font-weight:800; }
.topbar__social{ display:flex; align-items:center; gap:10px; }
.topbar__social a{
  width:28px; height:28px; border-radius:50%; background:var(--dark-2); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:13px; transition:.2s;
}
.topbar__social a:hover{ background:var(--pink); }

/* =====================================================
   HERO-TOP — aba bege da logo (empurra pra cima, atrás do
   menu) + menu transparente sobre o fundo branco da página
===================================================== */
.hero-top{ position:relative; }

.hero__logotab{
  position:absolute; z-index:5; top:0; left:45px;
  width:290px; height:172px;
  background:#FFF1E4;
  border-radius:52px 52px 0 0;
  display:flex; align-items:center; justify-content:center;
  padding:26px 28px 34px;
  box-sizing:border-box;
}
.hero__logo img{ max-width:100%; height:64px; width:auto; display:block; }

/* =====================================================
   HEADER — transparente, "flutua" sobre o branco da página,
   ao lado da aba da logo; fica sólido só depois de rolar
===================================================== */
.header{
  position:sticky; top:0; z-index:2;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
.header.is-scrolled{
  background:var(--white); box-shadow:0 4px 20px rgba(38,38,38,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap;
  padding:24px 24px 24px 360px; gap:22px; min-height:24px;
}
.nav{ display:flex; gap:22px; margin-right:auto; flex-wrap:nowrap; }
.nav a{ display:inline-flex; align-items:center; gap:2px; font-weight:600; font-size:14.5px; position:relative; padding:6px 0; white-space:nowrap; }
.nav a i{ font-size:15px; color:var(--gray); }
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--pink); transition:.25s;
}
.nav a:hover::after,.nav a.active::after{ width:100%; }
.header__actions{ display:flex; align-items:center; gap:14px; }
.header__search{
  display:flex; align-items:center; gap:6px; background:var(--gray-light);
  border-radius:100px; padding:4px 4px 4px 18px;
}
.header__search input{ border:none; background:none; font-size:13.5px; width:110px; color:var(--dark); }
.header__search input::placeholder{ color:var(--gray); }
.header__search input:focus{ outline:none; }
.header__search button{
  width:32px; height:32px; border-radius:50%; flex:none; background:var(--dark-2); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:14px; transition:.2s;
}
.header__search button:hover{ background:var(--pink); }
.nav__toggle{ display:none; font-size:24px; }

/* =====================================================
   HERO — medido diretamente da referência "como eu quero
   o topo.png": card único, cream #FFF1E4, UMA foto só
   ocupando ~53% direito, flush no topo/direita/base
===================================================== */
.hero{ background:var(--white); padding:0 45px 45px; }

.hero__card{
  position:relative; z-index:2;
  overflow:hidden;
  height:830px;
  border-radius:52px;
  background:#FFF1E4;
}

.hero__nav{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  z-index:5; width:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.hero__navlabel{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--gray); writing-mode:vertical-rl; }
.hero__navline{ width:1px; height:34px; background:rgba(38,38,38,.15); }
.hero__navbtn{
  width:42px; height:42px; border-radius:50%; background:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  font-size:16px; transition:.2s;
}
.hero__navbtn:hover{ background:var(--pink); color:var(--white); }

.hero__content{
  position:absolute; z-index:3;
  left:7%; width:30%; top:50%; transform:translateY(-45%);
}
.hero__content h1{ font-size:clamp(28px,2.7vw,40px); font-weight:800; line-height:1.16; margin-bottom:18px; }
.hero__content p{ font-size:15px; margin-bottom:24px; }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__ctas .btn{ white-space:nowrap; }

/* uma foto só, flush no topo/direita/base do card — só o
   canto interno (esquerda) é arredondado */
.hero__media{
  position:absolute; z-index:1; top:0; right:0; bottom:0; width:63%;
  overflow:hidden; border-radius:90px 0 0 0;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; transition:opacity .35s ease; }
.hero__dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:flex; gap:8px; padding:8px 12px; border-radius:100px;
  background:rgba(20,20,20,.35); backdrop-filter:blur(4px);
}
.hero__dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.2s; }
.hero__dots span.active{ background:var(--yellow); width:20px; border-radius:6px; }


/* =====================================================
   CARDS — SOLUÇÕES (offer cards)
===================================================== */
.card-offer{
  background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius);
  overflow:hidden; padding:0 0 32px; transition:.25s;
}
.card-offer:hover{ box-shadow:var(--shadow); border-color:transparent; transform:translateY(-6px); }

.card-offer__photo{ aspect-ratio:4/3; background:var(--peach); overflow:hidden; }
.card-offer__photo img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.card-offer:hover .card-offer__photo img{ transform:scale(1.06); }

/* carrossel automático dentro do card (imagens empilhadas com crossfade) */
.card-carousel{ position:relative; width:100%; height:100%; }
.card-carousel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease, transform .4s ease;
}
.card-carousel img.is-active{ opacity:1; }
.card-offer:hover .card-carousel img.is-active{ transform:scale(1.06); }
.card-offer__photo-ph{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--pink); border-bottom:1px dashed rgba(228,36,132,.35);
  background:repeating-linear-gradient(135deg,rgba(228,36,132,.05) 0 12px,rgba(228,36,132,.09) 12px 24px);
}
.card-offer__photo-ph i{ font-size:30px; }
.card-offer__photo-ph span{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.75; }

.card-offer__top{ display:flex; align-items:center; justify-content:space-between; padding:24px 28px 0; margin-bottom:14px; }
.card-offer__arrow{
  width:38px; height:38px; border-radius:50%; background:var(--pink-tint); color:var(--pink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.card-offer__tag{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--cyan); }
.card-offer h3{ margin:6px 28px 10px; }
.card-offer p{ font-size:14.5px; margin:0 28px 16px; }
.card-offer .link-more{ margin-left:28px; }

/* =====================================================
   GRÁFICA RÁPIDA x IMPRESSÃO OFFSET — tiles claros, estilo
   páginas de produto da Apple (fundo suave + CTAs em pílula)
===================================================== */
.modalidades{ background:var(--white); }

.modalidades-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px; }

.modalidade-tile{
  position:relative; overflow:hidden; border-radius:28px;
  padding:56px 40px 0; min-height:460px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.modalidade-tile:hover{ transform:translateY(-4px); box-shadow:0 28px 55px -26px rgba(38,38,38,.28); }
.modalidade-tile--rapida{ background:linear-gradient(180deg,#FDEAF3 0%,#FFF7FB 65%); }
.modalidade-tile--offset{ background:linear-gradient(180deg,#E4F7FD 0%,#F7FDFF 65%); }

.modalidade-tile__content{ position:relative; z-index:1; max-width:320px; }
.modalidade-tile h3{ font-size:clamp(24px,2.4vw,30px); font-weight:800; margin-bottom:8px; }
.modalidade-tile__content > p{ font-size:15px; color:var(--gray); margin-bottom:22px; }

.modalidade-tile__ctas{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.modalidade-tile__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px; border-radius:100px; font-weight:600; font-size:13.5px; transition:.2s ease;
}
.modalidade-tile__cta--solid{ background:var(--dark); color:var(--white); }
.modalidade-tile--rapida .modalidade-tile__cta--solid{ background:var(--pink); }
.modalidade-tile--rapida .modalidade-tile__cta--solid:hover{ background:var(--pink-dark); }
.modalidade-tile--offset .modalidade-tile__cta--solid{ background:var(--cyan); }
.modalidade-tile--offset .modalidade-tile__cta--solid:hover{ background:#0090c2; }
.modalidade-tile__cta--outline{ border:1.5px solid rgba(38,38,38,.3); color:var(--dark); }
.modalidade-tile__cta--outline:hover{ background:rgba(38,38,38,.06); }

.modalidade-tile__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.modalidade-tile__chips span{
  font-size:12px; font-weight:700; color:var(--dark); background:rgba(255,255,255,.75);
  padding:6px 12px; border-radius:100px; box-shadow:0 4px 12px -6px rgba(38,38,38,.18);
}

.modalidade-tile__visual{
  position:relative; flex:1; width:100%; min-height:150px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:34px;
}
.modalidade-tile__orb{
  position:absolute; width:220px; height:220px; border-radius:50%;
  filter:blur(50px); opacity:.55;
}
.modalidade-tile--rapida .modalidade-tile__orb{ background:var(--pink); }
.modalidade-tile--offset .modalidade-tile__orb{ background:var(--cyan); }
.modalidade-tile__icon{
  position:relative; z-index:1; width:104px; height:104px; border-radius:32px;
  display:flex; align-items:center; justify-content:center; font-size:44px; color:var(--white);
  box-shadow:0 24px 40px -16px rgba(38,38,38,.35);
}
.modalidade-tile--rapida .modalidade-tile__icon{ background:linear-gradient(145deg,var(--pink),var(--pink-dark)); }
.modalidade-tile--offset .modalidade-tile__icon{ background:linear-gradient(145deg,var(--cyan),#0090c2); }

.modalidades-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:36px; padding-top:32px; border-top:1px solid rgba(38,38,38,.1);
}
.modalidades-cta p{ font-size:16px; font-weight:600; margin:0; }

/* =====================================================
   NOSSO JEITO DE ATENDER
===================================================== */
.attend{ position:relative; display:grid; grid-template-columns:1fr 110px 1.25fr; gap:20px; align-items:center; padding:12px 0 28px; }
.attend::before{
  content:''; position:absolute; border-radius:50%; filter:blur(30px); z-index:0; pointer-events:none;
  width:260px; height:260px; background:radial-gradient(circle,rgba(0,168,228,.12),transparent 70%);
  bottom:-40px; right:6%;
}

.attend__box{
  position:relative; z-index:1; background:var(--dark-2); color:var(--white); border-radius:24px;
  padding:48px 40px; display:flex; flex-direction:column; justify-content:center; gap:18px;
  align-self:stretch; overflow:hidden;
}
.attend__box::after{
  content:''; position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(228,36,132,.35),transparent 70%);
  bottom:-70px; left:-50px; pointer-events:none;
}
.attend__box h2{ color:var(--white); font-size:clamp(24px,2.6vw,32px); }
.attend__box p{ color:#bdbdbd; }
.attend__box .btn{ align-self:flex-start; }

/* texto vertical no mesmo espírito/tamanho do "NUMBERS" da referência */
.attend__watermark{
  position:relative; z-index:1; writing-mode:vertical-rl; transform:rotate(180deg); justify-self:center;
  font-size:76px; line-height:.86; font-weight:800; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.32);
  white-space:nowrap; user-select:none;
}

.attend__stats{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; }
.attend__stack{ display:flex; flex-direction:column; gap:18px; flex:1; }

/* cards flutuantes — soltos no espaço, com sombra e leve animação */
.stat-card{
  position:relative; background:var(--white); border:none;
  border-radius:18px; padding:28px 22px 22px; text-align:left;
  box-shadow:0 24px 42px -18px rgba(0,0,0,.4);
  animation:statFloat 5s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{
  animation-play-state:paused; transform:translateY(-8px);
  box-shadow:0 30px 50px -16px rgba(0,0,0,.48);
}
.attend__stack .stat-card:nth-child(1){ animation-delay:0s; }
.attend__stack .stat-card:nth-child(2){ animation-delay:.9s; }
.stat-card--tall{ align-self:center; animation-delay:1.8s; }
.stat-card h3{ font-size:15.5px; margin:0 0 6px; }
.stat-card p{ font-size:13px; line-height:1.5; }
.stat-card__icon{
  position:absolute; top:-16px; left:20px;
  width:38px; height:38px; border-radius:10px;
  background:var(--white); border:1.5px solid var(--pink);
  box-shadow:0 8px 16px -6px rgba(228,36,132,.4);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--pink);
}

@keyframes statFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* =====================================================
   QUEM SOMOS
===================================================== */
/* a foto sangra até a borda esquerda real da tela; o texto alinha
   com a margem direita do container padrão do site */
.quem-somos{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:center; }

/* galeria arrastável — fotos reais da Kromos, uma seguida da outra;
   tamanho proporcional (aspect-ratio) em vez de esticar até a altura do texto */
.quem-somos__media{ position:relative; aspect-ratio:4/3; min-height:340px; }
.qs-gallery{ position:relative; height:100%; border-radius:0 26px 26px 0; overflow:hidden; box-shadow:var(--shadow); }
.qs-gallery__track{
  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none; user-select:none;
}
.qs-gallery__track::-webkit-scrollbar{ display:none; }
.qs-gallery__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.qs-gallery__slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; }
.qs-gallery__slide img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.qs-gallery__slide video{ width:100%; height:100%; object-fit:cover; background:var(--dark-2); }

.qs-gallery__hint{
  position:absolute; top:18px; right:18px; z-index:2;
  display:flex; align-items:center; gap:6px; background:rgba(20,20,20,.55); color:var(--white);
  font-size:11.5px; font-weight:600; padding:7px 14px; border-radius:100px; backdrop-filter:blur(4px);
  pointer-events:none;
}
.qs-gallery__dots{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:8px;
}
.qs-gallery__dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer; transition:.2s; }
.qs-gallery__dots span.active{ background:var(--pink); width:22px; border-radius:6px; }

.quem-somos__content{
  display:flex; flex-direction:column; justify-content:center;
  padding:56px 24px 56px 64px;
  padding-right:max(24px, calc((100vw - var(--container)) / 2));
}
.quem-somos__content p{ margin-bottom:14px; }
.quem-somos__content h2{ margin-bottom:18px; }

/* bullets modernos, no lugar da lista simples */
.qs-bullets{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 28px; }
.qs-bullet{
  display:inline-flex; align-items:center; gap:8px; background:var(--cyan-tint);
  color:var(--dark); font-weight:600; font-size:13.5px; padding:10px 16px 10px 12px;
  border-radius:100px;
}
.qs-bullet i{ color:var(--cyan); font-size:17px; }

/* =====================================================
   CATEGORIAS
===================================================== */
.card-cat{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(38,38,38,.15); transition:.25s; padding-bottom:22px;
}
.card-cat:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card-cat__img{ aspect-ratio:1/.85; overflow:hidden; }
.card-cat__img img{ width:100%; height:100%; object-fit:cover; }
.card-cat h3{ padding:18px 20px 6px; font-size:17px; }
.card-cat p{ padding:0 20px; font-size:13.5px; margin-bottom:12px; }
.card-cat .link-more{ margin:0 20px; font-size:13px; }

/* =====================================================
   PORTFÓLIO
===================================================== */
.filters-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 24px; margin-bottom:36px;
}
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filter{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:100px; border:1px solid var(--gray-light);
  font-weight:600; font-size:13.5px; line-height:1; transition:.2s; white-space:nowrap;
}
.filter:hover{ border-color:var(--pink); color:var(--pink); }
.filter.active{ background:var(--dark-2); border-color:var(--dark-2); color:var(--white); }
.filter--cta{
  background:var(--pink); border-color:var(--pink); color:var(--white); font-weight:700;
  box-shadow:0 14px 30px -12px rgba(228,36,132,.55); transition:.2s ease;
}
.filter--cta:hover{ background:var(--pink-dark); border-color:var(--pink-dark); color:var(--white); transform:translateY(-2px); }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.portfolio-item{
  border-radius:var(--radius); overflow:hidden; background:var(--white);
  box-shadow:0 14px 34px -22px rgba(38,38,38,.22); transition:.25s;
}
.portfolio-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.portfolio-item__media{ position:relative; aspect-ratio:1/.95; overflow:hidden; background:var(--gray-light); }
.portfolio-item__media img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.portfolio-item:hover .portfolio-item__media img{ transform:scale(1.06); }

.portfolio-item figcaption{ padding:18px 20px 22px; }
.portfolio-item__tag{
  display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--pink); background:var(--pink-tint);
  padding:4px 10px; border-radius:100px; margin-bottom:8px;
}
.portfolio-item figcaption p{ font-size:14px; font-weight:600; color:var(--dark); line-height:1.4; }
.portfolio-empty{ text-align:center; margin-top:30px; font-weight:600; }

/* =====================================================
   RGB x CMYK — comparador interativo (slider arrastável)
===================================================== */
.rgb-cmyk{ padding:64px 0; }
.rgb-cmyk__inner{ display:grid; grid-template-columns:.85fr 1fr; align-items:center; gap:48px; }
.rgb-cmyk__intro h2{ font-size:clamp(22px,2.2vw,30px); margin:8px 0 12px; }
.rgb-cmyk__intro p{ font-size:14.5px; color:var(--gray); margin-bottom:20px; }
.rgb-cmyk__legend{ display:flex; flex-direction:column; gap:10px; }
.rgb-cmyk__legenditem{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  color:var(--dark); background:var(--gray-light); padding:9px 14px; border-radius:100px; width:fit-content;
}
.rgb-cmyk__legenditem i{ font-size:16px; color:var(--pink); }

.rgb-cmyk__compare{ display:flex; justify-content:center; }
.rgb-cmyk__frame{
  position:relative; width:100%; max-width:340px; aspect-ratio:4/5;
  border-radius:28px; overflow:hidden; box-shadow:var(--shadow); user-select:none;
  background:var(--dark-2); cursor:ew-resize; touch-action:none;
}
.rgb-cmyk__layer{ position:absolute; inset:0; }
.rgb-cmyk__layer svg{ width:100%; height:100%; display:block; }
.rgb-cmyk__layer--cmyk svg{ filter:saturate(.62) contrast(1.05) brightness(.94); }
.rgb-cmyk__layer--rgb svg{ filter:saturate(1.55) brightness(1.08) contrast(1.05); }
.rgb-cmyk__layer--rgb{ clip-path:inset(0 50% 0 0); will-change:clip-path; }

.rgb-cmyk__tag{
  position:absolute; top:16px; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); background:rgba(20,20,20,.55); backdrop-filter:blur(4px);
  padding:7px 12px; border-radius:100px; pointer-events:none;
}
.rgb-cmyk__tag--cmyk{ right:16px; }
.rgb-cmyk__tag--rgb{ left:16px; }

.rgb-cmyk__handle{
  position:absolute; top:0; bottom:0; left:50%; width:0;
  border-left:2px solid rgba(255,255,255,.85); pointer-events:none; z-index:2;
}
.rgb-cmyk__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:var(--white); color:var(--dark);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
.rgb-cmyk__range{
  position:absolute; left:0; bottom:0; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* =====================================================
   CORTE ESPECIAL — comparativo "antes" (faca) x "agora"
   (corte digital, sem faca)
===================================================== */
.corte-especial__compare{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; margin-top:12px;
}
.corte-especial__side{ border-radius:24px; padding:36px 32px; }
.corte-especial__side--antes{ background:var(--gray-light); }
.corte-especial__side--agora{
  background:linear-gradient(155deg,var(--dark-2) 0%,#2c2c2c 100%); color:var(--white);
  box-shadow:var(--shadow);
}

.corte-especial__tag{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em;
  padding:5px 12px; border-radius:100px; background:var(--white); color:var(--gray); margin-bottom:18px;
}
.corte-especial__tag--agora{ background:var(--pink); color:var(--white); }

.corte-especial__icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--white); color:var(--gray);
}
.corte-especial__icon--agora{ background:rgba(228,36,132,.2); color:var(--pink); }

.corte-especial__side h3{ font-size:19px; margin-bottom:16px; }
.corte-especial__side--agora h3{ color:var(--white); }
.corte-especial__side ul{ display:flex; flex-direction:column; gap:11px; }
.corte-especial__side li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.corte-especial__side--antes li{ color:var(--gray); }
.corte-especial__side--antes li i{ color:#B0ADA8; font-size:16px; flex:none; }
.corte-especial__side--agora li i{ color:var(--pink); font-size:17px; flex:none; }

.corte-especial__arrow{
  width:48px; height:48px; border-radius:50%; background:var(--pink-tint); color:var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex:none;
}

.corte-especial__cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:36px; padding-top:32px; border-top:1px solid rgba(38,38,38,.1);
}
.corte-especial__cta p{ font-size:16px; font-weight:600; margin:0; }

/* =====================================================
   POR QUE ESCOLHER
===================================================== */
.why{ display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center; }
.why__col{ display:flex; flex-direction:column; gap:32px; }
.why__item{ display:flex; gap:16px; }
.why__item i{ font-size:24px; color:var(--pink); flex:none; margin-top:2px; }
.why__item h3{ font-size:16.5px; margin-bottom:4px; }
.why__item p{ font-size:13.5px; }
.why__col:last-child .why__item{ text-align:right; flex-direction:row-reverse; }
/* produto "flutuando" — sem caixa, sem fundo, só a sombra suave */
.why__center{ width:100%; max-width:374px; display:flex; align-items:center; justify-content:center; }
.why__center img{
  width:100%; height:auto; object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(38,38,38,.28));
  animation:qsFloat 5s ease-in-out infinite;
}
@keyframes qsFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* =====================================================
   PROCESSO (substitui planos)
===================================================== */
.process{ display:grid; grid-template-columns:.9fr 1.4fr; gap:60px; align-items:center; }
.process__intro p{ margin:16px 0 26px; }
.process__steps{ display:flex; flex-direction:column; gap:20px; }
.step{
  position:relative; background:var(--peach); border-radius:var(--radius);
  padding:26px 28px 26px 90px; min-height:100px;
}
.step__num{
  position:absolute; left:26px; top:50%; transform:translateY(-50%);
  font-size:34px; font-weight:900; color:var(--white);
  -webkit-text-stroke:2px var(--pink); color:transparent;
}
.step h3{ margin-bottom:6px; }
.step p{ font-size:14px; }

/* =====================================================
   DEPOIMENTOS — integrado ao Google Meu Negócio
===================================================== */
.greviews__summary{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 28px; margin-bottom:40px; text-align:left;
}
.greviews__badge{
  width:52px; height:52px; border-radius:50%; background:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#4285F4;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5);
}
.greviews__score{ display:flex; flex-direction:column; line-height:1.3; }
.greviews__score strong{ color:var(--white); font-size:24px; font-weight:800; }
.greviews__stars{ color:var(--yellow); font-size:14px; letter-spacing:2px; }
.greviews__score small{ font-size:12.5px; color:#b0b0b0; }
.greviews__link{
  display:inline-flex; align-items:center; gap:6px; color:var(--white);
  font-weight:700; font-size:13.5px; border:1.5px solid #444; border-radius:100px;
  padding:12px 20px; transition:.2s ease; white-space:nowrap;
}
.greviews__link:hover{ border-color:var(--yellow); color:var(--yellow); }

.greviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.greview-card{
  display:flex; flex-direction:column; background:#242424; border:1px solid #333;
  border-radius:var(--radius); padding:30px 26px;
}
.greview-card__stars{ color:var(--yellow); font-size:14px; letter-spacing:2px; margin-bottom:14px; }
.greview-card p{ color:#d8d8d8; font-size:14px; line-height:1.65; flex:1; margin-bottom:22px; }
.greview-card__author{ display:flex; align-items:center; gap:12px; }
.greview-card__avatar{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--pink); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.greview-card__author strong{ display:block; color:var(--white); font-size:14px; }
.greview-card__author small{ display:flex; align-items:center; gap:5px; font-size:11px; color:#9c9c9c; }
.greview-card__author small i{ color:#4285F4; font-size:12px; }

/* =====================================================
   CARD BLOG (para sua marca)
===================================================== */
.card-blog{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(38,38,38,.15); padding-bottom:24px; transition:.25s;
}
.card-blog:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card-blog__img{ aspect-ratio:16/11; overflow:hidden; }
.card-blog__img img{ width:100%; height:100%; object-fit:cover; }
.card-blog__img--icon{
  display:flex; align-items:center; justify-content:center; font-size:44px; color:var(--white);
  background:linear-gradient(135deg,var(--pink),var(--cyan));
}
.card-blog__tag{ display:block; margin:20px 22px 6px; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--pink); }
.card-blog h3{ margin:0 22px 10px; font-size:18px; }
.card-blog p{ margin:0 22px 14px; font-size:14px; }
.card-blog .link-more{ margin:0 22px; font-size:13px; }

/* =====================================================
   FAQ + FORMULÁRIO
===================================================== */
.faq-form{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.faq__item{ border-bottom:1px solid var(--gray-light); padding:18px 0; }
.faq__q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:15.5px; text-align:left;
}
.faq__q i{ transition:.25s; color:var(--pink); font-size:20px; flex:none; margin-left:12px; }
.faq__item.active .faq__q i{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__a p{ padding-top:12px; font-size:14.5px; }
.faq__item.active .faq__a{ max-height:200px; }

.form{
  background:var(--white); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--dark); }
.form input,.form select,.form textarea{
  border:1px solid var(--gray-light); border-radius:10px; padding:12px 14px; font-size:14.5px; font-weight:500;
  color:var(--dark); background:var(--white);
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:2px solid var(--cyan); border-color:transparent; }
.form textarea{ resize:vertical; }
.form__note{ text-align:center; font-size:13.5px; margin-top:4px; }
.form__note a{ color:var(--pink); font-weight:700; }

/* =====================================================
   CTA STRIP
===================================================== */
.cta-strip{ background:linear-gradient(120deg,var(--pink),#ff5fa8); padding:70px 0; position:relative; overflow:hidden; }
.cta-strip::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.25),transparent 45%);
}
.cta-strip__inner{ position:relative; display:grid; grid-template-columns:1fr 1.4fr auto; gap:36px; align-items:center; }
.cta-strip__text .eyebrow--light{ color:var(--dark); background:var(--yellow); padding:4px 10px; border-radius:6px; }
.cta-strip__text h2{ color:var(--white); margin:10px 0 8px; font-size:clamp(22px,2.4vw,28px); }
.cta-strip__text p{ color:#ffe3f1; font-size:14.5px; }
.cta-strip__items{ display:flex; flex-direction:column; gap:16px; }
.cta-strip__item{ display:flex; gap:14px; align-items:flex-start; color:var(--white); }
.cta-strip__item i{ font-size:22px; margin-top:2px; }
.cta-strip__item h3{ color:var(--white); font-size:15.5px; }
.cta-strip__item p{ color:#ffe3f1; font-size:13px; }

/* =====================================================
   FOOTER
===================================================== */
.footer{ background:var(--dark-2); color:#b8b8b8; padding-top:80px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid #333; }
.footer__logo{ height:64px; width:auto; display:block; margin-bottom:18px; }
.footer__brand p{ font-size:13.5px; color:#9c9c9c; margin-bottom:18px; max-width:340px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:34px; height:34px; border-radius:50%; background:#333; color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.footer__social a:hover{ background:var(--pink); }
.footer__col h4{ color:var(--white); font-size:15px; margin-bottom:18px; }
.footer__col a{ display:block; font-size:13.5px; margin-bottom:11px; color:#b8b8b8; }
.footer__col a:hover{ color:var(--yellow); }
.footer__contact p{ color:#b8b8b8; font-size:13.5px; margin-bottom:16px; }
.footer__whats{
  display:inline-flex; align-items:center; gap:12px; background:#25D366; color:var(--white);
  padding:12px 20px 12px 12px; border-radius:100px; box-shadow:0 16px 32px -16px rgba(37,211,102,.55);
  transition:.2s ease;
}
/* .footer__col a{display:block} tem mais especificidade — força o flex de volta */
.footer__contact .footer__whats{ display:inline-flex; margin-bottom:0; }
.footer__whats:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(37,211,102,.65); }
.footer__whats-icon{
  flex:none; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.footer__whats-text{ display:flex; flex-direction:column; line-height:1.3; }
.footer__whats-text strong{ font-size:13.5px; font-weight:800; }
.footer__whats-text small{ font-size:12px; font-weight:600; color:rgba(255,255,255,.85); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; padding:24px 24px; font-size:12.5px;
}
#backToTop{
  width:38px; height:38px; border-radius:50%; background:#333; color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
#backToTop:hover{ background:var(--pink); }

/* =====================================================
   WHATSAPP FLUTUANTE
===================================================== */
.whats-float{
  position:fixed; right:22px; bottom:22px; z-index:300;
  display:flex; align-items:center; gap:10px; background:#25D366; color:var(--white);
  padding:14px 20px; border-radius:100px; font-weight:700; font-size:13.5px;
  box-shadow:0 16px 34px -12px rgba(37,211,102,.6); transition:.25s;
}
.whats-float:hover{ transform:translateY(-3px); }
.whats-float i{ font-size:20px; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--5{ grid-template-columns:repeat(3,1fr); }
  .attend{ grid-template-columns:1fr; padding-bottom:0; }
  .attend__watermark{ display:none; }
  .attend__stats{ flex-direction:column; margin-top:28px; }
  .attend__stack{ width:100%; }
  .stat-card--tall{ width:100%; }
  .quem-somos{ grid-template-columns:1fr; }
  .quem-somos__media{ width:100%; height:420px; min-height:0; margin:0 0 28px; }
  .qs-gallery{ border-radius:0; }
  .quem-somos__content{ padding:0 24px; }
  .why{ grid-template-columns:1fr; text-align:center; }
  .why__col:last-child .why__item{ text-align:center; flex-direction:column; align-items:center; }
  .why__item{ flex-direction:column; align-items:center; text-align:center; }
  .why__center{ margin:0 auto; }
  .process{ grid-template-columns:1fr; }
  .faq-form{ grid-template-columns:1fr; }
  .cta-strip__inner{ grid-template-columns:1fr; text-align:center; }
  .cta-strip__item{ justify-content:center; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__logo{ height:50px; }
  .greviews__grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--white); flex-direction:column; padding:100px 32px; gap:26px;
    box-shadow:-20px 0 50px rgba(0,0,0,.15); transform:translateX(100%); transition:.35s ease;
  }
  .nav.open{ transform:translateX(0); }
  .nav__toggle{ display:block; }
  .header__actions .btn--sm{ display:none; }
  .header__search{ display:none; }
  .header__inner{ padding:12px 16px; }
  .topbar__links{ display:none; }

  /* no mobile a aba vira um bloco simples, empilhado acima do menu */
  .hero__logotab{
    position:static; z-index:auto; width:auto; height:auto;
    border-radius:20px; display:inline-flex; margin:14px 0 0 12px; padding:16px 22px;
  }
  .hero__logo img{ height:46px; }

  .hero{ padding:0 12px 24px; }
  .hero__card{
    height:auto; min-height:0; border-radius:28px;
    display:flex; flex-direction:column; align-items:stretch;
    padding:22px 18px 22px;
  }
  .hero__nav{
    position:static; transform:none; flex-direction:row; justify-content:flex-start;
    gap:14px; width:100%; order:1;
  }
  .hero__navlabel{ writing-mode:horizontal-tb; }
  .hero__navline{ width:24px; height:1px; }
  .hero__content{
    position:static; transform:none; z-index:auto;
    order:2; width:100%; left:auto; top:auto; padding:18px 0 8px;
  }
  .hero__ctas{ flex-wrap:wrap; }

  .hero__media{
    position:static; order:3; width:100%; height:260px;
    border-radius:22px; margin-top:16px; overflow:hidden;
  }
  .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:right center; }
  .grid--3{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:1fr; }
  .grid--5{ grid-template-columns:1fr; }
  .modalidades-tiles{ grid-template-columns:1fr; }
  .modalidade-tile{ padding:44px 28px 0; min-height:400px; }
  .modalidades-cta{ flex-direction:column; align-items:flex-start; }
  .corte-especial__compare{ grid-template-columns:1fr; }
  .corte-especial__arrow{ transform:rotate(90deg); margin:0 auto; }
  .corte-especial__cta{ flex-direction:column; align-items:flex-start; }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .form__row{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .section__head--split{ flex-direction:column; align-items:flex-start; row-gap:20px; }
  .section__head--split > div{ flex:1 1 auto; width:100%; }
  .section__head--split > .btn{ align-self:flex-start; }
}

@media (max-width:520px){
  .portfolio-grid{ grid-template-columns:1fr; }
  .rgb-cmyk__inner{ grid-template-columns:1fr; }
  .rgb-cmyk__legenditem{ width:fit-content; }
  .topbar__inner{ justify-content:center; text-align:center; }
  .topbar__badge{ order:-1; width:100%; justify-content:center; text-align:center; }
  .whats-float span{ display:none; }
  .whats-float{ padding:14px; }
}