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

/* ─── CSS Variables (uses Astra/WP global palette if available) ─ */
: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;
}

/* 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);
}

@media (max-width: 1024px) {
    .dlm-grid.dlm-ciudades-grid,
    .dlm-grid.dlm-provincias-grid,
    .dlm-grid.dlm-locales-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dlm-grid.dlm-ciudades-grid,
    .dlm-grid.dlm-provincias-grid,
    .dlm-grid.dlm-locales-grid {
        grid-template-columns: 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;
}

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

/* ─── Card Image ────────────────────────────────────────────── */
.dlm-card-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #f3f4f6;
}

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

.dlm-card:hover .dlm-card-image img {
    transform: scale(1.03);
}

/* ─── 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 {
    color: inherit;
    text-decoration: none;
}

.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-btn {
    /* El botón mantiene su estilo pero ya no ocupa el ancho completo;
       el flex le da el ancho necesario y deja sitio para el comparar. */
    flex-shrink: 0;
}
.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 {
        color: var(--dlm-primary, #2563eb);
        background: rgba(37, 99, 235, 0.07);
        border: 1px solid rgba(37, 99, 235, 0.18);
    }
    .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);
}

.dlm-filter-search {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--dlm-border);
    border-radius: 10px;
    background: #fff;
    padding: 0 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

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

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

.dlm-filter-input {
    flex: 1;
    padding: 14px 0;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    color: var(--dlm-text);
    outline: none;
    box-sizing: border-box;
}

.dlm-filter-input::placeholder { color: var(--dlm-text-muted); }

/* 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. */

.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;
}

.dlm-filter-control:hover {
    border-color: #cbd5e1;
}

.dlm-filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dlm-text);
    letter-spacing: 0.02em;
}

.dlm-filter-label strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--dlm-primary) 0%, #4f46e5 100%);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

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

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

/* ─── Range Slider ─────────────────────────────────────────── */
.dlm-range-wrap {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    margin: 6px 0 2px;
}

.dlm-range-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 100%;
    background: #e2e8f0;
    border-radius: 3px;
    pointer-events: none;
}

.dlm-range-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: var(--dlm-fill, 0%);
    background: var(--dlm-primary);
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

.dlm-filter-range {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 100%;
    height: 20px;
    background: transparent;
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    cursor: pointer;
    margin: 0;
    padding: 0;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    border: none;
    color: transparent;
}

.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::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 3px solid var(--dlm-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    margin-top: -7px;
    transition: border-width 0.15s, box-shadow 0.15s;
}

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

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

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

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

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

/* ─── Load More ────────────────────────────────────────────── */
.dlm-load-more-wrap {
    text-align: center;
    margin-top: 24px;
}

.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 {
    color: var(--dlm-text-muted);
    text-decoration: none;
}

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

.dlm-icon {
    flex-shrink: 0;
}

/* ─── 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 a:hover {
    text-decoration: underline;
}

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

.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;
}

/* ─── Search Placeholder (future) ───────────────────────────── */
.dlm-search-placeholder {
    /* Reserved for future search/filter functionality */
}

/* ─── 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-overlay {
    padding: 36px 36px;
    background: rgba(0, 0, 0, 0.55);
}

.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-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.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 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.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 {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--dlm-text-muted);
}

.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-meta-description {
        font-size: 0.95rem;
    }

    .dlm-page-hero-overlay {
        padding: 20px 16px;
    }

    .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-card-local--featured .dlm-featured-badge {
    left: auto !important;
    right: 10px;
}

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

/* ─── "Ver todos" link ──────────────────────────────────────── */
.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);
}

.dlm-rating-badge--hero svg { color: var(--dlm-star-color); }

/* ─── 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-single-info-row a {
    color: var(--dlm-primary);
    text-decoration: none;
}

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

/* ─── Hours List ────────────────────────────────────────────── */
.dlm-hours-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.dlm-hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #f3f4f6;
}

.dlm-hours-item:last-child { border-bottom: none; }

.dlm-hours-day {
    font-weight: 600;
    color: var(--dlm-text);
    min-width: 90px;
}

.dlm-hours-time {
    color: var(--dlm-text-muted);
    text-align: right;
}

/* ─── 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);
}

/* ─── Hours Section (centered below buttons) ────────────────── */
.dlm-single-hours-section {
    display: flex;
    justify-content: center;
}

.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;
}

@media (max-width: 768px) {
    .dlm-btn--map-directions { padding: 8px 18px; font-size: 0.85rem; }
}

/* 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; }

/* ─── Content ───────────────────────────────────────────────── */
.dlm-single-content {
    margin-bottom: 32px;
}

.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%);
}

/* ─── Reviews Section ───────────────────────────────────────── */
.dlm-single-reviews {
    margin-bottom: 32px;
}

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

.dlm-single-reviews 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-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-card {
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    border: 1px solid var(--dlm-border);
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.dlm-review-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
    border-color: color-mix(in srgb, var(--dlm-primary) 25%, #e5e7eb);
}

/* Clickable review cards */
.dlm-review-card--clickable {
    position: relative;
    cursor: pointer;
}

.dlm-review-card--clickable:hover {
    transform: translateY(-2px);
}

.dlm-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dlm-review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dlm-primary), var(--dlm-primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dlm-review-author { font-size: 0.95rem; }

.dlm-review-stars { margin-top: 2px; }
.dlm-review-stars .dlm-stars-number { font-size: 0.8rem; }

/* v3.27.53 — Fecha de la reseña (debajo de las estrellas, sutil) */
.dlm-review-date {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.3;
}

.dlm-review-text-wrap { }

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

/* ─── Review truncation ────────────────────────────────────── */
.dlm-review-text--truncate {
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
}

.dlm-review-text--truncate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--dlm-bg-card));
    pointer-events: none;
}

.dlm-review-more {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dlm-primary);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.dlm-review-more::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dlm-review-more:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ─── 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);
}
@media (max-width: 768px) {
    .dlm-single-related .dlm-grid.dlm-locales-grid {
        grid-template-columns: 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 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--dlm-text, #111827);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
    line-height: 1.2;
}
.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);
}
.dlm-other-city-pill:hover .dlm-other-city-pill-count {
    color: rgba(255, 255, 255, 0.85);
}
.dlm-other-city-pill-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--dlm-text-muted, #6b7280);
    transition: color 0.15s ease;
}
@media (max-width: 600px) {
    .dlm-single-other-cities { padding: 14px 16px; }
    .dlm-other-city-pill { padding: 6px 12px; font-size: 0.8rem; }
}

.dlm-single-related 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-related 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%);
}

/* ─── Share Bar ─────────────────────────────────────────────── */
.dlm-share-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.dlm-share-label {
    font-size: 0.8rem;
    color: var(--dlm-text-muted);
    font-weight: 500;
}

.dlm-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid var(--dlm-border);
    background: var(--dlm-bg-card);
    color: var(--dlm-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

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

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

.dlm-share-btn--copied {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* 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 {
    fill: #ec4899;
}
.dlm-single-fav-btn.dlm-single-hero-fav.is-fav svg path {
    fill: #ec4899;
    stroke: #ec4899;
}
.dlm-single-fav-btn.dlm-single-hero-fav.just-added {
    animation: dlm-fav-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 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.27.89 — Botón corazón en popups del mapa: estado activo. El estilo
   base se inyecta inline desde class-helpers.php para garantizar visibilidad
   incluso si el CSS del plugin no ha cargado. Aquí solo añadimos el hover y
   el relleno cuando is-fav (también inline el path desde JS). */
.dlm-map-fav-btn.is-fav {
    background: rgba(236, 72, 153, 0.08) !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. */

/* Sutil "lift" en hover + scale-down en click — feedback táctil moderno. */
.dlm-map-popup-btn:hover {
    transform: translateY(-1px) !important;
}
.dlm-map-popup-btn:active {
    transform: scale(0.96) !important;
    box-shadow: none !important;
}

/* "Ver detalles" (primary lleno) — al hover: azul más oscuro + sombra azul. */
.leaflet-popup-content .dlm-map-details-btn:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.32) !important;
}

/* "Comparar" (outline azul) — al hover: tinte azul sutil + borde más
   oscuro + sombra. NO invertimos colores (no llenamos de azul) porque el
   click de toggle ya pone el fondo azul cuando está activo; un hover
   visualmente idéntico al active confundiría al usuario. */
.leaflet-popup-content .dlm-map-compare-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18) !important;
}

/* Corazón favorito (outline rosa) — al hover: tinte rosa + sombra rosa. */
.dlm-map-fav-btn:hover {
    background: rgba(236, 72, 153, 0.10) !important;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.20) !important;
}

/* ─── 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-data-grid { grid-template-columns: 1fr; }
    /* v3.31.6 — Revertido al height fijo original tras eliminar la cabecera
       redundante. Ya no hay nada encima del iframe que necesite espacio extra. */
    .dlm-single-map { min-height: 250px; height: 250px; }
    .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-faqs {
    margin-bottom: 32px;
}

.dlm-single-faqs 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-faqs 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-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-home-hero {
    background: linear-gradient(135deg, var(--ast-global-color-0, #2563eb) 0%, var(--ast-global-color-1, #1d4ed8) 100%);
    padding: 72px 48px 60px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
}

.dlm-home-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.dlm-home-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.dlm-home-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

.dlm-home-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.dlm-home-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.65);
    margin: 0 0 32px;
    line-height: 1.6;
}

.dlm-hero-counters--home { margin-top: 28px; }
.dlm-hero-features--home { margin-top: 20px; }
.dlm-hero-feature--home {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
}

.dlm-home-section { margin-bottom: 40px; }

/* ─── Search Autocomplete ───────────────────────────────────── */
.dlm-home-search { margin-bottom: 12px; }

.dlm-search-wrapper {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    padding: 4px 6px 4px 18px;
    transition: all 0.2s;
}

.dlm-search-wrapper:focus-within {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.2);
    /* v3.33.2 — Focus ring explícito (WCAG 2.4.7 refuerzo). El input
       interno lleva outline:none + box-shadow:none por diseño; este
       halo en el wrapper garantiza foco visible aunque el fondo de la
       cabecera tenga poco contraste. Solo aparece con :focus-within,
       no afecta al render normal. */
    box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}

.dlm-search-icon {
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
    display: flex;
}

.dlm-search-input {
    flex: 1;
    padding: 10px 12px !important;
    font-size: 1rem;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    outline: none;
    box-sizing: border-box;
}

.dlm-search-input::placeholder { color: rgba(255,255,255,0.7) !important; font-weight: 400; }
.dlm-search-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dlm-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 100;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.dlm-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--dlm-text);
    font-size: 0.95rem;
    transition: background 0.15s;
    border-bottom: 1px solid var(--dlm-border);
}

