/* ==========================================================================
   services.css
   --------------------------------------------------------------------------
   Secciones de servicios de la home ("Soluciones de almacenaje" y "Servicios
   industriales").

   Aquí SOLO vive el envoltorio de sección: fondo y espaciado vertical. La
   tarjeta (.gt-service-card), la rejilla (.gt-service-grid) y el encabezado
   (.gt-section-head) están en components.css, porque son piezas reutilizables
   en cualquier página del sitio y no propiedad de la home.

   Se carga DESPUÉS de gallery.css y ANTES de responsive.css.

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


/* El salto desde el hero aterriza aquí. Sin scroll-margin-top, la cabecera
   fija se come el borde superior de la sección y el H2 queda debajo de ella. */
.gt-services {
  scroll-margin-top: 90px;

  padding-block: 56px;
}

/* Variante con fondo gris.
   El orden de la home alterna fondos para que cada sección se lea separada de
   la anterior sin necesidad de líneas divisorias:

     contadores (blanco) → galería (gris) → almacenaje (blanco) →
     industriales (gris)

   Además, las tarjetas son blancas: sobre el fondo gris se recortan solas y la
   sombra apenas hace falta. */
.gt-services--alt {
  background-color: var(--color-bg-alt);
}

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


@media (min-width: 768px) {

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

}

@media (min-width: 1024px) {

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

}

@media (min-width: 1280px) {

  .gt-services { padding-block: 72px; }

}


/* ==========================================================================
   .gt-hubs — las tres ramas en la portada
   ==========================================================================
   SUSTITUYEN A 22 TARJETAS DE SÍMBOLO Y NOMBRE. Aquellas servían para BUSCAR
   —el visitante sabía qué quería y lo localizaba en la lista—; estas sirven
   para ELEGIR, que es otra cosa: hace falta ver de qué va cada rama antes de
   entrar. De ahí la foto, la línea de texto y el ancho entero.

   La foto es la del hero de cada hub. Cuando el visitante llega, la reconoce:
   es la misma imagen, ahora a pantalla completa.
   ========================================================================== */
.gt-hubs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.gt-hub {
  display: flex;
  flex-direction: column;

  background-color: var(--color-bg);
  border: 1px solid rgba(37, 73, 97, 0.12);
  border-radius: 6px;

  /* La foto se recorta contra el radio de la tarjeta. */
  overflow: hidden;

  text-decoration: none;

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

.gt-hub:hover,
.gt-hub:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(37, 73, 97, 0.24);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.13);
}

/* Proporción fija: las tres fotos son de tamaños distintos y sin esto las
   tarjetas quedarían de tres alturas. El recorte lo hace object-fit, no un
   tamaño nuevo registrado en la Mediateca. */
.gt-hub__pic {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.gt-hub__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

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

.gt-hub:hover .gt-hub__pic img {
  transform: scale(1.04);
}

.gt-hub__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;

  padding: 22px 24px 24px;
}

