/* ============================================================
   Echando Raíces — footer personalizado
   Añadido 2026-07-17, a partir del diseño compartido por Victoria
   (1920.png): columna de marca/contacto a la izquierda + columnas
   Productos / Sobre nosotros / Su cuenta + fila legal abajo.

   Estructura real del HTML que genera PrestaShop (importante para
   entender los selectores de abajo):
   .hr-footer-main (.row, editado a mano en footer.tpl)
     ├─ .hr-footer-brand                          ← columna nueva, marca/contacto
     ├─ .col-md-6.links                           ← módulo "Lista de enlaces" (ps_linklist)
     │    └─ .row
     │         ├─ .wrapper (1º)  = bloque "Productos"
     │         ├─ .wrapper (2º)  = bloque "Sobre nosotros"
     │         └─ .wrapper (3º)  = bloque "Legal"
     └─ .col-md-3.links.wrapper                   ← módulo "Bloque Mi cuenta" = "Su cuenta"

   Se usa CSS Grid en la fila principal y "display: contents" en los
   envoltorios intermedios de ps_linklist para que sus 3 bloques
   puedan colocarse como columnas de la рejilla exterior, en vez de
   quedar anidados en una sola mitad de la fila (que es como los
   pone el tema por defecto).

   Revisar tras cada actualización del tema por si ps_linklist cambia
   estas clases (col-md-6/col-md-3/links/wrapper).
   ============================================================ */

@media (min-width: 992px) {
  .footer-container .hr-footer-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    grid-template-areas:
      "brand productos sobre cuenta"
      "legal legal legal legal";
    column-gap: 40px;
    row-gap: 24px;
  }

  .hr-footer-main .hr-footer-brand {
    grid-area: brand;
  }

  /* "Desenvolver" los envoltorios de ps_linklist para que sus 3
     bloques (Productos/Sobre nosotros/Legal) entren directamente en
     la rejilla de arriba, en vez de quedarse anidados en su mitad. */
  .hr-footer-main .col-md-6.links,
  .hr-footer-main .col-md-6.links > .row {
    display: contents;
  }

  .hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(1) {
    grid-area: productos;
  }

  .hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(2) {
    grid-area: sobre;
  }

  .hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(3) {
    grid-area: legal;
  }

  .hr-footer-main .col-md-3.links.wrapper {
    grid-area: cuenta;
  }
}

/* Todas las columnas de enlaces pierden el ancho fijo de Bootstrap
   (col-md-6/col-md-3) una vez colocadas por grid-area, para que no
   compitan con el ancho real de su celda. */
@media (min-width: 992px) {
  .hr-footer-main .col-md-6.links > .row > .wrapper,
  .hr-footer-main .col-md-3.links.wrapper,
  .hr-footer-main .hr-footer-brand {
    max-width: none;
    width: auto;
    flex: none;
  }
}

/* Corrección 2026-07-17 (ronda 2): el tema pinta el texto del footer
   (títulos de columna, enlaces, "Echando raíces") en un gris oscuro
   pensado para un footer de fondo claro — casi ilegible sobre el
   fondo oscuro real de la web. Se iguala al mismo color claro que ya
   usa el resto de la cabecera (#E6DACC). Necesita !important: el tema
   aplica el color oscuro con una regla más específica (mismo patrón
   que el "text-transform" del menú, ver custom-header.css). */
.footer-container,
.footer-container a,
.footer-container .h3,
.footer-container h3 {
  color: #E6DACC !important;
}
/* Corrección 2026-07-30 (Victoria): sin cambio de color entre el
   contenido y el footer no se distinguía dónde acababa uno y empezaba
   el otro (el footer es transparente, hereda el mismo fondo oscuro que
   el resto de la página). Línea clara de 1px solo arriba, justo en el
   límite — el footer ya trae 40px de padding-top propio, así que el
   borde queda pegado al final del contenido, no a mitad del hueco. */
.footer-container {
  border-top: 1px solid var(--hr-color-borde-oscuro, rgba(230, 218, 204, 0.25));
}
/* Corrección 2026-07-29 (a petición de Victoria): el hover solo
   oscurecía el texto (opacity), sin ningún cambio de color ni
   subrayado — inconsistente con el resto de enlaces del sitio (menú,
   migas de pan, filtros...), que en hover pasan a
   --hr-color-acento-claro y se subrayan. Mismo criterio aquí. */
.footer-container a:hover {
  color: var(--hr-color-acento-claro) !important;
  text-decoration: underline;
}
/* Corrección 2026-07-23: la regla de arriba no llegaba a los párrafos
   de la columna de marca ("Echando raíces España" y las líneas de
   contacto: teléfono/WhatsApp, email, dirección) — el tema les fija el
   color gris directamente en esos <p>, así que no basta con heredarlo
   del contenedor y hace falta apuntarles también aquí. */
.footer-container .hr-footer-shop-name,
.footer-container .hr-footer-contact-line {
  color: #E6DACC !important;
}

/* --- Columna de marca / contacto (izquierda) --- */
.hr-footer-brand .logo-text-fallback {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
  margin-bottom: 12px;
}
.hr-footer-brand .logo-text-fallback:hover {
  opacity: 0.85;
  text-decoration: none;
}
.hr-footer-shop-name {
  font-weight: 600;
  margin-bottom: 8px;
}
.hr-footer-contact-line {
  margin-bottom: 6px;
  opacity: 0.85;
}
.hr-footer-contact-line a {
  color: inherit;
}

/* --- Fila legal (Aviso legal / Términos y condiciones / Mapa del
   sitio): enlaces en línea, sin título de bloque visible, a modo de
   barra inferior — así en el diseño de Victoria. --- */
.hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(3) .h3 {
  display: none;
}
.hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(3) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 4px;
  border-top: 1px solid var(--hr-color-borde-oscuro, rgba(230, 218, 204, 0.25));
}

/* --- Responsive: en pantallas pequeñas, todo apilado en el orden
   natural del HTML (marca, luego los bloques de enlaces). No se ha
   podido probar en un móvil real en este entorno — revisar. --- */
@media (max-width: 991.98px) {
  .hr-footer-brand {
    margin-bottom: 24px;
  }
  .hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(3) .h3 {
    display: block;
  }
  .hr-footer-main .col-md-6.links > .row > .wrapper:nth-child(3) ul {
    display: block;
    border-top: none;
    padding-top: 0;
  }
}