/* Footer del rediseño de servicios (Css/estilos-footer.css), adaptado a WordPress.
   Todo cuelga de #su-footer para ganarle a Twenty Twenty-One y a estilos.css del tema. */

@font-face {
  font-family: 'montserrat-regular';
  src: url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'montserrat-bold';
  src: url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
  font-display: swap;
}

/* Base: anula lo que el tema le pone a footer, títulos, párrafos y enlaces */
#su-footer {
  float: none;
  clear: both;
  margin: 0;
  text-align: left;
  box-sizing: border-box;
}

#su-footer *,
#su-footer *::before,
#su-footer *::after {
  box-sizing: border-box;
}

#su-footer p,
#su-footer h3,
#su-footer ul {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* Twenty Twenty-One les pone la fuente del sistema a las listas */
#su-footer ul,
#su-footer li,
#su-footer a,
#su-footer span {
  font-family: inherit;
}

#su-footer a {
  outline: none;
  box-shadow: none;
}


#su-footer {
  --su-f-bg: #003296;
  --su-f-txt: #ffffff;
  --su-f-txt-2: rgba(255, 255, 255, 0.78);
  --su-f-linea: rgba(255, 255, 255, 0.18);
  --su-f-amarillo: #fee84e;

  width: 100%;
  /* Degradado corporativo oficial (azul a cian) */
  background: linear-gradient(90deg, #003296 0%, #00a0ff 100%);
  color: var(--su-f-txt);
  font-family: 'montserrat-regular', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

/* Títulos y negritas con su propio archivo de fuente, como en la landing.
   strong va en 400: el archivo ya es bold y así no se engrosa dos veces */
#su-footer strong, #su-footer .su-footer__titulo {
  font-family: 'montserrat-bold', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#su-footer strong {
  font-weight: 400;
}

/* Más ancho que el contenido (1270) pero sin llegar a los bordes en pantallas grandes */
#su-footer .su-footer__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 39px 24px;
}

/* -------------------------------------------------------- las 4 columnas */

#su-footer .su-footer__cols {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr;
  gap: 32px;
  align-items: start;
}

/* Ocupa todo el alto de la fila para poder repartir el sobrante */
#su-footer .su-footer__marca {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Centrado en su columna: es bloque y no lo alinea el text-align del padre */
/* El enlace toma el centrado que tenia el logo, para no descolocarlo */
/* Margen inferior mínimo: con el horario, los datos llenan la columna y el reparto
   automático dejaba el logo pegado a la dirección */
#su-footer .su-footer__logo-link {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

#su-footer .su-footer__logo-link:hover, #su-footer .su-footer__logo-link:focus-visible {
  transform: scale(1.06);
}

/* Sin recuadro al clicar en ningun enlace del pie. El foco de teclado no queda
 * a ciegas: cada enlace lo marca con su efecto de hover (zoom o subrayado) */
#su-footer a:focus {
  outline: none;
}

#su-footer a {
  -webkit-tap-highlight-color: transparent;
}

#su-footer .su-footer__logo {
  display: block;
  height: 92px;
  width: auto;
  max-width: 100%;
}

/* Como la marca: ocupa todo el alto para poder repartir el sobrante */
#su-footer .su-footer__col {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Margenes auto: quedan centradas entre el contacto y la barra inferior */
#su-footer .su-footer__redes {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Con .su-footer delante: le gana al a:focus de un Bootstrap cargado después (FormularioDinamico.php) */
#su-footer .su-footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--su-f-txt);
  opacity: 0.9;
  /* Mismo tiempo que el logotipo y los sellos */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Zoom mayor que el del logotipo: los iconos son chicos y con 1.06 se notaba poco */
#su-footer .su-footer__redes a:hover, #su-footer .su-footer__redes a:focus-visible {
  opacity: 1;
  transform: scale(1.2);
}

/* Todos en SVG con el mismo lienzo: asi salen identicos de tamano */
#su-footer .su-footer__redes svg {
  display: block;
  width: 26px;
  height: 26px;
}

#su-footer .su-footer__titulo {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--su-f-txt);
}

#su-footer .su-footer__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

#su-footer .su-footer__lista li {
  margin-bottom: 9px;
}

#su-footer .su-footer__lista a {
  color: var(--su-f-txt-2);
  text-decoration: none;
}

#su-footer .su-footer__lista a:hover, #su-footer .su-footer__lista a:focus-visible {
  color: var(--su-f-txt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La columna de contacto lleva icono delante */
#su-footer .su-footer__lista--iconos li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--su-f-txt-2);
}

#su-footer .su-footer__lista--iconos svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  opacity: 0.85;
}

/* --------------------------------------- datos fiscales, bajo el logotipo */

/* Centrado bajo el logotipo, que tambien va centrado en su columna */
/* Sin font-size: hereda los 14px del pie, como las listas */
#su-footer .su-footer__datos {
  margin: 0;
  text-align: center;
  color: var(--su-f-txt-2);
}

/* Margenes auto arriba y abajo: el texto queda centrado bajo el logo */
#su-footer .su-footer__logo-link + .su-footer__datos {
  margin-top: auto;
}

#su-footer .su-footer__datos:last-child {
  margin-bottom: auto;
}

#su-footer .su-footer__datos + .su-footer__datos {
  margin-top: 6px;
}

/* Horario de atención: franja bajo las tres columnas de enlaces */
#su-footer .su-footer__horario {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--su-f-linea);
  color: var(--su-f-txt-2);
}

