/* ==========================================================================
   Pie de pagina y panel lateral — iguales en toda la plataforma
   --------------------------------------------------------------------------
   views/partials/footer.ejs ya se incluye en el acceso, en los modulos del
   panel, en las paginas de proyecto y en las legales, y lleva su propio bloque
   <style> con los estilos antiguos. Las mejoras editoriales, en cambio, vivian
   en public-polish.css bajo el prefijo .tst-public-home, asi que solo se veian
   en la portada y el pie cambiaba de aspecto segun la pagina.

   Este archivo recoge esos estilos SIN prefijo y lo cargan las cuatro vistas,
   de modo que el pie es el mismo en todas partes. Va despues del <style> del
   parcial, por lo que prevalece.
   ========================================================================== */

/* La trama de puntos tambien en el pie, como en el resto de secciones. */
footer {
  position: relative; isolation: isolate;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) !important;
  background-size: 30px 30px !important;
}

/* Cabeceras de columna con el tratamiento de antetitulo. */
.tst-fh {
  font-family: Montserrat, sans-serif; font-weight: 600 !important; font-size: .7rem !important;
  letter-spacing: .2em !important; color: #a8ebd0 !important;
  padding-bottom: .9rem; margin-bottom: 1.1rem !important;
  border-bottom: 1px solid #ffffff17;
}

.tst-fl li { margin-bottom: .62rem; }
.tst-fl a {
  font-size: .85rem; color: #ffffff8f;
  transition: color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.tst-fl a:hover { color: #a8ebd0; transform: translateX(3px); }

/* Iconos sociales: circulos de linea fina, todos del mismo tamano. Los
   cuadrados de color competian entre si y se desbordaban a una segunda fila. */
/* El <style> del parcial se inserta en el cuerpo, despues de este archivo, asi
   que para las propiedades que ambos declaran hace falta marcarlas. */
.tst-soc {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: none !important; border: 1px solid #ffffff2b !important;
  color: #ffffffa8 !important; font-size: .82rem;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .25s ease;
}
.tst-soc:hover {
  background: #a8ebd0 !important; border-color: #a8ebd0;
  color: #0a251e !important; transform: translateY(-2px);
}
.tst-soc svg { width: 14px; height: 14px; }
.tst-soc.bot-wa, .tst-soc.bot-tg { background: none !important; }
.tst-soc.bot-wa { color: #ffffffa8 !important; }
.tst-soc.bot-tg { color: #ffffffa8 !important; }
.tst-soc.bot-wa:hover, .tst-soc.bot-tg:hover { background: #a8ebd0 !important; color: #0a251e !important; }
.tst-soc .bot-badge { background: #0a251e; border: 1px solid #ffffff2b; }

/* Rejilla fija: los once iconos entraban 9+2 y la fila quedaba rota. */
.tst-soc-row {
  display: grid !important; grid-template-columns: repeat(6, 36px) !important;
  gap: .6rem !important; flex-wrap: nowrap !important;
}

.tst-footer-brand-name { font-weight: 600 !important; letter-spacing: -.01em; }
.tst-footer-tagline { letter-spacing: .18em !important; font-weight: 600 !important; }
.tst-cta-btn { font-weight: 600; letter-spacing: .03em; padding: .7rem 1.4rem; min-height: 44px; }

/* Barra inferior: marca a la izquierda, aviso legal a la derecha. */
.tst-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between !important; gap: .75rem; text-align: left !important;
}

@media (max-width: 900px) {
  .tst-soc-row { grid-template-columns: repeat(6, 34px); }
  .tst-footer-bottom { justify-content: center !important; text-align: center !important; }
}
@media (max-width: 400px) {
  .tst-soc-row { grid-template-columns: repeat(5, 34px); }
}

/* ==========================================================================
   Panel lateral: aire bajo la cabecera
   La primera opcion quedaba pegada al borde superior del panel y se leia como
   una continuacion de la cabecera en vez de como el inicio de la lista.
   ========================================================================== */
.mobile-nav-body { padding-top: 1.25rem; }
.mobile-nav-links { padding-top: .25rem; }
.mobile-nav-links > li:first-child { margin-top: .25rem; }

/* ==========================================================================
   Resena en Google
   El resto de iconos del pie llevan el color de su red al pasar el raton; el
   de Google hace lo mismo con el azul de la marca para que se reconozca de un
   vistazo y no se confunda con un enlace mas de la fila.
   ========================================================================== */
.tst-soc-google:hover { background: #4285f4 !important; color: #fff !important; }