/* ========================================
   ESTILOS RESPONSIVE - ICT FUEL SOLUTIONS
   ======================================== */

/* --------------------------------------------------
   MÓVIL Y TABLETS (max-width: 899px)
   - Menú hamburguesa
   - Submenú siempre visible dentro del menú principal
   -------------------------------------------------- */


@media (max-width: 899px) {
    /* Ocultar menú principal por defecto en móvil */
    .nav-menu {
        display: none;
    }
    
    /* Menú principal cuando está activo (abierto con hamburguesa) */
    .nav-menu.active {
        display: flex !important;
        flex-direction: column;        /* items apilados verticalmente */
        position: fixed;                /* fijo en pantalla al abrir */
        top: 68px;                     /* debajo del botón hamburguesa */
        left: 16px;                    /* margen izquierdo */
        right: auto;                   /* NO ocupar todo el ancho */
        width: auto;                   /* ancho según contenido */
        min-width: 220px;              /* ancho mínimo legible */
        max-width: calc(100vw - 32px); /* evitar desbordamiento horizontal */
        background: var(--background-color-light);
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.18);
        padding: 0;                    /* sin padding, los items tienen el suyo */
        max-height: calc(100vh - 100px); /* límite de altura */
        overflow-y: auto;              /* scroll vertical si hay muchos items */
        overflow-x: visible;           /* permitir que contenido sobresalga */
        gap: 0;                        /* sin separación entre items */
        z-index: 10001;                /* por encima del contenido principal */
    }

    /* Items del menú principal en móvil */
    .nav-menu.active li {
        width: 100%;                   /* ocupar todo el ancho disponible */
        margin: 0;
        padding: 0;
    }

    /* Enlaces del menú principal en móvil */
    .nav-menu.active a {
        display: block;
        width: 100%;                   /* ocupar todo el ancho del item */
        padding: 12px 16px;            /* espaciado cómodo para touch */
        border-radius: 0;              /* sin esquinas redondeadas */
        box-sizing: border-box;        /* padding incluido en el width */
    }

    /* Contenedor del item "Descargas" que tiene submenú */
    .has-submenu {
        position: relative;
        display: flex;
        flex-direction: column;        /* apilar enlace y submenú */
    }

    /* Título "Descargas" en móvil - estilo destacado como encabezado de sección */
    .has-submenu > a {
        color: var(--text-color-dark);       /* color oscuro del texto */
        padding: 12px 16px;
        pointer-events: none;              /* NO navegable en móvil */
        cursor: default;
    }

    /* Submenú en móvil: SIEMPRE VISIBLE, anidado bajo "Descargas" */
    .submenu {
        position: static !important;       /* dentro del flujo, no fixed */
        display: block !important;         /* SIEMPRE visible en móvil */
        visibility: visible !important;
        opacity: 1 !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;              /* sin márgenes */
        padding: 0 !important;
        box-shadow: none !important;       /* sin sombra en móvil */
        border-left: none !important;      /* sin borde izquierdo */
        background: transparent !important; /* fondo transparente */
        border-radius: 0 !important;
        max-height: none !important;       /* sin límite de altura */
        overflow: visible !important;
        transform: none !important;
    }

    /* Items del submenú: indentados para mostrar jerarquía visual */
    .submenu li {
        width: 100%;
        padding: 0;
        padding-left: 20px;                /* indentación desde la izquierda */
        opacity: 1 !important;             /* siempre visible */
        transform: none !important;        /* sin transformaciones */
    }

    /* Enlaces del submenú: estilo diferenciado del menú principal */
    .submenu a {
        padding: 10px 16px 10px 36px !important; /* más padding izquierdo para indentación */
        width: 100%;
        box-sizing: border-box;
        font-size: 0.9rem;                 /* ligeramente más pequeño que items principales */
        color: var(--text-color-dark);
        background: transparent;
        border-left: 2px solid transparent; /* preparar para efecto hover */
        transition: all 0.2s ease;
        pointer-events: auto !important;   /* asegurar que sean clickeables */
    }

    /* Flecha/icono antes de cada opción del submenú */
    .submenu a::before {
        content: "→ ";                     /* flecha hacia la derecha */
        color: var(--text-color-dark);       /* color oscuro del texto */
        margin-right: 8px;
        font-size: 0.85rem;
        font-weight: bold;
    }

    /* Hover en opciones del submenú - feedback visual */
    .submenu a:hover,
    .submenu a:focus {
        background: rgba(255,127,50,0.08); /* fondo naranja muy suave */
        border-left-color: var(--primary-color); /* activar borde izquierdo */
        padding-left: 40px !important;     /* desplazar ligeramente a la derecha */
        outline: none;
    }

    /* Botón hamburguesa fijo en esquina superior izquierda */
    .nav-toggle {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 10002;                    /* por encima del menú */
    }
}

