Carrusel Red Humana
:root{
--bg: #ffffff;
--azul: #0e71b8;
--azul-hover: #0a5a92;
--logo-h: 100px;
--ipv: 4; /* items per view, ajustado por JS */
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){ --bg: #121212; }
}
:root[data-theme="dark"]{ --bg: #121212; }
* { box-sizing: border-box; }
body{
margin:0;
background: var(--bg);
font-family: Arial, Helvetica, sans-serif;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.franja{
max-width: 1200px;
margin: 40px auto;
padding: 0 24px;
}
.carrusel-wrap{
position: relative;
display:flex;
align-items:center;
gap: 10px;
}
.flecha{
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
cursor: pointer;
color: var(--azul);
transition: background .2s ease, transform .15s ease;
z-index: 2;
}
.flecha:hover{ background:#eaf4fc; transform: scale(1.05); }
.flecha svg{ width: 18px; height: 18px; fill: currentColor; }
.carrusel-viewport{
flex: 1 1 auto;
overflow: hidden;
min-width: 0;
}
.carrusel-track{
display:flex;
align-items:center;
transition: transform .5s ease;
}
.slide-item{
flex: 0 0 calc(100% / var(--ipv));
display:flex;
align-items:center;
justify-content:center;
padding: 0 5px;
min-width: 0;
}
.logo-item{ height: var(--logo-h); }
.logo-item img{
max-height: 100%;
max-width: 100%;
width: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.logo-item img:hover{
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
/* Logos que se muestran siempre a color */
.logo-item img.color-fijo{
filter: none;
opacity: 1;
}
.logo-item img.color-fijo:hover{
transform: scale(1.05);
}
.cta-btn{
display:inline-block;
background: var(--azul);
color: #ffffff !important;
text-decoration: none;
font-weight: bold;
font-size: 0.95em;
padding: 10px 22px;
border-radius: 8px;
white-space: nowrap;
transition: background .2s ease, transform .15s ease;
}
.cta-btn:hover{
background: var(--azul-hover);
transform: translateY(-1px);
}
const logos = [
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/metrored-color.png", alt: "Metrored", color: true },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo-hospital-metrop-color.png", alt: "Hospital Metropolitano", color: true },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/omn-bni.png", alt: "OMNI Hospital" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo-KENNEDY-bn.png", alt: "Kennedy Grupo Hospitalario" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/clinica-pasteur-bn.png", alt: "Clínica Pasteur" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo-hospital-vozandes.png", alt: "Hospital Vozandes" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/hospital-alcivar-bn.png", alt: "Hospital Alcívar" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo_home-valles-bn-2.png", alt: "Hospital de los Valles" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/hospital-clinica-mujer-bn.png", alt: "Hospital Clínica de la Mujer" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/axxis-logo-bn.png", alt: "Axxis Hospital" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/hospital-pediatrico-bn.png", alt: "Hospital Pediátrico" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo-hcsf-web-bn.png", alt: "Hospital Clínica San Francisco" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/logo-novac-bn.png", alt: "Novaclínica" },
{ src: "https://humana.med.ec/wp-content/uploads/2020/03/clinica-integral-logo-bn.png", alt: "Clínica Integral" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/hispital-del-rio-logo.png", alt: "Hospital del Río" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/SIME-LOGO-2023-v3.png", alt: "SIME" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/corporacion-medica-monte-sinai.png", alt: "Corporación Médica Monte Sinaí" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/clinica-paucambamba.png", alt: "Clínica Paucarbamba" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/centro-quirurgico-metropolitano.png", alt: "Centro Quirúrgico Metropolitano" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/hospital-san-juan-de-dios-logo.png", alt: "Hospital San Juan de Dios" },
{ src: "https://humana.med.ec/wp-content/uploads/2021/10/clinica-santa-ana-logo.png", alt: "Clínica Santa Ana" },
{ src: "https://humana.med.ec/wp-content/uploads/2025/05/logo-clinica-maria-auxiliadora-bn-2.png", alt: "Clínica María Auxiliadora" }
];
const CTA_URL = "https://humana.med.ec/planes-medicos/";
const AUTOPLAY_MS = 3000;
// Combina logos + botón "Ver planes" cada 3 logos
const baseItems = [];
logos.forEach((l, i) => {
baseItems.push({ type: 'logo', data: l });
if ((i + 1) % 3 === 0) {
baseItems.push({ type: 'cta' });
}
});
const N = baseItems.length;
// Triplicamos la lista para permitir avanzar/retroceder de a uno de forma infinita y fluida
const renderItems = [...baseItems, ...baseItems, ...baseItems];
const track = document.getElementById('track');
const viewport = document.querySelector('.carrusel-viewport');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = N; // arrancamos en el bloque central
let autoplayTimer = null;
function getItemsPerView(){
const w = window.innerWidth;
if (w <= 600) return 1;
if (w <= 900) return 2;
if (w <= 1200) return 3;
return 4;
}
function renderItem(item){
const wrap = document.createElement('div');
wrap.className = 'slide-item' + (item.type === 'logo' ? ' logo-item' : ' cta-item');
if (item.type === 'logo'){
const img = document.createElement('img');
img.src = item.data.src;
img.alt = item.data.alt;
img.loading = 'lazy';
if (item.data.color) img.classList.add('color-fijo');
img.onerror = function(){ this.parentElement.style.visibility = 'hidden'; };
wrap.appendChild(img);
} else {
const a = document.createElement('a');
a.className = 'cta-btn';
a.href = CTA_URL;
a.textContent = 'Ver planes';
wrap.appendChild(a);
}
return wrap;
}
function build(){
document.documentElement.style.setProperty('--ipv', getItemsPerView());
track.innerHTML = '';
renderItems.forEach(it => track.appendChild(renderItem(it)));
setPosition(false);
}
function setPosition(animate){
const ipv = getItemsPerView();
const percentPerItem = 100 / ipv;
track.style.transition = animate === false ? 'none' : '';
track.style.transform = `translateX(-${currentIndex * percentPerItem}%)`;
if (animate === false){
void track.offsetHeight; // fuerza reflow
track.style.transition = '';
}
}
function next(){
currentIndex++;
setPosition(true);
if (currentIndex >= N * 2){
setTimeout(() => { currentIndex -= N; setPosition(false); }, 500);
}
}
function prev(){
currentIndex--;
setPosition(true);
if (currentIndex < N){
setTimeout(() => { currentIndex += N; setPosition(false); }, 500);
}
}
function startAutoplay(){
stopAutoplay();
autoplayTimer = setInterval(next, AUTOPLAY_MS);
}
function stopAutoplay(){
if (autoplayTimer) clearInterval(autoplayTimer);
}
nextBtn.addEventListener('click', () => { next(); startAutoplay(); });
prevBtn.addEventListener('click', () => { prev(); startAutoplay(); });
viewport.addEventListener('mouseenter', stopAutoplay);
viewport.addEventListener('mouseleave', startAutoplay);
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.documentElement.style.setProperty('--ipv', getItemsPerView());
setPosition(false);
}, 200);
});
build();
startAutoplay();