:root {
    --z-base: 10;
    --z-content: 20;
    --z-sticky: 100;
    --z-overlay: 9000;
    --z-fixed-ui: 9999;
    --z-modal: 10000;
    --z-splash: 99999;
    --z-cursor: 100000;
}

#intro-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-fixed-ui);
    
    background: linear-gradient(45deg, #ff6600, #ffaa00, #ff3300, #ff8800);
    background-size: 400% 400%;
    animation: auroraBG 15s ease infinite;
    
    overflow-y: auto; font-family: 'Times New Roman', Times, serif; color: black;
    overflow-x: hidden;

    
}
@keyframes auroraBG { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

.intro-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    /*overflow-x: hidden;*/
    margin-left: 0;
}


.intro-shell {
    position: relative; 
    width: 100%;
    max-width: 800px;
    margin-top: 2vh;

    z-index: 15; 
}



.reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.aero-glass-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.1) 41%, rgba(0,0,0,0) 100%);
    pointer-events: none; 
    z-index: var(--z-overlay);
    mix-blend-mode: overlay;
}

.aero-bubble {
    position: fixed;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.4) 100%);
    border-radius: 50%; 
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.1);
    pointer-events: none; 
    z-index: var(--z-overlay);
    
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.aero-bubble.ambient-bubble {
    bottom: -50px;
    animation: floatBubble ease-in infinite;
}
.aero-bubble.interactive-bubble {
    opacity: 0;
}
.aero-bubble.interactive-bubble.animate-bubble {
    animation: floatBubble ease-in forwards;
}
@keyframes floatBubble { 
    0% { transform: translateZ(0) translateY(0) scale(0.5); opacity: 0; } 
    15% { opacity: 0.8; transform: translateZ(0) translateY(-20px) scale(1); } 
    100% { transform: translateZ(0) translateY(-120vh) scale(1.5); opacity: 0; } 
}

.wordart-text {
        font-family: 'Arial Black', 'Impact', sans-serif;
        font-size: clamp(2.5rem, 8vw, 4rem) !important;
        font-style: italic;
        
        background: linear-gradient(180deg, #ffffff 0%, #00d2ff 40%, #0055ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        
        position: relative;
        z-index: 1;
        display: inline-block;
        transform: rotate(-3deg);
        margin: 15px 0;
        letter-spacing: -2px;
        
        -webkit-text-stroke: 1px #ffffff;
        text-shadow: 2px 2px 5px rgba(0, 85, 255, 0.6); 
    }
.rainbow-text {
        background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        
        position: relative;
        z-index: 1;
        display: inline-block;
        
        animation: rainbowAnim 3s linear infinite;
        font-weight: bold; 
    }
@keyframes rainbowAnim { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

.tab-navigation {
    display: flex; 
    justify-content: space-between; 
    gap: 20px;
    background: transparent; 
    border: none; 
    box-shadow: none; 
    padding: 0; 
    margin: 30px 0;
    position: sticky;
    top: 60px;
    z-index: var(--z-sticky);
}
.aero-btn {
    flex: 1; padding: 15px; font-size: 1.2rem; font-weight: bold; font-family: 'Arial', sans-serif; cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(150,200,255,0.6) 50%, rgba(50,150,255,0.8) 51%, rgba(0,100,255,1) 100%);
    border: 1px solid #0055ff; border-radius: 25px; color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 4px 15px rgba(0,50,150,0.5), inset 0 3px 5px rgba(255,255,255,1);
    transition: all 0.2s;
}
.aero-btn:hover {
    transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,100,255,0.8), inset 0 3px 8px rgba(255,255,255,1);
}
.aero-btn.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,150,0,0.6) 50%, rgba(255,100,0,0.9) 51%, rgba(200,50,0,1) 100%);
    border-color: #ff3300; pointer-events: none;
    box-shadow: 0 0 20px rgba(255,100,0,0.8), inset 0 2px 5px rgba(255,255,255,1);
}

