:root{
  --primary:#0879D9;
  --secondary:#1F8F4D;
  --accent-yellow:#F8B827;
  --accent-red:#D92D20;
  --fire-orange:#F97316;
  --warm-light:#FFF5D6;

  --background-light:#FFFEFA;
  --background-soft:#F4F8FB;

  --text-primary:#212121;
  --text-secondary:#616161;

  --card:#FFFFFF;
  --border:rgba(17, 24, 39, 0.10);
  --shadow:0 16px 36px rgba(8, 49, 84, 0.12);
  --shadow-soft:0 12px 26px rgba(8, 49, 84, 0.08);

  --radius:8px;
  --radius-sm:8px;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text-primary);
  background:var(--background-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--text-primary);
  color:#fff;
  transform:translateY(-140%);
  transition:transform .2s ease;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}

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

.section{padding:80px 0}
.section-soft{background:var(--background-soft)}
.section-head{
  margin-bottom:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
h1,h2{margin:0 0 24px; letter-spacing:-0.02em}
p{margin:0 0 16px}
.muted{color:var(--text-secondary)}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{display:flex; align-items:center}
.brand-logo{
  width:auto;
  height:52px;
}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-link{
  color:var(--text-primary);
  font-weight:600;
  font-size:14px;
  opacity:0.92;
}
.nav-link:hover{color:var(--primary)}
.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
}
.nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background:var(--text-primary);
  margin:3px 0;
  border-radius:2px;
}
.nav-drawer{
  display:none;
  border-top:1px solid var(--border);
  background:#fff;
}
.nav-drawer-inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 0 18px;
}
.nav-open .nav-drawer{display:block}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:-0.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btn:focus-visible{
  outline:3px solid rgba(30, 136, 229, 0.35);
  outline-offset:2px;
}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:10px 12px; font-size:14px}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), #0B66C3);
  color:#fff;
  box-shadow:0 10px 20px rgba(30,136,229,0.18);
}
.btn-primary:hover{box-shadow:0 14px 28px rgba(30,136,229,0.24)}
.btn-accent{
  background:linear-gradient(135deg, var(--accent-yellow), #F59E0B);
  color:#1a1a1a;
  border-color:rgba(0,0,0,0.06);
}
.btn-ghost{
  background:rgba(255,255,255,0.70);
  border-color:rgba(17, 24, 39, 0.12);
}
.btn-outline{
  background:#fff;
  border-color:rgba(17, 24, 39, 0.14);
}
.btn-outline:hover{border-color:rgba(30,136,229,0.32)}
.btn-outline-on-dark{
  background:transparent;
  border-color:rgba(255,255,255,0.32);
  color:#fff;
}
.btn-outline-on-dark:hover{border-color:rgba(255,255,255,0.55)}
.btn-whats{
  background:rgba(46, 125, 50, 0.10);
  border-color:rgba(46, 125, 50, 0.20);
  color:var(--secondary);
}
.btn-whats:hover{
  background:rgba(46, 125, 50, 0.14);
  border-color:rgba(46, 125, 50, 0.28);
}
.btn-social{
  background:rgba(30, 136, 229, 0.10);
  border-color:rgba(30, 136, 229, 0.22);
  color:var(--primary);
}
.btn-social:hover{
  background:rgba(30, 136, 229, 0.14);
  border-color:rgba(30, 136, 229, 0.30);
}

/* Hero */
.hero{
  position:relative;
  padding:88px 0 64px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:28px;
  align-items:start;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--secondary);
  background:rgba(46,125,50,0.10);
  border:1px solid rgba(46,125,50,0.16);
  padding:8px 12px;
  border-radius:999px;
  margin-bottom:14px;
}
.hero-title{
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.1;
  margin-bottom:16px;
}
.hero-subtitle{
  font-size:18px;
  color:var(--text-secondary);
  margin-bottom:18px;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.70);
  font-weight:600;
  color:var(--text-primary);
}
.badge-dot{
  width:10px; height:10px; border-radius:999px;
  box-shadow:0 0 0 4px rgba(0,0,0,0.02);
}
.badge-dot-blue{background:var(--primary)}
.badge-dot-green{background:var(--secondary)}
.badge-dot-yellow{background:var(--accent-yellow)}

