/* @override http://ecpatmexico.org.mx/css/estilos.css */

/*google font Opensans */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700);

/* @group reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

::-webkit-input-placeholder {
	color: #808080;
}

:-moz-placeholder {
	color: #808080;
}

::-moz-placeholder {
	color: #808080;
}

:-ms-input-placeholder {
	color: #808080;
}

input {
	border: 1px solid #2b2b2b;
}

/* @end */
body.bigBG,
body.smallBG,
body.home-page {
	background-color: #e2ede8;
	/* Sage green suave, complementario al verde institucional */
	font: 13px 'Open Sans', sans-serif;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

#containerBody {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	max-width: 1200px;
	/* Moderno: adecuado para monitores 1080p */
	margin-bottom: 14px;
	min-height: 500px;
	background-color: #fff;
	/* Contenido sobre fondo blanco */
	box-sizing: border-box;
	padding: 0 20px;
}

#contBodySecciones {
	width: 100%;
	float: left;
	margin-top: 30px;
	padding: 20px;
	text-align: left;
	box-sizing: border-box;
}

/* @group Ecpat */

/* @group Header */

#header {
	/* Full-width breakout from any parent container */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: #007f33;
	/* Verde institucional */
	height: 90px;
	z-index: 100;
}

#headerLeft {
	height: 0;
	float: left;
	position: absolute;
	top: 0;
	left: 5%;
	z-index: 102;
}

#headerLeft img {
	padding: 0;
	margin-top: 5px;
	height: 110px;
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

#headerRight {
	/* Barra negra delgada en la parte inferior del header */
	height: 35px;
	width: 100%;
	background-color: #061a10;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 101;
}

/* @group Menu */

#menuHeader {
	float: none;
	width: auto;
	margin: 0;
	color: white;
	font: 11px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	display: flex;
	letter-spacing: 0.5px;
}

#menuHeader a {
	float: none;
	display: block;
}

#menuHeader a:not(:first-child) {
	margin-left: 0;
}

#menuHeader li {
	padding: 0 15px;
	height: 35px;
	line-height: 35px;
	border-radius: 0;
	transition: background-color 0.2s ease;
	display: block;
	cursor: pointer;
}

#menuHeader li:hover {
	background-color: #333;
	color: #fff;
}

/* @end */

/* @end */

/* @group index */

body.home-page #containerBody {
	width: 100%;
	max-width: 100%;
	margin-top: 0;
}

#contSliderIndex {
	width: 100%;
	background-color: #000;
	height: auto;
	min-height: 400px;
	margin-top: -40px;
	/* Superposición ajustada: El header mide 90px, el slider sube para quedar bajo el logo pero "tocar" la barra negra */
	/* De hecho, si el header es relative 90px, el slider empieza después. 
       Queremos que el logo flote SOBRE el slider. 
       El logo tiene height 110px, header 90px. El logo sobresale 20px hacia abajo.
       No necesitamos margen negativo si solo el logo flota. 
       Pero si queremos que la imagen del slider empiece "pegada" a la barra negra: margin-top: 0 is fine.
       Si el logo flota, todo ok.
    */
	margin-top: 0;
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#sliderIndex {
	width: 100%;
	height: 500px;
	/* Hero height */
	overflow: hidden;
}

#sliderIndex img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* NIVO SLIDER ARROWS - CUSTOM */
.nivo-directionNav a {
	display: block;
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.3) !important;
	/* Fondo semitransparente */
	border: none;
	text-indent: -9999px;
	/* Ocultar texto Prev/Next */
	transition: background 0.3s;
	top: 50% !important;
	margin-top: -20px;
	opacity: 0.6;
}

.nivo-directionNav a:hover {
	background: rgba(0, 0, 0, 0.7) !important;
	opacity: 1;
}

/* Flechas con CSS borders (Chevrons) */
.nivo-directionNav a:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid white;
	border-right: 2px solid white;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -6px;
	/* mitad de height + border */
}

.nivo-prevNav:after {
	transform: rotate(-135deg);
	/* Flecha Izquierda */
	margin-left: -3px;
}

.nivo-nextNav:after {
	transform: rotate(45deg);
	/* Flecha Derecha */
	margin-left: -7px;
}

/* Posicionamiento */
.nivo-prevNav {
	left: 20px !important;
}

.nivo-nextNav {
	right: 20px !important;
}

/* Dots de navegación */
.nivo-controlNav {
	bottom: 20px;
	z-index: 10;
	padding: 0;
	position: absolute;
	width: 100%;
}

.nivo-controlNav a {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	/* Dots redondos */
	margin: 0 5px;
	text-indent: -9999px;
	border: none;
}