#mini-winamp {
    position: fixed; bottom: 20px; left: 20px; z-index: var(--z-modal);
    background: #c0c0c0; border: 2px outset #fff; padding: 5px; width: 200px; box-shadow: 3px 3px 0 #000;
}
.winamp-title { background: #000080; color: white; padding: 2px 5px; font-family: 'Courier New', monospace; font-size: 0.8rem; margin-bottom: 5px; }
#winamp-play { width: 100%; background: #e0e0e0; border: 2px outset #fff; cursor: pointer; font-weight: bold; }






.marquee-box {
    background: #0000ff;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    border: 2px inset #fff;
    margin-bottom: 20px;
    padding: 5px;
}

.site-header {
    text-align: center;
    border-bottom: 4px double #000;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.title-bg-box {
    background: #c0c0c0; /* Gris clásico de la web 1.0 */
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 5px;
    border: 3px outset #ffffff; /* Borde 3D clásico */
    box-shadow: 4px 4px 0px #000; /* Sombra dura sin difuminar */
}

.subtitle-bg-box {
    background: #ffffff;
    display: inline-block;
    padding: 3px 10px;
    margin-top: 5px;
    border: 2px solid #000000;
}

.title-bg-box .wordart-text {
    margin: 5px 0; 
}

.subtitle-bg-box .rainbow-text {
    font-style: italic;
    font-size: 1.3rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.blog-entry {
    border: 2px outset #fff;
    background: #c0c0c0; 
    padding: 10px;
    margin-bottom: 30px;
}

.blog-title {
    background: linear-gradient(to right, #000080, #1084d0); 
    color: white;
    padding: 2px 5px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.raw-content {
    font-size: 1.1rem;
    line-height: 1.4;
    overflow-x:initial;
}
.highlight { background: #ffff00; color: red; } 

.ugly-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #000;
    margin-top: 10px;
    background: #fff;
    table-layout: fixed;
}
.ugly-table td {
    border: 1px solid #000;
    padding: 5px;
    font-family: 'Courier New', monospace;
    text-align: center;
}


.folder-trigger {
    width: 100%;
    background: #000080;
    color: white;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 10px;
    border: 2px outset #fff;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s ease; 
}
.folder-trigger:hover {
    background: #1084d0;
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #000;
}
.folder-trigger.active {
    background: #000; 
    color: #ffff00;  
    border-style: inset; 
}

.folder-trigger.active:hover {
    background: #333; 
    color: #fff;    
    cursor: alias;   
}

.hidden-folder-content {
    display: none; 
    background: #e0e0e0;
    border: 2px solid black;
    border-top: none;
    padding: 10px;
    animation: slideDownFolder 0.3s ease-out;
}

.hidden-folder-content.open {
    display: block;
    animation: openFolder 0.3s ease-out;
}

@keyframes slideDownFolder {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-block-extra {
    display: flex;
    flex-direction: column;
    gap: 30px; 
    margin-top: 20px;
}

.retro-diary-entry {
    background-color: #000; 
    border: 2px inset #808080;
    padding: 15px;
    font-family: 'Courier New', monospace;
    color: #00ff00;
    font-size: 0.9rem;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
    position: relative;
}

.diary-header {
    background: #333;
    color: #fff;
    padding: 2px 5px;
    font-size: 0.8rem;
    margin: -15px -15px 15px -15px; 
    border-bottom: 1px solid #808080;
}

.comment-style {
    color: #888;
    font-weight: bold;
}

.highlight-text {
    background: #004400;
    color: #fff;
    padding: 0 4px;
}

.blink-cursor {
    animation: blink 1s step-end infinite;
}

.product-ad-container {
    background-color: #e0e0e0; 
    border: 3px double #000; 
    padding: 20px;
    font-family: 'Arial', sans-serif; 
    color: #000;
    position: relative;
}

.product-ad-container::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: #fff #fff #aaa #aaa; 
    box-shadow: -2px 2px 2px rgba(0,0,0,0.2);
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #000;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.product-header h2 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -1px;
    font-family: 'Impact', sans-serif; 
    text-transform: uppercase;
}

.tm {
    font-size: 0.8rem;
    vertical-align: super;
}

.version-tag {
    background: #000;
    color: #fff;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    transform: rotate(-5deg); 
}

.product-body p {
    line-height: 1.4;
    font-size: 0.95rem;
    margin-bottom: 10px;
    text-align: justify;
}

.slogan-box {
    margin: 25px 0;
    border: 2px solid #000;
    text-align: center;
    background: #fff;
    box-shadow: 5px 5px 0 #888;
    padding: 10px;
    transform: scale(1.02); 
}

.slogan-top {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 5px;
    font-weight: bold;
}

.slogan-main {
    font-size: 1.6rem;
    font-weight: 900;
    color: #000080;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    padding: 5px 0;
}

.slogan-bottom {
    font-size: 0.7rem;
    margin-top: 5px;
    color: #888;
    letter-spacing: 1px;
}

.glitch-separator hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 0;
}



.catalog-section {
    border: 3px dashed red;
    padding: 15px;
    background: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.catalog-title {
    font-size: 2rem;
    background: red;
    color: yellow;
    display: inline-block;
    padding: 5px 20px;
    transform: rotate(-2deg);
    margin-bottom: 20px;
    border: 2px solid black;
}

.soulcard-frame {
    display: inline-block;
    border: 10px ridge #c0c0c0; 
    background: #000;
    padding: 5px;
    margin: 20px 0;
}

#start-virtual-btn {
    background: #c0c0c0;
    border: 4px outset #fff;
    color: #000;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 15px 10px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}
#start-virtual-btn:active { border-style: inset; }
#start-virtual-btn:hover { background: #dcdcdc; }

.web-ring {
    text-align: center;
    margin-top: 40px;
    border-top: 2px solid #000;
    padding-top: 10px;
}
.pixel-icon { width: 30px; vertical-align: middle; }

.intro-content-wrapper {
    width: 100%;
    max-width: 800px;
    background: #ffffcc; 
    border: 3px solid black;
    box-shadow: 10px 10px 0px blue; 
    padding: 20px;
    margin-bottom: 0; 
    position: relative;
    z-index: 10;
    overflow: visible !important;
}


.social-sidebar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.1); 
    padding: 10px;
    border: 1px inset #808080;
}

.social-sidebar a {
    display: block;
    width: 40px;
    height: 40px;
    background: #c0c0c0; 
    border: 2px outset #fff; 
    box-shadow: 3px 3px 0 #000; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    margin: 0 auto;
}

.social-sidebar a:hover {
    transform: scale(1.1) translateY(-2px);
    background: #fff;
    cursor: pointer;
}

.social-sidebar a:active {
    border-style: inset;
    transform: translate(2px, 2px);
}

.social-sidebar img {
    width: 32px;
    height: auto;
    transition: transform 0.2s;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
}


.tab-navigation {
    display: flex;
    justify-content: space-between;
    background: #c0c0c0; 
    border: 3px outset #fff;
    padding: 10px;
    margin: 35px 0; 
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5); 
}
.tab-navigation .win95-btn {
    flex: 1; 
    margin: 0 5px;
    padding: 15px 10px;
    font-size: 1.2rem;
    font-weight: 900;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    background: #e0e0e0;
    border: 3px outset #fff;
    color: #000;
    transition: all 0.1s;
}
.tab-navigation .win95-btn.active {
    background: #000080;
    color: #fff;
    border: 3px inset #000;
    pointer-events: none;
    text-shadow: 1px 1px 0 #000;
}

.tab-navigation .win95-btn:active {
    border: 3px inset #fff;
    background: #ccc;
}


#start-virtual-btn {
    background: #c0c0c0;
    border: 4px outset white;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 15px;
    width: 100%;
    cursor: pointer;
    box-shadow: 5px 5px 0px black;
}
#start-virtual-btn:active {
    border-style: inset;
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px black;
}


