/* ESTILOS DE LA BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;
    background-color: transparent;
}

/* Otros estilos base */
html {
    scroll-behavior: smooth;
}

/* SECCIÓN 01: ESTILOS PARA EL ENCABEZADO O HEADER */
/* ----- Contenedor - header ----- */
.header__content {
    width: 100%;
    background-color: #1E4E94;
    height: 80px;
    display: flex;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
    text-align: right;
    z-index: 999;
}

/* Oculta el checkbox */
.header__content input {
    display: none; 
}

/* Oculta el label */
.header__content label {
    display: none; 
}

/* Oculta las barras del menú */
.header__toggle {
    display: none;
}

/* Contenedor del logo */
.header__logo {
    width: 310px;
    position: fixed;
    left: 0px;
}

/* Sobre la imagen del logo */
.header__logo-img {
    width: 120px;
    margin-top: 12px;
    position: fixed;
    left: 20px;
    border-radius: 20px;
}

/* Estilos para el texto del logo */
.header__logo-text {
    margin-top: 30px;
    color: white;
    font-weight: bold;
    margin-left: 0px;
}

/* ----- ESTILOS PARA LOS ELEMENTOS DEL MENU PRINCIPAL ----- */
/* Estilos del contenedor del menú de navegación */
.menu__nav {
    margin: 0;
}

/* Estilos de las listas no ordenadas del menú */
.menu__list {
    text-decoration: none;
    overflow: visible;
    display: flex;
    height: 100%;
}

/* Items del Menú: Nosotros, productos y contáctanos */
.menu__item {
    display: inline-block;
    position: relative;
    padding-bottom: 0;
    transition: transform 300ms ease;
    height: 100%;
    width: 100%;
    margin-right: 10px;
}

/* Estilos para el hover del elemento del menú, excepto el último elemento */
.menu__item:hover {
    transform: scale(1.1);
    background: #E02A1C; /*Color Principal. COlor sel sub menu hover*/
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}

/* Estilos para los links del menú */
.menu__link {
    padding: 5px;
    color: white;
    margin-top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    text-decoration: none; /* Elimina el subrayado */
    font-size: 18px;
    font-weight: bold;
    transition: all 300ms ease;
    white-space: nowrap;
}

/* Selecciona todos los íconos  */
.menu__item i {
    font-size: 35px; /* Tamaño de los íconos */
    margin-right: 3px;
    display: inline-block; /* Asegura que los íconos estén en línea y sean visibles */
}

/* Oculta todos los íconos, excepto el 1 */
.menu__item:not(:nth-child(1)) i {
    display: none; /* Oculta los íconos: 2, 3 y 4 */
}


/* --------- MEDIA QUERIES PARA EL MENU DE NAVEGACIÓN ------- */
/* Estilos para dispositivos extra pequeños (teléfonos) */
@media (max-width: 414.99px) {
    /* Estilo para ocultar el checkbox */
    .header__content input {
        display: none; /* Oculta el checkbox */
        width: 30px; /* Tamaño del checkbox */
    }

    /* Estilos para el label (barras) */
    .header__content label {
        display: inline-block;
        color: white;
        font-size: 2.2rem;
        position: absolute;
        right: 20px;
        margin-top: 15px;
    }

    /* Oculta el menu de navegación */
    .menu__nav {
        display: none; /* Inicialmente oculta el menú */
        margin: 0;
        background-color: #3A629C; /* 3A629C Este es el color verdadero: #004475 */
        position: absolute;
        left: 0;
        top: 80px;
        width: 100%;
        height: fit-content;
        padding: 0;
        z-index: 11;
    }

    /* Estilos para los links del menú */
    .menu__link {
        padding: 5px;
        color: white;
        margin-top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-transform: uppercase;
        text-decoration: none; /* Elimina el subrayado */
        font-size: 15px;
        font-weight: bold;
        transition: all 300ms ease;
        white-space: nowrap;
    }

    /* Estilos para todos los íconos del menu */
    .menu__item i {
        font-size: 20px; /*Determina el tamaño del ícono */
        margin-right: 10px; /*Determina la distancia entre el ícono y las letras del menu */
    }

    /* Anula la regla de estilo que oculta los íconos */
    .menu__item:not(:nth-child(1)) i {
        display: inline-block; /* Muestra los íconos ocultos */
    }

    /* Muestra el menú de navegación */
    .checkbox:checked ~ .menu__nav  {
        display: block; /* Muestra el menu */
    }

    /* Estilos para la lista del menu */
    .menu__nav .menu__list {
        flex-direction: column; /* Permite que los elementos se envuelvan en una sola columna */
        align-items: left;
        padding-left: 18px;
    }

    /* Estilos para el menú en hover */
    .menu__link:hover {
        padding-left: 35%;
        color: white;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none; /* Elimina el subrayado */
        font-size: 17px;
        font-weight: bold;
        transition: all 400ms ease-in-out;
        white-space: nowrap;
    }
}


