/*
 * pulido-listeo.css — FEMAERCA · Estética editorial
 * Objetivo: acercar Listeo al estilo Fraunces+Inter de las demos de asociaciones
 *           sin romper el layout del tema (CSS puramente cosmético/aditivo).
 *
 * Paleta (extraída de demo-asevaje):
 *   --mag:        #D9234B  (magenta principal)
 *   --mag-dark:   #B01A3C
 *   --mag-soft:   #F5D5DD
 *   --pur:        #4A2D44  (purple medio)
 *   --pur-dark:   #2E1C2A  (texto principal)
 *   --pur-soft:   #F4EDF1
 *   --cream:      #FFF8F4
 *   --gray-50:    #faf7f8
 *   --gray-100:   #f0e8ec
 *   --gray-200:   #d9ced4
 *   --gray-400:   #8a7a82
 *   --gray-600:   #5a4a52
 *   --gray-700:   #3d3036
 *   --shadow-md:  0 4px 12px rgba(74,45,68,.10)
 *   --shadow-lg:  0 12px 32px rgba(74,45,68,.16)
 *   --radius:     14px
 *   --radius-lg:  22px
 *
 * Cómo usar:
 *   1. Sube este archivo al tema hijo (o en WP: Apariencia > Personalizar > CSS adicional
 *      si el sitio no supera los ~10 KB).
 *   2. Añade el @import de Google Fonts también en el encabezado de functions.php
 *      (recomendado) o deja que lo cargue este propio CSS si prefers.
 *   3. Revisa los "AJUSTAR SI" en los comentarios tras ver el render real.
 *
 * Fecha: 2026-06-28
 */

/* ============================================================
   0. GOOGLE FONTS — Fraunces + Inter
   ============================================================
   Si el tema ya carga Fraunces/Inter por functions.php, comenta
   estas líneas para evitar doble petición.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,600;1,9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. VARIABLES LOCALES
   Usamos :root para que los valores sean accesibles en toda
   la hoja sin depender de si el tema define los suyos propios.
   ============================================================ */

:root {
  --fm-mag:       #D9234B;
  --fm-mag-dark:  #B01A3C;
  --fm-mag-soft:  #F5D5DD;
  --fm-pur:       #4A2D44;
  --fm-pur-dark:  #2E1C2A;
  --fm-pur-soft:  #F4EDF1;
  --fm-cream:     #FFF8F4;
  --fm-g50:       #faf7f8;
  --fm-g100:      #f0e8ec;
  --fm-g200:      #d9ced4;
  --fm-g400:      #8a7a82;
  --fm-g600:      #5a4a52;
  --fm-g700:      #3d3036;
  --fm-shadow-sm: 0 1px 2px rgba(74,45,68,.06);
  --fm-shadow-md: 0 4px 12px rgba(74,45,68,.10);
  --fm-shadow-lg: 0 12px 32px rgba(74,45,68,.16);
  --fm-radius:    14px;
  --fm-radius-lg: 22px;
  --fm-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fm-font-disp: 'Fraunces', Georgia, serif;
}


/* ============================================================
   2. TIPOGRAFÍA BASE DEL BODY
   Sutil: solo ajustamos font-family y color de texto.
   El tema controla tamaños y layout; no tocamos eso aquí.
   ============================================================ */

body {
  font-family: var(--fm-font-sans) !important;
  color: var(--fm-pur-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--fm-cream);
}


/* ============================================================
   ██████╗  BLOQUE A — FICHA INDIVIDUAL (Single Listing)
   ══════════════════════════════════════════════════════════
   Selectores principales de Listeo para la página de empresa.
   AJUSTAR SI: el tema usa clases distintas en tu instalación.
   Inspeccioná con DevTools sobre la ficha real para confirmar.
   ============================================================ */


/* ----------------------------------------------------------
   A1. CABECERA HERO DE LA FICHA
   Selectores habituales: .listing-page-hero, .listing-hero,
   .fw-header-section, .listing-single-header
   ---------------------------------------------------------- */

