/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/


/* ============================================================
   TOKENS LOMORO
   ============================================================ */
:root {
  --lomoro-cat-acento: #4CA08C;
  /* verde-azulado exacto del XD */
  --lomoro-cat-titulo-sec: #1a1a1a;
  /* título "Nuestros productos" (aprox) */
  --lomoro-cat-subtitulo: #555555;
  /* subtítulo (aprox) */
  --lomoro-cat-boton-bg: #F2796E;
  /* botón coral (aprox) */
  --lomoro-cat-fuente: "DM Sans", sans-serif;
  --lomoro-cat-radio: 16px;
  --lomoro-cat-gap: 24px;
  --lomoro-cat-pad: 28px;
}



/* ============================================================
   GRILLA DE CATEGORÍAS — Home
   Contenedor madre: #f3 (Row WPBakery)
   ============================================================ */

#f3 .lomoro-cat-head {
  text-align: center;
  margin-bottom: 40px;
}

#f3 .lomoro-cat-head-titulo {
  margin: 0 0 12px;
  color: var(--lomoro-cat-titulo-sec);
  font-family: var(--lomoro-cat-fuente);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}

#f3 .lomoro-cat-head-sub {
  margin: 0;
  color: var(--lomoro-cat-subtitulo);
  font-family: var(--lomoro-cat-fuente);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.4;
}

/* Dos filas con anchos proporcionales al XD */
#f3 .lomoro-cat-grid {
  display: flex;
  flex-direction: column;
  gap: var(--lomoro-cat-gap);
}

#f3 .lomoro-cat-fila {
  display: grid;
  gap: var(--lomoro-cat-gap);
  align-items: start;
}

#f3 .lomoro-cat-fila--1 {
  grid-template-columns: 622fr 1018fr 566fr;
}

#f3 .lomoro-cat-fila--2 {
  grid-template-columns: 894fr 582fr 760fr;
}

/* Tarjeta: <a> que envuelve todo. El PNG define el alto.
   position:relative para que .lomoro-cat-info (absolute) se ancle acá. */
#f3 .lomoro-cat-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease;
}

#f3 .lomoro-cat-card:hover {
  transform: translateY(-4px);
}

/* PNG a ancho completo, altura natural */
#f3 .lomoro-cat-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Capa de info: position absolute sobre el PNG.
   Cada tarjeta tiene una combinación de clases que la ubica. */
#f3 .lomoro-cat-info {
  position: absolute;
  display: flex;
  gap: 10px;
  color: var(--lomoro-cat-acento);
  pointer-events: none;
}

#f3 .lomoro-cat-titulo {
  margin: 0;
  color: inherit;
  font-family: var(--lomoro-cat-fuente);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
}

#f3 .lomoro-cat-flecha {
  flex: none;
  display: inline-flex;
  transition: opacity .25s ease;
}

#f3 .lomoro-cat-card:hover .lomoro-cat-flecha {
  opacity: .75;
}

/* ============================================================
   COLOR por tarjeta
   ============================================================ */
/* Verde por defecto. Blanco en tarjetas con fondo de color. */
#f3 .lomoro-cat-card--blanco .lomoro-cat-info {
  color: #fff;
}

/* ============================================================
   POSICIÓN por tarjeta  (vertical × horizontal)
   Mapeo confirmado con el usuario:
     1 Tortas:    abajo-izq,  flecha lado
     2 Baldes:    abajo-izq,  flecha debajo   (blanco)
     3 Sabores:   arriba-der, flecha debajo
     4 Postres:   arriba-der, flecha debajo   (blanco)
     5 Sin TACC:  abajo-izq,  flecha lado
     6 Palitos:   arriba-izq, flecha debajo   (blanco)
   ============================================================ */

/* VERTICAL */
#f3 .lomoro-cat-card--arriba .lomoro-cat-info {
  top: var(--lomoro-cat-pad);
}

