/* ============================================
 * Explora — Premium Luxury Edition
 * Full-width slider, horizontal cards, sponsor modal
 * ============================================ */

/* ── Slider — Full Width Edge-to-Edge ── */
.slider-premium {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: var(--space-md) var(--content-padding) 0;
    box-shadow:
        var(--shadow-md),
        0 0 15px rgba(0, 200, 180, 0.3),
        0 0 30px rgba(0, 200, 180, 0.15),
        inset 0 0 15px rgba(0, 200, 180, 0.05);
    border: 1.5px solid rgba(0, 210, 190, 0.45);
    animation: neonPulseSlider 3s ease-in-out infinite;
}

.slider-premium .slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.slider-premium .slider-slide {
    position: relative;
    min-width: 100%;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}

.slider-premium .slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.45) 100%);
}

.slider-premium .slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    z-index: 2;
}

.slider-premium .slide-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-heavy);
    margin-bottom: var(--space-xs);
    color: var(--color-text-inverse);
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.slider-premium .slide-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-md);
    font-weight: var(--font-weight-medium);
}

/* Slider Dots — Floating */
.slider-dots-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-md) 0 var(--space-sm);
}

.slider-dot-premium {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    opacity: 0.3;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    padding: 0;
}

.slider-dot-premium.active {
    background: var(--color-primary);
    opacity: 1;
    width: 20px;
}

/* ── Top 100 — Premium Square Grid Cards ── */
.top-lugares-grid-premium {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: 0 var(--content-padding);
    margin-bottom: var(--space-xl);
}

/* ── Card Square — Premium Glassmorphism ── */
.card-lugar-square {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    box-shadow:
        var(--shadow-md),
        0 0 12px rgba(0, 180, 220, 0.25),
        0 0 24px rgba(0, 180, 220, 0.1);
    border: 1.5px solid rgba(0, 190, 230, 0.35);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: neonPulseTop100 4s ease-in-out infinite;
}

.card-lugar-square:hover,
.card-lugar-square:active {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        var(--shadow-xl),
        0 0 20px rgba(0, 180, 220, 0.4),
        0 0 40px rgba(0, 180, 220, 0.2);
    border-color: rgba(0, 200, 240, 0.6);
}

/* Background gradient fills entire card */
.card-lugar-square .lugar-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Dark overlay for text readability */
.card-lugar-square .lugar-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.15) 40%,
            rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

/* Ranking badge — top-left corner */
.card-lugar-square .lugar-rank-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 3;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-heavy);
    color: white;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 var(--space-xs);
}

.card-lugar-square .lugar-rank-badge.rank-gold {
    background: linear-gradient(135deg, rgba(200, 155, 60, 0.85), rgba(229, 199, 107, 0.85));
    border-color: rgba(229, 199, 107, 0.5);
    box-shadow: 0 2px 12px rgba(200, 155, 60, 0.4);
}

/* Stats chips — top-right corner */
.card-lugar-square .lugar-stats-corner {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.card-lugar-square .stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    color: white;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.card-lugar-square .stat-chip svg {
    flex-shrink: 0;
}

/* Trending badge */
.card-lugar-square .lugar-trending {
    position: absolute;
    bottom: 56px;
    left: var(--space-sm);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(227, 28, 95, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(227, 28, 95, 0.3);
}

/* Bottom info area */
.card-lugar-square .lugar-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md) var(--space-sm) var(--space-sm);
    z-index: 2;
}

.card-lugar-square .lugar-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: white;
    margin-bottom: 2px;
    line-height: var(--line-height-tight);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.card-lugar-square .lugar-desc {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shimmer hover effect */
.card-lugar-square::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.08) 55%,
            transparent 60%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.6s ease;
    pointer-events: none;
    border-radius: var(--radius-lg);
}

.card-lugar-square:hover::after {
    background-position: -100% 0;
}

