/* ALIC V5 — responsive.css */
/* RESPONSIVE */

/* Cortafuegos horizontal en pantallas pequenas. Mientras la cortina de carga
   esta arriba y el JavaScript no ha terminado de montar el recorrido, algun
   panel del riel se sale unos pixeles y el documento se ensancha: medido, 26
   px a 360. Se usa `clip` y no `hidden` a proposito: `hidden` convertiria el
   documento en contenedor de desplazamiento y rompería el anclado del riel. */
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
}
@media (max-width: 1024px) {
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .consulta-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-layout { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) and (orientation: landscape) {
  .promise-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px), (orientation: portrait) {
  .promise-scroll__poster { width: min(94vw, 760px); }
  .promise-scroll__video { display: none; }
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-toggle { display: block; }
  .site-header { height: 64px; }
  .site-logo { font-size: 18px; }

  /* Cabecera de las páginas interiores. El header es una retícula de
     1fr auto 1fr, pensada para nav · marca · acciones; al ocultar la nav en
     vertical desaparecía el primer elemento y todo corría una casilla: la
     marca caía en la primera columna —centrada en el tercio izquierdo, no
     en la página— y el botón de menú se le pegaba al costado. Colocando
     cada uno en su columna, la marca vuelve al centro real y el menú pasa
     al margen izquierdo, que es donde el pulgar lo alcanza.
     La portada no entra aquí: allí la marca es hija única del header y
     manda `.site-header > .site-logo:only-child`, que es más específica.

     La fila va escrita en las dos: la marca aparece antes en el marcado, así
     que al mandarla a la columna 2 el cursor de colocación automática ya
     había pasado la columna 1 y las acciones caían a una segunda fila,
     debajo de la marca. Con la fila fija vuelven a la misma línea. */
  .site-header > .site-logo {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header > .header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .promise-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .collections-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .contact-methods { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .consulta-drawer { width: 100vw; max-width: 100vw; right: -100vw; }

  .product-detail { padding-top: 90px; }
  .editorial-page { padding-top: 90px; }
  .page-hero { padding: 100px 0 30px; }
  .breadcrumb-nav { padding-top: 80px; }
  .btn + .btn { margin-inline-start: 0; }
  .hero-intro__video { display: none; }
  .hero-intro__poster {
    right: auto;
    left: 50%;
    width: 300%;
    max-width: none;
    transform: translateX(-50%);
  }
  .hero-intro__scrim { background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--onice) 28%, transparent) 34%, color-mix(in srgb, var(--onice) 92%, transparent) 100%); }
  .hero-intro__content {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 0 var(--page-margin) clamp(7rem, 16svh, 9rem);
    text-align: center;
  }
  .hero-overlay h1 { width: 100%; max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.75rem); line-height: 1.08; }
  .hero-overlay h1 span { max-width: 100%; }
  .hero-overlay .hero-intro__copy { width: 100%; max-width: 32rem; font-size: clamp(1rem, 4.5vw, 1.25rem); }
  .hero-intro__content .btn { max-width: calc(100vw - (var(--space-md) * 2)); padding-inline: var(--space-sm); white-space: normal; }
  .floating-consulta { right: var(--space-sm); bottom: var(--space-sm); }

  /* Las miniaturas de la galeria, mas chicas para que quepan tres por fila
     sin apretarse. */
  .product-gallery .thumb { width: 62px; height: 62px; }
}

/* Legibilidad en movil y tableta. Medido con Playwright: la ficha de material
   de las colecciones y las etiquetas del formulario se quedaban en 11 px, por
   debajo del minimo comodo de lectura fuera del escritorio. El corte va en
   1024 y no en 768 para que alcance tambien a la tableta apaisada. */
@media (max-width: 1024px) {
  .product-card .category,
  .collection-card .category,
  .consulta-form label,
  .form-group label { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .promise-scroll__video { display: none; }
}

@media (max-width: 480px) {
  /* Se retiró la sobreescritura de --text-h1 y --text-h3: ninguna regla las
     consume (los títulos usan clamp() propio), así que el bloque no producía
     ningún efecto y hacía creer que ajustaba la tipografía móvil. */
  .consulta-btn-header { display: none; }
}