.nivo-controlNav a.active {
	background: #007f33;
	/* Verde activo */
}


#contBodyIndex {
	width: 100%;
	float: none;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 40px;
}

/* Secciones de Inicio */
.home-section-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.home-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	padding: 25px;
	text-align: center;
	margin-bottom: 30px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	width: 46%;
	/* 2 columnas */
	box-sizing: border-box;
}

.home-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.home-card h3 {
	font-size: 20px;
	color: #2c3e50;
	margin-bottom: 15px;
	border-bottom: 2px solid #007f33;
	padding-bottom: 10px;
	display: inline-block;
}

.home-card p {
	color: #666;
	line-height: 1.6;
	margin-bottom: 20px;
	font-size: 14px;
}

.home-card img.card-img {
	max-width: 100%;
	height: auto;
	margin-bottom: 15px;
	border-radius: 4px;
	max-height: 150px;
	object-fit: contain;
}

.btn-primary {
	display: inline-block;
	background-color: #007f33;
	color: white;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 13px;
	transition: background-color 0.3s;
}

.btn-primary:hover {
	background-color: #005f26;
}

.section-escnna {
	background-color: #f8f9fa;
	padding: 50px 20px;
	text-align: center;
	margin-bottom: 30px;
}

.section-escnna h2 {
	float: none;
	text-align: center;
	margin-bottom: 20px;
	font-size: 28px;
}

.section-escnna p {
	max-width: 800px;
	margin: 0 auto 30px;
	color: #555;
	font-size: 16px;
	line-height: 1.8;
}

/* full width changes override columns */
.contColIndex {
	width: 100%;
	float: none;
	margin: 0;
}

/* @end */

/* @group Footer */

#footer {
	background-color: #007f33;
	width: 100%;
	height: auto;
	float: left;
	margin-top: 25px;
	padding: 20px 0;
	color: #fff;
}

#footerCont {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
	flex-wrap: wrap;
	box-sizing: border-box;
}

/* Columnas del Footer */
.footer-col {
	flex: 1;
	min-width: 280px;
	box-sizing: border-box;
}

.footer-col.left {
	text-align: left;
}

.footer-col.right {
	text-align: right;
}

/* Texto del Footer */
.footer-text {
	font-size: 13px;
	line-height: 1.6;
	color: #fff;
	margin: 0;
}

.footer-text a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.footer-text a:hover {
	text-decoration: underline;
}

/* Redes Sociales */
.social-icons {
	margin-bottom: 5px;
}

.social-icons a {
	display: inline-block;
	margin-left: 10px;
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
}

.social-icons a:hover {
	text-decoration: underline;
}

/* Aliados */
.aliados {
	margin-top: 5px;
	font-size: 12px;
	color: #e0f2f1;
}

/* Admin Link */
.admin-link {
	margin-top: 5px;
}

.admin-link a {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

/* @end */

/* @group Generales */

h2 {
	color: #007f32;
	display: block;
	width: 100%;
	margin-bottom: 22px;
	text-transform: uppercase;
	float: left;
	font: bold 27px "Open Sans";
}

h3 {
	color: #007f32;
	display: block;
	float: left;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 5px;
	font: bold 16px "Open Sans";
}

h4 {
	color: #007f32;
	display: block;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 0;
	margin-left: 4px;
	font: bold 14px "Open Sans";
}

.olInBody {
	padding-top: 8px;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.olInBody li {
	list-style-type: decimal;
	list-style-position: outside;
	margin-left: 20px;
}

.olInBody li::marker {
	color: #007f32;
}

.mitad_columna {
	width: 46%;
	float: left;
}

.mitad_columna:nth-child(even) {
	margin-right: 3%;
	border-right: 1px solid #b4b3b5;
	padding-right: 3%;

}

/* @end */

.liMarcoLegal {
	clear: left;
	display: block;
	padding-left: 19px;
	background: url(/img/bullet.png) no-repeat 6px 6px;
	color: #676668;
	margin-top: 2px;
	margin-bottom: 2px;
}

.liMarcoLegal:hover {
	color: #000;
	text-decoration: underline;
}

/* @group miembros */

.miembroEcpat {
	text-align: justify;
}

/*
.miembroEcpat p > img:first-child{
	padding: 4px;
	background-color: orange;
}
*/
#logoEdiacMiembros {}

#logoUCIEPMiembros {
	display: block;
	padding-left: 157px;
}

/* @end */

#listaTopBlog {
	height: auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.pubEditorialTop {
	width: 168px;
	height: auto;
	display: inline-block;
	text-align: center;
	padding: 5px 10px;
	box-sizing: border-box;
}

/* Blog Layout: Sidebar + Content */
#colIzqBlog {
	width: 220px;
	float: left;
	margin-right: 20px;
	box-sizing: border-box;
}

