/* ***** Configuración general ***** */
html { scroll-behavior:smooth; }
html, body {
	min-height:100vh;
	font-family:Roboto, sans-serif, Tahoma,Verdana,Arial;
	font-size:13pt;
	color:#575;
	background:#fff;
	margin:0;
	padding:0;
}
img { border:none; }
img { max-width: 100%; }
img.img_d {margin-left:5px;float:right;}
img.img_i {margin-right:5px;}

a {
	color:#a00;
	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:#262;
	background:#BFFCC6;
	margin:8px;
	padding:5px 10px;
	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 */
}
.centrado { text-align:center; }

#encabezado {
	width:100%;
	background:transparent url(images/encabezado-fondo.webp) top center repeat-x;
	text-align:center;
	margin:0;
	padding:0;
}
#encabezado img {
	/* Fondo transparente: R (rojo), G (verde), B (azul), Opacidad (entre 0.0 y 1) mayor número = menor transparencia */
	background:rgba(255,255,255,0.75);
	border-radius:0 0 10px 10px;
}
#encabezado h1 {
	font-size:1.2em;
	color:#fff;
	margin:0;
	padding:0 10px 10px 10px;
}
#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:#060;
	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;
	margin:0;
	padding:5px;
}
/* Título con imagen */
h2.titulo {
	margin:0;
	padding:0 0 5px 0;
}
/* Agregar la imagen arriba del título */
h2.titulo:before {
	display:block;
	content:'';
	width:193px;
	height:50px;
	background:transparent url(images/banner-50.png) top center no-repeat;
	margin:0 auto;
}
h4 {
	font-size:1.2em;
	text-align:center;
	margin:0;
	padding:10px;
}
h5 {
	font-size:0.8em;
	text-align:center; color:#fff;
	font-weight:normal;
	max-width:1000px;
	margin:20px auto;
	padding:5px 25px 0 0;
	background:#060;
}

/* ***** 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 #3e3e82 solid;
	border-radius:10px;
}
.marco_c {background:#fff;max-width:1000px;text-align:center;border:1px #740 solid;border-radius:10px;margin:2px auto 5px auto;padding:3px;}
.marco_cch {background:#fff;width:250px;text-align:center;border:1px #740 solid;border-radius:10px;margin:2px auto 5px auto;padding:3px;}
.caja600 {
	max-width:600px;
	background:rgba(255,255,255,0.85); /* Fondo con transparencia */
	margin:0 auto;
	padding:10px;
	border:1px #3e3e82 solid;
	border-radius:10px;
}
.caja600c {
	max-width:600px;
	text-align:center;
	background:rgba(255,255,255,0.85); /* Fondo con transparencia */
	margin:0 auto;
	padding:10px;
	border:1px #3e3e82 solid;
	border-radius:10px;
}

/* Contenedores específicos por sección */
#nuevo {
	background:transparent url(images/interpretes-fondo.webp) top center no-repeat;
	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;
}
#nuevo h2 {
	max-width:1200px;
	background:rgba(255,255,255,0.75);
	border-radius:5px;
	margin:0 auto 1em auto;
	padding:10px 20px;
}
/* Estilos para sección de lo más nuevo */
#nuevo .div-flex { text-align:center; }
/* Imagen como bloque y con espacio abajo, para no tener que ponerla dentro de un párrafo */
#nuevo .div-flex img {
	display:block;
	margin:0 auto 0.5em auto;
}
#interp {
	background:transparent url top center no-repeat;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#chat {
	background:#ccc url(images/chat-fondo.webp) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#videos {
	background:#ccc url(images/tapete-fondo.jpg) top center;
	background-attachment:fixed;
	background-size:cover;
	margin:20px 0;
	padding:20px;
}
#especial {
	background:#fff url(images/especial-fondo.webp) 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:0;
	padding:20px;
}
#cooperadores { /* No requiere opciones, se puede dejar vacío */ 
	background:transparent url top center no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#cooperadores .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 #3e3e82 solid;
	border-radius:10px;
}
#cooperadores .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 #3e3e82 solid;
	border-radius:10px;
}
 .div-publi img { vertical-align:middle; padding: 0 0 3px 0; }
