/*
Theme Name:   Listeo Child Theme V2 (Parche Peludo)
Theme URI:    https://parchepeludo.com/
Description:  Tema Hijo personalizado para la optimizacion visual de Parche Peludo V2.
Author:       AntiGravity & Claude Code (Advanced Agentic Coding)
Author URI:   https://google.com
Template:     listeo
Version:      2.0.17
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  listeo-child
*/

/* ==========================================================================
   Importacion de estilos del tema padre (Listeo) y variables de marca V2
   ========================================================================== */

/* Importar la fuente oficial Ubuntu desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* 3.1 Color primario — Teal Parche */
  --teal-parche: #79C8D0;
  --teal-deep: #4AA5AD;
  --teal-soft: #BEE3E7;
  --teal-mist: #E8F4F6;
  --teal-ink: #1E5D64;

  /* 3.2 Neutros */
  --paper: #FFFFFF;
  --bone: #F7F3EC;
  --ink: #1E2E33;
  --ink-muted: #5A6B70;
  --ink-faint: #8E9A9E;
  --ink-line: rgba(30,46,51,.10);
  --ink-line-2: rgba(30,46,51,.06);

  /* 3.3 Acentos */
  --marigold: #FFD166;
  --coral: #E85D75;
  --orange: #F2994A;
  --night: #2D3A59;

  /* 3.4 Semanticos */
  --success: #14A985;
  --warning: #F2994A;
  --danger: #E85D75;
  --info: #4AA5AD;

  /* 3.5 Aliases de superficie */
  --bg: var(--paper);
  --bg-alt: var(--teal-mist);
  --bg-warm: var(--bone);
  --surface: var(--paper);
  --surface-2: var(--teal-mist);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --fg-faint: var(--ink-faint);
  --border: var(--ink-line);

  /* 4. Tipografia */
  --font-sans: 'Ubuntu', sans-serif;
  --font-display: 'Ubuntu', sans-serif;
  --font-hand: 'Caveat', cursive;

  /* 5. Escala de espaciado */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* 6. Radios de borde */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* 7. Sombras */
  --shadow-sm: 0 1px 2px rgba(30,46,51,.06), 0 1px 3px rgba(30,46,51,.04);
  --shadow-md: 0 4px 12px rgba(30,46,51,.08), 0 2px 4px rgba(30,46,51,.04);
  --shadow-lg: 0 12px 32px rgba(30,46,51,.10), 0 4px 8px rgba(30,46,51,.06);
  --shadow-xl: 0 24px 48px rgba(30,46,51,.14), 0 8px 16px rgba(30,46,51,.06);
  --shadow-teal: 0 12px 32px rgba(121,200,208,.40);

  /* 8. Transiciones */
  --ease-soft: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}

/* ==========================================================================
   Clases de Utilidad y Estilos Personalizados V2 (Parche Peludo)
   ========================================================================== */

/* Tarjetas de Listado Premium V2 */
.tarjeta-premium-v2 {
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--ink-line-2) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  transition: all var(--dur-base) var(--ease-soft) !important;
  cursor: pointer;
}

