/*=========================================================
  RESPONSIVE DESIGN — Versión ligera (Mobile First)
  Iras Dargor | Victor Cruz
=========================================================*/

/*==========================
  ≥ 768px — Tablets
==========================*/
@media (min-width: 768px) and (max-width: 1024px){

  .main-header {
    height: 120px;
    padding: 0 2rem;
  }
  .header-right{gap: 25rem;}
  .social{font-size: 2.5rem;}
  .menu-toggle{font-size: 1.3rem;}
  .menu-toggle i{font-size: 2.5rem;}
  .mobile-menu{width: 60%;}
  .logo img{width: 100%}

  /* ----- HERO ----- */
  #hero {
    padding: 5rem 0;
    text-align: left;
  }
  #hero .flexstart80{padding-bottom: 10rem;}
  .hero-text { max-width: 550px; }
  .titleblack { font-size: 3.5rem; }
  .scroll-down{bottom: 8rem;width: 6rem;height: 6rem;}
  .scroll-down i{font-size: 3rem;}

  /* ----- LAYOUT GENERAL ----- */
  .container-colums {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
  }
  .column-left, .column-right {width: 48%;}
  .column-right{margin-top: 0;}
  .column-right .item-list {flex-direction: row-reverse;}
  .column-right .item-list .list-info {text-align: right;}
  .column-right .item-list .icon-list {margin-right: 10px;}
  .divider-left{width: 15%;}
  .item-list{
    min-height: 200px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .item-list .list-info{width: 80%; margin-right: 10px;}
  #btn-up{width: 6rem;height: 6rem;}
  #btn-up i {font-size: 3rem;}
  .slider-nav-buttons{right: 10%;}

  /* ----- SECCIONES ----- */
  #about .column-right img,
  #services .icon-list img {
    width: 100%;
  }

  .card {
    flex: 0 0 45%;
    margin-left: 1.5rem;
    /*padding: 3rem 2rem;*/
  }
  #portfolio{padding: 0;}
  #portfolio .container-project {flex-direction:column;}
  #portfolio .container-colums{align-items: center;}
  .container-info-project,
  .container-image-project {
    width: 100%;
  }
  #consultancy{
    flex-direction: row;
    padding-bottom: 0;
    min-height: auto;
    height: 52vh;
  }
  .container-image_consultancy{height: 100%; width: 40%;}
  .container-image_consultancy img{width: auto!important;height: 100%;}
  .info-consultancy{width: 60%;}

  .footer .container-colums {
    flex-direction:column;
  }
  .footer .column-left, 
  .footer .column-right {
    width:100%;
  }
  .footer .container-infofooter{flex-direction: row;}
  .footer .container-image{width: 250px;height: 190px; border-radius: 100%; align-items: end;}
  .footer .container-info-project{margin-left:1rem; text-align: right;}
  .footer .socials{gap: 15rem; margin-top: 2rem;}
  #about_hero{padding-top: 10rem;}
  #about_hero .hcard{width: 40%;}
  #about_hero .container-colums{flex-direction: column;}
  #about_hero .column-left, #about_hero .column-right{width: 100%;}
  #clients{min-height: auto;height: 60vh;}
  #clients .container-list{justify-content: space-between;margin-top: 3.5rem;}
  #clients .container-list .container-logo{width: 25%;}
  #experience-edu .item-list{min-height: 250px;}
}