/* Media query para pantallas con un ancho máximo de 576px */
@media (min-width:415px) and (max-width: 575.99px) {
    /* Estilo para ocultar el checkbox */
    .header__content input {
        display: none; /* Oculta el checkbox */
        width: 30px; /* Tamaño del checkbox */
    }

    /* Estilos para el label (barras) */
    .header__content label {
        display: inline-block;
        color: white;
        font-size: 2.2rem;
        position: absolute;
        right: 20px;
        margin-top: 15px;
    }

    /* Oculta el menu de navegación */
    .menu__nav {
        display: none; /* Inicialmente oculta el menú */
        margin: 0;
        background-color: #3A629C; /* 3A629C Este es el color verdadero: #004475 */
        position: absolute;
        left: 0;
        top: 80px;
        width: 100%;
        height: fit-content;
        padding: 0;
        z-index: 11;
    }

    /* Estilos para los links del menú */
    .menu__link {
        padding: 5px;
        color: white;
        margin-top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-transform: uppercase;
        text-decoration: none; /* Elimina el subrayado */
        font-size: 15px;
        font-weight: bold;
        transition: all 300ms ease;
        white-space: nowrap;
    }

    /* Estilos para todos los íconos del menu */
    .menu__item i {
        font-size: 20px; /*Determina el tamaño del ícono */
        margin-right: 10px; /*Determina la distancia entre el ícono y las letras del menu */
    }

    /* Anula la regla de estilo que oculta los íconos */
    .menu__item:not(:nth-child(1)) i {
        display: inline-block; /* Muestra los íconos ocultos */
    }

    /* Muestra el menú de navegación */
    .checkbox:checked ~ .menu__nav  {
        display: block; /* Muestra el menu */
    }

    /* Estilos para la lista del menu */
    .menu__nav .menu__list {
        flex-direction: column; /* Permite que los elementos se envuelvan en una sola columna */
        align-items: left;
        padding-left: 18px;
    }

    /* Estilos para el menú en hover */
    .menu__link:hover {
        padding-left: 35%;
        color: white;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none; /* Elimina el subrayado */
        font-size: 17px;
        font-weight: bold;
        transition: all 400ms ease-in-out;
        white-space: nowrap;
    }
}

