/* =====================================================================
   Grilla y card de perfil.
   Usa las variables de tema declaradas en includes/front_header.php
   (--accent, --violet, --card, --card-border, --muted...).
   ===================================================================== */

.pgrid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:16px;
}

@media (max-width:575.98px){
    .pgrid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }
}

.grilla-vacia{
    grid-column:1 / -1;
    padding:44px 20px;
    text-align:center;
    color:var(--muted, #d7d1df);
    background:var(--card, rgba(255,255,255,.06));
    border:1px dashed var(--card-border, rgba(255,255,255,.12));
    border-radius:20px;
}

/* ---------- Card ---------- */

.pcard{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:var(--card, rgba(255,255,255,.06));
    border:1px solid var(--card-border, rgba(255,255,255,.12));
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pcard:hover{
    transform:translateY(-4px);
    border-color:rgba(255,60,120,.45);
    box-shadow:0 18px 40px rgba(0,0,0,.42);
}

/* Borde dorado para las destacadas, como el listado de Pasion. */
.pcard--destacada{
    border-color:rgba(255,196,84,.55);
    box-shadow:0 0 0 1px rgba(255,196,84,.18);
}

.pcard-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.pcard-media{
    position:relative;
    aspect-ratio:3 / 4;
    overflow:hidden;
    background:linear-gradient(135deg, #241230, #150c1e);
}

.pcard-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.pcard:hover .pcard-img{
    transform:scale(1.06);
}

/* Degradado inferior para que el texto sobre la foto se lea siempre. */
.pcard-media::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:55%;
    background:linear-gradient(to top, rgba(8,5,14,.92), transparent);
    pointer-events:none;
}

/* ---------- Badges ---------- */

.pcard-badges{
    position:absolute;
    top:8px;
    left:8px;
    right:46px;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.pcard-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.01em;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    background:rgba(8,5,14,.62);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    white-space:nowrap;
}

/* Duo: atiende junto a otro perfil. Violeta y no ambar, para que no
   compita con el badge de plan que esta al lado. */
.pcard-badge--duo{
    background:rgba(138,92,246,.9);
    border-color:transparent;
    color:#F6F1FF;
}
.pcard-badge--duo i{ font-size:9.5px; }

/* El escalon de arriba de todo, para cuando hay un plan por encima del
   que antes era el mejor. */
.pcard-badge--plan.plan-elite{
    background:linear-gradient(135deg,#f9d7ff,#b06ef5 55%,#6d3bf5);
    border-color:transparent;
    color:#1a0730;
}

.pcard-badge--plan.plan-diamante{
    background:linear-gradient(135deg,#6ee7ff,#3b82f6);
    border-color:transparent;
    color:#04121f;
}

.pcard-badge--plan.plan-platino{
    background:linear-gradient(135deg,#e7e9ef,#a9b0c2);
    border-color:transparent;
    color:#1b1b22;
}

.pcard-badge--plan.plan-plus{
    background:linear-gradient(135deg,#ffd066,#f5a524);
    border-color:transparent;
    color:#2b1c02;
}

.pcard-badge--online{
    background:rgba(24,194,122,.92);
    border-color:transparent;
    color:#04241a;
}

.pcard-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#04241a;
    animation:pcardPulse 1.6s ease-in-out infinite;
}

@keyframes pcardPulse{
    0%,100%{ opacity:1; }
    50%    { opacity:.35; }
}

.pcard-badge--precio{
    background:rgba(8,5,14,.78);
}

/* ---------- Favorito ---------- */

.pcard-fav{
    position:absolute;
    top:8px;
    right:8px;
    z-index:3;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(8,5,14,.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:14px;
    cursor:pointer;
    transition:.18s ease;
}

.pcard-fav:hover{
    background:rgba(255,60,120,.85);
    border-color:transparent;
    transform:scale(1.08);
}

.pcard-fav.is-fav{
    color:#ff4c84;
}

.pcard-fav.is-fav:hover{
    color:#fff;
}

/* ---------- Estado (lo que Limbo muestra como story) ---------- */

.pcard-estado{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:12px;
    background:rgba(8,5,14,.66);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.12);
    font-size:11px;
    color:#fff;
}

.pcard-estado-icon{
    color:#ffd066;
    flex:0 0 auto;
    font-size:10px;
}

.pcard-estado-texto{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pcard-estado-hace{
    flex:0 0 auto;
    opacity:.7;
    font-size:10px;
}

/* ---------- Pie ---------- */

.pcard-body{
    padding:10px 11px 12px;
}

.pcard-titulo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.pcard-nombre{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pcard-verificado{
    color:#60a5fa;
    font-size:12px;
    margin-left:3px;
}

.pcard-puntaje{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:12px;
    font-weight:700;
    color:#ffd066;
}

.pcard-meta{
    margin:3px 0 0;
    font-size:12px;
    color:var(--muted-2, rgba(255,255,255,.68));
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =====================================================================
   Carrusel de estados (arriba del listado, al estilo Limbo)
   ===================================================================== */

.estados-strip{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:4px 2px 12px;
    scrollbar-width:none;
}

.estados-strip::-webkit-scrollbar{
    display:none;
}

.estado-item{
    display:block;
    flex:0 0 auto;
    width:72px;
    text-align:center;
    text-decoration:none;
    color:inherit;
}

.estado-aro{
    /* Es un <span>: sin display:block el ancho y el alto no aplican y el
       aro sale como una raya. */
    display:block;
    width:66px;
    height:66px;
    border-radius:50%;
    padding:2.5px;
    background:linear-gradient(135deg, var(--accent, #ff3c78), var(--violet, #7c4dff));
    margin:0 auto 6px;
}

.estado-aro img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:2.5px solid var(--bg1, #0f0a16);
    display:block;
}

.estado-nombre{
    display:block;
    font-size:11px;
    color:var(--muted, #d7d1df);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =====================================================================
   Chips de filtro rapido
   ===================================================================== */

.chips-bar{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 10px;
    scrollbar-width:none;

    /* El degrade del borde derecho avisa que la fila sigue. Sin esto el
       ultimo chip queda cortado a la mitad y parece un error, no algo
       que se puede arrastrar. */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
            mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    padding-right:34px;
}

.chips-bar::-webkit-scrollbar{
    display:none;
}

/* En pantalla grande no hay dedo para arrastrar: entran en dos filas y
   no se corta ninguno. */
@media (min-width:992px){
    .chips-bar{
        flex-wrap:wrap;
        overflow-x:visible;
        padding-right:0;
        -webkit-mask-image:none;
                mask-image:none;
    }
}

.chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    color:var(--muted, #d7d1df);
    background:var(--card, rgba(255,255,255,.06));
    border:1px solid var(--card-border, rgba(255,255,255,.12));
    transition:.18s ease;
    white-space:nowrap;
}

.chip:hover{
    color:#fff;
    border-color:rgba(255,60,120,.5);
}

.chip.is-active{
    color:#fff;
    background:linear-gradient(135deg, var(--accent, #ff3c78), var(--accent-2, #ff6aa2));
    border-color:transparent;
    box-shadow:0 8px 20px rgba(255,60,120,.28);
}

.chip .chip-x{
    font-size:10px;
    opacity:.8;
}

/* =====================================================================
   Toast de feedback (favoritos)
   ===================================================================== */

.pcard-toast{
    position:fixed;
    left:50%;
    bottom:26px;
    transform:translateX(-50%) translateY(14px);
    z-index:2000;
    padding:11px 20px;
    border-radius:999px;
    background:rgba(8,5,14,.94);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    font-size:13px;
    font-weight:600;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
}

.pcard-toast.is-visible{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* =====================================================================
   Ajustes de forma del tema "Ámbar sobre tinta".
   Va al final para pisar las reglas de arriba sin duplicar el archivo.
   ===================================================================== */

.pcard{
    background:var(--tinta-700);
    border:1px solid var(--linea);
    border-radius:var(--radio);
}

.pcard:hover{
    transform:translateY(-3px);
    border-color:var(--linea-ambar);
    box-shadow:var(--sombra);
}

.pcard--destacada{
    border-color:var(--linea-ambar);
    box-shadow:none;
}

/* Sin filete arriba: el destacado ya se ve en el titulo del bloque
   (GOLD, PLATINO) y en el badge de la foto. Tres marcas para lo mismo
   era ruido. Queda solo el borde ambar de la card. */

.pcard-media{
    background:var(--tinta-600);
}

.pcard-media::after{
    background:linear-gradient(to top, rgba(11,11,15,.95), rgba(11,11,15,.35) 45%, transparent);
}

/* Badges rectos y opacos: nada de pastillas con blur. La sombra es
   para la foto clara: sin ella el badge se apoya sobre blanco y pierde
   el borde. */
.pcard-badge{
    box-shadow:0 1px 6px rgba(0,0,0,.35);
    border-radius:4px;
    background:rgba(11,11,15,.82);
    border:1px solid var(--linea);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    font-family:var(--fuente-ui);
    font-size:10.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--texto);
}

.pcard-badge--plan.plan-diamante,
.pcard-badge--plan.plan-platino,
.pcard-badge--plan.plan-plus{
    background:var(--ambar);
    color:var(--tinta-900);
    border-color:transparent;
}

/* Los tres planes comparten el ámbar; se distinguen por el ícono y el peso. */
.pcard-badge--plan.plan-platino{ background:var(--ambar-claro); }

/* El primer escalón (GOLD) tenía el fondo transparente: sobre una foto
   clara —un parabrisas, una pared blanca— el ámbar sobre ámbar
   desaparecía y la card quedaba sin marca de plan justo cuando el plan
   es lo que se está pagando. Misma base opaca que el resto de los
   badges, y el ámbar queda en el texto y el borde. */
.pcard-badge--plan.plan-plus{
    background:rgba(11,11,15,.82);
    color:var(--ambar);
    border-color:var(--linea-ambar);
}

/* Sobre una foto clara el fondo transparente lo hacia desaparecer:
   va la misma base opaca que el resto de los badges y el verde queda
   en el texto y el borde. */
.pcard-badge--online{
    background:rgba(11,11,15,.82);
    border-color:rgba(95,191,139,.55);
    color:#7FD8A6;
}

.pcard-dot{ background:var(--verde); }

.pcard-badge--precio{
    background:rgba(11,11,15,.82);
    color:var(--texto);
    font-variant-numeric:tabular-nums;
}

.pcard-fav{
    border-radius:6px;
    background:rgba(11,11,15,.72);
    border:1px solid var(--linea);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:var(--texto-2);
}

.pcard-fav:hover{
    background:rgba(232,180,92,.16);
    border-color:var(--linea-ambar);
    color:var(--ambar);
    transform:none;
}

.pcard-fav.is-fav{ color:var(--rosa); }
.pcard-fav.is-fav:hover{ color:var(--rosa); }

.pcard-estado{
    border-radius:6px;
    background:rgba(11,11,15,.8);
    border:1px solid var(--linea);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.pcard-estado-icon{ color:var(--ambar); }

/* El nombre en serif es la firma de la card. */
.pcard-nombre{
    font-family:var(--fuente-ui);
    font-weight:700;
    font-size:14.5px;
    letter-spacing:-.01em;
    color:var(--texto);
}

.pcard-verificado{ color:var(--ambar); }
.pcard-puntaje{ color:var(--ambar); font-variant-numeric:tabular-nums; }

.pcard-body{
    padding:11px 12px 13px;
    border-top:1px solid var(--linea);
}

.pcard-meta{
    font-size:11.5px;
    color:var(--texto-3);
    letter-spacing:.01em;
}

/* Aro del estado: ámbar sólido, sin degradé rosa/violeta. */
.estado-aro{
    background:var(--ambar);
}

.estado-aro img{ border-color:var(--tinta-900); }
.estado-nombre{ color:var(--texto-2); font-size:10.5px; }

/* Chips rectos */
.chip{
    border-radius:6px;
    background:transparent;
    border:1px solid var(--linea);
    color:var(--texto-2);
    font-size:12.5px;
    font-weight:500;
}

.chip:hover{
    color:var(--ambar);
    border-color:var(--linea-ambar);
    background:rgba(232,180,92,.06);
}

.chip.is-active{
    background:var(--ambar);
    color:var(--tinta-900);
    border-color:transparent;
    box-shadow:none;
    font-weight:600;
}

.grilla-vacia{
    border-radius:var(--radio);
    background:var(--tinta-700);
    border:1px solid var(--linea);
    color:var(--texto-2);
}

.pcard-toast{
    border-radius:6px;
    background:var(--tinta-600);
    border:1px solid var(--linea-ambar);
    color:var(--texto);
}

/* =====================================================================
   Precio: vive fuera de .pcard-badges para anclarse a la foto y no
   competir con el badge de plan en pantalla chica.
   ===================================================================== */

.pcard-precio{
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    padding:4px 9px;
    border-radius:4px;
    background:rgba(11,11,15,.86);
    border:1px solid var(--linea);
    color:var(--texto);
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* Si hay estado abajo, el precio sube para no taparlo. */
.pcard-media:has(.pcard-estado) .pcard-precio{
    bottom:42px;
}

@media (max-width:575.98px){

    /* Apilados los badges en columna no se encinan entre si. */
    .pcard-badges{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        right:auto;
        max-width:calc(100% - 42px);
    }

    .pcard-badge{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .pcard-precio{
        right:6px;
        bottom:6px;
        padding:3px 7px;
        font-size:10.5px;
    }

    .pcard-media:has(.pcard-estado) .pcard-precio{ bottom:34px; }
}

/* =====================================================================
   Bloques por categoría de plan.
   Los Gold no se mezclan con los Platino: cada categoría es su propia
   sección, con un encabezado que la separa.
   ===================================================================== */

.bloque-plan{
    margin-bottom:30px;
}

.bloque-plan:last-child{ margin-bottom:0; }

.bloque-plan-titulo{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    padding-bottom:9px;
    border-bottom:1px solid var(--linea);
    font-family:var(--fuente-ui);
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ambar);
}

.bloque-plan-titulo i{
    font-size:11px;
    opacity:.85;
}

/* El bloque sin plan no lleva corona ni ámbar: es el fondo del listado. */
.bloque-plan-titulo--simple{
    color:var(--texto-3);
    border-bottom-color:var(--linea);
}

/* Cada categoría se distingue por el color de la regla, no por el fondo:
   así no compite con las fotos. */
.bloque-plan.plan-diamante .bloque-plan-titulo{ border-bottom-color:var(--linea-ambar); }
.bloque-plan.plan-platino  .bloque-plan-titulo{ border-bottom-color:rgba(245,212,143,.35); color:var(--ambar-claro); }
.bloque-plan.plan-plus     .bloque-plan-titulo{ border-bottom-color:rgba(232,180,92,.20); }

@media (max-width:575.98px){
    .bloque-plan{ margin-bottom:22px; }
    .bloque-plan-titulo{ font-size:11px; margin-bottom:10px; }
}

/* =====================================================================
   Visor de estados a pantalla completa
   ===================================================================== */

.estado-item{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.visor{
    position:fixed;
    inset:0;
    /* Por encima de la barra inferior fija, que va en 10050. */
    z-index:10100;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(6,6,9,.94);
}

.visor.abierto{ display:flex; }

/* La foto manda: la caja se ajusta a ella en vez de ser un rectangulo
   fijo con la foto flotando adentro. Antes, con una foto apaisada,
   quedaba una franja chica en un mar de negro. */
/* Ocupa la pantalla entera. Antes era una cajita de 460px con el sitio
   asomando alrededor, y una foto vertical quedaba diminuta en el medio.
   Las apps de historias son todas asi: negro de punta a punta y la foto
   sola. */
.visor-caja{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100vw;
    height:100dvh;
    background:#07070B;
    border-radius:0;
    overflow:hidden;
}

/* Barras de progreso */
.visor-barras{
    display:flex;
    gap:3px;
    padding:10px 10px 0;
}

/* ---------------------------------------------------------------
   Todo lo que va ENCIMA de la foto

   Con degradado en vez de fondo solido: se lee igual pero no le
   roba lugar a la foto, que es a lo que se entro.
   --------------------------------------------------------------- */
.visor-sobre{
    position:absolute;
    left:0;
    right:0;
    z-index:3;
    pointer-events:none;
}

/* Los enlaces y botones de adentro si se tocan. */
.visor-sobre a,
.visor-sobre button{ pointer-events:auto; }

.visor-sobre--arriba{
    top:0;
    background:linear-gradient(180deg, rgba(6,6,10,.80) 0%, rgba(6,6,10,.45) 55%, transparent 100%);
    padding-bottom:26px;
}

.visor-sobre--abajo{
    bottom:0;
    background:linear-gradient(0deg, rgba(6,6,10,.88) 0%, rgba(6,6,10,.55) 55%, transparent 100%);
    padding:40px 14px 14px;
}

/* La frase, sobre la foto */
.visor-sobre--abajo .visor-frase{
    color:#F4F1EA;
    font-size:15px;
    line-height:1.4;
    margin:0 0 12px;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.visor-sobre--abajo .visor-frase:empty{ display:none; }

/* Contacto abajo de todo: una historia sirve para que le escriban. */
.visor-acciones{
    display:flex;
    gap:9px;
}

.visor-acciones > *{ flex:1 1 0; }

.visor-wpp,
.visor-sobre--abajo .visor-ir{
    align-items:center;
    border-radius:10px;
    display:flex;
    font-size:14.5px;
    font-weight:700;
    gap:8px;
    justify-content:center;
    padding:12px 14px;
    text-decoration:none;
}

.visor-wpp{
    background:#25D366;
    color:#07301A;
}

.visor-wpp:hover{ background:#3BE07A; color:#07301A; }

.visor-sobre--abajo .visor-ir{
    background:rgba(244,241,234,.14);
    border:1px solid rgba(244,241,234,.22);
    color:#F4F1EA;
    backdrop-filter:blur(6px);
}

.visor-sobre--abajo .visor-ir:hover{
    background:rgba(244,241,234,.22);
    color:#F4F1EA;
}

.visor-barra{
    flex:1 1 0;
    height:2.5px;
    border-radius:99px;
    background:rgba(244,241,234,.22);
    overflow:hidden;
}

.visor-barra i{
    display:block;
    height:100%;
    width:0;
    background:var(--ambar);
}

/* Encabezado */
.visor-encabezado{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
}

.visor-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    border:1.5px solid var(--ambar);
}

.visor-quien{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1 1 auto;
}

.visor-nombre{
    font-size:13.5px;
    font-weight:700;
    color:var(--texto);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.visor-hace{ font-size:11.5px; color:var(--texto-3); }

.visor-cerrar{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid var(--linea);
    background:transparent;
    color:var(--texto-2);
    font-size:15px;
    cursor:pointer;
}

.visor-cerrar:hover{ color:var(--ambar); border-color:var(--linea-ambar); }

/* Media */
.visor-media{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    background:#07070B;
}

/* Solo la foto de la historia, por id: el avatar del encabezado
   tambien es un <img> y vive adentro de .visor-media, asi que un
   selector generico se lo llevaba puesto y lo agrandaba a pantalla
   completa.

   En escritorio la foto define el tamano de la caja; en el celular
   ocupa la pantalla entera y se recorta lo justo. */
#visorImagen{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    margin:auto;
}

/* Mientras carga la historia nueva se oculta la anterior y queda el
   spinner: antes se seguia viendo la foto de la historia previa. */
.visor-media img.visor-cargando{
    opacity:0;
}

.visor-media::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    margin:-15px 0 0 -15px;
    border:2px solid rgba(244,241,234,.18);
    border-top-color:var(--ambar);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease .12s;
    animation:visorGira .7s linear infinite;
}

.visor-media:has(img.visor-cargando)::before{
    opacity:1;
}

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

/* Mitades invisibles para pasar de estado tocando. */
.visor-zona{
    position:absolute;
    top:0;
    bottom:0;
    width:38%;
    border:none;
    background:transparent;
    cursor:pointer;
}

.visor-zona--izq{ left:0; }
.visor-zona--der{ right:0; }

/* Pie */
.visor-pie{
    padding:12px 14px 14px;
    border-top:1px solid var(--linea);
}

.visor-frase{
    margin:0 0 10px;
    font-size:13.5px;
    line-height:1.45;
    color:var(--texto);
}

.visor-ir{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 15px;
    border-radius:var(--radio-chico);
    background:var(--ambar);
    color:var(--tinta-900);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.visor-ir:hover{ background:var(--ambar-claro); color:var(--tinta-900); }

/* Scroll infinito */
.cargando-mas,
.fin-listado{
    padding:26px 12px;
    text-align:center;
    font-size:13px;
    color:var(--texto-3);
}

.cargando-mas i{ color:var(--ambar); margin-right:6px; }

/* Historias ya vistas: el aro se apaga, como en cualquier app de historias. */
.estado-item.estado-visto .estado-aro{
    background:var(--tinta-500);
}

.estado-item.estado-visto .estado-nombre{
    color:var(--texto-3);
}

.estado-item.estado-visto .estado-aro img{
    opacity:.62;
}

/* La franja de estado de la card es clickeable */
.pcard-estado{
    cursor:pointer;
}

.pcard-estado:hover{
    background:rgba(11,11,15,.92);
    border-color:var(--linea-ambar);
}

.pcard-estado:focus-visible{
    outline:2px solid var(--ambar);
    outline-offset:2px;
}

/* =====================================================================
   Tamaño de la grilla en escritorio.

   La foto es lo que vende, así que se le da más lugar: lienzo más ancho
   que el container de Bootstrap y columnas más grandes. Ni las 7 columnas
   angostas de Pasión ni el recorte 3:4 de Limbo: 5 columnas amplias con
   proporción 4:5, más vertical y con la info abajo sobre fondo tinta.
   ===================================================================== */

@media (min-width:992px){
    /* Lienzo propio solo donde hay grilla; el resto del sitio no cambia. */
    body:has(.pgrid) .container{
        max-width:1560px;
    }

    .pgrid{
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
        gap:18px;
    }

    .pcard-media{ aspect-ratio:4 / 5; }

    .pcard-nombre{ font-size:16px; }
    .pcard-meta{ font-size:12.5px; }

    .pcard-badge{ font-size:11px; padding:4px 10px; }
    .pcard-precio{ font-size:12.5px; padding:5px 11px; }

    .pcard-estado{ font-size:12px; padding:7px 10px; }

    .pcard-body{ padding:12px 14px 14px; }

    .pcard-fav{ width:34px; height:34px; font-size:15px; }
}

/* En pantallas muy anchas entra una columna más sin achicar la foto. */
@media (min-width:1700px){
    body:has(.pgrid) .container{ max-width:1760px; }
}

/* Tablet: tres columnas cómodas en vez de cuatro apretadas. */
@media (min-width:768px) and (max-width:991.98px){
    .pgrid{ grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:14px; }
    .pcard-media{ aspect-ratio:4 / 5; }
}

@media (max-width:575.98px){
    .pcard-media{ aspect-ratio:3 / 4; }
}

/* Vista previa de la historia al pasar el mouse */
.pcard-media[data-historia]{
    position:relative;
}

/* Arriba al medio se le montaba encima a los distintivos del plan y de
   "Disponible", que ocupan esa franja. Va abajo, apoyada sobre la
   tira de la historia: es de lo mismo que habla. */
.pcard-media.mostrando-historia::before{
    content:"Historia";
    position:absolute;
    bottom:42px;
    left:8px;
    z-index:3;
    padding:3px 10px;
    border-radius:4px;
    background:var(--ambar);
    color:var(--tinta-900);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Mientras se muestra la historia, la franja de texto se resalta. */
.pcard-media.mostrando-historia .pcard-estado{
    background:rgba(11,11,15,.9);
    border-color:var(--linea-ambar);
}

/* ---------------------------------------------------------------------
   Fotos protegidas
   Cortar la selección y el arrastre desde CSS: el JS se encarga del
   resto. No impide una captura de pantalla, eso no lo puede hacer
   ninguna web.
   --------------------------------------------------------------------- */

[data-fotos-protegidas="1"] img,
[data-fotos-protegidas="1"] video,
.foto-protegida img{
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    pointer-events:none;
}

/* ---------------------------------------------------------------------
   Citas (en prueba)
   --------------------------------------------------------------------- */

.perfil-btn.cita{
    background:transparent;
    border:1px solid var(--linea-ambar);
    color:var(--ambar);
    cursor:pointer;
}

.perfil-btn.cita:hover{
    background:rgba(232,180,92,.12);
    color:var(--ambar-claro);
}

.cita-caja{
    background:var(--tinta-700);
    border:1px solid var(--linea);
    border-radius:var(--radio);
    padding:20px;
    margin-bottom:20px;
}

.cita-caja h3{
    color:var(--texto);
    font-size:17px;
    margin:0 0 6px;
}

.cita-nota{
    color:var(--texto-2);
    font-size:13px;
    margin-bottom:16px;
}

.cita-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
    align-items:end;
}

.cita-form label{
    display:block;
    margin:0;
}

.cita-form label span{
    display:block;
    color:var(--texto-3);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.cita-form input,
.cita-form select,
.cita-form textarea{
    width:100%;
    background:var(--tinta-800);
    border:1px solid var(--linea);
    border-radius:var(--radio-chico);
    color:var(--texto);
    font-family:inherit;
    font-size:14px;
    padding:9px 11px;
}

.cita-form input:focus,
.cita-form select:focus,
.cita-form textarea:focus{
    border-color:var(--linea-ambar);
    outline:none;
}

.cita-ancho{ grid-column:1 / -1; }

.cita-aviso{
    border-radius:var(--radio-chico);
    font-size:13.5px;
    margin-bottom:14px;
    padding:11px 13px;
}

.cita-aviso.ok{
    background:rgba(95,191,139,.12);
    border:1px solid rgba(95,191,139,.35);
    color:#7FD8A6;
}

.cita-aviso.error{
    background:rgba(217,107,124,.12);
    border:1px solid rgba(217,107,124,.35);
    color:#F0A9B4;
}

/* El logo en la barra del sitio */
.navbar-brand .logo-marca{
    display:block;
    height:52px;
    width:auto;
}

/* Y en el modal de mayoría de edad, más grande */
.adult-logo-img{
    display:block;
    height:96px;
    width:auto;
    margin:0 auto 18px;
    max-width:100%;
}

@media (max-width:575.98px){
    .navbar-brand .logo-marca{ height:42px; }
    .adult-logo-img{ height:68px; }
}


/* ---------------------------------------------------------------
   Visor de historias: zona central y encabezado enlazado
   --------------------------------------------------------------- */

/* Los costados pasan de historia; el centro pausa. */
.visor-zona--centro{
    left:38%;
    right:38%;
    width:auto;
    display:block;
}

/* La foto y el nombre de arriba entran al perfil. */
.visor-quienlink{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 auto;
    min-width:0;
    text-decoration:none;
}

.visor-quienlink:hover .visor-nombre{
    text-decoration:underline;
}

.visor-quienlink .visor-quien{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1 1 auto;
}


/* ---------------------------------------------------------------
   Tarifas en la ficha

   Una fila por duracion, el monto alineado a la derecha para que se
   comparen de un vistazo.
   --------------------------------------------------------------- */
.perfil-tarifas{
    list-style:none;
    margin:0;
    padding:0;
}

.perfil-tarifas li{
    align-items:baseline;
    border-bottom:1px solid rgba(244,241,234,.08);
    display:flex;
    gap:14px;
    justify-content:space-between;
    padding:10px 0;
}

.perfil-tarifas li:last-child{ border-bottom:0; }

.perfil-tarifas span{ color:var(--texto-2, #A9A399); font-size:14.5px; }

.perfil-tarifas b{
    color:var(--ambar, #E8B45C);
    font-size:16px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.perfil-tarifas-pago{
    color:var(--texto-3, #6C675F);
    font-size:13px;
    margin:10px 0 0;
}

.perfil-fisicos{
    color:var(--texto-2, #A9A399);
    font-size:14.5px;
    margin:14px 0 0;
}

.perfil-redes{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:16px;
}

.perfil-redes a{
    align-items:center;
    background:rgba(244,241,234,.06);
    border:1px solid rgba(244,241,234,.10);
    border-radius:99px;
    color:var(--texto, #F4F1EA);
    display:inline-flex;
    font-size:13.5px;
    gap:7px;
    padding:6px 13px;
    text-decoration:none;
}

.perfil-redes a:hover{
    border-color:var(--ambar, #E8B45C);
    color:var(--ambar, #E8B45C);
}


/* ---------------------------------------------------------------
   Encabezado del visor, ya sobre la foto
   --------------------------------------------------------------- */
.visor-sobre--arriba .visor-encabezado{
    align-items:center;
    display:flex;
    gap:10px;
    padding:10px 12px 0;
}

.visor-sobre--arriba .visor-avatar{
    border:1.5px solid rgba(244,241,234,.85);
    flex:0 0 auto;
}

.visor-sobre--arriba .visor-nombre{
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.7);
}

/* Zona y hace cuanto, en la misma linea separados por un punto. */
.visor-sobre--arriba .visor-hace{
    align-items:center;
    color:rgba(244,241,234,.82);
    display:flex;
    flex-wrap:wrap;
    font-size:12px;
    gap:5px;
    text-shadow:0 1px 3px rgba(0,0,0,.7);
}

.visor-sobre--arriba .visor-hace span:not(:empty) ~ span:not(:empty)::before{
    content:"\00b7";
    margin-right:5px;
}

.visor-sobre--arriba .visor-cerrar{
    background:rgba(6,6,10,.45);
    border:0;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    flex:0 0 auto;
    font-size:17px;
    height:34px;
    width:34px;
}

.visor-sobre--arriba .visor-cerrar:hover{ background:rgba(6,6,10,.7); }



/* El avatar del encabezado, con medida propia: comparte contenedor con
   la foto de la historia y hay que dejarlo claro. */
.visor-sobre--arriba .visor-avatar{
    width:34px;
    height:34px;
    min-width:34px;
    max-width:34px;
    max-height:34px;
    border-radius:50%;
    object-fit:cover;
}


/* ---------------------------------------------------------------
   Flechas de los costados (flechas-limbo)

   Blancas y con sombra para que se vean sobre cualquier foto, y
   tambien en el celular: son la forma natural de pasar de historia
   cuando no se sabe que tocando el costado ya se pasa.
   --------------------------------------------------------------- */
.visor-zona--izq,
.visor-zona--der{
    align-items:center;
    display:flex;
    justify-content:center;
    width:22%;
}

.visor-zona--izq::before,
.visor-zona--der::before{
    color:#fff;
    display:block;
    font-family:system-ui, -apple-system, sans-serif;
    font-size:34px;
    font-weight:300;
    line-height:1;
    opacity:.85;
    text-shadow:0 1px 6px rgba(0,0,0,.55);
    transition:opacity .15s, transform .15s;
}

.visor-zona--izq::before{ content:"\2039"; }
.visor-zona--der::before{ content:"\203a"; }

.visor-zona--izq:hover::before,
.visor-zona--der:hover::before{ opacity:1; }

.visor-zona--izq:active::before{ transform:translateX(-2px); }
.visor-zona--der:active::before{ transform:translateX(2px); }

/* La primera y la ultima no llevan flecha: no hay a donde ir. */
.visor-zona--izq[data-sinlado]::before,
.visor-zona--der[data-sinlado]::before{ opacity:0; }

/* ---------------------------------------------------------------
   Pie: mas compacto, y el texto de los botones en una sola linea
   --------------------------------------------------------------- */
.visor-sobre--abajo{
    padding:34px 12px 12px;
}

.visor-sobre--abajo .visor-frase{
    font-size:14px;
    line-height:1.35;
    /* auto a los costados: si no, el centrado del bloque de abajo no le
       aplica y la frase queda pegada al borde mientras los botones
       quedan en el medio. */
    margin:0 auto 10px;
    max-width:520px;
    /* Una frase larga no se come la foto entera. */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.visor-acciones{ gap:8px; }

.visor-wpp,
.visor-sobre--abajo .visor-ir{
    font-size:14px;
    height:44px;
    padding:0 12px;
    white-space:nowrap;
}

/* El de WhatsApp manda: es el que convierte. */
.visor-acciones .visor-wpp{ flex:1.25 1 0; }
.visor-acciones .visor-ir{  flex:1 1 0; }

.visor-wpp i,
.visor-sobre--abajo .visor-ir i{ font-size:15px; }

/* El encabezado, en la medida de Limbo: compacto arriba a la
   izquierda, sin comerse la foto. */
.visor-sobre--arriba .visor-nombre{ font-size:14px; }
.visor-sobre--arriba .visor-hace{  font-size:12px; }
.visor-sobre--arriba .visor-encabezado{ padding:8px 10px 0; }


/* En un monitor grande los datos no van de un borde al otro: quedan
   centrados sobre la foto, en un ancho que se lea comodo. */
.visor-sobre--arriba .visor-encabezado,
.visor-sobre--abajo > *{
    margin-left:auto;
    margin-right:auto;
    max-width:520px;
}

@media (min-width:576px){
    .visor-sobre--abajo{ padding:44px 16px 20px; }

    /* Las flechas van a los bordes de la pantalla, no encima de la
       foto: asi no tapan lo que se esta mirando. */
    .visor-zona--izq,
    .visor-zona--der{ width:15%; }

    .visor-zona--izq::before,
    .visor-zona--der::before{ font-size:44px; }
}


/* ===============================================================
   Tira de historias, como el carrusel de Facebook

   Antes eran aros de 66px con la cara: no se veia de que iba la
   historia y quedaban perdidos arriba de la pagina. Ahora son
   tarjetas con la foto adentro.
   =============================================================== */
.estados-carrusel{
    position:relative;
}

.estados-carrusel .estados-strip{
    gap:9px;
    padding:4px 2px 14px;
    scroll-behavior:smooth;
}

.estado-card{
    position:relative;
    flex:0 0 auto;
    width:112px;
    height:196px;
    padding:0;
    border:0;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    background:var(--tinta-800, #16161E);
    transition:transform .15s;
}

.estado-card:hover{ transform:translateY(-2px); }

.estado-card-fondo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Degradado abajo para que el nombre se lea sobre cualquier foto. */
.estado-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:58%;
    background:linear-gradient(0deg, rgba(6,6,10,.85) 0%, transparent 100%);
}

.estado-card-avatar{
    position:absolute;
    top:8px;
    left:8px;
    z-index:2;
    display:block;
    width:34px;
    height:34px;
    border-radius:50%;
    padding:2px;
    background:linear-gradient(135deg, var(--accent, #ff3c78), var(--violet, #7c4dff));
}

.estado-card-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--tinta-900, #0F0E12);
    display:block;
}

.estado-card .estado-nombre{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    z-index:2;
    color:#fff;
    font-size:12px;
    font-weight:600;
    text-align:left;
    text-shadow:0 1px 3px rgba(0,0,0,.7);
}

/* Flechas del carrusel, como las de Facebook: redondas y solo en
   escritorio, que en el celular se pasa con el dedo. */
.estados-flecha{
    position:absolute;
    top:calc(50% - 14px);
    transform:translateY(-50%);
    z-index:3;
    display:none;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--linea, rgba(244,241,234,.14));
    border-radius:50%;
    background:var(--tinta-800, #16161E);
    color:var(--texto, #F4F1EA);
    cursor:pointer;
    font-size:13px;
    box-shadow:0 2px 10px rgba(0,0,0,.4);
}

.estados-flecha:hover{ background:var(--tinta-700, #1C1C26); }
.estados-flecha--izq{ left:-10px; }
.estados-flecha--der{ right:-10px; }

@media (min-width:768px){
    .estados-flecha{ display:flex; }
}

@media (max-width:575.98px){
    .estado-card{ width:100px; height:176px; }
}


/* ---------------------------------------------------------------
   Historias dentro de una seccion de genero

   Antes vivian solo en la home: al tocar Mujeres desaparecian y el
   listado arrancaba en seco.
   --------------------------------------------------------------- */
.estados-seccion{
    margin:6px 0 18px;
}

.estados-cab{
    align-items:baseline;
    display:flex;
    gap:12px;
    justify-content:space-between;
    margin-bottom:10px;
}

.estados-cab h2{
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    margin:0;
}

.estados-cab a{
    color:var(--ambar, #E8B45C);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}

.estados-cab a:hover{ text-decoration:underline; }

/* Entrar: se distingue de los links del menu pero no le compite a
   Publicate, que es el boton que de verdad interesa. */
.menu-link-premium.btn-entrar{
    border:1px solid var(--linea-ambar, rgba(232,180,92,.32));
    border-radius:99px;
    padding:7px 15px;
}

.menu-link-premium.btn-entrar:hover{
    border-color:var(--ambar, #E8B45C);
    color:var(--ambar, #E8B45C);
}


/* Aviso de que hay dos tipos de cuenta: sin esto, quien queria
   anunciarse creaba una de cliente y despues no entendia por que no
   podia publicar. */
.aviso-cruzado{
    background:rgba(232,180,92,.09);
    border:1px solid rgba(232,180,92,.28);
    border-radius:11px;
    color:var(--texto-2, #A9A399);
    font-size:14px;
    line-height:1.45;
    margin-bottom:20px;
    padding:13px 15px;
}

.aviso-cruzado b{ color:var(--texto, #F4F1EA); }
.aviso-cruzado a{ color:var(--ambar, #E8B45C); font-weight:600; }