.dlm-search-result-item:last-child { border-bottom: none; }
.dlm-search-result-item:hover { background: #f3f4f6; }

.dlm-search-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--dlm-primary);
    background: color-mix(in srgb, var(--dlm-primary) 10%, #fff);
    border-radius: 50px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
.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:last-of-type { border-bottom: none; }
.dlm-compare-row strong { color: var(--dlm-text-muted); font-weight: 500; }

/* ─── Home Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .dlm-home-hero { padding: 32px 16px 28px; margin-top: 12px; }
    .dlm-home-title { font-size: 1.4rem; }
    .dlm-home-subtitle { font-size: 0.85rem; }
    .dlm-compare-bar { padding: 10px 18px; gap: 10px; }
    .dlm-modal-content { padding: 20px; }
    .dlm-compare-grid { grid-template-columns: 1fr; }
}

/* ─── City Interactive Map ──────────────────────────────────── */
.dlm-city-map-section {
    margin-bottom: 24px;
}

.dlm-city-map {
    width: 100%;
    height: 500px;
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: var(--dlm-shadow);
    z-index: 1;
}

@media (max-width: 768px) {
    .dlm-city-map { height: 330px; }
}

/* ═══════════════════════════════════════════════════════════════
   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. Preferimos
   esto a tener huecos blancos cuando se sirve 250 (que es frecuente).
   Si GAM no rellena el slot, su `collapseEmptyDivs(true)` aplica
   `display: none` al div, lo cual ANULA cualquier min-height — el div
   pasa a ocupar 0px y no se ve espacio en blanco. */
.dlm-ad-slot:not(.dlm-ad-slot--test) {
    min-height: 250px;
    contain: layout;          /* aísla el reflow del slot del documento */
}
/* 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-section-title--center { text-align: center; }

.dlm-home-steps { text-align: center; }

.dlm-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}

.dlm-step-card {
    position: relative;
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    box-shadow: var(--dlm-shadow);
    padding: 32px 24px 28px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.dlm-step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dlm-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.dlm-step-icon {
    color: var(--dlm-primary);
    margin-bottom: 12px;
}

.dlm-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 0 0 8px;
}

.dlm-step-desc {
    font-size: 0.9rem;
    color: var(--dlm-text-muted);
    line-height: 1.5;
    margin: 0;
}

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

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

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

.dlm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--dlm-bg-card);
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: var(--dlm-shadow);
}

.dlm-data-table thead {
    background: #f8fafc;
}

.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 tbody tr:last-child td {
    border-bottom: none;
}

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

.dlm-data-table a {
    color: var(--dlm-primary);
    text-decoration: none;
    font-weight: 500;
}

.dlm-data-table a:hover {
    text-decoration: underline;
}

@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);
}

/* ─── Reviews: Featured + 2x2 Grid ──────────────────────────── */
.dlm-review-featured { margin-bottom: 16px; }

.dlm-review-card--featured {
    border-left: 3px solid var(--dlm-primary);
    background: linear-gradient(135deg, var(--dlm-bg-card) 0%, color-mix(in srgb, var(--dlm-primary) 3%, #fff) 100%);
    padding: 28px;
}

.dlm-review-avatar--lg {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
}

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

@media (max-width: 768px) {
    .dlm-reviews-grid-2x2 { grid-template-columns: 1fr; }
}

/* ─── Tipo Principal Badge ──────────────────────────────────── */
.dlm-tipo-badge {
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
    padding: 5px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    color: #ffffff;
}

/* ─── 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);
}

/* Hide old card body */
.dlm-card-ciudad--premium .dlm-card-body { display: none; }

/* ─── 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-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;
}

/* ─── Home Trust Bar ────────────────────────────────────────── */
.dlm-home-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 24px 16px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--dlm-border);
    flex-wrap: wrap;
}

.dlm-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dlm-text-muted);
}

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

/* ─── Section Subtitle ──────────────────────────────────────── */
.dlm-section-subtitle {
    font-size: 0.95rem;
    color: var(--dlm-text-muted);
    margin: -12px 0 20px;
    line-height: 1.5;
}

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

/* ─── Home Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .dlm-home-hero { padding: 40px 20px 36px; }
    .dlm-home-title { font-size: 1.8rem; }
    .dlm-home-subtitle { font-size: 0.95rem; }
    .dlm-home-trust { gap: 16px; }
    .dlm-trust-item { font-size: 0.8rem; }
    .dlm-page-hero-overlay { padding: 32px 20px; }
}

/* ─── Featured / Sticky Locales Section ─────────────────────── */
.dlm-featured-section {
    border-top: none;
    padding-top: 0;
}

.dlm-featured-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dlm-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #fff;
    border-radius: 50px;
    white-space: nowrap;
}

.dlm-featured-header .dlm-section-title { margin: 0; }

/* ─── Home Value Proposition Cards ───────────────────────────── */
.dlm-home-values { padding-top: 8px; }

.dlm-values-header {
    margin: 0 0 28px;
}

.dlm-values-header .dlm-section-title {
    margin-bottom: 10px;
}

.dlm-values-header .dlm-section-subtitle {
    color: var(--dlm-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.dlm-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dlm-value-card {
    background: var(--dlm-bg-card);
    border: 1px solid var(--dlm-border);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.dlm-value-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--dlm-primary);
}

.dlm-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(99,102,241,0.08) 100%);
    color: var(--dlm-primary);
    margin-bottom: 16px;
}

.dlm-value-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dlm-text);
    margin: 0 0 10px;
}

.dlm-value-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--dlm-text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .dlm-values-grid { grid-template-columns: 1fr; }
    .dlm-featured-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ─── 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) ─────────────────────── */
.dlm-explorer-section {
    margin-bottom: 32px;
}

.dlm-explorer-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    margin-top: 16px;
    align-items: start;
}

.dlm-explorer-filters {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* 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 {
    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-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 4px;
    font-size: 0.9rem;
    outline: none;
    color: var(--dlm-text);
    min-width: 0;
}

.dlm-filter-control {
    margin-bottom: 16px;
}

.dlm-filter-control:last-of-type {
    margin-bottom: 12px;
}

.dlm-filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dlm-text);
    margin-bottom: 8px;
}

.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 {
    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-range-wrap {
    padding: 4px 0;
}

.dlm-filter-range {
    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%));
    outline: none;
    cursor: pointer;
}

.dlm-filter-range::-webkit-slider-thumb {
    -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 {
    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-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-filter-reset:hover {
    border-color: var(--dlm-primary);
    color: var(--dlm-primary);
}

.dlm-explorer-map {
    position: sticky;
    top: 80px;
    height: calc(100vh - 100px);
    min-height: 500px;
    max-height: 700px;
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: var(--dlm-shadow);
}

.dlm-explorer-map .dlm-city-map {
    width: 100%;
    height: 100%;
}

.dlm-map-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    background: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--dlm-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
}

.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 */
.dlm-marker-bounce {
    animation: dlm-marker-bounce 0.6s ease-out;
}

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

/* Mobile: stack everything */
@media (max-width: 1024px) {
    .dlm-explorer-grid {
        grid-template-columns: 1fr;
    }
    .dlm-explorer-filters {
        position: static;
        max-height: none;
    }
    .dlm-explorer-map {
        position: static;
        height: 400px;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .dlm-explorer-map {
        height: 330px;
    }
    /* v3.30.20 — eliminada regla móvil de .dlm-explorer-filters-inner
       (la clase padre era código muerto, esta también). */
    .dlm-map-counter {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

/* ─── Explorer: Map on top, filters below ───────────────────── */
.dlm-explorer-section {
    margin-bottom: 24px;
    /* v3.27.83 — Desktop: CSS Grid de 2 columnas (mapa ~75% + filtros ~25%).
       Las dos celdas estiran a la misma altura gracias al stretch implícito,
       lo que hace que el mapa adopte la altura natural de los filtros (más
       alta que los 420px previos), aprovechando el espacio horizontal sin
       desperdiciar el lateral derecho que antes quedaba vacío.

       Móvil/tablet (<900px) heredan el flex-column antiguo gracias al
       media query más abajo. */
    /* v3.27.86 — Ratio ajustado a 70/30 (entre el 66/33 que sobraba ancho y
       el 74/26 que truncaba): el sidebar tiene espacio suficiente para el
       placeholder sin robar excesivo protagonismo al mapa. */
    display: grid;
    grid-template-columns: minmax(0, 2.33fr) minmax(280px, 1fr);
    gap: 14px;
    align-items: stretch;
}

.dlm-explorer-map-wrap {
    position: relative;
    border-radius: var(--dlm-radius);
    overflow: hidden;
    box-shadow: var(--dlm-shadow);
    /* v3.27.83 — height 100% para que iguale al filtro (la columna más alta
       define la altura del row y el mapa rellena ese espacio). */
    min-height: 420px;
    height: 100%;
}

.dlm-explorer-map-wrap .dlm-city-map {
    /* v3.27.83 — Antes era height: 420px fijo. Ahora 100% del wrapper para
       que estire a la altura del filtro lateral. */
    height: 100%;
    min-height: 420px;
    margin: 0;
    border-radius: var(--dlm-radius);
}

.dlm-map-counter {
    position: absolute;
    top: 12px;
    left: 60px;
    z-index: 500;
    background: rgba(255, 255, 255, 0.96);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--dlm-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 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;
}

.dlm-card-local.dlm-card--map-hover {
    box-shadow: 0 0 0 2px var(--dlm-primary);
    transition: box-shadow 0.15s;
}

/* Hide ranges fill on filter ranges (use --fill custom prop) */
.dlm-range-wrap .dlm-filter-range {
    background: linear-gradient(to right, var(--dlm-primary) 0%, var(--dlm-primary) var(--dlm-fill, 0%), #e5e7eb var(--dlm-fill, 0%));
}

/* ─── Filter card: two-row layout ──────────────────────────── */
.dlm-explorer-filters {
    background: #fff;
    border: 1px solid var(--dlm-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* v3.27.83 — height 100% para que la card de filtros estire a la altura
       de la fila grid. La row 2 (controles) tiene flex:1 para empujar el
       botón "Limpiar" al fondo y dar al filtro un look "panel completo". */
    height: 100%;
}
.dlm-explorer-filters .dlm-filter-row--controls {
    flex: 1 1 auto;
}

/* 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-search-icon {
    color: var(--dlm-text-muted);
    flex-shrink: 0;
}

.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-range-wrap {
    margin: 0;
}

.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) {
    /* v3.27.83 — Por debajo de 900px, mapa arriba y filtros debajo (apilados),
       como antes. Anula el grid lateral del desktop. */
    .dlm-explorer-section {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .dlm-explorer-map-wrap,
    .dlm-explorer-map-wrap .dlm-city-map {
        height: 420px;
        min-height: 420px;
    }
    .dlm-explorer-filters {
        height: auto;
    }
    /* 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) {
    .dlm-explorer-section { gap: 10px; }
    .dlm-explorer-map-wrap .dlm-city-map { height: 340px; }

    /* Row 1: only search */
    .dlm-filter-row--top {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .dlm-filter-row--top .dlm-filter-input {
        font-size: 16px;
    }

    /* 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;
    }

    .dlm-map-counter {
        font-size: 0.7rem;
        padding: 4px 10px;
        left: 50px;
        top: 10px;
    }
}

/* ─── Featured badge on card ─────────────────────────────── */
.dlm-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

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

/* ─── City pills (3 trust/stats cards) ──────────────────── */
.dlm-city-pills {
    margin: 32px 0;
}

/* v3.27.77 — Sección "Lo que destaca en la zona" sin contenedor blanco
   ni heading H2 (evita masificar la jerarquía de headings y se integra
   más sutilmente entre las pill cards y el listado de locales). */
.dlm-city-features {
    margin: 16px 0 32px;
}
.dlm-city-features-intro {
    margin: 0 0 14px;
    color: var(--dlm-text-muted, #475569);
    font-size: 0.98rem;
    line-height: 1.55;
}
.dlm-city-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dlm-city-feature-pill {
    /* Reset de margen del <li> dentro de un display:flex */
    margin: 0;
    /* Padding ligeramente mayor que .dlm-punto-item base para esta sección */
    padding: 9px 16px;
    font-size: 0.92rem;
}

@media (max-width: 600px) {
    .dlm-city-features {
        margin: 12px 0 24px;
    }
    .dlm-city-features-intro { font-size: 0.92rem; }
    .dlm-city-features-list { gap: 8px; }
    .dlm-city-feature-pill {
        padding: 7px 13px;
        font-size: 0.85rem;
    }
}

.dlm-city-pills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dlm-pill-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--dlm-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.dlm-pill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: rgba(37, 99, 235, 0.18);
}

.dlm-pill-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.dlm-pill-icon--blue {
    color: #2563eb;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(79, 70, 229, 0.08));
}

.dlm-pill-icon--amber {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(249, 115, 22, 0.08));
}

.dlm-pill-icon--green {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.08));
}

.dlm-pill-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dlm-pill-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dlm-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dlm-pill-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dlm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.dlm-pill-desc {
    font-size: 0.85rem;
    color: var(--dlm-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .dlm-city-pills-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dlm-pill-card {
        padding: 16px 18px;
    }
    .dlm-pill-value {
        font-size: 1.35rem;
    }
}

/* ─── 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::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%);
    pointer-events: none;
}

.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 {
        padding: 32px 24px;
    }
    .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 {
        padding: 28px 20px;
        border-radius: 14px;
    }
    .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 {
    color: var(--dlm-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.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;
}

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

@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:last-child { border-bottom: 0; }
.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 > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.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-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-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-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.dlm-form-submit svg { flex-shrink: 0; }
.dlm-form-submit.is-loading .dlm-form-submit-icon { display: none; }
.dlm-form-submit.is-loading .dlm-form-submit-spinner { display: inline-block !important; }
.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;
}

@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 {
        grid-template-columns: 1fr;
    }
    .dlm-contact-tipo {
        grid-template-columns: 1fr;
    }
    .dlm-contact-title {
        font-size: 1.5rem;
    }
}

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

/* Popular cities widget */
.dlm-widget-cities {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.dlm-widget-city-item {
    margin: 0;
    padding: 0;
}
.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-name { font-weight: inherit; }
.dlm-widget-city-count {
    font-size: 0.85em;
    opacity: 0.6;
    font-weight: 400;
}
.dlm-widget-view-all {
    display: inline-block;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.15s;
}
.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:hover {
    opacity: 0.85;
}
.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-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) {
    /* Footer Brand widget */
    .dlm-footer-brand,
    .dlm-footer-brand-tagline,
    .dlm-footer-brand-desc,
    .dlm-footer-brand-title,
    .dlm-footer-brand-stats {
        text-align: center;
    }
    .dlm-footer-brand-identity {
        align-items: center;
    }

    /* Popular Cities widget */
    .dlm-widget-cities-title,
    .dlm-widget-cities,
    .dlm-widget-cities li,
    .dlm-widget-view-all {
        text-align: center;
    }
    .dlm-widget-cities li {
        list-style: none;
    }
    .dlm-widget-cities {
        padding-left: 0;
    }
}

/* ─── Newsletter widget (transparent, inherits from parent section) ───── */
.dlm-newsletter {
    width: 100%;
}
.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;
}
@media (max-width: 600px) {
    .dlm-newsletter-fields {
        grid-template-columns: 1fr;
    }
}
.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-newsletter-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.dlm-newsletter-submit.is-loading .dlm-newsletter-submit-text { opacity: 0.6; }
.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 ─────────────────────────── */
:root {
    /* 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;
}

/* ─── 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 {
    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;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO DE HOME — Patrón de fondo sutil sin imagen
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Gradient mesh sutil decorativo */
.dlm-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 400px at 20% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(ellipse 600px 300px at 80% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* Noise sutil (SVG inline — no requiere archivo) */
.dlm-home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.25;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    pointer-events: none;
    z-index: -1;
}

/* Mejora del search bar */
.dlm-home-search .dlm-search-wrapper {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--dlm-duration-base) var(--dlm-ease-out),
                box-shadow var(--dlm-duration-base) var(--dlm-ease-out);
}
.dlm-home-search .dlm-search-wrapper:focus-within {
    transform: translateY(-1px);
    box-shadow: var(--dlm-shadow-xl);
}

/* ═══════════════════════════════════════════════════════════════════
   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 {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 500ms var(--dlm-ease-out),
        transform 500ms var(--dlm-ease-out);
    will-change: opacity, transform;
}

.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);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIONES — Espaciado generoso y consistente
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-value,
.dlm-home-how,
.dlm-home-regions,
.dlm-home-cities,
.dlm-home-featured,
.dlm-business-cta {
    scroll-margin-top: 80px; /* ancla offset para headers sticky */
}

/* ═══════════════════════════════════════════════════════════════════
   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 {
    /* 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);
}

/* Ensure body doesn't overlap our sticky header */
body.dlm-has-custom-header {
    margin-top: 0 !important;
}

/* 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-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);
}
.dlm-header-nav-link:focus-visible {
    outline: 2px solid var(--dlm-primary, #2563eb);
    outline-offset: 2px;
}

/* ─── 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-toggle:hover {
    background: rgba(15, 23, 42, 0.05);
}

.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-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.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;
}
.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-wrapper.dlm-has-value .dlm-header-search-clear {
    display: inline-flex;
}
.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-results.is-visible {
    display: block;
}

.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-item:last-child {
    border-bottom: 0;
}
.dlm-header-search-result-item:hover,
.dlm-header-search-result-item.is-active {
    background: rgba(37, 99, 235, 0.06);
    color: var(--dlm-primary, #2563eb);
}

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

.dlm-header-search-result-item .dlm-search-badge {
    margin-left: auto;
    font-size: 10.5px;
    padding: 2px 8px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.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-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-nav a:hover,
.dlm-header-mobile-nav a:focus-visible {
    background: rgba(37, 99, 235, 0.06);
    color: var(--dlm-primary, #2563eb);
}

.dlm-header-mobile-cta {
    display: block;
    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);
}
.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 {
        display: none; /* Show only logo on tablet */
    }
    .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-cta {
        /* Hide desktop CTA on small mobile — lives in mobile menu instead */
        display: none;
    }
    .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;
    }
}

/* ─── Nav item wrapper (for mega-menu positioning) ─── */
.dlm-header-nav-item {
    position: relative;
}
.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-item a:hover,
.dlm-mega-item a:focus-visible {
    background: rgba(37, 99, 235, 0.06);
    color: var(--dlm-primary, #2563eb);
}
.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 ─── */
.dlm-header-search-kbd {
    position: absolute;
    right: 10px;
    display: none;
    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;
}
@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;
    }
}
.dlm-kbd-mac { display: none; }
.dlm-kbd-pc  { display: inline; }
@media (hover: hover) {
    /* Rough detection of Mac by default Mac fonts: actually use JS — see scripts */
}
.dlm-is-mac .dlm-kbd-mac { display: inline; }
.dlm-is-mac .dlm-kbd-pc  { display: none; }

