@charset "utf-8";

/* --- ESTILOS ORIGINALES --- */
.titulos { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FFF; font-weight: bold; }
body { 
    background-image: url(images/fondo_rayas.png); 
    margin: 0; 
    font-size: 12px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #333; 
}
.izquierda { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; color: #666666; text-decoration: none; }
.parrafo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align: justify; color: #666666; }
.botonera { font-size: 11px; color: #666; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
a.botonera:hover { color: #000; }
.destac { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; font-weight: bold; }
.visitada { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #F93; text-decoration: none; }
.pie { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; }
.mail { color: #373737; text-decoration: none; }
a.mail:hover { color: #F93; }
.vermas { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000; text-decoration: none; }
.cinco { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; padding-left: 5px; }
.parafondo { font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #333; padding: 5px; }
.parafondo2 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #333; padding: 15px; text-align: justify; }
.parche { color: #FFF; font-size: 9px; }

/* CORRECCIÓN: dimensiones fijas sólo en escritorio */
.image { 
    display: block;
    width: 993px; 
    height: 421px; 
}


/* ============================================================
   AJUSTES PARA MONITOR (más de 801px)
   ============================================================ */
@media screen and (min-width: 801px) {

    table[width="800"],
    table[width="993"] {
        width: 993px !important;
        margin: 0 auto !important;
        display: table !important;
    }

    td { display: table-cell !important; }

    /* Mostrar barritas en escritorio */
    .linea-separadora,
    img[src*="barrita1.jpg"] {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
    }

    /* Ocultar elementos de móvil */
    #btn-menu,
    .icon-menu,
    .cerrar-menu { display: none !important; }
}


/* ============================================================
   AJUSTES PARA DISPOSITIVOS MÓVILES (800px o menos)
   ============================================================ */
@media screen and (max-width: 800px) {

    /* 1. Reset de estructura: todo en bloque */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Forzar centrado en celdas y texto */
    td, p, span, div {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 5;
        padding-bottom: 10;
    }

    /* 3. IMAGEN RESPONSIVE — clase .image adaptada al dispositivo */
        .entrada {
        display: block !important;
        width: 100% !important;       /* ocupa todo el ancho disponible */
        max-width: 100% !important;   /* nunca desborda el viewport */
        height: auto !important;      /* mantiene la proporción original */
        margin: 0 auto !important;
    
    }

    .image {
        display: block !important;
        width: 100% !important;       /* ocupa todo el ancho disponible */
        max-width: 100% !important;   /* nunca desborda el viewport */
        height: auto !important;      /* mantiene la proporción original */
        margin: 0 auto !important;
        padding-bottom: 2px !important;
        padding-top:  2px !important;
    }

    /* 4. Todas las imágenes sin flotado */
    img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        float: none !important;
    }

    /* 5. Datos de contacto */
    .izquierda {
        display: block !important;
        padding: 20px 10px 10px 10px !important;
        line-height: 1.6 !important;
        font-size: 1.5rem !important;
    }

    /* 6. Destacado ajustado a móvil */
    .destac {
        font-size: 1.5rem !important;
        color: #666666;
        font-weight: bold;
    }
    .parrafo {
        font-size: 1.5rem;
    }
    .pie {
        font-size: 1.5rem;
    }
     .botonera {
        font-size: 1.5rem;
         padding: 10px;
    }
     .visitada {
        font-size: 1.5rem;
         padding: 10px;
    }
    .vermas {
    display: block !important;
    background: #c6c6c6;
    font-size: 1.5rem;
    padding: 15px;
    font-weight: bold;
    }
    /* 7. Galería de proyectos centrada */
    table[bgcolor="#eeeeee"],
    table[bgcolor="#F4F4F4"],
    table[cellpadding="1"] {
        display: table !important;
        margin: 20px auto !important;
        float: none !important;
    }

    /* 8. Redes sociales en fila horizontal */
    #menu table {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        width: auto !important;
        margin: 10px auto !important;
    }

    #menu table td {
        display: inline-block !important;
        width: auto !important;
        padding: 0 10px !important;
    }

    #menu td table,
    td[width="12%"] table {
        display: inline-table !important;
        margin: 10px auto !important;
        width: auto !important;
        float: none !important;
    }

    #menu td table td {
        display: table-cell !important;
        width: auto !important;
        padding: 0 8px !important;
    }

    /* 9. Logo centrado */
    #logo_bit {
        display: block !important;
        margin: 10px auto 20px auto !important;
        float: none !important;
        width: 75% !important;
    }

    /* 10. Ocultar barritas decorativas en móvil */
    img[src*="barrita"],
    .actual img,
    td[height="5"] {
        display: none !important;
    }

    /* 11. Botón menú hamburguesa */
    .icon-menu {
    display: block !important;
    background: #333;
    color: #fff;
    padding: 15px;
    margin: 10px 5% !important;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 2rem;
    }

    /* 12. Menú de navegación en capa */
    .menu-navegacion {
        display: none;
        position: fixed;
        background: rgba(255, 255, 255, 0.98);
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 9999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
    }

    #btn-menu:checked ~ .menu-navegacion {
        display: flex !important;
    }
}