/* ============================================================
   GARIMPO LOCAL — Global Stylesheet v4.1
   Paleta extraída do logo: cobre/bronze, azul aço, dourado
   Compatible with all HTML pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2family=Cinzel:wght@600;700;900&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --copper:       #a0522d;
  --copper-light: #c8783e;
  --copper-dark:  #7a3b1e;
  --gold:         #c9960e;
  --gold-light:   #e8b832;
  --steel:        #1a3556;
  --steel-mid:    #2b5180;
  --steel-light:  #4a80b4;
  --bg-base:      #f5ede4;
  --bg-card:      #fffdf9;
  --text-dark:    #1c1008;
  --text-mid:     #4a3728;
  --text-light:   #8a6e5e;
  --success:      #2d7a4f;
  --danger:       #c0392b;
  --warning:      var(--gold);
  --info:         var(--steel-mid);
  --shadow-sm:    0 2px 8px rgba(26,53,86,0.10);
  --shadow-md:    0 6px 20px rgba(26,53,86,0.15);
  --shadow-lg:    0 12px 40px rgba(26,53,86,0.20);
  --radius:       0.875rem;
  --radius-sm:    0.5rem;
  --radius-lg:    1.5rem;
  --transition:   all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--bg-base);
  color: var(--text-dark);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

body.nav-open { overflow: hidden; }

/* ── Focus & Accessibility ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: 'Cinzel', serif;
  line-height: 1.2;
  color: var(--steel);
}

a {
  color: var(--steel-mid);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--copper-light); }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, var(--steel) 0%, var(--steel-mid) 60%, var(--copper-dark) 100%);
  color: #fff;
  padding: 0.65rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 4px 20px rgba(26,53,86,0.35);
  border-bottom: 2px solid var(--gold);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-wrap img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: var(--transition);
}
.logo-wrap:hover img { transform: rotate(-6deg) scale(1.08); }

.logo-wrap .site-name {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ── Hamburger Button ─────────────────────────────────────────
   Usa fluxo normal (flex item do header), NAO position:fixed.
   Isso evita conflitos com o header sticky.             */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: rgba(201,150,14,0.18);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 10px 9px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: var(--transition);
  flex-shrink: 0;
}
.hamburger-btn:hover {
  background: rgba(201,150,14,0.32);
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.hamburger-btn.active {
  background: rgba(201,150,14,0.3);
  border-color: var(--gold-light);
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.nav-link {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-link:hover,
.nav-link.active {
  color: var(--gold-light);
  background: rgba(255,255,255,0.1);
}
.nav-link--danger { color: #ff9a9a; }
.nav-link--danger:hover { color: #fff; background: rgba(192,57,43,0.4); }
.nav-link--highlight { color: var(--gold-light); font-weight: 700; }

.contador-badge {
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(201,150,14,0.18);
  color: var(--gold-light);
  border: 1px solid var(--gold);
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Auth Buttons ───────────────────────────────────────────── */
.auth-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.auth-btn--login {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
}
.auth-btn--login:hover { border-color: var(--gold-light); color: var(--gold-light); }
.auth-btn--register {
  background: var(--gold);
  color: var(--steel);
}
.auth-btn--register:hover { background: var(--gold-light); }
.auth-btn--logout {
  background: rgba(192,57,43,0.8);
  color: #fff;
}
.auth-btn--logout:hover { background: var(--danger); }

/* ── Mobile Nav Overlay ─────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-nav-overlay.active {
  display: block;
  animation: fadeInOverlay 0.3s ease forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Security Banner ────────────────────────────────────────── */
.security-banner {
  background: linear-gradient(90deg, var(--steel) 0%, #1e4a7a 100%);
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(201,150,14,0.4);
  letter-spacing: 0.01em;
}
.security-banner i { color: var(--gold-light); margin-right: 0.4rem; }

/* ── Hero Section ───────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    linear-gradient(rgba(26,53,86,0.72), rgba(26,53,86,0.80)),
    url('/assets/images/angola_hero.jpg') center/cover no-repeat;
  background-color: var(--steel);
  padding: 5rem 1.5rem;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,150,14,0.18) 0%, transparent 70%);
}

.hero__content { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.6);
  margin-bottom: 1rem;
}
.hero__title span { color: var(--gold-light); }

.hero__quote {
  font-style: italic;
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: var(--transition);
}
.btn:hover::after { background: rgba(255,255,255,0.1); }
.btn::after { pointer-events: none; }
.btn > * { position: relative; z-index: 1; }
.btn:active { transform: scale(0.97); }

.btn-copper {
  background: linear-gradient(135deg, var(--copper-light), var(--copper));
  color: #fff;
  box-shadow: 0 4px 16px rgba(160,82,45,0.4);
}
.btn-copper:hover { box-shadow: 0 8px 24px rgba(160,82,45,0.5); transform: translateY(-2px); color: #fff; }

.btn-steel {
  background: linear-gradient(135deg, var(--steel-mid), var(--steel));
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,53,86,0.35);
}
.btn-steel:hover { box-shadow: 0 8px 24px rgba(26,53,86,0.45); transform: translateY(-2px); color: #fff; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--steel);
  box-shadow: 0 4px 16px rgba(201,150,14,0.4);
}
.btn-gold:hover { box-shadow: 0 8px 24px rgba(201,150,14,0.5); transform: translateY(-2px); color: var(--steel); }

.btn-success {
  background: linear-gradient(135deg, #3aad6e, var(--success));
  color: #fff;
  box-shadow: 0 4px 16px rgba(45,122,79,0.4);
}
.btn-success:hover { box-shadow: 0 8px 24px rgba(45,122,79,0.5); transform: translateY(-2px); color: #fff; }

.btn-outline {
  background: transparent;
  border: 2px solid var(--copper);
  color: var(--copper);
}
.btn-outline:hover { background: var(--copper); color: #fff; }

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

button.bg-yellow-600,
button.bg-green-600,
button.bg-green-500,
button.bg-blue-600,
button.bg-red-600,
button.bg-gray-300,
a.bg-yellow-600,
a.bg-green-600,
a.bg-green-500,
a.bg-blue-600,
a.bg-red-600,
a.bg-gray-300 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Cadastro Empresa: grid responsivo e logo preview improvements */
.cadastro-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.cadastro-grid .col { display: block; }
@media (min-width: 900px) {
  .cadastro-grid { grid-template-columns: 1fr 1fr; }
  .cadastro-grid .col--full { grid-column: 1 / -1; }
}

.logo-preview { width: 100%; max-width: 160px; height: 160px; object-fit: contain; border-radius: 12px; border: 1px dashed rgba(26,53,86,0.08); background: #fff; padding: 0.5rem; display: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.logo-preview.show { display: block; box-shadow: var(--shadow-sm); transform: translateY(0); }
.logo-preview:hover { transform: translateY(-4px); }

.iban-row { display:flex; gap:0.5rem; align-items:center; }
.iban-input { flex:1; padding:0.6rem 0.8rem; border-radius:0.6rem; border:1px solid rgba(26,53,86,0.08); background:#fff; font-weight:700; }
.copy-success.show { opacity:1; transform:translateY(0); }
.copy-success { opacity:0; transition: all 0.22s ease; transform: translateY(-6px); }

.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ── Section Layout ─────────────────────────────────────────── */
.section { max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem; }

.section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: var(--steel);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
}
.section-title i { color: var(--copper); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  transition: var(--transition);
  border: 1px solid rgba(160,82,45,0.1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--gold), var(--steel-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(160,82,45,0.2); }
.card:hover::before { transform: scaleX(1); }

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }

.testimonial-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  border-left: 4px solid var(--copper);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-card p { font-style: italic; color: var(--text-mid); margin-bottom: 0.75rem; }
.testimonial-card .author { font-weight: 700; color: var(--steel); font-size: 0.85rem; }
.star-rating { color: var(--gold); font-size: 1.1rem; }

/* ── Stats Strip ────────────────────────────────────────────── */
.stats-strip {
  background: linear-gradient(135deg, var(--steel), var(--steel-mid));
  color: #fff;
  padding: 2rem 1.5rem;
  margin: 2.5rem 0;
}
.stats-strip__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.stat-item__number {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold-light);
}
.stat-item__label { font-size: 0.82rem; opacity: 0.8; margin-top: 0.25rem; }

/* ── Benefits List ──────────────────────────────────────────── */
.benefits-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem;
  background: rgba(26,53,86,0.04);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-mid);
}
.benefits-list li i { color: var(--success); margin-top: 0.15rem; flex-shrink: 0; }

/* ── Profile & About Page ───────────────────────────────────── */
.profile-hero {
  background: linear-gradient(135deg, var(--steel) 0%, var(--steel-mid) 55%, var(--copper-dark) 100%);
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--gold);
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(201,150,14,0.2) 0%, transparent 65%);
}
.profile-hero__content { position: relative; z-index: 1; }

.profile-avatar {
  width: 120px; height: 120px;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  margin-bottom: 1rem;
}
.profile-avatar-fallback {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper), var(--steel));
  display: none; align-items: center; justify-content: center;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  margin: 0 auto 1rem;
  font-size: 3rem; color: var(--gold-light);
}
.profile-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 900; color: var(--gold-light);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin-bottom: 0.3rem;
}
.profile-role {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 1.5rem;
}

