/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa barra_menu .CSS --------------------------------------
   ------------------------------------------------------------------------------------------------------------- */
 
/*TITULO BODY  */
  
  /* sin estilo  */


/*TITULO HEADER  */
  
  /* sin estilo  */


/* TITULO LOGO */

  /* clase logo  */
   .logo img {
    height: 70px;   /* hace que el logo se a grande  */
    padding-left: 35px; /* hace que el logo se corra hacia la izquiers  */
    padding: 10px 9px;  /* se utiliza para que el logo este mas centrada con los bordes y la posicion que queremos utilizar que seria mas a la derecha */
  }


/* TITULO MENÚ  */

  
  /* sin estilo  */



/*TITULO MENU HORIZONTAL (ESCRITORIO)  */

  /* clase del barra menu */
  .menu {
    position: fixed; /* Hace que el menu barra te siga en la pantalla cuando bajes o subas*/
    width: 100%;   /*hace que la barra menu esta usando todo el borde de extremo a extremo de la pagina */
    display: flex;   /* hace que el logo y el texto esten uno al lado del otro*/
    align-items: center;   /* se centra el texto del menu barra */
    justify-content: space-between; /* hace espacio entre logo y los elementos del menu barra */
    padding: 1px 9px;  /* se utiliza para que el logo este centrado y la posicion que queremos utilizar */
    z-index: 800;   /* se utiliza para que el menu se vea encima de todos los elementos en la pagina  */
    font-family:Arial, Helvetica, sans-serif;  /* se utiliza para el cambio letra de texto  */
  }


/* clase lista de enlaces de navegación */
  
  .menu .navegación-enlaces {
    list-style: none; /* hace que no aparezcan puntos entre los texto  */ 
    display: flex; /* hace que el texto se ponga vertical y no horizontal  */ 
    gap: 35px; /* es utilizado para ponerle distancia a cada texto con el otro  */
  }

/* clase lista de enlaces de navegación a */

  .menu .navegación-enlaces a {
    text-decoration: none; /* hace que el texto no le aparezcan lineas abajo  */ 
    color: rgb(252, 249, 249); /* se utiliza para color del texto  */
    font-size: 16px; /* se utiliza para que el tamaño de la letra del texto  */
    font-weight: 600; /* se utiliza para que el cambio del texto su anchura  */

  }



/* TITULO BOTÓN CERRAR MENÚ */

  /* 🔹 Botón "✕" para cerrar el menú desplegable */
  .cerrar-menu {
    position: absolute;        /* Posiciona el botón dentro del menú */
    top: 20px;                 /* Distancia desde el borde superior */
    right: 20px;               /* Distancia desde el borde derecho */
    font-size: 2rem;           /* Tamaño grande para visibilidad */
    color: #ffffff;          /* Color blanco para contraste */
    cursor: pointer;           /* Cursor tipo mano al pasar */
    z-index: 1001;             /* Asegura que esté por encima de todo */
    display: none;             /* 🔹 Oculto por defecto */
  }

  /* 🔹 Muestra el botón solo cuando el menú está activo */
  .menu-contenedor-hamburguesa.activo .cerrar-menu {
    display: block;            /* 🔹 Se muestra cuando el menú está abierto */
  }


/*TITULO BOTON INICIO  */
  

  /* sin estilo  */
  


/*TITULO BOTON ACERCA DE NOSOTROS  */
  

  /* sin estilo  */



/*TITULO BOTON SERVICIOS  */
  

  /* sin estilo  */



/*TITULO BOTON PROYECTO DESTACADOS  */
  

  /* sin estilo  */



/*TITULO BOTON TESTIMONIO  */
  

  /* sin estilo  */



/*TITULO BOTON CONTACTO  */
  
  /* sin estilo  */



/* TITULO BOTON CON DISEÑO */

  /* clase botón destacado para contactar */
  .menu .boton_contactar {
    display: inline-flex; /* hace que el texto se vea más grande */
    gap: 20px; /* separa el ícono del texto */
    padding: 4px 20px; /* aumenta el tamaño del botón */
    background-color: #000000; /* fondo completamente negro */
    border: 2px solid #ffffff; /* borde blanco de 2px */
    border-radius: 30px; /* bordes redondeados */
    color: #ffffff; /* texto blanco para contraste */
    text-decoration: none; /* elimina subrayado si es un enlace */
    align-items: center; /* centra verticalmente el contenido */
    font-weight: bold; /* texto más destacado */
    transition: all 0.3s ease; /* animación suave al interactuar */
  }

  /* efecto al pasar el mouse */
  .menu .boton_contactar:hover {
    background-color: #ffffff; /* fondo blanco al hacer hover */
    color: #000000; /* texto negro al hacer hover */
  }