/* --------------------------------------------------
   DESKTOP (min-width: 900px)
   - Restaurar comportamiento normal del submenú
   -------------------------------------------------- */
@media (min-width: 900px) {
    /* En desktop, el submenú NO está siempre visible */
    .submenu {
        display: none !important;          /* oculto por defecto */
        position: fixed !important;        /* posicionamiento lateral cuando se muestra */
    }

    /* Se muestra con la clase submenu-visible (controlada por JS hover) */
    .submenu.submenu-visible {
        display: block !important;
    }

    /* Restablecer estilo normal del título "Descargas" en desktop */
    .has-submenu > a {
        background: transparent !important;
        font-weight: normal !important;
        color: var(--text-color-dark) !important;
        padding: 8px 16px !important;
        border-left: none !important;
        pointer-events: auto !important;   /* navegable en desktop */
        cursor: pointer !important;
    }

    /* Items del submenú en desktop: sin indentación */
    .submenu li {
        padding-left: 0 !important;
    }

    /* Enlaces del submenú en desktop: estilo normal */
    .submenu a {
        padding: 8px 16px !important;
        font-size: 1rem !important;
    }

    /* Quitar iconos/flechas en desktop */
    .submenu a::before {
        content: none !important;
    }
}


@media (max-width: 480px) {
    
    /* Reducir tamaño de fuente general */
    body {
        font-size: 14px;
    }

    /* Headers más compactos */
    .contacto-header,
    .productos-header,
    .info-header
     {
        padding: 15px 10px;
    }
}

/* --------------------------------------------------
   TABLETS Y PANTALLAS MEDIANAS (max-width: 1200px)
   -------------------------------------------------- */
@media (max-width: 1200px) {
    /* Ajustar contenedores principales */
    .container {
        max-width: 100%;
        padding: 0 20px;
    }

    /* Grid de productos: 2 columnas */
    .productos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Headers con logo: apilar verticalmente */
    .contacto-header,
    .productos-header,
    .info-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    /* Logos */
    .logo {
        max-width: 250px;
    }
}

@media (max-width: 899px) {
    
    /* Header: limitar ancho */
    .index-header {
        width: 100%;
        max-width: 100vw;           /* NO superar el ancho de la ventana */
        padding: 20px 16px;         /* reducir padding lateral */
        box-sizing: border-box;
        overflow: hidden;           /* evitar desbordamiento */
    }

    .logo-n {
        max-width: 150px;           /* limitar ancho del logo */
        height: auto;
    }

    #main-title {
        font-size: 1.5rem;          /* reducir tamaño en móvil */
        text-align: center;
        word-wrap: break-word;      /* permitir que el texto se parta */
        max-width: 100%;
    }

}

/* --------------------------------------------------
   responsive Carrusel - index --> productos (max-width: 899px)
   -------------------------------------------------- */

@media (max-width: 899px) {
    /* Carruseles: limitar ancho y evitar desbordamiento */
    .carousel {
        overflow: hidden;
        width: 100%;
        max-width: 100vw;           /* NO superar el ancho de la ventana */
        box-sizing: border-box;
    }

    .carousel-track {
        max-width: none;            /* permitir que el track sea más ancho (para el scroll) */
        box-sizing: border-box;
    }

    .carousel-item {
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .carousel-item img {
        width: 100%;
        height: auto;
        max-width: 100%;            /* NO superar el ancho del contenedor */
        object-fit: cover;
    }
}

/* --------------------------------------------------
   FIN responsive Carrusel - index --> productos (max-width: 899px)
   -------------------------------------------------- */


/* --------------------------------------------------
   FORMULARIO DE CONTACTO RESPONSIVE
   -------------------------------------------------- */
@media (max-width: 899px) {
    
    /* Formulario de contacto: limitar ancho */
    #contact-form {
        width: 100%;
        max-width: 100%;            /* NO superar el ancho del contenedor */
        padding: 20px 16px;         /* reducir padding lateral */
        box-sizing: border-box;
    }

    .form-group {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 10px;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        max-width: 100%;            /* NO superar el ancho del contenedor */
        box-sizing: border-box;
        padding: 10px;              /* reducir padding interno */
    }

}