#colDerBlog {
	overflow: hidden;
	/* Creates block formatting context */
	box-sizing: border-box;
}

/* Sidebar Blog Widgets */
.contIzqBlog {
	margin-bottom: 20px;
	background: #f9f9f9;
	padding: 15px;
	border-radius: 4px;
	border-left: 3px solid #007f33;
}

.contIzqBlog h4 {
	color: #007f33;
	font-size: 14px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.listaIzqBlog {
	list-style: none;
	padding: 0;
	margin: 0;
}

.listaLatBlog {
	padding: 5px 0;
	border-bottom: 1px solid #eee;
	font-size: 12px;
	color: #555;
}

.listaLatBlog:hover {
	color: #007f33;
}

/* Blog Posts */
.postCont {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #eee;
	overflow: hidden;
}

.tituloPost {
	font-size: 18px;
	color: #007f33;
	margin-bottom: 10px;
	width: 100%;
	float: none;
}

.imagePost {
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
	position: relative;
	max-width: 200px;
}

.imagePost img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.fechaPost {
	position: absolute;
	bottom: 5px;
	left: 5px;
	background: rgba(0, 127, 51, 0.9);
	color: white;
	padding: 5px 8px;
	border-radius: 3px;
	text-align: center;
	font-size: 11px;
}

.textoPost {
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}

.seguirLeyendoPost a {
	color: #007f33;
	font-weight: bold;
	font-size: 13px;
}

.sharePostCont {
	display: none;
	/* Hidden for now */
}

/* @group pubEditoriales */
#pubEditorialesList {
	float: left;
	width: 100%;
}

#pubEditorialesList li {
	display: inline-block;
	width: 172px;
	text-align: center;
	padding: 25px 10px;
	float: left;
}

#pubEditorialesList li span {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
}


/* @end */

/* @group publicacionesBlog */

#colIzqBlog {
	float: left;
	display: inline-block;
	width: 20%;
}

.contIzqBlog {
	margin-bottom: 10px;
}

.contIzqBlog h4 {
	margin-bottom: 10px;
	font: bold 19px "Open Sans";
}

.pubEditorialLat {
	margin-bottom: 15px;
}

.pubEditorialLat img {
	margin-left: 30px;
}

.pubEditorialLat div {
	font-size: 11px;
	text-align: left;
}

.listaLatBlog {
	margin-bottom: 8px;
	border-bottom: 1px dotted #d9d9d9;
	padding-bottom: 8px;
	list-style-type: none;
	display: block;
	padding-left: 12px;
	background: url(/img/bullet.png) no-repeat 2px 6px;
	clear: both;
}

#colDerBlog {
	float: right;
	display: inline-block;
	width: 75%;
	border-left: 1px solid #dee4dc;
	padding-left: 4%;
}

.postCont {
	border-bottom: 2px dashed #c5c9c1;
	float: left;
	padding-bottom: 30px;
	padding-top: 5px;
}


.tituloPost {
	padding-top: 7px;
	padding-bottom: 7px;
	color: #007f32;
	float: left;
	width: 100%;
	font: bold 33px "Open Sans";
}

.imagePost {
	position: relative;
	margin-bottom: 17px;
	border: 1px solid #dee4dc;
	float: left;
	margin-left: 17px;
}