#f3 .lomoro-cat-card--abajo .lomoro-cat-info {
  bottom: var(--lomoro-cat-pad);
}

/* HORIZONTAL */
#f3 .lomoro-cat-card--izq .lomoro-cat-info {
  left: var(--lomoro-cat-pad);
}

#f3 .lomoro-cat-card--der .lomoro-cat-info {
  right: var(--lomoro-cat-pad);
  text-align: right;
}

/* FLECHA AL LADO: fila (título + flecha en la misma línea) */
#f3 .lomoro-cat-card--flecha-lado .lomoro-cat-info {
  flex-direction: row;
  align-items: center;
}

/* FLECHA DEBAJO: columna (título arriba, flecha abajo) */
#f3 .lomoro-cat-card--flecha-debajo .lomoro-cat-info {
  flex-direction: column;
  align-items: flex-start;
}

#f3 .lomoro-cat-card--flecha-debajo.lomoro-cat-card--der .lomoro-cat-info {
  align-items: flex-end;
}

/* ============================================================
   BOTÓN "Ver todos los productos"
   ============================================================ */
#f3 .lomoro-cat-cta {
  text-align: center;
  margin-top: 40px;
}

#f3 .lomoro-cat-boton {
  display: inline-block;
  background: var(--lomoro-cat-boton-bg);
  color: #fff;
  font-family: var(--lomoro-cat-fuente);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 999px;
  transition: filter .25s ease, transform .25s ease;
}

#f3 .lomoro-cat-boton:hover {
  filter: brightness(.95);
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  #f3 .lomoro-cat-fila {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 680px) {
  #f3 .lomoro-cat-fila {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  #f3 .lomoro-cat-card {
    height: 200px;
    border-radius: var(--lomoro-cat-radio);
    overflow: hidden;
  }

  #f3 .lomoro-cat-img {
    height: 100%;
    object-fit: cover;
  }

  #f3 .lomoro-cat-titulo {
    font-size: 20px;
  }
}

/* fin GRILLA DE CATEGORÍAS — Home */


/* ============================================================
   SUCURSALES — Buscador con mapa (Leaflet + OpenStreetMap)
   Contenedor madre: #lomoro-sucursales  (Row de WPBakery + Raw HTML)
   ============================================================ */
:root {
  --lomoro-suc-teal: #14A398;
  /* nombre / acento de marca */
  --lomoro-suc-verde: #4F9C88;
  /* dirección (verde suave) */
  --lomoro-suc-coral: #F2796E;
  /* pin */
  --lomoro-suc-coral-suave: #FBD9D5;
  /* fondo del pin en la tarjeta */
  --lomoro-suc-fuente: "DM Sans", sans-serif;
  --lomoro-suc-card-radio: 18px;
}

#lomoro-sucursales .lomoro-suc-titulo {
  color: var(--lomoro-suc-teal);
  font-family: var(--lomoro-suc-fuente);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  margin: 0 0 28px;
}

/* --- Filtros (dropdowns redondeados verdes) --- */
#lomoro-sucursales .lomoro-suc-filtros {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px
}

#lomoro-sucursales .lomoro-suc-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 260px;
  border: 1.5px solid var(--lomoro-suc-teal);
  color: var(--lomoro-suc-teal);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314A398' stroke-width='2'><path d='M3 5l5 5 5-5'/></svg>") no-repeat right 18px center;
  font-family: var(--lomoro-suc-fuente);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 44px 14px 22px;
  border-radius: 999px;
  cursor: pointer;
}

#lomoro-sucursales .lomoro-suc-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 163, 152, .15)
}

/* --- Grilla de tarjetas (cada tarjeta es un <button> clickeable) --- */
#lomoro-sucursales .lomoro-suc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

#lomoro-sucursales .lomoro-suc-card {
  appearance: none;
  border: 1px solid #ECECEC;
  background: #fff;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: var(--lomoro-suc-fuente);
  border-radius: var(--lomoro-suc-card-radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#lomoro-sucursales .lomoro-suc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 163, 152, .12);
  border-color: transparent
}

