/* =====================================================================
   VIP · la estética propia de la sección.

   El resto del sitio es sobrio a propósito. VIP tiene que sentirse
   aparte apenas se entra: negro profundo, dorado de verdad (con brillo,
   no un amarillo plano), letras de revista para los nombres y un marco
   que se mueve en la foto.

   Todo está encerrado en tres contenedores, así no se filtra nada al
   resto del sitio:
     .vip-lujo         la página /vip
     .vip-franja       la franja de la portada y los listados
     .perfil-page.es-vip   el perfil de alguien VIP
   ===================================================================== */

:root{
    --vip-oro:       #E9C46A;
    --vip-oro-claro: #F8E3A3;
    --vip-oro-hondo: #B8872E;
    --vip-negro:     #0A0908;
    --vip-negro-2:   #14110C;
    --vip-linea:     rgba(233,196,106,.28);
    --vip-dorado: linear-gradient(135deg, #B8872E 0%, #F8E3A3 38%, #E9C46A 55%, #9C6F22 100%);
    --vip-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --vip-titulo: 'Cinzel', 'Playfair Display', Georgia, serif;
    --vip-libro: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* Texto con el dorado en degradé. Con respaldo para los navegadores
   que no recortan el fondo al texto. */
.vip-oro-texto{
    color:var(--vip-oro);
    background:var(--vip-dorado);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

@keyframes vip-brillo{
    0%   { background-position:-160% 0; }
    60%  { background-position:260% 0; }
    100% { background-position:260% 0; }
}

@keyframes vip-giro{ to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
    .vip-lujo *, .vip-franja *, .perfil-page.es-vip *{
        animation:none !important;
    }
}

/* =====================================================================
   /vip
   ===================================================================== */
.vip-lujo{
    position:relative;
    margin:0 -12px;
    padding:0 12px 40px;
    background:
        radial-gradient(900px 420px at 50% -120px, rgba(233,196,106,.20), transparent 70%),
        radial-gradient(600px 300px at 100% 40%, rgba(184,135,46,.08), transparent 70%),
        var(--vip-negro);
}

.vip-hero{
    padding:44px 16px 10px;
    text-align:center;
}

.vip-escudo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    border:1px solid var(--vip-linea);
    background:radial-gradient(circle at 50% 30%, rgba(248,227,163,.18), rgba(10,9,8,.2) 70%);
    box-shadow:0 0 0 6px rgba(233,196,106,.05), 0 10px 40px rgba(233,196,106,.18);
    color:var(--vip-oro);
    font-size:26px;
}

.vip-hero .vip-sobre{
    margin:18px 0 4px;
    max-width:none;
    font-family:var(--vip-titulo);
    font-style:normal;
    font-size:11px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}

.vip-hero h1{
    margin:0;
    font-family:var(--vip-titulo);
    font-size:clamp(64px, 18vw, 120px);
    font-weight:700;
    letter-spacing:.12em;
    line-height:1;
    padding-left:.12em; /* compensa el espaciado de la última letra */
    background:linear-gradient(110deg, #9C6F22 0%, #E9C46A 30%, #FFF4D0 45%, #E9C46A 60%, #9C6F22 100%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--vip-oro);
    animation:vip-brillo 6s ease-in-out infinite;
}

.vip-filete{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px auto 16px;
    color:var(--vip-oro);
    font-size:10px;
}
.vip-filete::before,
.vip-filete::after{
    content:"";
    width:64px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--vip-oro));
}
.vip-filete::after{ background:linear-gradient(270deg, transparent, var(--vip-oro)); }

.vip-hero p{
    max-width:440px;
    margin:0 auto;
    font-family:var(--vip-serif);
    font-size:17px;
    font-style:italic;
    line-height:1.5;
    color:rgba(244,241,234,.78);
}

.vip-garantias{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    max-width:520px;
    margin:22px auto 0;
}
.vip-garantia{
    padding:12px 6px;
    border:1px solid var(--vip-linea);
    border-radius:14px;
    background:rgba(233,196,106,.04);
    text-align:center;
}
.vip-garantia i{
    display:block;
    margin-bottom:6px;
    color:var(--vip-oro);
    font-size:17px;
}
.vip-garantia span{
    display:block;
    color:rgba(244,241,234,.82);
    font-size:11.5px;
    font-weight:600;
    line-height:1.25;
}

.vip-tabs{
    display:flex;
    justify-content:center;
    gap:4px;
    width:max-content;
    max-width:100%;
    margin:28px auto 22px;
    padding:4px;
    border:1px solid var(--vip-linea);
    border-radius:99px;
    background:rgba(0,0,0,.35);
    overflow-x:auto;
}
.vip-tab{
    flex:0 0 auto;
    padding:9px 18px;
    border-radius:99px;
    color:rgba(244,241,234,.72);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
}
.vip-tab small{ opacity:.55; margin-left:3px; }
.vip-tab:hover{ color:var(--vip-oro-claro); text-decoration:none; }
.vip-tab.activa{
    background:var(--vip-dorado);
    color:#1A1206;
    box-shadow:0 6px 20px rgba(233,196,106,.25);
}
.vip-tab.activa small{ opacity:.7; }

.vip-vacio{
    padding:50px 16px;
    text-align:center;
    font-family:var(--vip-serif);
    font-style:italic;
    font-size:17px;
    color:rgba(244,241,234,.6);
}

/* ---------------------------------------------------------------------
   Las tarjetas dentro de VIP.

   Es la misma tarjeta de todo el sitio —la dibuja card_perfil.php— con
   otro vestido: foto más alta, marco dorado, el nombre en letra de
   revista y el sello VIP en lugar de la medalla del plan (adentro de
   VIP el plan no dice nada: todos son VIP).
   --------------------------------------------------------------------- */
.vip-lujo .pgrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
@media (min-width:768px){
    .vip-lujo .pgrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
}
@media (min-width:1100px){
    .vip-lujo .pgrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.vip-lujo .pcard,
.vip-franja .pcard,
.bloque-plan--vip .pcard{
    position:relative;
    border:1px solid transparent;
    border-radius:18px;
    background:
        linear-gradient(var(--vip-negro-2), var(--vip-negro-2)) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(233,196,106,.1);
    transition:transform .25s ease, box-shadow .25s ease;
}
.vip-lujo .pcard:hover,
.vip-franja .pcard:hover,
.bloque-plan--vip .pcard:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(233,196,106,.18);
}
.vip-lujo .pcard-link,
.vip-franja .pcard-link,
.bloque-plan--vip .pcard-link{
    display:block;
    border-radius:17px;
    overflow:hidden;
    background:var(--vip-negro-2);
}

.vip-lujo .pcard-media,
.vip-franja .pcard-media,
.bloque-plan--vip .pcard-media{
    aspect-ratio:3 / 4.2;
    position:relative;
}
/* Degradé para que el nombre se lea encima de la foto. */
.vip-lujo .pcard-media::after,
.vip-franja .pcard-media::after,
.bloque-plan--vip .pcard-media::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:45%;
    background:linear-gradient(0deg, rgba(10,9,8,.92), transparent);
    pointer-events:none;
}

/* El sello VIP, arriba a la izquierda, donde iba la medalla del plan. */
.vip-lujo .pcard-badge--plan,
.vip-franja .pcard-badge--plan,
.bloque-plan--vip .pcard-badge--plan{ display:none; }
.vip-lujo .pcard-media::before,
.vip-franja .pcard-media::before,
.bloque-plan--vip .pcard-media::before{
    content:"VIP";
    position:absolute;
    top:10px;
    left:10px;
    z-index:3;
    padding:4px 9px 3px;
    border-radius:6px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.vip-lujo .pcard-badges,
.vip-franja .pcard-badges,
.bloque-plan--vip .pcard-badges{ top:40px; }

.vip-lujo .pcard-precio,
.vip-franja .pcard-precio,
.bloque-plan--vip .pcard-precio{
    z-index:2;
    background:rgba(10,9,8,.75);
    border:1px solid var(--vip-linea);
    color:var(--vip-oro-claro);
}

.vip-lujo .pcard-body,
.vip-franja .pcard-body,
.bloque-plan--vip .pcard-body{
    background:var(--vip-negro-2);
    border-top:1px solid rgba(233,196,106,.15);
}
.vip-lujo .pcard-nombre,
.vip-franja .pcard-nombre,
.bloque-plan--vip .pcard-nombre{
    font-family:var(--vip-serif);
    font-size:19px;
    font-weight:700;
    font-style:italic;
    letter-spacing:.01em;
    color:#FFF4D0;
}
.vip-lujo .pcard-verificado,
.vip-franja .pcard-verificado,
.bloque-plan--vip .pcard-verificado{ color:var(--vip-oro); }
.vip-lujo .pcard-meta,
.vip-franja .pcard-meta,
.bloque-plan--vip .pcard-meta{ color:rgba(244,241,234,.6); }

.vip-lujo .cargando-mas{ color:var(--vip-oro); }

.vip-pie{
    max-width:460px;
    margin:36px auto 0;
    padding:20px 18px;
    border-top:1px solid var(--vip-linea);
    text-align:center;
    color:rgba(244,241,234,.55);
    font-size:13px;
    line-height:1.55;
}
.vip-pie b{ color:var(--vip-oro-claro); font-weight:600; }

/* =====================================================================
   La franja
   ===================================================================== */
.vip-franja{
    position:relative;
    margin:8px 0 22px;
    padding:18px 0 14px;
    border:1px solid var(--vip-linea);
    border-radius:20px;
    background:
        radial-gradient(500px 200px at 0% 0%, rgba(233,196,106,.16), transparent 70%),
        var(--vip-negro);
    overflow:hidden;
}
.vip-franja::before{
    /* El brillo que cruza el borde de arriba. */
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, #FFF4D0, transparent);
    background-size:50% 100%;
    background-repeat:no-repeat;
    animation:vip-brillo 5s ease-in-out infinite;
}
.vip-franja-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:0 16px;
}
.vip-franja-head h2{
    margin:0;
    font-family:var(--vip-titulo);
    font-size:22px;
    font-weight:700;
    letter-spacing:.12em;
}
.vip-franja-head h2 i{ font-size:16px; margin-right:4px; vertical-align:2px; }
.vip-franja-head a,
.vip-franja-mas{
    color:var(--vip-oro);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.vip-franja-bajada{
    margin:2px 16px 12px;
    font-family:var(--vip-serif);
    font-style:italic;
    font-size:14px;
    color:rgba(244,241,234,.66);
}
.vip-franja-cat{
    margin:8px 16px 8px;
    font-family:var(--vip-titulo);
    font-size:11px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}
.vip-franja-fila{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:2px 16px 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.vip-franja-fila::-webkit-scrollbar{ display:none; }
.vip-franja-item{
    flex:0 0 44%;
    max-width:210px;
    scroll-snap-align:start;
}
.vip-franja-mas{ display:inline-block; margin:6px 16px 0; }
.vip-franja-bloque + .vip-franja-bloque{ margin-top:12px; }

/* =====================================================================
   El perfil de alguien VIP
   ===================================================================== */
/* Borde dorado en degradé: el fondo va en dos capas, la negra hasta el
   borde de adentro y la dorada hasta el de afuera. */
.perfil-page.es-vip .perfil-shell{
    border:1px solid transparent;
    background:
        linear-gradient(var(--vip-negro-2), var(--vip-negro-2)) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(233,196,106,.12);
}

/* El cartel de arriba de todo. */
.perfil-vip-cinta{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:16px 18px 14px;
    background:
        radial-gradient(400px 90px at 50% 0%, rgba(233,196,106,.22), transparent 75%),
        var(--vip-negro) !important;
    border-bottom:1px solid var(--vip-linea);
    text-align:center;
    overflow:hidden;
}
.perfil-vip-cinta::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 35%, rgba(255,244,208,.12) 50%, transparent 65%);
    background-size:250% 100%;
    animation:vip-brillo 7s ease-in-out infinite;
    pointer-events:none;
}
.perfil-vip-cinta .corona{ color:var(--vip-oro); font-size:18px; }
.perfil-vip-cinta b{
    display:block;
    font-family:var(--vip-titulo);
    font-size:15px;
    font-weight:700;
    letter-spacing:.34em;
}
.perfil-vip-cinta small{
    display:block;
    margin-top:2px;
    color:rgba(244,241,234,.62);
    font-size:12px;
}

.perfil-page.es-vip .perfil-volver{
    background:var(--vip-negro-2);
    border-bottom-color:rgba(233,196,106,.12);
}
.perfil-page.es-vip .perfil-volver a:hover{ color:var(--vip-oro); }

.perfil-page.es-vip .perfil-top{
    background:
        radial-gradient(420px 220px at 12% 30%, rgba(233,196,106,.12), transparent 70%),
        rgba(0,0,0,.25);
    border-bottom-color:rgba(233,196,106,.14);
}

/* El retrato con un aro dorado que gira. */
.perfil-page.es-vip .perfil-retrato::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    background:conic-gradient(from 0deg, #9C6F22, #FFF4D0, #E9C46A, #9C6F22, #F8E3A3, #9C6F22);
    animation:vip-giro 8s linear infinite;
    filter:drop-shadow(0 0 14px rgba(233,196,106,.35));
}
.perfil-page.es-vip .perfil-retrato-marco{
    position:relative;
    border:4px solid var(--vip-negro-2);
}
.perfil-page.es-vip .perfil-tilde{
    background:var(--vip-dorado);
    color:#1A1206;
    z-index:2;
}

