/* ═══════════════════════════════════════════════════════════════
   Directory Locations Manager — Styles v3.18.1
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Variables (uses Astra/WP global palette if available) ─ */


/* v3.27.74 — Revertido el bloque "Typography defaults" de v3.27.73.
   La hipótesis era que Spectra inyectaba font-smoothing + reset de <strong>
   a peso 700 a nivel global. Tras análisis profundo del usuario, se confirmó
   que el ruido tipográfico NO venía de Spectra (que solo aportaba 3-4 KB de
   CSS de un bloque Taxonomy List sin renderizar) sino de Astra, que tiene
   integration CSS condicional cuando detecta Spectra activo. Las reglas que
   añadimos no resolvían el problema real, así que las quitamos para no
   ensuciar el plugin con código innecesario. */


/* ─── Grid System ───────────────────────────────────────────── */
.dlm-grid {
    display: grid;
    gap: 24px;
    margin: 24px 0;
}

.dlm-grid.dlm-ciudades-grid,
.dlm-grid.dlm-provincias-grid,
.dlm-grid.dlm-locales-grid {
    grid-template-columns: repeat(3, 1fr);
}





/* ─── Card Base ─────────────────────────────────────────────── */
.dlm-card {
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    box-shadow: var(--dlm-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}



/* ─── Card Image ────────────────────────────────────────────── */


.dlm-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}



/* ─── Card Body ─────────────────────────────────────────────── */
.dlm-card-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.dlm-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dlm-text);
    margin: 0;
    line-height: 1.3;
}



.dlm-card-title a:hover {
    color: var(--dlm-primary);
}

/* ─── Clickable Local Card (stretched link) ────────────────── */
.dlm-card-local {
    position: relative;
    cursor: pointer;
    /* v3.27.82 — Cambios respecto a v3.27.81:
       1. Sustituido el "borde con gradiente diagonal" (no convencía visualmente)
          por un HALO del color primario que envuelve toda la card en hover.
          Es más sutil y "premium feel" sin ser llamativo.
       2. Click feedback (scale 0.985 al :active) se mantiene — funciona bien
          como tap-feedback en móvil.
       3. Añadido un sutil refuerzo de la sombra base en hover además del halo
          para que el efecto sea perceptible aunque el primario sea claro. */
}

/* v3.27.82 — Halo de color primario al hacer hover (solo desktop) */
@media (hover: hover) and (pointer: fine) {
    .dlm-card-local {
        transition: box-shadow 0.3s ease, transform 0.25s ease;
    }
    .dlm-card-local:hover {
        /* Doble capa: una negra para mantener la sensación de elevación
           del .dlm-card original, otra de color primario para el halo. */
        box-shadow:
            var(--dlm-shadow-hover, 0 10px 25px rgba(0,0,0,0.1)),
            0 0 0 4px color-mix(in srgb, var(--dlm-primary) 12%, transparent),
            0 8px 24px color-mix(in srgb, var(--dlm-primary) 22%, transparent);
    }
    /* Fallback Safari < 16.4 sin color-mix */
    @supports not (color: color-mix(in srgb, red 50%, blue)) {
        .dlm-card-local:hover {
            box-shadow:
                var(--dlm-shadow-hover, 0 10px 25px rgba(0,0,0,0.1)),
                0 0 0 4px rgba(37, 99, 235, 0.12),
                0 8px 24px rgba(37, 99, 235, 0.22);
        }
    }
}

/* v3.27.82 — Click feedback: micro-contracción al pulsar (mejor en móvil) */
.dlm-card-local:active {
    transform: scale(0.985);
    transition: transform 0.08s ease;
}
/* Respetamos preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .dlm-card-local:hover { box-shadow: var(--dlm-shadow-hover) !important; }
    .dlm-card-local:active { transform: none; }
}

/* v3.27.82 — Footer de la card: botón "Ver detalles" + checkbox "Comparar"
   en una sola fila horizontal. Antes el Comparar se colocaba debajo del
   botón apilado, generando ~30px de altura extra y dejando el lado derecho
   muy vacío visualmente. */
.dlm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto; /* empuja el footer al fondo del card-body si el body es flex column */
    padding-top: 4px;
}

.dlm-card-footer .dlm-compare-check {
    /* Anula los estilos previos que daban margin-top y display block */
    margin: 0;
    padding: 0;
    /* Visualmente integrado a la derecha del footer */
    flex-shrink: 0;
}

.dlm-card-local .dlm-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dlm-card-local .dlm-card-phone a,
.dlm-card-local .dlm-card-city a,
.dlm-card-local .dlm-card-city-badge,
.dlm-card-local .dlm-btn,
.dlm-card-local .dlm-compare-check {
    position: relative;
    z-index: 2;
}

/* ─── City Card (link wraps entire card) ────────────────────── */
.dlm-card-ciudad .dlm-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.dlm-card-ciudad .dlm-card-link:hover {
    text-decoration: none;
}

.dlm-card-count {
    font-size: 0.85rem;
    color: var(--dlm-text-muted);
    font-weight: 400;
}

/* ─── Local Card: City Badge ───────────────────────────────── */
/* v3.27.79 — Ciudad como badge tipo "credencial" en la card del local.
   Sin icono (antes duplicaba el pin de la dirección física), inline-flex
   para que solo ocupe el ancho del texto, con fondo suave del color
   primario y un sutil borde para que parezca una etiqueta clicable. */
.dlm-card-city {
    margin-bottom: 6px;
}
.dlm-card-city-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dlm-primary, #2563eb);
    background: color-mix(in srgb, var(--dlm-primary) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--dlm-primary) 18%, #fff);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.dlm-card-city-badge:hover {
    background: color-mix(in srgb, var(--dlm-primary) 14%, #fff);
    border-color: color-mix(in srgb, var(--dlm-primary) 32%, #fff);
    color: var(--dlm-primary-hover, var(--dlm-primary));
    text-decoration: none;
}

/* Fallback para navegadores sin soporte de color-mix (Safari < 16.4) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    
    .dlm-card-city-badge:hover {
        background: rgba(37, 99, 235, 0.14);
        border-color: rgba(37, 99, 235, 0.32);
    }
}

/* ─── Filter Bar (search + sort + filters) ─────────────────── */
.dlm-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    box-shadow: var(--dlm-shadow);
}











/* v3.30.20 — Eliminado .dlm-filter-controls (con S al final). Era código
   muerto: el HTML emitido por class-archive-injector.php usa
   .dlm-filter-row--controls (con guión bajo y --controls), no
   .dlm-filter-controls. Probablemente quedó tras un rename de la clase. */













/* ─── Range Slider ─────────────────────────────────────────── */








.dlm-filter-range:focus,
.dlm-filter-range:active,
.dlm-filter-range:focus-visible {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    -webkit-focus-ring-color: transparent;
    box-shadow: none;
}

.dlm-filter-range::-moz-focus-outer { border: 0; padding: 0; }

.dlm-filter-range::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: none;
    outline: none;
    -webkit-appearance: none;
}





.dlm-filter-range::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}



.dlm-filter-range::-moz-range-progress { background: transparent; }





.dlm-btn--load-more {
    padding: 14px 48px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    background: transparent;
    color: var(--dlm-primary) !important;
    border: 2px solid var(--dlm-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.dlm-btn--load-more:hover {
    background: var(--dlm-primary);
    color: #fff !important;
}

/* v3.30.20 — Eliminado @media con .dlm-filter-controls (la regla padre era
   código muerto, esta media query también). */

/* ─── Local Card Details ────────────────────────────────────── */
.dlm-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.dlm-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--dlm-star-color);
}

.dlm-stars-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dlm-text);
    margin-left: 4px;
}

.dlm-no-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dlm-no-rating-text {
    font-size: 0.8rem;
    color: var(--dlm-text-muted);
    font-style: italic;
}

.dlm-card-reviews,
.dlm-card-phone,
.dlm-card-address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--dlm-text-muted);
}

/* v3.30.16 — La calle/dirección en negrita para crear jerarquía con la
   línea de localidad (CP · ciudad · región) que va justo debajo.
   Color heredado del padre (muted) — la negrita basta para diferenciar. */
.dlm-card-local .dlm-card-address strong,
.dlm-card .dlm-card-address strong {
    font-weight: 600 !important;
    color: inherit !important;
}

/* v3.30.16 — Segunda línea de la dirección (CP + ciudad + región).
   Indentada 20px (14px del icono + 6px del gap) para alinearse con el
   texto de la línea superior, sin volver a mostrar el icono.
   Selector reforzado y reset explícito porque algunos temas (Astra)
   inyectan estilos a `.entry-content div` que machacan font-size y
   color de divs sin clase específica. */
.dlm-card-local .dlm-card-locality,
.dlm-card-body .dlm-card-locality,
.dlm-card .dlm-card-locality {
    display: block !important;
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--dlm-text-muted, #6b7280) !important;
    opacity: 0.8;
    text-transform: none;
    letter-spacing: normal;
}



.dlm-card-phone a:hover {
    color: var(--dlm-primary);
    text-decoration: underline;
}



/* ─── Button ────────────────────────────────────────────────── */
.dlm-btn {
    display: inline-block;
    margin-top: auto;
    padding: 10px 20px;
    background: var(--dlm-primary);
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
    align-self: flex-start;
}

.dlm-btn:hover {
    background: var(--dlm-primary-hover);
    color: #ffffff !important;
    text-decoration: none;
}

/* ─── Term Description ──────────────────────────────────────── */
.dlm-term-description {
    margin-bottom: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--dlm-text-muted);
}

/* ─── Breadcrumb ────────────────────────────────────────────── */
.dlm-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.dlm-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.dlm-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.dlm-breadcrumb a {
    color: var(--dlm-primary);
    text-decoration: none;
}



.dlm-breadcrumb-sep {
    color: var(--dlm-text-muted);
    margin: 0 4px;
}

.dlm-filter-input::placeholder,.dlm-breadcrumb li:last-child span{
    color: var(--dlm-text-muted);
}

/* ─── Pagination ────────────────────────────────────────────── */
.dlm-pagination {
    margin: 32px 0 16px;
    text-align: center;
}

.dlm-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.dlm-pagination li {
    display: inline-block;
}

.dlm-pagination a,
.dlm-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dlm-pagination a {
    background: var(--dlm-bg-card);
    color: var(--dlm-text);
    border: 1px solid var(--dlm-border);
}

.dlm-pagination a:hover {
    background: var(--dlm-primary);
    color: #ffffff;
    border-color: var(--dlm-primary);
}

.dlm-pagination .current {
    background: var(--dlm-primary);
    color: #ffffff;
    border: 1px solid var(--dlm-primary);
}

/* ─── Empty message ─────────────────────────────────────────── */
.dlm-empty-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--dlm-text-muted);
    font-size: 1rem;
}



/* ─── Widget ────────────────────────────────────────────────── */
/* ─── Page Hero (background image header) ───────────────────── */
.dlm-page-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
    background-color: #1e293b;
    background-size: cover;
    background-position: center center;
    border-radius: var(--dlm-radius);
}

.dlm-page-hero--has-image {
    min-height: 280px;
    /* v3.27.65 — Hero como columna flex para que el overlay ocupe TODO el
       espacio vertical, no solo el del contenido. Si el contenido es corto
       (ej. una región sin subtítulo), antes el overlay terminaba en mitad
       del hero y se veía la imagen de fondo sin oscurecer abajo. */
    display: flex;
    flex-direction: column;
}



.dlm-page-hero--has-image .dlm-page-hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.65) 100%);
    padding: 36px 36px;
    /* v3.27.65 — El overlay ocupa todo el espacio disponible del hero flex */
    flex: 1 1 auto;
}

.dlm-page-hero .dlm-page-title {
    color: #ffffff;
}



.dlm-page-hero .dlm-meta-description {
    color: rgba(255, 255, 255, 0.85);
}

.dlm-page-hero .dlm-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.dlm-page-hero .dlm-breadcrumb a:hover {
    color: #ffffff;
}

.dlm-page-hero .dlm-breadcrumb-sep,
.dlm-page-hero .dlm-breadcrumb li:last-child span {
    color: rgba(255, 255, 255, 0.5);
}

.dlm-page-hero .dlm-stat {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ─── Hero Centered Variant (province pages) ────────────────── */
.dlm-page-hero-overlay--center {
    text-align: center;
    align-items: center;
}

.dlm-page-hero-overlay--center .dlm-breadcrumb ol {
    justify-content: center;
}

.dlm-page-hero-overlay--center .dlm-meta-description {
    margin-left: auto;
    margin-right: auto;
}

/* ─── Hero Counters ─────────────────────────────────────────── */
.dlm-hero-counters {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
}

.dlm-hero-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.dlm-hero-counter:last-child { border-right: none; }

.dlm-hero-counter-num {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.dlm-hero-counter-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ─── Hero Feature Pills ───────────────────────────────────── */
.dlm-hero-features {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.dlm-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ─── Section Block (reusable titled section) ───────────────── */
.dlm-section-block {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--dlm-border);
}

.dlm-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 0 0 20px;
    padding-bottom: 12px;
    position: relative;
    width: fit-content;
}

.dlm-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--dlm-primary) 0%, transparent 100%);
}



.dlm-section-title--center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ─── Province Hero Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .dlm-hero-counters { gap: 0; flex-wrap: wrap; justify-content: center; }
    .dlm-hero-counter { padding: 0 14px; min-width: 0; }
    .dlm-hero-counter-num { font-size: 1.3rem; }
    .dlm-hero-counter-label { font-size: 0.7rem; }
    .dlm-hero-features { gap: 6px; }
    .dlm-hero-feature { padding: 6px 12px; font-size: 0.75rem; }
}

@media (max-width: 420px) {
    .dlm-hero-counters { gap: 8px 0; }
    .dlm-hero-counter { padding: 0 10px; }
    .dlm-hero-counter-num { font-size: 1.1rem; }
    .dlm-hero-counter-label { font-size: 0.65rem; }
}

.dlm-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 8px 0 4px;
    line-height: 1.2;
}

.dlm-page-subtitle {
    display: inline-block;
    font-size: 0.95rem;
    color: var(--dlm-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.dlm-meta-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--dlm-text-muted);
    margin: 16px 0 24px;
    width: 100%;
}

.dlm-page-stats {
    margin-top: 12px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dlm-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dlm-text-muted);
    background: #f3f4f6;
    padding: 5px 14px;
    border-radius: 20px;
}

/* ─── Page Content (description at the bottom) ──────────────── */
.dlm-page-content {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--dlm-border);
}



.dlm-page-content .dlm-term-description p {
    margin-bottom: 16px;
}

/* ─── Responsive adjustments for page hero ──────────────────── */
@media (max-width: 768px) {
    .dlm-page-title {
        font-size: 1.4rem;
        word-break: break-word;
    }

    

    

    .dlm-page-hero--has-image {
        min-height: 160px;
    }

    .dlm-page-content {
        margin-top: 28px;
        padding-top: 24px;
    }
}

/* ─── City Card Badge (locale count on image) ───────────────── */
.dlm-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.dlm-card-badge svg {
    flex-shrink: 0;
}

/* ─── Rating Badge (circular on local card image) ───────────── */
.dlm-rating-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ffffff;
    color: var(--dlm-text);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* Featured cards keep rating in default position; badge goes to top-right */
.dlm-card-local--featured .dlm-rating-badge {
    /* default position - top left */
}



.dlm-rating-badge svg {
    color: var(--dlm-star-color);
    flex-shrink: 0;
}

/* ─── "Ver todos" link ──────────────────────────────────────── */
.dlm-load-more-wrap,.dlm-view-all{
    text-align: center;
    margin-top: 24px;
}

.dlm-view-all-link {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dlm-primary);
    border: 2px solid var(--dlm-primary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dlm-view-all-link:hover {
    background: var(--dlm-primary);
    color: #ffffff;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE LOCAL PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────────── */
.dlm-single-hero {
    position: relative;
    border-radius: var(--dlm-radius);
    overflow: hidden;
    margin-bottom: 28px;
    background-color: var(--dlm-text);
    background-size: cover;
    background-position: center center;
    min-height: 200px;
}

.dlm-single-hero--has-image { min-height: 280px; }

.dlm-single-hero-overlay {
    padding: 36px 40px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.75) 100%);
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dlm-single-hero .dlm-page-title { color: #fff; margin: 8px 0 4px; }
.dlm-single-hero .dlm-page-subtitle { color: rgba(255,255,255,0.8); }
.dlm-single-hero .dlm-breadcrumb a { color: rgba(255,255,255,0.7); }
.dlm-single-hero .dlm-breadcrumb a:hover { color: #fff; }
.dlm-single-hero .dlm-breadcrumb-sep,
.dlm-single-hero .dlm-breadcrumb li:last-child span { color: rgba(255,255,255,0.5); }

.dlm-single-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.dlm-single-hero-meta .dlm-stat {
    background: rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(4px);
}

.dlm-rating-badge--hero {
    position: static;
    background: #fff;
    color: var(--dlm-text);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}



/* ─── Data Card ─────────────────────────────────────────────── */
.dlm-single-data {
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    box-shadow: var(--dlm-shadow);
    padding: 28px 32px;
    margin-bottom: 32px;
}

.dlm-single-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
}

/* ─── Info Rows ─────────────────────────────────────────────── */
.dlm-single-info { display: flex; flex-direction: column; gap: 16px; }

.dlm-single-info-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dlm-single-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 10px;
    color: var(--dlm-primary);
}

.dlm-single-info-row strong {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dlm-text-muted);
    margin-bottom: 2px;
}

.dlm-single-info-row p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--dlm-text);
    line-height: 1.5;
}



.dlm-breadcrumb a:hover,.dlm-single-info-row a:hover{ text-decoration: underline; }











/* ─── CTA Buttons Bar (centered, prominent) ─────────────────── */
.dlm-single-actions-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--dlm-border);
    flex-wrap: wrap;
}

.dlm-btn--cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 10px;
    background: var(--dlm-primary);
    color: #fff !important;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.dlm-btn--cta:hover {
    background: var(--dlm-primary-hover);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none;
}

.dlm-btn--cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 10px;
    background: transparent;
    color: var(--dlm-primary) !important;
    border: 2px solid var(--dlm-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.dlm-btn--cta-outline:hover {
    background: var(--dlm-primary);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}



.dlm-single-hours-section .dlm-hours-list {
    max-width: 300px;
}

/* ─── Compare Button ────────────────────────────────────────── */
.dlm-single-compare {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--dlm-border);
}

.dlm-btn--compare {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #fff !important;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.3);
}

.dlm-btn--compare:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(245, 158, 11, 0.4);
    color: #fff !important;
    text-decoration: none;
}

/* ─── Map Column (map + directions button) ─────────────────── */
.dlm-single-map-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dlm-btn--map-directions {
    align-self: center;
    padding: 10px 24px;
    font-size: 0.9rem;
}



/* v3.31.6 — Revertidos los estilos de `.dlm-single-map-header*` que se
   añadieron en v3.31.1 (cabecera con nombre + dirección sobre el mapa).
   La columna izquierda de la página ya muestra esos datos, así que la
   cabecera era redundante visual y robaba altura al iframe.

   Vuelta a la versión original de `.dlm-single-map`: flex horizontal
   (sin column), sin background ni border extra. El iframe llena toda
   la superficie como antes. */
.dlm-single-map {
    display: flex;
    align-items: stretch;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.dlm-single-map iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-width: 100%;
    display: block;
}

.dlm-single-map-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f3f4f6;
    border-radius: 12px;
    color: var(--dlm-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.dlm-single-map-fallback:hover { background: #e5e7eb; }



.dlm-single-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 0 0 16px;
    padding-bottom: 10px;
    position: relative;
    width: fit-content;
}

.dlm-single-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--dlm-primary) 0%, transparent 100%);
}

.dlm-single-content-body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--dlm-text);
}

.dlm-single-content-body p { margin-bottom: 14px; }

/* ─── Content H3 underline ─────────────────────────────────── */
.dlm-single-content-body h3,
.dlm-page-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    position: relative;
    width: fit-content;
}

.dlm-single-content-body h3::after,
.dlm-page-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to right, var(--dlm-primary) 0%, transparent 100%);
}







.dlm-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Force 3 columns on desktop for single-local reviews */
.dlm-reviews-grid--row {
    grid-template-columns: repeat(3, 1fr);
}
















.dlm-review-stars .dlm-stars-number { font-size: 0.8rem; }

















/* ─── Related Locals ────────────────────────────────────────── */
.dlm-single-related {
    margin-bottom: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--dlm-border);
}

/* v3.31.7 — Override del grid para "Locales cerca de X" en single-local:
   2 columnas en desktop y tablet (frente a las 3 que usa el grid genérico
   en archives/listados). Las cards salen más grandes, mejor lectura cuando
   el usuario está comparando alternativas en una ficha individual.
   En móvil se mantiene 1 columna (heredado del grid genérico, override
   explícito por especificidad). */