.listing-page-hero,
.listing-hero,
.fw-header-section,
.listing-single-header,
.listing-hero-section {
  background: linear-gradient(135deg, var(--fm-cream) 0%, var(--fm-mag-soft) 100%) !important;
  border-bottom: 1px solid var(--fm-g100);
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Título principal (h1) de la ficha */
.listing-page-title,
.listing-title,
h1.listing-title,
.listing-single-header h1,
.listing-hero h1 {
  font-family: var(--fm-font-disp) !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  color: var(--fm-pur-dark) !important;
  margin-bottom: 12px !important;
}

/* Subtítulo / descripción breve en hero */
.listing-hero .listing-tagline,
.listing-hero .listing-excerpt,
.listing-single-header .tagline {
  font-family: var(--fm-font-sans);
  font-size: 16px;
  color: var(--fm-g600);
  margin-top: 8px;
}

/* Rating / estrellas en hero */
.listing-hero .listing-rating,
.listing-single-header .listing-rating,
.listing-hero .listing-stars {
  margin-top: 10px;
}

/* Badges de categoría en hero */
.listing-hero .listing-cat,
.listing-hero .listing-category,
.listing-single-header .listing-cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--fm-white, #fff);
  border: 1px solid var(--fm-mag-soft);
  color: var(--fm-mag);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 6px;
  margin-bottom: 6px;
}


/* ----------------------------------------------------------
   A2. TABS DE NAVEGACIÓN DE LA FICHA
   Selectores: ul.tabs-menu, .listing-tabs ul, .listing-nav
   ---------------------------------------------------------- */

ul.tabs-menu,
.listing-tabs ul,
.listing-nav ul,
.listing-page-nav ul {
  border-bottom: 2px solid var(--fm-g100) !important;
  margin-bottom: 32px !important;
}

ul.tabs-menu li a,
.listing-tabs ul li a,
.listing-nav ul li a {
  font-family: var(--fm-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--fm-g600) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}

ul.tabs-menu li.current a,
ul.tabs-menu li a:hover,
ul.tabs-menu li:hover a,
.listing-tabs ul li.active a,
.listing-tabs ul li a:hover {
  color: var(--fm-mag) !important;
  border-bottom-color: var(--fm-mag) !important;
}


/* ----------------------------------------------------------
   A3. DATOS DE CONTACTO (bloque de info: dirección, tel, web)
   Selectores: .listing-address, .listing-contact-item,
   .contact-block, .listing-details-item, .listing-meta-item
   ---------------------------------------------------------- */

.listing-address,
.listing-contact-item,
.contact-block,
.listing-details-item,
.listing-meta-item,
.listing-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fm-g100);
  font-size: 15px;
  color: var(--fm-g700);
  line-height: 1.5;
}

/* Ícono del bloque de contacto */
.listing-address i,
.listing-contact-item i,
.listing-details-item i,
.listing-meta-item i {
  color: var(--fm-mag);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Etiqueta (p.ej. "Dirección:", "Teléfono:") */
.listing-address strong,
.listing-contact-item strong,
.listing-details-item strong,
.contact-item-label {
  font-weight: 700;
  color: var(--fm-pur-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 2px;
}

/* Valor / enlace dentro del bloque de contacto */
.listing-address a,
.listing-contact-item a,
.listing-details-item a {
  color: var(--fm-mag);
  font-weight: 500;
  text-decoration: none;
}

.listing-address a:hover,
.listing-contact-item a:hover,
.listing-details-item a:hover {
  color: var(--fm-mag-dark);
  text-decoration: underline;
}

/* Caja contenedora de todos los datos de contacto */
.listing-contact-details,
.listing-meta-box,
.listing-info-box,
.listing-contact-wrap {
  background: var(--fm-g50);
  border: 1px solid var(--fm-g100);
  border-radius: var(--fm-radius);
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: var(--fm-shadow-sm);
}

.listing-contact-details h3,
.listing-meta-box h3,
.listing-info-box h3,
.listing-contact-wrap h3 {
  font-family: var(--fm-font-disp) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--fm-pur-dark) !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--fm-mag) !important;
}


/* ----------------------------------------------------------
   A4. DESCRIPCIÓN / ABOUT (contenido de texto libre)
   Selectores: .listing-desc, .listing-description, .about-tab
   ---------------------------------------------------------- */

.listing-desc,
.listing-description,
.about-tab,
.tab-content .description {
  font-family: var(--fm-font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fm-g700);
}

.listing-desc p,
.listing-description p,
.about-tab p {
  margin-bottom: 18px;
}

.listing-desc h2,
.listing-desc h3,
.listing-description h2,
.listing-description h3 {
  font-family: var(--fm-font-disp) !important;
  color: var(--fm-pur-dark) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}


/* ----------------------------------------------------------
   A5. MAPA EN LA FICHA
   Selectores: #listing-map, .listing-map, .map-tab
   ---------------------------------------------------------- */

