/* ==========================================================================
   calidad.css
   --------------------------------------------------------------------------
   Página "Garantía de Calidad" (page-calidad.php).

   SE CARGA SOLO EN ESA PLANTILLA, mediante is_page_template() en functions.php.
   Es contenido de una única página: cargarlo en las demás serían bytes que
   nadie usa. Es la primera hoja del proyecto con carga condicional por
   plantilla, y el criterio para las siguientes es el mismo — si el CSS solo
   sirve en una página, se encola solo en esa página.

   Lo que NO está aquí: la cabecera de página (.gt-page-header), que vive en
   components.css porque la usarán todas las páginas internas.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-quality — envoltorio de sección
   Fondos alternos para separar los tres bloques sin líneas divisorias:
   certificados (blanco) → registros (gris) → políticas (blanco).
   -------------------------------------------------------------------------- */

.gt-quality {
  padding-block: 48px;
}

.gt-quality--plain { background-color: var(--color-bg); }
.gt-quality--alt   { background-color: var(--color-bg-alt); }


/* ==========================================================================
   BLOQUE 1 — Certificados
   ==========================================================================
   UNA LISTA PLANA de filas, sin agrupar. Se probó agrupada por familia de
   norma —que es lo que hacen TALKE, Rhenus y Brenntag— y el usuario prefirió
   la lista corrida: con trece certificados los rótulos y el índice de saltos
   pesaban más de lo que orientaban.
   ========================================================================== */


/* --------------------------------------------------------------------------
   La fila
   --------------------------------------------------------------------------
   UNA FILA POR CERTIFICADO, no una tarjeta.

   La versión anterior eran tarjetas en rejilla y en móvil no se sostenían: a
   una columna, cada tarjeta ocupaba el ancho entero con un sello pequeño
   centrado y mucho aire a los lados, y trece seguidas eran unos 2.500px de
   scroll con muy poca información por pantalla. En filas entra el triple, y el
   contenido se alinea en columnas —sello, nombre, acceso—, que es como se
   recorre una lista de documentos.

   La fila ENTERA es el enlace: en un móvil, un botón pequeño al final de la
   línea es un objetivo difícil de acertar; la fila mide más de 60px de alto y
   no se falla.
   -------------------------------------------------------------------------- */

.gt-cert-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.gt-cert {
  display: flex;
  align-items: center;
  gap: 14px;

  height: 100%;
  min-height: 72px;                /* objetivo táctil holgado; lo fija la portada */
  padding: 10px 14px;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;

  text-decoration: none;

  transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

a.gt-cert:hover,
a.gt-cert:focus-visible {
  background-color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

a.gt-cert:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   El sello.
   Caja cuadrada de ancho FIJO: los logotipos vienen en proporciones muy
   distintas y, si la caja se adaptara a cada uno, los nombres de la columna
   del medio no arrancarían todos a la misma altura y la lista dejaría de
   leerse como una lista.
   -------------------------------------------------------------------------- */

.gt-cert__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 48px;
  height: 48px;
}

.gt-cert__logo-img {
  display: block;
  width: auto;
  max-width: 48px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}

/* Marcador de lo que falta: borde discontinuo, para que se vea de un vistazo
   en lugar de pasar desapercibido. */
.gt-cert__ph {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 2px dashed rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.28);
}

.gt-cert__ph svg {
  width: 22px;
  height: 22px;
}

/* El nombre ocupa el hueco que quede. min-width 0 es imprescindible dentro de
   un flex: sin él, un nombre largo no se parte y desborda la fila. */