.dlm-single-related .dlm-grid.dlm-locales-grid {
    grid-template-columns: repeat(2, 1fr);
}


/* v3.32.2 — Etiqueta de distancia AHORA flotando sobre la imagen de la
   tarjeta en la esquina inferior izquierda (antes vivía en el body de
   la card y pasaba desapercibida).
   Diseño: pill blanca semitransparente con backdrop-blur (estilo
   Airbnb / Booking), texto oscuro semibold, icono en color primary.
   Sombra fuerte para legibilidad sobre cualquier imagen (clara u
   oscura). Se renderiza con position:absolute dentro de
   `.dlm-card-image` que ya tiene position:relative por los badges
   existentes (rating y featured). */
.dlm-card-distance {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #111827;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}
.dlm-card-distance svg {
    flex-shrink: 0;
    color: var(--dlm-primary, #2563eb);
}

/* En móvil reducimos ligeramente el padding y el font-size para que
   no compita con el botón de favoritos ni con el rating badge. */
@media (max-width: 600px) {
    .dlm-card-distance {
        padding: 5px 8px;
        font-size: 0.75rem;
        bottom: 8px;
        left: 8px;
    }
}

/* v3.32.0 — Pills de "Otras ciudades en {Región}" entre la sección de
   locales cerca y la de mejor valorados. Da una salida rápida al usuario
   en una ciudad pequeña a las ciudades grandes de la región. */
.dlm-single-other-cities {
    margin: 0 0 36px;
    padding: 18px 20px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.dlm-single-other-cities-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dlm-text, #111827);
}
.dlm-single-other-cities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dlm-other-city-pill:hover {
    background: var(--dlm-primary, #2563eb);
    border-color: var(--dlm-primary, #2563eb);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
}


@media (max-width: 600px) {
    .dlm-single-other-cities { padding: 14px 16px; }
    
}













.dlm-share-btn--wa:hover {
    border-color: #25d366;
    color: #25d366;
}



/* v3.27.89 — Botón "Guardar en favoritos" en el HERO del single-local.
   Mismo estilo y tamaño que .dlm-card-fav-btn (las cards del listado): círculo
   blanco translúcido 36×36, color rosa #ec4899, corazón vacío con borde,
   relleno cuando está activo. La única diferencia es la posición: aquí va
   pegado al hero, no a una imagen de card. */
.dlm-single-fav-btn.dlm-single-hero-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #ec4899;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.18s ease;
}
.dlm-single-fav-btn.dlm-single-hero-fav:hover {
    transform: scale(1.08);
}
.dlm-single-fav-btn.dlm-single-hero-fav.is-fav {
    background: #fff;
}

.dlm-single-fav-btn.dlm-single-hero-fav.is-fav svg path {
    fill: #ec4899;
    stroke: #ec4899;
}


/* En móvil ligeramente más pequeño */
@media (max-width: 600px) {
    .dlm-single-fav-btn.dlm-single-hero-fav {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
    }
    .dlm-single-fav-btn.dlm-single-hero-fav svg {
        width: 16px !important;
        height: 16px !important;
    }
}



/* v3.32.3 — Interactividad de los 3 botones del popup del mapa Leaflet
   ("Ver detalles" / "Comparar" / corazón). Los estados base (background,
   border, color) siguen llegando del style inline del JS para que se vean
   bien aunque la CSS del plugin tarde o falle. Aquí añadimos sólo los
   estados :hover y :active.

   El !important es necesario porque los inline styles ganan a cualquier
   regla CSS sin él — es el patrón estándar para añadir interactividad a
   elementos con styling inline. */










/* ─── Single Page Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .dlm-single-hero-overlay { padding: 20px 16px; }
    .dlm-single-hero--has-image { min-height: 180px; }
    .dlm-single-data { padding: 16px 10px; }
    
    
    .dlm-single-map,.dlm-single-map iframe{ min-height: 250px; height: 250px; }
    .dlm-btn--cta, .dlm-btn--cta-outline { padding: 10px 20px; font-size: 0.9rem; }
    .dlm-single-actions-bar { gap: 10px; }
    .dlm-reviews-grid--row { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .dlm-reviews-grid--row { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Meta Description (below hero) ─────────────────────────── */
.dlm-single-meta-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--dlm-text-muted);
    margin: 0 0 28px;
    padding: 0 4px;
}

/* ─── FAQ Accordion ─────────────────────────────────────────── */
.dlm-single-content,.dlm-single-reviews,.dlm-single-faqs{
    margin-bottom: 32px;
}





.dlm-faq-item {
    border: 1px solid var(--dlm-border);
    border-radius: var(--dlm-radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.dlm-faq-item[open] {
    box-shadow: var(--dlm-shadow);
}

.dlm-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dlm-text);
    cursor: pointer;
    list-style: none;
    background: var(--dlm-bg-card);
    transition: background 0.15s ease;
}

.dlm-faq-question:hover {
    background: #f9fafb;
}

/* Custom arrow */
.dlm-faq-question::-webkit-details-marker { display: none; }
.dlm-faq-question::marker { content: ''; }

.dlm-faq-question::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: 16px;
    border-right: 2px solid var(--dlm-text-muted);
    border-bottom: 2px solid var(--dlm-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.dlm-faq-item[open] .dlm-faq-question::after {
    transform: rotate(-135deg);
}

.dlm-faq-answer {
    padding: 0 20px 16px;
    background: var(--dlm-bg-card);
}

.dlm-faq-answer p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--dlm-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════════════════════════ */






























.dlm-search-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}









.dlm-search-result-item svg { color: var(--dlm-primary); flex-shrink: 0; }

/* ─── Compare Checkbox ──────────────────────────────────────── */
.dlm-compare-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--dlm-text-muted);
    cursor: pointer;
    margin-top: 6px;
    user-select: none;
}

.dlm-compare-check span { font-weight: 500; }

.dlm-compare-cb {
    width: 16px;
    height: 16px;
    accent-color: var(--dlm-primary);
    cursor: pointer;
}

/* ─── Compare Floating Bar ──────────────────────────────────── */
.dlm-compare-bar {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--dlm-text);
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: bottom 0.3s ease;
    white-space: nowrap;
}

.dlm-compare-bar--visible { bottom: 24px; }

.dlm-compare-bar-text { font-size: 0.9rem; font-weight: 500; }

.dlm-compare-bar-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
}

.dlm-compare-bar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Compare Modal ─────────────────────────────────────────── */
.dlm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.dlm-modal-content {
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    padding: 32px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.dlm-modal-content h2 {
    margin: 0 0 24px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dlm-text);
}

.dlm-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.8rem;
    background: none;
    border: none;
    color: var(--dlm-text-muted);
    cursor: pointer;
    line-height: 1;
}

.dlm-modal-close:hover { color: var(--dlm-text); }

.dlm-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.dlm-compare-col {
    padding: 20px;
    border: 1px solid var(--dlm-border);
    border-radius: var(--dlm-radius);
    text-align: center;
}

.dlm-compare-col h3 {
    font-size: 1rem;
    margin: 0 0 16px;
}

.dlm-compare-col h3 a {
    color: var(--dlm-text);
    text-decoration: none;
}

.dlm-compare-col h3 a:hover { color: var(--dlm-primary); }

.dlm-compare-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #f3f4f6;
}


.dlm-compare-row strong { color: var(--dlm-text-muted); font-weight: 500; }

/* ─── Home Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    
    
    
    .dlm-compare-bar { padding: 10px 18px; gap: 10px; }
    .dlm-modal-content { padding: 20px; }
    
}







/* ═══════════════════════════════════════════════════════════════
   AD SLOTS
   ═══════════════════════════════════════════════════════════════ */

.dlm-ad-slot {
    margin: 20px 0;
    text-align: center;
    clear: both;
}
/* v3.29.10 — Reserva de altura para minimizar CLS (Cumulative Layout
   Shift) mientras GAM hace la petición y renderiza el creativo. Solo
   en slots LIVE, no en placeholders del modo prueba.
   250px universal: cubre exacto los tamaños 300x250 y 250x250 (los más
   habituales). Cuando GAM sirve 336x280 el slot crece 30px → un salto
   pequeño que cae dentro del rango "good" de Web Vitals. */
.dlm-ad-slot:not(.dlm-ad-slot--test) {
    min-height: 250px;
    contain: layout;          /* aísla el reflow del slot del documento */
}
/* v3.52.0 — Colapso del WRAPPER cuando la red colapsa su div interno.
   El `collapseEmptyDivs` de GPT pone `display:none` en el div del SLOT
   (Content1…), NO en este wrapper: el min-height de arriba mantenía
   250px + margin de hueco en los slots sin relleno (la causa real de
   los huecos con fill bajo). Con collapseBeforeAdFetch — es decir,
   collapseEmptyDivs(true, true) — el div interno además NACE oculto →
   el wrapper entero queda colapsado desde el inicio y solo se expande
   si llega anuncio. Cubre también AdSense (data-ad-status="unfilled").
   Requiere el div de la red como HIJO DIRECTO del slot (el pegado
   normal). Navegadores sin :has() → mismo comportamiento que antes
   (hueco), degradación limpia. */
.dlm-ad-slot:has(> div[style*="display: none"]),
.dlm-ad-slot:has(> div[style*="display:none"]),
.dlm-ad-slot:has(> ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}
/* v3.28.4 — Centrado automático del contenido del slot.
   Ad Manager / AdSense generan iframes con ancho fijo (728x90, 300x250, etc.)
   que son block-level: text-align:center solo no los centra. Con margin:auto
   sobre los hijos directos garantizamos que cualquier ad creative se sitúe
   en el centro de su contenedor sin importar el formato. */
.dlm-ad-slot > * {
    margin-left: auto !important;
    margin-right: auto !important;
}
.dlm-ad-slot iframe,
.dlm-ad-slot ins,
.dlm-ad-slot > div {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Test mode placeholder */
.dlm-ad-slot--test {
    border: 2px dashed var(--dlm-primary);
    border-radius: var(--dlm-radius);
    background: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, rgba(37,99,235,0.1) 100%);
    padding: 20px;
}

.dlm-ad-test-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dlm-ad-test-icon { font-size: 1.5rem; }

.dlm-ad-test-inner strong {
    font-size: 0.9rem;
    color: var(--dlm-text);
}

.dlm-ad-test-inner code {
    font-size: 0.75rem;
    color: var(--dlm-text-muted);
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
}

.dlm-ad-test-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

.dlm-ad-test-status--on {
    background: #dcfce7;
    color: #166534;
}

.dlm-ad-test-status--off {
    background: #fee2e2;
    color: #991b1b;
}

/* v3.28.0 — Modo prueba enriquecido: fila superior + contexto + badge calidad */
.dlm-ad-test-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.dlm-ad-test-quality {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dlm-ad-test-context {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--dlm-text-muted);
    text-align: center;
}
.dlm-ad-test-pos em {
    font-style: italic;
    color: var(--dlm-text);
}

/* ═══════════════════════════════════════════════════════════════
   HOME — HOW IT WORKS STEPS
   ═══════════════════════════════════════════════════════════════ */









.dlm-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dlm-shadow-hover);
}









@media (max-width: 768px) {
    .dlm-steps-grid { grid-template-columns: 1fr; max-width: 360px; margin: 8px auto 0; }
}



/* ─── Data Table (city page) ────────────────────────────────── */
.dlm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}





.dlm-data-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dlm-text-muted);
    border-bottom: 2px solid var(--dlm-border);
    white-space: nowrap;
}

.dlm-data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--dlm-text);
    vertical-align: middle;
}



.dlm-data-table thead,.dlm-data-table tbody tr:hover{
    background: #f8fafc;
}





@media (max-width: 768px) {
    .dlm-data-table th,
    .dlm-data-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* ─── Sortable Table Headers ───────────────────────────────── */
.dlm-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.dlm-th-sortable:hover { color: var(--dlm-primary); }

.dlm-th-sortable::after {
    content: ' ⇅';
    font-size: 0.7em;
    opacity: 0.4;
}

.dlm-th-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--dlm-primary);
}

.dlm-th-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--dlm-primary);
}







.dlm-reviews-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}





/* ─── Info Tags (pipe-separated fields) ─────────────────────── */
.dlm-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dlm-info-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #eff6ff;
    color: var(--dlm-primary);
    border-radius: 50px;
    border: 1px solid #bfdbfe;
}

/* ─── Comparator: tags and tipo badge ───────────────────────── */
.dlm-compare-tipo {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dlm-primary);
    background: #eff6ff;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.dlm-compare-row--tags {
    flex-direction: column;
    gap: 6px;
}

.dlm-compare-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    background: #f3f4f6;
    border-radius: 4px;
    margin: 2px;
}

/* ─── Premium City Card ─────────────────────────────────────── */
.dlm-card-ciudad--premium {
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: none;
}

.dlm-card-ciudad--premium:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14) !important;
}

.dlm-card-ciudad--premium .dlm-card-image {
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.dlm-card-ciudad--premium .dlm-card-image img {
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: brightness(0.92);
}

.dlm-card-ciudad--premium:hover .dlm-card-image img {
    transform: scale(1.08);
    filter: brightness(0.85);
}

.dlm-card-premium-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 28px 20px;
    gap: 8px;
    transition: background 0.3s ease;
}

.dlm-card-ciudad--premium:hover .dlm-card-premium-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
}

.dlm-card-premium-icon {
    color: #ffffff !important;
    opacity: 0.95;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.dlm-card-ciudad--premium .dlm-card-premium-name,
.dlm-card-ciudad--premium .dlm-card-link .dlm-card-premium-name,
.dlm-card-ciudad--premium a .dlm-card-premium-name {
    font-size: 1.55rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.9),
        0 2px 8px rgba(0,0,0,0.7),
        0 4px 16px rgba(0,0,0,0.5);
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.25;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dlm-card-ciudad--premium .dlm-card-premium-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    font-size: 0.78rem;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.dlm-card-ciudad--premium a,
.dlm-card-ciudad--premium a:hover,
.dlm-card-ciudad--premium a:visited,
.dlm-card-ciudad--premium a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

.dlm-card-premium-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    margin-top: 4px;
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateY(6px);
}

.dlm-card-ciudad--premium:hover .dlm-card-premium-arrow {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255,255,255,0.25);
}



/* ─── WhatsApp Button ───────────────────────────────────────── */
.dlm-btn--whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 10px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.dlm-btn--whatsapp:hover {
    background: #1ebe5a;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none;
}

/* ─── Hours + Puntos Clave Grid ─────────────────────────────── */
.dlm-single-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dlm-border);
    align-items: start;
}

@media (max-width: 768px) {
    .dlm-grid.dlm-ciudades-grid, .dlm-grid.dlm-provincias-grid, .dlm-grid.dlm-locales-grid,.dlm-single-related .dlm-grid.dlm-locales-grid,.dlm-single-data-grid,.dlm-compare-grid,.dlm-reviews-grid-2x2,.dlm-single-bottom-grid{ grid-template-columns: 1fr; }
}

