/* Ajustes específicos para modo portrait en tablet */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* Mejor uso del espacio vertical */
    .home {
        min-height: 100vh;
        justify-content: center;
    }
    
    .home-content {
        text-align: left;
        max-width: 100%;
    }
    
    /* Portfolio en 2 columnas para portrait */
    .portfolio-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Skills en columnas para mejor aprovechamiento */
    .skills-row {
        flex-direction: column;
        gap: 3rem;
    }
    
    .skills-column {
        width: 100%;
    }
}


@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

@media (max-width: 991px) {
    .header {
        padding: 2rem 4%;
    }

    section {
        padding: 10rem 4% 2rem;
    }

    .home {
        padding: 0 4%;
    }

    .footer {
        padding: 2rem 4%;
    }
}

@media (max-width: 850px) {
    .animate.home-img {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .header {
        background: var(--bg-color);
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        padding: 1rem 4%;
        background: var(--main-color);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        z-index: 1;
        transition: .25s ease;
        transition-delay: .25s;
    }

    .navbar.active {
        left: 0;
        transition-delay: 0s;
    }

    .navbar .active-nav {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        z-index: -1;
        transition: .25s ease;
        transition-delay: 0s;
    }

    .navbar.active .active-nav {
        left: 0;
        transition-delay: .25s;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        transform: translateX(-20rem);
        transition: .25s ease;
        transition-delay: 0s;
    }

    .navbar.active a {
        transform: translateX(0);
        transition-delay: .25s;
    }

    .home-imgHover {
        pointer-events: none;
        background: var(--bg-color);
        opacity: .6;
    }
}

@media (max-width: 520px) {
    html {
        font-size: 50%;
    }

    .home-content h1 {
        display: flex;
        flex-direction: column;
    }

    .home-sci {
        width: 160px;
    }

    .home-sci a {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 462px) {
   .home {
        justify-content: center;
    }

    .home-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .home-content h1 {
        font-size: 5rem;
    }


 .portfolio-container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2.5rem;
}

  

    .contact form .input-box .input-field {
        width: 100%;
    }

    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        margin-top: 2rem;
        text-align: center;
    }
}

@media (max-width:844px) and (orientation: landscape){

.home {
        min-height: 100vh;
        padding: 4rem 5% 1rem; /* Reducir padding superior */
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Cambiar de space-between a flex-start */
    }
    
    .home-content {
        max-width: 55%; /* Aumentar un poco el ancho */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centrar verticalmente el contenido */
    }
    
    .home-content h1 {
        font-size: 3.5rem;
        line-height: 1.1;
        margin-bottom: 0.5rem; /* Reducir margen inferior */
    }
    
    .home-content .text-animate {
        width: fit-content;
        max-width: none;
        margin-bottom: 1rem; /* Espacio controlado después del título */
    }
    
    .home-content .text-animate h3 {
        font-size: 2.2rem;
        white-space: nowrap;
    }
    
    .home-content p {
        font-size: 1.4rem;
        margin: 1rem 0 1.5rem; /* Márgenes más compactos */
        line-height: 1.4;
    }
    
    .btn-box {
        width: 28rem;
        height: 4rem;
        margin-bottom: 1rem; /* Espacio después de botones */
    }
    
    .btn-box .btn {
        font-size: 1.5rem;
        width: 12rem;
        height: 4rem;
    }
      /* Redes sociales - posición relativa en lugar de absoluta */
    .home-sci {
        position: relative; /* Cambio importante */
        bottom: auto;
        left: auto;
        width: 170px;
        display: flex;
        justify-content: space-between;
        gap: 10px; /* Espacio entre íconos */
        margin-top: 1rem;
    }
    
    .home-sci a {
        width: 35px; /* Botones más pequeños */
        height: 35px;
        font-size: 18px;
    }
    
    .home-imgHover {
        width: 40%;
        right: 5%;
    }
 /*About section*/

           .about {
        display: grid;
        grid-template-columns: 1fr 2fr; /* 33% izquierda, 67% derecha */
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
            "image heading"      /* Imagen izq, título der */
            "image content"      /* Imagen izq, contenido der */
            "image button";      /* Imagen izq, botón der */
        gap: 0.5rem 2rem; /* vertical horizontal */
        padding: 2rem 4% 1rem;
        align-items: start;
        min-height: 100vh;
    }
    
    .about .heading {
        grid-area: heading;
        font-size: 2.8rem;
        margin-bottom: 0;
        text-align: left; /* Alineado a la izquierda */
        align-self: end; /* Al final de su celda */
    }
    
    .about-img {
        grid-area: image;
        width: 100%;
        max-width: 200px;
        height: 200px;
        margin: 0;
        justify-self: center; /* Centrada en su columna */
        align-self: start;
    }
    
    .about-content {
        grid-area: content;
        text-align: left;
        margin-top: 0;
        align-self: start;
    }
    
    .about-content h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
        margin-top: 0;
    }
    
    .about-content p {
        font-size: 1.3rem;
        line-height: 1.6;
        margin: 0;
        text-align: justify;
    }
    
    .btn-box.btns {
        grid-area: button;
        justify-self: start; /* Alineado a la izquierda */
        align-self: start;
        margin-top: 0.5rem;
    }
    
    .btn-box.btns .btn {
        width: 12rem;
        height: 3.5rem;
        font-size: 1.4rem;
    }
    #about {
    scroll-margin-top: 80px;
    }
