:root {
    --dorado: #ffae00;
    --azul: #3d91f2;
    --azul-oscuro: #0056b3;
    --texto-oscuro: #1a252f;
    --crema: #f8fbff;
    --footer-azul: #0076de;
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);

    --font-primaria: 'Space Grotesk', sans-serif;
    --font-secundaria: 'Montserrat', sans-serif;
}

/* Custom Cursor Styles */
* {
    cursor: none !important; /* Escondemos el original en todo el sitio */
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: white; /* Blanco para que la inversión sea total */
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 10000;
    pointer-events: none;
    mix-blend-mode: difference; /* Invierte colores según el fondo */
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 3px solid white; /* Borde más grueso */
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transition: width 0.3s, height 0.3s, transform 0.15s ease-out;
    mix-blend-mode: difference;
}

.cursor-hover {
    width: 70px !important;
    height: 70px !important;
    background-color: white !important; /* Se vuelve un círculo sólido al invertir */
}

html {
    scroll-behavior:smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    font-family: var(--font-secundaria);
    color: var(--texto-oscuro);
    background-color: var(--crema);
    line-height: 1.6;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9000; /* Aseguramos que esté por debajo del cursor pero por encima de todo lo demás */
    transition: all 0.3s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 5%; /* Un poco más delgada para que no ocupe tanto espacio fija */
    background: rgba(61, 145, 242, 0.9); /* Azul con ligera transparencia */
    backdrop-filter: blur(10px); /* Efecto de desenfoque premium */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 4.5rem;
    width: 100%;
}

#listanavbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

#listanavbar a {
    text-decoration: none;
    color: var(--texto-oscuro);
    font-weight: 500;
    font-family: var(--font-primaria);
    transition: color 0.3s ease;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: auto; /* Empuja los links a la derecha si el logo está a la izquierda */
}

#listanavbar a:hover {
    color: var(--dorado);
}

#listanavbar a.seleccionado {
    background-color: var(--dorado);
    padding: 10px 25px;
    border-radius: 20px;
    color: white;
}



.logomini {
    height: 40px;
    margin-right: auto;
}

/* Hero Section */
#section-primaria {
    min-height: 100vh; /* Bajamos a 100vh para que no se estire tanto el fondo */
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center ;
    background-color: #57a5ff; /* Azul cielo de seguridad */
    background-image: url(img/logohero.png);
    background-size: cover;
    background-position: center top; /* Anclado arriba */
    background-repeat: no-repeat;
    background-attachment: local;
    margin-top: 0;
}

.cont-texto-primaria {
    margin-top: 27vw; /* Revertido a la posición previa para desktop */
    max-width: 600px;
    margin-inline: auto;
    padding: 20px;
    animation: float 6s ease-in-out infinite;
}

#section-primaria h1 {
    font-family: var(--font-secundaria);
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 0;
    font-weight:700;
    margin-top: 0;
    color: var(--texto-oscuro);
    animation: fadeUp 0.8s ease-out forwards;
}

#section-primaria h2 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1.3rem;
    line-height: 1.3;
    opacity: 0; /* Empieza invisible para la animación */
    margin-top:1.3rem;
    animation: fadeUp 0.8s ease-out 0.2s forwards; /* Retraso de 0.2s */
}

#section-primaria p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.4s forwards; /* Retraso de 0.4s */
}

.texto-naranja {
    background: linear-gradient(135deg, #ffae00 0%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    display: inline-block; /* Ayuda a que el gradiente se renderice mejor */
}

.texto-negrita {
    font-weight: 800;
    color: var(--texto-oscuro);
    letter-spacing: -0.5px;
}

.texto-azuloscuro {
    color: var(--azul-oscuro);
    font-weight: 700;
    border-bottom: 2px solid rgba(0, 86, 179, 0.2); /* Una línea sutil para dar énfasis */
    text-decoration:none;
}

#boton-main {
    display: inline-block;
    margin-top: 0;
    background-color: var(--dorado);
    padding: 20px 50px;
    border-radius: 30px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.6s forwards; /* Retraso de 0.6s */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto elástico */
}

#boton-main:hover{
    background-color: var(--texto-oscuro);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Animaciones */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Section Secundaria */
#section-secundaria {
    padding: 8rem 10%;
    background-color: white;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.text-content h3 {
    font-family: var(--font-primaria);
    font-size: 2.5rem;
    color: var(--azul);
    margin-bottom: 1.5rem;
}

.text-content p {
    font-size: 1.1rem;
    color: var(--texto-oscuro);
    opacity: 0.8;
}

.image-content img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.image-content img:hover {
    transform: scale(1.02);
}

/* Section Terciaria */
.section-terciaria {
    padding: 8rem 10%;
    background-color: var(--crema); /* Color de fondo ligeramente diferente para contraste si se desea, o blanco */
}

