/* Propiedades personalizadas */
:root {
    /* Paleta de Colores */
    --primario: #fef3e2FF;
    --secundario: #640d5fFF;
    --terciario: #d9165599;
    --blanco: #FFF;
    --oscuro: #000;
    --gris: #e1e1e1;
    --fuenteTitulos: "PT Sans", sans-serif;
    --fuenteSubtitulos: "Open Sans", sans-serif;
    --fuenteParrafos: "Open Sans", sans-serif;
}

/* Configuraciones principales */
html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px para facilitar cálculos */
    background-color: var(--primario);
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Configuraciones de etiquietas */
body {
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: var(--fuenteParrafos);
}

h1, h2, h3 {
    font-family: var(--fuenteTitulos);
    color: var(--secundario);
    margin: 2rem 0;
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2.4rem;
}

p {
    color: var(--oscuro);
    margin-bottom: 1.5rem;
}

/* Configuración de Clases */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.header {
    background-color: var(--secundario);
    padding: 1rem 2rem;
}

.nav_conteiner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    max-height: 4rem;
    margin-right: 2rem;
}

.desktop-nav {
    display: none; /* Oculto por defecto en pantallas pequeñas */
}

@media (min-width: 768px) {
    .desktop-nav {
        display: block;
    }
    .mobile-nav-toggle {
        display: none;
    }
}

.desktop-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.desktop-nav ul li {
    margin-left: 2rem;
}

.desktop-nav ul li a {
    color: var(--blanco);
    text-decoration: none;
    font-family: var(--fuenteSubtitulos);
    font-size: 1.8rem;
    padding: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.desktop-nav ul li a:hover {
    background-color: var(--terciario);
}

/* Botón de menú móvil */
.mobile-nav-toggle {
    background: none;
    border: none;
    color: var(--blanco);
    font-size: 2.5rem;
    cursor: pointer;
}

/* Hero */
.hero {
    background-image: url('img/fondo_home.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--blanco);
}

.hero-logo {
    max-height: 10rem;
    margin-bottom: 2rem;
}

.hero-title {
    font-size: 5rem;
    font-family: var(--fuenteTitulos);
    color: var(--blanco);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Main Content */
.section {
    margin: 4rem 0;
    min-height: 200px;
}

.section-inner {
    padding: 2rem;
    border-radius: 10px;
}

.section-title {
    font-size: 3.2rem;
    color: var(--secundario);
    margin-bottom: 1.5rem;
}

.section-text {
    font-size: 1.8rem;
    color: var(--oscuro);
    line-height: 1.6;
    text-align: justify;
}

/* Footer */
.footer {
    background-color: var(--terciario);
    padding: 2rem;
    text-align: center;
}

.footer-logo {
    max-height: 4rem;
}

/* Nuevo menú móvil (superposición) */
.superposicion {
    display: none; /* Ocultar inicialmente */
    position: fixed; /* Cubrir toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    z-index: 1000; /* Asegurar que esté por encima de todo */
    justify-content: center; /* Centrar el contenido verticalmente */
    align-items: center; /* Centrar el contenido horizontalmente */
}

.superposicion-contenido {
    background-color: var(--primario);
    margin: auto;
    padding: 0;
    border: 1px solid var(--gris);
    width: 80%; /* Ancho de la superposición */
    height: 80%; /* Alto de la superposición */
    display: flex; /* Usar flexbox para la disposición interna */
    flex-direction: row; /* Colocar los elementos en fila */
}

.morado1 {
    background-color: var(--terciario);
    color: var(--blanco);
    padding: 2rem;
    display: flex;
    justify-content: center;
    width: auto;
    align-items: flex-start;
}

.morado1 i {
    font-size: 2.5rem; /* Tamaño del icono */
    cursor: pointer;
}

.morado2 {
    background-color: var(--secundario);
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.morado2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Ocupar todo el ancho disponible */
}

.morado2 li.nav-item {
    text-align: center;
    margin-bottom: 1.5rem;
}

.morado2 li.nav-item:last-child {
    margin-bottom: 0;
}

.morado2 a.nav-link {
    text-decoration: none;
    color: var(--blanco);
    font-family: var(--fuenteSubtitulos);
    font-size: 2.2rem; /* Tamaño de la fuente del menú */
    display: block; /* Hacer que los enlaces ocupen todo el ancho */
    transition: color 0.3s ease;
}

.morado2 a.nav-link:hover {
    color: var(--primario);
}

/* Estilos para mostrar y ocultar la superposición */
.mostrar {
    display: flex;
}

/* Enlaces de proyectos en el portafolio */
.proyecto-link {
    color: var(--secundario);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.proyecto-link:hover {
    color: var(--terciario);
}

/* Grid para escritorio */
@media (min-width: 768px) {
    .main-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}