.gt-cert__name {
  flex: 1;
  min-width: 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   El acceso al documento: portada en miniatura y flecha.
   -------------------------------------------------------------------------- */

/* La portada y el símbolo NO son la misma cosa: una dice qué hay detrás y el
   otro qué pasa al pulsar. Pegados se leían como una sola mancha, así que van
   separados por un hueco mayor que el que hay entre las letras de al lado. */
.gt-cert__go {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;

  padding-left: 4px;
}

/* La portada. No se lee ni pretende leerse —a este tamaño no cabe—, pero sí se
   reconoce que es un certificado y no un icono genérico: se distinguen la
   franja de color, el membrete y la mancha del sello. Eso es lo que hace que
   la fila prometa un documento de verdad.

   Su alto manda sobre el de la fila: 48px de portada más el relleno son los
   72px de min-height. Si se agranda la portada hay que subir también la fila,
   o el recorte se come el membrete. */
.gt-cert__cover {
  display: block;

  width: 36px;
  height: 48px;
  object-fit: cover;
  object-position: top center;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 2px;
}

/* Símbolo de enlace externo: dice que el documento se abre fuera del sitio,
   que es exactamente lo que pasa. Se desplaza en diagonal al apuntar, en el
   mismo sentido en que apunta la flecha del símbolo. */
/* Portada APAISADA: la caja sigue siendo la misma —cambiarla rompería la
   alineación de la fila— pero la página entra entera dentro, con una banda
   arriba y abajo, en vez de recortarse a una franja del centro. La detección
   es automática: sale de las medidas del archivo. */
.gt-cert__cover--wide {
  object-fit: contain;
  object-position: center;

  background-color: var(--color-bg-alt);
  padding: 2px;
}

.gt-cert__view {
  display: flex;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);

  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-cert__view svg {
  width: 19px;
  height: 19px;
}

a.gt-cert:hover .gt-cert__view,
a.gt-cert:focus-visible .gt-cert__view {
  transform: translate(2px, -2px);
}

/* Mientras no haya PDF, se dice qué falta en vez de dejar el hueco vacío. */
.gt-cert__soon {
  flex-shrink: 0;

  font-family: var(--font-primary);

  /* 13px y no 12px: 0.75rem no existe en la escala del sitio. El equivalente
     —dato secundario dentro de una fila— es 0.8125rem, el mismo que usan la
     dirección de un lavadero y el pie del certificado FOOD. */
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.38);
}

.gt-cert--pending {
  background-color: transparent;
  border-style: dashed;
}

.gt-cert--pending .gt-cert__name {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

/* ==========================================================================
   BLOQUE 2 — Registros, inscripciones y autorizaciones
   ==========================================================================
   ACORDEÓN POR FAMILIA.

   Antes eran veintiún textos legales seguidos, cada uno en su tarjeta con filo
   rojo. Como muro no se leía: la vista no encontraba dónde termina uno y
   empieza el siguiente, y seis de ellos comparten once palabras — solo cambia
   la familia de producto, enterrada en el medio.

   Plegados por familia la sección se recorre de un vistazo, y dentro de cada
   una lo que distingue a cada registro va en negrita. El texto no se toca: son
   asientos oficiales y deben poder cotejarse palabra por palabra.

   Se usan <details>/<summary> nativos, sin JavaScript, y el texto de todos los
   grupos viaja en el HTML aunque esté plegado.
   ========================================================================== */

.gt-records {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.gt-records__group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   La cabecera plegable.
   Se quita el triángulo del navegador —hacen falta las dos reglas, la estándar
   y la de WebKit— y se pone una flecha propia a la derecha, alineada con el
   borde, para que las cuatro queden en la misma vertical.
   -------------------------------------------------------------------------- */

.gt-records__head {
  display: flex;
  align-items: center;
  gap: 12px;

  /* Más relleno abajo que arriba: cerrado no se nota, y abierto es lo que
     separa el nombre de la familia de su primer registro. */
  padding: 18px 2px 16px;
  cursor: pointer;
  list-style: none;
}

.gt-records__head::-webkit-details-marker {
  display: none;
}

/* El símbolo, a la izquierda del nombre. Sin cuadrado de fondo: la cabecera ya
   es una fila con su filete, y meter una caja dentro sería una caja dentro de
   otra. Acompaña al título también en el color, así que al abrirse el grupo
   los dos cambian a la vez. */
/* EN ROJO SOLO EL SÍMBOLO Y LA FLECHA. El nombre de la familia se queda en
   azul, como el resto de títulos del sitio: el rojo enmarca la fila por los
   dos extremos y el texto no compite con él.

   El estado abierto NO se marca con un cambio de color: lo dicen la flecha
   girada y el contenido desplegado. Marcar dos veces lo mismo solo resta
   fuerza a la señal. */
.gt-records__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-records__icon svg {
  width: 22px;
  height: 22px;
}

.gt-records__title {
  /* flex: 1 empuja la flecha contra el borde derecho, que es lo que antes
     hacía space-between: así las cuatro flechas quedan en la misma vertical
     aunque los nombres midan distinto. */
  flex: 1;
  min-width: 0;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  text-wrap: pretty;
}

/* Al pasar el ratón, subrayado y nada más. Ni cambio de color ni fondo teñido:
   la fila ya está enmarcada en rojo por el símbolo y la flecha, y añadir un
   tercer rojo al apuntarla la emborronaba. */
.gt-records__head:hover .gt-records__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.gt-records__head:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  border-radius: 3px;
}

.gt-records__chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);

  transition: rotate 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-records__chevron svg {
  width: 20px;
  height: 20px;
}

