/* ***** Configuración general ***** */
html { scroll-behavior:smooth; }
html, body {
	min-height:100vh;
	min-width:480px;
	font-family:Roboto, sans-serif, Tahoma,Verdana,Arial;
	font-size:13pt;
	color:#006; /* azul osc */
	background:#fff;
	margin:0;
	padding:0;
}
img { border:none; }
a {
	color:#a00; /* rojo */
	text-decoration:none;
}
a.cur { color:#f60; }
a:hover, a.cur:hover {
	color:#508;
	text-decoration:underline;
}
/* Enlaces tipo botón */
.aboton {
	display:inline-block;
	color:#fff;
	background:#3e3e82;
	margin:8px;
	padding:3px 8px;
	border-radius:8px;
}
.aboton:hover, .abutton:focus {
	color:#fff;
	text-decoration:none;
	box-shadow: 0 0 0 2px white, 0 0 0 3px #3e3e82; /* Agregar bordes */
}

#encabezado {
	width:100%;
	margin:0;
	padding:0;
}
#encabezado h1 {
	text-align:center;
	margin:0;
	padding:0;
}
#encabezado h1 > img { max-width:50%; } /* Ajustar logotipo al tamaño de la pantalla, para que no se vea muy grande */
#menu {
	width:100%;
	background:#3e3e82;
	margin:0 20px 0 0;
	padding:5px 0;
}
.menu-fixed {
	position:fixed; /* Fijar el menú, siempre arriba cuando el encabezado no esté visible */
	top:0;
	left;0;
}
#menu ul {
	list-style-type:none;
	text-align:center;
	margin:0;
	padding:0;
}
	#menu ul li {
		position:relative;
		display:inline-block;
		margin:0;
		padding:0;
	}
	#menu ul li a {
		display:inline-block;
		color:#fff;
		margin:0;
		padding:3px 8px;
		border-radius:5px;
	}
	#menu ul li a.cur { color:#fc0; }
	#menu ul li a:hover, #menu ul li a.cur:hover { color:#ccc; background:#777; text-decoration:none; }
/* Submenú */
#menu ul li ul { display:none; } /* No visible al cargar la página */
#menu ul li:hover ul { /* Mostrar submenú cuando el mouse pasa sobre el enlace del menú */
	position:absolute;
	top:27px;
	left:0;
	display:block;
	width:auto;
	text-align:left;
	background:linear-gradient(to bottom, #3e3e82 10%, #78b 80%);
	border-radius:0 10px 10px 10px;
}
#menu ul li ul li { white-space:nowrap; } /* Asegurar que el enlace del submenú se muestra en una sola línea */
/* ***** Títulos ***** */
/* Título normal, sin adornos */
h2 {
	font-size:1.75em;
	text-align:center; color:#001f57;
	margin:0;
	padding:20px;
}
/* Título con imagen */
h2.titulo {
	margin:0;
	padding:0 0 20px 0;
}
/* Agregar la imagen arriba del título */
h2.titulo:before {
	display:block;
	content:'';
	width:193px;
	height:50px;
	background:transparent url(images/AISMS_50.png) top center no-repeat;
	margin:0 auto;
}
h3	{font-size:1em;font-weight:bold;text-shadow:.09em .09em .09em #808000;}

/* ***** Contenedores ***** */
/* ***** Contenedor info general, se puede usar dentro de otros contenedores ***** */
.info {
	max-width:1200px; /* Ajustar ancho máximo */
	margin:20px auto;
	padding:0 20px;
}
/* Contenedor con borde y fondo con transparencia */
.caja {
	max-width:1200px;
	background:rgba(255,255,255,0.85); /* Fondo con transparencia */
	margin:0 auto;
	padding:10px;
	border:1px #006 solid;
	border-radius:10px;
}
.marco-c {background:#fff;max-width:1000px;text-align:center;border:2px #006 solid;border-radius:10px;margin:2px auto 5px auto;padding:3px;}
.marco-cch {background:#fff;width:250px;text-align:center;border:2px #006 solid;border-radius:10px;margin:2px auto 5px auto;padding:3px;}

/* Contenedores específicos por sección */
#leon {
	color:#000;
	text-align:center;
	background:#fff url(images/fondo-04.jpg) top center;
	background-attachment:fixed;  /* Mantener la imagen fija aunque el contenido se mueva */
	background-size:cover; /* Forzar la imagen para que cubra todo el contenedor */
	margin:20px 0;
	padding:20px;
}
#ranita {
	background:#ccc url(images/tapete-fondo.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#enjuague {
	background:#ccc url(images/enjuague-fondo.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#tapete {
	background:#ccc url(images/tapete-fondo.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#contacto {
	background:#ccc url(images/contacto-fondo.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#socios { /* No requiere opciones, se puede dejar vacío */ 
	background:transparent url top center no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#socios .div-pub {
	display:inline-block;
	max-width:260px;
	font-size:0.8em;
	text-align:center;
	background:rgba(255,255,255,0.85);
	margin:10px;
	padding:5px;
	border:1px #006 solid;
	border-radius:10px;
}
#socios .div-publi {
	display:inline-block;
	max-width:350px;
	font-size:0.8em;
	text-align:center;
	background:rgba(255,255,255,0.85);
	margin:10px;
	padding:5px;
	border:1px #006 solid; /* azul */
	border-radius:10px;
}
 .div-publi img { vertical-align:middle; padding: 0 0 3px 0; }