.section-terciaria h4 {
    font-family: var(--font-primaria);
    font-size: 2.5rem;
    color: var(--dorado);
    margin-bottom: 1.5rem;
}

/* Section cuaternaria */
.section-cuaternaria {
    background-image: url(img/fondo-secundario.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 4rem 10%;
}
/* Footer Details */
footer {
    background-color: var(--azul);
    color: white;
    padding: 4rem 10%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.5fr;
    gap: 2rem;
    position: relative;
}

.footer-brand img {
    height: 50px;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.9rem;
    opacity: 0.7;
}

footer h4 {
    font-family: var(--font-primaria);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer ul {
    padding: 0;
}

footer li {
    list-style: none;
    margin-bottom: 0.8rem;
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease;
}

footer a:hover {
    opacity: 1;
    color: var(--dorado);
}

.boton-arriba {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.boton-arriba img {
    background: var(--dorado);
    padding: 10px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.boton-arriba img:hover {
    transform: translateY(-5px);
}

/* Responsive Design */
@media (max-width: 1500px) {
    .cont-texto-primaria { margin-top: 40vw; }
}

@media (max-width: 1200px) {
    .cont-texto-primaria { margin-top: 40vw; }
    .nav-links-wrapper { gap: 1rem; }
}

@media (max-width: 1150px) {
    .cont-texto-primaria { margin-top: 40vw; }
}

@media (max-width: 1100px) {
    .cont-texto-primaria { margin-top: 32vw; }
}

@media (max-width: 1050px) {
    .cont-texto-primaria { margin-top: 35vw; }
}

@media (max-width: 1024px) {
    #section-primaria h1 { font-size: 1.5rem; }
    .cont-texto-primaria { margin-top: 40vw; }
    .content-wrapper { gap: 1rem; }
}

@media (max-width: 960px) {
    .cont-texto-primaria { margin-top: 60vw; }
}

@media (max-width: 900px) {
    .cont-texto-primaria { margin-top: 70vw; }
}

@media (max-width: 850px) {
    .cont-texto-primaria { margin-top: 70vw; }
}

@media (max-width: 800px) {
    .cont-texto-primaria { margin-top: 90vw; }
}


@media (max-width: 768px) {
    /* Desactivar cursor personalizado en táctiles */
    .cursor-dot, .cursor-outline { display: none; }
    * { cursor: auto !important; }

    .navbar {
        height: auto;
        padding: 0.5rem 2%;
    }

    #listanavbar {
        display: flex;
        flex-direction: row; /* Cambiamos a fila para intentar que todo entre en una línea */
        align-items: center;
        justify-content: space-between;
        gap: 0.2rem;
        width: 100%;
        padding: 0.4rem 2%;
    }

    .logomini {
        height: 20px;
        width: auto;
        margin-right: 2px;
    }

    .nav-links-wrapper {
        display: flex;
        flex-wrap: nowrap; /* Forzamos una sola línea */
        justify-content: flex-end;
        gap: 0.2rem;
        flex-grow: 1;
    }

    #listanavbar a {
        font-size: 0.52rem; /* Reducción máxima para que entre todo */
        padding: 4px 2px;
        white-space: nowrap;
        letter-spacing: -0.4px;
    }

    /* Forzamos que "Preguntas Frecuentes" y "Contacto" bajen si no caben, 
       o ajustamos para que se vean en dos bloques claros */
    #listanavbar a:nth-child(5) {
        margin-left: 0;
    }

    #listanavbar a.seleccionado {
        padding: 8px 15px;
    }

    #section-primaria {
        min-height: 100vh;
        background-size: cover;
        background-position: center top;
    }

    .cont-texto-primaria {
        margin-top: 70vw; /* Punto medio para que no solape pero no quede tan abajo */
        padding: 0 5%;
    }

    #section-primaria h1 { 
        font-size: 1.5rem; 
        line-height: 1.2;
    }
    #section-primaria h2 { 
        font-size: 0.95rem; 
        margin-top: 0.5rem;
    }
    #section-primaria p {
        font-size: 0.9rem;
    }

    #boton-main {
        padding: 15px 35px;
        width: 100%; /* Botón ancho completo en móvil para mejor click */
    }

    .content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .image-content {
        order: -1; /* La imagen siempre arriba en móvil */
    }

    .section-terciaria, #section-secundaria {
        padding: 4rem 5%;
    }

    footer {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 3rem 5%;
    }

    .footer-links, .footer-legal {
        margin-bottom: 2rem;
    }

    .boton-arriba {
        justify-content: center;
        margin-top: 2rem;
    }
}

@media (max-width: 600px) {
    .cont-texto-primaria {
        margin-top: 82vw;
    }
}