.hero-card{
  position:relative;
}
.hero-card-inner{
  background:rgba(255,255,255,0.84);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
.stat{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.stat strong{display:block; margin-bottom:6px}
.stat p{margin:0; color:var(--text-secondary)}
.stat-icon{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), #0B66C3);
  flex:0 0 auto;
}
.divider{
  height:1px;
  background:var(--border);
  margin:16px 0;
}
.quick-cta p{margin:0 0 10px}
.quick-cta .btn{width:100%}
.quick-cta{display:grid; gap:10px}
.btn-outline{
  background:#fff;
}
.btn-outline:hover{
  box-shadow:0 10px 20px rgba(0,0,0,0.06);
}
.hero-bg{
  position:absolute;
  inset:-200px -200px auto -200px;
  height:520px;
  background:
    radial-gradient(closest-side, rgba(30,136,229,0.22), transparent 60%),
    radial-gradient(closest-side, rgba(251,192,45,0.18), transparent 60%),
    radial-gradient(closest-side, rgba(46,125,50,0.16), transparent 60%);
  filter:blur(18px);
  transform:translateY(-40px);
  pointer-events:none;
}

/* Services */
.service-block{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:26px;
  align-items:center;
  padding:22px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  margin-top:18px;
}
.service-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.service-block--reverse{
  grid-template-columns: 1.1fr 0.9fr;
}
.service-block--reverse .service-media{order:2}
.service-media img{
  width:min(100%, 520px);
  max-height:320px;
  object-fit:contain;
  border-radius:var(--radius);
  border:1px solid rgba(17, 24, 39, 0.10);
  background:#fff;
}
.service-content{
  display:grid;
  gap:18px;
  font-size:15px;
}
.service-group h3{
  margin:0 0 8px;
  letter-spacing:-0.01em;
  font-size:18px;
}
.service-subtitle{
  margin:18px 0 10px;
  font-weight:800;
  color:var(--text-primary);
  font-size:15px;
}
.list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--text-secondary);
  font-size:14px;
}
.list li{margin:6px 0}

/* Serviços (desktop): reduzir altura do texto para equilibrar com imagens */
@media (min-width: 821px){
  .service-content{font-size:14px}
  .service-group h3{font-size:17px}
  .service-subtitle{font-size:14px}
  .list{font-size:13px}
  .service-group p{margin-bottom:10px}
  .list li{margin:4px 0}

  /* listas em colunas para reduzir altura */
  .service-group .list{
    columns:2;
    column-gap:18px;
  }
  .service-group .list li{
    break-inside:avoid;
  }
}

.section-cta{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Portfolio */
.portfolio-grid{
  display:grid;
  gap:18px;
}

.portfolio-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.portfolio-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(17, 24, 39, 0.12);
  background:#fff;
  color:var(--text-primary);
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.portfolio-tab:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,0.06);
  border-color:rgba(30,136,229,0.26);
}
.portfolio-tab[aria-selected="true"]{
  background:rgba(30, 136, 229, 0.10);
  border-color:rgba(30, 136, 229, 0.28);
  color:var(--primary);
}
.portfolio-tab:focus-visible{
  outline:3px solid rgba(30, 136, 229, 0.35);
  outline-offset:2px;
}
.portfolio-panel{
  display:grid;
  gap:12px;
}
.portfolio-group{
  max-width:1100px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}
.portfolio-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.portfolio-title{
  margin:0;
  font-size:18px;
  letter-spacing:-0.01em;
}
.portfolio-controls{
  display:flex;
  gap:10px;
  align-items:center;
}
/* Toggle (autoplay) */
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(17, 24, 39, 0.12);
  background:rgba(244, 246, 248, 0.85);
  color:var(--text-primary);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle-track{
  width:40px;
  height:22px;
  border-radius:999px;
  background:rgba(17, 24, 39, 0.18);
  border:1px solid rgba(17, 24, 39, 0.12);
  position:relative;
  transition:background .18s ease, border-color .18s ease;
  flex:0 0 auto;
}
.toggle-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  position:absolute;
  top:50%;
  left:2px;
  transform:translateY(-50%);
  transition:transform .18s ease;
  box-shadow:0 10px 16px rgba(0,0,0,0.12);
}
.toggle input:checked + .toggle-track{
  background:rgba(46, 125, 50, 0.35);
  border-color:rgba(46, 125, 50, 0.35);
}
.toggle input:checked + .toggle-track .toggle-thumb{
  transform:translateY(-50%) translateX(18px);
}
.toggle:focus-within{
  outline:3px solid rgba(30, 136, 229, 0.35);
  outline-offset:2px;
}
.icon-btn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(17, 24, 39, 0.12);
  background:#fff;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,0.06);
  border-color:rgba(30,136,229,0.26);
}