#su-footer .su-footer__horario strong {
  color: var(--su-f-txt);
}

#su-footer .su-footer__horario svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

#su-footer .su-footer__franja {
  white-space: nowrap;
}

#su-footer .su-footer__datos a {
  color: var(--su-f-txt-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#su-footer .su-footer__datos a:hover, #su-footer .su-footer__datos a:focus-visible {
  color: var(--su-f-txt);
}

/* ------------------------------------------------------- barra inferior */

#su-footer .su-footer__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--su-f-linea);
}

#su-footer .su-footer__copy {
  margin: 0;
  font-size: 13px;
  color: var(--su-f-txt-2);
}

/* space-between separa: sellos a la izquierda, mapa y copyright a la derecha */
#su-footer .su-footer__barra-izq {
  display: flex;
  align-items: center;
  gap: 24px;
}

#su-footer .su-footer__sellos {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Mismo hover que el logotipo. Bloque: transform no aplica a inline */
#su-footer .su-footer__sellos a {
  display: block;
  transition: transform 0.2s ease;
}

#su-footer .su-footer__sellos a:hover, #su-footer .su-footer__sellos a:focus-visible {
  transform: scale(1.06);
}

#su-footer .su-footer__sellos img {
  display: block;
  height: 38px;
  width: auto;
}

#su-footer .su-footer__mapa {
  font-size: 13px;
  color: var(--su-f-txt-2);
  text-decoration: none;
}

#su-footer .su-footer__mapa:hover, #su-footer .su-footer__mapa:focus-visible {
  color: var(--su-f-txt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ responsive */

/* Escritorio: cada columna mide lo que su contenido y el sobrante se reparte
   igual entre ellas y hacia los bordes */
@media (min-width: 992px) {
  #su-footer .su-footer__cols {
    grid-template-columns: repeat(4, auto);
    justify-content: space-evenly;
    /* Mínimo entre columnas: con cuatro, en 1200 px casi no sobraba espacio */
    column-gap: 32px;
  }

  /* Tope para que los datos fiscales no estiren la columna de la marca. Ocupa las
     dos filas: la de los enlaces y la del horario */
  #su-footer .su-footer__marca {
    max-width: 380px;
    grid-row: 1 / span 2;
  }

  /* Sin hueco entre filas: las redes se centran con márgenes auto entre el último
     dato de Contacto (9 px de margen) y la línea del horario (otros 9 px), así que
     queda el mismo espacio arriba y abajo de los iconos */
  #su-footer .su-footer__cols {
    row-gap: 0;
  }

  #su-footer .su-footer__horario {
    grid-column: 2 / -1;
    margin-top: 9px;
  }

  /* 4 px menos arriba: el renglón de texto de encima trae ese aire bajo las letras */
  #su-footer .su-footer__redes {
    padding: 4px 0 8px;
  }
}

/* Tablet: la marca arriba, debajo las tres columnas de enlaces y el horario */
@media (max-width: 991px) {
  #su-footer .su-footer__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;
  }

  #su-footer .su-footer__marca, #su-footer .su-footer__horario {
    grid-column: 1 / -1;
  }

  /* Sin espacio que repartir, los margenes auto valdrian cero */
  #su-footer .su-footer__logo-link + .su-footer__datos {
    margin-top: 6px;
  }

  #su-footer .su-footer__redes {
    margin-top: 18px;
    margin-bottom: 0;
  }
}

/* Tablet: las columnas en pistas auto y el sobrante repartido igual entre ellas y
   hacia los bordes; la marca y el horario cruzan todas las pistas */
@media (min-width: 576px) and (max-width: 991px) {
  #su-footer .su-footer__cols {
    grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto minmax(16px, 1fr);
    column-gap: 0;
  }

  #su-footer .su-footer__col:nth-child(2) { grid-column: 2; }
  #su-footer .su-footer__col:nth-child(3) { grid-column: 4; }
  #su-footer .su-footer__col:nth-child(4) { grid-column: 6; }

  /* Contenido centrado en cada columna, como en celular */
  #su-footer .su-footer__col {
    text-align: center;
  }

  #su-footer .su-footer__lista--iconos li, #su-footer .su-footer__redes {
    justify-content: center;
  }

  /* Bloque centrado: si se parte en dos renglones, el segundo también va al centro */
  #su-footer .su-footer__horario {
    display: block;
    text-align: center;
  }

  #su-footer .su-footer__horario svg {
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: -3px;
  }
}

@media (max-width: 575px) {
  #su-footer .su-footer__inner {
    padding: 32px 16px 20px;
  }

  /* Una sola columna: todo centrado, no alineado a la izquierda */
  #su-footer .su-footer__cols {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }

  #su-footer .su-footer__redes {
    justify-content: center;
  }

  #su-footer .su-footer__lista--iconos li {
    justify-content: center;
  }

  /* Centrado: el reloj va en línea con el texto y no suelto a la izquierda */
  #su-footer .su-footer__horario {
    display: block;
  }

  #su-footer .su-footer__horario svg {
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: -3px;
  }

  #su-footer .su-footer__logo {
    height: 56px;
  }

  #su-footer .su-footer__barra {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  /* column-reverse deja el copyright arriba y los sellos abajo */
  #su-footer .su-footer__barra-izq {
    flex-direction: column;
    gap: 16px;
  }

  #su-footer .su-footer__sellos {
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0;
  }
}