#listing-map,
.listing-map,
.map-tab .map-wrap,
.listing-single-map {
  border-radius: var(--fm-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--fm-shadow-lg) !important;
  border: 4px solid #fff !important;
}


/* ----------------------------------------------------------
   A6. GALERÍA DE FOTOS
   Selectores: .listing-gallery, .listing-photos, .gallery-items
   ---------------------------------------------------------- */

.listing-gallery,
.listing-photos,
.gallery-tab,
.listing-gallery-wrap {
  margin-top: 24px;
}

/* Item individual de la galería */
.listing-gallery .gallery-item,
.listing-photos .photo-item,
.listing-gallery a,
.gallery-items li {
  border-radius: var(--fm-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--fm-shadow-sm) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}

.listing-gallery .gallery-item:hover,
.listing-photos .photo-item:hover,
.gallery-items li:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--fm-shadow-md) !important;
}


/* ----------------------------------------------------------
   A7. BOTONES DE ACCIÓN (Llamar / Visitar web / Cómo llegar)
   Selectores: .listing-action-btn, .call-btn, .direction-btn,
   .website-btn, .claim-btn, .listing-sidebar .btn,
   .sidebar-widget a.button, .wp-button
   ---------------------------------------------------------- */

/* Base de todos los botones de acción */
.listing-action-btn,
.call-btn,
.direction-btn,
.website-btn,
.booking-btn,
.claim-btn,
.contact-btn,
.request-btn,
.listing-sidebar .btn,
.sidebar-widget a.button,
a.listing-button,
.listing-buttons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-family: var(--fm-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Botón primario: Llamar / CTA principal */
.call-btn,
.listing-action-btn.primary,
.contact-btn,
.booking-btn,
.listing-sidebar .btn-primary,
a.listing-button.primary {
  background: var(--fm-mag) !important;
  color: #fff !important;
  border-color: var(--fm-mag) !important;
}

.call-btn:hover,
.listing-action-btn.primary:hover,
.contact-btn:hover,
.booking-btn:hover {
  background: var(--fm-mag-dark) !important;
  border-color: var(--fm-mag-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--fm-shadow-md) !important;
}

/* Botón secundario: Visitar web / Cómo llegar */
.website-btn,
.direction-btn,
.claim-btn,
.listing-action-btn.secondary,
a.listing-button.secondary {
  background: transparent !important;
  color: var(--fm-pur-dark) !important;
  border-color: var(--fm-pur-dark) !important;
}

.website-btn:hover,
.direction-btn:hover,
.claim-btn:hover,
.listing-action-btn.secondary:hover {
  background: var(--fm-pur-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--fm-shadow-sm) !important;
}

/* Separador entre botones si están en columna */
.listing-buttons,
.listing-action-buttons,
.sidebar-widget .listing-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Widget de sidebar que contiene los botones */
.listing-sidebar .sidebar-widget,
.listing-sidebar .widget-box,
.listing-sidebar .listing-widget {
  background: #fff !important;
  border: 1px solid var(--fm-g100) !important;
  border-radius: var(--fm-radius) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--fm-shadow-sm) !important;
}

.listing-sidebar .sidebar-widget h3,
.listing-sidebar .widget-box h3,
.listing-sidebar .listing-widget h3 {
  font-family: var(--fm-font-disp) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fm-pur-dark) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--fm-mag) !important;
}


/* ----------------------------------------------------------
   A8. SECCIÓN DE RESEÑAS / VALORACIONES
   Selectores: .listing-reviews, .reviews-wrap, .review-item
   ---------------------------------------------------------- */

.review-item,
.listing-review-item,
.review-card {
  background: var(--fm-g50);
  border: 1px solid var(--fm-g100);
  border-radius: var(--fm-radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--fm-shadow-sm);
  transition: box-shadow 0.2s;
}

.review-item:hover,
.listing-review-item:hover {
  box-shadow: var(--fm-shadow-md);
}

.review-item .review-author,
.listing-review-item .reviewer-name {
  font-family: var(--fm-font-disp);
  font-weight: 700;
  color: var(--fm-pur-dark);
  font-size: 16px;
}

.review-item .review-text,
.listing-review-item .review-content {
  font-size: 15px;
  color: var(--fm-g700);
  line-height: 1.65;
  margin-top: 8px;
}


/* ============================================================
   ██████╗  BLOQUE B — TARJETAS DEL DIRECTORIO (Listing Cards)
   ══════════════════════════════════════════════════════════
   Selectores: .listing-item, .listing-item-wrap,
   .listing-item-grid, geodir-listing-item, etc.
   AJUSTAR SI: el child theme u otro plugin renombra las clases.
   ============================================================ */