.heavenly-section {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 120px 0;
    
    margin-top: -90px;
    margin-bottom: -90px;
    
    /* background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); */
}

.cloud-border-bottom, .cloud-border-top {
    position: absolute;
    left: 0; width: 100%; height: 50px;
    background-size: cover;
    pointer-events: none;
}
.cloud-border-bottom { bottom: -20px; background-image: url('../assets/img/cloud\ base\ 2.png');}
.cloud-border-top { top: -20px; background-image: url('../assets/img/cloud\ base\ 3.png'); transform: scaleY(-1); }

.cloud-floating {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    
    left: 50%;
    transform: translateX(-50%);
    
    min-width: 100%;
    object-fit: cover;
}

.cloud-top {
    top: -170px;
    width: 220%;
    max-width: 1400px;
    z-index: 10;
    
    transform: translateX(-50%) scaleY(-1); 
}

.cloud-bottom {
    bottom: -150px; 
    width: 290%; 
    max-width: 1600px; 
    z-index: 10;
}

.cloud-halo {
    position: absolute;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 250%; 
    max-width: 1600;
    
    z-index: 1;
    opacity: 0.8;
    
    animation: pulseCloud 6s infinite alternate ease-in-out;
}

@keyframes pulseCloud {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    to { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; }
}

@keyframes drift {
    from { transform: translateX(0px); }
    to { transform: translateX(20px); }
}

.mystic-title {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 3px 3px 0px #000;
    margin-bottom: 20px;
    z-index: 30;
}

.mystic-title, 
.card-story-box,
.cloud-stage {
    position: relative;
    z-index: 30;
}



.cloud-pedestal {
    position: relative;
    width: 300px;
    height: 250px;
    margin: 0 auto 30px auto;
}

.cloud-base {
    position: relative;
    /*bottom: 0;
    left: 50%;
    transform: translateX(-50%); */
    width: 100%;
    z-index: 2;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2));
}