/* ── Sponsors Carousel ── */
.sponsors-carousel-premium {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 var(--content-padding) var(--space-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sponsors-carousel-premium::-webkit-scrollbar {
    display: none;
}

.sponsors-carousel-premium .card-sponsor-premium {
    min-width: 200px;
    max-width: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1.5px solid rgba(255, 140, 60, 0.35);
    box-shadow:
        var(--shadow-card),
        0 0 12px rgba(255, 140, 60, 0.2),
        0 0 24px rgba(255, 140, 60, 0.08);
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    animation: neonPulseSponsor 3.5s ease-in-out infinite;
}

.sponsors-carousel-premium .card-sponsor-premium:hover {
    border-color: rgba(255, 150, 70, 0.6);
    box-shadow:
        var(--shadow-card-hover),
        0 0 20px rgba(255, 140, 60, 0.35),
        0 0 40px rgba(255, 140, 60, 0.15);
    transform: translateY(-2px);
}

.sponsors-carousel-premium .sponsor-image-area {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.sponsors-carousel-premium .sponsor-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.sponsors-carousel-premium .sponsor-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sponsors-carousel-premium .sponsor-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}

.sponsors-carousel-premium .sponsor-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.sponsors-carousel-premium .sponsor-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
    flex: 1;
}

.sponsors-carousel-premium .btn-sponsor-bottom {
    margin-top: auto;
}

/* ── Sponsor Modal ── */
.sponsor-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sponsor-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.sponsor-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--color-bg-pure);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: var(--z-modal);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

.sponsor-modal.active {
    transform: translateY(0);
}

.sponsor-modal .modal-handle {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    margin: var(--space-sm) auto var(--space-xs);
}

.sponsor-modal .modal-sponsor-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.sponsor-modal .modal-sponsor-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.sponsor-modal .modal-sponsor-info {
    flex: 1;
    min-width: 0;
}

.sponsor-modal .modal-sponsor-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.sponsor-modal .modal-sponsor-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
}

.sponsor-modal .modal-sponsor-body {
    padding: 0 var(--space-lg) var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

.sponsor-modal .modal-sponsor-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.sponsor-modal .modal-sponsor-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sponsor-modal .sponsor-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    text-decoration: none;
}

.sponsor-modal .sponsor-link:hover {
    background: var(--color-border);
}

.sponsor-modal .sponsor-link .link-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-pure);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.sponsor-modal .sponsor-link .link-label {
    flex: 1;
}

.sponsor-modal .sponsor-link .link-url {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: block;
    margin-top: 1px;
}

.sponsor-modal .sponsor-link .link-arrow {
    color: var(--color-text-muted);
}

/* ── Section Headers ── */
.section-header-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding: 0 var(--content-padding);
}

.section-title-premium {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.section-link-premium {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.section-link-premium:hover {
    color: var(--color-primary);
}

/* ── Animations ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-lugares-grid-premium .card-lugar-square {
    animation: fadeInUp 0.4s ease backwards;
}

.top-lugares-grid-premium .card-lugar-square:nth-child(2) {
    animation-delay: 0.08s;
}

.top-lugares-grid-premium .card-lugar-square:nth-child(3) {
    animation-delay: 0.16s;
}

.top-lugares-grid-premium .card-lugar-square:nth-child(4) {
    animation-delay: 0.24s;
}

.top-lugares-grid-premium .card-lugar-square:nth-child(5) {
    animation-delay: 0.32s;
}

.top-lugares-grid-premium .card-lugar-square:nth-child(6) {
    animation-delay: 0.4s;
}

/* ── Neon Pulse Animations ── */
@keyframes neonPulseSlider {

    0%,
    100% {
        box-shadow:
            var(--shadow-md),
            0 0 15px rgba(0, 200, 180, 0.3),
            0 0 30px rgba(0, 200, 180, 0.15),
            inset 0 0 15px rgba(0, 200, 180, 0.05);
        border-color: rgba(0, 210, 190, 0.45);
    }

    50% {
        box-shadow:
            var(--shadow-md),
            0 0 20px rgba(0, 200, 180, 0.45),
            0 0 45px rgba(0, 200, 180, 0.2),
            inset 0 0 20px rgba(0, 200, 180, 0.08);
        border-color: rgba(0, 220, 200, 0.6);
    }
}

@keyframes neonPulseTop100 {

    0%,
    100% {
        box-shadow:
            var(--shadow-md),
            0 0 12px rgba(0, 180, 220, 0.25),
            0 0 24px rgba(0, 180, 220, 0.1);
        border-color: rgba(0, 190, 230, 0.35);
    }

    50% {
        box-shadow:
            var(--shadow-md),
            0 0 18px rgba(0, 180, 220, 0.4),
            0 0 36px rgba(0, 180, 220, 0.18);
        border-color: rgba(0, 200, 240, 0.55);
    }
}

@keyframes neonPulseSponsor {

    0%,
    100% {
        box-shadow:
            var(--shadow-card),
            0 0 12px rgba(255, 140, 60, 0.2),
            0 0 24px rgba(255, 140, 60, 0.08);
        border-color: rgba(255, 140, 60, 0.35);
    }

    50% {
        box-shadow:
            var(--shadow-card),
            0 0 18px rgba(255, 140, 60, 0.35),
            0 0 36px rgba(255, 140, 60, 0.15);
        border-color: rgba(255, 150, 70, 0.55);
    }
}

/* ── Infinite Scroll Loader ── */
.top100-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) 0;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.top100-loader.hidden {
    display: none;
}

.top100-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: rgba(0, 180, 220, 0.7);
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    to {
        transform: rotate(360deg);
    }
}