#lomoro-sucursales .lomoro-suc-card.is-active {
  border-color: var(--lomoro-suc-teal);
  box-shadow: 0 12px 28px rgba(20, 163, 152, .18)
}

#lomoro-sucursales .lomoro-suc-pin {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lomoro-suc-coral-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex: none;
}

#lomoro-sucursales .lomoro-suc-pin svg {
  width: 22px;
  height: 22px
}

#lomoro-sucursales .lomoro-suc-texto {
  display: flex;
  flex-direction: column;
  min-width: 0
}

#lomoro-sucursales .lomoro-suc-nombre {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px
}

#lomoro-sucursales .lomoro-suc-dir {
  color: var(--lomoro-suc-verde);
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 12px
}

#lomoro-sucursales .lomoro-suc-prov {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 15px
}

/* mensaje cuando el filtro no devuelve nada */
#lomoro-sucursales .lomoro-suc-sinresultados {
  color: var(--lomoro-suc-verde);
  font-family: var(--lomoro-suc-fuente);
  padding: 20px 0
}

/* --- Paginación (puntitos) --- */
#lomoro-sucursales .lomoro-suc-paginacion {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 8px
}

#lomoro-sucursales .lomoro-suc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: #D6D6D6;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s
}

#lomoro-sucursales .lomoro-suc-dot.is-active {
  background: var(--lomoro-suc-teal);
  transform: scale(1.15)
}

/* --- Mapa a todo el ancho --- */
#lomoro-sucursales .lomoro-suc-mapa-wrap {
  margin-top: 40px;
  position: relative
}

/* relative: ancla el aviso "dos dedos" */
#lomoro-sucursales #lomoroMapa {
  width: 100%;
  height: 460px;
  border-radius: 14px;
  z-index: 0
}

/* Aviso "Usá dos dedos para mover el mapa" (solo touch; lo muestra/oculta el JS) */
#lomoro-sucursales .lomoro-suc-maphint {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(20, 28, 40, .45);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  font-family: var(--lomoro-suc-fuente);
  font-weight: 700;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

#lomoro-sucursales .lomoro-suc-maphint.is-on {
  opacity: 1
}

/* Popup custom (mismo look que la tarjeta). Las clases .leaflet-* y .lomoro-pop-*
   las inyecta Leaflet dentro del mapa, por eso algunas van sin el #id delante. */
#lomoro-sucursales .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
}

#lomoro-sucursales .leaflet-popup-content {
  margin: 16px 18px
}

.lomoro-pop-nombre {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-dir {
  display: flex;
  gap: 8px;
  color: var(--lomoro-suc-verde);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-dir svg {
  flex: none;
  margin-top: 2px
}

.lomoro-pop-prov {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 13px;
  margin: 0;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--lomoro-suc-coral);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-suc-marker svg {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25))
}

/* --- Responsive --- */
@media(max-width:980px) {
  #lomoro-sucursales .lomoro-suc-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* MOBILE: tarjeta compacta (pin a la izquierda + texto a la derecha) y 1 columna.
   Menos alto por tarjeta → entran 3-4 por pantalla. (El JS pagina de a 4 en mobile.) */
@media(max-width:640px) {
  #lomoro-sucursales .lomoro-suc-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  #lomoro-sucursales .lomoro-suc-select {
    min-width: 100%;
    flex: 1
  }

  #lomoro-sucursales .lomoro-suc-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px
  }

  #lomoro-sucursales .lomoro-suc-pin {
    width: 42px;
    height: 42px;
    margin-bottom: 0
  }

  #lomoro-sucursales .lomoro-suc-pin svg {
    width: 18px;
    height: 18px
  }

  #lomoro-sucursales .lomoro-suc-nombre {
    font-size: 16px;
    margin-bottom: 3px
  }

  #lomoro-sucursales .lomoro-suc-dir {
    font-size: 13px;
    margin-bottom: 3px
  }

  #lomoro-sucursales .lomoro-suc-prov {
    font-size: 13px
  }

  #lomoro-sucursales #lomoroMapa {
    height: 340px
  }
}

