/*RESPONSIVE NON-DESKTOP*/


@media (max-width: 1200px) {

    /* CONTAINER */

    .container{
        width:92%;
    }

    /* HERO */

    .hero-content h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:4.8rem;
    }

    .hero-content h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-hero h2{
        font-size:4.8rem;
    }

    .hero-content p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .culture-hero p,
    .services-hero p,
    .team-hero p,
    .contact-hero p{
        max-width:680px;
        font-size:1.08rem;
    }

    /* HOME */

    .about-content{
        gap:4rem;
    }

    .about-image{
        width:420px;
    }

    .service-grid{
        gap:1.5rem;
    }

    .service-card{
        min-height:400px;
        padding:2.5rem 1.6rem;
    }

    /* ABOUT */

    .about-grid{
        width:95%;
        gap:1.5rem;
    }

    .about-card{
        min-height:470px;
    }

    /* PDR */

    .pdr-grid{
        gap:3rem;
    }

    .pdr-image{
        min-height:430px;
    }

    /* EXPERIENCE */

    .countries-grid{
        gap:1.4rem;
    }

    /* CULTURE */

    .verse-grid{
        gap:3rem;
    }

    /* SERVICES PAGE */

    .service-grid-service{
        width:95%;
        gap:1.5rem;
    }

    .service-card-service{
        min-height:470px;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        gap:50px;
    }

    /* CONTACT */

    .contact-grid{
        grid-template-columns:38% 30% 24%;
        gap:2.5rem;
    }

    /* FOOTER */

    .footer-content{
        gap:2rem;
    }
}

/*TABLET 998px*/

@media (max-width:992px){

    /* CONTAINER */

    .container{
        width:92%;
    }

    section{
        overflow:hidden;
    }

    /* HERO */

    .hero,
    .page-hero,
    .page-hero-pdr,
    .services-hero,
    .experience-hero,
    .culture-hero,
    .team-hero,
    .contact-hero{
        min-height:65vh;
        background-attachment:scroll;
    }

    .hero-content h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:4rem;
    }

    .hero-content h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-hero h2{
        font-size:4rem;
        line-height:1;
    }

    .hero-content p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .culture-hero p,
    .services-hero p,
    .team-hero p,
    .contact-hero p{
        font-size:1.05rem;
        max-width:620px;
    }

    /* SECTION TITLES */

    .section-title{
        font-size:2.1rem !important;
    }

    /* HOME */

    .about-content{
        grid-template-columns:1fr;
        text-align:center;
        gap:3rem;
    }

    .about-image{
        width:100%;
        max-width:520px;
        margin:auto;
    }

    .stats{
        justify-content:center;
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .quote-1 .container{
        justify-content:center;
    }

    .quote-1-content{
        text-align:center;
        justify-content:center;
    }

    .quote-1 h2{
        text-align:center;
        font-size:1.8rem;
    }

    .contact-cta-content{
        flex-direction:column;
        text-align:center;
    }

    .location .container{
        grid-template-columns:1fr;
    }

    .location-wrapper{
        grid-template-columns:1fr;
    }

    /* ABOUT */

    .about-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* PDR */

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

    .pdr-image{
        order:-1;
        min-height:420px;
    }

    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* BEFORE / AFTER */

    .before-after-grid{
        grid-template-columns:1fr;
        max-width:600px;
    }

    /* EXPERIENCE */

    .countries-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .quote-3 .container{
        justify-content:center;
    }

    .quote-3-content{
        width:100%;
        min-width:0;
    }

    .quote-3 h2{
        text-align:center;
    }

    .quote-3-line{
        transform:none;
        margin-inline:auto;
    }

    /* CULTURE */

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

    .verse-grid::after{
        display:none;
    }

    .mindset-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .philosophy-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* SERVICES PAGE */

    .service-grid-service{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .step:not(:last-child)::after{
        display:none;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        grid-template-columns:1fr;
        gap:2.5rem;
        padding:60px 0;
    }

    .team-member-right .team-info{
        order:2;
    }

    .team-member-right div:first-child{
        order:1;
    }

    .team-maylon img,
    .team-jo img,
    .team-ve img{
        width:100%;
        margin:0;
    }

    /* CONTACT */

    .contact-grid{
        grid-template-columns:1fr;
        gap:4rem;
    }

    .contact-info,
    .contact-info-page{
        border:none;
        padding:0;
    }

    .contact-map iframe{
        height:350px;
    }

    /* FOOTER */

    .footer-content{
        grid-template-columns:repeat(2,1fr);
        gap:3rem;
    }

    .footer-content > div::after{
        display:none;
    }


    .legal-content{

        padding:3rem;
    }

}



/*MOVIL GRANDE*/

@media (max-width: 767px){

    .container{
        width:92%;
    }

    section{
        padding:4rem 0;
    }

    /* HERO */

    .hero,
    .page-hero,
    .page-hero-pdr,
    .experience-hero,
    .culture-hero,
    .services-hero,
    .team-hero,
    .contact-hero{
        min-height:65vh;
        background-attachment:scroll;
    }

    .hero h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:3.2rem;
        line-height:1.1;
    }

    .hero h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-heroh2{
        font-size:2.8rem;
        line-height:1;
        margin-bottom:2rem;
    }

    .hero p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .contact-hero p{
        font-size:1rem;
        line-height:1.8;
    }

    /* TITULOS */

    .section-title{
        font-size:2rem;
    }

    /* HOME */

    .service-grid,
    .stats,
    .countries-grid,
    .benefits-grid,
    .service-grid-service,
    .about-grid,
    .process-grid,
    .mindset-grid,
    .philosophy-grid,
    .before-after-grid,
    .verse-grid{
        grid-template-columns:1fr;
    }

    .verse-grid::after{
        display:none;
    }

    .location .container,
    .pdr-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        grid-template-columns:1fr;
        gap:2.5rem;
        padding:3rem 0;
    }

    .team-jo img,
    .team-maylon img,
    .team-ve img{
        width:100%;
        height:420px;
        margin:0;
    }

    /* FOOTER */

    .footer-content{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

    .footer-content > div::after{
        display:none;
    }

    /* CTA */

    .contact-cta-content{
        flex-direction:column;
        text-align:center;
    }

    .contact-cta .btn-primary,
    .service-cta .btn-primary,
    .experience-contact,
    .pdr-contact{
        width:100%;
        max-width:340px;
    }

    .legal-page{

        padding:5rem 0;
    }

    .legal-content{

        padding:2rem;
    }

    .legal-content h1{

        font-size:2.2rem;
    }

    .legal-content h2{

        font-size:1.35rem;
    }


}

