/* ============================================
   GEP - Gestión de Emprendimientos Productivos
   Paleta: Brand & Accent
   ============================================ */

:root {
  --gep-bg-base:         #F5F5F4;
  --gep-bg-section:      #E2E2DF;
  --gep-bg-card:         #ffffff;
  --gep-border:          rgba(45, 45, 43, 0.15);
  --gep-border-accent:   rgba(45, 45, 43, 0.35);
  --gep-brand:           #00C87A;
  --gep-accent:          #C8007A;
  --gep-text:            #2D2D2B;
  --gep-text-muted:      #888884;
}

/* Fuente base */
body, .button.is-primary,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* ── Fondo global ───────────────────────────── */

body {
  background-color: var(--gep-bg-base) !important;
  color: var(--gep-text-muted);
}

/* ── Navbar ─────────────────────────────────── */

/* Glassmorphism con temperatura verde */
.glass {
  background: rgba(248, 248, 248, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Borde inferior del navbar */
#navbar {
  border-bottom-color: var(--gep-border) !important;
}

/* Navbar: transición de aparición al scroll */
.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* El navbar siempre visible (pisa nav-hidden) */
#navbar {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.nav-visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ── Hero ────────────────────────────────────── */

/* Fondo del hero: imagen responsive */
#hero {
  background-image: url('../img/hero1.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Panel de funcionalidades en el hero */
#hero .grid.grid-cols-3 {
  background-color: rgba(240, 237, 241, 0.85) !important;
  border-color: var(--gep-border) !important;
}

/* Íconos del hero: fondo y color */
#hero .bg-brand-500\/20 {
  background-color: color-mix(in srgb, var(--gep-brand) 20%, transparent) !important;
}
#hero .text-brand-500 {
  color: var(--gep-brand) !important;
}

/* Ancho de la columna izquierda del hero */
#hero div.max-w-2xl {
  max-width: 48rem !important;
}

/* Sombra en textos del hero */
#hero div.max-w-2xl h2,
#hero div.max-w-2xl h1 {
  text-shadow: 1px 1px 7px black;
}

/* h2 del hero en blanco */
#hero div.max-w-2xl h2 {
  color: #ffffff !important;
}

@media (min-width: 1024px) {
  #hero div.max-w-2xl h2 {
    white-space: nowrap !important;
  }
}

/* Spans del hero: "Gestión de" blanco, texto rotativo warm */
#hero div.max-w-2xl h1 span:first-child {
  color: #ffffff !important;
}

#hero div.max-w-2xl h1 #rotating-text {
  color: #22eea2 !important;
}

/* Oculta el logo GEP del hero */
#hero img[alt="GEP"] {
  display: none !important;
}

/* ── Secciones generales ─────────────────────── */

/* Fondo base */
.bg-neutral-50 {
  background-color: var(--gep-bg-base) !important;
}

/* Fondo sección alterna */
.bg-neutral-100 {
  background-color: var(--gep-bg-section) !important;
}

/* ── Cards ───────────────────────────────────── */

/* Cards del grid de soluciones */
.bg-white.backdrop-blur-sm {
  background-color: var(--gep-bg-card) !important;
  border-color: var(--gep-border) !important;
  transition: border-color 0.2s ease;
}

.bg-white.backdrop-blur-sm:hover {
  border-color: var(--gep-border-accent) !important;
}

/* Cards de planes */
.bg-neutral-100.border {
  background-color: var(--gep-bg-section) !important;
}

.bg-neutral-100.border:hover {
  border-color: var(--gep-accent) !important;
}

/* ── Footer ──────────────────────────────────── */

footer#contacto {
  background-color: #111110 !important;
}

footer#contacto .border-t {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

footer#contacto,
footer#contacto * {
  color: #ffffff !important;
}