/* ─── 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-toggle.has-favs svg {
    fill: #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-card-fav-btn.is-fav svg {
    fill: #ec4899;
}
.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 {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 10px;
    text-decoration: none;
    color: var(--dlm-text, #0f172a);
    transition: background 0.15s ease;
    position: relative;
}
.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-info {
    flex: 1;
    min-width: 0;
}
.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-panel-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #fafbfc;
}
.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; }
.dlm-fav-panel.has-items .dlm-fav-empty { display: none; }

/* Cards need relative positioning for the fav button (most already have it via figure) */
.dlm-card-local .dlm-card-image {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   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);
}
.dlm-fab .dlm-fab-icon path,
.dlm-fab .dlm-fab-icon line,
.dlm-fab .dlm-fab-icon circle,
.dlm-fab .dlm-fab-icon polygon,
.dlm-fab .dlm-fab-icon polyline,
.dlm-fab .dlm-fab-icon rect {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    vector-effect: non-scaling-stroke;
}

/* 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-close-btn svg path,
.dlm-fab-close-btn svg line {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !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:focus-within .dlm-fab-search-icon {
    color: var(--dlm-primary, #2563eb);
}
.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-results.is-visible { display: block; }
.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-fab-search-result:last-child { border-bottom: none; }
.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-item:hover .dlm-fab-nav-icon {
    color: var(--dlm-primary, #2563eb);
}
.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 {
    padding-left: 42px !important;
}

.dlm-header-search-icon {
    left: 14px !important;
}

/* Hide the kbd hint (removed from HTML in v3.23, keep styles inert) */
.dlm-header-search-kbd { display: none !important; }

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

.dlm-biz-landing {
    --dlm-biz-orange: #f59e0b;
    --dlm-biz-orange-dark: #d97706;
    --dlm-biz-primary: var(--dlm-primary, #2563eb);
    --dlm-biz-text: #0f172a;
    --dlm-biz-muted: #475569;
    --dlm-biz-border: rgba(15, 23, 42, 0.08);
    --dlm-biz-bg-soft: #f8fafc;
    font-family: inherit;
    color: var(--dlm-biz-text);
    line-height: 1.55;
}
.dlm-biz-container {
    max-width: var(--dlm-header-width, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}
.dlm-biz-section {
    padding: 64px 0;
}
@media (max-width: 768px) { .dlm-biz-section { padding: 48px 0; } }

.dlm-biz-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}
.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;
}

/* ─── Buttons ─── */
.dlm-biz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: -0.005em;
}
.dlm-biz-btn--large { padding: 16px 28px; font-size: 16px; }
.dlm-biz-btn--primary {
    background: linear-gradient(135deg, var(--dlm-biz-orange) 0%, var(--dlm-biz-orange-dark) 100%);
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2), 0 4px 12px rgba(217, 119, 6, 0.18);
}
.dlm-biz-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.3), 0 8px 20px rgba(217, 119, 6, 0.25);
    color: #fff !important;
}
.dlm-biz-btn--outline {
    background: transparent;
    color: var(--dlm-biz-text);
    border-color: var(--dlm-biz-border);
}
.dlm-biz-btn--outline:hover { border-color: var(--dlm-biz-primary); color: var(--dlm-biz-primary); }
.dlm-biz-btn--ghost { background: rgba(15,23,42,0.04); color: var(--dlm-biz-text); }
.dlm-biz-btn--ghost:hover { background: rgba(15,23,42,0.08); color: var(--dlm-biz-text); }
.dlm-biz-btn--ghost-white { background: rgba(255,255,255,0.15); color: #fff !important; border-color: rgba(255,255,255,0.3); }
.dlm-biz-btn--ghost-white:hover { background: rgba(255,255,255,0.25); color: #fff !important; }

/* ─── HERO ─── */
.dlm-biz-hero {
    padding: 80px 0 64px;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dlm-biz-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(245, 158, 11, 0.08), transparent);
    pointer-events: none;
}
.dlm-biz-hero .dlm-biz-container { position: relative; }
.dlm-biz-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.12);
    color: var(--dlm-biz-orange-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 100px;
    margin-bottom: 20px;
}
.dlm-biz-hero-title {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.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-subtitle {
    font-size: 18px;
    color: var(--dlm-biz-muted);
    max-width: 680px;
    margin: 0 auto 32px;
    line-height: 1.55;
}
.dlm-biz-hero-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.dlm-biz-hero-trust {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--dlm-biz-muted);
    margin-bottom: 40px;
}
.dlm-biz-hero-stats {
    display: flex;
    gap: 56px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 40px;
    border-top: 1px solid var(--dlm-biz-border);
}
.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;
}

/* ─── PROBLEM / SOLUTION ─── */
.dlm-biz-problem {
    background: var(--dlm-biz-bg-soft);
}
.dlm-biz-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 768px) { .dlm-biz-problem-grid { grid-template-columns: 1fr; } }
.dlm-biz-problem-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.05);
    border-top: 3px solid transparent;
}
.dlm-biz-problem-card--pain { border-top-color: #ef4444; }
.dlm-biz-problem-card--gain { border-top-color: #22c55e; }
.dlm-biz-problem-card h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--dlm-biz-text);
}
.dlm-biz-problem-card--pain h2::before {
    content: '⚠️ ';
}
.dlm-biz-problem-card--gain h2::before {
    content: '✓ ';
    color: #22c55e;
}
.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-problem-card li:last-child { border-bottom: 0; }
.dlm-biz-problem-card--pain li::before {
    content: '✕';
    position: absolute;
    left: 0;
    top: 10px;
    color: #ef4444;
    font-weight: 700;
}
.dlm-biz-problem-card--gain li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 10px;
    color: #22c55e;
    font-weight: 700;
}

