/* Global overflow-x lock — evita scroll horizontal en todo el sitio */
html, body {
  overflow-x: hidden;
}

/* RESET BÁSICO */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

/* TIPOGRAFÍA Y FONDOS */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #ffffff;
    color: #1a1a1a;
    line-height: 1.4;
}

/* HEADER: compacto y con overflow visible para dropdowns */
.header {
    background: linear-gradient(135deg, #2E0F47 0%, #551C88 100%);
    position: relative;
    z-index: 50; /* subimos un poco para asegurar prioridad */
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* Línea dorada superior sutil */
.header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(212,175,55,0.8) 0%, rgba(255,215,0,0.4) 45%, rgba(212,175,55,0.8) 100%);
    box-shadow: 0 0 4px rgba(212,175,55,0.15);
    pointer-events: none;
    z-index: 1; /* sobre el fondo del header, bajo el contenido */
}

/* Contenedor principal del header: más compacto */
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0px 0px; /* <-- reducido */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ========================================
   TOOLTIP CIUDAD / ZONA (flotante)
   ======================================== */
.city-tooltip {
    position: fixed;
    top: 70px;              /* mantiene la altura que ya tenías */
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    justify-content: flex-start;  /* alineado a la izquierda */
    padding-left: 59.5px;          /* desplaza el tooltip hacia la derecha */
    pointer-events: none;
}

.city-tooltip-text {
    position: relative;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: #2a163d; /* violeta oscuro */
    border: 1px solid rgba(212, 175, 55, 0.8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
    white-space: nowrap;

    /* hace que solo la burbuja sea clickeable */
    pointer-events: auto;

    /* Animaciones: entrada suave + glow respirando */
    animation:
        tooltip-pop-in 0.28s ease-out,
        tooltip-glow 2.6s ease-in-out infinite;
}

/* Flechita apuntando hacia abajo (versión estable anterior) */
.city-tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;                  /* ahora la flecha sale ARRIBA del globo */
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #2a163d transparent;
}

.city-tooltip-text::before {
    content: "";
    position: absolute;
    bottom: 100%;                         /* misma referencia que la flecha violeta */
    left: 50%;                            /* mismo centro horizontal */
    transform: translateX(-50%);
    border-width: 8px;                    /* un pelín más grande que la flecha violeta */
    border-style: solid;
    border-color: transparent transparent rgba(212, 175, 55, 0.9) transparent;  /* dorado, como el borde del tooltip */
}

/* Entrada: pequeño scale + fade */
@keyframes tooltip-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Glow suave tipo respiración */
@keyframes tooltip-glow {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(212, 175, 55, 0.35),
            0 0 0 rgba(212, 175, 55, 0);
    }
    50% {
        box-shadow:
            0 0 16px rgba(212, 175, 55, 0.8),
            0 0 20px rgba(212, 175, 55, 0.5);
    }
}

/* Mobile: ajusta solo la altura y tamaño */
@media (max-width: 768px) {
    .city-tooltip {
        top: 70px;          /* header más bajo en mobile */
    }

    .city-tooltip-text {
        font-size: 12px;
        padding: 5px 14px;
    }
}

/* LOGO (no cambiar la posición manual) */
.logo {
    display: block;
    flex: 0 0 auto;
    margin-left: -2px;
}
.logo img {
    height: 80px; /* ligera reducción para bajar la altura del header */
    display: block;
    filter: drop-shadow(0 2px 8px rgba(212,175,55,0.25));
}

/* HEADER CENTER: contenedor para city/comuna + search */
.header-center {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Grupo Santiago + Comuna (G2: unido visualmente) */
.city-comuna-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    background: transparent;
    padding: 6px 8px;
    border-radius: 999px;
    margin-right: 6px; /* empuja a la izquierda en mobile/desk para dejar espacio al search */
}

/* CITY */
.city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-weight: 500;
    font-size: 14.5px;
    position: relative;
    top: -0.5px;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
}
.city .fa-map-marker-alt { color: #D4AF37; font-size: 14px; }
/* Subrayado dorado animado para Santiago activo */
.city.active .city-text {
    position: relative;
}

.city.active .city-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #D4AF37;
    animation: underline-smooth 0.4s ease forwards;
}

@keyframes underline-smooth {
    from { width: 0; }
    to { width: 100%; }
}


/* Active indicator for "Santiago" (subrayado dorado cuando esté activo)
   NOTE: this shows when you add class "is-active" to the .city element via JS or server logic */
.city::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #D4AF37;
    transition: width 0.22s ease-in-out;
    border-radius: 2px;
    pointer-events: none;
}
.city.is-active::after {
    width: 100%;
}