.carousel{
  position:relative;
}
.carousel-track{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:10px 44px 2px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  justify-content:center;
  scroll-padding:0 52px;
}
.carousel-track::-webkit-scrollbar{height:10px}
.carousel-track::-webkit-scrollbar-thumb{
  background:rgba(17,24,39,0.14);
  border-radius:999px;
}
.carousel-item{
  flex:0 0 auto;
  width:min(260px, 72vw);
}
.work{
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid rgba(17, 24, 39, 0.10);
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,0.06);
  cursor:zoom-in;
}
.work img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(17, 24, 39, 0.14);
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(8px);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:var(--text-primary);
  box-shadow:0 12px 26px rgba(0,0,0,0.10);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.carousel-nav:hover{
  transform:translateY(-50%) translateY(-1px);
  border-color:rgba(30, 136, 229, 0.26);
}
.carousel-nav:focus-visible{
  outline:3px solid rgba(30, 136, 229, 0.35);
  outline-offset:2px;
}
.carousel-nav-prev{left:10px}
.carousel-nav-next{right:10px}
/* (legendas removidas conforme solicitado) */

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}
.card h3{margin:0 0 10px}
.card p{margin:0; color:var(--text-secondary)}
.card-icon{
  width:44px; height:44px;
  border-radius:16px;
  display:grid; place-items:center;
  margin-bottom:12px;
  background:rgba(30,136,229,0.10);
  color:var(--primary);
  border:1px solid rgba(30,136,229,0.14);
}

/* About */
.about{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:18px;
  align-items:stretch;
}
.about-panel{
  background:linear-gradient(135deg, rgba(30,136,229,0.10), rgba(46,125,50,0.08));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  padding:18px;
}
.about-panel-inner{
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(17, 24, 39, 0.08);
  border-radius:var(--radius);
  padding:18px;
  height:100%;
}
.about-panel h3{margin:0 0 10px}
.about-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* CTA final */
.cta-final{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(251,192,45,0.28), transparent 55%),
    radial-gradient(900px 420px at 80% 30%, rgba(30,136,229,0.30), transparent 55%),
    radial-gradient(900px 420px at 60% 80%, rgba(46,125,50,0.22), transparent 60%),
    #0B1020;
  color:#fff;
}
.cta-box{
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  box-shadow:0 18px 46px rgba(0,0,0,0.35);
  padding:22px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:18px;
}
.cta-copy h2{margin:0 0 16px; line-height:1.15}
.cta-copy p{color:rgba(255,255,255,0.82)}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.cta-contacts{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.16);
  padding:18px;
}
.cta-title{margin:0 0 12px}
.contact-grid{display:grid; gap:10px}
.contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.contact-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(251,192,45,0.22);
}
.contact-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  flex:0 0 auto;
  color:#fff;
}
.contact-item[data-network="whatsapp"] .contact-icon{
  background:rgba(46, 125, 50, 0.30);
  border-color:rgba(46, 125, 50, 0.35);
}
.contact-item[data-network="instagram"] .contact-icon{
  background:rgba(251, 192, 45, 0.26);
  border-color:rgba(251, 192, 45, 0.30);
}
.contact-item[data-network="telegram"] .contact-icon{
  background:rgba(30, 136, 229, 0.28);
  border-color:rgba(30, 136, 229, 0.34);
}
.contact-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.contact-label{font-weight:800}
.contact-value{color:rgba(255,255,255,0.78); font-weight:600; overflow:hidden; text-overflow:ellipsis}

/* Map */
.map-wrap{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
  background:#fff;
}
.map-wrap iframe{
  width:100%;
  height:380px;
  display:block;
}

