/* =========================================================================
   PIE · hoja de la pieza "pie"
   La franja negra del final de todas las páginas (bloque ".pie" de la
   maqueta p1-esencia.html). La dibuja la plantilla de Elementor #1798
   ("Esencia · Pie"); cada caja y cada widget lleva una clase "esc-pie-…".

   Medidas de la maqueta (computador, caja de 1180 px):
     - fondo tinta #141416; 56 px de aire arriba y 28 abajo;
     - contenido con 44 px a cada lado (1092 px de ancho);
     - rejilla 2fr 1fr 1fr 1fr con 40 px entre columnas;
     - logo de 62 px de alto, y debajo la frase (12.5 px, gris #9A968F);
     - títulos (TIENDA, AYUDA, PAGOS): 10.5 px, blancos, mayúsculas muy
       espaciadas (.24em), letra 500, 15 px de aire debajo;
     - cada renglón de las listas: 12.5 px, gris #9A968F, 9 px entre renglones;
     - abajo una línea de un pelo #2C2B30, 38 px más abajo, y bajo ella
       "© 2026 …" y "Términos · Privacidad" (10.5 px, #6E6A64, mayúsculas).

   Casi todo lleva !important porque la hoja base pone Bodoni (letra de
   títulos) a TODOS los títulos, y la de la portada agranda los textos de
   toda la portada (".home ..."). Aquí se sube la especificidad empezando
   por ".elementor-location-footer .esc-pie" para ganarles siempre.
   ========================================================================= */

/* ------------------------------------------------------------ la franja */

/* Ancho completo; el contenido queda en la caja de 1180 con 44 px por lado.
   El relleno lateral hace las dos cosas: en pantallas anchas centra el
   contenido (mitad de lo que sobra + 44) y en las angostas deja 44 px. */
.elementor-location-footer .esc-pie.e-con {
  background: var(--esc-tinta, #141416) !important;
  color: #C9C6C0;
  font-family: var(--esc-sans) !important;
  font-weight: 300;
  letter-spacing: normal;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 56px max(44px, calc((100% - 1180px) / 2 + 44px)) 28px !important;
}

/* Elementor separa los widgets con márgenes propios: aquí no, cada cosa
   lleva el aire exacto de la maqueta. */
.elementor-location-footer .esc-pie .elementor-widget,
.elementor-location-footer .esc-pie .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
/* Empieza por "body" a propósito: la hoja de la portada pone 15.5 px,
   interlineado 1.75 y letra espaciada a TODOS los textos de la portada
   (".home .elementor-widget-text-editor p") y, sin esto, le ganaría al pie. */
body .elementor-location-footer .esc-pie .elementor-widget p,
body .elementor-location-footer .esc-pie .elementor-widget ul,
body .elementor-location-footer .esc-pie .elementor-widget li {
  font-family: var(--esc-sans) !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  line-height: normal !important;
}

/* --------------------------------------------- fila de arriba (rejilla) */

.elementor-location-footer .esc-pie .esc-pie-r.e-con {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-location-footer .esc-pie .esc-pie-col.e-con {
  display: block !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* El logo real de la tienda, 62 px de alto, sin estirar ni recortar. */
.elementor-location-footer .esc-pie .esc-pie-logo {
  text-align: left !important;
  line-height: 0;
}
.elementor-location-footer .esc-pie .esc-pie-logo img {
  display: block !important;
  height: 62px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* La frase de la marca */
body .elementor-location-footer .esc-pie .esc-pie-frase p {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: #9A968F !important;
  max-width: 34ch;
  margin: 18px 0 12.5px !important;
  padding: 0 !important;
}

/* Los títulos de las columnas: TIENDA · AYUDA · PAGOS */
.elementor-location-footer .esc-pie .esc-pie-tit {
  margin: 0 0 15px !important;
}
.elementor-location-footer .esc-pie .esc-pie-tit .elementor-heading-title {
  font-family: var(--esc-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Las listas: Leggins…, Guía de tallas…, Wompi… */
.elementor-location-footer .esc-pie .esc-pie-lista ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .elementor-location-footer .esc-pie .esc-pie-lista li {
  list-style: none !important;
  font-size: 12.5px !important;
  color: #9A968F !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
}
.elementor-location-footer .esc-pie .esc-pie-lista li::before,
.elementor-location-footer .esc-pie .esc-pie-lista li::marker { content: none; }
.elementor-location-footer .esc-pie .esc-pie-lista a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color .18s ease;
}
/* La maqueta no dice cómo se ve un enlace al pasar el mouse: se aclara un
   poco, sin subrayar, para que se note que se puede pulsar. */
.elementor-location-footer .esc-pie .esc-pie-lista a:hover,
.elementor-location-footer .esc-pie .esc-pie-lista a:focus-visible {
  color: #EDEBE6 !important;
}
.elementor-location-footer .esc-pie a:focus-visible {
  outline: 1px solid #EDEBE6;
  outline-offset: 3px;
}

/* ------------------------------------------------------ fila de abajo */

.elementor-location-footer .esc-pie .esc-pie-b.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px 24px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 38px 0 0 !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #2C2B30 !important;
}
.elementor-location-footer .esc-pie .esc-pie-b .elementor-widget {
  width: auto !important;
  max-width: 100%;
  flex: 0 1 auto;
}
body .elementor-location-footer .esc-pie .esc-pie-b p {
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #8C8882 !important;   /* era #6E6A64 (3.4:1 sobre negro); este se lee (5.2:1) */
  margin: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------- tableta (hasta 880 px) */
/* La maqueta solo existe en computador. En tableta la marca va arriba,
   a lo ancho, y debajo las tres listas en tres columnas iguales.
   Margen a los lados: 24 px, el mismo de la cabecera en tableta, para que
   el logo de arriba y el texto del pie queden en la misma línea.
   Cada enlace se vuelve más alto (32 px) para pulsarlo con el dedo sin
   errar; el aire que se ve entre renglones queda casi igual. */
@media (max-width: 880px) {
  body .elementor-location-footer .esc-pie.e-con {
    padding: 52px 24px 26px !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-r.e-con {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-marca.e-con {
    grid-column: 1 / -1;
  }
  body .elementor-location-footer .esc-pie .esc-pie-frase p {
    margin-bottom: 0 !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-tit {
    margin-bottom: 8px !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-lista li {
    margin: 0 !important;
    padding: 7px 0 !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-lista li > a {
    display: block;
    margin: -7px 0 !important;
    padding: 7px 0 !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-b.e-con {
    margin-top: 30px !important;
  }
}

/* ------------------------------------------- celular (hasta 767 px) */
/* Las mismas tres columnas, más juntas, con 16 px a los lados (como la
   cabecera en celular). Abajo, el © y "Términos · Privacidad" van uno
   debajo del otro, a la izquierda (así el botón de WhatsApp no los tapa). */
@media (max-width: 767px) {
  body .elementor-location-footer .esc-pie.e-con {
    padding: 44px 16px 24px !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-r.e-con {
    gap: 30px 16px !important;
  }
  body .elementor-location-footer .esc-pie .esc-pie-b.e-con {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 18px !important;
  }
}