@media (max-width: 768px) {
    /* Sección completa de contacto: aplicar padding simétrico */
    #contacto {
        padding-left: 5% !important;
        padding-right: 5% !important;
        box-sizing: border-box;
    }

    /* Contenedor del formulario: ocupar todo el ancho disponible */
    #contact-form {
        width: 100% !important;           /* ocupar todo el ancho de la sección */
        max-width: 100% !important;
        margin: 0 !important;             /* sin márgenes adicionales */
        padding: 20px 0 !important;       /* solo padding vertical */
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Reiniciar form-group: ahora cada par label-input forma un bloque */
    .form-group {
        display: contents;                /* los hijos se comportan como hijos directos del grid */
    }

    /* Todos los labels e inputs serán hijos directos del grid gracias a display:contents */
    .form-group label,
    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100% !important;           /* ocupar todo el ancho disponible */
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Labels: estilo base */
    .form-group label {
        text-align: left;
        font-weight: 500;
        margin-bottom: 5px;
        color: var(--text-color-dark);
        padding-left: 0;
    }

    /* Inputs: estilo base con mismo alineamiento que labels */
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 44px;
    }

    /* Header de contacto: también con padding simétrico */
    .contacto-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Logo dentro del header */
    .contacto-header .logo {
        margin: 0 auto;                   /* centrar el logo */
        display: block;
    }

    /* Orden específico de cada campo usando grid-row */
    
    /* Empresa */
    label[for="company"] { grid-row: 1; }
    #company { grid-row: 2; }

    /* Nombre del Contacto */
    label[for="contact-name"] { grid-row: 3; }
    #contact-name { grid-row: 4; }

    /* Código Postal */
    label[for="postal-code"] { grid-row: 5; }
    #postal-code { grid-row: 6; }

    /* Indicativo */
    label[for="country-code"] { grid-row: 7; }
    #country-code { grid-row: 8; }

    /* Teléfono */
    label[for="phone"] { grid-row: 9; }
    #phone { grid-row: 10; }

    /* Email */
    label[for="email"] { grid-row: 11; }
    #email { grid-row: 12; }

    /* Confirmar Email */
    label[for="confirm-email"] { grid-row: 13; }
    #confirm-email { grid-row: 14; }

    /* Observaciones */
    label[for="observations"] { grid-row: 15; }
    #observations { 
        grid-row: 16; 
        min-height: 120px;
        resize: vertical;
    }

    /* Botón de envío */
    button[type="submit"] {
        grid-row: 17;
        width: 100% !important;
        padding: 12px;
        font-size: 1rem;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        min-height: 44px;
        margin-top: 10px;
    }

    button[type="submit"]:hover {
        background: var(--primary-color-dark, #e06020);
    }
}

/* --------------------------------------------------
   MÓVIL MUY PEQUEÑO (max-width: 480px)
   -------------------------------------------------- */
@media (max-width: 480px) {
    /* Sección de contacto con padding reducido */
    #contacto {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    /* Formulario: ocupar todo el ancho */
    #contact-form {
        width: 100% !important;
        padding: 15px 0 !important;
        gap: 12px;
    }

    /* Reducir padding en inputs */
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 8px;
        font-size: 0.95rem;
    }

    /* Labels más pequeños */
    .form-group label {
        font-size: 0.9rem;
    }

    /* Botón más compacto */
    button[type="submit"] {
        padding: 10px;
        font-size: 0.95rem;
    }

    /* Textarea más compacto */
    #observations {
        min-height: 100px;
    }
}

/* --------------------------------------------------
   PÁGINA DESCARGAS RESPONSIVE
   Mismo comportamiento que info-legal.html
   -------------------------------------------------- */

