/* ==========================================================================
   servicio.css
   --------------------------------------------------------------------------
   Páginas de servicio (page-servicio.php).

   SE CARGA SOLO EN ESA PLANTILLA, con is_page_template() en functions.php,
   mismo criterio que calidad.css.

   Lo que NO está aquí, porque se reutiliza de otras páginas: la cabecera
   (.gt-page-header), el bloque de texto+imagen (.gt-feature), la tarjeta de
   servicio (.gt-service-card), el botón (.gt-btn) y la BANDA DE CTA FINAL
   (.gt-service-cta), todos en components.css. El CTA se movió allí al usarlo
   también las entradas de noticias: dejó de ser "de servicio".

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


/* --------------------------------------------------------------------------
   .gt-service — envoltorio de sección
   Tres fondos alternos. El oscuro se reserva para "Medidas de seguridad": es
   el argumento más fuerte del servicio y conviene que rompa el ritmo.
   -------------------------------------------------------------------------- */

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

.gt-service--plain { background-color: var(--color-bg); }
/* --alt YA NO ES GRIS: el usuario lo quiso blanco (2026-09-01), igual que en la
   portada. El modificador se conserva —lo llevan las 23 páginas de servicio y
   los tres hubs— por si algún día vuelve el gris: sería cambiar esta línea.

   OJO AL AIRE: con las dos secciones del mismo color, lo único que separa una
   de otra es el relleno de las dos sumado. En las páginas de servicio son 72+72
   o más; si se ve vacío, el sitio donde tocarlo es el padding de .gt-service. */
.gt-service--alt   { background-color: var(--color-bg); }
.gt-service--dark  { background-color: var(--color-primary); }


/* --------------------------------------------------------------------------
   Llamadas a la acción
   --------------------------------------------------------------------------
   La entradilla y su CTA ya no viven aquí: se fundieron con la cabecera, que
   ahora es el hero completo (título, mensaje y salida a contacto). Lo que
   queda en este archivo es el CTA del final de la página, sobre fondo claro.
   -------------------------------------------------------------------------- */

.gt-service__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.gt-service__actions--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Teléfono junto al botón.
   No es un segundo botón: dos botones del mismo peso obligan a elegir y
   reparten la atención. Aquí el botón es la acción principal y el teléfono
   una alternativa visible para quien prefiere llamar — que en logística
   industrial es mucha gente, sobre todo desde el móvil.
   -------------------------------------------------------------------------- */

.gt-service__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;

  transition: color 0.2s ease;
}

.gt-service__phone-icon {
  display: flex;
  flex-shrink: 0;
}

.gt-service__phone-icon svg {
  width: 18px;
  height: 18px;
}

.gt-service__phone:hover,
.gt-service__phone:focus-visible {
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
  text-decoration: underline;
}

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


/* ==========================================================================
   FRANJA DE CONFIANZA
   ==========================================================================
   Va inmediatamente después de la entradilla, no al final: es la respuesta a
   "¿estos pueden con mi volumen?" antes de que la pregunta se formule.
   -------------------------------------------------------------------------- */

.gt-service-trust {
  background-color: var(--color-primary);
  padding-block: 24px;
}

.gt-service-trust__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;

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

.gt-service-trust__list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.gt-service-trust__list strong {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-bg);
  font-variant-numeric: tabular-nums;
}

.gt-service-trust__list span {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   CATEGORÍAS DE PRODUCTO (pictogramas)
   ==========================================================================
   TARJETAS HORIZONTALES: pictograma a la izquierda, nombre a la derecha.

   Antes era una rejilla de cuatro columnas con el pictograma arriba y el
   nombre centrado debajo. El problema eran los nombres: "Peligrosos para el
   medio ambiente" y "Cancerígenos o mutagénicos" partían en dos y tres líneas
   bajo un pictograma cuadrado, y las ocho tarjetas quedaban de alturas
   distintas. En dos columnas horizontales cada nombre cabe en UNA línea, que
   es lo que hace que las ocho se lean de un vistazo.

   Es además la misma anatomía que las filas de /calidad/: imagen a la
   izquierda, texto que ocupa el hueco, símbolo al final.

   Los pictogramas son WebP de 200×200 SIN transparencia, así que se apoyan
   sobre tarjeta blanca: sobre el fondo gris de la sección se vería el
   rectángulo del archivo. Y no se renderizan por encima de su tamaño real:
   ampliados se verían borrosos, y un pictograma de peligro borroso resta
   credibilidad justo donde se está hablando de seguridad.
   -------------------------------------------------------------------------- */

.gt-hazard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

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

.gt-hazard {
  display: flex;
  align-items: center;
  gap: 16px;

  height: 100%;
  padding: 12px 16px;

  background-color: var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);

  text-decoration: none;

  /* Borde transparente reservado desde el principio: si se añadiera solo en
     hover, la tarjeta crecería 2px y toda la fila daría un salto. */
  border: 2px solid transparent;

  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Hover y pulsación.
   --------------------------------------------------------------------------
   Se aplican a la tarjeta SIEMPRE, sea enlace o no, porque el efecto es la
   respuesta al gesto: sin él, pasar el ratón por encima no produce nada y la
   rejilla parece muerta.

   La pulsación (:active) hunde la tarjeta en lugar de elevarla. Es el gesto
   físico esperado y, mientras las categorías no tengan destino, al menos
   confirma que se ha registrado el clic.
   -------------------------------------------------------------------------- */

.gt-hazard:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
}

.gt-hazard:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gt-hazard__img {
  display: block;
  flex-shrink: 0;

  width: 64px;
  height: 64px;
  object-fit: contain;

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

.gt-hazard:hover .gt-hazard__img {
  transform: scale(1.06);
}

/* Cursor: mientras no haya destino NO se pone pointer, que prometería un
   enlace que no existe. La variante --link sí lo lleva. */
.gt-hazard--link {
  cursor: pointer;
}

.gt-hazard--link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* 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 tarjeta. */
.gt-hazard__name {
  flex: 1;
  min-width: 0;
  margin: 0;

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

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

  color: var(--color-accent);
  opacity: 0;

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

.gt-hazard__arrow svg {
  width: 18px;
  height: 18px;
}

.gt-hazard--link:hover .gt-hazard__arrow,
.gt-hazard--link:focus-visible .gt-hazard__arrow {
  opacity: 1;
  transform: translateX(3px);
}


/* ==========================================================================
   NORMATIVA — SEVESO y APQ en una sola sección
   --------------------------------------------------------------------------
   Iban en dos secciones separadas y se leían como dos veces lo mismo: mismo
   formato, mismo sello a un lado, mismo largo de texto. Juntas y en paralelo
   se comparan de un vistazo, que es como el lector las tiene en la cabeza —
   son los dos requisitos que debe cumplir quien le guarde el producto.

   Los textos se acortaron al pasar a media columna: en dos columnas, un
   párrafo pensado para el ancho completo se convierte en una tira de doce
   líneas.
   ========================================================================== */

.gt-norms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* --------------------------------------------------------------------------
   TABLA DE VERIFICACIÓN
   --------------------------------------------------------------------------
   Cada normativa se lee como una tabla: cabecera con el nombre y una fila por
   requisito, cada una con su marca. Es como se comparan dos normativas —
   recorriendo qué exige cada una, línea por línea— y por eso las filas llevan
   separador y alto propio en lugar de ser viñetas seguidas.

   Sin tarjeta: la sección es blanca y la tarjeta también lo era, así que el
   recuadro solo añadía un borde y una sombra sin separar nada.
   -------------------------------------------------------------------------- */

.gt-norm {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Cabecera SIN línea propia.
   --------------------------------------------------------------------------
   Antes llevaba un filete azul de 2px debajo, que pesaba más que cualquier
   otra línea de la sección y partía el bloque en dos mitades. Ahora la
   separación la hace el espacio, y las filas de abajo se cierran con el mismo
   filete fino que ya las separa entre sí: una sola familia de líneas en todo
   el bloque en lugar de dos grosores compitiendo.
   -------------------------------------------------------------------------- */

.gt-norm__head {
  margin-bottom: 18px;
}

.gt-norm__title {
  margin: 0 0 6px;

  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;

  /* Rojo de marca a plena intensidad: sobre blanco da 4.77:1 y aquí es texto
     grande y en negrita, así que va sobrado de contraste. */
  color: var(--color-accent);

  text-wrap: pretty;
}

/* Una sola frase de contexto, dentro de la cabecera. Todo lo demás va en las
   filas, que se escanean; un párrafo hay que leerlo entero. */
.gt-norm__lead {
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

.gt-norm__list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;

  /* Cierra el bloque por arriba con el mismo filete que separa las filas, así
     la lista queda delimitada sin introducir un grosor distinto. */
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

/* Cada requisito es una FILA: alto propio, separador y la marca alineada a la
   izquierda como una columna. */
.gt-norm__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 12px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}

/* Marca de verificación dibujada con dos bordes girados: sin archivo, sin SVG
   repetido ocho veces en el HTML, y escala con la tipografía. Va dentro de un
   cuadro de ancho fijo para que todas las filas alineen el texto. */
.gt-norm__list li::before {
  content: "";
  flex-shrink: 0;

  width: 6px;
  height: 11px;
  margin: 4px 3px 0 2px;

  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  rotate: 45deg;
}



/* --------------------------------------------------------------------------
   .gt-norm__contact — pie de contacto dentro de un panel
   --------------------------------------------------------------------------
   Solo lo usan los paneles que representan un emplazamiento físico, como los
   dos lavaderos; los de normativa no lo llevan y por eso el bloque entero es
   opcional en el componente.

   Va separado de la lista por un filo y con la letra algo más pequeña: son
   datos de referencia, no argumentos, y no deben competir con los puntos de
   arriba. Pero el teléfono sí es pulsable y va en azul, porque en logística
   mucha gente entra por el móvil y llama directamente.
   -------------------------------------------------------------------------- */

.gt-norm__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  font-style: normal;   /* <address> viene en cursiva por defecto */
}

.gt-norm__contact-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.62);
  text-wrap: pretty;
}