.tarjeta-premium-v2:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.tarjeta-premium-v2 .listing-img-container {
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* Badges de Categoria y Estado */
.badge-verificado-v2 {
  background: var(--paper) !important;
  color: var(--teal-ink) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: var(--r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Botones CTA de la Marca */
.btn-marca-primario {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: var(--r-pill) !important;
  background: var(--teal-parche) !important;
  color: var(--paper) !important;
  box-shadow: var(--shadow-teal) !important;
  transition: all var(--dur-base) var(--ease-soft) !important;
  border: none !important;
  cursor: pointer;
}

.btn-marca-primario:hover {
  background: var(--teal-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==========================================================================
   Tarjetas de Listado Premium V2 — directorio de Listeo (layout "-nl")
   Estiliza el markup nativo de Listeo (.listing-card-nl y descendientes)
   segun DESIGN.md §15 y §17. Los !important ganan especificidad sobre Listeo.
   ========================================================================== */

.listing-card-nl {
  background: var(--surface) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  transition: transform var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft) !important;
}

.listing-card-container-nl:hover .listing-card-nl {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Imagen con ratio 4:3 */
.listing-image-container-nl {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}

.listing-image-container-nl .slider-image-nl {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Badge de estado (Abierto / Cerrado) — pill suave con punto */
.status-button-nl {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 12px 5px 10px !important;
  border-radius: var(--r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}

.status-button-nl::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
}

.status-button-nl.open-nl {
  background: #E6F6EC !important;
  color: #1F6B3E !important;
}

.status-button-nl.closed-nl {
  background: #FBEBE7 !important;
  color: #8A2A1A !important;
}

/* Boton favorito */
.favorite-icon-nl {
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
}

.favorite-icon-nl .save {
  color: var(--coral) !important;
}

/* Badge "Destacados" */
.badge-nl.featured-nl {
  background: var(--marigold) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  border-radius: var(--r-pill) !important;
  padding: 5px 10px !important;
}

/* Titulo del listado */
.listing-title-nl {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
}

.verified-icon-nl i {
  color: var(--teal-deep) !important;
}

/* Descripcion breve */
.listing-excerpt-nl {
  font-size: 13px !important;
  color: var(--ink-muted) !important;
  line-height: 1.45 !important;
}

/* Iconos de amenidades */
.listing-amenities-nl .amenity-icon-nl svg {
  color: var(--teal-ink) !important;
}

/* Rating */
.listing-rating-nl .stars-nl i {
  color: var(--marigold) !important;
}

.listing-rating-nl .rating-text-nl {
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Precio */
.price-nl {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

/* ==========================================================================
   HOME V2 (página de pruebas /home-v2-pruebas) — componentes de marca
   Clases reutilizables asignadas a bloques nativos de Elementor.
   ========================================================================== */

/* --- Hero --- */
/* Encaja completo en la primera pantalla (descuenta header + admin bar).
   En Elementor 4 las clases solo aplican a widgets, así que la sección se
   estiliza vía :has() anclado en el título del Hero (widget). */
.ppv2-hero,
.elementor-top-section:has(.ppv2-hero-title) {
  background: linear-gradient(180deg, var(--teal-mist) 0%, var(--paper) 100%) !important;
  min-height: calc(100vh - 140px) !important;
  display: flex !important;
  align-items: center !important;
}
.ppv2-hero > .elementor-container,
.elementor-top-section:has(.ppv2-hero-title) > .elementor-container {
  align-items: center !important;
  /* El Hero es flex: sin esto, el contenedor (item flex) no se encoge y en
     tableta conserva su max-width (1024px), desbordando y cortando el slider.
     width:100% lo limita al ancho disponible; en PC el max-width sigue topando
     igual (verificado: el ancho de escritorio no cambia). */
  width: 100% !important;
}

.ppv2-hero-title,
.ppv2-hero-title .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-size: clamp(30px, 3.2vw, 52px) !important;
  margin-bottom: 0 !important;
}

.ppv2-hand {
  font-family: var(--font-hand) !important;
  font-style: italic;
  font-weight: 700;
  color: var(--teal-deep) !important;
  font-size: 1.25em;
}

.ppv2-lead,
.ppv2-lead .elementor-widget-container {
  font-family: var(--font-sans) !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.5 !important;
  color: var(--ink-muted) !important;
}

/* Imagen del hero (caso imagen única): redondeada, con sombra y leve rotación.
   Micro-interacción: al hacer hover suaviza la rotación a 0deg y escala 1.02
   con cubic-bezier(.2,.8,.2,1) para sensación premium. */
.ppv2-hero-media img {
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-xl) !important;
  object-fit: cover !important;
  transform: rotate(1deg) scale(1);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}
.ppv2-hero-media img:hover {
  transform: rotate(0deg) scale(1.02) !important;
  box-shadow: var(--shadow-2xl, 0 24px 48px rgba(30,46,51,.14), 0 8px 16px rgba(30,46,51,.08)) !important;
}

/* Slider del hero (Carrusel de imágenes de Elementor) */
.ppv2-hero-slider .elementor-image-carousel-wrapper {
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
  transform: rotate(0deg) scale(1);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}
.ppv2-hero-slider .elementor-image-carousel-wrapper:hover {
  transform: rotate(0deg) scale(1.02) !important;
  box-shadow: var(--shadow-2xl, 0 24px 48px rgba(30,46,51,.14), 0 8px 16px rgba(30,46,51,.08)) !important;
}
.ppv2-hero-slider .swiper-slide img {
  height: clamp(260px, 44vh, 440px) !important;
  width: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  display: block !important;
}
/* Pasador: puntos y flechas con color de marca */
.ppv2-hero-slider .swiper-pagination-bullet {
  background: var(--teal-soft) !important;
  opacity: 1;
}
.ppv2-hero-slider .swiper-pagination-bullet-active {
  background: var(--teal-parche) !important;
  opacity: 1;
}
.ppv2-hero-slider .elementor-swiper-button {
  color: var(--paper) !important;
  text-shadow: 0 1px 4px rgba(30,46,51,.4);
}

/* Prueba social (avatares) */
.ppv2-socialproof {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-muted);
}
.ppv2-socialproof .ppv2-avatars {
  display: inline-flex;
}
.ppv2-socialproof .ppv2-avatars img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 2px solid var(--paper);
  object-fit: cover;
  margin-left: -12px;
}
.ppv2-socialproof .ppv2-avatars img:first-child {
  margin-left: 0;
}

/* Botón primario de marca aplicado a widgets de botón de Elementor */
.ppv2-btn .elementor-button {
  background: var(--teal-parche) !important;
  color: var(--paper) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  border-radius: var(--r-pill) !important;
  padding: 16px 40px !important;
  box-shadow: var(--shadow-teal) !important;
  border: none !important;
  transition: all var(--dur-base) var(--ease-soft) !important;
}
.ppv2-btn .elementor-button:hover {
  background: var(--teal-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- Encabezados de sección (reutilizable) --- */
.ppv2-h2,
.ppv2-h2 .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  text-align: center !important;
}
.ppv2-sub,
.ppv2-sub .elementor-widget-container {
  text-align: center !important;
  color: var(--ink-muted) !important;
  font-size: 18px !important;
  font-style: italic;
  max-width: 680px;
  margin: 0 auto !important;
}

/* --- Servicios (tarjetas nativas; la estructura se estiliza con :has()
   anclado en clases de widget, porque en Elementor 4 las clases solo
   aplican a widgets, no a secciones/columnas) --- */

/* Grilla: la sección que contiene las imágenes de tarjeta envuelve 4->3->2->1 */
.elementor-top-section:has(.ppv2-sc-img) > .elementor-container {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 28px !important;
}
.elementor-top-section:has(.ppv2-sc-img) > .elementor-container > .elementor-column {
  width: calc(25% - 21px) !important;
  max-width: calc(25% - 21px) !important;
  flex: 0 0 auto !important;
  position: relative !important;
}
@media (max-width:1100px){ .elementor-top-section:has(.ppv2-sc-img) > .elementor-container > .elementor-column{ width:calc(33.333% - 19px)!important; max-width:calc(33.333% - 19px)!important; } }
@media (max-width:820px){ .elementor-top-section:has(.ppv2-sc-img) > .elementor-container > .elementor-column{ width:calc(50% - 14px)!important; max-width:calc(50% - 14px)!important; } }
/* Móvil (según mockup Stitch): 1 tarjeta DESTACADA a ancho completo +
   grilla de 2 columnas de MINI-tarjetas (imagen + nombre + precio) */
@media (max-width: 767px) {
  .elementor-top-section:has(.ppv2-sc-img) > .elementor-container { gap: 16px !important; }
  /* 1ª tarjeta: destacada, ancho completo, con todo el detalle */
  .elementor-top-section:has(.ppv2-sc-img) > .elementor-container > .elementor-column:first-child { width: 100% !important; max-width: 100% !important; }
  /* Resto: mini-tarjetas, 2 por fila */
  .elementor-top-section:has(.ppv2-sc-img) > .elementor-container > .elementor-column:not(:first-child) { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
  /* En mini-tarjetas: ocultar solo píldora y descripción (el CTA SÍ se muestra) */
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-pill,
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-desc { display: none !important; }
  /* En mini-tarjetas: título y precio compactos, sin borde superior del pie */
  .elementor-column:not(:first-child):has(.ppv2-sc-img) > .elementor-element-populated { padding-bottom: 14px !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-title { padding: 12px 14px 0 !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-title .elementor-heading-title { font-size: 14px !important; line-height: 1.25 !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .elementor-inner-section:has(.ppv2-sc-cta) { margin: 2px 14px 0 !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .elementor-inner-section:has(.ppv2-sc-cta) > .elementor-container { border-top: none !important; padding-top: 0 !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-price .elementor-heading-title { font-size: 12px !important; font-weight: 700 !important; color: var(--ink-muted) !important; }
  .elementor-column:not(:first-child):has(.ppv2-sc-img) .ppv2-sc-cta .elementor-button { font-size: 13px !important; padding: 0 !important; }
}

/* ==========================================================================
   AJUSTES MÓVIL (≤767px) — alinear secciones al mockup móvil de Stitch
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Hero: texto centrado --- */
  .elementor-column:has(.ppv2-hero-title) { text-align: center !important; }
  .ppv2-hero-title .elementor-heading-title,
  .ppv2-lead, .ppv2-lead .elementor-widget-container { text-align: center !important; }
  .ppv2-btn { text-align: center !important; }
  .ppv2-socialproof { justify-content: center !important; }

  /* --- Directorio: encabezado a la izquierda, círculos 92px, solo título --- */
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-eyebrow-pill,
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-eyebrow-pill .elementor-heading-title,
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-h2 .elementor-heading-title,
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-sub,
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-sub .elementor-widget-container { text-align: left !important; }
  .elementor-top-section:has(.ppv2-eyebrow-pill) .ppv2-sub { margin: 0 !important; max-width: none !important; }
  .ppv2-dir-item .elementor-icon { width: 92px !important; height: 92px !important; margin-bottom: 12px !important; }
  .ppv2-dir-item .elementor-icon i, .ppv2-dir-item .elementor-icon svg { font-size: 34px !important; }
  .ppv2-dir-item .elementor-icon-box-description { display: none !important; }
  .ppv2-dir-item .elementor-icon-box-title { font-size: 16px !important; }

  /* --- Testimonios: carrusel horizontal deslizable (tarjetas ~85%).
     Prefijo .ppv2-home-page para ganar especificidad sobre el flex-wrap de Elementor.
     Esta clase se asigna manualmente en Ajustes de Página de Elementor (no usar
     IDs como .elementor-NNNN porque cambian al clonar/migrar). --- */
  .ppv2-home-page .elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
  }
  .ppv2-home-page .elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container::-webkit-scrollbar { display: none; }
  .ppv2-home-page .elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container > .elementor-column {
    width: 85% !important; max-width: 85% !important; flex: 0 0 85% !important;
    scroll-snap-align: center !important;
  }

  /* --- #PropósitoPeludo: imagen 4:3, sin ícono burbuja (como el mockup) --- */
  .ppv2-pp-bubble { display: none !important; }
  .ppv2-pp-img img { aspect-ratio: 4 / 3 !important; }
  .ppv2-pp-title { padding-top: 18px !important; }
}

/* Caja de la tarjeta = columna que contiene la imagen */
.elementor-column:has(> .elementor-element-populated > .ppv2-sc-img) > .elementor-element-populated,
.elementor-column:has(> .elementor-widget-wrap > .ppv2-sc-img) > .elementor-widget-wrap {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  padding: 0 0 22px 0 !important;
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft) !important;
}
.elementor-column:has(.ppv2-sc-img):hover > .elementor-element-populated,
.elementor-column:has(.ppv2-sc-img):hover > .elementor-widget-wrap {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Imagen (widget) a ras, 4:3 */
.ppv2-sc-img { position: relative !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; margin: 0 !important; }
.ppv2-sc-img .elementor-widget-container, .ppv2-sc-img figure { height: 100% !important; margin: 0 !important; }
.ppv2-sc-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.5s var(--ease-soft) !important; }
.elementor-column:has(.ppv2-sc-img):hover .ppv2-sc-img img { transform: scale(1.08) !important; }

/* Píldora de categoría (widget Título superpuesto) */
.ppv2-sc-pill { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 2 !important; margin: 0 !important; width: auto !important; }
.ppv2-sc-pill .elementor-heading-title {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal-ink) !important;
  border: 1px solid var(--teal-soft);
  font-size: 11px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 12px; border-radius: var(--r-pill);
}

/* Título y descripción (con padding lateral) */
.ppv2-sc-title { padding: 18px 20px 0 !important; margin: 0 !important; }
.ppv2-sc-title .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 20px !important; line-height: 1.25 !important; color: var(--ink) !important; }
.ppv2-sc-desc { padding: 8px 20px 0 !important; margin: 0 !important; }
.ppv2-sc-desc, .ppv2-sc-desc .elementor-widget-container { font-size: 14px !important; line-height: 1.55 !important; color: var(--ink-muted) !important; }

/* Pie: precio + CTA en una fila (sección interna que contiene el botón) */
.elementor-inner-section:has(.ppv2-sc-cta) { margin: 14px 20px 0 !important; width: auto !important; }
.elementor-inner-section:has(.ppv2-sc-cta) > .elementor-container { border-top: 1px solid var(--ink-line-2) !important; padding-top: 14px !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
.elementor-inner-section:has(.ppv2-sc-cta) > .elementor-container > .elementor-column { width: auto !important; flex: 0 0 auto !important; }
.ppv2-sc-price .elementor-heading-title { font-size: 14px !important; font-weight: 800 !important; color: var(--ink) !important; margin: 0 !important; }
.ppv2-sc-cta .elementor-button {
  background: transparent !important;
  color: var(--teal-deep) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 0 !important; box-shadow: none !important; border: none !important;
}
.ppv2-sc-cta .elementor-button:hover { text-decoration: underline !important; background: transparent !important; transform: none !important; }

/* --- Tienda (Shop) — widgets nativos, estructura vía :has() --- */
.elementor-top-section:has(.ppv2-shop-eyebrow) {
  background: var(--bone) !important;
  border-top: 1px solid var(--ink-line-2) !important;
  border-bottom: 1px solid var(--ink-line-2) !important;
}
.elementor-top-section:has(.ppv2-shop-eyebrow) > .elementor-container { align-items: center !important; }
.ppv2-shop-eyebrow .elementor-heading-title { color: var(--orange) !important; font-weight: 800 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.2em; }
.ppv2-shop-h2 .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(26px, 2.6vw, 40px) !important; line-height: 1.15 !important; color: var(--ink) !important; }
.ppv2-shop-lead, .ppv2-shop-lead .elementor-widget-container { color: var(--ink-muted) !important; font-size: 17px !important; line-height: 1.6 !important; }

/* Filtros de categoría (pills) */
.elementor-inner-section:has(.ppv2-shop-filter) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-inner-section:has(.ppv2-shop-filter) > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-content: flex-start;
}
.ppv2-shop-filter { width: auto !important; }
.ppv2-shop-filter .elementor-button { background: var(--paper) !important; color: var(--ink-muted) !important; border: 1px solid var(--ink-line) !important; border-radius: var(--r-pill) !important; font-size: 12px !important; font-weight: 700 !important; padding: 8px 18px !important; box-shadow: none !important; }
.ppv2-shop-filter .elementor-button:hover { border-color: var(--teal-soft) !important; color: var(--teal-deep) !important; background: var(--paper) !important; transform: none !important; }
.ppv2-shop-filter.is-active .elementor-button { background: var(--teal-parche) !important; color: var(--paper) !important; border-color: var(--teal-parche) !important; box-shadow: var(--shadow-sm) !important; }
.elementor-inner-section:has(.ppv2-shop-filter) { margin-bottom: 22px !important; width: 100% !important; }

/* Grilla de productos 4 -> 2 -> 1 */
.elementor-inner-section:has(.ppv2-prod-img) > .elementor-container { flex-wrap: wrap !important; gap: 20px !important; }
.elementor-inner-section:has(.ppv2-prod-img) > .elementor-container > .elementor-column {
  width: calc(25% - 15px) !important; max-width: calc(25% - 15px) !important; flex: 0 0 auto !important; position: relative !important;
}
@media (max-width:980px){ .elementor-inner-section:has(.ppv2-prod-img) > .elementor-container > .elementor-column{ width:calc(50% - 10px)!important; max-width:calc(50% - 10px)!important; } }
@media (max-width:560px){ .elementor-inner-section:has(.ppv2-prod-img) > .elementor-container > .elementor-column{ width:100%!important; max-width:100%!important; } }

/* Tarjeta de producto */
.elementor-column:has(> .elementor-element-populated > .ppv2-prod-img) > .elementor-element-populated,
.elementor-column:has(> .elementor-widget-wrap > .ppv2-prod-img) > .elementor-widget-wrap {
  background: var(--paper) !important; border: 1px solid var(--ink-line-2) !important; border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important; overflow: hidden !important; padding: 0 0 16px 0 !important;
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft) !important;
}
.elementor-column:has(.ppv2-prod-img):hover > .elementor-element-populated,
.elementor-column:has(.ppv2-prod-img):hover > .elementor-widget-wrap { transform: translateY(-4px) !important; box-shadow: var(--shadow-xl) !important; }
.ppv2-prod-img { aspect-ratio: 1 / 1 !important; overflow: hidden !important; margin: 0 !important; background: var(--bone) !important; }
.ppv2-prod-img .elementor-widget-container, .ppv2-prod-img figure { height: 100% !important; margin: 0 !important; }
.ppv2-prod-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s var(--ease-soft) !important; }
.elementor-column:has(.ppv2-prod-img):hover .ppv2-prod-img img { transform: scale(1.1) !important; }
.ppv2-prod-brand { padding: 16px 18px 0 !important; margin: 0 !important; }
.ppv2-prod-brand .elementor-heading-title { display: inline-block; background: rgba(190,227,231,.35); color: var(--teal-ink) !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: var(--r-pill); }
.ppv2-prod-name { padding: 8px 18px 0 !important; margin: 0 !important; }
.ppv2-prod-name .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 16px !important; color: var(--ink) !important; }
.ppv2-prod-price { padding: 2px 18px 0 !important; margin: 0 !important; }
.ppv2-prod-price .elementor-heading-title { font-size: 18px !important; font-weight: 800 !important; color: var(--teal-deep) !important; }
.ppv2-prod-cta { padding: 12px 18px 0 !important; }
.ppv2-prod-cta .elementor-button { width: 100% !important; background: var(--teal-parche) !important; color: var(--paper) !important; border-radius: var(--r-md) !important; font-weight: 700 !important; font-size: 14px !important; padding: 10px !important; box-shadow: none !important; border: none !important; }
.ppv2-prod-cta .elementor-button:hover { background: var(--teal-deep) !important; transform: none !important; }

/* --- Directorio (categorías circulares con Icon Box nativo) --- */
.elementor-top-section:has(.ppv2-dir-item) { background: var(--paper) !important; }
.ppv2-eyebrow-pill { text-align: center !important; }
.ppv2-eyebrow-pill .elementor-heading-title {
  display: inline-block; background: var(--teal-mist); color: var(--teal-ink) !important;
  font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.15em;
  padding: 6px 14px; border-radius: var(--r-pill);
}

/* Grilla 4 -> 2 -> 1 */
.elementor-top-section:has(.ppv2-dir-item) > .elementor-container { flex-wrap: wrap !important; justify-content: center !important; gap: 24px !important; }
.elementor-top-section:has(.ppv2-dir-item) > .elementor-container > .elementor-column { width: calc(25% - 18px) !important; max-width: calc(25% - 18px) !important; flex: 0 0 auto !important; }
@media (max-width:900px){ .elementor-top-section:has(.ppv2-dir-item) > .elementor-container > .elementor-column{ width:calc(50% - 12px)!important; max-width:calc(50% - 12px)!important; } }
@media (max-width:520px){ .elementor-top-section:has(.ppv2-dir-item) > .elementor-container > .elementor-column{ width:calc(50% - 12px)!important; max-width:calc(50% - 12px)!important; } }

/* Icon Box circular */
.ppv2-dir-item .elementor-icon-box-wrapper { text-align: center; }
.ppv2-dir-item .elementor-icon {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; background: var(--teal-mist);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.ppv2-dir-item:hover .elementor-icon { transform: scale(1.06); box-shadow: var(--shadow-md); }
.ppv2-dir-item .elementor-icon i, .ppv2-dir-item .elementor-icon svg { font-size: 44px !important; color: var(--teal-deep) !important; }
.ppv2-dir-item .elementor-icon-box-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 18px !important; color: var(--ink) !important; margin: 0 0 4px !important; }
.ppv2-dir-item .elementor-icon-box-title a { color: var(--ink) !important; }
.ppv2-dir-item .elementor-icon-box-description { font-size: 13px !important; color: var(--ink-muted) !important; margin: 0 !important; }

/* Variantes de color por categoría */
.ppv2-dir-item-marigold .elementor-icon { background: rgba(255,209,102,.18); }
.ppv2-dir-item-marigold .elementor-icon i, .ppv2-dir-item-marigold .elementor-icon svg { color: var(--orange) !important; }
.ppv2-dir-item-coral .elementor-icon { background: rgba(232,93,117,.12); }
.ppv2-dir-item-coral .elementor-icon i, .ppv2-dir-item-coral .elementor-icon svg { color: var(--coral) !important; }

/* Botón "Explorar directorio" (outline suave) */
.ppv2-dir-cta { text-align: center !important; }
.ppv2-dir-cta .elementor-button { background: var(--teal-mist) !important; color: var(--teal-deep) !important; font-family: var(--font-sans) !important; font-weight: 800 !important; border-radius: var(--r-pill) !important; padding: 12px 28px !important; box-shadow: none !important; border: none !important; }
.ppv2-dir-cta .elementor-button:hover { background: var(--teal-soft) !important; transform: none !important; }

/* --- Testimonios (Voces del Parche) — widgets nativos --- */
.elementor-top-section:has(.ppv2-tst-head),
.elementor-top-section:has(.ppv2-tst-avatar) { background: var(--teal-mist) !important; }

/* Grilla 3 -> 1 */
.elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container { flex-wrap: wrap !important; justify-content: center !important; gap: 28px !important; }
.elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container > .elementor-column {
  width: calc(33.333% - 19px) !important; max-width: calc(33.333% - 19px) !important; flex: 0 0 auto !important;
}
@media (max-width:900px){ .elementor-top-section:has(.ppv2-tst-avatar) > .elementor-container > .elementor-column{ width:100%!important; max-width:100%!important; } }

/* Tarjeta de testimonio */
.elementor-column:has(> .elementor-element-populated > .ppv2-tst-avatar) > .elementor-element-populated,
.elementor-column:has(> .elementor-widget-wrap > .ppv2-tst-avatar) > .elementor-widget-wrap {
  background: var(--paper) !important; border: 1px solid var(--teal-soft) !important; border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important; padding: 32px 28px !important; text-align: center !important;
  align-items: center !important;
}
.elementor-column:has(.ppv2-tst-avatar):hover > .elementor-element-populated,
.elementor-column:has(.ppv2-tst-avatar):hover > .elementor-widget-wrap { box-shadow: var(--shadow-md) !important; }
.ppv2-tst-avatar { width: 80px !important; margin: 0 auto 18px !important; }
.ppv2-tst-avatar img { width: 80px !important; height: 80px !important; border-radius: 50% !important; object-fit: cover !important; border: 4px solid var(--teal-soft) !important; }
.ppv2-tst-quote, .ppv2-tst-quote .elementor-widget-container { font-style: italic; color: var(--ink-muted) !important; font-size: 15px !important; line-height: 1.7 !important; }
.ppv2-tst-quote { margin-bottom: 18px !important; }
.ppv2-tst-name .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 16px !important; text-transform: uppercase; color: var(--ink) !important; }
.ppv2-tst-role .elementor-heading-title { color: var(--teal-deep) !important; font-weight: 700 !important; font-size: 13px !important; }

/* --- Sé parte del Parche (bloque oscuro) — widgets nativos --- */
.elementor-top-section:has(.ppv2-join-h2),
.elementor-top-section:has(.ppv2-join-title),
.elementor-top-section:has(.ppv2-join-title-biz) { background: var(--ink) !important; }
.ppv2-join-h2 .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(28px, 3.4vw, 46px) !important; color: var(--paper) !important; text-align: center !important; }
.ppv2-join-sub, .ppv2-join-sub .elementor-widget-container { text-align: center !important; color: rgba(255,255,255,.6) !important; font-size: 18px !important; }