@media (max-width: 768px) {
    /* Cuerpo de la página de descargas */
    body#cuerpo-descargas {
        margin-left: 5% !important;
        margin-right: 5% !important;
    }

    /* Header de descargas: apilar verticalmente igual que info-legal */
    body#cuerpo-descargas #descargas-header {
        display: flex !important;
        flex-direction: column !important;  /* Logo arriba, título abajo */
        align-items: center !important;     /* centrar todo horizontalmente */
        justify-content: center !important;
        text-align: center !important;
        gap: 15px !important;
        margin-top: 80px !important;       /* espacio para el botón hamburguesa */
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    /* Logo en descargas: CENTRADO, arriba del título */
    body#cuerpo-descargas #descargas-header .logo-n {
        max-width: 200px !important;
        width: 200px !important;           /* ancho fijo para que se centre bien */
        height: auto !important;
        margin: 0 auto !important;         /* centrado horizontal automático */
        margin-left: auto !important;      /* forzar centrado */
        margin-right: auto !important;     /* forzar centrado */
        margin-top: 0 !important;
        display: block !important;
    }

    /* Título h1: debajo del logo, centrado */
    body#cuerpo-descargas #title-secondary-page {
        font-size: 1.8rem !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Secciones de descargas */
    body#cuerpo-descargas .downloads-section {
        padding: 20px 0 !important;
        width: 100% !important;
    }

    /* Categorías de descarga */
    body#cuerpo-descargas .download-category {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* Subtítulos: JUSTIFICADOS A LA IZQUIERDA */
    body#cuerpo-descargas .subtitulo-descargas {
        font-size: 1.5rem !important;
        text-align: left !important;       /* alineado a la izquierda */
        padding: 30px 0 10px 0 !important;
        margin: 0 !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    /* Grid de descargas: CENTRADO horizontalmente */
    body#cuerpo-descargas .download-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 225px)) !important; /* ancho proporcional */
        gap: 1rem !important;
        justify-content: center !important; /* CENTRAR el grid completo */
        width: 100% !important;
        padding: 0 !important;
    }

    /* Items de descarga: centrados dentro de su celda */
    body#cuerpo-descargas .download-item {
        width: 100% !important;            /* ocupar su celda del grid */
        max-width: 225px !important;       /* ancho máximo del diseño original */
        flex: none !important;
        aspect-ratio: auto !important;     /* mantener proporción natural */
        height: auto !important;
        display: flex !important;          /* usar flexbox para centrar contenido */
        flex-direction: column !important; /* apilar elementos verticalmente */
        align-items: center !important;    /* CENTRAR contenido horizontalmente */
        justify-content: flex-start !important;
        text-align: center !important;     /* centrar texto */
        margin: 0 auto !important;         /* centrar el item en su celda */
    }

    /* Imagen dentro del item de descarga: centrada */
    body#cuerpo-descargas .download-item img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;         /* centrar imagen */
    }

    /* Texto dentro del item: centrado */
    body#cuerpo-descargas .download-item p {
        text-align: center !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }
}

@media (max-width: 480px) {
    /* Cuerpo con márgenes más pequeños */
    body#cuerpo-descargas {
        margin-left: 3% !important;
        margin-right: 3% !important;
    }

    /* Logo más pequeño pero CENTRADO */
    body#cuerpo-descargas #descargas-header .logo-n {
        max-width: 150px !important;
        width: 150px !important;
        margin: 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Título más pequeño */
    body#cuerpo-descargas #title-secondary-page {
        font-size: 1.5rem !important;
    }

    /* Subtítulos más pequeños pero a la izquierda */
    body#cuerpo-descargas .subtitulo-descargas {
        font-size: 1.3rem !important;
        text-align: left !important;
    }

    /* Grid centrado para móviles pequeños */
    body#cuerpo-descargas .download-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 200px)) !important;
        gap: 0.8rem !important;
        justify-content: center !important; /* mantener centrado */
    }

    /* Items más pequeños pero proporcionales y centrados */
    body#cuerpo-descargas .download-item {
        max-width: 200px !important;
    }
}


/* --------------------------------------------------
   AJUSTES TIPOGRÁFICOS RESPONSIVE
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* Reducir tamaño de títulos en tablets/móviles */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    
    /* Ajustar párrafos */
    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    /* Títulos aún más pequeños en móviles pequeños */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    p { font-size: 0.9rem; }
}

/* --------------------------------------------------
   BOTONES RESPONSIVE
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* Botones más grandes para facilitar touch */
    .btn,
    button {
        min-height: 44px;              /* tamaño mínimo recomendado para touch */
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/* --------------------------------------------------
   AJUSTES DE ESPACIADO GENERAL
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* Reducir padding en secciones */
    section {
        padding: 40px 20px;
    }

    /* Contenedores */
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    /* Secciones más compactas en móviles pequeños */
    section {
        padding: 30px 15px;
    }
}