.top-block {
    border-bottom: none;
    padding-bottom: 150px;
    mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.bottom-block {
    border-top: none;
    padding-top: 60px;
    margin-top: 0;
    mask-image: linear-gradient(to top, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

.footer-block {
    margin-top: 60px;
}

.cloud-stage {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
}

.hidden-card {
    width: 320px;
    max-width: 90vw;
    position: absolute;
    bottom: 50px;
    z-index: 5;
    
    transform: translateY(150px) scale(0.8) rotate(-5deg);
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hidden-card.reveal {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
    z-index: 3;
    animation: floatingIdle 3s ease-in-out infinite alternate 1.5s;
}

@keyframes floatingIdle {
from { transform: translateY(0px) rotate(0deg); }
    to { transform: translateY(-20px) rotate(2deg); }
}

/*.floating-card-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px; /* Ajusta según tu PNG 
    z-index: 2;
    animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translate(-50%, 0px) rotate(0deg); }
    50% { transform: translate(-50%, -15px) rotate(3deg); }
} */

.card-story-box {
    position: relative;
    z-index: 30;
    background: #fff;
    border: 2px dashed #000;
    padding: 15px;
    max-width: 500px;
    margin: 20px auto;
    transform: rotate(1deg);
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}

.story-lead { font-size: 1.2rem; font-style: italic; margin-bottom: 10px; }
.specs-grid { font-weight: bold; font-family: 'Courier New', monospace; font-size: 1.1rem; color: blue; }
.story-small { font-size: 0.9rem; margin-top: 10px; opacity: 0.7; }


.shop-wrapper {
    border-top: 5px double black;
}

.offer-layout {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    background: #eee;
    padding: 10px;
    border: 1px solid #999;
}

.out-of-stock-box {
    border: 2px solid red;
    padding: 5px;
    background: #ffdddd;
    text-align: center;
    transform: rotate(-2deg);
}

.blink-red { color: red; font-weight: bold; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }



#intro-layer::-webkit-scrollbar {
    width: 16px; 
    height: 16px;
}

#intro-layer::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-left: 1px solid #fff;
    border-right: 1px solid #808080;
}

#intro-layer::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}

#intro-layer::-webkit-scrollbar-thumb:hover {
    background-color: #dcdcdc;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: auto;
    background: transparent;
}

body, html {
    cursor: url('../assets/img/cursors/Normal\ Select.cur'), default; 
}

a, button, .folder-trigger, .nav-btn, .social-sidebar a {
    cursor: url('../assets/img/cursors/Link\ Select.cur'), pointer; 
}

input, textarea, .raw-content {
    cursor: url('../assets/img/cursors/Text\ Select.cur'), text;
}


.mouse-trail {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-cursor);
    background-repeat: no-repeat;
    opacity: 0.8;
    transition: transform 0.1s, opacity 0.5s;
}

.mouse-trail.fade-out {
    opacity: 0;
    transform: scale(0.5);
}

.mouse-trail.trail-default {
    width: 12px; height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='19' viewBox='0 0 12 19'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M1,1 L1,17 L5,13 L8,18 L10,17 L7,12 L11,12 Z' /%3E%3C/svg%3E");
}

.mouse-trail.trail-pointer {
    width: 18px; height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='21' viewBox='0 0 18 21'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M5,9 L5,2 C5,1 7,1 7,2 L7,8 L9,8 L9,3 C9,2 11,2 11,3 L11,8 L13,8 L13,4 C13,3 15,3 15,4 L15,10 L17,10 C17,16 13,20 9,20 C4,20 1,16 1,11 L1,8 C1,7 3,7 3,8 L3,11 L5,11 Z' /%3E%3C/svg%3E");
    transform: translate(-4px, -2px); /* Ajuste milimétrico del dedo índice */
}

.mouse-trail.trail-text {
    width: 11px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='20' viewBox='0 0 11 20'%3E%3Cpath stroke='white' stroke-width='3' d='M2,2 L9,2 M5.5,2 L5.5,18 M2,18 L9,18' /%3E%3Cpath stroke='black' stroke-width='1' d='M2,2 L9,2 M5.5,2 L5.5,18 M2,18 L9,18' /%3E%3C/svg%3E");
    transform: translate(-3px, -5px);
}




.status-bar {
    position: fixed; 
    top: 20px; 
    
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    
    background: #c0c0c0;
    border: 2px outset #fff;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
    
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: var(--z-modal);
    white-space: nowrap;
}


@media (max-width: 600px) {
    .status-bar {
        font-size: 0.7rem;
        padding: 4px 8px;
        width: 90%;
        justify-content: center;
    }
}

.status-separator { color: #808080; }

/* --- EFECTOS ATMOSFÉRICOS (Se aplican con JS al contenedor principal) --- */
/* Base del widget (aseguramos posición para que el aura se centre) */
#aero-widget {
    z-index: 1000;
    transition: background-color 0.5s, border-color 0.5s, color 0.5s;
    transform-style: preserve-3d; 
}

/* EL AURA (Pseudo-elemento común) */
#aero-widget::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-1px);
    width: 120%;  /* Un poco más ancho que el widget */
    height: 150%;
    border-radius: 50%;
    opacity: 0;   /* Invisible por defecto */
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: -1;
}

/* 1. SOL / DÍA: El "God Ray" (Rayo de Dios) */
#aero-widget.weather-sunny {
    background: rgb(255, 255, 240);
    border-color: gold;
    color: #554400;
    text-shadow: 0 0 2px white;
}

#aero-widget.weather-sunny::before {
    opacity: 1;
    /* Un gradiente radial que simula el sol pegando fuerte */
    background: radial-gradient(
        circle, 
        rgba(255, 223, 0, 0.8) 0%, 
        rgba(255, 140, 0, 0.4) 40%, 
        transparent 70%
    );
    animation: sunBreathing 4s infinite alternate;
}

@keyframes sunBreathing {
    from { transform: translate(-50%, -50%) translateZ(-1px) scale(0.9); opacity: 0.7; }
    to { transform: translate(-50%, -50%) translateZ(-1px) scale(1.1); opacity: 1; }
}

