/* ==========================================
   1. ESTILOS GENERALES Y BASE
   ========================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

h1 { font-size: 4em; }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
p { font-size: 1.25em; }
li { font-size: 1.2em; text-align: left; }

html {
    scroll-behavior: smooth;
}

/* ==========================================
   2. HEADER Y NAVEGACIÓN
   ========================================== */
header {
    position: fixed; 
    top: 0;          
    width: 100%; 
    background-image: url('Images/Tecnología\ 3.PNG');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(10px); 
    color: rgb(7, 0, 101);   
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 10px;
    z-index: 1000; /* <--- CLAVE: Esto hace que el header siempre esté al frente */
}

.navbar {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre enlaces */
    list-style: none;
    padding: 15px;
    margin: 0;
   
}

.navbar a{
    padding: 8px 10px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: rgb(255, 255, 255);   
    font-size:x-large;
}

.navbar a:hover{
    background-color: rgba(83, 126, 255, 0.819);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Estilos del Logo */
.logo img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 135px;
}

/* ==========================================
   3. SECCIÓN SERVICIOS (FONDO OSCURO INTEGRADO) 🌌
   ========================================== */
html body .servicios { 
    text-align: center !important;
    padding: 60px 0px 100px 0px !important; 
    margin-top: 140px !important; 
    background: linear-gradient(135deg, #001f42 0%, #000c1a 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important; 
    box-sizing: border-box !important;
}

html body .servicios h2 {
    font-family: 'Montserrat', sans-serif !important; /* Añadida tipografía premium */
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    color: #FFD700 !important; 
    font-size: 2.8em !important;
    font-weight: 700 !important;
}

html body .servicios p {
    font-family: 'Poppins', sans-serif !important; /* Añadida tipografía premium */
    color: #e0e0e0 !important;
    font-size: 1.3em !important;
    margin-bottom: 35px !important;
}

/* ==========================================
   4. CONTENEDOR Y TARJETAS ACTUALIZADAS 🔮
   ========================================== */
.categorias-container {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important; 
    gap: 25px !important;
    max-width: 1200px !important;
    margin: 20px auto 0 auto !important; 
    padding: 0 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background: transparent !important; 
}

.categorias-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

.tarjeta-categoria {
    flex: 1 !important;
    min-width: 280px !important;
    max-width: 350px !important;
    background-color: #002b5c !important; 
    border: 2px solid #00408a !important;
    border-radius: 15px !important;
    padding: 40px 25px !important; /* Un poco más de espacio interno */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important; /* Quita el molesto subrayado de enlace */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.tarjeta-categoria:hover {
    transform: translateY(-5px) !important;
    border-color: #FFD700 !important; 
}

/* Iconos Dorados */
.icono-categoria {
    font-size: 3.5rem !important;
    color: #FFD700 !important;
    margin-bottom: 15px !important;
}

/* Títulos de las tarjetas (Proyectos, Capacitaciones, Programas) */
.tarjeta-categoria h3 {
    font-family: 'Montserrat', sans-serif !important; /* 🔥 Ahora sí aplica la nueva fuente */
    color: #ffffff !important;
    font-size: 1.65rem !important; /* 💎 Aumentado para mayor jerarquía */
    font-weight: 700 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

/* Descripciones de las tarjetas */
.tarjeta-categoria p {
    font-family: 'Poppins', sans-serif !important; /* 🔥 Ahora sí aplica la nueva fuente */
    color: #f1f5f9 !important; 
    font-size: 1.15rem !important; /* 💎 Aumentado para una lectura perfecta */
    line-height: 1.6 !important; /* Espaciado cómodo entre líneas */
    margin: 0 !important;
}

/* ==========================================
   5. BLOQUES INDIVIDUALES DE SOFTWARE (CONTACAD, ETC.)
   ========================================== */
.otros {
    width: 100%;
}

.proyectos {
    background-image: url('Images/Tecnología.jpg');
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    padding: 20px;
    margin-top: -10px; 
    margin-bottom: 25px;
}

.actualización, .avalúos, .devolución, .devolución2, .digitalización, 
.facturación, .pago, .traslado, .asesor, .capacitacion, .contacad, 
.simagcad, .simprecad, .sittcad, .nomicad, .unicad {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.actualización, .devolución, .digitalización, .pago, .asesor, 
.contacad, .simprecad, .nomicad {
    background-color: rgb(137, 153, 204);
}

.avalúos, .devolución2, .facturación, .traslado, .capacitacion, 
.simagcad, .sittcad, .unicad {
    background-color: rgb(76, 98, 156);
}

.actualización h1, .asesor h1, .capacitacion h1, .contacad h1, 
.simagcad h1, .simprecad h1, .sittcad h1, .nomicad h1, .unicad h1 {
    margin-bottom: 20px;
    font-size: 5.2em;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgb(7, 0, 101);
}

.actualización h2, .avalúos h2, .devolución h2, .devolución2 h2, 
.digitalización h2, .facturación h2, .pago h2, .traslado h2, 
.asesor h2, .capacitacion h2, .contacad h2, .simagcad h2, 
.simprecad h2, .sittcad h2, .nomicad h2, .unicad h2 {
    margin-bottom: 20px;
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 2px;
}

.actual1, .avalúos1, .devol1, .devol2, .digit1, .factu1, .pago1, 
.tras1, .ases1, .capa1, .contacad1, .simag1, .simpre1, .sitt1, .nomi1, .uni1 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.actual1 img, .avalúos1 img, .devol1 img, .devol2 img, .digit1 img, 
.factu1 img, .pago1 img, .tras1 img, .ases1 img, .capa1 img, 
.contacad1 img, .simag1 img, .simpre1 img, .sitt1 img, .nomi1 img, .uni1 img {
    width: 80%;
    max-width: 1000px; 
    height: auto;
    border-radius: 15px;
    display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.actual1 img:hover, .avalúos1 img:hover, .devol1 img:hover, .devol2 img:hover, 
.digit1 img:hover, .factu1 img:hover, .pago1 img:hover, .tras1 img:hover, 
.ases1 img:hover, .capa1 img:hover, .contacad1 img:hover, .simag1 img:hover, 
.simpre1 img:hover, .sitt1 img:hover, .nomi1 img:hover, .uni1 img:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.explica-actualización, .explica-avalúos, .explica-devolución, .explica-devolución2, 
.explica-digitalización, .explica-facturación, .explica-pago, .explica-traslado, 
.explica-asesoria, .explica-capacitacion, .explica-contacad, .explica-simagcad, 
.explica-simprecad, .explica-sittcad, .explica-nomicad, .explica-unicad {
    max-width: 700px;
    padding: 0 15px;
}

.explica-actualización p, .explica-avalúos p, .explica-devolución p, .explica-devolución2 p, 
.explica-digitalización p, .explica-facturación p, .explica-pago p, .explica-traslado p, 
.explica-asesoria p, .explica-capacitacion p, .explica-contacad p, .explica-simagcad p, 
.explica-simprecad p, .explica-sittcad p, .explica-nomicad p, .explica-unicad p {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

.explica-actualización span, .explica-avalúos span, .explica-devolución span, 
.explica-devolución2 span, .explica-digitalización span, .explica-facturación .span, 
.explica-pago .span, .explica-traslado .span, .explica-asesoria span, 
.explica-capacitacion span, .explica-contacad span, .explica-simagcad span, 
.explica-simprecad span, .explica-sittcad span, .explica-nomicad span, .explica-unicad span {
    font-weight: 700;
    color: #ffffff;
}

.check, .resaltar, .pension, .pension2 {
    font-weight: 800;
    color: #000149;
}

/* ==========================================
   6. SECCIONES GRID INFERIORES
   ========================================== */
.facturas, .constancias, .registrar, .finanzas {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    color: white;
    flex-wrap: wrap;
}

.facturas { background-color: rgb(0, 44, 91); }
.constancias { background-color: rgb(2, 33, 51); }
.registrar { background-color: rgb(29, 59, 147); }
.finanzas { background-color: rgb(0, 108, 147); }

.facturas1, .constancias1, .registrar1, .finanzas1 {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 280px;
}

.facturas1 img, .constancias1 img, .registrar1 img, .finanzas1 img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
    display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.facturas1 img:hover, .constancias1 img:hover, .registrar1 img:hover, .finanzas1 img:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.explica-facturas, .explica-constancias, .explica-registrar, .explica-finanzas {
    flex: 1;
    max-width: 500px;
    min-width: 280px;
    text-align: left;
}

.explica-facturas h2, .explica-constancias h2, .explica-registrar h2, .explica-finanzas h2 {
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.explica-facturas p, .explica-constancias p, .explica-registrar p, .explica-finanzas p {
    font-size: 1.3em;
    line-height: 1.7;
    margin: 0;
}

.explica-facturas .factura, .explica-constancias .constancia, 
.explica-registrar .registra, .explica-finanzas .finanza {
    font-weight: 700;
    color: #FFD700;
}

/* ==========================================
   7. FOOTER Y BOTÓN VOLVER ARRIBA
   ========================================== */
footer {
    background: linear-gradient(to right, #000000, #0055e9);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
    padding: 15px;
    color: white;
    text-align: center;
}

.footer-logo img { height: 40px; }
.footer-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.footer-item img { width: 20px; height: 20px; }

.btn-volver-arriba {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: #002c5b; 
    color: #FFD700; 
    border: 2px solid #FFD700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    text-decoration: none;
    z-index: 9999; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-volver-arriba:hover {
    background-color: #FFD700;
    color: #002c5b; 
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.4);
}


.contenedor-carrusel-imagenes {
    display: flex !important;
    flex-direction: row !important; /* Alineación horizontal fija */
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important; /* Si la pantalla es muy chica, se adaptan suavemente */
    width: 100% !important;
    padding: 20px !important;
}

/* Control estricto de las imágenes para que no se deformen */
.contenedor-carrusel-imagenes img {
    width: 100% !important;
    max-width: 300px !important; /* Ajusta el tamaño de las tarjetas del sistema */
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.proyectos, .asesorias, .programas {
    background: linear-gradient(180deg, #000c1a 0%, #00152d 50%, #00020a 100%) !important;
    color: #ffffff !important;
    padding: 80px 40px !important;
    border-bottom: 1px solid #002244; /* Línea sutil de separación */
}

/* Forzar que los títulos principales de cada bloque resalten */
.proyectos h1, .asesorias h1, .programas h1 {
    color: #FFD700 !important; /* Dorado para hacer juego con las tarjetas */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2.5rem !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* Títulos secundarios (los nombres de los softwares o trámites) */
.proyectos h2, .asesorias h2, .programas h2 {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
}
/* ==========================================
   8. AJUSTES RESPONSIVOS CRUCIALES (TABLETS Y MÓVILES) 📱
   ========================================== */
@media screen and (max-width: 991px) {
    
    /* 1. HEADER: Evitamos que rompa el flujo o tape cosas */
    html body header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    html body .navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 8px 0 0 0 !important;
    }

    html body .navbar li a {
        font-size: 15px !important; 
        padding: 4px 6px !important;
    }

    /* 2. SECCIÓN SERVICIOS: 🔥 Más margen superior para que NO lo tape el menú */
    html body .servicios {
        margin-top: 180px !important; /* Espacio extra crucial para el celular */
        padding: 50px 20px 60px 20px !important;
        background: linear-gradient(135deg, #001f42 0%, #000c1a 100%) !important; /* Forzamos fondo oscuro */
        color: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    html body .servicios h2 {
        font-size: 1.8rem !important; 
        color: #FFD700 !important;
        text-align: center !important;
    }

    html body .servicios p {
        font-size: 1.1rem !important;
        color: #e0e0e0 !important;
        text-align: center !important;
    }

    /* 3. CONTENEDOR DE TARJETAS: Una debajo de la otra */
    html body .categorias-container {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 25px !important;
        padding: 0 !important;
        width: 100% !important;
        background: transparent !important;
    }

    /* 4. TARJETAS INDIVIDUALES: 🔥 Forzamos el look azul corporativo */
    html body .tarjeta-categoria {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        background-color: #002b5c !important; /* Fondo azul restaurado */
        border: 2px solid #00408a !important;
        border-radius: 15px !important;
        padding: 30px 20px !important;
        text-decoration: none !important; /* Adiós al subrayado azul de enlace */
        box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
        box-sizing: border-box !important;
    }

    /* Iconos y textos dentro de las tarjetas en el celular */
    html body .icono-categoria {
        font-size: 3rem !important;
        color: #FFD700 !important;
        margin-bottom: 12px !important;
    }

    html body .tarjeta-categoria h3 {
        color: #ffffff !important; /* Forzamos texto blanco */
        font-size: 1.4rem !important;
        margin: 5px 0 10px 0 !important;
    }

    html body .tarjeta-categoria p {
        color: #e2e8f0 !important; /* Forzamos texto gris claro */
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    /* 5. SECCIONES DE CONTENIDO INTERNO (PROYECTOS, ETC.) */
    html body .proyectos, 
    html body .asesorias, 
    html body .programas {
        padding: 50px 15px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Acomodo de bloques internos (Imagen arriba, texto abajo) */
    .actualización, .avalúos, .devolución, .devolución2, .digitalización, 
    .facturación, .pago, .traslado, .asesor, .capacitacion, .contacad, 
    .simagcad, .simprecad, .sittcad, .nomicad, .unicad {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Forzar que las imágenes se adapten perfectamente al celular */
    html body .actual1 img, html body .avalúos1 img, html body .devol1 img, html body .devol2 img, 
    html body .digit1 img, html body .factu1 img, html body .pago1 img, html body .tras1 img, 
    html body .ases1 img, html body .capa1 img, html body .contacad1 img, html body .simag1 img, 
    html body .simpre1 img, html body .sitt1 img, html body .nomi1 img, html body .uni1 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
    }

    /* Listas y textos inferiores */
    .explica-actualización p, .explica-avalúos p, .explica-devolución p, .explica-devolución2 p, 
    .explica-asesoria p, .explica-capacitacion p, .explica-contacad p, .explica-simagcad p {
        text-align: left !important;
        font-size: 1rem !important;
    }

    footer {
        flex-wrap: wrap;
        text-align: center;
    }

     footer {
        flex-direction: column; /* Se apilan */
        gap: 10px;
    }

    .footer-item {
        justify-content: center;
    }

    .footer-logo img {
        height: 35px;
    }
}