.portfolio {
        padding: 3rem 4% 2rem;
        min-height: 100vh;
    }
    
    .portfolio h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .portfolio-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columnas */
        gap: 1.5rem;
        align-items: center;
        max-height: 70vh; /* Limitar altura para evitar scroll excesivo */
        overflow-y: auto; /* Scroll si es necesario */
    }
    
    .portfolio-container .portfolio-box {
        height: 200px; /* Altura fija más pequeña */
        border-radius: 1.5rem;
    }
    
    .portfolio-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .portfolio-layer h4 {
        font-size: 2rem; /* Título más pequeño */
        margin-bottom: 0.5rem;
    }
    
    .portfolio-layer p {
        font-size: 1.2rem; /* Texto más pequeño */
        margin: 0.2rem 0 0.8rem;
        line-height: 1.4;
        /* Limitar líneas de texto */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .portfolio-layer a {
        width: 4rem;
        height: 4rem;
    }
    
    .portfolio-layer a i {
        font-size: 1.8rem;
    }

    #portfolio {
        scroll-margin-top: 68px;
    }


}



@media (max-width: 371px) {
    .home {
        justify-content: center;
    }

    .home-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .home-content h1 {
        font-size: 5rem;
    }

    .portfolio-container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2.5rem;
}
    
}

@media (max-width: 812px) and (orientation: landscape) and (max-height: 500px) {

.home {
        min-height: 100vh;
        padding: 4rem 5% 1rem; /* Reducir padding superior */
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Cambiar de space-between a flex-start */
    }
    
    .home-content {
        max-width: 55%; /* Aumentar un poco el ancho */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centrar verticalmente el contenido */
    }
    
    .home-content h1 {
        font-size: 3.5rem;
        line-height: 1.1;
        margin-bottom: 0.5rem; /* Reducir margen inferior */
    }
    
    .home-content .text-animate {
        width: fit-content;
        max-width: none;
        margin-bottom: 1rem; /* Espacio controlado después del título */
    }
    
    .home-content .text-animate h3 {
        font-size: 2.2rem;
        white-space: nowrap;
    }
    
    .home-content p {
        font-size: 1.4rem;
        margin: 1rem 0 1.5rem; /* Márgenes más compactos */
        line-height: 1.4;
    }
    
    .btn-box {
        width: 28rem;
        height: 4rem;
        margin-bottom: 1rem; /* Espacio después de botones */
    }
    
    .btn-box .btn {
        font-size: 1.5rem;
        width: 12rem;
        height: 4rem;
    }
      /* Redes sociales - posición relativa en lugar de absoluta */
    .home-sci {
        position: relative; /* Cambio importante */
        bottom: auto;
        left: auto;
        width: 170px;
        display: flex;
        justify-content: space-between;
        gap: 10px; /* Espacio entre íconos */
        margin-top: 1rem;
    }
    
    .home-sci a {
        width: 35px; /* Botones más pequeños */
        height: 35px;
        font-size: 18px;
    }
    
    .home-imgHover {
        width: 40%;
        right: 5%;
    }

    /*About section*/

           .about {
        display: grid;
        grid-template-columns: 1fr 2fr; /* 33% izquierda, 67% derecha */
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
            "image heading"      /* Imagen izq, título der */
            "image content"      /* Imagen izq, contenido der */
            "image button";      /* Imagen izq, botón der */
        gap: 0.5rem 2rem; /* vertical horizontal */
        padding: 2rem 4% 1rem;
        align-items: start;
        min-height: 100vh;
    }
    
    .about .heading {
        grid-area: heading;
        font-size: 2.8rem;
        margin-bottom: 0;
        text-align: left; /* Alineado a la izquierda */
        align-self: end; /* Al final de su celda */
    }
    
    .about-img {
        grid-area: image;
        width: 100%;
        max-width: 200px;
        height: 200px;
        margin: 0;
        justify-self: center; /* Centrada en su columna */
        align-self: start;
    }
    
    .about-content {
        grid-area: content;
        text-align: left;
        margin-top: 0;
        align-self: start;
    }
    
    .about-content h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
        margin-top: 0;
    }
    
    .about-content p {
        font-size: 1.3rem;
        line-height: 1.6;
        margin: 0;
        text-align: justify;
    }
    
    .btn-box.btns {
        grid-area: button;
        justify-self: start; /* Alineado a la izquierda */
        align-self: start;
        margin-top: 0.5rem;
    }
    
    .btn-box.btns .btn {
        width: 12rem;
        height: 3.5rem;
        font-size: 1.4rem;
    }
    #about {
    scroll-margin-top: 80px;
}