/* 2. LLUVIA: Efecto Mojado */
#aero-widget.weather-rainy {
    background: rgb(200, 220, 255);
    border-color: #4a90e2;
    color: #002244;
    border-style: double;
}

#aero-widget.weather-rainy::before {
    opacity: 1;
    width: 110%;
    height: 100%;
    border-radius: 10px;
    /* Fondo azulado con "gotas" simuladas por gradientes radiales */
    background-color: rgba(0, 100, 255, 0.1);
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0,0,0,0));
    background-size: 200px 200px;
    box-shadow: 0 0 20px rgba(0, 119, 255, 0.4);
    animation: rainDropMove 20s linear infinite;
}

@keyframes rainDropMove {
    from { background-position: 0 0; }
    to { background-position: 0 200px; } /* Las gotas bajan lento */
}

/* 3. NOCHE: Glow Cyberpunk */
#aero-widget.weather-night {
    background: #000;
    color: #0f0;
    border-color: #0f0;
}

#aero-widget.weather-night::before {
    opacity: 1;
    background: radial-gradient(
        circle, 
        rgba(0, 255, 0, 0.4) 0%, 
        transparent 70%
    );
    box-shadow: 0 0 15px #0f0;
}


/* --- ESTILOS DEL GUESTBOOK --- */
.guestbook-section {
    margin-top: 40px;
    border: 4px groove #c0c0c0;
    background: #fff;
}

.guestbook-header {
    background: #000080;
    color: #fff;
    padding: 5px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
}

.guestbook-frame {
    width: 100%;
    min-height: 300px;
    background: #e0e0e0;
    border-top: 2px solid #000;
}





/* --- BOTÓN WIN95 GENÉRICO --- */
.win95-btn {
    background: #c0c0c0;
    border: 2px solid #fff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    padding: 8px 16px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
}
.win95-btn:active {
    border: 2px solid #404040;
    border-right-color: #fff;
    border-bottom-color: #fff;
    transform: translate(2px, 2px);
    box-shadow: none;
}
.win95-btn:disabled {
    color: #808080;
    cursor: wait;
}

/* --- MODAL (OVERLAY) --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

/* --- VENTANA FLOTANTE --- */
.win95-window {
    width: 90%;
    max-width: 640px;
    background: #c0c0c0;
    border: 2px outset #fff;
    box-shadow: 10px 10px 0 #000;
    display: flex;
    flex-direction: column;
}

.window-header {
    background: #000080;
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
}

.close-btn {
    background: #c0c0c0;
    border: 1px outset #fff;
    font-weight: bold;
    cursor: pointer;
    width: 25px;
    height: 22px;
    line-height: 18px;
}

.window-body {
    padding: 10px;
    text-align: center;
    /* Para que el contenido (iframe/video) no se salga */
    overflow: hidden; 
}

#chaos-content {
    width: 100%;
    /* Altura mínima para que Doom o YouTube entren bien */
    height: 400px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

/* El iframe debe llenar ese espacio */
#chaos-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#chaos-content img {
    max-width: 100%;
    border: 2px inset #fff;
}


html.no-scroll, body.no-scroll {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    position: fixed !important;
    touch-action: none;
}



/* --- FOOTER DEL CAOS --- */
.chaos-footer {
    text-align: center;
    padding: 20px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    margin-top: 50px;
}

.retro-hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin-bottom: 20px;
}

/* --- BADGES (88x31) --- */
.ring-container {
    background: #000;
    border: 3px inset #fff;
    padding: 10px;
    margin: 0 auto 20px auto;
    max-width: 600px;
    color: #0f0;
}

.ring-title {
    margin-bottom: 10px;
    text-shadow: 2px 2px #ff0000;
    animation: blinkTitle 1s infinite;
}

@keyframes blinkTitle {
    50% { color: #fff; }
}

.badge-strip img {
    margin: 0 5px;
    vertical-align: middle;
    border: 1px solid #fff;
}

.ring-nav {
    margin-top: 10px;
    font-size: 0.9rem;
}

.ring-nav a {
    color: #00ffff;
    text-decoration: none;
    margin: 0 5px;
}
.ring-nav a:hover {
    background: #000080;
    color: #fff;
}

/* --- CONTADOR DE VISITAS (ODÓMETRO) --- */
.visitor-counter-wrapper {
    background: #000;
    display: inline-block;
    padding: 10px 20px;
    border: 2px outset #808080;
    color: #c0c0c0;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

.odometer {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    color: #ff0000;
    background: #200000;
    border: 3px inset #500000;
    padding: 5px 15px;
    letter-spacing: 5px;
    text-shadow: 0 0 5px #ff4444;
    margin: 5px 0;
}



/* --- EFECTO TV APAGÁNDOSE (CRT OFF) --- */
@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1, 0.001) translate3d(0, 0, 0);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.001) translate3d(0, 0, 0);
        opacity: 0;
    }
}

#intro-layer.crt-shutdown-effect {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
    pointer-events: none; 
}

/* Aseguramos que el fondo detrás de la intro sea negro para que el apagado se vea real */
body {
    background-color: #000; 
    overflow-x: hidden;
}