/* Footer */
.site-footer{
  padding:28px 0;
  border-top:1px solid var(--border);
  background:#fff;
}
.footer-copy{
  text-align:center;
  color:var(--text-secondary);
  font-weight:600;
}
.footer-dev{
  color:var(--primary);
  font-weight:800;
}
.footer-dev:hover{text-decoration:underline}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.lightbox.is-open{display:flex}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
}
.lightbox-dialog{
  position:relative;
  width:min(980px, calc(100vw - 32px));
  border-radius:22px;
  background:#0b0f1a;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  padding:16px;
  overflow:hidden;
}
.lightbox-img{
  width:100%;
  height:min(70vh, 640px);
  object-fit:contain;
  display:block;
  border-radius:16px;
  background:#0b0f1a;
}
.lightbox-caption{
  display:none;
}
.lightbox-close{
  position:absolute;
  right:10px;
  top:10px;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
  font-size:26px;
  line-height:1;
}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}

/* Reveal animations (subtle, one-time) */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 520ms cubic-bezier(0.4, 0, 0.2, 1), transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Festa Junina theme */
body{
  position:relative;
  background:
    linear-gradient(90deg, rgba(8,121,217,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(248,184,39,0.035) 1px, transparent 1px),
    var(--background-light);
  background-size:38px 38px, 38px 38px, auto;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0.16;
  mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle, rgba(8,121,217,0.85) 0 2px, transparent 2.7px),
    radial-gradient(circle, rgba(248,184,39,0.85) 0 2px, transparent 2.7px),
    radial-gradient(circle, rgba(217,45,32,0.72) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(31,143,77,0.72) 0 1.8px, transparent 2.5px);
  background-size:170px 190px, 210px 150px, 150px 230px, 240px 170px;
  background-position:12px 24px, 80px 18px, 44px 90px, 120px 118px;
  animation:confettiDrift 24s linear infinite;
}

.site-header{
  overflow:visible;
  background:rgba(255,254,250,0.88);
  box-shadow:0 8px 24px rgba(8,49,84,0.05);
}
.header-inner,
.nav-drawer{
  position:relative;
  z-index:1;
}
.brand-logo{
  filter:drop-shadow(0 6px 12px rgba(8,49,84,0.10));
}
.festa-flags{
  position:absolute;
  left:0;
  right:0;
  bottom:-25px;
  height:34px;
  display:flex;
  justify-content:center;
  gap:12px;
  pointer-events:none;
  z-index:0;
}
.festa-flags::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(820px, calc(100% - 28px));
  height:2px;
  background:rgba(8,49,84,0.24);
  transform:translateX(-50%);
  box-shadow:0 8px 16px rgba(8,49,84,0.10);
}
.festa-flags span{
  width:26px;
  height:24px;
  margin-top:1px;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0;
  filter:drop-shadow(0 5px 7px rgba(8,49,84,0.16));
  animation:flagSwing 2.9s ease-in-out infinite;
}
.festa-flags span:nth-child(4n+1){background:var(--primary)}
.festa-flags span:nth-child(4n+2){background:var(--accent-yellow); animation-delay:.16s}
.festa-flags span:nth-child(4n+3){background:var(--accent-red); animation-delay:.28s}
.festa-flags span:nth-child(4n){background:var(--secondary); animation-delay:.42s}

.btn{
  border-radius:12px;
}
.btn-glow{
  position:relative;
  isolation:isolate;
  box-shadow:0 12px 24px rgba(249,115,22,0.24), 0 0 0 1px rgba(255,255,255,0.20) inset;
  animation:glowPulse 3.4s ease-in-out infinite;
}
.btn-glow::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(248,184,39,0.36), rgba(249,115,22,0.22), rgba(8,121,217,0.18));
  filter:blur(12px);
  opacity:0.55;
  z-index:-1;
}
.btn-large{
  padding:15px 22px;
  font-size:16px;
}
.btn-accent{
  background:linear-gradient(135deg, var(--accent-yellow), var(--fire-orange));
}
.btn-primary{
  background:linear-gradient(135deg, #0A8CFF, #0565BA);
}
.btn-ghost,
.btn-outline{
  background:rgba(255,255,255,0.86);
}

.section{
  scroll-margin-top:92px;
}
.section-soft{
  background:
    linear-gradient(135deg, rgba(8,121,217,0.055), transparent 42%),
    linear-gradient(45deg, rgba(31,143,77,0.05), transparent 48%),
    var(--background-soft);
}
.section-head h2{
  color:#12324A;
}
.section-head h2::after{
  content:"";
  display:block;
  width:74px;
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--accent-yellow), var(--accent-red), var(--secondary));
}

