/* --- 1. AJUSTES GLOBALES --- */
body {
    background-color: #1f2b39;
    margin: 0;
    padding: 0;
    background-image: url('/imagenes/fondo.webp');
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto; /* Ajusta el fondo al ancho de la PC */
    font-family: Arial, sans-serif;
    color: white;
}

/* ELIMINAMOS el flex centrado de c_body que causaba el desorden */
.c_body {
    display: block; 
    width: 100%;
    display: block;
}

/* --- 2. CABECERA (PC PRIMERO) --- */
.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8%;
    background-color: rgba(31, 43, 57, 0.95); /* Un poco de transparencia */
    border-bottom: 2px solid white;
}

.logo {
    height: 60px;
    width: auto;
}

.navbar ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar li a {
    color: white;
    padding: 15px 20px;
    text-decoration: none;
    font-weight: bold;
}

/* --- 3. SECCIÓN DE PORTADA --- */
.contenedor_portada {
    padding: 10vh 8%; /* Espaciado dinámico */
    max-width: 1200px;
}

.titulo_portada {
    font-size: 5rem;
    margin: 0;
    line-height: 1.1;
    width: 50%; /* Evita que el texto tape la imagen del fondo */
}

.subtitulo_portada {
    font-size: 1.8rem;
    width: 45%;
    margin: 20px 0;
}

