﻿
:root {
  --black: #1a1000;
  --black-mid: #120c00;
  --black-soft: #221600;
  --gold: #c9a84c;
  --gold-bright: #e8c96a;
  --gold-dark: #8a6a1e;
  --yellow: #f0b800;
  --yellow-dark: #c99600;
  --white: #ffffff;
  --cream: #f8f4ec;
  --text-light: rgba(255,255,255,0.65);
  --border-gold: rgba(240,184,0,0.35);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Lato',sans-serif; background:var(--black); color:var(--white); font-weight:300; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(8,8,8,0.97);
  border-bottom:1px solid var(--border-gold);
  height:80px; display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem;
}
.nav-brand {
  display:flex; align-items:center; gap:6px;
}
.nav-logo-svg { width:40px; height:40px; flex-shrink:0; }
.nav-brand-text { line-height:1.2; }
.nav-brand-text .funeraria { font-size:0.68rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(255,255,255,0.75); font-weight:400; }
.nav-brand-text .nome { font-family:'Cinzel',serif; font-size:1.08rem; color:var(--yellow); letter-spacing:0.05em; font-weight:700; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  font-size:0.68rem; letter-spacing:0.25em; text-transform:uppercase;
  color:rgba(255,255,255,0.75); text-decoration:none; cursor:pointer; font-weight:400;
  transition:color 0.3s; padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold-bright); border-bottom-color:var(--gold); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-toggle span { width:24px; height:1px; background:var(--gold); transition:all 0.3s; }

/* PAGES */
.page { display:none; height:0; overflow:hidden; padding-top:0; background:var(--black); }
.page.active { display:block; height:auto; overflow:visible; min-height:100vh; padding-top:68px; background:var(--black); }

/* PAGE HERO */
.page-hero {
  background:#f0b800;
  padding:3.5rem 2rem 2.5rem; text-align:center;
  border-bottom:3px solid rgba(0,0,0,0.2);
}
.page-hero .tag { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(0,0,0,0.55); margin-bottom:0.8rem; }
.page-hero h1 { font-family:'Cinzel',serif; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; color:#1a1000; margin-bottom:0.8rem; }
.page-hero p { font-size:0.9rem; color:rgba(0,0,0,0.65); max-width:500px; margin:0 auto; line-height:1.8; }

/* SECTION */
.section { padding:4rem 2rem; max-width:1000px; margin:0 auto; }
.sec-tag { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }
.sec-title { font-family:'Cinzel',serif; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:600; color:var(--white); margin-bottom:1rem; line-height:1.3; }
.sec-title em { color:var(--gold-bright); font-style:normal; }
.sec-text { color:rgba(255,255,255,0.55); font-size:0.9rem; line-height:1.9; max-width:560px; }

/* ===== HOME HERO ===== */
.hero {
  min-height:calc(100vh - 68px);
  background:#f0b800;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4rem 2rem;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,168,76,0.07) 0%, transparent 70%);
}
.hero-logo { width:100px; height:100px; margin:0 auto 1.5rem; animation:fadeUp 1s ease 0.2s both; }
.hero-tag { font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(0,0,0,0.6); margin-bottom:1rem; animation:fadeUp 1s ease 0.4s both; }
.hero h1 { font-family:'Cinzel',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:var(--white); line-height:1.15; margin-bottom:0.4rem; animation:fadeUp 1s ease 0.5s both; }
.hero h1 span { color:var(--gold-bright); }
.hero-sub { font-family:'Cinzel',serif; font-size:clamp(1rem,2vw,1.4rem); color:var(--gold); font-weight:400; margin-bottom:2rem; animation:fadeUp 1s ease 0.6s both; }
.hero-line { width:60px; height:1px; background:var(--gold); margin:0 auto 2rem; animation:fadeUp 1s ease 0.7s both; }
.hero-desc { font-size:0.95rem; color:rgba(0,0,0,0.65); max-width:480px; line-height:1.8; margin-bottom:3rem; animation:fadeUp 1s ease 0.8s both; }
.hero-contacts { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; animation:fadeUp 1s ease 0.9s both; }
.hero-contact-btn {
  display:flex; align-items:center; gap:10px;
  border:2px solid rgba(0,0,0,0.3); padding:0.8rem 1.5rem;
  text-decoration:none; transition:all 0.3s; background:rgba(0,0,0,0.08);
}
.hero-contact-btn:hover { background:rgba(0,0,0,0.15); border-color:rgba(0,0,0,0.5); }
.hero-contact-btn .icon { font-size:1.2rem; }
.hero-contact-btn .info { text-align:left; }
.hero-contact-btn .info-label { font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:rgba(0,0,0,0.6); display:block; }
.hero-contact-btn .info-value { font-family:'Cinzel',serif; font-size:0.95rem; color:var(--black); }
.hero-badge {
  margin-top:3rem; padding:0.8rem 2rem;
  border:1px solid rgba(240,184,0,0.3); background:rgba(240,184,0,0.05);
  font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--yellow);
  animation:fadeUp 1s ease 1.1s both;
}

