/*
  responsive.css
  Ajusta layouts para 320, 375, 425, 768, 1024, 1440, 1920, 2560 y 4K.
  El sitio parte de componentes fluidos y suma cambios por rango.
*/

@media (max-width: 1180px) {
  .services-grid,
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .timeline li:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 1024px) {
  :root {
    --font-size-3xl: 3rem;
    --font-size-2xl: 2rem;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: var(--header-height);
    right: 1rem;
    left: 1rem;
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: rgba(7, 12, 22, 0.96);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(var(--blur-glass));
    transition:
      opacity var(--duration-medium) var(--ease-premium),
      transform var(--duration-medium) var(--ease-premium),
      visibility var(--duration-medium) var(--ease-premium);
  }

  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links a {
    min-height: 3rem;
  }

  .split-section,
  .business-section,
  .cta-section,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-section {
    min-height: auto;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + var(--space-3xl));
  }

  .lab-section {
    grid-template-columns: 1fr;
  }

  .category-showcase {
    grid-template-columns: 1fr;
  }

  .section-header--side {
    margin-bottom: var(--space-lg);
  }

  .footer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 2.55rem;
    --font-size-2xl: 1.85rem;
    --space-3xl: 4rem;
  }

  body::before {
    background:
      linear-gradient(rgba(5, 7, 13, 0.78), rgba(5, 7, 13, 0.92)),
      url("../assets/backgrounds/background-circuit-mobile.webp") center / cover no-repeat,
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: cover, cover, 54px 54px, 54px 54px;
  }

  body::after {
    background:
      linear-gradient(rgba(5, 7, 13, 0.34), rgba(5, 7, 13, 0.68)),
      url("../assets/backgrounds/background-glass-mobile.webp") center / cover no-repeat,
      url("../assets/backgrounds/background-dark-mobile.webp") center / cover no-repeat;
  }

  .nav-cta {
    display: none;
  }

  .brand-lockup--image {
    width: min(10.75rem, 52vw);
  }

  .brand-lockup--text {
    gap: 0.48rem;
  }

  .brand-logo {
    max-height: 2.85rem;
  }

  .brand-lockup--footer {
    width: min(14.5rem, 100%);
  }

  .brand-copy strong {
    font-size: 0.84rem;
  }

  .brand-copy small {
    font-size: 0.54rem;
  }

  .hero-section,
  .section-shell {
    width: min(100% - 1.25rem, var(--container));
  }

  .hero-actions,
  .hero-trust-list {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-image {
    object-position: center top;
  }

  .hero-image-overlay {
    background:
      linear-gradient(180deg, rgba(5, 7, 13, 0.74) 0%, rgba(5, 7, 13, 0.56) 34%, rgba(5, 7, 13, 0.5) 62%, var(--color-bg) 100%),
      linear-gradient(90deg, rgba(5, 7, 13, 0.64), rgba(5, 7, 13, 0.28));
  }

  .lab-media {
    aspect-ratio: 9 / 16;
    min-height: 34rem;
  }

  .category-media {
    aspect-ratio: 9 / 16;
    min-height: 34rem;
  }

  .lab-copy {
    min-height: auto;
  }

  .business-media,
  .cta-media,
  .whatsapp-media {
    aspect-ratio: 9 / 16;
    min-height: 30rem;
    width: min(100%, 24rem);
  }

  .business-media img,
  .cta-media img,
  .whatsapp-media img {
    object-position: center;
  }

  .about-panel {
    padding: var(--space-lg);
  }

  .services-grid,
  .feature-grid,
  .category-showcase .feature-grid,
  .console-layout,
  .reviews-grid,
  .timeline,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .feature-panel--wide,
  .field-group--full {
    grid-column: auto;
  }

  .product-row {
    grid-template-columns: 1fr;
  }

  .product-row span {
    grid-row: auto;
  }

  .footer-layout {
    grid-template-columns: 1fr;
  }

  .floating-whatsapp strong {
    display: none;
  }

  .floating-whatsapp {
    padding: 0.35rem;
  }
}

@media (max-width: 425px) {
  :root {
    --font-size-3xl: 2.15rem;
    --font-size-2xl: 1.65rem;
  }

  .main-navigation {
    width: min(100% - 1rem, var(--container-wide));
  }

  .section-shell {
    padding-block: var(--space-2xl);
  }

  .service-card,
  .feature-panel,
  .console-panel,
  .review-card,
    .lab-copy,
    .category-service-panel,
    .business-panel,
    .cta-panel,
    .contact-form,
    .contact-panel {
    padding: var(--space-md);
  }
}

@media (min-width: 1440px) {
  :root {
    --font-size-3xl: 3.85rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --container: 1320px;
    --container-wide: 1640px;
  }
}

@media (min-width: 2560px) {
  :root {
    --container: 1460px;
    --container-wide: 1880px;
  }

  .section-shell {
    padding-block: 7rem;
  }
}