.boton1 {
    background-color: #ee7512;
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

/* --- 4. RUTA DE APRENDIZAJE (CELDAS) --- */
.contenedor-fila {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 50px 5%;
    flex-wrap: wrap; /* Permite que bajen en pantallas chicas */
}

.celda {
    background-color: white;
    color: #1f2b39;
    border-radius: 15px;
    width: 250px; /* Tamaño fijo en PC */
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s;
}

.celda:hover { transform: translateY(-10px); }

.imagen_celda {
    width: 100%;
    height: auto;
}



@media (max-width: 480px) {
    .celda {
        width: 90%; /* Una por fila en Celular */
    }
}

.boton-ver-mas {
    display: inline-block;
    background-color: #ee7512; /* Tu naranja vibrante */
    color: white !important;   /* Texto blanco */
    text-decoration: none;
    padding: 10px 20px;
    margin: 15px 0;           /* Espacio respecto al texto superior */
    border-radius: 25px;      /* Bordes redondeados como en tus modelos */
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease; /* Animación suave */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra sutil */
    width: fit-content;
    align-self: center;       /* Centra el botón dentro de la celda */
}

.boton-ver-mas:hover {
    background-color: #ff8c2e; /* Naranja más claro al pasar el mouse */
    transform: scale(1.05);    /* El botón crece un poquito */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.pie-pagina {
    background-color: #161f29; /* Un tono más oscuro que tu body */
    color: #cbd5e0;
    padding: 40px 8% 20px;
    margin-top: 50px;
    border-top: 3px solid #ee7512; /* Línea naranja para conectar con tu marca */
}

.footer-contenido {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-seccion {
    flex: 1;
    min-width: 250px;
}

.logo-footer {
    height: 40px;
    margin-bottom: 15px;
}

.enlaces-legales {
    list-style: none;
    padding: 0;
}

.enlaces-legales li {
    margin-bottom: 10px;
}

.enlaces-legales a {
    color: #cbd5e0;
    text-decoration: none;
    transition: 0.3s;
}

.enlaces-legales a:hover {
    color: #ee7512;
}

.footer-inferior {
    border-top: 1px solid #2d3748;
    padding-top: 20px;
    text-align: center;
    font-size: 0.8rem;
}

.afiliado-texto {
    font-style: italic;
    margin-top: 10px;
    color: #a0aec0;
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .footer-contenido {
        text-align: center;
        flex-direction: column;
    }
}

/* --- ESTILOS DE ARTÍCULO --- */
.articulo-post {
    max-width: 900px;
    margin: 40px auto;
    background: white;
    color: #333; /* Texto oscuro sobre fondo claro para mejor lectura */
    padding: 40px;
    border-radius: 8px;
}

.post-header h1 {
    font-size: 2.5rem;
    color: #1f2b39;
    margin-bottom: 10px;
}

.categoria {
    background: #ee7512;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* CAJA DE MONETIZACIÓN (AMAZON) */
.caja-producto {
    display: flex;
    align-items: center;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
    gap: 20px;
    background-color: #fafafa;
}

.boton-amazon {
    display: inline-block;
    background-color: #ff9900; /* Color oficial Amazon */
    color: black !important;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
}

/* ESPACIOS PARA ADSENSE */
.ad-placeholder {
    background: #f9f9f9;
    border: 1px dashed #ccc;
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    color: #999;
}

/* Responsive para la caja de producto */
@media (max-width: 600px) {
    .caja-producto { flex-direction: column; text-align: center; }
}



/* responsive para cabecera y portada*/

/* Esto oculta el check y el icono en la PC */
#menu-check, .hamburguesa {
    display: none;
}

/* El bloque de la "magia" del móvil */

/* --- 5. RESPONSIVE (CELULAR Y TABLET) --- */
@media (max-width: 768px) {
    /* Mantenemos el logo y la hamburguesa en la misma línea */
    .cabecera {
        flex-direction: row !important; 
        justify-content: space-between;
        padding: 15px 5%;
    }

    /* HACEMOS APARECER EL ICONO */
    .hamburguesa {
        display: flex !important; /* Forzamos que aparezca */
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1100;
    }

    .linea {
        width: 30px;
        height: 4px;
        background-color: white;
        border-radius: 2px;
    }

    /* OCULTAMOS EL CHECKBOX REAL */
    #menu-check {
        display: none;
    }

    /* MENÚ LATERAL QUE APARECE AL HACER CLIC */
    .navbar {
        position: fixed;
        top: 0;
        right: -100%; /* Escondido a la derecha */
        width: 70%;
        height: 100vh;
        background-color: #161f29;
        transition: 0.4s ease;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    .navbar ul {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    /* MUESTRA EL MENÚ CUANDO EL CHECK ESTÁ ACTIVO */
    #menu-check:checked ~ .navbar {
        right: 0;
    }

    /* AJUSTES DE TEXTO PARA MÓVIL */
    .titulo_portada {
        font-size: 2.5rem;
        width: 100%;
        text-align: center;
    }

    .subtitulo_portada {
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
    }

    .contenedor_portada {
        text-align: center;
        padding-top: 50px;
    }

    .celda {
        width: 90%; /* Una por fila en móviles para que se vea grande */
        margin-bottom: 20px;
    }
}


.seccion-productos {
    padding: 60px 8%;
    background-color: #f8f9fa; /* Fondo claro para contrastar con el resto de la web */
    color: #1f2b39;
    text-align: center;
}

.titulo-seccion {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.grid-productos {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.tarjeta-producto {
    background: white;
    border-radius: 15px;
    padding: 25px;
    width: 280px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    position: relative;
    transition: 0.3s;
}

.tarjeta-producto:hover {
    transform: translateY(-5px);
}

.img-producto {
    width: 120px;
    height: auto;
    margin-bottom: 15px;
}

.etiqueta-recomendado {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ee7512;
    color: white;
    font-size: 0.7rem;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.estado-enlace {
    display: block;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #ee7512;
    font-weight: bold;
    font-style: italic;
}

/* --- ESTILOS DE CONTACTO --- */
.contenedor-contacto {
    margin-top: 30px;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grupo-input {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 8px;
}

.grupo-input label {
    font-weight: bold;
    color: #1f2b39;
}

.grupo-input input, .grupo-input textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}

.grupo-input input:focus, .grupo-input textarea:focus {
    outline: 2px solid #ee7512;
    border-color: transparent;
}

/* --- AJUSTE DE IMÁGENES EN CAJAS DE PRODUCTO --- */

/* Esto asegura que la imagen nunca sea más ancha que su contenedor */
.producto-img img{
    width: 100%; 
    height: auto;
    /* EL TRUCO: Limitamos el ancho máximo en PC */
    max-width: 220px; 
    /* Centramos la imagen si sobra espacio */
    display: block;
    margin: 0 auto; 
    /* Un pequeño borde redondeado para que se vea mejor */
    border-radius: 8px; 
}

/* --- AJUSTE FINO PARA MÓVIL --- */
@media (max-width: 768px) {
    /* En celular, permitimos que sea un poco más grande para que se vea bien */
    .producto-img img {
        max-width: 280px; 
        margin-bottom: 15px; /* Espacio entre la imagen y el título */
    }
}

/* --- ESPACIADO DE LISTAS EN ARTÍCULOS --- */
.articulo-post ul li, 
.articulo-post ol li {
    margin-bottom: 25px !important; /* Espacio entre ítems */
    line-height: 1.8 !important;    /* Espacio entre líneas del mismo ítem */
    display: list-item !important;  /* Asegura el comportamiento de lista */
}

/* Ajuste para que las fórmulas MathML no hereden espacios extraños */
.articulo-post li math {
    margin: 0 5px;
    vertical-align: middle;
}

.fundamentos-electronica {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Fondo claro para resaltar las tarjetas */
    text-align: center;
}

.fundamentos-electronica h2 {
    color: #1f2b39;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.fundamentos-electronica > p {
    color: #555;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor Grid */
.grid-fundamentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Estilo de las tarjetas (enlaces) */
.grid-fundamentos a {
    background-color: #1f2b39; /* El azul oscuro de tu marca */
    color: #ffffff;
    text-decoration: none;
    padding: 30px 20px;
    border-radius: 12px;
    border-bottom: 5px solid #ee7512; /* Línea naranja distintiva */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.grid-fundamentos a h3 {
    color: #ee7512; /* Título en naranja */
    margin-bottom: 15px;
    font-size: 1.4rem;
    transition: color 0.3s ease;
}

.grid-fundamentos a p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #d1d1d1;
}

/* Efecto Hover (al pasar el ratón) */
.grid-fundamentos a:hover {
    transform: translateY(-10px); /* La tarjeta sube ligeramente */
    background-color: #2a3a4d; /* Se aclara un poco el fondo */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.grid-fundamentos a:hover h3 {
    color: #ffffff; /* El título cambia a blanco al hacer hover */
}

.articulo-post a {
    color: #ee7512;
    text-decoration: none;
    font-weight: 600;
}

.articulo-post a:hover {
    text-decoration: underline;
}

.tabla-multimetro {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
}

.tabla-multimetro th {
    background-color: #ee7512;
    color: white;
    padding: 12px;
    text-align: left;
}

.tabla-multimetro td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.tabla-multimetro tr:hover {
    background-color: #fdf2e9;
}

.recomendacion-rapida {
    background: #fdf2e9;
    border-left: 5px solid #ee7512;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}

.tabla-colores {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
}

.tabla-colores th,
.tabla-colores td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.tabla-colores th {
    background-color: #ee7512;
    color: white;
}

.ruta-aprendizaje {
    padding: 60px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.ruta-aprendizaje h2 {
    margin-bottom: 15px;
}

.grid-ruta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.paso-ruta {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.paso-ruta:hover {
    transform: translateY(-5px);
}

.boton-ruta {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 18px;
    background-color: #ee7512;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.boton-ruta:hover {
    background-color: #d8650f;
}

.ruta-aprendizaje {
    padding: 60px 20px;
    text-align: center;
    background-color: #eef2f5;
    color: #1f2b39; /* Color oscuro coherente con tu diseño */
}

.ruta-aprendizaje h2 {
    color: #1f2b39;
}

.ruta-aprendizaje p {
    color: #444;
}

.ruta-aprendizaje,
.ruta-aprendizaje * {
    color: #1f2b39;
}

.grid-ruta {
    max-width: 1200px;
    margin: 40px auto 0 auto;
}