/* Estilos para la plantilla */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Raleway", sans-serif
}

body,
html {
	height: 100%;
	line-height: 1.8;
}

/* Full height image header */
.bgimg-1 {
	width: 100vw;
	height: calc(100vh - 5px);
	object-fit: cover;
}

.w3-bar .w3-button {
	padding: 16px;
}

.client-container {
	display: flex;
	overflow: hidden;
}

.client {
	flex: 0 0 25%;
	transition: transform 0.5s ease;
}

.client-enter {
	transform: translateX(100%);
}

.client-exit {
	transform: translateX(-100%);
}


/* Estilo para pantallas pequeñas */
@media screen and (max-width: 600px) {
	.cardView {
		width: 100%;
	}

	.separador {
		padding:64px 11px;
	}

	.cardStyle .titulo {
		height: auto;
	}
	.cardStyle .parrafo {
		height: auto;
	}
}

/* Estilo para pantallas medianas */
@media screen and (min-width: 601px) and (max-width: 900px) {
	.cardView {
		width: 50%;
	}
	
	.separador {
		padding:64px 33px;
	}

	.cardStyle .titulo {
		height: 85px;
	}
	.cardStyle .parrafo {
		height: 200px;
	}
}

/* Estilo para pantallas grandes */
@media screen and (min-width: 901px) {
	.cardView {
		width: 25%;
	}

	.separador {
		padding:64px 99px;
	}
	
	.cardStyle .titulo {
		height: 85px;
	}
	.cardStyle .parrafo {
		height: 200px;
	}
}

.cardStyle {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Título */
.cardStyle .titulo {
    overflow: hidden;
    white-space: normal;   /* Evita el salto de línea */
    text-overflow: ellipsis; /* Los puntos suspensivos */
    width: 100%;           /* O puedes usar max-width si lo prefieres */
}

/* Párrafo */
.cardStyle .parrafo {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8; /* Limita el número de líneas */
    -webkit-box-orient: vertical;
    word-break: break-word; /* Para palabras largas */
    width: 100%;           /* O puedes usar max-width si lo prefieres */
}

/* Pie */
.cardStyle .pie {
    height: auto; /* Será lo suficientemente pequeño */
    margin-top: 5px;
    text-align: right; /* Ajusta el pie a la derecha si lo prefieres */
    font-size: 12px; /* Tamaño de fuente reducido */
}

/* Tooltip para el título y el párrafo */
.cardStyle .titulo[title], 
.cardStyle .parrafo[title] {
    cursor: pointer;
}


.contenedor-imagen {
    position: relative;
    max-width: 100%;
	height: 200px; /* Alto máximo del contenedor */
	overflow: hidden; /* Oculta el contenido que excede los límites del contenedor */
}

.contenedor-imagen1 {
    max-width: 85px;
	height: 85px; /* Alto máximo del contenedor */
	overflow: hidden; /* Oculta el contenido que excede los límites del contenedor */
}

.imagen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 100%; /* Ancho máximo de la imagen */
	height: 100%; /* Alto máximo de la imagen */
	object-fit: cover; /* Escala la imagen para que cubra todo el contenedor sin deformarla */
}
/*
.rainbow{
	height: 5px;
	background-color: #ff5500;
	background-image: linear-gradient(to right, #00affd, #00b781, #00bf0f, #fec200, #ff9600);
}
*/

.rainbow {
    background-color: #ff5500;
    background-image: linear-gradient(to right, #00affd, #00b781, #00bf0f, #fec200, #ff9600, #fec200, #00bf0f, #00b781, #00affd);
    background-size: 500% 100%;
    animation: moveGradient 3s linear infinite;
}

.rainbow.separator {
	height: 5px;
}

@keyframes moveGradient {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 0%;
	}
}