/* --- AERO SPLASH SCREEN (Bienvenida) --- */
#mschf-splash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: #ffffff; z-index: var(--z-splash);
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; perspective: 1000px;
    transition: opacity 0.5s ease;
}

#giant-aero-btn {
    width: 80vw; max-width: 900px; height: 40vh; max-height: 400px;
    border-radius: 200px; border: 8px solid #ffffff;
    background: linear-gradient(180deg, #b3e5fc 0%, #03a9f4 45%, #0288d1 50%, #01579b 100%);
    box-shadow: 
        inset 0 30px 50px rgba(255,255,255,0.8), 
        inset 0 -30px 50px rgba(0,0,0,0.4), 
        0 20px 50px rgba(0,0,0,0.3);
    cursor: pointer; position: relative; z-index: 10;
    overflow: hidden; transition: transform 0.1s;
}
#giant-aero-btn:active { transform: scale(0.95); }

/* Reflejo de plástico curvo superior */
.glare {
    position: absolute; top: 2%; left: 5%; width: 90%; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    border-radius: 200px 200px 0 0; pointer-events: none;
}

.btn-text {
    font-family: 'Trebuchet MS', 'Lucida Grande', sans-serif;
    font-size: clamp(1.5rem, 5vw, 4rem); font-weight: 900;
    color: #fff; text-shadow: 2px 4px 10px rgba(0,0,0,0.6);
    position: relative; z-index: 2; letter-spacing: -1px;
}

#effect-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 20;
}



/* EFECTO 1: CD BARRIDO */
.retro-cd-wipe {
    position: fixed;
    top: 200vh; 
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 150vw; 
    min-width: 800px; 
    
    z-index: var(--z-splash);
    pointer-events: none;
    filter: drop-shadow(0px -10px 40px rgba(0,0,0,0.8)); 
}

@media (min-width: 800px) {
    .retro-cd { margin-left: -600px; }
}

.cd-roll-animation {
    animation: cdRoll 1.2s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

@keyframes cdRoll {
    0% { bottom: -150vh; transform: rotate(0deg) scale(0.8); }
    100% { bottom: 150vh; transform: rotate(1080deg) scale(1.1); } 
}

.btn-smashed {
    animation: buttonSmashed 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    pointer-events: none;
}

@keyframes buttonSmashed {
    0% { transform: translateY(0) rotate(0) scale(1); }
    100% { transform: translateY(-150vh) rotate(-115deg) scale(0.4); opacity: 0; }
}




/* EFECTO 2: INUNDACIÓN */
.btn-explode {
    animation: buttonBurst 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    pointer-events: none;
}
@keyframes buttonBurst {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.2); opacity: 0.9; filter: brightness(1.5); }
    100% { transform: scale(2.5); opacity: 0; filter: blur(10px) brightness(2); }
}

.frutiger-flood {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0vh;
    background: linear-gradient(180deg, rgba(162, 238, 255, 0.9) 0%, rgba(0, 153, 255, 0.95) 30%, rgba(0, 85, 204, 1) 100%);
    transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 15;
    box-shadow: inset 0 20px 40px rgba(255,255,255,0.6);
}

.frutiger-flood::before {
    content: ""; position: absolute; top: -39px; left: 0; width: 200%; height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='rgba(255, 255, 255, 0.4)'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' fill='rgba(162, 238, 255, 0.9)'/%3E%3C/svg%3E") repeat-x;
    background-size: 50% 100%;
    animation: waveSlide 4s linear infinite;
    filter: drop-shadow(0 -5px 10px rgba(255,255,255,0.8));
}

@keyframes waveSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.flood-bubble {
    position: absolute; bottom: -50px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.4) 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5), 0 5px 15px rgba(0,100,255,0.3);
    animation: riseUpWater ease-in forwards;
}

@keyframes riseUpWater {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translateY(-20vh) scale(1); }
    100% { transform: translateY(-130vh) scale(1.5); opacity: 0; }
}




/* EFECTO 3: VIRUS MSCHF */
.aero-error-window {
    position: absolute;
    width: 320px;
    height: 140px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 
        inset 0 0 2px rgba(255,255,255,1), 
        0 10px 25px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0) scale(0.9);
    
    animation: popInError 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popInError {
    to { transform: translateZ(0) scale(1); }
}

.aero-error-titlebar {
    height: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(180,220,255,0.6) 50%, rgba(130,190,255,0.7) 51%, rgba(160,210,255,0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.6);
}

.aero-error-title {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #003366;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.aero-error-close {
    width: 38px; height: 18px;
    background: linear-gradient(180deg, #ff7b7b 0%, #e00000 45%, #cc0000 50%, #ff4d4d 100%);
    border: 1px solid #7a0000;
    border-radius: 3px;
    color: white; font-size: 10px; font-weight: bold; font-family: sans-serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6);
}

.aero-error-content {
    flex-grow: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    display: flex;
    align-items: center;
    padding: 15px;
}

