/*
 * responsive.css — ANVA Soluciones Industriales
 * All breakpoint-scoped rules for the site. Loaded AFTER the base styles
 * in index.html, so at equal specificity these rules win — same cascade
 * behavior as before, just split into its own file for maintainability.
 * Do not reorder the @media blocks relative to each other; later blocks
 * intentionally override earlier ones for properties they both set.
 */

/* ===== RESPONSIVE ===== */

/* Ultra-wide desktops / large monitors: give the layout room to breathe instead of
   staying pinned at the same 1240px width forever */
@media (min-width:1600px){
  .container{max-width:1400px;}
  .hero h1{font-size:clamp(48px,3.4vw,68px);}
  .hero-visual{height:580px;}
  .about-visual{height:540px;}
}

/* Large laptop fine-tuning: keep the full menu comfortable before it flips to hamburger */
@media (max-width:1200px){
  .header-inner{padding:12px 20px;}
  .container{padding:0 20px;}
}

/* Tablet: 769px – 1024px */
@media (max-width:1024px){
  .main-menu{display:none;}
  .header-cta{display:none;}
  .burger{display:flex;}
  .mobile-menu{display:flex;}
  .mobile-menu-overlay{display:block;}
  .logo img{height:46px;}

  /* True centering of the logo on mobile: 3-track grid (spacer / logo / burger)
     instead of margin hacks, so the logo stays visually centered regardless of
     burger width or logo width. */
  .header-inner{display:grid; grid-template-columns:44px 1fr 44px; column-gap:8px;}
  .header-inner .logo{grid-column:2; justify-self:center;}
  .header-inner .burger{grid-column:3; justify-self:end;}

  .hero{padding:48px 0 32px;}
  .hero{
    background-image:
      linear-gradient(180deg, rgba(0,10,30,0.55) 0%, rgba(0,10,30,0.78) 55%, rgba(0,10,30,0.85) 100%),
      url("images/hero-bg.png");
    background-position:center;
  }
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-visual{height:420px; max-width:560px; margin:0 auto; order:-1;}

  .benefits-bar{grid-template-columns:1fr 1fr;}
  .benefit-item{border-right:none; border-bottom:1px solid var(--gray-line);}
  .benefit-item:nth-child(2n){border-right:none;}
  .benefit-item:nth-last-child(-n+2){border-bottom:none;}

  section{padding:76px 0;}
  .about-grid{grid-template-columns:1fr; gap:48px;}
  .about-visual{height:380px; max-width:520px; margin:0 auto;}
  .about-copy{text-align:center;}
  .about-copy p.desc{margin-left:auto; margin-right:auto;}
  .about-benefits{max-width:520px; margin:0 auto;}
  .about-benefit{text-align:left;}

  .commitment-inner{grid-template-columns:1fr; gap:40px; text-align:center;}
  .commit-line{margin-left:auto; margin-right:auto;}
  .commitment-inner h2{margin-left:auto; margin-right:auto;}
  .commit-cols{grid-template-columns:1fr 1fr; text-align:left;}

  .industries-grid{grid-template-columns:repeat(3,1fr);}

  .case-activities.why-list{grid-template-columns:1fr 1fr;}
  .products-grid{grid-template-columns:1fr 1fr;}

  .why-grid{grid-template-columns:1fr; text-align:center;}
  .why-list{align-items:center;}
  .why-list-item{width:100%; max-width:420px;}

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

  .brand-logo{width:140px; height:70px; margin-right:32px;}
  .brand-logo img{max-width:120px; max-height:55px;}
}

