:root {
  --ec-laranja: #FF7A1A;
  --ec-laranja-escuro: #E0620A;
  --ec-laranja-claro: #FFE8D6;
  --ec-branco: #FFFFFF;
  --ec-cinza: #F7F7F7;
  --ec-texto: #2B2B2B;
  --ec-preto: #171717;
  --ec-cinza-texto: #777;
  --ec-linha: #ECECEC;
  --ec-sucesso: #2E8B57;
  --ec-perigo: #D9534F;
  --ec-amarelo: #F4B400;
  --ec-radius: 12px;
  --ec-radius-lg: 20px;
  --ec-shadow: 0 8px 28px rgba(0,0,0,.08);
  --ec-shadow-hover: 0 18px 42px rgba(0,0,0,.13);
  --ec-shadow-orange: 0 12px 30px rgba(255,122,26,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,26,.055), transparent 24rem),
    linear-gradient(180deg, #fff 0%, #fff 72%, #fffaf6 100%);
  color: var(--ec-texto);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::selection { background: var(--ec-laranja); color: #fff; }
a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
img { max-width: 100%; }

/* Pequeno brilho decorativo da identidade Eclipse */
body::before {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  right: -250px;
  bottom: -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.10), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* --- Tipografia e utilitários --- */
.text-primary { color: var(--ec-laranja-escuro) !important; }
.bg-primary { background: var(--ec-laranja) !important; }
.section-title { font-weight: 900; letter-spacing: -.035em; }
.section-subtitle { color: #777; }
.section-heading { position: relative; }
.section-eyebrow,
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ec-laranja-escuro);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .72rem;
}
.hero-kicker::before,
.section-eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ec-laranja), var(--ec-perigo));
}
.fw-black { font-weight: 900; }

/* --- Faixa superior --- */
.top-strip {
  background: linear-gradient(90deg, #171717, #252525, #171717);
  color: #fff;
  font-size: .78rem;
  padding: 8px 0;
  letter-spacing: .01em;
}
.top-strip span:first-child { color: #ffb26b; }

/* --- Navbar --- */
.navbar-eclipse,
.eclipse-nav {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  min-height: 84px;
  box-shadow: 0 5px 24px rgba(0,0,0,.045);
}
.navbar-eclipse .navbar-brand,
.eclipse-nav .navbar-brand { padding: 0; }
.navbar-eclipse .navbar-brand img,
.eclipse-nav .navbar-brand img,
.brand-logo {
  height: 62px;
  width: 185px;
  object-fit: contain;
  object-position: left center;
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.navbar-eclipse .nav-link,
.eclipse-nav .nav-link,
.nav-link {
  position: relative;
  color: var(--ec-texto) !important;
  font-weight: 700;
  padding: .62rem .82rem !important;
  border-radius: 9px;
  transition: all .22s ease;
}
.navbar-eclipse .nav-link::after,
.eclipse-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 3px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--ec-laranja), #ff3d00);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.navbar-eclipse .nav-link:hover,
.navbar-eclipse .nav-link.active,
.eclipse-nav .nav-link:hover,
.eclipse-nav .nav-link.active,
.nav-link:hover,
.nav-link.active {
  color: var(--ec-laranja-escuro) !important;
  background: var(--ec-laranja-claro);
}
.navbar-eclipse .nav-link:hover::after,
.navbar-eclipse .nav-link.active::after,
.eclipse-nav .nav-link:hover::after,
.eclipse-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border: 1px solid #ddd; border-radius: 10px; padding: .55rem .7rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,122,26,.15); }

/* Ações do topo: pesquisa, carrinho e conta */
.header-actions { display: flex; align-items: center; gap: 7px; }
.header-action,
.navbar-eclipse .icon-btn {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: var(--ec-texto);
  text-decoration: none;
  border: 1px solid #ececec;
  background: #fff;
  border-radius: 12px;
  font-size: 1.22rem;
  box-shadow: 0 4px 15px rgba(0,0,0,.04);
  transition: all .22s ease;
}
.header-action:hover,
.navbar-eclipse .icon-btn:hover {
  color: var(--ec-laranja-escuro);
  background: var(--ec-laranja-claro);
  border-color: #ffd0ad;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,122,26,.14);
}
.header-action.danger:hover { color: var(--ec-perigo); }
.header-badge,
.navbar-eclipse .icon-btn .badge-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ec-perigo);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 900;
  z-index: 3;
}
.navbar-eclipse .icon-btn .badge-count { background: #fff; color: var(--ec-laranja-escuro); }

/* Pesquisa */
.search-box,
.navbar-search-wrap {
  position: relative;
  width: min(300px, 30vw);
}
.search-box {
  height: 43px;
  display: flex;
  align-items: center;
  overflow: visible;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,.035);
}
.search-box > i { color: #888; margin-left: 14px; }
.search-box input,
.navbar-search {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 9px;
}
.search-box input { height: 100%; }
.search-box button {
  height: 100%;
  width: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 0 30px 30px 0;
  background: var(--ec-laranja-claro);
  color: var(--ec-laranja-escuro);
}
.search-box:focus-within {
  border-color: var(--ec-laranja);
  box-shadow: 0 0 0 .2rem rgba(255,122,26,.10), 0 8px 20px rgba(0,0,0,.05);
}
#resultados-pesquisa,
.navbar-search-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow-hover);
  z-index: 2000;
  max-height: 340px;
  overflow-y: auto;
}
.navbar-search-results { display: none; }
.search-result,
.navbar-search-results a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--ec-texto);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.search-result:hover,
.navbar-search-results a:hover { background: var(--ec-laranja-claro); }
.search-result img,
.navbar-search-results img { width: 38px; height: 38px; object-fit: cover; border-radius: 7px; }

/* --- Dropdown --- */
.eclipse-menu {
  border: 0;
  border-radius: 15px;
  box-shadow: var(--ec-shadow-hover);
  padding: 8px;
  min-width: 230px;
}
.eclipse-menu .dropdown-item {
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eclipse-menu .dropdown-item:hover { background: var(--ec-laranja-claro); color: var(--ec-laranja-escuro); }

/* --- Botões --- */
.btn-eclipse,
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ec-laranja), #ff3d00);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--ec-shadow-orange);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-eclipse:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--ec-laranja-escuro), #d93600);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255,122,26,.28);
}
.btn-eclipse::after,
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.26) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.btn-eclipse:hover::after,
.btn-primary:hover::after { transform: translateX(120%); }
.btn-outline-eclipse,
.btn-outline-primary {
  border: 2px solid var(--ec-laranja);
  color: var(--ec-laranja-escuro);
  font-weight: 700;
  background: transparent;
}
.btn-outline-eclipse:hover,
.btn-outline-primary:hover {
  background: var(--ec-laranja);
  border-color: var(--ec-laranja);
  color: #fff;
}

/* --- Campos --- */
.form-control,
.form-select {
  border-radius: var(--ec-radius);
  border-color: #ddd;
  padding: .75rem 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.025);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ec-laranja);
  box-shadow: 0 0 0 .2rem rgba(255,122,26,.12);
  transform: translateY(-1px);
}

/* --- Hero / Início --- */
.hero-shell,
.hero-eclipse {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(120deg, #fff8ef 0%, #fff 58%, #fff1e2 100%);
  border: 1px solid #f6dec7;
  box-shadow: var(--ec-shadow-hover);
}
.hero-shell::before,
.hero-eclipse::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -130px;
  top: -145px;
  border-radius: 50%;
  background: rgba(255,122,26,.10);
}
.hero-slide { min-height: 420px; padding: 55px 7%; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: .98;
  font-weight: 950;
  letter-spacing: -.055em;
  max-width: 760px;
}
.hero-visual { min-height: 290px; display: flex; align-items: center; justify-content: center; }
.hero-art {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 14%, #ffd9b0 15% 31%, #ff9d43 32% 55%, #ff4a17 56% 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 25px 60px rgba(255,91,0,.25);
  transform: rotate(-7deg);
}
.hero-art i { font-size: 6rem; color: #fff; }
.carousel-control-prev,.carousel-control-next { width: 6%; }
.carousel-control-prev-icon,.carousel-control-next-icon {
  background-color: var(--ec-laranja);
  border-radius: 50%;
  padding: 20px;
  background-size: 45%;
}
.carousel-indicators [data-bs-target] { background-color: var(--ec-laranja); }

/* --- Categorias --- */
.category-card,
.categoria-quick-card {
  height: 100%;
  padding: 22px;
  border: 1px solid var(--ec-linha);
  border-radius: var(--ec-radius-lg);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.category-card:hover,
.categoria-quick-card:hover {
  transform: translateY(-5px);
  border-color: #ffd0aa;
  box-shadow: var(--ec-shadow-hover);
  color: var(--ec-laranja-escuro);
}
.category-icon,
.categoria-quick-card i {
  color: var(--ec-laranja);
}
.category-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--ec-laranja-claro);
  font-size: 1.55rem;
}
.categoria-quick-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:1.2rem .5rem; font-size:.85rem; font-weight:600; }
.categoria-quick-card i { font-size:1.8rem; }