.social-links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.6rem;
}
.social-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 600;
  transition: var(--transition);
  text-decoration: none; white-space: nowrap;
}
.social-link:hover { transform: translateY(-3px); filter: brightness(1.12); }
.sl-website   { background: var(--steel-mid); color:#fff; }
.sl-github    { background: #1c1c1e;           color:#fff; }
.sl-linkedin  { background: #0A66C2;           color:#fff; }
.sl-instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.sl-tiktok    { background: #010101;            color:#fff; }
.sl-youtube   { background: #FF0000;            color:#fff; }
.sl-twitter   { background: #000;               color:#fff; }
.sl-whatsapp  { background: #25D366;            color:#fff; }
.sl-email     { background: var(--copper);      color:#fff; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.value-item {
  padding: 1.25rem;
  background: rgba(26,53,86,0.04);
  border-radius: var(--radius);
  border: 1px solid rgba(160,82,45,0.12);
  display: flex; gap: 0.9rem; align-items: flex-start;
}
.value-item__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--copper-light), var(--copper));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; flex-shrink: 0;
}
.value-item h5 { font-family:'Cinzel',serif; font-size:0.88rem; color:var(--steel); margin-bottom:0.3rem; }
.value-item p  { font-size:0.83rem; color:var(--text-mid); line-height:1.55; }

.provinces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem; margin-top: 0.75rem;
}
.province-item {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--text-mid);
  padding: 0.4rem 0.6rem;
  background: rgba(26,53,86,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(160,82,45,0.1);
  transition: var(--transition);
}
.province-item:hover { background:rgba(160,82,45,0.07); border-color:var(--copper); }
.province-item i { color:var(--copper); font-size:0.75rem; flex-shrink:0; }

.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--steel), var(--steel-mid));
  border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0;
}
.stats-band .s-item { text-align: center; }
.stats-band .s-num  { font-family:'Cinzel',serif; font-size:1.6rem; font-weight:900; color:var(--gold-light); }
.stats-band .s-lbl  { font-size:0.75rem; color:rgba(255,255,255,0.7); margin-top:0.2rem; }

.testimonial-dynamic {
  background: var(--bg-card);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--copper);
  box-shadow: var(--shadow-sm); margin-bottom: 0.85rem;
}
.testimonial-dynamic p { font-style:italic; color:var(--text-mid); margin-bottom:0.65rem; font-size:0.9rem; }
.testimonial-dynamic .t-meta { display:flex; align-items:center; gap:0.6rem; }
.testimonial-dynamic .t-meta img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.testimonial-dynamic .t-name { font-weight:700; color:var(--steel); font-size:0.8rem; }
.testimonial-dynamic .t-loc  { color:var(--text-light); font-size:0.75rem; }

.testimonial-form-wrap {
  background: rgba(26,53,86,0.04);
  border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid rgba(160,82,45,0.12); margin-top: 1.5rem;
}