.elementor-top-section:has(.ppv2-join-title) > .elementor-container,
.elementor-top-section:has(.ppv2-join-title-biz) > .elementor-container { flex-wrap: wrap !important; justify-content: center !important; gap: 28px !important; }
.elementor-top-section:has(.ppv2-join-title) > .elementor-container > .elementor-column { width: calc(50% - 14px) !important; max-width: calc(50% - 14px) !important; flex: 0 0 auto !important; }
@media (max-width:820px){ .elementor-top-section:has(.ppv2-join-title) > .elementor-container > .elementor-column{ width:100%!important; max-width:100%!important; } }

.elementor-column:has(.ppv2-join-title) > .elementor-element-populated,
.elementor-column:has(.ppv2-join-title-biz) > .elementor-element-populated,
.elementor-column:has(.ppv2-join-title) > .elementor-widget-wrap,
.elementor-column:has(.ppv2-join-title-biz) > .elementor-widget-wrap {
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: var(--r-2xl) !important; padding: 40px !important;
}
.elementor-column:has(.ppv2-join-title) > .elementor-element-populated { background: rgba(121,200,208,.12) !important; }
.elementor-column:has(.ppv2-join-title-biz) > .elementor-element-populated { background: rgba(255,209,102,.10) !important; }
.ppv2-join-title .elementor-heading-title, .ppv2-join-title-biz .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 28px !important; color: var(--paper) !important; }
.ppv2-join-desc, .ppv2-join-desc .elementor-widget-container { color: rgba(255,255,255,.7) !important; font-size: 16px !important; line-height: 1.6 !important; }
.ppv2-join-btn .elementor-button { background: var(--teal-parche) !important; color: var(--paper) !important; font-weight: 800 !important; border-radius: var(--r-pill) !important; padding: 14px 28px !important; box-shadow: none !important; border: none !important; }
.ppv2-join-btn .elementor-button:hover { background: var(--teal-deep) !important; transform: none !important; }
.ppv2-join-btn-biz .elementor-button { background: var(--marigold) !important; color: var(--ink) !important; font-weight: 800 !important; border-radius: var(--r-pill) !important; padding: 14px 28px !important; box-shadow: none !important; border: none !important; }
.ppv2-join-btn-biz .elementor-button:hover { background: var(--orange) !important; transform: none !important; }

/* --- Nuestro #PropósitoPeludo (impacto social) — widgets nativos --- */
.elementor-top-section:has(.ppv2-pp-eyebrow),
.elementor-top-section:has(.ppv2-pp-img) { background: #FFFBF5 !important; }
.ppv2-pp-eyebrow { text-align: center !important; }
.ppv2-pp-eyebrow .elementor-heading-title { display: inline-block; background: rgba(190,227,231,.35); color: var(--teal-ink) !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .15em; padding: 6px 16px; border-radius: var(--r-pill); }
.ppv2-pp-h2 .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(30px, 3.6vw, 52px) !important; color: var(--ink) !important; text-align: center !important; }
.ppv2-pp-accent { color: var(--teal-deep) !important; }
.ppv2-pp-lead, .ppv2-pp-lead .elementor-widget-container { text-align: center !important; color: var(--ink-muted) !important; font-size: 18px !important; line-height: 1.7 !important; max-width: 760px; margin: 0 auto !important; }

.elementor-top-section:has(.ppv2-pp-img) > .elementor-container { flex-wrap: wrap !important; justify-content: center !important; gap: 28px !important; }
.elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column { width: calc(33.333% - 19px) !important; max-width: calc(33.333% - 19px) !important; flex: 0 0 auto !important; }
@media (max-width:900px){ .elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column{ width:100%!important; max-width:100%!important; } }

.elementor-column:has(.ppv2-pp-img) > .elementor-element-populated,
.elementor-column:has(.ppv2-pp-img) > .elementor-widget-wrap {
  background: var(--paper) !important; border-radius: var(--r-2xl) !important; box-shadow: var(--shadow-lg) !important; padding: 20px !important; text-align: center !important; align-items: center !important;
}
.ppv2-pp-img { margin: 0 !important; width: 100% !important; }
.ppv2-pp-img img { width: 100% !important; aspect-ratio: 4/5 !important; object-fit: cover !important; border-radius: var(--r-xl) !important; display: block !important; }
.ppv2-pp-bubble { margin-top: -36px !important; z-index: 2 !important; position: relative; width: auto !important; }
.ppv2-pp-bubble .elementor-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
/* Color por defecto del icono (1ª tarjeta = Alimentación = teal-parche) */
.ppv2-pp-bubble .elementor-icon i, .ppv2-pp-bubble .elementor-icon svg { font-size: 28px !important; color: var(--teal-parche) !important; }
/* Variantes de color por causa (orden visual del prototipo):
   - Columna 1 (Alimentación) → teal-parche (heredado de la regla anterior)
   - Columna 2 (Salud)        → coral
   - Columna 3 (Hogar)        → marigold
   Se selecciona por posición de columna dentro del top-section que contiene la imagen .ppv2-pp-img. */
.elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column:nth-child(2) .ppv2-pp-bubble .elementor-icon i,
.elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column:nth-child(2) .ppv2-pp-bubble .elementor-icon svg {
  color: var(--coral) !important;
}
.elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column:nth-child(3) .ppv2-pp-bubble .elementor-icon i,
.elementor-top-section:has(.ppv2-pp-img) > .elementor-container > .elementor-column:nth-child(3) .ppv2-pp-bubble .elementor-icon svg {
  color: var(--marigold) !important;
}
.ppv2-pp-title { padding-top: 16px !important; margin: 0 !important; }
.ppv2-pp-title .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 24px !important; color: var(--ink) !important; }
.ppv2-pp-desc, .ppv2-pp-desc .elementor-widget-container { color: var(--ink-muted) !important; font-size: 14px !important; line-height: 1.6 !important; padding: 0 8px; }

/* --- FAQ (componente nativo Listeo FAQ) — toque de marca --- */
.ppv2-faq .faq-container { max-width: 800px; margin: 0 auto; }
.ppv2-faq .faq-title { font-family: var(--font-display) !important; font-weight: 800 !important; color: var(--ink) !important; font-size: clamp(26px, 3vw, 40px) !important; margin-bottom: 32px !important; }
.ppv2-faq .faq-question { font-family: var(--font-sans) !important; font-weight: 700 !important; color: var(--ink) !important; }
.ppv2-faq .faq-question:hover { color: var(--teal-deep) !important; }
.ppv2-faq .faq-answer-content { font-family: var(--font-sans) !important; color: var(--ink-muted) !important; line-height: 1.6 !important; }
.ppv2-faq .faq-icon::before, .ppv2-faq .faq-icon::after { background-color: var(--teal-deep) !important; }
.ppv2-faq .faq-item.active .faq-icon::before, .ppv2-faq .faq-item.active .faq-icon::after { background-color: var(--teal-parche) !important; }

/* --- Tienda (shortcode nativo de WooCommerce [products]) — estilo de marca --- */
.ppv2-shop-products ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 18px !important;
  margin: 0 !important; padding: 0 0 12px 0 !important; list-style: none !important;
  -webkit-overflow-scrolling: touch;
}
.ppv2-shop-products ul.products::-webkit-scrollbar { height: 8px; }
.ppv2-shop-products ul.products::-webkit-scrollbar-thumb { background: var(--teal-soft); border-radius: 999px; }
.ppv2-shop-products ul.products::-webkit-scrollbar-track { background: transparent; }
.ppv2-shop-products ul.products::before, .ppv2-shop-products ul.products::after { content: none !important; display: none !important; }
.ppv2-shop-products ul.products li.product {
  flex: 0 0 210px !important; min-width: 210px !important; max-width: 210px !important; scroll-snap-align: start !important;
  width: 210px !important; margin: 0 !important; float: none !important; clear: none !important;
  background: var(--paper) !important; border: 1px solid var(--ink-line-2) !important; border-radius: var(--r-xl) !important;
  padding: 14px !important; box-shadow: var(--shadow-sm) !important; text-align: center !important;
  position: relative !important;
  display: flex !important; flex-direction: column !important;
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft) !important;
}
.ppv2-shop-products ul.products li.product:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
/* Filtro de la Tienda: ocultar productos que no son de la categoría activa.
   Mayor especificidad + !important para vencer al display:flex !important de arriba. */
.ppv2-shop-products ul.products li.product.ppv2-hidden { display: none !important; }

/* Estructura real de la tarjeta WooCommerce de Listeo */
.ppv2-shop-products li.product .mediaholder {
  width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important;
  border-radius: var(--r-lg) !important; margin: 0 0 12px 0 !important; position: relative !important; background: var(--bone);
}
.ppv2-shop-products li.product .mediaholder > a { display: block !important; width: 100% !important; height: 100% !important; }
.ppv2-shop-products li.product .mediaholder img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ppv2-shop-products li.product section { padding: 0 !important; margin: 0 !important; text-align: center !important; flex: 1 0 auto !important; }
.ppv2-shop-products li.product .product-category {
  display: inline-block; background: rgba(190,227,231,.35); color: var(--teal-ink) !important;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 9px; border-radius: var(--r-pill); margin: 0 0 6px 0;
}
.ppv2-shop-products li.product h5 { margin: 0 !important; padding: 0 !important; }
.ppv2-shop-products li.product h5 a { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 15px !important; color: var(--ink) !important; }
.ppv2-shop-products li.product .price, .ppv2-shop-products li.product .amount { color: var(--teal-deep) !important; font-weight: 800 !important; font-size: 16px !important; }
/* Etiqueta de categoría dentro del cuerpo (sobre el nombre), como el prototipo */
.ppv2-shop-products .ppv2-prod-cat {
  display: inline-block;
  background: rgba(190,227,231,.35); color: var(--teal-ink);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 9px; border-radius: var(--r-pill);
  margin: 0 0 6px 0;
}
.ppv2-shop-products ul.products li.product img { border-radius: var(--r-lg) !important; margin: 0 0 10px 0 !important; aspect-ratio: 1/1 !important; object-fit: cover !important; width: 100% !important; }
.ppv2-shop-products ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 15px !important; color: var(--ink) !important; padding: 0 0 4px 0 !important; }
.ppv2-shop-products ul.products li.product .price { color: var(--teal-deep) !important; font-weight: 800 !important; font-size: 16px !important; }
.ppv2-shop-products ul.products li.product .price del { color: var(--ink-faint) !important; font-weight: 400 !important; }
.ppv2-shop-products ul.products li.product .button, .ppv2-shop-products ul.products li.product .added_to_cart {
  display: block !important; width: 100% !important; text-align: center !important; margin: 12px 0 0 0 !important;
  opacity: 1 !important; visibility: visible !important; position: static !important; transform: none !important; pointer-events: auto !important;
  background: var(--teal-parche) !important; color: var(--paper) !important;
  border-radius: var(--r-md) !important; font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 13px !important; padding: 10px 16px !important;
}
.ppv2-shop-products ul.products li.product .button:hover, .ppv2-shop-products ul.products li.product .added_to_cart:hover { background: var(--teal-deep) !important; }

/* Tienda en móvil: carrusel horizontal deslizable (prefijo para ganar especificidad) */
@media (max-width: 767px) {
  .ppv2-home-page .ppv2-shop-products ul.products {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; gap: 14px !important; padding-bottom: 10px !important; -webkit-overflow-scrolling: touch;
  }
  .ppv2-home-page .ppv2-shop-products ul.products > li.product { min-width: 72% !important; max-width: 72% !important; flex: 0 0 72% !important; scroll-snap-align: center !important; }
  .ppv2-shop-products ul.products::-webkit-scrollbar { display: none; }
}

/* --- Tienda: visibilidad responsive del CTA y filtros (según prototipos) --- */
/* Desktop: botón en la columna de texto; filtros visibles */
@media (min-width: 768px) {
  .ppv2-shop-cta-mobile { display: none !important; }
}
/* Móvil: botón debajo del carrusel (a todo el ancho) y sin filtros (como el prototipo) */
@media (max-width: 767px) {
  .ppv2-shop-cta-desktop { display: none !important; }
  .elementor-inner-section:has(.ppv2-shop-filter) { display: none !important; }
  .ppv2-shop-cta-mobile { text-align: center !important; }
  .ppv2-shop-cta-mobile .elementor-button { width: 100% !important; justify-content: center !important; }
}

/* --- Trío de confianza (Profesionalismo / Confianza / Propósito Social) --- */
.elementor-top-section:has(.ppv2-trust-item) { background: var(--bone) !important; }
.elementor-top-section:has(.ppv2-trust-item) > .elementor-container { flex-wrap: wrap !important; justify-content: center !important; gap: 40px !important; }
.elementor-top-section:has(.ppv2-trust-item) > .elementor-container > .elementor-column { width: calc(33.333% - 28px) !important; max-width: calc(33.333% - 28px) !important; flex: 0 0 auto !important; }
@media (max-width: 767px) {
  .elementor-top-section:has(.ppv2-trust-item) > .elementor-container > .elementor-column { width: 100% !important; max-width: 100% !important; }
}
.ppv2-trust-item .elementor-icon-box-wrapper { text-align: center !important; }
.ppv2-trust-item .elementor-icon {
  width: 64px !important; height: 64px !important; border-radius: var(--r-lg) !important;
  background: var(--paper) !important; box-shadow: var(--shadow-sm) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 16px !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}
.ppv2-trust-item .elementor-icon i, .ppv2-trust-item .elementor-icon svg { font-size: 28px !important; color: var(--teal-deep) !important; }
.ppv2-trust-item .elementor-icon-box-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 20px !important; color: var(--ink) !important; margin: 0 0 8px !important; }
.ppv2-trust-item .elementor-icon-box-description { color: var(--ink-muted) !important; font-size: 15px !important; line-height: 1.6 !important; margin: 0 !important; }
/* Hover micro-interacción: al pasar el cursor por la tarjeta del trío, el ícono
   se eleva -2px, cambia su fondo a teal-mist y gana sombra media. */