.top100-end-msg {
    text-align: center;
    padding: var(--space-lg) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
/* ════════════════════════════════════════════════════════════════
   PORTADA DE ESCRITORIO — Propuesta A «Vitrina» (26-ago-2026)
   Mismo marcado que el móvil (las vistas son idénticas byte a byte);
   la transformación vive aquí: hero inset amplio y sereno, Top 100 en
   rejilla fotográfica de 4 columnas, oro solo para el podio. Fuera el
   neón de la maqueta: la Vitrina vende con luz, no con brillo.
   ════════════════════════════════════════════════════════════════ */

.section {
    padding-top: var(--space-xl);
}

.section-header-premium {
    max-width: var(--max-width);
    margin: 0 auto var(--space-lg);
}

.section-title-premium {
    font-size: 1.5rem;
    font-weight: var(--font-weight-heavy);
    letter-spacing: -0.02em;
}

/* ── Hero carrusel inset ── */
.slider-premium {
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0;
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-lg);
    animation: none;
}

/* Con el prefijo .slider-premium a propósito: las reglas heredadas de
   arriba lo llevan (0-2-0) y sin igualar la especificidad este bloque
   era código muerto — el hero de 440px salía con titular de teléfono. */
.slider-premium .slider-slide {
    aspect-ratio: auto;
    height: 440px;
}

.slider-premium .slide-content {
    padding: 0 72px;
    max-width: 640px;
}

.slider-premium .slide-title {
    font-size: 2.75rem;
    line-height: 1.1;
}

.slider-premium .slide-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
}

/* Flechas — solo escritorio (el bundle móvil las oculta) */
.slider-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider-flecha:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--shadow-lg);
}

.slider-flecha-prev { left: 20px; }
.slider-flecha-next { right: 20px; }

/* Los puntos flotan SOBRE la imagen: sin position, el bottom era una
   regla inerte y quedaban en una franja blanca bajo la foto, empujando
   además el centro de las flechas 15px por debajo del centro real. */
.slider-dots-premium {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 3;
    padding: 0;
}

/* Sobre fotografía, un punto inactivo gris muted desaparece: blanco
   translúcido. El activo conserva su estilo de marca (por eso el :not). */