/*TITULO BOTÓN HAMBURGUESA */

  /* clase hamburguesa contenedor del ícono de menú en móviles */
  .hamburguesa {
  width: 32px; /* tamaño del círculo */
  height: 32px;
  border: 2px solid #000000; /* borde blanco */
  border-radius: 50%; /* forma circular */
  background-color:rgb(255, 255, 255);
  display: flex; /* para alinear los spans */
  flex-direction: column; /* apila las líneas verticalmente */
  justify-content: center; /* centra verticalmente */
  align-items: center; /* centra horizontalmente */
  gap: 2px; /* espacio entre líneas */
  cursor: pointer; /* cursor tipo botón */
}

  /* clase hamburguesa  Líneas del ícono*/
.hamburguesa span {
  width: 15px; /* ancho de cada línea */
  height: 2px; /* grosor de cada línea */
  background-color: #000000; /* color negro para las líneas */
  border-radius: 30px; /* bordes redondeados */
  transition: all 0.3s ease; /* animación suave */
}


  /* 🔹 Animación al activar el menú hamburguesa */
  .hamburguesa.activo span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Gira la primera línea en cruz */
  }

  .hamburguesa.activo span:nth-child(2) {
    opacity: 0; /* Oculta la línea del medio */
  }

  .hamburguesa.activo span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px); /* Gira la tercera línea en cruz */
  }




/*TITULO RESPONSIVO  */


  /* 🔹 Teléfonos pequeños (iPhone SE, Android compactos) */

  @media only screen and (max-width: 480px) {

    /* 🔹 Posiciona y muestra el botón hamburguesa en la esquina superior derecha */
    .hamburguesa {
      position: absolute;        /* Posicionamiento absoluto dentro del contenedor */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
      width: 32px;                /* tamaño del círculo */
      height: 32px;
      display: flex;             /* Muestra el botón en móviles */
    }

    /* 🔹 Contenedor del menú desplegable hamburguesa */
    .menu-contenedor-hamburguesa {
      position: fixed;           /* Fija el menú en pantalla completa */
      width: 50%;                /* Ocupa el 80% del ancho de la pantalla */
      height: 100vh;             /* Ocupa toda la altura de la pantalla */
      background-color: #000000;    /* Fondo oscuro para contraste */
      flex-direction: column;    /* Organiza los elementos verticalmente */
      justify-content: flex-start; /* Alinea los elementos al inicio */
      padding: 2rem 1.5rem;      /* Espaciado interno para aire visual */
      z-index: 999;              /* Asegura que esté por encima de otros elementos */
      transition: transform 0.3s ease; /* Transición suave al abrir/cerrar */
      display: none;             /* Oculto por defecto */
      justify-content: center;  /* Posiciona al centro los items */
      text-align: center; /* Posicionamos al centoro */
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;             /* Muestra el menú cuando está activo */
    }  

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important; /* ✅ Oculta el botón hamburguesa */
    }


    /* 🔹 Botón para cerrar el menú hamburguesa */
    .cerrar-menu {
      font-size: 1.8rem;         /* Tamaño grande para visibilidad */
      color: #ffffff;          /* Color blanco para contraste */
      cursor: pointer;           /* Cursor tipo mano al pasar */
      position: absolute;        /* Posicionamiento dentro del menú */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
    }

    /* 🔹 Contenedor del logo dentro del menú hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa {
      display: flex;             /* Activa flexbox */
      justify-content: center;   /* Centra el logo horizontalmente */
      margin: 1rem 0 1.5rem 0;   /* Espaciado vertical alrededor del logo */
    }

    /* 🔹 Imagen del logo hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa img {
      height: 70px;              /* Altura del logo */
      padding-left: auto;   /* Con el right lo posicionamos en el centro */
      padding-right: auto;  /* Con el left lo posicionamos en el centro */
    }

    /* 🔹 Lista de enlaces del menú hamburguesa */
    .navegación-enlaces {
      list-style: none;          /* Elimina los puntos de lista */
      padding: 0;                /* Elimina el relleno por defecto */
      margin-top: 1rem;          /* Espacio superior antes de los enlaces */
      display: flex;             /* Activa flexbox */
      flex-direction: column;    /* Organiza los enlaces verticalmente */
      gap: 1.5rem;               /* Espacio entre cada enlace */
    }

    /* 🔹 Estilos para cada enlace */
    .navegación-enlaces a {
      text-decoration: none;     /* Elimina el subrayado */
      color: #ffffff;          /* Color blanco para visibilidad */
      font-size: 1rem;           /* Tamaño de texto estándar */
      font-weight: 750;          /* Grosor medio del texto */
    }

    /* 🔹 Botón destacado para contactar */
    .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 20px; /* separa el ícono del texto */
      padding: 4px 20px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 2px solid #ffffff; /* borde blanco de 2px */
      border-radius: 30px; /* bordes redondeados */
      color: #ffffff; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
  }
  
  /* clase hamburguesa  Líneas del ícono*/
  .hamburguesa span {
    width: 10px; /* ancho de cada línea */
    height: 3px; /* grosor de cada línea */
    background-color: #000000; /* color negro para las líneas */
    border-radius: 30px; /* bordes redondeados */
    transition: all 0.3s ease; /* animación suave */
  }


    /* 🔹 Ícono dentro del botón contactar */
    .boton_contactar img {
      width: 20px;               /* Tamaño del ícono */
      height: 20px;              /* Altura del logo */
    }

    /* 🔹 Posiciona el logo en la esquina superior izquierda con margen ajustable */
    .logo {
      position: absolute;     /* Lo posicionamos dentro del contenedor principal */
      top: 2px;              /* Separación desde el borde superior */
      left: 0px;              /* Lo pegamos al borde izquierdo */
      padding-left: 20px;     /* Puedes ajustar este valor para moverlo a la derecha */
      z-index: 1000;          /* Asegura que esté por encima de otros elementos */
      display: flex;          /* Activa flexbox si necesitas alinear contenido interno */
      align-items: center;    /* Centra verticalmente si hay texto o íconos al lado */
    }


    /* 🔹 Imagen del logo dentro del contenedor */
    .logo img {
      height: 70px;           /* Altura del logo */
      max-width: 100%;        /* Asegura que no se desborde */
    }
  }



