/* ==========================================
   DESKTOP (min 768px)
   ========================================== */
@media (min-width: 768px) {
    
    #scrollToTop{
        bottom:2rem;
        right: 2rem;
    }
    
      .whatsapp-float {
    bottom: 2rem;
    left: 2rem;
    width: 56px;
    height: 56px;
  }
    
    .breadcrumbs{
        max-width: 700px;
    }

  .accordion-item {
    padding-bottom: 16px;
    margin-bottom: 18px;
  }

  .accordion-header {
    font-size: 18px;
    padding: 16px 20px;
    border-radius: 8px;
  }

  .accordion-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .accordion-content h4,
  .accordion-content h5 {
    font-size: 17px;
  }

  .list-legal {
    padding-left: 26px;
  }

  .list-legal li {
    margin-bottom: 8px;
  }

  .about-page-hero,
  .services-page,
  .breadcrumbs{
  padding: 2rem 3rem;

}

  .services-home{
    padding:13rem 3rem 15rem;
  }

.services-page h1{
  text-align: left;
}
 
  .main-container-skills h3{
  padding: 0 3rem;

}

.hero-bg-img {
  object-fit: contain;
}




.wrapper-flower{
  width: 50%;
  margin:-6rem 0;
}

.footer-contact-content{
    margin:0;
}

/*====================
PAGE CONTACT
======================*/

.contact-section{
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 2rem 3rem;
margin: 0 auto 4rem;
}

.contact-content{
width: 100%;
}

.contact-intro{
width: 100%;
}


.form-contact-page-services {
display: flex;
flex-direction: column;
gap:0;
width: 100%;
max-width: 1100px;
padding:0;
}

.about-page-hero {
    min-height: 400px;
    margin: 2rem auto 2rem;
}



/* ================================     Galeria de imagenes proyectos    ================================ */

  .gallery-small {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
  }

  .gallery-small img,
  .gallery-small-projects img {
    height: 140px;
    width: 180px;
  }

.projects-hero,
.illustrations,
.about-page-hero,
.about-creative p,
.wrapper-cta-description,
.section-technical-skills,
.container-img-text,
.services-page,
.services-home p,
.box-head-technical-skills,
.section-soft-skills p,
.projects-grid,
.section-footer .footer-menu,
.services-home .services-intro,
.footer-container,
.title-projects-home p,
.hero-text-cta,
.section-legal{
  max-width: 900px;
}


/*Imagen proceso proyectos*/
.wrapper-img-process{
    max-width: 420px;
}

.cta-mssg img{
    width: 50%;
    height: 400px;
    top:-2rem;
    
}

.container-projects{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}


 .error-404-container {
        flex-direction: column-reverse;
        gap: 40px;
        text-align: center;
    }

    .error-404-text {
        align-items: center;
    }

    .error-404-img {
        width: 200px;
    }

    .error-404-text h1 {
        font-size: 2rem;
    }

}

/* ===========================   DESKTOP 1024  =========================== */