/* Mobile / small tablet: up to 768px */
@media (max-width:768px){
  .header-inner{padding:10px 16px;}
  .container{padding:0 16px;}
  .logo img{height:40px;}

  .hero-visual{height:360px; max-width:420px;}
  .hero-diag-line{height:330px;}
  .hero h1{margin-bottom:18px;}

  .benefits-bar{grid-template-columns:1fr 1fr; gap:0;}
  .benefit-item{padding:22px 16px;}

  section{padding:60px 0;}
  .about-visual{height:320px; max-width:380px;}

  .commit-cols{grid-template-columns:1fr; text-align:center;}
  .commit-icon{margin-left:auto; margin-right:auto;}

  .industries-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .industry-item{padding:22px 14px;}

  .products-grid{grid-template-columns:1fr 1fr; gap:16px;}
  .product-photo{height:150px;}
  .product-body{padding:16px; gap:8px;}
  .product-body h3{font-size:15px;}
  .product-body p{font-size:13px;}

  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .footer-col{text-align:left;}

  .case-info-grid{padding:26px; gap:20px 24px;}
  .case-block{margin-bottom:44px;}
  .case-activities.why-list{grid-template-columns:1fr;}

  .brand-logo{width:130px; height:65px; margin-right:26px;}
  .brand-logo img{max-width:115px; max-height:52px;}
}

/* Mobile: up to 640px */
@media (max-width:640px){
  section{padding:52px 0;}
  .hero{padding:32px 0 20px;}
  .hero-visual{height:320px; max-width:340px;}
  /* Photos/shapes were still using their desktop pixel sizes here, which no
     longer fit inside the 340x320 box above (e.g. shape-diag-blue at 340px
     wide has nowhere to go in a 340px-wide box once its 20px right offset is
     applied) — that's what was pushing them past the edges and into each
     other between ~481px and 640px. Scale them down to fit this container. */
  .shape-diag-blue{width:230px; height:230px; top:0; right:10px;}
  .hero-gears{width:100px; bottom:14px; left:6px;}
  .shape-rect-white{width:160px; height:110px; bottom:34px; right:30px;}
  .hero-photo.p1{height:230px; top:12px; left:16px;}
  .hero-photo.p2{width:150px; height:150px;}
  .hero-photo.p3{width:100px; height:100px; right:50px;}
  .hero-diag-line{height:280px; left:150px;}

  .benefits-bar{margin-top:16px; border-radius:12px;}
  .benefit-item{padding:18px 14px; gap:12px;}
  .benefit-item span{font-size:13px;}

  .about-visual{height:280px; max-width:320px;}

  .social-icon{width:42px; height:42px;}

  .footer-map{height:0; padding-bottom:58%; position:relative;}
  .footer-map iframe{position:absolute; inset:0; width:100%; height:100%;}

  .industries-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .industry-item{padding:20px 12px;}
  .industry-icon-wrap{width:60px; height:60px; margin-bottom:12px;}
  .industry-icon-wrap svg{width:26px; height:26px;}
  .industry-item h4{font-size:13.5px;}

  .products-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .product-photo{height:120px;}
  .product-body{padding:14px; gap:6px;}
  .product-body h3{font-size:13.5px; line-height:1.25;}
  .product-body p{font-size:12px;}
  .product-link{font-size:11px;}

  .why-shield{margin:0 auto 20px; width:110px; height:110px;}
  .why-shield svg{width:52px; height:52px;}

  .brand-logo{width:120px; height:65px; margin-right:20px;}
  .brand-logo img{max-width:110px; max-height:50px;}

  .contact-cta{padding:52px 0;}
  .contact-cta .btns{flex-direction:column; align-items:stretch;}
  .contact-cta .btn{justify-content:center;}

  .footer-grid{gap:32px; padding-bottom:44px;}

  .case-info-grid{padding:20px; gap:16px 18px;}
  .case-highlight{padding:20px 22px;}
  .case-result-card{padding:22px 18px;}
  .case-table th, .case-table td{padding:11px 14px; font-size:12.5px;}
  .case-table{min-width:560px;}
  .footer-logo img{height:46px;}
  .social-row{justify-content:flex-start;}

  .copyright-inner{flex-direction:column; text-align:center;}
  .logo img{height:34px;}
}