@media (max-width: 480px) {
    #listanavbar {
        gap: 0.4rem;
    }
    
    #listanavbar a {
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    #section-primaria h1 { font-size: 1.6rem; }

    .cont-texto-primaria {
        margin-top: 130vw; /* Aumentado para evitar solape en pantallas extra pequeñas */
        padding: 0 5%;
    }

    #boton-main {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
}

@media (max-width:414px) {
    .cont-texto-primaria {
        margin-top: 115vw; /* Aumentado para evitar solape en pantallas extra pequeñas */
        padding: 0 5%;
    }
}
/* --- Páginas Internas (Equipo, Juego, etc) --- */
.section-paginas-internas {
    min-height: 100vh;
    width: 100%;
    background-image: url(img/fondo-secundario.png);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed; /* Mantiene el fondo fijo para que no se "acerque" en páginas largas */
    padding: 140px 5% 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor-interno {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeUp 0.8s ease-out forwards;
}

.titulo-interno {
    font-family: var(--font-secundaria);
    font-size: 4.5rem;
    color: #1a4a4a;
    margin-bottom: 4rem;
    text-align: center;
    animation: fadeDown 0.8s ease-out;
}

.columnas-interno {
    display: flex;
    align-items: center;
    gap: 5rem;
    width: 100%;
}

.texto-interno {
    flex: 1.2;
}

.texto-interno p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--texto-oscuro);
}

.imagen-interna {
    flex: 1;
}

.imagen-interna img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    transition: transform 0.5s ease;
}

.imagen-interna img:hover {
    transform: translateY(-10px) rotate(1deg);
}

/* Responsive Internas */
@media (max-width: 1024px) {
    .columnas-interno {
        gap: 3rem;
    }
    .titulo-interno {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .section-paginas-internas {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    
    .contenedor-interno {
        text-align: center;
    }

    .titulo-interno {
        font-size: 2.8rem;
        margin-bottom: 2rem;
        order: 1; /* Título siempre primero */
    }

    .columnas-interno, .contacto-container, .faq-container {
        flex-direction: column;
        gap: 2.5rem;
        order: 2; /* Contenido siempre después del título */
        width: 100%;
    }
    
    .imagen-interna {
        width: 100%;
        order: 3; /* Imagen tercera (abajo) */
    }

    .texto-interno {
        width: 100%;
        order: 2; /* Texto segundo (en medio) */
    }
    
    .texto-interno p {
        font-size: 1.1rem;
    }
}


.texto-naranja {
    color: #e67e22; /* Naranja vibrante para resaltar */
    font-weight: 600;
}
.texto-negrita {
    font-weight: 700;
    color: #1a4a4a; /* Mismo color que los títulos para coherencia */
}


/* --- Página de Contacto --- */
.contacto-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.contacto-flujo {
    margin-bottom: 3rem;
    text-align: center;
}

.contacto-flujo h3 {
    font-family: var(--font-secundaria);
    font-size: 2rem;
    color: #1a4a4a;
    margin-bottom: 1rem;
}

.pasos-contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.paso-item {
    padding: 1.5rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.paso-item:hover {
    transform: translateY(-5px);
}

.paso-numero {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: var(--dorado);
    color: white;
    border-radius: 50%;
    line-height: 35px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.email-box {
    background: #1a4a4a;
    color: white;
    padding: 1.5rem 2.5rem;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.email-box:hover {
    background: #2a6a6a;
    transform: scale(1.02);
}

.email-box span {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.copy-icon {
    opacity: 0.7;
}

.tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dorado);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.email-box:active .tooltip {
    opacity: 1;
}

@media (max-width: 768px) {
    .pasos-contacto {
        grid-template-columns: 1fr;
    }
    .contacto-container {
        padding: 2rem 1.5rem;
        width: 95%;
    }
    .email-box {
        flex-direction: column;
        padding: 1.5rem;
        text-align: center;
    }
}


/* --- Página de Preguntas Frecuentes --- */
.faq-container {
    width: 100%;
    max-width: 1200px;
}

.faq-categoria {
    margin-bottom: 5rem;
}

.faq-categoria h2 {
    font-family: var(--font-secundaria);
    font-size: 2.2rem;
    color: #e67e22;
    margin-bottom: 2.5rem;
    position: relative;
    padding-left: 1rem;
}

.faq-categoria h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 30px;
    background: var(--dorado);
    border-radius: 10px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.faq-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.faq-card:hover {
    background: white;
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.faq-pregunta {
    display: block;
    font-family: var(--font-primaria);
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a4a4a;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.faq-respuesta {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .faq-categoria h2 {
        font-size: 1.8rem;
        text-align: center;
        padding-left: 0;
    }
    .faq-categoria h2::before {
        display: none;
    }
}