/*
 * Pie del sitio.
 *
 * Reemplaza al pie de Elementor, que pesaba unos 25 KB por página, tenía un
 * formulario y solo cuatro enlaces. Este es HTML plano: enlaza las cinco
 * categorías del catálogo —enlaces internos que antes no existían— y deja
 * los datos de contacto a la vista.
 *
 * Paleta del sitio: #0E3D24 verde principal, #FFC10D ámbar.
 */

.kohen-footer {
  background: #0e3d24;
  color: #fff;
  font-family: inherit;
}

.kohen-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.15s ease;
}

.kohen-footer a:hover,
.kohen-footer a:focus-visible {
  color: #ffd452;
}

.kohen-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .kohen-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .kohen-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
  }
}

/* ---------- Marca ---------- */
/* El archivo del logo es oscuro y sobre el verde del pie quedaba casi
   invisible. El filtro lo pasa a blanco puro sin necesidad de otro
   archivo. */
.kohen-footer__logo {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.kohen-footer__sobre {
  margin: 18px 0 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.85;
}

/*
 * Llamada a la acción.
 *
 * Ocupa el lugar del formulario que traía el pie viejo. Un botón no
 * reemplaza la comodidad de escribir ahí mismo, pero mantiene el pie
 * liviano y lleva al formulario completo, que es donde se puede revisar la
 * lista y adjuntar un archivo.
 */
.kohen-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  background: #ffc10d;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
}

.kohen-footer .kohen-footer__cta,
.elementor-kit-8 .kohen-footer .kohen-footer__cta {
  color: #1a1a1a;
}

.kohen-footer__cta:hover,
.kohen-footer .kohen-footer__cta:hover {
  background: #ffd452;
  color: #1a1a1a;
}

.kohen-footer__cta svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.kohen-footer__cta-nota {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Columnas ---------- */
/* Marcan la columna sin gritar: por encima de los enlaces, pero sin
   competirle al contenido. */
.kohen-footer__titulo {
  margin: 0 0 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .kohen-footer__titulo {
    font-size: 16px;
    margin-bottom: 14px;
  }
}

.kohen-footer__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kohen-footer__lista li + li {
  margin-top: 13px;
}

.kohen-footer__lista a {
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Contacto ---------- */
.kohen-footer__contacto {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kohen-footer__contacto li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}

.kohen-footer__contacto li + li {
  margin-top: 13px;
}

.kohen-footer__contacto svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
}

.kohen-footer__horario {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

/* ---------- Línea inferior ---------- */
.kohen-footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kohen-footer__base-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12.5px;
}

/*
 * El pie viejo venía con estilos de Elementor que le ganaban por
 * especificidad al color del texto. Se repiten acá con el prefijo del kit,
 * igual que en el carrito.
 */
.elementor-kit-8 .kohen-footer,
.elementor-kit-8 .kohen-footer p,
.elementor-kit-8 .kohen-footer li {
  color: rgba(255, 255, 255, 0.82);
}

/*
 * El tamaño de los títulos también hay que defenderlo.
 *
 * El kit trae `.elementor-kit-8 h2 { font-size: 30px }`, de especificidad
 * (0,1,1), y los títulos del pie son <h2>: le ganaba a la regla de una sola
 * clase y por eso salían enormes. Con el prefijo del kit queda (0,2,1) y
 * manda esta.
 */
.elementor-kit-8 .kohen-footer .kohen-footer__titulo {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .elementor-kit-8 .kohen-footer .kohen-footer__titulo {
    font-size: 16px;
    margin-bottom: 14px;
  }
}

/*
 * Botón flotante de WhatsApp.
 *
 * Vive dentro del div del pie, así que el instalador lo rescata y lo
 * reinserta. Pero su posición venía en el CSS que LiteSpeed genera por
 * página, y 8 de las 96 páginas no lo incluían: ahí el botón quedaba
 * suelto en el flujo en vez de fijo en la esquina. Se declara acá, que se
 * carga en todas.
 */
.elementor-element-13ed824.elementor-fixed {
  position: fixed;
  right: 40px;
  bottom: 17px;
  z-index: 40;
}

/*
 * El verde de WhatsApp, no el de la marca.
 *
 * El tema pinta este icono con su color primario —el verde oscuro del
 * pie—, así que el botón se confundía con el fondo. Esa regla es
 * `.elementor-widget-icon.elementor-view-stacked .elementor-icon`, de
 * especificidad (0,3,0), y hay que ganarle: de ahí el !important, que acá
 * sí está justificado porque el color de WhatsApp es parte de que se
 * reconozca el botón.
 */
/*
 * Solo el color y la sombra.
 *
 * El tamaño y la forma los resuelve Elementor con su propio padding y su
 * `.elementor-shape-circle`. Fijar acá width, height y border-radius
 * peleaba con esas reglas y dejaba el botón deformado: lo que hacía falta
 * cambiar era únicamente el color.
 */
.elementor-element-13ed824 .elementor-icon,
.elementor-element-13ed824.elementor-view-stacked .elementor-icon {
  background-color: #25d366 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.elementor-element-13ed824 .elementor-icon:hover,
.elementor-element-13ed824.elementor-view-stacked .elementor-icon:hover {
  transform: scale(1.05);
  background-color: #1fb855 !important;
  color: #fff !important;
}

/* Solo el color del trazo; el tamaño del icono lo pone Elementor. */
.elementor-element-13ed824 .elementor-icon svg,
.elementor-element-13ed824 .elementor-icon svg path {
  fill: #fff !important;
}

@media (max-width: 640px) {
  .elementor-element-13ed824.elementor-fixed {
    right: 16px;
    bottom: 16px;
  }
}