/* --------- MEDIA QUERIES PARA EL MENU DE NAVEGACIÓN ------- */
/* Media query para pantallas con un ancho máximo de 768px */
@media screen and (min-width: 577px) and (max-width: 767px) {
    /* Oculta el checkbox */
    .header__content input {
        display: none; 
    }

    /* Oculta el label */
    .header__content label {
        display: none;
    }

    /* Estilo para ocultar el ícono de barras del menú */
    .header__toggle {
        display: none;
    }

    /* Estilo para el ícono de la casita */
    .menu__link i {
        font-size: 25px;
    }

    /* Anula la regla de estilo que oculta los íconos */
    .menu__item:not(:nth-child(1)) i {
        display: inline-block; /* Muestra los íconos ocultos */
        font-size: 25px; /*Determina el tamaño de los íconos */
    }

    /* Oculta el texto del menu y solo muestra los íconos */
    .hidden-text {
        position: absolute;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}

/* Media query para pantallas con un ancho entre 768px y 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Estilo para el ícono de la casita */
    .menu__item i {
        font-size: 30px; /* Tamaño de los íconos */
    }

    /* Anula la regla de estilo que oculta los íconos */
    .menu__item:not(:nth-child(0)) i {
        display: inline-block; /* Muestra los íconos ocultos */
    }

    /* Oculta el texto del menú y solo muestra los íconos */
    .menu__item:not(:last-child) .hidden-text {
        position: absolute; /* Oculta el texto para todos los elementos excepto el último */
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}

/* Media query para pantallas con un ancho entre 992px y 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {

    /* Estilo para el ícono de la casita */
    .menu__item i {
        font-size: 30px; /* Tamaño de los íconos */
    }

    /* Anula la regla de estilo que oculta los íconos */
    .menu__item:not(:nth-child(0)) i {
        display: inline-block; /* Muestra los íconos ocultos */
    }

    /* Oculta el texto de los dos primeros íconos y muestra el texto de los dos últimos */
    .menu__item:not(:nth-child(3)):not(:nth-child(4)) .hidden-text {
        position: absolute; /* Oculta el texto para todos los elementos excepto el último */
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}


/* ---------- ESTILOS PARA EL CUERPO ---------- */
/* Estilos del contenedor principal */
.main {
    padding: 20px;
    margin-top: 4%;
}

/* Estilos de la política de privacidad */
.privacy-policy {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* Títulos y secciones */
.privacy-policy__title {
    font-size: 2em;
    margin-bottom:
}

.privacy-policy__contact-link {
    text-decoration: none;
}

/* Consultas de medios para dispositivos móviles */
@media (max-width: 576px) {
    .privacy-policy {
        padding: 15px;
    }

    .privacy-policy__title {
        font-size: 1.5em;
        margin-top: 7vh;
    }
}

/* Consultas de medios para tablets en modo paisaje */
@media (min-width: 577px) and (max-width: 1024px) {
    .privacy-policy {
        padding: 20px;
    }

    .privacy-policy__title {
        font-size: 1.75em;
        margin-top: 7vh;
    }
}

/* ESTILOS PARA LA LÍNIA Y EL ÍCONO DE BACK-TO-TOP */
/* Estilos para el contenedor de la línea y la flecha */
.container__linea-flecha {
    position: relative;
}

/* Estilos para la línea: Primer hijo del "container__linea-flecha" */
.linea {
    width: 100%; /* Cubre todo el ancho */
    height: 2px; /* Altura de la línea */
    background-color: #EB9404; /* Color de la línea */
    position: relative; /* Agregamos posición relativa para la línea */
    transition: height 0.0s ease; /* Transición suave del tamaño */
}

/* Estilos para la flecha: Segundo hijo del "container__linea-flecha" */
.arrow-back-to-top {
    position: absolute; /* Posicionamiento absoluto */
    bottom: -2.7px; /* Ajusta la posición vertical de la flecha según sea necesario */
    left: 50%; /* La colocamos en el centro horizontal */
    transform: translateX(-50%); /* Centramos horizontalmente la flecha */
    text-decoration: none; /* Quitamos el subrayado del enlace */
    color:#FEB338; /* Color del texto de la flecha */
    opacity: 0; /* Ocultamos inicialmente la flecha */
    font-size: larger;
    margin-bottom: -3px;
}

/* ESTILOS PARA SEUDO CLASES DE LA LÍNIA Y EL ÍCONO DE BACK-TO-TOP */
.container__linea-flecha:hover {
    font-size: 24px; /* Aumentamos el tamaño */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

/* Mostrar la flecha y agrandar la línea cuando se pasa el cursor sobre la línea */
.container__linea-flecha:hover .linea {
    height: 5px; /* Agrandamos la línea */
    background-color: #FFCE00; /* Se cambia el color de la línea en hover */
}

/* Mostrar la flecha cuando se pasa el cursor sobre la línea */
.container__linea-flecha:hover .arrow-back-to-top {
    opacity: 1; /* Mostramos la flecha */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));  
    margin-bottom: -3px;
}

/* Cambiar el color y tamaño del ícono al pasar el cursor sobre él */
.arrow-back-to-top i:hover {
    color: #FFCE00; /* Cambiamos el color */
    font-size: 30px; /* Aumentamos el tamaño */
    margin-bottom: -3px;
    font-weight: bold;
}

.elemento-con-clip {
    width: 200px;
    height: 100px;
    background-color: #007bff; /* Color de fondo para visualizar el clip-path */
    clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 0% 100%, 0% 100%);
}


/* ---------- ESTILOS PARA EL FOOTER ---------- */
/* ----- ESTILOS PARA EL ÍCONO DEL WHATSAPP ----- */
.container__mensajewebstore {
    position: fixed;
    bottom: 92px; /* Ajusta la distancia desde la parte inferior */
    right: 15px; /* Ajusta la distancia desde la parte derecha */
    z-index: 1000;
}