.fechaPost {
	position: absolute;
	top: 0;
	width: 100px;
	background-color: #f2ede7;
	height: 100px;
	margin-top: 15px;
	margin-left: 15px;
	text-align: center;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

.fechaPost div {
	margin-top: 10px;
}

.fechaPost span {
	position: relative;
	display: block;
	clear: both;
	color: #768d80;
	font-family: foco;
	margin-top: -3px;
	margin-left: -2px;
}

.f_dweek {
	text-transform: uppercase;
	font-size: 23px;
}

.f_dmes {
	font-size: 37px;
}

.f_mes {
	font-size: 20px;
}

.textoPost {
	width: 689px;
	float: left;
	font-size: 13px;
	color: #767676;
	text-align: justify;
}

.textoPost p {
	padding-top: 7px;
	padding-bottom: 7px;
}

.seguirLeyendoPost {
	color: #007f3d;
	float: right;
	margin-top: 20px;
	margin-right: 24px;
	font: bold 13px "Open Sans";
}

/* @end */


.galeriaPrevCont {
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #c0dac6;
}

.galImgPpal {
	width: 220px;
	float: left;
	display: inline-block;
	text-align: center;
}

.galImgPpal img {
	height: 113px;
	-webkit-box-shadow: 0px 2px 9px rgba(20, 20, 20, 0.6);
	-moz-box-shadow: 0px 2px 9px rgba(20, 20, 20, 0.6);
	box-shadow: 0px 2px 9px rgba(20, 20, 20, 0.6);
}

.textoPrevGal {
	float: right;
	width: 720px;
	height: 115px;
	text-overflow: ellipsis;
}

.textoPrevGal h3 {
	margin-top: 0;
}

.galContainer {
	margin-left: 35px;
}

.imgThumbGalCont {
	display: inline-block;
	padding: 9px;
}

/* @end */


/* @group EDIAC */

body.smallBG.smallBGEdiac {
	background: url(/img/bgTopEdiac.jpg) repeat-x 0 -120px;

}

.textoColorEdiac {
	color: #6b144c !important;
}




/* @group Menu */


#menuHeader.menuHeaderEdiac li:hover {
	background-color: #b62885 !important;


}

/* @end */



/* @group Footer */

#footer.footerEdiac {
	background-color: #6b144c;
}

/* @group left */

#menuFooter.menuFooterEdiac a li:hover {
	background-color: #b62885 !important;
}

/* @end */


#footerRight.footerRightEdiac a {
	color: #ff3db9;
	float: right;
	margin-top: 28px;
	font-size: 11px;
}

/* @end */



/* @group index */

h3.titleColIndex.titleColIndexEdiac {
	font-size: 21px;
	color: #6b144c;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 2px;
	padding-left: 4px;
	margin-bottom: 10px;
}

/* @end */


/* @end */


#eventosWebContainer .eventoWeb img {
	width: 80%;

}

#eventosWebContainer .eventoWeb a {
	font-size: 20px;
	text-decoration: underline;
	text-align: center;
	font-weight: bold;

}

#nombrePubCarrusel {
	display: block;
	/* color: gray; */
	/* background-color: red; */
	height: 50px;
	overflow: hidden;
}

/* ==========================================
   RESPONSIVE DESIGN - Media Queries
   ========================================== */

/* Tablet Landscape / Small Desktop (max-width: 1024px) */
@media screen and (max-width: 1024px) {
	#containerBody {
		max-width: 100%;
		padding: 0 15px;
	}

	.home-section-container {
		padding: 30px 15px;
	}

	.home-card {
		width: 48%;
	}

	#headerLeft {
		left: 15px;
	}

	#headerLeft img {
		height: 90px;
	}

	#menuHeader {
		font-size: 10px;
	}

	#menuHeader li {
		padding: 0 10px;
	}
}

/* Tablet Portrait (max-width: 768px) */
@media screen and (max-width: 768px) {
	#header {
		height: auto;
		min-height: 70px;
	}

	#headerLeft {
		position: relative;
		left: 0;
		margin: 0 auto;
		text-align: center;
		width: 100%;
		float: none;
	}

	#headerLeft img {
		height: 60px;
		margin: 5px auto;
		display: block;
		padding: 0;
	}

	#headerRight {
		position: relative;
		height: auto;
		min-height: 30px;
		flex-wrap: wrap;
		justify-content: center;
	}

	#menuHeader {
		flex-wrap: wrap;
		justify-content: center;
		font-size: 10px;
	}

	#menuHeader li {
		padding: 5px 8px;
		height: auto;
		line-height: normal;
	}

	#sliderIndex {
		height: 300px;
	}

	.home-card {
		width: 100%;
	}

	.section-escnna h2 {
		font-size: 22px;
	}

	.section-escnna p {
		font-size: 14px;
	}

	/* Footer */
	#footerCont {
		flex-direction: column;
		text-align: center;
		gap: 15px;
	}

	.footer-col.left,
	.footer-col.right {
		text-align: center;
		min-width: auto;
	}

	.social-icons a {
		margin: 0 5px;
	}
}

/* Mobile (max-width: 480px) */
@media screen and (max-width: 480px) {
	#headerLeft img {
		height: 50px;
	}

	#menuHeader {
		font-size: 9px;
	}

	#menuHeader li {
		padding: 5px 6px;
	}

	#sliderIndex {
		height: 200px;
	}

	.home-card {
		padding: 15px;
	}

	.home-card h3 {
		font-size: 16px;
	}

	h2 {
		font-size: 20px;
	}

	.nivo-prevNav {
		left: 10px !important;
	}

	.nivo-nextNav {
		right: 10px !important;
	}
}