:root{
  --blue: #1e6fa8;       /* azul principal (igual Caxias Pax) */
  --blueDark: #08324e;   /* azul escuro */
  --text: #eaf3fb;
  --white: #ffffff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ===== TOP BAR (logo + 24h + telefone) ===== */
.topbar{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topbar .wrap{
  max-width:1150px;
  margin:auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  width:70px;
  height:auto;
}
.brand .brand-text{
  line-height:1.1;
}
.brand .brand-text strong{
  display:block;
  letter-spacing:.5px;
}
.brand .brand-text span{
  display:block;
  color:var(--muted);
  font-size:.9em;
}

/* 24h e telefone */
.top-actions{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.badge24{
  display:flex;
  align-items:center;
  gap:10px;
  color:#17a65a;
  font-weight:700;
}
.badge24 i{
  font-size:28px;
}
.badge24 .big{
  font-size:26px;
  font-weight:900;
  line-height:1;
}

.phone{
  color:#17a65a;
  font-weight:900;
  font-size:18px;
  white-space:nowrap;
}

/* ===== MENU ===== */
nav{
  background: var(--blue);
}
nav .wrap{
  max-width:1150px;
  margin:auto;
  display:flex;
  justify-content:center;
  gap:10px;
  padding:0 12px;
  flex-wrap:wrap;
}
nav a{
  color:#fff;
  text-decoration:none;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
nav a:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* ===== HERO ===== */
.hero{
  min-height:340px;
  background:
    linear-gradient(to right, rgba(255,255,255,.80), rgba(255,255,255,.55)),
    url("hero.jpg");
  background-size: cover;
  background-position:center;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.hero .wrap{
  max-width:1150px;
  margin:auto;
  padding:70px 18px 40px;
  text-align:center;
}
.hero h1{
  margin:0;
  font-size:44px;
  font-weight:800;
  color:#2b2b2b;
}
.hero h1 span{
  color: var(--blueDark);
}

/* ===== CARDS ===== */
.container{
  max-width:1150px;
  margin:auto;
  padding:30px 18px 60px;
}
.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:-70px; /* sobe os cards em cima do banner */
}
.card{
  background: var(--card);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:22px 18px;
  text-align:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,.14);
}
  font-size:34px;
  color: var(--blueDark);
}
.card p{
  margin:12px 0 0;
  color: var(--blueDark);
  font-weight:700;
}

/* Seções */
.section{
  margin-top:22px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:22px;
}
.section h2{
  margin:0 0 10px;
  color: var(--blueDark);
}

/* Rodapé */
footer{
  background:#0b3c5d;
  color:#d7e9f7;
  text-align:center;
  padding:18px;
}

/* Responsivo */
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr 1fr; }
  .hero h1{ font-size:34px; }
}
@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
}

.page-hero{
  background: linear-gradient(135deg, rgba(11,60,93,.15), rgba(30,111,168,.12));
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 28px 0;
}
.page-hero h1{margin:0;font-size:2rem}
.page-hero p{margin:8px 0 0;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:#fff;border:1px solid rgba(11,60,93,.12);
  box-shadow: 0 8px 18px rgba(11,60,93,.08);
}
.chip i{color:var(--blue-700)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.contact-item{
  display:flex;gap:12px;align-items:center;
  background:#fff;border:1px solid rgba(11,60,93,.12);
  border-radius:14px;padding:14px;
}
.contact-item i{font-size:1.2rem;color:var(--blue-700)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* HERO DA PÁGINA (Cremação e outras páginas) */
.page-hero{
  padding: 34px 0 10px;
  background: radial-gradient(900px 400px at 10% 10%, rgba(30,111,168,.18), transparent 60%),
              radial-gradient(700px 380px at 90% 0%, rgba(11,60,93,.14), transparent 55%),
              #eaf4ff;
  border-bottom: 1px solid rgba(11,60,93,.10);
}

.hero-box{
  display:flex;
  gap:22px;
  align-items:stretch;
  justify-content:space-between;
}

.hero-left{
  flex: 1.2;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,60,93,.12);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(11,60,93,.10);
}

.hero-pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background: rgba(30,111,168,.10);
  border: 1px solid rgba(30,111,168,.18);
  color:#0b3c5d;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  margin-bottom:12px;
}

