/* ==========================================================================
   Más DTF — Pie de página
   --------------------------------------------------------------------------
   Estilo del pie «MÁS DTF – Pie» (CPT haru_footer, post 14798), montado en
   Elementor con los widgets de Haru en modo «Background Dark». Igual que en la
   cabecera: los textos y enlaces se editan en Elementor; aquí solo va lo que el
   editor no expone (tipografía de marca, la fila legal, el formulario de CF7 y
   las etiquetas de pago).

   Clases que pone Elementor (Avanzado → Clases CSS):
     .md-pie             contenedor raíz (fondo Grafito global)
     .md-pie__col        cada columna     .md-pie__marca   logo + claim + redes
     .md-pie__productos  .md-pie__ayuda   .md-pie__contacto   .md-pie__news
     .md-pie__legal      fila inferior: © · enlaces legales · pagos
     .md-pie__form       widget shortcode con el formulario de CF7 «Newsletter pie»
   ========================================================================== */

/* --- 1. Base ---------------------------------------------------------------- */
.md-pie {
  font-family: var(--ff-texto);
  color: var(--md-gris-claro);           /* 6,78:1 sobre grafito */
}

.md-pie a { transition: color var(--t-rapida, 120ms); }

/* Títulos de columna: Haru los pinta en Manrope 700 (clase haru-heading-title);
   aquí solo se ajusta el cuerpo y el margen. */
.md-pie .haru-heading-title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--md-blanco);
}

/* Enlaces de las columnas */
.md-pie .haru-footer-link a {
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--md-gris-claro);
}
.md-pie .haru-footer-link a:hover { color: var(--md-blanco); }

/* Claim y textos sueltos */
.md-pie .haru-footer-text,
.md-pie .haru-footer-text p {
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--md-gris-claro);
}
.md-pie .haru-footer-text p { margin: 0; }
.md-pie .haru-footer-text a { color: var(--md-blanco); text-decoration: underline; text-underline-offset: 0.18em; }

/* --- 2. Contacto ------------------------------------------------------------ */
.md-pie .haru-contact ul { margin: 0; padding: 0; list-style: none; }
.md-pie .haru-contact li { margin: 0 0 10px; }
.md-pie .haru-contact__icon { display: none; }
.md-pie .haru-contact__title {
  display: block;
  margin: 0 0 1px;
  font-family: var(--ff-texto);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);      /* ≈ 6,5:1 sobre grafito */
}
.md-pie .haru-contact__desc {
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--md-blanco);
}
.md-pie .haru-contact__desc a { color: var(--md-blanco); }
.md-pie .haru-contact__desc a:hover { color: var(--md-azul-claro); }

/* --- 3. Redes ----------------------------------------------------------------- */
.md-pie .haru-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--md-blanco);
  font-size: 20px;
}
.md-pie .haru-social a:hover { background: rgba(255, 255, 255, 0.16); color: var(--md-blanco); }

/* --- 4. Newsletter (Contact Form 7) ------------------------------------------- */
.md-pie .wpcf7 form { margin: 0; }
.md-pie .wpcf7 p { margin: 0; }
.md-pie .md-news__fila { display: flex; flex-direction: column; gap: 8px; }

.md-pie .wpcf7 input[type="email"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-boton);
  background: rgba(255, 255, 255, 0.06);
  color: var(--md-blanco);
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
}
.md-pie .wpcf7 input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.md-pie .wpcf7 input[type="email"]:focus {
  outline: none;
  border-color: var(--md-azul-claro);
  background: rgba(255, 255, 255, 0.1);
}

.md-pie .wpcf7 input[type="submit"] {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-boton);
  background: var(--md-degradado-azul, var(--md-azul));
  color: var(--md-blanco);
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.md-pie .wpcf7 input[type="submit"]:hover { background: var(--md-degradado-azul-hover, var(--md-azul-hover)); }
.md-pie .wpcf7 .wpcf7-spinner { display: none; }

.md-pie .md-news__legal {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.md-pie .md-news__legal a { color: var(--md-blanco); text-decoration: underline; text-underline-offset: 0.18em; }
.md-pie .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.md-pie .wpcf7-acceptance label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.md-pie .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--md-azul);
}

.md-pie .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #FFB4A8;                        /* rojo claro legible sobre grafito */
}
.md-pie .wpcf7 .wpcf7-response-output {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--md-blanco);
}

/* --- 5. Fila legal -------------------------------------------------------------
   Tres bloques en línea: © a la izquierda, enlaces en medio, pagos a la derecha.
   Elementor da a cada widget el 100 % de ancho: se les quita para que quepan en
   la misma fila y se repartan con el space-between del contenedor. */
.md-pie__legal > .elementor-element,
.md-pie__legal > .e-con-inner > .elementor-element { width: auto; max-width: 100%; }

.md-pie__legal .haru-footer-text,
.md-pie__legal .haru-footer-text p { font-size: 0.8125rem; }

/* Elementor da a la lista en línea márgenes negativos de 8 px y a cada
   elemento 8 px por lado; en 360 px eso desborda la fila. Se anula todo y la
   separación se pone a mano. Las cadenas son largas porque la hoja del widget
   (widget-icon-list) se carga después y pesa (0,3,0) y (0,4,0). */
.md-pie .md-pie__enlaces-legales .elementor-icon-list-items.elementor-inline-items { margin: 0; padding: 0; }
.md-pie .md-pie__enlaces-legales .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin: 0; padding: 0; }
.md-pie__enlaces-legales .elementor-icon-list-item:not(:last-child)::after { content: none; }
.md-pie .md-pie__enlaces-legales .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item + .elementor-icon-list-item { margin-left: 18px; }
.md-pie__enlaces-legales .elementor-icon-list-icon { display: none; }
/* El kit pone el color secundario al texto de la lista con más peso: cadena larga. */
.md-pie .md-pie__enlaces-legales .elementor-icon-list-item .elementor-icon-list-text,
.md-pie .md-pie__enlaces-legales .elementor-icon-list-item a {
  font-family: var(--ff-texto);
  font-size: 0.8125rem;
  color: var(--md-gris-claro);
  text-decoration: none;
}
.md-pie .md-pie__enlaces-legales .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--md-blanco); }

/* Formas de pago: etiquetas de texto, no logotipos. */
.md-pie__pagos p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.md-pie__pago-titulo { margin-right: 4px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }
.md-pie__pago {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--md-blanco);
}

/* --- 6. Tablet y móvil -------------------------------------------------------- */
@media (max-width: 1024px) {
  .md-pie .haru-footer-link a { font-size: 0.9375rem; }
}

@media (max-width: 767px) {
  .md-pie__legal { justify-content: flex-start !important; }
  .md-pie__enlaces-legales .elementor-icon-list-items { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .md-pie .md-pie__enlaces-legales .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item + .elementor-icon-list-item { margin-left: 14px; }
}