/* DIVIDER (B: línea fina dorada) */
.divider {
    width: 1px;
    height: 20px;
    background: rgba(212,175,55,0.35);
    border-radius: 1px;
}

/* COMUNA PILL (C3-A, style F2-b minimal) */
/* unify comuna text style with city */
.comuna-wrapper { position: relative; display: inline-flex; align-items: center; }
.comuna-pill {
    background: transparent;
    border: none;
    color: white;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}
.comuna-pill .comuna-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
.comuna-pill .comuna-chevron { color: rgba(212,175,55,0.95); font-size: 12px; vertical-align: middle; }
.comuna-pill:hover { background: rgba(212,175,55,0.04); }

/* CHIP MENU (dropdown) - posicionamiento por JS, fallback visual */
/* Aligned to the right edge of the .comuna-wrapper so it appears near the arrow */
.chip-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    background: #2A1142;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 10px;
    padding: 6px 6px;
    min-width: 180px; /* valor original y correcto */
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 180ms ease;
    z-index: 120;
}

/* Dropdown de COMUNA: ancho ajustado al texto más largo */
.comuna-wrapper .chip-menu {
    min-width: 0;
    width: max-content;
}

/* Mover SOLO el dropdown de COMUNA hacia la izquierda en desktop */
@media (min-width: 769px) {
    .comuna-wrapper .chip-menu {
        margin-left: -100px;
    }
}

/* Dropdown de ciudad – posición base (desktop) */
#cityMenu {
    min-width: 0;
    width: max-content;
    left: 115px;
    right: auto;
    top: calc(100% + -13px);
}

.chip-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }

/* Dropdown de ciudad: ancho compacto */
#cityMenu {
    min-width: 0;
    width: max-content;
}

/* Ajuste específico en mobile: leve desplazamiento hacia la izquierda y un poco más arriba */
@media (max-width: 768px) {
    #cityMenu {
        min-width: 0;
        width: max-content;
        left: 65px;              /* MUCHO más a la izquierda para notar el cambio */
        right: auto;
        top: calc(100% - 14px);   /* MUCHO más arriba para notar el cambio */
    }
}

/* If you want the dropdown to "grow" from the right edge visually */
.chip-menu::before {
    content: "";
    position: absolute;
    right: 10px;
    top: -6px;
    width: 12px;
    height: 6px;
    background: transparent;
}

/* Options inside chip menu */
.chip-option {
    display: block;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.chip-option:hover { background: rgba(212,175,55,0.08); padding-left: 16px; color: white; }

/* Selected comuna inside dropdown (server/template should mark the selected one with class "active") */
.chip-option.active {
    background: rgba(212,175,55,0.10);
    color: #D4AF37;
    font-weight: 600;
}

/* Provide small visual separation for first option if desired */
.chip-option + .chip-option { margin-top: 4px; }

/* count badge styling */
.chip-count { color: rgba(212,175,55,0.95); font-size: 13px; margin-left: 6px; }

/* SEARCH BOX - flexible, ocupa el espacio disponible; ahora la lupa está dentro */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto; /* ES EL RELLENO */
    min-width: 0;
    position: relative; /* para posicionar la lupa dentro */
}
.search-input {
    width: 100%;
    padding: 8px 12px;
    padding-right: 40px; /* espacio para la lupa dentro */
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.15);
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 14px;
    min-width: 0;
}

.search-input::placeholder { color: rgba(255,255,255,0.6); }

/* LUPA (ahora dentro del input, posicionada) */
.search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #D4AF37;
    padding: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* MENU HAMBURGUESA */
.menu-toggle {
    background: transparent;
    border: 2px solid #D4AF37;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    flex: 0 0 auto;

}
.menu-toggle .line { width: 20px; height: 2px; background: white; border-radius: 2px; transition: all 0.2s ease; }
.menu-toggle.active .line1 { transform: rotate(45deg) translateY(6px); }
.menu-toggle.active .line2 { transform: rotate(-45deg) translateY(-6px); }

/* CTA "Publícate aquí" — visible solo en PC */
.cta-publicate {
  display: none; /* oculto por defecto (mobile) */
}

@media (min-width: 1024px) {
  .cta-publicate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px; /* alto equilibrado con buscar */
    margin-left: 25px; /* separa del buscador */
    margin-right: 25px; /* separa del menú */
    border-radius: 30px;
    background: linear-gradient(135deg,#D4AF37 0%,#FFD700 100%);
    color: #1a0d24;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.15),
                0 0 10px rgba(212,175,55,0.35);
  }
  
  .cta-publicate:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
  }

  .cta-publicate i {
    color: #1a0d24;
    font-size: 15px;
  }
}

/* MENU DROPDOWN default */
.menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    background: #2A1142;
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 160ms ease;
    min-width: 220px;
    z-index: 120;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.menu-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }

.menu-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 12px 16px; 
    color: white; 
    text-decoration: none; 
    font-size: 14px; 
    border-bottom: 1px solid rgba(212,175,55,0.06); 
}
.menu-item:hover { background: rgba(212,175,55,0.05); }

/* CTAs Destacados (dorado + negrita) */
.menu-item-destacado { 
    background: linear-gradient(135deg,#D4AF37 0%,#FFD700 100%); 
    color: #1a0d24;
    font-weight: 600;
    border-bottom: none;
}
.menu-item-destacado:hover,
.menu-item-destacado:focus,
.menu-item-destacado:active {
    background: linear-gradient(135deg,#D4AF37 0%,#FFD700 100%) !important;
    color: #1a0d24 !important;
}

/* Alinear "Publícate aquí" con items regulares */
.menu-item-publicate {
    padding-left: 14px;
}

/* Separador visual después de CTAs */
.menu-separador {
    height: 1px;
    background: rgba(212,175,55,0.2);
    margin: 0;
}

/* Desktop: Ocultar "Publícate aquí" del menú (ya está en header) */
@media (min-width: 1024px) {
    .menu-item-publicate {
        display: none;
    }
}

/* ========================================
   MAIN CONTAINER - Ajuste de márgenes desktop
   ======================================== */
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* Desktop: reduce padding lateral solo en pantallas grandes */
@media (min-width: 1024px) {
  .main-container {
    padding: 10px 40px !important; /* fuerza prioridad sobre la anterior */
  }
}

.perfiles-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.perfil-card { display: block; text-decoration: none; color: inherit; transition: all 0.25s ease; }
.card-foto-wrapper { position: relative; width: 100%; aspect-ratio: 9/16; overflow: hidden; border-radius: 12px; }
.card-foto { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; height: 100%; object-fit: cover; display: block; }
.card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 70%, transparent 100%); }

.card-ubicacion i {
  color: #D4AF37;          /* ícono dorado */
  margin-right: 4px;
}