.ppv2-trust-item:hover .elementor-icon,
.ppv2-trust-item .elementor-icon-box-wrapper:hover .elementor-icon {
  transform: translateY(-2px) !important;
  background: var(--teal-mist) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ==========================================================================
   AJUSTES TABLETA — Home V2 (768–1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero apilado como en móvil: el slider baja debajo del texto.
     En tableta Elementor mantiene las 2 columnas lado a lado; aquí las
     llevamos a ancho completo para que se apilen (texto arriba, slider abajo). */
  .ppv2-hero,
  .elementor-top-section:has(.ppv2-hero-title) {
    min-height: 0 !important;
    display: block !important;
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  .elementor-top-section:has(.ppv2-hero-title) > .elementor-container > .elementor-column {
    width: 100% !important;
  }
  /* Aire entre el texto y el slider apilado */
  .elementor-column:has(.ppv2-hero-slider) { margin-top: 24px !important; }
}

/* ==========================================================================
   AJUSTES MÓVIL — Home V2 (≤767px). Solo visualización, sin nuevos componentes.
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero: flujo normal (no forzar alto de pantalla) y apilar texto + slider */
  .ppv2-hero,
  .elementor-top-section:has(.ppv2-hero-title) {
    min-height: 0 !important;
    display: block !important;
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
  .ppv2-hero-title .elementor-heading-title { font-size: clamp(28px, 8vw, 38px) !important; }
  .ppv2-hero-slider .swiper-slide img { height: clamp(220px, 56vw, 320px) !important; }
  .ppv2-socialproof { justify-content: flex-start; flex-wrap: wrap; }

  /* Encabezados de bloque: menos padding superior */
  .elementor-top-section:has(.ppv2-h2),
  .elementor-top-section:has(.ppv2-join-h2),
  .elementor-top-section:has(.ppv2-pp-eyebrow) { padding-top: 48px !important; }

  /* Finales de bloque (tarjetas/CTA): menos padding inferior */
  .elementor-top-section:has(.ppv2-sc-img),
  .elementor-top-section:has(.ppv2-dir-cta),
  .elementor-top-section:has(.ppv2-tst-avatar),
  .elementor-top-section:has(.ppv2-join-title),
  .elementor-top-section:has(.ppv2-pp-img) { padding-bottom: 48px !important; }

  /* Tarjeta de servicio: el pie (precio + botón) puede envolver si no cabe */
  .elementor-inner-section:has(.ppv2-sc-cta) > .elementor-container { flex-wrap: wrap !important; gap: 8px !important; }

  /* Sé parte del Parche: padding interno de tarjetas más compacto */
  .elementor-column:has(.ppv2-join-title) > .elementor-element-populated,
  .elementor-column:has(.ppv2-join-title-biz) > .elementor-element-populated,
  .elementor-column:has(.ppv2-join-title) > .elementor-widget-wrap,
  .elementor-column:has(.ppv2-join-title-biz) > .elementor-widget-wrap { padding: 28px !important; }

  /* Evitar desbordes horizontales por imágenes/elementos */
  .ppv2-hero-slider, .ppv2-sc-img, .ppv2-pp-img { max-width: 100% !important; }
}

/* ==========================================================================
   REDISEÑO LISTADO INDIVIDUAL (single-listing) — FASE 0: base + color de marca
   Reestiliza SOLO las páginas de detalle de listado (body.single-listing),
   sobre los componentes que Listeo ya genera. No crea componentes nuevos ni
   altera funcionalidad/administración. Se conservan en verde los indicadores
   semánticos (punto "en línea" del chat, mensajes de éxito/cupón) y el botón
   de WhatsApp (color propio del canal).
   ========================================================================== */

/* Sello "Listado verificado": verde de Listeo → teal de marca (teal-deep para
   que el texto blanco mantenga buen contraste). */
.single-listing .verified-badge {
  background: var(--teal-deep) !important;
}

/* Badges de precio "Empieza desde…" (titlebar y widget de reserva) */
.single-listing .listing-pricing-tag,
.single-listing .booking-pricing-tag {
  background: var(--teal-mist) !important;
  color: var(--teal-ink) !important;
  border-color: var(--teal-soft) !important;
}

/* Icono de etiqueta dentro de los badges de precio */
.single-listing .listing-pricing-tag i.fa-tag,
.single-listing .booking-pricing-tag i.fa-tag,
.single-listing .listing-pricing-tag .fa-tag,
.single-listing .booking-pricing-tag .fa-tag {
  background: var(--teal-parche) !important;
  color: var(--paper) !important;
}

/* Etiqueta destacada (nav-tag) */
.single-listing .nav-tag {
  background: var(--teal-parche) !important;
}

/* ==========================================================================
   FASE 1: Cabecera del listado (titlebar) — reestiliza los elementos que ya
   genera Listeo: caja de logo, pills de categoría, título, dirección y reseñas.
   No se tocan las estrellas (la calificación depende de su color base).
   ========================================================================== */

/* Caja del logo: redondeada con borde sutil */
.single-listing #titlebar .listing-logo {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--ink-line-2) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 8px !important;
}

/* Fila de etiquetas: alineación y separación consistentes */
.single-listing #titlebar .listing-titlebar-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

/* Pills de categoría/ubicación → teal de marca */
.single-listing #titlebar .listing-titlebar-tags .listing-tag {
  background: var(--teal-mist) !important;
  border: 1px solid var(--teal-soft) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 14px !important;
  margin: 0 !important;
}
.single-listing #titlebar .listing-titlebar-tags .listing-tag a {
  color: var(--teal-ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.single-listing #titlebar .listing-titlebar-tags .listing-tag a:hover {
  color: var(--teal-deep) !important;
  text-decoration: none !important;
}

/* Título grande y con peso de marca (hoy Ubuntu 400/28px → 800 y mayor) */
.single-listing #titlebar h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 6px 0 8px 0 !important;
}

/* Dirección: texto suave + pin teal */
.single-listing #titlebar .listing-address {
  color: var(--ink-muted) !important;
  font-size: 15px !important;
}
.single-listing #titlebar .listing-address .fa-map-marker {
  color: var(--teal-deep) !important;
}

/* Contador de reseñas legible */
.single-listing #titlebar .rating-counter a {
  color: var(--ink-muted) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   FASES 3–8: Secciones del listado (galería, características, precios, FAQ,
   opiniones, ubicación y sidebar de reserva). Reestiliza SOLO componentes que
   Listeo ya genera, acotado a .single-listing. Sin componentes nuevos ni
   cambios de funcionalidad. (No se toca la barra de navegación de contenidos.)
   ========================================================================== */

/* Títulos de sección (Características, Precios, FAQ, …) */
.single-listing .listing-desc-headline {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  letter-spacing: -0.01em !important;
}

/* Texto de descripción del listado */
.single-listing #listing-overview > p {
  color: var(--ink-muted) !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
}

/* --- FASE 3: Galería bento nativa de Listeo, reorganizada 75/25 (prototipo) --- */
.single-listing #single-listing-grid-gallery {
  display: grid !important;
  grid-template-columns: 3fr 1fr !important;
  gap: 16px !important;
  height: 500px !important;
}
.single-listing #single-listing-grid-gallery .slg-half {
  width: auto !important;
  height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  float: none !important;
  min-width: 0 !important;
}
.single-listing #single-listing-grid-gallery .slg-half img,
.single-listing #single-listing-grid-gallery a.slg-gallery-img {
  border-radius: 24px !important;
  display: block !important;
}
.single-listing #single-listing-grid-gallery .slg-half:first-of-type a.slg-gallery-img,
.single-listing #single-listing-grid-gallery .slg-half:first-of-type img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
/* Columna derecha: 2 imágenes apiladas verticalmente */
.single-listing #single-listing-grid-gallery .slg-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important; height: 100% !important;
}
.single-listing #single-listing-grid-gallery .slg-grid-top,
.single-listing #single-listing-grid-gallery .slg-grid-bottom {
  display: block !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.single-listing #single-listing-grid-gallery .slg-grid-top a.slg-gallery-img,
.single-listing #single-listing-grid-gallery .slg-grid-bottom a.slg-gallery-img,
.single-listing #single-listing-grid-gallery .slg-grid-top img,
.single-listing #single-listing-grid-gallery .slg-grid-bottom img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
/* slg-grid-top tiene 2 .slg-grid-inner en Listeo: dejar solo la primera */
.single-listing #single-listing-grid-gallery .slg-grid-top > .slg-grid-inner:nth-of-type(n+2) {
  display: none !important;
}
.single-listing #single-listing-grid-gallery .slg-grid-inner {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important; padding: 0 !important;
}
.single-listing #single-listing-grid-gallery .slg-grid-inner img,
.single-listing #single-listing-grid-gallery .slg-grid-inner a.slg-gallery-img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  border-radius: 24px !important;
  display: block !important;
}
/* Botón del carrusel viejo: ocultar si todavía aparece */
.single-listing #single-listing-grid-gallery .slg-button { display: none !important; }

/* Overlay "+N fotos" sobre la última imagen visible del bento
   (decorativo: deja pasar el clic al enlace de la imagen para que abra el lightbox) */
.single-listing #single-listing-grid-gallery .slg-grid-bottom .slg-grid-inner { position: relative !important; }
.single-listing #single-listing-grid-gallery .ppv2-more-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(30, 46, 51, 0.55) !important;
  border-radius: 24px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  transition: background var(--dur-base, .22s) ease !important;
}
/* Efecto hover en el contenedor padre (el clic pasa al enlace que abre el popup) */
.single-listing #single-listing-grid-gallery .slg-grid-bottom .slg-grid-inner:hover .ppv2-more-overlay {
  background: rgba(30, 46, 51, 0.7) !important;
}
.single-listing #single-listing-grid-gallery .ppv2-more-overlay span {
  color: var(--paper) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* --- FASE 4: Características (features → tarjetas) --- */
.single-listing ul.listing-features.checkboxes {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}
.single-listing ul.listing-features.checkboxes li.feature-has-icon {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--teal-mist) !important;
  border: 1px solid var(--teal-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  width: auto !important;
}
.single-listing ul.listing-features li.feature-has-icon .feature-svg-icon svg { width: 24px !important; height: 24px !important; }
.single-listing ul.listing-features li.feature-has-icon .feature-svg-icon svg path { fill: var(--teal-deep) !important; }
.single-listing ul.listing-features li.feature-has-icon a,
.single-listing ul.listing-features li.feature-has-icon { color: var(--ink) !important; font-weight: 700 !important; font-size: 14px !important; }

/* --- FASE 5: Precios (grupos + ítems → tarjetas) --- */
.single-listing #listing-pricing-list .pricing-list-container h4 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--teal-ink) !important;
  font-size: 16px !important;
  margin: 22px 0 12px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--teal-mist) !important;
}
.single-listing #listing-pricing-list .pricing-list-container ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.single-listing #listing-pricing-list .pricing-list-container ul li {
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 18px !important;
  margin: 0 0 10px 0 !important;
  transition: box-shadow var(--dur-base) var(--ease-soft) !important;
}
.single-listing #listing-pricing-list .pricing-list-container ul li:hover { box-shadow: var(--shadow-md) !important; }
.single-listing #listing-pricing-list .pricing-menu-details h5 {
  font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--ink) !important; font-size: 15px !important; margin: 0 0 4px 0 !important;
}
.single-listing #listing-pricing-list .pricing-menu-price { color: var(--teal-deep) !important; font-weight: 800 !important; }

/* --- FASE 6: FAQ (acordeón jQuery UI) — radius 24px estilo prototipo --- */
/* Quitar el rectángulo exterior heredado de jQuery UI (.ui-accordion) */
.single-listing #listing-faq .fp-accordion,
.single-listing #listing-faq .fp-accordion .ui-accordion {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.single-listing #listing-faq .fp-accordion .ui-accordion-header {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: 24px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.single-listing #listing-faq .fp-accordion .ui-accordion-header.ui-state-active {
  background: var(--teal-mist) !important;
  border-color: var(--teal-soft) !important;
  color: var(--teal-ink) !important;
}
.single-listing #listing-faq .fp-accordion .ui-accordion-header .fa-angle-down {
  transition: transform var(--dur-base) var(--ease-soft) !important;
  color: var(--teal-deep) !important;
}
.single-listing #listing-faq .fp-accordion .ui-accordion-header.ui-state-active .fa-angle-down { transform: rotate(180deg) !important; }
.single-listing #listing-faq .fp-accordion .ui-accordion-content {
  border: 0 !important;
  border-radius: 0 !important;
  margin: -4px 0 12px 0 !important;
  padding: 12px 20px 16px 20px !important;
  color: var(--ink-muted) !important;
  background: transparent !important;
}

/* "Añadir opinión": colapsado por defecto. Muestra solo un botón; al hacer
   clic se expande el formulario. */
.single-listing #add-review .listing-desc-headline,
.single-listing #add-review .comment-respond { display: none !important; }
.single-listing #add-review.is-open .listing-desc-headline,
.single-listing #add-review.is-open .comment-respond { display: block !important; }
/* Botón siempre visible — al abrir cambia a "× Cerrar"; al cerrar vuelve a "+ Añadir Opinión" */
.single-listing #add-review.is-open .ppv2-add-review-btn { margin-bottom: 16px !important; }

.single-listing .ppv2-add-review-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 12px 24px !important;
  background: transparent !important;
  color: var(--teal-ink) !important;
  border: 2px solid var(--teal-parche) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background var(--dur-base, .22s) ease !important;
}
.single-listing .ppv2-add-review-btn:hover { background: var(--teal-mist) !important; }
.single-listing .ppv2-add-review-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important; height: 20px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--teal-deep) !important;
  font-weight: 800 !important;
}
.single-listing #add-review { text-align: center !important; margin-top: 0 !important; }
.single-listing #add-review.is-open { text-align: left !important; position: relative !important; margin-top: 16px !important; }
/* Estado colapsado: mantener el recuadro gris del fondo (heredado de Listeo) pero
   pegarlo al contenedor de Opiniones de Google (sin gap entre ambos). */
.single-listing #add-review:not(.is-open) {
  padding: 24px 36px !important;
  margin-top: 0 !important;
  /* 46px = mismo gap que entre "Sobre {Nombre}" y "Preguntas frecuentes" */
  margin-bottom: 46px !important;
}

/* === Rediseño del formulario "Añadir opinión" (prototipo anadir_opinion.html) ===
   El form ya tiene los mismos campos en Listeo (Servicio, Calidad-Precio,
   Ubicación, Espacio, Agregar Fotos, Comentario, Enviar). Solo es restyle. */

/* Card wrapper del formulario expandido */
.single-listing #add-review.is-open .comment-respond {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 36px 40px !important;
  margin-top: 0 !important;
}

/* Botón "× Cerrar" flotante en la esquina superior derecha del card */
.single-listing #add-review.is-open .ppv2-add-review-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 5 !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  border-width: 2px !important;
  border-color: var(--teal-mist) !important;
  background: var(--paper) !important;
  margin: 0 !important;
}
.single-listing #add-review.is-open .ppv2-add-review-btn:hover {
  background: var(--teal-mist) !important;
  border-color: var(--teal-soft) !important;
}

/* Título "Añadir opinión" como h1 grande estilo prototipo */
.single-listing #add-review.is-open .listing-desc-headline {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 3.2vw, 40px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 0 12px 0 !important;
  padding-right: 110px !important; /* espacio para el botón Cerrar */
}

