body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000000;
  }
  
  .Contenedor{
       
      display:grid;
      grid-template-columns: repeat(5,20% 20% 20% 20% 20%);
      grid-template-rows:repeat(1, auto);
      grid-template-areas:"topnav topnav topnav topnav topnav"
                          "bloque1 bloque1 bloque1 bloque1 bloque1"
                          "form-estado form-estado form-estado form-estado form-estado"
                          
                          
                           "ubicacion ubicacion ubicacion ubicacion ubicacion"
                           "lista lista lista lista lista"
                           "actividad actividad actividad actividad actividad"
                           "publicidad publicidad recomendados recomendados recomendados"
                           "servicios servicios servicios servicios servicios"
                           "productos productos productos productos productos"
                           "footer-mx footer-mx footer-mx footer-mx footer-mx"
                         
      ;}
  
  
      .topnav {grid-area: topnav;
        overflow: hidden;
        background-color: #000000;
    position: fixed;
    width: 100%;
      }
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 15px;
        font-weight:600;
      }
      .topnav a:hover {
        background-color: #009de6;
        color: rgb(255, 255, 255);
        text-decoration: underline;
      }
    
      .topnav .im{
        background-color: #000000;
        color: rgb(255, 255, 255);
       font-size: 9px;
      }
      .topnav .im:hover{
        background-color: #000000;
        color: #009de6;
        text-decoration: underline;
       
      }
    
      .topnav .im img:hover{
        margin: auto;
        width: 30px;
        
      }
     
    
      .topnav a.active {
        background-color: #000000;
        color: rgb(255, 255, 255);
      }
      .topnav .icon {
        display: none;
      }
  
  
/**/
.bloque1 {
  grid-area: bloque1;
  margin-top: 50px;
  position: relative;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),
    url('../img/galaxi.PNG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
}

.ia-chat {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 40px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.ia-chat h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ia-chat form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.ia-chat input[type="text"] {
  flex: 1;
  min-width: 250px;
  padding: 14px 18px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  color: #333;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ia-chat button {
  background: #ff5722;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

.ia-chat button:hover {
  background: #e64a19;
  transform: scale(1.05);
}

/* Botón limpiar diferente */
.ia-chat button.limpiar {
  background: #777;
}
.ia-chat button.limpiar:hover {
  background: #555;
}

/* Área de respuestas con scroll */
#respuestaIA {
  margin-top: 15px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 15px;
  height: 100px;
  color: #fff;
  font-size: 0.95rem;
  overflow-y: auto;
  text-align: left;
}

/* Estilo para los mensajes */
.mensaje {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  word-wrap: break-word;
}

.mensaje.usuario {
  background: rgba(255,255,255,0.3);
  text-align: right;
}

.mensaje.ia {
  background: rgba(0,0,0,0.3);
  text-align: left;
}


/**/
 
  
  @media screen and (max-width: 900px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  
  
  @media screen and (max-width: 900px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  
  .topnav.responsive{
  width: 100%; margin: auto; 
  }
  }
  
 .form-estado {
  margin-top: 0px;
  grid-area: form-estado;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: transparent;
}

#estadoForm {
  display: flex;
  align-items: center;
  background: rgba(25, 25, 25, 0.9);
  border-radius: 50px;
  padding: 8px 15px;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
  width: 600px;
  max-width: 90%;
  transition: all 0.3s ease;
}

#estadoForm:hover {
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
}

/* Select */
#estadoForm select {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1em;
  padding: 10px;
  outline: none;
  appearance: none;
}

#estadoForm select option {
  background: #111;
  color: #fff;
}

/* Botón de buscar */
#estadoForm button[type="submit"] {
  background: linear-gradient(135deg, #0078d7, #00bfff);
  border: none;
  color: white;
  padding: 10px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

#estadoForm button[type="submit"]:hover {
  background: linear-gradient(135deg, #00bfff, #0078d7);
  transform: scale(1.05);margin-top: 20x;
}

/* Botón de ubicación arriba */
#limpiar {
  background: linear-gradient(135deg, #00bfff, #0078d7);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  
  cursor: pointer;
  transition: all 0.3s ease;
}

#limpiar:hover {
  background: linear-gradient(135deg, #0078d7, #00bfff);
  transform: scale(1.05);
}

/* Título */
.form-estado h3 {
  color: #00bfff;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1em;
}

/* Responsivo */
@media (max-width: 600px) {
  #estadoForm {
    width: 100%;
    flex-direction: column;
    border-radius: 20px;
    padding: 10px;
  }

  #estadoForm select {
    width: 100%;
    margin-bottom: 10px;
  }

  #estadoForm button[type="submit"] {
    width: 100%;
  }
}