/* Small mobile: up to 480px */
@media (max-width:480px){
  .header-inner{padding:8px 14px;}
  .container{padding:0 14px;}
  .logo img{height:30px;}

  .hero h1{font-size:clamp(28px,8vw,36px);}
  .hero p.sub{font-size:16px;}
  .hero-visual{height:260px; max-width:280px;}
  .shape-diag-blue{width:190px; height:190px; top:0; right:0;}
  .hero-gears{width:78px; bottom:6px; left:0;}
  .shape-rect-white{width:130px; height:90px; bottom:20px; right:14px;}
  .hero-photo.p1{height:190px; top:6px; left:6px;}
  .hero-photo.p2{width:120px; height:120px;}
  .hero-photo.p3{width:82px; height:82px; right:36px;}
  .hero-diag-line{height:220px; left:120px;}

  .benefits-bar{grid-template-columns:1fr;}
  .benefit-item{border-bottom:1px solid var(--gray-line);}
  .benefit-item:last-child{border-bottom:none;}

  .about-visual{height:230px; max-width:240px;}
  .about-square-blue{width:70px; height:70px; bottom:12px; left:6px;}
  .about-square-red{width:44px; height:44px; top:6px; right:0;}
  .about-circle-outline{width:100px; height:100px; border-width:6px; bottom:-10px; right:10px;}

  .industries-grid{grid-template-columns:1fr;}
  .industry-item{display:flex; align-items:center; gap:16px; text-align:left; padding:16px 18px;}
  .industry-icon-wrap{margin:0;}

  .products-grid{gap:10px;}
  .product-photo{height:100px;}
  .product-body{padding:12px; gap:5px;}
  .product-body h3{font-size:12.5px;}
  .product-body p{font-size:11px; line-height:1.4;}
  .product-link{font-size:10px; gap:4px;}

  .why-list-item{max-width:100%;}

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

  .btn{width:100%; justify-content:center;}
}

/* Extra-small phones (older devices, narrow foldables) */
@media (max-width:360px){
  .header-inner{padding:8px 12px;}
  .logo img{height:28px;}
  .hero h1{font-size:clamp(24px,7.8vw,29px);}
  .hero-visual{height:230px; max-width:250px;}
  .shape-diag-blue{width:160px; height:160px;}
  .hero-photo.p1{height:160px;}
  .hero-photo.p2{width:100px; height:100px;}
  .hero-photo.p3{width:70px; height:70px; right:26px;}
  .hero-diag-line{height:180px; left:100px;}
  .industry-item h4{font-size:12.5px;}
  .brand-logo{width:105px; height:60px; margin-right:16px;}
  .brand-logo img{max-width:96px; max-height:44px;}
  .product-photo{height:88px;}
  .product-body{padding:10px; gap:4px;}
  .product-body h3{font-size:11.5px;}
  .product-body p{font-size:10px;}
}

/* Mobile landscape: short viewport height needs tighter vertical rhythm so the hero
   and sections don't force excessive scrolling on phones held sideways */
@media (max-width:900px) and (orientation:landscape){
  .hero{padding:20px 0 14px;}
  .hero-grid{grid-template-columns:1fr 1fr; gap:24px; align-items:center;}
  .hero-visual{height:220px; max-width:320px; order:0; margin:0;}
  .hero-photo.p1{height:180px; top:8px; left:10px;}
  .hero-photo.p2{width:110px; height:110px;}
  .hero-photo.p3{width:75px; height:75px; right:35px;}
  .shape-diag-blue{width:150px; height:150px; top:0; right:5px;}
  .hero-gears{width:60px; bottom:6px; left:4px;}
  .shape-rect-white{width:110px; height:75px; bottom:20px; right:20px;}
  .hero-diag-line{height:190px; left:110px;}
  .benefits-bar{margin-top:14px;}
  section{padding:36px 0;}
  .about-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .about-visual{height:220px; max-width:280px;}
  .why-grid{grid-template-columns:0.5fr 1fr 1fr; text-align:left;}
  .why-list{align-items:flex-start;}
}

/* Respect users who prefer a lighter interface density on touch devices without a
   fine pointer, by giving links/buttons a touch-friendly minimum tap size */
@media (hover:none) and (pointer:coarse){
  .main-menu a, .mobile-menu a, .product-link, .footer-item, .legal-links a{
    min-height:24px;
  }
  .social-icon{width:42px; height:42px;}
}