/* ─── COMPARISON TABLE ─── */
.dlm-biz-compare-table {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 32px rgba(15,23,42,0.07);
    overflow: hidden;
    border: 1px solid var(--dlm-biz-border);
}
.dlm-biz-compare-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    padding: 24px;
    background: var(--dlm-biz-bg-soft);
    border-bottom: 1px solid var(--dlm-biz-border);
    text-align: center;
}
.dlm-biz-compare-col { position: relative; }
.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 {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(217,119,6,0.08) 100%);
    border-radius: 12px;
    padding: 16px 12px 12px;
    margin: -4px;
    position: relative;
}
.dlm-biz-compare-col--premium strong { color: var(--dlm-biz-orange-dark); }
.dlm-biz-compare-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--dlm-biz-orange) 0%, var(--dlm-biz-orange-dark) 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}
.dlm-biz-compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    padding: 16px 24px;
    align-items: center;
    border-bottom: 1px solid var(--dlm-biz-border);
}
.dlm-biz-compare-row:last-of-type { border-bottom: 0; }
.dlm-biz-compare-row:hover { background: rgba(15, 23, 42, 0.015); }
.dlm-biz-compare-label {
    font-size: 14.5px;
    color: var(--dlm-biz-text);
    font-weight: 500;
}
.dlm-biz-compare-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dlm-biz-icon-yes { color: #22c55e; }
.dlm-biz-icon-no { color: #cbd5e1; }
.dlm-biz-compare-ctas {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    padding: 24px;
    background: var(--dlm-biz-bg-soft);
    border-top: 1px solid var(--dlm-biz-border);
    align-items: center;
}
.dlm-biz-compare-ctas > div { display: flex; justify-content: center; }
.dlm-biz-compare-ctas .dlm-biz-btn { width: 100%; max-width: 220px; }

@media (max-width: 700px) {
    .dlm-biz-compare-head { grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 20px 12px 24px; }
    .dlm-biz-compare-col-label { display: none; }
    .dlm-biz-compare-row { grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 14px 12px; }
    .dlm-biz-compare-label { font-size: 13px; }
    .dlm-biz-compare-ctas { grid-template-columns: 1fr; }
    .dlm-biz-compare-ctas > div:first-child { display: none; }
}

/* ─── STEPS ─── */
.dlm-biz-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.dlm-biz-step {
    text-align: center;
    padding: 28px 20px;
}
.dlm-biz-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dlm-biz-orange) 0%, var(--dlm-biz-orange-dark) 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
}
.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;
}

/* ─── PRICING ─── */
.dlm-biz-pricing { background: var(--dlm-biz-bg-soft); }
.dlm-biz-price-card {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 12px 40px rgba(15,23,42,0.08);
    border: 2px solid var(--dlm-biz-orange);
    text-align: center;
    position: relative;
}
.dlm-biz-price-head { margin-bottom: 28px; }
.dlm-biz-price-tag {
    display: inline-block;
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--dlm-biz-orange) 0%, var(--dlm-biz-orange-dark) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 100px;
    margin-bottom: 16px;
}
.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-note {
    font-size: 13px;
    color: var(--dlm-biz-muted);
    margin: 12px 0 0;
}
.dlm-biz-price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
}
.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-price-features li:last-child { border-bottom: 0; }
.dlm-biz-price-features li svg { color: #22c55e; flex-shrink: 0; }
.dlm-biz-price-card .dlm-biz-btn { width: 100%; }
.dlm-biz-price-guarantee {
    font-size: 12.5px;
    color: var(--dlm-biz-muted);
    margin: 16px 0 0;
}

/* ─── TESTIMONIALS ─── */
.dlm-biz-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.dlm-biz-testimonial {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    margin: 0;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.05);
    border: 1px solid var(--dlm-biz-border);
}
.dlm-biz-testimonial-stars {
    color: var(--dlm-biz-orange);
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.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 blockquote::before { content: '"'; }
.dlm-biz-testimonial blockquote::after { content: '"'; }
.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-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dlm-biz-primary) 0%, #1e3a8a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.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;
}

/* ─── FAQ ─── */
.dlm-biz-faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.dlm-biz-faq-item {
    background: #fff;
    border: 1px solid var(--dlm-biz-border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.dlm-biz-faq-item[open] {
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.05);
}
.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); }
.dlm-biz-faq-item summary svg {
    flex-shrink: 0;
    color: var(--dlm-biz-muted);
    transition: transform 0.25s ease;
}
.dlm-biz-faq-item[open] summary svg { transform: rotate(180deg); }
.dlm-biz-faq-answer {
    padding: 0 20px 20px;
    color: var(--dlm-biz-muted);
    font-size: 14.5px;
    line-height: 1.6;
}
.dlm-biz-faq-answer p { margin: 0; }

/* ─── FINAL CTA ─── */
.dlm-biz-final-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, var(--dlm-biz-orange-dark) 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dlm-biz-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 600px 300px at 50% 50%, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}
.dlm-biz-final-cta .dlm-biz-container { position: relative; }
.dlm-biz-final-cta h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 16px;
}
.dlm-biz-final-cta p {
    font-size: 17px;
    color: rgba(255,255,255,0.85);
    margin: 0 auto 32px;
    max-width: 560px;
}
.dlm-biz-final-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper landing: ancho completo directamente */
.dlm-biz-landing {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Secciones: ocupan todo el ancho, sin breakout */
.dlm-biz-hero,
.dlm-biz-problem,
.dlm-biz-comparison,
.dlm-biz-steps,
.dlm-biz-pricing,
.dlm-biz-testimonials,
.dlm-biz-faq,
.dlm-biz-final-cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Container interno centrado */
.dlm-biz-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .dlm-biz-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Estructura vacía que reabrimos para get_footer(): que no ocupe ni se vea */
.dlm-biz-landing ~ .site-content {
    display: none;
}


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

/* Wrapper landing: ancho completo */
.dlm-home-landing {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--dlm-text, #0f172a);
}

/* Ocultar la estructura vacía que reabrimos para get_footer() */
.dlm-home-landing ~ .site-content {
    display: none;
}

/* Cada sección ocupa todo el ancho */
.dlm-home-section-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 72px 0;
}
@media (max-width: 768px) {
    .dlm-home-section-wrap { padding: 48px 0; }
}

/* Container interno centrado (como el footer CTA) */
.dlm-home-landing .dlm-home-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-container { padding-left: 16px; padding-right: 16px; }
}

/* ─── Fondos alternos ─── */
.dlm-home-steps-wrap,
.dlm-home-locales-wrap,
.dlm-home-values-wrap {
    background: #ffffff;
}
.dlm-home-cities-wrap,
.dlm-home-regions-wrap,
.dlm-home-trust-wrap {
    background: #f8fafc;
}
.dlm-home-ads-wrap {
    background: #ffffff;
    padding: 24px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO: fondo gradiente claro, texto oscuro
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-hero-wrap {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    padding: 96px 0 80px;
}
.dlm-home-hero-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 900px 500px at 30% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
        radial-gradient(ellipse 700px 400px at 80% 20%, rgba(217, 119, 6, 0.06), transparent 60%);
    pointer-events: none;
}
.dlm-home-hero-wrap .dlm-home-container { position: relative; }
@media (max-width: 768px) {
    .dlm-home-hero-wrap { padding: 64px 0 56px; }
}

/* NEUTRALIZA por completo el viejo .dlm-home-hero dentro del landing */
.dlm-home-landing .dlm-home-hero {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.dlm-home-landing .dlm-home-hero::before,
.dlm-home-landing .dlm-home-hero::after {
    display: none !important;
}

.dlm-home-landing .dlm-home-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.dlm-home-landing .dlm-home-title {
    font-size: clamp(32px, 5vw, 52px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;
    color: var(--dlm-text, #0f172a) !important;
    text-shadow: none !important;
}
.dlm-home-landing .dlm-home-subtitle {
    font-size: clamp(16px, 2vw, 19px) !important;
    color: var(--dlm-text-muted, #475569) !important;
    max-width: 680px;
    margin: 0 auto 36px !important;
    line-height: 1.55;
    text-shadow: none !important;
}

/* Buscador prominente */
.dlm-home-landing .dlm-home-search {
    max-width: 640px;
    margin: 0 auto 28px;
}
.dlm-home-landing .dlm-search-wrapper {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
}
.dlm-home-landing .dlm-search-wrapper:focus-within {
    border-color: var(--dlm-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 12px 32px rgba(15, 23, 42, 0.08);
}
.dlm-home-landing .dlm-search-input {
    font-size: 16px !important;
    padding: 16px 16px 16px 48px !important;
    height: 56px;
    background: transparent !important;
    border: 0;
    width: 100%;
    color: var(--dlm-text, #0f172a) !important;
}
.dlm-home-landing .dlm-search-icon {
    left: 18px !important;
    color: #94a3b8 !important;
}

/* Counters: texto oscuro sobre fondo claro */
.dlm-home-landing .dlm-hero-counters {
    background: transparent !important;
    border: 0 !important;
    padding: 32px 0 0 !important;
    margin: 40px 0 24px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    gap: 56px;
    justify-content: center;
    flex-wrap: wrap;
}
.dlm-home-landing .dlm-hero-counter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    background: transparent !important;
}
.dlm-home-landing .dlm-hero-counter-num {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--dlm-text, #0f172a) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: none !important;
}
.dlm-home-landing .dlm-hero-counter-label {
    font-size: 12px !important;
    color: var(--dlm-text-muted, #64748b) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600 !important;
    text-shadow: none !important;
}
@media (max-width: 640px) {
    .dlm-home-landing .dlm-hero-counters { gap: 28px !important; }
    .dlm-home-landing .dlm-hero-counter-num { font-size: 24px !important; }
}

/* Feature pills */
.dlm-home-landing .dlm-hero-features {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.dlm-home-landing .dlm-hero-feature {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--dlm-primary, #2563eb) !important;
    border: 0 !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Titles
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-landing .dlm-section-title {
    text-align: center;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--dlm-text, #0f172a);
}
.dlm-home-landing .dlm-section-subtitle {
    text-align: center;
    font-size: 16px;
    color: var(--dlm-text-muted, #64748b);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.55;
}
.dlm-home-landing .dlm-home-section { margin: 0 !important; padding: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   BUSINESS CTA block (fondo oscuro, mitad de la home)
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-biz-wrap {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #d97706 100%);
    position: relative;
    overflow: hidden;
}
.dlm-home-biz-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 400px at 30% 50%, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}
.dlm-home-biz-wrap .dlm-home-container { position: relative; }
.dlm-home-biz {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}
.dlm-home-biz-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 100px;
    margin-bottom: 20px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.dlm-home-biz-title {
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #ffffff;
}
.dlm-home-biz-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 640px;
}
.dlm-home-biz-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.dlm-home-biz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    letter-spacing: -0.005em;
}
.dlm-home-biz-btn--primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3), 0 6px 16px rgba(217, 119, 6, 0.3);
}
.dlm-home-biz-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.4), 0 10px 24px rgba(217, 119, 6, 0.35);
    color: #ffffff !important;
}
.dlm-home-biz-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25);
}
.dlm-home-biz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4);
}
.dlm-home-biz-trust {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

/* ═══════════════════════════════════════════════════════════════════
   TRUST BAR horizontal
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-trust-wrap .dlm-home-trust {
    display: flex !important;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.dlm-home-trust-wrap .dlm-trust-item {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--dlm-text-muted, #475569) !important;
    font-weight: 500;
    background: transparent !important;
}
.dlm-home-trust-wrap .dlm-trust-item svg {
    color: var(--dlm-primary, #2563eb) !important;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   VALUE cards
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-values-wrap .dlm-home-values {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.dlm-home-values-wrap .dlm-values-header {
    text-align: center;
    margin-bottom: 48px;
}
.dlm-home-values-wrap .dlm-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.dlm-home-values-wrap .dlm-value-card {
    text-align: center;
    padding: 32px 24px !important;
    background: #f8fafc !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s ease;
}
.dlm-home-values-wrap .dlm-value-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
    background: #ffffff !important;
}
.dlm-home-values-wrap .dlm-value-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    color: var(--dlm-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-steps-wrap .dlm-home-steps {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.dlm-home-steps-wrap .dlm-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    margin-top: 8px;
}
.dlm-home-steps-wrap .dlm-step-card {
    text-align: center;
    padding: 28px 20px;
    position: relative;
    background: transparent !important;
}
.dlm-home-steps-wrap .dlm-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.dlm-home-steps-wrap .dlm-step-icon {
    color: var(--dlm-primary, #2563eb);
    margin-bottom: 12px;
}

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

/* ─── HERO: kicker badge arriba del título ─────────────────────────── */
.dlm-home-landing .dlm-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--dlm-primary, #2563eb);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 24px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dlm-home-landing .dlm-hero-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    position: relative;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: dlm-pulse-dot 2s ease-in-out infinite;
}
@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) ──────────────────────── */
.dlm-home-landing .dlm-section-head {
    text-align: center;
    margin-bottom: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dlm-home-landing .dlm-section-kicker {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25), 0 4px 16px rgba(37, 99, 235, 0.18);
    position: relative;
    transform: translateY(0);
    animation: dlm-kicker-float 4s ease-in-out infinite;
}
@keyframes dlm-kicker-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Kicker variantes por sección (colores distintos) */
.dlm-home-cities-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25), 0 4px 16px rgba(217, 119, 6, 0.18);
}
.dlm-home-regions-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25), 0 4px 16px rgba(139, 92, 246, 0.18);
}
.dlm-home-locales-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.25), 0 4px 16px rgba(236, 72, 153, 0.18);
}
.dlm-home-steps-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25), 0 4px 16px rgba(16, 185, 129, 0.18);
}
.dlm-home-values-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
}