/*============================
  ≥ 992px — Desktop estándar
============================*/
@media (min-width: 992px) {
  /* ----- HEADER ----- */
  .mobile-menu, .menu-toggle { display: none; }
  .desktop-menu { display: block; }
  .btn-consult-desktop { display: inline-block; }

  .main-header .flex80{flex-direction: row; justify-content: space-between;}
  .main-header .logo{justify-content: flex-start;}
  .main-header .header-right{gap: 1.5rem;}

  body { font-size: 15px; }
  .flex80, .container-flex80 { width: 80%;}

  .scroll-down {width: 6.5rem;height: 6.5rem; bottom: 7rem;}
  .scroll-down i{font-size: 3rem;}

/* ----- LAYOUT GENERAL ----- */
  .container-colums {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
  }
  .subtitle-section{font-size: 1.5rem;}
  .column-left, .column-right {width: 48%; margin-bottom: 0;}
  .column-right{margin: 0;}
  #btn-up{width: 6.5rem;height: 6.5rem; right: 10%;}
  #btn-up i {font-size: 3rem}
  .slider-nav-buttons{right: 8%;}
  /* HERO */
  #hero .flexstart80{padding-bottom: 8rem;}
  .hero-text { max-width: 600px; }
  .titleblack { font-size: 4rem; }
  .item-list{flex-wrap: nowrap; align-items: flex-start; min-height: 150px;}
  .item-list .list-info{width: 80%; margin-right: 10px;}
  .column-right .item-list {flex-direction: row-reverse;}
  .column-right .item-list .list-info {text-align: right;}
  .column-right .item-list .icon-list {margin-right: 10px; margin-left: 0;}

  .carousel-nav-buttons{
    position: absolute;
    right: 10%;
    top:5rem;
    width: 20%;
  }
  .carousel-nav-btn {width: 120px;height: 78px;}
  .carousel-nav-btn i{font-size: 3rem;}

  /* CARDS */
  .card {
    flex: 0 0 30%;
    margin-left: 2rem;
  }
  .card:nth-child(1){ margin-left: 6rem;}

  /* PORTFOLIO */
  #portfolio .container-project {
    gap: 2rem;
  }
  #portfolio .container-colums{align-items: center;}

  #consultancy{
    flex-direction: row;
    padding-bottom: 0;
    min-height: auto;
    height: 100vh;
  }
  #consultancy .titleblack {width: 85%;}
  .container-image_consultancy{height: 100%; width: 40%;}
  .container-image_consultancy img{width: auto!important;height: 100%;}
  .info-consultancy{width: 60%;}


  /* FOOTER */
  .footer {
    flex-direction:column;
    align-items: center;
    padding: 2.5rem 0;
  }
  .footer .column-right{padding-left: 2.5rem;}
  .footer .column-left{align-items: flex-start;}
  .footer .column-left .container-infofooter{flex-direction: row;}
  .footer .container-image{border-radius: 100%; width: 190px; height: 160px; margin-right: 20px;}
  .footer .container-info-project{width: 80%;}
  .footer .name{font-size: 1.6rem;}
  .footer .profile{font-size: 1rem;}
  .footer .socials{gap:2rem; margin-top: 10px;}
  .footer .social{font-size: 1.8rem;}
  .footer .divider-left{width: 28%;}

  #about_hero .container-colums{align-items: center;}
  #about_hero .hcard{width: 56%;}
  #experience .container-hcards{justify-content:flex-end;}
  #experience .hcard{width:48% ;}
  #experience .hcard:nth-child(1){margin-right: 15px;}
  #experience .titlemedium{width: 80%;}
  #tools .titlemedium{width: 73%;}
  #clients .container-list{justify-content: space-between;margin-top: 3.5rem;}
  #clients .container-list .container-logo{width: 18%;}
  #experience-work .titlemedium{width: 80%;}
  #experience-work .item-list{min-height: 250px;}
  #experience-edu .item-list{min-height: 180px;}
  #portfolio-projects .slide { margin-top: 0; padding-top:0;}
  #portfolio-projects .container-project{flex-direction: row; border-radius: 0;}
  #portfolio-projects .info-project{min-height: 500px;}
  #portfolio-projects .container-info-project{height: 100vh; width: 50%;}
  #portfolio-projects .name-empresa {font-size: 1.2rem;padding-left: 5.5rem;}
  #portfolio-projects .name-project{font-size: 2.5rem; padding-left: 5.5rem;}
  #portfolio-projects .text{padding-left: 5.5rem;}
  #portfolio-projects .divider-left{width: 30%;margin-top: 10px;margin-bottom: 10px;}
  #portfolio-projects .container-labels{width: 80%;padding-left: 5.5rem;}
  #portfolio-projects .container-image-project{height: 100vh; width: 50%;}
}