#asoc { /* No requiere opciones, se puede dejar vacío */ }
#asoc .div-asoc {
	display:inline-block;
	max-width:260px;
	font-size:0.8em;
	text-align:center;
	background:rgba(255,255,255,0.85);
	margin:10px;
	padding:5px;
	border:1px #006 solid;
	border-radius:10px;
}
/* ***** Contenedores con elementos flexibles (se van a ajustar automáticamente) */
.caja-flex {
	display:flex;
	flex-flow:row wrap; /* Esto hace que todos tengan la misma altura */
	justify-content:center;
}
/* Contenedor flexible para mostrar opciones (detalle de servicios, nosotros, etc.) */
.div-flex {
	max-width:400px;
	min-width:200px;
	margin:10px;
	border:1px #060 solid;border-radius:10px;margin:2px 0 5px 5px;padding:3px;
}
/* Contenedor flexible para mostrar iconos de programas */
.fxicons {
	width:180px;
	font-size:0.9em;
	text-align:center;
	margin:10px;
}
/* Forzar que la imagen sea bloque y evitar poner <br> */
.fxicons > img {
	display:block;
	margin:0 auto;
}


footer {
	background:#ccc;
	margin:20px 0 0 0;
	padding:20px 0;
}
#menu-pie {
	float:right;
}
#menu-pie h3 {
	font-size:1em;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px #777 dotted;
}
#menu-pie ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
#info-pie {
	max-width:1200px;
	font-size:0.9em;
	margin:0 auto;
	padding:0 20px 10px 20px;
}
#info-pie img { vertical-align:middle; }
#copy {
	font-size:0.75em;
	text-align:center;
	border-top:1px #777 dotted;
	padding:10px 0 0 0;
}

/* Color, bold y alineación */
.oro { color:#d08c0b; }
.verde { color:#060; }
.blanco { color:#fff; }
.negro { color:#000; }
.azul { color:#00f; }
.azulosc { color:#001f57; }
.rojo { color:#f00; }
.rojoosc { color:#8b0000; }
.bold { font-weight:bold; }
.izq { text-align:left; }
.justi { text-align:justify; }
.mark-oro { background-color:#fd8; }
.mark-negro { background-color:#000; color:#fff; }
.mark-azulosc { background-color:#001f57; color:#fff; }

.art {margin:2px 0 5px 2px;padding:5px;text-indent:20px;line-height:115%;font-size:100%;text-align:justify;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;}
.center { text-align:center; }
.txmed { font-size:0.9em; }