/* Layout helpers */
.section{ padding: 64px 0; }
.hero{ padding: 72px 0; background: linear-gradient(180deg, var(--brand-soft), #fff); }
.text-muted{ color: var(--brand-muted) !important; }

/* Brand elements */
.text-brand{ color: var(--brand-primary) !important; }
.text-brand-2{ color: var(--brand-secondary) !important; }
.border-soft{ border: 1px solid var(--brand-border); }

/* Buttons */
.btn-brand{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #072b27;
  font-weight: 600;
}
.btn-brand:hover{
  filter: brightness(0.96);
  color: #072b27;
}

.btn-brand-outline{
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-secondary);
  font-weight: 600;
}
.btn-brand-outline:hover{
  background: var(--brand-soft);
}

/* Cards a lo “premium light” */
.card{
  border: 1px solid var(--brand-border);
  border-radius: 16px;
}
.card.shadow-soft{
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

/* Navbar small tweaks */
.navbar{
  border-bottom: 1px solid var(--brand-border);
}
.navbar-brand small{
  color: var(--brand-muted);
}

/* Link style */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.link-brand{ color: var(--brand-secondary); }
.link-brand:hover{ color: var(--brand-secondary); }

/* -------------------------------------------------------
   HERO background with fade + overlay
------------------------------------------------------- */
.hero-bg{
  position: relative;
  overflow: hidden;
}

/* Background image layer (fade) */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 1400ms ease-in-out;
  transform: scale(1.02);
}
.hero-bg.is-fading::before{ opacity: 0; }

/* Dark overlay for contrast */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, var(--hero-overlay, 0.58)); /* 0.45–0.65 */
}

/* Ensure content stays above layers */
.hero-bg > .container{
  position: relative;
  z-index: 1;
}

/* Left column text in white (only) */
.hero-copy,
.hero-copy h1,
.hero-copy p,
.hero-copy .lead{
  color: #fff !important;
}
.hero-copy .text-muted{
  color: rgba(255,255,255,0.86) !important;
}

/* Right card “premium” look (not sticky/pegote) */
.hero-bg .card.hero-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
}

/* Keep muted text inside cards normal */
.hero-bg .card .text-muted{
  color: var(--brand-muted) !important;
}

/* Outline button visible on dark hero */
.hero-copy .btn-brand-outline{
  border-color: rgba(255,255,255,0.9);
  color: #fff;
}
.hero-copy .btn-brand-outline:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.95);
  color: #fff;
  text-decoration: none;
}

/* Hero right card: less radius + slightly more transparent */
.hero-bg .card.hero-card{
  border-radius: 5px;                 /* menos curvatura (antes 16px) */
  background: rgba(255,255,255,0.58);  /* un poco más de opacity */
  border: 1px solid rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
}

.hero-bg .card.hero-card.shadow-soft{
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}