.hero-junino{
  isolation:isolate;
  padding:104px 0 72px;
  background:
    linear-gradient(115deg, rgba(255,245,214,0.95), rgba(255,255,255,0.78) 43%, rgba(230,246,255,0.86)),
    repeating-linear-gradient(135deg, rgba(8,121,217,0.08) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #fffefa, #ffffff);
  border-bottom:1px solid rgba(8,49,84,0.08);
}
.hero-junino::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.55;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(217,45,32,0.08) 9% 10%, transparent 10% 25%),
    linear-gradient(0deg, rgba(255,255,255,0.38), transparent 52%);
}
.hero-junino .hero-grid{
  position:relative;
  z-index:1;
  align-items:center;
}
.hero-junino .kicker{
  color:#145A32;
  background:rgba(31,143,77,0.12);
  border-color:rgba(31,143,77,0.22);
}
.hero-junino .hero-title{
  max-width:820px;
  color:#0A2F52;
  text-wrap:balance;
}
.hero-junino .hero-subtitle{
  max-width:680px;
  color:#334155;
  font-weight:500;
}
.hero-junino .badge{
  border-color:rgba(8,49,84,0.12);
  background:rgba(255,255,255,0.78);
  box-shadow:0 10px 24px rgba(8,49,84,0.06);
}
.hero-card-inner{
  position:relative;
  overflow:hidden;
  border-color:rgba(8,49,84,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,250,235,0.90)),
    linear-gradient(135deg, rgba(8,121,217,0.10), rgba(248,184,39,0.10));
}
.hero-card-inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:7px;
  background:linear-gradient(90deg, var(--primary), var(--accent-yellow), var(--accent-red), var(--secondary), var(--primary));
}
.stat-featured .stat-icon{
  background:linear-gradient(135deg, var(--accent-red), var(--fire-orange));
  animation:iconFloat 4s ease-in-out infinite;
}