/* Área de servicios dentro del grid */
.servicios {
    grid-area: servicios;
    padding: 1.5rem;
    background: #111;
    width: 100%;
    height: 520px;
    color: #009de6;

    /* Scroll horizontal dentro del contenedor */
    overflow-x: auto;
    overflow-y: hidden;

    /* Opcional: mejora visual del scroll */
    scrollbar-width: thin;
    scrollbar-color: #009de6 #e0e0e0;
    box-sizing: border-box;
}

.servicios::-webkit-scrollbar {
    height: 8px;
}

.servicios::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
}

.servicios::-webkit-scrollbar-thumb {
    background-color: #009de6;
    border-radius: 6px;
}

.servicios h2 {
    font-size: 2.0rem;
    color: #009de6;
    margin-bottom: 0.5rem;
}

.servicios h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #009de6;
}

.servicios-lista {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;

    /* Para que el scroll horizontal funcione correctamente */
    width: max-content;
    scroll-snap-type: x mandatory;
}

.servicios-item {
    flex: 0 0 auto;
    width: 300px;
    background: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.servicios-item:hover {
    transform: scale(1.05);
}

.portada-servicio {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.info-servicio {
    text-align: center;
    padding: 10px;
}

.logo-servicio {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    margin-bottom: 8px;
}

.info-servicio h4 {
    font-size: 1rem;
    color: #5e5e5e;
    margin: 0;
}

.info-servicio .nombre {
    font-size: 0.9rem;
    color: #a7a7a7;
}



/* Área de servicios dentro del grid */
.productos {
    grid-area: productos;
    padding: 1.5rem;
    background: #111;
    width: 100%;
    height: 520px;
    color: #009de6;
    margin-top: 30px;

    /* Scroll horizontal dentro del contenedor */
    overflow-x: auto;
    overflow-y: hidden;

    /* Opcional: mejora visual del scroll */
    scrollbar-width: thin;
    scrollbar-color: #009de6 #e0e0e0;
    box-sizing: border-box;
}

.productos::-webkit-scrollbar {
    height: 8px;
}

.productos::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
}

.productos::-webkit-scrollbar-thumb {
    background-color: #009de6;
    border-radius: 6px;
}

.productos h2 {
    font-size: 2.0rem;
    color: #009de6;
    margin-bottom: 0.5rem;
}

.productos h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #009de6;
}

.productos-lista {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;

    /* Para que el scroll horizontal funcione correctamente */
    width: max-content;
    scroll-snap-type: x mandatory;
}

