/* ═══════ GRANDERA — estilos multipágina (complemento de styles.css) ═══════ */

/* Dropdown nav */
.nav .dd{position:relative}
.nav .dd>.dd-trigger{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);font-size:15px;padding:6px 0;cursor:pointer}
.nav .dd>.dd-trigger .car{transition:transform .25s var(--ease);font-size:11px;color:var(--gold)}
.nav .dd:hover>.dd-trigger .car,.nav .dd:focus-within>.dd-trigger .car{transform:rotate(180deg)}
.nav .dd>.dd-trigger::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:.25s var(--ease)}
.nav .dd:hover>.dd-trigger::after,.nav .dd:focus-within>.dd-trigger::after{width:100%}
.dd-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:9px;opacity:0;visibility:hidden;
  transition:.22s var(--ease);z-index:70}
.nav .dd:hover .dd-menu,.nav .dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,8px)}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--ink);font-weight:500}
.dd-menu a:hover{background:var(--bg);color:var(--navy)}
.dd-menu a .di{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#eef1f6;flex:0 0 auto}
.dd-menu .dd-all{margin-top:6px;border-top:1px solid var(--line);padding-top:10px;color:var(--gold);font-weight:800}

/* Mobile menu */
.mobile-menu{position:fixed;top:0;right:0;height:100%;width:300px;max-width:88vw;background:#fff;z-index:105;
  transform:translateX(100%);transition:transform .35s var(--ease);padding:80px 22px 22px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.mobile-menu.open{transform:none}
.mobile-menu a{display:block;padding:13px 8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy);font-size:16px}
.mobile-menu .mm-sub a{font-weight:500;color:var(--muted);font-size:14px;padding-left:18px}
.mobile-menu .mm-close{position:absolute;top:20px;right:20px;font-size:28px;color:var(--muted)}

/* Sobre a empresa */
.about{padding:80px 0}
.about .container{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.about .st-eyebrow{color:var(--gold);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px}
.about h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--navy);margin:10px 0 16px}
.about p{color:var(--muted);font-size:16px;margin:0 0 16px}
.about .feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.about .feat{display:flex;gap:12px;align-items:flex-start}
.about .feat .fi{width:44px;height:44px;border-radius:12px;background:var(--gold-3);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.about .feat b{display:block;color:var(--navy);font-size:15px}
.about .feat small{color:var(--muted);font-size:13px}
.about-visual{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--navy),var(--plum));aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.about-visual .stat{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;font-family:var(--display)}
.about-visual .stat b{display:block;font-size:24px;color:var(--navy)}
.about-visual .stat small{color:var(--muted);font-size:12px;font-weight:600}
.about-visual .s1{top:22px;left:22px}.about-visual .s2{bottom:22px;right:22px}
.about-visual .logo-big{font-family:var(--display);font-weight:800;font-size:44px;color:#fff;letter-spacing:2px;opacity:.95}
.about-visual .logo-big span{color:var(--gold-2)}

/* Cards de setor (home) */
.homecats{padding:24px 0 84px}
.homecats .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hc{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hc:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.hc .hc-img{aspect-ratio:1/1;overflow:hidden;background:#eef1f6}
.hc .hc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hc:hover .hc-img img{transform:scale(1.08)}
.hc .hc-body{padding:18px}
.hc .hc-body h3{font-size:18px;color:var(--navy);margin-bottom:4px}
.hc .hc-body small{color:var(--muted);font-size:13px}
.hc .hc-go{margin-top:12px;display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:800;font-size:14px}
.hc:hover .hc-go{gap:11px}

/* Page hero (páginas de setor) */
.page-hero{background:radial-gradient(120% 140% at 85% 0%,var(--navy-3),var(--navy) 55%,var(--navy-2));color:#fff;padding:54px 0 48px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 39h40M39 0v40' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/></svg>")}
.page-hero .container{position:relative;z-index:1}
.page-hero .crumb{font-size:13px;color:#aebbd6;margin-bottom:10px}
.page-hero .crumb a{color:var(--gold-2);font-weight:600}
.page-hero .pe{display:inline-block;color:var(--gold-2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;margin-bottom:8px}
.page-hero h1{font-size:clamp(2rem,4vw,3rem)}
.page-hero p{color:#cdd5e6;font-size:17px;max-width:560px;margin:12px 0 0}

@media (max-width:980px){
  .about .container{grid-template-columns:1fr;gap:30px}
  .homecats .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .homecats .grid4{grid-template-columns:1fr 1fr}
  .about .feats{grid-template-columns:1fr}
}

/* ===== v3: logo maior, hero alto, fachada, mais motion ===== */
.brand img{height:56px}
.header.scrolled .brand img{height:46px}
.hero{height:min(92vh,820px);min-height:560px}
.slide img.photo{object-position:center}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.slide.active .eyebrow{animation:heroIn .6s .10s var(--ease) backwards}
.slide.active h2{animation:heroIn .75s .24s var(--ease) backwards}
.slide.active .copy p{animation:heroIn .75s .40s var(--ease) backwards}
.slide.active .cta-row{animation:heroIn .75s .56s var(--ease) backwards}
.about-visual{background-color:var(--navy);background-image:linear-gradient(135deg,rgba(13,24,48,.5),rgba(58,42,107,.5)),url("../img/fachada.jpg");background-size:cover;background-position:center}
.about-visual .logo-big{text-shadow:0 6px 24px rgba(0,0,0,.5)}
.about-visual .stat{animation:floaty 5s ease-in-out infinite}
.about-visual .stat.s2{animation-delay:1.2s}
.btn-gold:hover{transform:translateY(-3px) scale(1.02)}
.dd-menu a{transition:background .15s,transform .15s}
.dd-menu a:hover{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.slide.active .eyebrow,.slide.active h2,.slide.active .copy p,.slide.active .cta-row,.about-visual .stat{animation:none}}

/* ===== v4: banner limpo + transições de página ===== */
.slide.has-img .copy{display:none}            /* banner ja tem texto: nao sobrepor */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1}to{opacity:0;transform:translateY(-12px)}}
body.page-in{animation:pageIn .55s var(--ease) backwards}
body.page-out{animation:pageOut .26s ease forwards}
a,button{transition:color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.card,.hc{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.nav .dd-trigger:hover{color:var(--navy)}

/* ════════════ v5: TEMA ESCURO + GLOWS DOURADOS + MOTION ════════════ */
:root{ --bg:#0b1426; --bg-2:#0e1a30; --card:#13203b; --line:rgba(255,255,255,.10); --ink:#eef2fb; --muted:#9fb0cf; }
body{ background:#0a1120; color:var(--ink);
  background-image:
    radial-gradient(38% 30% at 14% 10%, rgba(201,162,63,.14), transparent 62%),
    radial-gradient(34% 26% at 86% 24%, rgba(201,162,63,.10), transparent 62%),
    radial-gradient(48% 38% at 50% 108%, rgba(91,63,166,.20), transparent 60%),
    linear-gradient(180deg,#0b1426,#0a1120);
  background-attachment:fixed; }
/* glow dourado animado no fundo */
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(26% 22% at 20% 20%, rgba(201,162,63,.12), transparent 60%),
            radial-gradient(24% 20% at 82% 72%, rgba(201,162,63,.10), transparent 60%);
  animation:glowShift 14s ease-in-out infinite alternate}
@keyframes glowShift{0%{transform:translate(0,0)}100%{transform:translate(2%,-5%)}}

/* Header escuro translúcido */
.header{background:rgba(10,17,32,.55);border-bottom:1px solid rgba(255,255,255,.07)}
.header.scrolled{background:rgba(8,14,28,.9);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.nav a,.nav .dd>.dd-trigger,.menu-toggle{color:var(--ink)}
.nav .dd-trigger:hover{color:#fff}

/* Catnav escuro */
.catnav{background:rgba(10,17,32,.85);border-bottom-color:rgba(255,255,255,.08)}
.catnav a{background:rgba(255,255,255,.06);color:var(--ink)}
.catnav a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
.catnav a.active{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1407}

/* Seções transparentes */
.sector,.sector:nth-child(even),.about,.homecats{background:transparent!important}

/* Textos claros */
.sector-head h2,.about h2,.card .body h3,.hc .hc-body h3,.price-row .val,.price-row .val small,.modal-info h2,.modal-info .m-price,.cart-item h4,.sumline.total,.ship-opt b,.ship-opt .so-price,.drawer-head h3{color:var(--ink)}
.card .body p,.hc .hc-body small,.sector-head p,.price-row .from,.modal-info .m-desc,.ship-opt small{color:var(--muted)}

/* Cards vidro escuro com glow dourado no hover */
.card,.hc{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(6px)}
.card:hover,.hc:hover{border-color:rgba(201,162,63,.5);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 34px rgba(201,162,63,.18)}
.card .thumb,.hc .hc-img,.modal-img{background:#0e1a30}

/* Menus / painéis / modais escuros */
.dd-menu,.mobile-menu,.modal,.ph-card,.drawer{background:#111d36;color:var(--ink);border-color:rgba(255,255,255,.1)}
.dd-menu a,.mobile-menu a{color:var(--ink)}
.dd-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.dd-menu a .di{background:#0e1a30}
.dd-menu .dd-all{border-top-color:rgba(255,255,255,.1)}
.mobile-menu a{border-bottom-color:rgba(255,255,255,.08)}
.mobile-menu .mm-close{color:var(--ink)}
.drawer-head,.drawer-foot,.cart-item{border-color:rgba(255,255,255,.1)}
.drawer-close,.modal-close{color:var(--muted)} .drawer-close:hover,.modal-close:hover{background:rgba(255,255,255,.08);color:#fff}
.spec{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.12)}
.resumo-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.field input,.field textarea,.field select{background:#0e1a30;color:var(--ink);border-color:rgba(255,255,255,.14)}
.field label{color:var(--ink)}
.ship-opt{border-color:rgba(255,255,255,.12)} .ship-opt.sel{background:rgba(201,162,63,.12);border-color:var(--gold)}
.steps .step-dot{color:var(--muted)}

/* Botões no escuro */
.btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.16)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(255,255,255,.1)}
.btn-navy{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid rgba(255,255,255,.12)}
.btn-navy:hover{background:rgba(255,255,255,.15)}
.btn-gold{box-shadow:0 10px 30px rgba(201,162,63,.45),0 0 0 1px rgba(201,162,63,.25)}
.cart-btn{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1407}
.cart-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* Footer um pouco mais claro de borda */
.footer{background:rgba(7,12,24,.6);border-top:1px solid rgba(255,255,255,.07)}

/* ÍCONES EM MOVIMENTO + glow */
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(201,162,63,.25)}50%{box-shadow:0 0 20px 3px rgba(201,162,63,.40)}}
.about .feat .fi{animation:floaty 4.5s ease-in-out infinite, pulseGlow 3.4s ease-in-out infinite}
.about .feat:nth-child(2) .fi{animation-delay:.5s,.4s}
.about .feat:nth-child(3) .fi{animation-delay:1s,.8s}
.about .feat:nth-child(4) .fi{animation-delay:1.5s,1.2s}
.float-contact{box-shadow:0 12px 30px rgba(201,162,63,.5),0 0 0 0 rgba(201,162,63,.5);animation:floaty 4s var(--ease) infinite, pulseGlow 2.8s ease-in-out infinite}
.hc:hover .hc-go span{animation:none}
.strip .mq span i{animation:none}
.sector-head .st-eyebrow::before,.about .st-eyebrow::before{}

/* ════════════ v6: fachada limpa + icones dourados + 100% animado ════════════ */
/* fachada limpa (sem chips/logo sobrepostos) */
.about-visual .stat,.about-visual .logo-big{display:none!important}
.about-visual{background-image:url("../img/fachada.jpg")!important;background-size:cover;background-position:center}

/* icones do "Sobre" em dourado */
.about .feat .fi{background:linear-gradient(135deg,var(--gold),var(--gold-2))!important;color:#1a1407!important}

/* 100% — animação em loop (shine + respiração + anel dourado girando) */
.band-visual{position:relative;overflow:visible}
.band-visual .big{position:relative;display:inline-block;
  background:linear-gradient(90deg,var(--gold-2),#ffffff 50%,var(--gold));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shineText 3.2s linear infinite, breathe 4.2s ease-in-out infinite}
@keyframes shineText{to{background-position:-200% center}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.band-visual .big::after{content:"";position:absolute;left:50%;top:50%;width:180px;height:180px;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 25%,rgba(201,162,63,.75) 50%,transparent 75% 100%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%);mask:radial-gradient(circle,transparent 56%,#000 58%);
  animation:spin 5s linear infinite}
.band-visual::before{content:"";position:absolute;left:50%;top:46%;width:230px;height:230px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,63,.22),transparent 68%);animation:breathe 4.2s ease-in-out infinite;z-index:0;pointer-events:none}
.band-visual>*{position:relative;z-index:1}

/* ===== v7: logo branco grande + "Escolha a sua categoria" dourado ===== */
.header .container{height:94px}
.header.scrolled .container{height:74px}
.brand img{height:66px!important;width:auto}
.header.scrolled .brand img{height:54px!important}
.homecats .section-head h2{background:linear-gradient(90deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ===== v8: menu à direita, logo à esquerda ===== */
.header .brand{order:1}
.header .spacer{order:2;flex:1}
.header .nav{order:3;margin-left:0}
.header .cart-btn{order:4}
.header .menu-toggle{order:5}

/* ===== v9: titulos legiveis + foto da colaboradora no lugar do 100% ===== */
.about .feat b{color:var(--ink)!important}
.band-visual{padding:0!important;min-height:380px;overflow:hidden;
  background:#0e1a30 url("../img/modelo.jpg") center/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.12)}
.band-visual .big,.band-visual p,.band-visual::before,.band-visual .big::after{display:none!important}

/* ===== v10: fallback de marca no painel da foto (enquanto modelo.jpg nao existe) ===== */
.band-visual{background:url("../img/modelo.jpg") center/cover no-repeat, linear-gradient(135deg,var(--navy),var(--plum-2,#5b3fa6))!important}

/* ===== v11: pagina de contato ===== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact-info h3{font-size:22px;color:var(--ink);margin-bottom:10px}
.contact-info>p{color:var(--muted);margin-bottom:22px}
.ci-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.ci-list li{display:flex;gap:14px;align-items:flex-start}
.ci-ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1407;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ci-list b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.ci-list a,.ci-list span{color:var(--muted);font-size:14px}
.ci-list a:hover{color:var(--gold-2)}
.contact-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px}
.contact-form .hp{display:none}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:28px}}

/* ═══════════ v12: MOBILE — enquadrar e centralizar ═══════════ */
@media (max-width:768px){
  /* HERO: mostra o banner inteiro, sem vão escuro */
  .hero{height:auto!important;min-height:0!important}
  .slides{position:relative;height:auto}
  .slide{position:relative!important;height:auto!important;min-height:0!important;display:none;opacity:1}
  .slide.active{display:block}
  .slide .bg{display:none}
  .slide img.photo{position:relative!important;width:100%;height:auto!important;opacity:1!important;animation:none!important}
  .slide .copy{display:none!important}
  .hero-arrow,.hero-progress{display:none}
  .hero-dots{bottom:8px}

  /* TEXTOS CENTRALIZADOS */
  .page-hero{text-align:center}
  .page-hero .crumb{display:none}
  .page-hero p{margin-left:auto;margin-right:auto}
  .sector-head{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .sector-head .st-count{display:none}
  .about,.about .container{text-align:center}
  .about .feats{justify-items:center;gap:22px}
  .about .feat{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .about-visual{margin:24px auto 0;width:100%;max-width:430px}
  .band{text-align:center;padding:30px 22px}
  .band ul{justify-items:center}
  .band li{justify-content:center}
  .band-visual{margin:0 auto;width:100%;max-width:430px}
  .about .btn,.band .btn{margin-left:auto;margin-right:auto}
  .footer .container{text-align:center}
  .footer a:hover{transform:none}
  .footer p{margin-left:auto;margin-right:auto}
  .card .body{text-align:center}
  .card .price-row{justify-content:center;gap:10px}
  .contact-grid{text-align:center}
  .contact-info .ci-list li{justify-content:center;text-align:left}
  /* header: logo um pouco menor no celular */
  .header .container{height:74px}
  .brand img{height:48px!important}
  .section-head{text-align:center}
}

/* ═══════════ v13: ajustes finos mobile ═══════════ */
@media (max-width:768px){
  /* rodapé: tudo centralizado, inclusive a linha do copyright */
  .footer{padding:48px 0 24px}
  .footer .container{gap:26px}
  .footer .fbottom{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px}
  .footer h4{margin-bottom:8px}
  /* hero limpo, sem bordas/margens/sobra */
  .hero,.slides,.slide{border-radius:0!important;margin:0!important;padding:0!important;background:transparent!important}
  .slide img.photo{display:block;border-radius:0!important;margin:0!important}
  .hero-dots{position:absolute}
  /* seções sem aparecer "vazias" caso o reveal não dispare */
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ===== v14: endereço abaixo da foto da fachada ===== */
.about-visual-wrap{display:flex;flex-direction:column;gap:14px}
.about-address{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);font-weight:600;font-size:15px;font-style:normal;text-align:center}
.about-address svg{color:var(--gold);flex:0 0 auto}

/* ===== Instagram (acima do rodapé) ===== */
.ig-section{padding:80px 0;border-top:1px solid rgba(255,255,255,.07)}
.ig-cta{text-align:center;max-width:720px;margin:0 auto}
.ig-cta .st-eyebrow{color:var(--gold);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px}
.ig-cta h2{color:var(--ink);font-size:clamp(1.7rem,3.2vw,2.5rem);margin:10px 0 12px}
.ig-cta p{color:var(--muted);margin:0 auto 22px;max-width:48ch}
.ig-cta .btn-gold svg{width:18px;height:18px;vertical-align:-4px;margin-right:4px}
#igFeed{margin-top:32px}
#igFeed iframe{width:100%;border:none}

/* rodapé: copyright + CNPJ numa linha só (fonte encolhe no mobile p/ não estourar) */
.footer .fbottom{flex-wrap:nowrap;font-size:clamp(9.5px,2.7vw,12.5px)}
.footer .fbottom span{white-space:nowrap}