.subitem_mensajewebstore {
    width: 60px; /* Ancho del botón */
    height: 60px; /* Altura del botón */
}

.btn_whatsapp {
    width: 100%; /* Ajusta el tamaño del botón al 100% del contenedor */
    height: 100%; /* Ajusta el tamaño del botón al 100% del contenedor */
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
}

.btn_whatsapp i {
    font-size: 46px; /* Tamaño del ícono de WhatsApp */
    color: #25d366; /* Color del ícono de WhatsApp */
}

/* Estilos para el ícono en hover */
.btn_whatsapp i:hover {
    text-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* Agrega sombra */
    transform: scale(1.1); /* Escala el botón al 110% */
    color: #009C3A;  #008800
    font-weight: bold;
}

/* Estilos para el contenedor del footer 02 */
.footer02__container {
    list-style: none;
    padding: 0;
    background-color: #104A9A; /* Color tecnológico:#0075c7 */ 
    color: white;
    width: 100%;
    position: relative; /* Corregido: Fija el pie de página en la parte inferior */
    height: auto;
    bottom: 0px;
    margin-bottom: -31PX;
}

/* Estilos para todo el contenedor de de la listas que albergan tres columnas */
.footer02__column {
    display: flex;
    justify-content: space-between;
}

/* Estilos para todo el contenedor que alberga los link <a> */
.footer02__column a {
    color: white; /* Color predeterminado de los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

/* Estilos para los enlaces visitados */
.footer02__column a:visited {
    color: #97baf1; /* Color para los enlaces visitados */
    text-decoration: none; /* Elimina el subrayado de los enlaces visitados */
}

.footer02__column--left,
.footer02__column--center,
.footer02__column--right {
    flex: 1;
}

.footer02__column--left p {
    text-align: left;
    padding: 10px 0px 0px 30px;
    margin-bottom: 5px; /* Si se quiere aumentar un item más en la columna derecha del footer 02, solo agregar más margin-boton en este lugar para que genera más espacio */
}

/* Estilos para todo el contenedor de la columna del centro */
.footer02__column--center {
    margin-top: 10px;
    padding: center;
    text-align: center;
}

/* Estilos para los iconos de social media del footer 02 */
.footer02__social-icons i {
    font-size: 40px; /* Cambia el tamaño del icono según tus necesidades */
    text-align: center;
    padding-left: 10px;
    padding-bottom: 12px;
    margin-top: -10px;
}

/* ESTILOS PARA EL FOOTER */
/* ESTILOS PARA EL FOOTER SECCIÓN 02__COLUMNA DERECHA*/
.footer02__column--right {
    margin-top: 10px;
}

/* Estilos para  los párrafos dentro de la columna derecha */
.footer02__column--right p {
    margin-bottom: 0px; /* Ajusta el margen inferior según tus necesidades */
    text-align: right;
    padding-right: 30px;
}


/* Consulta de medios para pantallas con un ancho máximo de 576px */
@media screen and (max-width: 576px) {
    /* Estilos para el contenedor del footer 02 */
    .footer02__container {
        list-style: none;
        padding: 0;
        background-color: #0074c7;
        color: white;
        width: 100%;
    }

    /* Estilos para todo el contenedor de las listas que albergan tres columnas */
    .footer02__column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Estilos para todo el contenedor que alberga los link <a> */
    .footer02__column a {
        color: white; /* Color predeterminado de los enlaces */
        text-align: center;
        padding: 10px;
    }

    /* Estilos para los enlaces visitados */
    .footer02__column a:visited {
        color: #97baf1; /* Color para los enlaces visitados */
    }

    .footer02__column--left,
    .footer02__column--center,
    .footer02__column--right {
        width: 100%;
    }

    /* Estilos para el texto en la columna izquierda */
    .footer02__column--left p {
        text-align: center;
        padding: 10px;
    }

    /* Estilos para todo el contenedor de la columna del centro */
    .footer02__column--center {
        margin-top: 10px;
        padding: 10px;
        text-align: center;
    }

    /* Estilos para los iconos de social media del footer 02 */
    .footer02__social-icons i {
        font-size: 40px; /* Cambia el tamaño del icono según tus necesidades */
        text-align: center;
        margin-top: 15px;
        padding: 0 10px;
    }

    /* ESTILOS PARA EL FOOTER SECCIÓN 02__COLUMNA DERECHA*/
    .footer02__column--right {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}