@media (min-width: 1024px) {



  .image-expand-modal img,
  .image-expand-modal video {
    max-width: 1100px;
  }

  /* ===========================
        MENÚ NAVEGACIÓN DESKTOP
        =========================== */

.header-style{
  padding: 1rem 4rem;
}       

/* Mostrar menú desktop */
.nav-bar-desktop {
  display: flex;
  align-items: center;
}



/* Ocultar menú móvil */
.nav-left {
  display: none !important;
}

/* LOGO: pasa a la izquierda */
.nav-center {
  position: static;
  transform: none;
  justify-content: flex-start;
  flex: 1;
}

/* Cambia logos */
.logo-desktop { display: block; }
.logo-mobile { display: none; }

/* Menú desktop alineado a la derecha */
.nav-right {
  display: flex;
  justify-content: flex-end;
  flex: 2;
}

.nav-bar-menu {
  display: flex;
  gap: 1rem;
  list-style: none;
}
.nav-bar-menu li a {
position: relative;
padding: 1rem 1.2rem;
font-family: var(--font-ui);
font-weight: var(--font-bold);
text-decoration: none;
color: var(--secondary-800);
overflow: hidden; /* evita saltos */
}

/* Línea inicial oculta (escala 0 desde la derecha) */
.nav-bar-menu li a::after {
content: "";
position: absolute;
bottom: 0.4rem; /* ajusta para acercarlo o alejarlo del texto */
right: 0;
width: 100%;
height: 3px; /* grosor de la raya */
background-color: var(--yellow-500);
transform: scaleX(0);
transform-origin: right; /* ⭐ Animación desde la derecha */
transition: transform 0.35s ease;
}

/* Hover: la línea se despliega hacia la izquierda */
.nav-bar-menu li a:hover::after {
transform: scaleX(1);
transform-origin: left; /* ⭐ Termina hacia la izquierda */
}

.nav-bar-menu li a:active{
color:var(--yellow-500);
}

.header-style.scrolled .nav-bar-menu li a{
color:var(--secondary-890)
}
/*HERO HOME*/








.hero-text-cta{
  margin-top: 0;
}





/*================== HOME =====================*/

/* ===========================
cta-description desktop
  =========================== */

.wrapper-cta-description{
  align-items: center;
  margin-bottom:9rem;
  gap: 3rem;
  padding: 2rem;
  max-width: 1220px;

}

.wrapper-cta-description h2,
.wrapper-cta-description p{
    max-width: 900px;
  text-align: center;
}

/* ===========================
Services desktop
  =========================== */

.services-home{
  text-align: center;
  align-items: center; 
  padding: 10rem 0 10rem;
  z-index: 0;
}

.services-buttons{
    max-width: 1100px;
flex-direction: row;
flex-wrap: nowrap;
  width: 100%;
}


.wrapper-heart{
display: none;
}

.warapper-heart img{
width: 100%;
height: auto;

}


/*==========================
TESTIMONIALS HOME
  =========================== */


  .testimonials-container{
  display: flex;
  flex-direction: row;  
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  }


/*=========================
CONTACT HOME 
===============*/


/* =========================
  CONTACT HOME – DESKTOP
  ========================= */





/* Contenedor del texto */
.contact-container { 
    position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr; 

  text-align: right;
  gap:1rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem  1rem 0;
    z-index: 5;
  
}
.contact-conatiner span{
  grid-column: 1;
  grid-row: 1 / span 3;
}
.contact-container h2{
  grid-column:1;
  grid-row: 2;
}

.contact-container .subtitle{
  grid-column:1;
  grid-row: 3;
}
.contact-container p{
  grid-column:1;
  grid-row: 4;
  }

  
  .contact-container .hero-cta-button{
    grid-column:1;
    grid-row: 5;
  } 

  /* ilustración superpuesta */
.wrapper-contact {

  grid-column: 2;
  grid-row: 1 / span 6;
    margin-left: 4rem;
}


/*==================
PROJECTS HOME 
=====================*/


.title-projects-home{
grid-column: span 4;
}



.projects-more{
grid-column: span 4;
}

.container-projects{
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.5rem;
  
}

/*=======================
ABOUT home
=====================*/





/*==================
FOOTER
=====================*/

.section-footer{
  display: grid;
  grid-template-columns: 1fr;
  gap:4rem;
padding: 6rem 3rem 2rem;
}
.section-footer .footer-menu{
    width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;

}

.container-menu-1,
.container-menu-2{
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-end;
  gap:2rem;
  margin-top: 0;
}

.footer-contact-content{
  justify-content: end;
  align-items: center;
  margin:0;
}

.box-logo-copy{
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.box-logo-copy .footer-logo{
  margin-left: auto;
}

.box-logo-copy .footer-copy{
  margin-left: 17rem;

}


.wrapper-flower{
  width: 40%;
  margin:-6rem 0;
}

.services-home .services-intro,
.title-projects-home p {
  text-align: center;
  max-width: 1000px;
  margin:auto;
}
/*=========================== PAGES ====================*/

.breadcrumbs,
.project-detail{
  max-width: 1200px;
  margin: auto;
}

/* ===== PROJECTS PAGE ===== */

#page-projects .projects-grid{
  max-width: 1200px;
  margin: 4rem auto 6rem;
 
}

/* ===========================
PROJECTS PAGE DESKTOP
  =========================== */
.projects-hero,
.breadcrumbs,
.about-page-hero,   
.about-creative,
.illustrations{
  padding: 2rem 3rem;
}


/*IMAGENES PROYECTOS CON COLOCACION CHULA*/

/* Desktop */

/* ---- Desktop ---- */

.project-detail,
.section-legal{
  padding: 2rem 3rem;
}

.projects-hero,
.illustrations,
.about-page-hero,
.about-creative p,
.section-technical-skills,
.container-img-text,
.services-page,
.box-head-technical-skills,
.section-footer .footer-menu,
.contact-container,
.footer-container,
.contact-intro,
.hero-text-cta,
.section-legal{
  max-width: 1200px;
}

.about-creative{
    max-width: 1400px;
}
 .close-detail{
  right: 3rem;
  left: 97%;
  top:3rem
}

  .detail-gallery {
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    gap: 3rem;
  }

  .detail-gallery img {
    align-self: center;
    width: 600px;
    border-radius: 12px;
  }

  .container-gallery .gallery-small {
              /* columna izquierda */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* cuadricula bien ordenada */
    gap: 2rem;
  }

  .container-gallery .gallery-small img,
   .container-gallery .gallery-small video {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
  }

  .gallery-small-projects{
    flex-direction: row;
    
  }




  /*======================
  PAGE ABOUT ME 
  =========================*/




.items-technical-skills{
flex-direction: row;
}

.skills_one, .skills_two{
display: flex;
flex-direction: column;
align-items: center;
}

.container-img-text{
  padding: 0 3rem;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
   text-align: left;
  gap:1rem;
  margin:3rem auto 1rem;
}

.container-img-text .wrapper-img-about{
flex:2;}

.about-page-hero .cta-2{
  text-align: left;
}

.container-img-text span{
 flex:1;
 padding: 0 3rem;

}

.section-soft-skills p{
  max-width: 600px;
  text-align: center;
}
.items-soft-skills{
flex-direction: row;
  align-items: stretch;
}

.card-soft p{
    max-width: 300px;
}

/*IMAGENES DIJIENDO*/
.creative-image img {
width: 200px; /* Puedes ajustarlo */
}

/*=====================
PAGE SERVICES
=========================*/
.services-page{
  padding: 2rem 3rem;
  margin:0 auto 10rem;
}



  .services-categories {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .category-box {
    flex: 1;
    transition: flex .4s ease;
  }

  .category-box.is-expanded {
    flex: 3;
  }

  .category-box.is-collapsed {
    flex: 1;
  }


 /*Servcies process*/
 .services-proccess-container{
     padding: 1rem 0;
     gap:5rem;
 }

  .process-item{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: flex-start;
  }

  .container-title-process-item{
    grid-column: span 2;
    grid-row:span 3;
  }


.wrapper-img-process{
  grid-column: 3;
  grid-row: 2;
  height: 350px;          /* altura visible */
  overflow: hidden;       /* recorta lo que sobra */
  border-radius: 20px;
}

.wrapper-img-process img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;      /* recorte bonito */
}
 

  .process-project{
    grid-column: span 3;
    grid-row: 4;
    align-items: center;
  }

  .list-process{
    flex-direction: row;
  }

  .list-process li{
    font-size: 1rem;
    padding: 1.5rem 2rem;
  }

/*=============================== MODALS =================*/

/*========================
 OVERLAY CONTACT
 ==========================*/
/********************************************
  DESKTOP — 2 COLUMNAS
********************************************/
  .modal-contact {
    align-items: center; /* ya no hay riesgo porque el modal tiene max-height */
    padding: 3rem;
  }

  .modal-content-contact {
    width: 90vw;
    max-width: 1200px;
    padding: 2.5rem;

    /* IMPORTANTE → asegura scroll interno si es grande */
    max-height: calc(100vh - 6rem);
  }

  /* Form en dos columnas */
  .form-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }

  .input-asunto,
  .input-mensaje,
  .box-checkbox-button {
    grid-column: span 2;
  }


