/* root element for tabs  */
.tabs { 
	list-style:none; 
	margin:0 !important;
	padding: 0px;	
	height: 32px;
	background: url(../img/tabs-divider.png) no-repeat bottom center;
}

body.home .tabs { 
	padding: 0px 30px;

}

/* single tab */
ul.tabs li { 
	display: block;
	float:left;	 
	text-indent:0;
	padding:0;
	margin: 0px 5px 0px 0px !important;
	list-style-image: none !important; 
	
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	display:block;
	font-size:12px;
	height: 30px;  
	line-height:30px;
	text-align:center;	
	text-decoration:none;
	padding: 0px 0px 0px 10px;	
	position:relative;
	top:0px;
	background:  url(../img/tabs.png) no-repeat;
}

ul.tabs a span{ 
	display:block;
	height: 100%;
	padding-right: 10px;
	background:  url(../img/tabs.png) no-repeat right -40px;
}

#content ul.tabs a{
	color: #747474;
}

ul.tabs a:active {
	outline:none;
}

/* when mouse enters the tab move the background image */
#content ul.tabs a:hover { 
	background-position: 0px -80px;
}

#content ul.tabs a:hover span,
#content ul.tabs a.current span{ 
	background-position: right -120px;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. >>> cambiocolor: #2a2d30 */
ul.tabs a.current,
#content ul.tabs a.current:hover,
ul.tabs li.current a {	
	cursor:default !important; 
	color:#ff1200 !important;
	display: block;
	background-position: 0px -80px;
}


/* initially all panes are hidden */ 
.panes .pane {
	display:none;	
}

.panes>div {
    display: none;
    min-height: 200px;
   
}


/* HOME TABS THUMBS ---------------------------------------------------------*/

.panes .blocks-thumbs{
	overflow: hidden;
	padding-top: 30px;
}

.panes .blocks-thumbs li{
	display: block;
	overflow: hidden;
	float: left;
	width: 282px;
	margin: 0px 0px 30px 30px;
	background: url(../img/shadow-1-3.png) no-repeat 0px 150px;
	padding-bottom: 10px;
}

.panes .blocks-thumbs li .excerpt{
	line-height: 1.5em;
	margin-bottom: 10px;
}

#content .panes .blocks-thumbs li .header{
	display: block;
	font-family: 'Ubuntu', arial, serif;
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 10px;
	text-decoration: none;
	color: #2f3235;
	border-bottom: 1px solid #c4c7c8;
	padding-bottom: 10px;
}

.panes .blocks-thumbs li a.thumb{
	display: block;
	overflow: hidden;
	width: 282px;
	height: 150px;
	margin-bottom: 20px;
	background: url(../img/plus-sign.png) no-repeat center center;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}


/* HOME TABS GALLERY ---------------------------------------------------------*/

.panes{
	margin-top: 30px;
}

body.home .panes{
	margin-top: 0px;
}

.panes .plain-text{
	padding: 30px 30px;
	line-height: 1.5em;
}

.panes .plain-text h1,
.panes .plain-text h2,
.panes .plain-text h3,
.panes .plain-text h4,
.panes .plain-text h5,
.panes .plain-text h6 {
	margin-bottom: 20px;
}

.panes .plain-text a{
	text-decoration: none;
}


/* 22.0 ------Panes = plain-dos (2 columnas) 2025-------*/

	/* 11.1 ------ (1 columnas) 2025-------*/

	.plain-uno {
		display:flex;				/* Alinea hijos en horizontal */
		align-items: flex-start;    /* Alinea al tope superior, vertical */	
		flex-direction: column;		/* Alinea vertical (columna) necesario */
	}

	.panes .plain-uno{
		padding: 30px;				/* Espacio interno de la caja principal */
		line-height: 1.5em;
		gap: 20px;                  /* Crea un espacio automático entre imagen y texto */
	}

	/* 11.2 ------ (text e image 1 columnas) 2025-------*/

	.imagen-col-uno {
	    width: 860px;               /* Ancho fijo para la imagen */
	    height: auto;
	    border-radius: 8px;         /* Opcional: bordes redondeados */
	    margin: 0 auto;         /* Margen centrando imagen */
	}

	.texto-col-uno {
	    flex: 1;                    /* El texto toma el resto del espacio disponible */
	    padding: 0 10px;            /* Padding interno para el texto */
	    margin: 0;                  /* Reset de márgenes */
	}

	/* 22.1 ------ (2 columnas) 2025-------*/

	.plain-dos {
		display:flex;				/* Alinea hijos en horizontal */
		align-items: flex-start;    /* Alinea al tope superior, vertical */	
	}

	.panes .plain-dos{
		padding: 30px;				/* Espacio interno de la caja principal */
		line-height: 1.5em;
		gap: 20px;                  /* Crea un espacio automático entre imagen y texto */
	}


	/* 22.2 ------ (text e image 2 columnas) 2025-------*/

	.imagen-col-dos {
	    width: 560px;               /* Ancho fijo para la imagen */
	    height: auto;
	    border-radius: 8px;         /* Opcional: bordes redondeados */
	    margin-right: 10px;         /* Margen extra si deseas más separación */
	}

	.texto-col-dos {
	    flex: 1;                    /* El texto toma el resto del espacio disponible */
	    padding: 0 10px;            /* Padding interno para el texto */
	    margin: 0;                  /* Reset de márgenes */
	}



/* Ajuste para celulares */

@media (max-width: 768px) {
    .plain-dos {
        flex-direction: column; /* En celulares, la imagen arriba y el texto abajo */
    }
    .imagen-col-uno .imagen-col-dos {
        width: 100%;            /* Imagen al ancho total en móviles */
    }
}

	/* 22.4 ------plain-lista-------*/

	.titulo-lista {
	    font-weight: bold;
	    margin: 20px 0px; 	/* Espacio mínimo con la lista */
	    color: #333;
	}

		.lista-personalizada {
			margin-top: 0;           /* Elimina el espacio superior de la lista */
		    padding-left: 20px;      /* Espacio para las viñetas */
		    line-height: 1.1em;      /* Interlineado reducido (el estándar es 1.5) */
		    list-style-type: disc; 	/* Cambia el círculo por un cuadrado */
		}
		.lista-personalizada li {
		    margin-bottom: 4px;		/* Espacio pequeño entre cada distrito */
		    color: #333;
		}