.gt-norm__contact-icon {
  display: flex;
  flex-shrink: 0;

  /* Un pelo por debajo de la primera línea de texto, para que el símbolo quede
     ópticamente centrado con ella y no colgando por encima. */
  margin-top: 1px;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-norm__contact-icon svg {
  width: 15px;
  height: 15px;
}

.gt-norm__contact a {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.gt-norm__contact a:hover,
.gt-norm__contact a:focus-visible {
  text-decoration: underline;
}

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

/* Fragmento resaltado del H2 de la sección */
.gt-norms__mark {
  color: var(--color-accent);
}




/* --------------------------------------------------------------------------
   .gt-norm__label — rótulo de apartado dentro de un panel
   Separa "Características" de "Contacto" cuando el panel lleva las dos cosas.
   Versalitas, como el resto de rótulos del sitio.
   -------------------------------------------------------------------------- */

.gt-norm__label {
  display: block;
  margin: 0 0 10px;

  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.gt-norm__contact .gt-norm__label {
  margin-bottom: 12px;
}


/* --------------------------------------------------------------------------
   .gt-map — mapa que solo carga cuando se pulsa
   --------------------------------------------------------------------------
   NO hay ningún <iframe> en el HTML: lo crea assets/js/maps.js al pulsar el
   botón. Hasta entonces no sale ni una petición hacia Google, que es la
   condición para no tratar datos del visitante sin habérselo pedido.

   El botón ocupa exactamente el mismo hueco que ocupará el mapa (proporción
   16:10), así que al cargarse no hay salto de maquetación.
   -------------------------------------------------------------------------- */

.gt-map {
  position: relative;
  margin-top: 18px;

  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
}

/* Reserva de altura para navegadores sin aspect-ratio: se cae a una altura
   fija razonable en vez de colapsar a cero. */
@supports not (aspect-ratio: 16 / 10) {
  .gt-map { min-height: 200px; }
}

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

  width: 100%;
  height: 100%;
  padding: 16px 18px;

  background-color: var(--color-bg);
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  cursor: pointer;

  text-align: left;

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

/* Borde discontinuo a propósito: dice "aquí va algo que todavía no está",
   igual que los marcadores de posición del resto del sitio. Un borde macizo
   se leería como una tarjeta terminada. */
.gt-map__load:hover,
.gt-map__load:focus-visible {
  background-color: var(--color-bg-alt);
  border-color: var(--color-accent);
}

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

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

.gt-map__icon svg {
  width: 26px;
  height: 26px;
}

.gt-map__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gt-map__label strong {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
}

/* El aviso de que la carga viene de fuera va SIEMPRE visible, no escondido en
   un texto de ayuda: el visitante tiene que saber a qué está diciendo que sí
   antes de pulsar, no después. */
.gt-map__label span {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
}

/* Una vez cargado, el iframe ocupa todo el hueco reservado. */
.gt-map--loaded {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.gt-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

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

  .gt-map__load { transition: none; }

}


/* --------------------------------------------------------------------------
   CTA con un botón por planta
   --------------------------------------------------------------------------
   Dos teléfonos y ningún botón rojo: en un lavadero se contrata llamando a la
   planta, así que las dos acciones tienen el mismo peso y ninguna manda sobre
   la otra. Por eso aquí no hay jerarquía de color, solo dos piezas iguales.
   -------------------------------------------------------------------------- */

.gt-service-cta__actions--plants {
  flex-wrap: wrap;
  gap: 12px;
}

/* Solo el nombre del sitio dentro del botón: "Cómo llegar" lo dice el título
   de la banda, y repetirlo en los dos obligaba a leer tres veces lo mismo para
   acabar eligiendo por el nombre, que es lo único que los diferencia. */
.gt-service-cta__phone--plant {
  align-items: center;
  padding: 14px 22px;
}

.gt-service-cta__phone--plant strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}


/* ==========================================================================
   VENTAJAS
   --------------------------------------------------------------------------
   Antes era una lista de dos columnas con un check diminuto delante de cada
   línea: los seis puntos se leían como un párrafo troceado y ninguno
   destacaba. Ahora cada ventaja es una tarjeta con su propio espacio.

   La tarjeta va sobre fondo blanco igual que la sección, así que no se apoya
   en el contraste de fondo sino en un FILO DE ACENTO a la izquierda, que
   además marca el inicio de cada bloque para la vista. El check pasa a ser un
   círculo mayor y con peso, en lugar de un adorno de 13px.
   ========================================================================== */

.gt-advantages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;

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

.gt-advantage {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   El símbolo es el ancla de cada punto, y sustituye al número que había antes:
   dice de qué va la ventaja antes de leerla, cosa que un "03" no hace.

   Ocupa las dos filas de la rejilla, así el texto fluye a su derecha y el
   icono queda centrado respecto al bloque entero, no colgando del título.
   -------------------------------------------------------------------------- */

.gt-advantage__icon {
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  background-color: rgba(201, 70, 68, 0.1);   /* --color-accent al 10% */
  color: var(--color-accent);
  border-radius: 12px;
}

.gt-advantage__icon svg {
  width: 24px;
  height: 24px;
}

.gt-advantage__title {
  grid-column: 2;
  align-self: end;
  margin: 0;

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

.gt-advantage__text {
  grid-column: 2;
  align-self: start;
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
  text-wrap: pretty;
}


/* ==========================================================================
   MEDIDAS DE SEGURIDAD — sobre fondo azul
   ========================================================================== */

/* El encabezado de sección invierte sus colores sobre el fondo oscuro. */
.gt-section-head--invert .gt-section-head__title {
  color: var(--color-bg);
}

.gt-section-head--invert .gt-section-head__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

.gt-safety {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px var(--gutter);
}

.gt-safety__column {
  display: flex;
  flex-direction: column;
  gap: 10px;

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

/* EL TEXTO YA NO ES BLANCO. Esta sección estuvo sobre azul oscuro —era la única
   banda oscura de las páginas de servicio— y el usuario la pasó a blanco el
   2026-08-26. Con el color de antes, las quince medidas quedaban en blanco sobre
   blanco: invisibles, no "poco legibles".

   La viñeta roja se queda: sobre blanco da 4,0:1, por encima del 3:1 que se le
   pide a un elemento gráfico, y es lo que sigue marcando el ritmo de la lista. */
.gt-safety__column li {
  position: relative;
  padding-left: 20px;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

/* Viñeta propia: las nativas de <li> no admiten color independiente. */
.gt-safety__column li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;

  width: 6px;
  height: 6px;

  background-color: var(--color-accent);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   .gt-safety__seal — verificación externa
   --------------------------------------------------------------------------
   Antes era letra pequeña bajo una línea divisoria, y ahí se leía como una
   nota al pie: lo último que mira nadie.

   Pero es el dato más fuerte de toda la sección. Las quince medidas de
   seguridad las afirmamos nosotros; esto lo confirma un tercero, y encima la
   administración. Por eso pasa a recuadro propio con icono de verificación,
   sobre un fondo un punto más claro que el azul de la sección para que se
   despegue sin salirse de la paleta.
   -------------------------------------------------------------------------- */

.gt-safety__seal {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  margin-top: 32px;
  padding: 18px 20px;

  /* Al pasar la sección a blanco, el recuadro tiene que despegarse por el otro
     lado: antes era un blanco al 8% sobre azul y ahora es un azul al 5% sobre
     blanco. El papel es el mismo —separar el dato que confirma un tercero de las
     quince medidas que afirmamos nosotros—. */
  background-color: #f5f7f9;
  background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
  border: 1px solid #dde3e8;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: 10px;
}

/* Los tres colores de dentro del recuadro estaban escritos para fondo azul: el
   símbolo en blanco, el texto en blanco al 78% y el rótulo en blanco. Sobre la
   sección en blanco eran invisibles. Ahora el símbolo va en rojo —es una marca de
   verificación, y el rojo aquí señala—, el rótulo en azul de marca y el texto en
   el gris del cuerpo. */
.gt-safety__seal-icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}

.gt-safety__seal-icon svg {
  width: 26px;
  height: 26px;
}

.gt-safety__seal-text {
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  text-wrap: pretty;
}

.gt-safety__seal-text strong {
  display: block;
  margin-bottom: 2px;

  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

@media (min-width: 768px) {

  .gt-safety__seal {
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    margin-top: 40px;
  }

  .gt-safety__seal-icon svg { width: 32px; height: 32px; }

}


/* ==========================================================================
   CARACTERÍSTICAS TÉCNICAS — lista de definiciones
   ==========================================================================
   <dl> y no <ul>: son pares término/descripción, que es exactamente para lo
   que existe esta etiqueta. Además da un anclaje semántico que los buscadores
   entienden mejor que una lista de párrafos en negrita.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Ficha técnica: símbolo grande a la izquierda, rótulo y dato a su derecha.
   --------------------------------------------------------------------------
   Antes cada característica colgaba de un filo vertical rojo, con el símbolo
   metido dentro del rótulo a 18px. Ese filo repetía el recurso de las tablas
   de normativa, y a ese tamaño el símbolo no llegaba a leerse: quedaba como
   una viñeta, no como un icono.

   Ahora comparte anatomía con "Ventajas": cuadrado de 48px con el símbolo
   dentro a 24px, centrado respecto al bloque entero. Las dos secciones NO van
   seguidas —entre ellas está la franja azul de seguridad—, así que repetir la
   pieza no las funde: las hermana.

   Lo que las distingue es el color. En "Ventajas" el cuadrado va en rojo
   diluido con el símbolo rojo; aquí en azul, que es con el que ya se pintaba
   el símbolo en esta sección. Y el rótulo sigue en versalitas, que es lo que
   le da a la sección su lectura de ficha de producto.

   El símbolo va POSICIONADO y no como celda de una rejilla porque el marcado
   es un <dl>: dentro del <div> que agrupa cada par solo caben <dt> y <dd>, así
   que el <span> del icono tiene que vivir dentro del <dt>. Sacarlo del flujo
   es lo que permite centrarlo respecto al rótulo Y al dato, y no solo respecto
   al rótulo.
   -------------------------------------------------------------------------- */

.gt-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;

  margin: 0;
}

.gt-spec {
  position: relative;
  padding-left: 64px;          /* 48 del cuadrado + 16 de separación */
  min-height: 48px;            /* que un dato de una línea no deje el icono fuera */
}

.gt-spec__title {
  margin: 0 0 6px;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-spec__icon {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  /* AZUL MACIZO, NO UN DIEZ POR CIENTO DE AZUL. El cuadrado iba al 10% del color
     de marca, y sobre la banda gris de esta sección un azul tan diluido no se lee
     como azul: se lee como gris un poco más oscuro, y los diez símbolos quedaban
     apagados justo en la sección donde más se usan para saltar de un dato a otro.

     No choca con las tarjetas de tipo de silo, que también son azul macizo: allí
     son paneles de ancho completo y aquí cuadrados de 48px. Y mantiene la
     distinción con las VENTAJAS, que siguen en rojo diluido. */
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-radius: 12px;
}

.gt-spec__icon svg {
  width: 24px;
  height: 24px;
}

.gt-spec__text {
  margin: 0;

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


/* ==========================================================================
   CERTIFICACIÓN — documento + ficha de datos
   ==========================================================================
   Se enseña el certificado ENTERO, no un logotipo. Un logo lo pone cualquiera
   en su web; un documento con entidad emisora, número de registro y alcance es
   verificable, y en alimentación de consumo humano eso es el argumento.

   Dos columnas desde tablet: el documento a la izquierda con su proporción
   real —724×1024, vertical— y la ficha de datos a la derecha. En móvil se
   apilan y el documento va primero, porque es la prueba.
   -------------------------------------------------------------------------- */

.gt-cert {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.gt-cert__doc {
  margin: 0;
  max-width: 200px;
}

.gt-cert__doc a {
  display: block;
  border-radius: 8px;

  /* Transparente en reposo y reservado desde el principio: si el filo apareciera
     solo al pasar el ratón, el documento se movería 4px y arrastraría la
     columna entera. */
  border: 2px solid transparent;

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

.gt-cert__doc img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gt-cert__doc a:hover,
.gt-cert__doc a:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

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

/* Pie del documento: es donde se nombra la norma con exactitud, así que va
   pegado a la imagen y en letra pequeña. Los datos de registro sostienen la
   afirmación, no son el argumento. */
/* --------------------------------------------------------------------------
   El enlace escrito al documento
   --------------------------------------------------------------------------
   La portada ya es pulsable, pero una imagen no anuncia que lo sea. El enlace
   escrito debajo lo dice con palabras, y lleva el mismo símbolo de enlace externo
   que las filas de documento de /calidad/: mismo comportamiento, mismo glifo.
   -------------------------------------------------------------------------- */

/* EL SELECTOR LLEVA EL PIE DELANTE porque este enlace vive dentro de la figura, y
   ahí ya manda `.gt-cert__doc a { display: block }` —la regla que hace pulsable la
   portada entera—. Con una sola clase perdía: el enlace salía en bloque a 300px y
   el símbolo se caía al renglón siguiente, debajo del texto. */
.gt-cert__caption .gt-cert__open {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;

  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-cert__caption .gt-cert__open:hover,
.gt-cert__caption .gt-cert__open:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gt-cert__open-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}


/* --------------------------------------------------------------------------
   El puente a la página donde están todos
   --------------------------------------------------------------------------
   BOTÓN DE FILO, no un enlace de texto. Estuvo en rojo y subrayado al pasar el
   ratón, exactamente igual que «Ver el certificado en PDF» que tiene al lado, y
   dos enlaces idénticos que llevan a sitios distintos —uno a un documento, otro a
   una página del sitio— se leen como el mismo botón repetido.

   Con filo azul y sin relleno queda por debajo del botón rojo del cierre, que es
   LA acción de la página, y por encima de un enlace de texto corriente: es
   exactamente el peso que tiene ir a ver el resto de certificados.
   -------------------------------------------------------------------------- */

.gt-cert__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 28px;
  padding: 12px 22px;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;

  color: var(--color-primary);
  background-color: transparent;
  border: 2px solid var(--color-primary);
  border-radius: 3px;

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Al pasar el ratón se rellena. La flecha no se mueve: en un botón que cambia de
   color entero, además desplazar el símbolo es una animación de más. */
.gt-cert__all:hover,
.gt-cert__all:focus-visible {
  color: var(--color-bg);
  background-color: var(--color-primary);
}

.gt-cert__all:focus-visible {
  outline: 3px solid #a03836;
  outline: 3px solid color-mix(in srgb, var(--color-accent) 86%, #000);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gt-cert__all { transition: none; }
}


.gt-cert__caption {
  margin: 12px 0 0;
  max-width: 300px;

  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
}

.gt-cert__body {
  align-self: start;
}

.gt-cert__text {
  margin: 0 0 16px;

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

.gt-cert__mark {
  font-weight: 600;
  color: var(--color-primary);
}

/* El último párrafo no arrastra margen inferior: dentro de una rejilla, ese
   hueco se sumaría al gap y descuadraría la columna respecto al documento. */
.gt-cert__text:last-child {
  margin-bottom: 0;
}

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

  .gt-cert__doc a { transition: border-color 0.2s ease; }

  .gt-cert__doc a:hover,
  .gt-cert__doc a:focus-visible { transform: none; }

}


/* ==========================================================================
   PREGUNTAS FRECUENTES
   ==========================================================================
   Desplegables NATIVOS (<details> / <summary>). Sin JavaScript: abrir, cerrar,
   enfocar por teclado y anunciar el estado al lector de pantalla ya lo hace el
   navegador. Lo único que pone el CSS es el aspecto.

   Filas separadas por filo fino, sin caja: la página ya usa tarjetas en las
   categorías y cuadrados de color en ventajas y técnicas. Una lista de filas
   es el cuarto tratamiento distinto, y aquí encaja porque lo que se compara no
   son piezas sino preguntas, una debajo de otra.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Reparto de la sección: preguntas y foto.
   --------------------------------------------------------------------------
   Hasta escritorio van apiladas, y la foto queda debajo porque en el HTML va
   después: en un teléfono lo primero tienen que ser las preguntas.

   Desde 1024px se ponen en dos columnas, con la foto a la derecha y anclada
   arriba (align-items: start) para que no se estire ni se centre cuando el
   acordeón crece al abrir una respuesta.
   -------------------------------------------------------------------------- */

.gt-faq-layout {
  display: grid;
  gap: 32px;
}

.gt-faq {
  /* Se acota el ancho aunque la sección llegue a 1232px: una pregunta que
     cruza toda la pantalla obliga al ojo a volver muy lejos en cada salto de
     línea. El bloque queda alineado a la izquierda, como el resto de la
     página, no centrado. */
  max-width: 78ch;

  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   La foto.
   --------------------------------------------------------------------------
   El archivo mide 300×300 y NO se amplía: max-width en píxeles, no en
   porcentaje. Estirada a media página se vería borrosa, y una foto borrosa de
   un almacén de producto químico resta credibilidad justo donde se habla de
   seguridad. Mismo criterio que con los pictogramas de peligro.

   El height: auto es imprescindible junto a los atributos width/height del
   HTML: sin él, la imagen conservaría los 300px de alto al encogerse de ancho
   en pantallas estrechas y saldría deformada.
   -------------------------------------------------------------------------- */

.gt-faq__media {
  margin: 0;
  max-width: 300px;
}

.gt-faq__media img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.10);
}

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

/* --------------------------------------------------------------------------
   La pregunta.
   --------------------------------------------------------------------------
   Se quita el triángulo del navegador —hacen falta las dos reglas, la estándar
   y la de WebKit— y se pone un símbolo propio a la derecha, alineado con el
   borde: así todas las flechas quedan en la misma vertical aunque las
   preguntas midan distinto.
   -------------------------------------------------------------------------- */

.gt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 18px 2px;
  cursor: pointer;
  list-style: none;

  transition: color 0.2s ease;
}

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

.gt-faq__q-text {
  margin: 0;

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

.gt-faq__q:hover .gt-faq__q-text {
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

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

.gt-faq__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-accent);

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

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

/* El símbolo gira al abrir. Se estiliza desde el atributo [open] y no desde una
   clase: así el aspecto no puede desincronizarse del estado real. */
.gt-faq__item[open] .gt-faq__icon {
  rotate: 180deg;
}

.gt-faq__item[open] .gt-faq__q-text {
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-faq__a {
  padding: 0 2px 20px;
}

.gt-faq__a p {
  margin: 0;
  max-width: 68ch;

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

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

  .gt-faq__icon,
  .gt-faq__q {
    transition: none;
  }

}



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

@media (min-width: 480px) {

  .gt-hazard-grid { gap: 12px; }

}

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

  .gt-service       { padding-block: 52px; }
  .gt-service-trust { padding-block: 32px; }

  .gt-service-trust__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
  }

  .gt-service-trust__list strong { font-size: 1.5rem; }
  .gt-service-trust__list span   { font-size: 0.8125rem; }

  /* DOS COLUMNAS y no cuatro. Con cuatro, a cada tarjeta le quedaban unos
     280px y el nombre volvía a partirse; en dos, cada una ronda los 600px y
     "Peligrosos para el medio ambiente" cabe en una línea. */
  .gt-hazard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px var(--gutter);
  }

  .gt-hazard      { padding: 14px 18px; gap: 18px; }
  .gt-hazard__img { width: 72px; height: 72px; }

  .gt-norms {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
  }

  .gt-norm__head    { margin-bottom: 20px; }
  .gt-norm__title   { font-size: 1.25rem; }
  .gt-norm__lead    { font-size: 0.9375rem; }
  .gt-norm__list li { font-size: 0.9375rem; padding: 14px 2px; }

  .gt-advantages {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px var(--gutter);
  }

  .gt-advantage__title { font-size: 1.0625rem; }
  .gt-safety {
    grid-template-columns: repeat(3, 1fr);
  }

  /* EL DOCUMENTO, PEQUEÑO Y A UN LADO. No es la pieza principal de la sección:
     es la prueba de lo que dice el texto. A 300px pedía la mitad del bloque y
     encima se veía ampliado —el recorte disponible es de 212px de ancho—.

     `align-items: center` y no `start`: con dos columnas de altura parecida, el
     documento alineado arriba dejaba un hueco debajo que no era de nadie. */
  .gt-cert {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }

  .gt-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px var(--gutter);
  }

  .gt-faq__q      { padding: 22px 2px; }
  .gt-faq__q-text { font-size: 1.0625rem; }
  .gt-faq__a      { padding-bottom: 24px; }
  .gt-faq__a p    { font-size: 1rem; }

}

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

  /* EN ESCRITORIO EL TEXTO SE LLEVA TODO LO QUE SOBRA. El documento no crece —un
     escaneado ampliado se emborrona—, así que el hueco que gana la pantalla va
     entero a la columna de la explicación, que es lo que se lee.

     El documento sube a 220px porque a esa distancia se sigue reconociendo el
     sello y el encabezado de Intertek, que es todo lo que tiene que hacer desde
     lejos: para leerlo está el enlace al PDF. */
  .gt-cert {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }

  /* SIN TOPE DE ANCHO. Estuvo en 68ch —unos 640px— y el párrafo se cortaba a
     media columna dejando 300px de blanco a su derecha: con el documento al lado,
     ese hueco no lo ocupaba nadie y parecía que faltaba algo. Ahora ocupa la
     columna entera, y son dos párrafos cortos, no una página de texto seguido.

     Al ganar ancho, la letra sube un peldaño: a 15px en una línea de 950px, el
     texto se veía pequeño para lo que ocupa. */
  .gt-cert__text {
    font-size: 1rem;
    line-height: 1.7;
  }

  .gt-service       { padding-block: 60px; }
  .gt-service-trust { padding-block: 36px; }

  .gt-service-trust__list strong { font-size: 1.75rem; }

  /* Los pictogramas miden 200px de origen: por encima de eso se verían
     borrosos. A 80px van muy por debajo, así que quedan nítidos. */
  .gt-hazard      { padding: 16px 20px; }
  .gt-hazard__img { width: 80px; height: 80px; }
  .gt-hazard__name { font-size: 1rem; }

  /* DOS COLUMNAS TAMBIÉN EN ESCRITORIO, a prueba (2026-08-26). Estuvo en tres,
     razonando que al acortar los textos cada ventaja cabía en dos líneas y a la
     mitad de ancho sobraba sitio. En dos, cada tarjeta respira y el símbolo deja
     de ir pegado al texto; a cambio la sección crece de dos filas a tres.

     Si se vuelve a tres, esta regla es lo único que hay que devolver:
     grid-template-columns: repeat(3, 1fr); */
  .gt-advantages { grid-template-columns: repeat(2, 1fr); }

  /* Las características se quedan en DOS columnas, a diferencia de las
     ventajas: sus descripciones son más largas —"Silos de acero inoxidable:
     descarga neumática y carga por gravedad"— y a un tercio de ancho se
     partirían en cuatro líneas junto a otras de una sola. */
  .gt-specs { gap: 28px var(--gutter); }

  /* La segunda columna se fija a los 300px de la foto y la primera se queda
     con el resto; minmax(0, 1fr) y no 1fr, para que una pregunta larga no
     pueda ensanchar la columna por encima del contenedor. */
  .gt-faq-layout--media {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }


}

@media (min-width: 1280px) {

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

}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   Se conservan sombras y cambios de color, que no dependen de animación; lo
   que se quita es todo desplazamiento.
   -------------------------------------------------------------------------- */

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

  .gt-family,
  .gt-family__icon,
  .gt-hazard,
  .gt-hazard__img,
  .gt-hazard__arrow,
  .gt-service__phone,
  .gt-page-header__phone {
    transition: none;
  }

  .gt-family:hover,
  .gt-family:hover .gt-family__icon,
  .gt-hazard:hover,
  .gt-hazard:active,
  .gt-hazard--link:hover,
  .gt-hazard--link:focus-visible,
  .gt-hazard:hover .gt-hazard__img {
    transform: none;
  }

  .gt-hazard--link:hover .gt-hazard__arrow,
  .gt-hazard--link:focus-visible .gt-hazard__arrow {
    transform: none;
  }

}


/* ==========================================================================
   SEDES — una sección por instalación
   ==========================================================================
   Cada lavadero es su propia sección, con su H2, su fondo y su espacio, en vez
   de dos fichas compartiendo caja. Dos instalaciones con dirección, teléfono y
   mercancía distintos no son las dos mitades de una cosa.

   La separación se apoya en la alternancia gris/blanco que ya marca el paso en
   el resto del sitio, así que no introduce ningún recurso nuevo.
   ========================================================================== */

/* Aire por encima al llegar desde un enlace del hero: sin esto el título
   aterriza pegado al borde de la ventana y parece que el salto ha fallado. */
.gt-plant {
  scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------------
   El reparto: lo que se lee a la izquierda, lo que se consulta a la derecha.
   -------------------------------------------------------------------------- */

.gt-plant__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.gt-plant__main,
.gt-plant__side {
  min-width: 0;
}


@media (min-width: 768px) {

  .gt-plant__grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 40px;
    align-items: start;
  }

  /* El mapa y el contacto se quedan arriba aunque la lista de al lado sea
     mucho más alta: pegados al borde superior se leen como ficha del título
     que tienen enfrente, y no como pie de la lista. */
  .gt-plant__side {
    position: sticky;
    top: 24px;
  }

}

@media (min-width: 1024px) {

  .gt-plant__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
  }

}



/* --------------------------------------------------------------------------
   .gt-wash — características con símbolo
   --------------------------------------------------------------------------
   Sustituye a la lista con marcas de verificación. Doce líneas seguidas con el
   mismo check delante se leen como un bloque de texto y no se distingue una de
   otra; con un símbolo por punto, cada característica se reconoce antes de
   leerla, que es como se recorre una ficha técnica.

   El símbolo va en cuadrado diluido, no suelto: a 18px sin fondo se perdería
   entre dos líneas de texto.

   EL COLOR HACE DE LEYENDA. Rojo lo que es propio de esa planta, azul lo que
   comparte con la otra. No hace falta explicarlo: al ver las dos secciones se
   entiende solo, y es exactamente la pregunta que trae quien compara los dos
   lavaderos.
   -------------------------------------------------------------------------- */

.gt-wash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;

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

.gt-wash__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

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

  width: 34px;
  height: 34px;

  background-color: rgba(37, 73, 97, 0.1);   /* --color-primary al 10% */
  color: var(--color-primary);
  border-radius: 9px;
}

.gt-wash__icon svg {
  width: 18px;
  height: 18px;
}

/* Lo propio de esta planta, en rojo. Se marca de dos maneras: en la lista
   entera —el grupo de cisternas, que es exclusivo por definición— y punto a
   punto, para lo exclusivo que aparece dentro del equipamiento común. */
.gt-wash--own .gt-wash__icon,
.gt-wash__icon--own {
  background-color: rgba(201, 70, 68, 0.1);  /* --color-accent al 10% */
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-wash__text {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  text-wrap: pretty;
}


@media (min-width: 1024px) {

  /* Dos columnas de características: en la columna ancha, doce líneas de una
     en una dejaban un renglón cortísimo y una lista larguísima. */
  .gt-wash {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px var(--gutter);
  }


}


/* --------------------------------------------------------------------------
   Título de sede en ROJO
   --------------------------------------------------------------------------
   Es la excepción a la regla del sitio, que reserva el azul para los títulos.
   Aquí funciona porque el fondo es claro: sobre blanco o gris, el acento
   oscurecido un 14% con negro llega a 5,2:1, muy por encima del mínimo. Sobre
   los fondos oscuros seguiría sin poder escribir, y por eso no se generaliza.

   El plano de reserva va primero, para los navegadores sin color-mix.
   -------------------------------------------------------------------------- */

.gt-plant .gt-section-head__title {
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}


/* --------------------------------------------------------------------------
   .gt-lines — la capacidad de la planta
   --------------------------------------------------------------------------
   Un número y su unidad, sin nada alrededor: ni barras, ni filo, ni caja. Es
   un dato de dos caracteres y el tamaño ya lo hace visible; todo lo que se le
   añadía competía con los símbolos que vienen justo debajo.

   La cifra va en AZUL y el título de la sección en rojo. Al revés —que es como
   estaba— el número gritaba más que el nombre del sitio al que pertenece.
   -------------------------------------------------------------------------- */

.gt-lines {
  display: flex;
  align-items: baseline;
  gap: 10px;

  margin: 0 0 26px;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   La cifra sigue la MISMA escala que los contadores de la home
   (.gt-stat__value): 22 · 26 · 32 · 36px. Estaba fija en 40px, más grande que
   cualquier otra cifra del sitio y —en móvil— más grande que el propio H1 de
   la página, que mide 24px. Un dato no puede pesar más que el título de la
   página en la que vive.
   -------------------------------------------------------------------------- */
.gt-lines strong {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 0.9;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   .gt-plant__group — rótulo de grupo
   --------------------------------------------------------------------------
   Encabezado de verdad (h3) pero con aspecto de nota al margen: pequeño, en
   gris y sin versalitas. Las versalitas que llevaba antes lo convertían en una
   pieza más de la página, y aquí solo tiene que separar dos listas sin robarle
   nada al título de la sección ni a los símbolos de debajo.
   -------------------------------------------------------------------------- */

.gt-plant__group {
  margin: 0 0 14px;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.62);  /* 0.5 daba 3,9:1; hace falta 4,5:1 */
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   El hueco entre los dos grupos.
   --------------------------------------------------------------------------
   Tiene que ser MAYOR que la separación entre las líneas de la lista de
   arriba, o el rótulo se lee como una fila más de esa lista en vez de como el
   principio de otra. Con 14px de separación entre puntos, 30px se quedaban
   cortos: 48px es lo que hace que se vean dos bloques y no uno partido.
   -------------------------------------------------------------------------- */

.gt-plant__group--next {
  margin-top: 48px;
}


/* --------------------------------------------------------------------------
   .gt-place — mapa, dirección y teléfono en una sola ficha
   --------------------------------------------------------------------------
   Antes eran dos cosas sueltas —un mapa y, debajo, dos líneas de texto— y se
   leían como el pie de la lista de al lado. Con cuerpo propio se leen como lo
   que son: la dirección de este sitio concreto.

   El mapa hace de cabecera de la ficha, a sangre y sin marco: es la "foto" del
   lugar, y los datos van debajo como el pie de una imagen. Pequeño a
   propósito, porque aquí sirve para situar y no para navegar — de eso se
   encargan los botones de "Cómo llegar" del cierre.
   -------------------------------------------------------------------------- */

.gt-place {
  overflow: hidden;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
}

.gt-place__map {
  /* A todo el ancho de la ficha. La altura sale de la proporción, no de un
     tope en píxeles: con max-height el mapa se quedaba corto y dejaba un hueco
     a los lados en vez de llenar la cabecera. 16:9 lo mantiene bajo, que es lo
     que se busca —situar, no navegar—, pero de lado a lado. */
  width: 100%;
  aspect-ratio: 16 / 9;

  /* El redondeo lo hereda del overflow de la ficha, así que no necesita el
     suyo. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Reserva de altura para navegadores sin aspect-ratio: se cae a una altura
   fija razonable en vez de colapsar a cero. */
@supports not (aspect-ratio: 16 / 9) {
  .gt-place__map { height: 190px; }
}

.gt-place__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gt-place__data {
  padding: 16px 18px 18px;
  font-style: normal;   /* <address> viene en cursiva por defecto */
}

.gt-place__row {
  margin: 0;
}

.gt-place__row + .gt-place__row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.gt-place__label {
  display: block;
  margin-bottom: 4px;

  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62);  /* 0.45 daba 3,4:1; hace falta 4,5:1 */
}

/* 0.8125rem, el mismo cuerpo que .gt-norm__contact-line, que es exactamente
   este contenido —una dirección dentro de un panel— en la página de químicos.
   Estaba en 0.875rem, un tamaño que en el resto del sitio solo se usa como
   base de móvil de textos que luego crecen. */
.gt-place__value {
  display: block;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

/* El teléfono es la única acción de la ficha, así que es lo único que va en
   azul y con peso. La dirección se lee; este se pulsa. */
.gt-place__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;

  transition: color 0.2s ease;
}

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

.gt-place__phone-icon svg {
  width: 16px;
  height: 16px;
}

.gt-place__phone:hover,
.gt-place__phone:focus-visible {
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

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

  .gt-place__phone { transition: none; }

}


/* --------------------------------------------------------------------------
   Escalado por dispositivo de las piezas de la página de lavado
   --------------------------------------------------------------------------
   La cifra sigue la escala de los contadores de la home; el resto de textos de
   esta página ya coincide con sus equivalentes de las otras páginas de
   servicio y por eso no lleva overrides: el texto de las listas se queda en
   15px igual que .gt-norm__list li y .gt-safety__column li, que tampoco crecen.
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .gt-lines strong { font-size: 1.625rem; }
}

@media (min-width: 768px) {
  .gt-lines strong { font-size: 2rem; }
}

@media (min-width: 1024px) {
  .gt-lines strong { font-size: 2.25rem; }
}


/* ==========================================================================
   LA ENTRADILLA DE SECCIÓN (.gt-lead) Y LOS TIPOS DE SILOS
   --------------------------------------------------------------------------
   `.gt-lead` NACIÓ COMO `.gt-silos__lead` y se renombró el 2026-08-26, al hacer
   /fitosanitarios-plaguicidas/: las dos páginas abren igual —un párrafo de
   entrada antes del primer H2— y no tenía sentido un segundo bloque idéntico con
   otro nombre. Es el mismo criterio que va a regir el refactor de las plantillas
   de servicio: lo que se repite, se comparte.
   ========================================================================== */

/* ==========================================================================
   TIPOS DE SILOS — /silos-almacenaje/
   --------------------------------------------------------------------------
   Son DOS, son una elección y NO LLEVAN TEXTO: solo el nombre y su símbolo. Eso
   cambia el problema. Una tarjeta con dos líneas se sostiene sola; una tarjeta
   con dos palabras dentro de un panel gris claro parece una etiqueta olvidada.

   POR ESO VAN EN AZUL MACIZO. Sobre la banda blanca son las dos únicas manchas
   de color de la sección, así que se leen antes que nada y se entienden como lo
   que son: los dos caminos de la página. De paso no se parecen a ninguna de las
   otras dos piezas de tarjeta del sitio —la de característica y la de ventaja—,
   que son claras y llevan el símbolo en un cuadrado diluido.

   El símbolo va en un círculo de blanco translúcido: se apoya en el propio azul
   de la tarjeta en vez de traer un color más.
   ========================================================================== */

.gt-lead {
  /* Separa de lo que viene debajo, que ahora es el primer epígrafe: el margen
     inferior de .gt-section-head empieza a contar DESPUÉS de él. */
  margin: 0 0 40px;

  /* SIN TOPE DE ANCHO. Llevó max-width: 1000px —el ancho de lectura cómodo para
     un párrafo— y quedaba 232px más estrecho que todo lo demás de la página: el
     contenedor mide 1232 y el texto arrancaba y moría antes que los epígrafes y
     las tarjetas de debajo. Un párrafo suelto más corto que su sección no se lee
     como una columna de lectura, se lee como un bloque mal alineado. */

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

.gt-lead__mark {
  font-weight: 600;
  color: var(--color-primary);
}

.gt-silo-types {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;

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

.gt-silo-type {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 20px 22px;

  background-color: var(--color-primary);
  border-radius: 4px;
}

.gt-silo-type__icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  background-color: rgba(255, 255, 255, 0.13);
  color: var(--color-bg);
  border-radius: 50%;
}

.gt-silo-type__icon svg {
  width: 30px;
  height: 30px;
}

.gt-silo-type__name {
  margin: 0;

  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-bg);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .gt-silo-types { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .gt-silo-type  { padding: 24px 26px; gap: 20px; }
  .gt-silo-type__icon { width: 62px; height: 62px; }
  .gt-silo-type__icon svg { width: 34px; height: 34px; }
  .gt-silo-type__name { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  .gt-lead { font-size: 1.0625rem; margin-bottom: 48px; }
  .gt-silo-types  { gap: 24px; }
}


/* ==========================================================================
   FAMILIAS DE PRODUCTO — /fitosanitarios-plaguicidas/
   --------------------------------------------------------------------------
   Ocho nombres sueltos y nada más: ni descripción ni símbolo. Explicar qué es un
   rodenticida a quien viene a almacenar rodenticidas sobra, y ocho iconos que
   distingan alguicida de fungicida no existen —saldrían ocho frascos parecidos y
   el símbolo dejaría de identificar para pasar a decorar—.

   Al ser solo palabras, la pieza tiene que hacer DOS cosas: que se lean de un
   barrido y que se vea dónde acaba una y empieza la siguiente. De ahí la rejilla
   y el filo azul a la izquierda, que hace de viñeta sin serlo.

   EL FILO ES AZUL, NO ROJO. En este sitio el rojo señala una acción o marca dónde
   se está; ocho filos rojos seguidos serían ocho llamadas de atención a la vez y
   ninguna llamada de atención.
   ========================================================================== */

.gt-families {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

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

/* LA MISMA TARJETA QUE .gt-hazard de /almacen-productos-quimicos/: blanca, con
   esquina de 10px, doble sombra, filo transparente reservado y el mismo gesto al
   pasar el ratón. Lo pidió el usuario el 2026-08-26 —«com els logos blaus»— y es
   coherente: las dos rejillas hacen lo mismo, enseñar de un golpe qué familias de
   producto entran en el almacén.

   NO SE REUTILIZA LA CLASE .gt-hazard, se repiten sus valores, y no por gusto:
   allí los nombres son largos —«Peligrosos para el medio ambiente»— y la rejilla
   va a DOS columnas con pictogramas de 80px; aquí son de una palabra y caben
   CUATRO, lo que obliga a un símbolo menor. Reutilizar la clase habría sido
   heredarlo todo para después deshacer la mitad.

   EL DÍA DEL REFACTOR estas dos piezas son una sola con dos tamaños. Quien toque
   una tiene que mirar la otra: están a propósito una debajo de la otra en este
   archivo. */
.gt-family {
  display: flex;
  align-items: center;
  gap: 14px;

  height: 100%;
  padding: 12px 14px;

  background-color: var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);

  /* Reservado desde el principio: si el filo apareciera solo al pasar el ratón,
     la tarjeta crecería 2px y toda la fila daría un salto. */
  border: 2px solid transparent;

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

  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

/* El gesto va aunque la tarjeta no sea enlace: sin él, pasar el ratón por encima
   no produce nada y la rejilla parece muerta. */
.gt-family:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* EL SÍMBOLO VA SUELTO, SIN CUADRADO DETRÁS, igual que el pictograma de
   /almacen-productos-quimicos/: la tarjeta blanca ya lo separa del fondo, y una
   caja de color dentro de una tarjeta con sombra son dos marcos para lo mismo.

   `flex-shrink: 0` porque «Antimicrobianos» llena su celda: sin eso, el icono es
   lo primero que el navegador encoge.

   PEQUEÑO Y EN ROJO, por petición del usuario (2026-08-26). Empezó en azul y a
   48-60px, imitando el tamaño del pictograma de peligros; así la tarjeta la
   mandaba el dibujo y el nombre —que es lo que se busca— quedaba de acompañante.
   A 32-40px el orden se invierte: se lee la palabra y el símbolo la confirma.

   El rojo aquí SÍ decora, y es su sitio: estos iconos son adorno declarado
   —aria-hidden—, no llevan información que no esté escrita al lado. La regla del
   proyecto es que el rojo no ESCRIBA; que marque, puede. Sobre blanco da 4,0:1,
   por encima del 3:1 que se le pide a un elemento gráfico. */
.gt-family__icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  color: var(--color-accent);

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

.gt-family__icon svg {
  width: 100%;
  height: 100%;
}

.gt-family:hover .gt-family__icon {
  transform: scale(1.06);
}

/* El nombre se lleva el resto. `min-width: 0` es imprescindible dentro de un
   flex: sin él, un nombre largo no se parte y desborda la tarjeta. */
.gt-family__name {
  flex: 1;
  min-width: 0;
  margin: 0;

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


/* ==========================================================================
   PROSA SUELTA DENTRO DE UNA SECCIÓN (.gt-plain-prose)
   --------------------------------------------------------------------------
   Para los bloques que son párrafos y ya está, sin rejilla ni tarjetas —el de
   normativa de /fitosanitarios-plaguicidas/—.

   EL TAMAÑO SE DECLARA SOBRE EL <p>, NO SOBRE EL CONTENEDOR. El tema padre pone
   `p { font-size: 18px; line-height: 1.6 }` sobre el propio elemento, y una
   declaración en el contenedor solo se HEREDA: la herencia pierde siempre contra
   algo escrito sobre el elemento, por poco que pese su selector.

   SIN TOPE DE ANCHO, como el resto de bloques de texto del sitio desde el
   2026-08-26: un párrafo más estrecho que su sección se lee como algo mal
   alineado, no como una columna de lectura.
   ========================================================================== */

.gt-plain-prose p {
  margin: 0 0 16px;

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

.gt-plain-prose p:last-of-type {
  margin-bottom: 0;
}


/* ==========================================================================
   NORMATIVA CON FOTO — /fitosanitarios-plaguicidas/
   --------------------------------------------------------------------------
   Foto cuadrada a la izquierda y los tres párrafos a la derecha.

   EL RECORTE ES DE CSS, NO DE WORDPRESS. El archivo es un banner de 1200x600 y
   el motivo está centrado, así que "aspect-ratio: 1" con "object-fit: cover" se
   queda con los 600 píxeles centrales. Registrar un tamaño recortado habría
   obligado a regenerar toda la Mediateca para un solo uso, y a repetirlo cada vez
   que se cambiara la foto.

   "display: block" EN LA FIGURA, y es obligatorio: el tema padre declara
   "figure { display: inline-block }" para TODAS las del sitio, y un inline-block
   se encoge hasta su contenido en vez de tomar el ancho de su columna. Es la
   misma trampa que dejó la imagen destacada de las entradas en 771px.

   "align-items: start" para que la foto no se estire si el texto crece: es un
   cuadrado, y un cuadrado estirado deja de serlo.
   ========================================================================== */

.gt-normativa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.gt-normativa__media {
  display: block;
  margin: 0;
}

/* --------------------------------------------------------------------------
   EL MARCO
   --------------------------------------------------------------------------
   La foto es un papel blanco sobre una mesa clara y la banda de esta sección es
   gris: sin un filo, la imagen no termina en ninguna parte y se derrama sobre el
   fondo. Un filo de un píxel le pone borde sin añadir peso.

   FILO SOLO, SIN SOMBRA. Las tarjetas de familia de la sección de ARRIBA —la
   inmediatamente anterior— son blancas con doble sombra; repetir aquí ese
   tratamiento habría hecho que las dos secciones seguidas parecieran la misma
   pieza a distinto tamaño.

   `box-sizing: border-box` lo pone el reinicio del tema, así que el píxel del
   filo va POR DENTRO y la caja sigue midiendo 380: si fuera por fuera, la
   columna de la rejilla se desbordaría en dos píxeles.
   -------------------------------------------------------------------------- */

.gt-normativa__media img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;

  border: 1px solid #dde3e8;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .gt-families { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .gt-normativa {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 32px;
  }
  .gt-family        { padding: 14px 16px; gap: 16px; }
  .gt-family__icon  { width: 36px; height: 36px; }
  .gt-family__name  { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .gt-families      { grid-template-columns: repeat(4, 1fr); gap: 14px var(--gutter); }

  /* 320 y no más. Estuvo en 380 y sobraba: es un papel sobre una mesa con cuatro
     elementos —el mapa, la palabra y poco más—, no un plano que haya que leer, así
     que el tamaño extra no aportaba detalle, solo le quitaba ancho al texto. A 320
     la foto sigue siendo perfectamente legible y el párrafo gana 60px. */
  .gt-normativa {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 56px;
  }
  .gt-family        { padding: 14px 18px; }
  .gt-family__icon  { width: 40px; height: 40px; }
  .gt-plain-prose p { font-size: 1.0625rem; margin-bottom: 18px; }
}


/* ==========================================================================
   TABLA COMPARATIVA (.gt-compare) — /almacen-fiscal-hidrocarburos/
   --------------------------------------------------------------------------
   Repite las decisiones de la tabla de los artículos —prose.css, bloque "LA
   TABLA ES UNA PIEZA"— porque son las mismas y ya están razonadas allí: filo
   alrededor para que se vea dónde empieza y acaba lo que se arrastra, 640px de
   mínimo antes de deslizarse, 14px de letra, encabezado con fondo y filete azul,
   filas alternas al 3% y primera columna como rótulo lateral.

   NO SE REUTILIZAN AQUELLAS REGLAS porque están todas colgando de .gt-prose, que
   es el contenido de una entrada; meter una sección de servicio dentro de esa
   clase arrastraría con ella la tipografía, los márgenes y el ritmo vertical del
   artículo. El día del refactor, esta y aquella son una sola.

   LA CAJA RECIBE EL FOCO (tabindex="0" en el marcado): una zona con scroll que
   no lo tiene es inalcanzable para quien navega solo con teclado. Y como recibe
   foco, necesita nombre —de ahí el role y el aria-labelledby—.
   ========================================================================== */

.gt-compare {
  overflow-x: auto;

  border: 1px solid #e0e5e9;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: 3px;
  background-color: var(--color-bg);
}

.gt-compare:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gt-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.gt-compare th,
.gt-compare td {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  vertical-align: top;
  color: var(--color-text);
  font-weight: 400;
}

.gt-compare thead th {
  background-color: var(--color-bg-alt);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

/* La primera columna es el rótulo de la fila —el concepto—, no un dato más: en
   azul y en negrita hace de encabezado lateral, que es lo que de verdad es. */
.gt-compare tbody th {
  color: var(--color-primary);
  font-weight: 700;
}

/* Filas alternas muy flojas. En una comparativa, seguir una fila hasta el final
   es justo lo que falla; el filete de abajo ayuda, pero una banda de fondo ayuda
   más y no añade líneas. Al 3% no se ve como color, solo como guía. */
.gt-compare tbody tr:nth-child(even) th,
.gt-compare tbody tr:nth-child(even) td {
  background-color: #f7f9fa;
  background-color: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

/* El filete de la última fila sobra: ya está el filo de la caja. */
.gt-compare tbody tr:last-child th,
.gt-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* La frase que cierra la comparativa, separada de la tabla. */
.gt-compare__note {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .gt-compare table { font-size: 0.9375rem; }
  .gt-compare th,
  .gt-compare td    { padding: 13px 18px; }
  .gt-compare__note { margin-top: 28px; }
}


/* ==========================================================================
   .gt-families--3 — la rejilla a tres, para las certificaciones
   --------------------------------------------------------------------------
   Las tres certificaciones de /almacen-temperatura-controlada/ van SIN símbolo,
   a diferencia de las industrias de esa misma página: tres certificados no se
   distinguen con un dibujo —saldrían tres sellos iguales— y ahí el icono dejaría
   de identificar para pasar a decorar.

   Sin icono, el nombre queda solo dentro de la tarjeta. Se centra: alineado a la
   izquierda, una palabra corta como «GMP» dejaba nueve décimas partes de tarjeta
   vacías a su derecha y parecía que faltaba algo.
   ========================================================================== */

.gt-families--3 .gt-family {
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px) {
  .gt-families--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .gt-families--3 { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   .gt-families--2 — la rejilla a dos
   --------------------------------------------------------------------------
   Para las cuatro industrias de /almacen-temperatura-controlada/. La rejilla
   normal va a cuatro columnas y con solo cuatro tarjetas eso deja una única fila
   de cuadraditos, más parecida a una barra de iconos que a una lista de sectores.
   A dos columnas son dos filas de dos y cada tarjeta tiene el ancho suficiente
   para que «Productos farmacéuticos» quepa en un renglón.
   ========================================================================== */

@media (min-width: 768px) {
  .gt-families--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gt-families--2 { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   .gt-spec__icon--letter — el símbolo que no es un dibujo
   --------------------------------------------------------------------------
   Los siete tipos de peróxido orgánico YA TIENEN identificador, y es una letra:
   A, B, C… Dibujar siete símbolos de peligro parecidos habría tapado el único
   dato que de verdad separa un tipo de otro. Va la letra, en el mismo cuadrado
   azul que los demás símbolos: misma pieza, sin inventar nada.

   El tamaño es el del dibujo que sustituye —24px de caja—, para que la fila no
   cambie de altura respecto a las otras rejillas de características.
   ========================================================================== */

.gt-spec__icon--letter {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}


/* ==========================================================================
   LOS SIETE TIPOS DE PERÓXIDO (.gt-tiers) — /almacen-peroxidos-organicos/
   --------------------------------------------------------------------------
   La misma tarjeta que .gt-hazard y .gt-family —blanca, esquina de 10px, doble
   sombra, filo rojo al pasar el ratón—, pero con TRES cosas dentro en vez de dos:
   pictograma, nombre y una descripción de dos o tres renglones.

   POR ESO ES UNA REJILLA DE DOS COLUMNAS Y NO DE CUATRO: el texto manda. A cuatro
   columnas, «Pueden descomponerse lentamente a temperatura ambiente y, aunque
   pueden quemarse…» se partía en siete renglones de tres palabras.

   EL PICTOGRAMA OCUPA LAS DOS FILAS de la rejilla interna para quedar centrado
   respecto al bloque entero y no colgando del título, igual que el símbolo de las
   ventajas. Y `align-self: start` en la tarjeta: son de alturas distintas y una
   fila no debe estirar a su vecina.
   ========================================================================== */

.gt-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;

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

.gt-tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;

  padding: 14px 16px;

  background-color: var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);

  /* Reservado desde el principio: si el filo apareciera solo al pasar el ratón,
     la tarjeta crecería 2px y la fila daría un salto. */
  border: 2px solid transparent;

  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

.gt-tier:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* El GIF no tiene transparencia: se apoya en el blanco de la tarjeta. Y no se
   amplía nunca por encima de su tamaño de origen —600px—, así que a 60 va muy
   sobrado incluso en pantalla de doble densidad. */
.gt-tier__pic {
  grid-row: 1 / 3;

  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;

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

.gt-tier:hover .gt-tier__pic {
  transform: scale(1.06);
}

.gt-tier__name {
  grid-column: 2;
  align-self: end;
  margin: 0;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}

.gt-tier__text {
  grid-column: 2;
  align-self: start;
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.68);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .gt-tiers      { grid-template-columns: repeat(2, 1fr); gap: 16px var(--gutter); align-items: start; }
  .gt-tier       { padding: 16px 18px; column-gap: 18px; }
  .gt-tier__pic  { width: 66px; height: 66px; }
  .gt-tier__name { font-size: 1.0625rem; }
}

@media (min-width: 1024px) {
  .gt-tiers      { gap: 20px var(--gutter); }
  .gt-tier       { padding: 18px 20px; }
  .gt-tier__pic  { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-tier,
  .gt-tier__pic,
  .gt-tier:hover,
  .gt-tier:hover .gt-tier__pic { transition: none; transform: none; }
}


/* ==========================================================================
   .gt-caps — las capacidades de envase, sueltas
   --------------------------------------------------------------------------
   En /envasado-productos-industriales/ producción da los formatos y las
   capacidades en DOS listas paralelas cuyo orden no se corresponde: emparejarlas
   daría «Botellas de 1.000 L». Así que las capacidades no van dentro de las
   tarjetas, van debajo y en una línea.

   Es un renglón de datos, no un párrafo: rótulo en azul y versalitas, valores
   separados por un punto medio. Ocupa poco a propósito —es información de apoyo,
   no el argumento de la sección—.
   ========================================================================== */

/* AIRE ARRIBA Y ABAJO. En /envasado-reenvasado/ y /ensacado/ este bloque es lo
   último de la sección y bastaba con el margen de arriba; en /diluciones/ va
   EN MEDIO de la prosa —entre dos párrafos— y sin margen inferior las fichas
   quedaban pegadas al texto siguiente, como si formaran parte de él.

   32px es el mismo aire que separa dos párrafos de prosa largos, así que el
   bloque respira igual que lo que tiene alrededor. */
.gt-caps {
  margin: 32px 0;
}

/* El rótulo, encima y no en la misma línea: con los valores en ficha, un
   rótulo delante empujaba la primera ficha a media línea de distancia y la
   tira dejaba de leerse como una tira. */
.gt-caps__label {
  margin: 0 0 12px;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

/* --------------------------------------------------------------------------
   Las fichas
   --------------------------------------------------------------------------
   Filo azul muy rebajado y fondo blanco: son datos, no botones, así que no
   llevan relleno de color ni sombra. flex-wrap para que en móvil bajen solas
   sin apretar los cuerpos.
   -------------------------------------------------------------------------- */
.gt-caps__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

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

/* EL VALOR, DE UNA PIEZA. Se probó separando cifra y unidad —«1» grande y «L»
   pequeño— y no convencía: partía en dos algo que se lee de un tirón, y al
   copiar el texto de la página salían en renglones distintos. */
.gt-caps__list li {
  padding: 9px 16px;

  background-color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-radius: 4px;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);

  /* Cifras de ancho fijo: «1.000» y «200» no bailan de una ficha a otra. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 768px) {

  .gt-caps__list li { padding: 10px 18px; font-size: 1.0625rem; }

}

@media (min-width: 1024px) {
  .gt-caps { margin-top: 26px; font-size: 1rem; }
}


/* ==========================================================================
   .gt-tier__icon y .gt-tiers--3
   --------------------------------------------------------------------------
   La tarjeta de tipo (.gt-tier) nació en peróxidos con un PICTOGRAMA —una
   imagen—. En /salas-produccion-industrial/ los tres tipos de sala no tienen
   pictograma oficial, así que llevan símbolo dibujado, en el rojo de marca y al
   tamaño de los demás símbolos sueltos del sitio.

   En la web de la empresa los tres llevan el MISMO icono de industria. Aquí no:
   cada uno dibuja lo que distingue a su sala —varias separadas, una dedicada,
   unos mandos para la que se configura—, que es para lo que sirve un símbolo.

   TRES COLUMNAS, no dos: son tres tarjetas y a dos columnas la tercera se queda
   sola en su fila, con medio ancho vacío al lado. Y sus descripciones son de una
   línea, así que caben.
   ========================================================================== */

.gt-tier__icon {
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  color: var(--color-accent);

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

.gt-tier__icon svg {
  width: 100%;
  height: 100%;
}

.gt-tier:hover .gt-tier__icon {
  transform: scale(1.06);
}

/* El párrafo que remata las ventajas: separado de la rejilla, no pegado. */
.gt-sal-outro {
  margin-top: 32px;
}

@media (min-width: 768px) {
  .gt-tiers--3    { grid-template-columns: repeat(3, 1fr); }
  .gt-tier__icon  { width: 38px; height: 38px; }
}

@media (min-width: 1024px) {
  .gt-tiers--3    { grid-template-columns: repeat(3, 1fr); }
  .gt-tier__icon  { width: 40px; height: 40px; }
  .gt-sal-outro   { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-tier__icon,
  .gt-tier:hover .gt-tier__icon { transition: none; transform: none; }
}


/* ==========================================================================
   .gt-howto — un párrafo con su foto al lado
   --------------------------------------------------------------------------
   Para /rompegrumos/: el párrafo que describe la máquina y la foto de la
   máquina, uno al lado del otro. Es el reverso de .gt-normativa —allí la imagen
   va a la izquierda— porque aquí el texto es lo que se está explicando y la foto
   solo lo confirma.

   LA FOTO VA A LA DERECHA Y MIDE 320px EN ESCRITORIO (2026-08-26, a petición del
   usuario). Estuvo en 240, que es el ancho REAL del archivo, para no ampliarlo.
   A 320 se amplía un 35%, y se ha hecho a sabiendas: el párrafo es corto y la
   foto es alta, así que a 240 la sección se quedaba con un boquete de blanco
   debajo del texto y la única imagen de la máquina apenas se veía. Un 35% en una
   fotografía se tolera; en un documento o un certificado no se habría hecho.

   **SI APARECE EL ORIGINAL A MAYOR TAMAÑO, sustituirlo en la Mediateca** y esto
   deja de ser un apaño: la plantilla lo coge solo.

   `align-items: start` para que la foto no se estire si el párrafo es corto, y
   `display: block` en la figura porque el tema padre las declara inline-block.
   ========================================================================== */

.gt-howto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;

  margin-top: 18px;
}

.gt-howto__media {
  display: block;
  margin: 0;

  /* Pegada al borde derecho de su columna: es donde acaba el contenedor y donde
     el ojo espera que termine la sección. */
  justify-self: end;
}

.gt-howto__media img {
  display: block;
  width: 100%;
  height: auto;

  border: 1px solid #dde3e8;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: 10px;
}

/* Sin foto, el párrafo se queda a todo el ancho como los de arriba. */
.gt-howto--sin-foto { display: block; }

@media (min-width: 768px) {
  .gt-howto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 40px;
    margin-top: 22px;
  }
}

@media (min-width: 1024px) {
  .gt-howto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 56px;
  }
}


/* ==========================================================================
   .gt-steps — un proceso, paso a paso
   --------------------------------------------------------------------------
   Para /molienda-carbon-activo/, que es la única página del sitio que describe
   un recorrido completo: el carbón llega en big bag, cae a la tolva, sube al
   molino, pasa por las barras magnéticas y se vuelve a envasar.

   NUMERADA Y NO CON VIÑETA. Una viñeta redonda dice «aquí hay varias cosas»; un
   número dice «esto va antes que aquello», que es la mitad de la información.
   Y el número es un identificador que YA EXISTE: no hay que inventar ningún
   dibujo, que es la trampa en la que caen las rejillas de iconos.

   EL <ol> SIGUE SIENDO UN <ol>: los números que se ven los pinta un contador de
   CSS —los nativos no admiten color ni forma— pero la lista es ordenada de
   verdad, así que un lector de pantalla anuncia «elemento 3 de 8».

   LA RAÍZ VERTICAL une los pasos: sin ella son ocho fichas sueltas que casualmente
   llevan número. Se dibuja con un ::after en cada elemento menos el último, y va
   por DETRÁS del número —z-index— para que la línea no lo cruce.
   ========================================================================== */

.gt-steps {
  counter-reset: gt-step;

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

.gt-step {
  position: relative;
  padding-left: 52px;
  padding-bottom: 22px;

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

.gt-step:last-child {
  padding-bottom: 0;
}

/* El número. */
.gt-step::before {
  counter-increment: gt-step;
  content: counter(gt-step);

  position: absolute;
  left: 0;
  top: -1px;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  background-color: var(--color-primary);
  color: var(--color-bg);
  border-radius: 50%;

  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* La raíz que une un paso con el siguiente. */
.gt-step::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 4px;

  width: 2px;
  background-color: #dde3e8;
  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.gt-step:last-child::after {
  content: none;
}

@media (min-width: 768px) {
  .gt-step { padding-left: 58px; padding-bottom: 26px; font-size: 1rem; }
  .gt-step::before { width: 38px; height: 38px; font-size: 1rem; }
  .gt-step::after  { left: 18px; top: 38px; }
}


/* ==========================================================================
   .gt-tiers--llano — la tarjeta sin símbolo
   --------------------------------------------------------------------------
   Para el catálogo de /laboratorio/: doce análisis con su nombre y una línea de
   qué mide cada uno.

   SIN SÍMBOLO A PROPÓSITO. Azul de metileno, índice de yodo, cenizas, turbidez,
   dureza… no se distinguen con un dibujo: saldrían doce matraces iguales y el
   icono dejaría de identificar para pasar a decorar. Lo que distingue a cada
   análisis es su nombre, así que el nombre manda y no comparte sitio con nada.

   Basta con volver la tarjeta un bloque: el nombre y el texto dejan de ser
   celdas de la rejilla interna y se apilan solos.
   ========================================================================== */

.gt-tiers--llano .gt-tier {
  display: block;
}

.gt-tiers--llano .gt-tier__name {
  margin-bottom: 4px;
}


/* ==========================================================================
   .gt-phases — las tres fases del modelo EPC
   --------------------------------------------------------------------------
   Tres tarjetas con la LETRA de la fase, su nombre y tres puntos cada una.

   LA LETRA, NO UN DIBUJO. EPC son las iniciales de Engineering, Procurement and
   Construction: poner la E, la P y la C en cada bloque ata la sigla del título a
   lo que significa, que es exactamente lo que la página tiene que enseñar. Es la
   misma decisión que en los tipos de peróxido, y por eso reutiliza el cuadrado
   azul de los símbolos del sitio.

   La tarjeta va sin sombra: son tres bloques de contenido, no tres cosas que se
   puedan pulsar, y ya se distinguen por el fondo y el filo.
   ========================================================================== */

/* ==========================================================================
   .gt-phases — las tres fases de un proyecto EPC
   ==========================================================================
   SIN CAJAS: tres columnas separadas por un filete vertical. Se probó con
   tarjetas —primero en azul al 5%, después en blanco con filo y galón entre
   ellas— y el usuario descartó las dos; en columnas se lee como una ficha
   técnica y pesa mucho menos en una página que ya tiene tarjetas más abajo.

   El filete hace de separador y a la vez de secuencia: E, P y C se leen de
   izquierda a derecha como lo que son, tres fases seguidas.

   Móvil: una debajo de otra, y el filete pasa a horizontal —vertical no separa
   nada cuando las columnas están apiladas—.
   ========================================================================== */
.gt-phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;

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

.gt-phase {
  padding: 24px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.gt-phase:first-child {
  padding-top: 4px;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   La cabecera de cada fase
   --------------------------------------------------------------------------
   La letra y el nombre en la misma línea, separados por un punto medio: las
   tres iniciales juntas forman «EPC», que es el nombre del servicio, así que la
   letra no es un adorno y tiene que leerse con el nombre, no encima de él.
   -------------------------------------------------------------------------- */
.gt-phase__letter {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.gt-phase__letter::after {
  content: " ·";
  color: color-mix(in srgb, var(--color-primary) 35%, var(--color-bg));
}

.gt-phase__name {
  display: inline;
  margin: 0;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-primary);
}

.gt-phase__list {
  display: flex;
  flex-direction: column;
  gap: 10px;

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

.gt-phase__list li {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.68);
  text-wrap: pretty;
}

@media (min-width: 768px) {

  .gt-phases {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--gutter);
  }

  /* El filete pasa a vertical y se pone en el hueco entre columnas: por eso va
     como border-left con el relleno a juego, y no en la primera. */
  .gt-phase {
    padding: 4px 0 0;
    border-top: 0;
  }

  .gt-phase + .gt-phase {
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) / -2);
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  .gt-phase__list { margin-top: 16px; }

}

@media (min-width: 1024px) {

  .gt-phase__list li { font-size: 1rem; }

}


/* ==========================================================================
   .gt-rooms — los tres tipos de sala de /salas-produccion/
   ==========================================================================
   Mismo criterio que las fases de /proyectos-epc/: tres columnas separadas por
   un filete, sin tarjeta. La página lleva más abajo otra rejilla de tarjetas y
   repetir el recurso arriba dejaba la sección sin jerarquía.

   El icono se queda porque es lo único que distingue una sala de otra de un
   vistazo, pero suelto y en rojo, del tamaño del texto: aquí acompaña, no
   encabeza.
   ========================================================================== */
.gt-rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;

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

.gt-room {
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.gt-room:first-child {
  padding-top: 4px;
  border-top: 0;
}

.gt-room__icon {
  display: block;
  margin-bottom: 12px;
  color: var(--color-accent);
}

.gt-room__icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.gt-room__name {
  margin: 0 0 6px;

  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}

.gt-room__text {
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.68);
  text-wrap: pretty;
}

@media (min-width: 768px) {

  .gt-rooms {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--gutter);
  }

  .gt-room {
    padding: 4px 0 0;
    border-top: 0;
  }

  .gt-room + .gt-room {
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) / -2);
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

}

@media (min-width: 1024px) {

  .gt-room__name { font-size: 1.125rem; }
  .gt-room__text { font-size: 1rem; }

}


/* ==========================================================================
   .gt-params — los seis parámetros que se analizan en una dilución
   ==========================================================================
   EN COLUMNAS Y SIN CAJA. Se probó con pastillas —las mismas que las
   capacidades de envase— y no encajaban: allí el bloque cierra la sección y son
   cifras; aquí va en medio de la prosa y son nombres de análisis, así que las
   pastillas parecían botones dentro de un párrafo.

   Mismo recurso que las fases de /proyectos-epc/ y los tipos de sala: filete y
   columnas. Y el rótulo encima, en versalitas rojas, que es como el sitio marca
   un dato de apoyo.
   ========================================================================== */
.gt-params {
  margin: 32px 0;
}

/* EL RÓTULO NECESITA AIRE POR DEBAJO. Con 4px quedaba pegado a la primera fila
   y las versalitas parecían el primer parámetro de la lista en vez de su
   título. Con 14px el rótulo se despega y la lista empieza donde toca. */
/* TRES CLASES, Y NO UNA NI DOS. Quien anulaba el margen no era «.gt-plain-prose
   p» sino «.gt-plain-prose p:last-of-type { margin-bottom: 0 }», y el rótulo ES
   el último <p> de su contenedor. Una pseudoclase pesa lo mismo que una clase,
   así que esa regla vale (0,2,1) y mis dos clases perdían por un elemento.

   Con el ancestro delante, (0,3,0), gana esta. Y el síntoma era el de siempre:
   nada roto, solo el rótulo pegado a la primera fila como si fuera un
   parámetro más. */
.gt-plain-prose .gt-params .gt-params__label {
  margin: 0 0 14px;

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-params__list {
  display: grid;
  grid-template-columns: 1fr;

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

.gt-params__list li {
  padding: 9px 0;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);

  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

@media (min-width: 600px) {

  .gt-params__list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
  }

  /* Con tres columnas y seis parámetros son dos filas exactas: el filete de las
     tres últimas cierra el bloque y el de las tres primeras hace de separador
     entre filas. */
  .gt-params__list li { font-size: 1rem; }

}


/* --------------------------------------------------------------------------
   .gt-servicios-rama — las tres secciones de /servicios/ con ancla
   --------------------------------------------------------------------------
   Se llega a ellas desde el menú y el pie (/servicios/#almacenaje). Sin
   scroll-margin-top la cabecera fija taparía el título al saltar. */
.gt-servicios-rama {
  scroll-margin-top: 90px;
}