/* HOME VALUES */
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--border-gold); border:1px solid var(--border-gold); margin-top:3rem; }
.value-card { background:var(--black-mid); padding:2rem 1.5rem; transition:background 0.3s; }
.value-card:hover { background:rgba(201,168,76,0.07); }
.value-icon { font-size:1.8rem; margin-bottom:1rem; }
.value-card h3 { font-family:'Cinzel',serif; font-size:1rem; font-weight:600; color:var(--gold-bright); margin-bottom:0.6rem; }
.value-card p { font-size:0.83rem; color:rgba(255,255,255,0.5); line-height:1.7; }

/* ===== SERVIÇOS ===== */
.servicos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--border-gold); border:1px solid var(--border-gold); margin-top:3rem; }
.servico-card { background:var(--black-mid); padding:2.5rem 2rem; transition:background 0.3s; }
.servico-card:hover { background:rgba(201,168,76,0.07); }
.servico-card .s-icon { font-size:1.5rem; color:var(--gold); margin-bottom:1rem; }
.servico-card h3 { font-family:'Cinzel',serif; font-size:1.05rem; color:var(--white); margin-bottom:0.7rem; }
.servico-card p { font-size:0.83rem; color:rgba(255,255,255,0.5); line-height:1.7; }
.destaque-bar { background:linear-gradient(135deg,var(--black-soft),var(--black-mid)); border:1px solid var(--border-gold); border-left:3px solid var(--gold); padding:2rem 2.5rem; margin-top:3rem; }
.destaque-bar p { color:rgba(0,0,0,0.75); font-size:0.9rem; line-height:1.9; }
.destaque-bar strong { color:var(--black); font-weight:700; }

/* ===== SOBRE ===== */
.sobre-layout { display:flex; align-items:stretch; gap:0; }
.sobre-visual { border:1px solid var(--border-gold); }
.sobre-img-placeholder {
  aspect-ratio:4/5; background:var(--black-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem; text-align:center;
}
.sobre-img-placeholder .big-num { font-family:'Cinzel',serif; font-size:5rem; font-weight:700; color:var(--gold); line-height:1; }
.sobre-img-placeholder .big-label { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-top:0.5rem; }
.sobre-content p { color:rgba(255,255,255,0.55); line-height:1.9; font-size:0.9rem; margin-bottom:1.2rem; }
.sobre-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-top:2rem; }
.sobre-stat { border-left:2px solid var(--gold); padding-left:1rem; }
.sobre-stat .num { font-family:'Cinzel',serif; font-size:2rem; color:var(--gold-bright); font-weight:600; }
.sobre-stat .lbl { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); }

/* ===== CONTATO ===== */
.contato-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.info-item { display:flex; gap:1rem; margin-bottom:1.5rem; }
.info-icon { width:38px; height:38px; border:1px solid var(--border-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; color:var(--gold); }
.info-content .lbl { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:0.3rem; }
.info-content .val { font-size:0.9rem; color:var(--white); line-height:1.5; }
.form-box { background:var(--black-mid); border:1px solid var(--border-gold); padding:2rem; }
.form-box h3 { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--white); margin-bottom:1.5rem; }
.fg { margin-bottom:1.1rem; }
.fg label { display:block; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; }
.fg input, .fg textarea, .fg select {
  width:100%; padding:0.75rem 1rem;
  background:var(--black-soft); border:1px solid var(--border-gold);
  color:var(--white); font-family:'Lato',sans-serif; font-size:0.88rem;
  outline:none; transition:border-color 0.3s;
}
.fg input:focus, .fg textarea:focus { border-color:var(--gold); }
.fg textarea { resize:vertical; min-height:90px; }
.fg select option { background:var(--black-soft); }
.btn-primary {
  width:100%; padding:1rem;
  background:var(--gold); color:var(--black);
  border:none; font-family:'Cinzel',serif; font-size:0.8rem;
  letter-spacing:0.15em; font-weight:600;
  cursor:pointer; transition:background 0.3s;
}
.btn-primary:hover { background:var(--gold-bright); }