/*=====================LEGAL PAGES ========================================*/

.accordion-header {
    font-size: 20px;
    padding: 18px 24px;
  }

  .accordion-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .accordion-content h4 {
    font-size: 18px;
  }

  .accordion-content h5 {
    font-size: 17px;
  }

.about-page-hero h1{
  text-align: center;
}


/*================== CONTACT ===============*/
.contact-section{
    max-width: 1200px;
    margin-bottom: 4rem;
}

.contact-content {
  max-width: 900px;
}



    .error-404-container {
        flex-direction: row;
        text-align: left;
        gap: 60px;
    }

    .error-404-text {
        align-items: flex-start;
        max-width: 480px;
    }

    .error-404-text h1 {
        font-size: 2.5rem;
    }

    .error-404-img {
        width: 280px;
    }

}

/*========================PANTALLA 1280 ===========================================*/ 
@media (min-width: 1280px) {
  /* ================================     page about    ================================ */

.hero-container{
  padding: 2rem;
  flex-direction: row;
}

.hero-container .hero-index{
  flex: 2;
}

.hero-container .hero-content{
    align-items: flex-start;
}

.hero-text{
  text-align: left;
}
.container-text-about{
  grid-row: 2;
  grid-column:span 2;
  margin-left: 2rem;
}
 
.cta-description{
display: flex;
flex-direction: column;
}


.cta-mssg{
  justify-content: flex-start;
  flex-direction: row;
}

.cta-mssg img{
width: 50%;
height: 450px;

top:-3rem;
}

.cta-mssg-contain{
  gap:2rem;
  padding-top:6rem;
}
 .cta-mssg-contain p{
  width: 100%;
  max-width: 500px;
  text-align: left;
}

.form-right{
  top:-30%;
}
.form-left{
  top:-43%;
}


.hero-text{
    align-items: flex-start;
    margin-bottom:2rem;
}
}

