/* =====================================================================
   VILLA JULIA MÓVEIS — Tema WordPress
   Folha de estilo principal
   Paleta e tipografia conforme Manual da Marca
   ===================================================================== */

:root{
  /* Cores institucionais */
  --vj-green:      #1E3D2F;   /* Verde institucional */
  --vj-green-700:  #16302514; 
  --vj-green-deep: #16302A;   /* Verde profundo (rodapé / seções) */
  --vj-gold:       #C8A25B;   /* Dourado */
  --vj-gold-soft:  #D9BE8A;
  --vj-cream:      #E9E2D5;   /* Off-white / bege */
  --vj-page:       #F6F2EA;   /* Fundo geral (mais claro) */
  --vj-paper:      #FBF8F2;   /* Cartões */
  --vj-graphite:   #333333;   /* Grafite */
  --vj-ink:        #23342B;   /* Texto sobre claro */
  --vj-muted:      #6B7168;

  /* Tipografia */
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --gap: clamp(16px, 3vw, 32px);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 6px 20px rgba(30,61,47,.08);
  --shadow-md: 0 18px 45px rgba(30,61,47,.14);
  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------- Reset / base ------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--vj-ink);
  background:var(--vj-page);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.02em; margin:0; color:var(--vj-green); }
p{ margin:0 0 1em; }

.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.text-center{ text-align:center; }

/* ------------------------- Ornamento (divisória dourada) --------- */
.vj-ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:14px auto 0; max-width:220px;
}
.vj-ornament::before,.vj-ornament::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--vj-gold));
}
.vj-ornament::after{ background:linear-gradient(90deg, var(--vj-gold), transparent); }
.vj-ornament i{
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--vj-gold); border-radius:2px; flex:none;
}