/**portfolio**/
.portfolio {
        padding: 3rem 4% 2rem;
        min-height: 100vh;
    }
    
    .portfolio h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .portfolio-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columnas */
        gap: 1.5rem;
        align-items: center;
        max-height: 70vh; /* Limitar altura para evitar scroll excesivo */
        overflow-y: auto; /* Scroll si es necesario */
    }
    
    .portfolio-container .portfolio-box {
        height: 200px; /* Altura fija más pequeña */
        border-radius: 1.5rem;
    }
    
    .portfolio-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .portfolio-layer h4 {
        font-size: 2rem; /* Título más pequeño */
        margin-bottom: 0.5rem;
    }
    
    .portfolio-layer p {
        font-size: 1.2rem; /* Texto más pequeño */
        margin: 0.2rem 0 0.8rem;
        line-height: 1.4;
        /* Limitar líneas de texto */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .portfolio-layer a {
        width: 4rem;
        height: 4rem;
    }
    
    .portfolio-layer a i {
        font-size: 1.8rem;
    }

    #portfolio {
        scroll-margin-top: 68px;
    }

    /*seccion de SKILLS*/
    .skills {
        padding: 3rem 4% 2rem;
        min-height: 100vh;
    }
    
    .skills h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .skills .skills-row {
        display: flex;
        flex-wrap: nowrap; /* No permitir wrap */
        gap: 2rem; /* Reducir gap entre columnas */
        justify-content: center;
        align-items: flex-start;
    }
    
    .skills-row .skills-column {
        flex: 1 1 45%; /* Cada columna 45% del ancho */
        max-width: 400px; /* Límite máximo */
    }
    
    .skills-column .title {
        font-size: 2rem; /* Más pequeño */
        margin: 0 0 1rem;
        text-align: center;
    }
    
    /* Hacer las cajas de skills más compactas */
    .skills-box .skills-content {
        padding: 1rem 1.5rem; /* Menos padding */
    }
    
    .skills-content .progress {
        padding: 0.8rem 0; /* Menos espacio entre skills */
    }
    
    .skills-content .progress h3 {
        font-size: 1.4rem; /* Texto más pequeño */
        margin-bottom: 0.5rem;
    }
    
    .skills-content .progress .bar {
        height: 2rem; /* Barras más delgadas */
        margin: 0.5rem 0 0; /* Menos margen */
    }

    /* Seccion de contacto*/
    .contact {
        padding: 2.5rem 4% 1rem;
        min-height: 100vh;
    }
    
    .contact h2 {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
    
    .contact form {
        max-width: 90%; /* Usar más ancho disponible */
        margin: 0 auto;
    }
    
    /* Mantener los input-box en fila pero más compactos */
    .contact form .input-box {
        margin: 0.5rem 0; /* Menos margen vertical */
    }
    
    .contact form .input-box .input-field {
        margin: 0.4rem 0; /* Reducir margen entre campos */
    }
    
    .contact form .input-box .input-field input,
    .contact form .textarea-field textarea {
        padding: 1rem; /* Menos padding interno */
        font-size: 1.4rem; /* Texto más pequeño */
    }
    
    /* Hacer el textarea más pequeño en altura */
    .contact form .textarea-field textarea {
        min-height: 120px; /* Altura mínima más pequeña */
        height: 6em; /* Aproximadamente 6 filas */
        resize: vertical; /* Permitir redimensión solo vertical */
    }
    
    .contact form .textarea-field {
        margin: 0.5rem 0 1.5rem; /* Menos margen */
    }
    
    .contact form .btn-box.btns .btn {
        padding: 1rem 2rem;
        font-size: 1.4rem;
    }

#contact {
    scroll-margin-top:65px;
}
}