/*
 * 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){
  nav.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;
  }
  .why-anva{
    background-image:
      linear-gradient(180deg, rgba(0,10,30,0.68) 0%, rgba(0,10,30,0.82) 55%, rgba(0,10,30,0.88) 100%),
      url("images/hero-bg.png");
    background-position:center;
  }
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-visual{width:100%; height:460px; max-width:640px; margin:0 auto; order:-1;}
  /* Mobile hero: the desktop collage (3 overlapping photos + decorative
     shapes) gets cramped and messy at this size, so show only the main
     photo, resized to fill the whole hero-visual box cleanly. */
  .hero-photo.p2, .hero-photo.p3, .hero-gears, .shape-rect-white, .hero-diag-line, .shape-diag-blue{
    display:none;
  }
  .hero-photo.p1{
    position:absolute; inset:0; top:0; left:0; width:100%; height:100%;
    border:0;
  }
  .hero-photo.p1 img{width:100%; height:100%; object-fit:cover;}

  .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{width:100%; height:420px; max-width:600px; margin:0 auto;}
  /* Decorative shapes were still at their desktop size here while the photo
     box around them had already shrunk, so they swallowed most of the photo
     instead of just accenting its corners. Scale them down to match. */
  .about-square-blue{width:96px; height:96px; bottom:26px; left:18px;}
  .about-square-red{width:61px; height:61px; top:18px; right:0;}
  .about-circle-outline{width:140px; height:140px; border-width:7px; bottom:-18px; right:26px;}
  .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:380px; max-width:500px;}
  .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:360px; max-width:460px;}
  .about-square-blue{width:83px; height:83px; bottom:23px; left:15px;}
  .about-square-red{width:53px; height:53px; top:15px; right:0;}
  .about-circle-outline{width:120px; height:120px; border-width:6px; bottom:-15px; right:23px;}

  .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:200px;}
  .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:340px; max-width:420px;}

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

  .about-visual{height:320px; max-width:380px;}
  .about-square-blue{width:73px; height:73px; bottom:20px; left:13px;}
  .about-square-red{width:47px; height:47px; top:13px; right:0;}
  .about-circle-outline{width:107px; height:107px; border-width:5px; bottom:-13px; right:20px;}

  .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:160px;}
  .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:280px; max-width:340px;}

  .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:260px; max-width:300px;}
  .about-square-blue{width:60px; height:60px; bottom:16px; left:11px;}
  .about-square-red{width:38px; height:38px; top:11px; right:0;}
  .about-circle-outline{width:87px; height:87px; border-width:4px; bottom:-16px; right:16px;}

  .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:135px;}
  .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:250px; max-width:300px;}
  .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:116px;}
  .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;}
  .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;}
}