/* ─── Características List (pills) ──────────────────────────── */
.dlm-puntos-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dlm-punto-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--dlm-primary);
    line-height: 1.4;
    background: #eef2ff;
    background: color-mix(in srgb, var(--dlm-primary) 8%, #fff);
    border: 1px solid #c7d2fe;
    border-color: color-mix(in srgb, var(--dlm-primary) 20%, #fff);
    border-radius: 8px;
    transition: background 0.15s;
}

.dlm-punto-item:hover {
    background: #e0e7ff;
    background: color-mix(in srgb, var(--dlm-primary) 14%, #fff);
}

/* ─── Comparator Características ───────────────────────────── */
.dlm-compare-puntos {
    padding: 8px 0;
    text-align: left;
}

.dlm-compare-puntos strong {
    display: block;
    font-size: 0.8rem;
    color: var(--dlm-text-muted);
    margin-bottom: 8px;
}

.dlm-compare-puntos ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dlm-compare-punto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 4px 10px;
    color: var(--dlm-primary);
    background: #eef2ff;
    background: color-mix(in srgb, var(--dlm-primary) 8%, #fff);
    border: 1px solid #c7d2fe;
    border-color: color-mix(in srgb, var(--dlm-primary) 20%, #fff);
    border-radius: 6px;
}





.dlm-trust-item svg { color: var(--dlm-primary); flex-shrink: 0; }



.dlm-section-desc {
    font-size: 0.95rem;
    color: var(--dlm-text-muted);
    margin: -8px 0 20px;
    line-height: 1.7;
}

































/* ─── Year Badge ────────────────────────────────────────────── */
.dlm-year-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dlm-text-muted);
    background: #f1f5f9;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 0.03em;
}

/* ─── Mobile: reduce container padding for more content space ── */
@media (max-width: 768px) {
    .ast-container,
    .ast-separate-container .ast-article-single,
    .ast-separate-container .ast-article-post,
    .ast-plain-container .site-content .ast-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .ast-separate-container .ast-article-single {
        padding: 1em 8px !important;
    }
}

/* ─── Skeleton loaders ──────────────────────────────────────── */
.dlm-skeleton-card {
    background: var(--dlm-bg-card);
    border: 1px solid var(--dlm-border);
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: var(--dlm-shadow);
}

.dlm-skeleton-image {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: dlm-skeleton-shimmer 1.4s ease-in-out infinite;
}

.dlm-skeleton-body {
    padding: 16px;
}

.dlm-skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: dlm-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.dlm-skeleton-line--title { height: 18px; width: 75%; margin-bottom: 14px; }
.dlm-skeleton-line--short { width: 40%; }
.dlm-skeleton-line--medium { width: 60%; }
.dlm-skeleton-line--btn { height: 36px; width: 100%; margin-top: 12px; border-radius: 8px; }

@keyframes dlm-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dlm-grid--loading .dlm-card-local {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ─── Explorer (Map + Filters Combined) ─────────────────────── */






/* v3.30.20 — Eliminado .dlm-explorer-filters-inner. Era código muerto:
   el HTML emitido por el plugin no tiene un wrapper con esa clase. */

.dlm-filter-search {gap: 12px;position: relative;display: flex;align-items: center;margin-bottom: 16px;background: #f9fafb;border: 1px solid var(--dlm-border);border-radius: 50px;padding: 4px 6px 4px 12px;transition: all 0.15s;}

.dlm-filter-search:focus-within {border-color: var(--dlm-primary);background: #fff;box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);}

.dlm-filter-search-icon {color: var(--dlm-text-muted);flex-shrink: 0;margin-right: 6px;}



.dlm-filter-control {display: flex;flex-direction: column;gap: 10px;padding: 16px 18px;background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border: 1px solid #e2e8f0;border-radius: 12px;transition: border-color 0.2s;margin-bottom: 16px;}





.dlm-filter-label strong {
    background: var(--dlm-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.75rem;
    margin-left: 4px;
    font-weight: 700;
}

.dlm-filter-select {outline: none;width: 100%;padding: 8px 12px;border: 1px solid var(--dlm-border);border-radius: 8px;background: #fff;font-size: 0.85rem;color: var(--dlm-text);cursor: pointer;transition: all 0.15s;}

.dlm-filter-select:focus {outline: none;border-color: var(--dlm-primary);box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);}



.dlm-filter-range {position: relative;outline: 0 !important;outline-color: transparent !important;outline-style: none !important;margin: 0;padding: 0;z-index: 2;-webkit-tap-highlight-color: transparent;border: none;color: transparent;width: 100%;-webkit-appearance: none;appearance: none;height: 6px;border-radius: 50px;background: linear-gradient(to right, var(--dlm-primary) 0%, var(--dlm-primary) var(--fill, 0%), #e5e7eb var(--fill, 0%));cursor: pointer;}

.dlm-filter-range::-webkit-slider-thumb {margin-top: -7px;-webkit-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%;background: var(--dlm-text);cursor: pointer;border: 3px solid #fff;box-shadow: 0 1px 3px rgba(0,0,0,0.2);transition: transform 0.15s;}

.dlm-filter-range::-webkit-slider-thumb:hover {box-shadow: 0 2px 8px rgba(0,0,0,0.18);border-width: 4px;transform: scale(1.15);}

.dlm-filter-range::-moz-range-thumb {width: 18px;height: 18px;border-radius: 50%;background: var(--dlm-text);cursor: pointer;border: 3px solid #fff;box-shadow: 0 1px 3px rgba(0,0,0,0.2);}

.dlm-filter-count {font-weight: 500;font-size: 0.85rem;color: var(--dlm-text-muted);text-align: center;padding: 8px 0;border-top: 1px solid var(--dlm-border);margin-top: 4px;}

.dlm-filter-reset {
    width: 100%;
    background: transparent;
    border: 1px solid var(--dlm-border);
    color: var(--dlm-text-muted);
    padding: 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}

.dlm-share-btn:hover,.dlm-filter-reset:hover{
    border-color: var(--dlm-primary);
    color: var(--dlm-primary);
}







.dlm-map-counter strong {
    color: var(--dlm-primary);
    font-weight: 700;
}

/* Card highlight when marker hovered */
.dlm-card-local.dlm-card--highlighted {
    box-shadow: 0 0 0 3px var(--dlm-primary), 0 8px 24px rgba(37, 99, 235, 0.25);
    transform: translateY(-3px);
    transition: all 0.2s;
    z-index: 5;
    position: relative;
}

/* Marker bounce when card hovered.
   v3.71.0 (review) — la animación va al .dlm-pin INTERIOR: el elemento del
   marcador lleva el translate3d de POSICIONAMIENTO de Leaflet y animarle el
   transform lo mandaba al origen del mapa durante el bounce (mismo defecto
   que el fix de los pines invisibles). */
.dlm-marker-bounce .dlm-pin {
    animation: dlm-marker-bounce 0.6s ease-out;
}

@keyframes dlm-marker-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}













/* v3.30.20 — Eliminado duplicado de .dlm-map-counter strong
   (regla idéntica ya existe en L3229). */


/* Marker click → temporarily highlight card */
.dlm-card-local.dlm-card--highlight {
    box-shadow: 0 0 0 3px var(--dlm-primary), 0 12px 32px rgba(37, 99, 235, 0.3);
    transform: translateY(-4px) scale(1.02);
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}








/* Reset bleed-through legacy styles */
.dlm-explorer-filters .dlm-filter-search,
.dlm-explorer-filters .dlm-filter-control {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ROW 1: search + count */
.dlm-filter-row--top {
    display: grid;
    /* v3.27.83 — Sidebar apilado: search arriba, contador debajo. La fila
       horizontal vuelve en móvil/tablet (media queries abajo). */
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dlm-border);
}

.dlm-filter-row--top .dlm-filter-search {
    display: flex !important;
    align-items: center;
    /* v3.27.85 — Gap 10→6px y padding lateral 12→8px para ganar ~12px de
       ancho útil para el input. */
    gap: 6px;
    background: #f9fafb !important;
    border: 1px solid var(--dlm-border) !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    transition: all 0.15s;
}

.dlm-filter-row--top .dlm-filter-search:focus-within {
    border-color: var(--dlm-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}



.dlm-filter-row--top .dlm-filter-input {
    flex: 1;
    padding: 7px 0;
    /* v3.27.85 — Otro 1px abajo (0.82rem → 0.76rem ≈ 12.16px) para que el
       placeholder largo entre completo en sidebar estrecho. text-overflow
       garantiza ellipsis si en alguna resolución se aprieta de nuevo. */
    font-size: 0.76rem;
    border: none;
    background: transparent;
    color: var(--dlm-text);
    outline: none;
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}

.dlm-filter-row--top .dlm-filter-count {
    font-size: 0.85rem;
    color: var(--dlm-text-muted);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dlm-filter-row--top .dlm-filter-count::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    animation: dlm-pulse-dot 2s ease-in-out infinite;
}

.dlm-filter-row--top .dlm-filter-count strong {
    color: var(--dlm-text);
    font-weight: 700;
    font-size: 0.95rem;
}

@keyframes dlm-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05); }
}

/* ROW 2: controls + reset button */
.dlm-filter-row--controls {
    display: grid;
    /* v3.27.83 — Desktop sidebar (filtros a la derecha del mapa): los controles
       se apilan verticalmente porque el ancho lateral es limitado (~25% del
       contenido). En tablet/móvil se reordena más abajo en sus media queries. */
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px 16px;
    align-items: stretch;
}

.dlm-filter-row--controls .dlm-filter-control {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dlm-filter-row--controls .dlm-filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dlm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.dlm-filter-row--controls .dlm-filter-label strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--dlm-primary);
    border-radius: 50px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
    text-transform: none;
    letter-spacing: 0;
}

.dlm-filter-row--controls .dlm-filter-select {
    width: 100%;
    padding: 7px 28px 7px 10px;
    font-size: 0.85rem;
    color: var(--dlm-text);
    border: 1px solid var(--dlm-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: all 0.15s;
}

.dlm-filter-row--controls .dlm-filter-select:hover,
.dlm-filter-row--controls .dlm-filter-select:focus {
    border-color: var(--dlm-primary);
}



.dlm-filter-row--controls .dlm-filter-reset {
    background: transparent;
    border: 1.5px solid var(--dlm-border);
    color: var(--dlm-text-muted);
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    align-self: end;
    height: 34px;
}

.dlm-filter-row--controls .dlm-filter-reset::before {
    content: '↻';
    font-size: 1rem;
    line-height: 1;
}

.dlm-filter-row--controls .dlm-filter-reset:hover {
    border-color: var(--dlm-primary);
    color: var(--dlm-primary);
    background: rgba(37, 99, 235, 0.04);
}

/* Card highlight states */
.dlm-card-local.dlm-card--map-hover {transform: translateY(-3px);box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);border-color: var(--dlm-primary);transition: all 0.2s;}

.dlm-card-local.dlm-card--highlight {
    animation: dlm-card-pulse 2s ease;
}

@keyframes dlm-card-pulse {
    0%, 100% { box-shadow: var(--dlm-shadow); }
    25% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4), 0 8px 24px rgba(37, 99, 235, 0.3); }
}

/* ─── Tablet ─── */
@media (max-width: 900px) {
    
    
    
    /* Los controles vuelven a 2 columnas como antes */
    .dlm-filter-row--controls {
        grid-template-columns: 1fr 1fr;
        flex: none;
    }
    .dlm-filter-row--controls .dlm-filter-reset {
        grid-column: 1 / -1;
        justify-content: center;
    }
    /* Row 1 vuelve a search + count en horizontal */
    .dlm-filter-row--top {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
    
    

    
    

    /* Row 2: 3 controls stacked, then count + reset side by side */
    .dlm-filter-row--controls {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* On mobile: count + reset go on the same flex row at the bottom */
    .dlm-filter-mobile-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .dlm-filter-mobile-row .dlm-filter-count {
        font-size: 0.85rem;
        color: var(--dlm-text-muted);
        font-weight: 500;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .dlm-filter-mobile-row .dlm-filter-count::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }
    .dlm-filter-mobile-row .dlm-filter-count strong {
        color: var(--dlm-text);
        font-weight: 700;
        font-size: 0.95rem;
    }
    .dlm-filter-mobile-row .dlm-filter-reset {
        height: auto;
        padding: 8px 16px;
    }

    
}



/* Featured cards subtle outline */
.dlm-card-local--featured {
    border-color: rgba(245, 158, 11, 0.3);
}


































/* ─── Business CTA widget (footer/sidebar) ─────────────── */
.dlm-business-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
    border-radius: 18px;
    padding: 40px 36px;
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.25);
}



.dlm-business-cta::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.12), transparent 70%);
    pointer-events: none;
}

.dlm-business-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.dlm-business-cta__content {
    flex: 1 1 520px;
    max-width: 620px;
}

.dlm-business-cta__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #93c5fd;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(147, 197, 253, 0.25);
    margin-bottom: 16px;
}

.dlm-business-cta__title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    color: #ffffff !important;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dlm-business-cta__subtitle {
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.85) !important;
}

.dlm-business-cta__features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlm-business-cta__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.93rem;
    line-height: 1.45;
}

.dlm-business-cta__features svg {
    flex-shrink: 0;
    color: #34d399;
    margin-top: 2px;
}

.dlm-business-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.dlm-business-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1;
}

.dlm-business-cta__btn--primary {
    background: #fff;
    color: #1e3a8a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(255, 255, 255, 0.5);
    animation: dlmCtaPulse 2.4s ease-in-out infinite;
}

@keyframes dlmCtaPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(255, 255, 255, 0.45); }
    50%      { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 12px rgba(255, 255, 255, 0); }
}

.dlm-business-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    color: #1e3a8a !important;
    animation: none;
}

.dlm-business-cta__btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dlm-business-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff !important;
    transform: translateY(-2px);
}

.dlm-business-cta__btn--secondary svg {
    color: #fbbf24;
}

.dlm-business-cta__btn svg {
    transition: transform 0.15s;
    flex-shrink: 0;
}

.dlm-business-cta__btn--primary:hover svg {
    transform: translateX(3px);
}

/* Trust badges row */
.dlm-business-cta__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 6px;
}

.dlm-business-cta__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 500;
}

.dlm-business-cta__trust-item svg {
    color: #34d399;
    flex-shrink: 0;
}

/* Stats panel on the right */
.dlm-business-cta__stats {
    display: block;
    flex: 0 0 auto;
}

.dlm-business-cta__stats-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 220px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dlm-business-cta__stats-card:hover {
    transform: translateY(-3px);
    border-color: rgba(147, 197, 253, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.dlm-business-cta__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    padding-left: 14px;
}

.dlm-business-cta__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
}

.dlm-business-cta__stat:nth-child(2)::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.dlm-business-cta__stat:nth-child(3)::before {
    background: linear-gradient(180deg, #34d399, #10b981);
}

.dlm-business-cta__stat strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.dlm-business-cta__stat span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 800px) {
    
    .dlm-business-cta__inner {
        gap: 28px;
    }
    .dlm-business-cta__title {
        font-size: 1.6rem;
    }
    .dlm-business-cta__stats-card {
        flex-direction: row;
        justify-content: space-around;
        gap: 12px;
        min-width: 0;
        padding: 18px 20px;
    }
    .dlm-business-cta__stat {
        align-items: center;
        text-align: center;
    }
    .dlm-business-cta__stat strong {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    
    .dlm-business-cta__title {
        font-size: 1.4rem;
    }
    .dlm-business-cta__buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .dlm-business-cta__btn {
        width: 100%;
        justify-content: center;
    }
    .dlm-business-cta__trust {
        gap: 12px 16px;
        justify-content: flex-start;
    }
    .dlm-business-cta__trust-item {
        font-size: 0.78rem;
    }
    .dlm-business-cta__content {
        flex: 1 1 100%;
    }
}

/* ─── Breadcrumbs ──────────────────────────────────────── */
.dlm-breadcrumbs {
    margin: 8px 0 16px;
    font-size: 0.85rem;
    color: var(--dlm-text-muted);
}

.dlm-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dlm-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dlm-text-muted);
    line-height: 1;
}

.dlm-breadcrumbs__home {
    color: var(--dlm-text-muted);
    flex-shrink: 0;
}

.dlm-breadcrumbs__sep {
    color: #cbd5e1;
    flex-shrink: 0;
    margin-left: 2px;
}



.dlm-breadcrumbs a:hover {
    color: var(--dlm-primary);
}

.dlm-breadcrumbs [aria-current="page"] {
    color: var(--dlm-text);
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .dlm-breadcrumbs { font-size: 0.78rem; }
    .dlm-breadcrumbs [aria-current="page"] { max-width: 140px; }
}

/* ─── Footer CTA injection (Astra) ────────────────────── */
.dlm-footer-cta-row {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Override the inner CTA when it's inside the footer row:
   make it edge-to-edge with no border-radius/shadow */
.dlm-footer-cta-row .dlm-business-cta {
    border-radius: 0;
    box-shadow: none;
    padding: 50px 20px;
}



@media (max-width: 600px) {
    .dlm-footer-cta-row .dlm-business-cta {
        padding: 32px 16px;
    }
}

/* ─── Contact Form (DLM_Leads) ────────────────────────── */
.dlm-contact-section {
    margin: 40px 0;
}
.dlm-contact-container {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 48px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.dlm-contact-info {
    padding-right: 20px;
}
.dlm-contact-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.dlm-contact-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 28px;
}
.dlm-contact-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}
.dlm-contact-features li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dlm-contact-features li svg {
    color: #10b981;
    flex-shrink: 0;
    margin-top: 2px;
}
.dlm-contact-features li:nth-child(2) svg { color: #f59e0b; }
.dlm-contact-features li:nth-child(3) svg { color: #3b82f6; }

.dlm-contact-features li strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
}
.dlm-contact-features li span {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.45;
}
.dlm-contact-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}
.dlm-contact-trust-item {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
}

.dlm-contact-form {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
    position: relative;
}
.dlm-contact-tipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 24px;
    border: 0;
    padding: 0;
}
.dlm-contact-tipo legend {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 0;
    grid-column: 1 / -1;
}
.dlm-radio-card {
    display: block;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.15s;
}
.dlm-filter-control:hover,.dlm-radio-card:hover{
    border-color: #cbd5e1;
}
.dlm-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dlm-radio-card:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.dlm-contact-features li > div,.dlm-radio-content{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dlm-radio-content strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
}
.dlm-radio-content small {
    color: #64748b;
    font-size: 0.78rem;
}
.dlm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.dlm-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dlm-form-field--full {
    grid-column: 1 / -1;
}
.dlm-form-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}
.dlm-form-field label span {
    color: #ef4444;
}
.dlm-form-field label small {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 4px;
}
.dlm-form-field input,
.dlm-form-field textarea {
    padding: 11px 13px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dlm-form-field input:focus,
.dlm-form-field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.dlm-form-field textarea {
    resize: vertical;
    min-height: 70px;
}
.cf-turnstile {
    margin: 16px 0;
}
.dlm-form-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    margin-top: 8px;
}
.dlm-form-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}




.dlm-form-legal {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.5;
    text-align: center;
}
.dlm-form-message {
    margin-top: 16px;
    padding: 0;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    display: none;
}
.dlm-form-message.is-success {
    display: block;
    background: #d1fae5;
    color: #065f46;
    padding: 14px 16px;
    border: 1px solid #6ee7b7;
}
.dlm-form-message.is-error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    padding: 14px 16px;
    border: 1px solid #fca5a5;
}

/* v3.58.0 — Upsell Premium post-envío (caja oculta que revela el JS) */
.dlm-lead-upsell {
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    text-align: center;
}
.dlm-lead-upsell[hidden] {
    display: none;
}
.dlm-lead-upsell strong {
    display: block;
    font-size: 1.02rem;
    color: #78350f;
    margin-bottom: 6px;
}
.dlm-lead-upsell p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #92400e;
}
.dlm-lead-upsell-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    transition: background 0.15s ease, transform 0.15s ease;
}
.dlm-lead-upsell-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .dlm-contact-container {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 32px;
    }
    .dlm-contact-info {
        padding-right: 0;
    }
    .dlm-contact-form {
        padding: 24px 18px;
    }
    
    .dlm-form-grid,.dlm-contact-tipo{
        grid-template-columns: 1fr;
    }
    .dlm-contact-title {
        font-size: 1.5rem;
    }
}

/* ─── Footer widgets (Brand + Popular cities) ────────── */



.dlm-widget-city-item a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 0;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s, color 0.15s;
    font-size: inherit;
    line-height: 1.6;
}
.dlm-widget-city-item a:hover {
    opacity: 0.75;
    text-decoration: none;
}

.dlm-widget-city-count {
    font-size: 0.85em;
    opacity: 0.6;
    font-weight: 400;
}

.dlm-widget-view-all:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* Footer Brand widget */
.dlm-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
/* Tagline + cities title rendered as plain <p> with 18pt to match other footer "title" paragraphs.
   If your other footer widget titles use a different size, edit this CSS. */
.dlm-footer-brand-tagline,
.dlm-widget-cities-title {
    margin: 0 0 12px;
    font-size: 18pt;
    font-weight: normal;
    line-height: 1.3;
    text-align: left;
    color: inherit;
}
.dlm-footer-brand-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.dlm-footer-brand-logo {
    display: block;
    margin: 0 auto;
    transition: opacity 0.15s;
    text-decoration: none !important;
    line-height: 0;
    text-align: center;
}

.dlm-footer-brand-logo img {
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}
.dlm-footer-brand-title {
    margin: 0 auto;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    color: inherit;
}
.dlm-footer-brand-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.dlm-footer-brand-logo:hover,.dlm-footer-brand-title a:hover{
    opacity: 0.85;
}
.dlm-footer-brand-desc {
    margin: 0;
    font-size: inherit;
    line-height: 1.55;
    text-align: left;
}
.dlm-footer-brand-stats {
    align-self: center;
    margin: 4px auto 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(127, 127, 127, 0.1);
    border-radius: 8px;
    font-size: 0.92em;
    text-align: center;
    width: auto;
}
.dlm-footer-brand-stats strong {
    font-weight: 800;
    margin-right: 3px;
}
.dlm-footer-brand-stats-sep {
    opacity: 0.4;
}
.dlm-footer-brand-social {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.dlm-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.12);
    color: inherit !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    opacity: 0.85;
}
.dlm-social-link:hover {
    background: var(--dlm-primary, #2563eb);
    color: #fff !important;
    opacity: 1;
    transform: translateY(-2px);
}
.dlm-social-link svg { display: block; }

/* v3.28.4 — En vista móvil, centramos todos los textos de los widgets DLM
   del footer (footer-brand y popular-cities). En desktop la mayoría ya están
   bien alineados a la izquierda dentro de su columna; en mobile los widgets
   se apilan a ancho completo y queda más coherente todo centrado. */
@media (max-width: 768px) {
    
    

    /* Popular Cities widget */
    .dlm-footer-brand, .dlm-footer-brand-tagline, .dlm-footer-brand-desc, .dlm-footer-brand-title, .dlm-footer-brand-stats,.dlm-widget-cities-title, .dlm-widget-cities, .dlm-widget-cities li, .dlm-widget-view-all{
        text-align: center;
    }
    
    
}


.dlm-newsletter-title {
    margin: 0 0 6px;
    font-size: 18pt;
    font-weight: 700;
    color: inherit;
    line-height: 1.25;
}
.dlm-newsletter-subtitle {
    margin: 0 0 16px;
    font-size: inherit;
    line-height: 1.5;
    color: inherit;
    opacity: 0.85;
}
.dlm-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    position: relative;
}
.dlm-newsletter-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* If only one field present (no name), it spans full width */
.dlm-newsletter-fields:has(> .dlm-newsletter-field:only-child) {
    grid-template-columns: 1fr;
}
.dlm-newsletter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dlm-newsletter-field label {
    font-size: 0.88em;
    font-weight: 600;
    color: inherit;
}
.dlm-newsletter-field label small {
    opacity: 0.6;
    font-weight: 400;
    margin-left: 2px;
}
.dlm-newsletter-field label span {
    color: #ef4444;
}
.dlm-newsletter-field input {
    padding: 11px 14px;
    border: 1.5px solid rgba(127, 127, 127, 0.3);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.dlm-newsletter-field input:focus {
    outline: none;
    border-color: var(--dlm-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    background: #fff;
}
/* v3.27.69 — Consent del formulario de leads (DLM_Leads) reutiliza el estilo
   del newsletter para mantener consistencia visual entre los dos formularios. */
.dlm-newsletter-consent,
.dlm-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82em;
    line-height: 1.45;
    color: inherit;
    opacity: 0.9;
    cursor: pointer;
}
.dlm-newsletter-consent input[type="checkbox"],
.dlm-form-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--dlm-primary, #2563eb);
}
.dlm-newsletter-consent a,
.dlm-form-consent a {
    color: inherit;
    text-decoration: underline;
}
.dlm-form-consent {
    margin: 4px 0 16px;
}
.dlm-form-consent__required {
    color: #dc2626;
    font-weight: 600;
    margin-left: 2px;
}
.dlm-newsletter-submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    background: #0f172a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: inherit;
}
.dlm-newsletter-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}
.dlm-form-submit:disabled,.dlm-newsletter-submit:disabled{
    opacity: 0.7;
    cursor: not-allowed;
}
.dlm-newsletter-submit.is-loading .dlm-newsletter-submit-text { opacity: 0.6; }
.dlm-form-submit.is-loading .dlm-form-submit-spinner,.dlm-newsletter-submit.is-loading .dlm-newsletter-submit-spinner{ display: inline-block !important; }
.dlm-newsletter-message {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0;
    border-radius: 6px;
    display: none;
}
.dlm-newsletter-message.is-success {
    display: block;
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
    padding: 10px 14px;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.dlm-newsletter-message.is-error {
    display: block;
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    padding: 10px 14px;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ══════════════════════════════════════════════════════════════════════
   PROFESSIONAL REFINEMENT LAYER v3.20
   Capa de mejoras visuales profesionales. No rompe estilos existentes,
   solo los sobreescribe con versiones refinadas.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Sistema de design tokens ampliado ─────────────────────────── */


/* ─── Selección de texto ────────────────────────────────────────── */
::selection {
    background: color-mix(in srgb, var(--dlm-primary) 25%, transparent);
    color: var(--dlm-text);
}

/* ─── Focus visible accesible (solo teclado) ────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dlm-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 1px;
}

/* ─── Suavizado global de renderizado ───────────────────────────── */
.dlm-card,
.dlm-page-hero,
.dlm-business-cta,
.dlm-home-hero,
.dlm-single-hero,
.dlm-home-value,
.dlm-home-how,
.dlm-filter-bar {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── Respeto a prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — Refinamiento de sombras y hover
   ═══════════════════════════════════════════════════════════════════ */
.dlm-card {
    box-shadow: var(--dlm-shadow-sm);
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition:
        transform var(--dlm-duration-base) var(--dlm-ease-out),
        box-shadow var(--dlm-duration-base) var(--dlm-ease-out),
        border-color var(--dlm-duration-base) var(--dlm-ease-out);
    will-change: transform;
}

.dlm-card:hover {transform: translateY(-3px);box-shadow: var(--dlm-shadow-lg);border-color: rgba(15, 23, 42, 0.08);}

/* Zoom sutil de imagen en hover de card */
.dlm-card-image {position: relative;width: 100%;padding-top: 56.25%;background: #f3f4f6;overflow: hidden;}
.dlm-card-image img {
    transition: transform var(--dlm-duration-slow) var(--dlm-ease-out);
    will-change: transform;
}
.dlm-card:hover .dlm-card-image img {transform: scale(1.04);}

/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFÍA REFINADA — Headings del directorio
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-title,
.dlm-page-title,
.dlm-section-title,
.dlm-business-cta-title,
.dlm-single-hero h1 {
    letter-spacing: var(--dlm-tracking-tight);
    line-height: var(--dlm-leading-tight);
    font-feature-settings: "ss01", "cv11";
}

.dlm-home-subtitle,
.dlm-business-cta-subtitle,
.dlm-section-subtitle {
    letter-spacing: var(--dlm-tracking-base);
    line-height: var(--dlm-leading-snug);
}

/* Mejora de contraste visual en párrafos largos */
.dlm-term-description p,
.dlm-page-content p,
.dlm-single-content p {
    line-height: var(--dlm-leading-normal);
    letter-spacing: 0.003em;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES — Estados refinados
   ═══════════════════════════════════════════════════════════════════ */
.dlm-btn,
.dlm-btn-primary,
.dlm-cta-primary-btn,
.dlm-cta-secondary-btn,
.dlm-newsletter-submit {
    position: relative;
    transition:
        transform var(--dlm-duration-fast) var(--dlm-ease-out),
        box-shadow var(--dlm-duration-base) var(--dlm-ease-out),
        background-color var(--dlm-duration-fast) var(--dlm-ease-out);
    will-change: transform;
}

.dlm-btn:hover,
.dlm-btn-primary:hover,
.dlm-cta-primary-btn:hover,
.dlm-cta-secondary-btn:hover,
.dlm-newsletter-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--dlm-shadow-md);
}

.dlm-btn:active,
.dlm-btn-primary:active,
.dlm-cta-primary-btn:active,
.dlm-cta-secondary-btn:active,
.dlm-newsletter-submit:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: 80ms;
}










/* ═══════════════════════════════════════════════════════════════════
   CTA NEGOCIOS — Más elegante
   ═══════════════════════════════════════════════════════════════════ */
.dlm-business-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dlm-business-cta::before {content: '';position: absolute;top: -50%;right: -20%;width: 800px;height: 800px;background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06), transparent 60%);pointer-events: none;z-index: -1;}

