:root {
  --color_primario: #F9FAFB;
  --color_secundario: #5659A3;
  --color_secundario_suave: #7679BF;
  --color_terciario: #2563EB;
  --color_terciario_suave: #1b6786;
  --color_azul_suave: rgba(77, 131, 152, 0.16);
  --color_fondo_gris: #F2F2F2;
  --texto_oscuro: #333333;
  --Montserrat: 'Montserrat', sans-serif;
  --Anton: 'Anton', sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--Montserrat);
  color: var(--texto_oscuro);
  background-color: var(--color_primario);
}

.font-anton {
  font-family: var(--Anton);
  letter-spacing: 0.01em;
}

/* Fondo con degradado suave entre secundario y terciario, usado en banners y CTAs */
.bg-gradiente-marca {
  background: linear-gradient(135deg, var(--color_secundario) 0%, var(--color_terciario) 100%);
}

/* Manchas decorativas detrás del hero, con el azul suave de marca */
.blob-decorativo {
  background: var(--color_azul_suave);
  filter: blur(60px);
}

/* Insignia circular giratoria (como la del template de referencia) */
.badge-giratoria {
  animation: girar 18s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color_fondo_gris);
}
::-webkit-scrollbar-thumb {
  background: var(--color_secundario_suave);
  border-radius: 999px;
}

/* Menú móvil */
#menu-movil {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#menu-movil.abierto {
  max-height: 480px;
}

/* Acordeón de preguntas frecuentes */
[data-acordeon-panel] {
  max-height: 0;
  transition: max-height 0.35s ease;
}

/* Header: transparente en la parte superior, blanco al hacer scroll */
header[data-header-fase="top"] {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

header[data-header-fase="scroll"] {
  background-color: var(--color_primario);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Solo en la portada (hero oscuro): texto e icono claros mientras el header es transparente */
header[data-header-hero="true"][data-header-fase="top"] .enlace-nav-header {
  color: rgba(255, 255, 255, 0.9);
}
header[data-header-hero="true"][data-header-fase="top"] .enlace-nav-header:hover {
  color: #ffffff;
}
header[data-header-hero="true"][data-header-fase="top"] #boton-menu-movil {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}