:root {
  --teal-700: #1A4E57; /* verde teal oscuro */
  --teal-600: #1F7165; /* verde teal medio */
  --teal-700-90: rgba(26,78,87,.90);
  --teal-600-90: rgba(31,113,101,.90);
  --accent: #E6DFA7;      /* acento para íconos o flechas */
  --link-accent: #F2D38A; /* color de links en créditos */
}

/* ============================= */
/* PRE-FOOTER (verde degradado) */
/* ============================= */
#pre-footer {
  color: #fff;
  background: linear-gradient(180deg, var(--teal-700) 0%, var(--teal-600) 100%);
  font-size: 13px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#pre-footer .pf-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Redes sociales */
.pf-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, var(--teal-700-90), var(--teal-600-90));
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  backdrop-filter: blur(2px);
}

.pf-social i {
  font-size: 1.35rem;
  line-height: 1;
}

.pf-social:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.10);
}


.pf-logo {
  max-width: 110px;  /* ajustado al tamaño pequeño */
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
  opacity: 0.95; /* ligero suavizado */
}

@media (max-width: 767.98px) {
  #pre-footer {
    text-align: center;
  }

  .pf-logo {
    max-width: 50px;
  }
}

/* ================================== */
/* SEPARADOR SUTIL ENTRE LAS SECCIONES */
/* ================================== */
#pre-footer::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-top: 1rem;
}

/* ============================= */
/* CRÉDITOS (franja inferior) */
/* ============================= */
#credits {
  background: linear-gradient(180deg, #153E45 0%, #12343A 100%);
  color: #E9F3F2;
  font-size: 12px;
  padding: 20px 0;
}

#credits a.ligacreditos {
  color: var(--link-accent);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

#credits a.ligacreditos:hover {
  border-bottom-color: var(--link-accent);
}