.bep-footer {
  width: 100%;
  background: radial-gradient(circle, #b1cde4 0%, #b0cde4 100%);
}

.bep-footer-container {
  margin: 0 auto;
  padding: 60px 80px;
}

.bep-footer-row-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.bep-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.bep-footer-col-logo {
  justify-content: center;
}

.bep-footer-logo {
  height: 80px;
  width: auto;
}

.bep-footer-col-links {
  gap: 12px;
}

/* Misma tipografía que .bep-footer-link-text (TT Chocolates Regular) —
   "Síguenos en:" no es clickeable, así que sólo copia la fuente, sin el
   mecanismo de hover/crossfade de los links. */
.bep-footer-heading {
  margin-bottom: 16px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: normal;
  color: var(--bep-color-footer-texto);
}

.bep-footer-col-social .bep-footer-heading {
  margin-bottom: 0;
}

/* Mismo mecanismo que .bep-navbar-link (navbar.css), ahora también con la
   misma familia/esquema de pesos: subrayado animado vía scaleX (no
   text-decoration, que no se puede transicionar suave) + crossfade de
   opacidad entre una capa TT Chocolates Regular (400) y una capa TT
   Chocolates DemiBold (600) superpuesta (attr(data-text) en ::after) —
   mismos tiempos (0.2s ease) que el navbar. */
.bep-footer-link {
  position: relative;
  display: inline-block;
  font-size: var(--bep-font-card-text-size);
  color: var(--bep-color-footer-texto);
  text-decoration: none;
}

.bep-footer-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--bep-color-footer-texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease-in-out;
}

.bep-footer-link:hover::before {
  transform: scaleX(1);
}

.bep-footer-link-text {
  display: inline-block;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.bep-footer-link::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 600;
  color: var(--bep-color-footer-texto);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bep-footer-link:hover .bep-footer-link-text {
  opacity: 0;
}

.bep-footer-link:hover::after {
  opacity: 1;
}

.bep-footer-social-links {
  display: flex;
  gap: 12px;
}

.bep-footer-social-icon {
  display: block;
  transition: opacity 0.3s ease;
}

.bep-footer-social-icon:hover {
  opacity: 0.8;
}

.bep-footer-social-icon img {
  width: 50px;
  height: 50px;
}

.bep-footer-row-2 {
  margin-top: 40px;
}

.bep-footer-legal {
  font-family: var(--bep-font-qanelas);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: normal;
  color: var(--bep-color-footer-texto);
  text-align: justify;
}

.bep-footer-legal strong {
  font-weight: 700;
}

/* Casi sin separación a propósito — que se sienta como un bloque continuo
   con el párrafo de R.S./Advertencias de arriba, no como dos secciones
   distintas. */
.bep-footer-references {
  margin-top: 0;
}

/* Sin esto, el <a> hereda el azul de link por defecto del navegador,
   ilegible sobre el fondo azul claro del footer. Hereda el mismo blanco
   que el resto del texto en vez de un tratamiento de link aparte. */
.bep-footer-references a {
  color: inherit;
}

.bep-footer-divider {
  margin-top: 24px;
  border-top: 2px solid rgba(255, 255, 255);
}

.bep-footer-row-3 {
  margin-top: 24px;
}

.bep-footer-copyright {
  text-align: left;
  font-family: var(--bep-font-body);
  font-size: 1.25rem;
  color: var(--bep-color-footer-texto);
}

@media (max-width: 1024px) {
  .bep-footer-row-1 {
    flex-wrap: wrap;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .bep-footer-container {
    padding: 40px var(--bep-container-padding);
  }

  .bep-footer-row-1 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .bep-footer-col-logo {
    justify-content: flex-start;
  }

  .bep-footer-logo {
    height: 34px;
  }

  .bep-footer-col-social {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .bep-footer-social-links {
    align-items: center;
  }

  .bep-footer-social-icon img {
    width: 40px;
    height: 40px;
  }

  .bep-footer-row-2 {
    margin-top: 20px;
  }

  .bep-footer-heading {
    font-size: var(--bep-font-card-text-size);
    line-height: 1;
  }

  .bep-footer-copyright {
    font-size: 1rem;
  }

  .bep-footer-legal {
    text-align: justify;
    font-size: 0.75rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}