
:root {
  --color-primario: #800040;
  --color-primario-oscuro: #5c002e;
  --color-texto: #1a1a2e;
  --color-texto-suave: #555555;
  --color-acento: #f2c1c1;

  /* Colores de texto */
  --color-blanco: #ffffff;
  --color-guinda: #800040;
  --color-negro: #111111;
  --color-azul-marino: #001f5b;
}

/* Clases de texto */
.texto-blanco      { color: var(--color-blanco) !important; }
.texto-guinda      { color: var(--color-guinda) !important; }
.texto-negro       { color: var(--color-negro) !important; }
.texto-azul-marino { color: var(--color-azul-marino) !important; }

.texto-chico   { font-size: 0.8rem; }
.texto-normal  { font-size: 1rem; }
.texto-grande  { font-size: 1.3rem; }
.texto-titulo  { font-size: 1.8rem; }

/* Navbar guinda */
.navbar {
  background-color: #800040 !important;
}

/* Texto blanco */
.navbar a, .navbar-brand {
  color: white !important;
}

/* Hover */
.navbar a:hover {
  color: #f2c1c1 !important;
}


/* Carrusel con 9 imágenes — animación sincronizada */
.slider {
  width: 100%;
  max-width: 1000px;
  height: 60vh;
  margin: 2rem auto;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  object-fit: contain;
  object-position: center;
  animation: fadeSlide 54s infinite;
  transition: opacity 0.5s ease-in-out; /* transición más rápida */
}

/* Secuencia (9 imágenes × 6s por imagen) */
.slider img:nth-child(1)  { animation-delay: 0s;  }
.slider img:nth-child(2)  { animation-delay: 6s;  }
.slider img:nth-child(3)  { animation-delay: 12s; }
.slider img:nth-child(4)  { animation-delay: 18s; }
.slider img:nth-child(5)  { animation-delay: 24s; }
.slider img:nth-child(6)  { animation-delay: 30s; }
.slider img:nth-child(7)  { animation-delay: 36s; }
.slider img:nth-child(8)  { animation-delay: 42s; }
.slider img:nth-child(9)  { animation-delay: 48s; }

/* Fundido ajustado para evitar solapamientos */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* entrada más rápida */
  20%  { opacity: 1; }   /* visible */
  24%  { opacity: 0; }   /* salida breve antes de la siguiente */
  100% { opacity: 0; }
}