/* ── Chat Widget ────────────────────────────────────────────── */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 330px;
  max-height: 82vh;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(26,53,86,0.28);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(201,150,14,0.3);
}

.chat-widget.minimized {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
}

.chat-widget-toggle {
  display: none;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--copper), var(--steel));
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(26,53,86,0.35);
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  border: 2px solid var(--gold);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--gold-light);
  transition: var(--transition);
  z-index: 2;
}
.chat-widget-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(160,82,45,0.5);
}
.chat-widget.minimized .chat-widget-toggle { display: flex; }
.chat-widget.minimized .chat-widget-header,
.chat-widget.minimized .chat-widget-body { display: none; }

.chat-widget-header {
  background: linear-gradient(135deg, var(--steel), var(--copper-dark));
  color: #fff;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--gold);
}
.chat-widget-header img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold);
}
.chat-widget-header .name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold-light);
  margin-left: 0.5rem;
}

.chat-widget-body { padding: 1rem; display: flex; flex-direction: column; }

.chat-messages {
  max-height: 300px;
  overflow-y: auto;
  background: #f0ebe5;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(160,82,45,0.15);
  scroll-behavior: smooth;
}

.chat-message {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  word-break: break-word;
}
.chat-message.user {
  background: linear-gradient(135deg, rgba(201,150,14,0.15), rgba(201,150,14,0.25));
  border: 1px solid rgba(201,150,14,0.3);
  margin-left: 1.5rem;
  text-align: right;
}
.chat-message.ai {
  background: rgba(26,53,86,0.07);
  border: 1px solid rgba(26,53,86,0.12);
  margin-right: 1.5rem;
}

.chat-input-row { display: flex; gap: 0.5rem; }
.chat-input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid rgba(160,82,45,0.3);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  background: #fff;
  color: var(--text-dark);
  transition: var(--transition);
  outline: none;
}
.chat-input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(160,82,45,0.15); }

/* ── Notification Toast ─────────────────────────────────────── */
.notification {
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--bg-card);
  color: var(--text-dark);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  display: none;
  max-width: 380px;
  border-left: 5px solid var(--copper);
  transform: translateX(110%);
  opacity: 0;
  transition: var(--transition);
}
.notification.active {
  display: block;
  animation: slideInToast 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.notification.error   { border-left-color: var(--danger); }
.notification.warning { border-left-color: var(--gold); }
.notification.info    { border-left-color: var(--steel-mid); }
.notification.success { border-left-color: var(--success); }

@keyframes slideInToast {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(160deg, var(--steel) 0%, #0f2238 100%);
  color: rgba(255,255,255,0.8);
  padding: 3rem 1.5rem 2rem;
  margin-top: 2rem;
  border-top: 3px solid var(--gold);
  position: relative;
  z-index: 1;
}

.site-footer__inner { max-width: 1100px; margin: 0 auto; }

.footer-tagline {
  text-align: center;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-col h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-nav a,
.footer-nav button {
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  transition: var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
}
.footer-nav a:hover,
.footer-nav button:hover { color: var(--gold-light); transform: translateX(4px); }
.footer-nav a i, .footer-nav button i { color: var(--copper-light); width: 14px; flex-shrink: 0; }

.footer-bottom {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
}
.footer-bottom a { color: var(--gold); }
.footer-bottom a:hover { color: var(--gold-light); text-decoration: underline; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-mid);
  margin-bottom: 0.4rem;
}
.form-control {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(160,82,45,0.25);
  border-radius: var(--radius-sm);
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  background: #fff;
  color: var(--text-dark);
  transition: var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(160,82,45,0.15); }
.form-control::placeholder { color: rgba(138,110,94,0.5); }
.form-error { font-size: 0.8rem; color: var(--danger); margin-top: 0.3rem; display: none; }
.form-control.invalid + .form-error { display: block; }
.form-control.invalid { border-color: var(--danger); }

.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(160,82,45,0.25);
  border-radius: var(--radius-sm);
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 100px;
  color: var(--text-dark);
  background: #fff;
  transition: var(--transition);
  outline: none;
}
.form-textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(160,82,45,0.15); }
.form-textarea::placeholder { color: rgba(138,110,94,0.5); }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  vertical-align: middle;
}
.spinner--copper { border-color: rgba(160,82,45,0.3); border-top-color: var(--copper); }
.spinner--hidden { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Loading Skeleton ───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #e8ddd4 25%, #f5ede4 50%, #e8ddd4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Animations ─────────────────────────────────────────────── */
.fade-in { animation: fadeInUp 0.7s ease-out forwards; }
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.35s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-gold    { background: rgba(201,150,14,0.15); color: var(--gold);        border: 1px solid var(--gold); }
.badge-copper  { background: rgba(160,82,45,0.12);  color: var(--copper);      border: 1px solid var(--copper); }
.badge-steel   { background: rgba(26,53,86,0.1);    color: var(--steel-mid);   border: 1px solid var(--steel-mid); }
.badge-success { background: rgba(45,122,79,0.1);   color: var(--success);     border: 1px solid var(--success); }

/* ── Utility ────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.visible { display: block !important; }
.text-center { text-align: center; }
.text-copper { color: var(--copper); }
.text-gold   { color: var(--gold); }
.text-steel  { color: var(--steel); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.icon-gap { margin-right: 0.45rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Progressive Header Reduction
   ═══════════════════════════════════════════════════════════════ */

/* ── ≤1024px: hide low-priority items ───────────────────────── */
@media (max-width: 1024px) {
  .nav-priority-low { display: none !important; }
}

/* ── ≤768px: hide medium-priority items ─────────────────────── */
@media (max-width: 768px) {
  .nav-priority-med { display: none !important; }
  .site-nav { gap: 0.15rem; }
  .nav-link { font-size: 0.8rem; padding: 0.35rem 0.55rem; }
  .auth-btn { font-size: 0.78rem; padding: 0.35rem 0.7rem; }

  .hero { padding: 3rem 1rem; }
  .hero__actions { flex-direction: column; align-items: center; }
  .chat-widget { width: 92%; right: 4%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ≤600px: show hamburger, nav becomes drawer ─────────────── */
@media (max-width: 600px) {

  /* Hamburger: fluxo normal dentro do flex header */
  .hamburger-btn {
    display: flex;
  }

  /* Nav: painel lateral fixo */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--steel) 0%, #0f2238 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 0 0;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 40px rgba(0,0,0,0.4);
    will-change: transform;
  }

  .site-nav.nav-open {
    transform: translateX(0);
  }

  /* Restaurar TODOS os itens dentro do menu aberto */
  .site-nav.nav-open .nav-priority-low,
  .site-nav.nav-open .nav-priority-med {
    display: flex !important;
  }

  /* Counter badge no mobile */
  .site-nav .contador-badge {
    display: flex !important;
    margin: 0 1.25rem 0.5rem;
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
  }

  /* Nav links em largura total */
  .site-nav .nav-link {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .site-nav .nav-link:hover,
  .site-nav .nav-link.active {
    background: rgba(255,255,255,0.08);
    padding-left: 1.75rem;
  }

  /* Auth buttons no fundo do menu */
  .site-nav .auth-btn {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
  }

  /* Logo menor */
  .logo-wrap img { width: 34px; height: 34px; }
  .logo-wrap .site-name { font-size: 1.15rem; }

  /* Chat widget adaptado */
  .chat-widget {
    width: calc(100% - 1.5rem);
    right: 0.75rem;
    bottom: 12px;
    max-height: 70vh;
  }

  /* Stats strip 2x2 */
  .stats-strip__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .stat-item__number { font-size: 1.5rem; }
}

/* ── ≤480px: ajustes finais ──────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .logo-wrap .site-name { font-size: 1.05rem; }
  .logo-wrap img { width: 30px; height: 30px; }

  .social-links { gap: 0.4rem; }
  .social-link  { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

  .values-grid { grid-template-columns: 1fr; }
  .provinces-grid { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }

  .hero__quote { font-size: 0.88rem; }
  .btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }
}

/* ── Chat Typing Animation ──────────────────────────────────── */
@keyframes chatDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-5px); }
}