/* Títulos con subrayado decorativo */
.dlm-home-landing .dlm-section-head .dlm-section-title {
    position: relative;
    margin-bottom: 14px;
}
.dlm-home-landing .dlm-section-head .dlm-section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--dlm-primary, #2563eb), transparent);
    border-radius: 2px;
}

/* ─── COUNTER NUMBER: tabular + transición suave ──────────────────── */
.dlm-home-landing .dlm-hero-counter-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transition: transform 0.3s ease;
}
.dlm-home-landing .dlm-hero-counter:hover .dlm-hero-counter-num {
    transform: scale(1.04);
    color: var(--dlm-primary, #2563eb) !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* ─── BREATHING CTA (Business CTA premium button) ─────────────────── */
.dlm-home-biz-btn--primary {
    position: relative;
    overflow: hidden;
    animation: dlm-breathe 3.2s ease-in-out infinite;
}
@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);
    }
}

/* Shine effect (sutil luz que cruza cada cierto tiempo) */
.dlm-home-biz-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    animation: dlm-shine 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dlm-shine {
    0%, 85%, 100% { left: -100%; }
    92% { left: 100%; }
}
/* Pause on hover — que no moleste al hacer click */
.dlm-home-biz-btn--primary:hover {
    animation-play-state: paused;
}
.dlm-home-biz-btn--primary:hover::before {
    animation-play-state: paused;
}

/* ─── BADGE BREATHING (el kicker "PARA DUEÑOS DE NEGOCIO") ────────── */
.dlm-home-biz-badge {
    animation: dlm-badge-glow 2.5s ease-in-out infinite;
}
@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; }
}

/* ─── CARD HOVER sutil (lift) ─────────────────────────────────────── */
.dlm-home-landing .dlm-card-ciudad,
.dlm-home-landing .dlm-card-region,
.dlm-home-landing .dlm-card-local {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dlm-home-landing .dlm-card-ciudad:hover,
.dlm-home-landing .dlm-card-region:hover,
.dlm-home-landing .dlm-card-local:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ─── Gradient border effect on hero search ───────────────────────── */
.dlm-home-landing .dlm-search-wrapper {
    position: relative;
}
.dlm-home-landing .dlm-search-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.4),
        rgba(217, 119, 6, 0.3),
        rgba(236, 72, 153, 0.3));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.dlm-home-landing .dlm-search-wrapper:focus-within::before {
    opacity: 1;
}

/* ─── BUSINESS CTA section: gradient border top (detalle premium) ──── */
.dlm-home-biz-wrap {
    position: relative;
}
.dlm-home-biz-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, #ec4899, #8b5cf6, transparent);
    opacity: 0.6;
}

/* ─── Section heads responsive ────────────────────────────────────── */
@media (max-width: 640px) {
    .dlm-home-landing .dlm-section-head { margin-bottom: 32px; }
    .dlm-home-landing .dlm-section-kicker {
        font-size: 10px;
        padding: 5px 12px;
        letter-spacing: 0.1em;
    }
}

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

/* ─── Global: espaciado más compacto entre secciones ─── */
.dlm-home-landing .dlm-home-section-wrap {
    padding: 52px 0 !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-section-wrap { padding: 40px 0 !important; }
}

/* Container más amplio para descripciones respirando */
.dlm-home-landing .dlm-home-container {
    max-width: 1280px !important;
}

/* Subtítulos más anchos para que no queden encajonados */
.dlm-home-landing .dlm-section-subtitle {
    max-width: 760px !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* ─── FIX: solapamiento number en cómo funciona ─── */
.dlm-home-steps-wrap .dlm-step-card {
    position: relative;
    padding: 54px 28px 32px !important;
    background: #ffffff !important;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    overflow: visible !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dlm-home-steps-wrap .dlm-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 16px 40px rgba(37,99,235,0.08);
    border-color: rgba(37, 99, 235, 0.15);
}
/* Número flotando arriba, SIN solaparse con el icono */
.dlm-home-steps-wrap .dlm-step-num {
    position: absolute !important;
    top: -22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35), 0 0 0 5px #ffffff !important;
    margin: 0 !important;
    z-index: 2;
}
/* Icono ahora tiene espacio propio debajo del número */
.dlm-home-steps-wrap .dlm-step-icon {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    width: 56px;
    height: 56px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 14px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--dlm-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dlm-home-steps-wrap .dlm-step-icon svg { width: 28px; height: 28px; }
.dlm-home-steps-wrap .dlm-step-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--dlm-text, #0f172a);
}
.dlm-home-steps-wrap .dlm-step-desc {
    color: var(--dlm-text-muted, #64748b);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* ─── Encabezados: REEMPLAZAR línea horizontal por ACENTO "sparkle" ─── */
.dlm-home-landing .dlm-section-head .dlm-section-title::after {
    display: none !important;
}
.dlm-home-landing .dlm-section-title {
    position: relative;
    display: inline-block;
}
/* Acento decorativo debajo del kicker: tres puntos degradados */
.dlm-home-landing .dlm-section-head::after {
    content: '';
    display: block;
    width: 48px;
    height: 6px;
    margin: 18px auto 0;
    background:
        radial-gradient(circle at 8px 50%, var(--dlm-primary, #2563eb) 3px, transparent 3.5px),
        radial-gradient(circle at 24px 50%, #8b5cf6 3px, transparent 3.5px),
        radial-gradient(circle at 40px 50%, #ec4899 3px, transparent 3.5px);
    opacity: 0.7;
}

/* Kicker con respiración sutil */
.dlm-home-landing .dlm-section-kicker {
    animation: dlm-kicker-breathe 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
@keyframes dlm-kicker-breathe {
    0%, 100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-2px);
        filter: brightness(1.08);
    }
}
/* Shine lento en los kickers */
.dlm-home-landing .dlm-section-kicker::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: dlm-kicker-shine 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dlm-kicker-shine {
    0%, 88%, 100% { left: -100%; }
    94% { left: 100%; }
}

/* ─── HERO: dos kickers lado a lado ─── */
.dlm-home-landing .dlm-hero-kickers-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.dlm-home-landing .dlm-hero-kicker--update {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
    animation: dlm-kicker-float-2 3.5s ease-in-out infinite;
}
@keyframes dlm-kicker-float-2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.dlm-home-landing .dlm-hero-kicker--verified {
    animation: dlm-kicker-float-1 3s ease-in-out infinite;
}
@keyframes dlm-kicker-float-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ─── HERO quick tags (keywords SEO) ─── */
.dlm-home-landing .dlm-hero-quick-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 640px;
    margin: 16px auto 0;
}
.dlm-home-landing .dlm-hero-quick-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dlm-text-muted, #64748b);
}
.dlm-home-landing .dlm-hero-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #ffffff;
    color: var(--dlm-text, #0f172a);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dlm-home-landing .dlm-hero-quick-tag:hover {
    background: var(--dlm-primary, #2563eb);
    color: #ffffff;
    border-color: var(--dlm-primary, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ─── CARDS de ciudades/regiones PREMIUM ─── */
.dlm-home-landing .dlm-ciudades-grid,
.dlm-home-landing .dlm-provincias-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 22px !important;
}

.dlm-home-landing .dlm-card-ciudad,
.dlm-home-landing .dlm-card-region {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dlm-home-landing .dlm-card-ciudad:hover,
.dlm-home-landing .dlm-card-region:hover {
    transform: translateY(-6px) !important;
    border-color: transparent !important;
    box-shadow:
        0 12px 32px rgba(37, 99, 235, 0.12),
        0 24px 48px rgba(15, 23, 42, 0.08) !important;
}

/* Gradient border efecto al hacer hover */
.dlm-home-landing .dlm-card-ciudad::before,
.dlm-home-landing .dlm-card-region::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, var(--dlm-primary, #2563eb), #8b5cf6, #ec4899);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.dlm-home-landing .dlm-card-ciudad:hover::before,
.dlm-home-landing .dlm-card-region:hover::before {
    opacity: 1;
}

/* Overlay con zoom de imagen */
.dlm-home-landing .dlm-card-ciudad .dlm-card-image img,
.dlm-home-landing .dlm-card-region .dlm-card-image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dlm-home-landing .dlm-card-ciudad:hover .dlm-card-image img,
.dlm-home-landing .dlm-card-region:hover .dlm-card-image img {
    transform: scale(1.08) !important;
}

/* ─── CARDS DE LOCALES: contraste aumentado + glow sutil ─── */
.dlm-home-locales-wrap .dlm-card-local {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06),
        0 12px 32px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
}
.dlm-home-locales-wrap .dlm-card-local::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.3) 0%,
        rgba(139, 92, 246, 0.2) 50%,
        rgba(236, 72, 153, 0.25) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    filter: blur(16px);
}
.dlm-home-locales-wrap .dlm-card-local:hover {
    transform: translateY(-6px) !important;
    border-color: transparent !important;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.08),
        0 20px 48px rgba(15, 23, 42, 0.12),
        0 24px 64px rgba(37, 99, 235, 0.14) !important;
}
.dlm-home-locales-wrap .dlm-card-local:hover::after {
    opacity: 1;
}

/* Rating badge más contrastado */
.dlm-home-locales-wrap .dlm-card-local .dlm-card-rating {
    background: #ffffff !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NUEVA SECCIÓN: EL DIRECTORIO EN NÚMEROS
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-stats-wrap {
    background: #ffffff;
    position: relative;
}
.dlm-home-stats-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 500px at 15% 20%, rgba(37, 99, 235, 0.04), transparent),
        radial-gradient(circle 400px at 85% 80%, rgba(217, 119, 6, 0.04), transparent);
    pointer-events: none;
}
.dlm-home-stats-wrap > .dlm-home-container { position: relative; }
.dlm-home-stats-wrap .dlm-section-kicker {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.25);
}

.dlm-stats-showcase {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .dlm-stats-showcase { grid-template-columns: 1fr; gap: 16px; }
}

.dlm-stats-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dlm-stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 16px 36px rgba(15,23,42,0.1);
}

.dlm-stats-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.dlm-stats-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(139,92,246,0.1));
    color: var(--dlm-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.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);
}

