/* Additional CSS Styles */
.panel-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.extra-block,
.extra-block1 {
 min-height:100%;
 margin: 0 auto -38px;
 position:relative; 
}

.extra-block{background:url(../images/tail-bg-cont.png) repeat-x 0 bottom}
.extra-block1{ margin: 0 auto -5%;}

/**********row-top*************/

.row-top{overflow:hidden;background:url(../images/tail-bg-top.png);
padding:4px 0 4px;
position:relative;
height:18px;
z-index:10}
.list-soc{
	float: left;
	margin-left: 30px
}

/* Contenedor que envuelve la imagen */
.contenedor-agrandar {
    overflow: hidden; /* Evita que la imagen se salga del marco */
}

/* Agrandar */
.agrandar {
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

/* Transformación al pasar el ratón por encima */ 
.agrandar:hover {
    transform: scale(1.08, 1.08) rotate(0deg);
    -ms-transform: scale(1.08, 1.08) rotate(0deg);
    -webkit-transform: scale(1.08, 1.08) rotate(0deg);
    -o-transform: scale(1.08, 1.08) rotate(0deg);
}



.go-top {
	position: fixed;
	bottom: 90px;
	right: 15px;
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

.art-nav:before 
{
   content:' ';
}

nav.art-nav
{
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   float:right
}

.google-maps {
    position: relative;
    padding-bottom: 75%; /* Esta es la relación de aspecto */
    height: 0;
    overflow: hidden;
}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; /* Utiliza 100% en lugar de 80% para ocupar todo el espacio disponible */
}

.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

html {
    scroll-behavior: smooth;
}

.fondo-imagen {
	width: 100%;
	height: 250px;
	background-image: url('/imagenes/contacto_2.jpg');
	background-size: cover; /* Ajusta la imagen para cubrir todo el div */
	background-position: center; /* Centra la imagen en el div */
	background-repeat: no-repeat;
	background-attachment: fixed; /* Hace que la imagen de fondo sea fija */
	background-color: #fff; /* Color de fondo para espacios vacíos */
	display: flex; /* Activa Flexbox */
	flex-direction: column; /* Alinea los elementos en columna */
	justify-content: flex-end; /* Alinea el contenido verticalmente hacia abajo */
	padding-left: 15px; /* Añade un margen izquierdo */
	padding-bottom: 15px; /* Añade un margen inferior para separar el contenido del borde */
	position: relative; /* Necesario para el overlay */
	border-radius: 15px; /* Redondea las esquinas */
	overflow: hidden; /* Asegura que el contenido no se salga del borde redondeado */
}

.fondo-imagen::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2); /* Color negro más claro semi-transparente */
	z-index: 1;
}

.fondo-imagen h2 {
	color: white;
	margin: 0;
	font-size: 50px; /* Tamaño específico para el h2 */
	z-index: 2; /* Coloca el texto sobre el overlay */
}

.fondo-imagen p {
	color: white;
	margin: 0;
	z-index: 2; /* Coloca el texto sobre el overlay */
}

.fondo-imagen p {
	font-size: 1em;
}