/* ============================================================
   MZ-section: Responsive - apilar en móvil/tablet
   ============================================================ */
@media (max-width: 899px) {
    /* En móvil: sin flotado, apiladas, centradas y 50% más pequeñas */
    #MZ-section .mz-right,
    #MZ-section .mz-left {
        float: none;
        margin: 12px auto;
    }
    
    /* Cada imagen reduce su tamaño un 50% respecto a desktop */
    #MZ-section .mz-size-x1 {
        width: min(50%, 180px);  /* 28% / 2 ≈ 14%, con límite 180px */
    }
    
    #MZ-section .mz-size-alarma {
        width: min(50%, 140px);  /* 22% / 2 ≈ 11%, con límite 140px */
    }
    
    #MZ-section .mz-size-sonda {
        width: min(50%, 120px);  /* 18% / 2 ≈ 9%, con límite 120px */
    }

    #MZ-section .mz-grid-2 {
        grid-template-columns: 1fr;     /* 1 columna: todo apilado */
        gap: 30px;                      /* más espacio vertical entre elementos */
    }
    #MZ-section .MZ-table1, #MZ-section .MZ-table2 {
        max-width: 100%;           /* tablas ocupan todo el ancho */
    }

    
    /* ... código existente de MZ-section ... */

    /* ===== ENLACES DE DESCARGA EN MÓVIL ===== */
    
    /* Contenedor: reducir padding */
    .downloads-links-container {
        padding: 15px;
        margin: 30px 0 15px 0;
    }

    /* Título: más pequeño */
    .downloads-section-title {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* Grid de enlaces: CENTRAR en móvil */
    .downloads-links-grid {
        align-items: center;            /* CENTRAR enlaces en móvil */
        gap: 10px;
    }

    /* Enlaces: más compactos */
    .download-link-item {
        padding: 6px 10px;
        max-width: 90%;                 /* reducir ancho máximo en móvil */
    }

    /* Icono: más pequeño en móvil */
    .download-icon {
        width: 20px;                    /* <-- AJUSTA: 18px, 20px, 22px */
        height: 20px;
    }

    /* Texto: más pequeño */
    .download-text {
        font-size: 0.85rem;             /* <-- AJUSTA: 0.8rem, 0.85rem, 0.9rem */
    }

    /* Efecto hover en móvil: sin desplazamiento (evitar problemas táctiles) */
    .download-link-item:hover,
    .download-link-item:focus {
        transform: none;                /* sin desplazamiento en móvil */
    }

}
/* ============================================================
   FIN MZ-section: Responsive
   ============================================================ */


/* ============================================================
   EZ-section: Responsive - apilar en móvil/tablet
   ============================================================ */

@media (max-width: 899px) {
    /* GRID 1 y GRID 2: cambiar a 1 sola columna (apilar verticalmente) */
    #EZ-section .ez-grid-1,
    #EZ-section .ez-grid-2 {
        grid-template-columns: 1fr;     /* 1 columna: todo apilado */
        gap: 30px;                      /* más espacio vertical entre elementos */
    }

    /* Reducir tamaño de imagen sonda al 60% en móvil */
    #EZ-section .ez-image-sonda-size {
        max-width: 60%;                 /* <-- AJUSTA: 50%, 60%, 70%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Reducir tamaño de imagen caja control al 70% en móvil */
    #EZ-section .ez-image-caja-size {
        max-width: 60%;                 /* <-- AJUSTA: 60%, 70%, 80%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Texto: mantener justificado en móvil */
    #EZ-section .ez-text-image p {
        text-align: justify;
    }

    /* Centrar imagen de sonda en móvil */
    #EZ-section .ez-text-image img {
        align-self: center;
    }

    /* Tablas: mantener 100% en móvil - AJUSTABLE */
    #EZ-section .ME-table,
    #EZ-section .EZ-table {
        max-width: 100%;                /* <-- CAMBIA a 90% si quieres reducir */
        margin: 0 auto;
    }
}

/* ============================================================
   FIN EZ-section: Responsive
   ============================================================ */

/* ============================================================
   EZ-W-y-TZ-sections: Responsive - apilar en móvil/tablet
   ============================================================ */