/* ── Chat Suggestions (usado por chat-ai.js) ────────────────── */
.chat-suggestion-btn:active {
  transform: scale(0.95);
}

/* ── Login Page Styles ──────────────────────────────────────── */
.auth-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--steel) 0%, var(--steel-mid) 100%);
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-image {
  flex: 1;
  text-align: center;
  padding: 2rem;
  color: #fff;
}

.auth-image .logo {
  width: 80px;
  height: 80px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: var(--steel);
}

.auth-image h2 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--gold-light);
}

.auth-image p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.auth-form {
  flex: 1;
  max-width: 400px;
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(160,82,45,0.2);
}

.auth-tab {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  background: transparent;
  border: none;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
}

.auth-tab.active {
  color: var(--copper);
  border-bottom: 2px solid var(--copper);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.user-type {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--copper);
}

.form-check-label {
  font-size: 0.9rem;
  color: var(--text-mid);
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group-text {
  background: rgba(160,82,45,0.1);
  border: 1.5px solid rgba(160,82,45,0.25);
  border-right: none;
  padding: 0.7rem 1rem;
  color: var(--copper);
  display: flex;
  align-items: center;
}

.form-control {
  border-left: none;
}

.password-toggle {
  background: rgba(160,82,45,0.1);
  border: 1.5px solid rgba(160,82,45,0.25);
  border-left: none;
  padding: 0.7rem 1rem;
  color: var(--copper);
  cursor: pointer;
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--copper);
  color: #fff;
}

.btn-primary:hover {
  background: var(--copper-dark);
}

.btn-outline-secondary {
  background: transparent;
  border: 1.5px solid rgba(160,82,45,0.25);
  color: var(--text-mid);
}

.btn-outline-secondary:hover {
  background: rgba(160,82,45,0.1);
}

.divider {
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(160,82,45,0.2);
}

.divider span {
  background: var(--bg-card);
  padding: 0 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: var(--transition);
}

.social-btn.google {
  background: #db4437;
  color: #fff;
}

.social-btn.facebook {
  background: #4267b2;
  color: #fff;
}

.social-btn.phone {
  background: var(--steel);
  color: #fff;
}

.social-btn:hover {
  transform: scale(1.1);
}

