/* ==========================================================================
   footer.css
   --------------------------------------------------------------------------
   Pie de página: cuatro columnas más barra de copyright.

   El marcado está en footer.php del TEMA HIJO (copia del padre), así que aquí
   se puede trabajar con clases propias y sin pelear con especificidades
   ajenas. La única excepción es el logo, que lo imprime the_custom_logo() con
   sus propias clases de WordPress.

   Se carga DESPUÉS de header.css y ANTES de los módulos de sección.

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


/* --------------------------------------------------------------------------
   .gt-footer — envoltorio
   --------------------------------------------------------------------------
   FONDO GRIS CLARO, no azul corporativo. La decisión no es estética sino de
   contraste, y conviene dejarla escrita:

   Sobre el azul --color-primary (#254961), el rojo de acento (#c94644) queda
   en una relación de contraste de 1.9:1 — muy por debajo del 4.5:1 que exige
   la WCAG para texto normal. Es decir: con fondo azul, el hover en rojo que
   pediste sería ilegible, y aclararlo lo suficiente para cumplir lo
   convertiría en un rosa que ya no es el color de marca.

   Sobre el gris claro (#efefef) sí funciona todo:
     texto negro        18.3:1
     títulos en azul     7.9:1
     enlaces en hover    5.2:1   (con el acento un punto más oscuro, ver abajo)

   El fondo del padre para <footer> también es #efefef, así que además no hay
   sorpresas si alguna página se sirve sin nuestro CSS.
   -------------------------------------------------------------------------- */

.gt-footer {
  background-color: var(--color-bg-alt);
  padding-top: 48px;

  font-family: var(--font-primary);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Rejilla
   Móvil: una columna. Tablet: dos. Desktop: cuatro, con la de marca más ancha
   porque lleva logo, descripción, contacto y redes.
   -------------------------------------------------------------------------- */

.gt-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;

  padding-bottom: 40px;
}


/* --------------------------------------------------------------------------
   Columna 1 — marca
   -------------------------------------------------------------------------- */

.gt-footer__logo {
  margin-bottom: 16px;
}

/* the_custom_logo() imprime <a class="custom-logo-link"><img class="custom-logo">.
   Se acota el ancho aquí porque el tamaño del original es el de cabecera. */
.gt-footer__logo .custom-logo-link {
  display: inline-block;
}

.gt-footer__logo img {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
}

.gt-footer__tagline {
  margin: 0 0 20px;
  max-width: 42ch;

  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Datos de contacto
   -------------------------------------------------------------------------- */

.gt-footer__contact {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gt-footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gt-footer__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

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

.gt-footer__contact a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}


/* --------------------------------------------------------------------------
   Redes sociales
   Los SVG heredan el color con currentColor, así que el hover es un cambio de
   color y nada más: ni un segundo archivo por red ni un sprite.
   -------------------------------------------------------------------------- */

.gt-footer__social {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  gap: 10px;
}

.gt-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 40px es un objetivo cómodo para el dedo aunque el icono mida 20 */
  width: 40px;
  height: 40px;

  color: var(--color-primary);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);

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

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

.gt-footer__social a:hover,
.gt-footer__social a:focus-visible {
  color: var(--color-bg);
  background-color: var(--color-accent);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   Columnas de enlaces
   -------------------------------------------------------------------------- */

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

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

.gt-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 9px;
}

.gt-footer__links a {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}


/* --------------------------------------------------------------------------
   Hover y foco, comunes a todos los enlaces del pie
   --------------------------------------------------------------------------
   El acento se oscurece un 14% con color-mix para llegar a 5.2:1 sobre el gris
   del fondo; el rojo puro se queda en 4.15:1, justo por debajo del mínimo.
   Sigue siendo reconociblemente el rojo de marca.
   Sin soporte de color-mix (Safari < 16.2) se aplica el acento tal cual, que
   es el respaldo declarado justo antes.
   -------------------------------------------------------------------------- */

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

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


/* --------------------------------------------------------------------------
   Barra de copyright
   -------------------------------------------------------------------------- */

.gt-footer__bar {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: 18px;
}

.gt-footer__copyright {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}


/* --------------------------------------------------------------------------
   Ampliaciones por breakpoint
   -------------------------------------------------------------------------- */

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

  .gt-footer { padding-top: 64px; }

  .gt-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px var(--gutter);
    padding-bottom: 48px;
  }

  /* La columna de marca ocupa el ancho entero de la primera fila: con logo,
     descripción, contacto y redes no cabe cómoda en media. */
  .gt-footer__brand {
    grid-column: 1 / -1;
  }

  .gt-footer__copyright { text-align: left; }

}

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

  .gt-footer { padding-top: 72px; }

  .gt-footer__grid {
    /* La de marca, más ancha que las tres de enlaces: Calidad, Compañía y
       Actualidad, una fila. Hasta el 2026-09-12 había una cuarta —Servicios—
       apilada sobre Calidad; al quedarse Servicios como un enlace dentro de
       Compañía, las tres caben en fila sin escalón. */
    grid-template-columns: 1.6fr repeat(3, 1fr);
    align-items: start;
    gap: var(--gutter);
    padding-bottom: 56px;
  }

  .gt-footer__brand {
    grid-column: auto;
    padding-right: 24px;
  }

  .gt-footer__bar { padding-block: 22px; }

}

@media (min-width: 1280px) {

  .gt-footer__grid { gap: 48px; }

}


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

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

  .gt-footer__social a,
  .gt-footer__contact a,
  .gt-footer__links a {
    transition: none;
  }

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

}


/* ==========================================================================
   .go-top — el botón «Subir» del tema padre, oculto
   ==========================================================================
   Lo pinta el padre en su footer.php y lo enseña con JavaScript. Se oculta
   entero: desde que hay botón flotante de contacto, abajo a la derecha había
   dos botones fijos pidiendo cosas distintas, y el que menos aporta es este
   —volver arriba ya lo hace la rueda del ratón, la barra espaciadora y el gesto
   de la pantalla táctil—.

   !important PORQUE ES INEVITABLE: el script del padre le escribe
   «style="display: inline"» en el propio elemento, y un estilo en línea gana a
   cualquier hoja. Es de los pocos sitios del proyecto donde no hay alternativa.

   No se toca el padre: si algún día se quiere de vuelta, se borra esta regla.
   ========================================================================== */
.go-top {
  display: none !important;
}


/* ==========================================================================
   .gt-footer__legal — los tres enlaces obligatorios, junto al copyright
   ==========================================================================
   En la barra de abajo y no en una columna: son obligaciones legales, no
   navegación, y ahí es donde las busca todo el mundo. Se separan con un punto
   medio dibujado por CSS, así que en el HTML no hay caracteres sueltos que un
   lector de pantalla tenga que leer.
   ========================================================================== */
.gt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;

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

.gt-footer__legal li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gt-footer__legal li + li::before {
  content: "";

  width: 3px;
  height: 3px;

  background-color: currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

.gt-footer__legal a {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: inherit;
  text-decoration: none;
}

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

@media (min-width: 768px) {

  /* En una línea: el copyright a la izquierda y lo legal a la derecha. */
  .gt-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
  }

  .gt-footer__legal { margin-top: 0; }

}