/* ***** Contenedores con elementos flexibles (se van a ajustar automáticamente) */
.caja-flex {
	display:flex;
	max-width:1200px;
	flex-flow:row wrap; /* Esto hace que todos tengan la misma altura */
	justify-content:center;
	margin:0 auto;
}
.caja-flex550 {
	display:flex;
	max-width:550px;
	flex-flow:row wrap; /* Esto hace que todos tengan la misma altura */
	justify-content:center;
	margin:0 auto;
}
.caja-flex2 {
	max-width:450px;
	min-width:200px;
	margin:10px;
	text-align:center;
	background:#eff9ea;
	border:1px #060 solid;border-radius:10px;margin:2px 0 5px 2px;padding:3px;
}
.marco-central {text-align:center; border:0px #060 solid;border-radius:10px;margin:2px 0 5px 2px;padding:3px;}
.marco-central600 {text-align:center; border:1px #060 solid;border-radius:10px;margin:2px 0 50px 2px;padding:3px;max-width:600;}

/* Contenedor flexible para mostrar opciones (detalle de servicios, nosotros, etc.) */
.div-flex {
	max-width:400px;
	min-width:200px;
	margin:10px;
}
/* Contenedor flexible para mostrar opciones (detalle de servicios, nosotros, etc.) */
.div-flex2 {
	
	min-width:200px;
	margin:10px;
	background:#eff9ea;
	border:0px #060 solid;border-radius:10px;margin:2px 0 5px 2px;padding:3px;
}
/* Contenedor flexible para mostrar opciones (detalle de servicios, nosotros, etc.) */
.div-flex_M {
	max-width:250px;
	min-width:200px;
	margin:10px;
}
/* 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;
}

.txmed { font-size:0.9em; }

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-image: url(images/loguito-mc.jpg);
	margin:0;
	padding:5px;
}
#menu-pie li {
	display:inline-block;
	margin:5px;
	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; }
.center { text-align:center; }
.justi { text-align:justify; }
.mark-oro { background-color:#fd8; }
.mark-oroclaro { background-color:#eeddcc; }
.mark-verde { background-color:#060; color:#fff; }
.mark-negro { background-color:#000; color:#fff; }
.mark-azulosc { background-color:#001f57; color:#fff; }
.somb { text-shadow:.09em .09em .09em #d08c0b; }

.center { text-align:center; }
.ulmc {list-style-image:url(images/loguito-mc.jpg);font-size:110%;text-align:left;margin:15px;padding:0;}
.alfa {font-size: 105%;font-weight:bold;word-spacing: 15px;margin:10px 0;padding:0;}
.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;}
.tx-gde {font-size:120%;margin:1px 0;padding:3px;line-height:100%;font-weight:bold;}
.tx-ch {font-size:80%;margin:1px 0;padding:3px;line-height:100%;}
.emb{font-weight:bold; }
.citas {padding:0;margin:0;margin-left:50px;margin-right:50px;font-size:80%;text-align:justify;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;}

/* Lista de intérpretes */
#listas-enlaces a.activo { color:#060; }
#listas > div {
	max-width:600px;
	overflow:hidden;
	border:1px #aaa solid;
	margin:0 auto;
	padding:0;
	border-radius:8px;
}
#listas > div.oculta { display:none; }
#listas > div h2 {
	font-size:1.2em;
	color:#fff;
	background:#a55;
	margin:0;
	padding:5px 10px;
}
#listas > div ul {
	list-style:none;
	margin:0;
	padding:0;
}
#listas > div ul li {
	display:block;
	background:#eee;
	margin:0;
	padding:3px 8px;
	border-bottom:1px #aaa solid;
}
#listas > div ul li:hover { background:#dfd; }