/* ========================================
   Fuente Roboto (variable font)
   ======================================== */
@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-VariableFont_wdth,wght.3aa911d4a1e7.ttf") format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Italic-VariableFont_wdth,wght.5b03341126c5.ttf") format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   Fuente Bebas Neue
   ======================================== */
@font-face {
  font-family: 'Bebas Neue';
  src: url("../fonts/BebasNeue-Regular.b2b293064f55.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-bebas-neue {
  font-family: 'Bebas Neue', sans-serif;
}

/* Aplicar Roboto como fuente por defecto */
body {
  font-family: 'Roboto', sans-serif;
}

/* Custom animations and styles */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Custom hover effects */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}


/* ========================================
   Sistema de colores Riau Riau
   4 colores: rramarillo, rrclaro, rrrojo, rrmorado
   ======================================== */

:root {
    --rramarillo: #EBE2A6;
    --rrclaro: #E5E1D6;
    --rrrojo: #B00E19;
    --rrmorado: #574494;
}

/* Clases de fondo (background) */
.bg-rramarillo { background-color: var(--rramarillo); }
.bg-rrclaro { background-color: var(--rrclaro); }
.bg-rrrojo { background-color: var(--rrrojo); }
.bg-rrmorado { background-color: var(--rrmorado); }

/* Clases de texto */
.text-rramarillo { color: var(--rramarillo); }
.text-rrclaro { color: var(--rrclaro); }
.text-rrrojo { color: var(--rrrojo); }
.text-rrmorado { color: var(--rrmorado); }

/* Clases de borde */
.border-rramarillo { border-color: var(--rramarillo); }
.border-rrclaro { border-color: var(--rrclaro); }
.border-rrrojo { border-color: var(--rrrojo); }
.border-rrmorado { border-color: var(--rrmorado); }

/* Clases hover para fondo */
.hover\:bg-rramarillo:hover { background-color: var(--rramarillo); }
.hover\:bg-rrclaro:hover { background-color: var(--rrclaro); }
.hover\:bg-rrrojo:hover { background-color: var(--rrrojo); }
.hover\:bg-rrmorado:hover { background-color: var(--rrmorado); }

/* Clases hover para texto */
.hover\:text-rramarillo:hover { color: var(--rramarillo); }
.hover\:text-rrclaro:hover { color: var(--rrclaro); }
.hover\:text-rrrojo:hover { color: var(--rrrojo); }
.hover\:text-rrmorado:hover { color: var(--rrmorado); }

/* Clases hover para borde */
.hover\:border-rramarillo:hover { border-color: var(--rramarillo); }
.hover\:border-rrclaro:hover { border-color: var(--rrclaro); }
.hover\:border-rrrojo:hover { border-color: var(--rrrojo); }
.hover\:border-rrmorado:hover { border-color: var(--rrmorado); }

/* Clases focus para ring */
.focus\:ring-rramarillo:focus { --tw-ring-color: var(--rramarillo); }
.focus\:ring-rrclaro:focus { --tw-ring-color: var(--rrclaro); }
.focus\:ring-rrrojo:focus { --tw-ring-color: var(--rrrojo); }
.focus\:ring-rrmorado:focus { --tw-ring-color: var(--rrmorado); }

/* Clases focus para borde */
.focus\:border-rramarillo:focus { border-color: var(--rramarillo); }
.focus\:border-rrclaro:focus { border-color: var(--rrclaro); }
.focus\:border-rrrojo:focus { border-color: var(--rrrojo); }
.focus\:border-rrmorado:focus { border-color: var(--rrmorado); }

/* Overlays con opacidad */
.bg-rrmorado-overlay { background-color: rgba(87, 68, 148, 0.9); }
.bg-rrmorado-gradient { background: linear-gradient(to top, rgba(87, 68, 148, 0.8), transparent); }

/* Group hover para fondo */
.group:hover .group-hover\:bg-rrrojo { background-color: var(--rrrojo); }
.group:hover .group-hover\:bg-rrmorado { background-color: var(--rrmorado); }

/* Group hover para texto */
.group:hover .group-hover\:text-rrrojo { color: var(--rrrojo); }
.group:hover .group-hover\:text-rrmorado { color: var(--rrmorado); }
.group:hover .group-hover\:text-rramarillo { color: var(--rramarillo); }