.aero-error-icon {
    font-size: 32px;
    margin-right: 15px;
    filter: drop-shadow(0 2px 4px rgba(200,0,0,0.4));
}

.aero-error-text {
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
    color: #000;
}
.aero-error-window.error-hide {
    opacity: 0 !important;
    transform: translateZ(0) scale(0.8) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}




/* EFECTO 4: CRISTAL ROTO */
.crack-flash {
    animation: impactFlash 0.1s forwards;
}
@keyframes impactFlash {
    0% { filter: invert(1) brightness(2); transform: scale(0.98); }
    100% { filter: invert(0) brightness(1); transform: scale(1); }
}

.glass-shard-premium {
    position: absolute;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 2px solid rgba(255,255,255,1);
    border-left: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 15px 25px rgba(0,0,0,0.3), inset 0 0 20px rgba(255,255,255,0.6);
    transform-origin: center;
    pointer-events: none;
}

.btn-shard-premium {
    position: absolute;
    background: linear-gradient(180deg, #b3e5fc 0%, #03a9f4 45%, #0288d1 50%, #01579b 100%);
    border: 2px solid #ffffff;
    border-radius: 5px;
    box-shadow: 
        inset 0 10px 15px rgba(255,255,255,0.6), 
        inset 0 -10px 15px rgba(0,0,0,0.3), 
        0 5px 10px rgba(0,0,0,0.3);
    transform-origin: center;
    pointer-events: none;
    animation: shatterFallAnim 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.shatter-fall {
    animation: shatterFallAnim 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes shatterFallAnim {
    0% { 
        opacity: 1; 
        transform: translate3d(0, 0, 0) rotate(0); 
    }
    100% { 
        opacity: 0; 
        transform: translate3d(var(--move-x), 150vh, var(--move-z)) rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z)); 
    }
}




.aero-philosophy-card {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
    padding: 25px;
    
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 120, 255, 0.15), inset 0 0 15px rgba(255,255,255,0.5);
    
    animation: fadeInCard 1s ease-out forwards;
}

.pentagon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    animation: floatPentagon 4s ease-in-out infinite;
}

.css-pentagon {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00d2ff 0%, #3a7bd5 100%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    position: relative;
    z-index: 2;
}

/* Sombra brillante que resplandece detrás del pentágono */
.pentagon-glow {
    position: absolute;
    top: 10%; left: 10%; width: 80%; height: 80%;
    background: #00d2ff;
    filter: blur(15px);
    z-index: 1;
    opacity: 0.7;
}

@keyframes floatPentagon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); } 
}

/* --- TEXTOS --- */
.philosophy-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.philosophy-title {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 1.4rem;
    color: #005599;
    margin: 0;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
}

.philosophy-content p {
    font-family: 'Verdana', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #222;
    margin: 0;
}

.philosophy-content strong {
    color: #004488;
    font-weight: bold;
}

@media (max-width: 600px) {
    .aero-philosophy-card {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }
}


