:root{--bg:#050505;--panel:#0d0d0d;--panel2:#121212;--gold:#ffd43b;--gold2:#fff0a3;--text:#f5f5f5;--muted:#c9c9c9;--line:rgba(255,212,59,.35);--shadow:0 0 22px rgba(255,212,59,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#171717 0,#050505 38%,#000 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline;text-shadow:0 0 10px rgba(255,212,59,.55)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 0 18px rgba(255,212,59,.08)}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 20px}.brand{font-weight:800;letter-spacing:.4px;color:var(--gold);font-size:1.12rem}.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.menu a{color:#fff;font-weight:700;font-size:.94rem}.menu a:hover{color:var(--gold)}
main{max-width:1180px;margin:auto;padding:0 20px 55px}.hero{margin:22px 0 28px;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:430px;display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(110deg,rgba(0,0,0,.95),rgba(0,0,0,.55)),url('assets/carro-de-som-porto-alegre-banner.jpg') center/cover;box-shadow:var(--shadow)}.hero-copy{padding:54px 44px;align-self:center}.eyebrow{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:1.2px}.hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.08;margin:12px 0;color:#fff}.hero p{font-size:1.08rem;color:#eee;max-width:680px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:800;border:1px solid var(--gold);background:var(--gold);color:#080808;box-shadow:0 0 18px rgba(255,212,59,.2)}.btn.alt{background:transparent;color:var(--gold)}
.section{margin:28px 0}.section h2{font-size:1.85rem;color:var(--gold);margin-bottom:8px}.section>p{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.card h3{margin-top:0;color:var(--gold2)}.card p{color:#ddd}.card .more{font-weight:800}.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.photo-grid img{width:100%;height:180px;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block}.quote{border-left:3px solid var(--gold);padding:16px 18px;background:#0b0b0b;border-radius:0 12px 12px 0;color:#eee}.footer{border-top:1px solid var(--line);padding:28px 20px;text-align:center;color:#bbb;background:#020202}.back{display:inline-block;margin:10px 0 20px;font-weight:800}
.text-page{max-width:920px;margin:28px auto}.text-page .intro{font-size:1.08rem;color:#ddd}.message{background:#0d0d0d;border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px 0;box-shadow:var(--shadow)}.message h3{color:var(--gold);margin-top:0}.message p{color:#eee}.crumb{color:#aaa;font-size:.92rem}.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--gold);font-size:.82rem;margin:4px}
@media(max-width:850px){.nav{align-items:flex-start}.menu{gap:10px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:36px 24px}.grid{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){main{padding:0 14px 40px}.nav{padding:11px 14px;display:block}.brand{display:block;margin-bottom:8px}.menu{gap:8px 14px}.menu a{font-size:.86rem}.hero{border-radius:16px}.hero h1{font-size:2rem}.grid,.photo-grid{grid-template-columns:1fr}.photo-grid img{height:210px}.actions .btn{width:100%;text-align:center}}

/* ===== TERCEIRO SITE: LAYOUT FINAL ===== */
.site-header{position:sticky;top:0;z-index:999;background:rgba(3,3,4,.96);border-bottom:1px solid rgba(245,197,58,.35);box-shadow:0 0 20px rgba(245,197,58,.08);backdrop-filter:blur(12px)}
.site-header .nav{width:min(1180px,94%);min-height:68px;margin:auto;padding:10px 0;display:flex;align-items:center;gap:22px}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none!important;min-width:145px}.brand span{font-size:25px;font-weight:900;letter-spacing:.5px;color:#f5c53a}.brand small{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:#aaa;margin-top:5px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:22px;flex:1}.main-nav a{color:#eee!important;text-decoration:none!important;font-size:13px;font-weight:800;letter-spacing:.2px;white-space:nowrap}.main-nav a:hover{color:#f5c53a!important;text-shadow:0 0 10px rgba(245,197,58,.4)}
.header-whatsapp{background:#f5c53a;color:#080808!important;text-decoration:none!important;border-radius:999px;padding:11px 17px;font-size:11px;font-weight:900;letter-spacing:.7px;white-space:nowrap;box-shadow:0 0 18px rgba(245,197,58,.18)}
.header-whatsapp:hover{transform:translateY(-1px);box-shadow:0 0 25px rgba(245,197,58,.35)}
.menu-toggle{display:none;background:none;border:1px solid rgba(245,197,58,.45);color:#f5c53a;border-radius:8px;padding:7px 10px;font-size:20px;cursor:pointer}
main{width:min(1180px,94%);margin:auto}
.hero{border-color:rgba(245,197,58,.35)!important;box-shadow:0 0 28px rgba(245,197,58,.08)!important}
section{scroll-margin-top:90px}
@media(max-width:760px){
.site-header .nav{min-height:64px;flex-wrap:wrap;gap:10px;position:relative;overflow:visible!important}
.brand{margin-right:auto}.menu-toggle{display:block}.header-whatsapp{padding:9px 13px}
.main-nav{order:4;display:none!important;width:auto;flex-basis:auto;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px;background:rgba(5,5,7,.98);border:1px solid rgba(245,197,58,.35);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 12px 28px rgba(0,0,0,.45);flex-direction:column!important;align-items:stretch!important;gap:0!important;z-index:1000;overflow:visible!important;white-space:normal!important}
.main-nav.open{display:flex!important}.main-nav a{display:block;padding:12px 10px!important;margin:0!important;border-bottom:1px solid rgba(245,197,58,.12);white-space:normal!important}.main-nav a:last-child{border-bottom:0}.site-header .nav{width:94%}
}


/* Site 03 — fotos selecionadas e carregamento leve */
.photo-grid img{aspect-ratio:16/9;object-fit:cover}
@media(max-width:560px){.photo-grid img{height:auto;aspect-ratio:16/10}}

/* Site 03 — fotos por ocasião */
.occasion-card{overflow:hidden;padding:0!important;border-radius:14px!important;background:linear-gradient(145deg,#111116,#09090c)!important;display:flex;flex-direction:column;}
.occasion-photo{height:145px;overflow:hidden;position:relative;background:#0a0a0d;}
.occasion-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.42));pointer-events:none;}
.occasion-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.occasion-card:hover .occasion-photo img{transform:scale(1.04);}
.occasion-card .occasion-title,.occasion-card .occasion-desc,.occasion-card .occasion-link{margin-left:22px;margin-right:22px;}
.occasion-card .occasion-title{margin-top:17px;}
.occasion-card .occasion-desc{margin-bottom:0;}
.occasion-card .occasion-link{margin-top:auto;margin-bottom:22px;}
@media(max-width:560px){.occasion-photo{height:190px;}}

/* ===== AJUSTE FINAL — FOTO/CARRO AFASTADO DO TEXTO + MOBILE ===== */
.hero{
  position:relative;
  overflow:hidden;
  background-image:none!important;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:url('assets/saile-carro-neon.jpg') 74% center/cover no-repeat;
  z-index:0;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,3,6,.96) 0%,rgba(3,3,6,.62) 50%,rgba(3,3,6,.10) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:2;
}
@media(max-width:760px){
  .hero{
    display:flex!important;
    flex-direction:column;
    min-height:0!important;
    height:auto!important;
    background:none!important;
  }
  .hero-copy{
    order:1;
    width:100%;
    padding:36px 24px 30px!important;
    background:linear-gradient(180deg,#08080a,#0b0b0d);
  }
  .hero-bg{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:235px;
    flex:0 0 235px;
    background-position:center center;
    background-size:cover;
  }
  .hero-shade{display:none!important;}
}
@media(max-width:560px){
  .hero-bg{
    height:215px;
    flex-basis:215px;
  }
}
/* AJUSTE FINAL — imagem mais afastada do texto e layout mobile */
.hero{background-position:82% center!important;}
@media(max-width:600px){
  .hero{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;background:none!important;}
  .hero-copy{order:1!important;padding:48px 6% 42px!important;max-width:none!important;position:relative!important;z-index:2!important;background:#08080b!important;}
  .hero-bg{order:2!important;position:relative!important;inset:auto!important;width:100%!important;height:280px!important;min-height:280px!important;background-position:center!important;background-size:cover!important;display:block!important;z-index:1!important;}
  .hero-image{order:2!important;position:relative!important;inset:auto!important;width:100%!important;height:280px!important;min-height:280px!important;object-fit:cover!important;object-position:center!important;display:block!important;z-index:1!important;}
  .hero-shade{display:none!important;}
}

/* AJUSTE REAL DO DESKTOP: carro mais para a direita, longe do texto */
@media(min-width:761px){
  .hero-bg{
    left:10%!important;
    right:auto!important;
    width:112%!important;
    background-position:center center!important;
  }
}

/* Mobile: texto acima e foto abaixo, ocupando toda a largura */
@media(max-width:760px){
  .hero-bg{
    left:auto!important;
    right:auto!important;
    width:100%!important;
    background-position:center center!important;
    background-size:cover!important;
  }
}


/* ===== SAILE - TEXTOS MOBILE: FOTO ABAIXO DO TEXTO ===== */
@media(max-width:600px){
  .textos-single-hero{
    background-image:none!important;
    background:#08080b!important;
    padding:42px 6% 0!important;
    min-height:0!important;
    display:block!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  .textos-single-hero .eyebrow,
  .textos-single-hero h1,
  .textos-single-hero p{position:relative;z-index:2}
  .textos-single-hero::after{
    content:"";
    display:block;
    width:calc(100% + 12%);
    height:245px;
    margin:34px -6% 0;
    background:url('assets/saile-carro-neon.jpg') center/cover no-repeat;
    border-top:1px solid rgba(245,197,58,.35);
  }
}

/* ===== SAILE - MENU MOBILE CORRIGIDO ===== */
.site-header .nav{position:relative}
.site-header .brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:0 0 auto}
.site-header .brand span{font-size:1.35rem;font-weight:900;color:var(--gold)}
.site-header .brand small{font-size:.58rem;color:#aaa;letter-spacing:1.4px;margin-top:4px}
.menu-toggle{display:none;appearance:none;border:1px solid var(--gold);background:transparent;color:var(--gold);font-size:1.35rem;line-height:1;padding:8px 11px;border-radius:8px;cursor:pointer}
.main-nav{display:flex;align-items:center;gap:18px;margin-left:auto}
.main-nav a{color:#fff;font-weight:700;font-size:.9rem;white-space:nowrap;text-decoration:none}
.main-nav a:hover{color:var(--gold)}
.header-whatsapp{display:inline-block!important;white-space:nowrap;background:var(--gold);color:#050505!important;padding:9px 13px;border-radius:7px;font-weight:900!important;text-decoration:none!important}
@media(max-width:850px){
  .site-header .nav{padding:10px 14px;gap:10px}
  .menu-toggle{display:block;margin-left:auto;order:2}
  .main-nav{display:none;position:absolute;left:14px;right:14px;top:calc(100% + 1px);margin:0;padding:10px;background:rgba(5,5,7,.98);border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 12px 28px rgba(0,0,0,.45);flex-direction:column;align-items:stretch;gap:0;z-index:100}
  .main-nav.open{display:flex}
  .main-nav a{display:block;padding:12px 10px;border-bottom:1px solid rgba(255,212,59,.12);font-size:.92rem}
  .main-nav a:last-child{border-bottom:0}
  .header-whatsapp{order:3;padding:8px 10px!important;font-size:.78rem!important}
}
@media(max-width:560px){
  .site-header .nav{padding:9px 12px}
  .site-header .brand span{font-size:1.2rem}
  .site-header .brand small{font-size:.52rem}
  .header-whatsapp{font-size:.72rem!important;padding:7px 9px!important}
}

/* SEO — bloco de cidades não aparece visualmente na página inicial.
   As páginas individuais das cidades continuam públicas e no sitemap para o Google. */
.seo-only{display:none!important;}
/* Menu mobile — comportamento consistente em todas as páginas */
@media(max-width:760px){
  .site-header .menu-toggle{
    display:block!important;
    position:relative;
    z-index:30;
    cursor:pointer;
    pointer-events:auto;
  }
  .site-header .main-nav{
    display:none!important;
  }
  .site-header .main-nav.open{
    display:flex!important;
  }
}


/* ===== CORREÇÃO DEFINITIVA — MENU E ROLAGEM HORIZONTAL ===== */
html,body{max-width:100%;overflow-x:hidden!important;}
.site-header,.site-header .nav{max-width:100%;}
.site-header .nav{overflow:visible!important;white-space:normal!important;}
@media(max-width:850px){
  .site-header .nav{overflow:visible!important;white-space:normal!important;}
  .site-header .main-nav{overflow:visible!important;white-space:normal!important;}
}