/* fin SUCURSALES */

/* ============================================================
   SUCURSALES — Buscador con mapa (Leaflet + OpenStreetMap)
   Contenedor madre: #lomoro-sucursales  (Row de WPBakery + Raw HTML)
   ============================================================ */
:root {
  --lomoro-suc-teal: #14A398;
  /* nombre / acento de marca */
  --lomoro-suc-verde: #4F9C88;
  /* dirección (verde suave) */
  --lomoro-suc-coral: #F2796E;
  /* pin */
  --lomoro-suc-coral-suave: #FBD9D5;
  /* fondo del pin en la tarjeta */
  --lomoro-suc-fuente: "DM Sans", sans-serif;
  --lomoro-suc-card-radio: 18px;
}

#lomoro-sucursales .lomoro-suc-titulo {
  color: var(--lomoro-suc-teal);
  font-family: var(--lomoro-suc-fuente);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  margin: 0 0 28px;
}

/* --- Filtros (dropdowns redondeados verdes) --- */
#lomoro-sucursales .lomoro-suc-filtros {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px
}

#lomoro-sucursales .lomoro-suc-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 260px;
  border: 1.5px solid var(--lomoro-suc-teal);
  color: var(--lomoro-suc-teal);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314A398' stroke-width='2'><path d='M3 5l5 5 5-5'/></svg>") no-repeat right 18px center;
  font-family: var(--lomoro-suc-fuente);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 44px 14px 22px;
  border-radius: 999px;
  cursor: pointer;
}

#lomoro-sucursales .lomoro-suc-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 163, 152, .15)
}

/* --- Grilla de tarjetas (cada tarjeta es un <button> clickeable) --- */
#lomoro-sucursales .lomoro-suc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

#lomoro-sucursales .lomoro-suc-card {
  appearance: none;
  border: 1px solid #ECECEC;
  background: #fff;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: var(--lomoro-suc-fuente);
  border-radius: var(--lomoro-suc-card-radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#lomoro-sucursales .lomoro-suc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 163, 152, .12);
  border-color: transparent
}

#lomoro-sucursales .lomoro-suc-card.is-active {
  border-color: var(--lomoro-suc-teal);
  box-shadow: 0 12px 28px rgba(20, 163, 152, .18)
}

#lomoro-sucursales .lomoro-suc-pin {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lomoro-suc-coral-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex: none;
}

#lomoro-sucursales .lomoro-suc-pin svg {
  width: 22px;
  height: 22px
}

#lomoro-sucursales .lomoro-suc-texto {
  display: flex;
  flex-direction: column;
  min-width: 0
}

#lomoro-sucursales .lomoro-suc-nombre {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px
}

#lomoro-sucursales .lomoro-suc-dir {
  color: var(--lomoro-suc-verde);
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 12px
}

#lomoro-sucursales .lomoro-suc-prov {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 15px
}

/* mensaje cuando el filtro no devuelve nada */
#lomoro-sucursales .lomoro-suc-sinresultados {
  color: var(--lomoro-suc-verde);
  font-family: var(--lomoro-suc-fuente);
  padding: 20px 0
}

/* --- Paginación (puntitos) --- */
#lomoro-sucursales .lomoro-suc-paginacion {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 8px
}

#lomoro-sucursales .lomoro-suc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: #D6D6D6;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s
}

#lomoro-sucursales .lomoro-suc-dot.is-active {
  background: var(--lomoro-suc-teal);
  transform: scale(1.15)
}

/* --- Mapa a todo el ancho --- */
#lomoro-sucursales .lomoro-suc-mapa-wrap {
  margin-top: 40px;
  position: relative
}

