/* Reset general de márgenes, padding y box-sizing */
* {
    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina padding predeterminado */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el tamaño del elemento */
    font-family: 'Inter', sans-serif; /* Define la fuente base */
}

/* Variables CSS para colores y estilos reutilizables */
:root {
    --primary: #00bf63; /* Color primario */
    --secondary: #00bf63; /* Color secundario */
    --text: #1f2937; /* Color de texto */
    --bg-light: #f9fafb; /* Fondo claro */
    --bg-light: #ffffff; /* Fondo claro adicional */
    --accent: #1f2937; /* Color de acento */
}

/* Estilos básicos del cuerpo */
body {
    background-color: var(--bg-light); /* Fondo del cuerpo */
    color: var(--text); /* Color del texto */
    line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
}

/* Estilos de la barra de navegación */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow);
}

/* Estilos del contenido de la barra de navegación */
.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos del logo */
.nav-logo img {
    width: 115px;
    height: 35px;
}

/* Estilos de los enlaces */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 500;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estilos de los enlaces al pasar el mouse */
.nav-links a:hover {
    color: var(--primary);
}

/* Estilos para iconos */
.nav-links i {
    font-size: 1.2rem;
}

/* Botón de menú hamburguesa para móviles */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary);
}

/* Media Queries para responsividad */
@media screen and (max-width: 968px) {
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-links a {
        margin-left: 1rem;
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-content {
        padding: 1rem;
    }
    
    .nav-logo img {
        width: 90px;
        height: 27px;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: var(--bg-light);
        flex-direction: column;
        padding: 1rem;
    }
    
    .nav-links.show {
        display: flex;
    }
    
    .nav-links a {
        margin: 0;
        padding: 1rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }
}



/* Sección del footer */
footer {
    background: var(--text); /* Fondo del footer usando la variable de color principal */
    color: white; /* Color de texto blanco */
    padding: 4rem 2rem; /* Espaciado interno de 4rem arriba y abajo, 2rem a los lados */
    margin-top: 4rem; /* Margen superior para separar el footer del contenido previo */
}

/* Contenedor del contenido del footer */
.footer-content {
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra horizontalmente el contenido */
    display: grid; /* Usa diseño de cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajusta las columnas según el ancho disponible */
    gap: 2rem; /* Espaciado entre los elementos de la cuadrícula */
}

/* Responsividad para dispositivos con ancho menor a 768px */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem; /* Reduce el tamaño de la fuente del encabezado principal */
    }

    .nav-links {
        display: none; /* Oculta los enlaces de navegación */
    }
}



/* Estilo del logo en el footer */
.logofooter a {
    text-decoration: none; /* Sin subrayado en el texto */
    font-size: 30px; /* Tamaño de fuente del texto del logo */
    text-align: left; /* Alineación del texto a la izquierda */
    color: #ffffff; /* Color blanco */
    font-weight: bold; /* Fuente en negrita */
}

.logofooter img {
    width: 40px; /* Ancho de la imagen del logo */
    height: 38px; /* Altura de la imagen del logo */
    float: left; /* Alinea la imagen a la izquierda */
    padding: 0px; /* Sin relleno interno */
}

/* Estilos del pie de página */
.footer {
    background-color: var(--bg-light); /* Fondo del pie de página */
    padding: 2rem; /* Espaciado interno */
    text-align: center; /* Alineación del texto */
}

.footer-content {
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrado horizontal */
    display: grid; /* Usa diseño de cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajusta las columnas según el ancho disponible */
    gap: 2rem; /* Espacio entre las columnas */
}

.footer-content > div {
    background-color: #dddddd23; /* Fondo de las columnas */
    padding: 1rem; /* Espaciado interno */
    border: 1px solid #dddddd23; /* Borde de las columnas */
    border-radius: 10px; /* Radio de las esquinas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra de las columnas */
}

/* Redes sociales */
.social ul li {
    list-style: none; /* Elimina los estilos de lista predeterminados */
    padding: 1px;
}

.social a {
    text-decoration: none;
    color: #fafafa;
}

/* Lista de contacto en el footer */
.contacto ul li {
    list-style: none;
    padding: 1px;
}

.contacto a {
    text-decoration: none;
    color: #ffffff;
}

/* Títulos del footer */
.footer-content h3 {
    color: #00bf63;
}

/* Créditos en el footer */
.credits {
    background-color: #eeeeee10; /* Fondo sutil gris */
    margin-top: 2rem;
    padding: 1rem;
    border-top: 1px solid #cccccc33;
    border-radius: 10px;
    text-align: center;
}

/* Texto dentro de créditos */
.credits .By,
.credits .text {
    color: #cfcfcf;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-align: center;
    line-height: 1.2;
}

/* Estilo del nombre del desarrollador */
.credits .By a {
    color: #00bf63;
    text-decoration: none;
    font-weight: bold;
}

.credits .By a:hover {
    text-decoration: underline;
}

/* Enlaces legales */
.legal-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.legal-links p {
    margin: 0;
    color: #a0a0a0;
    font-size: 1rem;
    text-align: center;
}

.legal-links a {
    color: #00bf63;
    text-decoration: none;
    font-weight: 500;
}

.legal-links a:hover {
    text-decoration: underline;
}

/* Estilos responsive para el footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .logofooter {
        justify-content: center;
        text-align: center;
    }

    .logofooter img {
        float: none;
        display: block;
        margin: 0 auto 0.5rem auto;
    }

    .logofooter a {
        font-size: 1.5rem;
        display: block;
    }

    .legal-links {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
    }
}

/* Estilo del logo en el footer */
.logofooter a {
    text-decoration: none;
    font-size: 30px;
    text-align: left;
    color: #ffffff;
    font-weight: bold;
}

.logofooter img {
    width: 40px;
    height: 38px;
    float: left;
    padding: 0px;
}

/* Estilos del pie de página */
.footer {
    background-color: var(--bg-light);
    padding: 2rem;
    text-align: center;
}

.footer-content > div {
    background-color: #dddddd23;
    padding: 1rem;
    border: 1px solid #dddddd23;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Redes sociales */
.social ul li {
    list-style: none;
    padding: 1px;
}

.social a {
    text-decoration: none;
    color: #fafafa;
}

/* Lista de contacto en el footer */
.contacto ul li {
    list-style: none;
    padding: 1px;
}

.contacto a {
    text-decoration: none;
    color: #ffffff;
}

/* Títulos del footer */
.footer-content h3 {
    color: #00bf63;
}

/* Créditos en el footer */
.credits {
    background-color: #eeeeee10;
    margin-top: 2rem;
    padding: 1rem;
    border-top: 1px solid #cccccc33;
    border-radius: 10px;
    text-align: center;
}

/* Texto dentro de créditos */
.credits .By,
.credits .text {
    color: #cfcfcf;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-align: center;
    line-height: 1.2;
}

/* Estilo del nombre del desarrollador */
.credits .By a {
    color: #00bf63;
    text-decoration: none;
    font-weight: bold;
}

.credits .By a:hover {
    text-decoration: underline;
}

/* Enlaces legales */
.legal-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.legal-links p {
    margin: 0;
    color: #a0a0a0;
    font-size: 1rem;
    text-align: center;
}

.legal-links a {
    color: #00bf63;
    text-decoration: none;
    font-weight: 500;
}

.legal-links a:hover {
    text-decoration: underline;
}