.dlm-cta-eyebrow {
    transition: background-color var(--dlm-duration-base) var(--dlm-ease-out),
                border-color var(--dlm-duration-base) var(--dlm-ease-out);
}

/* ═══════════════════════════════════════════════════════════════════
   FILTROS Y BUSCADOR — Refinamiento de inputs
   ═══════════════════════════════════════════════════════════════════ */
.dlm-filter-input,
.dlm-filter-select,
.dlm-contact-field input,
.dlm-contact-field textarea,
.dlm-newsletter-field input {
    transition:
        border-color var(--dlm-duration-fast) var(--dlm-ease-out),
        box-shadow var(--dlm-duration-fast) var(--dlm-ease-out),
        background-color var(--dlm-duration-fast) var(--dlm-ease-out);
}

.dlm-filter-input:focus,
.dlm-filter-select:focus,
.dlm-contact-field input:focus,
.dlm-contact-field textarea:focus,
.dlm-newsletter-field input:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dlm-primary) 15%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   BREADCRUMBS — Refinamiento visual
   ═══════════════════════════════════════════════════════════════════ */
.dlm-breadcrumbs a,
.dlm-breadcrumb a {
    position: relative;
    transition: color var(--dlm-duration-fast) var(--dlm-ease-out);
}

.dlm-breadcrumbs a::after,
.dlm-breadcrumb a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: left;
    transition:
        opacity var(--dlm-duration-fast) var(--dlm-ease-out),
        transform var(--dlm-duration-base) var(--dlm-ease-out);
}

.dlm-breadcrumbs a:hover::after,
.dlm-breadcrumb a:hover::after {
    opacity: 0.6;
    transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINACIÓN — Touch targets y estados
   ═══════════════════════════════════════════════════════════════════ */
.dlm-pagination a,
.dlm-pagination span {
    transition:
        background-color var(--dlm-duration-fast) var(--dlm-ease-out),
        color var(--dlm-duration-fast) var(--dlm-ease-out),
        transform var(--dlm-duration-fast) var(--dlm-ease-out);
}

.dlm-pagination a:hover {
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTADORES HERO — Pulido visual
   ═══════════════════════════════════════════════════════════════════ */
.dlm-hero-counter {
    transition: transform var(--dlm-duration-base) var(--dlm-ease-spring);
}
.dlm-hero-counter:hover {
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA (Intersection Observer)
   Los elementos con .dlm-reveal aparecen al entrar en viewport.
   ═══════════════════════════════════════════════════════════════════ */


.dlm-reveal.dlm-revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto; /* libera GPU tras animar */
}

/* Stagger sutil para grids */
.dlm-grid .dlm-reveal:nth-child(2) { transition-delay: 60ms; }
.dlm-grid .dlm-reveal:nth-child(3) { transition-delay: 120ms; }
.dlm-grid .dlm-reveal:nth-child(4) { transition-delay: 180ms; }
.dlm-grid .dlm-reveal:nth-child(5) { transition-delay: 240ms; }
.dlm-grid .dlm-reveal:nth-child(6) { transition-delay: 300ms; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR — Más sutil (navegadores webkit)
   ═══════════════════════════════════════════════════════════════════ */
.dlm-scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dlm-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.dlm-scrollable::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 4px;
}
.dlm-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   SKELETON de carga para fichas (opcional, para futuras imágenes lazy)
   ═══════════════════════════════════════════════════════════════════ */
.dlm-card-image:has(img[loading="lazy"]:not(.loaded)) {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.04) 0%,
        rgba(15, 23, 42, 0.08) 50%,
        rgba(15, 23, 42, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: dlm-skeleton 1.5s infinite;
}

@keyframes dlm-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS DE IMÁGENES
   ═══════════════════════════════════════════════════════════════════ */
.dlm-card-image img,
.dlm-page-hero img,
.dlm-single-hero img {
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════════════════
   ENLACES EN PROSA — Subrayado elegante
   ═══════════════════════════════════════════════════════════════════ */
.dlm-term-description a,
.dlm-page-content a:not(.dlm-btn):not(.dlm-card-link):not([class*="dlm-btn"]),
.dlm-single-content a:not(.dlm-btn):not(.dlm-card-link):not([class*="dlm-btn"]) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dlm-duration-fast) var(--dlm-ease-out);
}



/* ═══════════════════════════════════════════════════════════════════
   CONTAINS — Performance: aísla repintados
   ═══════════════════════════════════════════════════════════════════ */
.dlm-card,
.dlm-business-cta,
.dlm-home-hero,
.dlm-single-hero,
.dlm-filter-bar {
    contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════════
   FIN DE CAPA PROFESIONAL v3.20
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM HEADER v3.21.0
   Reemplazo de la cabecera del tema. Sticky + shrink-on-scroll,
   buscador live, menú móvil, CTA premium.
   ═══════════════════════════════════════════════════════════════════ */

/* Design tokens header */
:root {--dlm-primary: var(--ast-global-color-0, #2563eb);--dlm-primary-hover: var(--ast-global-color-1, #1d4ed8);--dlm-text: var(--ast-global-color-2, #1f2937);--dlm-text-muted: var(--ast-global-color-3, #6b7280);--dlm-radius: 12px;--dlm-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);--dlm-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);--dlm-border: #e5e7eb;--dlm-bg-card: #ffffff;--dlm-star-color: #f59e0b;/* Sombras multicapa (estilo Vercel/Stripe) */
    --dlm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);--dlm-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);--dlm-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);--dlm-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);--dlm-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);/* Transiciones con easing profesional */
    --dlm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);--dlm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);--dlm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);--dlm-duration-fast: 150ms;--dlm-duration-base: 240ms;--dlm-duration-slow: 400ms;/* Radios */
    --dlm-radius-sm: 8px;--dlm-radius-md: 12px;--dlm-radius-lg: 16px;--dlm-radius-xl: 24px;/* Tipografía */
    --dlm-tracking-tight: -0.02em;--dlm-tracking-base: -0.01em;--dlm-leading-tight: 1.15;--dlm-leading-snug: 1.35;--dlm-leading-normal: 1.55;/* v3.30.21 — Eliminado el efecto shrink-on-scroll. Altura compacta única
       (64px desktop, 48px móvil) que prioriza viewport para anuncios y
       contenido. Es el patrón de NYTimes/Medium/Stripe/GitHub: header sticky
       con altura constante + cambio sutil de shadow/background al scrollear
       (feedback de "estoy fijo") sin layout shift. Mejor para Core Web Vitals
       (CLS=0 al scrollear) y para CTR de anuncios in-content (viewport
       predecible). */
    --dlm-header-height: 64px;--dlm-header-bg: #ffffff;--dlm-header-border: rgba(15, 23, 42, 0.06);--dlm-header-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);--dlm-header-shadow-scrolled: 0 2px 8px rgba(15, 23, 42, 0.08), 0 4px 24px rgba(15, 23, 42, 0.06);--dlm-header-z: 1000;/* v3.30.18 — Offset dinámico para anuncios ancla en la parte superior.
       Lo actualiza dlm-scripts.js cuando detecta un iframe/div fixed
       (ej. Google AdSense Anchor Ads, Vignette) anclado a top:0. Si no hay
       anuncio, queda 0px y el header se pega al borde del viewport como
       siempre. */
    --dlm-header-anchor-offset: 0px;}

/* v3.30.19 — Wrapper deprecado: el render YA NO emite .dlm-header-wrapper
   porque rompía position:sticky (su altura limitada al header hacía que
   sticky se "desenganchara" tras scrollear más allá). Estas reglas se
   mantienen sólo por compatibilidad si algún cache HTML viejo aún lo emite;
   son inocuas si el HTML ya no lo incluye. */
.dlm-header-wrapper {
    position: relative;
    width: 100%;
    z-index: var(--dlm-header-z);
}



/* v3.30.19 — Defensa contra overflow-x problemático en html/body.
   Causa #1 de "position: sticky no funciona": Astra y muchos temas aplican
   `overflow-x: hidden` al body para evitar scroll horizontal accidental, pero
   eso anula sticky en TODOS sus descendientes. La propiedad `overflow-x: clip`
   permite el mismo comportamiento (recortar contenido horizontal desbordado)
   SIN romper sticky. Aplicamos !important porque tenemos que ganar a las
   reglas de Astra/otros temas, y solo cuando dlm-has-custom-header está
   activo (el toggle del header DLM), así que no afecta a sitios sin DLM. */
html:has(body.dlm-has-custom-header),
body.dlm-has-custom-header {
    overflow-x: clip !important;
}
/* Fallback para navegadores muy antiguos sin overflow:clip (Safari < 16, FF < 81).
   `visible` permite sticky pero puede revelar scroll horizontal si el tema
   tenía contenido desbordado oculto por hidden. Mejor sticky funcionando
   con un posible scroll horizontal residual que sticky completamente roto. */
@supports not (overflow-x: clip) {
    html:has(body.dlm-has-custom-header),
    body.dlm-has-custom-header {
        overflow-x: visible !important;
    }
}

/* ─── Announcement bar ─── */
.dlm-announcement-bar {
    background: linear-gradient(90deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    padding: 8px 16px;
    letter-spacing: 0.01em;
}

.dlm-footer-cta-row .dlm-business-cta__inner,.dlm-announcement-inner{
    max-width: 1200px;
    margin: 0 auto;
}

.dlm-announcement-link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}
.dlm-announcement-link:hover {
    opacity: 0.85;
    color: #fff;
}
.dlm-announcement-link svg {
    transition: transform 0.2s ease;
}
.dlm-announcement-link:hover svg {
    transform: translateX(2px);
}

/* ─── Main sticky header ─── */
.dlm-custom-header {
    position: sticky;
    /* v3.30.18 — top dinámico: 0 normalmente, mayor cuando un anuncio ancla
       fixed se inyecta en la parte superior (Google AdSense Anchor / Vignette /
       PubAds). El JS actualiza --dlm-header-anchor-offset al detectarlo. */
    top: var(--dlm-header-anchor-offset, 0px);
    width: 100%;
    background: var(--dlm-header-bg);
    border-bottom: 1px solid var(--dlm-header-border);
    box-shadow: var(--dlm-header-shadow);
    /* v3.30.20 — Curva cubic-bezier para suavizar arranque y final.
       Easing "ease-out" feel, más fluido que el "ease" lineal-ish de antes. */
    transition: box-shadow 0.28s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.28s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: var(--dlm-header-z);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255, 255, 255, 0.92);
}

.dlm-custom-header.dlm-header--scrolled {
    box-shadow: var(--dlm-header-shadow-scrolled);
    background: rgba(255, 255, 255, 0.96);
}

/* ─── v3.30.22 — Modo "estático" por dispositivo ──────────────────
   Toggles independientes desktop/móvil:
   - .dlm-header--desktop-static  → estática SOLO en desktop (>640px)
   - .dlm-header--mobile-static   → estática SOLO en móvil (≤640px)

   Cada regla está envuelta en su propia media query, así el CSS de
   cada device es independiente. Si ambas clases están activas, el
   header queda estático en todos los tamaños (equivalente al antiguo
   `.dlm-header--static` global, mantenido como compatibilidad). */