.css-pentagon, .pentagon-glow {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.aero-philosophy-card:hover .css-pentagon {
    transform: rotate(720deg) scale(1.15);
}

.aero-philosophy-card:hover .pentagon-glow {
    transform: rotate(720deg) scale(1.15);
    opacity: 1;
    filter: blur(20px);
}



.wordart-text {
    font-size: clamp(2rem, 10vw, 4rem) !important;
}

.css-marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
}
.css-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeScroll 15s linear infinite;
}
@keyframes marqueeScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Marquee más rápido para los badges (reemplazo del segundo <marquee>) */
.css-marquee-fast {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.css-marquee-fast .badge-strip {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeScroll 10s linear infinite;
}
.css-marquee-fast:hover .badge-strip {
    animation-play-state: paused;
}

/* Clases extraídas del HTML (Separación de responsabilidades) */
.header-metadata { text-align: right; font-size: 0.8rem; }
.mt-10 { margin-top: 10px; }
.bio-avatar-container { float: left; margin-right: 15px; margin-bottom: 5px; border: 2px solid black; }
.bio-avatar-img { width: 100px; height: 120px; display: block; object-fit: cover; }
.clearfix { clear: both; }

.table-header-cell { background: #e0e0e0; }
.centered-gif { width: 200px; display: block; margin: 0 auto; }
.underline-text { text-decoration: underline; }
.quote-style { text-align: center; font-style: italic; border-top: 1px solid #000; padding-top: 10px; margin-top: 10px; }
.centered-block { display: block; margin: 0 auto; }

.visor-opacity { width: 80px; opacity: 0.5; }
.text-xs { font-size: 0.7rem; }
.highlight-yellow { background: yellow; display: inline-block; padding: 2px; }

.system-alert { background: #000080; color: white; text-align: center; }
.inverted-title { background: #fff; color: #000; }

.runner-gif { margin-top: 40px; margin-bottom: -60px; width: 25%; display: block; }

.lucky-wrapper { text-align: center; margin: 30px 0; }
.btn-icon { width: 20px; vertical-align: middle; }
.status-text { font-size: 0.8rem; margin-top: 5px; color: blue; }
.lavalamp-gif { display: block; margin: 10px auto; }
.hub-star { color: yellow; }
.sub-text { font-size: 0.7rem; color: #888; }
.footer-copy { margin-top: 20px; font-size: 0.8rem; position: relative; }
.mailbox-gif { position: absolute;} 
.mail-icon { width: 15px; vertical-align: middle; }


@media (max-width: 650px) {
    .tab-navigation {
        flex-direction: row; 
        padding: 5px;
        gap: 5px;
    }
    .tab-navigation .win95-btn {
        margin: 0;
        padding: 10px 2px;
        font-size: 0.75rem;
        letter-spacing: -0.5px; 
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        word-wrap: break-word; 
    }

    .odometer {
        font-size: 1.2rem;
        letter-spacing: 2px;
        padding: 5px 10px;
    }

    .visitor-counter-wrapper {
        width: 90%;
        max-width: 350px;
        padding: 10px;
    }

    .site-header img {
        max-width: 90%;
        height: auto;
    }

    /* --- FIX 2: ESCALADO DE TEXTOS Y AVATAR --- */
    /* Reduce la fuente base para mejorar la legibilidad y estructura en pantallas chicas */
    .raw-content, 
    .philosophy-content p, 
    .product-body p, 
    .diary-content p, 
    .ugly-table td {
        font-size: 0.85rem; 
        line-height: 1.5;
    }
    /* Achica la foto de perfil del Notepad */
    .bio-avatar-img {
        width: 75px;
        height: 90px;
    }
    .bio-avatar-container {
        margin-right: 10px;
    }
    /* Títulos secundarios ajustados */
    .product-header h2 {
        font-size: 1.4rem;
    }

    /* --- FIX 3: RECALCULO DE NUBES Y ESPACIOS --- */
    /* Acerca las nubes al centro y amplía su porcentaje para cubrir los bordes al encoger la pantalla */
    .heavenly-section {
        padding: 80px 0;
        margin-top: -60px;
        margin-bottom: -60px;
    }
    .cloud-top {
        top: -80px;
        width: 350%; /* Compensa la pérdida de ancho en móviles */
    }
    .cloud-bottom {
        bottom: -80px;
        width: 400%;
    }
    .cloud-stage {
        height: 300px; /* Reduce la altura total del escenario */
    }
    .hidden-card {
        width: 250px; /* Tarjeta proporcional al nuevo escenario */
        bottom: 30px;
    }

    /* --- FIX 4: CONTENEDOR DE OFERTA ROTO --- */
    /* Evita el desborde lateral del título */
    .catalog-title {
        font-size: 1.3rem; 
        padding: 5px 10px;
        width: 90%; 
        box-sizing: border-box;
    }
    /* Pasa los elementos de la oferta de fila a columna (uno debajo del otro) concentrados al medio */
    .offer-layout {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    .out-of-stock-box {
        width: 100%;
        box-sizing: border-box;
    }
    /* Fuerza al GIF de "Sales" a no superar el ancho de la caja */
    .shop-wrapper .centered-block { 
        max-width: 100%;
        height: auto;
    }
    /* Achica el botón de "Iniciar Prueba Virtual" */
    #start-virtual-btn {
        font-size: 1.1rem;
        padding: 12px 10px;
    }

    .runner-gif {
        width: 55%; 
        margin: 20px auto -60px auto; 
    }
    #aero-widget.status-bar {
        width: 90vw; 
        max-width: 350px;
        left: -5%;
        right: 0;
        margin: 0 auto;
        padding: 8px 5px;
        font-size: 0.7rem; 
        white-space: normal; 
        flex-wrap: wrap; 
        justify-content: center;
        box-sizing: border-box;
    }

    #aero-widget.status-bar::before {
        width: 100%; 
        height: 100%;
        border-radius: 12px; 
    }

    /* --- FIX: BOTÓN DEL SPLASH MSCHF --- */
    #mschf-splash #giant-aero-btn {
        width: 85vw; 
        /* En lugar de 'vh', anclamos la altura al 'vw' para forzar la forma de píldora horizontal siempre */
        height: 25vw; 
        min-height: 70px;
        max-width: 350px;
        max-height: 100px;
        border-radius: 50px; /* Borde ovalado estricto */
        border-width: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mschf-splash #giant-aero-btn .btn-text {
        font-size: 1.1rem; 
        line-height: 1.2;
        padding: 0 10px;
    }
    #mschf-splash #giant-aero-btn .glare {
        border-radius: 50px 50px 0 0;
    }
    .slogan-main {
        font-size: 1.4rem; /* Reducimos drásticamente el tamaño del texto */
        line-height: 1.2;
        padding: 5px 0;
        word-wrap: break-word; /* Si la pantalla es ultra chica, fuerza el salto de línea seguro */
    }
    .slogan-box {
        padding: 10px; /* Le damos aire interno para que no asfixie los bordes */
    }
}

.aero-bubble, 
.pentagon-wrapper, 
.frutiger-flood::before {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}