.productos-item {
    flex: 0 0 auto;
    width: 300px;
    background: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.productos-item:hover {
    transform: scale(1.05);
}

.portada-productos {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.info-productos {
    text-align: center;
    padding: 10px;
}

.logo-productos {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    margin-bottom: 8px;
}

.info-productos h4 {
    font-size: 1rem;
    color: #5e5e5e;
    margin: 0;
}

.info-productos .nombre {
    font-size: 0.9rem;
    color: #a7a7a7;
}


  
  .ubicacion{grid-area: ubicacion; width: 100%; height: 200px; background-color: #f2f2f2; display:none; }
  .publicidad{grid-area: publicidad; width: 100%; height: 400px; background-color: #111; color: white; margin: auto; text-align: center; }
/* Contenedor general */
.recomendados {
  grid-area: recomendados;
  width: 90%;
  margin: auto;
  max-height: 80vh;; /* altura del carrusel */
  overflow-y: auto;
  background-color: #111;
  padding: 15px;
  border-radius: 10px;
  
}

/* Título */
.recomendados h3 {
  color: #fff;
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.2em;
}

/* Lista sin viñetas */
.recomendados-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Cada elemento (logo + info) */
.recomendado-item {
  display: flex;
  align-items: center;
  background-color: #1a1a1a;
  border-radius: 8px;
  padding: 10px;
  transition: background 0.3s ease;
}

.recomendado-item:hover {
  background-color: #222;
}

/* Logo */
.logo-recomendado {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background-color: #fff;
  border-radius: 5px;
  margin-right: 15px;
}

.sin-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  background-color: #222;
}

/* Información */
.info-recomendado {
  color: #fff;
  flex: 1;
}

.info-recomendado h4 {
  margin: 0;
  font-size: 1.1em;
  color: #00bfff;
}

.info-recomendado .giro {
  color: #ccc;
  font-style: italic;
  margin: 5px 0;
}

.info-recomendado .descripcion {
  color: #ddd;
  font-size: 0.9em;
  line-height: 1.4em;
}

/* Scroll bonito */
.recomendados::-webkit-scrollbar {
  width: 8px;
}

.recomendados::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.recomendados::-webkit-scrollbar-thumb:hover {
  background: #666;
}
  
  .lista{grid-area:lista; width:100%; color: #f2f2f2;} 
  
/* Estilo general */
.search-box {
    width: 100%;
    padding: 10px;
    margin: 20px 0;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Ocultar elementos de la lista por defecto */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: block;
    margin: 10px 0;
}

li a {
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

/* Para mostrar elementos filtrados */
li.hidden {
    display: none;
}


  /* Estilo general */
  .lista ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #000000;
}

.lista li {
    width: 100%;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lista li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    padding: 1rem;
    background-color: #000000;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.lista li a:hover {
    background-color: #0275d8;
    color: white;
}

.lista p {
    font-size: 0.9rem;
    color: #555;
    padding: 0 1rem 1rem;
}

.footer-mx {grid-area: footer-mx;
    display: block;
    width: 100%;
}

.footer-mx {
    background: #0a0a0a;
    color: #ffffff;
    padding: 40px 20px 20px;
    font-family: Arial, sans-serif;
    margin-top: 40px;
}

.footer-contenedor {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-col {
    flex: 1 1 250px;
}

.footer-col h3,
.footer-col h4 {
    margin-bottom: 12px;
    color: #00e1ff;
}

.footer-col p {
    line-height: 1.6;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col a {
    text-decoration: none;
    color: #000000;
    transition: 0.3s;
}

.footer-col a:hover {
    color: #00e1ff;
}

.footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 18px 0;
    border-top: 1px solid #333;
    font-size: 14px;
    color: #cccccc;
    display: block;
}


/* Estilo para pantallas grandes */
@media (min-width: 768px) {
    .lista li {
        width: 68%;
    }
}

/* Estilo para pantallas muy grandes */
@media (min-width: 1024px) {
    .lista li {
        width: 31%;
    }
}

/* Estilo para pantallas pequeñas */
@media (max-width: 480px) {
    .lista li {
        width: 100%;
    }
}
  

.publicidad img{border-radius: 10px;}
.publicidad img:hover {
 
  transform: scale(1.05);
  transition: transform 0.5s ease-in-out;

}

.actividad {grid-area: actividad;
    width: 90%;
    margin: auto;
    
    overflow: hidden; /* Oculta el contenido desbordado */
    position: relative;
}




.actividad h2{color: #ffffff;}


.actividad ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.5s ease-in-out;
}

.actividad li {
    flex: 0 0 auto;
    width: 300px; /* Establece el tamaño rectangular de las fichas */
    height: 200px; /* Alto de las fichas */
    margin-right: 10px; /* Espaciado entre fichas */
    background-color: #009de6;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 900;
    color: #c2c2c2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    font-size: 20px;
}

.actividad li:hover {
    background-color: #009de6;
    color: #ffffff;
    transform: scale(1.05);
    text-decoration: underline;
}

/* Estilo para los botones de control del slider */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: rgb(228, 0, 114);
    border: none;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Responsividad: ajuste del tamaño de las fichas en pantallas más pequeñas */
@media (max-width: 1024px) {
    .actividad li {
        width: 180px; /* Fichas más pequeñas en pantallas medianas */
        height: 90px;
    }
}

@media (max-width: 768px) {
    .actividad li {
        width: 250px; /* Fichas aún más pequeñas */
        height: 100px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .actividad li {
        width: 200px; /* Fichas pequeñas en pantallas más pequeñas */
        height: 70px;
        font-size: 15px; /* Reducir tamaño de texto */
    }
}



  
    @media (max-width:900px){
      .Contenedor{ 
      width:100%;
      display:grid;
      grid-gap:0px;
      grid-template-columns: repeat(1, 100%);
      grid-template-rows:repeat(3, auto);
      grid-template-areas:"topnav"
                          "bloque1"
                          "form-estado"
                          "publicidad"
                          "lista"
                          "actividad"
                          "servicios"
                          "productos"
                          "recomendados"
                          "footer-mx"
                         
                          
      ;}
  
       /*inicia header*/
     /*inicia header*/
     .topnav .im{ font-size: 20px;
      
     }
     .topnav a{ display: none;}
     .topnav{width: 100%;}
     
    .Contenedor .bloque1{width: 100%; margin-top: 50px;}
     .Contenedor  .form-estado {
    width: 90%;
    padding: 15px;
  }
  .Contenedor .footer-mx{width: 90%; margin: auto;}
  .Contenedor .recomendados{margin-top: 20px;}
.Contenedor .publicidad{margin: auto; text-align: center;}
.publicidad{  height: 320px;}
.publicidad ul{  flex-direction: column; text-align: center; justify-content: center;}
.publicidad ul div{ font-size: 10px; font-weight: 800; width: 100%;  background-color: #000000; align-items: center; }

    }