.alert {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.alert-danger {
  background: rgba(192,57,43,0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
}

.alert-success {
  background: rgba(45,122,79,0.1);
  border: 1px solid var(--success);
  color: var(--success);
}

.d-none {
  display: none;
}

.spinner-border {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-border-sm {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.text-center {
  text-align: center;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.text-decoration-none {
  text-decoration: none;
}

/* ── Bem-vindo Page Styles ──────────────────────────────────── */
.max-w-md { max-width: 28rem; }
.sm\:max-w-lg { max-width: 32rem; }
.md\:max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-6 { margin-top: 1.5rem; }
.sm\:mt-10 { margin-top: 2.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.section-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  margin-bottom: 2rem;
}

.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.mb-6 { margin-bottom: 1.5rem; }

.text-3xl { font-size: 1.875rem; }
.sm\:text-4xl { font-size: 2.25rem; }
.font-extrabold { font-weight: 800; }
.mb-4 { margin-bottom: 1rem; }

.text-yellow-600 { color: var(--gold); }

.icon-spacing { margin-right: 0.5rem; }

.text-lg { font-size: 1.125rem; }
.sm\:text-xl { font-size: 1.25rem; }

.transition-all { transition: all 0.15s ease; }
.duration-300 { transition-duration: 0.3s; }

.mt-8 { margin-top: 2rem; }

.font-semibold { font-weight: 600; }
.mb-4 { margin-bottom: 1rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.sm\:flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.sm\:space-y-0 > * + * { margin-top: 0; }
.sm\:space-x-4 > * + * { margin-left: 1rem; }

.text-decoration-none { text-decoration: none; }

/* ============================================================
   Shared HTML Compatibility Layer
   Covers Tailwind-like utility classes used by legacy pages.
   ============================================================ */

/* Layout primitives */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden, .hidden-toggle { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-1\/2 { top: 50%; }
.right-0 { right: 0; }
.right-3 { right: 0.75rem; }
.transform { transform: translateZ(0); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.object-cover { object-fit: cover; }
.min-h-screen { min-height: 100vh; }
[class~="min-h-[calc(100vh-120px)]"] { min-height: calc(100vh - 120px); }
.min-w-full { min-width: 100%; }
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-12 { width: 3rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-64 { width: 16rem; }
.w-1\/3 { width: 33.333333%; }
.h-4 { height: 1rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-48 { height: 12rem; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Sizing containers */
.max-w-md { max-width: 28rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-4 { padding-top: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pr-3 { padding-right: 0.75rem; }

/* Typography utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.hover\:underline:hover { text-decoration: underline; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }

/* Color utilities */
.bg-black { background-color: #000; }
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-800 { background-color: #1f2937; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-600 { background-color: #2563eb; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-600 { background-color: #dc2626; }
.bg-yellow-50 { background-color: #fffbeb; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-yellow-600 { background-color: #ca8a04; }
.bg-opacity-50 { --tw-bg-opacity: 0.5; opacity: 0.5; }
.text-white { color: #fff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-blue-600 { color: #2563eb; }
.text-blue-800 { color: #1e40af; }
.text-green-600 { color: #16a34a; }
.text-pink-600 { color: #db2777; }
.text-purple-600 { color: #9333ea; }
.text-red-300 { color: #fca5a5; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-yellow-500 { color: #eab308; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-gray-400:hover { background-color: #9ca3af; }
.hover\:bg-gray-700:hover { background-color: #374151; }
.hover\:bg-green-600:hover { background-color: #16a34a; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-red-100:hover { background-color: #fee2e2; }
.hover\:bg-red-600:hover { background-color: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-yellow-700:hover { background-color: #a16207; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:text-gray-200:hover { color: #e5e7eb; }
.hover\:text-gray-800:hover { color: #1f2937; }
.hover\:text-green-800:hover { color: #166534; }
.hover\:text-pink-800:hover { color: #9d174d; }
.hover\:text-red-800:hover { color: #991b1b; }
.hover\:text-white:hover { color: #fff; }
.hover\:text-yellow-700:hover { color: #a16207; }
.hover\:text-yellow-800:hover { color: #854d0e; }

/* Borders, radius and shadows */
.border { border: 1px solid #e5e7eb; }
.border-4 { border-width: 4px; }
.border-b { border-bottom: 1px solid #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.border-blue-200 { border-color: #bfdbfe; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-yellow-500 { border-color: #eab308; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.shadow { box-shadow: 0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.08); }
.shadow-md { box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.shadow-lg { box-shadow: 0 10px 25px rgba(15,23,42,0.14); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(15,23,42,0.22); }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-all { transition: all 0.2s ease; }
.duration-300 { transition-duration: 0.3s; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(202,138,4,0.25); outline: none; }
.focus\:ring-yellow-500:focus { box-shadow: 0 0 0 3px rgba(234,179,8,0.28); }
.focus\:ring-green-500:focus { box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.focus\:ring-red-500:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
.focus\:border-transparent:focus { border-color: transparent; }

/* Shared form helpers used by older pages */
.input-field,
.form-input {
  width: 100%;
  padding: 0.78rem 1rem;
  border: 1.5px solid rgba(160,82,45,0.25);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-dark);
  font: inherit;
  transition: var(--transition);
}
.input-field:focus,
.form-input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(160,82,45,0.14);
  outline: none;
}
.form-input--error { border-color: var(--danger); }
.btn-full { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #9f2f24; color: #fff; }
.btn-secondary { background: #e5e7eb; color: var(--steel); }
.btn-secondary:hover { background: #d1d5db; color: var(--steel); }
.btn-google { background: #fff; color: #374151; border: 1.5px solid #d1d5db; }
.btn-google:hover { background: #f9fafb; color: #111827; }

/* Login/auth layout used by login.html */
.auth-main {
  min-height: calc(100vh - 180px);
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(201,150,14,0.16), transparent 32%),
    linear-gradient(135deg, #f8efe4 0%, #eaf1f8 100%);
}
.auth-main .auth-container {
  max-width: 1120px;
  min-height: auto;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1fr) minmax(240px, 0.9fr);
  gap: 1.5rem;
  align-items: stretch;
}
.auth-logo,
.auth-form-container,
.auth-features {
  background: rgba(255,253,249,0.92);
  border: 1px solid rgba(160,82,45,0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}
.auth-logo { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-logo__img { width: 88px; height: 88px; object-fit: contain; margin-bottom: 1rem; }
.auth-logo__title { color: var(--steel); font-size: 1.65rem; }
.auth-logo__subtitle,
.auth-form__subtitle,
.auth-feature__desc { color: var(--text-light); }
.auth-form-container .auth-form { max-width: none; box-shadow: none; padding: 0; background: transparent; }
.auth-form__title { font-size: 1.65rem; margin-bottom: 0.25rem; }
.auth-form__subtitle { margin-bottom: 1.5rem; }
.password-input-wrapper { position: relative; display: flex; align-items: stretch; }
.password-input-wrapper .form-input { padding-right: 3.25rem; }
.password-input-wrapper .password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--copper);
}
.auth-form__options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.25rem; }
.auth-form__link,
.footer-link { color: var(--copper); font-weight: 700; }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-mid); cursor: pointer; }
.checkbox-input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-custom { width: 18px; height: 18px; border: 2px solid rgba(160,82,45,0.35); border-radius: 5px; display: inline-block; position: relative; }
.checkbox-input:checked + .checkbox-custom { background: var(--copper); border-color: var(--copper); }
.checkbox-input:checked + .checkbox-custom::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-light); }
.auth-divider::before,
.auth-divider::after { content: ''; height: 1px; background: rgba(160,82,45,0.16); flex: 1; }
.social-login__btn { width: 100%; }
.auth-features__title { font-size: 1.15rem; margin-bottom: 1rem; }
.auth-features__list { display: grid; gap: 1rem; }
.auth-feature { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.9rem; border-radius: var(--radius); background: rgba(26,53,86,0.04); }
.auth-feature__icon { color: var(--gold); font-size: 1.2rem; margin-top: 0.1rem; }
.auth-feature__title { font-size: 0.95rem; margin-bottom: 0.2rem; }
.site-footer--minimal { margin-top: 0; padding: 1.25rem; }
.site-footer--minimal .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-links,
.footer-bottom-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Modals and accordions shared across pages */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15,23,42,0.58);
  padding: 1rem;
  overflow-y: auto;
}
.modal.active,
.modal.show { display: flex; align-items: center; justify-content: center; }
.modal-content {
  width: min(100%, 42rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
}
.close { cursor: pointer; color: var(--text-light); font-size: 1.5rem; line-height: 1; }
.accordion { border: 1px solid rgba(160,82,45,0.12); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
.accordion-content { display: none; padding: 1rem; color: var(--text-mid); border-top: 1px solid rgba(160,82,45,0.12); }
.accordion.active .accordion-content,
.accordion-content.active { display: block; }

/* Listing cards, dashboard and misc page components */
.filter-container,
.form-card,
.preview-card,
.service-card,
.worker-card,
.publicacao,
.empty-state,
.loading-state,
.settings-section,
.table-container {
  background: var(--bg-card);
  border: 1px solid rgba(160,82,45,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.service-header,
.service-meta,
.service-actions,
.setting-item,
.user-avatar,
.user-profile { display: flex; gap: 1rem; align-items: center; }
.service-header,
.setting-item { justify-content: space-between; }
.service-content { display: grid; gap: 0.7rem; }
.service-title { font-size: 1.05rem; font-weight: 700; color: var(--steel); }
.service-description,
.service-location,
.service-meta,
.setting-info { color: var(--text-mid); }
.service-price { color: var(--success); font-weight: 800; }
.service-category { color: var(--copper); font-weight: 700; }
.service-rating { color: var(--gold); }
.messages-list { display: grid; gap: 0.75rem; }
.photo-preview,
.logo-preview,
.empresa-logo { max-width: 120px; max-height: 120px; object-fit: cover; border-radius: var(--radius); display: block; margin-top: 0.75rem; }
.user-profile { align-items: flex-start; margin-bottom: 1.5rem; }
.user-avatar { align-items: center; }
.user-info { display: grid; gap: 0.3rem; }
.user-stats { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-mid); font-size: 0.9rem; }
.tabs-container { margin-top: 1.5rem; }
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid rgba(160,82,45,0.14); margin-bottom: 1rem; }
.tab-btn { border: 0; background: transparent; padding: 0.75rem 1rem; cursor: pointer; color: var(--text-mid); border-bottom: 3px solid transparent; font-weight: 700; }
.tab-btn.active { color: var(--copper); border-bottom-color: var(--copper); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; border-radius: 999px; transition: var(--transition); }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); }
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.whatsapp-btn { background: #25d366; color: #fff; border-radius: var(--radius); padding: 0.75rem 1rem; display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 800; }
.copy-success { color: var(--success); font-weight: 700; }
.banner { border-radius: var(--radius); padding: 1rem; background: linear-gradient(135deg, var(--steel), var(--steel-mid)); color: #fff; }
.pagination-btn { min-width: 2.25rem; min-height: 2.25rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: var(--steel); cursor: pointer; }
.pagination-btn.active,
.pagination-btn:hover { background: var(--gold); color: var(--steel); border-color: var(--gold); }
.verification-badge { display: inline-flex; align-items: center; margin-left: 0.35rem; }
.testimonial-date { color: var(--text-light); font-size: 0.78rem; margin-top: 0.35rem; }

/* Screenshot page fallback styles in case inline styles are stripped */
.screenshot-container,
.screenshot-mobile { overflow: hidden; position: relative; background: linear-gradient(135deg, var(--gold), var(--steel)); }
.capture-controls { position: fixed; top: 20px; right: 20px; z-index: 1000; background: #fff; padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.capture-btn { padding: 0.55rem 1rem; border: 0; border-radius: 0.4rem; cursor: pointer; font-weight: 700; margin: 0.3rem; }
.capture-desktop,
.screenshot-btn-primary { background: var(--gold); color: #fff; }
.capture-mobile,
.screenshot-btn-secondary { background: var(--steel); color: #fff; }
.screenshot-buttons,
.screenshot-stats,
.screenshot-nav,
.screenshot-logo { display: flex; gap: 1rem; align-items: center; }
.screenshot-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.screenshot-feature,
.screenshot-stat { text-align: center; color: #fff; }
.screenshot-stat-number { display: block; font-size: 2rem; font-weight: 800; }
.screenshot-stat-label { opacity: 0.8; }

@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:justify-center { justify-content: center; }
  .sm\:gap-8 { gap: 2rem; }
  .sm\:max-w-lg { max-width: 32rem; }
  .sm\:mt-10 { margin-top: 2.5rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:space-y-0 > * + * { margin-top: 0; }
  .sm\:space-x-4 > * + * { margin-left: 1rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:hidden { display: none !important; }
  .md\:flex-row { flex-direction: row; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:max-w-2xl { max-width: 42rem; }
  .md\:max-w-4xl { max-width: 56rem; }
}

@media (max-width: 900px) {
  .auth-main .auth-container { grid-template-columns: 1fr; }
  .auth-logo,
  .auth-features { padding: 1.4rem; }
  .auth-form__options { flex-direction: column; align-items: flex-start; }
  .site-footer--minimal .site-footer__inner { justify-content: center; text-align: center; }
  .user-profile,
  .user-avatar,
  .service-header,
  .setting-item { align-items: flex-start; flex-direction: column; }
}

/* Remaining shared page shells */
.sidebar {
  width: 16rem;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--steel), #0f2238);
  color: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-md);
}
.main-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}
.auth-form__submit { margin-top: 0.5rem; }
.chat-widget.minimized .chat-widget-header,
.chat-widget.minimized .chat-widget-body { display: none; }
.chat-widget.minimized { width: auto; height: auto; }
.stat-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.screenshot-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: rgba(26,53,86,0.95); color: #fff; }
.screenshot-hero { padding: 3rem 2rem; text-align: center; color: #fff; }
.screenshot-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; text-align: center; background: rgba(26,53,86,0.95); color: #fff; }

@media (max-width: 768px) {
  .sidebar { width: 100%; min-height: auto; }
  .main-content { padding: 1rem; }
}

/* ============================================================
   Login Refresh
   ============================================================ */
.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 12%, rgba(232,184,50,0.28), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(74,128,180,0.22), transparent 24rem),
    linear-gradient(145deg, #f7eadc 0%, #edf4f8 45%, #fdfaf5 100%);
}

.login-page .auth-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4.5rem) 1rem;
}

.login-page .auth-main::before,
.login-page .auth-main::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.login-page .auth-main::before {
  width: 26rem;
  height: 26rem;
  left: -9rem;
  top: 4rem;
  background: rgba(160,82,45,0.13);
  filter: blur(2px);
}

.login-page .auth-main::after {
  width: 18rem;
  height: 18rem;
  right: -5rem;
  bottom: -4rem;
  background: rgba(26,53,86,0.12);
}

.login-page .auth-main .auth-container {
  max-width: 1160px;
  grid-template-columns: minmax(260px, 0.95fr) minmax(340px, 1.05fr) minmax(260px, 0.95fr);
  gap: 1.1rem;
}

.login-page .auth-logo,
.login-page .auth-form-container,
.login-page .auth-features {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.58);
  background: rgba(255,253,249,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.login-page .auth-logo {
  align-items: flex-start;
  text-align: left;
  background:
    linear-gradient(160deg, rgba(26,53,86,0.94), rgba(26,53,86,0.86)),
    url('/assets/images/angola_hero.jpg') center/cover no-repeat;
  color: #fff;
  min-height: 28rem;
}

.login-page .auth-logo::after {
  content: '';
  position: absolute;
  inset: auto -20% -25% 10%;
  height: 10rem;
  background: radial-gradient(circle, rgba(232,184,50,0.36), transparent 62%);
}

.auth-kicker,
.auth-form__eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-kicker {
  color: var(--gold-light);
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(232,184,50,0.42);
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.25rem;
}

.login-page .auth-logo__img {
  width: 76px;
  height: 76px;
  margin: 0 0 1.25rem;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.28));
}

.login-page .auth-logo__title {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.05;
  max-width: 11ch;
  margin-bottom: 0.85rem;
}

.login-page .auth-logo__subtitle {
  color: rgba(255,255,255,0.78);
  max-width: 24rem;
  font-size: 1rem;
}

.auth-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.75rem;
}

.auth-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.login-page .auth-form-container {
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.auth-form__eyebrow {
  color: var(--copper);
  background: rgba(160,82,45,0.1);
  padding: 0.28rem 0.65rem;
  margin-bottom: 0.85rem;
}

.login-page .auth-form__title {
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  color: var(--steel);
}

.login-page .form-group { margin-bottom: 1.1rem; }
.login-page .form-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--steel);
}

.login-page .form-input {
  min-height: 3.1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.92);
  border-color: rgba(26,53,86,0.14);
}

.login-page .form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,150,14,0.16);
}

.login-page .password-toggle {
  width: 3.25rem;
  border-radius: 0 1rem 1rem 0;
}

.login-page .auth-form__options {
  margin: 0.9rem 0 1.15rem;
}

.login-page .auth-form__submit {
  min-height: 3.15rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--copper-light));
  color: #1b2534;
  box-shadow: 0 16px 32px rgba(160,82,45,0.22);
}

.login-page .btn--loading {
  cursor: wait;
  opacity: 0.82;
}

.login-page .btn--loading .spinner { display: inline-block; }
.login-page .btn--loading .btn-label { opacity: 0.75; }

.login-page .btn-google {
  min-height: 3rem;
  border-radius: 1rem;
  border-color: rgba(26,53,86,0.12);
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}

.auth-signup-note {
  color: var(--text-mid);
  text-align: center;
  font-size: 0.92rem;
  margin-top: 1.35rem;
}

.auth-signup-note a {
  color: var(--copper);
  font-weight: 800;
}

.login-page .auth-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-page .auth-features__title {
  color: var(--steel);
  font-size: 1.35rem;
}

.login-page .auth-feature {
  border: 1px solid rgba(26,53,86,0.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(245,237,228,0.72));
}

.login-page .auth-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.85rem;
  background: rgba(201,150,14,0.14);
  color: var(--copper);
  flex: 0 0 auto;
}

.login-page .notification {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1400;
  display: none;
  align-items: center;
  gap: 0.65rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  background: var(--steel);
  color: #fff;
}

.login-page .notification--success { background: var(--success); }
.login-page .notification--error { background: var(--danger); }
.login-page .notification[style*="block"] { display: flex !important; }

@media (max-width: 900px) {
  .login-page .auth-main .auth-container { grid-template-columns: 1fr; }
  .login-page .auth-logo { min-height: auto; }
  .login-page .auth-logo__title { max-width: none; }
  .auth-trust-row { margin-top: 1.1rem; }
}

@media (max-width: 520px) {
  .login-page .auth-main { padding: 1.25rem 0.85rem; }
  .login-page .auth-logo,
  .login-page .auth-form-container,
  .login-page .auth-features { border-radius: 1.1rem; padding: 1.25rem; }
  .login-page .auth-form__options { align-items: stretch; gap: 0.65rem; }
}

/* ============================================================
   Legacy Page Polish
   Gives non-index content pages the same card depth and motion.
   ============================================================ */
body:not(.login-page) {
  background:
    radial-gradient(circle at 8% 5%, rgba(201,150,14,0.12), transparent 18rem),
    radial-gradient(circle at 96% 12%, rgba(74,128,180,0.10), transparent 20rem),
    linear-gradient(180deg, #f7efe6 0%, var(--bg-base) 42%, #f9f4ee 100%);
}

body:not(.login-page) > main,
body:not(.login-page) > section[class*="max-w-"] {
  width: min(100% - 2rem, 1120px);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

body:not(.login-page) > main.max-w-md,
body:not(.login-page) > section.max-w-md,
body:not(.login-page) > section.max-w-4xl,
body:not(.login-page) > main.max-w-4xl,
body:not(.login-page) > section.max-w-5xl,
body:not(.login-page) > main.max-w-5xl,
body:not(.login-page) > section.max-w-6xl,
body:not(.login-page) > main.max-w-6xl {
  max-width: 1120px;
}

body:not(.login-page) main > section > h1,
body:not(.login-page) main > section > h2,
body:not(.login-page) main > section > h3,
body:not(.login-page) > section > h1,
body:not(.login-page) > section > h2,
body:not(.login-page) > section > h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  max-width: 100%;
  margin-bottom: 1.35rem;
  padding-bottom: 0.55rem;
  color: var(--steel);
}

body:not(.login-page) main > section > h1::after,
body:not(.login-page) main > section > h2::after,
body:not(.login-page) main > section > h3::after,
body:not(.login-page) > section > h1::after,
body:not(.login-page) > section > h2::after,
body:not(.login-page) > section > h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 11rem);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--copper), transparent);
}

body:not(.login-page) .section-card,
body:not(.login-page) .form-card,
body:not(.login-page) .preview-card,
body:not(.login-page) .filter-container,
body:not(.login-page) .table-container,
body:not(.login-page) .bg-white.rounded-lg,
body:not(.login-page) .bg-white.rounded-xl,
body:not(.login-page) .bg-white.shadow,
body:not(.login-page) .bg-white.shadow-md,
body:not(.login-page) .bg-white.shadow-lg {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,253,249,0.98), rgba(255,250,243,0.95));
  border: 1px solid rgba(160,82,45,0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(26,53,86,0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

body:not(.login-page) .section-card::before,
body:not(.login-page) .form-card::before,
body:not(.login-page) .preview-card::before,
body:not(.login-page) .bg-white.rounded-lg::before,
body:not(.login-page) .bg-white.rounded-xl::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--copper), var(--gold), var(--steel-light));
  opacity: 0.95;
}

body:not(.login-page) .section-card:hover,
body:not(.login-page) .form-card:hover,
body:not(.login-page) .preview-card:hover,
body:not(.login-page) .bg-white.rounded-lg:hover,
body:not(.login-page) .bg-white.rounded-xl:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(26,53,86,0.15);
  border-color: rgba(160,82,45,0.24);
}

body:not(.login-page) .filter-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: rgba(26,53,86,0.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

body:not(.login-page) .bg-blue-50.border-b,
body:not(.login-page) .security-banner + .bg-blue-50,
body:not(.login-page) header + .bg-blue-50 {
  background: linear-gradient(90deg, rgba(26,53,86,0.96), rgba(43,81,128,0.94));
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(201,150,14,0.35);
  box-shadow: 0 8px 22px rgba(26,53,86,0.16);
}

body:not(.login-page) .bg-blue-50.border-b .text-blue-800,
body:not(.login-page) header + .bg-blue-50 .text-blue-800 {
  color: rgba(255,255,255,0.9);
}

body:not(.login-page) .bg-blue-50 i,
body:not(.login-page) .bg-blue-50 span:first-child,
body:not(.login-page) header + .bg-blue-50 i {
  color: var(--gold-light);
}

body:not(.login-page) label {
  color: var(--steel);
}

body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea,
body:not(.login-page) .input-field {
  min-height: 3rem;
  border-radius: 0.9rem;
  border-color: rgba(26,53,86,0.14);
  background: rgba(255,255,255,0.96);
}

body:not(.login-page) input:focus,
body:not(.login-page) select:focus,
body:not(.login-page) textarea:focus,
body:not(.login-page) .input-field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,150,14,0.15);
}

body:not(.login-page) .btn-primary,
body:not(.login-page) button.bg-yellow-600,
body:not(.login-page) a.bg-yellow-600,
body:not(.login-page) button.bg-green-600,
body:not(.login-page) a.bg-green-600,
body:not(.login-page) button.bg-blue-600,
body:not(.login-page) a.bg-blue-600 {
  border: 0;
  box-shadow: 0 10px 22px rgba(160,82,45,0.18);
  font-weight: 800;
}

body:not(.login-page) .publicacao,
body:not(.login-page) .worker-card,
body:not(.login-page) .service-card,
body:not(.login-page) .empresa-card,
body:not(.login-page) #painel-servicos > *,
body:not(.login-page) #painel-garimpeiros > *,
body:not(.login-page) #painel-empresas > * {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(160,82,45,0.12);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

body:not(.login-page) .publicacao:hover,
body:not(.login-page) .worker-card:hover,
body:not(.login-page) .service-card:hover,
body:not(.login-page) .empresa-card:hover,
body:not(.login-page) #painel-servicos > *:hover,
body:not(.login-page) #painel-garimpeiros > *:hover,
body:not(.login-page) #painel-empresas > *:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

body:not(.login-page) #painel-servicos > .spinner,
body:not(.login-page) #painel-garimpeiros > .spinner,
body:not(.login-page) #painel-empresas > .spinner {
  justify-self: center;
  box-shadow: none;
  border-radius: 50%;
  background: transparent;
}

#map {
  width: 100%;
  min-height: 360px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26,53,86,0.12);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

body:not(.login-page) .text-center.py-8,
body:not(.login-page) .empty-state,
body:not(.login-page) .loading-state {
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.62);
  border: 1px dashed rgba(160,82,45,0.24);
}

body:not(.login-page) .notification {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1400;
  border-radius: var(--radius);
  background: var(--steel);
  color: #fff;
  box-shadow: var(--shadow-lg);
  padding: 1rem;
}

body:not(.login-page) .notification.success,
body:not(.login-page) .notification--success { background: var(--success); }
body:not(.login-page) .notification.error,
body:not(.login-page) .notification--error { background: var(--danger); }

@media (max-width: 720px) {
  body:not(.login-page) > main,
  body:not(.login-page) > section[class*="max-w-"] {
    width: min(100% - 1rem, 1120px);
    padding-top: 1.1rem;
  }

  body:not(.login-page) .section-card,
  body:not(.login-page) .form-card,
  body:not(.login-page) .preview-card,
  body:not(.login-page) .bg-white.rounded-lg,
  body:not(.login-page) .bg-white.rounded-xl {
    border-radius: 1rem;
    padding: 1rem;
  }

  body:not(.login-page) .flex.justify-between,
  body:not(.login-page) .flex.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
}