/* Reseteo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "MS Sans Serif", "Tahoma", Arial, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #008080; /* El clásico verde azulado del escritorio de Win95 */

    /* =========================================================
       AQUÍ VA TU IMAGEN DE FONDO
       Descomenta la línea de abajo y pon la ruta de tu imagen
       ========================================================= */
    /* background-image: url('../img/tu-fondo.jpg'); */

    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Contenedor central (Mantiene el ancho fijo como en la imagen) */
.site-wrapper {
    width: 1000px;
    margin: 20px auto;
    background-color: #c0c0c0; /* Gris clásico de Windows */
    border: 2px solid #dfdfdf;
    border-right-color: #000000;
    border-bottom-color: #000000;
    box-shadow: 2px 2px 0 #000000;
}

/* Tipografía de enlaces */
a {
    color: #0000ff;
    text-decoration: underline;
}
a:hover {
    color: #ff0000;
}

/* Barra Network Superior */
.network-bar {
    background-color: #000080; /* Azul marino tipo barra de título */
    color: #ffffff;
    font-size: 10px;
    text-align: right;
    padding: 4px 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Encabezado */
.site-header {
    background: #c0c0c0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 2px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
}

.logo-placeholder {
    background-image: url('../img/banners/neo-city-figures.neocities.org.png');

    /* OPCIÓN 1 (Recomendada): 'cover' llena todo el espacio sin deformar a Optimus,
       pero recortará un poco el cielo y el pasto por arriba y por abajo */
    background-size: cover;

    /* OPCIÓN 2: Si borras 'cover' y usas '100% 100%', la imagen se estirará
       horizontalmente a la fuerza para encajar. (¡A veces esto le da un toque
       Neocities/Windows 95 aún más auténtico!)
       background-size: 100% 100%; */

    background-position: center;
    background-repeat: no-repeat;

    /* --- LA CLAVE PARA QUE OCUPE TODO EL ESPACIO --- */
    width: 100%;   /* Toma todo el ancho disponible de la franja gris */
    height: 150px; /* Puedes subir o bajar este número para hacer la franja más gruesa o delgada */

    /* Tus bordes estilo retro */
    background-color: #ffffff;
    border: 2px solid #808080; /* corregido: antes decía #808, que se leía como morado */
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #000000;

    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.header-ad-placeholder {
    width: 468px;
    height: 60px;
    background-color: #ffffff;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

/* Navegación */
.main-nav {
    background-color: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #808080;
    padding: 3px 0;
}
.main-nav ul {
    list-style: none;
    display: flex;
    padding: 3px 10px;
    gap: 6px;
}
.main-nav li {
    margin-right: 0;
}
.main-nav a {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    background-color: #c0c0c0;
    padding: 4px 10px;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
}
.main-nav a:hover {
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Layout Principal (Dos columnas) */
.content-container {
    display: flex;
    padding: 10px;
    gap: 15px;
    background-color: #c0c0c0;
}
.main-content {
    flex: 3; /* Toma más espacio */
}
.sidebar {
    flex: 1; /* Toma menos espacio */
}

/* Cajas de Contenido (Módulos tipo ventana Win95) */
.content-box, .sidebar-box {
    background-color: #c0c0c0;
    border: 2px solid #ffffff;
    border-right-color: #000000;
    border-bottom-color: #000000;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    margin-bottom: 15px;
}
.box-header {
    background: linear-gradient(90deg, #000080, #1084d0); /* Degradado clásico de barra de título activa */
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    text-transform: none;
    letter-spacing: 0.3px;
}

/* Cuadrícula de Marcas (Sección 1) */
.brands-grid {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background-color: #ffffff;
    margin: 8px;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}
.brand-item {
    text-align: center;
    transition: transform 0.1s ease;
}
.brand-item:hover {
    transform: translateY(-2px);
}
.brand-item .img-placeholder {
    width: 150px;
    height: 120px;
    background-color: #c0c0c0;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #dfdfdf;
    margin-bottom: 5px;
}
.brand-item p {
    color: #000000;
    font-size: 11px;
    font-weight: bold;
}

/* Cuadrícula de Figuras 4x4 (Sección 2) */
.figures-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 15px;
    background-color: #ffffff;
    margin: 8px;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}
.figure-card {
    text-align: center;
    cursor: pointer;
}
.figure-card .img-placeholder.square {
    width: 100%;
    aspect-ratio: 1 / 1; /* Mantiene cuadrados perfectos */
    background-color: #c0c0c0;
    background-size: cover;
    background-position: center;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    box-shadow: inset -1px -1px 0 #000000, inset 1px 1px 0 #dfdfdf;
    margin-bottom: 5px;
}
.figure-card:hover .img-placeholder.square {
    border-color: #000080;
    border-right-color: #1084d0;
    border-bottom-color: #1084d0;
}
.figure-card p {
    color: #000000;
    font-size: 11px;
    font-weight: bold;
}

/* Quick Links */
.links-grid {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color: #1a1a1a;
    color: #ccc;
}
.link-list {
    list-style-type: square;
    padding-left: 15px;
    font-size: 11px;
    line-height: 1.8;
}

/* SIDEBAR: Buscador y Patrocinadores */
.search-container {
    padding: 10px;
    display: flex;
    gap: 5px;
}
.search-container input {
    width: 100%;
    padding: 4px;
    font-size: 11px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    background-color: #ffffff;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
}
.search-container button {
    padding: 3px 10px;
    font-size: 11px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: bold;
    cursor: pointer;
    background-color: #c0c0c0;
    border: 2px solid #ffffff;
    border-right-color: #000000;
    border-bottom-color: #000000;
    box-shadow: inset -1px -1px 0 #808080;
}
.search-container button:active {
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    background-color: #c0c0c0;
}
.sponsor-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
}

/* Footer */
.site-footer {
    background-color: #c0c0c0;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
}
.footer-banner-placeholder {
    width: 468px;
    height: 60px;
    background-color: #ffffff;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-footer p {
    font-size: 11px;
    color: #000000;
}

/* Estilos para el contenedor de la radio */
.radio-container {
    width: 100%;
    height: 500px;
    background-color: #000;
    overflow: hidden;
    border: 2px solid #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
}

.radio-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================
   ESTILOS DE LA TARJETA VIRTUAL (MODAL)
   Ajustado a tu HTML real:
   .modal-contenido > .cerrar-modal + #modal-titulo + #modal-carrusel + .modal-opinion
   ========================================= */
.modal-oculto {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.55);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
}

/* La "ventana" completa, como un diálogo de Windows */
.modal-contenido {
    position: relative; /* ancla para el botón de cerrar */
    background-color: #c0c0c0;
    padding: 0;
    width: 80%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto; /* scroll si el contenido es largo */
    border: 2px solid;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #000000;
    border-bottom-color: #000000;
    box-shadow:
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #808080,
        4px 4px 14px rgba(0,0,0,0.55);
    color: #000000;
}

/* Barra de título azul, igual que .box-header del resto del sitio */
#modal-titulo {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    margin: 0;
    padding: 6px 32px 6px 10px; /* espacio a la derecha para el botón [X] */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón [X] de cerrar, estilo Windows, flotando sobre la barra azul */
.cerrar-modal {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 18px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #000000;
    border-bottom-color: #000000;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    z-index: 2;
}
.cerrar-modal:active {
    border-top-color: #000000;
    border-left-color: #000000;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: none;
}

/* Contenedor del carrusel de imágenes de la figura */
.carrusel-container {
    background-color: #1a1a1a; /* respaldo mientras carga el gif de fondo */
    background-size: cover;
    background-position: center;
    margin: 10px;
    padding: 4px;
    border: 2px solid;
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
    height: 280px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carrusel-container img {
    max-width: 100%;
    max-height: 100%;
    /* la foto se ve completa, sin recorte; el gif de fondo (asignado por JS)
       rellena el espacio sobrante en vez de dejarlo negro */
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    /* pequeña sombra para que la foto se distinga del gif de fondo */
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}

/* Zona de texto: biografía, review, conclusión, etc. */
.modal-opinion {
    background-color: #ffffff;
    margin: 10px;
    margin-top: 0;
    padding: 12px 14px;
    border: 2px solid;
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: inset 1px 1px 0 #000000;
}
.modal-opinion h3 {
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 13px;
    color: #000080;
    font-weight: bold;
    border-bottom: 1px solid #808080;
    padding-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.modal-opinion h3:first-child {
    margin-top: 0;
}
.modal-opinion p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    color: #000000;
}
.modal-opinion br {
    display: none; /* el espaciado ya lo dan los margin de h3/p */
}


.brand-icon {
    width: 150px;
    height: 120px;
    object-fit: cover; /* Esto hace que la imagen llene el cuadro sin deformarse */
    border: 2px solid #000;
    margin-bottom: 5px;
}