/* relative: ancla el aviso "dos dedos" */
#lomoro-sucursales #lomoroMapa {
  width: 100%;
  height: 460px;
  border-radius: 14px;
  z-index: 0
}

/* Aviso "Usá dos dedos para mover el mapa" (solo touch; lo muestra/oculta el JS) */
#lomoro-sucursales .lomoro-suc-maphint {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(20, 28, 40, .45);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  font-family: var(--lomoro-suc-fuente);
  font-weight: 700;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

#lomoro-sucursales .lomoro-suc-maphint.is-on {
  opacity: 1
}

/* Popup custom (mismo look que la tarjeta). Las clases .leaflet-* y .lomoro-pop-*
   las inyecta Leaflet dentro del mapa, por eso algunas van sin el #id delante. */
#lomoro-sucursales .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
}

#lomoro-sucursales .leaflet-popup-content {
  margin: 16px 18px
}

.lomoro-pop-nombre {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-dir {
  display: flex;
  gap: 8px;
  color: var(--lomoro-suc-verde);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-dir svg {
  flex: none;
  margin-top: 2px
}

.lomoro-pop-prov {
  color: var(--lomoro-suc-teal);
  font-weight: 700;
  font-size: 13px;
  margin: 0;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-pop-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--lomoro-suc-coral);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  font-family: var(--lomoro-suc-fuente)
}

.lomoro-suc-marker svg {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25))
}

/* --- Responsive --- */
@media(max-width:980px) {
  #lomoro-sucursales .lomoro-suc-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* MOBILE: tarjeta compacta (pin a la izquierda + texto a la derecha) y 1 columna.
   Menos alto por tarjeta → entran 3-4 por pantalla. (El JS pagina de a 4 en mobile.) */
@media(max-width:640px) {
  #lomoro-sucursales .lomoro-suc-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  #lomoro-sucursales .lomoro-suc-select {
    min-width: 100%;
    flex: 1
  }

  #lomoro-sucursales .lomoro-suc-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px
  }

  #lomoro-sucursales .lomoro-suc-pin {
    width: 42px;
    height: 42px;
    margin-bottom: 0
  }

  #lomoro-sucursales .lomoro-suc-pin svg {
    width: 18px;
    height: 18px
  }

  #lomoro-sucursales .lomoro-suc-nombre {
    font-size: 16px;
    margin-bottom: 3px
  }

  #lomoro-sucursales .lomoro-suc-dir {
    font-size: 13px;
    margin-bottom: 3px
  }

  #lomoro-sucursales .lomoro-suc-prov {
    font-size: 13px
  }

  #lomoro-sucursales #lomoroMapa {
    height: 340px
  }
}

/* fin SUCURSALES */

/* hotfixes */


@media(min-width:1300px) {

  #f3 .lomoro-cat-grid {
    max-width: 86%;
    margin-inline: auto;
  }

}

@media(min-width:1900px) {

  #f3 .lomoro-cat-grid {
    max-width: 61%;
    margin-inline: auto;
  }

}