/* ------------------------- Botões ------------------------------- */
.btn{
  --btn-bg:var(--vj-green); --btn-fg:#fff; --btn-bd:var(--vj-green);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:8px;
  font-family:var(--font-body); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn--gold{ --btn-bg:var(--vj-gold); --btn-fg:#2a2417; --btn-bd:var(--vj-gold); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.75); backdrop-filter:blur(2px); }
.btn--ghost:hover{ --btn-bg:#fff; --btn-fg:var(--vj-green); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--vj-green); --btn-bd:var(--vj-green); }
.btn--outline:hover{ --btn-bg:var(--vj-green); --btn-fg:#fff; }
.btn svg{ width:18px; height:18px; }

/* ------------------------- Placeholder de foto ------------------ */
.vj-ph{
  position:relative; overflow:hidden; background:
    radial-gradient(120% 120% at 20% 10%, rgba(200,162,91,.20), transparent 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(30,61,47,.22), transparent 50%),
    linear-gradient(135deg, #cfc7b4, #ded7c6 60%, #cbbfa6);
}
.vj-ph::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8px;
  font-family:var(--font-body); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(30,61,47,.55); font-weight:600;
}
.vj-ph.has-img{ background:none; }
.vj-ph.has-img::after{ display:none; }
.vj-ph img{ width:100%; height:100%; object-fit:cover; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; width:min(1280px,94vw); }
.site-header.is-solid{ background:var(--vj-green); box-shadow:0 6px 30px rgba(0,0,0,.18); height:72px; }
body.internal .site-header{ position:sticky; background:var(--vj-green); }

.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; transition:height .45s var(--ease); filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.is-solid .brand img{ height:44px; }
.brand .brand-fallback{ font-family:var(--font-display); color:#fff; font-size:1.3rem; letter-spacing:.08em; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  color:#f4efe4; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:10px 14px; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--vj-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.current::after{ transform:scaleX(1); }
.nav a.current{ color:var(--vj-gold); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-actions .icon-btn{ background:none; border:0; color:#f4efe4; display:grid; place-items:center; }
.header-actions .icon-btn svg{ width:20px; height:20px; }
.header-cta{ padding:12px 22px; font-size:.72rem; }

.hamburger{ display:none; background:none; border:0; width:40px; height:40px; }
.hamburger span{ display:block; width:24px; height:2px; background:#f4efe4; margin:5px auto; transition:.3s var(--ease); }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.mobile-nav{
  position:fixed; inset:0; z-index:999; background:var(--vj-green-deep);
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column; padding:110px 8vw 40px; gap:6px;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ color:#f4efe4; font-family:var(--font-display); font-size:1.4rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav .btn{ margin-top:24px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg .vj-ph{ position:absolute; inset:0; transform:scale(1.08); animation:kenburns 18s ease-in-out infinite alternate; }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,28,22,.78) 0%, rgba(15,28,22,.45) 45%, rgba(15,28,22,.15) 100%); }
@keyframes kenburns{ from{ transform:scale(1.05) translate(0,0);} to{ transform:scale(1.14) translate(-1.5%, -1.5%);} }

.hero__inner{ position:relative; z-index:2; width:min(1200px,92vw); margin-inline:auto; padding-top:var(--header-h); }
.hero h1{ color:#fff; font-size:clamp(2.6rem, 6.4vw, 5rem); line-height:1.04; max-width:14ch; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.hero p{ max-width:44ch; font-size:clamp(1rem,1.6vw,1.15rem); color:#efe9dc; margin-top:22px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

.hero__seal{
  position:absolute; top:calc(var(--header-h) + 20px); right:max(4vw,24px); z-index:3;
  width:118px; height:118px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:var(--vj-green); border:2px solid var(--vj-gold); color:var(--vj-gold);
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.12em; line-height:1.5;
  box-shadow:var(--shadow-md); animation:sealIn .9s .4s both var(--ease);
}
.hero__seal span{ display:block; font-size:.9rem; }
@keyframes sealIn{ from{ opacity:0; transform:scale(.6) rotate(-20deg);} to{ opacity:1; transform:none;} }

/* Entrada do hero */
.hero .anim{ opacity:0; transform:translateY(28px); animation:heroUp .9s both var(--ease); }
.hero h1.anim{ animation-delay:.15s; }
.hero p.anim{ animation-delay:.35s; }
.hero__cta.anim{ animation-delay:.55s; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

/* =====================================================================
   SEÇÕES GENÉRICAS
   ===================================================================== */
.section{ padding:clamp(64px, 8vw, 110px) 0; }
.section--cream{ background:var(--vj-cream); }
.section-head{ text-align:center; margin-bottom:clamp(36px,5vw,60px); }
.section-head h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); text-transform:uppercase; }
.section-head .lead{ max-width:52ch; margin:14px auto 0; color:var(--vj-muted); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* ---- Encontre o móvel ideal (categorias) ---- */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cat-card{
  background:var(--vj-paper); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid rgba(200,162,91,.18);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.cat-card__img{ aspect-ratio:1/1; }
.cat-card__img .vj-ph{ position:absolute; inset:0; transition:transform .6s var(--ease); }
.cat-card__img{ position:relative; overflow:hidden; }
.cat-card:hover .cat-card__img .vj-ph{ transform:scale(1.08); }
.cat-card__body{ padding:20px 12px 22px; text-align:center; }
.cat-card__icon{ width:40px; height:40px; margin:0 auto 12px; color:var(--vj-gold); }
.cat-card__icon svg{ width:100%; height:100%; }
.cat-card__name{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vj-green); line-height:1.4; }

/* =====================================================================
   CARROSSEL (favoritos / relacionados)
   ===================================================================== */
.carousel{ position:relative; }
.carousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*22px)/4);
  gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 18px; scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel--five .carousel__track{ grid-auto-columns:calc((100% - 4*22px)/5); }
.prod-card{ scroll-snap-align:start; background:var(--vj-paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid rgba(200,162,91,.15); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.prod-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.prod-card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.prod-card__media .vj-ph{ position:absolute; inset:0; transition:transform .6s var(--ease); }
.prod-card:hover .prod-card__media .vj-ph{ transform:scale(1.07); }
.prod-tag{ position:absolute; top:12px; left:12px; background:var(--vj-green); color:#fff; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:4px; font-weight:600; }
.prod-tag--gold{ background:var(--vj-gold); color:#2a2417; }
.prod-card__body{ padding:20px 16px 22px; text-align:center; }
.prod-card__cat{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vj-gold); font-weight:700; }
.prod-card__name{ font-family:var(--font-display); font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vj-green); margin:6px 0 14px; }
.prod-card .btn{ padding:11px 22px; font-size:.66rem; }

.carousel__nav{ position:absolute; top:38%; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid rgba(200,162,91,.4); color:var(--vj-green); display:grid; place-items:center; box-shadow:var(--shadow-sm); z-index:5; transition:.3s var(--ease); }
.carousel__nav:hover{ background:var(--vj-green); color:#fff; }
.carousel__nav[disabled]{ opacity:.35; pointer-events:none; }
.carousel__nav.prev{ left:-14px; }
.carousel__nav.next{ right:-14px; }
.carousel__nav svg{ width:18px; height:18px; }

.center-cta{ text-align:center; margin-top:38px; }

/* ---- Faixa de diferenciais ---- */
.features{ background:var(--vj-cream); }
.features__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.feature{ display:flex; gap:14px; align-items:flex-start; }
.feature__ic{ width:40px; height:40px; flex:none; color:var(--vj-green); }
.feature__ic svg{ width:100%; height:100%; }
.feature h4{ font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--vj-green); margin-bottom:4px; }
.feature p{ font-size:.82rem; color:var(--vj-muted); margin:0; }

/* ---- Projetos que inspiram ---- */
.projects{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; }
.projects__grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; }
.projects__grid .vj-ph{ border-radius:var(--radius-sm); aspect-ratio:4/3; }
.projects__grid .vj-ph:first-child{ grid-row:span 1; }
.projects__text h2{ text-align:left; }
.projects__text .vj-ornament{ margin-inline:0; }
.projects__text p{ color:var(--vj-muted); margin:20px 0 28px; font-size:1.05rem; }

/* ---- Personalização (verde) ---- */
.custom{ background:var(--vj-green-deep); color:#fff; }
.custom__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.custom h2{ color:#fff; text-align:left; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.1; }
.custom p{ color:#d7d2c4; margin:18px 0 28px; max-width:40ch; }
.custom__imgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.custom__imgs .vj-ph{ aspect-ratio:3/4; border-radius:var(--radius-sm); }

/* ---- Depoimentos ---- */
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review{ background:var(--vj-paper); border:1px solid rgba(200,162,91,.22); border-radius:var(--radius); padding:30px 26px; text-align:center; box-shadow:var(--shadow-sm); }
.review__stars{ color:var(--vj-gold); letter-spacing:3px; margin-bottom:14px; }
.review p{ font-style:italic; color:var(--vj-graphite); font-size:.95rem; }
.review__author{ font-family:var(--font-display); color:var(--vj-green); font-size:.85rem; letter-spacing:.06em; margin-top:12px; }

/* ---- Região / mapa ---- */
.region{ background:var(--vj-cream); }
.region__grid{ display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:24px; align-items:center; }
.region__cities{ font-family:var(--font-display); color:var(--vj-green); line-height:1.9; letter-spacing:.04em; }
.region__map .vj-ph, .region__photo .vj-ph{ border-radius:var(--radius-sm); aspect-ratio:16/11; }

/* ---- CTA final ---- */
.final-cta{ position:relative; background:var(--vj-green-deep); color:#fff; text-align:center; overflow:hidden; }
.final-cta::before,.final-cta::after{ content:""; position:absolute; width:260px; height:260px; background:radial-gradient(circle, rgba(200,162,91,.16), transparent 70%); }
.final-cta::before{ left:-60px; bottom:-80px; } .final-cta::after{ right:-60px; top:-80px; }
.final-cta h2{ color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); text-transform:uppercase; }
.final-cta p{ color:#d7d2c4; margin:14px auto 30px; max-width:48ch; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer{ background:var(--vj-green-deep); color:#cfd3c9; padding:64px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; }
.footer__brand img{ height:70px; margin-bottom:16px; filter:brightness(1.4); }
.footer__brand .socials{ display:flex; gap:14px; margin-top:16px; }
.footer__brand .socials a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:grid; place-items:center; transition:.3s var(--ease); }
.footer__brand .socials a:hover{ background:var(--vj-gold); color:var(--vj-green-deep); border-color:var(--vj-gold); }
.footer__brand .socials svg{ width:16px; height:16px; }
.footer h4{ font-family:var(--font-body); color:var(--vj-gold); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.footer ul li{ margin-bottom:10px; }
.footer ul a{ font-size:.86rem; color:#cfd3c9; transition:color .3s; }
.footer ul a:hover{ color:#fff; }
.footer__contact li{ display:flex; gap:10px; font-size:.86rem; align-items:flex-start; }
.footer__contact svg{ width:15px; height:15px; color:var(--vj-gold); flex:none; margin-top:3px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:52px; padding:22px 0; }
.footer__bottom .wrap{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.78rem; color:#9aa196; }
.footer__bottom a:hover{ color:#fff; }

/* WhatsApp flutuante */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.45); animation:waPulse 2.6s infinite; }
.wa-float svg{ width:30px; height:30px; color:#fff; }
@keyframes waPulse{ 0%,100%{ box-shadow:0 10px 30px rgba(37,211,102,.45);} 50%{ box-shadow:0 10px 30px rgba(37,211,102,.75), 0 0 0 12px rgba(37,211,102,0);} }

/* =====================================================================
   PÁGINA DE PRODUTO (single)
   ===================================================================== */
.breadcrumbs{ padding:100px 0 8px; font-size:.78rem; color:var(--vj-muted); letter-spacing:.04em; }
.breadcrumbs a:hover{ color:var(--vj-gold); }
.product-top{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,4vw,56px); padding:24px 0 40px; align-items:start; }
.gallery__main{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); }
.gallery__main .vj-ph{ position:absolute; inset:0; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
.gallery__thumbs button{ border:2px solid transparent; border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:none; padding:0; }
.gallery__thumbs button.active{ border-color:var(--vj-gold); }
.gallery__thumbs .vj-ph{ width:100%; height:100%; }
.product-info .prod-eyebrow{ text-align:center; }
.product-info h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); text-transform:uppercase; line-height:1.05; text-align:center; }
.product-info .subtitle{ text-align:center; font-style:italic; color:var(--vj-muted); max-width:38ch; margin:16px auto 26px; }
.product-info .composition{ display:flex; gap:16px; align-items:center; justify-content:center; margin:22px 0 28px; }
.product-info .composition svg{ width:44px; height:44px; color:var(--vj-gold); }
.product-info .composition small{ display:block; font-family:var(--font-display); letter-spacing:.14em; color:var(--vj-green); }
.product-info .btn--wa{ width:100%; background:var(--vj-green-deep); border-color:var(--vj-green-deep); padding:20px; font-size:.9rem; }
.product-info .assurance{ text-align:center; color:var(--vj-muted); font-size:.8rem; margin-top:14px; }

.prod-section{ text-align:center; padding:clamp(30px,4vw,50px) 0; }
.prod-section h2{ text-transform:uppercase; font-size:clamp(1.4rem,3vw,2rem); }
.prod-desc p{ max-width:70ch; margin:0 auto 1em; color:var(--vj-graphite); }
.char-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; margin-top:14px; }
.char{ text-align:center; padding:14px 6px; border-right:1px solid rgba(200,162,91,.3); }
.char:last-child{ border-right:0; }
.char svg{ width:34px; height:34px; color:var(--vj-green); margin:0 auto 10px; }
.char span{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vj-green); font-weight:600; line-height:1.4; }
.two-col{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px; text-align:left; }
.measures{ background:var(--vj-paper); border-radius:var(--radius); padding:26px; border:1px solid rgba(200,162,91,.2); }
.measures table{ width:100%; border-collapse:collapse; }
.measures td{ padding:14px 6px; border-bottom:1px solid rgba(200,162,91,.25); font-size:.9rem; }
.measures td:first-child{ font-family:var(--font-display); color:var(--vj-green); letter-spacing:.06em; }
.measures .note{ font-size:.78rem; color:var(--vj-muted); margin-top:12px; display:flex; gap:8px; align-items:center; }
.details-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.detail{ text-align:center; }
.detail .vj-ph{ aspect-ratio:1/1; border-radius:var(--radius-sm); }
.detail span{ display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vj-green); margin-top:10px; font-weight:600; }
.cta-band{ background:var(--vj-cream); border-radius:var(--radius); padding:30px clamp(24px,4vw,44px); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:30px 0; }
.cta-band__ic{ width:56px; height:56px; border-radius:50%; background:var(--vj-green-deep); display:grid; place-items:center; color:#fff; flex:none; }
.cta-band__txt h3{ font-size:1.2rem; text-transform:uppercase; }
.cta-band__txt p{ margin:4px 0 0; color:var(--vj-muted); font-size:.9rem; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:1024px){
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .carousel__track{ grid-auto-columns:calc((100% - 22px)/2.15); }
  .carousel--five .carousel__track{ grid-auto-columns:calc((100% - 22px)/2.15); }
  .features__grid{ grid-template-columns:repeat(2,1fr); }
  .char-grid{ grid-template-columns:repeat(4,1fr); }
  .details-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nav,.header-actions .header-cta,.header-actions .icon-btn{ display:none; }
  .hamburger{ display:block; }
  .projects,.custom__grid,.region__grid,.product-top,.two-col{ grid-template-columns:1fr; }
  .region__map,.region__photo{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__seal{ width:92px; height:92px; font-size:.52rem; }
  .carousel__nav{ display:none; }
}
@media (max-width:560px){
  :root{ --header-h:70px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .carousel__track{ grid-auto-columns:82%; }
  .carousel--five .carousel__track{ grid-auto-columns:82%; }
  .reviews__grid{ grid-template-columns:1fr; }
  .features__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .char-grid,.details-grid{ grid-template-columns:repeat(2,1fr); }
  .hero__cta .btn{ flex:1; }
}

/* Acessibilidade / reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}
:focus-visible{ outline:2px solid var(--vj-gold); outline-offset:3px; }