@media (max-width: 899px) {
    /* En pantallas pequeñas: apilar las 3 columnas verticalmente */
    #EZ-W-y-TZ-sections .ez-w-tz-grid {
        grid-template-columns: 1fr;         /* 1 sola columna */
        gap: 30px;                          /* más espacio vertical entre elementos */
    }

    /* La imagen de la sonda se reduce al 60% en móvil */
    #EZ-W-y-TZ-sections .ez-w-tz-image-size {
        max-width: 20%;                     /* más pequeña en móvil */
        margin: 0 auto;                     /* centrada */
    }
}

/* ============================================================
   SIH-section: Responsive - apilar en móvil/tablet
   ============================================================ */

@media (max-width: 899px) {
    /* GRID 1 y GRID 2: cambiar a 1 sola columna (apilar verticalmente) */
    #SIH-section .sih-grid-1,
    #SIH-section .sih-grid-2 {
        grid-template-columns: 1fr;     /* 1 columna: todo apilado */
        gap: 30px;                      /* más espacio vertical entre elementos */
    }

    /* ajuste tamaño de la imagen SIH1  en móvil */
    #SIH-section .sih-image-1-size {
        max-width: 60%;                 /* <-- AJUSTA: 30%, 40%, 50%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* ajuste tamaño de la imagen SIH2  en móvil */
    #SIH-section .sih-image-2-size {
        max-width: 70%;                 /* <-- AJUSTA: 50%, 60%, 70%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Texto: mantener justificado en móvil */
    #SIH-section .sih-text p {
        text-align: justify;
    }
}

/* ========================================================================================================
                                    FIN SIH-section: Responsive - apilar en móvil/tablet
   =========================================================================================================== */
/* ===============================================================================================
                               HD-ICT-section: Responsive - apilar en móvil/tablet
   =============================================================================================== */

@media (max-width: 899px) {
    /* Grid: cambiar a 1 sola columna (apilar verticalmente) */
    #HD-ICT-section .hd-ict-grid {
        grid-template-columns: 1fr;     /* 1 columna: todo apilado */
        gap: 30px;                      /* más espacio vertical entre elementos */
    }

    /* Reducir tamaño de la imagen al 50% en móvil */
    #HD-ICT-section .hd-ict-image-size {
        max-width: 70%;                 /* <-- AJUSTA: 40%, 50%, 60%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Texto: mantener justificado en móvil */
    #HD-ICT-section .hd-ict-text p {
        text-align: justify;
    }

    /* Tabla: ocupa todo el ancho en móvil */
    #HD-ICT-section .HD-ICT-table {
        width: 100%;
        margin: 20px 0;
    }
}

/* ============================================================
   FIN HD-ICT-section: Responsive
   ============================================================ */

/* ============================================================
   ID_detector-section: Responsive - apilar en móvil/tablet
   ============================================================ */

@media (max-width: 899px) {
    /* GRID 1, GRID 2 y GRID 3: cambiar a 1 sola columna (apilar verticalmente) */
    #ID_detector-section .id-grid-1,
    #ID_detector-section .id-grid-2,
    #ID_detector-section .id-grid-3 {
        grid-template-columns: 1fr;     /* 1 columna: todo apilado */
        gap: 30px;                      /* más espacio vertical entre elementos */
    }

    /* Reducir tamaño de imagen 1 (bandeja) al 60% en móvil */
    #ID_detector-section .id-image-1-size {
        max-width: 60%;                 /* <-- AJUSTA: 40%, 50%, 60%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Reducir tamaño de imagen 2 (detector) al 70% en móvil */
    #ID_detector-section .id-image-2-size {
        max-width: 70%;                 /* <-- AJUSTA: 50%, 60%, 70%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Reducir tamaño de imagen 3 (sensor proximidad) al 50% en móvil */
    #ID_detector-section .id-image-3-size {
        max-width: 50%;                 /* <-- AJUSTA: 40%, 50%, 60%, etc. */
        margin: 0 auto;                 /* centrada */
    }

    /* Texto: mantener justificado en móvil */
    #ID_detector-section .id-text p {
        text-align: justify;
    }
}

/* ============================================================
   FIN ID_detector-section: Responsive
   ============================================================ */

/* ============================================================
   RESPONSIVE - Todas las nuevas secciones con grid
   ============================================================ */