/* Static EN DESKTOP (>640px) */
@media (min-width: 641px) {
    .dlm-custom-header.dlm-header--desktop-static {
        position: relative;
        top: auto;
        background: var(--dlm-header-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .dlm-custom-header.dlm-header--desktop-static.dlm-header--scrolled {
        box-shadow: var(--dlm-header-shadow);
        background: var(--dlm-header-bg);
    }
}

/* Static EN MÓVIL (≤640px) */
@media (max-width: 640px) {
    .dlm-custom-header.dlm-header--mobile-static {
        position: relative;
        top: auto;
        background: var(--dlm-header-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .dlm-custom-header.dlm-header--mobile-static.dlm-header--scrolled {
        box-shadow: var(--dlm-header-shadow);
        background: var(--dlm-header-bg);
    }
}

/* Compatibilidad hacia atrás: la clase global anterior `.dlm-header--static`
   sigue funcionando si algún caché HTML viejo aún la emite. */
.dlm-custom-header.dlm-header--static {
    position: relative;
    top: auto;
    background: var(--dlm-header-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dlm-custom-header.dlm-header--static.dlm-header--scrolled {
    box-shadow: var(--dlm-header-shadow);
    background: var(--dlm-header-bg);
}

.dlm-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    /* v3.30.21 — Altura constante (sin shrink). El cambio sutil de shadow/
       background al scrollear sigue activo como feedback "estoy fijo", pero
       sin animar height ni padding (cero layout shift). */
    height: var(--dlm-header-height);
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ─── Brand ─── */
.dlm-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--dlm-text, #0f172a);
    font-weight: 700;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.dlm-header-brand:hover {
    opacity: 0.8;
    color: var(--dlm-text, #0f172a);
}

.dlm-header-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.dlm-header-logo-img {
    /* v3.30.21 — Altura constante. El logo ya no se anima al scrollear
       porque el header tiene altura fija. */
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

.dlm-header-logo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dlm-header-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--dlm-text, #0f172a);
    white-space: nowrap;
}

/* ─── Desktop nav ─── */
.dlm-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.dlm-header-nav-link {
    padding: 8px 14px;
    color: var(--dlm-text-muted, #475569);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.18s ease;
    position: relative;
}
.dlm-header-nav-link:hover {
    color: var(--dlm-primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}


/* ─── Search ─── */
.dlm-header-search {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
}

.dlm-header-search-toggle {
    display: none; /* Desktop: hidden (panel always visible) */
    background: transparent;
    border: 0;
    padding: 8px;
    border-radius: 8px;
    color: var(--dlm-text-muted, #475569);
    cursor: pointer;
    transition: background 0.18s ease;
}


.dlm-header-search-panel {
    position: relative;
    width: 320px;
    transition: width 0.2s ease;
}

.dlm-header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 0.18s ease;
}
.dlm-header-search-wrapper:focus-within {
    background: #fff;
    border-color: var(--dlm-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}




.dlm-header-search-input::placeholder {
    color: #94a3b8;
}

.dlm-header-search-clear {
    display: none;
    position: absolute;
    right: 8px;
    background: transparent;
    border: 0;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
}

.dlm-header-search-clear:hover {
    background: rgba(15, 23, 42, 0.06);
}

/* Autocomplete dropdown */
.dlm-header-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--dlm-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04));
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}


.dlm-header-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--dlm-text, #0f172a);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}



.dlm-header-search-result-icon {
    color: #94a3b8;
    flex-shrink: 0;
}



.dlm-header-search-empty {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13.5px;
}

/* ─── CTA button (premium) ─── */
.dlm-header-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.2), 0 2px 8px rgba(217, 119, 6, 0.15);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.dlm-header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.25), 0 6px 16px rgba(217, 119, 6, 0.25);
    color: #fff !important;
}
.dlm-header-cta:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 3px;
}

/* ─── Mobile burger ─── */
.dlm-header-burger {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: background 0.18s ease;
}
.dlm-header-search-toggle:hover,.dlm-header-burger:hover{
    background: rgba(15, 23, 42, 0.05);
}
.dlm-header-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dlm-text, #0f172a);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
.dlm-header-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.dlm-header-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.dlm-header-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ─── Mobile menu (slides down) ─── */
.dlm-header-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    border-top: 1px solid var(--dlm-header-border);
    max-height: calc(100vh - var(--dlm-header-height));
    overflow-y: auto;
}
.dlm-header-mobile.is-open {
    display: block;
    animation: dlm-mobile-slide 0.25s ease-out;
}
@keyframes dlm-mobile-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dlm-header-mobile-inner {
    padding: 20px 24px 28px;
}

.dlm-header-mobile-search {
    margin-bottom: 16px;
    position: relative;
}

.dlm-header-mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dlm-header-mobile-nav a {
    display: block;
    padding: 14px 16px;
    color: var(--dlm-text, #0f172a);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s ease;
}



.dlm-header-mobile-cta:hover {
    color: #fff !important;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .dlm-header-search-panel {
        width: 240px;
    }
    .dlm-header-nav-link {
        padding: 8px 10px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .dlm-header-container {
        gap: 12px;
        padding: 0 16px;
    }
    
    .dlm-header-title,.dlm-header-nav{
        display: none;
    }
    .dlm-header-search {
        margin-left: auto;
    }
    .dlm-header-search-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 320px;
        display: none;
        background: #fff;
        padding: 14px;
        border-radius: 12px;
        box-shadow: var(--dlm-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));
    }
    .dlm-header-search.is-open .dlm-header-search-panel {
        display: block;
    }
    .dlm-header-search-toggle {
        display: inline-flex;
    }
    .dlm-header-cta {
        padding: 8px 14px;
        font-size: 13px;
    }
    .dlm-header-burger {
        display: flex;
    }
}

@media (max-width: 640px) {
    :root {
        /* v3.30.21 — Altura compacta única (48px) sin shrink. En móvil los
           anchor ads suelen ocupar 50-100px arriba; un header de 48px deja el
           máximo viewport posible para el contenido y el banner inline. */
        --dlm-header-height: 48px;
    }
    
    .dlm-header-title {
        display: inline;
        font-size: 15px;
    }
    .dlm-header-logo-img {
        /* v3.30.21 — Logo proporcional al header de 48px (deja 10px de
           padding arriba/abajo). */
        max-height: 28px;
    }
    .dlm-header-search-panel {
        width: calc(100vw - 32px);
        max-width: 340px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.22.0 — Mega menu, Favorites, Keyboard shortcut, Active state
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Divider between brand and nav ─── */
.dlm-header-divider {
    width: 1px;
    height: 24px;
    background: rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
    display: none;
}
@media (min-width: 901px) {
    .dlm-header-divider {
        display: block;
    }
}


.dlm-header-nav-item .dlm-header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dlm-header-nav-item.is-active .dlm-header-nav-link {
    color: var(--dlm-primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}
.dlm-header-nav-item.is-active .dlm-header-nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -4px;
    height: 2px;
    background: var(--dlm-primary, #2563eb);
    border-radius: 1px;
}
.dlm-header-nav-chevron {
    transition: transform 0.2s ease;
    opacity: 0.6;
}
.dlm-header-nav-item--has-mega:hover .dlm-header-nav-chevron,
.dlm-header-nav-item--has-mega:focus-within .dlm-header-nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ─── Mega-menu panel ─── */
.dlm-mega {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 640px;
    max-width: 860px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1100;
    border: 1px solid rgba(15, 23, 42, 0.04);
}
.dlm-header-nav-item--has-mega:hover > .dlm-mega,
.dlm-header-nav-item--has-mega:focus-within > .dlm-mega,
.dlm-header-nav-item--has-mega.is-open > .dlm-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* Hover bridge: prevents mega from closing when moving from link to panel */
.dlm-header-nav-item--has-mega > .dlm-mega::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.dlm-mega-inner {
    padding: 24px 28px;
}

.dlm-mega-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dlm-mega-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dlm-text, #0f172a);
    letter-spacing: -0.01em;
}
.dlm-mega-subtitle {
    font-size: 13px;
    color: var(--dlm-text-muted, #64748b);
}

.dlm-mega-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 16px;
    max-height: 440px;
    overflow-y: auto;
}
.dlm-mega-item a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: var(--dlm-text, #0f172a);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dlm-mega-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlm-mega-count {
    font-size: 11.5px;
    color: var(--dlm-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Hide mega on tablet/mobile (burger menu handles it) */
@media (max-width: 900px) {
    .dlm-mega {
        display: none !important;
    }
}

/* ─── Keyboard shortcut hint ─── */

@media (min-width: 901px) {
    .dlm-header-search-kbd {
        display: inline-flex;
    }
    .dlm-header-search-wrapper:focus-within .dlm-header-search-kbd,
    .dlm-header-search-wrapper.dlm-has-value .dlm-header-search-kbd {
        opacity: 0;
    }
}


@media (hover: hover) {
    /* Rough detection of Mac by default Mac fonts: actually use JS — see scripts */
}
.dlm-kbd-pc,.dlm-is-mac .dlm-kbd-mac{ display: inline; }


/* ─── Favorites toggle button ─── */
.dlm-header-fav-toggle {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--dlm-text-muted, #475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}
.dlm-header-fav-toggle:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--dlm-primary, #2563eb);
}
.dlm-header-fav-toggle.has-favs {
    color: #ec4899;
}

.dlm-header-fav-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ec4899;
    color: #fff;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dlm-header-fav-toggle.has-favs .dlm-header-fav-count {
    opacity: 1;
    transform: scale(1);
}

/* ─── Card favorite button (injected by JS) ─── */
.dlm-card-fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: all 0.18s ease;
}
.dlm-card-fav-btn:hover {
    transform: scale(1.08);
    color: #ec4899;
}
.dlm-card-fav-btn.is-fav {
    color: #ec4899;
    background: #fff;
}
.dlm-single-fav-btn.dlm-single-hero-fav.is-fav svg,.dlm-header-fav-toggle.has-favs svg,.dlm-card-fav-btn.is-fav svg{
    fill: #ec4899;
}
.dlm-single-fav-btn.dlm-single-hero-fav.just-added,.dlm-card-fav-btn.just-added{
    animation: dlm-fav-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dlm-fav-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ─── Favorites side panel ─── */
.dlm-fav-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1200;
}
.dlm-fav-panel-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

.dlm-fav-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.14);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1210;
    display: flex;
    flex-direction: column;
}
.dlm-fav-panel.is-open {
    transform: translateX(0);
}

.dlm-fav-panel-head {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dlm-fav-panel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dlm-text, #0f172a);
}
.dlm-fav-panel-close {
    width: 36px;
    height: 36px;
    /* v3.27.57 — reset del padding que Astra inyecta en `button` por defecto
       (14px 28px). Sin esto, el SVG hijo flex se colapsaba a 0px de ancho. */
    padding: 0;
    background: rgba(15, 23, 42, 0.06);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dlm-text, #0f172a);
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.dlm-fav-panel-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    transform: scale(1.08);
}
.dlm-fav-panel-close:active {
    transform: scale(0.95);
}
.dlm-fav-panel-close svg {
    /* v3.27.57 — !important + flex-shrink:0 para evitar que el motor flex
       colapse el SVG a 0px cuando el botón tiene padding heredado del tema.
       Diagnosticado vía DevTools: width computed era 0px aunque el CSS
       declaraba 16px. Causa real: flex-shrink + padding del tema, NO
       `currentColor` invisible como se asumió en v3.27.55/56. */
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.dlm-fav-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.dlm-fav-empty {
    text-align: center;
    color: var(--dlm-text-muted, #94a3b8);
    font-size: 14px;
    padding: 48px 16px;
    line-height: 1.55;
}
.dlm-fav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlm-fav-item:hover {
    background: #f1f5f9;
    color: var(--dlm-text, #0f172a);
}
.dlm-fav-item-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
}

.dlm-fav-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dlm-text, #0f172a);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlm-fav-item-meta {
    font-size: 12px;
    color: var(--dlm-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* v3.32.5 — Mismo fix de contraste que .dlm-widget-locale-rating:
   #f59e0b → #b45309 (4.71:1 sobre blanco, pasa WCAG AA). Aplica al
   rating mostrado dentro de cada item del panel lateral de favoritos. */
.dlm-fav-item-meta .dlm-fav-rating {
    color: #b45309;
    font-weight: 600;
}
.dlm-fav-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.dlm-fav-item:hover .dlm-fav-item-remove {
    opacity: 1;
}
.dlm-fav-item-remove:hover {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}


.dlm-fav-clear-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dlm-fav-clear-btn:hover {
    border-color: #ec4899;
    color: #ec4899;
}
.dlm-fav-panel:not(.has-items) .dlm-fav-panel-footer {
    display: none;
}
.dlm-fav-panel:not(.has-items) .dlm-fav-list { display: none; }




/* ═══════════════════════════════════════════════════════════════════
   v3.29.0 — FLOATING ACTION BUTTON (FAB) + panel de navegación
   Botón flotante en esquina inferior-derecha. Aparece tras scrollear.
   No tapa anuncios (footprint mínimo). Al pulsar abre un panel
   deslizante con buscador, nav, favoritos, CTA y "volver arriba".

   v3.30.22 — Toggles por dispositivo. Si el admin solo activa el FAB en
   uno de los dos devices, el body recibe la clase scope correspondiente
   y el otro device oculta TODO el FAB (botón + panel + backdrop) por
   media query. Si ambos están activos, no se añade clase y se ve siempre.
   Si ambos están inactivos, el render del PHP no emite nada en absoluto.
   ═══════════════════════════════════════════════════════════════════ */

/* FAB solo en DESKTOP (>640px): ocultar en móvil */
@media (max-width: 640px) {
    body.dlm-fab--desktop-only .dlm-fab,
    body.dlm-fab--desktop-only .dlm-fab-panel,
    body.dlm-fab--desktop-only .dlm-fab-backdrop {
        display: none !important;
    }
}

/* FAB solo en MÓVIL (≤640px): ocultar en desktop */
@media (min-width: 641px) {
    body.dlm-fab--mobile-only .dlm-fab,
    body.dlm-fab--mobile-only .dlm-fab-panel,
    body.dlm-fab--mobile-only .dlm-fab-backdrop {
        display: none !important;
    }
}

/* ─── FAB button — v3.29.5: cuadrado redondeado compacto ─── */
.dlm-fab {
    position: fixed;
    /* v3.29.8 — Auto-offset: respeta el padding-bottom del body (AdSense
       ancla, cookie bars, etc.) + el safe-area-inset-bottom del notch iOS. */
    bottom: calc(22px + var(--dlm-fab-offset, 0px) + env(safe-area-inset-bottom, 0px));
    right: 22px;
    width: 44px;
    height: 44px;
    /* Cuadrado redondeado tipo iOS app icon (radio ~28% del tamaño) */
    border-radius: 12px;
    background: linear-gradient(140deg, var(--dlm-primary, #2563eb) 0%, var(--dlm-primary-hover, #1e40af) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    /* Sombra multicapa premium iOS-like, ligeramente más compacta */
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.08),
        0 3px 10px rgba(15, 23, 42, 0.16),
        0 10px 28px rgba(15, 23, 42, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease,
        filter 0.2s ease,
        border-radius 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}
.dlm-fab.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}
/* Halo pulsante (heredando radio del FAB para seguir la forma cuadrada) */
.dlm-fab-glow {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--dlm-primary, #2563eb);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: dlm-fab-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes dlm-fab-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%      { opacity: 0.18; transform: scale(1.18); }
}
.dlm-fab:hover,
.dlm-fab:focus-visible {
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.10),
        0 6px 16px rgba(15, 23, 42, 0.22),
        0 16px 40px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.05);
    outline: none;
}
.dlm-fab:active { transform: scale(0.94); }
.dlm-fab[hidden] { display: flex !important; }

/* SVG interior: reglas defensivas robustas para vencer resets de temas
   (Astra, OceanWP, etc. suelen tener `svg { width: auto }` que ignora
   el atributo width="22" del HTML y deja el icono en tamaño minúsculo). */
.dlm-fab .dlm-fab-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    color: #fff !important;
    fill: none !important;
    stroke: currentColor !important;
    overflow: visible !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* Cuando el panel está abierto, el FAB se "absorbe" hacia el panel:
   se oculta con animación elegante (no hay duplicación de botones cerrar). */
.dlm-fab.is-open {
    opacity: 0;
    transform: scale(0.5) translateY(8px);
    pointer-events: none;
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
    transition:
        opacity 0.18s ease,
        transform 0.22s ease,
        box-shadow 0.18s ease;
}
.dlm-fab.is-open .dlm-fab-glow { animation: none; opacity: 0; }

/* ─── Backdrop ─── */
.dlm-fab-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1090;
}
.dlm-fab-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

/* ─── Panel (look premium: backdrop blur + sombra grande + bordes finos) ─── */
.dlm-fab-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 16px;
    background: #ffffff;
    /* Borde fino + sombra acumulada para look "card flotante" premium */
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 8px 24px rgba(15, 23, 42, 0.10),
        0 24px 64px rgba(15, 23, 42, 0.20);
    /* Origen de transformación: esquina inferior derecha (de donde "nace" el panel) */
    transform-origin: bottom right;
    transform: translateY(20px) scale(0.92);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease,
        visibility 0s linear 0.32s;
    z-index: 1095;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dlm-fab-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition:
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease,
        visibility 0s;
}

.dlm-fab-panel-head {
    padding: 16px 18px 14px;
    /* Línea de separación más sutil (gradiente que se diluye en los extremos) */
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.dlm-fab-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.dlm-fab-close-btn {
    width: 34px;
    height: 34px;
    /* v3.29.6 — Mayor contraste: fondo gris claro + icono navy oscuro */
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.dlm-fab-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.20);
    /* v3.29.7 — Scale sutil en lugar de rotación (queda más limpio) */
    transform: scale(1.08);
}
.dlm-fab-close-btn:active { transform: scale(0.94); }
/* v3.29.6 — Blindaje SVG vs reset svg{width:auto} de Astra y temas similares.
   Tamaño + colores forzados con !important. */
.dlm-fab-close-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    color: #0f172a !important;
    fill: none !important;
    stroke: currentColor !important;
    overflow: visible !important;
}


.dlm-fab-panel-body {
    padding: 14px 16px 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

/* ─── Search ─── v3.29.7 — flex layout: lupa pequeña a la izquierda
   FUERA del input (no overlay). El borde y el fondo viven en el contenedor
   flex; el input es transparente sin borde. Imposible que se solapen. */
.dlm-fab-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 14px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.dlm-fab-search:focus-within {
    border-color: var(--dlm-primary, #2563eb);
    background: #fff;
}
.dlm-fab-search-icon {
    flex-shrink: 0;
    color: #94a3b8;
    pointer-events: none;
    /* Lupa pequeñita (14px) — discreta, no compite con el texto */
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    overflow: visible !important;
    transition: color 0.18s ease;
}
.dlm-fab-search-icon circle,
.dlm-fab-search-icon line,
.dlm-fab-search-icon path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}

.dlm-fab-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.92rem;
    color: #0f172a;
    outline: none !important;
    box-shadow: none !important;
}
.dlm-fab-search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}
.dlm-fab-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.dlm-fab-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    max-height: 240px;
    overflow-y: auto;
    z-index: 5;
    display: none;
}

.dlm-fab-search-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #0f172a;
    text-decoration: none;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
.dlm-compare-row:last-of-type,.dlm-fab-search-result:last-child{ border-bottom: none; }
.dlm-header-search-result-item:hover, .dlm-header-search-result-item.is-active,.dlm-header-mobile-nav a:hover, .dlm-header-mobile-nav a:focus-visible,.dlm-mega-item a:hover, .dlm-mega-item a:focus-visible,.dlm-fab-search-result:hover, .dlm-fab-search-result.is-active{
    background: rgba(37, 99, 235, 0.06);
    color: var(--dlm-primary, #2563eb);
}
.dlm-fab-search-result-type {
    margin-left: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    font-weight: 600;
}

/* ─── Nav ─── */
.dlm-fab-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}
.dlm-fab-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    color: #1e293b;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.dlm-fab-nav-item:hover {
    background: rgba(37, 99, 235, 0.07);
    color: var(--dlm-primary, #2563eb);
}
.dlm-fab-nav-icon {
    color: #64748b;
    display: inline-flex;
    transition: color 0.15s ease;
}

.dlm-fab-nav-label { flex: 1; }
.dlm-fab-nav-arrow { color: #cbd5e1; flex-shrink: 0; }

/* ─── Favorites button ─── */
.dlm-fab-fav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid #fce7f3;
    background: #fdf2f8;
    color: #be185d;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dlm-fab-fav-btn:hover {
    background: #fce7f3;
    border-color: #f9a8d4;
}
.dlm-fab-fav-label { flex: 1; text-align: left; }
.dlm-fab-fav-count {
    background: #ec4899;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    display: none;
}
.dlm-fab-fav-count.has-items { display: inline-block; }

/* ─── Primary CTA ─── */
.dlm-fab-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dlm-fab-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.32);
    color: #fff !important;
}
.dlm-fab-cta:active { transform: translateY(0); }

/* ─── Footer (back to top) ─── */
.dlm-fab-panel-foot {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}
.dlm-fab-back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: #475569;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dlm-fab-back-to-top:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
    .dlm-fab {
        /* v3.29.8 — Mismo auto-offset frente a anclas inferiores en mobile. */
        bottom: calc(14px + var(--dlm-fab-offset, 0px) + env(safe-area-inset-bottom, 0px));
        right: 14px;
        /* v3.29.7 — Más pequeño (36px) para que moleste menos en pantalla.
           Sigue cumpliendo touch target accesible (~36-44px aceptable WCAG AA). */
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    /* En mobile el icono también más compacto y SIEMPRE visible (vence Astra) */
    .dlm-fab .dlm-fab-icon {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }
    .dlm-fab-panel {
        max-width: none;
        margin: 0;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 20px 20px 0 0;
        max-height: 88vh;
        max-height: 88dvh;
        transform: translateY(100%);
    }
    .dlm-fab-panel.is-open {
        transform: translateY(0);
    }
}

/* Modo respeto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dlm-fab,
    .dlm-fab-panel,
    .dlm-fab-backdrop,
    .dlm-fab-icon { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.23.0 — Fixes: header container width, search input padding
   ═══════════════════════════════════════════════════════════════════ */

/* Header container inherits the theme's content width (set by PHP as CSS var).
   Falls back to 1280px if the var isn't emitted (header disabled). */
.dlm-header-container,
.dlm-announcement-inner {
    max-width: var(--dlm-header-width, 1280px);
}

/* Search input: properly spaced from the magnifying-glass icon.
   (Old value 38px was tight against the "B" of "Busca..."). */
.dlm-header-search-input {width: 100%;background: transparent;border: 0;outline: 0;padding: 10px 12px 10px 38px;font-size: 14.5px;color: var(--dlm-text, #0f172a);font-family: inherit;padding-left: 42px !important;}

.dlm-header-search-icon {position: absolute;color: #94a3b8;pointer-events: none;left: 14px !important;}

/* Hide the kbd hint (removed from HTML in v3.23, keep styles inert) */
.dlm-header-search-kbd {position: absolute;right: 10px;align-items: center;padding: 3px 8px;background: rgba(15, 23, 42, 0.06);border: 1px solid rgba(15, 23, 42, 0.1);border-radius: 6px;font-size: 11px;font-weight: 600;color: #64748b;font-family: ui-monospace, SFMono-Regular, Menlo, monospace;pointer-events: none;transition: opacity 0.15s ease;display: none !important;}

/* ═══════════════════════════════════════════════════════════════════
   v3.23.0 — Business Landing ("Para Negocios")
   Premium B2B conversion page.
   ═══════════════════════════════════════════════════════════════════ */







.dlm-biz-section-head h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 800;
    letter-spacing: -0.022em;
    margin: 0 0 12px;
    color: var(--dlm-biz-text);
}
.dlm-biz-section-head p {
    font-size: 17px;
    color: var(--dlm-biz-muted);
    margin: 0;
}

















.dlm-biz-hero-title strong {
    background: linear-gradient(135deg, var(--dlm-biz-orange) 0%, var(--dlm-biz-orange-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}




.dlm-biz-hero-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dlm-biz-hero-stats strong {
    font-size: 32px;
    font-weight: 800;
    color: var(--dlm-biz-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dlm-biz-hero-stats span {
    font-size: 13px;
    color: var(--dlm-biz-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}







.dlm-biz-problem-card h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--dlm-biz-text);
}


.dlm-biz-problem-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dlm-biz-problem-card li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--dlm-biz-muted);
    font-size: 15px;
    line-height: 1.55;
    border-bottom: 1px solid var(--dlm-biz-border);
}







.dlm-biz-compare-col strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--dlm-biz-text);
    margin-bottom: 4px;
}
.dlm-biz-compare-col span {
    display: block;
    font-size: 13px;
    color: var(--dlm-biz-muted);
}

.dlm-biz-compare-col--premium strong { color: var(--dlm-biz-orange-dark); }









.dlm-single-hours-section,.dlm-biz-compare-ctas > div{ display: flex; justify-content: center; }


@media (max-width: 700px) {
    
    
    
    
    
    .dlm-biz-compare-ctas > div:first-child { display: none; }
}




.dlm-biz-step h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}
.dlm-biz-step p {
    font-size: 14.5px;
    color: var(--dlm-biz-muted);
    line-height: 1.55;
    margin: 0;
}





.dlm-biz-price strong {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: var(--dlm-biz-text);
    letter-spacing: -0.03em;
    line-height: 1.1;
}


.dlm-biz-price-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14.5px;
    color: var(--dlm-biz-text);
    border-bottom: 1px solid var(--dlm-biz-border);
}








.dlm-biz-testimonial blockquote {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dlm-biz-text);
    font-style: italic;
}


.dlm-biz-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--dlm-biz-border);
}

.dlm-biz-testimonial-meta strong {
    display: block;
    font-size: 14px;
    color: var(--dlm-biz-text);
    font-weight: 600;
}
.dlm-biz-testimonial-meta em {
    font-size: 12.5px;
    color: var(--dlm-biz-muted);
    font-style: normal;
}




.dlm-biz-faq-item summary {
    list-style: none;
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dlm-biz-text);
    user-select: none;
}
.dlm-biz-faq-item summary::-webkit-details-marker { display: none; }
.dlm-biz-faq-item summary:hover { background: rgba(15,23,42,0.02); }












/* ═══════════════════════════════════════════════════════════════════
   v3.23.6 — Business Landing: template-level container escape
   ───────────────────────────────────────────────────────────────────
   La plantilla ahora cierra .ast-container ANTES de renderizar el
   landing, así queda directamente hijo de <body>. No necesitamos
   100vw ni left:50%. El landing ya ocupa todo el ancho.
   ═══════════════════════════════════════════════════════════════════ */












/* ═══════════════════════════════════════════════════════════════════
   v3.24.2 — HOME LANDING full-width
   Replica exacta del patrón de business-landing que funciona.
   ═══════════════════════════════════════════════════════════════════ */




























/* Buscador prominente */






/* Counters: texto oscuro sobre fondo claro */






/* Feature pills */



/* ═══════════════════════════════════════════════════════════════════
   Titles
   ═══════════════════════════════════════════════════════════════════ */




































/* ═══════════════════════════════════════════════════════════════════
   v3.25.0 — PREMIUM POLISH: kickers, breathing CTAs, entry reveal
   ═══════════════════════════════════════════════════════════════════ */



