/* Importación de una fuente similar a Gotham si no la tienes local (Montserrat es una excelente alternativa gratuita de Google Fonts que da ese aspecto geométrico) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

:root {
    --aoc-orange: #ff6b00; /* Ajusta este hex con tu tono exacto */
    --aoc-blue: #0088cc;   /* Ajusta al azul claro */
    --aoc-green: #2ecc71;  /* Ajusta al verde selva */
    --font-main: 'Montserrat', sans-serif; /* Reemplazar por 'Gotham' si la cargas localmente */
}

body {
    font-family: var(--font-main);
    color: #333;
}

h1, h2, h3, .navbar-brand {
    font-weight: 900;
    text-transform: uppercase;
}

/* --- Ajustes del Hero (Banner Principal) --- */
.hero-wrapper {
    position: relative;
    width: 100%;
    display: flex;
}

.hero-bg-img {
    width: 100%;
    height: 500px;
    display: block;
}

/* Contenedor principal superpuesto (centrado verticalmente) */
.hero-overlay {
    position: absolute;
    top: 12%; /* Antes estaba en 50% centrado. Ahora está a un 12% del techo */
    left: 5%; 
    right: 5%; 
    z-index: 10;
    display: flex;
    align-items: flex-start;
}

/* El círculo del logo */
.hero-logo-circle {
    width: 140px;
    height: 140px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2;
    flex-shrink: 0;
    overflow: hidden; 
}

/* Contenedor derecho para líneas y textos */
.hero-content-right {
    flex-grow: 1;
    position: relative;
    margin-left: -70px; /* Empuja el contenedor a la mitad del logo */
    z-index: 1;
}

/* LÍNEA 1: Sale del centro exacto del logo (70px de 140px) */
.hero-line-1 {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--aoc-orange);
    z-index: -1;
}

/* LÍNEA 2: Sale de la base exacta del logo (140px) */
.hero-line-2 {
    position: absolute;
    top: 230px !important; /* Se mantiene en la base del logo */
    left: 70px !important;
    width: 80%; /* La hacemos más corta, para que no llegue hasta el extremo derecho */
    height: 3px; /* La hacemos más fina que la primera línea (que tiene 3px) */
    background-color: var(--aoc-orange);
    z-index: -1;
}

/* Textos apoyados en la Línea 1 */
.hero-top-text {
    height: 70px; /* Ocupa exactamente hasta la Línea 1 */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Apoya el contenido en la base (sobre Línea 1) */
    padding-left: 100px; /* Deja espacio para la curva del logo */
    padding-bottom: 8px; /* Separación de la línea */
    padding-right: 15px;
}

.hero-sports-links { display: flex; gap: 30px; }

.sport-link {
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: color 0.2s;
}
.sport-link:hover { color: var(--aoc-orange); }

.hero-socials { display: flex; gap: 15px; }

.social-icon {
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    transition: color 0.2s;
}
.social-icon:hover { color: var(--aoc-orange); }

/* Textos colgando de la Línea 2 */
.hero-bottom-text {
    margin-top: 170px !important; /* Empuja el texto para que inicie debajo de los 140px (70 height + 70 margin) */
    padding-left: 100px; /* Mismo margen izquierdo que los deportes */
    padding-top: 15px; /* Separación de la línea 2 hacia abajo */
    color: white;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.hero-main-title {
    font-weight: 900;
    font-size: 2.8rem;
    margin-bottom: 0;
    letter-spacing: 1px;
}

.hero-subtitle {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
    letter-spacing: 2px;
}

.hero-date {
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-top: 5px;
}

/* Ajustes Responsivos para no romper la matemática */
@media (max-width: 992px) {
    .hero-sports-links { display: none; }
    .hero-top-text { justify-content: flex-end; padding-left: 0; }
    .hero-main-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1.2rem; }
}

@media (max-width: 768px) {
    /* Si achicamos el logo a 100px, reajustamos la matemática (mitad 50px, base 100px) */
    .hero-logo-circle { width: 100px; height: 100px; }
    .hero-content-right { margin-left: -50px; } 
    .hero-line-1 { top: 50px; }
    .hero-line-2 { top: 100px; }
    .hero-top-text { height: 50px; padding-left: 65px; }
    .hero-bottom-text { margin-top: 50px; padding-left: 65px; }
    .hero-main-title { font-size: 1.5rem; }
}

/* Colores personalizados para los botones y tarjetas */
.btn-orange { background-color: var(--aoc-orange); color: white; font-weight: bold; }
.btn-orange:hover { background-color: #e65c00; color: white; }

.btn-blue { background-color: var(--aoc-blue); color: white; font-weight: bold; }
.btn-blue:hover { background-color: #0077b3; color: white; }

.btn-green { background-color: var(--aoc-green); color: white; font-weight: bold; }
.btn-green:hover { background-color: #27ae60; color: white; }


/* --- Ajustes del Menú Lateral --- */
.sidebar {
    background-color: #f8f9fa;
    /* Eliminamos explícitamente el border-right */
    border-right: none !important; 
}

.sidebar .nav-link {
    color: #333;
    font-weight: 700;
    padding: 12px 20px;
    font-size: 0.95rem;
    transition: all 0.2s;
    border-radius: 0 25px 25px 0; /* Un detalle visual para redondear el hover */
    margin-right: 15px;
}

.sidebar .nav-link:hover {
    color: var(--aoc-orange);
    background-color: #e9ecef;
    padding-left: 25px;
}

/* Comportamiento "Pegajoso" solo en pantallas grandes */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: 0;           /* Se pega al borde superior de la ventana */
        height: 100vh;    /* Altura completa de la pantalla */
        overflow-x: hidden;
        overflow-y: auto; /* Permite scroll interno si hay muchas opciones */
    }
}

/* Botón flotante para el menú en móviles (Se mantiene igual) */
.mobile-nav-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1050;
    background-color: var(--aoc-orange);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
}

/* --- SECCIÓN: QUIÉNES SOMOS --- */
.section-padding {
    padding: 80px 0; /* Espacio generoso arriba y abajo */
}

/* El título principal con la línea naranja */
.section-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px; /* Largo de la línea */
    height: 4px; /* Grosor de la línea */
    background-color: var(--aoc-orange);
    margin-top: 10px; /* Separación entre el texto y la línea */
}

.info-subtitle {
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

/* Párrafo justificado */
.text-justify {
    text-align: justify;
    line-height: 1.7; /* Mejora la legibilidad del bloque de texto */
    color: #555;
}

/* --- TARJETAS DE DEPORTES --- */
.activity-card {
    position: relative;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra sutil */
    aspect-ratio: 4/5; /* Mantiene las tarjetas proporcionadas (tipo retrato) */
}

/* La imagen de fondo de la tarjeta */
.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* Efecto suave al pasar el mouse */
}

/* El título del deporte (Visible siempre) */
.activity-title {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 80px;
    box-sizing: border-box;
    color: white;
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8); /* Sombra para que contraste con la foto */
    z-index: 5;
    pointer-events: none; /* Evita que el texto interfiera con el hover */
}

/* El Overlay oscuro que oculta el botón */
.activity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente negro */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 200px;
    box-sizing: border-box;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease; /* Aparece suavemente */
    z-index: 10;
}

/* Efectos al pasar el mouse (Hover) */
.activity-card:hover img {
    transform: scale(1.05); /* La imagen se acerca un poquito */
}

.activity-card:hover .activity-overlay {
    opacity: 1; /* El overlay y el botón se hacen visibles */
}