/* ============================================================
   FARAONAS — Estilo VIP (listado, perfil, panel de usuario y página /vip)
   Oro: marco y cinta dorados sobre las tarjetas existentes del sitio.
   ============================================================ */
:root {
    --vip-oro-1: #f9e08b;
    --vip-oro-2: #d4a537;
    --vip-oro-3: #a67816;
    --vip-crema: #fffbef;
    --vip-texto: #3b2a00;
    --vip-marco: linear-gradient(135deg, #f9e08b, #d4a537 45%, #a67816 70%, #f9e08b);
}

.vip-corona { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; flex-shrink: 0; }

/* Tarjeta del listado (.ad-row en cliente/buscar.php) */
.ad-row.vip {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--vip-crema), var(--vip-crema)) padding-box, var(--vip-marco) border-box !important;
    box-shadow: 0 6px 22px rgba(212, 165, 55, .22);
}
.ad-row.vip .border-top { border-top-color: #f1e2b4 !important; }
.vip-fijado { color: #8a6410; font-weight: 600; }

/* Cinta sobre la foto */
.vip-cinta {
    position: absolute; top: 10px; left: -4px; z-index: 6;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px 4px 10px; border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, var(--vip-oro-1), var(--vip-oro-2) 60%, var(--vip-oro-3));
    color: var(--vip-texto); font-weight: 800; font-size: .72rem; letter-spacing: .08em; line-height: 1.4;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35); overflow: hidden;
}
.vip-cinta::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: vipBrillo 4.5s ease-in-out infinite;
}
@keyframes vipBrillo { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* Sello pequeño junto al título */
.vip-sello {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: #7a5508;
    background: #fff3cc; border: 1px solid #ecd48a; border-radius: 999px; padding: 1px 8px; line-height: 1.6;
}

/* Sello grande (perfil y página /vip) */
.vip-sello-grande {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
    font-weight: 800; font-size: .8rem; letter-spacing: .06em; color: var(--vip-texto);
    background: linear-gradient(135deg, var(--vip-oro-1), var(--vip-oro-2) 60%, var(--vip-oro-3));
    box-shadow: 0 3px 10px rgba(166, 120, 22, .35); vertical-align: middle;
}

/* Marco dorado de la foto principal del perfil */
.vip-marco-foto {
    padding: 3px; border-radius: 14px;
    background: var(--vip-marco);
    box-shadow: 0 10px 30px rgba(212, 165, 55, .25);
}

/* Ejemplo en la página /vip */
.vip-ad-demo {
    display: flex; border-radius: 12px; overflow: hidden;
    border: 2px solid transparent;
    background: linear-gradient(var(--vip-crema), var(--vip-crema)) padding-box, var(--vip-marco) border-box;
    box-shadow: 0 6px 22px rgba(212, 165, 55, .22);
}
.vip-ad-foto {
    position: relative; width: 130px; min-width: 130px; height: 140px;
    background: radial-gradient(circle at 35% 35%, #f0b8a8, transparent 55%), linear-gradient(160deg, #6b2d3c, #22131c);
}

/* Panel de la anunciante: tarjeta del plan */
.vip-plan {
    border: 2px solid transparent; border-radius: 18px; padding: 18px 20px;
    background: linear-gradient(var(--vip-crema), var(--vip-crema)) padding-box, var(--vip-marco) border-box;
}
.vip-plan .restan { font-size: 1.8rem; font-weight: 800; color: #7a5508; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vip-plan .restan small { font-size: .85rem; font-weight: 600; color: #6b7280; }
.vip-barra { height: 9px; background: #f1e6c6; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.vip-barra > div { height: 100%; background: linear-gradient(90deg, var(--vip-oro-2), var(--vip-oro-1)); border-radius: 999px; }

/* Botón flotante "VIP" (abajo a la derecha del panel de la anunciante) */
.vip-flotante {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1030;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, var(--vip-oro-1), var(--vip-oro-2) 60%, var(--vip-oro-3));
    color: var(--vip-texto); font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 8px 24px rgba(166, 120, 22, .45); overflow: hidden; transition: transform .2s;
}
.vip-flotante:hover { color: var(--vip-texto); transform: translateY(-2px); }
.vip-flotante::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
    animation: vipBrillo 5s ease-in-out infinite;
}
.vip-flotante:focus-visible { outline: 3px solid #101820; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .vip-cinta::after, .vip-flotante::after { animation: none; display: none; }
}