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

@font-face {
    font-family: "Medodica-Regular";
    src: url("src/fonts/MedodicaRegular.otf") format("opentype");
}
@font-face {
    font-family: "Klaxon-Crunchy";
    src: url("src/fonts/Klaxon-Crunchy.otf") format("opentype");
}

:root{
    --fondoClaro:#F2F2F2;
    --fondoOscuro:#0D0D0D;
    --color1:#F25E3D;
    --color2:#F2AB9B;
    --color3:#3E3E40;
    --color4:#F79071;
    --color5:#BEBEC0;
    --fuentePrincipal:"Klaxon-Crunchy", regular;
    --fuenteSecundaria: "Medodica-Regular",regular;
}


.fondo {
    background-color: var(--fondoClaro);
    padding: 30px;
}

.perfil{
    max-width: 260px; /* Limita el tamaño en pantallas grandes */
    height: auto;
}

.proyecto{
    width: 500px; /* Limita el tamaño en pantallas grandes */
    height: 300px;
}

.contenedor{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    min-height: calc(100vh - 60px);
    width: 100%;
}

.contenedor-proyectos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    width: 100%;
    gap: 40px;
}

.capsula{
    margin: 0;
    padding: 0;
}


.contenedorTexto{
    color: var(--fondoClaro);
    flex-direction: column;
    flex: 1;
}

.banner{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: start;
    width: 100%; /* Cambiado a 100% para que sea fluido */
    max-width: 1300px; /* Limita el ancho máximo en PC */
    min-height: 580px; /* Cambiado a min-height para que crezca si hay mucho texto */
    gap: 40px; /* Sustituye el padding-right de .perfil */
}

.banner-proyectos {
    display: flex;
    flex-direction: column; /* Define el eje principal como vertical */

    justify-content: flex-start; /* Empuja todo el contenido hacia arriba */
    align-items: flex-start; /* Empuja todo el contenido hacia la izquierda */

    text-align: start;
    width: 100%;
    max-width: 1300px;
    min-height: 580px;
    padding: 60px;
    background-color: var(--fondoClaro);
    border: 10px solid var(--fondoOscuro);
}


.tituloBanner{
    font-family: var(--fuentePrincipal);
    font-weight: bold;
    font-size: 180px;
    color: var(--fondoOscuro);
    margin-left: 0;
}

.extra{
    margin-top: 100px;
    margin-bottom: 50px;
    text-align: center;
}

.subtituloBanner{
    font-family: var(--fuenteSecundaria);
    font-size: 60px;
    font-weight: bold;
    color: var(--color1);
    text-align: start;

}

.enlaceBanner{
    font-family: var(--fuentePrincipal);
    font-size: 60px;
    font-weight: bold;
    color: var(--fondoOscuro);
    text-align: start;
    text-decoration: none;
}
.enlaceBanner:hover{
    color: var(--color4);
    text-decoration: underline;
}

.textoBanner {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--fuenteSecundaria);
    font-size: 30px;
    line-height: 1.0;
    font-weight: normal;
    color: var(--fondoOscuro);
    text-align: start;
    margin-top: 15px;
    margin-bottom: 30px;

}

.textoFooter{
    display: flex;
    flex-wrap: wrap;
    font-family: var(--fuenteSecundaria);
    font-size: 25px;
    line-height: 1.5;
    font-weight: normal;
    color: var(--fondoOscuro);
    text-align: start;
    margin-top: 100px;
}

.textoFooter.enlace{
    text-decoration: none;
}

.enlace:hover{
    color: var(--color4);
    text-decoration: underline;
}

.contenedorIconos{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 20px 0;
    margin-bottom: 50px;
    color: var(--fondoOscuro);
}

.contenedorIconos .icono-destacado {
    color: var(--color5);
}


footer {
    background-color: var(--fondoClaro);
    padding: 20px 60px; /* Alineado con los 60px de tus otros contenedores */
    position: relative;
    bottom: 0;
    width: 100%;

    /* Configuración Flexbox */
    display: flex;
    justify-content: space-between; /* Empuja el primer hijo a la izquierda y el último a la derecha */
    align-items: center; /* Alinea todo verticalmente al centro */
    flex-wrap: wrap; /* Permite que los elementos bajen de línea si la pantalla es muy pequeña */
    gap: 20px; /* Espacio de seguridad entre los dos bloques */
}

/* Tablets y pantallas medianas */
@media (max-width: 992px) {
    .fondo {
        padding: 20px;
    }

    .banner {
        flex-direction: column;
        align-items: flex-start; /* Mantiene el bloque alineado a la izquierda como en PC */
        text-align: start; /* Evita que los textos se centren */
        padding: 40px 30px;
        gap: 30px;
    }

    .perfil {
        max-width: 250px;
    }

    /* Escalado tipográfico proporcional */
    .tituloBanner {
        font-size: 100px; /* Escalado equilibrado desde 180px */
        line-height: 1;
    }

    .subtituloBanner {
        font-size: 35px;
    }

    .enlaceBanner {
        font-size: 35px;
    }

    .textoBanner {
        font-size: 30px;
        line-height: 1.2;
    }

    .textoFooter {
        font-size: 20px;
        margin-top: 60px;
    }

    .contenedorIconos {
        justify-content: flex-start; /* Evita que los iconos se centren */
        margin-bottom: 30px;
    }
}

/* Celulares y pantallas pequeñas */
@media (max-width: 576px) {
    .fondo {
        padding: 10px;
    }

    .banner {
        padding: 20px 15px;
        gap: 20px;
    }

    .perfil {
        max-width: 180px;
    }

    .tituloBanner {
        font-size: 60px; /* Conserva el impacto de la tipografía grande sin romper la pantalla */
    }

    .subtituloBanner {
        font-size: 28px;
    }

    .enlaceBanner {
        font-size: 28px;
    }

    .textoBanner {
        font-size: 26px; /* 16px es el tamaño mínimo recomendado para lectura en móvil */
        line-height: 1.3; /* Aumenta ligeramente el interlineado para facilitar lectura */
    }

    .textoFooter {
        font-size: 20px;
        margin-top: 40px;
    }

    .extra {
        margin-top: 60px; /* Reduce los espacios en blanco excesivos en celular */
        margin-bottom: 30px;
    }
}


/* =========================================
   MODO OSCURO ADAPTATIVO
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        /* Se invierten los valores cromáticos directamente en la raíz */
        --fondoClaro: #0D0D0D; /* Los elementos con fondo claro ahora serán negros */
        --fondoOscuro: #F2F2F2; /* Los textos y bordes oscuros ahora serán blancos */
        --color5: #3E3E40;

        /* Nota: Puedes redefinir --color1, --color2, etc., aquí mismo si
           necesitas que tus colores de acento sean más brillantes sobre negro */
    }
}