/* ----------------------------------------------------------
   B1. WRAPPER Y TARJETA
   ---------------------------------------------------------- */

.listing-item-wrap,
.geodir-listing-item,
.listing-item-grid,
.listing-item-list {
  /* Solo espaciado defensivo; el grid lo pone el tema */
  margin-bottom: 20px;
}

/* La tarjeta propiamente dicha */
.listing-item,
.listing-item-grid .listing-item,
.listing-item-list .listing-item,
li.listing-item {
  background: #fff !important;
  border: 1px solid var(--fm-g100) !important;
  border-radius: var(--fm-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--fm-shadow-sm) !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  display: flex !important;
  flex-direction: column !important;
}

.listing-item:hover,
.listing-item-grid .listing-item:hover,
li.listing-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--fm-shadow-md) !important;
  border-color: var(--fm-mag-soft) !important;
}


/* ----------------------------------------------------------
   B2. IMAGEN / THUMBNAIL DE LA TARJETA
   ---------------------------------------------------------- */

.listing-item-photo,
.listing-item-img,
.listing-item .item-img,
.listing-item .listing-thumb,
.listing-item .listing-img {
  overflow: hidden !important;
  border-radius: 0 !important; /* el border-radius está en la tarjeta padre */
  flex-shrink: 0 !important;
}

.listing-item-photo img,
.listing-item-img img,
.listing-item .item-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.4s !important;
}

.listing-item:hover .listing-item-photo img,
.listing-item:hover .listing-item-img img {
  transform: scale(1.04) !important;
}

/* Badge de categoría sobre la imagen */
.listing-item .listing-cat,
.listing-item .listing-category,
.listing-item .cat-badge,
.listing-category-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: var(--fm-mag) !important;
  color: #fff !important;
  font-family: var(--fm-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
}

/* Badge de "Destacado" / "Featured" */
.listing-item .featured-badge,
.listing-item .listing-featured {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: #fff !important;
  color: var(--fm-mag) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  box-shadow: var(--fm-shadow-sm) !important;
}


/* ----------------------------------------------------------
   B3. CONTENIDO DE LA TARJETA (bajo la imagen)
   ---------------------------------------------------------- */