/* La flecha gira al abrir. Se estiliza desde el atributo [open] y no desde una
   clase: así el aspecto no puede desincronizarse del estado real. */
.gt-records__group[open] .gt-records__chevron {
  rotate: 180deg;
}


/* --------------------------------------------------------------------------
   Los registros de dentro.
   Filete fino entre uno y otro en lugar de caja: dentro de un grupo ya
   plegable, veintiún recuadros más serían una caja dentro de otra.
   -------------------------------------------------------------------------- */

/* UNA SOLA COLUMNA, con el ancho de línea acotado.

   78ch son unos 80 caracteres reales —el `ch` mide el cero, que es más ancho
   que la letra media—, que es el techo cómodo de lectura. A todo el ancho del
   contenedor cada línea pasaría de 150 y la vista perdería el renglón al
   saltar; el hueco que queda a la derecha es preferible a eso.

   Se queda vacío a propósito: aquí no hay nada que meter al lado, y llenarlo
   con más texto sería empeorar justo lo que se está arreglando. */
.gt-records__list {
  /* Aire ARRIBA, entre el nombre de la familia y el primer registro. Sin él,
     al desplegarse el primero se pega al título y los dos se leen como una
     misma cosa; el desplegable tiene que notarse como que ha abierto algo. */
  margin: 6px 0 0;
  padding: 0 2px 26px;
  max-width: 78ch;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Cada registro, con su marca.
   --------------------------------------------------------------------------
   El filete separa, pero no dice DÓNDE EMPIEZA cada entrada: con registros de
   una a tres líneas, el ojo tenía que deducirlo. La marca sí lo dice, y de
   paso hace que el desplegable se lea como una relación y no como un bloque
   de párrafos.

   Cuadrado y no viñeta redonda: es el mismo marcador que ya usan las listas
   del cuerpo de las noticias. Se dibuja con un pseudoelemento porque el
   marcador nativo de la lista no admite color propio en todos los navegadores.
   -------------------------------------------------------------------------- */

.gt-records__list li {
  position: relative;

  padding: 13px 0 13px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;

  /* 1.75 y no 1.65: en texto denso el interlineado es lo que más pesa para la
     legibilidad, más que el cuerpo de letra. */
  line-height: 1.75;
  color: var(--color-text);

  /* Corta bien códigos largos como "201211000-000270" en pantallas estrechas */
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.gt-records__list li::before {
  content: "";
  position: absolute;
  left: 2px;

  /* 0.62em desde el borde superior del texto deja la marca ópticamente
     centrada con la primera línea, no colgando por encima. */
  top: calc(13px + 0.62em);

  width: 7px;
  height: 7px;

  background-color: var(--color-accent);
  border-radius: 2px;
}

/* El primero no lleva filete —no hay nada de lo que separarlo— pero sí
   conserva su relleno: es lo que lo despega del título de la familia. */
.gt-records__list li:first-child {
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Lo destacado dentro de la frase.
   --------------------------------------------------------------------------
   Dos cosas por registro y ninguna palabra movida: lo que lo distingue de los
   demás, y su número. En los seis de almacenamiento la negrita es lo único que
   permite distinguirlos sin leer la línea entera.

   Azul y no rojo: el rojo ya lo llevan la flecha y el rótulo del grupo abierto,
   y tres rojos en la misma pantalla dejarían de señalar nada.
   -------------------------------------------------------------------------- */

/* La negrita del asiento. .gt-records__mark es la que pone el tema con sus
   arrays de reserva; el <strong> suelto, la que escribe una persona en el
   escritorio. Las dos tienen que verse igual. */
.gt-records__mark,
.gt-records__list strong,
.gt-records__list b {
  font-weight: 700;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {

  .gt-records__chevron {
    transition: none;
  }

}


/* ==========================================================================
   BLOQUE 3 — Política de empresa
   ==========================================================================
   MISMA FILA QUE LOS CERTIFICADOS, con una diferencia: aquí la portada del PDF
   abre la fila en vez de cerrarla.

   Un certificado se reconoce por el sello de su norma —el de ISO 9001 se
   identifica a un metro—, y allí el sello abre la fila y la portada va detrás,
   pequeña. Una política interna no tiene sello: lo único que la identifica es
   su nombre y su primera página. Así que aquí la portada hace de retrato, va
   delante y va mayor.

   Que las dos secciones compartan anatomía es deliberado: son dos listas de
   documentos descargables en la misma página, y darles formas distintas
   obligaría a aprender dos veces cómo se usan.
   ========================================================================== */

.gt-doc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.gt-doc {
  display: flex;
  align-items: center;
  gap: 14px;

  height: 100%;
  min-height: 78px;
  padding: 10px 14px;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;

  text-decoration: none;

  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

a.gt-doc:hover,
a.gt-doc:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

a.gt-doc:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   La portada.
   --------------------------------------------------------------------------
   Caja de ancho FIJO: las portadas vienen con proporciones distintas y, si la
   caja se adaptara a cada una, los nombres de la columna del medio no
   arrancarían a la misma altura y la lista dejaría de leerse como una lista.

   Su alto manda sobre el de la fila: 56px de portada más el relleno son los
   78px de min-height. Si se agranda la portada hay que subir también la fila,
   o el recorte se come el membrete.
   -------------------------------------------------------------------------- */

.gt-doc__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 42px;
  height: 56px;
}

.gt-doc__cover-img {
  display: block;

  width: 42px;
  height: 56px;
  object-fit: cover;
  object-position: top center;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 2px;
}

/* Portada apaisada: la caja no cambia de forma —eso rompería la alineación de
   la fila— pero la página entra entera dentro, con una banda arriba y abajo,
   en vez de recortarse a una franja del centro. */
.gt-doc__cover-img--wide {
  object-fit: contain;
  object-position: center;
  background-color: var(--color-bg-alt);
  padding: 2px;
}

/* Marcador de lo que falta: borde discontinuo, para que se vea de un vistazo
   en lugar de pasar desapercibido. */
.gt-doc__ph {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 56px;

  border: 2px dashed rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  color: rgba(0, 0, 0, 0.28);
}

.gt-doc__ph svg {
  width: 22px;
  height: 22px;
}

/* El nombre ocupa el hueco que quede. min-width 0 es imprescindible dentro de
   un flex: sin él, un nombre largo no se parte y desborda la fila. */
.gt-doc__name {
  flex: 1;
  min-width: 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary);
  text-wrap: pretty;
}

/* Mismo símbolo de enlace externo que en certificados, para el mismo
   comportamiento: el PDF se abre fuera del sitio. */
.gt-doc__view {
  display: flex;
  flex-shrink: 0;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);

  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-doc__view svg {
  width: 19px;
  height: 19px;
}

a.gt-doc:hover .gt-doc__view,
a.gt-doc:focus-visible .gt-doc__view {
  transform: translate(2px, -2px);
}

.gt-doc__soon {
  flex-shrink: 0;

  font-family: var(--font-primary);

  /* 13px y no 12px: 0.75rem no existe en la escala del sitio. El equivalente
     —dato secundario dentro de una fila— es 0.8125rem, el mismo que usan la
     dirección de un lavadero y el pie del certificado FOOD. */
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.38);
}

.gt-doc--pending {
  background-color: transparent;
  border-style: dashed;
}

.gt-doc--pending .gt-doc__name {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}


/* ==========================================================================
   Ampliaciones por breakpoint
   ========================================================================== */

@media (min-width: 480px) {

  .gt-cert-list { gap: 10px; }

}

/* Tablet */
@media (min-width: 768px) {

  .gt-quality { padding-block: 64px; }

  /* DOS COLUMNAS DE FILAS desde tablet. La fila mide unos 350px, que es de
     sobra para sello, nombre y acceso, y así la sección entera cabe en una
     pantalla en vez de obligar a bajar cuatro veces. */
  .gt-cert-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px var(--gutter);
  }

  .gt-cert         { min-height: 76px; padding: 12px 16px; }
  .gt-cert__cover  { width: 39px; height: 52px; }
  .gt-cert__go     { gap: 16px; }


  /* DOS COLUMNAS de filas desde tablet, mismo criterio que los certificados:
     la fila mide unos 350px, de sobra para portada, nombre y símbolo. */
  .gt-doc-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px var(--gutter);
  }

}