/* 🔹 Teléfonos medianos (iPhone estándar, Android promedio) */

  @media only screen and (min-width: 481px) and (max-width: 767px) {

    /* 🔹 Botón hamburguesa visible en la esquina superior derecha */
    .hamburguesa {
      position: absolute;        /* Posicionamiento absoluto dentro del contenedor */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
      display: flex;             /* Muestra el botón en móviles */
      width: 32px;               /* tamaño del círculo */
      height: 32px;
    }

    /* 🔹 Contenedor del menú hamburguesa (oculto por defecto) */
    .menu-contenedor-hamburguesa {
      position: fixed;           /* Fija el menú en pantalla completa */
      width: 35%;                /* Ocupa el 80% del ancho de la pantalla */
      height: 100vh;             /* Ocupa toda la altura de la pantalla */
      background-color: #111;  /* Fondo oscuro para contraste */
      flex-direction: column;    /* Organiza los elementos verticalmente */
      justify-content: flex-start; /* Alinea los elementos al inicio */
      padding: 2rem 1.5rem;      /* Espaciado interno para aire visual */
      z-index: 999;              /* Asegura que esté por encima de otros elementos */
      transition: transform 0.3s ease; /* Transición suave al abrir/cerrar */
      display: none;             /* Oculto por defecto */
      justify-content: center;  /* Se centran las opciones del menu */
      text-align: center; /* Se centra el texto */
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;             /* Muestra el menú cuando está activo */
    }

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important;  /* Fuerza la ocultación del botón hamburguesa */
    }

    /* 🔹 Botón para cerrar el menú hamburguesa (ícono ✕) */
    .cerrar-menu {
      font-size: 1.8rem;         /* Tamaño grande para visibilidad */
      color: #ffffff;             /* Color blanco para contraste */
      cursor: pointer;           /* Cursor tipo mano al pasar */
      position: absolute;        /* Posicionamiento dentro del menú */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
    }

    /* 🔹 Contenedor del logo dentro del menú hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa {
      display: flex;             /* Activa flexbox */
      justify-content: center;   /* Centra el logo horizontalmente */
      margin: 1rem 0 1.5rem 0;   /* Espaciado vertical alrededor del logo */
    }

    /* 🔹 Imagen del logo hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa img {
      height: 50px;              /* Altura del logo */
      margin: 0 auto; /* Centramos la imagen en 0 */
    }

    /* 🔹 Lista de enlaces del menú hamburguesa */
    .navegación-enlaces {
      list-style: none;          /* Elimina los puntos de lista */
      padding: 0;                /* Elimina el relleno por defecto */
      margin-top: 1rem;          /* Espacio superior antes de los enlaces */
      display: flex;             /* Activa flexbox */
      flex-direction: column;    /* Organiza los enlaces verticalmente */
      gap: 1.5rem;               /* Espacio entre cada enlace */
    }

    /* 🔹 Estilos para cada enlace */
    .navegación-enlaces a {
      text-decoration: none;     /* Elimina el subrayado */
      font-size: 1rem;           /* Tamaño de texto  */
      font-weight: 750;          /* Grosor medio del texto */
      color: #ffffff;
    }

    /* 🔹 Botón destacado para contactar */
    .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 3px; /* separa el ícono del texto */
      padding: 4px 20px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 3px solid #ffffff; /* borde blanco de 3px */
      border-radius: 30px; /* bordes redondeados */
      color: #000000; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* clase hamburguesa  Líneas del ícono*/
    .hamburguesa span {
      width: 13px; /* ancho de cada línea */
      height: 2px; /* grosor de cada línea */
      background-color: #000000; /* color negro para las líneas */
      border-radius: 30px; /* bordes redondeados */
      transition: all 0.3s ease; /* animación suave */
    }


    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #f7f5f5; /* texto negro al hacer hover */
  }

    /* 🔹 Ícono dentro del botón contactar */
    .boton_contactar img {
      width: 20px;               /* Tamaño del ícono */
      height: 20px;              /* Altura del ícono */
    }

     /* 🔹 Posiciona el logo en la esquina superior izquierda con margen ajustable */
    .logo {
      position: absolute;     /* Lo posicionamos dentro del contenedor principal */
      top: 2px;              /* Separación desde el borde superior */
      left: 0px;              /* Lo pegamos al borde izquierdo */
      padding-left: 20px;     /* Puedes ajustar este valor para moverlo a la derecha */
      z-index: 1000;          /* Asegura que esté por encima de otros elementos */
      display: flex;          /* Activa flexbox si necesitas alinear contenido interno */
      align-items: center;    /* Centra verticalmente si hay texto o íconos al lado */
    }


    /* 🔹 Imagen del logo dentro del contenedor */
    .logo img {
      height: 75px;           /* Altura del logo */
      max-width: 100%;        /* Asegura que no se desborde */
    }


}