.junina-scene{
  position:relative;
  height:184px;
  margin:4px 0 18px;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(8,49,84,0.10);
  background:
    linear-gradient(180deg, rgba(8,121,217,0.16), rgba(255,245,214,0.72)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.38) 0 2px, transparent 2px 18px);
}
.junina-scene::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  height:2px;
  background:rgba(8,49,84,0.25);
}
.junina-scene::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:0;
  height:48px;
  background:linear-gradient(180deg, transparent, rgba(255,205,112,0.46));
}
.junina-balloon{
  position:absolute;
  top:30px;
  width:46px;
  height:62px;
  clip-path:polygon(50% 0, 82% 24%, 66% 100%, 34% 100%, 18% 24%);
  filter:drop-shadow(0 10px 14px rgba(8,49,84,0.16));
  animation:balloonFloat 5.2s ease-in-out infinite;
}
.junina-balloon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:1px;
  height:20px;
  background:rgba(8,49,84,0.30);
}
.junina-balloon-blue{
  left:34px;
  background:linear-gradient(135deg, #0A8CFF, #064D9E);
}
.junina-balloon-red{
  right:40px;
  top:44px;
  background:linear-gradient(135deg, #FF4A3D, #B91C1C);
  animation-delay:.9s;
}
.junina-bonfire{
  position:absolute;
  left:50%;
  bottom:20px;
  width:86px;
  height:86px;
  transform:translateX(-50%);
  z-index:1;
}
.junina-bonfire::before,
.junina-bonfire::after{
  content:"";
  position:absolute;
  left:13px;
  bottom:6px;
  width:64px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg, #7C3F1D, #B86B33);
  transform:rotate(18deg);
  box-shadow:0 5px 10px rgba(8,49,84,0.16);
}
.junina-bonfire::after{
  transform:rotate(-18deg);
}
.flame{
  position:absolute;
  left:50%;
  bottom:18px;
  border-radius:50% 50% 50% 0;
  transform:translateX(-50%) rotate(-45deg);
  transform-origin:50% 85%;
  animation:flameFlicker 1.8s ease-in-out infinite;
}
.flame-yellow{
  width:42px;
  height:42px;
  background:linear-gradient(135deg, #FFE066, var(--fire-orange));
}
.flame-red{
  width:58px;
  height:58px;
  background:linear-gradient(135deg, var(--accent-red), var(--fire-orange));
  opacity:0.82;
  z-index:-1;
  animation-delay:.25s;
}
.straw-hat{
  position:absolute;
  right:20px;
  bottom:18px;
  width:90px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(180deg, #F7CF69, #D8A93E);
  transform:rotate(-8deg);
  box-shadow:0 10px 18px rgba(8,49,84,0.15);
  z-index:2;
}
.straw-hat::before{
  content:"";
  position:absolute;
  left:27px;
  bottom:9px;
  width:38px;
  height:34px;
  border-radius:38px 38px 8px 8px;
  background:linear-gradient(180deg, #FFE08A, #D6A338);
  border:1px solid rgba(89,60,16,0.16);
}
.straw-hat::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:10px;
  width:48px;
  height:6px;
  border-radius:999px;
  background:var(--accent-red);
}

.service-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border-color:rgba(8,49,84,0.12);
  box-shadow:0 14px 34px rgba(8,49,84,0.08);
  transition:
    opacity 520ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 520ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .22s ease,
    border-color .22s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:8px;
  background:linear-gradient(90deg, var(--primary), var(--accent-yellow), var(--accent-red), var(--secondary));
}
.service-card::after{
  content:"";
  position:absolute;
  right:18px;
  top:20px;
  width:72px;
  height:72px;
  opacity:0.10;
  background:
    linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
  color:var(--accent-red);
}
.service-card--photo{
  background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(230,246,255,0.76));
}
.service-card--print{
  background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,245,214,0.78));
}
.service-card--digital{
  background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,248,238,0.78));
}
.service-card.reveal.is-visible:hover{
  transform:translateY(-5px);
  border-color:rgba(8,121,217,0.24);
  box-shadow:0 22px 42px rgba(8,49,84,0.13);
}
.service-media{
  position:relative;
}
.service-media::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:var(--radius);
  border:1px dashed rgba(8,49,84,0.18);
  transform:rotate(-1deg);
}
.service-media img{
  position:relative;
  border-radius:var(--radius);
  box-shadow:0 14px 26px rgba(8,49,84,0.08);
}
.service-heading{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.service-symbol{
  width:54px;
  height:54px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  box-shadow:0 12px 22px rgba(8,49,84,0.14);
}
.service-symbol svg{
  transition:transform .22s ease;
}
.service-card:hover .service-symbol svg,
.card:hover .card-icon svg,
.contact-item:hover .contact-icon svg{
  transform:translateY(-2px) rotate(-4deg) scale(1.06);
}
.service-symbol--photo{
  background:linear-gradient(135deg, var(--primary), #0756A4);
}
.service-symbol--print{
  background:linear-gradient(135deg, var(--accent-yellow), var(--fire-orange));
  color:#231A0A;
}
.service-symbol--digital{
  background:linear-gradient(135deg, var(--secondary), #0F6E7B);
}
.service-tag{
  display:inline-flex;
  margin-bottom:2px;
  color:var(--accent-red);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.portfolio-group,
.card,
.about-panel,
.about-panel-inner,
.cta-box,
.cta-contacts,
.contact-item,
.map-wrap,
.work{
  border-radius:var(--radius);
}
.portfolio-tab,
.toggle,
.icon-btn,
.contact-icon,
.lightbox-close,
.lightbox-nav{
  border-radius:var(--radius);
}
.card{
  position:relative;
  overflow:hidden;
  border-color:rgba(8,49,84,0.12);
  transition:
    opacity 520ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 520ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .22s ease,
    border-color .22s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg, var(--primary), var(--accent-yellow), var(--accent-red), var(--secondary));
}
.card.reveal.is-visible:hover{
  transform:translateY(-4px);
  border-color:rgba(248,184,39,0.42);
  box-shadow:0 18px 34px rgba(8,49,84,0.11);
}
.card-icon{
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(8,121,217,0.13), rgba(248,184,39,0.16));
}
.card-icon svg,
.contact-icon svg{
  transition:transform .22s ease;
}
.portfolio-tab[aria-selected="true"]{
  background:linear-gradient(135deg, rgba(8,121,217,0.12), rgba(248,184,39,0.18));
  border-color:rgba(8,121,217,0.26);
}
.work{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.work:hover{
  transform:translateY(-3px);
  border-color:rgba(248,184,39,0.46);
  box-shadow:0 18px 28px rgba(8,49,84,0.12);
}

.about-panel{
  background:
    linear-gradient(135deg, rgba(8,121,217,0.12), rgba(248,184,39,0.16), rgba(31,143,77,0.10));
}
.cta-final-junino{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, #06284D 0%, #0B4F79 42%, #113E2F 100%);
}
.cta-final-junino::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0.34;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px),
    linear-gradient(90deg, rgba(248,184,39,0.24), transparent 36%, rgba(217,45,32,0.18));
}
.cta-final-junino::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:9px;
  background:linear-gradient(90deg, var(--primary), var(--accent-yellow), var(--accent-red), var(--secondary), var(--primary));
}
.cta-final-junino .container{
  position:relative;
  z-index:1;
}
.cta-box{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
}
.cta-copy h2{
  text-wrap:balance;
}
.cta-copy p{
  font-size:18px;
}
.contact-item{
  backdrop-filter:blur(10px);
}