/* Desktop */
@media (min-width: 1024px) {

  .gt-quality { padding-block: 80px; }

  /* TRES COLUMNAS en escritorio. Cada fila queda en unos 390px: descontando
     sello, portada, lupa y relleno, al nombre le sobran unos 215px, que dan
     para dos líneas incluso con el nombre más largo — "Buenas Prácticas de
     Distribución GDP" —. Con cuatro columnas el nombre se partiría en tres y
     las filas dejarían de tener la misma altura. */
  .gt-cert-list { grid-template-columns: repeat(3, 1fr); }

  /* El nombre sube a 16px igual que el de las políticas: son la MISMA fila en
     la misma página, y dejarlos en tamaños distintos hacía que la sección de
     certificados se viera más pequeña que la de abajo sin motivo. */
  .gt-cert       { min-height: 82px; padding: 12px 16px; }
  .gt-cert__name { font-size: 1rem; }
  .gt-cert__cover { width: 40px; height: 54px; }
  .gt-cert__logo { width: 50px; height: 50px; }
  .gt-cert__logo-img { max-width: 50px; max-height: 50px; }

  /* UNA COLUMNA también en escritorio, pero con el ancho acotado: es lo que
     hace que la columna única sea legible. Sin tope, cada línea pasaría de 150
     caracteres y la vista perdería el renglón al saltar.

     El texto sube a 16px: no son etiquetas de lista sino párrafos legales de
     hasta 35 palabras, y se leen como se lee una respuesta de las preguntas
     frecuentes, que usa ese mismo cuerpo. */
  /* 100ch en escritorio: unos 1.005px y en torno a 103 caracteres por línea.

     Se sale del techo recomendado de 80, y el coste real es menor de lo que
     sugiere la regla: ese techo aprieta en prosa continua, donde se encadenan
     decenas de renglones seguidos. Estos registros son entradas sueltas de una
     a tres líneas, separadas por filete y con su marca, así que el ojo casi
     nunca tiene que encadenar un salto largo.

     Lo que sí compensa el ancho es el interlineado, 1,75 en lugar del 1,6
     habitual. Se probó a todo el ancho del contenedor —1.232px, unos 125
     caracteres— y se volvió a este tope. */
  .gt-records__list { max-width: 100ch; }
  .gt-records__list li { font-size: 1rem; padding: 15px 0 15px 24px; }
  .gt-records__list li::before { top: calc(15px + 0.62em); }

  .gt-records__head { padding: 20px 2px 18px; }
  .gt-records__title { font-size: 1.0625rem; }

  /* DOS y no tres en escritorio, al revés que los certificados: los nombres de
     las políticas son largos —"Política Integrada de Calidad, Medio Ambiente y
     Seguridad de la Información" son 76 caracteres— y a un tercio de ancho se
     partirían en cuatro líneas junto a otros de una sola. */
  .gt-doc { min-height: 84px; padding: 12px 16px; }
  .gt-doc__cover, .gt-doc__cover-img, .gt-doc__ph { width: 46px; height: 61px; }
  .gt-doc__name { font-size: 1rem; }

}

