/* APRENDIZAJE: Variables CSS. Si mañana quieres cambiar el tono de verde o azul en toda la web, solo lo cambias aquí */
:root {
    --color-primario: #0d6efd;      /* Azul agua */
    --color-secundario: #198754;    /* Verde vegetación */
    --color-oscuro: #132a3a;        /* Azul profundo para el menú */
    --fondo-claro: #f4f8f9;         /* Gris-azulado muy suave */
}

/* APRENDIZAJE: scroll-behavior hace que al dar clic en el menú, la página se deslice suavemente.
   scroll-padding-top evita que la barra fija tape el título de la sección al llegar. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: #ffffff;
    color: #2b3035;
}

.custom-navbar {
    background-color: var(--color-oscuro);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.hero-section {
    min-height: 100vh; /* Ocupa toda la altura visible de la pantalla */
    padding-top: 90px; /* Espacio para que el navbar fijo no tape el inicio */
    padding-bottom: 40px;
    background: linear-gradient(135deg, #e8f4f8 0%, #eef7f2 100%);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

/* Utilidad para centrar encabezados sin que se estiren demasiado en monitores grandes */
.max-w-700 {
    max-width: 700px;
}

/* APRENDIZAJE: transition suaviza el movimiento de la barra cuando JavaScript cambia su ancho */
.progress-bar {
    transition: width 0.5s ease-in-out, background-color 0.4s ease;
}

/* ESTILOS DEL DIAGRAMA SVG INTERACTIVO */
.hotspot {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hotspot:hover {
    transform: scale(1.15);
}

/* APRENDIZAJE: Animación @keyframes crea un anillo pulsante que invita al usuario a tocar el punto en móvil */
.hotspot-pulse {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.hotspot.active .hotspot-pulse {
    animation: pulsoPin 1.8s infinite ease-out;
}

.hotspot.active .hotspot-bg {
    stroke: #facc15; /* Aro dorado cuando está seleccionado */
    stroke-width: 3.5px;
}

@keyframes pulsoPin {
    0% {
        transform: scale(0.8);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}