@keyframes dlm-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1); }
}

/* ─── SECTION KICKER (small label above title) ──────────────────────── */


@keyframes dlm-kicker-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}













/* ─── BREATHING CTA (Business CTA premium button) ─────────────────── */

@keyframes dlm-breathe {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3),
                    0 6px 16px rgba(217, 119, 6, 0.3),
                    0 0 0 0 rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 2px 4px rgba(217, 119, 6, 0.4),
                    0 8px 24px rgba(217, 119, 6, 0.4),
                    0 0 0 8px rgba(245, 158, 11, 0);
    }
}


@keyframes dlm-shine {
    0%, 85%, 100% { left: -100%; }
    92% { left: 100%; }
}
/* Pause on hover — que no moleste al hacer click */



/* ─── BADGE BREATHING (el kicker "PARA DUEÑOS DE NEGOCIO") ────────── */

@keyframes dlm-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15); }
}

/* ─── REVEAL ON SCROLL (clase que añade el JS) ────────────────────── */
.dlm-reveal {opacity: 0;transform: translateY(24px);transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);will-change: opacity, transform;}
.dlm-reveal.dlm-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}
.dlm-reveal.dlm-reveal--delay-1 { transition-delay: 0.08s; }
.dlm-reveal.dlm-reveal--delay-2 { transition-delay: 0.16s; }
.dlm-reveal.dlm-reveal--delay-3 { transition-delay: 0.24s; }
.dlm-reveal.dlm-reveal--delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
    .dlm-reveal { opacity: 1; transform: none; transition: none; }
}




/* ─── Gradient border effect on hero search ───────────────────────── */









/* ═══════════════════════════════════════════════════════════════════
   v3.26.0 — PREMIUM PRO: fix steps, new cards, stats section, gold biz
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Global: espaciado más compacto entre secciones ─── */

@media (max-width: 768px) {
    
}



/* Subtítulos más anchos para que no queden encajonados */












/* Acento decorativo debajo del kicker: tres puntos degradados */



@keyframes dlm-kicker-breathe {
    0%, 100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-2px);
        filter: brightness(1.08);
    }
}

@keyframes dlm-kicker-shine {
    0%, 88%, 100% { left: -100%; }
    94% { left: 100%; }
}

/* ─── HERO: dos kickers lado a lado ─── */


@keyframes dlm-kicker-float-2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes dlm-kicker-float-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ─── HERO quick tags (keywords SEO) ─── */





/* ─── CARDS de ciudades/regiones PREMIUM ─── */





/* Gradient border efecto al hacer hover */


























.dlm-stats-card-head-text h3 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dlm-text, #0f172a);
}
.dlm-stats-card-head-text p {
    margin: 0;
    font-size: 13px;
    color: var(--dlm-text-muted, #64748b);
}



.dlm-stats-bar-label span {
    color: var(--dlm-text, #0f172a);
    font-weight: 600;
}
.dlm-stats-bar-label strong {
    font-variant-numeric: tabular-nums;
    color: var(--dlm-text-muted, #64748b);
    font-weight: 700;
    font-size: 13px;
}

.dlm-stats-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dlm-primary, #2563eb) 0%, #8b5cf6 50%, #ec4899 100%);
    border-radius: 100px;
    width: 0;
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}











/* Fallback color if SVG gradient not defined */
.dlm-header-search-results.is-visible,.dlm-fab-search-results.is-visible,.dlm-stats-ring svg{ display: block; }


.dlm-stats-ring-center strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--dlm-text, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dlm-stats-ring-center span {
    font-size: 11px;
    font-weight: 700;
    color: var(--dlm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}



.dlm-stats-metric-text strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--dlm-text, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dlm-stats-metric-text span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--dlm-text-muted, #64748b);
    font-weight: 500;
}






/* Línea dorada de arriba */


/* Pattern dorado sutil (dots) */













/* Override breathing with gold tones */
@keyframes dlm-breathe {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4),
                    0 8px 32px rgba(245, 158, 11, 0.35),
                    0 0 0 0 rgba(251, 191, 36, 0.5),
                    inset 0 1px 0 rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 0 4px 12px rgba(217, 119, 6, 0.5),
                    0 12px 40px rgba(245, 158, 11, 0.5),
                    0 0 0 10px rgba(251, 191, 36, 0),
                    inset 0 1px 0 rgba(255,255,255,0.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.26.1 — FIXES: spacing, grid 3x, colors, container, biz bg
   ═══════════════════════════════════════════════════════════════════ */




/* ─── 2. Menos separación entre secciones ─── */

@media (max-width: 768px) {
    
}
/* Hero un poco más de aire */

@media (max-width: 768px) {
    
}
























/* Línea fina azul en el borde superior */



/* Badge, título y desc con tonos neutros profesionales */










/* Restauramos el breathing con tonos naranja */
@keyframes dlm-breathe {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3),
                    0 6px 16px rgba(217, 119, 6, 0.3),
                    0 0 0 0 rgba(245, 158, 11, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 2px 4px rgba(217, 119, 6, 0.4),
                    0 8px 24px rgba(217, 119, 6, 0.4),
                    0 0 0 8px rgba(245, 158, 11, 0),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v3.26.2 — REFINEMENT: tight spacing, floating headers, clean search,
                         better reviews card, restore original biz CTA
   ═══════════════════════════════════════════════════════════════════ */



/* Hero conserva más aire */

@media (max-width: 768px) {
    
}












@keyframes dlm-title-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(37,99,235,0.06); }
    50%      { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15,23,42,0.05), 0 8px 20px rgba(15,23,42,0.08), 0 18px 40px rgba(37,99,235,0.1); }
}
/* Acento decorativo: barra degradada encima del badge */




















/* ═══════════════════════════════════════════════════════════════════
   v3.26.3 — Encabezados tipo pill: estilo eyebrow sin color, pulso leve
   Replica el estilo de .dlm-business-cta__eyebrow pero en tonos neutros
   y aplicado al H2 de cada sección.
   ═══════════════════════════════════════════════════════════════════ */

/* Override del badge flotante v3.26.2 — ahora es pill neutra */




/* Pulso sutil: crece ~1px en sombra exterior con opacidad baja */
@keyframes dlm-title-pulse {
    0%, 100% {
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.03),
            0 2px 8px rgba(15, 23, 42, 0.04),
            0 0 0 0 rgba(37, 99, 235, 0);
    }
    50% {
        box-shadow:
            0 1px 3px rgba(15, 23, 42, 0.04),
            0 4px 14px rgba(15, 23, 42, 0.06),
            0 0 0 6px rgba(37, 99, 235, 0.04);
    }
}

/* Sustituimos la animación "title-float" anterior */




@keyframes dlm-title-pulse-dark {
    0%, 100% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.1),
            0 4px 16px rgba(0, 0, 0, 0.15),
            0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.12),
            0 6px 20px rgba(0, 0, 0, 0.18),
            0 0 0 6px rgba(255, 255, 255, 0.04);
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v3.26.4 — Encabezados: pastilla cuadrada suave + pulso más marcado
   ═══════════════════════════════════════════════════════════════════ */

/* Bordes menos redondeados (antes 50px pill, ahora 14px cuadrado suave) */



/* Pulso más visible */
@keyframes dlm-title-pulse {
    0%, 100% {
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 2px 8px rgba(15, 23, 42, 0.05),
            0 0 0 0 rgba(37, 99, 235, 0);
    }
    50% {
        box-shadow:
            0 2px 6px rgba(15, 23, 42, 0.08),
            0 8px 24px rgba(15, 23, 42, 0.08),
            0 0 0 10px rgba(37, 99, 235, 0.08);
    }
}
@keyframes dlm-title-pulse-dark {
    0%, 100% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.12),
            0 4px 16px rgba(0, 0, 0, 0.15),
            0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.16),
            0 10px 28px rgba(0, 0, 0, 0.2),
            0 0 0 10px rgba(255, 255, 255, 0.08);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.0 — Pastillas de encabezados: color primario Astra + halo glow
   Las pills ahora usan el color principal del sitio (--dlm-primary, que
   ya está aliasado a --ast-global-color-0 de Astra) con texto blanco y
   un halo azul translúcido que pulsa, similar al estilo de los pasos
   numerados (1, 2, 3) del flujo "Cómo funciona".
   ═══════════════════════════════════════════════════════════════════ */


/* v3.30.20 — Eliminado duplicado de .dlm-home-landing .dlm-section-title::before
   (regla idéntica ya existe en L9401). */


/* v3.30.20 — Eliminado duplicado de .dlm-home-biz-wrap .dlm-home-biz-title::before
   (regla idéntica ya existe en L9448). */

/* ─── v3.27.1 — Halo "respiración": cambio mínimo entre estados, ciclo
       lento de 6s para sensación de respirar (en vez del pulso anterior). ─── */
@keyframes dlm-pill-halo {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(37, 99, 235, 0.12),
            0 0 0 3px rgba(37, 99, 235, 0.05),
            0 0 16px rgba(37, 99, 235, 0.08);
    }
    50% {
        box-shadow:
            0 3px 12px rgba(37, 99, 235, 0.18),
            0 0 0 5px rgba(37, 99, 235, 0.09),
            0 0 22px rgba(37, 99, 235, 0.14);
    }
}

/* ─── Mejora si el navegador soporta color-mix(): el halo respeta el
       color primario real configurado en Astra ─── */
@supports (color: color-mix(in srgb, red, blue)) {
    
    @keyframes dlm-pill-halo-dynamic {
        0%, 100% {
            box-shadow:
                0 2px 8px color-mix(in srgb, var(--dlm-primary) 12%, transparent),
                0 0 0 3px color-mix(in srgb, var(--dlm-primary) 5%,  transparent),
                0 0 16px  color-mix(in srgb, var(--dlm-primary) 8%,  transparent);
        }
        50% {
            box-shadow:
                0 3px 12px color-mix(in srgb, var(--dlm-primary) 18%, transparent),
                0 0 0 5px  color-mix(in srgb, var(--dlm-primary) 9%,  transparent),
                0 0 22px   color-mix(in srgb, var(--dlm-primary) 14%, transparent);
        }
    }
}

/* v3.30.20 — Eliminado duplicado del @media (prefers-reduced-motion: reduce)
   (regla idéntica ya existe arriba en L9466). */

/* ═══════════════════════════════════════════════════════════════════
   v3.27.0 — FAVORITES: compare checkbox per item + footer compare CTA
   Cada item del panel de favoritos lleva un checkbox en la esquina
   superior izquierda. El footer del panel ahora tiene dos botones:
   "Comparar seleccionados" (deshabilitado hasta marcar 2-3) y "Vaciar".
   ═══════════════════════════════════════════════════════════════════ */

