/* ===================================
   CONFIGURACIÓN GLOBAL RESPONSIVE
=================================== */

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

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ===================================
   HEADER
=================================== */

header{
    background-color:var(--principal);
    padding:15px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.logo h1{
    margin:0;
}

.menu{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.menu a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

/* ===================================
   HERO
=================================== */

.hero-fantasy{
    min-height:100vh;
    width:100%;
    overflow:hidden;
    position:relative;
}

.image-overlay-fantasiosa{
    width:90%;
    max-width:100%;
    height:auto;
}

.hero-content{
    width:100%;
    padding:20px;
}

.logo-main{
    width:120px;
    margin:auto;
}

/* ===================================
   HISTORIA
=================================== */

.section-story{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:100px 8%;
    align-items:center;
}

.story-text{
    width:100%;
}

.story-visual-side{
    width:100%;
}

.story-visual-side img{
    width:100%;
    border-radius:25px;
}

.facts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

/* ===================================
   SERVICIOS
=================================== */

#servicios{
    width:100%;
    overflow:hidden;
}

.carousel-container{
    width:100%;
    overflow:hidden;
}

.carousel-track{
    display:flex;
    gap:20px;
}

.servicio-card{
    min-width:320px;
    max-width:320px;
    flex-shrink:0;
}

/* ===================================
   TABLET
=================================== */

@media(max-width:992px){

    .section-story{
        grid-template-columns:1fr;
        text-align:center;
    }

    .story-visual-side img{
        transform:none !important;
    }

}

/* ===================================
   CELULARES
=================================== */

@media(max-width:768px){

    header{
        flex-direction:column;
        text-align:center;
    }

    .menu{
        justify-content:center;
    }

    .hero-content h1{
        font-size:2.8rem !important;
        line-height:1;
    }

    .hero-content p{
        font-size:1rem !important;
    }

    .section-story{
        grid-template-columns:1fr;
        padding:60px 20px;
        gap:30px;
    }

    .facts-grid{
        grid-template-columns:1fr;
    }

    .servicio-card{
        min-width:85vw;
        max-width:85vw;
    }

    .carousel-btn{
        width:40px;
        height:40px;
        font-size:18px;
    }
}

/* ===================================
   CELULARES PEQUEÑOS
=================================== */

@media(max-width:480px){

    .logo h1{
        font-size:24px;
    }

    .hero-content h1{
        font-size:2rem !important;
    }

    .titulo-servicios{
        font-size:1.8rem !important;
    }

    .servicio-card{
        min-width:92vw;
        max-width:92vw;
    }

    .cv-card{
        width:95%;
        margin:20px auto;
    }

    .cv-header{
        padding:25px 15px;
    }

    .cv-body{
        padding:20px;
    }

    .cv-photo{
        width:120px;
        height:120px;
    }
}