/* ===== CONVITES ===== */
.convites-public { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-bottom:4rem; }
.convite-preview-mock {
  background:linear-gradient(160deg,#e8dcc0,#d0bc90);
  border:2px solid rgba(160,120,40,0.4);
  padding:2rem; text-align:center;
  font-family:Georgia,serif;
}
.mock-title { font-style:italic; font-size:1rem; color:#3a2800; margin-bottom:1rem; }
.mock-circle { width:80px; height:80px; border-radius:50%; border:2px solid rgba(160,120,40,0.5); background:rgba(160,120,40,0.15); margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:2rem; color:rgba(100,70,20,0.4); }
.mock-name { font-size:1.2rem; color:#2a1800; margin-bottom:0.4rem; font-weight:bold; }
.mock-dates { font-size:0.8rem; color:#6a5020; margin-bottom:1rem; }
.mock-info { font-size:0.75rem; color:#4a3818; line-height:1.7; border-top:1px solid rgba(160,120,40,0.3); padding-top:1rem; }

.senha-area { max-width:380px; margin:0 auto; text-align:center; padding:2rem 0; }
.senha-area h3 { font-family:'Cinzel',serif; font-size:1.2rem; color:var(--white); margin-bottom:0.5rem; }
.senha-area p { font-size:0.83rem; color:rgba(255,255,255,0.4); margin-bottom:1.5rem; }
.senha-erro { font-size:0.8rem; color:#e05040; margin-bottom:0.8rem; display:none; }

.gen-layout { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.gen-form-box { background:var(--black-mid); border:1px solid var(--border-gold); padding:2rem; }
.gen-form-box h3 { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--white); margin-bottom:1.5rem; }
.gen-preview-box { position:sticky; top:84px; }
.gen-preview-box h3 { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--white); margin-bottom:1rem; }
.canvas-wrap { background:var(--black-soft); border:1px solid var(--border-gold); }
.canvas-wrap canvas { width:100%; display:block; }
.btn-gerar {
  width:100%; padding:1rem; margin-top:1rem;
  background:var(--black-soft); color:var(--gold);
  border:1px solid var(--gold); font-family:'Cinzel',serif;
  font-size:0.78rem; letter-spacing:0.15em;
  cursor:pointer; transition:all 0.3s;
}
.btn-gerar:hover { background:rgba(201,168,76,0.1); }
.btn-baixar {
  width:100%; padding:1rem; margin-top:0.5rem;
  background:var(--gold); color:var(--black);
  border:none; font-family:'Cinzel',serif;
  font-size:0.78rem; letter-spacing:0.15em; font-weight:600;
  cursor:pointer; transition:background 0.3s; display:none;
}
.btn-baixar:hover { background:var(--gold-bright); }
.divider-gold { border:none; border-top:1px solid var(--border-gold); margin:3rem 0; }

/* FOOTER */
footer {
  background:var(--black); border-top:1px solid var(--border-gold);
  padding:3rem 2rem 2rem; text-align:center;
}
.footer-logo { width:280px; height:auto; margin:0 auto 0.1rem; }
.footer-name { font-family:'Cinzel',serif; font-size:1rem; color:rgba(255,255,255,0.75); margin-bottom:0.3rem; }
.footer-tag { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.75); margin-bottom:1.5rem; }
.footer-line { width:40px; height:1px; background:var(--border-gold); margin:1.5rem auto; }
.footer-copy { font-size:0.75rem; color:rgba(255,255,255,0.75); }
.footer-nao { margin-top:1rem; font-size:0.72rem; letter-spacing:0.12em; color:var(--gold); border:1px solid var(--border-gold); display:inline-block; padding:0.5rem 1.5rem; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

/* MOBILE */
@media (max-width:700px) {
  html, body { overflow-x:hidden; }
  nav { padding:0 1rem; }
  nav img { height:36px; width:auto; flex-shrink:1 !important; }
  .nav-contacts { display:none !important; }
  .nav-links { display:none; flex-direction:column; position:absolute; top:80px; left:0; right:0; background:rgba(8,8,8,0.98); padding:1.5rem 2rem; gap:1.2rem; border-bottom:1px solid var(--border-gold); z-index:201; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero { background-image:url('imagens/fachada.jpg') !important; background-size:contain !important; background-position:top center !important; background-repeat:no-repeat !important; }
  .hero::before { background:rgba(10,10,10,0.72) !important; }
  .hero-grid { grid-template-columns:1fr !important; min-height:auto !important; }
  .hero-text { padding:2rem 1.2rem !important; }
  .hero-img-col { display:none; }
  .servicos-wrapper { padding:1.5rem 1rem 2rem !important; }
  .servicos-cards { grid-template-columns:1fr 1fr !important; gap:1rem !important; }
  .servicos-cards > div { padding:1.2rem 1rem !important; }
  .sobre-layout, .contato-layout, .convites-public, .gen-layout { grid-template-columns:1fr; }
  .sobre-visual { display:none; }
  .gen-preview-box { position:static; }
  .sobre-body { flex-direction:column !important; }
  .sobre-foto-col { flex:0 0 auto !important; width:100% !important; height:220px !important; margin-right:0 !important; margin-top:0 !important; }
  .sobre-divider { display:none; }
  .footer-logo { width:180px !important; }
  .section { padding:2.5rem 1.2rem; }
}
@media (max-width:480px) {
  .hero-contacts { flex-direction:column; align-items:center; }
}

/* BOTÃO FLUTUANTE WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  padding: 12px 20px 12px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: background 0.2s, box-shadow 0.2s, padding 0.3s;
  overflow: hidden;
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.whatsapp-float-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.whatsapp-float:hover {
  background: #1ebe5a;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
}
@media (max-width: 600px) {
  .whatsapp-float {
    bottom: 18px;
    right: 18px;
    padding: 12px;
    border-radius: 50%;
  }
  .whatsapp-float-label { display: none; }
}
