/**
 * Footer — contenedor, columnas, logo, contacto y listas.
 * Clases gg-footer-* puestas a mano desde el editor (Avanzado > Clases CSS adicionales).
 * El gancho del contenedor es el <footer> que genera el area de la parte de plantilla.
 */

/* Tokens del componente y margen exterior.
 *
 * Escala fluida entre 600 y 1440px de viewport, como el resto del tema.
 * 600 y no 480 porque es donde arranca el bloque de movil.
 * Ver [[WP - Escala fluida con clamp]].
 *
 * Bajados el 24-08-2026: 24/22/20px fijos eran tamano de titular, no de pie. */
footer.wp-block-group {
  --gg-footer-texto:        clamp(1rem,      0.9107rem + 0.2381vw, 1.125rem);  /* 16 -> 18 */
  --gg-footer-texto-lh:     clamp(1.625rem,  1.4464rem + 0.4762vw, 1.875rem);  /* 26 -> 30 */
  --gg-footer-titulo:       clamp(1.25rem,   1.1607rem + 0.2381vw, 1.375rem);  /* 20 -> 22 */
  --gg-footer-enlace:       clamp(1.125rem,  1.0357rem + 0.2381vw, 1.25rem);   /* 18 -> 20 */
  --gg-footer-enlace-lh:    clamp(1.75rem,   1.5714rem + 0.4762vw, 2rem);      /* 28 -> 32 */
  --gg-footer-social-lado:  clamp(2.75rem,   2.4821rem + 0.7143vw, 3.125rem);  /* 44 -> 50 */

  /* El margen exterior lateral, una sola vez. */
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);

  /* Abajo mas que arriba, a proposito: el pie cierra la pagina. */
  padding-top:    clamp(2.5rem, 1.4286rem + 2.857vw, 4rem);  /* 40 -> 64 */
  padding-bottom: clamp(3.5rem, 1.7143rem + 4.762vw, 6rem);  /* 56 -> 96 */
}

/* Twenty Twenty-Five pone un blockGap de ~58px: a 902px de viewport eso son
   columnas de 113 con 58 de hueco, medio ancho de columna. */
footer.wp-block-group .wp-block-column {
  flex: 0 1 auto;
}

footer.wp-block-group .wp-block-columns {
  justify-content: space-between;
  column-gap: 3rem;
  row-gap: 1.5rem;
}

/* Las columnas no repiten el root padding: se comia 100px de 196. */
footer.wp-block-group .wp-block-column.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

/* El logo: unico .wp-block-image hijo directo del footer. Los 17px reponen el margen transparente que tenia el PNG sin recortar. */
footer.wp-block-group > .wp-block-group > .wp-block-image {
  margin-top: 17px;
  margin-left: -15px;
}

.gg-footer-social {
  width: var(--gg-footer-social-lado);
  height: var(--gg-footer-social-lado);
}

/* min-height 90 y no 120: eran 3 lineas x 40 de interlineado; ahora son x 30. */
.gg-footer-direccion,
.gg-footer-contacto {
  max-width: 329px;
  min-height: 90px;
  font-family: var(--gg-font);
  font-size: var(--gg-footer-texto);
  line-height: var(--gg-footer-texto-lh);
  letter-spacing: 0.4px;
  color: var(--gg-blanco);
}

/* Los 22px alinean su primera linea con la de los titulos: compensan el aire del interlineado de 40px. */
.gg-footer-direccion { font-weight: 400; margin-top: 26px; }
.gg-footer-contacto  { font-weight: 800; }

/* La clase esta en la columna: se apunta al encabezado que contiene. */
.gg-footer-col-titulo :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--gg-font);
  font-weight: 600;
  font-size: var(--gg-footer-titulo);
  line-height: 1.3;
  color: var(--gg-blanco);
}

/* Tres de los cuatro titulos llevan un <strong> dentro y Functionalities no.
   bolder es RELATIVO: sobre el 700 sube a 900. Con inherit pesan lo mismo. */
.gg-footer-col-titulo :is(h1, h2, h3, h4, h5, h6) strong {
  font-weight: inherit;
}

.gg-footer-col-lista { max-width: 234px; }

/* Gana a la regla del header, ya acotada, sin necesidad de !important. */
footer.wp-block-group .gg-footer-col-lista .wp-block-navigation-item__content {
  padding-left: 0;
  padding-right: 0;
  font-family: var(--gg-font);
  font-weight: 400;
  font-size: var(--gg-footer-enlace);
  line-height: var(--gg-footer-enlace-lh);
  letter-spacing: 0.4px;
  color: var(--gg-blanco);
}

/* ============================================================
   Movil: footer corto
   ============================================================

   Objetivo: logo y redes en una fila, direccion y contacto debajo, y
   fuera las cuatro columnas de enlaces (estan en el drawer).

   El logo y las redes cuelgan de ramas distintas del marcado:

     FOOTER
     |- grupo            -> logo
     |- wp-block-columns
        |- columna 1     -> direccion, contacto, grupo de redes
        |- columnas 2-5  -> enlaces

   Como el marcado es el mismo en movil y escritorio, no se puede mover
   nada. Se aplana el arbol con display: contents en el bloque de columnas
   y en la columna 1: sus cajas dejan de existir y sus hijos pasan a ser
   elementos de la rejilla del <footer>, sin tocar el DOM.

   OJO: display: contents solo afecta a la CAJA. Los selectores siguen
   viendo el arbol original, asi que "footer > X" NO alcanza a lo que
   estaba dentro de las columnas: hay que ir por descendencia. */

@media (max-width: 600px) {

  /* Los enlaces, fuera. La clase esta en las cuatro columnas. */
  footer.wp-block-group .gg-footer-col-titulo {
    display: none;
  }

  footer.wp-block-group .wp-block-columns,
  footer.wp-block-group .wp-block-column:not(.gg-footer-col-titulo) {
    display: contents;
  }

  /* El padding vertical ya lo pone el bloque de arriba, con clamp(). */
  footer.wp-block-group {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  /* Fila 1. El logo es el unico grupo hijo directo del footer. */
  footer.wp-block-group > .wp-block-group {
    grid-column: 1;
    grid-row: 1;
  }

  footer.wp-block-group > .wp-block-group > .wp-block-image {
    margin-top: 0;
  }

  /* Sobre la imagen y no sobre el grupo: el ancho lo manda el flexSize del
     bloque, y un max-width en el contenedor no lo encoge. */
  footer.wp-block-group > .wp-block-group img {
    width: 110px;
    height: auto;
  }

  footer.wp-block-group .wp-block-group:has(> .gg-footer-social) {
    grid-column: 2;
    grid-row: 1;
    gap: 1rem;
  }

  /* El tamano de los iconos y el del texto salen ya de los clamp() de arriba:
     a 600px de viewport valen su minimo. Aqui solo queda el layout. */

  /* Filas 2 y 3, a todo el ancho. Fuera los topes de escritorio. */
  .gg-footer-direccion,
  .gg-footer-contacto {
    grid-column: 1 / -1;
    max-width: none;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}