html {
  scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
}

body { cursor: auto; }
    .custom-cursor {
        width: 20px; height: 20px;
        background: rgba(193, 18, 31, 0.5); /* Tu rojo con opacidad */
        border-radius: 50%;
        position: fixed; pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        opacity: 0; transition: opacity 0.3s;
    }
    .galeria-item:hover ~ .custom-cursor { opacity: 1; }

.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #C1121F;
    transition: 0.3s;
}

.nav-link:hover::after {
    width: 100%;
} 

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.hover-poderoso {
    position: relative;
    overflow: hidden;
}

.hover-poderoso::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: translateX(-100%);
}

.hover-poderoso:hover::after {
    animation: shimmer 1.5s infinite;
}

@keyframes giro-lento {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-giro-3s {
    animation: giro-lento 3s linear infinite;
}

.bg-patron-arquitectura {
    background-color: #D9D9D9;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23f2f2f2' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-patron-checkers {
    background-color: #ececec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 8 8'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Transición suave para el movimiento de la cinta */
.js-carousel-track {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.js-galeria-item {
    transition: all 0.4s ease;
    opacity: 0.6; 
}

.js-galeria-item.active {
    opacity: 1;
    transform: scale(1.05);
}

.js-galeria-item.active .border-4 {
    opacity: 1 !important; 
}

.js-proyecto-titulo, .js-proyecto-lugar, .js-proyecto-desc {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Contenedor principal del modal */
#modal-galeria {
    display: none; /* Se cambia a flex con JS */
    padding: 20px;
}

/* La tarjeta blanca/negra que contiene la foto */
.modal-content-card {
    width: 100%;
    max-width: 1000px;
    /* IMPORTANTE: No deja que el modal sea más alto que la pantalla */
    max-height: 90vh; 
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

/* Contenedor de la imagen */
.modal-img-container {
    flex: 1; /* Toma todo el espacio disponible */
    background-color: #000; /* Fondo negro para el aire sobrante */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0; /* Permite que el contenedor se encoja */
}

#modalImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    display: block;
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .modal-img-container {
        height: 500px; /* Desktop */
    }
}

@keyframes loop-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* Se mueve la mitad (el primer set de logos) */
}

.animate-loop-scroll {
  display: flex;
  width: max-content; /* Importante para que no se amontonen */
  animation: loop-scroll 30s linear infinite; /* 30s es la velocidad, cámbialo si quieres más rápido */
}

/* Opcional: Pausar al pasar el mouse */
.paused {
  animation-play-state: paused;
}