/* 🔹 Tablets (iPad vertical, Android tablets) */

  @media only screen and (min-width: 768px) and (max-width: 1023px) {

    /* 🔹 Botón hamburguesa visible en la esquina superior derecha */
    .hamburguesa {
      position: absolute;        /* Posicionamiento absoluto dentro del contenedor */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
      width: 55px; /* tamaño del círculo */
      height: 55px;
      display: flex;             /* Muestra el botón en tablets */
    }

    /* 🔹 Contenedor del menú hamburguesa (oculto por defecto) */
    .menu-contenedor-hamburguesa {
      position: fixed;           /* Fija el menú en pantalla completa */
      width: 35%;                /* Ocupa el 66% del ancho de la pantalla */
      height: 100vh;             /* Ocupa toda la altura de la pantalla */
      background-color: #111;    /* Fondo oscuro para contraste */
      flex-direction: column;    /* Organiza los elementos verticalmente */
      justify-content: flex-start; /* Alinea los elementos al inicio */
      padding: 2rem 1.5rem;      /* Espaciado interno para aire visual */
      z-index: 999;              /* Asegura que esté por encima de otros elementos */
      transition: transform 0.3s ease; /* Transición suave al abrir/cerrar */
      display: none;             /* Oculto por defecto */
      justify-content: center;  /* Se centran las opciones del menu */
      text-align: center; /* Se centra el texto */
      
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;             /* Muestra el menú cuando está activo */
    }

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important;  /* Fuerza la ocultación del botón hamburguesa */
    }

    /* 🔹 Botón para cerrar el menú hamburguesa (ícono ✕) */
    .cerrar-menu {
      font-size: 1.8rem;         /* Tamaño grande para visibilidad */
      color: #ffffff;               /* Color blanco para contraste */
      cursor: pointer;           /* Cursor tipo mano al pasar */
      position: absolute;        /* Posicionamiento dentro del menú */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
    }

    /* 🔹 Contenedor del logo dentro del menú hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa {
      display: flex;             /* Activa flexbox */
      justify-content: center;   /* Centra el logo horizontalmente */
      margin: 1rem 0 1.5rem 0;   /* Espaciado vertical alrededor del logo */
    }

    /* 🔹 Imagen del logo hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa img {
      height: 70px;              /* Altura del logo */
      padding-left: 0;           /* Sin desplazamiento adicional */
      margin: 0 auto; /* Hace padding al left y right para que este centrado */
    }

    /* 🔹 Lista de enlaces del menú hamburguesa */
    .navegación-enlaces {
      list-style: none;           /* Elimina los puntos de lista por defecto */
      padding: 0;                 /* Elimina el relleno interno */
      margin-top: 1rem;           /* Espacio superior antes de los enlaces */
      display: flex;              /* Activa flexbox para organizar los enlaces */
      flex-direction: column;     /* Organiza los enlaces verticalmente */
      gap: 1.5rem;                /* Espacio entre cada enlace */
    }

    /* 🔹 Estilos para cada enlace dentro del menú */
    .navegación-enlaces a {
      text-decoration: none;      /* Elimina el subrayado del texto */
      color: #ffffff;              /* Color blanco para visibilidad sobre fondo oscuro */
      font-size: 1.5rem;            /* Tamaño de fuente estándar */
      font-weight: 750;           /* Grosor medio del texto para mejor legibilidad */
    }

    /* 🔹 Botón destacado para contactar (con ícono) */

    .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 20px; /* separa el ícono del texto */
      padding: 4px 20px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 2px solid #ffffff; /* borde blanco de 2px */
      border-radius: 30px; /* bordes redondeados */
      color: #ffffff; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* clase hamburguesa  Líneas del ícono*/
    .hamburguesa span {
      width: 20px; /* ancho de cada línea */
      height: 3px; /* grosor de cada línea */
      background-color: #000000; /* color negro para las líneas */
      border-radius: 30px; /* bordes redondeados */
      transition: all 0.3s ease; /* animación suave */
    }

    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
    }

    /* 🔹 Ícono dentro del botón "Contactar" */
    .boton_contactar img {
      width: 20px;                /* Ancho del ícono */
      height: 20px;               /* Alto del ícono */
    }

     /* 🔹 Posiciona el logo en la esquina superior izquierda con margen ajustable */
    .logo {
      position: absolute;     /* Lo posicionamos dentro del contenedor principal */
      top: 2px;              /* Separación desde el borde superior */
      left: 0px;              /* Lo pegamos al borde izquierdo */
      padding-left: 20px;     /* Puedes ajustar este valor para moverlo a la derecha */
      z-index: 1000;          /* Asegura que esté por encima de otros elementos */
      display: flex;          /* Activa flexbox si necesitas alinear contenido interno */
      align-items: center;    /* Centra verticalmente si hay texto o íconos al lado */
    }


    /* 🔹 Imagen del logo dentro del contenedor */
    .logo img {
      height: 75px;           /* Altura del logo */
      max-width: 100%;        /* Asegura que no se desborde */
    }


}