/*========================================
  ≥ 1200px — Pantallas grandes (HD o 4K)
========================================*/
@media (min-width: 1200px) {

  body {font-size: 16px;}
  .flex80, .container-flex80 { width: 80%; }
  .titleblack { font-size: 4.5rem; }
  .titlemedium { font-size: 2.5rem; }
  .main-header{padding: 0;}
  .main-header .logo img{width: 100%;}
  .subtitle{font-size: 2.5rem;}
  .titlemedium{font-size: 4rem;}
  .titleblack{font-size: 5.5rem;}
  .main-header .social{font-size: 1.6rem;}
  #btn-up{width: 8rem;height: 8rem;}
  #btn-up i {font-size: 4rem}
  #about,#skills,#portfolio,#consultancy,#about_hero,#portfolio-projects, section{padding: 0;}
  section{height: 100vh;}
  .subtitle-section{font-size: 2rem; margin-bottom: 3.5rem;}
  .container-colums{height: 100%;align-items: center;}
  #about .container-list{justify-content: flex-end;}
  .container-list .item{height: 30%;}
  .number{font-size: 8rem;}
  .title-item{font-size: 2rem;}
  .link-arrow {font-size: 2rem;}
  .arrow{font-size: 3.5rem;}
  .link-arrow:hover .arrow{font-size: 4rem;}
  .item-list {min-height: 200px;}
  .list-name {font-size: 3rem;}


  #hero{padding: 0;}
  .hero-text { max-width: 780px; }
  .carousel-container { width: 100%; }
  #hero .flexstart80 {padding-bottom: 11rem;}
  .scroll-down {bottom:3rem; width: 8rem; height: 8rem;}
  .scroll-down i{font-size: 4rem;}
  #services
  #services .container-colums{height: auto;}
  .carousel-nav-buttons {top: 8rem;}
  .card{padding: 6rem 3rem;}
  .card:nth-child(1) {margin-left: 12rem;}
  #portfolio .container-project {gap: 2rem; height:81vh; width: 80%;}
  #portfolio .column-right {display: flex; justify-content:flex-end;}
  #portfolio .container-info-project{padding: 0;}
  #portfolio .description, #portfolio .name-project{ font-size: 2rem;}
  #portfolio .container-image-project{height: 50%; width: 100%;}
  #portfolio .container-image-project img{ width: auto; height: 100%;}
  .container-callto {
    width: 82%;
    flex-direction:row;
    align-items:center;
    margin-top:30px ;
  }
  .footer{padding: 4rem 0;}
  .footer .column-right{padding-left: 20rem;}
  .footer .name { font-size: 2.5rem; }
  .footer .profile { font-size: 1.3rem;}
  .footer .socials{margin-top: 30px;}
  .footer .social{font-size: 2.5rem;}
  .footer .divider-left {width: 25%;}
  .copy{font-size: 0.8rem;}
  
  #portfolio-projects .text {padding-left: 5.5rem;}
  #portfolio-projects .info-project {min-height: 600px;}
  #portfolio-projects .container-info-project {
    height: 100vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  #portfolio-projects .slide{display: flex; align-items: flex-start;justify-content: flex-start;}
  #portfolio-projects .container-project{display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;      /* mantiene consistencia */
  box-sizing: border-box;}
  #portfolio-projects .container-image-project {align-items: flex-end;}
  #portfolio-projects .slide-content{ width: 100%; margin: 0 auto;}
  #about_hero .column-right{height: 100vh; display: flex; justify-content: flex-end; align-items: flex-end;}
  .about-image{ width: auto;height: 90%;}
  #about_hero .hcard {width: 33%;}
  #experience  .container-colums { align-items:flex-start; margin-top: 2rem;}
  #clients .container-list .container-logo img {width:75%;}
  #experience-edu .item-list {min-height: 220px;}
  #experience-edu .container-colums{align-items:flex-start;}
}