@media (min-width: 1280px) {

  .gt-quality { padding-block: 88px; }


}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* Se conservan el filo y la sombra, que no son animación; se va el
     desplazamiento del símbolo de enlace externo, en las dos secciones. */
  .gt-cert,
  .gt-cert__view,
  .gt-doc,
  .gt-doc__view {
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
  }

  a.gt-cert:hover .gt-cert__view,
  a.gt-cert:focus-visible .gt-cert__view,
  a.gt-doc:hover .gt-doc__view,
  a.gt-doc:focus-visible .gt-doc__view {
    transform: none;
  }

}


/* ==========================================================================
   DOCUMENTOS SULID — /documentos-sulid/
   ==========================================================================
   Esta hoja lleva nombre de Calidad, pero desde que la FILA DE DOCUMENTO se
   sacó a un componente es también la hoja de SULID: allí se reutiliza tal cual
   —portada, nombre, símbolo de enlace externo, dos columnas desde tablet—.

   Lo único propio de SULID es cómo se agrupan esas filas: una lista por sede,
   con su título. Son tres bloques cortos —tres documentos, dos y uno—, así que
   NO llevan fondo alterno ni separador: bastan el título y el aire. Bandas de
   color para tres listas de una, dos y tres filas convertirían una página de
   consulta en un acordeón de secciones.
   ========================================================================== */