@media (max-width: 899px) {
    /* ======== UG-ID ======== */
    #UG-ID-section .ug-id-grid-1,
    #UG-ID-section .ug-id-grid-2 {
        grid-template-columns: 1fr;     /* apilar en 1 columna */
        gap: 30px;                      /* más espacio vertical */
    }
    #UG-ID-section .ug-id-image-1-size { max-width: 60%; margin: 0 auto; }
    #UG-ID-section .ug-id-image-2-size { max-width: 60%; margin: 0 auto; }
    #UG-ID-section .UG-ID-table { max-width: 100%; }

    /* ======== FFF ======== */
    #FFF-section .fff-grid-1,
    #FFF-section .fff-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #FFF-section .fff-image-1-size { max-width: 60%; margin: 0 auto; }
    #FFF-section .fff-image-2-size { max-width: 80%; margin: 0 auto; }
    #FFF-section .FFF-table { max-width: 100%; }

    /* ======== IFT ======== */
    #IFT-section .ift-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #IFT-section .ift-image-size { max-width: 50%; margin: 0 auto; }
    #IFT-section .IFT-table { max-width: 100%; }

    /* ======== VALVULA-J4 ======== */
    #VALVULA-J4-section .valvula-j4-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #VALVULA-J4-section .valvula-j4-image-size { max-width: 60%; margin: 0 auto; }
    #VALVULA-J4-section .VALVULA-J4-table { max-width: 100%; }

    /* ======== VALVULA-55B ======== */
    #VALVULA-55B-section .valvula-55b-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #VALVULA-55B-section .valvula-55b-image-size { max-width: 60%; margin: 0 auto; }
    #VALVULA-55B-section .VALVULA-55B-table { max-width: 100%; }

    /* ======== VALVULA-GB ======== */
    #VALVULA-GB-section .valvula-gb-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #VALVULA-GB-section .valvula-gb-image-size { max-width: 60%; margin: 0 auto; }

    /* ======== KAT ======== */
    #KAT-section .kat-grid-1,
    #KAT-section .kat-grid-2,
    #KAT-section .kat-grid-3 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #KAT-section .kat-image-1-size,
    #KAT-section .kat-image-2-size,
    #KAT-section .kat-image-3-size {
        max-width: 65%;
        margin: 0 auto;
    }
    #KAT-section .KAT-table { max-width: 100%; }

    /* ======== SES-S ======== */
    #SES-S-section .ses-s-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #SES-S-section .ses-s-image-size { max-width: 60%; margin: 0 auto; }
    #SES-S-section .SES-S-table { max-width: 100%; }

    /* ======== SES-M ======== */
    #SES-M-section .ses-m-grid-1,
    #SES-M-section .ses-m-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #SES-M-section .ses-m-image-size { max-width: 60%; margin: 0 auto; }
    #SES-M-section .SES-M-table,
    #SES-M-section .J4C-table { max-width: 100%; }

    /* ======== RAMPA ======== */
    #RAMPA-section .rampa-grid-1,
    #RAMPA-section .rampa-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #RAMPA-section .rampa-image-1-size,
    #RAMPA-section .rampa-image-2-size {
        max-width: 60%;
        margin: 0 auto;
    }
    #RAMPA-section .RAMPA-table { max-width: 100%; }

    /* ======== VRanillo ======== */
    #VRanillo-section .vranillo-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #VRanillo-section .vranillo-image-size { max-width: 60%; margin: 0 auto; }

    /* ======== HPZ-ZPT ======== */
    #HPZ-ZPT-section .hpz-zpt-grid-1,
    #HPZ-ZPT-section .hpz-zpt-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #HPZ-ZPT-section .hpz-zpt-image-1-size,
    #HPZ-ZPT-section .hpz-zpt-image-2-size {
        max-width: 70%;
        margin: 0 auto;
    }
    #HPZ-ZPT-section .HPT-table,
    #HPZ-ZPT-section .ZPT-table,
    #HPZ-ZPT-section .PANDA-table { max-width: 100%; }

    /* ======== GOAS ======== */
    #GOAS-section .goas-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #GOAS-section .goas-image-size { max-width: 70%; margin: 0 auto; }
    #GOAS-section .GOAS-table { max-width: 100%; }

    /* ======== FET-10 ======== */
    #FET-10-section .fet-10-grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #FET-10-section .fet-10-image-size { max-width: 70%; margin: 0 auto; }
    #FET-10-section .FET-10-table { max-width: 100%; }

    /* ======== IST-50 ======== */
    #IST-50-section .ist-50-grid-1,
    #IST-50-section .ist-50-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #IST-50-section .ist-50-image-size,
    #IST-50-section .ist-50-image-2-size,
    #IST-50-section .ist-50-image-3-size {
        max-width: 70%;
        margin: 0 auto;
    }
    #IST-50-section .IST-50-table { max-width: 100%; }

    /* ======== UPG ======== */
    #UPG-section .upg-grid-1,
    #UPG-section .upg-grid-2,
    #UPG-section .upg-grid-3 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #UPG-section .upg-image-1-size,
    #UPG-section .upg-image-2-size,
    #UPG-section .upg-image-3-size,
    #UPG-section .upg-image-4-size {
        max-width: 70%;
        margin: 0 auto;
    }
    #UPG-section .UPG-table { max-width: 100%; }
}

