body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}
.pagina {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */    
    width: 100%; /* Ancho completo del espacio */
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Cambiar a flex-start para alinear a la izquierda */
    max-width: 1170px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
}
.CuerpoInfo{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Cambiar a flex-start para alinear a la izquierda */
    max-width: 1170px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
}
.ContenedorCabecera{
display: flex;
margin: 0 auto;
max-width: 1170px;
width: 100%;
padding: 0 10px;
padding-bottom: 25px;
position: relative;
}
.imgCabecera{
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
z-index: 1;
}
.imgCabeceramov{
display: none;
}

.lnkCabecera {
    position: absolute;
    top: 1.5vw;                /* Ajusta verticalmente según necesites */
    right: 17%;               /* Separa del borde derecho un 15% del ancho disponible */
    display: flex;
	flex-direction: column; /* Coloca los enlaces uno debajo de otro */
    align-items: flex-end;  /* Alinea el contenido a la derecha */
    gap: 0.8vw;                /* Espacio entre las palabras */
    /*font-size: 16px;           Ajusta el tamaño del texto */
	font-size: clamp(14px, 1.5vw, 16px);
    font-weight: bold;
	z-index: 20;
}
.lnkCabecera a {
    color: #FFFFFF;
    text-decoration: none;
	
}


a:active{ color: #2e2e2e; font-weight:bold; text-decoration:none; }
a:visited{ color: #2e2e2e; font-weight:bold; text-decoration:none; }
a:link{ color: #2e2e2e; font-weight:bold; text-decoration:none; }
a:hover{ color: #b20045; font-weight:bold; text-decoration:none; }


a.lnkEnlacesCabecera:active{ color: #FFFFFF; font-weight:bold; text-decoration:none; }
a.lnkEnlacesCabecera:visited{ color: #FFFFFF; font-weight:bold; text-decoration:none; }
a.lnkEnlacesCabecera:link{ color: #FFFFFF; font-weight:bold; text-decoration:none; }
a.lnkEnlacesCabecera:hover{ color: #a5c637; font-weight:bold; text-decoration:none; }



.lnkCabecera a:hover {
    /*text-decoration: underline;*/
	color: #a5c637;
}

.card {
    
	background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 15px;
    width: calc(22% - 20px); /* 4 cards per row */
    transition: transform 0.3s;
    cursor: pointer;
    position: relative; /* Para el posicionamiento del cuadro desplegable */
	min-width:200px;
}
.tblPrecios{
border-collapse: collapse;
}
.tblPrecios td{
border: 1px solid #bbb9d6; /* Aplica el borde a todas las celdas */
    padding: 5px; /* Espacio interno para mejor legibilidad */
}

.card:hover {
    transform: scale(1.05);
}
/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/
.card.flippable {
    perspective: 1000px; /* Para el efecto 3D */
    transform-style: preserve-3d;
	width: calc(22% - 20px); /* Mantiene el tamaño original de las cards */
    min-width: 200px;
    position: relative; /* Para el efecto de flip */
}

.card.flippable .inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* Mantiene el efecto 3D */
    transition: transform 0.8s ease-in-out;
	backface-visibility: hidden;
}

.card.flippable .front, .card.flippable .back {
	
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    overflow: hidden; /* Asegura que el contenido no desborde */
    display: flex;
    flex-direction: column; /* Mantiene la estructura vertical */
    
    /*align-items: center;  Centra horizontalmente el contenido */
	border-radius: 5px;
	background-color: #FFFFFF;
	
}

.card.flippable .front {
    z-index: 2;
    background-color: #FFFFFF;
justify-content: flex-start; /* Centra verticalmente el contenido */
	
	
}
.card.flippable {    
	border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra como las cards originales */
}

.card.flippable .back {
    transform: rotateY(180deg);
    /*background: #007BFF;*/
    color: #fff;
    /*padding: 15px;
    text-align: center;*/
	justify-content: center; /* Centra verticalmente el contenido */
}

.card.flippable.auto-flip .inner {
    transform: rotateY(180deg); /* Voltea automáticamente */
}
.card .contenedorImagen img {
    max-width: 100%; /* Asegura que las imágenes no desborden */
    height: auto;
}

/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/
.fondacion-banner {
  display: flex;                 /* Usa flex para centrar el contenido */
  justify-content: center;       /* Centra horizontalmente */
  align-items: center;           /* Centra verticalmente */
  height: 50px;                  /* Alto fijo */
  max-width: 1170px;              /* Ancho máximo */
  width: 100%;                   /* Se adapta al 100% del contenedor */
  background-color: #bbb9d6;     /* Fondo con el color solicitado */
  color: #ffffff;                /* Texto en blanco */
  text-decoration: none;         /* Sin subrayado */
  border-radius: 10px;           /* Bordes redondeados (ajusta según prefieras) */
  margin: 0 auto;                /* Centra el enlace en la página */
  font-family: sans-serif;       /* Fuente (ajusta según tu diseño) */
  font-size: 18px;
  box-sizing: border-box;
}
a.fondacion-banner{color:#FFFFFF;}
.fondacion-banner .icon {
  margin-right: 10px;            /* Espacio entre el icono y el texto */
  font-size: 24px;               /* Tamaño del icono (ajústalo según prefieras) */
  line-height: 1;
}
/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/
/***********************************************************************************************************************************************/

.more-info {        
    width: 80vw; /* 80% del ancho de la ventana del navegador */
    max-width: 960px; /* Ancho máximo para la información desplegada */
}
.nameempresa{
 font-size: 18px;
 color: #bbb9d6;
}
.mainpeque{
overflow: hidden; /* Ocultar el desbordamiento */
    text-overflow: ellipsis; /* Mostrar puntos suspensivos */
    display: -webkit-box; /* Para truncar con puntos suspensivos */
    -webkit-box-orient: vertical; /* Dirección vertical del box */
    -webkit-line-clamp: 7; /* Número de líneas a mostrar (opcional) */
	font-size: 14px;
}
.FeaturedCompany{
	font-size: 14px;
	color: #bbb9d6;
	padding-bottom:10px;
}

.contenedorImagen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ajusta el ancho del espacio disponible */
    height: auto; /* Permite que el contenedor se adapte al contenido */
    text-align: center;
}


.logoCompany {
    max-width: 90%; /* Ocupa como máximo el 90% del ancho del contenedor */
    max-height: 100px; /* No supera los 100px de altura */
    height: auto; /* Mantiene las proporciones */
    width: auto; /* Asegura que el ancho se ajuste proporcionalmente */
}
.logoBanner {
    max-width: 100%; /* Ocupa como máximo el 90% del ancho del contenedor */
    max-height: 100%; /* No supera los 100px de altura */
    height: auto; /* Mantiene las proporciones */
    width: auto; /* Asegura que el ancho se ajuste proporcionalmente */
	border-radius: 5px;
}
.contenedordecontenedorLogoInfo{
	max-width: 290px;
    max-height: 190px;
	/*padding: 20px;*/
}
.contenedorLogoInfo{
display: flex; /* Permite ajustar el tamaño al contenido */
    background-color: white; /* Fondo blanco para el contenedor */
    border-radius: 12px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno entre el borde del contenedor y la imagen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para destacar el contenedor */
    align-items: center; /* Centra la imagen verticalmente */
    justify-content: center; /* Centra la imagen horizontalmente */
    max-width: 250px;
    max-height: 150px;
    width: auto;
    height: auto;
}

.contenedorLogoInfo img {
    object-fit: contain;
    max-width: 100%; /* Escala la imagen dentro del contenedor */
	max-height: 100%;
}
/* Contenedor de los filtros */
.contenendorcontenedoresfiltros{
display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */    
    max-width: 1170px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
	width:98%;
}

.FraseNoCompanies{
	font-size: 18px;
	color: #446993;	
}
.ContenedorNoCompanies{
display: flex; /* Activa Flexbox para alineación */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  text-align: center; /* Asegura que el texto esté centrado en múltiples líneas */
  width:100%; /* Ajusta al tamaño necesario */
  background-color: #f0f0f0; /* Fondo para visualizar el contenedor */
  border: 1px solid #446993; /* Borde opcional */
}
/* Contenedor de los filtros */
.filters-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  justify-content: center;
}
.ContenedornumeroEmpresas{
display: flex; /* Activa Flexbox para alineación */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  text-align: center; /* Asegura que el texto esté centrado en múltiples líneas */
  width:100%; /* Ajusta al tamaño necesario */
}
.numeroEmpresas{
display: flex; /* Activa Flexbox para alineación */
  justify-content:flex-start; /* Centra horizontalmente */
  align-items:flex-start; /* Centra verticalmente */
  text-align:left; /* Asegura que el texto esté centrado en múltiples líneas */
  width:100%; /* Ajusta al tamaño necesario */
  max-width: 1170px;
  font-size: 14px;
  font-weight: bold;
  color: #555;
}

/* Grupo de cada filtro */
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 250px;
}

/* Etiquetas */
.filter-group label {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}

/* Estilo para los select */
.styled-select {
  width: 200px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

/* Hover y focus */
.styled-select:hover,
.styled-select:focus {
  border-color: #bbb9d6;
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(61, 41, 75, 0.3);
  outline: none;
}
.EstilosFormularioFiltros{
	display: contents;
}
.btnSubmitFormulario { 
font-size: 20px; 
line-height: 30px; 
width:auto; 
min-width: 190px;
color: #FFFFFF; 
background-color:#2e2e2e; 
font-weight:bold; 
font-family: 'Exo', sans-serif; 
cursor:pointer; 
border-radius: 5px; 
text-align: center;
padding: 4px;
}
.btnSubmitFormulario:hover { background-color:#b20045; }
.alineacion {
  display: flex; /* Coloca el texto y el icono en una línea */
  align-items: center; /* Alinea verticalmente el texto y el icono */
  gap: 8px; /* Espacio entre el icono y el texto */
}

@media screen and (max-width: 980px){
.imgCabeceramov{
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
z-index: 1;
}
.imgCabecera{
display: none;
}
}
@media screen and (max-width: 768px) {
  .card {
    width: 100% !important;
    min-width: unset;
  }

  .card.flippable .inner {
    height: auto;
  }

  .card.flippable .front,
  .card.flippable .back {
    position: relative;
    height: auto;
  }

  .card.flippable .back {
    display: block;
    transform: none !important;
  }

  .card.flippable .inner {
    transform: none !important;
  }
}