/* Item ahora es <article> con <a> interno; el flex se traslada al link */
.dlm-fav-item {gap: 12px;background: #f8fafc;border-radius: 10px;text-decoration: none;color: var(--dlm-text, #0f172a);transition: background 0.15s ease;display: block;position: relative;padding: 10px 10px 10px 38px;}
.dlm-fav-item-link {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: var(--dlm-text, #0f172a);
}
.dlm-fav-item-link:hover {
    color: var(--dlm-text, #0f172a);
}

/* Compare checkbox overlay (top-left of each fav item) */
.dlm-fav-compare-check {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    cursor: pointer;
    z-index: 2;
}
.dlm-fav-compare-check input.dlm-fav-compare-cb {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.dlm-fav-compare-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(15, 23, 42, 0.18);
    border-radius: 6px;
    background: #ffffff;
    color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dlm-fav-compare-check:hover .dlm-fav-compare-box {
    border-color: var(--dlm-primary, #2563eb);
}
.dlm-fav-compare-check input.dlm-fav-compare-cb:checked + .dlm-fav-compare-box {
    background: var(--dlm-primary, #2563eb);
    border-color: var(--dlm-primary, #2563eb);
    color: #ffffff;
}


/* Item destacado cuando está seleccionado */
.dlm-fav-item:has(.dlm-fav-compare-cb:checked) {
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
}

/* Footer con dos botones lado a lado */
.dlm-fav-panel-footer {padding: 16px 24px;border-top: 1px solid rgba(15, 23, 42, 0.06);background: #fafbfc;display: flex;flex-direction: column;gap: 8px;}
.dlm-fav-compare-btn {
    width: 100%;
    padding: 11px 12px;
    background: var(--dlm-primary, #2563eb);
    border: 1px solid var(--dlm-primary, #2563eb);
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.dlm-fav-compare-btn:hover:not(:disabled) {
    background: var(--dlm-primary-hover, #1d4ed8);
    border-color: var(--dlm-primary-hover, #1d4ed8);
    transform: translateY(-1px);
}
.dlm-fav-compare-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #94a3b8;
    border-color: #94a3b8;
}
.dlm-card-footer .dlm-btn,.dlm-icon,.dlm-form-submit svg,.dlm-fav-compare-btn svg{
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.0 — "PARA DUEÑOS" CTA: fondo sutil azul→blanco como el hero
   Sustituye el gradient azul-oscuro+naranja por un fondo claro tipo
   hero, con halos radiales suaves. Adapta título/desc/badge a tonos
   oscuros y los botones al nuevo contraste. El CTA primario mantiene
   el naranja para destacar; el ghost pasa a borde azul.
   ═══════════════════════════════════════════════════════════════════ */


















/* ═══════════════════════════════════════════════════════════════════
   v3.27.1 — HERO HOME: información más compacta
   Reduce los huecos entre kicker → título → subtítulo → buscador →
   contadores → features para que el hero se sienta como un bloque
   cohesionado en vez de elementos separados.
   ═══════════════════════════════════════════════════════════════════ */














/* ═══════════════════════════════════════════════════════════════════
   v3.27.2 — Pastillas de encabezados también en taxonomía y locales
   Mismo estilo (azul primario + halo respiratorio) que la home, ahora
   aplicado a los <h2 class="dlm-section-title"> de las páginas de
   regiones/ciudades y de los locales individuales.
   ═══════════════════════════════════════════════════════════════════ */

/* Aplicar el estilo de pastilla a los h2 de archive (regiones, ciudades)
   y single (locales). Reusa la misma apariencia que en la home. */
body.dlm-page-taxonomy .dlm-section-title,
body.dlm-page-single   .dlm-section-title {
    background: var(--dlm-primary, #2563eb) !important;
    color: #ffffff !important;
    border: 1px solid var(--dlm-primary, #2563eb) !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-size: clamp(20px, 2.6vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    /* Centrado: como estos h2 NO viven dentro de un .dlm-section-head con
       flex column (a diferencia de la home), centramos la pastilla con
       width:fit-content + margin auto. */
    display: block !important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content !important;
    margin: 32px auto 20px !important;
    /* v3.27.3 — apaga el padding-bottom del estilo base que reservaba
       espacio para la barrita ::after */
    padding-bottom: 12px !important;
    /* Halo sutil (fallback) */
    box-shadow:
        0 2px 8px rgba(37, 99, 235, 0.14),
        0 0 0 3px rgba(37, 99, 235, 0.06),
        0 0 18px rgba(37, 99, 235, 0.10) !important;
    animation: dlm-pill-halo 6s ease-in-out infinite !important;
}

/* Halo dinámico cuando color-mix() está disponible (mismo que home) */
@supports (color: color-mix(in srgb, red, blue)) {
    body.dlm-page-taxonomy .dlm-section-title,
    body.dlm-page-single   .dlm-section-title {
        box-shadow:
            0 2px 8px color-mix(in srgb, var(--dlm-primary) 14%, transparent),
            0 0 0 3px color-mix(in srgb, var(--dlm-primary) 6%,  transparent),
            0 0 18px  color-mix(in srgb, var(--dlm-primary) 10%, transparent) !important;
        animation: dlm-pill-halo-dynamic 6s ease-in-out infinite !important;
    }
}

/* Year-badge (".dlm-year-badge") dentro de la pastilla azul: ahora se
   adapta al fondo oscuro con un fondo blanco translúcido. */
body.dlm-page-taxonomy .dlm-section-title .dlm-year-badge,
body.dlm-page-single   .dlm-section-title .dlm-year-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}



/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    body.dlm-page-taxonomy .dlm-section-title,
    body.dlm-page-single   .dlm-section-title {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.3 — Quitar la barrita de subrayado (::after) de los encabezados
   pastilla. La regla base ".dlm-section-title::after" (línea 769) pinta
   un degradado azul en la base; con la pastilla ya no tiene sentido.
   ═══════════════════════════════════════════════════════════════════ */
body.dlm-page-taxonomy .dlm-section-title::after,
body.dlm-page-single   .dlm-section-title::after,
body.dlm-page-taxonomy .dlm-section-title::before,
body.dlm-page-single   .dlm-section-title::before {
    display: none !important;
    content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.4 — Buscador del hero: placeholder gris visible + sin outline
   La regla base (.dlm-search-input::placeholder, línea 1766) usa blanco
   translúcido pensado para fondos oscuros. En la home con fondo blanco
   queda invisible. Aquí: placeholder gris medio + apagamos cualquier
   outline interno del navegador/tema para que solo quede visible el
   feedback de focus del wrapper (borde azul + halo).
   ═══════════════════════════════════════════════════════════════════ */










/* ═══════════════════════════════════════════════════════════════════
   v3.27.5 — Halo respiratorio en los counters del hero
   Glow circular azul detrás de cada número, con la misma cadencia de
   respiración (6s) que las pastillas de los encabezados. Mantiene el
   layout horizontal actual, solo añade un spot luminoso sutil tras el
   número para darle peso visual.
   ═══════════════════════════════════════════════════════════════════ */





/* Animación de respiración: scale + opacity (más sutil que las pastillas
   porque el halo es ya de por sí orgánico) */
@keyframes dlm-counter-breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.65;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.10);
        opacity: 1;
    }
}





/* ═══════════════════════════════════════════════════════════════════
   v3.27.6 — Counters del hero: neón sutil + sombra flotante
   Reemplaza el halo circular de v3.27.5 (que se expandía) por dos
   capas de text-shadow que abrazan el contorno del número:
     · Glow azul muy sutil (efecto neón, sigue la forma del texto)
     · Sombra oscura debajo (da sensación de "flotar" sobre el fondo)
   La respiración solo cambia la intensidad del glow, NO el tamaño.
   ═══════════════════════════════════════════════════════════════════ */





/* Animación de respiración: solo intensidad, sin tocar tamaño */
@keyframes dlm-counter-glow {
    0%, 100% {
        text-shadow:
            0   0 26px rgba(37, 99, 235, 0.16),
            0  5px 13px rgba(37, 99, 235, 0.20),
            0 12px 30px rgba(37, 99, 235, 0.10) !important;
    }
    50% {
        text-shadow:
            0   0 34px rgba(37, 99, 235, 0.28),
            0  6px 18px rgba(37, 99, 235, 0.28),
            0 14px 36px rgba(37, 99, 235, 0.15) !important;
    }
}

/* Color-mix(): el glow respeta el color primario configurado en Astra */
@supports (color: color-mix(in srgb, red, blue)) {
    
    @keyframes dlm-counter-glow-dynamic {
        0%, 100% {
            text-shadow:
                0   0 26px color-mix(in srgb, var(--dlm-primary) 16%, transparent),
                0  5px 13px color-mix(in srgb, var(--dlm-primary) 20%, transparent),
                0 12px 30px color-mix(in srgb, var(--dlm-primary) 10%, transparent) !important;
        }
        50% {
            text-shadow:
                0   0 34px color-mix(in srgb, var(--dlm-primary) 28%, transparent),
                0  6px 18px color-mix(in srgb, var(--dlm-primary) 28%, transparent),
                0 14px 36px color-mix(in srgb, var(--dlm-primary) 15%, transparent) !important;
        }
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v3.27.11 — varios arreglos:
     1) Badge "★ Destacados" inline que se colaba en esquina superior
        izquierda por conflicto con la regla absolute de las cards.
     2) Compactar distancia cabecera ↔ hero ↔ counters ↔ steps en home.
     3) Reducir distancia cabecera ↔ contenido en taxonomía y single.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) FIX — Badge "Destacados" inline no debe ser position:absolute.
   Existen dos reglas .dlm-featured-badge: una para cards (absolute en
   esquina de la imagen) y otra para uso inline junto al h2. La segunda
   declaración gana por orden y sin ancestro relative cae al viewport.
   Aquí forzamos static para el uso inline. */


/* 2) HOME — cabecera del hero más cerca del kicker "Directorio verificado"
       y counters más cerca de "Cómo funciona". */

@media (max-width: 768px) {
    
}
/* La primera sección después del hero (steps = "Cómo funciona") tiene
   padding-top de 52px. Lo recortamos específicamente para no afectar al
   resto de las secciones. */

@media (max-width: 768px) {
    
}

/* 3) ARCHIVE / SINGLE — menos hueco desde cabecera hasta el primer
       contenido (breadcrumb / hero de la página). */
body.dlm-page-taxonomy .dlm-archive-content,
body.dlm-page-single   .site-main > article,
body.dlm-page-single   .ast-article-single,
body.dlm-page-taxonomy .ast-article-single {
    padding-top: 16px !important;
}

/* Breadcrumb más pegado al top en archive/single */


/* El primer hero de provincia/ciudad también reduce su margen superior */
body.dlm-page-taxonomy .dlm-page-hero,
body.dlm-page-taxonomy .dlm-province-hero {
    margin-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.12 — Ajustes finos:
     1) Distribución equilibrada counters ↔ título ↔ cards en "Cómo
        funciona" (el superior era ~68px y el inferior ~40px — ahora
        quedan simétricos con un toque más cortos arriba).
     2) Badge de card featured se mueve a ABAJO-IZQUIERDA de la foto
        para no solaparse con el icono de favoritos (arriba-derecha).
     3) Ocultar el badge "★ Destacados/Recomendados" que va inline
        junto al título de la sección featured en taxonomía — ya no
        aporta nada ahora que las cards individuales llevan su propia
        etiqueta.
   ═══════════════════════════════════════════════════════════════════ */





/* Así quedan ~40px arriba del título y ~40px debajo antes de las
   cards — distribución simétrica. */





/* ═══════════════════════════════════════════════════════════════════
   v3.27.13 — Acercar cabecera al contenido en archive y single
   La estructura real de Astra es:
     #content.site-content > .ast-container > #primary > #main >
     .dlm-archive-content (o .ast-article-single/post con el contenido)
   El padding top grande viene de los wrappers de Astra, no del
   contenedor interno. Atacamos a varios niveles para cubrir las
   variantes de layout (boxed, plain, separate).
   ═══════════════════════════════════════════════════════════════════ */

/* Contenedor principal del contenido: reduce su padding-top */
body.dlm-page-taxonomy .site-content,
body.dlm-page-taxonomy #content,
body.dlm-page-single   .site-content,
body.dlm-page-single   #content {
    padding-top: 16px !important;
}

/* Wrappers específicos de Astra para artículos/archivos */
body.dlm-page-taxonomy .ast-article-single,
body.dlm-page-taxonomy .ast-article-post,
body.dlm-page-single   .ast-article-single,
body.dlm-page-single   .ast-article-post {
    padding-top: 16px !important;
    margin-top: 0 !important;
}



/* Contenedor interno del primary/main en Astra */
body.dlm-page-taxonomy #primary,
body.dlm-page-taxonomy #main,
body.dlm-page-single   #primary,
body.dlm-page-single   #main {
    padding-top: 0 !important;
}

/* Primer hijo del contenido DLM: tirón hacia arriba */
body.dlm-page-taxonomy .dlm-archive-content,
body.dlm-page-single   .ast-article-single > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* El primer elemento dentro de .dlm-archive-content (breadcrumb,
   province-hero o lo que sea) sin margin-top ni padding-top herencia */
body.dlm-page-taxonomy .dlm-archive-content > *:first-child,
body.dlm-page-single   .dlm-archive-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Breadcrumb más compacto */
body.dlm-page-taxonomy .dlm-breadcrumb,
body.dlm-page-single   .dlm-breadcrumb {margin-top: 0 !important;padding-top: 0 !important;margin-bottom: 14px !important;}

/* Mobile: aún menos hueco */
@media (max-width: 768px) {
    
    body.dlm-page-taxonomy .site-content, body.dlm-page-taxonomy #content, body.dlm-page-single .site-content, body.dlm-page-single #content,body.dlm-page-taxonomy .ast-article-single, body.dlm-page-taxonomy .ast-article-post, body.dlm-page-single .ast-article-single, body.dlm-page-single .ast-article-post{
        padding-top: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.14 — Acercar cabecera al contenido (2º intento, agresivo)
   v3.27.13 no pegaba porque Astra usa selectores con ID (#primary,
   #content) que empatan especificidad con los míos y a veces ganan
   por orden de carga. Aquí subo la especificidad combinando el body
   class de DLM con las clases de layout de Astra, y ataco a los
   wrappers .ast-separate-container / .ast-plain-container que son
   los que realmente reservan el hueco grande superior.
   ═══════════════════════════════════════════════════════════════════ */


body.ast-separate-container.dlm-page-taxonomy #primary,
body.ast-separate-container.dlm-page-single   #primary {
    padding: 1em 0 !important;
    margin: 0 !important;
}
body.ast-separate-container.dlm-page-single .ast-article-single,
body.ast-separate-container.dlm-page-single .ast-article-post,
body.ast-separate-container.dlm-page-taxonomy .ast-article-single,
body.ast-separate-container.dlm-page-taxonomy .ast-article-post {
    padding: 1em !important;
    margin: 0 !important;
}

/* Layout "plain container" de Astra */
body.ast-separate-container.dlm-page-taxonomy .site-content, body.ast-separate-container.dlm-page-single .site-content, body.ast-separate-container.dlm-page-taxonomy #content, body.ast-separate-container.dlm-page-single #content,body.ast-plain-container.dlm-page-taxonomy .site-content, body.ast-plain-container.dlm-page-single .site-content, body.ast-plain-container.dlm-page-taxonomy #content, body.ast-plain-container.dlm-page-single #content, body.ast-plain-container.dlm-page-taxonomy #primary, body.ast-plain-container.dlm-page-single #primary{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

/* Layout "page builder" de Astra */
body.ast-page-builder-template.dlm-page-taxonomy #content,
body.ast-page-builder-template.dlm-page-single   #content,
body.ast-page-builder-template.dlm-page-taxonomy #primary,
body.ast-page-builder-template.dlm-page-single   #primary {
    padding-top: 1em !important;
}

/* Fallback general por si el body no tiene las clases de layout de Astra
   (otro tema o layout custom) — especificidad alta con doble clase */
body.dlm-page-taxonomy.ast-separate-container .site-content > .ast-container, body.dlm-page-single.ast-separate-container .site-content > .ast-container,body.dlm-page-taxonomy.dlm-page-taxonomy .site-content, body.dlm-page-single.dlm-page-single .site-content, body.dlm-page-taxonomy.dlm-page-taxonomy #content, body.dlm-page-single.dlm-page-single #content{
    padding-top: 16px !important;
}

/* Breadcrumb pegado al tope */
body.dlm-page-taxonomy .dlm-breadcrumb,
body.dlm-page-single   .dlm-breadcrumb,
body.dlm-page-taxonomy .dlm-archive-content > .dlm-breadcrumb,
body.dlm-page-single   .ast-article-single > .dlm-breadcrumb {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Primer hijo del contenedor DLM sin margin top */


/* Mobile */
@media (max-width: 768px) {
    body.ast-separate-container.dlm-page-taxonomy .site-content,
    body.ast-separate-container.dlm-page-single   .site-content,
    body.ast-separate-container.dlm-page-taxonomy #primary,
    body.ast-separate-container.dlm-page-single   #primary,
    body.ast-plain-container.dlm-page-taxonomy #content,
    body.ast-plain-container.dlm-page-single   #content {
        padding: 8px 0 !important;
    }
    body.ast-separate-container.dlm-page-single .ast-article-single,
    body.ast-separate-container.dlm-page-taxonomy .ast-article-post {
        padding: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.15 — CORRECCIÓN: v3.27.14 puso 1em en wrappers que no tenían
   padding vertical, y el efecto fue acumular espacio en vez de reducir.
   Aquí ponemos padding vertical a 0 en todos los wrappers relevantes
   (Astra y genéricos) — el horizontal lo dejamos intacto para no
   romper el centrado del contenido.
   ═══════════════════════════════════════════════════════════════════ */

body.dlm-page-taxonomy .site-content,
body.dlm-page-single   .site-content,
body.dlm-page-taxonomy #content,
body.dlm-page-single   #content,
body.dlm-page-taxonomy #primary,
body.dlm-page-single   #primary,
body.dlm-page-taxonomy #main,
body.dlm-page-single   #main,
body.dlm-page-taxonomy .ast-article-single,
body.dlm-page-single   .ast-article-single,
body.dlm-page-taxonomy .ast-article-post,
body.dlm-page-single   .ast-article-post,
body.ast-separate-container.dlm-page-taxonomy .site-content,
body.ast-separate-container.dlm-page-single   .site-content,
body.ast-separate-container.dlm-page-taxonomy #primary,
body.ast-separate-container.dlm-page-single   #primary,
body.ast-separate-container.dlm-page-taxonomy .ast-article-single,
body.ast-separate-container.dlm-page-single   .ast-article-single,
body.ast-separate-container.dlm-page-taxonomy .ast-article-post,
body.ast-separate-container.dlm-page-single   .ast-article-post,
body.ast-plain-container.dlm-page-taxonomy .site-content,
body.ast-plain-container.dlm-page-single   .site-content,
body.ast-plain-container.dlm-page-taxonomy #content,
body.ast-plain-container.dlm-page-single   #content,
body.ast-plain-container.dlm-page-taxonomy #primary,
body.ast-plain-container.dlm-page-single   #primary {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Primer hijo sin margin-top */
body.dlm-has-custom-header,body.dlm-page-taxonomy .dlm-archive-content, body.dlm-page-single .ast-article-single, body.dlm-page-single .ast-article-post{
    margin-top: 0 !important;
}
body.dlm-page-taxonomy .dlm-archive-content > *:first-child,
body.dlm-page-single   .ast-article-single > *:first-child,
body.dlm-page-single   .ast-article-post > *:first-child {margin-top: 0 !important;padding-top: 0 !important;}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.16 — Widgets sidebar de locales
   ═══════════════════════════════════════════════════════════════════ */

/* Título común de los widgets */


/* ─── Lista de locales (cards compactas verticales) ─── */


.dlm-widget-locale:hover {
    border-color: rgba(37, 99, 235, 0.20);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.dlm-widget-locale--featured {
    border-color: rgba(245, 158, 11, 0.30);
    background: linear-gradient(180deg, rgba(254, 249, 231, 0.40), #ffffff);
}


.dlm-widget-locale-img--placeholder {
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
.dlm-fav-item-info,.dlm-widget-locale-info{
    flex: 1;
    min-width: 0;
}









.dlm-widget-toc {
    font-size: 13px;
}
.dlm-widget-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dlm-widget-toc-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dlm-widget-toc-link:hover {
    color: var(--dlm-primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
    border-left-color: var(--dlm-primary, #2563eb);
}
.dlm-widget-toc-level-h3 .dlm-widget-toc-link {
    padding-left: 22px;
    font-size: 12px;
}
.dlm-widget-toc-empty {
    font-size: 12px;
    color: var(--dlm-text-muted, #94a3b8);
    font-style: italic;
    padding: 6px 10px;
}

/* Widgets en el footer (si los reutilizas) tienen colores invertidos */
.site-footer .dlm-widget-locale,
.footer-widgets .dlm-widget-locale {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.site-footer .dlm-widget-locale-name,
.footer-widgets .dlm-widget-locale-name {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.18 — Sidebar DLM custom + compactación widgets + fix cabecera
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FIX definitivo: distancia cabecera → contenido en single/archive
   Selectores prefijados con "html body" para máxima especificidad ─── */
html body.dlm-page-single .site-content,
html body.dlm-page-single #content,
html body.dlm-page-taxonomy .site-content,
html body.dlm-page-taxonomy #content {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
}

html body.dlm-page-single #primary,
html body.dlm-page-taxonomy #primary {
    padding: 0 !important;
    margin: 0 !important;
}
html body.dlm-page-single #primary > #main,
html body.dlm-page-taxonomy #primary > #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
html body.dlm-page-single .dlm-breadcrumb,
html body.dlm-page-taxonomy .dlm-breadcrumb {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

/* ─── Sidebar DLM custom (aside.dlm-custom-sidebar) ─── */
.dlm-custom-sidebar {
    /* Sin padding exterior heredado */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.dlm-custom-sidebar-inner {
    /* Sticky propio: se pega al top al hacer scroll */
    position: sticky;
    top: 16px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Si el contenido supera la altura del viewport, scroll interno
       pero con scrollbar fina y sobria — idealmente el contenido cabe */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.dlm-custom-sidebar-inner::-webkit-scrollbar {
    width: 6px;
}
.dlm-custom-sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 3px;
}
.dlm-custom-sidebar-inner::-webkit-scrollbar-track {
    background: transparent;
}

/* Widgets dentro de la sidebar custom: sin fondos ni bordes extra */
.dlm-custom-sidebar .dlm-sidebar-widget {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ─── Compactación de widgets DLM (vale para sidebar DLM y Astra) ─── */
.dlm-widget-title {font-weight: 700;color: var(--dlm-text, #0f172a);border-bottom: 2px solid var(--dlm-primary, #2563eb);display: inline-block;font-size: 14px !important;margin: 0 0 10px !important;padding: 0 0 6px !important;line-height: 1.3;}
.dlm-widget-locales {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 6px !important;}

.dlm-widget-locale-link {display: flex;text-decoration: none;color: inherit;align-items: center;padding: 6px !important;gap: 8px !important;}
.dlm-widget-locale-img {object-fit: cover;flex-shrink: 0;background: #e2e8f0;width: 44px !important;height: 44px !important;border-radius: 6px !important;}

.dlm-widget-locale-name {font-weight: 600;color: var(--dlm-text, #0f172a);display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;font-size: 13px !important;margin: 0 0 1px !important;line-height: 1.25 !important;-webkit-line-clamp: 2;}
.dlm-widget-locale-meta {display: flex;flex-wrap: wrap;color: var(--dlm-text-muted, #64748b);font-size: 11px !important;gap: 6px !important;}
.dlm-widget-view-all {display: block;text-align: center;font-weight: 500;color: var(--dlm-primary, #2563eb);text-decoration: none;border-radius: 6px;transition: background 0.15s ease;margin-top: 8px !important;padding: 6px !important;font-size: 13px !important;}

/* TOC compacto */
.dlm-widget-toc-link {display: block;color: var(--dlm-text-muted, #475569);text-decoration: none;border-left: 2px solid transparent;border-radius: 0 4px 4px 0;transition: all 0.15s ease;padding: 4px 8px !important;font-size: 13px !important;line-height: 1.3 !important;}

/* ─── Ajustes cuando se usa la sidebar de Astra (fallback, compact) ─── */
body.dlm-page-single #secondary,
body.dlm-page-single .widget-area,
body.dlm-page-single .sidebar-main {
    padding: 14px !important;
}
body.dlm-page-single #secondary .widget,
body.dlm-page-single .widget-area .widget {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.dlm-page-single #secondary .widget:last-child,
body.dlm-page-single .widget-area .widget:last-child {
    margin-bottom: 0 !important;
}

/* ─── Mobile: sidebar se apila abajo sin sticky ─── */
@media (max-width: 921px) {
    .dlm-custom-sidebar-inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.19 — Fix cabecera-contenido definitivo + alinear sidebar con hero
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) Cabecera → contenido: ataque definitivo ───
   Anula TODOS los paddings verticales que Astra pone en los wrappers,
   y compensa con un margin-top pequeño al artículo (el box blanco del
   content). Así el "respiro" mínimo viene solo del margin, nada más. */
html body.dlm-page-single .site-content,
html body.dlm-page-single #content,
html body.dlm-page-single .ast-container,
html body.dlm-page-taxonomy .site-content,
html body.dlm-page-taxonomy #content,
html body.dlm-page-taxonomy .ast-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body.dlm-page-single .ast-article-single,
html body.dlm-page-single .ast-article-post,
html body.dlm-page-taxonomy .ast-article-single,
html body.dlm-page-taxonomy .ast-article-post {padding: 14px 20px !important;margin: 0 !important;margin-top: 12px !important;margin-bottom: 12px !important;padding-top: 14px !important;}
/* Separate container: Astra añade padding extra al .site-content
   cuando ese layout está activo. Lo anulamos también ahí. */
html body.ast-separate-container.dlm-page-single .site-content,
html body.ast-separate-container.dlm-page-taxonomy .site-content {
    padding: 0 !important;
}

/* ─── 2) Sidebar DLM alineada con el HERO del contenido ───
   La sidebar empieza al mismo nivel que el article (contenido), pero
   el article arranca con el breadcrumb (~32px de alto) y LUEGO el hero.
   Para que la sidebar quede a la altura del hero, le añadimos un
   margin-top que salte el hueco del breadcrumb. */
html body.dlm-page-single .dlm-custom-sidebar {
    margin-top: 44px !important;
}
@media (max-width: 921px) {
    html body.dlm-page-single .dlm-custom-sidebar {
        margin-top: 0 !important;
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v3.27.32 — Badge "Recomendado" en hero: posición absoluta arriba-derecha
   Posicionado sobre el overlay del hero para que destaque pero no
   empuje al breadcrumb/título del flujo izquierdo.
   ═══════════════════════════════════════════════════════════════════ */
.dlm-header-nav-item,.dlm-single-hero-overlay{
    position: relative; /* anclaje para el badge absolute */
}
.dlm-hero-featured-badge {
    position: absolute;
    bottom: 36px; /* mismo offset que rating abajo-izq respecto al hero */
    right: 40px;  /* mismo offset que rating izquierda respecto al hero */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(217, 119, 6, 0.40),
        0 0 0 2px rgba(255, 255, 255, 0.18);
    /* v3.27.50 — Shimmer: contener el barrido de luz dentro del badge */
    overflow: hidden;
    isolation: isolate;
}
.dlm-hero-featured-badge svg {
    flex-shrink: 0;
    color: #ffffff;
    position: relative;
    z-index: 2;
}
/* v3.27.50 — Barrido de luz diagonal animado (shimmer).
   Gradiente transparente→blanco semitransparente→transparente,
   rotado 20º, que recorre el badge de izquierda a derecha en loop.
   Pausa larga entre ciclos para que se sienta "sutil y premium",
   no ruidoso. */
.dlm-hero-featured-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: dlm-badge-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes dlm-badge-shimmer {
    0%   { left: -75%; }
    60%  { left: 125%; }  /* El barrido cruza el badge en el primer 60% del ciclo */
    100% { left: 125%; }  /* Pausa estática en el 40% restante */
}

/* En móvil: igualar al padding 20/16 del overlay en móvil */
@media (max-width: 600px) {
    .dlm-hero-featured-badge {
        bottom: 20px;
        right: 16px;
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.38 — Imágenes de hero: cover sin corte ni repetición
   cover: la imagen cubre todo el contenedor sin dejar huecos
   center: centrada en ambos ejes
   no-repeat: nunca en mosaico
   (El fixed/parallax se probó en v3.27.37 y se descartó.)
   ═══════════════════════════════════════════════════════════════════ */
.dlm-single-hero,
.dlm-single-hero--has-image,
.dlm-page-hero,
.dlm-page-hero--has-image,
.dlm-page-hero--province,
.dlm-page-hero--city {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.39 — "Regiones" como trigger de mega-menú
   Cuando el ítem de nav es un <button> (no <a>), debe visualmente
   ser idéntico al anchor. Reseteamos los estilos del navegador.
   ═══════════════════════════════════════════════════════════════════ */
.dlm-header-nav-link.dlm-header-nav-trigger {
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.dlm-widget-view-all:hover,.dlm-header-nav-link.dlm-header-nav-trigger:hover{
    background: rgba(37, 99, 235, 0.06);
}


/* ═══════════════════════════════════════════════════════════════════
   v3.27.41 — Directory hub pages: /ciudades/ & /regiones/
   Grid responsive de todas las ciudades (agrupadas por región) y
   todas las regiones (cards con imagen). 100% dinámico desde BD.
   ═══════════════════════════════════════════════════════════════════ */










/* v3.27.59 — Encabezados de región en /ciudades/ con estilo "pill" igual al
   de la home (.dlm-home-landing .dlm-section-title de v3.26.3). Se desactiva
   el subrayado gradiente original (::after) y la barra superior (::before).
   La animación dlm-title-pulse ya está definida en el bloque de la home. */
.dlm-all-cities-group h2.dlm-section-title {
    display: inline-block;
    padding: 10px 22px;
    background: rgba(15, 23, 42, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 50px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 2px 8px rgba(15, 23, 42, 0.04);
    color: var(--dlm-text, #0f172a);
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0 0 24px;
    padding-bottom: 10px; /* override del 12px que viene de .dlm-section-title */
    line-height: 1.25;
    width: auto;
    animation: dlm-title-pulse 3.5s ease-in-out infinite;
}









/* ── /regiones/ — Grid de cards con imagen ── */
/* v3.27.60 — Eliminados los estilos personalizados de cards de regiones
   (.dlm-all-regions-grid, .dlm-all-region-card, .dlm-all-region-img,
   .dlm-all-region-body, .dlm-all-region-name, .dlm-all-region-stats,
   .dlm-all-region-stat). La página /regiones/ ahora usa el card-ciudad.php
   compartido con la home, así que estos selectores ya no se referencian. */




/* ═══════════════════════════════════════════════════════════════════
   v3.27.45 — Iconos SVG en nav del header (Regiones, Ciudades) +
   estrella en el CTA "Reclama tu ficha"
   ═══════════════════════════════════════════════════════════════════ */

/* Items con icono: el link se convierte en flex para alinear icono + texto */
.dlm-header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.dlm-header-nav-icon {
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.dlm-header-nav-link:hover .dlm-header-nav-icon {
    opacity: 1;
    transform: scale(1.06);
}
.dlm-header-nav-item.is-active .dlm-header-nav-icon {
    opacity: 1;
    color: var(--dlm-primary, #2563eb);
}


/* CTA "Reclama tu ficha": estrella a la izquierda del texto */
.dlm-header-cta {
    align-items: center;
    gap: 7px;
}
/* El display: inline-flex se aplica solo cuando el CTA está visible.
   No usamos !important porque hay que respetar el display:none del mobile. */
.dlm-header-search-wrapper.dlm-has-value .dlm-header-search-clear,.dlm-header-cta:not([style*="display: none"]){
    display: inline-flex;
}
.dlm-header-cta-icon {
    flex-shrink: 0;
    color: inherit;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* v3.27.47 — En móvil:
   1. Ocultar el CTA del header forzadamente (vive en el menú burger).
   2. Iconos de nav-items más visibles dentro del drawer mobile. */
@media (max-width: 768px) {
    .dlm-header-nav-icon { width: 18px; height: 18px; }
    /* Forzar ocultamiento del CTA en mobile (la regla previa a 768 ya lo pone
       en display:none, pero aseguramos que nada lo anule). */
    .dlm-header-cta { display: none !important; }
}

/* v3.27.47 — Iconos en el menú mobile (drawer).
   Los ítems del nav también se renderizan dentro del burger. Queremos
   que ahí también se vean los iconos de Regiones y Ciudades. */
.dlm-header-mobile .dlm-header-nav-icon {
    width: 18px;
    height: 18px;
    opacity: 0.9;
    flex-shrink: 0;
    margin-right: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   v3.27.46 — Enlace "Contacto" a la derecha, junto al CTA
   Estilo sobrio (texto plano con hover) para que no compita con el
   botón "Reclama tu ficha" en jerarquía visual.
   ═══════════════════════════════════════════════════════════════════ */
.dlm-header-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--dlm-text-muted, #475569);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.18s ease;
    margin-right: 2px;
    white-space: nowrap;
}

.dlm-header-contact-link:hover {
    color: var(--dlm-primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}
.dlm-header-contact-link:hover .dlm-header-nav-icon {
    opacity: 1;
    transform: scale(1.06);
}
.dlm-header-nav-link:focus-visible,.dlm-fav-compare-check input.dlm-fav-compare-cb:focus-visible + .dlm-fav-compare-box,.dlm-header-contact-link:focus-visible{
    outline: 2px solid var(--dlm-primary, #2563eb);
    outline-offset: 2px;
}
/* En móvil, Contacto se oculta del header (ya aparece en el menú burger) */
@media (max-width: 768px) {
    .dlm-header-contact-link {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.47 — CTA mobile: estrella + texto con flex
   ═══════════════════════════════════════════════════════════════════ */
.dlm-header-mobile-cta {padding: 14px 20px;background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color: #fff !important;font-size: 15px;font-weight: 600;text-decoration: none;border-radius: 10px;text-align: center;box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);display: inline-flex;align-items: center;justify-content: center;gap: 7px;}
.dlm-header-mobile-cta .dlm-header-cta-icon {
    flex-shrink: 0;
    color: inherit;
}
/* Nav items mobile: usar el patrón flex del link para que icono + label
   se alineen también dentro del drawer. */
.dlm-header-mobile-nav li a.dlm-header-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    color: var(--dlm-text, #0f172a);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dlm-contact-features li:last-child,.dlm-header-search-result-item:last-child,.dlm-header-mobile-nav li:last-child a.dlm-header-nav-link{
    border-bottom: 0;
}
.dlm-fab-search:focus-within .dlm-fab-search-icon,.dlm-fab-nav-item:hover .dlm-fab-nav-icon,.dlm-header-nav-item--trigger:hover .dlm-header-nav-trigger,.dlm-header-mobile-nav li a.dlm-header-nav-link:hover{
    color: var(--dlm-primary, #2563eb);
}






/* v3.27.51 — Shimmer también en el badge del widget de sidebar
   "Otros locales en X" (el de tipo sello/placa en los items featured).
   Clase: .dlm-widget-locale-badge */

.dlm-widget-locale-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: dlm-badge-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.dlm-hero-featured-badge > *,.dlm-widget-locale-badge > *, .dlm-widget-locale-badge svg{
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .dlm-hero-featured-badge::after,.dlm-widget-locale-badge::after{
        animation: none;
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.27.52 — Fix altura celda recomendada en widget sidebar
   El badge antes era inline-block con margin-bottom → empujaba el
   nombre hacia abajo y la celda recomendada quedaba más alta que
   las no-recomendadas. Lo ponemos absolute en la esquina superior
   derecha: flota sobre el contenido, no ocupa flow, altura uniforme.
   ═══════════════════════════════════════════════════════════════════ */
.dlm-widget-locale {list-style: none;margin: 0;padding: 0;background: #ffffff;border: 1px solid rgba(15, 23, 42, 0.06);overflow: hidden;transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;border-radius: 8px !important;position: relative;}
.dlm-widget-locale-badge {display: inline-block;background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);color: #ffffff;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04em;overflow: hidden;isolation: isolate;position: absolute !important;top: 6px !important;right: 6px !important;margin-bottom: 0 !important;z-index: 2;font-size: 9px !important;padding: 2px 7px !important;border-radius: 4px !important;box-shadow: 0 1px 3px rgba(217, 119, 6, 0.30);}

/* Dejar espacio a la derecha del nombre para que no choque con el badge
   cuando el texto es largo (ej. "Clínica Dental Home Plus"). */
.dlm-widget-locale--featured .dlm-widget-locale-info {
    padding-right: 72px; /* ancho aprox del badge + margen */
}

/* ═══════════════════════════════════════════════════════════════
   v3.55.0 — UX pro-páginas-vistas: vistos recientemente, anterior/
   siguiente, grupos del buscador, rescate de filtros y barra fija.
   Componentes NUEVOS con colores de las variables globales: los 7
   skins los heredan sin reglas espejo (sin estructura por skin).
   ═══════════════════════════════════════════════════════════════ */

/* ── Vistos recientemente ── */
.dlm-recent-strip { margin: 18px 0 6px; }
.dlm-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.dlm-recent-title { font-size: 15px; font-weight: 700; color: var(--dlm-text); }
.dlm-recent-clear {
    background: none; border: 0; padding: 2px 6px; cursor: pointer;
    font-size: 12px; color: var(--dlm-text-muted); text-decoration: underline;
}
.dlm-recent-clear:hover { color: var(--dlm-text); }
.dlm-recent-list {
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.dlm-recent-card {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    max-width: 230px; padding: 7px 12px 7px 7px;
    background: #fff; border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 12px; text-decoration: none;
    box-shadow: 0 1px 3px rgba(2, 6, 23, .06);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dlm-recent-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(2, 6, 23, .10); text-decoration: none; }
.dlm-recent-card img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; }
.dlm-recent-card-text { display: flex; flex-direction: column; min-width: 0; }
.dlm-recent-card-title {
    font-size: 12.5px; font-weight: 700; color: var(--dlm-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.dlm-recent-card-city { font-size: 11px; color: var(--dlm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }


/* ── Anterior / Siguiente en la ficha ── */
.dlm-single-prevnext {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 6px;
}






@media (max-width: 600px) {
    .dlm-newsletter-fields,.dlm-single-prevnext{ grid-template-columns: 1fr; }
    
    
}

/* ── Cabeceras de grupo del buscador (Ciudades / Locales) ── */
.dlm-header-search-group {
    padding: 7px 14px 4px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em; color: var(--dlm-text-muted);
    border-top: 1px solid rgba(148, 163, 184, .18);
}
.dlm-header-search-group:first-child { border-top: 0; }

/* ── Rescate del "0 resultados" en los filtros ── */
.dlm-filter-rescue {
    margin: 14px 0; padding: 18px 20px; text-align: center;
    background: #fff; border: 1px dashed rgba(148, 163, 184, .55); border-radius: 14px;
}
.dlm-filter-rescue[hidden] { display: none; }
.dlm-filter-rescue-msg { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--dlm-text); }
.dlm-filter-rescue-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.dlm-filter-rescue-pill {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    background: rgba(37, 99, 235, .08); border: 1px solid rgba(37, 99, 235, .25);
    color: var(--dlm-primary); font-size: 13px; font-weight: 600; text-decoration: none;
}
.dlm-filter-rescue-pill:hover { background: rgba(37, 99, 235, .14); text-decoration: none; }
.dlm-filter-rescue-reset { cursor: pointer; }


.dlm-sticky-actions[hidden] { display: none; }




body.dlm-has-sticky-actions { padding-bottom: 64px; }
@media (min-width: 769px) {
    
    body.dlm-has-sticky-actions { padding-bottom: 0; }
}



/* v3.55.0-fix — Cuando la barra fija está visible, el FAB del menú flotante
   sube por encima de ella (antes quedaba enterrado bajo la barra, z-index
   1100 vs 9990, y su auto-offset no reacciona a un padding de body). */
@media (max-width: 768px) {
    body.dlm-has-sticky-actions .dlm-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    body.dlm-has-sticky-actions .dlm-fab-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}


.dlm-single-claim a { color: var(--dlm-text-muted); text-decoration: underline; }
.dlm-single-claim a:hover { color: var(--dlm-primary); }



/* ═══════ v3.65.0 — OFERTA DEL DESTACADO ═══════
   Dos componentes nuevos (clases propias, sin colisión con skins):
   1. .dlm-offer-banner  — banner en la ficha PROPIA del destacado (tras hero).
   2. .dlm-offers-nearby — módulo "Patrocinado" en fichas NO destacadas de la
      misma ciudad (hasta 3 cards impresas; el JS muestra 2 al azar).
   Ambos usan las variables de la paleta (--dlm-*) para heredar el look de
   cada skin sin reglas espejadas. NUNCA reutilizar .dlm-ad-slot aquí (sus
   reglas :has() de colapso matarían el contenido). */

.dlm-offer-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 6px;
    padding: 14px 18px;
    border: 1px solid var(--dlm-star-color);
    border-left-width: 4px;
    border-radius: var(--dlm-radius);
    background: #fdf6e7; /* fallback navegadores sin color-mix */
    background: color-mix(in srgb, var(--dlm-star-color) 8%, #fff);
}
.dlm-offer-banner-icon { font-size: 1.5rem; line-height: 1.2; }
.dlm-offer-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlm-offer-banner-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92600a;
}
.dlm-offer-banner-text { font-weight: 600; color: var(--dlm-text); overflow-wrap: anywhere; }
.dlm-offer-banner-until { font-size: 0.8rem; color: var(--dlm-text-muted); }

.dlm-offers-nearby { margin: 26px 0 10px; }
.dlm-offers-nearby-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.dlm-offers-nearby-title { margin-bottom: 10px; }
.dlm-offers-nearby-tag {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dlm-text-muted);
    border: 1px solid var(--dlm-border);
    border-radius: 50px;
    padding: 2px 10px;
}
.dlm-offers-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.dlm-offer-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--dlm-border);
    border-radius: var(--dlm-radius);
    background: var(--dlm-bg-card);
    box-shadow: var(--dlm-shadow);
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.dlm-offer-card:hover {
    text-decoration: none;
    box-shadow: var(--dlm-shadow-hover);
    transform: translateY(-2px);
}
.dlm-price-range,.dlm-offer-card-name{ font-weight: 700; color: var(--dlm-primary); }
.dlm-offer-card-text { color: var(--dlm-text); font-size: 0.92rem; overflow-wrap: anywhere; }
.dlm-offer-card-until { font-size: 0.78rem; color: var(--dlm-text-muted); }

/* ═══════ v3.67.0 — DISTINCIÓN VISUAL REAL DEL DESTACADO (auditoría #5) ═══════
   Hasta ahora la ÚNICA diferencia de una card destacada era un border-color
   ámbar al 30% + badge: el producto que se cobra parecía un listado gratis.
   Tratamiento premium: borde 2px, franja superior, sombra cálida y badge
   reforzado — en la card Y en el hero de su propia ficha (que no tenía CSS).
   Solo CSS, HTML idéntico para todos (cache-safe). !important deliberado en
   los acentos: la distinción del ⭐ es prioridad de negocio y debe
   sobrevivir a los overrides espejados de los 8 skins. */

/* (0,3,0) deliberado (review 2026-07-17): el skin futurista fija el borde
   de las cards de la home con (0,2,0)+!important y entre !important gana la
   especificidad — con (0,1,0) el borde ámbar se perdía justo en la home
   oscura. La card emite .dlm-card.dlm-card-local.dlm-card-local--featured. */
.dlm-card.dlm-card-local.dlm-card-local--featured {
    position: relative;
    border: 2px solid var(--dlm-star-color) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.16) !important;
}
.dlm-card-local--featured::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dlm-star-color);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 2;
    pointer-events: none;
}
.dlm-card.dlm-card-local.dlm-card-local--featured:hover {
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.24) !important;
}

.dlm-card-local--featured .dlm-rating-badge svg {
    color: var(--dlm-star-color);
}

/* Hero de la ficha destacada (la clase se emitía desde v3.27.32 pero NO
   tenía ni una regla): mismo lenguaje que la card. */
.dlm-single-hero.dlm-single-hero--featured {
    position: relative;
    border: 2px solid var(--dlm-star-color) !important;
    /* !important también aquí (review 2026-07-17): elevado/futurista/marcado
       fijan box-shadow de .dlm-single-hero y cargan después — sin esto el
       glow ámbar desaparecía (y en marcado quedaba borde ámbar + sombra dura
       negra, mezcla incongruente). El acento premium del ⭐ gana al skin. */
    box-shadow: 0 6px 26px rgba(245, 158, 11, 0.15) !important;
}
.dlm-single-hero--featured::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dlm-star-color);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 2;
    pointer-events: none;
}

/* v3.67.0 — Botón WhatsApp del destacado (perk opcional). Verde de marca
   FIJO a propósito: debe reconocerse como WhatsApp en los 8 skins, así que
   la especificidad (0,2,1) + !important gana a los espejos de skin. */
.dlm-single-actions-bar a.dlm-btn--whatsapp {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #fff !important;
}
.dlm-single-actions-bar a.dlm-btn--whatsapp:hover {
    background: #1fb959 !important;
    border-color: #1fb959 !important;
    color: #fff !important;
}

/* ═══════ v3.68.0 — ESTRELLAS VISUALES + OWNER BOX (auditoría 2026-07-16) ═══ */

/* Estrellas ★★★★☆ en el body de la card (compactas) y en el hero. El SVG
   "full" usa currentColor → lo teñimos de ámbar aquí; el vacío es gris fijo. */
.dlm-card-stars { margin: 2px 0 6px; }

.dlm-card-stars .dlm-stars svg { width: 14px; height: 14px; }
.dlm-card-stars .dlm-stars-number { font-size: 0.85rem; font-weight: 700; color: var(--dlm-text); margin-left: 4px; }

.dlm-hero-stars { display: inline-flex; align-items: center; margin-right: 6px; }
.dlm-card-stars .dlm-stars,.dlm-hero-stars .dlm-stars{ color: var(--dlm-star-color); display: inline-flex; align-items: center; gap: 1px; }
.dlm-hero-stars .dlm-stars svg { width: 16px; height: 16px; }
 /* el número ya está en la pill de al lado */









/* v3.69.0 (feedback usuario) — mini-enlace de claim dentro de la data card:
   visible para el dueño que revisa sus datos, mudo para el visitante. */
.dlm-single-claim--card {
    text-align: right;
    margin: 10px 0 0;
    font-size: 12.5px;
}

/* ═══════ v3.70.0 — MAPA LEAFLET PRO (petición usuario) ═══════
   Pines SVG propios (divIcon) + teselas Carto + micro-efectos CSS puros.
   Todo GPU (transform/opacity), cero timers JS, y apagado limpio con
   prefers-reduced-motion. Los filtros por skin sobre .leaflet-tile no se
   tocan: tiñen la base, los pines conservan su color. */

.dlm-pin-wrap { background: none !important; border: none !important; }
.dlm-pin {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    transform-origin: 50% 100%;
    transition: transform 0.15s ease;
    will-change: transform;
}
.dlm-pin svg { display: block; width: 100%; height: 100%; }
.dlm-pin-wrap:hover .dlm-pin { transform: scale(1.12); }

/* Caída escalonada al pintar el mapa. v3.71.0 FIX (bug de producción): la
   animación corre en el .dlm-pin INTERIOR — JAMÁS en el elemento del
   marcador, cuyo transform es el translate3d de posicionamiento de Leaflet
   (pisarlo dejaba los pines invisibles/apilados hasta un setIcon). El delay
   escalonado llega por variable CSS (heredada del wrapper). fill solo
   backwards: cubre la espera con opacity 0 y al terminar suelta el
   transform para que el scale del hover funcione. */
.dlm-pin-drop .dlm-pin {
    animation: dlmPinDrop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
    animation-delay: var(--dlm-drop-delay, 0ms);
}
/* SOLO transform, jamás opacity (endurecido tras el bug de producción):
   si una animación no corre o se congela (navegador raro, ahorro de
   batería), el pin se ve igualmente — como mucho 12px más arriba. La
   visibilidad nunca depende de que una animación complete. */
@keyframes dlmPinDrop {
    from { transform: translateY(-12px); }
    to   { transform: translateY(0); }
}

/* Halo pulsante SOLO en destacados: elipse ámbar a los pies del pin. */
.dlm-pin--feat .dlm-pin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 26px;
    height: 9px;
    margin: -7px 0 0 -13px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.4);
    animation: dlmPinPulse 2.6s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}
@keyframes dlmPinPulse {
    0%   { transform: scale(0.55); opacity: 0.75; }
    70%  { transform: scale(1.7);  opacity: 0; }
    100% { transform: scale(1.7);  opacity: 0; }
}




/* Los botones del popup se tiñen desde el JS con dlmPinColor (el --dlm-primary
   computado): sin !important aquí para no pisar el toggle inline de Comparar. */

@media (prefers-reduced-motion: reduce) {
    .dlm-pin-drop .dlm-pin { animation: none; }
    .dlm-pin--feat .dlm-pin::before { animation: none; opacity: 0.35; transform: scale(1); }
    .dlm-pin, .dlm-pin-wrap:hover .dlm-pin { transition: none; transform: none; }
}

/* ═══════ v3.71.0 — TIRA MAPA↔LOCALES (scroll-snap) ═══════
   Esqueleto server-side (alto reservado = cero CLS) que el init del mapa
   rellena con mini-tarjetas de los mismos markers. Escritorio: flechas
   (solo hover+pointer fino). Móvil: swipe nativo con scroll-snap y la
   siguiente tarjeta asomando (~80% de ancho). Nada se mueve solo. */




.dlm-card-ciudad--premium .dlm-card-body,.dlm-form-submit.is-loading .dlm-form-submit-icon,.dlm-kbd-mac,.dlm-is-mac .dlm-kbd-pc,.dlm-fav-panel.has-items .dlm-fav-empty,.dlm-hero-stars .dlm-stars-number,.dlm-map-strip-track::-webkit-scrollbar{ display: none; }


















@keyframes dlmSkelPulse { from { opacity: 0.9; } to { opacity: 0.45; } }




/* Pin agrandado cuando su tarjeta está centrada en la tira (el transform va
   en el .dlm-pin INTERIOR — jamás en el elemento posicionado por Leaflet). */
.dlm-pin--active .dlm-pin { transform: scale(1.18); }



@media (prefers-reduced-motion: reduce) {
    
    
    .dlm-pin--active .dlm-pin { transform: none; }
}

/* ═══════ v3.72.0 — FEEDBACK EN VIVO: tira full-width + tarjetas mayores +
   sidebar de filtros premium + móvil compacto ═══════ */



























/* Sliders — v3.75 (feedback). Había TRES generaciones de thumb en el
   archivo; la última (~3323) pintaba la bola OSCURA (var(--dlm-text) con
   borde blanco) y sin margin-top propio (heredaba el -7 calibrado para
   20px siendo de 18px → 1px alta). El usuario prefiere el diseño clásico:
   CENTRO BLANCO + BORDE del color de la web. Set completo y calibrado:
   18px, margin-top -6 = (pista 6 - thumb 18) / 2. */
.dlm-explorer-filters .dlm-filter-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid var(--dlm-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    margin-top: -6px;
}
.dlm-explorer-filters .dlm-filter-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid var(--dlm-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}