/* ============================================================
   FIN RESPONSIVE - Todas las nuevas secciones con grid
   ============================================================ */
/* ==================================================================================================
                        EL RINCÓN DEL CURIOSO - Responsive
   ================================================================================================== */

@media (max-width: 899px) {
    
    /* Header: reducir tamaños */
    #rincon-header,
    #redaccion-header {
        margin-top: 60px;
        margin-bottom: 30px;
    }

    #rincon-title,
    #redaccion-title {
        font-size: 1.8rem;
    }

    /* Contenido: reducir padding */
    #rincon-content,
    #redaccion-content {
        padding: 2% 5% 5% 5%;
    }

    /* Descripción: más pequeña */
    #rincon-description,
    #redaccion-description {
        font-size: 1rem;
    }

    /* Grid de artículos: 1 columna en móvil */
    .rincon-articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Formulario: padding reducido */
    #redaccion-form {
        padding: 24px;
    }

    #redaccion-form .form-group {
        flex-direction: column;
        gap: 8px;
    }

    #redaccion-form label {
        flex: none;
        width: 100%;
    }

    #redaccion-form input,
    #redaccion-form textarea {
        flex: none;
        width: 100%;
    }

    #redaccion-form textarea {
        height: 200px;
    }

}

/* ==================================================================================================
                    FIN EL RINCÓN DEL CURIOSO - Responsive
   ================================================================================================== */
/* ==================================================================================================
   PIE DE PÁGINA (#legales) - Responsive (COMPACTADO)
   LÓGICA:
   - gap menor (de 16px a 4px) para reducir separación entre enlaces apilados
   - padding inferior muy pequeño (2px) para acercar al footer
   - eliminamos separadores visibles si están apilados verticalmente
   ================================================================================================== */
@media (max-width: 899px) {
    #legales {
        flex-direction: column;
        align-items: center;
        gap: 4px;              /* antes 16px */
        padding: 14px 16px 2px 16px;  /* antes 20px 16px (bajamos bottom) */
        margin-top: 30px;      /* puedes ajustar si sobra */
    }
    /* Ocultar separadores si los copiaste entre enlaces (ahorran espacio vertical) */
    #legales .footer-separator {
        display: none;
    }
}

/* Móvil muy pequeño: aún más compacto */
@media (max-width: 480px) {
    #legales {
        padding: 10px 12px 2px 12px;  /* aún menor */
        gap: 2px;
        margin-top: 24px;
    }
    #legales a {
        font-size: 0.8rem;
        line-height: 2;
    }
}

/* ==================================================================================================
   PIE DE PÁGINA (#general-footer) - Responsive (COMPACTADO)
   LÓGICA:
   - reducir padding superior (espacio contra #legales)
   - mantener line-height 1.5 solicitado
   - evitar salto adicional (quitar display:block en .footer-separator en móviles pequeños)
   ================================================================================================== */
@media (max-width: 899px) {
    #general-footer .footer-unified {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;              /* mantiene altura compacta */
        line-height: 1.6;       /* altura según diseño actual */
    }
    #general-footer .footer-separator,
    #general-footer .footer-separator-2 {
        display: none !important;
    }
    #general-footer .footer-copy,
    #general-footer .footer-derechos,
    #general-footer .footer-visits {
        display: block;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    #general-footer {
        padding: 2px 16px 10px 16px;   /* aún menor */
        gap: 2px;
    }
    .footer-unified {
        line-height: 2;              /* mantener */
        gap: 2px;
    }
    .footer-separator, .footer-separator-2 {
        display: inline;    /* quitar display:block que generaba salto */
        margin: 0 4px;
        visibility: visible; /* evitar el hidden que creaba hueco vertical */
    }
}

/* --------------------------------------------------
   FIN ESTILOS RESPONSIVE
   -------------------------------------------------- */