/* --- Cards de produtos --- */
.product-card,
.produto-card {
  position: relative;
  height: 100%;
  border: 1px solid #eeeef1 !important;
  border-radius: var(--ec-radius-lg) !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 7px 24px rgba(0,0,0,.055);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.product-card:hover,
.produto-card:hover {
  transform: translateY(-7px);
  border-color: #ffd5b4 !important;
  box-shadow: var(--ec-shadow-hover);
}
.product-image-wrap {
  height: 275px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fafafa, #fff4e8);
}
.product-image,
.produto-card .product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-image,
.produto-card:hover .product-image { transform: scale(1.045); }
.stock-badge,.offer-badge,.featured-badge,
.produto-card .badge-categoria,.produto-card .badge-promo,.produto-card .badge-stock {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .68rem;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(0,0,0,.12);
}
.stock-badge { top: 12px; left: 12px; background: var(--ec-sucesso); color:#fff; }
.stock-badge.low { background: #ffc107; color:#222; }
.offer-badge { top: 12px; right: 12px; background: var(--ec-perigo); color:#fff; }
.featured-badge { bottom: 12px; left: 12px; background: rgba(23,23,23,.92); color:#fff; }
.produto-card .badge-categoria { top:10px; left:10px; background:var(--ec-laranja); color:#fff; }
.produto-card .badge-promo { top:10px; right:10px; background:var(--ec-perigo); color:#fff; }
.produto-card .badge-stock { bottom:10px; left:10px; background:rgba(0,0,0,.68); color:#fff; }
.sold-overlay,
.produto-esgotado .overlay-esgotado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(4px);
  color: #a21d1d !important;
  font-size: 1.05rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.produto-esgotado img { opacity:.35; filter:grayscale(60%); }
.produto-esgotado .overlay-esgotado span {
  background: rgba(0,0,0,.80);
  color:#fff !important;
  padding:8px 20px;
  border-radius:8px;
  transform:rotate(-8deg);
}
.price { color: var(--ec-laranja-escuro); font-weight: 950; font-size: 1.22rem; letter-spacing:-.02em; }
.price-old { text-decoration: line-through; text-decoration-thickness:2px; color:#999; }
.cores-swatches { display:flex; gap:5px; margin:6px 0; flex-wrap:wrap; }
.cor-swatch,.color-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.68rem;
  border:1px solid #ddd;
  border-radius:999px;
  padding:4px 9px;
  background:#fafafa;
}
.color-chip { font-size:.8rem; padding:6px 11px; margin:2px; }

/* --- Galeria --- */
.galeria-principal img { width:100%; border-radius:var(--ec-radius-lg); object-fit:cover; max-height:480px; }
.galeria-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.galeria-thumbs img,
.gallery-thumb {
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:12px;
  cursor:pointer;
  border:2px solid transparent;
  opacity:.72;
  background:#f5f5f5;
  transition:.2s ease;
}
.galeria-thumbs img.ativa,.gallery-thumb.active,.gallery-thumb:hover { border-color:var(--ec-laranja); opacity:1; }

/* --- Vídeo do produto --- */
.product-video-box {
  padding: 18px;
  border-radius: var(--ec-radius-lg);
  background: linear-gradient(145deg,#151515,#242424);
  border: 1px solid #2f2f2f;
  box-shadow: 0 15px 40px rgba(0,0,0,.13);
}
.product-video { width:100%; max-height:430px; display:block; border-radius:13px; background:#000; object-fit:contain; }
.admin-video-preview { width:100%; max-width:680px; max-height:380px; border-radius:16px; background:#111; display:block; }

/* --- Cores selecionáveis --- */
.color-option { cursor:pointer; margin:3px; }
.color-option input { display:none; }
.color-option span {
  display:block;
  border:1px solid #ddd;
  border-radius:999px;
  padding:8px 14px;
  background:#fff;
  font-size:.82rem;
  font-weight:700;
  transition:.2s;
}
.color-option input:checked + span {
  border-color:var(--ec-laranja);
  background:var(--ec-laranja-claro);
  color:var(--ec-laranja-escuro);
  box-shadow:0 0 0 2px rgba(255,122,26,.08);
}

/* --- Serviços --- */
.service-card,
.info-card {
  position:relative;
  height:100%;
  padding:28px;
  border:1px solid #eeeef1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.045);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.service-card::before {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  top:-55px;
  border-radius:50%;
  background:rgba(255,122,26,.07);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--ec-shadow-hover); border-color:#ffd0aa; }
.service-card-premium { padding:32px 28px !important; }
.service-icon,
.servico-icone {
  width:65px;
  height:65px;
  border-radius:19px;
  background:var(--ec-laranja-claro);
  color:var(--ec-laranja-escuro);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  margin-bottom:20px;
  box-shadow:0 10px 24px rgba(255,122,26,.14);
}
.service-number { position:absolute; right:22px; top:24px; font-weight:950; font-size:.75rem; color:#d7d7d7; }

/* --- Turismo --- */
.tourism-panel {
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:36px;
  color:#fff;
  background:linear-gradient(135deg,#111214 0%,#202124 58%,#2c190d 100%);
  box-shadow:0 25px 65px rgba(0,0,0,.16);
}
.tourism-panel::after {
  content:"";
  position:absolute;
  right:-100px;
  bottom:-130px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(255,122,26,.17);
}
.tourism-panel .text-muted { color:#bfc1c5 !important; }
.tourism-highlights { display:grid; gap:13px; margin-top:25px; }
.tourism-highlights div { display:flex; gap:10px; align-items:center; font-weight:700; }
.tourism-highlights i { color:#ff9a48; }
.tourism-form {
  position:relative;
  z-index:1;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
}
.destination-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.destination-option { cursor:pointer; }
.destination-option input { display:none; }
.destination-option span {
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  font-weight:700;
  font-size:.9rem;
  transition:.2s;
}
.destination-option input:checked + span,
.destination-option:hover span { background:rgba(255,122,26,.18); border-color:#ff9a48; }
.destination-option i { color:#ff9a48; }
.destination-all input:checked + span { background:linear-gradient(135deg,var(--ec-laranja),#ff3d00); border-color:transparent; color:#fff; }
.tourism-form .form-control { background:#fff; color:#222; }

/* --- Admin --- */
.stat-card { border:0; border-radius:20px; padding:24px; background:#fff; box-shadow:var(--ec-shadow); }
.stat-icon { width:50px; height:50px; border-radius:15px; background:var(--ec-laranja-claro); color:var(--ec-laranja); display:grid; place-items:center; font-size:1.3rem; }
.admin-card { border:0; border-radius:20px; box-shadow:var(--ec-shadow); overflow:hidden; }
.admin-sidebar { background:#171717; border-radius:20px; padding:15px; }
.admin-sidebar a { display:flex; gap:10px; align-items:center; color:#ddd; text-decoration:none; padding:11px 13px; border-radius:10px; }
.admin-sidebar a:hover,.admin-sidebar a.active { background:#2a2a2a; color:#ffad67; }
.admin-table thead th { background:#fafafa; color:#666; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.table>:not(caption)>*>* { padding:1rem .85rem; }
.table-hover tbody tr:hover { background:#fff9f4; }
.badge-orange { background:var(--ec-laranja-claro); color:var(--ec-laranja-escuro); }

/* --- Notificações --- */
.notif-dropdown { width:320px; max-height:380px; overflow-y:auto; }
.notif-item { display:block; padding:10px 14px; border-bottom:1px solid #f0f0f0; white-space:normal; }
.notif-item.nao-lida { background:var(--ec-laranja-claro); }
.notif-item small { color:#888; }

/* --- Faixa dinâmica --- */
.faixa-dinamica {
  background:linear-gradient(90deg,#171717,#242424,#171717);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:10px 0;
}
.faixa-dinamica .faixa-track { display:inline-block; padding-left:100%; animation:faixa-scroll 28s linear infinite; }
.faixa-dinamica .faixa-track span { margin-right:60px; font-weight:700; }
.faixa-dinamica .faixa-track span i { color:var(--ec-laranja); margin-right:8px; }
@keyframes faixa-scroll { 0%{transform:translate(0,0)} 100%{transform:translate(-100%,0)} }

/* --- Footer --- */
.footer-main,
.footer-eclipse {
  position:relative;
  overflow:hidden;
  margin-top:80px;
  background:linear-gradient(135deg,#111214,#1d1e21 58%,#2a170c);
  color:#fff;
}
.footer-main::before,
.footer-eclipse::before {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  left:-180px;
  top:-190px;
  border-radius:50%;
  background:rgba(255,122,26,.09);
}
.footer-logo,
.footer-eclipse .footer-logo {
  width:210px;
  height:auto;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.footer-main h6,.footer-eclipse h6 { color:#ff9b4a; font-weight:900; margin-bottom:17px; }
.footer-main a:not(.footer-support),.footer-eclipse a:not(.footer-support) { display:block; color:#aaa; text-decoration:none; margin-bottom:11px; }
.footer-main a:not(.footer-support):hover,.footer-eclipse a:not(.footer-support):hover { color:#fff; transform:translateX(2px); }
.footer-main p,.footer-eclipse p { color:#aaa; }
.footer-main p i,.footer-eclipse p i { color:#ff9b4a; width:20px; }
.footer-muted { color:#aaa; max-width:390px; line-height:1.7; }
.socials,.footer-social { display:flex; gap:8px; margin-top:18px; }
.socials a,.footer-social a {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff !important;
  margin:0 !important;
  font-size:1.05rem;
  transition:.22s ease;
}
.socials a:hover,.footer-social a:hover { background:var(--ec-laranja); transform:translateY(-3px) scale(1.04); }
.footer-support {
  display:inline-flex !important;
  gap:8px;
  align-items:center;
  border:1px solid #444;
  color:#fff !important;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
}
.footer-support:hover { background:var(--ec-laranja); border-color:var(--ec-laranja); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:35px;
  padding:1rem 0;
  color:#999;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.82rem;
}
.newsletter {
  border:1px solid #333;
  background:rgba(255,255,255,.045);
  border-radius:18px;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.16);
}
.newsletter strong { display:block; font-size:1.05rem; }
.newsletter small { display:block; color:#888; margin-top:4px; }
.newsletter form { display:flex; max-width:430px; width:100%; }
.newsletter input { flex:1; border:0; padding:12px 15px; border-radius:10px 0 0 10px; outline:0; }
.newsletter button { border:0; background:var(--ec-laranja); color:#fff; font-weight:800; padding:0 17px; border-radius:0 10px 10px 0; }
.footer-whatsapp-float {
  position:fixed;
  right:22px;
  bottom:22px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  font-size:1.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:1500;
  text-decoration:none;
}
.footer-whatsapp-float:hover { color:#fff; transform:translateY(-3px); }

/* --- Estados / extras --- */
.empty-state { padding:65px 20px; text-align:center; border:1px dashed #ddd; border-radius:20px; }
.order-status { font-size:.75rem; font-weight:800; border-radius:999px; padding:7px 11px; }
.status-pendente { background:#fff2cf; color:#8a5b00; }
.status-pago { background:#ddf7e7; color:#16703b; }
.status-cancelado { background:#ffe1e1; color:#a32121; }
.status-entrega { background:#e6f0ff; color:#1d5aa6; }
.support-status { background:#f3f3f3; border-radius:10px; padding:6px 9px; font-size:.75rem; font-weight:800; }
.bank-box { background:linear-gradient(135deg,#fff5eb,#fff); border:1px solid #ffd6b5; border-radius:18px; }
.oauth-divider { display:flex; align-items:center; gap:10px; color:#999; margin:22px 0; }
.oauth-divider::before,.oauth-divider::after { content:""; height:1px; background:#eee; flex:1; }
.oauth-divider span { font-size:.8rem; }

/* --- Responsividade --- */
@media (max-width: 1199px) {
  .search-box { width:100%; margin:10px 0; }
  .header-actions { flex-wrap:wrap; }
  .hero-slide { padding:45px 8%; }
}
@media (max-width: 767px) {
  .navbar-eclipse .navbar-brand img,
  .eclipse-nav .navbar-brand img,
  .brand-logo { width:165px; height:54px; }
  .hero-slide { min-height:430px; padding:35px 25px; }
  .hero-visual { display:none; }
  .product-image-wrap { height:225px; }
  .newsletter,.footer-bottom { flex-direction:column; align-items:flex-start; }
  .newsletter form { max-width:none; }
  .footer-main,.footer-eclipse { margin-top:55px; }
  .destination-grid { grid-template-columns:1fr; }
  .tourism-panel { padding:24px 18px; border-radius:24px; }
  .tourism-form { padding:16px; }
  .search-box { width:100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .service-card,.product-card,.category-card { animation: eclipseRise .45s ease both; }
}
@keyframes eclipseRise {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:none; }
}

/* =====================================================================
   AJUSTE FINAL — HOME E CABEÇALHO RESPONSIVOS
   Mantém a estrutura PHP/Bootstrap existente. Este bloco fica por último
   para substituir regras antigas que causavam excesso de espaço no telemóvel.
   ===================================================================== */

/* A imagem logo.png tem fundo preto incorporado. O CSS abaixo apenas impede
   fundos, molduras e sombras adicionais no cabeçalho. */
.eclipse-nav .navbar-brand,
.eclipse-nav .navbar-brand picture,
.eclipse-nav .brand-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* O conteúdo principal da barra nunca deve encolher os ícones. */
.eclipse-nav .container {
  gap: 14px;
}
.eclipse-nav .navbar-collapse {
  min-width: 0;
}
.eclipse-nav .navbar-nav {
  white-space: nowrap;
}
.header-actions {
  min-width: 0;
  flex-shrink: 0;
}
.search-box {
  min-width: 0;
}

/* Banner: a imagem preenche o círculo sem ficar desfocada ou deformada. */
.hero-shell {
  isolation: isolate;
}
.hero-art {
  overflow: hidden;
  background: #f58220;
}
.hero-art img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: inherit !important;
  transform: none;
}

/* Cartões de categoria mais baixos, para os produtos surgirem rapidamente. */
.category-card {
  min-height: 0;
}

/* Segurança contra imagens de produto esticadas. */
.product-image-wrap {
  aspect-ratio: 1 / 1;
  height: auto;
}
.product-image-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 1200px) {
  .eclipse-nav .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
  }
  .eclipse-nav .navbar-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .header-actions {
    margin-left: 0;
  }
  .search-box {
    width: clamp(210px, 19vw, 300px);
  }
}

@media (max-width: 1199px) {
  .eclipse-nav {
    min-height: 0;
  }
  .eclipse-nav .container {
    align-items: center;
  }
  .eclipse-nav .navbar-toggler {
    flex: 0 0 auto;
    order: 2;
  }
  .eclipse-nav .navbar-collapse {
    order: 3;
    flex-basis: 100%;
  }
  .eclipse-nav .navbar-nav {
    padding: 8px 0 5px;
  }
  .eclipse-nav .nav-link {
    padding: .7rem .8rem !important;
  }
  .header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 43px 43px;
    gap: 8px;
    align-items: center;
    padding: 7px 0 10px;
  }
  .header-actions .search-box {
    width: 100%;
    margin: 0;
  }
  .header-actions .dropdown {
    width: 43px;
  }
  .header-actions .header-action {
    width: 43px;
    height: 43px;
  }
}

@media (max-width: 767px) {
  body {
    background: #fff;
  }
  body::before {
    display: none;
  }
  .container {
    width: 100%;
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Cabeçalho compacto: logo + menu, pesquisa + carrinho + conta. */
  .top-strip {
    display: none;
  }
  .eclipse-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.98);
  }
  .eclipse-nav .container {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    gap: 8px;
  }
  .eclipse-nav .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .navbar-eclipse .navbar-brand img,
  .eclipse-nav .navbar-brand img,
  .brand-logo {
    width: 132px;
    height: 48px;
    object-fit: contain;
    object-position: left center;
  }
  .eclipse-nav .navbar-toggler {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-color: #f2c69f;
    background: #fff8f2;
  }
  .eclipse-nav .navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
  }

  /* Mantém as ações sempre visíveis; o menu de links continua colapsável. */
  .eclipse-nav .navbar-collapse.collapse:not(.show) {
    display: block;
  }
  .eclipse-nav .navbar-collapse > .navbar-nav {
    display: none;
  }
  .eclipse-nav .navbar-collapse.show > .navbar-nav {
    display: flex;
    margin: 4px 0 7px;
    padding: 6px;
    border: 1px solid #f3dfd0;
    border-radius: 14px;
    background: #fffaf6;
  }
  .eclipse-nav .navbar-collapse.show > .navbar-nav .nav-item {
    width: 100%;
  }
  .eclipse-nav .navbar-collapse.show > .navbar-nav .nav-link {
    display: block;
    border-radius: 9px;
  }
  .header-actions {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 7px;
    padding: 2px 0 2px;
  }
  .header-actions .header-action,
  .header-actions .dropdown {
    width: 42px;
    height: 42px;
  }
  .header-action {
    border-radius: 11px;
    font-size: 1.08rem;
  }
  .header-badge {
    top: -4px;
    right: -4px;
  }
  .search-box {
    height: 42px;
  }
  .search-box > i {
    margin-left: 12px;
    font-size: .92rem;
  }
  .search-box input {
    padding: 0 7px;
    font-size: .79rem;
  }
  .search-box button {
    width: 39px;
    flex-basis: 39px;
  }
  .eclipse-menu {
    min-width: 220px;
  }

  main > .container.py-4 {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
  .hero-shell {
    border-radius: 17px;
    margin-bottom: 25px !important;
  }
  .hero-slide {
    min-height: 255px;
    padding: 28px 22px 31px;
  }
  .hero-slide h1,
  .hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
    line-height: 1.03;
  }
  .hero-slide .lead {
    margin: 13px 0 18px !important;
    font-size: .91rem;
    line-height: 1.45;
  }
  .hero-slide .btn-lg {
    padding: .62rem 1rem;
    font-size: .87rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 12%;
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    padding: 14px;
  }
  .carousel-indicators {
    margin-bottom: .35rem;
  }

  /* Categorias em duas colunas, curtas e sem espaço vertical excessivo. */
  main section.mb-5:has(.category-card) {
    margin-bottom: 27px !important;
  }
  .category-card {
    min-height: 106px;
    padding: 12px 10px;
    border-radius: 14px;
  }
  .category-card .category-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 8px !important;
    border-radius: 11px;
    font-size: 1.05rem;
  }
  .category-card h6 {
    min-height: 31px;
    margin: 0 !important;
    font-size: .69rem;
    line-height: 1.13;
    text-align: center;
  }
  .category-card small {
    display: none;
  }

  /* Duas colunas reais de produtos; reduz texto sem retirar botões. */
  .row.row-cols-1.row-cols-sm-2.row-cols-lg-4 {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem;
  }
  .row.row-cols-1.row-cols-sm-2.row-cols-lg-4 > .col {
    width: 50%;
    flex: 0 0 auto;
  }
  .product-card,
  .produto-card {
    border-radius: 14px !important;
  }
  .product-image-wrap {
    aspect-ratio: 1 / .88;
  }
  .stock-badge,
  .offer-badge,
  .featured-badge {
    padding: 4px 6px;
    font-size: .54rem;
  }
  .stock-badge {
    top: 7px;
    left: 7px;
  }
  .offer-badge {
    top: 7px;
    right: 7px;
  }
  .featured-badge {
    display: none;
  }
  .product-card .p-3 {
    min-height: 0 !important;
    padding: 10px !important;
  }
  .product-card small {
    font-size: .61rem;
  }
  .product-card h6 {
    display: -webkit-box;
    min-height: 32px;
    margin: 3px 0 5px !important;
    overflow: hidden;
    font-size: .73rem;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .product-card p {
    display: none;
  }
  .product-card .mb-3 {
    margin: 0 0 8px !important;
    line-height: 1.1;
  }
  .price {
    font-size: .83rem;
  }
  .price-old {
    display: block;
    margin: 0 0 2px !important;
    font-size: .62rem;
  }
  .product-card .d-flex.gap-2 {
    gap: 5px !important;
  }
  .product-card .btn {
    min-width: 0;
    padding: .44rem .22rem;
    font-size: 0;
    line-height: 1;
    border-radius: 8px;
  }
  .product-card .btn i {
    margin: 0 !important;
    font-size: .95rem;
  }

  /* Três benefícios lado a lado, sem alterar o HTML ou conteúdo. */
  main section.mt-5 > .row.g-4 {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .5rem;
  }
  main section.mt-5 > .row.g-4 > .col-md-4 {
    width: 33.333333%;
  }
  .info-card {
    min-height: 145px;
    padding: 11px 7px;
    border-radius: 13px;
    text-align: center;
  }
  .info-card .service-icon {
    width: 35px;
    height: 35px;
    margin: 0 auto 8px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .info-card h5 {
    margin-bottom: 5px !important;
    font-size: .68rem;
    line-height: 1.15;
  }
  .info-card p {
    font-size: .56rem;
    line-height: 1.28;
  }

  .section-title {
    font-size: 1.38rem;
  }
  .section-subtitle {
    font-size: .79rem;
  }
  .footer-whatsapp-float {
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: 14px;
    font-size: 1.35rem;
  }
}

@media (max-width: 380px) {
  .navbar-eclipse .navbar-brand img,
  .eclipse-nav .navbar-brand img,
  .brand-logo {
    width: 116px;
  }
  .header-actions {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
    gap: 5px;
  }
  .header-actions .header-action,
  .header-actions .dropdown {
    width: 40px;
    height: 40px;
  }
  .search-box { height: 40px; }
  .search-box input { font-size: .72rem; }
  .category-card h6 { font-size: .64rem; }
  .info-card p { font-size: .53rem; }
}

/* =====================================================================
   ATALHOS DE CATEGORIA E BENEFÍCIOS
   ===================================================================== */
.home-categories {
  margin-bottom: 2rem;
}

.category-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.category-shortcut {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid #f0e5dc;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.045);
  color: var(--ec-texto);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.category-shortcut:hover {
  color: var(--ec-laranja-escuro);
  border-color: #ffc89c;
  box-shadow: 0 12px 28px rgba(255,122,26,.14);
  transform: translateY(-3px);
}

.category-shortcut > span:nth-child(2) {
  flex: 1;
}

.category-shortcut-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ec-laranja-claro);
  color: var(--ec-laranja-escuro);
  font-size: 1.15rem;
}

.category-shortcut > i:last-child {
  flex: 0 0 auto;
  color: #a5a5a5;
  font-size: 1.2rem;
  transition: transform .22s ease, color .22s ease;
}

.category-shortcut:hover > i:last-child {
  color: var(--ec-laranja);
  transform: translateX(3px);
}

.category-offer {
  border-color: #ffd2b4;
  background: linear-gradient(135deg, #fff7ef, #fff);
}

.category-offer .category-shortcut-icon {
  background: linear-gradient(135deg, var(--ec-laranja), #ff4d13);
  color: #fff;
}

/* Garante que os três benefícios tenham a mesma altura. */
.row:has(> [class*="col"] > .info-card) > [class*="col"] > .info-card {
  height: 100%;
}

@media (max-width: 991px) {
  .category-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-categories {
    margin-bottom: 1.4rem;
  }

  .category-shortcuts {
    gap: 8px;
  }

  .category-shortcut {
    min-height: 58px;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 13px;
    font-size: .68rem;
  }

  .category-shortcut-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
    font-size: .92rem;
  }

  .category-shortcut > i:last-child {
    font-size: 1rem;
  }

  /* Mesmo que uma coluna esteja como col-md-4, os três cartões ficam enquadrados. */
  .row:has(> [class*="col"] > .info-card) {
    display: flex;
    flex-wrap: nowrap;
    --bs-gutter-x: .5rem;
  }

  .row:has(> [class*="col"] > .info-card) > [class*="col"] {
    width: 33.333333% !important;
    max-width: 33.333333%;
    flex: 0 0 33.333333%;
  }

  .row:has(> [class*="col"] > .info-card) .info-card {
    min-height: 142px;
    padding: 11px 7px;
    border-radius: 13px;
    text-align: center;
  }

  .row:has(> [class*="col"] > .info-card) .service-icon {
    width: 35px;
    height: 35px;
    margin: 0 auto 8px;
    border-radius: 10px;
    font-size: 1rem;
  }

  .row:has(> [class*="col"] > .info-card) h5 {
    margin-bottom: 5px !important;
    font-size: .68rem;
    line-height: 1.15;
  }

  .row:has(> [class*="col"] > .info-card) p {
    margin: 0;
    font-size: .56rem;
    line-height: 1.27;
  }
}

/* =====================================================================
   FLYER PRINCIPAL — acabamento de carrossel profissional
   ===================================================================== */
.home-flyer {
  position: relative;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #f2ddcb;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,229,.98)),
    linear-gradient(135deg, var(--ec-laranja), #ff4d13);
  box-shadow: 0 20px 45px rgba(63,36,18,.13);
}

.home-flyer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: inherit;
  pointer-events: none;
}

.home-flyer #heroCarousel {
  overflow: hidden;
  border-radius: 20px;
  background: #f7f3ef;
  height: clamp(260px, 29vw, 375px);
}

.home-flyer .carousel-inner,
.home-flyer .carousel-item,
.home-flyer .flyer-image-link {
  border-radius: inherit;
}

.home-flyer .carousel-inner,
.home-flyer .carousel-item {
  height: 100%;
}

.home-flyer .flyer-image-link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: #f7f3ef;
}

.home-flyer .flyer-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.10), transparent 35%, rgba(0,0,0,.035));
  pointer-events: none;
}

.home-flyer .flyer-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.home-flyer .flyer-image-link:hover .flyer-image {
  filter: saturate(1.04) contrast(1.01);
  transform: scale(1.025);
}

.home-flyer .flyer-control {
  top: 50%;
  bottom: auto;
  width: 38px;
  height: 38px;
  margin: -19px 12px 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  opacity: 0;
  box-shadow: 0 5px 16px rgba(54,35,20,.19);
  backdrop-filter: blur(9px);
  transition: opacity .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.home-flyer:hover .flyer-control,
.home-flyer .flyer-control:focus {
  opacity: 1;
}

.home-flyer .flyer-control:hover {
  background: var(--ec-laranja);
  box-shadow: 0 8px 19px rgba(255,122,26,.34);
  transform: scale(1.08);
}

.home-flyer .carousel-control-prev-icon,
.home-flyer .carousel-control-next-icon {
  width: .86rem;
  height: .86rem;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  filter: invert(54%) sepia(96%) saturate(2278%) hue-rotate(356deg) brightness(101%) contrast(101%);
}

.home-flyer .flyer-control:hover .carousel-control-prev-icon,
.home-flyer .flyer-control:hover .carousel-control-next-icon {
  filter: brightness(0) invert(1);
}

.home-flyer .carousel-indicators {
  bottom: 7px;
  z-index: 4;
  margin: 0;
}

.home-flyer .carousel-indicators [data-bs-target] {
  width: 25px;
  height: 5px;
  margin: 0 4px;
  border: 0;
  border-radius: 99px;
  background-color: rgba(255,255,255,.82);
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  opacity: .72;
  transition: width .25s ease, background-color .25s ease, opacity .25s ease;
}

.home-flyer .carousel-indicators .active {
  width: 38px;
  background-color: var(--ec-laranja);
  opacity: 1;
}

@media (max-width: 767px) {
  .home-flyer {
    padding: 4px;
    border-radius: 17px;
    box-shadow: 0 12px 30px rgba(63,36,18,.12);
  }

  .home-flyer #heroCarousel {
    border-radius: 13px;
    height: clamp(190px, 52vw, 245px);
  }

  .home-flyer .flyer-image-link:hover .flyer-image {
    transform: none;
  }

  .home-flyer .flyer-control {
    width: 34px;
    height: 34px;
    margin: -17px 6px 0;
    opacity: .86;
  }

  .home-flyer .carousel-control-prev-icon,
  .home-flyer .carousel-control-next-icon {
    width: .8rem;
    height: .8rem;
  }

  .home-flyer .carousel-indicators {
    bottom: 3px;
  }

  .home-flyer .carousel-indicators [data-bs-target] {
    width: 17px;
    height: 4px;
    margin: 0 3px;
  }

  .home-flyer .carousel-indicators .active {
    width: 28px;
  }
}

/* Confirmação ao adicionar um produto, sem abrir o carrinho. */
.site-flash-wrap {
  position: fixed;
  top: 92px;
  right: 20px;
  z-index: 1080;
  width: min(390px, calc(100vw - 32px));
}

.site-flash {
  display: flex;
  align-items: center;
  padding: 14px 42px 14px 16px;
  border: 1px solid #bfe4cb;
  border-radius: 14px;
  background: #f1fff5;
  color: #176738;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.site-flash .bi-check-circle-fill {
  color: #249854;
  font-size: 1.15rem;
}

@media (max-width: 767px) {
  .site-flash-wrap {
    top: 74px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  .site-flash {
    padding: 12px 38px 12px 14px;
    border-radius: 12px;
    font-size: .86rem;
  }
}

/* Filtros de categoria da página de produtos. */
.product-category-filters {
  align-items: center;
  padding: 5px;
  border: 1px solid #f1e5dc;
  border-radius: 16px;
  background: #fffaf6;
}

.product-category-filters .btn {
  white-space: nowrap;
  border-width: 1px;
  padding: .48rem .76rem;
  font-size: .78rem;
  box-shadow: none;
}

.product-category-filters .btn-primary {
  box-shadow: 0 7px 15px rgba(255,122,26,.22);
}

@media (max-width: 767px) {
  .product-category-filters {
    gap: 7px !important;
    margin-right: -12px;
    margin-left: -12px;
    padding: 7px 12px 10px;
    border: 0;
    border-top: 1px solid #f2e7df;
    border-bottom: 1px solid #f2e7df;
    border-radius: 0;
    background: linear-gradient(90deg, #fffaf6, #fff);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .product-category-filters::-webkit-scrollbar {
    display: none;
  }

  .product-category-filters .btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: .48rem .72rem;
    border-radius: 11px !important;
    font-size: .72rem;
    scroll-snap-align: start;
  }

  .product-category-filters .btn-primary {
    box-shadow: 0 6px 14px rgba(255,122,26,.22);
  }
}









/* =========================================================
   ECLIPSE - RESERVA DE TURISMO
========================================================= */

.tourism-panel {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

.tourism-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tourism-fields-grid label {
    display: block;
    margin-bottom: 6px;
    color: #555;
}

.tourism-fields-grid .form-control {
    min-height: 46px;
    border-radius: 11px;
}

.tourism-reservation-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
}

.tourism-reservation-note i {
    color: #ff6500;
}


/* DESTINOS */

.destination-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.destination-option {
    position: relative;
    cursor: pointer;
}

.destination-option input {
    position: absolute;
    opacity: 0;
}

.destination-option span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 9px 12px;
    border: 1px solid #dddddd;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    transition: .2s ease;
}

.destination-option span i {
    color: #ff6500;
    font-size: 17px;
}

.destination-option input:checked + span {
    background: #fff3eb;
    border-color: #ff6500;
    color: #ff6500;
}

.destination-option:hover span {
    border-color: #ff6500;
}


/* =========================================================
   STREAMING
========================================================= */

.streaming-panel {
    background: linear-gradient(
        135deg,
        #10091c,
        #1c1230,
        #0d0715
    );
    border: 1px solid rgba(160,130,220,.25);
    border-radius: 24px;
    padding: 30px;
    color: #ffffff;
    overflow: hidden;
}

.streaming-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.streaming-description {
    color: #c9c2d3;
    line-height: 1.7;
}

.streaming-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 25px;
}

.streaming-highlights div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}

.streaming-highlights i {
    color: #c4b5fd;
}


/* FORM */

.streaming-form {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 25px;
}

.streaming-form-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.streaming-form-title span {
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.streaming-form-title h3 {
    margin: 5px 0;
    font-weight: 800;
}

.streaming-form-title p {
    color: #a69caf;
    margin: 0;
    font-size: 13px;
}

.streaming-form-title > i {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    background: rgba(124,58,237,.2);
    color: #c4b5fd;
    font-size: 22px;
}

.streaming-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.streaming-label i {
    color: #c4b5fd;
    margin-right: 5px;
}


/* PLATAFORMAS */

.streaming-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.streaming-option {
    position: relative;
    cursor: pointer;
}

.streaming-option input {
    position: absolute;
    opacity: 0;
}

.streaming-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 70px;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    transition: .2s ease;
}

.streaming-option span i {
    color: #c4b5fd;
    font-size: 17px;
}

.streaming-option strong {
    font-size: 12px;
}

.streaming-option small {
    color: #91879f;
    font-size: 10px;
}

.streaming-option input:checked + span {
    border-color: #a78bfa;
    background: rgba(124,58,237,.2);
}

.streaming-option:hover span {
    border-color: #a78bfa;
}


/* CAMPOS STREAMING */

.streaming-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.streaming-fields-grid label,
.streaming-form .mb-3 > label {
    display: block;
    color: #e8e0f1;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.streaming-form .form-control {
    min-height: 46px;
    border-radius: 11px;
    background: #110b20;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.15);
}

.streaming-form .form-control::placeholder {
    color: #71677c;
}

.streaming-form textarea.form-control {
    min-height: 90px;
}


/* BOTÃO */

.streaming-submit {
    min-height: 50px;
    border: 0;
    background: linear-gradient(
        90deg,
        #7c3aed,
        #ec4899
    );
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(124,58,237,.25);
}

.streaming-submit:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.streaming-note {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    color: #91879f;
    font-size: 11px;
    line-height: 1.5;
}

.streaming-note i {
    color: #c4b5fd;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 767px) {

    .tourism-panel,
    .streaming-panel {
        padding: 18px;
        border-radius: 18px;
    }


    /* SEMPRE 2 CAMPOS POR LINHA */

    .tourism-fields-grid,
    .streaming-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    /* DESTINOS */

    .destination-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .destination-option span {
        min-height: 44px;
        padding: 7px;
        font-size: 11px;
    }

    .destination-option span i {
        font-size: 14px;
    }


    /* STREAMING */

    .streaming-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .streaming-option span {
        min-height: 66px;
        padding: 9px;
    }

    .streaming-option strong {
        font-size: 10px;
    }

    .streaming-option small {
        font-size: 8px;
    }


    .streaming-highlights {
        grid-template-columns: repeat(2, 1fr);
    }


    .streaming-form {
        padding: 16px;
    }


    .streaming-form-title h3 {
        font-size: 18px;
    }


    .streaming-form-title > i {
        width: 43px;
        height: 43px;
        min-width: 43px;
        font-size: 18px;
    }


    .tourism-fields-grid .form-control,
    .streaming-fields-grid .form-control {
        min-height: 43px;
        font-size: 12px;
        padding: 8px;
    }

}













/* =========================================================
   ECLIPSE COMERCIAL - CATÁLOGO DE SERVIÇOS
   ========================================================= */

.services-page {
    width: 100%;
    min-height: 100vh;
    background: #f7f8fa;
    padding-bottom: 60px;
}


/* =========================
   HERO
   ========================= */

.services-hero {
    width: 100%;
    background: linear-gradient(135deg, #fff7f0, #ffffff);
    border-bottom: 1px solid #eeeeee;
    padding: 65px 25px;
}

.services-hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.services-hero-label {
    display: inline-block;
    color: #ff6b00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.services-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    color: #171717;
}

.services-hero p {
    max-width: 700px;
    margin: 0;
    color: #666;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================
   FILTRO DE CATEGORIAS
   ========================= */

.service-category-nav {
    max-width: 1200px;
    margin: 35px auto 10px;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.service-nav-btn {
    min-height: 48px;
    padding: 10px 14px;

    border: 1px solid #e2e2e2;
    border-radius: 12px;

    background: #ffffff;
    color: #444;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.service-nav-btn i {
    margin-right: 6px;
}

.service-nav-btn:hover {
    border-color: #ff6b00;
    color: #ff6b00;
    transform: translateY(-2px);
}

.service-nav-btn.active {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(255, 107, 0, .18);
}


/* =========================
   CATÁLOGO
   ========================= */

.services-catalog {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* =========================
   CARD
   ========================= */

.service-catalog-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 28px;

    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 20px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.service-catalog-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #ff6b00;
}

.service-catalog-card:hover {
    transform: translateY(-6px);
    border-color: #ffd7bd;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
}


/* =========================
   ÍCONE
   ========================= */

.service-card-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    background: #fff1e7;
    color: #ff6b00;

    font-size: 28px;
}

.service-card-icon i {
    line-height: 1;
}


/* =========================
   CATEGORIA
   ========================= */

.service-card-category {
    display: inline-block;

    margin-bottom: 8px;

    color: #ff6b00;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .7px;
}


/* =========================
   TÍTULO
   ========================= */

.service-catalog-card h2 {
    margin: 0 0 12px;

    color: #1b1b1b;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}


/* =========================
   DESCRIÇÃO
   ========================= */

.service-catalog-card p {
    margin: 0;

    color: #6a6a6a;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================
   RODAPÉ DO CARD
   ========================= */

.service-card-footer {
    margin-top: auto;
    padding-top: 25px;
}


/* =========================
   BOTÃO VER SERVIÇO
   ========================= */

.btn-view-service {
    width: 100%;
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 18px;

    border-radius: 11px;

    background: #ff6b00;
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.btn-view-service:hover {
    background: #e85d00;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(255, 107, 0, .25);
}

.btn-view-service i {
    font-size: 16px;
    transition: transform .2s ease;
}

.btn-view-service:hover i {
    transform: translateX(4px);
}


/* =========================
   SEM SERVIÇOS
   ========================= */

.services-empty {
    grid-column: 1 / -1;

    text-align: center;

    padding: 70px 20px;

    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 20px;
}

.services-empty i {
    display: block;

    margin-bottom: 15px;

    color: #ff6b00;
    font-size: 45px;
}

.services-empty h3 {
    margin: 0 0 8px;

    color: #222;
}

.services-empty p {
    margin: 0;

    color: #777;
}


/* =========================
   BLOCO DE AJUDA
   ========================= */

.service-help {
    max-width: 1200px;

    margin: 45px auto 0;
    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    background: #1c1c1c;
    border-radius: 20px;

    color: #ffffff;
}

.service-help > div {
    flex: 1;
}

.service-help span {
    display: block;

    margin-bottom: 7px;

    color: #ff8a3d;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.service-help h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 800;
}

.service-help p {
    margin: 0;

    color: #c8c8c8;

    line-height: 1.6;
}

.btn-service-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 11px 20px;

    border-radius: 11px;

    background: #ff6b00;
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none !important;

    white-space: nowrap;

    transition: .2s ease;
}

.btn-service-help:hover {
    background: #e85d00;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .service-category-nav {
        grid-template-columns: repeat(4, 1fr);
    }

    .services-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .services-hero {
        padding: 45px 18px;
    }

    .services-hero h1 {
        font-size: 34px;
    }

    .services-hero p {
        font-size: 15px;
    }


    .service-category-nav {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 22px;
        padding: 0 14px;

        gap: 8px;
    }

    .service-nav-btn {
        min-height: 44px;

        padding: 8px 7px;

        font-size: 12px;
    }

    .service-nav-btn i {
        margin-right: 3px;
    }


    .services-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

        margin-top: 20px;
        padding: 0 14px;
    }


    .service-catalog-card {
        min-height: 285px;

        padding: 17px;

        border-radius: 16px;
    }


    .service-card-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 14px;

        border-radius: 13px;

        font-size: 21px;
    }


    .service-card-category {
        font-size: 9px;
        letter-spacing: .4px;
    }


    .service-catalog-card h2 {
        font-size: 17px;
        line-height: 1.25;

        margin-bottom: 8px;
    }


    .service-catalog-card p {
        font-size: 12px;
        line-height: 1.55;
    }


    .service-card-footer {
        padding-top: 18px;
    }


    .btn-view-service {
        min-height: 40px;

        padding: 8px 10px;

        font-size: 11px;
    }


    .service-help {
        margin: 30px 14px 0;

        padding: 23px 18px;

        flex-direction: column;
        align-items: stretch;

        border-radius: 16px;
    }


    .service-help h2 {
        font-size: 20px;
    }


    .service-help p {
        font-size: 13px;
    }


    .btn-service-help {
        width: 100%;
    }

}


/* =========================================================
   TELEMÓVEL MUITO PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    .services-catalog {
        grid-template-columns: 1fr;
    }

    .service-category-nav {
        grid-template-columns: 1fr 1fr;
    }

}




/* =========================================================
   ECLIPSE COMERCIAL
   PÁGINA INDIVIDUAL DOS SERVIÇOS
   ========================================================= */

.service-detail-page {
    min-height: 100vh;
    background: #f7f8fa;
}

.service-detail-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* HERO */

.service-detail-hero {
    padding: 35px 0 70px;
    background: linear-gradient(135deg, #fff7f0, #ffffff);
    border-bottom: 1px solid #eeeeee;
}

.service-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 35px;

    color: #666;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.service-back:hover {
    color: #ff6b00;
}

.service-detail-icon {
    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 20px;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 34px;
}

.service-detail-category {
    display: block;

    margin-bottom: 8px;

    color: #ff6b00;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-detail-hero h1 {
    margin: 0 0 15px;

    color: #171717;

    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    font-weight: 800;
}

.service-detail-hero p {
    max-width: 750px;

    margin: 0;

    color: #666;

    font-size: 17px;
    line-height: 1.7;
}


/* ÁREAS */

.service-areas {
    padding: 65px 0;
}

.service-section-heading {
    margin-bottom: 30px;
}

.service-section-heading span {
    color: #ff6b00;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.service-section-heading h2 {
    margin: 7px 0 8px;

    color: #1b1b1b;

    font-size: 32px;
    font-weight: 800;
}

.service-section-heading p {
    margin: 0;

    color: #777;
}


/* GRID DAS ÁREAS */

.service-areas-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* CARD DA ÁREA */

.service-area-card {
    padding: 25px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 18px;

    box-shadow: 0 7px 25px rgba(0, 0, 0, .05);

    transition: .25s ease;
}

.service-area-card:hover {
    transform: translateY(-5px);

    border-color: #ffd4b8;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .09);
}

.service-area-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background: #fff1e7;
    color: #ff6b00;

    font-size: 24px;
}

.service-area-card h3 {
    margin: 0 0 9px;

    color: #222;

    font-size: 19px;
    font-weight: 800;
}

.service-area-card p {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.6;
}


/* CAIXA SOLICITAR */

.service-request-box {
    margin-top: 45px;

    padding: 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    background: #1c1c1c;

    border-radius: 20px;

    color: #fff;
}

.service-request-box span {
    color: #ff8a3d;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}

.service-request-box h2 {
    margin: 6px 0 8px;

    color: #fff;

    font-size: 25px;
}

.service-request-box p {
    margin: 0;

    color: #c9c9c9;
}

.btn-request-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 12px 22px;

    background: #ff6b00;
    color: #fff !important;

    border-radius: 11px;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;

    transition: .2s ease;
}

.btn-request-service:hover {
    background: #e85d00;

    color: #fff !important;

    transform: translateY(-2px);
}


/* TABLET */

@media (max-width: 900px) {

    .service-areas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .service-detail-container {
        width: calc(100% - 28px);
    }

    .service-detail-hero {
        padding: 25px 0 45px;
    }

    .service-detail-icon {
        width: 60px;
        height: 60px;

        font-size: 27px;
    }

    .service-detail-hero h1 {
        font-size: 34px;
    }

    .service-detail-hero p {
        font-size: 14px;
    }

    .service-areas {
        padding: 40px 0;
    }

    .service-section-heading h2 {
        font-size: 26px;
    }

    .service-areas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .service-area-card {
        padding: 17px;
        border-radius: 15px;
    }

    .service-area-icon {
        width: 45px;
        height: 45px;

        margin-bottom: 13px;

        font-size: 20px;
    }

    .service-area-card h3 {
        font-size: 16px;
    }

    .service-area-card p {
        font-size: 12px;
    }

    .service-request-box {
        padding: 23px 18px;

        flex-direction: column;
        align-items: stretch;

        border-radius: 16px;
    }

    .service-request-box h2 {
        font-size: 20px;
    }

    .service-request-box p {
        font-size: 13px;
        line-height: 1.6;
    }

    .btn-request-service {
        width: 100%;
    }

}


/* TELEFONES PEQUENOS */

@media (max-width: 380px) {

    .service-areas-grid {
        grid-template-columns: 1fr;
    }

}







/* =========================================================
   SOLICITAR SERVIÇO
   ========================================================= */

.request-service-page {
    min-height: 100vh;
    padding: 45px 0 70px;
    background: #f7f8fa;
}

.request-service-container {
    width: min(1000px, calc(100% - 30px));
    margin: 0 auto;
}

.request-service-header {
    margin-bottom: 30px;
}

.request-service-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border-radius: 17px;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 28px;
}

.request-service-category {
    color: #ff6b00;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.request-service-header h1 {
    margin: 7px 0 10px;

    color: #171717;

    font-size: clamp(30px, 5vw, 45px);
    font-weight: 800;
}

.request-service-header p {
    margin: 0;

    color: #777;

    line-height: 1.7;
}


/* ALERTA */

.request-alert {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
    padding: 15px 18px;

    border-radius: 12px;

    font-size: 14px;
}

.request-alert-error {
    background: #fff0f0;
    border: 1px solid #ffd0d0;
    color: #a40000;
}


/* CARD */

.request-card {
    margin-bottom: 22px;
    padding: 28px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.request-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;
}

.request-card-heading > i {
    color: #ff6b00;
    font-size: 25px;
}

.request-card-heading h2 {
    margin: 0 0 3px;

    color: #222;

    font-size: 21px;
}

.request-card-heading p {
    margin: 0;

    color: #888;

    font-size: 13px;
}


/* DADOS AUTOMÁTICOS */

.request-user-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.request-readonly-field label {
    display: block;

    margin-bottom: 7px;

    color: #666;

    font-size: 12px;
    font-weight: 700;
}

.request-readonly-field > div {
    min-height: 45px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 13px;

    background: #f7f7f7;

    border: 1px solid #e5e5e5;
    border-radius: 10px;

    color: #444;

    font-size: 13px;
}

.request-readonly-field i {
    color: #ff6b00;
}


/* CAMPOS */

.request-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.request-field.full {
    grid-column: 1 / -1;
}

.request-field label {
    display: block;

    margin-bottom: 7px;

    color: #444;

    font-size: 13px;
    font-weight: 700;
}

.request-field input,
.request-field select,
.request-field textarea {
    width: 100%;

    padding: 12px 13px;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 10px;

    color: #333;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition: .2s ease;
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
    border-color: #ff6b00;

    box-shadow:
        0 0 0 3px rgba(255,107,0,.10);
}

.request-field input[readonly] {
    background: #f5f5f5;
    cursor: not-allowed;
}

.request-field textarea {
    resize: vertical;
}


/* BOTÃO */

.request-submit-area {
    display: flex;
    justify-content: flex-end;

    margin-top: 25px;
}

.btn-submit-service {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 25px;

    border: 0;
    border-radius: 11px;

    background: #ff6b00;
    color: #fff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s ease;
}

.btn-submit-service:hover {
    background: #e85d00;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255,107,0,.22);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .request-service-page {
        padding: 30px 0 50px;
    }

    .request-service-container {
        width: calc(100% - 28px);
    }

    .request-card {
        padding: 19px;
        border-radius: 15px;
    }

    .request-user-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .request-user-grid
    .request-readonly-field:last-child {
        grid-column: 1 / -1;
    }

    .request-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .request-field.full {
        grid-column: 1 / -1;
    }

    .request-card-heading h2 {
        font-size: 18px;
    }

    .request-card-heading p {
        font-size: 12px;
    }

    .request-field label {
        font-size: 12px;
    }

    .request-field input,
    .request-field select,
    .request-field textarea {
        font-size: 13px;
    }

    .request-submit-area {
        display: block;
    }

    .btn-submit-service {
        width: 100%;
    }

}


/* TELEFONES PEQUENOS */

@media (max-width: 380px) {

    .request-user-grid,
    .request-fields-grid {
        grid-template-columns: 1fr;
    }

    .request-user-grid
    .request-readonly-field:last-child {
        grid-column: auto;
    }

    .request-field.full {
        grid-column: auto;
    }

}


/* =========================================================
   PAINEL DO CLIENTE
   ========================================================= */

.client-panel-page {
    min-height: 100vh;
    padding: 45px 0 70px;
    background: #f7f8fa;
}

.client-panel-container {
    width: min(1100px, calc(100% - 30px));
    margin: 0 auto;
}


/* CABEÇALHO */

.client-panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.client-panel-label {
    color: #ff6b00;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.client-panel-header h1 {
    margin: 7px 0 8px;
    color: #171717;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 800;
}

.client-panel-header p {
    margin: 0;
    color: #777;
}

.btn-new-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 19px;

    border-radius: 10px;

    background: #ff6b00;
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition: .2s ease;
}

.btn-new-request:hover {
    background: #e85d00;
    color: #fff;
    transform: translateY(-2px);
}


/* ESTATÍSTICAS */

.client-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 35px;
}

.client-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 21px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 15px;

    box-shadow: 0 5px 20px rgba(0,0,0,.04);
}

.client-stat-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 21px;
}

.client-stat-card span {
    display: block;
    margin-bottom: 3px;

    color: #888;

    font-size: 12px;
}

.client-stat-card strong {
    color: #222;
    font-size: 25px;
}


/* TÍTULO DA SECÇÃO */

.client-section-heading {
    margin-bottom: 18px;
}

.client-section-heading h2 {
    margin: 0 0 5px;

    color: #222;

    font-size: 24px;
    font-weight: 800;
}

.client-section-heading p {
    margin: 0;

    color: #888;

    font-size: 13px;
}


/* LISTA */

.client-orders-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* PEDIDO */

.client-order-card {
    display: flex;
    gap: 18px;

    padding: 22px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 16px;

    box-shadow: 0 5px 20px rgba(0,0,0,.04);

    transition: .2s ease;
}

.client-order-card:hover {
    border-color: #ffd3b5;
    transform: translateY(-2px);
}

.client-order-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 20px;
}


/* CONTEÚDO */

.client-order-content {
    flex: 1;
    min-width: 0;
}

.client-order-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.client-order-code {
    display: block;
    margin-bottom: 4px;

    color: #999;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .5px;
}

.client-order-top h3 {
    margin: 0;

    color: #222;

    font-size: 18px;
    font-weight: 800;
}


/* ESTADO */

.client-order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-new {
    background: #eef4ff;
    color: #3568c7;
}

.status-analysis {
    background: #fff7df;
    color: #9a7100;
}

.status-confirmed {
    background: #eaf9ef;
    color: #218744;
}

.status-payment {
    background: #f4edff;
    color: #7040b8;
}

.status-scheduled {
    background: #e9f7ff;
    color: #0877a8;
}

.status-progress {
    background: #fff0e5;
    color: #e85d00;
}

.status-completed {
    background: #e7f8ed;
    color: #18833e;
}

.status-cancelled {
    background: #fff0f0;
    color: #bd3434;
}


/* INFORMAÇÕES */

.client-order-info {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px solid #f0f0f0;
}

.client-order-info div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.client-order-info span {
    color: #999;
    font-size: 11px;
}

.client-order-info strong {
    color: #444;
    font-size: 12px;
}


/* PARTE INFERIOR */

.client-order-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 18px;
}

.client-order-deadline {
    color: #777;
    font-size: 12px;
}

.client-order-deadline i {
    color: #ff6b00;
    margin-right: 4px;
}

.btn-view-order {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #ff6b00;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.btn-view-order:hover {
    color: #e85d00;
}


/* SEM PEDIDOS */

.client-empty-orders {
    padding: 60px 25px;

    text-align: center;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 18px;
}

.client-empty-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 26px;
}

.client-empty-orders h3 {
    margin: 0 0 7px;

    color: #222;

    font-size: 20px;
}

.client-empty-orders p {
    margin: 0 0 20px;

    color: #888;

    font-size: 13px;
}

.btn-empty-request {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 11px 17px;

    background: #ff6b00;
    color: #fff;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.btn-empty-request:hover {
    color: #fff;
    background: #e85d00;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .client-panel-page {
        padding: 30px 0 50px;
    }

    .client-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-new-request {
        width: 100%;
    }

    .client-panel-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .client-stat-card:last-child {
        grid-column: 1 / -1;
    }

    .client-order-card {
        padding: 17px;
    }

    .client-order-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-order-status {
        white-space: normal;
    }

}


@media (max-width: 480px) {

    .client-panel-stats {
        grid-template-columns: 1fr;
    }

    .client-stat-card:last-child {
        grid-column: auto;
    }

    .client-order-card {
        gap: 12px;
    }

    .client-order-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .client-order-top h3 {
        font-size: 16px;
    }

    .client-order-info {
        gap: 15px;
    }

    .client-order-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-view-order {
        width: 100%;
        justify-content: center;

        padding: 10px;

        background: #fff0e5;
        border-radius: 8px;
    }

}


/* =========================================================
   CENTRO DE NOTIFICAÇÕES
   ========================================================= */

.notifications-page {
    min-height: 100vh;
    padding: 45px 0 70px;
    background: #f7f8fa;
}

.notifications-container {
    width: min(950px, calc(100% - 30px));
    margin: 0 auto;
}


/* CABEÇALHO */

.notifications-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.notifications-title {
    margin: 5px 0 7px;
    color: #171717;
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 800;
}

.notifications-header p {
    margin: 0;
    color: #777;
    font-size: 14px;
}

.notifications-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 11px 16px;

    background: #fff;
    color: #444;

    border: 1px solid #ddd;
    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.notifications-profile-btn:hover {
    color: #ff6b00;
    border-color: #ff6b00;
}


/* RESUMO */

.notifications-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.notification-overview-card {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 15px;

    box-shadow: 0 5px 20px rgba(0,0,0,.035);
}

.notification-overview-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 19px;
}

.notification-overview-card span {
    display: block;
    margin-bottom: 2px;

    color: #888;
    font-size: 11px;
}

.notification-overview-card strong {
    color: #222;
    font-size: 22px;
}


/* BARRA */

.notifications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 15px;
}

.notification-filters {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 4px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 10px;
}

.notification-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

    border-radius: 7px;

    color: #777;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.notification-filter span {
    min-width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eee;
    color: #777;

    font-size: 9px;
}

.notification-filter.active {
    background: #fff0e5;
    color: #ff6b00;
}

.notification-filter.active span {
    background: #ff6b00;
    color: #fff;
}

.notification-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #777;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.notification-mark-all:hover {
    color: #ff6b00;
}


/* LISTA */

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* CARD */

.notification-card {
    display: flex;
    gap: 15px;

    padding: 19px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 15px;

    box-shadow: 0 4px 18px rgba(0,0,0,.035);

    transition: .2s ease;
}

.notification-card:hover {
    border-color: #ffd5ba;
    transform: translateY(-1px);
}

.notification-unread {
    border-left: 4px solid #ff6b00;
    background: #fffaf6;
}


/* ÍCONE */

.notification-type-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    font-size: 19px;
}

.notification-default {
    background: #fff0e5;
    color: #ff6b00;
}

.notification-payment {
    background: #eaf8ef;
    color: #218744;
}

.notification-invoice {
    background: #f1ecff;
    color: #7040b8;
}

.notification-delivery {
    background: #eaf5ff;
    color: #1673a8;
}

.notification-purchase {
    background: #fff7df;
    color: #9a7100;
}

.notification-support {
    background: #eef1ff;
    color: #5364b5;
}


/* CONTEÚDO */

.notification-main {
    flex: 1;
    min-width: 0;
}

.notification-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notification-heading > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.notification-heading h3 {
    margin: 0;

    color: #222;

    font-size: 15px;
    font-weight: 800;
}

.notification-new-badge {
    padding: 3px 7px;

    border-radius: 10px;

    background: #ff6b00;
    color: #fff;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    margin-top: 5px;

    border-radius: 50%;

    background: #ff6b00;
}

.notification-message {
    margin: 7px 0 11px;

    color: #666;

    font-size: 13px;
    line-height: 1.6;
}


/* PEDIDO */

.notification-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 11px;
    padding: 6px 9px;

    border-radius: 7px;

    background: #f7f7f7;
    color: #777;

    font-size: 10px;
    font-weight: 700;
}

.notification-order i {
    color: #ff6b00;
}


/* RODAPÉ */

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-top: 11px;

    border-top: 1px solid #f1f1f1;
}

.notification-date {
    color: #999;
    font-size: 10px;
}

.notification-date i {
    margin-right: 3px;
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-read-btn {
    color: #777;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.notification-read-btn:hover {
    color: #ff6b00;
}

.notification-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #ff6b00;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.notification-open-btn:hover {
    color: #e85d00;
}


/* VAZIO */

.notifications-empty {
    padding: 65px 25px;

    text-align: center;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 18px;
}

.notifications-empty-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #fff0e5;
    color: #ff6b00;

    font-size: 25px;
}

.notifications-empty h2 {
    margin: 0 0 7px;

    color: #222;

    font-size: 20px;
}

.notifications-empty p {
    max-width: 450px;

    margin: 0 auto 20px;

    color: #888;

    font-size: 13px;
    line-height: 1.6;
}

.notifications-services-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 11px 17px;

    border-radius: 9px;

    background: #ff6b00;
    color: #fff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.notifications-services-btn:hover {
    background: #e85d00;
    color: #fff;
}


/* MOBILE */

@media (max-width: 650px) {

    .notifications-page {
        padding: 30px 0 50px;
    }

    .notifications-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .notifications-profile-btn {
        width: 100%;
    }

    .notifications-overview {
        grid-template-columns: 1fr;
    }

    .notifications-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-mark-all {
        align-self: flex-end;
    }

    .notification-card {
        padding: 16px;
    }

    .notification-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-actions {
        width: 100%;
        justify-content: space-between;
    }

}


@media (max-width: 400px) {

    .notification-filters {
        width: 100%;
    }

    .notification-filter {
        flex: 1;
        justify-content: center;
    }

    .notification-card {
        gap: 11px;
    }

    .notification-type-icon {
        width: 39px;
        height: 39px;
        font-size: 16px;
    }

    .notification-heading h3 {
        font-size: 14px;
    }

}


/* =========================================================
   PREÇO DAS ÁREAS DOS SERVIÇOS
   ========================================================= */

.service-area-price {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-area-price strong {
    font-size: 1.25rem;
    font-weight: 800;
}

.service-area-price small {
    font-size: 0.82rem;
    opacity: 0.65;
}