/* Subtítulo "Conectado como..." */
.single-listing #add-review .comment-respond .logged-in-as {
  font-size: 15px !important;
  color: var(--ink-muted) !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  line-height: 1.5 !important;
}
.single-listing #add-review .comment-respond .logged-in-as a {
  color: var(--teal-deep) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.single-listing #add-review .comment-respond .logged-in-as a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.single-listing #add-review .comment-respond .logged-in-as .required,
.single-listing #add-review .comment-respond .required { color: #E85D75 !important; }

/* Grid de criterios de calificación (2 columnas) */
.single-listing #add-review .sub-ratings-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin: 0 0 8px 0 !important;
  padding-bottom: 8px !important;
}
/* Cada criterio (Listeo usa .add-sub-rating con .sub-rating-title + .sub-rating-stars) */
.single-listing #add-review .sub-ratings-container > .add-sub-rating,
.single-listing #add-review .sub-ratings-container > * {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.single-listing #add-review .sub-rating-title {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  float: none !important;
}
/* El help icon "?" de Listeo (i.tip) */
.single-listing #add-review .sub-rating-title .tip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important; height: 16px !important;
  font-size: 11px !important;
  background: var(--ink-line-2) !important;
  color: var(--ink-faint) !important;
  border-radius: 50% !important;
  font-style: normal !important;
  cursor: help !important;
  margin: 0 !important;
}
.single-listing #add-review .sub-rating-title .tip::after { content: '?' !important; }
.single-listing #add-review .sub-ratings-container strong,
.single-listing #add-review .sub-ratings-container .rating-label {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Estrellas del rating (input rating de Listeo) — quitar el width:126px fijo */
.single-listing #add-review .sub-rating-stars,
.single-listing #add-review .leave-rating {
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.single-listing #add-review .leave-rating .clearfix,
.single-listing #add-review .sub-rating-stars .clearfix { display: none !important; }
.single-listing #add-review .star-cb-group,
.single-listing #add-review .star-rating-wrapper { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.single-listing #add-review .star-cb-group .star,
.single-listing #add-review .star,
.single-listing #add-review label[for*="star"] {
  color: var(--teal-mist) !important;
  font-size: 22px !important;
  cursor: pointer !important;
  transition: color 220ms ease !important;
}
.single-listing #add-review .star-cb-group .star.active,
.single-listing #add-review .star.active,
.single-listing #add-review .star-cb-group input:checked ~ .star {
  color: #FFD166 !important;
}

/* Botón "Agregar Fotos" — outline teal-parche pill (clase real de Listeo: .uploadButton-button) */
.single-listing #add-review .uploadButton-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 2px solid var(--teal-parche) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 20px !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  transition: all 220ms ease !important;
  margin: 0 !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
/* Contenedor padre del label (.uploadButton): sin margen extra heredado de Listeo */
.single-listing #add-review .uploadButton { margin: 0 !important; padding: 0 !important; }
.single-listing #add-review .uploadButton .uploadButton-input { margin: 0 !important; }
/* Ocultar el placeholder "no file chosen" cuando está vacío (Listeo reserva 42px) */
.single-listing #add-review .uploadButton .uploadButton-file-name:empty { display: none !important; }
.single-listing #add-review .uploadButton .uploadButton-file-name { min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.single-listing #add-review .uploadButton-button:hover {
  background: var(--teal-mist) !important;
  border-color: var(--teal-deep) !important;
}
.single-listing #add-review .uploadButton-button .icon-feather-image { color: var(--teal-ink) !important; }
.single-listing #add-review .uploadButton-button.ripple-effect::before { display: none !important; }

/* Comentario: label + textarea (sin border-top duplicado; ya lo da .sub-ratings-container) */
.single-listing #add-review .comment-form-comment {
  margin: 8px 0 12px 0 !important;
  padding-top: 8px !important;
  border-top: 0 !important;
}
.single-listing #add-review .comment-form-comment label {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.single-listing #add-review .comment-form-comment textarea {
  width: 100% !important;
  background: var(--teal-mist) !important;
  border: 1px solid var(--ink-line) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  height: 100px !important;
  min-height: 80px !important;
  resize: vertical !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
}
.single-listing #add-review .comment-form-comment textarea::placeholder { color: var(--ink-faint) !important; }
.single-listing #add-review .comment-form-comment textarea:focus {
  outline: none !important;
  border-color: var(--teal-parche) !important;
  box-shadow: 0 0 0 3px rgba(121,200,208,0.20) !important;
}

/* Botón "Enviar Reseña" — teal-parche pill, sombra suave (sin halo grande) */
.single-listing #add-review .form-submit input[type="submit"],
.single-listing #add-review .form-submit button[type="submit"] {
  background: var(--teal-parche) !important;
  color: var(--paper) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 28px !important;
  border-radius: var(--r-pill) !important;
  border: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: background 220ms ease, box-shadow 220ms ease, transform 80ms ease !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.single-listing #add-review .form-submit input[type="submit"]:hover,
.single-listing #add-review .form-submit button[type="submit"]:hover {
  background: var(--teal-deep) !important;
  box-shadow: var(--shadow-md) !important;
}
.single-listing #add-review .form-submit input[type="submit"]:active,
.single-listing #add-review .form-submit button[type="submit"]:active {
  transform: translateY(1px) !important;
}
.single-listing #add-review .form-submit { margin: 16px 0 0 0 !important; }

/* ==========================================================================
   FASE 7 — OPINIONES DE GOOGLE (maquetacion segun prototipos Stitch)
   Archivos de referencia:
     · Diseño/Stitch/resenas_google_compactada.html
     · Diseño/Stitch/resenas_google_vista_desplegada.html
   Tokens traducidos del prototipo:
     border-ink-line-2     → var(--ink-line-2)   (rgba(30,46,51,.06))
     rounded-2xl           → var(--r-lg) 20px    (visualmente equivalente)
     star-filled / marigold→ var(--marigold)     (#FFD166)
     hover translateY(-2px)→ transition cubic-bezier(.2,.8,.2,1) 0.22s
   ========================================================================== */

/* ---- Resumen Google (tarjeta superior: logo G + 4,6 + estrellas + chevron) ---- */
.single-listing #listing-google-reviews .google-reviews-summary {
  background: var(--bone) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative !important;
  transition: background-color 220ms ease, border-color 220ms ease !important;
}

/* Logo de Google: pequena caja blanca con sombra sutil dentro del resumen */
.single-listing #listing-google-reviews .google-reviews-summary > a,
.single-listing #listing-google-reviews .google-reviews-summary .google-reviews-logo {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.single-listing #listing-google-reviews .google-reviews-summary img[src*="google-reviews-logo"] {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

/* Cifra 4,6 grande + bloque tipografico de la calificacion */
.single-listing #listing-google-reviews .google-reviews-summary .google-reviews-summary-content,
.single-listing #listing-google-reviews .google-reviews-summary .google-reviews-rating-block {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.single-listing #listing-google-reviews .google-reviews-rating,
.single-listing #listing-google-reviews .google-reviews-summary strong {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}
.single-listing #listing-google-reviews .google-reviews-count,
.single-listing #listing-google-reviews .google-reviews-summary > p {
  color: var(--ink-muted) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin: 4px 0 0 0 !important;
}

/* ---- Comportamiento colapsable suave (acordeon) ---- */
.single-listing #listing-google-reviews.ppv2-collapsible .google-reviews-summary {
  cursor: pointer !important;
  user-select: none !important;
}
@media (hover: hover) {
  .single-listing #listing-google-reviews.ppv2-collapsible .google-reviews-summary:hover {
    background: var(--teal-mist) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
  }
}

/* Animacion suave del acordeon: max-height + opacidad con cubic-bezier
   replicando el comportamiento del prototipo compactado. */
.single-listing #listing-google-reviews .comments,
.single-listing #listing-google-reviews section.comments,
.single-listing #listing-google-reviews .google-reviews-read-more.bottom {
  max-height: 5000px !important;
  opacity: 1 !important;
  overflow: hidden !important;
  transition:
    max-height 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 300ms ease,
    margin 300ms ease,
    padding 300ms ease !important;
}
.single-listing #listing-google-reviews.is-collapsed .comments,
.single-listing #listing-google-reviews.is-collapsed section.comments,
.single-listing #listing-google-reviews.is-collapsed .google-reviews-read-more.bottom {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}
/* Cuando está colapsada, mantener un gap reducido con Añadir Opinión */
.single-listing #listing-google-reviews.is-collapsed .google-reviews-summary {
  margin-bottom: 0 !important;
}
.single-listing #listing-google-reviews.is-collapsed { margin-bottom: 32px !important; }
/* Placeholder de reseñas nativas (vacío en Naturalia): no debe ocupar espacio */
.single-listing #listing-reviews.listing-reviews-placeholder {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Sección "Añadir opinión" colapsada: sin padding/margin enormes */
.single-listing #add-review { padding-bottom: 0 !important; }
.single-listing #add-review:not(.is-open) { margin-bottom: 46px !important; }

/* Botón "Leer más opiniones / Cerrar opiniones" (pill texto + chevron)
   Replicando el prototipo: bg transparente, border ink/20, rounded-full,
   font-display bold, padding px-6 py-2.5, hover bg ink/5. */
.single-listing #listing-google-reviews .ppv2-google-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 22px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  background: transparent !important;
  border: 1px solid rgba(30, 46, 51, 0.20) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 220ms ease, border-color 220ms ease, transform 120ms ease !important;
  white-space: nowrap !important;
}
.single-listing #listing-google-reviews .ppv2-google-toggle:hover {
  background: rgba(30, 46, 51, 0.05) !important;
  border-color: rgba(30, 46, 51, 0.40) !important;
}
.single-listing #listing-google-reviews .ppv2-google-toggle:active {
  transform: translateY(-50%) translateY(1px) !important;
}
.single-listing #listing-google-reviews .ppv2-google-toggle-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ---- Lista de reseñas: stack vertical con ritmo de 16px ---- */
.single-listing #listing-google-reviews .comments,
.single-listing #listing-google-reviews section.comments {
  list-style: none !important;
  margin: 24px 0 0 0 !important;
  padding: 24px 0 0 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ---- Tarjeta de reseña individual (li) ---- */
/* Usamos CSS Grid + display:contents para tomar la estructura plana de Listeo
   (li > .avatar + .comment-content) y reorganizarla como en el prototipo:
   header (avatar + nombre/fecha + estrellas) arriba, parrafo abajo full-width. */
.single-listing #listing-google-reviews .comments li,
.single-listing #listing-reviews .comments li {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  margin: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "avatar header"
    "body   body" !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  align-items: start !important;
  cursor: default !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.22s ease !important;
}
/* Hover suave: la tarjeta sube 2px y la sombra se intensifica */
.single-listing #listing-google-reviews .comments li:hover,
.single-listing #listing-reviews .comments li:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(30, 46, 51, 0.10) !important;
}
/* Todas las tarjetas con fondo blanco (sin alternancia bone/50)
   — el usuario prefiere uniformidad visual sobre la variación del prototipo. */

/* Avatar: cuadrado 48x48 redondo, borde teal-soft (prototipo) */
.single-listing #listing-google-reviews .avatar,
.single-listing #listing-reviews .avatar {
  grid-area: avatar !important;
  position: static !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important; left: auto !important; right: auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid var(--teal-soft) !important;
  background: var(--paper) !important;
  flex: 0 0 auto !important;
}
.single-listing #listing-google-reviews .avatar img,
.single-listing #listing-reviews .avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* comment-content: hace display:contents para que sus hijos participen del grid del li */
.single-listing #listing-google-reviews .comments li > .comment-content,
.single-listing #listing-reviews .comments li > .comment-content {
  display: contents !important;
}
/* Quitar la flecha decorativa */
.single-listing #listing-google-reviews .arrow-comment,
.single-listing #listing-reviews .arrow-comment {
  display: none !important;
}

/* Header de la reseña: nombre + fecha izquierda, estrellas derecha
   Usamos grid interno con 2 columnas y 2 filas para apilar el nombre/fecha
   en la columna 1 y las estrellas spanneando ambas filas en la columna 2. */
.single-listing #listing-google-reviews .comments li .comment-by,
.single-listing #listing-reviews .comments li .comment-by {
  grid-area: header !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.single-listing #listing-google-reviews .comments li .comment-by h5,
.single-listing #listing-reviews .comments li .comment-by h5 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.single-listing #listing-google-reviews .comments li .comment-by .date,
.single-listing #listing-reviews .comments li .comment-by .date {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: var(--ink-faint) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.single-listing #listing-google-reviews .comments li .comment-by .star-rating,
.single-listing #listing-reviews .comments li .comment-by .star-rating {
  grid-column: 2 !important;
  grid-row: 1 / -1 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  /* Separación respecto al borde derecho de la tarjeta (visualmente más aire) */
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
}

/* Estrellas en color marigold del sistema de diseño (prototipo) */
.single-listing #listing-google-reviews .comments li .star::before,
.single-listing #listing-reviews .comments li .star::before {
  color: var(--marigold) !important;
  font-size: 18px !important;
}
.single-listing #listing-google-reviews .comments li .star,
.single-listing #listing-reviews .comments li .star {
  width: 18px !important;
  height: 18px !important;
  line-height: 1 !important;
}

/* Parrafo del review: full width, line-height suelto */
.single-listing #listing-google-reviews .comments li > .comment-content > p,
.single-listing #listing-google-reviews .comments li p.comment-text,
.single-listing #listing-reviews .comments li > .comment-content > p {
  grid-area: body !important;
  color: var(--ink-muted) !important;
  line-height: 1.625 !important;
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Si la reseña no incluye texto (el reviewer solo dio estrellas en Google),
   ocultamos el parrafo vacio y colapsamos el grid para que la tarjeta no
   muestre un area vacia debajo del header. Listeo a veces incluye whitespace
   asi que combinamos :empty con la regla ppv2-empty-p marcada por JS. */
.single-listing #listing-google-reviews .comments li > .comment-content > p:empty,
.single-listing #listing-google-reviews .comments li > .comment-content > p.ppv2-empty-p {
  display: none !important;
}
.single-listing #listing-google-reviews .comments li:has(> .comment-content > p.ppv2-empty-p),
.single-listing #listing-google-reviews .comments li:has(> .comment-content > p:empty) {
  /* Solo el header — sin row-gap fantasma y con padding vertical compacto */
  grid-template-areas: "avatar header" !important;
  grid-template-rows: auto !important;
  row-gap: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* ---- Botones inferiores (Leer mas + Añadir opinion en Google) ---- */
