*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08080b;color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.7}.top{position:fixed;z-index:20;top:0;left:0;right:0;min-height:78px;display:flex;align-items:center;padding:0 5%;gap:24px;background:rgba(5,5,7,.97);border-bottom:1px solid #29292e;backdrop-filter:blur(10px)}.logo{font-size:31px;font-weight:900;font-style:italic;color:#f5c53a;text-decoration:none;line-height:.8;flex:0 0 auto}.logo small{display:block;font-size:8px;letter-spacing:2px;font-style:normal;color:#aaa;margin-top:7px}.nav{margin-left:auto;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 220px);overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;padding:8px 0}.nav a{font-size:10px;text-transform:uppercase;color:#ddd;text-decoration:none;flex:0 0 auto}.nav a:hover{color:#f5c53a}.wa{color:#08080b!important;background:#f5c53a;border:1px solid #f5c53a;padding:9px 12px;border-radius:3px;font-weight:900}.hero{height:610px;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;background:url('/assets/saile-carro-neon.jpg') center/cover no-repeat;z-index:0}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,6,.96),rgba(3,3,6,.62),rgba(3,3,6,.12));z-index:1}.hero-copy{position:relative;z-index:2;padding:175px 7% 0;max-width:820px}.eyebrow{font-size:11px;letter-spacing:2.3px;color:#f5c53a;font-weight:900}.hero h1{font-size:clamp(42px,5.8vw,72px);line-height:1.02;letter-spacing:-2px;margin:16px 0}.hero h1 strong{color:#f5c53a}.hero p{max-width:650px;color:#ddd;font-size:17px}.gold{display:inline-block;background:#f5c53a;color:#08080b;text-decoration:none;padding:13px 20px;margin-top:15px;font-size:10px;font-weight:900;letter-spacing:1px}.intro{padding:65px 8%;background:#f2efe8;color:#111;display:grid;grid-template-columns:.7fr 1.3fr;gap:50px}.intro .eyebrow{color:#8b6b00}.intro h2{font-size:clamp(35px,4vw,55px);line-height:1.05;margin:0}.intro h2 strong{color:#8b6b00}.intro p{color:#555}.content{padding:85px 7%;background:#09090c}.head{max-width:800px;margin-bottom:38px}.head h2{font-size:clamp(38px,4vw,58px);line-height:1.05;margin:12px 0}.head p{color:#999}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#111116;border:1px solid #2a2a30;border-radius:6px;padding:30px;min-width:0}.card:hover{border-color:#f5c53a}.num{display:inline-block;color:#f5c53a;font-size:28px;font-weight:900}.label{float:right;color:#777;font-size:9px;letter-spacing:1.4px;margin-top:9px}.card h3{font-size:22px;margin:15px 0 20px;line-height:1.25}.message{color:#d2d2d5;font-size:16px;overflow-wrap:anywhere}.message p{margin:0 0 18px}.choose{display:block;text-align:center;margin-top:25px;border:1px solid #f5c53a;color:#f5c53a;text-decoration:none;padding:12px;font-size:10px;font-weight:900;letter-spacing:1px}.choose:hover{background:#f5c53a;color:#08080b}.cta{text-align:center;padding:90px 7%;background:radial-gradient(circle at center,#241b09,#08080b 60%)}.cta h2{font-size:clamp(37px,4vw,58px);line-height:1.05}.cta strong{color:#f5c53a}.cta p{max-width:720px;margin:auto;color:#aaa}.back-home{display:block;text-align:center;padding:18px;background:#0b0b0e;color:#f5c53a;text-decoration:none;font-weight:800;font-size:11px;letter-spacing:1px}footer{text-align:center;padding:25px;color:#777;background:#050507;font-size:12px}footer small{color:#777}@media(max-width:900px){.top{min-height:72px}.nav{max-width:calc(100vw - 125px);gap:10px}.intro,.grid{grid-template-columns:1fr}.hero{height:650px}.hero-copy{padding:155px 6% 0}}@media(max-width:600px){.top{padding:0 5%;gap:12px}.logo{font-size:25px}.logo small{font-size:7px}.nav{max-width:calc(100vw - 110px)}.nav a{font-size:9px}.wa{padding:7px 9px}.hero h1{font-size:40px}.hero p{font-size:15px}.content,.intro,.cta{padding:60px 6%}.card{padding:22px}.label{float:none;display:block;margin-top:5px}.message{font-size:15px}.hero-bg,.hero-image{background-position:center}.hero-image{object-position:center}} 

/* SAILE - PADRAO VISUAL PRETO + NEON DOURADO */
:root{--saile-bg:#050507;--saile-panel:#0b0b0f;--saile-panel2:#111116;--saile-gold:#f5c53a;--saile-gold2:#ffd95a;--saile-text:#f5f5f5;--saile-muted:#aaa;}
html,body{background:var(--saile-bg)!important;color:var(--saile-text)!important;}
body{background-image:radial-gradient(circle at 50% 0%,rgba(245,197,58,.055),transparent 38%)!important;}
main,section,.content,.intro,.cta,.service-area,.service-area-inner{background-color:transparent!important;color:var(--saile-text)!important;}
.intro{background:linear-gradient(180deg,#0a0a0d,#050507)!important;border-top:1px solid rgba(245,197,58,.16);border-bottom:1px solid rgba(245,197,58,.12);}
.card,.service-area-inner{background:linear-gradient(145deg,#111116,#09090c)!important;border-color:rgba(245,197,58,.28)!important;box-shadow:0 0 24px rgba(245,197,58,.045);}
.card:hover{border-color:var(--saile-gold)!important;box-shadow:0 0 24px rgba(245,197,58,.12);}
h1,h2,h3,h4{color:#fff;}
h1 strong,h2 strong,.gold,.eyebrow,.num,.kicker,.section-head>span,.intro-label{color:var(--saile-gold)!important;}
a:hover{color:var(--saile-gold)!important;}
.gold,.btn-gold{background:var(--saile-gold)!important;color:#050507!important;box-shadow:0 0 14px rgba(245,197,58,.16);}
.choose,.btn-outline{border-color:var(--saile-gold)!important;color:var(--saile-gold)!important;}
.choose:hover,.btn-outline:hover{background:var(--saile-gold)!important;color:#050507!important;}
footer{background:#030304!important;border-top:1px solid rgba(245,197,58,.16)!important;}

/* ===== SAILE AJUSTE FINAL: MENU LIMPO + PAGINAS DE TEXTOS ===== */
.top{height:72px!important;min-height:72px!important;padding:0 5%!important;gap:18px!important}
.logo{font-size:27px!important}
.logo small{font-size:7px!important;letter-spacing:1.8px!important}
.nav{margin-left:auto!important;display:flex!important;gap:18px!important;align-items:center!important;max-width:none!important;overflow:visible!important;white-space:nowrap!important;padding:0!important}
.nav a{font-size:10px!important;letter-spacing:.6px!important}
.nav .wa{padding:9px 13px!important}
.hero{height:auto!important;min-height:520px!important;background:#070708!important;display:flex!important;align-items:center!important}
.hero-copy{padding:135px 7% 75px!important;max-width:900px!important}
.hero h1{max-width:780px!important;font-size:clamp(38px,5vw,66px)!important;margin:14px 0 18px!important}
.hero p{max-width:700px!important;font-size:16px!important;line-height:1.65!important}
.intro{padding:58px 7%!important;display:block!important;background:linear-gradient(180deg,#0a0a0d,#050507)!important;color:#f5f5f5!important;border-top:1px solid rgba(245,197,58,.15);border-bottom:1px solid rgba(245,197,58,.12)}
.intro>div{max-width:1000px!important;margin:0 auto!important}
.intro h2{font-size:clamp(32px,4vw,52px)!important;margin:8px 0 15px!important;color:#fff!important}
.intro p{max-width:850px!important;color:#aaa!important;font-size:16px!important}
.content{padding:65px 5%!important;background:#050507!important}
.head{max-width:1000px!important;margin:0 auto 30px!important}
.head h2{font-size:clamp(32px,4vw,52px)!important;margin:8px 0 10px!important}
.head p{color:#aaa!important}
.grid{width:min(1100px,100%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.card{padding:25px!important;background:linear-gradient(145deg,#111116,#09090c)!important;border:1px solid rgba(245,197,58,.24)!important;border-radius:10px!important;box-shadow:0 8px 28px rgba(0,0,0,.22)!important}
.card h3{font-size:20px!important;margin:12px 0 17px!important}
.message{font-size:15px!important;line-height:1.75!important;color:#d7d7da!important}
.message p{margin:0 0 14px!important}
.choose{margin-top:20px!important;border-radius:6px!important}
.cta{padding:70px 6%!important;background:radial-gradient(circle at center,rgba(245,197,58,.12),transparent 55%),#070708!important}
.back-home{padding:16px!important}
@media(max-width:900px){.nav{gap:12px!important}.nav a:nth-child(3),.nav a:nth-child(4),.nav a:nth-child(5){display:none!important}.grid{grid-template-columns:1fr!important}.hero-copy{padding:125px 6% 60px!important}.intro{padding:50px 6%!important}.content{padding:55px 6%!important}}
@media(max-width:600px){.top{height:66px!important;min-height:66px!important}.logo{font-size:24px!important}.nav{gap:8px!important;max-width:calc(100vw - 125px)!important;overflow-x:auto!important}.nav a{font-size:8px!important}.nav a:nth-child(3),.nav a:nth-child(4),.nav a:nth-child(5){display:none!important}.nav .wa{padding:7px 9px!important}.hero{min-height:0!important}.hero-copy{padding:105px 6% 48px!important}.hero h1{font-size:38px!important;letter-spacing:-1.4px!important}.hero p{font-size:15px!important}.intro{padding:45px 6%!important}.content{padding:48px 5%!important}.card{padding:21px!important}.message{font-size:15px!important;line-height:1.7!important}.cta{padding:55px 6%!important}}


/* =========================================================
   SAILE MENSAGENS — VERSÃO FINAL
   Ajuste geral de espaçamento e respiro visual
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
main{overflow:hidden}

/* Espaçamento vertical consistente entre blocos */
section{scroll-margin-top:82px}
.hero{margin:0}
.steps,.occasions,.gallery,.reviews,.contact{padding-top:78px!important;padding-bottom:78px!important}
.messages-section{padding-top:76px!important;padding-bottom:76px!important}
.service-area{margin-top:18px!important;margin-bottom:55px!important}

/* Cabeçalhos das seções */
.section-head{margin:0 auto 34px!important}
.section-head h2{margin:10px 0 14px!important}
.section-head p{margin:0!important;line-height:1.7!important}

/* Como funciona */
.steps .steps-grid,
.steps>div:not(.section-head){gap:18px}
.steps article{padding:26px!important}
.steps article h3{margin:12px 0 10px!important}
.steps article p{margin:0!important;line-height:1.65!important}

/* Ocasiões */
.occasions .occasion-grid{gap:16px!important}
.occasions article{padding:24px!important}
.occasions article h3{margin:11px 0 9px!important}
.occasions article p{margin:0!important;line-height:1.65!important}

/* Galeria */
.gallery-grid{gap:14px!important}
.gallery-intro{margin:0 0 28px!important;line-height:1.7!important}
.gallery-grid figure{margin:0!important}

/* Depoimentos */
.reviews .review-grid{gap:16px!important}
.reviews blockquote{margin:0!important;padding:24px!important;line-height:1.65!important}
.reviews h2{margin-top:0!important;margin-bottom:28px!important}

/* Contato */
.contact{padding-left:6%!important;padding-right:6%!important}
.contact h2{margin:0 0 18px!important}
.contact p{margin:0 0 22px!important;line-height:1.7!important}
.contact .contact-actions{gap:12px!important}

/* Introdução/experiência */
.intro{gap:42px!important}
.intro h2{margin-top:8px!important;margin-bottom:16px!important}
.intro p{margin:0!important;line-height:1.75!important}
.intro-image{margin-top:0!important}

/* Área de mensagens */
.messages-intro{margin-bottom:36px!important}
.category-title{margin-bottom:18px!important}
.category-grid{gap:14px!important}
.occasion-card{margin:0!important}

/* CTA */
.cta h2{margin:0 0 16px!important}
.cta p{margin:0 auto 24px!important;line-height:1.7!important}

/* Rodapé */
footer{margin-top:0!important}

/* Páginas de textos: bloco limpo e respirado */
.content{padding-top:68px!important;padding-bottom:68px!important}
.content .head{margin-bottom:32px!important}
.content .head h2{margin:8px 0 12px!important}
.content .head p{margin:0!important;line-height:1.7!important}
.content .grid{gap:18px!important}
.content .card{margin:0!important}
.content .card h3{margin:12px 0 16px!important}
.content .message{line-height:1.78!important}
.content .message p{margin:0 0 16px!important}
.content .choose{margin-top:20px!important}

/* Desktop: largura confortável para leitura */
@media(min-width:901px){
  .section-head,.head{max-width:1050px!important}
  .steps,.occasions,.gallery,.reviews,.contact{padding-left:7%!important;padding-right:7%!important}
}

/* Tablet */
@media(max-width:900px){
  .steps,.occasions,.gallery,.reviews,.contact{padding-top:64px!important;padding-bottom:64px!important}
  .messages-section{padding-top:64px!important;padding-bottom:64px!important}
  .intro{gap:28px!important}
  .section-head{margin-bottom:28px!important}
  .content{padding-top:58px!important;padding-bottom:58px!important}
}

/* Celular: mais respiro, sem empilhar elementos de forma apertada */
@media(max-width:600px){
  section{scroll-margin-top:68px}
  .steps,.occasions,.gallery,.reviews,.contact{padding-top:52px!important;padding-bottom:52px!important}
  .messages-section{padding-top:52px!important;padding-bottom:52px!important}
  .section-head{margin-bottom:24px!important}
  .section-head h2{margin:8px 0 12px!important}
  .steps article,.occasions article{padding:20px!important}
  .gallery-intro{margin-bottom:22px!important}
  .gallery-grid{gap:10px!important}
  .reviews .review-grid{gap:12px!important}
  .reviews blockquote{padding:20px!important}
  .intro{gap:24px!important}
  .intro p{line-height:1.7!important}
  .messages-intro{margin-bottom:28px!important}
  .category-title{margin-bottom:14px!important}
  .category-grid{gap:10px!important}
  .content{padding:48px 5%!important}
  .content .head{margin-bottom:25px!important}
  .content .grid{gap:14px!important}
  .content .card{padding:20px!important}
  .content .card h3{margin:10px 0 14px!important}
  .content .message{line-height:1.72!important}
  .content .message p{margin-bottom:14px!important}
  .service-area{margin:12px auto 38px!important;padding:0 5%!important}
  .service-area-inner{padding:22px 20px!important}
  .cta{padding-top:52px!important;padding-bottom:52px!important}
}

/* Mobile homepage: texto primeiro, foto separada abaixo */
@media(max-width:600px){
  .hero-content{padding-bottom:34px!important}
  .hero::after{margin-top:14px!important}
  .intro-image{margin-top:2px!important}
  .intro-photo-grid img,
  .intro-photo-grid .intro-photo-main{margin-bottom:12px!important}
}

