/* Mantenemos tus nombres exactos de estilos con la nueva paleta */

:root {
  /* Nueva Paleta: Gris Oscuro, Blanco Off y Rojo Destacado */
  --platino-dark: #2c3036;
  --platino-text: #f7f7f7;
  --platino-red: #be091b;
  --platino-red-dark: #8e0714;
}

.big {
    min-height: 100vh;
    /* Fondo con el nuevo tono oscuro #2c3036 */
    background: linear-gradient(rgba(44, 48, 54, 0.8), rgba(20, 20, 20, 0.95)), 
                url('imagen/fondo.png?auto=format&fit=crop&q=80&w=2000'); 
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    border-bottom: 4px solid var(--platino-red); /* Línea destacada en rojo */
}

/* Títulos con el rojo destacado #be091b */
.big h1 {
   color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

 
/* Toast animations (Sin cambios en nombres) */
@keyframes toastIn {
  from { transform: translate(-50%, -8px); opacity: 0; }
  to   { transform: translate(-50%, 0px); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translate(-50%, 0px); opacity: 1; }
  to   { transform: translate(-50%, -8px); opacity: 0; }
}
.animate-toast-in { animation: toastIn .18s ease-out forwards; }
.animate-toast-out { animation: toastOut .18s ease-in forwards; }

html { 
    scroll-behavior: smooth; 
    background-color: var(--platino-dark); /* Fondo base de la página */
}

.lead {
  width: 80%; /* móvil */
  color: var(--platino-text); /* Texto en #f7f7f7 */
  font-weight: 300;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .lead {
    width: 44%; /* PC */
  }
}

/* Animación fadeIn */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Estilo para la sección Guía (FAQ) con la nueva paleta */
#guia-platino .bg-gradient-to-br {
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(247, 247, 247, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(190, 9, 27, 0.3); /* Borde rojo sutil */
    box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

#guia-platino .bg-gradient-to-br:hover {
    border-color: var(--platino-red); /* Resalte en rojo al pasar el mouse */
    transform: translateY(-4px);
}

#guia-platino h3 {
    color: var(--platino-red); /* Preguntas en rojo */
}

/* Ajuste para que los botones de votación usen el rojo destacado */
.voteBtn {
    background-color: var(--platino-red) !important;
    color: var(--platino-text) !important;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.voteBtn:hover {
    background-color: var(--platino-red-dark) !important;
    box-shadow: 0 0 15px rgba(190, 9, 27, 0.4);
    transform: scale(1.02);
}

/* Estilo para textos generales */
p, li {
    color: var(--platino-text);
}

 
.text-yellow-200 {
        color: #fff!important;
}


 
.text-yellow-500 {
    color: #be091b !important;
}


.text-yellow-400 { 
    color: #a20c1a!important;
}

.from-yellow-400 {
    --tw-gradient-from: rgb(226 73 87 / 62%), #e24957;
    --tw-gradient-to: #ca8a04: rgb(226 73 87 / 62%), #e24957;
    --tw-gradient-stops: rgb(226 73 87 / 62%), #e24957;
}

.bg-yellow-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(190 190 190);
}

.border-yellow-500\/40 {
    border-color: rgb(192 192 192 / 40%);
}

.border-yellow-500\/20 {
    border-color: rgb(106 106 106 / 20%);
}

.border-white\/10 {
    border-color: rgb(151 155 153 / 61%);
}

 

.border-yellow-600\/40 {
    border-color: rgb(157 157 157 / 40%)!important;
}


.to-yellow-600 {
    --tw-gradient-to: #afafaf var(--tw-gradient-to-position);
}
 
.from-yellow-400 {
    --tw-gradient-from: #b3b3b3 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(151 151 151 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

rgb(151 151 151)