.perfil-page.es-vip .perfil-title{
    font-family:var(--vip-serif);
    font-style:italic;
    font-weight:700;
    letter-spacing:.01em;
    background:linear-gradient(110deg, #E9C46A 0%, #FFF4D0 40%, #E9C46A 70%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--vip-oro-claro);
}
.perfil-page.es-vip .perfil-title .perfil-punto{ -webkit-text-fill-color:initial; }

.perfil-page.es-vip .perfil-dato i{ color:var(--vip-oro); }


/* La medalla del plan sobra: el cartel de arriba ya dice VIP. */
.perfil-page.es-vip .perfil-plan{ display:none; }



/* =====================================================================
   Retoques finos
   ===================================================================== */

/* El nombre en la tarjeta: 19px cortaba "Catalina" en el celular. */
@media (max-width:480px){
    .vip-lujo .pcard-nombre,
    .vip-franja .pcard-nombre,
    .bloque-plan--vip .pcard-nombre{ font-size:17px; }
}

/* El levante al pasar el mouse, solo donde hay mouse: en el celular el
   toque dejaba la tarjeta levantada. */
@media (hover:none){
    .vip-lujo .pcard:hover,
    .vip-franja .pcard:hover,
    .bloque-plan--vip .pcard:hover{ transform:none; }
}

/* Las categorías sin nadie, apagadas: se ven, pero no invitan. */
.vip-tab.vacia{ opacity:.45; }

/* Que el negro de VIP llegue hasta el pie aunque haya pocas tarjetas. */
.vip-lujo{ min-height:calc(100vh - 80px); }

/* Un resplandor dorado detrás de la ficha: se despega del fondo. */
.perfil-page.es-vip{ position:relative; }
.perfil-page.es-vip::before{
    content:"";
    position:absolute;
    inset:-40px 0 auto;
    height:520px;
    z-index:-1;
    background:radial-gradient(closest-side, rgba(233,196,106,.16), transparent);
    pointer-events:none;
}


/* Tarifas: el precio en dorado claro y una línea de puntos que lleva
   la vista de la duración al precio, como en una carta. */
.perfil-page.es-vip .perfil-tarifas li{
    display:flex;
    align-items:baseline;
    gap:10px;
}
.perfil-page.es-vip .perfil-tarifas li span{
    display:flex;
    flex:1 1 auto;
    align-items:baseline;
    gap:10px;
    color:rgba(244,241,234,.86);
}
.perfil-page.es-vip .perfil-tarifas li span::after{
    content:"";
    flex:1 1 auto;
    min-width:20px;
    border-bottom:1px dotted rgba(233,196,106,.35);
    transform:translateY(-4px);
}
.perfil-page.es-vip .perfil-tarifas li b{
    color:var(--vip-oro-claro);
    font-family:var(--vip-serif);
    font-size:17px;
    white-space:nowrap;
}

/* Playfair trae números "antiguos" (el 2 más bajo que el 1): lindos
   en un título, pero en un precio cuesta leerlos de un vistazo. */
.perfil-page.es-vip .perfil-tarifas li b,
.vip-lujo .pcard-nombre,
.vip-franja .pcard-nombre,
.bloque-plan--vip .pcard-nombre{ font-variant-numeric:lining-nums; }

.perfil-page.es-vip .perfil-chip-soft{
    border-color:var(--vip-linea);
    background:rgba(233,196,106,.06);
    color:rgba(248,227,163,.9);
}

/* En la compu, las tarjetas centradas y de ancho fijo: con tres
   perfiles quedaban pegadas a la izquierda y un hueco a la derecha. */
@media (min-width:768px){
    .vip-lujo .pgrid{
        grid-template-columns:repeat(auto-fit, minmax(230px, 270px));
        justify-content:center;
    }
}

/* =====================================================================
   Perfil VIP · insignias, botones, pestañas y galería
   ===================================================================== */

/* ---- Insignias ----
   Las cuatro con la misma forma y el mismo filo dorado: juntas se leen
   como un sello de garantía y no como cuatro etiquetas sueltas. El
   precio va en oro macizo: es lo que más se busca. */
.perfil-page.es-vip .perfil-opiniones,
.perfil-page.es-vip .perfil-ident-ok,
.perfil-page.es-vip .perfil-fotos-ok,
.perfil-page.es-vip .perfil-precio{
    align-items:center;
    min-height:36px;
    padding:7px 14px;
    border:1px solid transparent;
    border-radius:10px;
    background:
        linear-gradient(180deg, #1E1911, #120F0A) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.55), rgba(156,111,34,.35)) border-box;
    color:#F3E6C4;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.02em;
    box-shadow:inset 0 1px 0 rgba(255,244,208,.06);
}
.perfil-page.es-vip .perfil-opiniones b{ color:#FFF4D0; }
.perfil-page.es-vip .perfil-ident-ok i,
.perfil-page.es-vip .perfil-fotos-ok i,
.perfil-page.es-vip .perfil-opiniones i{ color:var(--vip-oro); }
.perfil-page.es-vip .perfil-estrellas .est-lleno{ color:var(--vip-oro); }

.perfil-page.es-vip .perfil-precio{
    background:var(--vip-dorado);
    border:0;
    box-shadow:0 6px 18px rgba(233,196,106,.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.perfil-page.es-vip .perfil-precio small{
    color:rgba(26,18,6,.7);
    font-weight:700;
    letter-spacing:.12em;
}
.perfil-page.es-vip .perfil-precio b{
    color:#1A1206;
    font-family:var(--vip-serif);
    font-size:17px;
    font-variant-numeric:lining-nums;
}

/* ---- Botones ---- */
.perfil-page.es-vip .perfil-btn{
    min-height:54px;
    border-radius:14px;
    border:1px solid transparent;
    background:
        linear-gradient(180deg, #1E1911, #110E09) padding-box,
        var(--vip-dorado) border-box;
    color:var(--vip-oro-claro);
    font-weight:700;
    letter-spacing:.03em;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.perfil-page.es-vip .perfil-btn i{ color:var(--vip-oro); font-size:17px; }

/* WhatsApp sigue verde —es lo que se reconoce y se toca—, pero un verde
   profundo con filo dorado y un brillo que cruza cada tanto. */
.perfil-page.es-vip .perfil-btn.whatsapp{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg, #1DAA61 0%, #0B6E42 100%) padding-box,
        var(--vip-dorado) border-box;
    color:#fff;
    font-size:16px;
    box-shadow:0 12px 30px rgba(11,110,66,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.perfil-page.es-vip .perfil-btn.whatsapp i{ color:#fff; font-size:20px; }
.perfil-page.es-vip .perfil-btn.whatsapp::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    background-size:250% 100%;
    animation:vip-brillo 4.5s ease-in-out infinite;
    pointer-events:none;
}
.perfil-page.es-vip .perfil-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
}


/* =====================================================================
   Perfil VIP · las letras
   Tres voces y cada una en su lugar:
     Cinzel     rótulos (MIEMBRO VIP, títulos de sección, pestañas)
     Playfair   el nombre y los precios
     Cormorant  lo que escribe la persona: se lee como un libro
   Lo práctico (datos, botones) sigue en la letra del sitio, que es la
   que mejor se lee chica en el celular.
   ===================================================================== */

.perfil-page.es-vip .perfil-title{
    font-size:clamp(34px, 5vw, 46px);
    line-height:1.05;
    margin-bottom:4px;
}

.perfil-page.es-vip .perfil-datos{ gap:6px 16px; margin-top:10px; }
.perfil-page.es-vip .perfil-dato{
    font-size:14.5px;
    letter-spacing:.01em;
}
.perfil-page.es-vip .perfil-dato span{
    color:rgba(244,241,234,.82);
    font-weight:500;
}
.perfil-page.es-vip .perfil-dato i{ font-size:13px; opacity:.9; }

/* Títulos de sección: rótulo espaciado en dorado y un filete que se
   apaga hacia la derecha. */
.perfil-page.es-vip .perfil-section-title,
.perfil-page.es-vip .perfil-block-title{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--vip-titulo);
    font-size:14px;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.perfil-page.es-vip .perfil-section-title::after,
.perfil-page.es-vip .perfil-block-title::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg, rgba(233,196,106,.45), transparent);
}

/* La descripción, en letra de libro: más grande porque Cormorant es
   chica de ojo. A todo el ancho de la ficha, como las tarifas: con un
   tope de renglón quedaba un hueco vacío a la derecha en la compu. */
.perfil-page.es-vip .perfil-text{
    font-family:var(--vip-libro);
    font-size:21px;
    font-weight:500;
    line-height:1.6;
    color:#EFE6D2;
}
@media (max-width:480px){
    .perfil-page.es-vip .perfil-text{ font-size:19px; }
}

/* Tarifas: la duración en la letra del sitio, fina; el precio en
   Playfair. */
.perfil-page.es-vip .perfil-tarifas li{ padding:11px 0; }
.perfil-page.es-vip .perfil-tarifas li span{
    font-size:15px;
    font-weight:500;
    letter-spacing:.01em;
}

/* Etiquetas (modalidad, servicios): más finas y espaciadas. */
.perfil-page.es-vip .perfil-chip-soft{
    padding:8px 14px;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    letter-spacing:.02em;
}

/* La cinta de arriba, un punto más grande en la compu. */
@media (min-width:768px){
    .perfil-vip-cinta b{ font-size:17px; letter-spacing:.4em; }
    .perfil-vip-cinta small{ font-size:12.5px; letter-spacing:.03em; }
}

/* =====================================================================
   Perfil VIP · pestañas
   Una botonera en cápsula: fondo negro con filo dorado, cada pestaña
   con su ícono, y la activa en oro macizo. En el celular el ícono va
   arriba y el nombre abajo: las cuatro entran holgadas sin achicar la
   letra hasta que no se lea.
   ===================================================================== */
.perfil-page.es-vip .perfil-tabs{
    position:relative;
    display:flex;
    gap:4px;
    margin:22px 0 6px;
    padding:5px;
    border:1px solid transparent;
    border-radius:18px;
    background:
        linear-gradient(180deg, #16120C, #0D0B08) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.55), rgba(156,111,34,.25) 50%, rgba(248,227,163,.45)) border-box;
    box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,244,208,.05);
}

.perfil-page.es-vip .perfil-tab-btn{
    position:relative;
    display:flex;
    flex:1 1 0;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:10px 8px;
    border:0;
    border-radius:13px;
    background:transparent;
    color:rgba(244,241,234,.55);
    font-family:var(--vip-titulo);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:color .2s ease, background .25s ease, box-shadow .25s ease, transform .15s ease;
}

/* El ícono de cada una, sin tocar el HTML del perfil: sale del
   data-tab que ya tiene cada botón. */
.perfil-page.es-vip .perfil-tab-btn::before{
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:15px;
    letter-spacing:0;
    color:var(--vip-oro);
    opacity:.75;
    transition:opacity .2s, color .2s;
}
.perfil-page.es-vip .perfil-tab-btn[data-tab="galeria"]::before  { content:"\f302"; }
.perfil-page.es-vip .perfil-tab-btn[data-tab="sobre-mi"]::before { content:"\f007"; }
.perfil-page.es-vip .perfil-tab-btn[data-tab="servicios"]::before{ content:"\f004"; }
.perfil-page.es-vip .perfil-tab-btn[data-tab="resenas"]::before  { content:"\f005"; }

@media (hover:hover){
    .perfil-page.es-vip .perfil-tab-btn:hover{
        color:var(--vip-oro-claro);
        background:rgba(233,196,106,.07);
    }
    .perfil-page.es-vip .perfil-tab-btn:hover::before{ opacity:1; }
}
.perfil-page.es-vip .perfil-tab-btn:active{ transform:scale(.97); }
.perfil-page.es-vip .perfil-tab-btn:focus-visible{
    outline:2px solid var(--vip-oro);
    outline-offset:2px;
}

.perfil-page.es-vip .perfil-tab-btn.active{
    background:var(--vip-dorado);
    color:#1A1206;
    box-shadow:0 8px 22px rgba(233,196,106,.28), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15);
}
.perfil-page.es-vip .perfil-tab-btn.active::before{
    color:#1A1206;
    opacity:1;
}
/* La raya de abajo de la versión común no va: acá la activa ya es
   de oro. */
.perfil-page.es-vip .perfil-tab-btn.active::after{ content:none; }

@media (max-width:560px){
    .perfil-page.es-vip .perfil-tabs{ gap:3px; padding:4px; border-radius:16px; }
    .perfil-page.es-vip .perfil-tab-btn{
        flex-direction:column;
        gap:5px;
        min-height:58px;
        padding:9px 2px 8px;
        border-radius:12px;
        font-size:10px;
        letter-spacing:.08em;
    }
    .perfil-page.es-vip .perfil-tab-btn::before{ font-size:16px; }
}

/* =====================================================================
   Perfil VIP · la galería
   Como una página de revista: la primera foto es la portada, grande, y
   las demás la acompañan. Al pasar el mouse aparece un "ampliar".
   ===================================================================== */
.perfil-page.es-vip .perfil-gallery{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    border-radius:0;
    overflow:visible;
}
.perfil-page.es-vip .perfil-gallery-item{
    border-radius:16px;
    background:var(--vip-negro);
    box-shadow:0 0 0 1px rgba(233,196,106,.2), 0 14px 30px rgba(0,0,0,.45);
    transition:box-shadow .3s ease, transform .3s ease;
    isolation:isolate;
}
/* La portada: dos columnas y dos filas. La foto llena el alto que le
   dan las de al lado en vez de imponer el suyo. */
.perfil-page.es-vip .perfil-gallery-item:first-child{
    grid-column:span 2;
    grid-row:span 2;
}
.perfil-page.es-vip .perfil-gallery-item:first-child img,
.perfil-page.es-vip .perfil-gallery-item:first-child video{
    height:100%;
    aspect-ratio:auto;
}
.perfil-page.es-vip .perfil-gallery-item img,
.perfil-page.es-vip .perfil-gallery-item video{
    transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

/* Viñeta suave abajo y el ícono de ampliar, que aparece al pasar. */
.perfil-page.es-vip .perfil-gallery-item::after{
    content:"\f065";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(0deg, rgba(10,9,8,.45), transparent 45%);
    color:var(--vip-oro-claro);
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:0;
    opacity:1;
    transition:font-size .25s ease, background .3s ease;
    pointer-events:none;
}
@media (hover:hover){
    .perfil-page.es-vip .perfil-gallery-item:hover{
        transform:translateY(-3px);
        box-shadow:0 0 0 1px rgba(248,227,163,.75), 0 20px 40px rgba(0,0,0,.55), 0 0 30px rgba(233,196,106,.18);
    }
    .perfil-page.es-vip .perfil-gallery-item:hover img,
    .perfil-page.es-vip .perfil-gallery-item:hover video{
        transform:scale(1.05);
        filter:brightness(.8);
    }
    .perfil-page.es-vip .perfil-gallery-item:hover::after{
        font-size:22px;
        background:linear-gradient(0deg, rgba(10,9,8,.55), rgba(10,9,8,.15));
    }
}

/* Un rótulo discreto en la foto grande. */
.perfil-page.es-vip .perfil-gallery-item:first-child::before{
    content:"Portada";
    position:absolute;
    left:14px;
    bottom:12px;
    z-index:2;
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
    text-shadow:0 1px 8px rgba(0,0,0,.8);
    pointer-events:none;
}

@media (max-width:560px){
    .perfil-page.es-vip .perfil-gallery{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }
    .perfil-page.es-vip .perfil-gallery-item{ border-radius:12px; }
    /* En el celular la portada va a lo ancho, sola. */
    .perfil-page.es-vip .perfil-gallery-item:first-child{
        grid-column:1 / -1;
        grid-row:auto;
    }
    .perfil-page.es-vip .perfil-gallery-item:first-child img,
    .perfil-page.es-vip .perfil-gallery-item:first-child video{
        aspect-ratio:4 / 5;
        height:auto;
    }
}

/* =====================================================================
   Perfil VIP · el visor
   (la clase la pone assets/js/vip_perfil.js)
   ===================================================================== */
@keyframes vip-aparecer{
    from{ opacity:0; transform:scale(.975); }
    to  { opacity:1; transform:none; }
}

.gallery-viewer.vip-visor{
    flex-direction:column;
    gap:18px;
    background:
        radial-gradient(900px 520px at 50% 45%, rgba(233,196,106,.12), transparent 70%),
        rgba(6,5,4,.97);
}
.gallery-viewer.vip-visor .gallery-inner{ max-width:1000px; }
.gallery-viewer.vip-visor #galleryStage{ height:min(74vh, 860px); }

.gallery-viewer.vip-visor .gallery-media{
    width:auto;
    max-width:100%;
    border-radius:14px;
    background:transparent;
    box-shadow:0 0 0 1px rgba(233,196,106,.45), 0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(233,196,106,.1);
    animation:vip-aparecer .35s ease both;
}

.gallery-viewer.vip-visor .gallery-close,
.gallery-viewer.vip-visor .gallery-prev,
.gallery-viewer.vip-visor .gallery-next{
    width:52px;
    height:52px;
    border:1px solid transparent;
    background:
        linear-gradient(180deg, rgba(30,25,17,.92), rgba(12,10,7,.92)) padding-box,
        var(--vip-dorado) border-box;
    color:var(--vip-oro-claro);
    font-size:28px;
    box-shadow:0 8px 24px rgba(0,0,0,.6);
    transition:transform .15s ease, box-shadow .2s ease;
}
.gallery-viewer.vip-visor .gallery-close{ font-size:26px; }
.gallery-viewer.vip-visor .gallery-prev{ left:-70px; }
.gallery-viewer.vip-visor .gallery-next{ right:-70px; }
.gallery-viewer.vip-visor .gallery-close{ top:-6px; right:-70px; }
.gallery-viewer.vip-visor .gallery-close:hover,
.gallery-viewer.vip-visor .gallery-prev:hover,
.gallery-viewer.vip-visor .gallery-next:hover{
    box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 18px rgba(233,196,106,.35);
}
/* Donde no hay lugar a los costados, vuelven adentro de la foto. */
@media (max-width:1160px){
    .gallery-viewer.vip-visor .gallery-prev{ left:10px; }
    .gallery-viewer.vip-visor .gallery-next{ right:10px; }
    .gallery-viewer.vip-visor .gallery-close{ top:10px; right:10px; }
}

.gallery-viewer.vip-visor .gallery-counter{
    bottom:-38px;
    padding:5px 14px;
    border:1px solid var(--vip-linea);
    border-radius:99px;
    background:rgba(10,9,8,.8);
    color:var(--vip-oro-claro);
    font-family:var(--vip-titulo);
    font-size:12px;
    letter-spacing:.24em;
    font-variant-numeric:lining-nums;
}

/* La tira de miniaturas. */
.vip-miniaturas-visor{
    display:flex;
    gap:8px;
    max-width:min(1000px, 100%);
    margin-top:30px;
    padding:6px 4px;
    overflow-x:auto;
    scrollbar-width:none;
}
.vip-miniaturas-visor::-webkit-scrollbar{ display:none; }
.vip-mini{
    position:relative;
    flex:0 0 56px;
    height:72px;
    padding:0;
    border:1px solid rgba(233,196,106,.2);
    border-radius:9px;
    background:#16120C center / cover no-repeat;
    opacity:.5;
    cursor:pointer;
    transition:opacity .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.vip-mini:hover{ opacity:.85; }
.vip-mini.activa{
    opacity:1;
    border-color:var(--vip-oro);
    transform:translateY(-3px);
    box-shadow:0 0 0 1px var(--vip-oro), 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(233,196,106,.3);
}
.vip-mini.es-video::after{
    content:"\f04b";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:14px;
    color:var(--vip-oro-claro);
    text-shadow:0 1px 6px rgba(0,0,0,.8);
}
@media (max-width:560px){
    .gallery-viewer.vip-visor{ gap:10px; padding:12px; }
    .gallery-viewer.vip-visor #galleryStage{ height:min(66vh, 640px); }
    .vip-miniaturas-visor{ margin-top:34px; }
    .vip-mini{ flex-basis:46px; height:60px; }
}

/* =====================================================================
   Perfil VIP · reseñas
   ===================================================================== */
.perfil-page.es-vip .perfil-review-card{
    position:relative;
    padding:20px 20px 18px 22px;
    border:1px solid transparent;
    border-radius:18px;
    background:
        linear-gradient(180deg, #1A1510, #110E0A) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.4), rgba(156,111,34,.15) 60%) border-box;
    box-shadow:0 14px 32px rgba(0,0,0,.35);
    overflow:hidden;
}
/* Una comilla grande de fondo, apenas visible. */
.perfil-page.es-vip .perfil-review-card::before{
    content:"\201D";
    position:absolute;
    right:16px;
    bottom:-62px;
    font-family:var(--vip-serif);
    font-size:120px;
    line-height:1;
    color:rgba(233,196,106,.1);
    pointer-events:none;
}
.perfil-page.es-vip .perfil-review-name{
    font-family:var(--vip-serif);
    font-size:19px;
    font-style:italic;
    color:#FFF4D0;
}
.perfil-page.es-vip .perfil-review-date{
    padding-top:4px;
    color:rgba(248,227,163,.62);
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.22em;
    font-variant-numeric:lining-nums;
    white-space:nowrap;
}
/* Hasta que el script la reescribe, que el emoji no se vea. */
.perfil-page.es-vip .perfil-review-date:not(.vip-fecha){ visibility:hidden; }
.perfil-page.es-vip .perfil-stars{ color:var(--vip-oro); letter-spacing:3px; }
.perfil-page.es-vip .perfil-review-card .perfil-text{
    font-size:20px;
    font-style:italic;
}
.perfil-page.es-vip .perfil-review-answer{
    border-color:var(--vip-linea);
    background:rgba(233,196,106,.05);
}
.perfil-page.es-vip .perfil-review-answer-title{ color:var(--vip-oro-claro); }

/* ---- Reseñas: encabezado, invitación y formulario ---- */
.perfil-page.es-vip .perfil-reviews-top{ align-items:center; gap:10px; }
.perfil-page.es-vip .perfil-reviews-top .perfil-badge{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border:1px solid var(--vip-linea);
    border-radius:10px;
    background:transparent;
    color:rgba(248,227,163,.85);
    font-family:var(--vip-titulo);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.perfil-page.es-vip .perfil-review-cta,
.perfil-page.es-vip .perfil-review-form,
.perfil-page.es-vip .perfil-review-user{
    border:1px solid transparent;
    border-radius:18px;
    background:
        radial-gradient(420px 140px at 50% 0%, rgba(233,196,106,.1), transparent 70%) padding-box,
        linear-gradient(180deg, #17130D, #0F0D09) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.4), rgba(156,111,34,.15) 60%, rgba(248,227,163,.3)) border-box;
    box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.perfil-page.es-vip .perfil-review-cta{ padding:30px 24px; }
.perfil-page.es-vip .perfil-review-cta h4{
    font-family:var(--vip-serif);
    font-size:26px;
    font-style:italic;
    font-weight:700;
    color:#FFF4D0;
    margin-bottom:12px;
}
.perfil-page.es-vip .perfil-review-cta p{
    color:rgba(244,241,234,.72);
    font-size:15px;
}
.perfil-page.es-vip .perfil-review-cta a{
    color:var(--vip-oro-claro);
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid rgba(233,196,106,.45);
    padding-bottom:1px;
}
.perfil-page.es-vip .perfil-review-cta a:hover{ border-bottom-color:var(--vip-oro); text-decoration:none; }

.perfil-page.es-vip .perfil-review-user{ color:rgba(244,241,234,.66); }
.perfil-page.es-vip .perfil-review-user strong{ color:var(--vip-oro-claro); }

.perfil-page.es-vip .perfil-review-form h5{
    font-family:var(--vip-titulo);
    font-size:14px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.perfil-page.es-vip .perfil-review-form textarea,
.perfil-page.es-vip .perfil-review-form select{
    border:1px solid rgba(233,196,106,.22);
    border-radius:12px;
    background:rgba(0,0,0,.35);
    color:#F3E6C4;
    font-size:15px;
    transition:border-color .2s, box-shadow .2s;
}
.perfil-page.es-vip .perfil-review-form textarea:focus,
.perfil-page.es-vip .perfil-review-form select:focus{
    border-color:var(--vip-oro);
    box-shadow:0 0 0 3px rgba(233,196,106,.15);
}
.perfil-page.es-vip .perfil-review-form button{
    min-height:48px;
    padding:12px 22px;
    border-radius:12px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-weight:700;
    letter-spacing:.04em;
    box-shadow:0 10px 24px rgba(233,196,106,.25), inset 0 1px 0 rgba(255,255,255,.4);
}

/* =====================================================================
   Modo VIP: la pantalla entera
   En /vip y en los perfiles VIP no alcanza con que el contenido sea
   dorado: el menú de arriba, la barra de abajo y el pie también
   cambian, para que se note desde el primer vistazo dónde se está.
   La clase `modo-vip` la pone vipEstilos(true).
   ===================================================================== */
html.modo-vip body{
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(233,196,106,.10), transparent 70%),
        #080706 !important;
}

/* ---- Menú de arriba ----
   El tema del sitio (tema.css) fija los colores del menú con
   !important, así que acá también hace falta para ganarle. */
html.modo-vip .navbar-premium{
    background:rgba(8,7,6,.88) !important;
    border-bottom:1px solid rgba(233,196,106,.28) !important;
    box-shadow:0 10px 40px rgba(0,0,0,.5) !important;
}
html.modo-vip .navbar-premium::after{
    /* Un hilo de brillo que recorre el borde de abajo. */
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, #FFF4D0, transparent);
    background-size:30% 100%;
    background-repeat:no-repeat;
    animation:vip-brillo 6s ease-in-out infinite;
    pointer-events:none;
}
html.modo-vip .menu-link-premium{ color:rgba(243,230,196,.72) !important; }
html.modo-vip .menu-link-premium i{ color:rgba(233,196,106,.8); }
html.modo-vip .menu-link-premium:hover{
    background:rgba(233,196,106,.08) !important;
    color:var(--vip-oro-claro) !important;
}
html.modo-vip .menu-link-premium.active{
    color:var(--vip-oro-claro) !important;
    box-shadow:inset 0 -2px 0 var(--vip-oro) !important;
}

/* VIP, en oro macizo. */
html.modo-vip .menu-link-premium.menu-vip,
html.modo-vip .menu-link-premium.menu-vip.active{
    background:var(--vip-dorado) !important;
    color:#1A1206 !important;
    border-radius:99px !important;
    box-shadow:0 6px 18px rgba(233,196,106,.28), inset 0 1px 0 rgba(255,255,255,.4) !important;
    font-weight:700 !important;
    letter-spacing:.06em;
}
html.modo-vip .menu-link-premium.menu-vip i{ color:#1A1206 !important; }

/* Publicate */
html.modo-vip .navbar-premium .btn-panel{
    background:var(--vip-dorado) !important;
    color:#1A1206 !important;
}

/* ---- Barra de abajo ---- */
html.modo-vip .mobile-subfooter{
    background:rgba(10,9,7,.94) !important;
    border:1px solid rgba(233,196,106,.32) !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,244,208,.06) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
html.modo-vip .mobile-subfooter .subfooter-item i{ color:rgba(233,196,106,.75) !important; }
html.modo-vip .mobile-subfooter .subfooter-item span{ color:rgba(243,230,196,.62) !important; }
html.modo-vip .mobile-subfooter .subfooter-item.active i,
html.modo-vip .mobile-subfooter .subfooter-item.active span,
html.modo-vip .mobile-subfooter .subfooter-item:hover i,
html.modo-vip .mobile-subfooter .subfooter-item:hover span{ color:var(--vip-oro-claro) !important; }

/* ---- Pie ---- */
html.modo-vip .pie-grande{
    background:#070605 !important;
    border-top:1px solid rgba(233,196,106,.2) !important;
}
html.modo-vip .pie-grande a:hover{ color:var(--vip-oro-claro) !important; }

/* El link VIP del menú en todo el sitio: dorado, para que se distinga
   de las secciones comunes. */
.menu-link-premium.menu-vip{ color:#E9C46A !important; }
.menu-link-premium.menu-vip i{ color:#E9C46A !important; }

/* =====================================================================
   Tarjetas VIP · formato póster
   La foto ocupa la tarjeta entera y los datos van encima, como en la
   tapa de una revista. Un marco dorado fino por dentro, a unos
   milímetros del borde, la enmarca como un cuadro.

   Pisa las reglas de tarjeta de más arriba (mismo selector, va
   después). Vale para /vip y para la franja.
   ===================================================================== */
.vip-lujo .pcard,
.vip-franja .pcard,
.bloque-plan--vip .pcard{
    padding:0;
    border:0;
    border-radius:20px;
    background:#0B0A08;
    box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(233,196,106,.35);
    overflow:hidden;
    transform:none;
}
.vip-lujo .pcard-link,
.vip-franja .pcard-link,
.bloque-plan--vip .pcard-link{
    position:relative;
    display:block;
    border-radius:20px;
    overflow:hidden;
    background:transparent;
    color:inherit;
    text-decoration:none;
}

/* La foto: alta y a sangre. */
.vip-lujo .pcard-media,
.vip-franja .pcard-media,
.bloque-plan--vip .pcard-media{
    aspect-ratio:3 / 4.4;
    border-radius:0;
}
.vip-lujo .pcard-img,
.vip-franja .pcard-img,
.bloque-plan--vip .pcard-img{
    transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

/* Degradé largo: los datos se leen sobre cualquier foto. */
.vip-lujo .pcard-media::after,
.vip-franja .pcard-media::after,
.bloque-plan--vip .pcard-media::after{
    height:62%;
    background:linear-gradient(0deg, rgba(8,7,6,.97) 0%, rgba(8,7,6,.78) 32%, rgba(8,7,6,.2) 70%, transparent 100%);
    z-index:1;
}

/* El marco de adentro, como un cuadro. */
.vip-lujo .pcard-link::after,
.vip-franja .pcard-link::after,
.bloque-plan--vip .pcard-link::after{
    content:"";
    position:absolute;
    inset:8px;
    z-index:4;
    border:1px solid rgba(248,227,163,.38);
    border-radius:14px;
    pointer-events:none;
    transition:border-color .35s ease, inset .35s ease;
}

/* El sello: un emblema chico con corona, arriba a la izquierda. */
.vip-lujo .pcard-media::before,
.vip-franja .pcard-media::before,
.bloque-plan--vip .pcard-media::before{
    content:"\f521  VIP";
    top:18px;
    left:18px;
    padding:5px 10px 4px;
    border-radius:99px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-family:'Font Awesome 6 Free', var(--vip-titulo);
    font-weight:900;
    font-size:10.5px;
    letter-spacing:.2em;
    box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
}
.vip-lujo .pcard-badges,
.vip-franja .pcard-badges,
.bloque-plan--vip .pcard-badges{ top:52px; left:18px; }

/* El corazón, en un círculo de vidrio con filo dorado. */
.vip-lujo .pcard-fav,
.vip-franja .pcard-fav,
.bloque-plan--vip .pcard-fav{
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(248,227,163,.45);
    background:rgba(8,7,6,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--vip-oro-claro);
    z-index:5;
}
.vip-lujo .pcard-fav.is-fav,
.vip-franja .pcard-fav.is-fav,
.bloque-plan--vip .pcard-fav.is-fav{ color:#E9C46A; border-color:#E9C46A; }

/* El precio, sin cajita: en serif, arriba de los datos, a la derecha. */
.vip-lujo .pcard-precio,
.vip-franja .pcard-precio,
.bloque-plan--vip .pcard-precio{
    top:auto;
    bottom:auto;
    right:22px;
    left:auto;
    z-index:3;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    color:var(--vip-oro-claro);
    font-family:var(--vip-serif);
    font-size:17px;
    font-weight:700;
    font-variant-numeric:lining-nums;
    text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* Los datos, encima de la foto. */
.vip-lujo .pcard-body,
.vip-franja .pcard-body,
.bloque-plan--vip .pcard-body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    padding:0 22px 22px;
    background:none;
    border:0;
}
.vip-lujo .pcard-titulo,
.vip-franja .pcard-titulo,
.bloque-plan--vip .pcard-titulo{ align-items:flex-end; }
.vip-lujo .pcard-nombre,
.vip-franja .pcard-nombre,
.bloque-plan--vip .pcard-nombre{
    font-size:24px;
    line-height:1.05;
    text-shadow:0 2px 14px rgba(0,0,0,.7);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.vip-lujo .pcard-verificado,
.vip-franja .pcard-verificado,
.bloque-plan--vip .pcard-verificado{ font-size:13px; vertical-align:3px; }
.vip-lujo .pcard-puntaje,
.vip-franja .pcard-puntaje,
.bloque-plan--vip .pcard-puntaje{
    color:var(--vip-oro-claro);
    font-size:12.5px;
}
.vip-lujo .pcard-meta,
.vip-franja .pcard-meta,
.bloque-plan--vip .pcard-meta{
    margin-top:6px;
    padding-top:8px;
    border-top:1px solid rgba(233,196,106,.22);
    color:rgba(243,230,196,.72);
    font-size:12.5px;
    letter-spacing:.02em;
}

/* El precio, abajo a la derecha, en el renglón de la edad y la zona:
   al lado del nombre chocaba con las estrellas y arriba del nombre
   competía con él. Ahí se lee último, que es como se lee un precio. */
.vip-lujo .pcard-precio,
.vip-franja .pcard-precio,
.bloque-plan--vip .pcard-precio{
    left:auto;
    right:22px;
    bottom:22px;
    font-size:15px;
    line-height:1.3;
}
.vip-lujo .pcard-meta,
.vip-franja .pcard-meta,
.bloque-plan--vip .pcard-meta{ padding-right:84px; }

/* Las historias sobre la tarjeta tapaban el nombre: en VIP no van. */
.vip-lujo .pcard-estado,
.vip-franja .pcard-estado,
.bloque-plan--vip .pcard-estado{ display:none; }

/* "Ver perfil", que aparece al pasar el mouse. */
.vip-lujo .pcard-link::before,
.vip-franja .pcard-link::before,
.bloque-plan--vip .pcard-link::before{
    content:"Ver perfil  \2192";
    position:absolute;
    left:50%;
    top:46%;
    z-index:4;
    padding:9px 18px;
    border:1px solid rgba(248,227,163,.7);
    border-radius:99px;
    background:rgba(8,7,6,.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--vip-oro-claro);
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    white-space:nowrap;
    opacity:0;
    transform:translate(-50%, -40%);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
}

@media (hover:hover){
    .vip-lujo .pcard:hover,
    .vip-franja .pcard:hover,
    .bloque-plan--vip .pcard:hover{
        transform:translateY(-4px);
        box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(248,227,163,.8), 0 0 40px rgba(233,196,106,.18);
    }
    .vip-lujo .pcard:hover .pcard-img,
    .vip-franja .pcard:hover .pcard-img,
    .bloque-plan--vip .pcard:hover .pcard-img{
        transform:scale(1.06);
        filter:brightness(.72);
    }
    .vip-lujo .pcard:hover .pcard-link::after,
    .vip-franja .pcard:hover .pcard-link::after,
    .bloque-plan--vip .pcard:hover .pcard-link::after{
        inset:12px;
        border-color:rgba(248,227,163,.85);
    }
    .vip-lujo .pcard:hover .pcard-link::before,
    .vip-franja .pcard:hover .pcard-link::before,
    .bloque-plan--vip .pcard:hover .pcard-link::before{
        opacity:1;
        transform:translate(-50%, -50%);
    }
}

/* En el celular: letra y márgenes un punto más chicos. */
@media (max-width:560px){
    .vip-lujo .pcard,
    .vip-franja .pcard,
    .bloque-plan--vip .pcard,
    .vip-lujo .pcard-link,
    .vip-franja .pcard-link,
    .bloque-plan--vip .pcard-link{ border-radius:16px; }
    .vip-lujo .pcard-link::after,
    .vip-franja .pcard-link::after,
    .bloque-plan--vip .pcard-link::after{ inset:6px; border-radius:11px; }
    .vip-lujo .pcard-body,
    .vip-franja .pcard-body,
    .bloque-plan--vip .pcard-body{ padding:0 14px 15px; }
    .vip-lujo .pcard-nombre,
    .vip-franja .pcard-nombre,
    .bloque-plan--vip .pcard-nombre{ font-size:19px; }
    .vip-lujo .pcard-meta,
    .vip-franja .pcard-meta,
    .bloque-plan--vip .pcard-meta{ font-size:11.5px; padding-top:6px; }
    .vip-lujo .pcard-precio,
    .vip-franja .pcard-precio,
    .bloque-plan--vip .pcard-precio{ right:14px; bottom:15px; font-size:13px; }
    .vip-lujo .pcard-meta,
    .vip-franja .pcard-meta,
    .bloque-plan--vip .pcard-meta{ padding-right:64px; }
    /* Las estrellas abajo del nombre: al lado lo cortaban ("Catali…"). */
    .vip-lujo .pcard-titulo,
    .vip-franja .pcard-titulo,
    .bloque-plan--vip .pcard-titulo{ flex-direction:column; align-items:flex-start; gap:3px; }
    .vip-lujo .pcard-nombre,
    .vip-franja .pcard-nombre,
    .bloque-plan--vip .pcard-nombre{ max-width:100%; }
    .vip-lujo .pcard-media::before,
    .vip-franja .pcard-media::before,
    .bloque-plan--vip .pcard-media::before{ top:13px; left:13px; font-size:9.5px; padding:4px 8px 3px; }
    .vip-lujo .pcard-fav,
    .vip-franja .pcard-fav,
    .bloque-plan--vip .pcard-fav{ top:11px; right:11px; width:32px; height:32px; }
    .vip-lujo .pcard-badges,
    .vip-franja .pcard-badges,
    .bloque-plan--vip .pcard-badges{ top:42px; left:13px; }
}

/* =====================================================================
   Tarjetas VIP · abajo en tres renglones
   1. nombre + verificación + estrellas
   2. edad y zona COMPLETAS (si no entran, bajan de renglón)
   3. un filete, "DESDE" a la izquierda y el precio a la derecha
   El precio vive adentro de la foto en el HTML (card_perfil.php), así
   que se ubica contra el borde de abajo de la tarjeta, y el cuerpo deja
   ese último renglón libre con su padding.
   ===================================================================== */
.vip-lujo .pcard-body,
.vip-franja .pcard-body,
.bloque-plan--vip .pcard-body{
    padding:0 22px 58px;
}
.vip-lujo .pcard-titulo,
.vip-franja .pcard-titulo,
.bloque-plan--vip .pcard-titulo{
    flex-direction:row;
    align-items:center;
    gap:10px;
}
.vip-lujo .pcard-nombre,
.vip-franja .pcard-nombre,
.bloque-plan--vip .pcard-nombre{
    flex:1 1 auto;
    min-width:0;
    font-size:25px;
}
.vip-lujo .pcard-verificado,
.vip-franja .pcard-verificado,
.bloque-plan--vip .pcard-verificado{ color:var(--vip-oro); }

/* Las estrellas en una pastilla. */
.vip-lujo .pcard-puntaje,
.vip-franja .pcard-puntaje,
.bloque-plan--vip .pcard-puntaje{
    flex:0 0 auto;
    gap:4px;
    padding:3px 8px;
    border:1px solid rgba(248,227,163,.4);
    border-radius:99px;
    background:rgba(8,7,6,.55);
    color:var(--vip-oro-claro);
    font-size:11.5px;
    font-weight:700;
}
.vip-lujo .pcard-puntaje i,
.vip-franja .pcard-puntaje i,
.bloque-plan--vip .pcard-puntaje i{ font-size:10px; color:var(--vip-oro); }

/* Edad y zona: enteras. */
.vip-lujo .pcard-meta,
.vip-franja .pcard-meta,
.bloque-plan--vip .pcard-meta{
    margin-top:6px;
    padding:0;
    border:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.4;
    color:rgba(243,230,196,.78);
    font-size:13px;
}

/* El último renglón: filete + DESDE + precio. */
.vip-lujo .pcard-body::after,
.vip-franja .pcard-body::after,
.bloque-plan--vip .pcard-body::after{
    content:"Desde";
    position:absolute;
    left:22px;
    right:22px;
    bottom:18px;
    padding-top:11px;
    border-top:1px solid rgba(233,196,106,.28);
    color:rgba(248,227,163,.6);
    font-family:var(--vip-titulo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.3em;
    text-transform:uppercase;
    line-height:1;
}
.vip-lujo .pcard-precio,
.vip-franja .pcard-precio,
.bloque-plan--vip .pcard-precio{
    left:auto;
    right:22px;
    bottom:15px;
    z-index:4;
    font-size:18px;
    line-height:1;
}

/* Sin precio cargado, que no quede el "DESDE" suelto. */
.vip-lujo .pcard:not(:has(.pcard-precio)) .pcard-body::after,
.vip-franja .pcard:not(:has(.pcard-precio)) .pcard-body::after,
.bloque-plan--vip .pcard:not(:has(.pcard-precio)) .pcard-body::after{ content:none; }
.vip-lujo .pcard:not(:has(.pcard-precio)) .pcard-body,
.vip-franja .pcard:not(:has(.pcard-precio)) .pcard-body,
.bloque-plan--vip .pcard:not(:has(.pcard-precio)) .pcard-body{ padding-bottom:22px; }

/* ---- Celular ---- */
@media (max-width:560px){
    .vip-lujo .pcard-body,
    .vip-franja .pcard-body,
    .bloque-plan--vip .pcard-body{ padding:0 14px 46px; }
    .vip-lujo .pcard-titulo,
    .vip-franja .pcard-titulo,
    .bloque-plan--vip .pcard-titulo{ flex-direction:row; align-items:center; gap:6px; }
    .vip-lujo .pcard-nombre,
    .vip-franja .pcard-nombre,
    .bloque-plan--vip .pcard-nombre{ font-size:19px; }
    .vip-lujo .pcard-puntaje,
    .vip-franja .pcard-puntaje,
    .bloque-plan--vip .pcard-puntaje{ padding:2px 6px; font-size:10.5px; }
    .vip-lujo .pcard-meta,
    .vip-franja .pcard-meta,
    .bloque-plan--vip .pcard-meta{ font-size:11.5px; margin-top:4px; padding-right:0; }
    .vip-lujo .pcard-body::after,
    .vip-franja .pcard-body::after,
    .bloque-plan--vip .pcard-body::after{ left:14px; right:14px; bottom:13px; padding-top:9px; font-size:8.5px; letter-spacing:.24em; }
    .vip-lujo .pcard-precio,
    .vip-franja .pcard-precio,
    .bloque-plan--vip .pcard-precio{ right:14px; bottom:11px; font-size:15px; }
}

/* =====================================================================
   Reservas VIP
   vip_cita.php (cliente) y admin/vip_citas.php (perfil). La
   conversación es la misma para los dos: includes/vip_cita_vista.php.
   ===================================================================== */
.vc-pagina{
    max-width:720px;
    margin:0 auto;
    padding:22px 0 120px;
    color:#EFE6D2;
}
.vc-admin{ background:#080706 !important; min-height:100vh; }
.vc-admin .vc-pagina{ padding-top:6px; }

.vc-volver{ margin:0 0 12px; }
.vc-volver a{
    color:rgba(248,227,163,.75);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}
.vc-volver a:hover{ color:var(--vip-oro-claro); text-decoration:none; }

.vc-tarjeta,
.vc{
    position:relative;
    border:1px solid transparent;
    border-radius:22px;
    background:
        radial-gradient(520px 180px at 50% 0%, rgba(233,196,106,.10), transparent 70%) padding-box,
        linear-gradient(180deg, #15110C, #0C0A07) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.55), rgba(156,111,34,.2) 50%, rgba(248,227,163,.45)) border-box;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.vc-tarjeta{ padding:28px 26px; }

.vc-sobre{
    margin:0 0 4px;
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}
.vc-titulo{
    margin:0 0 8px;
    font-family:var(--vip-serif);
    font-size:clamp(28px, 6vw, 38px);
    font-style:italic;
    font-weight:700;
    line-height:1.1;
    background:linear-gradient(110deg, #E9C46A 0%, #FFF4D0 45%, #E9C46A 80%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--vip-oro-claro);
}
.vc-bajada{ margin:0; color:rgba(244,241,234,.7); font-size:15px; line-height:1.55; }
.vc-bajada a{ color:var(--vip-oro-claro); }

.vc-aviso{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    padding:12px 16px;
    border:1px solid rgba(233,196,106,.35);
    border-radius:14px;
    background:rgba(233,196,106,.08);
    color:var(--vip-oro-claro);
    font-size:14px;
}

/* ---- Botones ---- */
.vc-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 18px;
    border:1px solid transparent;
    border-radius:12px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.vc-btn:hover{ text-decoration:none; filter:brightness(1.07); }
.vc-btn:active{ transform:scale(.98); }
.vc-btn--oro{
    background:var(--vip-dorado);
    color:#1A1206 !important;
    box-shadow:0 10px 24px rgba(233,196,106,.25), inset 0 1px 0 rgba(255,255,255,.45);
}
.vc-btn--linea{
    border-color:rgba(233,196,106,.45);
    background:rgba(8,7,6,.4);
    color:var(--vip-oro-claro) !important;
}
.vc-btn--peligro{
    border-color:rgba(217,107,124,.55);
    background:rgba(217,107,124,.14);
    color:#F2B8C1 !important;
}
.vc-btn--ancho{ width:100%; }
.vc-btn--grande{ min-height:56px; font-size:16px; border-radius:14px; }

/* ---- Sin cuenta ---- */
.vc-entrar{ text-align:center; padding:40px 26px; }
.vc-entrar .vip-escudo{ margin-bottom:14px; }
.vc-entrar-botones{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:22px;
}
.vc-entrar-botones .vc-btn{ min-width:140px; }

/* ---- Avatar ---- */
.vc-avatar{
    flex:0 0 auto;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#16120C center / cover no-repeat;
    box-shadow:0 0 0 2px #0C0A07, 0 0 0 3px rgba(233,196,106,.6);
}
.vc-avatar--grande{ width:78px; height:78px; }
.vc-avatar--inicial{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #2A2217, #15110C);
    color:var(--vip-oro-claro);
    font-family:var(--vip-serif);
    font-size:20px;
    font-weight:700;
}

/* ---- Formulario de reserva ---- */
.vc-res-cab{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(233,196,106,.16);
}
.vc-paso{
    display:flex;
    align-items:center;
    gap:10px;
    margin:24px 0 12px;
}
.vc-paso-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--vip-dorado);
    color:#1A1206;
    font-family:var(--vip-serif);
    font-size:14px;
    font-weight:700;
}
.vc-paso-titulo{
    margin:0;
    font-family:var(--vip-titulo);
    font-size:13px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vc-paso-titulo small{ color:rgba(244,241,234,.45); letter-spacing:.06em; text-transform:none; font-family:inherit; }

/* Fichas: día, duración, lugar. El radio de verdad queda escondido
   pero sigue ahí: el teclado y los lectores de pantalla lo usan. */
.vc-dia-ficha input,
.vc-dur-ficha input,
.vc-lugar-ficha input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}
.vc-dias{
    display:flex;
    gap:8px;
    margin:0 -26px 14px;
    padding:2px 26px 6px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
}
.vc-dias::-webkit-scrollbar{ display:none; }
.vc-dia-ficha{ flex:0 0 auto; margin:0; scroll-snap-align:start; cursor:pointer; }
.vc-dia-ficha span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    width:62px;
    padding:10px 0 9px;
    border:1px solid rgba(233,196,106,.22);
    border-radius:14px;
    background:rgba(8,7,6,.45);
    transition:border-color .2s, background .2s, box-shadow .2s, transform .15s;
}
.vc-dia-ficha small{
    font-family:var(--vip-titulo);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.14em;
    color:rgba(244,241,234,.55);
}
.vc-dia-ficha b{
    font-family:var(--vip-serif);
    font-size:24px;
    line-height:1;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
}
.vc-dia-ficha input:checked + span{
    border-color:transparent;
    background:var(--vip-dorado);
    box-shadow:0 8px 22px rgba(233,196,106,.28);
    transform:translateY(-2px);
}
.vc-dia-ficha input:checked + span small,
.vc-dia-ficha input:checked + span b{ color:#1A1206; }
.vc-dia-ficha input:focus-visible + span{ outline:2px solid var(--vip-oro); outline-offset:2px; }

.vc-duraciones{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
}
.vc-dur-ficha{ margin:0; cursor:pointer; }
.vc-dur-ficha span{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    border:1px solid rgba(233,196,106,.22);
    border-radius:14px;
    background:rgba(8,7,6,.45);
    transition:border-color .2s, box-shadow .2s, background .2s;
}
.vc-dur-ficha b{ font-size:15px; color:#F3E6C4; }
.vc-dur-ficha em{
    font-family:var(--vip-serif);
    font-style:normal;
    font-size:19px;
    font-weight:700;
    color:var(--vip-oro-claro);
    font-variant-numeric:lining-nums;
}
.vc-dur-ficha input:checked + span{
    border-color:var(--vip-oro);
    background:rgba(233,196,106,.1);
    box-shadow:0 0 0 1px var(--vip-oro), 0 10px 24px rgba(0,0,0,.35);
}
.vc-dur-ficha input:focus-visible + span{ outline:2px solid var(--vip-oro); outline-offset:2px; }

.vc-lugares{ display:flex; flex-wrap:wrap; gap:8px; }
.vc-lugar-ficha{ margin:0; cursor:pointer; }
.vc-lugar-ficha span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border:1px solid rgba(233,196,106,.22);
    border-radius:99px;
    background:rgba(8,7,6,.45);
    color:rgba(243,230,196,.8);
    font-size:14px;
    font-weight:600;
    transition:all .2s;
}
.vc-lugar-ficha i{ color:var(--vip-oro); }
.vc-lugar-ficha input:checked + span{
    border-color:var(--vip-oro);
    background:rgba(233,196,106,.12);
    color:#FFF4D0;
}
.vc-lugar-ficha input:focus-visible + span{ outline:2px solid var(--vip-oro); outline-offset:2px; }

.vc-campo{ display:block; margin:14px 0 0; }
.vc-campo > span{
    display:block;
    margin-bottom:6px;
    color:rgba(244,241,234,.65);
    font-size:13px;
    font-weight:600;
}
.vc-campo > span small{ color:rgba(244,241,234,.4); font-weight:500; }
.vc-campo input,
.vc-campo select,
.vc-textarea,
.vc-confirmar textarea{
    width:100%;
    min-height:48px;
    padding:11px 14px;
    border:1px solid rgba(233,196,106,.25);
    border-radius:12px;
    background:rgba(0,0,0,.4);
    color:#F3E6C4;
    font-family:inherit;
    font-size:16px; /* 16 para que el iPhone no haga zoom al tocar */
    color-scheme:dark;
    transition:border-color .2s, box-shadow .2s;
}
.vc-campo select option{ background:#15110C; color:#F3E6C4; }
.vc-campo input:focus,
.vc-campo select:focus,
.vc-textarea:focus,
.vc-confirmar textarea:focus{
    outline:0;
    border-color:var(--vip-oro);
    box-shadow:0 0 0 3px rgba(233,196,106,.15);
}
.vc-textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.vc-reservar > .vc-btn--grande{ margin-top:26px; }
.vc-letra-chica{
    margin:12px 0 0;
    text-align:center;
    color:rgba(244,241,234,.45);
    font-size:12.5px;
}

.vc-error{
    margin:12px 0 0;
    padding:11px 14px;
    border:1px solid rgba(217,107,124,.45);
    border-radius:12px;
    background:rgba(217,107,124,.12);
    color:#F2B8C1;
    font-size:14px;
}

/* ---- La conversación ---- */
.vc{ display:flex; flex-direction:column; overflow:hidden; }
.vc--ocupado{ cursor:progress; }

.vc-cab{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px;
    border-bottom:1px solid rgba(233,196,106,.16);
    background:rgba(8,7,6,.35);
}
.vc-quien{ display:flex; align-items:center; gap:14px; min-width:0; }
.vc-nombre{
    margin:0;
    font-family:var(--vip-serif);
    font-size:22px;
    font-style:italic;
    font-weight:700;
    color:#FFF4D0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vc-rep{ margin:3px 0 0; font-size:12.5px; color:rgba(244,241,234,.6); }
.vc-rep i{ color:var(--vip-oro); margin-right:4px; }
.vc-rep--riesgo{ color:#F2B8C1; }
.vc-rep--riesgo i{ color:#D96B7C; }

.vc-resumen{ text-align:right; flex:0 0 auto; }
.vc-res-cuando{
    margin-top:6px;
    font-size:13px;
    color:rgba(244,241,234,.7);
}
.vc-res-cuando b{
    margin-left:6px;
    font-family:var(--vip-serif);
    font-size:18px;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
}

.vc-estado{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 11px;
    border-radius:99px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}
.vc-estado::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}
.vc-estado--turno { background:rgba(233,196,106,.16); color:var(--vip-oro-claro); box-shadow:inset 0 0 0 1px rgba(233,196,106,.5); }
.vc-estado--turno::before{ animation:vc-latido 1.4s ease-in-out infinite; }
.vc-estado--espera{ background:rgba(244,241,234,.06); color:rgba(244,241,234,.65); }
.vc-estado--ok    { background:rgba(95,191,139,.14); color:#8FD9B0; }
.vc-estado--off   { background:rgba(244,241,234,.05); color:rgba(244,241,234,.45); }
@keyframes vc-latido{ 50%{ opacity:.25; } }

.vc-hilo{
    display:flex;
    flex-direction:column;
    gap:10px;
    height:min(58vh, 560px);
    min-height:340px;
    padding:18px 16px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(233,196,106,.3) transparent;
}

.vc-dia{
    display:flex;
    align-items:center;
    gap:12px;
    margin:6px 0;
    color:rgba(248,227,163,.55);
    font-family:var(--vip-titulo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.26em;
    text-transform:uppercase;
}
.vc-dia::before,
.vc-dia::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(233,196,106,.25), transparent);
}

.vc-fila{ display:flex; }
.vc-mia { justify-content:flex-end; }
.vc-suya{ justify-content:flex-start; }

.vc-burbuja{
    position:relative;
    max-width:78%;
    padding:10px 14px 8px;
    border-radius:16px;
    font-size:15px;
    line-height:1.45;
    overflow-wrap:anywhere;
    animation:vip-aparecer .25s ease both;
}
.vc-suya .vc-burbuja{
    border:1px solid rgba(233,196,106,.16);
    border-bottom-left-radius:5px;
    background:#1B1712;
    color:#EFE6D2;
}
.vc-mia .vc-burbuja{
    border-bottom-right-radius:5px;
    background:linear-gradient(135deg, #3A2E1A, #2A2114);
    box-shadow:inset 0 0 0 1px rgba(233,196,106,.35);
    color:#FFF4D0;
}
.vc-hora{
    display:block;
    margin-top:3px;
    text-align:right;
    font-size:10.5px;
    color:rgba(244,241,234,.42);
    font-variant-numeric:tabular-nums;
}
.vc-hora i{ margin-left:3px; font-size:10px; }
.vc-leido{ color:var(--vip-oro); }

/* La propuesta: una entrada de teatro. */
.vc-propuesta{
    position:relative;
    width:min(340px, 88%);
    padding:14px 16px 10px;
    border:1px solid transparent;
    border-radius:18px;
    background:
        linear-gradient(160deg, #221B12, #120F0A) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 14px 32px rgba(0,0,0,.45);
    animation:vip-aparecer .3s ease both;
}
.vc-propuesta--reemplazada,
.vc-propuesta--cerrada{
    opacity:.5;
    background:
        linear-gradient(160deg, #1A1611, #110E0A) padding-box,
        linear-gradient(135deg, rgba(233,196,106,.3), rgba(233,196,106,.1)) border-box;
    box-shadow:none;
}
.vc-propuesta--reemplazada .vc-prop-cuando{ text-decoration:line-through; text-decoration-color:rgba(233,196,106,.5); }
.vc-propuesta--aceptada{
    background:
        linear-gradient(160deg, #1D2319, #0F130D) padding-box,
        linear-gradient(135deg, #8FD9B0, #3E8A60) border-box;
}
.vc-prop-cab{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px dashed rgba(233,196,106,.3);
}
.vc-prop-rotulo,
.vc-prop-estado{
    font-family:var(--vip-titulo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.vc-prop-rotulo{ color:rgba(248,227,163,.75); }
.vc-prop-estado{ color:rgba(244,241,234,.5); }
.vc-propuesta--aceptada .vc-prop-estado{ color:#8FD9B0; }
.vc-prop-cuando{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}
.vc-prop-dia{
    font-family:var(--vip-serif);
    font-size:19px;
    font-style:italic;
    font-weight:700;
    color:#FFF4D0;
}
.vc-prop-hora{
    font-family:var(--vip-serif);
    font-size:30px;
    font-weight:700;
    line-height:1;
    color:var(--vip-oro-claro);
    font-variant-numeric:lining-nums;
}
.vc-prop-datos{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:8px;
    color:rgba(244,241,234,.72);
    font-size:13px;
}
.vc-prop-datos i{ color:var(--vip-oro); margin-right:4px; }
.vc-prop-nota{
    margin:10px 0 0;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(0,0,0,.3);
    color:#EFE6D2;
    font-size:14px;
    font-style:italic;
}
.vc-prop-botones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vc-prop-botones .vc-btn{ flex:1 1 auto; min-height:40px; font-size:13.5px; }

.vc-sistema{
    align-self:center;
    max-width:92%;
    padding:8px 14px;
    border:1px solid rgba(244,241,234,.1);
    border-radius:99px;
    background:rgba(244,241,234,.04);
    color:rgba(244,241,234,.66);
    font-size:13px;
    text-align:center;
}
.vc-sistema i{ color:rgba(244,241,234,.5); margin-right:3px; }
.vc-sistema--ok{
    border-color:rgba(143,217,176,.4);
    background:rgba(95,191,139,.1);
    color:#CFEFDC;
}
.vc-sistema--ok i{ color:#8FD9B0; }
.vc-sistema b{ color:#FFF4D0; }

/* Proponer otro horario */
.vc-propuesta-form{
    margin:0 14px 12px;
    padding:16px;
    border:1px solid rgba(233,196,106,.35);
    border-radius:16px;
    background:rgba(8,7,6,.6);
    animation:vip-aparecer .25s ease both;
}
.vc-pf-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.vc-pf-cab b{
    font-family:var(--vip-titulo);
    font-size:12px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vc-cerrar{
    border:0;
    background:none;
    color:rgba(244,241,234,.6);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.vc-campos{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 10px;
    margin-bottom:14px;
}
.vc-campo--ancho{ grid-column:1 / -1; }

/* Escribir */
.vc-escribir{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:12px 14px;
    border-top:1px solid rgba(233,196,106,.16);
    background:rgba(8,7,6,.45);
}
.vc-escribir textarea{
    flex:1 1 auto;
    min-height:46px;
    max-height:130px;
    padding:12px 14px;
    border:1px solid rgba(233,196,106,.22);
    border-radius:14px;
    background:rgba(0,0,0,.45);
    color:#F3E6C4;
    font-family:inherit;
    font-size:16px;
    line-height:1.35;
    resize:none;
}
.vc-escribir textarea:focus{ outline:0; border-color:var(--vip-oro); box-shadow:0 0 0 3px rgba(233,196,106,.12); }
.vc-icono,
.vc-enviar{
    flex:0 0 46px;
    height:46px;
    border-radius:14px;
    cursor:pointer;
    transition:filter .2s, transform .15s;
}
.vc-icono{
    border:1px solid rgba(233,196,106,.35);
    background:rgba(8,7,6,.5);
    color:var(--vip-oro);
    font-size:18px;
}
.vc-enviar{
    border:0;
    background:var(--vip-dorado);
    color:#1A1206;
    font-size:16px;
    box-shadow:0 6px 16px rgba(233,196,106,.25);
}
.vc-icono:hover,
.vc-enviar:hover{ filter:brightness(1.1); }
.vc-icono:active,
.vc-enviar:active{ transform:scale(.95); }

.vc-pie{
    display:flex;
    justify-content:center;
    gap:10px;
    padding:10px 14px 14px;
    color:rgba(244,241,234,.3);
    font-size:13px;
}
.vc-link{
    border:0;
    background:none;
    color:rgba(244,241,234,.5);
    font-size:13px;
    text-decoration:underline;
    text-decoration-color:rgba(244,241,234,.25);
    text-underline-offset:3px;
    cursor:pointer;
}
.vc-link:hover{ color:#F2B8C1; }
.vc-cerrada{
    margin:0;
    padding:16px;
    border-top:1px solid rgba(233,196,106,.16);
    text-align:center;
    color:rgba(244,241,234,.5);
    font-size:14px;
}
.vc .vc-error{ margin:0 14px 14px; }

.vc-confirmar{
    margin:0 14px 12px;
    padding:16px;
    border:1px solid rgba(217,107,124,.4);
    border-radius:16px;
    background:rgba(20,10,12,.7);
    animation:vip-aparecer .25s ease both;
}
.vc-conf-titulo{ margin:0 0 4px; font-weight:700; color:#FFF4D0; font-size:16px; }
.vc-conf-texto{ margin:0 0 10px; color:rgba(244,241,234,.65); font-size:14px; }
.vc-conf-botones{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* ---- Listas ---- */
.vc-grupo{
    display:flex;
    align-items:center;
    gap:8px;
    margin:22px 0 10px;
    font-family:var(--vip-titulo);
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vc-grupo span{
    padding:1px 8px;
    border-radius:99px;
    background:rgba(233,196,106,.15);
    font-family:inherit;
    letter-spacing:0;
}
.vc-lista{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.vc-grupo + .vc-lista{ margin-top:0; }
.vc-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border:1px solid rgba(233,196,106,.16);
    border-radius:16px;
    background:rgba(8,7,6,.45);
    color:inherit;
    text-decoration:none;
    transition:border-color .2s, background .2s, transform .15s;
}
.vc-item:hover{
    border-color:rgba(233,196,106,.5);
    background:rgba(233,196,106,.05);
    color:inherit;
    text-decoration:none;
}
.vc-item-datos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.vc-item-datos b{
    font-family:var(--vip-serif);
    font-size:18px;
    font-style:italic;
    color:#FFF4D0;
}
.vc-item-datos small{ color:rgba(244,241,234,.6); font-size:13px; }
.vc-punto{
    position:absolute;
    top:10px;
    right:10px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--vip-oro);
    box-shadow:0 0 10px rgba(233,196,106,.8);
}

/* ---- Celular ---- */
@media (max-width:560px){
    .vc-pagina{ padding:12px 0 110px; }
    .vc-tarjeta{ padding:22px 18px; border-radius:18px; }
    .vc-dias{ margin:0 -18px 14px; padding:2px 18px 6px; }
    .vc-res-cab{ gap:14px; }
    .vc-avatar--grande{ width:62px; height:62px; }
    .vc-cab{ flex-direction:column; align-items:flex-start; padding:14px 16px; }
    .vc-resumen{ text-align:left; width:100%; }
    .vc-res-cuando{ margin-top:6px; }
    .vc-hilo{ height:calc(100vh - 330px); min-height:300px; padding:14px 12px; }
    .vc-burbuja{ max-width:86%; }
    .vc-campos{ grid-template-columns:1fr; }
    .vc-item{ flex-wrap:wrap; }
    .vc-item .vc-estado{ margin-left:62px; }
}

/* El botón de reservar del perfil VIP: oro macizo, al lado de WhatsApp. */
.perfil-page.es-vip .perfil-btn.vip-reservar{
    background:var(--vip-dorado) padding-box;
    border:1px solid transparent;
    color:#1A1206 !important;
    font-size:16px;
    box-shadow:0 12px 30px rgba(233,196,106,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.perfil-page.es-vip .perfil-btn.vip-reservar i{ color:#1A1206; font-size:17px; }
/* En el celular, WhatsApp y Reservar uno abajo del otro y enteros:
   lado a lado no entraban ("WhatsAp…"). */
@media (max-width:560px){
    .perfil-page.es-vip .perfil-actions{ flex-direction:column; flex-wrap:nowrap; gap:10px; }
    .perfil-page.es-vip .perfil-actions .perfil-btn{ flex:1 1 auto; width:100%; }
}

/* El "volver" de las pantallas VIP del panel lleva la clase del panel
   (para que no agregue otra flecha), pero se ve como link dorado. */
.vc-volver a.movil-volver{
    padding:0;
    border:0;
    background:none;
    color:rgba(248,227,163,.75);
    font-size:14px;
}
.vc-volver a.movil-volver:hover{ background:none; color:var(--vip-oro-claro); }

/* =====================================================================
   Reservas VIP · segunda pasada
   ===================================================================== */

/* ---- La hora en fichas ---- */
.vc-hora-grupo{
    margin:14px 0 8px;
    font-family:var(--vip-titulo);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:rgba(244,241,234,.5);
}
.vc-horas{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(68px, 1fr));
    gap:6px;
}
.vc-hora-ficha{ margin:0; cursor:pointer; }
.vc-hora-ficha input{ position:absolute; opacity:0; width:1px; height:1px; }
.vc-hora-ficha span{
    display:block;
    padding:9px 0;
    border:1px solid rgba(233,196,106,.2);
    border-radius:10px;
    background:rgba(8,7,6,.45);
    color:#F3E6C4;
    font-family:var(--vip-serif);
    font-size:16px;
    font-weight:700;
    text-align:center;
    font-variant-numeric:lining-nums;
    transition:all .18s ease;
}
.vc-hora-ficha:hover span{ border-color:rgba(233,196,106,.5); }
.vc-hora-ficha input:checked + span{
    border-color:transparent;
    background:var(--vip-dorado);
    color:#1A1206;
    box-shadow:0 6px 16px rgba(233,196,106,.28);
}
.vc-hora-ficha input:focus-visible + span{ outline:2px solid var(--vip-oro); outline-offset:2px; }

/* ---- ¿Qué hotel? / ¿En qué zona? ---- */
.vc-detalle-lugar{ animation:vip-aparecer .25s ease both; }

/* ---- La barra de resumen, pegada abajo ---- */
.vc-reservar{ padding-bottom:0; }
.vc-barra{
    position:sticky;
    bottom:12px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px -12px 12px;
    padding:12px 12px 12px 18px;
    border:1px solid transparent;
    border-radius:18px;
    background:
        linear-gradient(180deg, rgba(28,23,15,.97), rgba(14,12,8,.97)) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 18px 50px rgba(0,0,0,.65);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.vc-barra-datos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.vc-barra-datos b{
    font-family:var(--vip-serif);
    font-size:18px;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vc-barra-datos small{
    color:rgba(244,241,234,.66);
    font-size:12.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vc-barra .vc-btn{ flex:0 0 auto; min-height:50px; }

/* ---- Confirmada: cuenta regresiva, precio y calendario ---- */
.vc-res-fila{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.vc-falta{
    color:var(--vip-oro-claro);
    font-family:var(--vip-titulo);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.vc-res-cuando span{ white-space:nowrap; }
.vc-res-extra{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
    margin-top:6px;
    font-size:12.5px;
    color:rgba(244,241,234,.65);
}
.vc-res-extra b{ color:var(--vip-oro-claro); font-family:var(--vip-serif); font-size:14px; }
.vc-calendario{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border:1px solid rgba(233,196,106,.45);
    border-radius:99px;
    color:var(--vip-oro-claro) !important;
    font-weight:600;
    text-decoration:none !important;
    transition:background .2s;
}
.vc-calendario:hover{ background:rgba(233,196,106,.1); }

/* ---- Respuestas rápidas ---- */
.vc-rapidas{
    display:flex;
    gap:6px;
    padding:10px 14px 0;
    overflow-x:auto;
    scrollbar-width:none;
    border-top:1px solid rgba(233,196,106,.16);
    background:rgba(8,7,6,.45);
}
.vc-rapidas::-webkit-scrollbar{ display:none; }
.vc-rapida{
    flex:0 0 auto;
    padding:7px 12px;
    border:1px solid rgba(233,196,106,.3);
    border-radius:99px;
    background:rgba(233,196,106,.05);
    color:rgba(248,227,163,.9);
    font-family:inherit;
    font-size:13px;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s, border-color .2s;
}
.vc-rapida:hover{ background:rgba(233,196,106,.14); border-color:var(--vip-oro); }
.vc-rapidas + .vc-escribir{ border-top:0; }

@media (max-width:560px){
    .vc-barra{ margin:18px -8px 10px; bottom:84px; padding:10px 10px 10px 14px; gap:10px; }
    .vc-barra-datos b{ font-size:16px; }
    .vc-barra .vc-btn{ min-height:46px; padding:10px 14px; font-size:14px; }
    .vc-barra .vc-btn i{ display:none; }
    .vc-res-fila, .vc-res-extra{ justify-content:flex-start; }
    .vc-horas{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   Panel del miembro VIP (admin/vip_panel.php)
   ===================================================================== */
.vp{
    max-width:980px;
    margin:0 auto;
    padding:6px 0 110px;
    color:#EFE6D2;
}

.vp-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:28px 30px;
    border:1px solid transparent;
    border-radius:24px;
    background:
        radial-gradient(600px 220px at 15% 0%, rgba(233,196,106,.16), transparent 70%) padding-box,
        linear-gradient(160deg, #1A150E, #0C0A07) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    overflow:hidden;
}
.vp-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 35%, rgba(255,244,208,.07) 50%, transparent 65%);
    background-size:250% 100%;
    animation:vip-brillo 8s ease-in-out infinite;
    pointer-events:none;
}
.vp-hero-perfil{ display:flex; align-items:center; gap:22px; min-width:0; }
.vp-foto{
    flex:0 0 auto;
    width:96px;
    height:96px;
    border-radius:50%;
    background:#16120C center / cover no-repeat;
    box-shadow:0 0 0 3px #0C0A07, 0 0 0 5px #E9C46A, 0 12px 30px rgba(0,0,0,.5);
}
.vp-nombre{
    margin:2px 0 8px;
    font-family:var(--vip-serif);
    font-size:clamp(30px, 5vw, 42px);
    font-style:italic;
    font-weight:700;
    line-height:1.05;
    background:linear-gradient(110deg, #E9C46A 0%, #FFF4D0 45%, #E9C46A 80%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.vp-estado{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:5px 12px;
    border-radius:99px;
    font-size:12.5px;
    font-weight:700;
}
.vp-estado span{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.vp-estado--ok{ background:rgba(95,191,139,.14); color:#8FD9B0; }
.vp-estado--ok span{ animation:vp-pulso 2s infinite; }
.vp-estado--off{ background:rgba(240,163,94,.14); color:#F0A35E; }
@keyframes vp-pulso{
    0%  { box-shadow:0 0 0 0 rgba(143,217,176,.55); }
    70% { box-shadow:0 0 0 8px rgba(143,217,176,0); }
    100%{ box-shadow:0 0 0 0 rgba(143,217,176,0); }
}

.vp-hero-anillo{ position:relative; flex:0 0 auto; width:132px; text-align:center; }
.vp-anillo{ width:120px; height:120px; display:block; margin:0 auto; }
.vp-anillo-centro{
    position:absolute;
    top:0; left:0; right:0;
    height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.vp-anillo-centro b{
    font-family:var(--vip-serif);
    font-size:36px;
    line-height:1;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
}
.vp-anillo-centro small{
    font-family:var(--vip-titulo);
    font-size:10px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}
.vp-anillo-pie{ margin:8px 0 0; font-size:12px; color:rgba(244,241,234,.55); }

.vp-alerta{
    display:flex;
    align-items:center;
    gap:14px;
    margin:16px 0 0;
    padding:16px 18px;
    border:1px solid rgba(240,163,94,.45);
    border-radius:16px;
    background:rgba(240,163,94,.08);
}
.vp-alerta > i{ color:#F0A35E; font-size:22px; }
.vp-alerta div{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.vp-alerta b{ color:#FFF4D0; }
.vp-alerta span{ color:rgba(244,241,234,.7); font-size:14px; }
.vp-alerta--suave{ border-color:rgba(233,196,106,.35); background:rgba(233,196,106,.06); }
.vp-alerta--suave > i{ color:var(--vip-oro); }

.vp-seccion{
    margin:28px 0 12px;
    font-family:var(--vip-titulo);
    font-size:12px;
    font-weight:700;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vp-caja .vp-seccion{ margin:0; }

.vp-numeros{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:14px;
}
.vp-num{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:150px;
    padding:18px 20px;
    border:1px solid rgba(233,196,106,.2);
    border-radius:18px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
    overflow:hidden;
}
.vp-num-rotulo{ color:rgba(244,241,234,.6); font-size:13px; font-weight:600; }
.vp-num-rotulo i{ color:var(--vip-oro); margin-right:4px; }
.vp-num-valor{
    font-family:var(--vip-serif);
    font-size:44px;
    font-weight:700;
    line-height:1.05;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
}
.vp-var{ font-size:13px; font-weight:700; }
.vp-var small{ color:rgba(244,241,234,.45); font-weight:500; margin-left:4px; }
.vp-var.sube{ color:#8FD9B0; }
.vp-var.baja{ color:#F0A35E; }
.vp-num-nota{ color:rgba(244,241,234,.55); font-size:13px; }
.vp-curva{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:56px;
    opacity:.9;
}

.vp-dos{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:14px;
    margin-top:28px;
}
.vp-caja{
    padding:20px;
    border:1px solid rgba(233,196,106,.2);
    border-radius:18px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
}
.vp-caja-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.vp-caja-cab a{ color:var(--vip-oro-claro); font-size:13px; font-weight:600; text-decoration:none; }

.vp-responder{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    padding:12px 14px;
    border-radius:14px;
    background:var(--vip-dorado);
    color:#1A1206 !important;
    font-weight:700;
    text-decoration:none !important;
    box-shadow:0 10px 24px rgba(233,196,106,.25);
}
.vp-responder i{ margin-left:auto; }
.vp-responder-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:28px;
    border-radius:50%;
    background:#1A1206;
    color:#FFF4D0;
    font-family:var(--vip-serif);
}

.vp-reserva{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 4px;
    border-top:1px solid rgba(233,196,106,.12);
    color:inherit !important;
    text-decoration:none !important;
}
.vp-reserva:first-of-type{ border-top:0; }
.vp-reserva:hover .vp-reserva-datos b{ color:var(--vip-oro-claro); }
.vp-reserva-fecha{
    flex:0 0 52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:6px 0;
    border:1px solid rgba(233,196,106,.35);
    border-radius:12px;
}
.vp-reserva-fecha small{
    font-family:var(--vip-titulo);
    font-size:9.5px;
    letter-spacing:.14em;
    color:rgba(248,227,163,.7);
}
.vp-reserva-fecha b{ font-family:var(--vip-serif); font-size:22px; line-height:1; color:#FFF4D0; }
.vp-reserva-datos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.vp-reserva-datos b{ color:#F3E6C4; font-size:15px; transition:color .2s; }
.vp-reserva-datos small{ color:rgba(244,241,234,.55); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-falta{
    flex:0 0 auto;
    font-family:var(--vip-titulo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vp-vacio{ margin:4px 0 0; color:rgba(244,241,234,.5); font-size:14px; }

.vp-accesos{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:14px;
}
.vp-accesos a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid rgba(233,196,106,.18);
    border-radius:12px;
    background:rgba(8,7,6,.4);
    color:#F3E6C4 !important;
    font-size:13.5px;
    font-weight:600;
    text-decoration:none !important;
    transition:border-color .2s, background .2s;
}
.vp-accesos a:hover{ border-color:var(--vip-oro); background:rgba(233,196,106,.06); }
.vp-accesos i{ width:18px; color:var(--vip-oro); text-align:center; }
.vp-nota{ margin:14px 0 0; color:rgba(244,241,234,.6); font-size:13px; }
.vp-nota i{ color:var(--vip-oro); margin-right:4px; }

@media (max-width:900px){
    .vp-numeros{ grid-template-columns:1fr 1fr; }
    .vp-numeros .vp-num:first-child{ grid-column:1 / -1; }
    .vp-dos{ grid-template-columns:1fr; }
}
@media (max-width:560px){
    .vp-hero{ flex-direction:column; align-items:flex-start; padding:22px 20px; }
    .vp-hero-perfil{ gap:16px; padding-right:96px; }
    .vp-foto{ width:72px; height:72px; }
    .vp-hero-anillo{ position:absolute; top:18px; right:14px; width:92px; }
    .vp-anillo{ width:84px; height:84px; }
    .vp-anillo-centro{ height:84px; }
    .vp-anillo-centro b{ font-size:26px; }
    .vp-anillo-pie{ display:none; }
    .vp-num{ min-height:130px; padding:16px; }
    .vp-num-valor{ font-size:36px; }
    .vp-alerta{ flex-wrap:wrap; }
    .vp-alerta .vc-btn{ width:100%; }
}

/* =====================================================================
   Tablero VIP del equipo (admin/vip.php)
   ===================================================================== */
.vipa .content-header{ padding-bottom:6px; }
.vipa-cabeza{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.vipa-titulo{
    margin:0;
    font-family:var(--vip-titulo);
    font-size:40px;
    font-weight:700;
    letter-spacing:.14em;
    background:linear-gradient(110deg, #9C6F22 0%, #E9C46A 30%, #FFF4D0 45%, #E9C46A 60%, #9C6F22 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.vipa-titulo i{ font-size:28px; vertical-align:4px; }
.vipa-estado{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px;
    border-radius:99px;
    font-size:13px;
    font-weight:700;
    text-decoration:none !important;
}
.vipa-estado span{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.vipa-estado--on { background:rgba(95,191,139,.14); color:#8FD9B0 !important; }
.vipa-estado--on span{ animation:vp-pulso 2s infinite; }
.vipa-estado--off{ background:rgba(240,163,94,.14); color:#F0A35E !important; }

.vipa-kpis{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}
.vipa-kpi{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 18px;
    border:1px solid rgba(233,196,106,.2);
    border-radius:16px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
    color:inherit !important;
    text-decoration:none !important;
    transition:border-color .2s, transform .15s;
}
.vipa-kpi:hover{ border-color:rgba(233,196,106,.6); transform:translateY(-2px); }
.vipa-kpi span{
    font-family:var(--vip-titulo);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}
.vipa-kpi b{
    font-family:var(--vip-serif);
    font-size:38px;
    line-height:1.1;
    color:#FFF4D0;
    font-variant-numeric:lining-nums;
}
.vipa-kpi small{ color:rgba(244,241,234,.55); font-size:12.5px; }
.vipa-kpi--alerta{ border-color:rgba(233,196,106,.7); box-shadow:0 0 0 1px rgba(233,196,106,.3), 0 10px 30px rgba(233,196,106,.12); }
.vipa-kpi--alerta b{ color:var(--vip-oro); }
.vipa-kpi--aviso b{ color:#F0A35E; }

.vipa-tabs{
    display:flex;
    gap:4px;
    width:max-content;
    max-width:100%;
    margin:6px 0 16px;
    padding:4px;
    border:1px solid var(--vip-linea);
    border-radius:99px;
    background:rgba(0,0,0,.35);
    overflow-x:auto;
}
.vipa-tabs a{
    flex:0 0 auto;
    padding:8px 16px;
    border-radius:99px;
    color:rgba(243,230,196,.72) !important;
    font-size:14px;
    font-weight:600;
    text-decoration:none !important;
}
.vipa-tabs a:hover{ color:var(--vip-oro-claro) !important; }
.vipa-tabs a.activa{
    background:var(--vip-dorado);
    color:#1A1206 !important;
    box-shadow:0 6px 18px rgba(233,196,106,.25);
}
.vipa-tabs a span{
    display:inline-block;
    min-width:20px;
    margin-left:4px;
    padding:0 6px;
    border-radius:99px;
    background:rgba(233,196,106,.2);
    font-size:12px;
    text-align:center;
}
.vipa-tabs a.activa span{ background:rgba(26,18,6,.2); }

.vc-admin .vipa-caja{
    border:1px solid rgba(233,196,106,.2);
    border-radius:18px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
    color:#EFE6D2;
}
.vc-admin .vipa-caja h3,
.vc-admin .vipa-caja .h6{
    font-family:var(--vip-titulo);
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vc-admin .vipa-fila{ border-bottom-color:rgba(233,196,106,.12); }
.vc-admin .vipa-mini{ border-radius:10px; box-shadow:0 0 0 1px rgba(233,196,106,.35); }
.vipa-nombre{
    font-family:var(--vip-serif);
    font-size:18px;
    font-style:italic;
    color:#FFF4D0;
}
.vipa-ok{ color:#8FD9B0; }
.vipa-no{ color:#F0A35E; }
.vipa-barra{
    width:min(220px, 100%);
    height:4px;
    margin-top:8px;
    border-radius:99px;
    background:rgba(233,196,106,.14);
    overflow:hidden;
}
.vipa-barra span{ display:block; height:100%; border-radius:99px; background:var(--vip-dorado); }
.vipa-barra--corta span{ background:#F0A35E; }
.vc-admin .vipa-fila small.vipa-barra-txt{ margin-top:3px; font-size:11.5px; }
.vipa-cifras{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    min-width:110px;
    color:rgba(244,241,234,.55);
    font-size:12.5px;
}
.vipa-cifras b{ font-family:var(--vip-serif); font-size:17px; color:#FFF4D0; margin-right:3px; }
.vc-admin .btn-outline-danger{ border-color:rgba(217,107,124,.5); color:#F2B8C1; }
.vc-admin .btn-warning{ background:var(--vip-dorado); border:0; color:#1A1206; font-weight:700; }
.vc-admin .form-control{ background:rgba(0,0,0,.4); border-color:rgba(233,196,106,.25); color:#F3E6C4; }

@media (max-width:900px){
    .vipa-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
    .vipa-titulo{ font-size:32px; }
    .vipa-kpi b{ font-size:30px; }
    .vipa-cifras{ display:none; }
}

/* El panel fija el tamaño de los h1 del encabezado: acá manda VIP. */
.vipa .content-header h1.vipa-titulo{ font-size:44px !important; line-height:1.1; }
.vipa-cifras b, .vipa-kpi b{ font-variant-numeric:lining-nums; }
@media (max-width:560px){ .vipa .content-header h1.vipa-titulo{ font-size:32px !important; } }

/* ---- Revisión de una postulación: lado a lado ---- */
.vipa-rev-nombre{
    margin:0 0 6px;
    font-family:var(--vip-serif);
    font-size:32px;
    font-style:italic;
    font-weight:700;
    color:#FFF4D0;
}
.vipa-rev-nombre span{ font-style:normal; font-size:24px; color:rgba(244,241,234,.6); }
.vipa-codigo--oro{
    display:inline-block;
    margin-top:4px;
    padding:8px 14px;
    border-radius:12px;
    background:#FFF;
    color:#1A1206;
    box-shadow:0 0 0 2px #E9C46A, 0 10px 24px rgba(0,0,0,.4);
}
.vipa-comparar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
}
.vipa-comparar > .vipa-caja{ margin-bottom:16px; }
.vipa-comparar .vipa-grilla{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
.vipa-cuenta{
    margin-left:6px;
    padding:1px 8px;
    border-radius:99px;
    background:rgba(233,196,106,.15);
    font-family:inherit;
    letter-spacing:0;
    text-transform:none;
}
.vc-admin .vipa-foto{ box-shadow:0 0 0 1px rgba(233,196,106,.3); }
.vc-admin .vipa-foto small{ background:rgba(10,9,8,.85); }
.vc-admin .vipa-foto .nueva{ background:var(--vip-dorado); color:#1A1206; }
@media (max-width:900px){
    .vipa-comparar{ grid-template-columns:1fr; }
}

/* ---- El plan VIP en el panel del miembro ---- */
.vp-plan{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin-top:16px;
    padding:18px 20px;
    border:1px solid rgba(233,196,106,.25);
    border-radius:18px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
}
.vp-plan--sin{
    border-color:transparent;
    background:
        radial-gradient(420px 120px at 0% 0%, rgba(233,196,106,.14), transparent 70%) padding-box,
        linear-gradient(180deg, #1A150E, #0D0B08) padding-box,
        var(--vip-dorado) border-box;
}
.vp-plan-datos{ display:flex; flex-direction:column; gap:3px; }
.vp-plan-datos .vc-sobre{ margin:0; }
.vp-plan-nombre{
    font-family:var(--vip-serif);
    font-size:22px;
    font-style:italic;
    color:#FFF4D0;
}
.vp-plan-datos span{ color:rgba(244,241,234,.62); font-size:13.5px; }
.vp-plan-opciones{ display:flex; gap:10px; flex-wrap:wrap; }
.vp-plan-opcion{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:112px;
    padding:10px 16px;
    border:1px solid rgba(233,196,106,.4);
    border-radius:14px;
    background:rgba(8,7,6,.5);
    color:inherit !important;
    text-decoration:none !important;
    transition:border-color .2s, transform .15s, box-shadow .2s;
}
.vp-plan-opcion:hover{ border-color:var(--vip-oro); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.vp-plan-opcion small{
    font-family:var(--vip-titulo);
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(248,227,163,.7);
}
.vp-plan-opcion b{ font-family:var(--vip-serif); font-size:22px; color:#FFF4D0; font-variant-numeric:lining-nums; }
.vp-plan-opcion em{
    margin-top:4px;
    padding:3px 12px;
    border-radius:99px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-style:normal;
    font-size:12px;
    font-weight:700;
}
@media (max-width:560px){
    .vp-plan-opciones{ width:100%; }
    .vp-plan-opcion{ flex:1 1 0; }
}

/* ---- Disponible ahora, en el panel VIP ---- */
.vp-disp{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:16px;
    padding:16px 20px;
    border:1px solid rgba(233,196,106,.2);
    border-radius:18px;
    background:linear-gradient(180deg, #15110C, #0D0B08);
    transition:border-color .3s, box-shadow .3s;
}
.vp-disp.si{
    border-color:rgba(143,217,176,.5);
    box-shadow:0 0 0 1px rgba(143,217,176,.15), 0 10px 30px rgba(95,191,139,.08);
}
.vp-disp > div{ display:flex; flex-direction:column; gap:2px; }
.vp-disp b{ font-family:var(--vip-serif); font-size:20px; font-style:italic; color:#FFF4D0; }
.vp-disp.si b{ color:#CFEFDC; }
.vp-disp span{ color:rgba(244,241,234,.6); font-size:13.5px; }
.vp-disp-siempre{
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0 0;
    color:rgba(244,241,234,.55);
    font-size:12.5px;
    font-weight:500;
    cursor:pointer;
}
.vp-disp-siempre input{ accent-color:#E9C46A; }
.vp-sw{
    position:relative;
    flex:0 0 auto;
    width:62px;
    height:34px;
    border:1px solid rgba(233,196,106,.45);
    border-radius:99px;
    background:rgba(8,7,6,.6);
    cursor:pointer;
    transition:background .25s, border-color .25s;
}
.vp-sw span{
    position:absolute;
    top:3px;
    left:3px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg, #F8E3A3, #B8872E);
    box-shadow:0 2px 8px rgba(0,0,0,.5);
    transition:transform .25s cubic-bezier(.3,.7,.3,1);
}
.vp-sw.on{ background:linear-gradient(135deg, #1DAA61, #0B6E42); border-color:#8FD9B0; }
.vp-sw.on span{ transform:translateX(28px); background:#fff; }
.vp-sw:disabled{ opacity:.7; }
.vp-caja .vp-seccion + .vp-accesos{ margin-top:12px; }
.vp-accesos + .vp-seccion{ margin-top:22px !important; }

/* =====================================================================
   Todo el panel de un miembro VIP (body.panel-vip)
   El panel común ya es oscuro con acentos ámbar y se arma con variables
   (panel.css). Para un miembro se redefinen esas variables —negro más
   cálido, dorado de verdad— y se pisan solo las piezas que no usan
   variables. Así cada pantalla del panel pasa a VIP sin tocarla.
   ===================================================================== */
body.panel-vip{
    --tinta-900:#080706;
    --tinta-800:#0E0C09;
    --tinta-700:#15110C;
    --tinta-600:#1C1710;
    --tinta-500:#262015;
    --ambar:#E9C46A;
    --ambar-claro:#F8E3A3;
    --ambar-oscuro:#B8872E;
    --texto:#F3E6C4;
    --texto-2:#B9AE95;
    --texto-3:#7A705C;
    --linea:rgba(233,196,106,.12);
    --linea-ambar:rgba(233,196,106,.38);
    /* Algunas pantallas usan estos nombres (con un gris azulado de
       respaldo): sin definirlos, sus cajas quedaban azules en VIP. */
    --fondo:#0E0C09;
    --fondo-2:#15110C;
    --fondo-3:#1C1710;
    background:#080706 !important;
}
body.panel-vip .wrapper,
body.panel-vip .content-wrapper{
    background:
        radial-gradient(1100px 500px at 50% -180px, rgba(233,196,106,.08), transparent 70%),
        #080706 !important;
}

/* La barra de arriba: negra, con un filo dorado y la corona al lado
   del logo, para que se sepa dónde se está desde la primera línea. */
body.panel-vip .main-header{
    background:rgba(8,7,6,.94) !important;
    border-bottom:1px solid rgba(233,196,106,.28) !important;
}
body.panel-vip .main-header .navbar-nav:first-child::after,
body.panel-vip .main-header .brand-link::after{
    content:"VIP";
    margin-left:8px;
    padding:2px 8px;
    border-radius:99px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-family:var(--vip-titulo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.2em;
    align-self:center;
}

/* Títulos de cada pantalla, en la letra de VIP. */
body.panel-vip .content-header h1,
body.panel-vip .movil-cab h1{
    font-family:var(--vip-serif);
    font-style:italic;
    font-weight:700;
    background:linear-gradient(110deg, #E9C46A 0%, #FFF4D0 45%, #E9C46A 80%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Tarjetas y cajas con filo dorado. */
body.panel-vip .card,
body.panel-vip .small-box,
body.panel-vip .info-box{
    background:linear-gradient(180deg, #15110C, #0D0B08) !important;
    border:1px solid rgba(233,196,106,.2) !important;
    border-radius:16px !important;
    box-shadow:0 14px 34px rgba(0,0,0,.4) !important;
}
body.panel-vip .card-header{
    border-bottom-color:rgba(233,196,106,.14) !important;
    background:transparent !important;
}
body.panel-vip .card-title,
body.panel-vip .card-header b{
    font-family:var(--vip-titulo);
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}

/* Botones: el principal, en oro macizo. */
body.panel-vip .btn-primary,
body.panel-vip .btn-success,
body.panel-vip .btn-accent,
body.panel-vip .btn-warning{
    background:var(--vip-dorado) !important;
    border:0 !important;
    color:#1A1206 !important;
    font-weight:700 !important;
    box-shadow:0 8px 20px rgba(233,196,106,.22), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
body.panel-vip .btn-outline-light,
body.panel-vip .btn-outline-secondary,
body.panel-vip .btn-secondary{
    border-color:rgba(233,196,106,.45) !important;
    background:transparent !important;
    color:var(--vip-oro-claro) !important;
}
body.panel-vip a{ color:var(--vip-oro-claro); }
body.panel-vip a.btn-primary, body.panel-vip a.btn-warning{ color:#1A1206 !important; }

/* Campos. */
body.panel-vip .form-control,
body.panel-vip .custom-select,
body.panel-vip select,
body.panel-vip textarea{
    background:rgba(0,0,0,.4) !important;
    border-color:rgba(233,196,106,.25) !important;
    color:#F3E6C4 !important;
    color-scheme:dark;
}
body.panel-vip .form-control:focus{
    border-color:#E9C46A !important;
    box-shadow:0 0 0 3px rgba(233,196,106,.15) !important;
}

/* Avisos. */
body.panel-vip .alert-success{ background:rgba(95,191,139,.1) !important; border-color:rgba(143,217,176,.35) !important; color:#CFEFDC !important; }
body.panel-vip .alert-info,
body.panel-vip .alert-warning{ background:rgba(233,196,106,.08) !important; border-color:rgba(233,196,106,.35) !important; color:#F3E6C4 !important; }

/* Las fotos y videos del panel, con marco dorado. */
body.panel-vip .media-item,
body.panel-vip .grilla-fotos > *{
    border-radius:14px;
    box-shadow:0 0 0 1px rgba(233,196,106,.25);
}

/* La flecha de volver. */
body.panel-vip .movil-volver{
    border-color:rgba(233,196,106,.35) !important;
    color:var(--vip-oro-claro) !important;
}

/* En el celular: el estado en un renglón y el nombre sin pelearse con
   el anillo. */
@media (max-width:560px){
    .vp-hero-perfil{ padding-right:84px; align-items:flex-start; }
    .vp-hero .vc-sobre{ letter-spacing:.22em; }
    .vp-estado{ white-space:nowrap; font-size:11.5px; padding:4px 10px; }
    .vp-hero-anillo{ top:16px; right:10px; width:80px; }
    .vp-anillo{ width:76px; height:76px; }
    .vp-anillo-centro{ height:76px; }
    .vp-anillo-centro b{ font-size:24px; }
    .vp-anillo-centro small{ font-size:8.5px; }
}

/* Piezas del panel con el gris azulado escrito a mano (sin variable):
   audio, dúos, historias, verificación de fotos y los avisos emergentes.
   En VIP pasan al negro cálido con filo dorado. */
body.panel-vip .aud-grabar,
body.panel-vip .aud-soltar,
body.panel-vip .aud-actual,
body.panel-vip .duo-modal-caja,
body.panel-vip .duo-switch,
body.panel-vip .duo-intro,
body.panel-vip .hist-vieja button,
body.panel-vip .ver-paso,
body.panel-vip .ver-soltar,
body.panel-vip .cartel-codigo,
body.panel-vip .swal2-popup{
    background:#15110C !important;
    border-color:rgba(233,196,106,.22) !important;
}
body.panel-vip .swal2-title{ font-family:var(--vip-serif); font-style:italic; color:#FFF4D0 !important; }
body.panel-vip .swal2-confirm{ background:var(--vip-dorado) !important; color:#1A1206 !important; }

/* =====================================================================
   VIP en los listados comunes
   ---------------------------------------------------------------------
   · En el bloque "VIP" de arriba (.bloque-plan--vip) la tarjeta es un
     póster, igual que en /vip: ahí son todas VIP y miden lo mismo.
   · Si una VIP cae mezclada con tarjetas comunes (el buscador, por
     ejemplo), NO cambia de forma ni de tamaño: solo se viste. Así la
     grilla nunca se desacomoda.
   · Las tarjetas comunes no reciben ninguna regla de acá.
   ===================================================================== */
.pcard.pcard--vip{
    border:1px solid transparent;
    background:
        linear-gradient(var(--card, #16161E), var(--card, #16161E)) padding-box,
        var(--vip-dorado) border-box;
    box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(233,196,106,.1);
}
.pcard.pcard--vip .pcard-badge--plan{ display:none; }
.pcard.pcard--vip .pcard-media{ position:relative; }
.pcard.pcard--vip .pcard-media::before{
    content:"\f521  VIP";
    position:absolute;
    top:8px;
    left:8px;
    z-index:3;
    padding:4px 9px 3px;
    border-radius:99px;
    background:var(--vip-dorado);
    color:#1A1206;
    font-family:'Font Awesome 6 Free', var(--vip-titulo);
    font-weight:900;
    font-size:10px;
    letter-spacing:.18em;
    box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.pcard.pcard--vip .pcard-badges{ top:36px; }
.pcard.pcard--vip .pcard-nombre{
    font-family:var(--vip-serif);
    font-style:italic;
    color:#FFF4D0;
}
.pcard.pcard--vip .pcard-verificado{ color:var(--vip-oro); }

/* El título del bloque VIP. */
.bloque-plan--vip{
    margin-bottom:26px;
    padding:18px 16px 16px;
    border:1px solid transparent;
    border-radius:22px;
    background:
        radial-gradient(500px 180px at 0% 0%, rgba(233,196,106,.14), transparent 70%) padding-box,
        linear-gradient(180deg, #110E0A, #0A0907) padding-box,
        linear-gradient(135deg, rgba(248,227,163,.55), rgba(156,111,34,.2) 50%, rgba(248,227,163,.45)) border-box;
}
.bloque-plan--vip .bloque-plan-titulo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 14px;
    font-family:var(--vip-titulo);
    font-size:22px;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--vip-oro);
}
.bloque-plan--vip .bloque-plan-titulo i{ margin-right:6px; }
.bloque-plan--vip .bloque-plan-titulo a{
    font-family:inherit;
    font-size:11px;
    letter-spacing:.18em;
    color:var(--vip-oro-claro);
    text-decoration:none;
}

/* La franja en el celular: con el formato póster, al 44 % no entraba el
   nombre. Más ancha, y se ve la punta de la siguiente para invitar a
   deslizar. */
@media (max-width:560px){
    .vip-franja-item{ flex:0 0 64%; max-width:none; }
}

/* El título del bloque VIP: corona y palabra juntas. */
.bloque-plan--vip .bloque-plan-titulo{ justify-content:flex-start; }

/* En el celular, las estrellas abajo del nombre en todas las tarjetas
   póster: al lado, el nombre se cortaba ("Cat…"). */
@media (max-width:560px){
    .vip-lujo .pcard-titulo,
    .vip-franja .pcard-titulo,
    .bloque-plan--vip .pcard-titulo{ flex-direction:column; align-items:flex-start; gap:4px; }
    .vip-lujo .pcard-body,
    .vip-franja .pcard-body,
    .bloque-plan--vip .pcard-body{ padding-bottom:46px; }
}

/* =====================================================================
   Mis fotos, para un miembro VIP (parche a admin/multimedia.php)
   ===================================================================== */
.vip-fotos-aviso{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid rgba(233,196,106,.35);
    border-radius:16px;
    background:linear-gradient(180deg, #17130D, #0F0D09);
}
.vip-fotos-aviso > i{ color:var(--vip-oro); font-size:20px; }
.vip-fotos-aviso div{ display:flex; flex-direction:column; gap:2px; }
.vip-fotos-aviso b{ color:#FFF4D0; font-family:var(--vip-serif); font-style:italic; font-size:17px; }
.vip-fotos-aviso span{ color:rgba(244,241,234,.62); font-size:13px; }
.vip-fotos-aviso--espera{ border-color:rgba(240,163,94,.5); }
.vip-fotos-aviso--espera > i{ color:#F0A35E; }

.media-chip.media-chip--vip,
.media-chip.media-chip--vip-espera{
    left:auto;
    right:7px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.media-chip.media-chip--vip{
    background:var(--vip-dorado);
    color:#1A1206;
}
.media-chip.media-chip--vip-espera{
    background:rgba(20,14,6,.9);
    color:#F0A35E;
    box-shadow:inset 0 0 0 1px rgba(240,163,94,.6);
}

/* =====================================================================
   El adelanto VIP de los listados: UNA sola fila.
   El servidor manda hasta 5, mezcladas al azar; acá se muestran las que
   entran en una fila según el ancho y las demás se esconden.
   ===================================================================== */
.bloque-plan--vip{ position:relative; }
.bloque-plan--vip .pgrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.bloque-plan--vip .pgrid > :nth-child(n+3){ display:none; }

@media (min-width:700px){
    .bloque-plan--vip .pgrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .bloque-plan--vip .pgrid > :nth-child(3){ display:block; }
}
@media (min-width:900px){
    .bloque-plan--vip .pgrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .bloque-plan--vip .pgrid > :nth-child(4){ display:block; }
}
@media (min-width:1100px){
    .bloque-plan--vip .pgrid{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
    .bloque-plan--vip .pgrid > :nth-child(5){ display:block; }
}

/* "Ver todo VIP", arriba a la derecha del bloque. */
.bloque-vip-todo{
    position:absolute;
    top:22px;
    right:18px;
    font-family:var(--vip-titulo);
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--vip-oro-claro) !important;
    text-decoration:none !important;
}
.bloque-vip-todo:hover{ color:#FFF4D0 !important; }

/* En el adelanto de los listados las columnas son angostas en casi
   todos los anchos: las estrellas van siempre abajo del nombre. */
.bloque-plan--vip .pcard-titulo{ flex-direction:column; align-items:flex-start; gap:4px; }
.bloque-plan--vip .pcard-nombre{ max-width:100%; }

/* ---- Invitar: la lista de candidatos ---- */
.vipa-buscar{ position:relative; margin:4px 0 6px; }
.vipa-buscar i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--vip-oro);
    pointer-events:none;
}
.vipa-buscar input{ padding-left:40px !important; min-height:46px; }
.vipa-grupo{
    display:flex;
    align-items:center;
    gap:8px;
    margin:20px 0 6px;
    font-family:var(--vip-titulo);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--vip-oro-claro);
}
.vipa-grupo span{
    padding:1px 8px;
    border-radius:99px;
    background:rgba(233,196,106,.15);
    letter-spacing:0;
}
.vipa-cand small{ display:block; }
.vipa-sello{
    display:inline-block;
    margin-left:6px;
    padding:1px 8px;
    border-radius:99px;
    background:rgba(244,241,234,.08);
    color:rgba(244,241,234,.7);
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.vipa-sello--ok{ background:rgba(95,191,139,.14); color:#8FD9B0; }
.vipa-sello--vip{ background:var(--vip-dorado); color:#1A1206; }

/* ---- Cuatro sellos y "Quiero ser VIP" ---- */
.vip-garantias--4{ grid-template-columns:repeat(4, 1fr); max-width:700px; }
@media (max-width:640px){
    .vip-garantias--4{ grid-template-columns:repeat(2, 1fr); max-width:360px; }
}
.vip-quiero{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding:10px 22px;
    border-radius:99px;
    border:1px solid var(--vip-linea);
    color:var(--vip-oro-claro) !important;
    font-weight:700;
    font-size:14px;
    letter-spacing:.04em;
    text-decoration:none !important;
    transition:background .2s, border-color .2s;
}
.vip-quiero:hover{ background:rgba(233,196,106,.10); border-color:var(--vip-oro); }

/* ---- Revisión: la lista de calidad ---- */
.vipa-criterio{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:9px 12px;
    margin-bottom:6px;
    border:1px solid rgba(244,241,234,.08);
    border-radius:10px;
    cursor:pointer;
    font-weight:500;
}
.vipa-criterio input{ margin-top:4px; accent-color:#E9C46A; width:16px; height:16px; flex:none; }
.vipa-criterio:has(input:checked){ border-color:rgba(95,191,139,.45); background:rgba(95,191,139,.06); }
.vip-req--ojo li i{ color:var(--vip-oro); }
#vipaAprobar:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.4); }

/* ---- Días de regalo ---- */
.vip-regalo{
    display:flex; gap:14px; align-items:center;
    margin:0 0 14px; padding:16px 18px; border-radius:16px;
    background:linear-gradient(160deg, #241B0C, #0F0D0A);
    border:1px solid rgba(233,196,106,.55);
    box-shadow:0 0 30px rgba(233,196,106,.10);
}
.vip-regalo > i{ font-size:26px; color:var(--vip-oro); }
.vip-regalo b{ display:block; font-family:var(--vip-serif); font-size:18px; color:var(--vip-oro-claro); }
.vip-regalo span{ font-size:13px; color:rgba(244,241,234,.72); }

.vipa-acciones{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; }
.vipa-invitar{ display:flex; align-items:center; gap:6px; }
.vipa-dias{
    display:flex; align-items:center; gap:5px; margin:0;
    padding:0 8px; height:31px; border-radius:8px;
    border:1px solid var(--vip-linea); background:rgba(233,196,106,.05);
    color:var(--vip-oro); font-size:12px;
}
.vipa-dias input{
    width:48px; border:0; background:transparent; color:#F4F1EA; font-weight:700;
    font-size:13px; outline:none; -moz-appearance:textfield;
}
.vipa-dias input::-webkit-outer-spin-button, .vipa-dias input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.vipa-wa{ background:#1F8F55 !important; color:#fff !important; border:0; }
.vipa-tg{ background:#229ED9 !important; color:#fff !important; border:0; }
.vipa-sincuenta{
    margin:6px 0 14px; padding:14px 16px; border-radius:14px;
    border:1px dashed var(--vip-linea); background:rgba(233,196,106,.03);
}
.vipa-sincuenta b{ display:block; color:var(--vip-oro-claro); margin-bottom:2px; }
.vipa-sincuenta small{ display:block; color:rgba(244,241,234,.6); margin-bottom:10px; }
.vipa-sincuenta-fila{ display:flex; flex-wrap:wrap; gap:6px; }
.vipa-sincuenta-fila input{ width:130px; }