/* ==========================================================================
   JELCES — Adaptaciones responsive (mobile-first)
   --------------------------------------------------------------------------
   styles.css define la base para móvil (320–767px). Aquí se añaden,
   progresivamente, las mejoras para tablet, portátil y escritorio grande.
   Rangos objetivo:
     · Móvil pequeño   320–480px  (estilos base, sin media query)
     · Móvil estándar  481–767px  (estilos base, sin media query)
     · Tablet          768–1023px (min-width:768px)
     · Portátil        1024–1439px(min-width:1024px)
     · Desktop grande  1440px+    (min-width:1440px)
   ========================================================================== */

/* ---------- Móvil estándar: pequeños ajustes de respiración ---------- */
@media (min-width:481px){
  .wrap{padding:0 28px}
  .frow{grid-template-columns:1fr 1fr}
  .method-grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Tablet (768–1023px) ---------- */
@media (min-width:768px){
  :root{--header-h:103px}
  .wrap{padding:0 32px}
  .section{padding:72px 0}
  .section--tight{padding:56px 0}

  h1{font-size:clamp(2.6rem,6vw,4.05rem)}
  h2{font-size:clamp(2rem,4vw,2.6rem)}

  .brand img{height:71px}
  .nav{height:103px}
  .mobile-menu{inset:var(--header-h) 0 0 0}

  /* La navegación de escritorio (enlaces + CTA) necesita más espacio horizontal
     del que ofrece una tablet en vertical; el menú hamburguesa se mantiene
     hasta el salto a portátil (ver bloque 1024px). */

  .hero-grid{padding-top:56px;padding-bottom:72px}

  .verticals{grid-template-columns:1fr 1fr;gap:24px}
  .reasons{grid-template-columns:1fr 1fr;gap:20px}
  .split{grid-template-columns:1fr 1fr;gap:40px}
  .contact-grid{grid-template-columns:.85fr 1.15fr;gap:36px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}

  .footer-top{grid-template-columns:1fr 1fr;gap:32px}

  .ctaband,.qbox{padding:44px 40px}
  .cookie{left:16px;right:16px;bottom:16px}
}

/* ---------- Portátil (1024–1439px) ---------- */
@media (min-width:1024px){
  :root{--header-h:114px}
  .wrap{padding:0 clamp(20px,5vw,40px)}
  .section{padding:clamp(64px,9vw,120px) 0}
  .section--tight{padding:clamp(48px,6vw,80px) 0}

  h1{font-size:clamp(2.4rem,5.4vw,4.05rem)}
  h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
  body{font-size:17px}

  .brand img{height:81px}
  .nav{height:114px}

  /* Navegación de escritorio: a partir de aquí hay espacio para mostrar
     todos los enlaces y el CTA sin que se apretujen ni desborden. El logo
     ahora ocupa bastante más ancho, así que se compacta el espaciado de
     los enlaces para que quepan en una sola línea junto al CTA. */
  .nav-links{display:flex;align-items:center;gap:0}
  .nav-links a{font-size:.85rem;padding:8px 9px}
  .nav-cta{display:flex;align-items:center}
  .nav-cta .btn{padding:13px 18px;font-size:.88rem}
  .nav-toggle{display:none}
  .mobile-menu{display:none!important}

  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px;
    padding-top:clamp(48px,7vw,92px);padding-bottom:clamp(56px,8vw,104px)}
  .hero-art{max-width:460px;aspect-ratio:1/1.02}

  .method-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}

  .ctaband,.qbox{padding:clamp(40px,6vw,64px)}
  .ctaband h2{max-width:18ch}

  .subhero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(32px,4vw,48px)}
  .subhero h1{font-size:clamp(2.1rem,4.6vw,3.35rem)}

  .footer-brand img{height:64px}
}

/* ---------- Desktop grande (1440px+) ---------- */
@media (min-width:1440px){
  :root{--maxw:1240px;--header-h:121px}
  .hero-art{max-width:500px}
  .qbox p{max-width:24ch}
  .brand img{height:87px}
  .nav{height:121px}
}