/*MOVIL PEQUEÑO*/

    @media (max-width:575px){


    .menu-toggle{

        display: block;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 2rem;

        cursor: pointer;

        z-index: 1100;
    }

    .menu-toggle.hide{

        display: none;
    }

    .close-menu{

        display: none;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 2rem;

        cursor: pointer;

        align-self: flex-end;

        margin-bottom: 2rem;
    }

    .nav-menu{

        position: fixed;

        top: 0;
        right: 0;

        width: 290px;
        height: 100vh;

        padding: 2rem;

        display: flex;
        flex-direction: column;

        gap: 1rem;

        list-style: none;

        background: #050505;

        border-left: 1px solid rgba(198,164,108,.25);

        box-shadow: -10px 0 35px rgba(0,0,0,.55);

        transform: translateX(100%);

        opacity: 0;
        visibility: hidden;

        transition: .4s ease;

        z-index: 1050;
    }

    .nav-menu.visible{

        transform: translateX(0);

        opacity: 1;

        visibility: visible;
    }

    .nav-menu.visible .close-menu{

        display: block;
    }

    .nav-menu > li{

        width: 100%;
    }

    .nav-menu > li > a {

        display: block;

        width: 100%;

        padding: 1rem;

        color: var(--text-main);
    
    }

    .dropdown {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    
    }

    .dropdown > a {
        flex: 1;
        display: block;
        padding: 1rem;
    }

    .dropdown-toggle {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: none;
    border: none;

    color: var(--gold);

    cursor: pointer;

    flex-shrink: 0;
    }


    .dropdown-menu {

        position: fixed;

        top: 0;
        right: 0;

        width: 290px;
        height:100vh;

        background: #050505;

        list-style: none;

        padding: 2rem;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        transform: translateX(100%);

        transition: .35s ease;
        opacity: 0;
        visibility: hidden;

        z-index: 1100;
    }

    .dropdown.active .dropdown-menu {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;
    }

    .dropdown-back {
        display: block;
        margin-bottom: 2rem;
    }

    .dropdown-back-btn {

        display: flex;
        align-items: center;
        gap: .8rem;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 1rem;

        cursor: pointer;

        margin-bottom: 1.5rem;

    }

    .dropdown-menu li {

        width: 100%;
    }

    .dropdown-menu a {

        display: block;

        width: 100%;

        padding: 1rem 0;

        color: var(--text-main);
    }
    

    .navbar h1 {
        padding: 0 2rem;
        font-size: 1rem;
    }

    .container {
        width: 94%;
    }

    section {
        padding: 3.5rem 0;
    }


    .hero,
    .page-hero,
    .page-hero-pdr,
    .experience-hero,
    .culture-hero,
    .services-hero,
    .team-hero,
    .contact-hero{
        min-height:60vh;
    }

    .hero h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:2.4rem;
        line-height:1.15;
    }

    .hero h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-heroh2{
        font-size:2rem;
        line-height:1.1;
        margin-bottom:1.5rem;
    }

    .hero p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .contact-hero p{
        font-size:0.95rem;
        line-height:1.7;
    }

    /*TITULOS*/

    .section-title{
        font-size:1.8rem;
        margin-bottom:2.5rem;
    }

    /*TARJETAS*/

    .service-card,
    .benefit,
    .about-card,
    .service-card-service,
    .mindset-item,
    .philosophy-item,
    .country-card{
        padding:2rem 1.5rem;
        min-height:auto;
    }

    .service-card h3,
    .benefit h3,
    .about-card h3,
    .service-card-service h2{
        font-size:1.4rem;
    }

    .service-card p,
    .benefit p,
    .about-card p,
    .service-card-service p,
    .mindset-item p,
    .philosophy-item p{
        font-size:0.95rem;
    }

    /*BOTONES*/

    .btn-primary,
    .experience-contact,
    .pdr-contact{
        width:100%;
        padding:1rem;
        font-size:.8rem;
    }

    /*QUOTES*/

    .quote-1 h2,
    .quote-3 h2,
    .about-statement h2{
        font-size:1.5rem;
        text-align:center;
    }

    .quote-1-content,
    .quote-3-content,
    .about-statement-content{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .quote-3-content{
        width:100%;
        min-width:0;
    }

    .quote-3-line{
        transform:none;
        margin:2rem auto 0;
    }

    /*IMÁGENES EQUIPO*/

    .team-maylon img,
    .team-jo img,
    .team-ve img{
        height:320px;
    }

    /*MAPAS*/

    .map-placeholder{
        min-height:220px;
    }

    .contact-map iframe{
        height:300px;
    }

    /*BEFORE AND AFTER*/

.beforeafter-slider {
    position: relative;
}

.beforeafter .container{
    gap:2.5rem;
}

.beforeafter-track{
    gap: 1rem;
}

.beforeafter-card{
    flex: 0 0 100%;
}

.slider-btn-prev,
.slider-btn-next{
    width: 46px;
    height: 46px;

    top: 42%;

    z-index: 100;
}

.slider-btn-prev{
    left: .8rem;
}

.slider-btn-next{
    right: .8rem;
}


    /*FOOTER*/

    .footer{
        text-align:center;
    }

    .footer-links,
    .footer-contact{
        align-items:center;
    }

    .footer-instagram{
        justify-content:center;
    }

    /*ESTADÍSTICAS*/

    .stat h3{
        font-size:2.2rem;
    }

    .stat p{
        max-width:none;
        font-size:.75rem;
    }


    /*WHY*/

    .why-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1.5rem;
    }

    .why-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        padding: 0.5rem;

        border: none;
        text-align: center;
    }

    .why-item img {
        width: 42px;
        height: auto;
        margin-bottom: 1rem;
    }

    .why-item span {
        display: block;
        max-width: 140px;
        font-size: .95rem;
        line-height: 1.4;
        margin: 0 auto;
    }

    /*ABOUT*/


    .about-content,
    .about-img {
        width: 100%;
    }

    .about-content {
        padding: 3rem 0;
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.8;
        text-align: left;
    }

    .about-content h2 {
        text-align: left;

        }

    .about-wrapper {
        display: flex;
        flex-direction: column;
    }

    .about-content,
    .about-img {
        width: 100%;
    }

    .about-content {
        padding: 3rem 0;
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .about-img img {
        display: block;
        width: 100%;
        max-height: 250px;
    }

    .stats-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .stat {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .stat h3 {
        font-size: 2.5rem;
    }

    .stat p {
        font-size: .9rem;
    }

    .about-wrapper{
        display:flex;
        flex-direction:column;
    }

    .about-content{
        padding:2rem 0 1rem;
    }

    .about-content p{
        text-align:left;
        margin-bottom:2rem;
    }

    .about-img{
        margin-top:1.5rem;
    }

    .about-img img{
        width:100%;
        max-height:320px;
        object-fit:cover;
        object-position:center;
        display:block;
    }

    .stats-grid{
        margin-top:2rem;
        gap:1.5rem;
    }

    .legal-content{

        padding:1.5rem;
    }

    .legal-content h1{

        font-size:1.9rem;
    }

}