.gt-hub__title {
  margin: 0;

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

/* La clase gana al p { font-size: 18px } que el padre declara sobre el
   elemento: la herencia perdería, una clase no. */
.gt-hub__text {
  margin: 0;

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

/* Se probó como botón rojo relleno y se volvió al enlace de texto: en la
   tarjeta, el botón pesaba tanto como la foto y las tres tarjetas se leían como
   tres llamadas a la acción en vez de tres caminos.

   Empujado abajo con margin-top:auto: las tres líneas de texto no miden igual
   y sin esto el «Ver soluciones» quedaría a tres alturas distintas. */
.gt-hub__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: auto;
  padding-top: 16px;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.gt-hub__more::after {
  content: "→";
  font-family: var(--font-symbols);

  font-size: 1.05em;
  line-height: 1;

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

.gt-hub:hover .gt-hub__more::after {
  transform: translateX(4px);
}

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

  .gt-hub,
  .gt-hub__pic img,
  .gt-hub__more::after {
    transition: none;
  }

  .gt-hub:hover {
    transform: none;
  }

  .gt-hub:hover .gt-hub__pic img {
    transform: none;
  }

}

@media (min-width: 768px) {

  .gt-hubs {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

}

@media (min-width: 1024px) {

  .gt-hubs { gap: 28px; }

  .gt-hub__body  { padding: 26px 28px 28px; }
  .gt-hub__title { font-size: 1.3125rem; }
  .gt-hub__text  { font-size: 1rem; }

}


/* ==========================================================================
   .gt-trust — calidad y compañía, una banda con dos mitades
   ==========================================================================
   FONDO BLANCO. Se probó en azul y en gris y el usuario descartó los dos. Cada
   cambio de fondo obliga a invertir lo de dentro: en azul los textos eran
   blancos y el botón blanco; en gris pasaron a azul de marca y el botón al rojo.
   Sobre blanco se quedan los colores del gris —el contraste es incluso mejor— y
   solo cambia el botón, que en rojo pesaba demasiado para una sección que ya
   tiene trece sellos pidiendo la mirada.

   Los sellos conservan la pastilla con filo: los PNG traen su propio fondo
   blanco y, sin el filo, se derramarían sobre la banda.

   Móvil: una debajo de otra. Desde 768px, dos columnas iguales separadas por un
   filete vertical —la misma línea que separa los idiomas en la cabecera—, que es
   lo que dice que son dos bloques y no un párrafo largo.
   ========================================================================== */
.gt-trust {
  background-color: var(--color-bg);
  padding-block: 56px;
}

.gt-trust__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}

.gt-trust__title {
  margin: 0 0 10px;

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

.gt-trust__text {
  margin: 0 0 24px;
  max-width: 46ch;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.6;

  /* El mismo gris que los rótulos de las cifras: negro puro compite con el
     titular, y --color-text ES negro puro en este sitio. */
  color: color-mix(in srgb, var(--color-text) 66%, var(--color-bg));
}

/* --------------------------------------------------------------------------
   Los sellos
   --------------------------------------------------------------------------
   PASTILLA BLANCA DETRÁS DE CADA UNO. Los logotipos vienen en PNG pensados para
   fondo claro: sobre el azul, los que son azul marino desaparecen y los que
   llevan texto negro se vuelven ilegibles. La pastilla los devuelve a su fondo.

   Alto fijo y ancho automático: los trece tienen proporciones distintas y una
   rejilla de celdas iguales dejaría unos diminutos y otros desbordando.
   -------------------------------------------------------------------------- */
.gt-trust__seals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

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

.gt-trust__seals li {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;
  padding: 7px;

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

.gt-trust__seals img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   El botón
   --------------------------------------------------------------------------
   ROJO CON LETRA BLANCA, y con la tipografía de .gt-hub__more —el «Ver
   soluciones» de las tarjetas de la portada—: 0.875rem, peso 700 y la misma
   flecha. Ha pasado por blanco, gris y azul; el rojo es el color de acción del
   sitio y aquí no compite con nada, porque en esta sección no hay otro botón.

   Más pequeño que un .gt-btn normal: es la salida hacia una página de consulta,
   no la llamada principal de la portada.
   -------------------------------------------------------------------------- */
.gt-trust__btn,
.gt-btn--small {
  margin-top: 4px;
  padding: 13px 26px;

  background-color: var(--color-accent);
  color: var(--color-bg);

  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gt-trust__btn:hover,
.gt-trust__btn:focus-visible,
.gt-btn--small:hover,
.gt-btn--small:focus-visible {
  background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   La lista de la compañía
   --------------------------------------------------------------------------
   Filete entre filas y flecha a la derecha: se lee como un índice, que es lo
   que es. Sin caja ni fondo, para no volver a dibujar una tarjeta.
   -------------------------------------------------------------------------- */
.gt-trust__links {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;

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

.gt-trust__links li {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
}

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

  padding: 13px 0;

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

  transition: padding-left 0.2s ease;
}

.gt-trust__links a::after {
  content: "→";
  font-family: var(--font-symbols);
  color: color-mix(in srgb, var(--color-primary) 45%, var(--color-bg-alt));
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
}

.gt-trust__links a:hover,
.gt-trust__links a:focus-visible {
  padding-left: 6px;
}

.gt-trust__links a:hover::after {
  transform: translateX(4px);
  color: var(--color-accent);
}

.gt-trust__aparte {
  margin: 0;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-text) 62%, var(--color-bg));
}

.gt-trust__aparte a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gt-trust__aparte a:hover {
  color: var(--color-primary);
}

.gt-trust__aparte span {
  margin: 0 8px;
}

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

  .gt-trust__cta::after,
  .gt-trust__links a,
  .gt-trust__links a::after {
    transition: none;
  }

  .gt-trust__links a:hover {
    padding-left: 0;
  }

}

@media (min-width: 768px) {

  .gt-trust { padding-block: 72px; }

  .gt-trust__inner {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  /* El filete entre las dos mitades, en la segunda: así no cuelga suelto
     cuando en móvil van apiladas. */
  .gt-trust__block:last-child {
    padding-left: 56px;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  }

  .gt-trust__title { font-size: 1.5rem; }

}

@media (min-width: 1024px) {

  .gt-trust { padding-block: 72px; }

  .gt-trust__inner { gap: 72px; }

  .gt-trust__block:last-child { padding-left: 72px; }

  .gt-trust__title { font-size: 1.75rem; }
  .gt-trust__text  { font-size: 1rem; }

  .gt-trust__seals li { width: 70px; height: 70px; }

}


/* --------------------------------------------------------------------------
   .gt-services__all — la salida al catálogo, debajo de las pestañas
   --------------------------------------------------------------------------
   El mismo botón pequeño rojo que «Ver todos los certificados» dos secciones
   más abajo (.gt-btn--small): son la misma pieza —la salida hacia una página de
   consulta— y se tienen que leer igual. Se probó como enlace de texto con
   flecha y el usuario lo descartó. */
.gt-services__all {
  margin: 32px 0 0;
  text-align: center;
}

@media (min-width: 768px) {
  .gt-services__all { margin-top: 40px; }
}