@media(min-width:1000px) {

  #f3 .lomoro-cat-card--flecha-lado .lomoro-cat-info {
    top: 80%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--1>a.lomoro-cat-card.lomoro-cat-card--der.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo>div {
    top: 20%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--2>a.lomoro-cat-card.lomoro-cat-card--blanco.lomoro-cat-card--izq.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo>div {
    top: 18%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--1>a.lomoro-cat-card.lomoro-cat-card--blanco.lomoro-cat-card--izq.lomoro-cat-card--abajo.lomoro-cat-card--flecha-debajo {
    top: 4%;
    width: 99%;
    margin-inline: auto;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--2>a.lomoro-cat-card.lomoro-cat-card--blanco.lomoro-cat-card--izq.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo {
    bottom: 5%;
    width: 101%;
  }

  #f3 > div.ld-container.container-fluid > div > div > div > div > div:nth-child(3) > div > div > div.lomoro-cat-fila.lomoro-cat-fila--1 > a.lomoro-cat-card.lomoro-cat-card--der.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo{
    width: 96%;
  }

}


@media(max-width:700px) {

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--1>a.lomoro-cat-card.lomoro-cat-card--izq.lomoro-cat-card--abajo.lomoro-cat-card--flecha-lado>div {
    left: 28%;
    top: 77%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--1>a.lomoro-cat-card.lomoro-cat-card--blanco.lomoro-cat-card--izq.lomoro-cat-card--abajo.lomoro-cat-card--flecha-debajo>div {
    bottom: 33%;
    left: 3%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--2>a.lomoro-cat-card.lomoro-cat-card--izq.lomoro-cat-card--abajo.lomoro-cat-card--flecha-lado>div {
    bottom: 3%;
  }


}

@media (min-width: 715px) and (max-width: 1000px) {

  #f3 .lomoro-cat-fila {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 13px;
  }

  #f3 .lomoro-cat-titulo {
    font-size: 16px;
  }

  #f3 .lomoro-cat-flecha {
    width: 41px;
  }

  #f3 .lomoro-cat-card--abajo .lomoro-cat-info {
    bottom: 6%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--1>a.lomoro-cat-card.lomoro-cat-card--der.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo>div {
    top: 25%;
  }

  #f3>div.ld-container.container-fluid>div>div>div>div>div:nth-child(3)>div>div>div.lomoro-cat-fila.lomoro-cat-fila--2>a.lomoro-cat-card.lomoro-cat-card--blanco.lomoro-cat-card--der.lomoro-cat-card--arriba.lomoro-cat-card--flecha-debajo>div {
    top: 7%;
  }

}


/* ANIMACION FALOPERA */

/* ==========================================================================
   OPCIÓN 2: ANIMACIÓN DE "RESPIRACIÓN" (Elegante y anclada)
   ========================================================================== */

/* 1. Respiración sutil en la imagen (constante pero sin perder su lugar) */
@keyframes respiracionHelado {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    /* Un zoom mínimo (3%), no se desplaza, solo "crece" ligeramente */
    transform: scale(1.03); 
  }
}

/* 2. Movimiento suave en la flecha para indicar que es un botón */
@keyframes avanceFlecha {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   APLICACIÓN A LAS CLASES
   ========================================================================== */

.lomoro-cat-img {
  will-change: transform;
  /* El ancla abajo da la sensación de que el producto está apoyado y se acerca a la cámara */
  transform-origin: center bottom; 
  animation: respiracionHelado 6s ease-in-out infinite;
  transition: transform 0.4s ease;
}

/* Desfasamos las pares/impares para que el movimiento de la grilla no sea uniforme */
.lomoro-cat-fila .lomoro-cat-card:nth-child(even) .lomoro-cat-img {
  animation-delay: -3s; 
}

.lomoro-cat-flecha svg {
  will-change: transform;
  animation: avanceFlecha 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}

/* ==========================================================================
   INTERACCIÓN HOVER (El momento de protagonismo)
   ========================================================================== */

.lomoro-cat-card {
  display: block;
  transition: box-shadow 0.4s ease;
}

/* Al pasar el mouse, el card resalta sutilmente */
.lomoro-cat-card:hover {
  /* Opcional: una sombra muy suave para despegar el card del fondo */
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.05); */ 
}

/* Al pasar el mouse, detenemos la respiración y hacemos un zoom más intencional */
.lomoro-cat-card:hover .lomoro-cat-img {
  animation-play-state: paused; /* Frena la animación constante */
  transform: scale(1.08); /* Zoom más notorio pero profesional */
}

/* La flecha avanza con decisión al hacer hover */
.lomoro-cat-card:hover .lomoro-cat-flecha svg {
  animation-play-state: paused;
  transform: translateX(8px);
}