@keyframes confettiDrift{
  from{background-position:12px 24px, 80px 18px, 44px 90px, 120px 118px}
  to{background-position:12px 214px, 80px 168px, 44px 320px, 120px 288px}
}
@keyframes flagSwing{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(4deg) translateY(2px)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 12px 24px rgba(249,115,22,0.22), 0 0 0 1px rgba(255,255,255,0.20) inset}
  50%{box-shadow:0 16px 34px rgba(249,115,22,0.34), 0 0 0 1px rgba(255,255,255,0.28) inset}
}
@keyframes balloonFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
}
@keyframes flameFlicker{
  0%,100%{transform:translateX(-50%) rotate(-45deg) scale(1)}
  50%{transform:translateX(-50%) rotate(-42deg) scale(1.08, .94)}
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero{padding:72px 0 56px}
  .hero-junino{padding-top:92px}
  .about{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 820px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .brand-logo{height:48px}
  .festa-flags{bottom:-22px; gap:9px}
  .festa-flags span{width:22px; height:20px}
  .service-block,
  .service-block--reverse{grid-template-columns:1fr}
  .service-block--reverse .service-media{order:0}
}

@media (max-width: 620px){
  .section{padding:56px 0}
  .hero-junino{padding-top:82px}
  .hero-title{font-size:clamp(28px, 9vw, 40px)}
  .hero-subtitle{font-size:16px}
  .hero-cta .btn,
  .cta-actions .btn{width:100%}
  .hero-badges{flex-direction:column}
  .badge{align-items:flex-start}
  .junina-scene{height:158px}
  .junina-balloon{width:38px; height:52px}
  .junina-balloon-blue{left:22px}
  .junina-balloon-red{right:26px}
  .straw-hat{width:72px; right:14px}
  .festa-flags{gap:7px; overflow:hidden}
  .festa-flags span{width:19px; height:17px}
  .cards{grid-template-columns:1fr}
  .container{padding:0 18px}
  .service-media img{max-height:260px}
  .service-heading{align-items:flex-start}
  .service-symbol{width:48px; height:48px}

  /* Textos do serviço um pouco menores no mobile */
  .service-content{font-size:14px}
  .service-group h3{font-size:17px}
  .list{font-size:13px}

  /* Portfólio mais compacto no mobile */
  .portfolio-tabs{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
  }
  .portfolio-tab{font-size:13px; padding:9px 12px}

  .portfolio-group{padding:14px}

  /* Cabeçalho do carrossel sem cortar */
  .portfolio-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .portfolio-controls{width:100%; justify-content:flex-start}
  .portfolio-title{font-size:16px}

  /* Autoplay no estilo "switch + texto" */
  .toggle{
    padding:0;
    border:none;
    background:transparent;
    border-radius:0;
    font-size:14px;
    font-weight:800;
  }
  .toggle-track{
    width:46px;
    height:26px;
  }
  .toggle-thumb{
    width:22px;
    height:22px;
  }
  .toggle input:checked + .toggle-track .toggle-thumb{
    transform:translateY(-50%) translateX(20px);
  }

  /* Carrossel: sem centralizar (evita “corte” e espaços) */
  .carousel-track{
    padding:6px 0 2px;
    scroll-padding:0 18px;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{display:none}

  /* Duas imagens por vez (visual), com swipe horizontal */
  .carousel-item{width:min(220px, calc((100% - 12px)/2))}
  .work img{height:140px}
  .carousel-nav{width:34px; height:34px; opacity:0.92}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}