* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* outline: 1px dashed rgba(255, 0, 0, 0.8); */
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #e6f2ff; /* Azul muy claro */
            padding-top: 80px; /* Espacio para cabecera fija */
            padding-bottom: 100px; /* Espacio para pie fijo */
        }

        /* Cabecera fija */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #003366; /* Azul oscuro por defecto */
            color: #fff;
            z-index: 1000;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        /* Contenedor exclusivo para cabecera de escritorio */
        .desktop-header {
            display: flex;
            align-items: center;
            gap: 20px;
            max-width: 1200px; /* ancho máximo deseado */
            margin: 0 auto; /* centra horizontalmente */
            padding-left: 120px ;
        }

        /* Estilos para imágenes y banner en escritorio */
        .header-img {
            width: 150px;
            height: 150px;
            border-radius: 10px;
        }
        .cabecera-img-centro {
            height: 150px;
            border-radius: 10px;
            display: block; /* o inline-block, según tu necesidad */
            width: 100%; /* o el ancho deseado */
            /* Aplica una máscara que hace que los extremos sean transparentes */
            mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
              -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
        }
            



        .header-banner h1 {
            font-size: 2rem;
            margin-left: 20px;
        }

        /* Marca (logo textual) para móviles */
        .logo {
            font-size: 18px;
            font-weight: bold;
            display: none;
        }

        /* Menú de navegación */
        nav {
            display: flex;
        }

            nav ul {
                list-style: none;
                display: flex;
                align-items: center;
                position: relative;
                z-index: 2;
            }

                nav ul li {
                    position: relative;
                }

                    nav ul li a {
                        color: #fff;
                        text-decoration: none;
                        padding: 10px 15px;
                        display: block;
                    }

                        nav ul li a:hover {
                            background-color: #005599;
                        }
                    /* Menú desplegable */
                    nav ul li .dropdown {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background-color: #005599;
                        min-width: 200px;
                        border-radius: 0 0 4px 4px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                         z-index: 1;
                    }

                    nav ul li:hover .dropdown {
                        display: block;
                    }

                    nav ul li .dropdown li {
                        width: 100%;
                    }

                        nav ul li .dropdown li a {
                            padding: 10px;
                        }

                            nav ul li .dropdown li a:hover {
                                background-color: #0077cc;
                            }

        /* Estilos para el menú móvil: por defecto oculto */
        .burger-menu {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            cursor: pointer;
        }

            .burger-menu span {
                display: block;
                height: 3px;
                background: #fff;
                border-radius: 2px;
            }

        /* Contenido principal */
        main {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 0;
        }

        .checkbox-container label {
            flex: 1;
            white-space: nowrap;
        }

        .checkbox-container input[type="checkbox"] {
            transform: translateY(8px); /* Ajusta según necesites */
        }

        .checkbox-container {
            width: 20px; /* Ocupa el ancho que se requiera */
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
        }

        /* Secciones alternadas */
        section {
            display: flex;
            align-items: center;
            margin: 40px 0;
            padding: 20px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

            section:nth-child(even) {
                flex-direction: row-reverse;
            }

            section img {
                width: 100%;
                max-width: 400px;
                border-radius: 8px;
            }

            section .content {
                flex: 1;
                padding: 120px;
            }

            section h2 {
                color: #003366;
                margin-bottom: 10px;
            }

            section p {
                margin-bottom: 10px;
                text-align: justify;
            }

        /* Formularios */
        .formulario {
            background: #fff;
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

            .formulario h3 {
                color: #003366;
                margin-bottom: 15px;
            }

            .formulario label {
                display: block;
                margin: 10px 0 5px;
                font-weight: bold;
            }

            .formulario input,
            .formulario textarea {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            .formulario button {
                background-color: #003366;
                color: #fff;
                border: none;
                padding: 10px 20px;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

                .formulario button:hover {
                    background-color: #005599;
                }

        /* Pie de página fijo */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #003366;
            color: #fff;
            text-align: center;
            padding: 10px 20px;
            z-index: 1000;
        }

            footer a {
                color: #66b3ff;
                text-decoration: none;
                margin: 0 10px;
            }

                footer a:hover {
                    text-decoration: underline;
                }

        /* Adaptabilidad a móviles */
        @media (max-width: 768px) {
            /* Cabecera móvil: ocultar imágenes y banner de escritorio */
            
            .desktop-header {
                display: none;
            }
            /* Mostrar la marca textual y el burger-menu */
            .logo {
                display: block;
            }

            .burger-menu {
                display: flex;
            }
            /* Simplificar la cabecera con fondo degradado azul a negro */
            header {
                background: linear-gradient(to right, #003366, #000);
                padding: 10px;
                justify-content: space-between;
            }
            /* Menú de navegación oculto por defecto */
            nav {
                display: none;
            }

            footer {
                padding: 8px 10px;
                font-size: 10px;
            }
            /* Forzar apilado vertical de las secciones */
            section,
            section:nth-child(even) {
                flex-direction: column !important;
                margin: 20px 0;
                padding: 10px;
            }

            section img {
                width: 100%;
                max-width: none;
                margin-bottom: 10px;
            }

             section .content {
                padding: 20px;
                width: 100%;
             }
             /* Estilos para el menú móvil desplegable al activarse */
            nav.active {
                display: block;
                position: absolute;
                top: 50px;
                left: 0;
                width: 100%;
                background: #003366;
            }

            nav.active ul {
                flex-direction: column;
            }

            nav.active ul li a {
                padding: 15px;
                border-bottom: 1px solid #fff;
            }

        }

        @media (max-width: 480px) {
            /* Ajustes adicionales para pantallas muy pequeñas */
            header {
                padding: 8px;
                flex-direction: column;
                align-items: center;
            }

            .logo {
                font-size: 16px;
            }

            #contacto::before {
                height: 200px;
                margin-top: -60px;
            }

            nav ul li a {
                padding: 8px 10px;
                font-size: 14px;
            }

            main {
                width: 95%;
                padding: 10px 0;
            }

            section {
                margin: 15px 0;
                padding: 10px;
            }

                section .content {
                    padding: 15px;
                }

            .formulario {
                padding: 15px;
                margin: 15px 0;
            }

                .formulario button {
                    padding: 8px 15px;
                    font-size: 14px;
                }

            footer {
                padding: 8px 10px;
                font-size: 10px;
            }
        }