/* AL ANCHO DE LA CABECERA, no al de un párrafo. Estuvo en 62ch —662px— y se veía
   estrecha: es UNA instrucción de una línea con seis filas de 1.232px debajo, no
   un texto que haya que leer seguido, así que la regla de las 80 columnas no le
   aplica. A 1000px cabe entera en un renglón y arranca donde arranca el titular
   del hero, que es la línea de toda la página. */
.gt-sulid__intro {
  max-width: 1000px;
  margin: 0 0 28px;

  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* El aire ENTRE sedes es mayor que el que hay dentro de una —los 8px que separan
   dos filas—, para que se lea dónde acaba una planta y empieza la siguiente. */
/* MENOS AIRE ARRIBA DEL QUE TRAE .gt-quality. Esa sección se diseñó para /calidad/,
   donde tres bloques con fondo alterno se turnan y necesitan 88px para no pisarse.
   Aquí hay una sola sección y va detrás de la cabecera, que YA cierra con 76px de
   su propio fondo: sumados daban 164px entre la última línea del hero y la
   instrucción, un quinto de pantalla en blanco antes de empezar.

   Abajo no se toca: ahí viene la banda de cierre y esa sí tiene que despegarse. */
.gt-sulid {
  padding-top: 28px;
}

.gt-sulid__sede + .gt-sulid__sede {
  margin-top: 40px;
}

/* El encabezado de sede va más pegado a SU lista que a la sede anterior: mismo
   principio que en el ritmo del artículo —el aire de encima dice de qué depende—.
   .gt-section-head trae un margen pensado para separar secciones enteras, que
   aquí sobra. */
.gt-sulid__sede .gt-section-head {
  margin-bottom: 16px;
}

.gt-sulid__sede .gt-section-head__title {
  font-size: 1.25rem;
}


@media (min-width: 768px) {

  .gt-sulid {
    padding-top: 44px;
  }

  .gt-sulid__intro {
    font-size: 1.0625rem;
    margin-bottom: 36px;
  }

  .gt-sulid__sede + .gt-sulid__sede {
    margin-top: 52px;
  }

  .gt-sulid__sede .gt-section-head__title {
    font-size: 1.375rem;
  }

}


@media (min-width: 1024px) {

  /* TRES COLUMNAS AQUÍ, aunque las políticas de Calidad vayan a dos. No es un
     capricho de página: es que los nombres son de otro tamaño. Allí una fila dice
     «Política Integrada de Calidad, Medio Ambiente y Seguridad de la Información»
     —76 caracteres— y necesita el ancho; aquí dice «Sólidos a granel», y a media
     página el nombre quedaba pegado a la izquierda con un palmo de blanco hasta
     el símbolo del final.

     De paso, los tres documentos de Constantí caben en una sola fila, que es
     justo lo que hay que entender: en esa planta se puede llegar con las tres
     mercancías. */
  .gt-sulid .gt-doc-list {
    grid-template-columns: repeat(3, 1fr);
  }

}