/* --- Definición de la Paleta de Colores y Tipografía (Protocolo Visual) --- */
:root {
    --color-obsidiana: #080808; /* Negro Obsidiana Profundo */
    --color-oro: #C89A3C;       /* Oro Bruñido */
    --color-basalto: #303030;    /* Gris Basáltico */
    --color-papiro: #F5F5F5;    /* Blanco Papiro */
    
    --font-titulo: 'Cormorant Garamond', serif;
    --font-cuerpo: 'Raleway', sans-serif;
}

body {
    background-color: var(--color-obsidiana);
    color: var(--color-papiro);
    font-family: var(--font-cuerpo);
    overflow-x: hidden; /* Previene scroll horizontal general */
    margin: 0; /* Asegura que no haya márgenes por defecto */
    padding: 0; /* Asegura que no haya padding por defecto */
}

/* --- Clases de Utilidad de Tailwind Emuladas --- */
.font-titulo {
    font-family: var(--font-titulo);
    font-weight: 300; 
    color: var(--color-oro);
}

.font-cuerpo {
    font-family: var(--font-cuerpo);
    font-weight: 300;
}

.text-oro { color: var(--color-oro); }
.bg-oro { background-color: var(--color-oro); }
.text-obsidiana { color: var(--color-obsidiana); }
.bg-obsidiana { background-color: var(--color-obsidiana); }
.border-oro { border-color: var(--color-oro); }
.text-papiro { color: var(--color-papiro); }

/* --- Estilo del Marquee Optimizado v2 --- */
.marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}

.marquee-track {
    display: flex;
    width: fit-content; 
    min-width: 200%; 
    /* CAMBIO v2: Velocidad aumentada a 10s */
    animation: scroll 10s linear infinite; 
}

.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0; 
}

.marquee-item {
    flex: 0 0 auto;
    width: 30%; /* Desktop: Muestra ~3 items */
    padding: 0 1rem; 
    box-sizing: border-box;
}

.marquee-item img {
    display: block; 
    width: 100%;
    height: auto;
    object-fit: contain; 
    aspect-ratio: 3 / 4; 
    border-radius: 0.375rem; 
    max-height: 70vh; 
    /* loading="lazy" está en el HTML */
}

/* Keyframes para la animación de scroll */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Mueve la mitad del track (el primer grupo) */
}

/* Ajustes Responsivos para el Marquee */
@media (max-width: 1024px) { /* Tablets */
     .marquee-item { width: 40%; } /* Muestra ~2.5 items */
}

@media (max-width: 768px) { /* Móviles */
    /* CAMBIO v2: Reducido para mostrar casi 3 items */
    .marquee-item { width: 35%; } 
}

/* --- Estilos Adicionales --- */
::selection {
  background-color: var(--color-oro);
  color: var(--color-obsidiana);
}
::-moz-selection { /* Para Firefox */
  background-color: var(--color-oro);
  color: var(--color-obsidiana);
}