<style>


    /* =========================================
       1. IMPORTACIÓN DE FUENTES
       ========================================= */
    @import url(https://external-media.spacehey.net/css/sNVSVNOKJAR_iiuQBDHKNNpqAtpVuDMgA_W3VuGKcJoY=/https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);
    @import url(https://external-media.spacehey.net/css/sTsXUPD_yZzUpgcXeHJC2la644L8FB1OJFE8FmeHPFNM=/https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800;900&family=Noto+Color+Emoji&family=Open+Sans:wght@300&display=swap);
    @import url(https://external-media.spacehey.net/css/szQYn_4CPQug8gFDgn2aT41Qzopwsw5Qh_ugGyx9g2ms=/https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);






/* =========================================
       2. VARIABLES (EDITADO: DEGRADADO ROJO)
       ========================================= */
    :root {
        color-scheme: dark;
        
        /* Colores Principales */
        --bg-color: #800000; /* Color base rojo guinda por si acaso */
        --text-color: #fff;
        --text-dim: rgb(255 255 255 / .8);
        --text-muted: rgb(255 255 255 / .6);
        
        /* Estilos de Cristal (Glassmorphism) */
        --glass-bg: rgb(255 255 255 / .05);
        --glass-border: rgb(255 255 255 / .1);
        --glass-radius: 12px;
        
        /* IMÁGENES Y FONDO (Aquí está el cambio del degradado) */
        /* Carmesí (#DC143C) -> Guinda (#800000) -> Guinda Oscuro (#2b0000) */
        --bg-image: linear-gradient(to bottom, #474747, #374E6F, #374652);
        
        --logo-image: url(https://external-media.spacehey.net/media/s_FnRNsnmFUt-BhyrU3myI-8FYh_1jeqZMLRhgmA0aDA=/https://files.imvasi.com/files/sh.png);
    }




/* =========================================
       3. ESTILOS GLOBALES Y ANIMACIONES
       ========================================= */

    @keyframes onlineAnim {
        0% { transform: scale(1,1); opacity: 1; }
        50% { transform: scale(.9,.9); opacity: .7; }
        100% { transform: scale(1,1); opacity: 1; }
    }

/* 1. Definimos la coreografía */
@keyframes introFade {
    0% { 
        opacity: 0; 
        filter: blur(10px); /* Empieza borroso */
        transform: translateY(10px); /* Sube un poquito */
    }
    100% { 
        opacity: 1; 
        filter: blur(0px); /* Se aclara */
        transform: translateY(0); /* Llega a su posición original */
    }
}



/* 2. Le decimos al perfil que use la animación (Encendemos el horno) */
body {
    animation: introFade 1.8s ease-out forwards;
    background-attachment: fixed; /* Esto ayuda a que el fondo no parpadee */
}

/* Evitamos que los elementos con fondo de cristal parpadeen al cargar */
main, .container, .hero-links-container {
    animation: introFade 2s ease-out forwards;
}




/* =========================================
   3/1 ANIMACIÓN DE REFLEJO (SCANNER DE CRISTAL)
   ========================================= */
  

/* 1. Definición de Contenedores (Cuerpo del Cristal) */
.profile-info, .contact, .url-info, .mood, .table-section, 
.hero-links-container, .friends, .comments, .blog-preview, .general-about,
.blurbs .inner > .section:first-of-type, 
.blurbs .inner > .section:nth-of-type(2) {
    position: relative !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent;
}


/* 2. Liberamos al padre (.blurbs) para que no bloquee a los hijos */
.blurbs {
    position: static !important;
    overflow: visible !important;
}

/* 3. Capa de Brillo Unificada (::after) para todos los elementos */
.profile-info::after, .contact::after, .url-info::after, .mood::after, 
.table-section::after, .hero-links-container::after, .friends::after, 
.comments::after, .blog-preview::after, .general-about::after,
.blurbs .inner > .section:first-of-type::after,
.blurbs .inner > .section:nth-of-type(2)::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    /* Usamos el ancho de pantalla para la simetría que nos gustó */
    width: 100vw !important; 
    left: -50vw !important;
    height: 100% !important;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    ) !important;
       transform: translateX(-150%) skewX(-15deg); 

/*     Inclinación unificada */
 
   opacity: 0;
    pointer-events: none;
    z-index: 10;
}



/* ============================================================
   3/2. ACTIVADOR POR CLICK (LA MAGIA)
   ============================================================ */



/* 4. Activador de Brillo por Toque (Sincronizado) */
.profile-info:active::after, .contact:active::after, .url-info:active::after, 
.mood:active::after, .table-section:active::after, .friends:active::after, 
.comments:active::after, .blog-preview:active::after, .general-about:active::after,
.blurbs .inner > .section:first-of-type:active::after, 
.blurbs .inner > .section:nth-of-type(2):active::after {
    
    /* Usamos la animación global que definimos en el media query */
    animation: clickGlobalShimmer 2.5s ease-out 2s 1 !important;
    opacity: 1 !important;
}




/* =========================================
   PROTECCIÓN DE IMÁGENES (LAYER FIX)
   ========================================= */


/* 1. Quitamos la sombra de TODO para limpiar los iconos */
.profile-info img, 
.general-about img, 
.table-section img,  
.blog-preview img,
.inner img {
    position: relative !important;
    z-index: 20 !important; 
    box-shadow: none !important; /* <--- Esto quita la sombra de los iconos */
}

/* 2. (OPCIONAL) Si solo quieres sombra en tu foto de perfil grande */

.profile-pic img,
.friends img, 
.comments-table img,
.gallery-grid img {

box-shadow: 0 0px 0px rgba(0,0,0,0.3) !important;
}




/* =========================================
   FINAL DE ANIMACIONES / ABAJO ESTRUCTURA Y CONTENEDORES 4/3
   ========================================= */


    * ::-moz-selection { background: rgb(255 255 255 / .2); color: #fff; }
    * ::selection { background: rgb(255 255 255 / .2); color: #fff; }

    body {
        background-color: var(--bg-color);
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Esto hace que el degradado se vea bonito al bajar */
        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        display: flex;
        justify-content: center;
        user-select: none;
        color: var(--text-color);
    }


p, a, span, li, td { font-size: 14px; }
    h4 { font-size: 17px !important; font-weight: 800; margin: 0 0 5px 0; text-transform: lowercase; }
    b { font-weight: 800; }
    a { color: var(--text-dim); text-decoration: none !important; transition: color 0.2s; }
    a:hover { color: var(--text-color) !important; }

    /* Pequeños textos y fechas */
    small { font-weight: 500; font-size: 0; }
    small a { font-size: 12px !important; font-weight: inherit !important; text-transform: lowercase; }
    small a b { font-size: 12px !important; font-weight: inherit; }
    small a:nth-child(1) { text-transform: none; }
    small a:first-of-type { font-size: 12px; }
    small a:last-child { float: inline-end; }
    small time { font-size: 12px; margin-left: 2.5px; }




    /* =========================================
       4. ESTRUCTURA Y CONTENEDORES
       ========================================= */



 .container { padding: 0 !important; margin: 2em; width: 1100px; max-width: 100%; }
    main { padding: 10px 0px !important; background-color: #fff0; color: #fff; }
    
    .row { display: flex; align-items: flex-start; gap: .5rem; padding: 10px; }
    .row .left, .row .right { padding: 0 !important; display: flex !important; flex-direction: column; gap: .5rem; }
    .row .right { flex: 1; }
    .inner { padding: 0 !important; }

    /* Estilo compartido "Cajas de Cristal" */
    .friends, .profile-info, .contact, .blurbs .inner .section, 
    .table-section, .url-info, .general-about, .mood, 
    .blog-preview, .comment-reply {
        border: 1px solid var(--glass-border) !important;
        background: var(--glass-bg) !important;
        border-radius: var(--glass-radius);
        padding: 10px !important;
        color: #ffffff !important;
        box-shadow: none;
        margin: 0 !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }



/* Footer de SpaceHey (Advertencia) */
    .container > main > a { opacity: 25%; }
    .container > main > a > div > span { font-size: 0; }
    .container > main > a > div > span::after { content: "dont u dare"; font-size: 18px; font-weight: 800; }




  /* =========================================
   4. ESTILO DE LA GALERÍA (Gallery Grid)
   ========================================= */
.gallery-grid {
    display: grid;
    /* Crea columnas automáticas que se ajustan al tamaño de la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px; /* Espacio entre imágenes */
    padding: 10px;
    margin-top: 10px;
}


.gallery-grid img {
    width: 100%;
    height: 200px; /* Altura fija para que todas se vean uniformes */
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarse */
    border-radius: var(--glass-radius); /* Usa el radio de 12px que ya tienes */
    border: 1px solid var(--glass-border); /* Borde sutil de cristal */
    background: var(--glass-bg);
    transition: all 0.3s ease; /* Animación suave al pasar el mouse */
    cursor: pointer;
}




/* Efecto al pasar el mouse (Hover) */
.gallery-grid img:hover {
    transform: scale(1.05); /* Se agranda un poquito */
    filter: brightness(1.2); /* Se ilumina un poco */
    border-color: rgba(255, 255, 255, 0.5); /* El borde brilla más */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidad */
}

/* Ajuste para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en celulares */
        gap: 10px;
    }
    .gallery-grid img {
        height: 150px; /* Imágenes un poco más pequeñas en móvil */
    }
}




/* =========================================
       5. NAVEGACIÓN Y LOGO
       ========================================= */
    nav { font-size: 14px; text-transform: lowercase; }
    nav .top, nav .links { background-color: #fff0; }
    nav .top { align-items: center; }
    
    .logo {
        content: var(--logo-image);
        aspect-ratio: unset !important; width: 120px !important; height: unset !important;
    }

    nav .center form { margin-top: 0 !important; display: flex; justify-content: center; gap: .5rem; }
    nav .center form label { display: none; }
    .search-wrapper { overflow: hidden; }
    .search-wrapper input { margin: 0 !important; border-radius: 12px; }

    nav .links { margin: 10px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 20px; }
    nav .links li { display: flex; align-items: center; }
    nav .links a { font-size: 14px; text-decoration: none; text-shadow: none; }
    nav .links li:not(:last-child)::after { display: none; }

    /* Icono Notificaciones */
    a[title="Notifications"] img { display: none; }
    a[title="Notifications"]:before {
        content: "notifications"; font-family: Material Symbols Outlined;
        font-size: 20px; margin-right: 10px; vertical-align: middle;
    }
    a[title="Notifications"]:hover { color: #fff !important; }





/* =========================================
       6. INPUTS Y BOTONES
       ========================================= */
    input {
        border: 0; border-radius: 12px; padding: 6px 10px; margin: 0 10px;
        background-color: var(--glass-bg); font-size: 14px; color: #fff; font-family: "Inter", sans-serif;
    }
    input:focus { border: 1px solid rgb(255 255 255 / .3) !important; outline: 0; }
    
    input[type="text"], input[type="number"] {
        color: #fff; background-color: var(--glass-bg);
        border: 1px solid var(--glass-border) !important;
        border-radius: 12px; height: 38px; font-size: 14px;
    }

    input[type="submit"], button:not(.logout-btn) {
        background-color: var(--glass-bg);
        color: var(--text-muted) !important;
        font-family: "Inter", sans-serif !important;
        font-size: 14px; font-weight: 500;
        height: 38px; border-radius: 12px;
        border: 1px solid var(--glass-border);
        cursor: pointer; transition: all 0.3s ease;
    }
    button:not(.logout-btn) {
        padding: .5rem 1.5rem; display: flex; align-items: center; justify-content: center;
        gap: .5rem; font-size: .9rem; text-transform: lowercase; background: var(--glass-bg);
    }
    input[type="submit"]:hover, button:not(.logout-btn):hover, button:hover {
        background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .15);
    }




.logout-btn {
        font-family: inherit; transition: color 0.2s; font-weight: 400; background: none;
        border: none; font-size: 14px; text-transform: lowercase;
    }
    .logout-btn:hover { color: #fff; text-decoration: none; }

    /* Correcciones para Webkit/Autofill */
    :root .logout-btn, _::-webkit-full-page-media, _:future, :root .logout-btn:hover, :root .logout-btn:active { -webkit-text-fill-color: #fff; }
    _::-webkit-full-page-media, _:future, :root button:not(.logout-btn) { -webkit-text-fill-color: var(--text-muted); }




 /* =========================================
       7. PERFIL: IZQUIERDA (Info General)
       ========================================= */
    .profile-info { font-size: 14px; text-transform: lowercase; }
    .profile .contact, .profile .url-info, .profile .table-section, .home-actions, .mood { margin: .5rem 0; }
    
    .profile h1 { font-size: 1.65rem; font-weight: 800; text-transform: lowercase; margin: 0 !important; }
    .profile h1 span { font-size: 25px; }

    .general-about { height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; padding: 10px !important; }
    .general-about p { margin: 0; }
    .general-about > .details { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; }
    .general-about .details p:not(.online) { font-size: 14px; text-transform: lowercase; }

    /* Foto de Perfil */
    .profile-pic { position: relative; margin: 0 10px 0 0 !important; height: 120px !important; }
    .profile-pic > img { border-radius: 16px !important; max-width: 120px !important; max-height: 120px !important; }

    /* Estado Online */
    .online { animation: onlineAnim 2s ease infinite; color: #fff; font-size: 18px; font-weight: 800; width: fit-content; }
    .online img { display: none; }




   /* Premios/Iconos Móvil */
    .awards { display: flex; flex-direction: column; }
    .award a { color: var(--text-dim); display: flex; align-items: center; font-size: 14px; }
    .award a:hover { text-decoration: none !important; }
    .awards .award a img { display: none; }
    .awards .award a[href="https://spacehey.com/mobile"]:before { font-family: Material Symbols Outlined; content: "phone_iphone"; font-size: 17px; font-weight: 400; margin-right: 2px; }
    .awards .award a[href="https://spacehey.com/support"]:before { font-family: Material Symbols Outlined; content: "award_star"; font-size: 17px; font-weight: 400; margin-right: 2px; }

    /* URL y Mood */
    .mood { font-size: 14px; display: flex !important; flex-direction: column !important; gap: 5px !important; }
    .mood p { margin: 0 !important; }
    .mood > :nth-child(2) > b { font-size: 0; }
    .mood > :nth-child(2) > b > a { font-size: 14px; margin-right: 10px; font-weight: 500; }
    .mood p b { text-transform: lowercase; }
    .mood p:nth-child(1) { display: flex; flex-direction: column; gap: .5rem; }
    .mood p:nth-child(1) b { display: none; }

    .url-info { font-size: 14px; font-weight: 500; text-transform: lowercase; }
    .url-info p:nth-child(1) { font-size: 0; display: none; }
    .url-info p:nth-child(1):after { content: "spacehey url"; font-size: 17px; font-weight: 800; }
    .url-info p:nth-child(2) { user-select: text; }




    /* =========================================
       8. CONTACTO E ICONOS
       ========================================= */
    .contact { display: flex; flex-direction: column; gap: .5rem; }
    .contact .inner { display: flex; flex-direction: column; gap: .75rem; }
    .profile .contact .f-row { font-size: 14px; margin: 0 !important; padding: 0; text-transform: lowercase; }
    .profile .contact .heading, .profile .table-section .heading, .home-actions .heading { padding: 0; background: #fff0; color: #fff; font-size: 14px; text-transform: lowercase; }
    .profile .contact .heading h4 { font-size: 20px; }
    .f-col a { color: #fff; }

    .contact .inner img { display: none; }
    .contact .inner a { padding-left: 27px; font-size: 14px; transition: color 0.2s; font-weight: 500; color: var(--text-dim); }
    .contact .inner a:hover { color: #fff; }
    .contact .inner a:before {
        font-family: Material Symbols Outlined; font-weight: 400; font-size: 17px;
        line-height: 1; display: inline-block; margin-left: -26px; padding-right: 5px;
        vertical-align: middle; margin-top: -2px;
    }



/* =========================================
   8/1 CAMBIO DE TÍTULO: CONTACTING (FIX FINAL)
   ========================================= */

.contact .heading h4 {
        visibility: hidden;
          position: relative;
            height: 25px; 
}

/* Creamos el texto nuevo y lo hacemos visible */

.contact .heading h4:before {
  content: "contacting";
    visibility: visible;
      position: absolute;
        left: 0;
           top: 0;
             font-size: 20px; 
                text-transform: lowercase;
                   font-weight: 800;

}



/* Mapeo de iconos de contacto */
    .contact .inner a[href*="/addfriend"]:before { content: "person_add"; }
    .contact .inner a[href*="im.spacehey.com?user"]:before { content: "chat"; }
    .contact .inner a[href*="/soon"]:before { content: "group_add"; }
    .contact .inner a[href*="/addfavorite"]:before { content: "favorite"; }
    .contact .inner a[href*="/unfriend"]:before { content: "person_remove"; }
    .contact .inner a[href*="/unfavorite"]:before { content: "favorite"; }
    .contact .inner a[href*="im.spacehey.com/new"]:before { content: "arrow_forward"; }
    .contact .inner a[href*="/block"]:before { content: "block"; }
    .contact .inner a[href*="/report"]:before { content: "flag"; }
    .contact .inner a[href*="/requests"]:before { content: "watch_later"; }



/* =========================================
       9. TABLAS DE INTERESES Y REDES SOCIALES
       ========================================= */
    .table-section { display: flex; flex-direction: column; gap: .5rem; }
    .left .table-section:last-child { margin-bottom: 0 !important; }
    
    /* Reemplazo de Títulos */
    .url-info + .table-section .heading h4, .mood + .table-section .heading h4 { font-size: 0 !important; }
    .url-info + .table-section .heading h4:after, .mood + .table-section .heading h4:after { content: "Interests"; font-size: 17px; font-weight: 800; }


   .url-info + .table-section + .table-section .heading h4, .mood + .table-section + .table-section .heading h4 { font-size: 0 !important; }
    .url-info + .table-section + .table-section .heading h4:after, .mood + .table-section + .table-section .heading h4:after { content: "Links"; font-size: 17px; font-weight: 800; }

    /* Estructura de Tabla */
    .details-table tbody { display: flex; flex-direction: column; row-gap: .5rem; }
    .details-table tbody tr { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
    .details-table tbody tr td { width: 100% !important; }
    .details-table tbody tr td:last-child { border-bottom: none; }
    .details-table td { background-color: transparent !important; padding: 3px 0; border-bottom: 1px solid var(--glass-border); }
    .details-table td p { color: #fff; font-size: 14px; font-weight: 500; text-transform: lowercase; }

    /* Sección de Iconos Sociales (Instagram, Facebook, etc) */
    .url-info + .table-section + .table-section .details-table tr, 
    .mood + .table-section + .table-section .details-table tr { flex-direction: row; gap: .5rem; }
    
    .url-info + .table-section + .table-section .details-table td, 
    .mood + .table-section + .table-section .details-table td { border-bottom: none; width: auto !important; }

    .url-info + .table-section + .table-section .inner table tbody tr:nth-child(1) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(1) td p a img { content: url(https://external-media.spacehey.net/media/sHkrJvFFT7kW8j331qDiddN1K98DIDmGIO9O63tt2U4g=/https://img.icons8.com/fluency/48/instagram-new.png); background-size: contain; border-radius: 4px; }




    .url-info + .table-section + .table-section .inner table tbody tr:nth-child(2) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(2) td p a img { content: url(https://external-media.spacehey.net/media/sqD_TyVYGkUzpKp7mtASZTPGzVSmdhrgJZoOwxf2LAAE=/https://img.icons8.com/ios-filled/50/ffffff/twitterx--v1.png); background-size: contain; border-radius: 4px; }




   .url-info + .table-section + .table-section .inner table tbody tr:nth-child(3) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(3) td p a img { content: url(https://external-media.spacehey.net/media/s60fbJblvdcWAWCD9zLLzdLzBSF_kVosy1LhxizCcO00=/https://img.icons8.com/fluency/48/facebook-new.png); background-size: contain; border-radius: 4px; }
    .url-info + .table-section + .table-section .inner table tbody tr:nth-child(4) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(4) td p a img { content: url(https://external-media.spacehey.net/media/s1bsnDxxrs1P-ZQFPiRJeAUwtEV_EctpuuyKeRYtduJA=/https://img.icons8.com/color/48/tiktok--v1.png); background-size: contain; border-radius: 4px; }
    .url-info + .table-section + .table-section .inner table tbody tr:nth-child(5) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(5) td p a img { content: url(https://external-media.spacehey.net/media/swhDQA8wA6aH09fGxxJON2NQKMWgegxobay389rjHsXQ=/https://img.icons8.com/color/48/pinterest--v1.png); background-size: contain; border-radius: 4px; }


.url-info + .table-section + .table-section .inner table tbody tr:nth-child(6) td p a img, .mood+.table-section+.table-section .inner table tbody tr:nth-child(6) td p a img { content: url(); background-size: contain; }
    
    /* Ocultar filas extra */
    .url-info + .table-section .details-table > tbody > tr:nth-child(5), .url-info + .table-section .details-table > tbody > tr:nth-child(6),
    .mood + .table-section .details-table > tbody > tr:nth-child(5), .mood + .table-section .details-table > tbody > tr:nth-child(6) { display: none; }






 /* =========================================
       10. BLURBS Y BLOGS
       ========================================= */






 .profile .blurbs { margin: 0 !important; }
    .blurbs .heading { display: none; }
    .profile .blurbs .section h4 { color: #fff; font-size: 0 !important; }
    .profile .blurbs .section p { font-size: 14px; margin: 0 !important; }
    .blurbs .inner { display: flex; flex-direction: column; gap: .5rem; }
    .profile .blurbs .section { margin: 0 !important; display: flex; flex-direction: column; gap: .5rem; }
    
    .profile .blurbs .section:nth-child(1) h4:after { content: "about me"; font-size: 17px; }
    .profile .blurbs .section:nth-child(2) h4:after { content: "who i’d like to meet"; font-size: 17px; }

    .blog-preview { display: flex; flex-direction: column; gap: .5rem; }
    .blog-preview h4 { font-size: 0 !important; width: 100%; margin: 0; }
    .blog-preview h4:before { content: "blogs"; font-size: 17px; font-weight: 800; }
    .blog-preview h4 a { float: right; font-size: 0; }
    .blog-preview h4 a:after { font-family: Material Symbols Outlined; content: "open_in_new"; font-size: 17px; font-weight: 500; }
    .blog-preview p:last-child { margin-bottom: 0; }
    .blog-preview p { font-size: 14px; margin: 0; }
    .blog-preview p i { text-transform: lowercase; }




 /* =========================================
       11. AMIGOS Y COMENTARIOS
       ========================================= */
    .friends-grid { display: grid; justify-items: center; grid-template-columns: repeat(4, 1fr); align-items: start; gap: .5rem; display: none; }
    .profile .friends .person img:not(.icon) { border-radius: 12px; }
    
    .friends .heading { display: flex; flex-direction: row; height: 0; padding: 0 !important; justify-content: flex-end; margin: 0; }
    .friends .heading h4 { display: none !important; }
    .friends:not(#comments) { display: none; }
    .friends:not(#comments) .heading .more { font-size: 0 !important; }
    .friends:not(#comments) .heading .more:after { content: "view all"; font-size: 14px; font-weight: 500; }
    .friends:not(#comments) > .inner > p { margin-bottom: 0 !important; display: contents; }
    .friends:not(#comments) > .inner > p > b { display: none !important; }
    .friends:not(#comments) > .inner > p:before { content: "friends"; font-size: 14px; font-weight: 800; }
    .friends > p { margin: 0 0 .5rem 0 !important; }
    .count { color: var(--text-muted); }

    /* Sección de Comentarios */
    #comments { margin-top: .5rem; }
    #comments .heading { display: none; }
    #comments > .inner > p:before { content: "comments"; font-size: 17px; font-weight: 800; }
    #comments > .inner > p > b { font-size: 0; height: 0; float: right; display: flex; flex-direction: row-reverse; }
    #comments > .inner > p > b > a { font-size: 0; height: 0; }
    #comments .count { display: none; }



 a[href*="/comments?id="]:after { font-family: Material Symbols Outlined; content: "forum"; font-size: 17px; font-weight: 500; }
    a[href$="/addcomment?id=1095441"]:after { font-family: Material Symbols Outlined; content: "add_comment"; font-size: 17px; font-weight: 500; padding-right: .5rem; }

    .comments-table { border: 0 !important; }
    .comments-table td, .comments-table td:first-child { background-color: transparent !important; border: 0; }
    .comments-table td > a > img { border-radius: 12px; }
    .comments-table tbody tr td b a { font-weight: 500; font-size: 12px; }
    a[href*="/deletecomment"], tbody tr td a[href*="/addcomment"] { width: fit-content; display: block; }

    .comment-replies { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; row-gap: .5rem; margin: .5rem 0; }
    .comment-reply:not(:first-child) { border-top: none; }
    .comment-reply p { margin: 0 !important; }
    .comment-reply { display: flex; flex-direction: column-reverse; gap: 5px; }


/* Report & Verify */
    .comments-table .report { float: unset !important; margin: 0 0 .5rem 0 !important; }
    .report a { color: var(--text-dim); text-transform: lowercase; }
    .report a:nth-child(1) { font-size: 0 !important; }
    .report a:nth-child(1):after { content: "Report"; font-size: 12px; vertical-align: middle; font-weight: 500; }
    .report img { display: none !important; }
    .verified-info img { display: none; }
    .verified-info::before { font-family: Material Symbols Outlined; content: "verified_user"; color: #fff; vertical-align: text-bottom; font-weight: 400; opacity: .8; }




  /* =========================================
       12. EXTRAS (Footer, Iframe, Emoji)
       ========================================= */
    footer { line-height: normal; background: #fff0; text-transform: lowercase; }
    footer * { font-size: 12px !important; color: #fff !important; font-weight: 500; }
    footer a { text-decoration: underline !important; }
    footer .links li:not(:last-child)::after { display: none; }
    footer:before { content: ""; display: block; text-decoration: none !important; font-size: 12px; font-weight: 500; }
    
    iframe { box-shadow: none; border-radius: 7px; }
    .emoji { width: 1.5em !important; height: 1.5em !important; vertical-align: -0.3em !important; }
    a[href="/shop"]:before { font-family: Material Symbols Outlined; content: "emoji_events"; font-size: 20px; vertical-align: middle; }






  /* =========================================
       13. RESPONSIVE / MEDIA QUERIES
       ========================================= */
    @media (max-width: 680px) {
        nav .top { display: block !important; flex-direction: column; }
        nav .top .left { width: 100%; margin-bottom: 15px; }
        nav .top .center { width: 100% !important; }
        nav .top .right { position: absolute; top: 18px; right: 14px; }
        .search-wrapper { flex: 1; }
        .search-wrapper input { width: 100% !important; }
    }

    @media (max-width: 550px) {
        .friends-grid { grid-template-columns: auto auto; }
        /* ELIMINADA LA IMAGEN DE FONDO MÓVIL AQUÍ */
        .container { margin: 0; background: none; border-radius: 0; }
    }



@media (max-width: 60em) {
        .col.w-40 { width: 100%; }
        .col { display: block; }
        .row { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
        nav .top .center form { align-items: center; }
        nav .links { justify-content: center; }
        .right { padding-top: 0 !important; }
        .profile .contact .f-row { font-size: 10px; }
        
        .comments-table tbody { width: 100%; display: flex; flex-direction: column; row-gap: 20px; }
        .comments-table tbody tr { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
        .comments-table td:first-child img:not(.icon) { width: 70px !important; }
        
        .comments-table > tbody > tr > td:nth-child(1) { display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; width: 100%; }
        .comments-table > tbody > tr > td:nth-child(1) > a:nth-child(1) > p { margin: 0; text-align: start; margin-left: 10px; }
        
        .comments-table > tbody > tr > td:nth-child(2) > p:nth-child(1) { margin: 0; background-color: var(--glass-bg) !important; border-radius: 12px 12px 0 0; padding: 10px 10px 5px 10px; border: 1px solid var(--glass-border) !important; border-bottom: none !important; }
        .comments-table > tbody > tr > td:nth-child(2) > p:nth-child(2) { margin: 0; background-color: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-top: none !important; border-bottom: none !important; padding: 0 10px; }


.comments-table > tbody > tr > td:nth-child(2) > a:not(:last-child) { margin: 0; background-color: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-top: none !important; border-bottom: none !important; padding: 5px 10px; width: 100%; display: block; }
        .comments-table > tbody > tr > td:nth-child(2) > a:not(:last-child) > button:before { content: "delete"; font-size: 12px; }
        
        .comments-table > tbody > tr > td > .report { background-color: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-top: none !important; padding: 5px 10px 10px 10px; border-radius: 0 0 12px 12px; margin-bottom: 0.5rem !important; float: unset !important; margin: 0 0 .5rem 0 !important; }
        .comments-table tbody tr td br { display: none; }
        .comments-table > tbody > tr > td:nth-child(2) > a:not(:last-child) > button:before { content: none; }
    }







/* =========================================
   RESPONSIVE / MEDIA QUERIES CONFIGURACIÓN DE ANIMACIÓN REFLEJO PARA LA APP (MÓVIL / TABLET APLICACIÓN EN GENERAL)
   ========================================= */


  @media (hover: none) and (pointer: coarse) {

    /* =========================================
   1. ANIMACIONES GLOBALES (Sincronizadas)
   ========================================= */

/* Animación de Entrada Automática */
@keyframes globalShimmer {
    0% { transform: translateX(-100vw) skewX(-15deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(100vw) skewX(-15deg); opacity: 0; }
}


/* Animación de Click Manual (Mantiene la estética global) */
@keyframes clickGlobalShimmer {
    0% { transform: translateX(-100vw) skewX(-15deg); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translateX(100vw) skewX(-15deg); opacity: 0; }
}

/* =========================================
   2. CONFIGURACIÓN DE CAPAS (::after)
   ========================================= */



.general-about::after, .profile-info::after, .contact::after,
.url-info::after, .mood::after, .blog-preview::after,
.comments::after, .friends::after, .table-section::after,
.blurbs .inner > .section:first-of-type::after,
.blurbs .inner > .section:nth-of-type(2)::after {

content: "";
    position: absolute;
    top: 0;
    width: 100vw !important; /* Ancho de pantalla para simetría */
    left: -50vw !important;  /* Centrado respecto al cristal */
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    /* Animación de entrada por defecto */
    animation: globalShimmer 2.5s ease-in-out 1s 1 forwards;
}



/* =========================================
   3. REACCIÓN AL TOQUE (Móvil y App)
   ========================================= */

.profile-info, .contact, .url-info, .mood, .table-section, 
.friends, .comments, .blog-preview, .general-about,
.blurbs .inner > .section:first-of-type,
.blurbs .inner > .section:nth-of-type(2) {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}


/* Aplicación del click con tus tiempos relajados */
.profile-info:active::after, .contact:active::after, .url-info:active::after, 
.mood:active::after, .table-section:active::after, .friends:active::after,
.comments:active::after, .blog-preview:active::after, .general-about:active::after,
.blurbs .inner > .section:first-of-type:active::after,
.blurbs .inner > .section:nth-of-type(2):active::after {

    /* Usamos clickGlobalShimmer para que el haz sea igual de ancho que el de entrada */
    animation: clickGlobalShimmer 2.5s ease-out 2s 1 !important;
    opacity: 1 !important;
    transition-delay: 2.5s;

}

}


/* =====================================================
   SHIMMER / HOVER — DESKTOP ROBUSTO (SIN CONTAMINAR BASE)
   ===================================================== */

/* =========================
   DESKTOP: mouse real
   ========================= */
@media (hover: hover) and (pointer: fine) {

  .profile-info,
  .contact,
  .url-info,
  .mood,
  .table-section,
  .friends,
  .comments,
  .blog-preview,
  .general-about {

    background-image: linear-gradient(
      110deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0.25) 50%,
      rgba(255,255,255,0) 60%
    );

    background-size: 250% 100%;
    background-position: -200% 0;
    transition: background-position 1.6s ease-out;
  }

  .profile-info:hover,
  .contact:hover,
  .url-info:hover,
  .mood:hover,
  .table-section:hover,
  .friends:hover,
  .comments:hover,
  .blog-preview:hover,
  .general-about:hover {
    background-position: 200% 0;
  }
}

/* =========================
   DESKTOP: fallback por tamaño
   ========================= */
@media (min-width: 1024px) {

  .profile-info,
  .contact,
  .url-info,
  .mood,
  .table-section,
  .friends,
  .comments,
  .blog-preview,
  .general-about {

    background-image: linear-gradient(
      110deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0.25) 50%,
      rgba(255,255,255,0) 60%
    );

    background-size: 250% 100%;
    background-position: -200% 0;
    transition: background-position 1.6s ease-out;
  }

  .profile-info:hover,
  .contact:hover,
  .url-info:hover,
  .mood:hover,
  .table-section:hover,
  .friends:hover,
  .comments:hover,
  .blog-preview:hover,
  .general-about:hover {
    background-position: 200% 0;
  }
}

/* =========================
   DESKTOP: fallback fuerte
   ========================= */
@media (min-width: 1200px) {

  .profile-info,
  .contact,
  .url-info,
  .mood,
  .table-section,
  .friends,
  .comments,
  .blog-preview,
  .general-about {

    background-image: linear-gradient(
      110deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0.25) 50%,
      rgba(255,255,255,0) 60%
    );

    background-size: 250% 100%;
    background-position: -200% 0;
    transition: background-position 1.6s ease-out;
  }

  .profile-info:hover,
  .contact:hover,
  .url-info:hover,
  .mood:hover,
  .table-section:hover,
  .friends:hover,
  .comments:hover,
  .blog-preview:hover,
  .general-about:hover {
    background-position: 200% 0;
  }
}

</style>