/* ─── Gráfico de barras ─── */
.dlm-stats-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dlm-stats-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 14px;
}
.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-track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.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);
}
.dlm-stats-bar:nth-child(1) .dlm-stats-bar-fill { background: linear-gradient(90deg, #2563eb, #1e3a8a); }
.dlm-stats-bar:nth-child(2) .dlm-stats-bar-fill { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.dlm-stats-bar:nth-child(3) .dlm-stats-bar-fill { background: linear-gradient(90deg, #ec4899, #be185d); }
.dlm-stats-bar:nth-child(4) .dlm-stats-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.dlm-stats-bar:nth-child(5) .dlm-stats-bar-fill { background: linear-gradient(90deg, #10b981, #047857); }

/* ─── Side (ring + metric) ─── */
.dlm-stats-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dlm-stats-card--ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dlm-stats-ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
}
.dlm-stats-ring-track {
    stroke: #e2e8f0;
}
.dlm-stats-ring-fill {
    stroke: url(#dlm-ring-gradient);
    stroke-dasharray: 326.7;  /* 2π × 52 */
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.3));
}
/* Fallback color if SVG gradient not defined */
.dlm-stats-ring svg { display: block; }
.dlm-stats-ring-fill {
    stroke: #2563eb;
}
.dlm-stats-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.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-card--metric .dlm-stats-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.dlm-stats-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.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;
}

.dlm-stats-card-caption {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--dlm-text-muted, #64748b);
    line-height: 1.5;
    text-align: center;
}
.dlm-stats-card--metric .dlm-stats-card-caption { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   BUSINESS CTA: REEMPLAZAR fondo azul-oscuro por DORADO premium
   ═══════════════════════════════════════════════════════════════════ */
.dlm-home-biz-wrap {
    background:
        radial-gradient(ellipse 1200px 600px at 20% 30%, rgba(250, 204, 21, 0.12), transparent 55%),
        radial-gradient(ellipse 1000px 500px at 85% 70%, rgba(245, 158, 11, 0.15), transparent 55%),
        linear-gradient(135deg, #1e1b18 0%, #3f3020 40%, #5c3d17 100%) !important;
    position: relative;
    overflow: hidden;
}
.dlm-home-biz-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 400px at 50% 50%, rgba(250, 204, 21, 0.06), transparent 60%);
    pointer-events: none;
}
/* Línea dorada de arriba */
.dlm-home-biz-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fbbf24, #f59e0b, #fbbf24, transparent);
    opacity: 0.9;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* Pattern dorado sutil (dots) */
.dlm-home-biz-wrap .dlm-home-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(251, 191, 36, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0.4;
}
/* v3.30.20 — Eliminado duplicado de .dlm-home-biz-wrap .dlm-home-container
   { position: relative } (idéntico a L7852). */
.dlm-home-biz { position: relative; z-index: 1; }

.dlm-home-biz-badge {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fde68a !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
}
.dlm-home-biz-title {
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}
.dlm-home-biz-desc {
    color: rgba(254, 243, 199, 0.85) !important;
}

.dlm-home-biz-btn--primary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
    box-shadow:
        0 4px 12px rgba(217, 119, 6, 0.4),
        0 8px 32px rgba(245, 158, 11, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #1e1b18 !important;
    font-weight: 700 !important;
}
.dlm-home-biz-btn--primary:hover {
    box-shadow:
        0 6px 20px rgba(217, 119, 6, 0.5),
        0 12px 40px rgba(245, 158, 11, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #1e1b18 !important;
}
.dlm-home-biz-btn--ghost {
    background: rgba(251, 191, 36, 0.1) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}
.dlm-home-biz-btn--ghost:hover {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(251, 191, 36, 0.6) !important;
}
.dlm-home-biz-trust {
    color: rgba(254, 243, 199, 0.75) !important;
}

/* 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
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Container adapta al ancho fijado por Astra ─── */
.dlm-home-landing .dlm-home-container {
    max-width: var(--dlm-header-width, 1200px) !important;
}
.dlm-home-landing .dlm-home-hero-wrap > .dlm-home-container {
    max-width: var(--dlm-header-width, 1200px) !important;
}

/* ─── 2. Menos separación entre secciones ─── */
.dlm-home-landing .dlm-home-section-wrap {
    padding: 36px 0 !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-section-wrap { padding: 28px 0 !important; }
}
/* Hero un poco más de aire */
.dlm-home-landing .dlm-home-hero-wrap {
    padding: 72px 0 56px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-hero-wrap { padding: 48px 0 40px !important; }
}

/* ─── 3. Grids de regiones/ciudades a 3 columnas ─── */
.dlm-home-landing .dlm-ciudades-grid,
.dlm-home-landing .dlm-provincias-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
@media (max-width: 900px) {
    .dlm-home-landing .dlm-ciudades-grid,
    .dlm-home-landing .dlm-provincias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .dlm-home-landing .dlm-ciudades-grid,
    .dlm-home-landing .dlm-provincias-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 4. Quitar tono morado/rosa de las cards de regiones/ciudades ─── */
/* Sobrescribe el gradient border con algo más sobrio */
.dlm-home-landing .dlm-card-ciudad::before,
.dlm-home-landing .dlm-card-region::before {
    background: var(--dlm-primary, #2563eb) !important;
    opacity: 0 !important;
}
.dlm-home-landing .dlm-card-ciudad:hover::before,
.dlm-home-landing .dlm-card-region:hover::before {
    opacity: 0 !important;  /* Sin gradient border, solo sombra */
}
.dlm-home-landing .dlm-card-ciudad:hover,
.dlm-home-landing .dlm-card-region:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.06),
        0 12px 32px rgba(15, 23, 42, 0.08) !important;
}

/* ─── 5. Quitar tono morado/rosa de las cards de locales ─── */
.dlm-home-locales-wrap .dlm-card-local::after {
    background: var(--dlm-primary, #2563eb) !important;
    opacity: 0 !important;
}
.dlm-home-locales-wrap .dlm-card-local:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.08),
        0 16px 40px rgba(15, 23, 42, 0.1) !important;
}
.dlm-home-locales-wrap .dlm-card-local:hover::after {
    opacity: 0 !important;
}

/* ─── 6. Barras de stats con mismo color primario ─── */
.dlm-home-stats-wrap .dlm-stats-bar-fill,
.dlm-home-stats-wrap .dlm-stats-bar:nth-child(1) .dlm-stats-bar-fill,
.dlm-home-stats-wrap .dlm-stats-bar:nth-child(2) .dlm-stats-bar-fill,
.dlm-home-stats-wrap .dlm-stats-bar:nth-child(3) .dlm-stats-bar-fill,
.dlm-home-stats-wrap .dlm-stats-bar:nth-child(4) .dlm-stats-bar-fill,
.dlm-home-stats-wrap .dlm-stats-bar:nth-child(5) .dlm-stats-bar-fill {
    background: linear-gradient(90deg, var(--dlm-primary, #2563eb) 0%, #1e3a8a 100%) !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}

.dlm-stats-bar-emoji {
    margin-right: 4px;
    font-style: normal;
}

/* ─── 7. Mini-card "highlight" (reemplaza el ring de cobertura) ─── */
.dlm-stats-card--highlight {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid rgba(37, 99, 235, 0.12);
    text-align: center;
    padding: 28px 24px;
}
.dlm-stats-highlight-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dlm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.dlm-stats-highlight-num {
    font-size: 44px;
    font-weight: 800;
    color: var(--dlm-primary, #2563eb);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 12px;
}
.dlm-stats-highlight-desc {
    font-size: 13px;
    color: var(--dlm-text-muted, #64748b);
    line-height: 1.5;
}

/* ─── 8. BUSINESS "Para dueños" — fondo más sobrio y elegante ─── */
.dlm-home-biz-wrap {
    background:
        linear-gradient(135deg, #0b1120 0%, #1e293b 50%, #0b1120 100%) !important;
}
.dlm-home-biz-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 1000px 500px at 20% 20%, rgba(37, 99, 235, 0.18), transparent 55%),
        radial-gradient(ellipse 800px 400px at 80% 80%, rgba(99, 102, 241, 0.14), transparent 55%);
    pointer-events: none;
}
/* Línea fina azul en el borde superior */
.dlm-home-biz-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.6), rgba(37, 99, 235, 0.8), rgba(96, 165, 250, 0.6), transparent);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
}
/* Ocultar pattern de puntos dorados */
.dlm-home-biz-wrap .dlm-home-container::before {
    display: none !important;
}

/* Badge, título y desc con tonos neutros profesionales */
.dlm-home-biz-badge {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
}
.dlm-home-biz-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
.dlm-home-biz-desc {
    color: rgba(226, 232, 240, 0.85) !important;
}

/* Botones vuelven al naranja premium (contraste fuerte sobre azul oscuro) */
.dlm-home-biz-btn--primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 4px rgba(217, 119, 6, 0.3),
        0 6px 16px rgba(217, 119, 6, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.dlm-home-biz-btn--primary:hover {
    color: #ffffff !important;
    box-shadow:
        0 4px 8px rgba(217, 119, 6, 0.4),
        0 10px 24px rgba(217, 119, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.dlm-home-biz-btn--ghost {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.dlm-home-biz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.dlm-home-biz-trust {
    color: rgba(226, 232, 240, 0.75) !important;
}

/* 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);
    }
}

/* ─── 9. Ocultar el hero-quick-tags (no los usamos ya) ─── */
.dlm-home-landing .dlm-hero-quick-tags { display: none !important; }

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

/* ─── 1. Secciones MUCHO más juntas ─── */
.dlm-home-landing .dlm-home-section-wrap {
    padding: 24px 0 !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-section-wrap { padding: 20px 0 !important; }
}
/* Hero conserva más aire */
.dlm-home-landing .dlm-home-hero-wrap {
    padding: 56px 0 40px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-hero-wrap { padding: 40px 0 32px !important; }
}
/* Biz section un poco más de presencia */
.dlm-home-biz-wrap {
    padding: 56px 0 !important;
}
@media (max-width: 768px) {
    .dlm-home-biz-wrap { padding: 40px 0 !important; }
}

/* ─── 2. Buscador — fix del gradient border exagerado multicolor ─── */
/* Elimina el gradient tricolor azul/naranja/rosa del focus */
.dlm-home-landing .dlm-search-wrapper::before {
    display: none !important;
}
/* Borde sobrio: solo sombra azul sutil al focus */
.dlm-home-landing .dlm-search-wrapper {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.dlm-home-landing .dlm-search-wrapper:focus-within {
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* ─── 3. NUEVOS ENCABEZADOS: bloques que sobrevuelan (sin kickers separados) ─── */
/* Oculta los kickers tipo pastilla */
.dlm-home-landing .dlm-section-kicker {
    display: none !important;
}
/* Oculta los 3 puntitos debajo */
.dlm-home-landing .dlm-section-head::after {
    display: none !important;
}

/* Título envuelto en un badge que flota */
.dlm-home-landing .dlm-section-head {
    margin-bottom: 32px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dlm-home-landing .dlm-section-title {
    position: relative;
    display: inline-block;
    padding: 14px 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    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);
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    color: var(--dlm-text, #0f172a) !important;
    transform: translateY(0);
    animation: dlm-title-float 4s ease-in-out infinite;
}
@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 */
.dlm-home-landing .dlm-section-title::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dlm-primary, #2563eb) 50%, transparent);
    border-radius: 2px;
    opacity: 0.7;
}
/* Subtítulo un poco separado del título */
.dlm-home-landing .dlm-section-subtitle {
    margin-top: 20px !important;
    font-size: 16px !important;
    max-width: 680px !important;
}

/* En secciones oscuras (biz) el badge debe tener estilo distinto */
.dlm-home-biz-wrap .dlm-section-title {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

/* ─── 4. Card "Reseñas reales" mejor formato ─── */
.dlm-stats-highlight-num {
    font-size: 44px;
    font-weight: 800;
    color: var(--dlm-primary, #2563eb);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 12px;
    display: block;
}

/* ─── 5. Restaurar CTA "Para dueños" — estilo ORIGINAL (fondo azul+naranja) ─── */
.dlm-home-biz-wrap {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #d97706 100%) !important;
}
.dlm-home-biz-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 400px at 30% 50%, rgba(255,255,255,0.08), transparent) !important;
    pointer-events: none;
}
.dlm-home-biz-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, #ec4899, #8b5cf6, transparent) !important;
    opacity: 0.6;
    box-shadow: none !important;
}
/* Badge amarillo original */
.dlm-home-biz-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
/* Título blanco sólido */
.dlm-home-biz-title {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
/* Desc igual */
.dlm-home-biz-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}
.dlm-home-biz-trust {
    color: rgba(255, 255, 255, 0.75) !important;
}
/* Ghost button tono blanco */
.dlm-home-biz-btn--ghost {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.dlm-home-biz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Biz title dentro del badge flotante */
.dlm-home-biz-wrap .dlm-home-biz-title {
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: dlm-title-float 4s ease-in-out infinite;
    color: #ffffff !important;
    font-size: clamp(22px, 3vw, 30px) !important;
    margin-bottom: 20px !important;
}
.dlm-home-biz-wrap .dlm-home-biz-title::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fbbf24 50%, transparent);
    border-radius: 2px;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   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 */
.dlm-home-landing .dlm-section-title {
    display: inline-block !important;
    padding: 10px 22px !important;
    background: rgba(15, 23, 42, 0.04) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 50px !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
    color: var(--dlm-text, #0f172a) !important;
    font-size: clamp(18px, 2.4vw, 24px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1.25;

    /* Pulso MUY ligero */
    animation: dlm-title-pulse 3.5s ease-in-out infinite;
}

/* Quitamos la línea degradada azul del borde superior */
.dlm-home-landing .dlm-section-title::before {
    display: none !important;
}

/* 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 */
.dlm-home-landing .dlm-section-title {
    animation: dlm-title-pulse 3.5s ease-in-out infinite !important;
    transform: none !important;
}

/* En la sección oscura "Para Dueños" — mismo pill pero con tonos blancos transparentes */
.dlm-home-biz-wrap .dlm-home-biz-title {
    display: inline-block !important;
    padding: 10px 22px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 50px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
    font-size: clamp(18px, 2.4vw, 24px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 20px !important;
    line-height: 1.25;
    animation: dlm-title-pulse-dark 3.5s ease-in-out infinite !important;
    transform: none !important;
}
.dlm-home-biz-wrap .dlm-home-biz-title::before {
    display: none !important;
}
@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);
    }
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dlm-home-landing .dlm-section-title,
    .dlm-home-biz-wrap .dlm-home-biz-title {
        animation: none !important;
    }
}

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

/* Bordes menos redondeados (antes 50px pill, ahora 14px cuadrado suave) */
.dlm-home-landing .dlm-section-title {
    border-radius: 14px !important;
    padding: 12px 24px !important;
}
.dlm-home-biz-wrap .dlm-home-biz-title {
    border-radius: 14px !important;
    padding: 12px 24px !important;
}

/* 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".
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Pill clara (todas las secciones de la home menos biz) ─── */
.dlm-home-landing .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;
    /* v3.27.1 — halo MÁS SUTIL: opacidades ~50% más bajas y anillo más fino */
    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;
    transform: none !important;
}
/* v3.30.20 — Eliminado duplicado de .dlm-home-landing .dlm-section-title::before
   (regla idéntica ya existe en L9401). */

/* ─── Pill oscura (sección "Para dueños") — mismo color primario ─── */
.dlm-home-biz-wrap .dlm-home-biz-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;
    /* v3.27.1 — mismo halo sutil */
    box-shadow:
        0 2px 8px rgba(37, 99, 235, 0.16),
        0 0 0 3px rgba(37, 99, 235, 0.08),
        0 0 18px rgba(37, 99, 235, 0.12) !important;
    animation: dlm-pill-halo 6s ease-in-out infinite !important;
    transform: none !important;
}
/* 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)) {
    .dlm-home-landing .dlm-section-title,
    .dlm-home-biz-wrap .dlm-home-biz-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;
    }
    @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 {
    display: block;
    position: relative;
    padding: 10px 10px 10px 38px; /* deja hueco para el checkbox */
}
.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;
}
.dlm-fav-compare-check input.dlm-fav-compare-cb:focus-visible + .dlm-fav-compare-box {
    outline: 2px solid var(--dlm-primary, #2563eb);
    outline-offset: 2px;
}

/* 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 {
    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-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.
   ═══════════════════════════════════════════════════════════════════ */

/* Nuevo fondo claro (override de v3.26.2 línea 8265) */
.dlm-home-biz-wrap {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
}
.dlm-home-biz-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 900px 500px at 30% 0%,  rgba(37, 99, 235, 0.08), transparent 60%),
        radial-gradient(ellipse 700px 400px at 80% 20%, rgba(217, 119, 6, 0.06), transparent 60%) !important;
    pointer-events: none;
}
/* Línea superior: ahora fina y azul muy sutil (en vez de degradada multicolor) */
.dlm-home-biz-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.25), transparent) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Badge: versión clara sobre fondo blanco */
.dlm-home-biz-wrap .dlm-home-biz-badge {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--dlm-primary, #2563eb) !important;
    border: 1px solid rgba(37, 99, 235, 0.20) !important;
}

/* Descripción y trust badges con texto oscuro */
.dlm-home-biz-wrap .dlm-home-biz-desc {
    color: var(--dlm-text-muted, #475569) !important;
}
.dlm-home-biz-wrap .dlm-home-biz-trust {
    color: var(--dlm-text-muted, #64748b) !important;
}

/* Botón ghost: borde azul oscuro, texto azul, fondo translúcido */
.dlm-home-biz-wrap .dlm-home-biz-btn--ghost {
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--dlm-primary, #2563eb) !important;
    border: 1px solid rgba(37, 99, 235, 0.30) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.dlm-home-biz-wrap .dlm-home-biz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--dlm-primary-hover, #1d4ed8) !important;
    border-color: var(--dlm-primary, #2563eb) !important;
}

/* La pill del título biz: heredamos el estilo azul-primario+halo de la
   tarea 2 (mismo aspecto que las otras pastillas claras). Sobrescribimos
   el fondo translúcido oscuro que dejaron las versiones previas. */
.dlm-home-biz-wrap .dlm-home-biz-title {
    /* el background, color, border, box-shadow y animation ya los aplica
       el bloque "Pastillas con halo" de v3.27.0 más arriba. Aquí solo
       reseteamos cualquier estilo claro/oscuro previo conflictivo. */
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* El botón primario naranja se mantiene exactamente como está (definido
   en v3.26 línea 8092). Es el CTA principal y su contraste contra el
   nuevo fondo claro es excelente; solo añadimos una sombra ligeramente
   más suave para que no quede "flotando" excesivamente sobre blanco. */
.dlm-home-biz-wrap .dlm-home-biz-btn--primary {
    box-shadow:
        0 2px 4px rgba(217, 119, 6, 0.20),
        0 6px 16px rgba(217, 119, 6, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.dlm-home-biz-wrap .dlm-home-biz-btn--primary:hover {
    box-shadow:
        0 4px 8px rgba(217, 119, 6, 0.28),
        0 10px 24px rgba(217, 119, 6, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */

/* Kicker "Directorio verificado" más cerca del título */
.dlm-home-landing .dlm-hero-kickers-row {
    margin-bottom: 14px !important;
}

/* Título → subtítulo: huecos pequeños */
.dlm-home-landing .dlm-home-title {
    margin: 0 0 10px !important;
}
.dlm-home-landing .dlm-home-subtitle {
    margin: 0 auto 18px !important;
}

/* Buscador → contadores: hueco muy reducido */
.dlm-home-landing .dlm-home-search {
    margin: 0 auto 16px !important;
}

/* Contadores: línea separadora menos despegada del search,
   y los counters más juntos a las features */
.dlm-home-landing .dlm-hero-counters {
    padding: 18px 0 0 !important;
    margin: 22px 0 12px !important;
    gap: 40px !important;
}

/* Features pegadas a los counters */
.dlm-home-landing .dlm-hero-features {
    margin-top: 6px !important;
}

/* v3.30.20 — Eliminado duplicado de .dlm-home-landing .dlm-home-hero-wrap
   con `padding: 72px 0 56px !important` (la regla idéntica vive en L8965).
   Se mantiene la versión móvil siguiente porque tiene un cuerpo distinto. */
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-hero-wrap { padding: 52px 0 40px !important; }
    .dlm-home-landing .dlm-hero-counters { gap: 24px !important; padding-top: 14px !important; margin: 18px 0 10px !important; }
    .dlm-home-landing .dlm-home-subtitle { margin-bottom: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   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;
}

/* Mismo ajuste para la pastilla de la home cuando incluye year-badge */
.dlm-home-landing .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).
   ═══════════════════════════════════════════════════════════════════ */

/* Placeholder gris medio dentro del search del hero */
.dlm-home-landing .dlm-search-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}
.dlm-home-landing .dlm-search-input::-webkit-input-placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.dlm-home-landing .dlm-search-input::-moz-placeholder         { color: #94a3b8 !important; opacity: 1 !important; }
.dlm-home-landing .dlm-search-input:-ms-input-placeholder     { color: #94a3b8 !important; opacity: 1 !important; }

/* Texto escrito por el usuario: gris oscuro legible (refuerza la regla
   existente con !important por si algún tema lo sobreescribe) */
.dlm-home-landing .dlm-search-input {
    color: var(--dlm-text, #0f172a) !important;
}

/* Sin outline ni box-shadow internos en el input al hacer focus.
   El feedback de focus lo da el wrapper (.dlm-search-wrapper:focus-within
   en línea 6706-6709) con borde azul + halo translúcido. */
.dlm-home-landing .dlm-search-input,
.dlm-home-landing .dlm-search-input:focus,
.dlm-home-landing .dlm-search-input:focus-visible,
.dlm-home-landing .dlm-search-input:active {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */

/* El número se vuelve contenedor relativo para alojar el ::before halo */
.dlm-home-landing .dlm-hero-counter-num {
    position: relative;
    display: inline-block;
    z-index: 1; /* texto siempre encima del halo */
}

/* El halo: círculo azul translúcido con radial-gradient detrás del número */
.dlm-home-landing .dlm-hero-counter-num::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Tamaño relativo al ancho del número (con padding extra para que sea
       circular incluso con números cortos como "3") */
    width: 220%;
    min-width: 80px;
    aspect-ratio: 1;
    /* Fallback para navegadores antiguos sin aspect-ratio */
    height: auto;
    /* Halo radial azul (fallback rgba para navegadores sin color-mix) */
    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(37, 99, 235, 0.07) 35%,
        transparent 65%
    );
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: dlm-counter-breathe 6s ease-in-out infinite;
    /* Filter blur añade suavidad extra al borde del halo */
    filter: blur(2px);
}

/* 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;
    }
}

/* Mejora con color-mix(): el halo respeta el color primario configurado
   en Astra (azul por defecto, pero verde/morado/etc si está cambiado) */
@supports (color: color-mix(in srgb, red, blue)) {
    .dlm-home-landing .dlm-hero-counter-num::before {
        background: radial-gradient(
            circle,
            color-mix(in srgb, var(--dlm-primary) 18%, transparent) 0%,
            color-mix(in srgb, var(--dlm-primary) 7%,  transparent) 35%,
            transparent 65%
        );
    }
}

/* Accesibilidad: sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .dlm-home-landing .dlm-hero-counter-num::before {
        animation: none !important;
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(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.
   ═══════════════════════════════════════════════════════════════════ */

/* Apaga el halo circular de v3.27.5 */
.dlm-home-landing .dlm-hero-counter-num::before {
    display: none !important;
    content: none !important;
}

/* Aplica el efecto neón + flotante directamente al número (text-shadow) */
.dlm-home-landing .dlm-hero-counter-num {
    text-shadow:
        /* Halo amplio difuso (blur grande = no afecta nitidez del texto) */
        0   0 28px rgba(37, 99, 235, 0.20),
        /* Sombra azul iluminada debajo (efecto lifted text) */
        0  5px 14px rgba(37, 99, 235, 0.22),
        /* Sombra azul más amplia y baja (refuerza la flotación) */
        0 12px 32px rgba(37, 99, 235, 0.12) !important;
    animation: dlm-counter-glow 5s ease-in-out infinite;
}

/* 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)) {
    .dlm-home-landing .dlm-hero-counter-num {
        text-shadow:
            0   0 28px color-mix(in srgb, var(--dlm-primary) 20%, transparent),
            0  5px 14px color-mix(in srgb, var(--dlm-primary) 22%, transparent),
            0 12px 32px color-mix(in srgb, var(--dlm-primary) 12%, transparent) !important;
        animation: dlm-counter-glow-dynamic 5s ease-in-out infinite;
    }
    @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;
        }
    }
}

/* Accesibilidad: sin animación, glow estático en intensidad media */
@media (prefers-reduced-motion: reduce) {
    .dlm-home-landing .dlm-hero-counter-num {
        animation: none !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. */
.dlm-featured-header .dlm-featured-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

/* 2) HOME — cabecera del hero más cerca del kicker "Directorio verificado"
       y counters más cerca de "Cómo funciona". */
.dlm-home-landing .dlm-home-hero-wrap {
    padding: 48px 0 28px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-hero-wrap {
        padding: 36px 0 20px !important;
    }
}
/* 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. */
.dlm-home-landing .dlm-home-steps-wrap {
    padding-top: 28px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-steps-wrap {
        padding-top: 20px !important;
    }
}

/* 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 */
body.dlm-page-taxonomy .dlm-breadcrumb,
body.dlm-page-single   .dlm-breadcrumb {
    margin-top: 0 !important;
    padding-top: 8px !important;
    margin-bottom: 16px !important;
}

/* 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.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Distancia counters → título "Cómo funciona" */
.dlm-home-landing .dlm-home-hero-wrap {
    padding: 48px 0 12px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-hero-wrap {
        padding: 36px 0 8px !important;
    }
}
.dlm-home-landing .dlm-home-steps-wrap {
    padding-top: 16px !important;
}
@media (max-width: 768px) {
    .dlm-home-landing .dlm-home-steps-wrap {
        padding-top: 12px !important;
    }
}
/* Así quedan ~40px arriba del título y ~40px debajo antes de las
   cards — distribución simétrica. */

/* 2) Badge "Recomendado" en cards: abajo-izquierda (no colisiona con
      corazón de favoritos que va arriba-derecha) */
.dlm-card-local--featured .dlm-featured-badge,
.dlm-card-local .dlm-featured-badge {
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
}

/* 3) Ocultar el badge "Destacados" inline del header de la sección
      featured (en archive — va junto al h2 "Mejores X en Y"). Las
      cards ya llevan su propia etiqueta, duplicar estorba. */
.dlm-featured-header .dlm-featured-badge {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   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;
}

/* Si el layout Astra usa .ast-separate-container (boxed) tiene padding
   propio en el wrapper de sección */
body.dlm-page-taxonomy.ast-separate-container .site-content > .ast-container,
body.dlm-page-single.ast-separate-container .site-content > .ast-container {
    padding-top: 16px !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 {
        padding-top: 8px !important;
    }
    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.
   ═══════════════════════════════════════════════════════════════════ */

/* Layout "separate container" (boxed) de Astra — el más común */
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 {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
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-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.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 */
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;
}

/* 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-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 */
.dlm-widget-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dlm-text, #0f172a);
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--dlm-primary, #2563eb);
    display: inline-block;
}

/* ─── Lista de locales (cards compactas verticales) ─── */
.dlm-widget-locales {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dlm-widget-locale {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.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-link {
    display: flex;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.dlm-widget-locale-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #e2e8f0;
}
.dlm-widget-locale-img--placeholder {
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
.dlm-widget-locale-info {
    flex: 1;
    min-width: 0;
}
.dlm-widget-locale-badge {
    display: inline-block;
    padding: 1px 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    margin-bottom: 3px;
}
.dlm-widget-locale-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dlm-text, #0f172a);
    margin: 0 0 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dlm-widget-locale-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--dlm-text-muted, #64748b);
}
/* v3.32.5 — Color del rating del widget oscurecido de #f59e0b (amber-500,
   ratio 2.68:1 sobre blanco, FAIL en WCAG AA) a #b45309 (orange-700, ratio
   4.71:1, PASS AA 4.5:1). Lighthouse marcaba este span como "Los colores de
   fondo y de primer plano no tienen una relación de contraste adecuada" en
   single-local (que renderiza este widget en sidebar).

   Trade-off visual: tono más "ámbar profundo" en lugar de amarillo brillante.
   Se mantiene la sensación cálida de "rating" sin perder legibilidad para
   usuarios con baja visión o entornos de luz adversa. */
.dlm-widget-locale-rating {
    color: #b45309;
    font-weight: 600;
}
.dlm-widget-locale-reviews,
.dlm-widget-locale-city {
    color: var(--dlm-text-muted, #64748b);
}
.dlm-widget-view-all {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dlm-primary, #2563eb);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.dlm-widget-view-all:hover {
    background: rgba(37, 99, 235, 0.06);
}

/* ─── Tabla de contenidos (TOC) ─── */
.dlm-widget-toc-title {
    margin-bottom: 10px !important;
}
.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 {
    display: block;
    padding: 6px 10px;
    color: var(--dlm-text-muted, #475569);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
    transition: all 0.15s ease;
}
.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 .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;
}
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-size: 14px !important;
    margin: 0 0 10px !important;
    padding: 0 0 6px !important;
    line-height: 1.3;
}
.dlm-widget-locales {
    gap: 6px !important;
}
.dlm-widget-locale {
    border-radius: 8px !important;
}
.dlm-widget-locale-link {
    padding: 6px !important;
    gap: 8px !important;
}
.dlm-widget-locale-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
}
.dlm-widget-locale-badge {
    font-size: 9px !important;
    padding: 1px 6px !important;
    margin-bottom: 2px !important;
    border-radius: 3px !important;
}
.dlm-widget-locale-name {
    font-size: 13px !important;
    margin: 0 0 1px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2;
}
.dlm-widget-locale-meta {
    font-size: 11px !important;
    gap: 6px !important;
}
.dlm-widget-view-all {
    margin-top: 8px !important;
    padding: 6px !important;
    font-size: 13px !important;
}

/* TOC compacto */
.dlm-widget-toc-link {
    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 {
    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;
    }
}
/* También aplicable si la sidebar es la de Astra (fallback) */
html body.dlm-page-single #secondary,
html body.dlm-page-single .widget-area.sidebar-main {
    margin-top: 44px !important;
}
@media (max-width: 921px) {
    html body.dlm-page-single #secondary,
    html body.dlm-page-single .widget-area.sidebar-main {
        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-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;
}
/* Texto y icono por encima del shimmer */
.dlm-hero-featured-badge > * {
    position: relative;
    z-index: 2;
}
@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 */
}
/* Respeta prefers-reduced-motion: quien haya desactivado animaciones
   no ve el brillo moverse, pero el badge sigue siendo llamativo. */
@media (prefers-reduced-motion: reduce) {
    .dlm-hero-featured-badge::after {
        animation: none;
        display: none;
    }
}
/* 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-header-nav-link.dlm-header-nav-trigger:hover {
    background: rgba(37, 99, 235, 0.06);
}
/* Hover abre el mega también cuando se entra por el botón (ya lo hace
   .dlm-header-nav-item--has-mega:hover pero reforzamos aria-expanded) */
.dlm-header-nav-item--trigger:hover .dlm-header-nav-trigger {
    color: var(--dlm-primary, #2563eb);
}

/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */

.dlm-all-cities-page,
.dlm-all-regions-page {
    padding: 0 0 60px;
}

/* ── Hero común ── */
.dlm-all-hero {
    text-align: center;
    padding: 20px 0 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.dlm-all-hero-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--dlm-text, #0f172a);
    margin: 0 0 12px;
}
.dlm-all-hero-subtitle {
    font-size: 17px;
    color: var(--dlm-text-muted, #475569);
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.dlm-all-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--dlm-text-muted, #475569);
    font-size: 17px;
}

/* ── /ciudades/ — Grid por región ── */
.dlm-all-cities-groups {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
/* 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;
}
.dlm-all-cities-group h2.dlm-section-title::after,
.dlm-all-cities-group h2.dlm-section-title::before {
    display: none !important;
    content: none !important;
}
.dlm-all-cities-group h2.dlm-section-title a {
    color: inherit;
    text-decoration: none;
}
.dlm-all-cities-group h2.dlm-section-title a:hover {
    opacity: 0.85;
}
.dlm-all-cities-grid {
    display: grid;
    /* v3.27.72 — minmax 220→240 para dar más margen a "X clínicas dentales" */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.dlm-all-city-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    text-decoration: none;
    color: var(--dlm-text, #0f172a);
    transition: all 0.18s ease;
    /* v3.27.72 — min-width:0 permite que los hijos flex se contraigan;
       gap:10px reserva separación visual entre nombre y pill aunque uno
       sea muy largo. Antes la pill (nowrap) desbordaba la card cuando el
       nombre + el contenido ya superaban el ancho mínimo de la grid. */
    min-width: 0;
    gap: 10px;
}
.dlm-all-city-card:hover {
    border-color: var(--dlm-primary, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}
.dlm-all-city-name {
    font-weight: 600;
    font-size: 15px;
    /* v3.27.72 — Permite que el nombre se acorte en lugar de empujar la pill
       fuera de la card. `overflow-wrap: anywhere` parte palabras largas
       (importante para topónimos compuestos como "Cerro de los Ángeles"). */
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.dlm-all-city-count {
    font-size: 12px;
    color: var(--dlm-text-muted, #475569);
    background: rgba(37, 99, 235, 0.06);
    padding: 3px 9px;
    border-radius: 12px;
    white-space: nowrap;
    /* v3.27.72 — flex-shrink:0 reserva el espacio de la pill explícitamente.
       Antes era implícito y combinado con nowrap causaba el desbordamiento. */
    flex-shrink: 0;
    margin-left: 0; /* el gap del padre ya separa */
}

/* ── /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. */

/* ── Móvil ── */
@media (max-width: 600px) {
    .dlm-all-cities-groups { gap: 36px; }
    .dlm-all-cities-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dlm-all-city-card { padding: 12px 14px; }
    .dlm-all-city-name { font-size: 14px; }
}
/* v3.27.72 — Pantallas muy estrechas (<420px): apilamos nombre + pill en
   columna para que ningún caso patológico (ciudad larga + pill larga) pueda
   romper el layout aunque el grid pase a 1 columna. */
@media (max-width: 420px) {
    .dlm-all-cities-grid { grid-template-columns: 1fr; }
    .dlm-all-city-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   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);
}
.dlm-header-nav-label {
    display: inline-block;
}

/* 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-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;
}
.dlm-header-mobile .dlm-header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   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 .dlm-header-nav-icon {
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.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-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 {
    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-header-mobile-nav li:last-child a.dlm-header-nav-link {
    border-bottom: 0;
}
.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 "Recomendado" de las cards
   Reutiliza la animación @keyframes dlm-badge-shimmer ya definida
   para el hero badge. La card badge tiene position absolute ya
   aplicada en reglas anteriores, por lo que solo añadimos overflow
   y el pseudo-elemento de brillo.
   ═══════════════════════════════════════════════════════════════════ */
.dlm-featured-badge {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.dlm-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;
}
/* Contenido del badge (texto, estrella) por encima del brillo */
.dlm-featured-badge > *,
.dlm-featured-badge svg {
    position: relative;
    z-index: 2;
}
/* Respeto a usuarios con prefers-reduced-motion: sin animación */
@media (prefers-reduced-motion: reduce) {
    .dlm-featured-badge::after {
        animation: none;
        display: none;
    }
}

/* 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 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.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-widget-locale-badge > *,
.dlm-widget-locale-badge svg {
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .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 {
    position: relative; /* anclaje para el badge absolute */
}
.dlm-widget-locale-badge {
    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 */
}