/*====================== PANTALLAS GRANDES ================================*/
 
@media (min-width: 1960px) {

    .image-expand-modal img,
  .image-expand-modal video {
    max-width: 1100px;
  }


 
.projects-hero-title{
  margin:auto;
  max-width: 1400px;
}

/* ===== INDEX ===== */
 #page-home .hero-index{
  flex:2;
  background-size: 60%; 
  max-height: 1000px;
}


.btn-hero{
  top:25rem;
  right: 33%;
}

.services-home{
  padding: 30rem auto 13rem;
  background-size: 30%;
}




.services-intro{
  margin:0;
}

.services-page{
  margin:0 auto 10rem;
}


.wrapper-flower{
  left:4rem;
}


/* PAGES*/

.about-page-hero{
  width: 1400px;
}

.box-head-technical-skills{
text-align: center;
max-width: 1400px;
margin: auto;
}


.items-technical-skills{
flex-direction: row;
}

.skills_one, .skills_two{
display: flex;
flex-direction: column;
align-items: center;
}

.main-container-skills{
    padding: 6rem 0 0 ;
}




/*================== CONTACT ===============*/
.contact-section{
    max-width: 1400px;
    margin:0 auto 4rem;
}


.breadcrumbs{
  max-width: 1400px;
  margin: auto;
}


.project-detail,
.box-head-technical-skills,
.projects-grid,
.contact-conatiner,
.projects-hero,
.illustrations,
.about-page-hero,
.section-technical-skills,
.items-soft-skills,
.services-page,
.services-page-intro,
.services-page .services-intro,
.container-form-contact-page,
.container-img-text{
  max-width: 1400px;
 }

}