@font-face {
  font-family: 'HomeVideo';              
  src: url('fonts/home_video/HomeVideo.ttf') format('trueType'),
       url('fonts/home_video/HomeVideoBold.ttf') format('trueType'); 
  font-weight: normal;
  font-style: normal;
}

html {
    background: url("img/static.gif") repeat center;
}

body {
    position: relative;
    font-family: 'HomeVideo', sans-serif;
    margin: 20px;
    color: #fff; /* mejor contraste */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25); /* antes 0.45 */
    pointer-events: none;
    z-index: -1;
}

a {
font-family: inherit;
border: none;
outline: 1px dotted rgb(37, 37, 37);
outline-offset: -4px;
cursor: pointer;
background: hsl(0deg 0% 75%);
box-shadow:
    inset -1px -1px #292929,
    inset 1px 1px #fff,
    inset -2px -2px rgb(158, 158, 158),
    inset 2px 2px #ffffff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 5px 30px;
}

a:active {
box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #292929,
    inset -2px -2px #ffffff,
    inset 2px 2px rgb(158, 158, 158);
}

    nav a {
    color: black;        
    text-decoration: none;  
}

/* Slider centrado y con borde retro */
.slider {
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 350px;
    overflow: hidden;
    border: 4px solid rgb(158, 158, 158); /* Gris estilo retro */
    box-shadow: 4px 4px #000;  /* Sombra dura estilo Win98 */
    background: black;         /* Fondo negro para que no se vea vacío */
}

/* Slider estilo poster */
.slider {
    position: relative;
    width: 400px;   /* más angosto */
    height: 600px;  /* más alto */
    overflow: hidden;
    border: 6px solid rgb(158, 158, 158); /* marco grueso gris retro */
    box-shadow: 6px 6px #000;  /* sombra dura estilo Win98 */
    background: black;         /* fondo negro */
}

/* Ajuste automático de imágenes */
.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* se adapta manteniendo proporción */
    filter: contrast(1.2) saturate(1.3);
}

/* VHS scanlines */
.slider::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 2px,
        transparent 3px
    );
    pointer-events: none;
}

/* Botones estilo Win98 */
.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #c0c0c0;
    color: black;
    border: 2px solid #fff;
    box-shadow: 2px 2px #000;
    font-family: 'PixelFont', monospace;
    font-size: 14px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    background: #a7a7a7;
    color: black;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* ============================= */
/* WINDOWS MEDIA PLAYER 9 STYLE */
/* ============================= */

.wmp-player {
    width: 420px;
    margin: 40px auto;
    padding: 18px;
    border-radius: 26px;

    background: linear-gradient(
        180deg,
        #f4fbff 0%,
        #cfe9f9 45%,
        #9cc9e6 100%
    );

    border: 1px solid rgba(255,255,255,0.9);

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.9),
        inset 0 -10px 18px rgba(0,90,140,0.35),
        0 18px 35px rgba(0,0,0,0.45);

    position: relative;
}

/* Brillo superior (vidrio XP) */
.wmp-player::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.6),
        transparent 45%
    );
    pointer-events: none;
}

/* ============================= */
/* PANTALLA OVALADA */
/* ============================= */

.wmp-display {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;
    border-radius: 999px;

    background: linear-gradient(
        180deg,
        #1c6fa3,
        #0a3f63
    );

    color: #eaffff;
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;

    box-shadow:
        inset 0 0 12px rgba(0,255,255,0.8),
        0 4px 10px rgba(0,0,0,0.4);

    margin-bottom: 16px;
}

.wmp-time {
    font-size: 20px;
    font-weight: bold;
}

.wmp-meta {
    opacity: 0.9;
    font-size: 12px;
}

/* ============================= */
/* CONTROLES */
/* ============================= */

.wmp-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Rueda izquierda */
.wmp-wheel {
    width: 92px;
    height: 92px;
    border-radius: 50%;

    background: radial-gradient(
        circle at top,
        #ffffff,
        #b7dcf5 45%,
        #6aa7d6 80%
    );

    border: 1px solid rgba(255,255,255,0.9);

    box-shadow:
        inset 0 3px 6px rgba(255,255,255,0.95),
        inset 0 -6px 12px rgba(0,80,140,0.6),
        0 8px 18px rgba(0,0,0,0.45);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.wmp-wheel button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;

    background: radial-gradient(
        circle at top,
        #ffffff,
        #8fd2ff 55%,
        #2f7dbb 90%
    );

    box-shadow:
        inset 0 2px 4px #fff,
        inset 0 -3px 6px rgba(0,0,0,0.6),
        0 3px 6px rgba(0,0,0,0.4);

    font-size: 18px;
    color: white;
    cursor: pointer;
}

/* Botones pequeños */
.wmp-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;

    background: radial-gradient(
        circle at top,
        #ffffff,
        #a8ddff 50%,
        #3a8ec7 90%
    );

    box-shadow:
        inset 0 2px 4px #fff,
        inset 0 -3px 6px rgba(0,0,0,0.6),
        0 3px 6px rgba(0,0,0,0.4);

    color: white;
    cursor: pointer;
}

/* ============================= */
/* BARRA DE PROGRESO */
/* ============================= */

.wmp-progress {
    margin-top: 14px;
    height: 8px;
    border-radius: 999px;

    background: linear-gradient(
        180deg,
        #e8f6ff,
        #9fd0ef
    );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.8);
}

.wmp-progress span {
    display: block;
    height: 100%;
    width: 40%; /* progreso fake */
    border-radius: inherit;

    background: linear-gradient(
        180deg,
        #7dff6b,
        #2fcf3a
    );

    box-shadow:
        0 0 6px rgba(0,255,100,0.9);
}