/*Activa el menu hamburguesa para Móviles y tablets ✅ Activa el menú hamburguesa */

  /* 🔹 Móviles y tablets */
  @media only screen and (max-width: 1024px) {

    /* 🔹 Muestra el botón hamburguesa en la esquina superior derecha */
    .hamburguesa {
      display: flex;            /* Activa el botón hamburguesa en pantallas pequeñas */
    }

    /* 🔹 Oculta el menú horizontal en móviles/tablets */
    .menu-contenedor {
      display: none !important; /* Fuerza la ocultación del menú horizontal */
    }

    /* 🔹 Contenedor del menú hamburguesa (oculto por defecto) */
    .menu-contenedor-hamburguesa {
      display: none;            /* Oculto inicialmente, se activa con JS */
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;            /* Muestra el menú cuando está activo */
      flex-direction: column;   /* Organiza los elementos verticalmente */
      position: fixed;          /* Fija el menú en pantalla completa */
      height: 100vh;            /* Ocupa toda la altura de la pantalla */
      background-color: #000000;   /* Fondo oscuro para contraste */
      padding: 1rem 0.5rem;     /* Espaciado interno para aire visual */
      z-index: 999;             /* Asegura que esté por encima de otros elementos */
      border-radius: 16px 0 0 16px; /* esquinas redondeadas del lado izquierdo */
      box-shadow: -10px 0 20px rgba(0,0,0,0.15); /* sombra más difusa */

    }

    /* clase hamburguesa  Líneas del ícono*/
    .hamburguesa span {
      width: 20px; /* ancho de cada línea */
      height: 3px; /* grosor de cada línea */
      background-color: #000000; /* color negro para las líneas */
      border-radius: 30px; /* bordes redondeados */
      transition: all 0.3s ease; /* animación suave */
    }

    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
  }
    

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important; /* Fuerza la ocultación del botón hamburguesa */
    }

    /* 🔹 Asegura que el botón hamburguesa esté visible por defecto */
    .hamburguesa {
      display: flex;            /* Muestra el botón hamburguesa si no está oculto */
    }
}