/* Paso 2 – Nombre, edad y punto verde disponible */
.card-nombre {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Edad (se muestra junto al nombre con un espacio) */
.card-nombre span {
  margin-left: 4px;
}

/* Punto verde con brillo tipo gema Esmeralda */
.punto-disponible {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #66FFB3 0%, #2ECC71 90%);
  margin-left: 6px;
  animation: glow-esmeralda 1.8s ease-in-out infinite;
}

/* Paso 3 – Tarifa o "Consultar" */
.card-precio {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 1px;
  display: flex;
  align-items: center;
}

.card-precio i,
.card-precio .signo-peso {
  color: #D4AF37;  /* ícono o símbolo dorado */
  margin-right: 4px;
}

.card-precio.consultar {
  color: #d4af37cc; /* dorado suave para "Consultar" */
}

/* Responsive adjustments generales */
@media (max-width: 1200px) { .perfiles-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .perfiles-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ===== MOBILE: TODO EN UNA LÍNEA (pero compacto) ===== */
@media (max-width: 768px) {
    .header-container { padding: 6px 10px; gap: 8px; }
    .logo img { height: 64px; } /* reduce altura */
    .logo { margin-left: -15px; }
    .city .city-text {position: relative; top: 1px;}
    .comuna-pill { font-size: 13px; padding: 5px 8px; }
    .search-input { font-size: 13px; padding: 6px 10px; padding-right: 40px; }
    .menu-toggle { width: 36px; height: 36px; }
    /* hacer que el grupo Santiago+Comuna quede más pegado al logo (empujar hacia la izquierda) */
    .city-comuna-group { margin-left: -22px; margin-right: -17px; gap: 5px; }
    /* asegurar el input tome el resto del espacio disponible */
    .search-box { flex: 1 1 auto; min-width: 0; }
    /* dropdowns: fallback para que no se corten en mobile (JS ajustará más) */
    .chip-menu { min-width: 180px; left: 8px; right: auto; margin-left: 0;}
        /* Alineación precisa entre Santiago y Comuna en mobile */
    .menu-dropdown { right: 8px; left: auto; }
    .city-comuna-group .comuna-wrapper {margin-left: -8px;}
        /* Mover SOLO el dropdown de COMUNA un poco más a la izquierda en mobile */
            /* Mover SOLO el dropdown de COMUNA un poco más a la izquierda en mobile */
    .comuna-wrapper .chip-menu {
        margin-left: -16px;  /* ajusta -10 / -20 según lo que veas en el celu */
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .logo img { height: 60px; }
    .search-input { font-size: 12px; }
    .city .city-text { font-size: 12px; }
}

/* Desktop spacing for menu toggle (no afecta mobile) */
@media (min-width: 769px) {
    .menu-toggle {
        margin-right: 16px;
    }
}

.city,
.comuna-pill {
    font-family: inherit; /* asegura la misma familia base del body */
    font-weight: 500;     /* mismo grosor */
    letter-spacing: 0.1px;
}

/* ========================================
   FOOTER LEGAL
   ======================================== */

/* === REPARACIÓN FOOTER VISUAL === */
.footer {
    background: linear-gradient(135deg, #2E0F47 0%, #551C88 100%);
    border-top: 2px solid rgba(212, 175, 55, 0.45);
    padding: 30px 20px;
    margin-top: 60px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #D4AF37;
}

.footer-divider {
    color: rgba(212, 175, 55, 0.4);
    font-weight: 300;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    text-align: center;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .footer {
        padding: 25px 15px;
    }
    .footer-links {
        font-size: 13px;
        gap: 8px;
    }
    .footer-copyright {
        font-size: 12px;
    }
}


/* ========================================
   TÍTULOS DE GALERÍAS - IDENTIDAD POR GEMA
   Agregar al final de listado.css
   ======================================== */

/* BASE COMÚN */
.galeria-section {
    margin-bottom: 5px;
}

.galeria-titulo {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    padding-top: 5px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 2.5px;
}

/* Línea separadora debajo del título */
.galeria-titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, currentColor 0%, transparent 100%);
    opacity: 0.3;
}

/* RUBÍ - Violeta a Rojo */
.galeria-rubi {
    background: linear-gradient(135deg, #6B3FA0 0%, #D00000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.galeria-rubi i {
    color: #D00000;
    -webkit-text-fill-color: #D00000;
    animation: glow-rubi 2.5s ease-in-out infinite;
}

.galeria-rubi::after {
    background: linear-gradient(90deg, #D00000 0%, transparent 100%);
}

@keyframes glow-rubi {
    0%, 100% { 
        filter: drop-shadow(0 0 4px rgba(208, 0, 0, 0.6)); 
        opacity: 1; 
    }
    50% { 
        filter: drop-shadow(0 0 12px rgba(208, 0, 0, 1)); 
        opacity: 0.85; 
    }
}

/* ESMERALDA - Violeta a Verde */
.galeria-esmeralda {
    background: linear-gradient(135deg, #6B3FA0 0%, #2ECC71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.galeria-esmeralda i {
    color: #2ECC71;
    -webkit-text-fill-color: #2ECC71;
    animation: glow-esmeralda 2.5s ease-in-out infinite;
}

.galeria-esmeralda::after {
    background: linear-gradient(90deg, #2ECC71 0%, transparent 100%);
}

@keyframes glow-esmeralda {
    0%, 100% { 
        filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.6)); 
        opacity: 1; 
    }
    50% { 
        filter: drop-shadow(0 0 12px rgba(46, 204, 113, 1)); 
        opacity: 0.85; 
    }
}

/* ÁMBAR - Violeta a Dorado */
.galeria-ambar {
    background: linear-gradient(135deg, #6B3FA0 0%, #FFC107 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.galeria-ambar i {
    color: #FFC107;
    -webkit-text-fill-color: #FFC107;
    animation: glow-ambar 2.5s ease-in-out infinite;
}

.galeria-ambar::after {
    background: linear-gradient(90deg, #FFC107 0%, transparent 100%);
}

@keyframes glow-ambar {
    0%, 100% { 
        filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.6)); 
        opacity: 1; 
    }
    50% { 
        filter: drop-shadow(0 0 12px rgba(255, 193, 7, 1)); 
        opacity: 0.85; 
    }
}

/* DEGRADADO PREMIUM EN ÍCONOS DE GEMAS */
.galeria-rubi i {
  background: radial-gradient(circle at 30% 30%, #FF4D4D 0%, #D00000 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow-rubi 2.5s ease-in-out infinite;
}

.galeria-esmeralda i {
  background: radial-gradient(circle at 30% 30%, #66FFB3 0%, #2ECC71 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow-esmeralda 2.5s ease-in-out infinite;
}

.galeria-ambar i {
  background: radial-gradient(circle at 30% 30%, #FFE066 0%, #FFC107 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow-ambar 2.5s ease-in-out infinite;
}

/* ========================================
   MOBILE & TABLET SPACING ADJUSTMENTS
   (para <900px)
   ======================================== */
@media (max-width: 900px) {
  
  /* Subir la primera galería (Encanto Rubí) */
  .main-container {
    padding-top: 15px; /* <- empieza probando con 15 */
  }

  /* Subir el subrayado hacia el título */
  .galeria-titulo {
    padding-bottom: 5px; /* <- prueba 0 a 6 */
    margin-bottom: 18px; /* <- prueba 10 a 20 */
  }

  /* Reducir espacio vertical entre galerías */
  .galeria-section {
    margin-bottom: 50px; /* <- prueba 40 a 60 */
  }
}

/* ========================================
   CARD NOMBRE + PUNTO DISPONIBLE (base global)
   ======================================== */
.card-nombre {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}

.card-nombre-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    padding-right: 20px;

}

/* Ocultar tarifa temporalmente */
.card-precio {
    display: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {

  /* Título */
  .galeria-titulo {
    font-size: 18px !important;
    padding-top: 5px !important;  /* sube la galería hacia el header */
    padding-bottom: 0px !important; /* acerca el subrayado */
    margin-bottom: 6px !important; /* acerca el grid al título */
  }

  .galeria-titulo::after {
    width: 100px;
  }

  /* Ajuste general de spacing en mobile */
  .main-container {
    padding-top: 2.5px; /* sube la primera galería */
  }

  .galeria-section {
    margin-bottom: 5px; /* reduce espacio entre galerías */
  }

  /* Cards: compactar grilla en mobile */
  .perfiles-grid { 
    gap: 1px; /* catálogo fluido y elegante */
  }

  /* Márgenes laterales más compactos en mobile */
  .main-container {
    padding-left: 2px;
    padding-right: 2px;
  }
}

@media (max-width: 480px) {
  .galeria-titulo {
    font-size: 18px; /* opcional: un poco menor en celulares más angostos */
  }
}


@media (max-width: 480px) {
    .galeria-titulo {
        font-size: 22px;
    }
}

/* ========================================
   MOBILE (≤768px) — Densidad elegante
   ======================================== */
@media (max-width: 768px) {
    /* Nombre + punto verde */
    .card-nombre { 
        font-size: 12.5px;
        margin-bottom: 1px;
        white-space: nowrap;          
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ubicación (permite 1 o 2 líneas sin cortar) */
    .card-ubicacion { 
        font-size:11.5px;
        margin-top: 2px;
        line-height: 1.25;
        display: flex;
        align-items: center;
    }

    .punto-disponible {
        flex-shrink: 0; 
    }
} /* ← CIERRE DEL BLOQUE MOBILE */

/* ========================================
   CARD OVERLAY – NUEVO FORMATO
   ======================================== */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.35) 70%,
        transparent 100%
    );
}

.punto-disponible {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #66FFB3 0%, #00FF66 90%);
    animation: glow-disponible 2.8s ease-in-out infinite;
    z-index: 4;
}

/* Pulso tipo gema real (combinado con leve glow físico) */
@keyframes glow-disponible {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(46,204,113,0.7));
        box-shadow: 0 0 10px rgba(0,255,100,0.5), 0 0 16px rgba(0,255,100,0.4);
        opacity: 1;
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(46,204,113,1));
        box-shadow: 0 0 22px rgba(0,255,120,1), 0 0 32px rgba(0,255,120,0.8);
        opacity: 0.9;
    }
}

/* Nombre (desktop/tablet) */
.card-nombre {
    color: #ffffff;
    font-size: 16.5px;     /* el tamaño que quieras en PC */
    font-weight: 700;    /* negrita */
    margin-bottom: 2px;
    text-align: left;
    margin-left: -8px;
    text-transform: uppercase; /* mayúsculas */
}

.card-nombre-texto {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ubicación */
.card-ubicacion {
    color: #e0e0e0;
    font-size: 15px;
    display: flex;
    align-items: baseline;
    gap: 0px;
    margin-right: -4px;
    margin-left: -4px; /* mismo desplazamiento que el nombre */
}

/* Oculta la tarifa y edad en todas las vistas */
.card-precio {
    display: none !important;
}

/* Mobile (≤768px) ajustes */
@media (max-width: 768px) {
    .card-nombre {
        font-size: 15px;   /* más grande en mobile */
        margin-bottom: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* === TEST: MAYÚSCULAS + NEGRITA === */
        text-transform: uppercase;
        font-weight: 700;
        /* === FIN TEST === */
    }

    .card-ubicacion {
        font-size: 14.5px;   /* más grande en mobile */
        margin-top: 2px;
        line-height: 1.25;
        display: flex;
        align-items: baseline;
    }

    .punto-disponible {
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
    }
}

/* Evita fondo blanco bajo el footer cuando hay pocos perfiles */
html, body {
    min-height: 100%;
}

.main-container {
    min-height: calc(100vh - 160px); /* ocupa al menos el alto de pantalla menos header+footer */
}

/* Mini badge Masajista – borde dorado sutil */
.card-tipo-perfil {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border: 1px solid #D4AF37;                /* dorado Exclusivas */
    border-radius: 999px;                     /* pill */
    background: rgba(0, 0, 0, 0.55);          /* fondo oscuro sutil, deja lucir la foto */
    color: #f3f3f3;                           /* texto claro */
    font-size: 12px;                          /* un poco más chico que comuna */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;                    /* le da aire “premium” */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);  /* ayuda sobre fondos claros */
    z-index: 3;
    pointer-events: none;
}

@media (max-width: 768px) {
    .card-tipo-perfil {
        font-size: 10.5px;    /* antes 8.5px */
        padding: 2px 7px;   /* un poco más de aire */
        top: 6px;
        right: 6px;
    }
}

/* Flecha de ciudad: mismo estilo que la flecha de Comuna */
.city-chevron {
    color: rgba(212,175,55,0.95);
    font-size: 12px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Mobile: acercar flechas al texto sin mover todo el bloque */
@media (max-width: 768px) {
    .city-chevron {
        margin-left: -2px;   /* antes 4px */
    }

    .comuna-chevron {
        margin-left: -3px;   /* flecha más pegada a "Comuna" */
    }
}

/* Desktop: bajar levemente la flecha de ciudad */
@media (min-width: 769px) {
    .city-chevron {
        position: relative;
        top: 1px; /* si quieres más, prueba con 2px */
    }
}

/* ========================================
   TOOLTIP CIUDAD / ZONA – POSICIÓN MOBILE
   ======================================== */
@media (max-width: 768px) {
    .city-tooltip {
        top: 61px;           /* SUBIR / BAJAR el tooltip en mobile */
        justify-content: flex-start; 
        padding-left: 16.6px;  /* MOVER A LA DERECHA el tooltip en mobile */
    }

    .city-tooltip-text {
        font-size: 12px;
        padding: 5px 14px;
    }
}

/* MUESTRA LISTADO - PILL */
.card-muestra-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 2px;
}

/* Estilo base (mobile first) */
.badge-muestra {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.78);
	border: 1px solid #D4AF37;
	color: #ffffff;
	font-size: 9.5px;      /* AJUSTA AQUÍ (mobile) */
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Tablets / desktop: puedes hacerla un poco más discreta que MASAJISTA */
@media (min-width: 768px) {
	.badge-muestra {
		padding: 4px 8px; /* prueba 2–3 / 6–9 */
		font-size: 10.5px;   /* AJUSTA AQUÍ (desktop) */
	}
}

/* Ciudad: nombre largo en desktop, corto en mobile */
.city-label--short {
    display: none;
}

@media (max-width: 768px) {
    .city-label--full {
        display: none !important;
    }

    .city-label--short {
        display: inline-flex !important;
        align-items: center;
        font-size: 0.92rem;      /* 👉 aquí agrandamos solo el nombre de ciudad */
        font-weight: 600;        /* un poco más “fuerte” que Comuna */
    }
    .city {
        top: -0.8px; /* anulamos el micro-desplazamiento solo en mobile */
    }
}

.img-fade {
    opacity: 0;
    transition: opacity .35s ease-in-out;
}

.img-fade.loaded {
    opacity: 1;
}

.galeria-titulo .apellido-plan {
    margin-left: 12px !important;
    font-style: italic;
    font-size: 1.2rem !important;
    display: inline;
}

@media (max-width: 768px) {

    .galeria-titulo .apellido-plan {
        font-size: 0.95rem !important;
    }

}

/* =========================================================
   BLOQUE SEO – TEXTO SEMÁNTICO LISTADO
   ========================================================= */

.seo-texto-card {
    margin-top: 40px;
    padding: 28px 30px;

    background: #f8f8f8;

    /* BORDE FIJO VIOLETA (marca) */
    border: 1px solid #281434;
    border-radius: 14px;
}

.seo-texto-card h2 {
    font-size: 20px;
    margin-bottom: 14px;
    color: #1a1a1a;
}

.seo-texto-card h2 i {
    color: #D4AF37; /* dorado */
    margin-right: 6px;
}

.seo-texto-card p {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    margin-bottom: 12px;

    /* JUSTIFICADO REAL */
    text-align: justify;
    hyphens: auto;
}

.seo-texto-card p:last-child {
    margin-bottom: 0;
}

/* Desktop: leve refinamiento visual */
@media (min-width: 1024px) {
    .seo-texto-card {
        padding: 32px 36px;
    }
}

/* UI PARA H1 LISTADOS DE CIUDAD */
.listado-h1 {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 4px 0 2px 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #5a2d82; /* morado secundario */
    text-align: left;

    /* micro-animación */
    opacity: 0;
    transform: translateY(4px);
    animation: listadoH1Fade 240ms ease-out forwards;
}

.listado-h1::after {
    content: "";
    flex: 1;
    height: 3px;
    background: linear-gradient(
        to right,
        #d4af37 0%,
        #e8c766 45%,
        #f5e3a1 100%
    );
    border-radius: 2px;
}

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

@media (min-width: 768px) {
    .listado-h1::after {
        flex: none;
        width: 120px;
    }
}

@media (max-width: 767px) {
    .listado-h1 {
        font-size: 24px;
    }

    .listado-h1::after {
        flex: none;
        width: 72px;
    }
}

@media (max-width: 767px) {
    .galeria-titulo.galeria-rubi {
        margin-top: -5px;
    }
}

@media (min-width: 1024px) {
    .listado-h1 {
        font-size: 26px;
    }
}

@media (min-width: 1024px) {
    .listado-h1 {
        margin-top: 2px;
    }
}

@media (min-width: 1024px) {
    .galeria-titulo.galeria-rubi {
        margin-top: 10px;
    }
}

/* ========================================
   GALERÍA ÁMBAR - ESMERALDA y RUBÍ – GRID MASIVO (SOLO ÁMBAR)
   ======================================== */

/* Mobile (≤768px): 3 columnas */
@media (max-width: 768px) {
    .galeria-rubi + .perfiles-grid,
    .galeria-esmeralda + .perfiles-grid,
    .galeria-ambar + .perfiles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet (769px – 899px): 4 columnas */
@media (min-width: 769px) and (max-width: 899px) {
    .galeria-rubi + .perfiles-grid,
    .galeria-esmeralda + .perfiles-grid,
    .galeria-ambar + .perfiles-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop estándar (900px – 1439px): 6 columnas */
@media (min-width: 900px) and (max-width: 1439px) {
    .galeria-rubi + .perfiles-grid,
    .galeria-esmeralda + .perfiles-grid,
    .galeria-ambar + .perfiles-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
    }
}

/* Desktop grande (≥1440px): 7 columnas */
@media (min-width: 1440px) {
    .galeria-rubi + .perfiles-grid,
    .galeria-esmeralda + .perfiles-grid,
    .galeria-ambar + .perfiles-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ========================================
   BADGE MASAJISTA – AJUSTE FINAL
   Ajustes aplicados:
   - Transparencia ligera GLOBAL (Rubí / Esmeralda / Ámbar)
   - Tamaño reducido SOLO en Ámbar y SOLO mobile (~65–70%)
   ======================================== */

/* Transparencia global: todas las galerías, todos los breakpoints */
.card-tipo-perfil {
    background: rgba(0, 0, 0, 0.35);
}

/* Ámbar: reducción de tamaño SOLO en mobile */
@media (max-width: 768px) {
    .galeria-ambar + .perfiles-grid .card-tipo-perfil {
        font-size: 8px;        /* ~67% de 12px original */
        padding: 0px 3px;      /* ~65–70% de 3px 9px */
    }
}

/* STRIPCHAT */
/* Intro cams – alineación correcta icono + texto */
.cams-intro{
    margin:50px 0 12px;
    line-height:1.4;
}

.cams-icon{
    color:#d4af37;
    font-size:18px;
    display:inline-block;
    transform: translateY(1px);
    margin-right:6px;
}

.cams-title{
    font-size:19px;
    font-weight:700;
    color:#222;
    position:relative;
    top:1px;
}

.cams-subtext{
    font-size:13.5px;
    color:#777;
}

/* ========================================
   FIX: Tooltip ciudad – evitar flash al load
   ======================================== */

/* Oculto por defecto (JS decide si mostrar) */
#cityTooltip {
    display: none;
}

/* Wrapper mantiene el radio original de la card (sin borde extra) */
.perfil-card--con-comuna .card-foto-wrapper {
    border-radius: 12px;
}

/*.card-comuna-rectangulo {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 12px 12px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.14) 48%,
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        linear-gradient(90deg, #2E0F47 0%, #551C88 100%);

    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 3px rgba(0, 0, 0, 0.55);

    padding: 4px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
} */

/* =========================================================
   PUBLICIDAD – CASAS
   ========================================================= */

.publicidad-casas {
    margin: 30px 0 20px 0;
}

.casas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.casa-card {
    position: relative;
    display: block;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #281434 0%, #1a0d24 100%);
    border: 1px solid rgba(212,175,55,0.6);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.casa-card:hover {
    transform: scale(1.01);
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
}

.casa-overlay {
    position: absolute;
    inset: 0;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.casa-badge {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D4AF37;
    font-weight: 600;
}

.casa-nombre {
    font-size: 15px;
    color: #ffffff;
    font-weight: 700;
}

.casa-cta {
    font-size: 11px;
    color: #D4AF37;
    font-weight: 600;
}

.casa-subtexto {
    font-size: 15px;
    color: #ffffff;
    font-style: italic;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Desktop casas */
@media (min-width: 900px) {
    .casas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .casa-card {
        height: 135px;
    }
}

/* =========================================================
   PUBLICIDAD – AVISOS
   ========================================================= */

.publicidad-avisos {
    margin: 20px 0 40px 0;
}

.avisos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.aviso-card {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aviso-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.aviso-badge {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #5a2d82;
    font-weight: 600;
    margin-bottom: 3px;
}

.aviso-card h4 {
    font-size: 11px;
    color: #333;
    font-weight: 600;
}

/* Desktop avisos */
@media (min-width: 1024px) {
    .avisos-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* =========================================================
   EFECTO SHIMMER
   ========================================================= */

@keyframes shimmerTop {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}

/* =========================================================
   CONCEPCIÓN – CASAS ACTIVAS
   ========================================================= */

.casa-card--alcoba {
    background-image: url("/static/img/Alcoba480x80Banner.gif");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
    position: relative;
}

.casa-card--alcoba::before,
.casa-card--alcoba::after {
    content: none !important;
}

@media (min-width: 768px) {
    .casa-card--alcoba {
        background-image: url("/static/img/Alcoba780x80Banner.gif");
    }
}

.publicidad-casas .casas-grid > a.casa-card--diversion {
    background-image: url("/static/img/diversion-conce.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1.5px solid rgba(212,175,55,0.6);
    overflow: hidden;
}

.publicidad-casas .casas-grid > a.casa-card--diversion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.publicidad-casas .casas-grid > a.casa-card--diversion .casa-overlay {
    position: relative;
    z-index: 2;
}

.publicidad-casas .casas-grid > a.casa-card--diversion::after {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(212,175,55,0.9),
        transparent
    );
    animation: shimmerTop 8s linear infinite;
}

.publicidad-casas .casas-grid > a.casa-card--justine {
    background-image: url("/static/img/casa-justine.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.publicidad-casas .casas-grid > a.casa-card--justine::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.27);
}

.publicidad-casas .casas-grid > a.casa-card--justine .casa-overlay {
    position: relative;
    z-index: 2;
    color: #F1C40F;
}

.publicidad-casas .casas-grid > a.casa-card--justine .casa-overlay * {
    color: #F1C40F !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.publicidad-casas .casas-grid > a.casa-card--fer {
    background-image: url("/static/img/fer-listado-casa.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.publicidad-casas .casas-grid > a.casa-card--fer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.publicidad-casas .casas-grid > a.casa-card--fer .casa-overlay {
    position: relative;
    z-index: 2;
    color: #F1C40F;
}

.publicidad-casas .casas-grid > a.casa-card--fer .casa-overlay * {
    color: #F1C40F !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* =========================================================
   CONCEPCIÓN – AVISOS ACTIVOS
   ========================================================= */

/* Aviso 1 */
.publicidad-avisos .avisos-grid > a.aviso-card:nth-child(1) {
    background-image: url("/static/img/pieza-casa-justine.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.publicidad-avisos .avisos-grid > a.aviso-card:nth-child(1)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.publicidad-avisos .avisos-grid > a.aviso-card:nth-child(1) .aviso-contenido {
    position: relative;
    z-index: 2;
}

.publicidad-avisos .avisos-grid > a.aviso-card:nth-child(1) h4,
.publicidad-avisos .avisos-grid > a.aviso-card:nth-child(1) .aviso-badge {
    color: #ffffff;
}

/* Aviso 2 */
.publicidad-avisos .avisos-grid > a.aviso-card--diversion {
    background-image: url("/static/img/diversion-conce.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.publicidad-avisos .avisos-grid > a.aviso-card--diversion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.publicidad-avisos .avisos-grid > a.aviso-card--diversion .aviso-contenido {
    position: relative;
    z-index: 2;
}

.publicidad-avisos .avisos-grid > a.aviso-card--diversion h4,
.publicidad-avisos .avisos-grid > a.aviso-card--diversion .aviso-badge {
    color: #ffffff;
}

/* =========================================================
   DROPDOWN CIUDADES – SEPARADORES Y TONOS
   ========================================================= */

#cityMenu .chip-zone-divider {
    height: 1px;
    margin: 6px 8px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(212, 175, 55, 0.65),
        transparent
    );
}

#cityMenu .chip-option--centro {
    background: rgba(85, 28, 136, 0.24);
}

#cityMenu .chip-option--sur {
    background: rgba(85, 28, 136, 0.16);
}

#cityMenu .chip-option--norte {
    background: rgba(85, 28, 136, 0.08);
}

#cityMenu .chip-option--centro:hover,
#cityMenu .chip-option--sur:hover,
#cityMenu .chip-option--norte:hover {
    background: rgba(212, 175, 55, 0.10);
}