body {
    font-family: Times New Roman, serif;
    margin: 0;
    color: #03f5fd;

    /* Imagen de fondo */
    background-image: url("../imagenes/imagen2.jpg"); /* ruta de tu imagen */
     background-repeat: repeat;              /* se repite en mosaico */
    background-size: auto;                  /* mantiene tamaño original */
    background-color: #141e30;              /* color de respaldo */
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

.contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.header {
    width: 100%;
    background-image: url("../imagenes/imagen2.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 2rem;
}

/* MENÚ con imagen de fondo */
.menu {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3rem;
    background-image: url("../imagenes/fondo.jpg");
    background-size: cover;
    background-position: center;
    padding: 1rem;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

.menu a.activo {
    border-bottom: 0.3rem solid rgb(3, 209, 250);
}

/* PRESENTACIÓN */
.presentacion {
    max-width: 70%;
    text-align: center;
    line-height: 1.5;
}

body.inicio .contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    margin: 2rem auto;
    max-width: 900px;
}


/* IMAGEN */
.imagen img {
    border: 0.2rem solid #003366;
    border-radius: 0.5rem;
}

.footer {
    width: 100%;
    background-image: url("../imagenes/imagen2.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 1.5rem;
    font-size: 1.2rem;
}

.sarcasmo {
    background-color: rgba(9, 9, 9, 0.969);
    border: 0.3rem solid #060606fe;
    border-radius: 0.8rem;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 50%;
    text-align: center;
    font-style: italic;
    font-size: 1.5rem;
    font-weight: bold;
    color: #00d0ff;
    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
}



/*DEFINICION|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Fondo general de la página de definición */
body.definicion {
    background-image: url("../imagenes/fondo3.jpg"); /* tu imagen */
    background-size: cover;       /* que cubra todo el ancho y alto */
    background-position: center;  /* centrada */
    background-attachment: fixed; /* efecto de fondo fijo */ 
}

/* Bloques de componentes con fondo claro */
.componente {
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: rgba(255,255,255,0.9); /* fondo semitransparente para legibilidad */
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

.componente {
    background-color: rgba(2, 2, 2, 0.618);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(1, 204, 255, 0.98);
    text-align: center;
}

.componente img {
    width: 150px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 0.2rem solid #03d9ff82;
    cursor: pointer;
    transition: transform 0.2s;
}

.componente img:hover {
    transform: scale(1.05);
}

/*comapitibilidad*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||/
/* Compatibilidad en una sola columna centrada */
body.compatibilidad {
    font-family: "Segoe UI", Arial, sans-serif;
    background-image: url("../imagenes/fondo4.jpg"); /* tu imagen de fondo */
    background-size: cover;          /* que cubra toda la pantalla */
    background-position: center;     /* centrada */
    background-repeat: no-repeat;    /* sin repetición */
    background-attachment: scroll;   /* el fondo baja junto con el contenido */
    color: #f1f6f6;                  /* color de texto claro */
    margin: 0;
    padding: 0;
}
body.compatibilidad .contenedor {
    display: flex;
    flex-direction: column; /* todo en vertical */
    align-items: center;    /* centrado horizontal */
    text-align: center;     /* texto centrado */
    gap: 2rem;
    margin: 2rem auto;
    max-width: 900px;
}
body.compatibilidad .menu-relaciones {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 2rem auto;

    background-image: url("../imagenes/fondo4.jpg"); /* mismo fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.compatibilidad .menu-relaciones a {
    color: #f1f6f6;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: 0.3s;
    }

    body.compatibilidad .menu-relaciones a:hover {
    color: white;
    border-bottom: 0.2rem solid #03f5fd;
}
.menu-relaciones a {
    color: #f1f6f6;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: 0.3s;
}

.menu-relaciones a:hover {
    color: white;
    border-bottom: 0.2rem solid #03f5fd;
}

.tabla {
    color: #f1f6f6;
    }


    /*cpu-plca madre||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
    /* ====== ESTILOS GENERALES ====== */
body.cpu-placamadre{
    font-family: "Segoe UI", Arial, sans-serif;
    background: linear-gradient(135deg, #0a0f1c, #1c2a3a);
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

.contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

/* ====== TITULOS ====== */
h1 {
    text-align: center;
    color: #03f5fd;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
}

h2 {
    color: #ffd700;
    margin-top: 2rem;
    border-bottom: 2px solid #ffd700;
    padding-bottom: 0.3rem;
}

h3 {
    color: #f6eceb;
    margin-top: 1rem;
}

/* ====== LISTAS ====== */
ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

ul li {
    margin-bottom: 0.5rem;
}

/* ====== TABLAS ====== */
table.tabla-compatibilidad {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
}

table.tabla-compatibilidad th,
table.tabla-compatibilidad td {
    border: 1px solid #03f5fd;
    padding: 0.8rem;
    text-align: center;
}

table.tabla-compatibilidad th {
    background-color: #111;
    color: #03f5fd;
    font-weight: bold;
}

table.tabla-compatibilidad tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

table.tabla-compatibilidad tr:hover {
    background-color: rgba(3, 245, 253, 0.2);
    transition: 0.3s;
}

/* ====== ENLACES ====== */
a {
    color: #03f5fd;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #ffd700;
    text-decoration: underline;
}

.menu-relaciones a {
    background-color: #1c2a3a;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    border: 1px solid #03f5fd;
    transition: 0.3s;
}

.menu-relaciones a:hover {
    background-color: #03f5fd;
    color: #0a0f1c;
}
/* Contenedor de cuadros */
.fila-cuadros {
    display: flex;
    justify-content: center; /* centra los cuadros en la fila */
    gap: 2rem;               /* espacio entre cuadros */
    margin: 2rem 0;
    flex-wrap: nowrap;       /* evita que se apilen, siempre lado a lado */
}

.cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #03f5fd;
    border-radius: 8px;
    padding: 1.5rem;
    width: 45%; /* dos cuadros ocupan la fila */
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
    transition: transform 0.3s;
}

.cuadro:hover {
    transform: scale(1.05);
    background-color: rgba(3, 245, 253, 0.1);
}

.cuadro h3 {
    margin-top: 0;
    text-align: center;
    color: #ffd700;
}

/* ====== ENLACE DE REGRESO ====== */
.enlace-regreso {
    display: inline-block;
    background-color: #1c2a3a;       /* fondo oscuro */
    color: #03f5fd;                  /* texto azul brillante */
    padding: 0.8rem 1.5rem;          /* espacio interno */
    border-radius: 6px;              /* esquinas redondeadas */
    border: 2px solid #03f5fd;       /* borde azul */
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3); /* efecto glow */
}

.enlace-regreso:hover {
    background-color: #03f5fd;       /* cambia a azul brillante */
    color: #0a0f1c;                  /* texto oscuro */
    transform: scale(1.05);          /* efecto zoom */
}

.texto-centrado {
    text-align: center;   /* centra el texto */
    margin: 2rem auto;    /* agrega espacio arriba y abajo */
    max-width: 900px;     /* ancho máximo para que no se extienda demasiado */
    color: #f1f6f6;       /* color claro para contraste */
}

/* ====== ESTILOS SOLO PARA CPU ↔ Placa Madre ====== */
body.cpu-placamadre {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #e0e0e0;

    /* Fondo con imagen + overlay degradado */
    background: 
        linear-gradient(135deg, rgba(26, 36, 61, 0), rgba(28, 42, 58, 0)),
        url("../imagenes/fondo5.jpg"); /* cambia por tu imagen */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/*ram-placamaadre||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/* ====== ESTILOS SOLO PARA RAM ↔ Placa Madre ====== */
body.ram-placamadre {
    font-family: "Segoe UI", Arial, sans-serif;
     background: url("../imagenes/fondo6.jpg"); /* cambia por tu imagen */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

body.ram-placamadre .contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

body.ram-placamadre .fila-cuadros {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: nowrap; /* siempre lado a lado */
}

body.ram-placamadre .cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #03f5fd;
    border-radius: 8px;
    padding: 1.5rem;
    width: 45%;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
    transition: transform 0.3s;
}

body.ram-placamadre .cuadro:hover {
    transform: scale(1.05);
    background-color: rgba(3, 245, 253, 0.1);
}

body.ram-placamadre .cuadro h3 {
    margin-top: 0;
    text-align: center;
    color: #ffd700;
}

/*gpu-placa|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/* ====== ESTILOS SOLO PARA GPU ↔ Placa Madre ====== */
body.gpu-placamadre {
    font-family: "Segoe UI", Arial, sans-serif;
    background: url("../imagenes/fondo7.jpg"); /* cambia por tu imagen */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

body.gpu-placamadre .contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

/* Cuadros */
body.gpu-placamadre .fila-cuadros {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: nowrap;
}

body.gpu-placamadre .cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #03f5fd;
    border-radius: 8px;
    padding: 1.5rem;
    width: 45%;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
    transition: transform 0.3s;
}

body.gpu-placamadre .cuadro:hover {
    transform: scale(1.05);
    background-color: rgba(3, 245, 253, 0.1);
}

body.gpu-placamadre .cuadro h3 {
    margin-top: 0;
    text-align: center;
    color: #ffd700;
}
body.gpu-placamadre .cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #03f5fd;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 900px;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
}

body.gpu-placamadre .cuadro h3 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 1rem;
}

body.gpu-placamadre .cuadro ul {
    text-align: left;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

body.gpu-placamadre .cuadro li {
    margin-bottom: 0.5rem;
}


/* Enlace de regreso */
body.gpu-placamadre .enlace-regreso {
    display: inline-block;
    background-color: #1c2a3a;
    color: #03f5fd;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    border: 2px solid #03f5fd;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
}

body.gpu-placamadre .enlace-regreso:hover {
    background-color: #03f5fd;
    color: #0a0f1c;
    transform: scale(1.05);
}

.recuadro {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #03f5fd;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1100px;
    box-shadow: 0 0 15px rgba(3, 245, 253, 0.4);
}

.recuadro h3 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 1.5rem;
}

.tabla-compatibilidad {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.tabla-compatibilidad th, 
.tabla-compatibilidad td {
    border: 1px solid rgba(3, 245, 253, 0.3);
    padding: 0.8rem;
    text-align: center;
}

.tabla-compatibilidad th {
    background-color: rgba(3, 245, 253, 0.2);
    color: #03f5fd;
}

.tabla-compatibilidad tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/*disco-placa maadre|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
body.disco-placamadre {
    font-family: "Segoe UI", Arial, sans-serif;
    background:url("../imagenes/fondo8.jpg");
     background-repeat: repeat;              /* se repite en mosaico */
    background-size: auto;                  /* mantiene tamaño original */
    background-color: #141e30;              /* color de respaldo */
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

body.disco-placamadre .contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

body.disco-placamadre .fila-cuadros {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: nowrap;
}

body.disco-placamadre .cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #03f5fd;
    border-radius: 8px;
    padding: 1.5rem;
    width: 45%;
    box-shadow: 0 0 10px rgba(3, 245, 253, 0.3);
    transition: transform 0.3s;
}

body.disco-placamadre .cuadro:hover {
    transform: scale(1.05);
    background-color: rgba(3, 245, 253, 0.1);
}

body.disco-placamadre .cuadro h3 {
    text-align: center;
    color: #ffd700;
}

.recuadro h3 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 1.5rem;
}

.tabla-compatibilidad {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.tabla-compatibilidad th, 
.tabla-compatibilidad td {
    border: 1px solid rgba(3, 245, 253, 0.3);
    padding: 0.8rem;
    text-align: center;
}

.tabla-compatibilidad th {
    background-color: rgba(3, 245, 253, 0.2);
    color: #03f5fd;
}

.tabla-compatibilidad tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/*armado|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
body.armado-pc {
    font-family: "Segoe UI", Arial, sans-serif;
  background:url("../imagenes/fondo9.jpg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

body.armado-pc .contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

/*MANTENIMINETO||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
body.mantenimiento-pc {
   font-family: "Segoe UI", Arial, sans-serif;
  background:url("../imagenes/fondo10.jpg");
    background-size: 100% 100%;
    background-repeat: repeat;              /* se repite en mosaico */
    background-size: auto;                  /* mantiene tamaño original */
    background-color: #141e30;              /* color de respaldo */
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

body.mantenimiento-pc .contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

.fila-cuadros {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: nowrap; /* mantiene los cuadros en fila */
}

.cuadro {
    background-color: rgba(255, 255, 255, 0.05);
    border: 3px solid #03f5fd;
    border-radius: 12px;
    padding: 1.5rem;
    width: 45%; /* dos cuadros por fila */
    box-shadow: 0 0 15px rgba(3, 245, 253, 0.5);
    text-align: center;
}

.cuadro h3 {
    color: #fdfdfb;
    margin-bottom: 1rem;
}

.cuadro video {
    margin-top: 1rem;
    border: 2px solid #03f5fd;
    border-radius: 8px;
}