/*
  styles.css
  Estilos Globales para el sitio web de Cultura Fit Runners
  Versión: 2.0 (Estilo Reforzado)
*/

/* 1. Variables de la Marca */
:root {
    --brand-red: #d92323;
    --brand-red-darker: #b91c1c;
    --brand-dark: #1a202c;
    --brand-gray: #4a5568;
    --background-light: #f7fafc;
}

/* 2. Estilos Base y Tipografía */
body {
    font-family: "Inter", sans-serif;
    color: var(--brand-dark);
    background-color: var(--background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-oswald {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-red); /* Títulos ahora son rojos por defecto */
}

/* 3. Sección Hero con Efecto Parallax */
.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=2070&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-bg h1 {
    color: var(--brand-red);
}

/* 4. Botones de Llamada a la Acción (CTA) */
.cta-button {
    background-color: var(--brand-red);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 14px 0 rgba(217, 35, 35, 0.39);
}

.cta-button:hover {
    background-color: var(--brand-red-darker);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px 0 rgba(217, 35, 35, 0.55);
}

/* 5. Navegación y Encabezado */
.header-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.nav-link {
    position: relative;
    transition: color 0.3s;
    padding-bottom: 8px;
    color: var(--brand-dark);
}

.nav-link:hover {
    color: var(--brand-red);
}

.nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-red);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

.nav-link.active {
    color: var(--brand-red);
}

.header-logo img {
    height: 50px;
    width: auto;
}

/* Estilos para el Menú Desplegable */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu a {
    color: var(--brand-dark);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding: 0.75rem 1.25rem; /* Aumentar padding para mejor toque */
    font-weight: 500;
    text-transform: uppercase;
}

.dropdown-menu a:hover,
#mobile-menu .pl-4 a:hover {
    color: var(--brand-red);
    background-color: rgba(221, 221, 221, 0.2);
}

/* 6. Cabeceras de Página Interiores */
.page-header {
    background-color: var(--brand-red);
    color: white;
}
.page-header h1 {
    color: white;
}
.page-header p {
    color: var(--brand-red-100, #fee2e2);
}

/* 7. Footer Reforzado */
.footer-red {
    background-color: var(--brand-red-darker);
    color: white;
}
.footer-red h4 {
    color: white;
}
.footer-red p,
.footer-red ul li a {
    color: var(--brand-red-100, #fee2e2);
}
.footer-red a:hover {
    color: white;
}
.footer-red .footer-copyright {
    color: var(--brand-red-200, #fecaca);
    border-color: var(--brand-red);
}