/* 🔹 iPad horizontal / tablets grandes / laptops pequeños */
  @media only screen and (min-width: 1024px) and (max-width: 1279px) {

    /* 🔹 Botón hamburguesa visible en la esquina superior derecha */
    .hamburguesa {
      position: absolute;        /* Posicionamiento absoluto dentro del contenedor */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
      width: 78px;                /* tamaño del círculo */
      height: 78px;
      display: flex;             /* Muestra el botón en tablets */
    }

    /* 🔹 Contenedor del menú hamburguesa (oculto por defecto) */
    .menu-contenedor-hamburguesa {
      position: fixed;           /* Fija el menú en pantalla completa */
      width: 35%;                /* Ocupa el 66% del ancho de la pantalla */
      height: 100vh;             /* Ocupa toda la altura de la pantalla */
      background-color: #000000;    /* Fondo oscuro para contraste */
      flex-direction: column;    /* Organiza los elementos verticalmente */
      justify-content: flex-start; /* Alinea los elementos al inicio */
      padding: 2rem 1.5rem;      /* Espaciado interno para aire visual */
      z-index: 999;              /* Asegura que esté por encima de otros elementos */
      transition: transform 0.3s ease; /* Transición suave al abrir/cerrar */
      display: none;             /* Oculto por defecto */
      justify-content: center;  /* Se centran las opciones del menu */
      text-align: center; /* Se centra el texto */
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;             /* Muestra el menú cuando está activo */
    }

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important;  /* Fuerza la ocultación del botón hamburguesa */
    }

    /* 🔹 Botón para cerrar el menú hamburguesa (ícono ✕) */
    .cerrar-menu {
      font-size: 1.8rem;         /* Tamaño grande para visibilidad */
      color: #ffffff;               /* Color blanco para contraste */
      cursor: pointer;           /* Cursor tipo mano al pasar */
      position: absolute;        /* Posicionamiento dentro del menú */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
    }

    /* 🔹 Contenedor del logo dentro del menú hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa {
      display: flex;             /* Activa flexbox */
      justify-content: center;   /* Centra el logo horizontalmente */
      margin: 1rem 0 1.5rem 0;   /* Espaciado vertical alrededor del logo */
    }

    /* 🔹 Imagen del logo hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa img {
      height: 70px;   /* Altura del logo */
      margin: 0;  /* Para sacar los margin y este centrado */
    }

    /* 🔹 Lista de enlaces del menú hamburguesa */
    .navegación-enlaces {
      list-style: none;           /* Elimina los puntos de lista por defecto */
      padding: 0;                 /* Elimina el relleno interno */
      margin-top: 1rem;           /* Espacio superior antes de los enlaces */
      display: flex;              /* Activa flexbox para organizar los enlaces */
      flex-direction: column;     /* Organiza los enlaces verticalmente */
      gap: 1.5rem;                /* Espacio entre cada enlace */
    }

    /* 🔹 Estilos para cada enlace dentro del menú */
    .navegación-enlaces a {
      text-decoration: none;      /* Elimina el subrayado del texto */
      color: #ffffff;              /* Color blanco para visibilidad sobre fondo oscuro */
      font-size: 1.7rem;            /* Tamaño de fuente estándar */
      font-weight: 750;           /* Grosor medio del texto para mejor legibilidad */
    }

    /* 🔹 Botón destacado para contactar (con ícono) */
    .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 20px; /* separa el ícono del texto */
      padding: 4px 20px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 2px solid #ffffff; /* borde blanco de 2px */
      border-radius: 30px; /* bordes redondeados */
      color: #ffffff; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* clase hamburguesa  Líneas del ícono*/
    .hamburguesa span {
      width: 19px; /* ancho de cada línea */
      height: 3px; /* grosor de cada línea */
      background-color: #000000; /* color negro para las líneas */
      border-radius: 30px; /* bordes redondeados */
      transition: all 0.3s ease; /* animación suave */
    }

    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
  }


    /* 🔹 Ícono dentro del botón "Contactar" */
    .boton_contactar img {
      width: 20px;                /* Ancho del ícono */
      height: 20px;               /* Alto del ícono */
    }

     /* 🔹 Posiciona el logo en la esquina superior izquierda con margen ajustable */
    .logo {
      position: absolute;     /* Lo posicionamos dentro del contenedor principal */
      top: 2px;              /* Separación desde el borde superior */
      left: 0px;              /* Lo pegamos al borde izquierdo */
      padding-left: 20px;     /* Puedes ajustar este valor para moverlo a la derecha */
      z-index: 1000;          /* Asegura que esté por encima de otros elementos */
      display: flex;          /* Activa flexbox si necesitas alinear contenido interno */
      align-items: center;    /* Centra verticalmente si hay texto o íconos al lado */
    }


    /* 🔹 Imagen del logo dentro del contenedor */
    .logo img {
      height: 75px;           /* Altura del logo */
      max-width: 100%;        /* Asegura que no se desborde */
    }
}



   /*🔹 iPad Pro   */
  @media only screen and (min-width: 1024px) and (max-width: 1366px){
     /* 🔹 Botón hamburguesa visible en la esquina superior derecha */
    .hamburguesa {
      position: absolute;        /* Posicionamiento absoluto dentro del contenedor */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
      width: 70px;                /* tamaño del círculo */
      height: 70px;
      display: flex;             /* Muestra el botón en tablets */
    }

    /* 🔹 Contenedor del menú hamburguesa (oculto por defecto) */
    .menu-contenedor-hamburguesa {
      position: fixed;           /* Fija el menú en pantalla completa */
      width: 35%;                /* Ocupa el 66% del ancho de la pantalla */
      height: 100vh;             /* Ocupa toda la altura de la pantalla */
      background-color: #111;    /* Fondo oscuro para contraste */
      flex-direction: column;    /* Organiza los elementos verticalmente */
      justify-content: flex-start; /* Alinea los elementos al inicio */
      padding: 2rem 1.5rem;      /* Espaciado interno para aire visual */
      z-index: 999;              /* Asegura que esté por encima de otros elementos */
      transition: transform 0.3s ease; /* Transición suave al abrir/cerrar */
      display: none;             /* Oculto por defecto */
      justify-content: center;  /* Se centran las opciones del menu */
      text-align: center; /* Se centra el texto */
    }

    /* 🔹 Activa el menú hamburguesa cuando se abre */
    .menu-contenedor-hamburguesa.activo {
      display: flex;             /* Muestra el menú cuando está activo */
    }

    /* 🔹 Oculta el botón hamburguesa cuando el menú está activo */
    .hamburguesa.oculto {
      display: none !important;  /* Fuerza la ocultación del botón hamburguesa */
    }

    /* 🔹 Botón para cerrar el menú hamburguesa (ícono ✕) */
    .cerrar-menu {
      font-size: 1.8rem;         /* Tamaño grande para visibilidad */
      color: #ffffff;               /* Color blanco para contraste */
      cursor: pointer;           /* Cursor tipo mano al pasar */
      position: absolute;        /* Posicionamiento dentro del menú */
      top: 20px;                 /* Separación desde el borde superior */
      right: 20px;               /* Separación desde el borde derecho */
    }

    /* 🔹 Contenedor del logo dentro del menú hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa {
      display: flex;             /* Activa flexbox */
      justify-content: center;   /* Centra el logo horizontalmente */
      margin: 1rem 0 1.5rem 0;   /* Espaciado vertical alrededor del logo */
    }

    /* 🔹 Imagen del logo hamburguesa */
    .menu-contenedor-hamburguesa .logo-hamburguesa img {
      height: 70px;   /* Altura del logo */
      margin: 0;  /* Para sacar los margin y este centrado */
    }

    /* 🔹 Lista de enlaces del menú hamburguesa */
    .navegación-enlaces {
      list-style: none;           /* Elimina los puntos de lista por defecto */
      padding: 0;                 /* Elimina el relleno interno */
      margin-top: 1rem;           /* Espacio superior antes de los enlaces */
      display: flex;              /* Activa flexbox para organizar los enlaces */
      flex-direction: column;     /* Organiza los enlaces verticalmente */
      gap: 1.5rem;                /* Espacio entre cada enlace */
    }

    /* 🔹 Estilos para cada enlace dentro del menú */
    .navegación-enlaces a {
      text-decoration: none;      /* Elimina el subrayado del texto */
      color: #ffffff;              /* Color blanco para visibilidad sobre fondo oscuro */
      font-size: 1.7rem;            /* Tamaño de fuente estándar */
      font-weight: 750;           /* Grosor medio del texto para mejor legibilidad */
    }

    /* 🔹 Botón destacado para contactar (con ícono) */
    .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 20px; /* separa el ícono del texto */
      padding: 4px 17px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 2px solid #ffffff; /* borde blanco de 2px */
      border-radius: 30px; /* bordes redondeados */
      color: #ffffff; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* clase hamburguesa  Líneas del ícono*/
    .hamburguesa span {
      width: 20px; /* ancho de cada línea */
      height: 3px; /* grosor de cada línea */
      background-color: #000000; /* color negro para las líneas */
      border-radius: 25px; /* bordes redondeados */
      transition: all 0.3s ease; /* animación suave */
    }

    /* efecto al pasar el mouse */  
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
  }


    /* 🔹 Ícono dentro del botón "Contactar" */
    .boton_contactar img {
      width: 20px;                /* Ancho del ícono */
      height: 20px;               /* Alto del ícono */
    }

     /* 🔹 Posiciona el logo en la esquina superior izquierda con margen ajustable */
    .logo {
      position: absolute;     /* Lo posicionamos dentro del contenedor principal */
      top: 2px;              /* Separación desde el borde superior */
      left: 0px;              /* Lo pegamos al borde izquierdo */
      padding-left: 20px;     /* Puedes ajustar este valor para moverlo a la derecha */
      z-index: 1000;          /* Asegura que esté por encima de otros elementos */
      display: flex;          /* Activa flexbox si necesitas alinear contenido interno */
      align-items: center;    /* Centra verticalmente si hay texto o íconos al lado */
    }


    /* 🔹 Imagen del logo dentro del contenedor */
    .logo img {
      height: 80px;           /* Altura del logo */
      max-width: 100%;        /* Asegura que no se desborde */
    }
    
    .menu {
      display: flex;                  /* Activa flexbox para alinear logo y enlaces */
      align-items: center;           /* Centra verticalmente los elementos */
      justify-content: space-between;/* Separa logo a la izquierda y enlaces a la derecha */
      padding: 10px 90px;            /* Espaciado interno en los costados */
      position: fixed;               /* Fija el menú en la parte superior */
      width: 100%;                   /* Ocupa todo el ancho de la pantalla */
      z-index: 800;                  /* Asegura que esté por encima de otros elementos */
      font-family: Arial, Helvetica, sans-serif; /* Fuente del menú */
    }
  }




  /*oculta el menu hamburguesa para escritorio y pantallas grandes ✅ Activa el menú horizontal */


  /* 🔹 Escritorio y pantallas grandes */
  @media only screen and (min-width: 1025px) {

    /* 🔹 Contenedor principal del menú horizontal */
    .menu {
      display: flex;                  /* Activa flexbox para alinear logo y enlaces */
      align-items: center;           /* Centra verticalmente los elementos */
      justify-content: space-between;/* Separa logo a la izquierda y enlaces a la derecha */
      padding: 1px 9px;            /* Espaciado interno en los costados */
      position: fixed;               /* Fija el menú en la parte superior */
      width: 100%;                   /* Ocupa todo el ancho de la pantalla */
      z-index: 800;                  /* Asegura que esté por encima de otros elementos */
      font-family: Arial, Helvetica, sans-serif; /* Fuente del menú */
    }

    /* 🔹 Contenedor del logo */
    .logo {
      display: flex;                 /* Activa flexbox para el logo */
      align-items: center;          /* Centra verticalmente el logo */
      flex-shrink: 0;               /* Evita que el logo se reduzca por falta de espacio */
    }

    /* 🔹 Imagen del logo */
    .logo img {
      height: 85px;                 /* Altura del logo */
      padding-left: 40px;           /* Separación del borde izquierdo */
    }

    /* 🔹 Contenedor de los enlaces del menú */
    .menu-contenedor {
      display: flex;                /* Activa flexbox para los enlaces */
      align-items: center;          /* Centra verticalmente los enlaces */
      justify-content: flex-end;    /* Alinea los enlaces a la derecha */
      flex: 1;                      /* Ocupa el espacio restante del menú */
    }

    .menu .navegación-enlaces {
      list-style: none;
      display: flex;
      flex-direction: row; /* Asegura que estén en fila */
      gap: 35px;
      margin: 0;
      padding: 0;
    }

    /* 🔹 Estilos para cada enlace */
    .menu .navegación-enlaces a {
      text-decoration: none;        /* Elimina subrayado */
      color: #fff;                  /* Color blanco para visibilidad */
      font-size: 1rem;              /* Tamaño de fuente estándar */
      font-weight: 600;             /* Grosor medio del texto */
    }


    
    /* 🔹 Oculta el menú hamburguesa en escritorio */
    .menu-contenedor-hamburguesa {
      display: none !important;     /* Fuerza la ocultación del menú hamburguesa */
    }

    /* 🔹 Oculta el botón hamburguesa en escritorio */
    .hamburguesa {
      display: none;                /* Oculta el ícono hamburguesa */
    }
}


  
/* 🔹 Escritorio y pantallas grandes */

  @media only screen and (min-width: 1280px) {

    /* 🔹 Contenedor principal del menú horizontal */
    .menu {
    position: fixed; /* Hace que el menu barra te siga en la pantalla cuando bajes o subas*/
    width: 100%;   /*hace que la barra menu esta usando todo el borde de extremo a extremo de la pagina */
    display: flex;   /* hace que el logo y el texto esten uno al lado del otro*/
    align-items: center;   /* se centra el texto del menu barra */
    justify-content: space-between; /* hace espacio entre logo y los elementos del menu barra */
    padding: 1px 9px;  /* se utiliza para que el logo este centrado y la posicion que queremos utilizar */
    z-index: 800;   /* se utiliza para que el menu se vea encima de todos los elementos en la pagina  */
    background-color: rgba(0, 0, 0, 0.95); /* Fondo negro semitransparente */
    font-family:Arial, Helvetica, sans-serif;  /* se utiliza para el cambio letra de texto  */
  }

    /* 🔹 Contenedor de los enlaces del menú */
    .menu-contenedor {
      display: flex;                /* Activa flexbox */
      align-items: center;          /* Centra verticalmente */
      justify-content: flex-end;    /* Alinea los enlaces a la derecha */
      flex: 1;                      /* Ocupa el espacio restante */
      width: 100%;   /*hace que la barra menu esta usando todo el borde de extremo a extremo de la pagina */
      padding: 25px 31px;  /* se utiliza para que el logo este centrado y la posicion que queremos utilizar */
    }

    /* 🔹 Contenedor del logo */
    .logo {
      display: flex;                /* Activa flexbox */
      align-items: center;          /* Centra verticalmente */
      flex-shrink: 0;               /* Evita que se reduzca el logo */
    }

    /* 🔹 Imagen del logo */
    .logo img {
      height: 85px;                 /* Altura del logo */
      padding-left: 40px;           /* Separación del borde izquierdo */
    }

    .menu .navegación-enlaces {
    list-style: none; /* hace que no aparezcan puntos entre los texto  */ 
    display: flex; /* hace que el texto se ponga vertical y no horizontal  */ 
    gap: 30px; /* es utilizado para ponerle distancia a cada texto con el otro  */
  }

    /* 🔹 Estilos para cada enlace */
    .menu .navegación-enlaces a {
      text-decoration: none;        /* Elimina subrayado */
      color: #fff;                  /* Color blanco para visibilidad */
      font-size: 1rem;              /* Tamaño de fuente estándar */
      font-weight: 600;             /* Grosor medio del texto */
    }


    /* clase botón destacado para contactar */
    .menu .boton_contactar {
      display: inline-flex; /* hace que el texto se vea más grande */
      gap: 20px; /* separa el ícono del texto */
      padding: 4px 20px; /* aumenta el tamaño del botón */
      background-color: #000000; /* fondo completamente negro */
      border: 2px solid #ffffff; /* borde blanco de 2px */
      border-radius: 30px; /* bordes redondeados */
      color: #ffffff; /* texto blanco para contraste */
      text-decoration: none; /* elimina subrayado si es un enlace */
      align-items: center; /* centra verticalmente el contenido */
      font-weight: bold; /* texto más destacado */
      transition: all 0.3s ease; /* animación suave al interactuar */
    }

    /* efecto al pasar el mouse */
    .menu .boton_contactar:hover {
      background-color: #ffffff; /* fondo blanco al hacer hover */
      color: #000000; /* texto negro al hacer hover */
    }


    /* 🔹 Ícono dentro del botón "Contactar" */
    .menu .boton_contactar img {
      width: 20px;                  /* Ancho del ícono */
      height: 20px;                 /* Alto del ícono */
    }

}

    
/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa barra_menu .CSS ----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */



/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/