/* ============================================================
   RESPONSIVE
   Breakpoints: tablet ≤1024px, mobile ≤640px
   ============================================================ */


/* ===== TABLET ============================================ */
@media (max-width: 1024px) {
  :root {
    --grid-cols: 8;
    --grid-gap: 12px;
  }


  /* --- Hero --- */
  .hero__grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .hero__headline {
    grid-column: 2 / span 6;
  }

  .hero__stat--left  { grid-column: 2 / span 3; }
  .hero__stat--right { grid-column: 5 / span 3; }

  .hero__cta { grid-column: 2 / span 3; }


  /* --- Industrias --- */
  .industrias {
    height: auto;
    min-height: 100vh;
    padding-block: var(--space-2xl);
  }

  .industrias__grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-lg);
  }

  .industrias__title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .industrias__cards {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .industry-card {
    aspect-ratio: 4 / 3;
  }


  /* --- Servicios --- */
  .servicios {
    height: auto;
    min-height: 100vh;
    padding-block: var(--space-2xl);
  }

  .servicios__grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-lg);
  }

  .servicios__title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .servicios__cards {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .service-card {
    aspect-ratio: 1;
  }


  /* --- Sobre nosotros --- */
  .sobre-nosotros {
    height: auto;
    min-height: 100vh;
    padding-block: var(--space-2xl);
  }

  .sobre-nosotros__grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    gap: var(--space-lg);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .sobre-nosotros__title,
  .sobre-nosotros__lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .sobre-nosotros__body {
    padding-top: 0;
  }

  .sobre-nosotros__body--left {
    grid-column: 1 / span 4;
    grid-row: auto;
  }

  .sobre-nosotros__body--right {
    grid-column: 5 / span 4;
    grid-row: auto;
  }

  .metodo-step--1,
  .metodo-step--2,
  .metodo-step--3,
  .metodo-step--4 {
    grid-column: 1 / -1;
    grid-row: auto;
  }


  /* --- Clientes --- */
  .clientes {
    height: auto;
    min-height: 100vh;
    padding-block: var(--space-2xl);
  }

  .clientes__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-lg);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .clientes__title,
  .clientes__title-labs {
    grid-column: 1;
    grid-row: auto;
  }

  .logo-grid--clientes {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    min-height: 50vh;
  }

  .logo-grid--laboratorios {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, 1fr);
    min-height: 15vh;
  }


  /* --- Contacto y Footer --- */
  .contacto__grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    gap: var(--space-lg);
    height: auto;
    min-height: 100vh;
    padding-block: var(--space-2xl);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .contacto__title,
  .contacto__intro,
  .contacto__form-wrap {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .site-footer {
    padding-block: var(--space-xl);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-lg);
    min-height: auto;
  }

  .site-footer__nav {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer__contact {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer__copyright {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }
}


/* ===== MOBILE ============================================ */
@media (max-width: 640px) {
  :root {
    --grid-cols: 4;
    --grid-gap: 10px;
  }


  /* --- Header mobile --- */
  .nav-burger {
    display: inline-flex;
  }

  .nav-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    height: 100vh;
    height: 100dvh;
    background: var(--color-white);
    z-index: var(--z-header);
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(33, 33, 33, 0);
    transition:
      transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
      box-shadow 0.4s ease;
    padding: clamp(5rem, 12vw, 6rem) clamp(1.5rem, 5vw, 2.5rem) var(--space-lg);
    overflow-y: auto;
  }

  .nav-panel.is-open {
    transform: translateX(0);
    box-shadow: -8px 0 32px rgba(33, 33, 33, 0.2);
  }

  .nav-pill {
    background: transparent;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: 0;
    border-radius: 0;
  }

  .nav-pill__link {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    text-transform: none;
    letter-spacing: 0;
  }


  /* --- Hero mobile --- */
  .hero__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__headline {
    grid-column: 1 / -1;
    grid-row: 3 / span 4;
    padding-inline: var(--space-sm);
  }

  .hero__stat--left  { grid-column: 1 / span 2; grid-row: 7; }
  .hero__stat--right { grid-column: 3 / span 2; grid-row: 7; }

  .hero__cta {
    grid-column: 1 / -1;
    grid-row: 9;
    padding-inline: var(--space-sm);
  }


  /* --- Industrias / Servicios cards en mobile = 1 columna --- */
  .industrias__cards,
  .servicios__cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .industry-card,
  .service-card {
    aspect-ratio: 16 / 10;
  }

  /* En mobile no hay hover real, usamos :active / :focus-within */
  .industry-card:active .industry-card__mask,
  .industry-card:focus-within .industry-card__mask {
    transform: translateX(-100%);
  }

  .industry-card:active,
  .industry-card:focus-within {
    color: var(--color-white);
  }

  .industry-card:active .industry-card__btn,
  .industry-card:focus-within .industry-card__btn {
    color: var(--color-ink);
    background: var(--color-white);
    border-color: var(--color-white);
  }

  .service-card:active .service-card__mask,
  .service-card:focus-within .service-card__mask {
    transform: translateX(-100%);
  }

  .service-card:not(.service-card--keep-dark):active,
  .service-card:not(.service-card--keep-dark):focus-within {
    color: var(--color-white);
  }

  .service-card:not(.service-card--keep-dark):active .service-card__btn,
  .service-card:not(.service-card--keep-dark):focus-within .service-card__btn {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-ink);
  }


  /* --- Clientes mobile --- */
  .logo-grid--clientes {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  .logo-grid--laboratorios {
    grid-template-columns: 1fr;
  }


  /* --- Footer mobile: una columna --- */
  .site-footer__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-md);
  }

  .site-footer__nav,
  .site-footer__contact,
  .site-footer__copyright {
    grid-column: 1;
    text-align: left;
    justify-self: start;
  }

  .site-footer__nav       { grid-row: 1; }
  .site-footer__contact   { grid-row: 2; }
  .site-footer__copyright { grid-row: 3; }
}