/* =========================================================
   JHONAS v7 — RESPONSIVE ONLY
   No cambia diseño, colores, motion ni contenido.
   Solo adapta el layout por tamaño de pantalla.
   ========================================================= */

/* PC grande */
@media (min-width:1440px){
  .container{max-width:1240px}
}

/* Laptop / desktop medio */
@media (max-width:1280px){
  .container{width:min(94%,1180px)}
  .nav-links{gap:24px}
  .hero-grid{column-gap:38px}
}

/* Laptop pequeño */
@media (max-width:1100px){
  .nav{gap:18px}
  .nav-links{gap:18px}
  .nav-cta{padding-inline:16px}

  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(390px,.95fr);
    gap:26px;
  }

  .project-grid-carousel{
    grid-auto-columns:calc((100% - 14px)/2)!important;
  }

  .about-grid{
    grid-template-columns:1fr 1.08fr;
  }

  .cta-grid{
    grid-template-columns:minmax(0,1fr) 270px!important;
  }
  .cta-results{display:none!important}

  .service-detail-grid{gap:42px}
}

/* Tablet horizontal */
@media (max-width:900px){
  .site-header .nav{min-height:72px}

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-top:1px solid #e7edf5;
    box-shadow:0 18px 36px rgba(11,35,67,.10);
    padding:8px 4%;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:14px 4px!important;
    border-bottom:1px solid #eef3f8;
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-cta{display:none}

  .hero-grid{
    grid-template-columns:1fr;
    gap:30px;
    min-height:auto;
    padding:68px 0 40px;
  }

  .hero-copy{max-width:720px}

  .hero-visual.hero-code-preview{
    display:block!important;
    width:100%;
    max-width:720px;
    min-height:340px;
    justify-self:center;
    margin:0 auto;
  }

  .hero-code-window{
    inset:18px 4% 8px 4%!important;
  }

  .value-grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:18px;
  }

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

  .process-grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:22px;
  }

  .tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}

  .project-grid-carousel{
    grid-template-rows:repeat(2,180px)!important;
    grid-auto-columns:calc((100% - 14px)/2)!important;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .about-grid > :last-child{
    border-left:0!important;
    border-top:1px solid #dbe7f1;
    padding-left:0!important;
    padding-top:26px;
  }

  .cta-grid{
    grid-template-columns:1fr 280px!important;
    gap:24px!important;
  }

  .projects-catalog{grid-template-columns:1fr}

  .service-detail-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

/* Tablet vertical / móvil grande */
@media (max-width:720px){
  .container{width:min(92%,100%)}

  .brand-logo img{max-width:190px}

  .hero-grid{
    padding-top:52px;
    gap:22px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }

  .hero-visual.hero-code-preview{
    display:block!important;
    min-height:300px!important;
  }

  .hero-code-window{
    inset:10px 1% 5px 1%!important;
  }

  .value-grid{grid-template-columns:1fr}

  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .service-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}

  .project-grid-carousel{
    grid-template-rows:repeat(2,170px)!important;
    grid-auto-columns:86%!important;
  }

  .projects-carousel-shell .carousel-arrow{
    display:none!important;
  }

  .cta-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .footer-main{
    grid-template-columns:1fr;
    gap:26px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .projects-catalog{grid-template-columns:1fr}

  .service-detail-grid{grid-template-columns:1fr}
}

/* Móvil */
@media (max-width:480px){
  .container{width:min(91%,100%)}

  .site-header .nav{min-height:66px}
  .brand-logo img{max-width:165px}

  .hero-grid{
    padding:42px 0 30px;
  }

  .hero-visual.hero-code-preview{
    display:block!important;
    min-height:248px!important;
  }

  .hero-code-window{
    inset:6px 0 2px 0!important;
    border-radius:14px!important;
  }

  .hero-code-body{
    min-height:190px!important;
    padding:16px 12px!important;
    gap:12px!important;
  }

  .typing-code{
    min-width:0!important;
    font-size:9px!important;
  }

  .results{font-size:12px!important}

  .section{padding:50px 0}

  .tabs{margin-inline:-2px}

  .project-grid-carousel{
    grid-template-rows:repeat(2,166px)!important;
    grid-auto-columns:92%!important;
  }

  .project-grid-carousel .project-card{
    grid-template-columns:56px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:12px!important;
  }

  .project-grid-carousel .project-icon,
  .project-grid-carousel .project-icon img{
    width:56px!important;
    height:56px!important;
  }

  .principles{grid-template-columns:1fr!important}

  .cta-actions .btn{width:100%}

  .catalog-card{
    grid-template-columns:54px 1fr;
    padding:16px;
  }

  .catalog-card img{
    width:54px;
    height:54px;
  }
}

/* Móvil pequeño */
@media (max-width:360px){
  .brand-logo img{max-width:145px}

  .hero-visual.hero-code-preview{
    min-height:226px!important;
  }

  .hero-code-body{
    min-height:174px!important;
    padding:14px 10px!important;
  }

  .typing-code{font-size:8.5px!important}
  .results{font-size:11px!important}

  .project-grid-carousel{
    grid-auto-columns:96%!important;
  }
}