.listing-item-content,
.listing-item .item-content,
.listing-item .listing-item-body {
  padding: 18px 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

/* Nombre de la empresa */
.listing-item-title,
.listing-item .listing-item-title a,
.listing-item h3.listing-title a,
.listing-item h4.listing-title a {
  font-family: var(--fm-font-disp) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--fm-pur-dark) !important;
  letter-spacing: -0.2px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.listing-item-title a:hover,
.listing-item h3.listing-title a:hover {
  color: var(--fm-mag) !important;
}

/* Descripción corta */
.listing-item-text,
.listing-item .item-excerpt,
.listing-item .listing-excerpt {
  font-size: 14px !important;
  color: var(--fm-g700) !important;
  line-height: 1.55 !important;
  /* limitamos a 3 líneas si el tema lo permite */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Etiqueta de sector (bajo el nombre, texto pequeño) */
.listing-item .listing-sector,
.listing-item .item-sector,
.listing-item .listing-type {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fm-mag) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Dirección */
.listing-item-address,
.listing-item .item-address,
.listing-item .listing-address,
.listing-item-adress /* typo original del tema */ {
  font-size: 13px !important;
  color: var(--fm-g600) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.listing-item-address i,
.listing-item .item-address i {
  color: var(--fm-mag) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* Teléfono */
.listing-item-phone,
.listing-item .item-phone {
  font-size: 13px !important;
  color: var(--fm-g600) !important;
}

.listing-item-phone a,
.listing-item .item-phone a {
  color: var(--fm-g600) !important;
  text-decoration: none !important;
}

.listing-item-phone a:hover {
  color: var(--fm-mag) !important;
}

/* Rating / estrellas */
.listing-item-stars,
.listing-item .listing-rating,
.listing-item .star-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.listing-item .rating-count,
.listing-item .review-count {
  font-size: 12px !important;
  color: var(--fm-g400) !important;
  font-weight: 600 !important;
}


/* ----------------------------------------------------------
   B4. FOOTER DE LA TARJETA (acciones rápidas)
   Selectores: .listing-item-footer, .listing-item-footer-content
   ---------------------------------------------------------- */

.listing-item-footer,
.listing-item-footer-content,
.listing-item .item-footer {
  padding: 12px 20px 16px !important;
  border-top: 1px solid var(--fm-g100) !important;
  display: flex !important;
  gap: 8px !important;
  margin-top: auto !important;
}

/* Botones pequeños dentro del footer de tarjeta */
.listing-item-footer a,
.listing-item-footer-content a,
.listing-item .item-footer a {
  flex: 1 !important;
  text-align: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: var(--fm-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--fm-g50) !important;
  color: var(--fm-pur-dark) !important;
  border: 1px solid var(--fm-g100) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

.listing-item-footer a:hover,
.listing-item-footer-content a:hover,
.listing-item .item-footer a:hover {
  background: var(--fm-mag) !important;
  color: #fff !important;
  border-color: var(--fm-mag) !important;
}


/* ============================================================
   ██████╗  BLOQUE C — FILTROS DEL DIRECTORIO
   ══════════════════════════════════════════════════════════
   Selectores: .main-search-form, .listing-search,
   .main-search-wrap, .main-search-container, etc.
   AJUSTAR SI: el tema usa Select2, Chosen o custom dropdowns.
   ============================================================ */


/* ----------------------------------------------------------
   C1. CONTENEDOR DE FILTROS
   ---------------------------------------------------------- */

.main-search-wrap,
.main-search-container,
.listing-search-wrap,
.listing-search-form,
.filters-container,
.listing-filters {
  background: #fff !important;
  border: 1px solid var(--fm-g100) !important;
  border-radius: var(--fm-radius) !important;
  box-shadow: var(--fm-shadow-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 28px !important;
}

/* Si los filtros están dentro de un hero oscuro, dejamos que
   el tema gestione el fondo pero redondeamos la cajita interna */
.hero .main-search-wrap,
.banner .main-search-wrap {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


/* ----------------------------------------------------------
   C2. INPUT DE BÚSQUEDA DE TEXTO
   ---------------------------------------------------------- */

.main-search-input,
.listing-search-input,
#main-search-input,
input.main-search-text,
.ms-search-input,
.search-field {
  font-family: var(--fm-font-sans) !important;
  font-size: 15px !important;
  color: var(--fm-pur-dark) !important;
  background: var(--fm-g50) !important;
  border: 1px solid var(--fm-g200) !important;
  border-radius: 8px !important;
  padding: 12px 16px 12px 42px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}

.main-search-input:focus,
#main-search-input:focus,
.listing-search-input:focus {
  outline: none !important;
  border-color: var(--fm-mag) !important;
  box-shadow: 0 0 0 3px rgba(217,35,75,.10) !important;
  background: #fff !important;
}

.main-search-input::placeholder,
.listing-search-input::placeholder {
  color: var(--fm-g400) !important;
}


/* ----------------------------------------------------------
   C3. SELECTS NATIVOS (sector, localidad, tipo)
   ---------------------------------------------------------- */

.main-search-form select,
.listing-filters select,
.listing-search select {
  font-family: var(--fm-font-sans) !important;
  font-size: 15px !important;
  color: var(--fm-pur-dark) !important;
  background: var(--fm-g50) !important;
  border: 1px solid var(--fm-g200) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}

.main-search-form select:focus,
.listing-filters select:focus {
  outline: none !important;
  border-color: var(--fm-mag) !important;
}


/* ----------------------------------------------------------
   C4. SELECT2 / CHOSEN (dropdowns enriquecidos)
   Listeo suele usar Select2 para los filtros de categoría/loc
   ---------------------------------------------------------- */

/* Contenedor Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  font-family: var(--fm-font-sans) !important;
  border: 1px solid var(--fm-g200) !important;
  border-radius: 8px !important;
  background: var(--fm-g50) !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.2s !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--fm-mag) !important;
  box-shadow: 0 0 0 3px rgba(217,35,75,.10) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--fm-font-sans) !important;
  font-size: 15px !important;
  color: var(--fm-pur-dark) !important;
  line-height: 44px !important;
}

/* Dropdown de resultados Select2 */
.select2-dropdown,
.select2-results {
  border: 1px solid var(--fm-g200) !important;
  border-radius: var(--fm-radius) !important;
  box-shadow: var(--fm-shadow-md) !important;
  font-family: var(--fm-font-sans) !important;
  font-size: 15px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.select2-results__option {
  padding: 10px 16px !important;
  color: var(--fm-pur-dark) !important;
  transition: background 0.15s !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
  background: var(--fm-mag-soft) !important;
  color: var(--fm-mag-dark) !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--fm-g200) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-family: var(--fm-font-sans) !important;
}


/* ----------------------------------------------------------
   C5. BOTÓN DE BUSCAR / APLICAR FILTROS
   ---------------------------------------------------------- */

.main-search-button,
.search-submit,
.listing-search-btn,
.filter-apply-btn,
button.search-btn,
input[type="submit"].search-btn {
  font-family: var(--fm-font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: var(--fm-mag) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
  white-space: nowrap !important;
}

.main-search-button:hover,
.search-submit:hover,
.listing-search-btn:hover,
.filter-apply-btn:hover {
  background: var(--fm-mag-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--fm-shadow-md) !important;
}

/* Botón "Limpiar" / reset */
.filter-reset-btn,
.clear-filters,
.search-reset {
  font-family: var(--fm-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: transparent !important;
  color: var(--fm-pur-dark) !important;
  border: 1.5px solid var(--fm-pur-dark) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}

.filter-reset-btn:hover,
.clear-filters:hover,
.search-reset:hover {
  background: var(--fm-pur-dark) !important;
  color: #fff !important;
}


/* ----------------------------------------------------------
   C6. CONTEO DE RESULTADOS (N empresas encontradas)
   ---------------------------------------------------------- */

.result-count,
.listing-result-count,
.results-info,
.search-results-count {
  font-family: var(--fm-font-sans) !important;
  font-size: 14px !important;
  color: var(--fm-g600) !important;
  margin-bottom: 24px !important;
}

.result-count strong,
.listing-result-count strong,
.results-info span {
  font-weight: 700 !important;
  color: var(--fm-pur-dark) !important;
}


/* ----------------------------------------------------------
   C7. PAGINACIÓN DEL DIRECTORIO
   ---------------------------------------------------------- */

.listing-pagination,
.page-numbers,
.pagination {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 40px !important;
}

.listing-pagination a,
.page-numbers a,
.pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  font-family: var(--fm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fm-pur-dark) !important;
  background: #fff !important;
  border: 1px solid var(--fm-g200) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.listing-pagination a:hover,
.page-numbers a:hover {
  background: var(--fm-mag-soft) !important;
  border-color: var(--fm-mag-soft) !important;
  color: var(--fm-mag-dark) !important;
}

.listing-pagination .current,
.page-numbers .current,
.pagination .current {
  background: var(--fm-mag) !important;
  border-color: var(--fm-mag) !important;
  color: #fff !important;
  min-width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}


/* ----------------------------------------------------------
   C8. BOTÓN "CARGAR MÁS" (load more)
   ---------------------------------------------------------- */

.load-more-btn,
.listing-load-more,
#load-more-listings {
  display: block !important;
  margin: 40px auto 0 !important;
  padding: 14px 40px !important;
  border-radius: 999px !important;
  font-family: var(--fm-font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: var(--fm-pur) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
}

.load-more-btn:hover,
.listing-load-more:hover {
  background: var(--fm-pur-dark) !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   D. AJUSTES RESPONSIVE
   Solo mobile — el layout lo gestiona el tema, aquí solo
   ajustamos los detalles cosméticos que empeoran en móvil.
   ============================================================ */

@media (max-width: 768px) {

  /* Hero de ficha: menos padding */
  .listing-page-hero,
  .listing-hero,
  .listing-single-header {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Título de ficha más compacto */
  .listing-page-title,
  .listing-title,
  h1.listing-title {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  /* Filtros apilados */
  .main-search-wrap,
  .main-search-container {
    padding: 12px !important;
  }

  /* Botones de acción en columna en móvil */
  .listing-buttons,
  .listing-action-buttons {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {

  /* Tarjetas: sin hover transform en táctil (evita saltos) */
  .listing-item:hover {
    transform: none !important;
  }

  /* Sidebar debajo del contenido */
  .listing-sidebar {
    margin-top: 32px !important;
  }
}


/* ============================================================
   E. OVERRIDES DE ALTA ESPECIFICIDAD (last resort)
   Solo si los bloques anteriores no ganan por especificidad.
   Descomentar bloque por bloque si es necesario.
   ============================================================ */

/*
body .listing-item-title a {
  font-family: var(--fm-font-disp) !important;
  color: var(--fm-pur-dark) !important;
}

body .listing-action-btn,
body .call-btn,
body .direction-btn {
  border-radius: 999px !important;
}
*/