@media(max-width:768px){

  .Menu{
    height:90px;
    padding:0 20px;
    position:relative;
    z-index:9999;
  }

  .Logo{
    max-width:170px;
  }

  .MenuIcon{
    display:block;
  }

  .theme-toggle{
    position:absolute;
    right:70px;
    top:24px;
  }

  .MenuNav{
    display:none !important;
    position:fixed;
    top:95px;
    right:20px;
    width:200px;
    padding:20px;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);

    flex-direction:column;
    align-items:flex-start;
    gap:18px;

    z-index:99999;
    animation:menuFade .25s ease;
  }

  #menu-toggle:checked ~ .MenuNav{
    display:flex !important;
  }

  #menu-toggle:checked ~ .theme-toggle{
    display:none;
  }

  .MenuNav a{
    font-size:14px;
  }

  .inicio{
    min-height:calc(100vh - 90px);
    height:auto;
    padding:110px 24px 50px;
    justify-content:flex-start;
    background-size:850px;
    background-position:center 70px;
  }

  .inicio h1{
    font-size:48px;
    line-height:52px;
  }

  .inicio h2{
    font-size:42px;
    line-height:48px;
    margin-bottom:25px;
  }

  .inicio p{
    font-size:21px;
    line-height:35px;
    margin-bottom:35px;
  }

  .BotonesHero{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
  }

  .btnverde,
  .btntransparente{
    width:100%;
    margin:0;
    padding:18px 20px;
    text-align:center;
    font-size:16px;
  }

  .beneficios,
  .servicios,
  .proceso,
  .cta,
  .contacto,
  .portafolio,
  .pagina-hero,
  .servicios-detalle,
  .portafolio-page{
    padding:70px 25px;
  }

  .beneficios h2,
  .servicios h2,
  .proceso h2,
  .cta h2,
  .contacto h2,
  .portafolio h2{
    font-size:34px;
  }

  .subtitulo,
  .servicios > p,
  .proceso-subtitulo,
  .cta p,
  .contacto p,
  .portafolio > p,
  .pagina-hero p,
  .proyecto-info p{
    font-size:18px;
    line-height:30px;
  }

  .pagina-hero h1{
    font-size:38px;
  }

  .card,
  .servicio-card,
  .proceso-card{
    padding:35px 25px;
  }

  .footer-contenido{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-logo{
    margin:auto auto 20px;
  }

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

  .proyecto-img{
    min-height:240px;
  }

  .proyecto-info{
    padding:35px 25px;
  }

  .proyecto-info h2{
    font-size:30px;
  }
}

@media(max-width:480px){

  .inicio{
    min-height:calc(100vh - 90px);
    padding:90px 24px 50px;
    background-size:750px;
    background-position:center 90px;
  }

  .inicio h1{
    font-size:42px;
    line-height:46px;
  }

  .inicio h2{
    font-size:34px;
    line-height:40px;
  }

  .inicio p{
    font-size:19px;
    line-height:32px;
  }

  .whatsapp-float{
    width:55px;
    height:55px;
    right:18px;
    bottom:18px;
    font-size:27px;
  }
}