.single-listing #listing-google-reviews .google-reviews-read-more.bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
  padding-top: 8px !important;
  text-align: center !important;
}
.single-listing #listing-google-reviews .google-reviews-read-more.bottom > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 28px !important;
  background: var(--paper) !important;
  border: 2px solid var(--teal-parche) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background 220ms ease, transform 120ms ease, box-shadow 220ms ease !important;
}
.single-listing #listing-google-reviews .google-reviews-read-more.bottom > a:hover {
  background: var(--teal-mist) !important;
  box-shadow: var(--shadow-sm) !important;
}
.single-listing #listing-google-reviews .google-reviews-read-more.bottom > a:active {
  transform: translateY(1px) !important;
}
.single-listing #listing-google-reviews .google-reviews-read-more.bottom > a img {
  width: 18px !important;
  height: 18px !important;
}

/* --- Ubicación (mapa redondeado) --- */
.single-listing #listing-location #singleListingMap,
.single-listing #listing-location .listing-map,
.single-listing #listing-location .google-map-container {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

/* --- FASE 8: Sidebar — widgets como tarjetas + formulario de reserva --- */
.single-listing .listeo-single-listing-sidebar .listing-widget {
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 26px !important;
  margin-bottom: 24px !important;
}
.single-listing .listeo-single-listing-sidebar .widget-title {
  font-family: var(--font-display) !important; font-weight: 800 !important; color: var(--ink) !important;
}
.single-listing .listeo-single-listing-sidebar .widget-title i { color: var(--teal-deep) !important; }
/* Campos del formulario */
.single-listing .listeo-single-listing-sidebar .with-forms input,
.single-listing .listeo-single-listing-sidebar .with-forms select,
.single-listing .listeo-single-listing-sidebar input.input-text {
  border-radius: var(--r-md) !important;
  background: var(--teal-mist) !important;
  border: 1px solid var(--teal-soft) !important;
}
.single-listing .listeo-single-listing-sidebar .with-forms input:focus,
.single-listing .listeo-single-listing-sidebar .with-forms select:focus {
  border-color: var(--teal-parche) !important;
  box-shadow: 0 0 0 3px rgba(121,200,208,.25) !important;
}
/* Botón principal (reserva) → teal; el de cupón "Aplicar" queda secundario */
.single-listing .listeo-single-listing-sidebar .button:not(.listeo-booking-widget-apply_new_coupon),
.single-listing #form-booking button[type="submit"] {
  background: var(--teal-parche) !important;
  color: var(--paper) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.single-listing .listeo-single-listing-sidebar .button:not(.listeo-booking-widget-apply_new_coupon):hover,
.single-listing #form-booking button[type="submit"]:hover { background: var(--teal-deep) !important; }

/* ==========================================================================
   REFINAMIENTO DETALLE DE LISTADO — más aire, jerarquía y pulido para acercar
   al prototipo. Solo CSS sobre componentes existentes, en .single-listing.
   ========================================================================== */

/* Ritmo: más aire entre secciones de contenido */
.single-listing .listing-section { margin-bottom: 46px !important; }
.single-listing .listing-desc-headline {
  font-size: clamp(22px, 2.5vw, 28px) !important;
  margin-top: 0 !important; margin-bottom: 22px !important;
}

/* Cabecera: título mucho más grande/pesado para acercarse al prototipo
   (Ubuntu maxea en 700 — se compensa con tamaño + tracking ajustado) */
.single-listing #titlebar h1 {
  font-size: 40px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

/* Ocultar pills de categoría y el badge de precio "Empieza desde…" en la
   cabecera. El contenedor entero queda oculto (las pills no se muestran). */
.single-listing #titlebar .listing-titlebar-tags { display: none !important; }
.single-listing #titlebar .listing-pricing-tag { display: none !important; }
/* Ocultar <br> legacy de Listeo que mete espacio extra */
.single-listing #titlebar .listing-titlebar-title > br { display: none !important; }

/* Cabezote en columna, todo pegado a la izquierda (sin logo box lateral).
   Sin padding heredado de Listeo (70px top/55px bot) para que meta-top
   inicie al mismo nivel que la caja de Reserva del sidebar. */
.single-listing #titlebar {
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
}
/* Espacio superior antes de que ambas columnas inicien (aire al cargar la página) */
.single-listing .container.directorio { padding-top: 32px !important; }
.single-listing #titlebar .listing-titlebar-title {
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Fila "Prestado por [logo + nombre]" debajo del título */
.single-listing #titlebar .ppv2-prestado-por {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--ink-muted) !important;
}
.single-listing #titlebar .ppv2-prestado-por .ppv2-prestado-label { font-weight: 500 !important; }
.single-listing #titlebar .ppv2-prestado-por .ppv2-provider-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--bone) !important;
  padding: 3px 12px 3px 3px !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--ink-line-2) !important;
}
.single-listing #titlebar .ppv2-prestado-por .ppv2-provider-chip .listing-logo {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--paper) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.single-listing #titlebar .ppv2-prestado-por .ppv2-provider-chip .listing-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.single-listing #titlebar .ppv2-prestado-por .ppv2-provider-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
}

/* Botón de favorito flotando arriba-derecha de la columna de contenido */
.single-listing .listeo-single-listing-content { position: relative !important; }
.single-listing .listing-widget.widget_buttons {
  position: absolute !important;
  top: 8px !important;
  right: 14px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}
.single-listing .listing-widget.widget_buttons .listing-share {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Ocultar texto del botón ("Marca este listado") y el contador ("X persona…") */
.single-listing .like-button .bookmark-btn-title,
.single-listing #bookmarks-counter { display: none !important; }

/* Estilo del corazón: redondo, compacto, alineado al chip */
.single-listing .like-button.listeo_core-bookmark-it {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--paper) !important;
  border: 1px solid var(--ink-line-2) !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.single-listing .like-button .like-icon { color: #E85D75 !important; margin: 0 !important; }
.single-listing #titlebar .listing-titlebar-tags { margin-bottom: 14px !important; gap: 10px !important; }
.single-listing #titlebar .star-rating,
.single-listing #titlebar .rating-counter {
  background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important;
}
.single-listing #titlebar .listing-address { margin: 0 0 8px 0 !important; font-size: 14px !important; }

/* Características: listado simple a 2 columnas (icono + texto), estilo prototipo
   móvil "Sobre Parche Peludo" — sin tarjetas, sin fondo. */
.single-listing ul.listing-features.checkboxes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 240px)) !important;
  gap: 14px 25px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-listing ul.listing-features.checkboxes li.feature-has-icon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
}
.single-listing ul.listing-features li.feature-has-icon .feature-svg-icon {
  flex: 0 0 auto !important;
  line-height: 0 !important;
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
}
.single-listing ul.listing-features li.feature-has-icon .feature-svg-icon svg { width: 20px !important; height: 20px !important; }
.single-listing ul.listing-features li.feature-has-icon .feature-svg-icon svg path { fill: var(--teal-deep) !important; }
.single-listing ul.listing-features li.feature-has-icon a {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* Descripción del listado más legible y aireada */
.single-listing #listing-overview > p { font-size: 17px !important; line-height: 1.75 !important; }

/* Sidebar: más padding y presencia */
.single-listing .listeo-single-listing-sidebar .listing-widget { padding: 30px !important; margin-bottom: 26px !important; }
.single-listing .listeo-single-listing-sidebar .widget-title { font-size: 20px !important; margin-bottom: 20px !important; }
.single-listing .listeo-single-listing-sidebar .with-forms input,
.single-listing .listeo-single-listing-sidebar .with-forms select { padding: 13px 16px !important; font-size: 15px !important; }
.single-listing .listeo-single-listing-sidebar .button:not(.listeo-booking-widget-apply_new_coupon) { padding: 15px 20px !important; font-size: 16px !important; }

/* Cabecera: fila superior con sello verificado (chip) + calificación + corazón,
   movidos por JS desde el sidebar y desde debajo del título. Una sola fila. */
.single-listing #titlebar .ppv2-meta-top {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
}
/* Estrellas: se muestran las 5 con su nivel de relleno real (4.6 → 4 + media). */
/* Corazón dentro de meta-top: empujado a la derecha, alineado al chip.
   Resetea el width:300px que Listeo aplica a .listing-widget. */
.single-listing #titlebar .ppv2-meta-top .listing-widget.widget_buttons {
  position: static !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  top: auto !important; right: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.single-listing #titlebar .ppv2-meta-top .listing-share {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: auto !important;
}
.single-listing .ppv2-meta-top .star-rating {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  gap: 8px !important;
}
/* Mantener el orden visual natural de las estrellas (media a la derecha) y
   empujar el contador "4.6 (92 reseñas)" al final con order. */