.slider-premium .slider-dot-premium:not(.active) {
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

/* ── Patrocinadores: franja serena sin neón naranja ── */
.sponsors-carousel-premium {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-bottom: var(--space-sm);
}

/* Prefijo + animation:none: la tarjeta heredada late con neón naranja
   (neonPulseSponsor) y un selector de una sola clase ni le ganaba ni
   apagaba la animación — la «franja serena» seguía siendo una feria.
   flex-grow con techo: con pocas tarjetas en pantalla ancha, crecen y
   reparten el espacio en vez de apiñarse a la izquierda. */
.sponsors-carousel-premium .card-sponsor-premium {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    animation: none;
    flex: 1 1 240px;
    max-width: 380px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sponsors-carousel-premium .card-sponsor-premium:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* ── Top 100: rejilla fotográfica de 4 columnas ── */
.top-lugares-grid-premium {
    max-width: var(--max-width);
    margin: 0 auto var(--space-2xl);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}

.card-lugar-square {
    border: none;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* El podio lleva el oro de la marca; el resto, discreción. El selector
   necesita las tres clases: el heredado .card-lugar-square .lugar-rank-badge
   .rank-gold es 0-3-0 y con menos, este oro no se pintaba nunca. */
.card-lugar-square .lugar-rank-badge.rank-gold {
    background: linear-gradient(135deg, var(--color-accent-gold-light), var(--color-accent-gold));
    border-color: var(--color-accent-gold);
    color: #fff;
    box-shadow: 0 2px 8px rgba(200, 155, 60, 0.4);
}

/* ── Aviso de error y estados vacíos, centrados en el contenedor ── */
.explora-aviso,
.explora-empty {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════
   FICHA DE PATROCINADOR EN ESCRITORIO — tarjeta emergente centrada
   En el teléfono la ficha sube desde abajo como una hoja: es el gesto
   correcto ahí. En un monitor, esa misma hoja ocupaba todo el ancho
   pegada al borde inferior y se veía como un error. Aquí pasa a ser una
   tarjeta centrada, del tamaño de su contenido.

   Los selectores llevan el prefijo .sponsor-modal donde las reglas
   heredadas de arriba lo llevan (0-2-0): sin igualar la especificidad
   estos overrides serían código muerto.
   ════════════════════════════════════════════════════════════════ */

.sponsor-modal {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(520px, calc(100vw - 48px));
    max-height: min(80vh, 620px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    /* Estado cerrado: bajo un poco y encogido, para que al abrir crezca
       hacia el centro en vez de deslizarse desde el borde. */
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease,
                visibility 0.2s;
}

.sponsor-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* La barrita de arrastrar es un gesto de dedo: en escritorio no significa
   nada y roba espacio arriba. */
.sponsor-modal .modal-handle {
    display: none;
}

/* El botón de cerrar es al revés: solo escritorio (en el teléfono se
   cierra arrastrando o tocando fuera). Lo esconde el bundle móvil. */
.sponsor-modal .modal-sponsor-cerrar {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sponsor-modal .modal-sponsor-cerrar:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* La cabecera respira más y deja hueco a la derecha para el botón. */
.sponsor-modal .modal-sponsor-header {
    padding: var(--space-xl) calc(var(--space-lg) + 40px) var(--space-md) var(--space-xl);
}

/* Cuadro NEUTRO para el logo, no degradado: la mayoría de logotipos
   vienen con fondo blanco o transparente y sobre un degradado quedan
   sucios. El logo entra entero (contain, lo pone el script) y el cuadro
   es fijo, así una marca apaisada y una cuadrada ocupan lo mismo. */
.sponsor-modal .modal-sponsor-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.sponsor-modal .modal-sponsor-name {
    font-size: var(--font-size-xl);
    /* Un nombre largo se parte en dos líneas; cortarlo con puntos
       suspensivos es la señal más barata de ficha descuidada. */
    line-height: 1.25;
}

.sponsor-modal .modal-sponsor-body {
    padding: 0 var(--space-xl) var(--space-xl);
}

/* La descripción no tiene tope en la base y el panel no lo valida: un
   texto de 4.000 caracteres desbordaría la tarjeta. Se recorta a cuatro
   líneas y el resto se lee en el sitio del patrocinador. */
.sponsor-modal .modal-sponsor-desc {
    margin-bottom: var(--space-lg);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* El enlace al sitio pasa de fila gris a botón de marca: es la única
   acción de la ficha y debe verse como tal. */
.sponsor-modal .sponsor-link {
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
    color: #fff;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.sponsor-modal .sponsor-link:hover {
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.sponsor-modal .sponsor-link .link-icon {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.sponsor-modal .sponsor-link .link-url {
    color: rgba(255, 255, 255, 0.85);
}

.sponsor-modal .sponsor-link .link-arrow {
    color: rgba(255, 255, 255, 0.9);
}

/* ════════════════════════════════════════════════════════════════
   FICHA DEL PATROCINADOR: CATEGORÍA, BENEFICIO Y ACCIONES
   La ficha pasa de decir «quién es esta marca» —la pregunta que el
   turista NO se hace— a decir QUÉ es, QUÉ gana entrando y CÓMO la
   contacta. Tres piezas nuevas: la categoría bajo el nombre, el bloque
   del beneficio y un segundo botón para WhatsApp.

   ESPECIFICIDAD: estas reglas van al final del bundle y tienen que
   GANAR a las heredadas de arriba, no solo llegar después. Donde la
   regla de arriba es 0-2-0 (.sponsor-modal .sponsor-link) aquí se le
   suma una clase (0-3-0); si no, este bloque sería código muerto —ya
   pasó una vez con ocho reglas—.
   ════════════════════════════════════════════════════════════════ */

/* ── Tarjeta del carrusel ── */

/* Categoría y distintivo comparten fila: son dos etiquetas cortas, y
   apiladas robaban una línea entera a una tarjeta de 200px. */
.sponsors-carousel-premium .sponsor-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-xs);
}

/* 0-3-0 para ganar a .sponsors-carousel-premium .sponsor-category
   (0-2-0). Ahí ponía «ORO» o «ALIADO», tres letras que en mayúsculas
   se leen bien; ahora pone «🏨 Alojamiento» y las mayúsculas forzadas
   gritan. El margen inferior tampoco pinta nada dentro de una fila. */
.sponsors-carousel-premium .sponsor-meta .sponsor-category {
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    color: var(--color-text-secondary);
}

/* Oro de la marca, NO rosa: el rosa es el color de la acción principal
   y este chip no es una acción, solo avisa de que hay algo que ganar
   al abrir la ficha. El texto va en un oro más oscuro que el de marca
   porque #C89B3C sobre este fondo pálido se queda en 2,4:1 y no se
   lee. #6B5310 sube a 6,6:1, con margen sobre el minimo de 4,5:1
   (el #8A6A1F que habia antes se quedaba en 4,56:1, justo al filo). */
.sponsors-carousel-premium .sponsor-perk-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(200, 155, 60, 0.12);
    border: 1px solid rgba(200, 155, 60, 0.35);
    color: #6B5310;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.7;
    white-space: nowrap;
}

/* ── Ficha: la categoría bajo el nombre ── */

/* 0-3-0 contra .sponsor-modal .modal-sponsor-category (0-2-0). Aquí la
   categoría es el subtítulo del nombre, no una etiqueta de sistema:
   sentence case y un cuerpo legible en vez de versalitas apretadas. */
.sponsor-modal .modal-sponsor-info .modal-sponsor-category {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* ── Ficha: el bloque del beneficio ── */

/* Lo más valioso de la ficha, y por eso lo primero del cuerpo. Fondo
   dorado suave con borde: destaca sin gritar y sin robarle el rosa al
   botón, que es lo que hay que pulsar. */
.sponsor-modal .modal-sponsor-beneficio {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(200, 155, 60, 0.35);
    background: linear-gradient(135deg, rgba(229, 199, 107, 0.20), rgba(200, 155, 60, 0.08));
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-titulo {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B5310;
}

/* El beneficio es el titular del bloque: más cuerpo que la descripción
   de la marca, que es lo que va debajo. */
.sponsor-modal .modal-sponsor-beneficio .beneficio-texto {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text);
}

/* Las condiciones son secundarias pero NO opcionales: sin la letra
   pequeña el turista discute en el mostrador y la queja vuelve aquí.
   Plegadas, se leen sin salir de la ficha y sin taparla. */
.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones {
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    /* #717171 da 4,44:1 sobre el dorado del bloque: por debajo del
       minimo de 4,5:1. #5C5C5C sube a 6,08:1 y sigue leyendose como
       texto secundario. */
    color: #5C5C5C;
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: #6B5310;
    /* El triángulo del navegador se sustituye por uno propio que gira:
       el de serie se sale del renglón y cada motor lo dibuja distinto. */
    list-style: none;
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones > summary::-webkit-details-marker {
    display: none;
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones > summary::after {
    content: '▾';
    font-size: 0.9em;
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones[open] > summary::after {
    content: '▴';
}

.sponsor-modal .modal-sponsor-beneficio .beneficio-condiciones > p {
    margin: 6px 0 0;
    line-height: 1.5;
}

/* La caducidad no es letra pequeña escondida: se ve siempre que exista,
   porque es la diferencia entre una promesa y una promesa con fecha. */
.sponsor-modal .modal-sponsor-beneficio .beneficio-vigencia {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: #5C5C5C;
}

/* ── Ficha: WhatsApp como acción SECUNDARIA ── */

/* Borde, no relleno: con dos botones rellenos del mismo peso el
   visitante no elige, y el que no elige se va. Verde porque es el
   único código de color que en Colombia se lee sin leer la etiqueta;
   #008A05 (--color-success) en vez del verde de la marca WhatsApp,
   que sobre blanco no llega al contraste mínimo de texto.
   0-3-0 contra .sponsor-modal .sponsor-link (0-2-0), que unas líneas
   más arriba pinta TODOS los enlaces con el degradado rosa. */
.sponsor-modal .sponsor-link.sponsor-link-whatsapp {
    background: var(--color-bg-pure);
    border: 1.5px solid var(--color-success);
    color: var(--color-success);
    box-shadow: none;
    /* El borde se descuenta del relleno para que los dos botones midan
       exactamente lo mismo de alto. */
    padding: calc(var(--space-md) - 1.5px) calc(var(--space-lg) - 1.5px);
}

.sponsor-modal .sponsor-link.sponsor-link-whatsapp:hover {
    background: rgba(0, 138, 5, 0.06);
    box-shadow: none;
    transform: translateY(-1px);
}

.sponsor-modal .sponsor-link.sponsor-link-whatsapp .link-icon {
    background: rgba(0, 138, 5, 0.10);
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════
   FICHA DEL LUGAR (Top 100) — base compartida + forma de ESCRITORIO:
   tarjeta centrada que crece hacia el centro, como la del patrocinador.
   ════════════════════════════════════════════════════════════════ */

.ficha-lugar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ficha-lugar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.ficha-lugar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    /* dvh: en iPhone la barra de Safari se come parte del vh clasico */
    max-height: 85dvh;
    background: var(--color-bg-pure);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: var(--z-modal);
    transform: translateY(100%);
    /* cerrada, invisible de verdad: sin foco por Tab fuera de pantalla */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0.4s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

.ficha-lugar.active {
    transform: translateY(0);
    visibility: visible;
}

/* El foco programatico al abrir no pinta anillo: es el contenedor */
.ficha-lugar:focus {
    outline: none;
}

/* El asidero para arrastrar, flotando sobre la foto */
.ficha-lugar .modal-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* La X tambien en el telefono: el asidero es decorativo (no hay gesto
   de arrastre) y sin X el dialogo no tendria ningun cierre enfocable */
.ficha-lugar .ficha-lugar-cerrar {
    display: flex;
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* ── Cabecera: la foto manda; sin foto, el numero gigante ── */
.ficha-lugar-hero {
    position: relative;
    height: 190px;
    flex: none;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ficha-lugar-hero.sin-foto {
    /* El respaldo tipografico de las listas «50 Best»: el degradado de la
       marca y el puesto en enorme. Digno, nunca un hueco gris. */
    background-image: linear-gradient(135deg, #43B0A8 0%, #2D8E87 50%, #1A6963 100%);
}

.ficha-lugar-numero {
    font-size: 72px;
    font-weight: var(--font-weight-heavy);
    letter-spacing: -0.04em;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.ficha-lugar-sello {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    /* 0.6: sobre una foto clara el 0.45 dejaba el blanco en 3,4:1 */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* El podio lleva el oro de la marca */
.ficha-lugar-sello.es-podio {
    background: linear-gradient(135deg, var(--color-accent-gold-light), var(--color-accent-gold));
    /* marron de la gama dorada: el blanco heredado daba 1,65:1 sobre el oro */
    color: #3D2E0F;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(200, 155, 60, 0.4);
}

/* ── Cuerpo ── */
.ficha-lugar-cuerpo {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* safe-area: que la barra de inicio del iPhone no tape el final */
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
}

.ficha-lugar-nombre {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heavy);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.ficha-lugar-ubicacion {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 4px 0 0;
}

.ficha-lugar-chip {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 11px;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.ficha-lugar-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: var(--space-md) 0 0;
}

/* Texto del panel: una URL o palabra sin espacios no debe desbordar */
.ficha-lugar-nombre,
.ficha-lugar-ubicacion,
.ficha-lugar-desc {
    overflow-wrap: break-word;
}

/* ── Acciones: nunca mas de dos, y solo una manda ── */
.ficha-lugar-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--space-lg);
}

.ficha-lugar-btn {
    display: block;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.ficha-lugar-btn.principal {
    /* primario->oscuro: el par claro->primario dejaba el rotulo en 3.8-4.2:1 */
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
}

.ficha-lugar-btn.secundario {
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}

/* ── La promesa del juego: una linea discreta, nunca un boton ── */
.ficha-lugar-teaser {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: 1px dashed var(--color-border);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.ficha-lugar-teaser a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

/* ── Overrides de escritorio sobre la base de hoja ── */

.ficha-lugar {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(560px, calc(100vw - 48px));
    max-height: min(85vh, 680px);
    max-height: min(85dvh, 680px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease,
                visibility 0.2s;
}

.ficha-lugar.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* En escritorio manda la X; el asidero es un gesto de dedo */
.ficha-lugar .modal-handle {
    display: none;
}

.ficha-lugar .ficha-lugar-cerrar {
    display: flex;
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast);
}

.ficha-lugar .ficha-lugar-cerrar:hover {
    background: #fff;
}

/* Mas aire y una cabecera mas alta: en escritorio la foto puede lucirse */
.ficha-lugar-hero {
    height: 230px;
}

.ficha-lugar-numero {
    font-size: 96px;
}

.ficha-lugar-cuerpo {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

/* Con raton, dos botones caben lado a lado; el principal pesa mas */
.ficha-lugar-acciones {
    flex-direction: row;
}

.ficha-lugar-btn {
    flex: 1;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ficha-lugar-btn.principal {
    flex: 1.6;
}

.ficha-lugar-btn.principal:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ficha-lugar-btn.secundario:hover {
    background: var(--color-bg-secondary);
}

/* ── El voto real de la ficha del Top 100 ──
   El conteo solo existe > 0 (anti-cero); en cero, la línea invita. */
.ficha-lugar-voto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.ficha-lugar-voto-conteo {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ficha-lugar-voto-btn {
    padding: 10px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.ficha-lugar-voto-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ficha-lugar-voto-btn.votado {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    background: rgba(227, 28, 95, 0.06);
}

/* Endurecimiento del voto (revisión adversarial 28-ago):
   error visible, botón tocable de 44px, y estado «en vuelo» sin
   disabled (disabled expulsaba el foco del teclado). */
.ficha-lugar-voto-btn {
    min-height: 44px;
}

.ficha-lugar-voto-btn.en-vuelo {
    opacity: 0.6;
    cursor: default;
}

.ficha-lugar-voto-error {
    margin: 8px 0 0;
    font-size: var(--font-size-sm);
    /* 6,4:1 sobre el blanco de la ficha (AA calculado) */
    color: #B3261E;
}

.ficha-lugar-voto-error[hidden] {
    display: none;
}

/* ── Paso 2: el dato para contar + compartir ── */

/* Compartir: círculo gemelo de la X, a su izquierda sobre la foto */
.ficha-lugar .ficha-lugar-compartir {
    display: flex;
    position: absolute;
    top: var(--space-md);
    right: calc(var(--space-md) + 42px);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* El dato que se repite en voz alta: una tarjeta dorada discreta */
.ficha-lugar-fact {
    margin-top: var(--space-md);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(200, 155, 60, 0.10);
    border: 1px solid rgba(200, 155, 60, 0.28);
}

.ficha-lugar-fact[hidden] {
    display: none;
}

.ficha-lugar-fact-titulo {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* dorado oscuro AA sobre el lavado (mismo tono del perk del sponsor) */
    color: #6B5310;
    margin-bottom: 4px;
}

.ficha-lugar-fact-texto {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text);
    overflow-wrap: break-word;
}

/* Aviso efímero de «enlace copiado» (creado por el JS al compartir) */
.ficha-lugar-copiado {
    position: absolute;
    top: calc(var(--space-md) + 42px);
    right: var(--space-md);
    z-index: 3;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: var(--font-size-xs);
}

.ficha-lugar .ficha-lugar-compartir:hover {
    background: #fff;
}

/* La región del aviso vive SIEMPRE en el DOM (aria-live): oculta sin texto */
.ficha-lugar-copiado[hidden] {
    display: none;
}