iframe{
border:none;
}
h3 {text-align:left}
.alcentro{width:80%;height:1200;background-color:white;position:absolute;top:1px;left:1px}
.main { position:relative;width:40%;float:right;position:relative;top:-105%;padding:10px 0 10px 20px;margin:5px 3px 0 15px;height:245px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 2px;
  overflow: hidden;
  border: 2px solid rgba(220,220,220,1);
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font: normal 11px/1.5 Tahoma, Geneva, sans-serif;
  color: #404040;
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.head { text-align:left;background-color:white;width:100%;padding:5px 5px;margin:5px 5px;height:50px;}
.menu { font-size:15px;width:95%;
height:300px;
background-color:#565656;
text-align:center;
color:rgba(220,220,220,1);
padding:20px 20px 20px 10px;

}
.menu img{max-width:70%}
.foot { background-color: white}
#subMe li{display:inline}
#subMe input{width:6} 
#navega #menu #fijo { 
  position:fixed; 
  text-align:center; 
  top: 0px;                    /* Distancia hasta el borde superior */ 
  left: 0px;            /* Distancia hasta el borde izquierdo */
  width:100%; 
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 20px;
  overflow: hidden;
  border: none;
  color: rgba(0,0,0,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #ffffff;
  -webkit-box-shadow: 0 3px 2px 1px rgba(0,0,0,0.5) ;
  box-shadow: 0 3px 2px 1px rgba(0,0,0,0.5) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  z-index: 1;               /* hace que la capa sea opaca  */ 
} 

.grid-container {
  display: grid;
  width:100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
/*  grid-template-columns: auto auto auto; */
  margin:0 1;
 }

.grid-item1 {
  width: 300px;
  height: 318px;
  margin-bottom:10px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 2px;
  overflow: hidden;
  border: none;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font: normal 16px/1 "Poppins", system-ui;
  color: #404040;
  text-align: left;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 1px;
}
.grid-container2 {
  display: grid;
  width:100%;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin:0 1;
 }

.grid-item2 {
  width: 350px;
  height: 300px;
  margin-bottom:10px;
  padding: 2px;
  overflow: visible;
  font: normal 16px/1 "Poppins", system-ui;
  color: #404040;
  text-align: justify;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}

.contenedor{width:100%}
.boton {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100px;
  padding: 8px;
  overflow: hidden;
  border: none;
  font: normal 10px/1 Verdana, Geneva, sans-serif;
  color: rgba(20,0,0,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
	.contenedor{margin:15px 10px;}
	.boton {font: normal 35px/2 Verdana, Geneva, sans-serif}
.titulo {
 width:148px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  overflow: hidden;
  padding:5px;
  border: none;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 12px/1 Verdana, Geneva, sans-serif;
  color: rgba(40,40,40,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  background: #99e0fc;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  position: relative;
}

#cerrar{width:20%;position:relative;left:-10%}
.imagenes{width:80%}
.tamanio{font-size:30px}
#cortina{height:2800px}

.describe img{max-width:100%;}
.describe {
	display: flex;
  	justify-content: left;
  	align-items: left;
  	width: 100%;
  	height: auto;
  	padding:10px 1px 30px 30px;
	}

#reconoce{display:none}
#dmLupa{width:65%}


.derecha {
	width:75%;
	position:relative;
	left:-15%;
}

.encabezado {
  width:90%;
  text-align:left;
	display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #a0a0a0;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal Tahoma, Geneva, sans-serif;
  color: rgba(90,90,90,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #ffffff;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
}
#b_2{
width:110%;
position:relative;
left:-25%;
	}
#b_3{
width:100%;
position:relative;
left:-25%;
	}
@media screen and (min-width:1000px){
.apareceDesaparece{display:none;}
	
#b_3,#b_2{
width:100%;
position:relative;
left:10px;

	}

.encabezado{width:100%;}
.describe{width:90%;background-color:white}
#dmLupa{width:10%}
.boton {font: normal 16px/1 Verdana, Geneva, sans-serif;margin:5px}
.contenedor{margin:20px 10px;}
#reconoce{display:block}
#emergente{display:none}
#cerrar{width:12%;position:relative;left:-10%}
.a{height:30px}
.alcentro{height:auto}
.grid-container {grid-template-columns: auto auto auto;}
.describe img{max-width:100%;}
}
.anchoiFrame{width:50%}

.contiene {
	width:150px;
	height:150px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }

a:link {
	
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	background-color:#C06;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

ul {
    list-style-type: none;
}
.carritoC{
	width:35px;
	color:#fff;
	text-align:center;
	left:48%;
	top:-54px;
	position:relative;
	
	}
#miLogo{width:50%}
#miTextos{size:3px}
.styleTD{text-align:center}
#miCarrito{width:110%}
.miNmero{
	background-image:url("https://eximeq.com/click/img/carrito.png");
	background-size:cover;
	background-repeat:no-repeat;
	background-position-x:1px;
	color:#fff;
	width:50px;
	height:50px;
	position:relative;
	left:25%;
}
.acomodado{text-align:justify;
width:100%:
height:300px;
}
iframe{
border:none;
}
.tabbs {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 20px;
  overflow: hidden;
  border: none;
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 2px;
}
.botonAzul {
display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 5px 20px;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 10px/normal Tahoma, Geneva, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #222b70;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
}
.cerrar{
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 4px 20px;
  border: none;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal Tahoma, Geneva, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #d80202;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	}
.flotante{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 300px;
  padding: 10px;
  overflow: hidden;
  margin-left:120px;
  border: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font: normal 16px/1 Tahoma, Geneva, sans-serif;
  color: white;
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  background: red;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;

left: 20%;
position: fixed;
bottom: 70%;
z-index: 1;
}
.recuadro{
	width:100%;
	text-align:center;
	}

.muestra{
	width:100%;
	position:relative;
	top:-150px;
	}
.fixed-bg{
  background-image: url("../images/microqueratomoml7_155.jpg");
  min-height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.fixed-155{
  background-image: url("../images/fullwidth-gallery-5-420x350.jpg");
  min-height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.fixed-157{
  background-image: url("../images/donor_157.jpg");
  min-height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


.btn-oftalmo{
width: 100%;
display: block;
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
border-radius: 3px;
font: normal 16px/1.4 Tahoma, Geneva, sans-serif;
color: rgba(90,90,90,1);
background: #a3c9e2;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
text-shadow: -1px -1px 0 rgba(15,73,168,0.66);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);

/* ✅ Nuevas reglas para controlar el texto */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
}
.btn-lupa{
width: 100%;
display: block;
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
border-radius: 3px;
font: normal 16px/1.4 Tahoma, Geneva, sans-serif;
color: #CCC;
background: #2c2c2c;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
text-shadow: -1px -1px 0 rgba(15,73,168,0.66);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);

/* ✅ Nuevas reglas para controlar el texto */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
}

.btn-cardio{
width: 100%;
display: block;
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
border-radius: 3px;
font: normal 16px/1.4 Tahoma, Geneva, sans-serif;
color: #CCC;
background: #4ca1af;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
text-shadow: -1px -1px 0 rgba(15,73,168,0.66);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);

/* ✅ Nuevas reglas para controlar el texto */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
}
.btn-gastro{
width: 100%;
display: block;
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
border-radius: 3px;
font: normal 16px/1.4 Tahoma, Geneva, sans-serif;
color: rgba(90,90,90,1);
background: #c2f0c2;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
text-shadow: -1px -1px 0 rgba(15,73,168,0.66);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);

/* ✅ Nuevas reglas para controlar el texto */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
}
.btn-iluminacion{
width: 100%;
display: block;
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
border: 1px solid #018dc4;
border-radius: 3px;
font: normal 16px/1.4 Tahoma, Geneva, sans-serif;
color: rgba(90,90,90,1);
background: #fff4e6;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
text-shadow: -1px -1px 0 rgba(15,73,168,0.66);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);

/* ✅ Nuevas reglas para controlar el texto */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
}

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f7f8fa;
    }
    nav.menuIA {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: #fff;
      border-bottom: 1px solid #ddd;
    }
    nav.menuIA img {
      max-height: 50px;
    }
    nav.menuIA .btn {
      padding: 8px 12px;
      border: none;
      border-radius: 6px;
      background: #007BFF;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 14px;
      text-decoration: none;
    }
    nav.menuIA .btn:hover {
      background: #0056b3;
    }
    nav.menuIA a.btn {
      text-decoration: none;
    }
    #sugerencias {
      max-width: 600px;
      margin: 20px auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    #sugerencias h3 {
      margin-bottom: 15px;
    }
    .chat-input {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .chat-input textarea {
      flex: 1 1 100%;
      min-height: 40px;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
    }
    .chat-input button {
      padding: 8px 14px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    .btn-send {
      background: #007BFF;
      color: #fff;
    }
    .btn-send:hover {
      background: #0056b3;
    }
    .btn-mic {
      border: 2px solid #4a90e2;
      background: #fff;
      border-radius: 50%;
      padding: 6px;
    }
    #respuestaIA {
      margin-top: 20px;
      padding: 15px;
      background: #f5f7fb;
      border-radius: 6px;
      border: 1px solid #e0e0e0;
    }

.enfrente{
width: 400px; 
height: 100px; 
position: fixed; 
bottom: 0; 
right: -325px;
top:48%;
z-index: 9999; 
	}

 :root {
    --navy: #0b1e3a;  /* azul marino */
    --white: #ffffff;
  }


  .menuIA {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 12px;
    max-width: 100%;
  }

  .btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--white);
	width:220px;
    color: var(--navy);
    border: none;                 /* sin bordes */
    padding: 14px 16px;
    border-radius: 10px;          /* opcional; quita si lo quieres totalmente cuadrado */
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--navy);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  }

  .btn:hover {
    background: #f2f5ff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--navy);
  }

  .btn:active {
    transform: translateY(0);
    box-shadow: 0 0 0 2px var(--navy);
  }

  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px rgba(11, 30, 58, 0.2);
  }

  /* Variante para anchura completa en pantallas pequeñas */
  @media (max-width: 420px) {
    .menuIA {
      grid-template-columns: 1fr;
    }
  }