.page-hero h1{
  margin: 0 0 10px;
  font-size: 2.3rem;
  color:#08324e;
  letter-spacing: -.2px;
}
.page-hero h1 span{ color:#1e6fa8; }

.page-hero p{
  margin: 0 0 14px;
  color:#4b5b66;
  font-weight:500;
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin: 12px 0 16px;
}

.hero-mini{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.mini{
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(8,50,78,.05);
  border: 1px solid rgba(11,60,93,.10);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 180px;
}
.mini i{ color:#1e6fa8; font-size:1.1rem; }
.mini strong{ display:block; color:#08324e; }
.mini span{ display:block; color:#5c6b75; font-size:.95rem; }

.hero-right{
  flex: .8;
  display:flex;
}

.hero-illustration{
  flex:1;
  background: linear-gradient(135deg, rgba(8,50,78,.92), rgba(30,111,168,.92));
  border-radius: 18px;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 40px rgba(11,60,93,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding: 22px;
  color:#fff;
}

.hero-illustration .circle{
  position:absolute;
  width:240px;height:240px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  filter: blur(0);
}
.hero-illustration .c1{ top:-110px; right:-110px; }
.hero-illustration .c2{ bottom:-130px; left:-130px; opacity:.8; }

.hero-illustration .icon{
  width:92px;height:92px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.hero-illustration .icon i{ font-size:2.2rem; }

.hero-illustration p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.92);
  font-weight:700;
}

/* responsivo */
@media (max-width: 900px){
  .hero-box{ flex-direction:column; }
  .mini{ min-width: 100%; }
  .page-hero h1{ font-size: 1.9rem; }
}
/* ===== TOPO estilo Caxias Pax ===== */
.header-hero{
  background: linear-gradient(180deg, var(--blueDark), var(--blue));
  padding: 26px 16px 18px;
  position: relative;
  overflow: hidden;
}

.header-hero::before,
.header-hero::after{
  content:"";
  position:absolute;
  border-radius: 50%;
  opacity: .20;
  background: #ffffff;
}
.header-hero::before{
  width: 420px; height: 420px;
  left: -140px; top: -140px;
}
.header-hero::after{
  width: 520px; height: 520px;
  right: -220px; top: -220px;
  opacity: .14;
}

.hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 24px;
  text-align:center;
}

.hero-logo{
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

.hero-title{
  margin:0;
  color: var(--white);
  font-weight: 800;
  letter-spacing: .5px;
  font-size: clamp(28px, 3vw, 44px);
}

.hero-subtitle{
  margin: 6px 0 0;
  color: #cfe7f7;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 36px);
}

/* ===== MENU (faixa azul escura com ícones) ===== */
.navbar-caxias{
  background: rgba(8, 50, 78, .88);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.navbar-caxias .nav-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  justify-content:center;
  gap: 30px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.navbar-caxias a{
  color: var(--text);
  text-decoration:none;
  font-weight: 700;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  transition: .2s ease;
}

.navbar-caxias a:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.navbar-caxias .icon{
  font-size: 18px;
  line-height: 1;
}

/* responsivo */
@media (max-width: 520px){
  .hero-inner{flex-direction: column;}
  .hero-logo{
    width: 170px;
    height: 170px;
  }
}

.cards-grid{
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card-link{
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 22px 16px;
  text-align:center;
  text-decoration:none;
  color: var(--blueDark);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  transition: .2s ease;
}

.card-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}

.card-link .card-icon{
  font-size: 34px;
  display:block;
  margin-bottom: 10px;
}

.card-icon i{
  color: var(--blueDark);
}

.card-link .card-title{
  font-weight: 800;
  color: var(--blue);
}

@media (max-width: 900px){
  .cards-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
  .cards-grid{grid-template-columns: 1fr;}
}
.section,
.section p,
.section li,
.section span,
.section a{
  color: #08324e !important;
}

.section p{
  opacity: 1 !important;
}