.single-listing .ppv2-meta-top .star-rating .star { order: 0 !important; }
.single-listing .ppv2-meta-top .star-rating .rating-counter {
  order: 99 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Chip no debe encogerse ni partir su texto */
.single-listing .ppv2-meta-top .verified-badge {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
/* Sello verificado → chip pequeño (dimensiones exactas del prototipo) */
.single-listing .ppv2-meta-top .verified-badge {
  background: var(--teal-mist) !important;
  color: var(--teal-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border-radius: var(--r-pill) !important;
  border: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
  cursor: default !important;
  line-height: 1.4 !important;
}
.single-listing .ppv2-meta-top .verified-badge i {
  color: var(--teal-deep) !important;
  font-size: 14px !important;
  /* El glyph de Simple Line Icons tiene métrica asimétrica (la línea
     base deja el visual ~3px por debajo del centro de la caja). Forzamos
     line-height: 1 + display inline-flex con align-items center y un
     pequeño nudge vertical para centrar el visual con el texto del chip. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 14px !important;
  position: relative !important;
  top: -1px !important;
}

/* Tooltip del chip "Servicio Verificado" — texto completo, redondeado */
.single-listing .ppv2-meta-top .verified-badge.with-tip { position: relative !important; overflow: visible !important; }
.single-listing .ppv2-meta-top .verified-badge .tip-content {
  display: none;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: 10px 14px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  width: 260px !important;
  max-width: 260px !important;
  height: max-content !important;
  min-height: 0 !important;
  line-height: 1.45 !important;
  z-index: 100 !important;
  box-shadow: 0 12px 28px rgba(30,46,51,0.25) !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
/* Ocultar la flecha/triángulo de Listeo (no necesario en esta versión) */
.single-listing .ppv2-meta-top .verified-badge .tip-content::before,
.single-listing .ppv2-meta-top .verified-badge .tip-content::after { display: none !important; }
.single-listing .ppv2-meta-top .verified-badge.with-tip:hover .tip-content { display: block !important; }

/* Hover en el bloque de reseñas: subrayado para indicar cliqueable */
.single-listing .ppv2-meta-top .star-rating { cursor: pointer !important; }
.single-listing .ppv2-meta-top .star-rating:hover .rating-counter a {
  text-decoration: underline !important;
  text-decoration-color: var(--teal-deep) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

/* Fila de ubicación: pill ciudad + dirección, alineadas a la izquierda */
.single-listing #titlebar .ppv2-location-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 8px 0 !important;
}
.single-listing #titlebar .ppv2-location-row .listing-tag {
  background: var(--teal-mist) !important;
  border: 1px solid var(--teal-soft) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.single-listing #titlebar .ppv2-location-row .listing-tag a {
  color: var(--teal-ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.single-listing #titlebar .ppv2-location-row > span:has(a.listing-address) { margin: 0 !important; }
/* Calificación dentro de la fila superior: limpia e inline */
.single-listing .ppv2-meta-top .star-rating { background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }

/* ============================================================================
   Columna derecha (sidebar): widgets "Enviar mensaje" y "Horarios"
   Daban sensacion de "comprimidos": el boton submit era ilegible (texto
   blanco sobre fondo teal-mist) y las filas de horarios estaban muy juntas.
   Aqui aireamos los componentes y arreglamos contraste/jerarquia.
   ============================================================================ */

/* Separacion vertical mas generosa entre widgets de la sidebar (32px) */
.single-listing .listeo-single-listing-sidebar .listing-widget,
.single-listing .listeo-single-listing-sidebar .sidebar-widget {
  margin-bottom: 32px !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget:last-child,
.single-listing .listeo-single-listing-sidebar .sidebar-widget:last-child {
  margin-bottom: 0 !important;
}

/* Padding interno con mas aire (de 30px a 36px lateral / 32px vertical) */
.single-listing .listeo-single-listing-sidebar .listing-widget.boxed-widget {
  padding: 32px 36px !important;
}

/* Titulo de widget: jerarquia consistente y mas aire abajo */
.single-listing .listeo-single-listing-sidebar .listing-widget .widget-title {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--ink) !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget .widget-title i {
  color: var(--teal-parche) !important;
  font-size: 22px !important;
}

/* ---- Widget "Enviar mensaje" (Contact / wpcf7) ---- */
/* Boton submit: pill teal-parche legible, full width */
.single-listing #widget_contact_widget_listeo-3 .wpcf7-submit,
.single-listing .listing-widget.message-vendor .wpcf7-submit,
.single-listing .listeo-single-listing-sidebar .wpcf7-submit {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: auto !important;
  padding: 16px 24px !important;
  margin-top: 8px !important;
  background: var(--teal-parche) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  border: 2px solid var(--teal-parche) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 8px 22px rgba(121, 200, 208, 0.32) !important;
  transition: background 180ms ease, transform 120ms ease, box-shadow 180ms ease !important;
  cursor: pointer !important;
}
.single-listing #widget_contact_widget_listeo-3 .wpcf7-submit:hover,
.single-listing .listing-widget.message-vendor .wpcf7-submit:hover,
.single-listing .listeo-single-listing-sidebar .wpcf7-submit:hover {
  background: var(--teal-deep) !important;
  border-color: var(--teal-deep) !important;
  box-shadow: 0 12px 26px rgba(74, 165, 173, 0.36) !important;
}
.single-listing #widget_contact_widget_listeo-3 .wpcf7-submit:active,
.single-listing .listing-widget.message-vendor .wpcf7-submit:active,
.single-listing .listeo-single-listing-sidebar .wpcf7-submit:active {
  transform: translateY(1px) !important;
  box-shadow: 0 4px 10px rgba(74, 165, 173, 0.28) !important;
}

/* Inputs del formulario de mensaje: padding mas comodo y separacion entre campos */
.single-listing #widget_contact_widget_listeo-3 .wpcf7-form-control:not(.wpcf7-submit),
.single-listing .listing-widget.message-vendor input[type="text"],
.single-listing .listing-widget.message-vendor input[type="email"],
.single-listing .listing-widget.message-vendor input[type="tel"],
.single-listing .listing-widget.message-vendor textarea {
  background: var(--teal-mist) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}
.single-listing #widget_contact_widget_listeo-3 .wpcf7-form-control:not(.wpcf7-submit):focus,
.single-listing .listing-widget.message-vendor input:focus,
.single-listing .listing-widget.message-vendor textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--teal-parche) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(121, 200, 208, 0.18) !important;
}
.single-listing #widget_contact_widget_listeo-3 textarea,
.single-listing .listing-widget.message-vendor textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ---- Widget "Horarios" (Opening Hours) ---- */
/* Cada fila Lunes/Martes/... con mas aire vertical + separador sutil */
.single-listing #widget_opening_hours-2 ul,
.single-listing .listing-widget.opening-hours ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-listing #widget_opening_hours-2 ul li,
.single-listing .listing-widget.opening-hours ul li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--ink-line, rgba(30, 46, 51, 0.08)) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
}
.single-listing #widget_opening_hours-2 ul li:last-child,
.single-listing .listing-widget.opening-hours ul li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.single-listing #widget_opening_hours-2 ul li:first-child,
.single-listing .listing-widget.opening-hours ul li:first-child {
  padding-top: 0 !important;
}
.single-listing #widget_opening_hours-2 ul li span,
.single-listing .listing-widget.opening-hours ul li span {
  color: var(--ink-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
/* Dia actual destacado en teal */
.single-listing #widget_opening_hours-2 ul li.today,
.single-listing #widget_opening_hours-2 ul li.current-day,
.single-listing .listing-widget.opening-hours ul li.today,
.single-listing .listing-widget.opening-hours ul li.current-day {
  color: var(--teal-ink) !important;
  font-weight: 800 !important;
}
.single-listing #widget_opening_hours-2 ul li.today span,
.single-listing #widget_opening_hours-2 ul li.current-day span,
.single-listing .listing-widget.opening-hours ul li.today span,
.single-listing .listing-widget.opening-hours ul li.current-day span {
  color: var(--teal-ink) !important;
  font-weight: 800 !important;
}
/* Badge "Ahora Abierto" en la esquina */
.single-listing #widget_opening_hours-2 .listing-badge,
.single-listing .listing-widget.opening-hours .listing-badge {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* ============================================================================
   Widgets colapsables de la sidebar (Enviar mensaje + Horarios)
   - Por defecto cerrados: apariencia tipo "boton/pill" segun prototipo.
   - Click expande el cuerpo del widget.
   ============================================================================ */

/* Transicion suave de color/borde al alternar estados (sin animar padding:
   animarlo provoca que valores nuevos no se apliquen correctamente en este DOM) */
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible {
  transition: border-color 200ms ease, background 200ms ease !important;
}

/* Titulo (acordeon header): cursor, layout flex.
   Anular border-bottom y padding-bottom heredados de Listeo cuando esta colapsado. */
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible .widget-title {
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  transition: color 160ms ease !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible.is-collapsed .widget-title {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible:not(.is-collapsed) .widget-title {
  margin-bottom: 20px !important;
}

/* Chevron: rotacion + color al abrir */
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible .ppv2-widget-chevron {
  margin-left: auto !important;
  font-size: 18px !important;
  color: var(--ink-muted) !important;
  transition: transform 220ms ease, color 160ms ease !important;
  line-height: 1 !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible:not(.is-collapsed) .ppv2-widget-chevron {
  transform: rotate(180deg) !important;
  color: var(--teal-ink) !important;
}

/* COLAPSADO: ocultar el cuerpo del widget */
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible.is-collapsed > *:not(.widget-title) {
  display: none !important;
}

/* ============================================================================
   Estilo COLAPSADO segun prototipo (anadir_opinion / servicio_detalle):
   - Enviar Mensaje: outline 2px teal-parche, esquinas 14px, contenido CENTRADO
   - Ver horarios:   outline 1px ink/10,    esquinas 14px, icon-text + chevron
   ============================================================================ */

/* --- Reglas comunes para ambos botones colapsados (altura, alineacion) --- */
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible.is-collapsed .widget-title {
  /* Altura interna fija: 24px de contenido (icon 20x20 + texto 16/24 line-height) */
  min-height: 24px !important;
  line-height: 24px !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible.is-collapsed .widget-title i {
  /* Forzar el icono a renderizar su caja completa (Listeo a veces lo deja a line-height:0) */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  font-size: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.ppv2-collapsible.is-collapsed .ppv2-widget-title-text {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  /* Pequeno tweak vertical para compensar el descender de la fuente y centrar
     visualmente el texto con el icono cuadrado. El offset se ajusta por widget
     porque cada set de iconos (FontAwesome vs Simple Line Icons) tiene un
     baseline distinto dentro de su EM-box. */
  position: relative !important;
  top: 1px !important;
}
/* MSG (FontAwesome envelope): el icono renderiza ligeramente alto en su caja,
   asi que el texto debe subir 1px para coincidir con el centro del icono. */
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed .ppv2-widget-title-text {
  top: -1px !important;
}

/* --- Enviar Mensaje (colapsado) --- */
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed {
  background: var(--paper) !important;
  border: 2px solid var(--teal-parche) !important;
  border-radius: 14px !important;
  /* Padding vertical 16px = py-4 del prototipo. Altura total = 16+24+16+4(border)=60px */
  padding: 16px 22px !important;
  box-shadow: 0 1px 2px rgba(30, 46, 51, 0.04) !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed:hover {
  background: var(--teal-mist) !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed .widget-title {
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--teal-ink) !important;
  position: relative !important; /* contexto para el chevron absoluto */
}
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed .widget-title i {
  color: var(--teal-ink) !important;
}
/* Chevron del widget Enviar Mensaje en estado COLAPSADO:
   se ancla a la esquina derecha del pill sin romper el centrado del icono+texto.
   Esto comunica la affordance de "abrir" manteniendo la apariencia CTA del prototipo. */
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed .ppv2-widget-chevron {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  color: var(--teal-ink) !important;
  font-size: 16px !important;
}
/* En estado EXPANDIDO el chevron mantiene flujo normal (margin-left:auto),
   pero rota a 180° (heredado de la regla general .ppv2-collapsible:not(.is-collapsed)).
   Para que la rotación funcione sin saltar (porque en colapsado tiene transform translateY),
   redeclaramos explicitamente la combinacion en estado abierto. */
.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible:not(.is-collapsed) .ppv2-widget-chevron {
  position: static !important;
  transform: rotate(180deg) !important;
  margin-left: auto !important;
  color: var(--teal-ink) !important;
}

/* --- Ver horarios (colapsado) --- */
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible.is-collapsed {
  background: var(--paper) !important;
  border: 1px solid rgba(30, 46, 51, 0.12) !important;
  border-radius: 14px !important;
  /* Padding 16.5px vertical para igualar la altura visible al boton MSG.
     MSG = 16+24+16+4(border 2*2) = 60. HRS necesita 16.5+24+16.5+2(border 1*2) = 59 -> ~60 */
  padding: 16.5px 20px !important;
  box-shadow: 0 1px 2px rgba(30, 46, 51, 0.04) !important;
  overflow: hidden !important; /* recortar ribbon si llegara a desbordar */
}
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible.is-collapsed:hover {
  background: rgba(232, 244, 246, 0.45) !important;
  border-color: var(--teal-soft) !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible.is-collapsed .widget-title {
  gap: 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible.is-collapsed .widget-title i {
  color: var(--teal-parche) !important;
}
/* === Badge "Ahora Abierto / Ahora Cerrado" como mini-pill inline =========
   Por defecto Listeo lo renderiza como un ribbon diagonal en la esquina; aqui
   lo reseteamos a una etiqueta inline pequena que vive dentro del header del
   widget Horarios, visible tanto colapsado como expandido.
   Colores por defecto: verde (--success) para abierto, coral (--coral) cerrado. */
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours .widget-title .listing-badge {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  right: auto !important;
  margin: 0 0 0 auto !important; /* empuja el badge a la derecha */
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Variante ABIERTO: verde de la paleta de marca */
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours .widget-title .listing-badge.now-open {
  background: var(--success, #14A985) !important;
  color: #FFFFFF !important;
}
/* Variante CERRADO: coral de la paleta de marca */
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours .widget-title .listing-badge.now-closed {
  background: var(--coral, #E85D75) !important;
  color: #FFFFFF !important;
}
/* Reservar espacio antes del chevron para que el badge no quede pegado al icono */
.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible .widget-title .listing-badge + .ppv2-widget-chevron {
  margin-left: 10px !important;
}

/* ============================================================================
   Sidebar sticky: offset bajo el header fijo + compensacion del padding interno
   ----------------------------------------------------------------------------
   Listeo aplica:
     - position: sticky; top: 0   (la columna se pega DETRAS del header fijo)
     - padding-top: 90px          (crea la alineacion visual con el bloque del
                                   titulo de la izquierda en la posicion natural)
   El usuario pidio:
     1) Que la altura visual del primer widget (Reservar) NO cambie respecto
        a la posicion natural en la carga inicial.
     2) Que cuando el componente quede "pegado" al header durante el scroll,
        deje un respiro de 16px entre el header y la caja.
   Como la posicion natural del sidebar (~y=55) queda DEBAJO del umbral 128,
   sticky se engancha de inmediato. Para que el primer widget aterrice
   exactamente donde estaba antes (~y=145), reducimos el padding-top del
   sidebar al complemento exacto:
     y_widget = sidebar.top + padding_top  ->  145 = 128 + 17
   ============================================================================ */
body.single-listing .listeo-single-listing-sidebar {
  top: 96px !important;          /* visitor: 80 header + 16 gap */
  padding-top: 17px !important;  /* 96 + 17 = 113 (alineado con el titulo sin admin bar) */
}
body.single-listing.admin-bar .listeo-single-listing-sidebar {
  top: 128px !important;         /* logged-in: 32 admin + 80 header + 16 gap */
  padding-top: 17px !important;  /* 128 + 17 = 145 (alineado con el bloque del titulo) */
}

/* ============================================================================
   FASE MOBILE — Detalle de listado (max-width: 767px)
   ----------------------------------------------------------------------------
   Implementación rigurosamente alineada con el prototipo Stitch
   `Diseño/Stitch/pagina_servicio_detalle.html`. Cada valor está calcado de
   las clases Tailwind del prototipo:
     · text-2xl = 24px        · mb-12 = 48px       · mb-8 = 32px
     · text-[40px] = 40px     · mb-6 = 24px        · mb-4 = 16px
     · gap-2 = 8px            · gap-3 = 12px       · gap-4 = 16px
     · p-5 = 20px             · p-6 = 24px         · p-8 = 32px
     · rounded-xl = 24px      · rounded-2xl = 40px · text-sm = 14px
     · text-xs = 12px         · text-[11px] = 11px
   Solo CSS sobre componentes existentes; sin reestructuración del DOM.
   ============================================================================ */
.ppv2-mobile-bottom-bar {
  display: none !important;
}

@media (max-width: 767px) {

  /* --- Barra inferior fija interactiva en móvil (estilo Stitch) --- */
  body.single-listing {
    padding-bottom: 80px !important;
  }

  .ppv2-mobile-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid var(--ink-line-2) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06) !important;
  }
  
  .ppv2-mobile-bottom-bar__chat-btn {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 2px solid var(--teal-parche) !important;
    color: var(--teal-ink) !important;
    background: var(--teal-mist) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform 0.15s ease !important;
    padding: 0 !important;
  }
  .ppv2-mobile-bottom-bar__chat-btn:active {
    transform: scale(0.9) !important;
  }
  .ppv2-mobile-bottom-bar__chat-btn i {
    font-size: 20px !important;
    font-weight: bold !important;
    display: inline-block !important;
    line-height: 1 !important;
  }
  
  .ppv2-mobile-bottom-bar__reserve-btn {
    flex: 1 !important;
    background: var(--teal-parche) !important;
    color: var(--paper) !important;
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    height: 52px !important;
    border-radius: 999px !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(121, 200, 208, 0.3) !important;
    transition: all 0.2s ease !important;
    padding: 0 20px !important;
  }
  .ppv2-mobile-bottom-bar__reserve-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 4px 10px rgba(121, 200, 208, 0.3) !important;
  }
  .ppv2-mobile-bottom-bar__reserve-btn i {
    font-size: 18px !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  /* ============================================================================
     A. Layout principal: kill paddings asimétricos en TODA la jerarquía
        para que la galería pueda tocar los bordes y empezar pegada al menú.
     ============================================================================ */

  /* .container.directorio es el wrapper Bootstrap-style de Listeo. En
     desktop tiene padding-top:32px y padding lateral 15px. En mobile
     ambos generan los espacios que Miguel reporta:
       - padding-top:32px = espacio vacío entre el menú y la galería
       - padding-left/right:15px = espacio lateral que impide full-bleed
     Lo neutralizamos por completo en mobile. */
  body.single-listing .container.directorio,
  body.single-listing main > .container,
  body.single-listing #wrapper > .container {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sidebar: sin sticky en mobile */
  body.single-listing .listeo-single-listing-sidebar,
  body.single-listing.admin-bar .listeo-single-listing-sidebar {
    position: relative !important;
    top: auto !important;
    padding-top: 0 !important;
    margin-top: 32px !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Columna de contenido: kill padding asimétrico de Listeo */
  body.single-listing .listeo-single-listing-content.padding-right-30,
  body.single-listing div.listeo-single-listing-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Row: neutralizar margin negativo de Bootstrap (genera scroll horizontal) */
  body.single-listing .row.sticky-wrapper,
  body.single-listing .row:has(> .listeo-single-listing-content) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Padding lateral 24px (px-6) en todas las secciones de texto (la galería es full-bleed) */
  body.single-listing #titlebar,
  body.single-listing .listeo-single-listing-content > .listing-section,
  body.single-listing #ppv2-listing-features,
  body.single-listing #listing-faq,
  body.single-listing #listing-google-reviews,
  body.single-listing #add-review,
  body.single-listing #listing-overview,
  body.single-listing #listing-pricing-list,
  body.single-listing #listing-location {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ============================================================================
     B. Galería FULL BLEED + primer elemento del flujo mobile
     ----------------------------------------------------------------------------
     Convertimos la columna de contenido a flex column para poder reordenar
     hijos con `order`. La galería gana order: -1 → aparece arriba del titlebar.
     Resto de secciones queda en su orden natural (order: 0 por defecto).
     ============================================================================ */
  /* Si la página contiene el grid bento de fotos múltiples, ocultamos por CSS el cover individual */
  body.single-listing:has(#single-listing-grid-gallery) #listing-gallery,
  body.single-listing:has(.listeo-single-listing-gallery-grid) #listing-gallery,
  body.single-listing:has(.ppv2-mobile-slider-container) #listing-gallery {
    display: none !important;
  }

  body.single-listing .listeo-single-listing-content {
    display: flex !important;
    flex-direction: column !important;
  }
  body.single-listing #single-listing-grid-gallery,
  body.single-listing #listing-gallery,
  body.single-listing .listeo-single-listing-gallery-grid,
  body.single-listing .listeo-grid-gallery-title,
  body.single-listing .listeo-grid-gallery-title-container {
    order: -1 !important;
    display: block !important;
    height: 280px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    float: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  body.single-listing #single-listing-grid-gallery .slg-half,
  body.single-listing #single-listing-grid-gallery .slg-half img,
  body.single-listing #single-listing-grid-gallery a.slg-gallery-img,
  body.single-listing #listing-gallery img,
  body.single-listing #listing-gallery a,
  body.single-listing .listeo-grid-gallery-title img,
  body.single-listing .listeo-grid-gallery-title a,
  body.single-listing .listeo-grid-gallery-title-container img,
  body.single-listing #listing-gallery *:not(.ppv2-mobile-slider-track):not(.ppv2-mobile-slider-slide):not(.ppv2-slider-arrow):not(.ppv2-slider-dots):not(.ppv2-slider-dot):not(#titlebar):not(#titlebar *),
  body.single-listing #single-listing-grid-gallery *:not(.ppv2-mobile-slider-track):not(.ppv2-mobile-slider-slide):not(.ppv2-slider-arrow):not(.ppv2-slider-dots):not(.ppv2-slider-dot):not(#titlebar):not(#titlebar *),
  body.single-listing .listeo-single-listing-gallery-grid *:not(.ppv2-mobile-slider-track):not(.ppv2-mobile-slider-slide):not(.ppv2-slider-arrow):not(.ppv2-slider-dots):not(.ppv2-slider-dot):not(#titlebar):not(#titlebar *),
  body.single-listing .listeo-grid-gallery-title *:not(.ppv2-mobile-slider-track):not(.ppv2-mobile-slider-slide):not(.ppv2-slider-arrow):not(.ppv2-slider-dots):not(.ppv2-slider-dot):not(#titlebar):not(#titlebar *) {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    max-height: 100% !important;
    float: none !important;
  }
  body.single-listing #single-listing-grid-gallery .slg-grid {
    display: none !important;
  }

  /* --- Slider Móvil de Galería Nivel Pro (Estilo Stitch) --- */
  body.single-listing .ppv2-mobile-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    overflow: visible !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    order: -1 !important;
  }
  
  body.single-listing .ppv2-mobile-slider-track {
    display: flex !important;
    width: 100% !important;
    height: 280px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  body.single-listing .ppv2-mobile-slider-track::-webkit-scrollbar {
    display: none !important;
  }
  
  body.single-listing .ppv2-mobile-slider-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 280px !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body.single-listing .ppv2-mobile-slider-slide a {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  body.single-listing .ppv2-mobile-slider-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
  }
  
  /* Ocultar las flechas del slider móvil en la página cuando el popup lightbox (Magnific Popup) está abierto */
  html.mfp-zoom-out-cur .ppv2-slider-arrow,
  body.mfp-active .ppv2-slider-arrow,
  .mfp-wrap .ppv2-slider-arrow,
  .mfp-bg .ppv2-slider-arrow {
    display: none !important;
  }

  body.single-listing .ppv2-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--ink-line) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--ink) !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 99 !important;
    outline: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: transform 0.1s ease !important;
  }
  body.single-listing .ppv2-slider-arrow:active {
    transform: translateY(-50%) scale(0.9) !important;
  }
  
  body.single-listing .ppv2-slider-arrow--prev {
    left: 16px !important;
    padding-right: 3px !important;
  }
  
  body.single-listing .ppv2-slider-arrow--next {
    right: 16px !important;
    padding-left: 3px !important;
  }
  
  body.single-listing .ppv2-slider-dots {
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 99 !important;
  }
  
  body.single-listing .ppv2-slider-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--teal-soft) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    border: 1px solid var(--teal-soft) !important;
  }
  
  body.single-listing .ppv2-slider-dot.is-active {
    background: var(--teal-deep) !important;
    border-color: var(--teal-deep) !important;
    transform: scale(1.2) !important;
  }

  /* ============================================================================
     C. Titlebar — replicando exactamente el header del prototipo:
        Row 1: Verified chip + estrellas + rating + (N reseñas)   gap-2 mb-4
        Row 2: H1 título text-[40px] leading-tight                mb-2
        Row 3: "Prestado por" + chip-logo                         gap-3
        Row 4: Chip ciudad + dirección
        Total: mb-8 (32px) abajo de todo el bloque
     ============================================================================ */
  body.single-listing #titlebar {
    margin-bottom: 32px !important;
  }

  /* H1 Naturalia: text-3xl (30px) font-black leading-tight (1.1) */
  body.single-listing #titlebar .listing-titlebar-title h1,
  body.single-listing #titlebar h1 {
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 8px 0 !important; /* mb-2 = 8px */
  }

  /* Row 1: Meta-top — items-center gap-2 mb-4 */
  body.single-listing .ppv2-meta-top {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 16px !important; /* mb-4 */
  }
  body.single-listing .ppv2-meta-top .verified-badge {
    font-size: 11px !important; /* text-[11px] */
    padding: 4px 12px !important;
    border-radius: 999px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
  }
  body.single-listing .ppv2-meta-top .star-rating {
    transform: none !important;
    margin: 0 !important;
  }
  body.single-listing .ppv2-meta-top .star-rating .star::before {
    font-size: 14px !important; /* text-sm en el prototipo */
  }
  body.single-listing .ppv2-meta-top .rating-counter {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  /* ❤ favorito alineado a la derecha del row */
  body.single-listing .ppv2-meta-top > .listing-widget.widget_buttons {
    margin-left: auto !important;
  }

  /* Row 3: Prestado por — items-center gap-3 */
  body.single-listing #titlebar .ppv2-prestado-por,
  body.single-listing .ppv2-prestado-por {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; /* gap-3 */
    align-items: center !important;
    margin: 8px 0 0 0 !important;
    font-size: 15px !important;
    color: var(--ink-muted) !important;
  }
  body.single-listing .ppv2-prestado-por .ppv2-provider-chip,
  body.single-listing .ppv2-prestado-por > div {
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: var(--bone) !important;
  }

  /* Row 4: Ciudad + dirección — gap-2, items-center */
  body.single-listing #titlebar .ppv2-location-row,
  body.single-listing .ppv2-location-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 12px !important;
  }
  body.single-listing #titlebar .ppv2-location-row .listing-tag,
  body.single-listing .ppv2-location-row .listing-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  body.single-listing #titlebar .listing-address,
  body.single-listing .listing-address {
    font-size: 14px !important;
    color: var(--ink-muted) !important;
  }

  /* ============================================================================
     D. Secciones de contenido — mb-12 (48px) entre cada bloque
     ============================================================================ */
  body.single-listing .listing-section {
    margin-bottom: 48px !important; /* mb-12 */
  }
  /* Headings de sección: text-2xl (24px) font-black mb-6 (24px) */
  body.single-listing .listing-desc-headline {
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 24px 0 !important;
  }
  /* Heading de descripción: text-xl (20px) font-black */
  body.single-listing #listing-overview .ppv2-overview-headline {
    font-size: 20px !important;
  }

  /* Descripción — text-base leading-relaxed text-ink-muted */
  body.single-listing #listing-overview p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--ink-muted) !important;
    margin: 0 0 16px 0 !important;
  }
  body.single-listing #listing-overview {
    margin-bottom: 12px !important; /* Reducido de 24px a 12px para evitar excesivo espacio con Planes y Precios */
  }

  /* Planes y Precios — items con p-5 rounded-xl border ink/10 */
  body.single-listing #listing-pricing-list .pricing-list-container {
    padding: 0 !important;
  }
  body.single-listing #listing-pricing-list .pricing-list-container ul li {
    padding: 20px !important;
    margin-bottom: 16px !important;
    border-radius: 24px !important;
    border: 1px solid var(--ink-line-2) !important;
    background: var(--paper) !important;
  }
  body.single-listing #listing-pricing-list .pricing-menu-details h5 {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }
  body.single-listing #listing-pricing-list .pricing-menu-details p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--ink-muted) !important;
  }
  body.single-listing #listing-pricing-list .pricing-menu-price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--teal-deep) !important;
  }

  /* Sobre {Nombre} — grid-cols-1 gap-y-4 en el prototipo (lista limpia, sin fondo ni bordes) */
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes,
  body.single-listing #ppv2-listing-features ul.listing-features {
    display: grid !important;
    grid-template-columns: 1fr !important;
    columns: 1 !important;
    gap: 12px !important; /* gap-3 */
    margin: 0 !important;
    padding: 0 !important;
  }
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes li.feature-has-icon,
  body.single-listing #ppv2-listing-features ul.listing-features li.feature-has-icon {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes li.feature-has-icon .feature-svg-icon,
  body.single-listing #ppv2-listing-features ul.listing-features li.feature-has-icon .feature-svg-icon {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
  }
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes li.feature-has-icon .feature-svg-icon svg,
  body.single-listing #ppv2-listing-features ul.listing-features li.feature-has-icon .feature-svg-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes li.feature-has-icon .feature-svg-icon svg path,
  body.single-listing #ppv2-listing-features ul.listing-features li.feature-has-icon .feature-svg-icon svg path {
    fill: var(--teal-deep) !important;
  }
  body.single-listing #ppv2-listing-features ul.listing-features.checkboxes li.feature-has-icon a,
  body.single-listing #ppv2-listing-features ul.listing-features li.feature-has-icon a {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    text-decoration: none !important;
  }

  /* ============================================================================
     E. Opiniones de Google
     ============================================================================ */
  body.single-listing #listing-google-reviews .google-reviews-summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px 24px !important;
    position: relative !important;
  }
  /* Logo Google a la izquierda y bloque de puntuación a la derecha */
  body.single-listing #listing-google-reviews .google-reviews-summary > a,
  body.single-listing #listing-google-reviews .google-reviews-summary .google-reviews-logo {
    align-self: center !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  body.single-listing #listing-google-reviews .google-reviews-summary > div:not(.google-reviews-read-more) {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
  }
  /* Toggle "Leer más opiniones": full-width, estático al final del summary */
  body.single-listing #listing-google-reviews .ppv2-google-toggle {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 16px 0 0 0 !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    flex: 0 0 100% !important;
  }
  body.single-listing #listing-google-reviews .ppv2-google-toggle:active {
    transform: translateY(1px) !important;
  }

  /* Tarjetas de review */
  body.single-listing #listing-google-reviews .comments li {
    padding: 20px !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
  }
  body.single-listing #listing-google-reviews .avatar,
  body.single-listing #listing-reviews .avatar {
    width: 40px !important;
    height: 40px !important;
  }
  body.single-listing #listing-google-reviews .comments li .comment-by h5 {
    font-size: 14px !important;
  }
  body.single-listing #listing-google-reviews .comments li .comment-by .date {
    font-size: 11px !important;
  }
  body.single-listing #listing-google-reviews .comments li .star::before {
    font-size: 16px !important;
  }
  body.single-listing #listing-google-reviews .comments li > .comment-content > p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Botones inferiores: stack vertical, full-width */
  body.single-listing #listing-google-reviews .google-reviews-read-more.bottom {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  body.single-listing #listing-google-reviews .google-reviews-read-more.bottom > a {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }

  /* ============================================================================
     F. Añadir Opinión
     ============================================================================ */
  body.single-listing #add-review:not(.is-open) {
    padding: 16px 20px !important;
  }
  body.single-listing #add-review .sub-ratings-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.single-listing #add-review.is-open {
    margin-bottom: 48px !important;
  }
  body.single-listing #add-review.is-open .comment-respond {
    padding: 24px 20px !important;
    border-radius: 24px !important;
  }
  body.single-listing #add-review.is-open .ppv2-add-review-btn {
    top: 14px !important;
    right: 14px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  body.single-listing #add-review.is-open .listing-desc-headline {
    font-size: 20px !important;
    padding-right: 80px !important;
  }

  /* ============================================================================
     G. Sidebar widgets (Reservar / Enviar Mensaje / Horarios)
     ============================================================================ */
  body.single-listing .listeo-single-listing-sidebar .listing-widget.boxed-widget {
    padding: 24px 20px !important;
  }
  body.single-listing .listeo-single-listing-sidebar .listing-widget {
    margin-bottom: 20px !important;
  }
  body.single-listing .listeo-single-listing-sidebar .listing-widget.message-vendor.ppv2-collapsible.is-collapsed,
  body.single-listing .listeo-single-listing-sidebar .listing-widget.opening-hours.ppv2-collapsible.is-collapsed {
    padding: 16px 20px !important;
  }

  /* ============================================================================
     H. FAQ — items text-base font-bold (matching prototype) p-4 rounded-xl
     ============================================================================ */
  body.single-listing #listing-faq .ui-accordion-header {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  body.single-listing #listing-faq .ui-accordion-content {
    padding: 0 16px 16px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ============================================================================
     I. Ubicación
     ============================================================================ */
  body.single-listing #listing-location #singleListingMap,
  body.single-listing #listing-location .listing-map {
    height: 280px !important;
    border-radius: 24px !important;
  }
}

/* ============================================================================
   Ocultar barra de navegación interna del detalle de listado
   (tabs: Resumen | Galería | Precios | Ubicación | FAQ | Opiniones de Google | Añadir opinión)
   Listeo genera DOS instancias de .listing-nav-container:
     1. La versión inline dentro del contenido del listado.
     2. Una versión clonada que se appende al <body> y se vuelve sticky al
        hacer scroll (clases .cloned + .stick).
   Esta regla oculta ambas. Solo aplica en single-listing — no afecta otras
   plantillas del tema. Los anchors (#listing-overview, #listing-gallery, etc.)
   siguen existiendo en el DOM, así que cualquier deep-link externo a una
   sección sigue funcionando.
   ============================================================================ */
body.single-listing .listing-nav-container,
body.single-listing #listing-nav {
  display: none !important;
}