:root {
    --azul-oscuro: #002855;
    --azul-brillante: #0056b3;
    --verde-whatsapp: #25D366;
    --dorado-premium: #D4AF37;
    --fondo-gris: #f4f6f9;
    --texto-principal: #2c3e50;
    --sombra-suave: 0 10px 30px rgba(0,0,0,0.08);
    --vinotinto: #800020;
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background-color: var(--fondo-gris); margin: 0; overflow-x: hidden; }

/* --- 1. HEADER --- */
header {
    position: relative;
    padding: 50px 0; /* Aumenté el padding para más espacio */
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* Gradiente sutil en lugar de blanco plano para más modernidad */
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Sombra más pronunciada para profundidad */
    border-radius: 0 0 20px 20px; /* Bordes redondeados en la parte inferior para un look moderno */
}

.photo-ticker {
    position: absolute;
    top: 0; left: 0;
    width: calc(450px * 16);
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
    opacity: 0.3; /* Aumenté ligeramente la opacidad para que las imágenes sean más visibles pero no distraigan */
    animation: scrollPhotos 90s linear infinite;
    pointer-events: none;
    filter: blur(1px); /* Agregué un leve desenfoque para un efecto premium y menos distracción */
}

.photo-ticker img {
    height: 100%;
    width: 450px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.3s ease; /* Transición suave para posibles efectos futuros */
}

@keyframes scrollPhotos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-450px * 8)); }
}

.header-content {
    position: relative;
    z-index: 10;
    padding: 0 20px; /* Más padding lateral para mejor espaciado en móviles */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espaciado uniforme con flexbox */
}

.big-logo {
    max-width: 100%;
    height: auto;
    max-height: 187px;
    margin-bottom: 0; /* Eliminé margin-bottom ya que ahora usamos gap en flexbox */
    mix-blend-mode: multiply;
    transition: transform 0.3s ease; /* Efecto hover sutil */
}

.big-logo:hover {
    transform: scale(1.05); /* Logo se agranda ligeramente al pasar el mouse */
}



.site-header-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: calc(1.5rem + 1vw);
    background: linear-gradient(120deg, var(--azul-oscuro), var(--azul-brillante), var(--azul-oscuro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/* Estilos adicionales para el botón de WhatsApp y el párrafo */
.header-content a {
    transition: all 0.3s ease; /* Transición suave para hover */
}

.header-content a:hover {
    transform: translateY(-2px); /* Efecto de elevación al hover */
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3); /* Sombra verde al hover */
}

.header-content p {
    color: var(--dorado-premium);
    font-weight: 500;
    margin: 0;
    max-width: 600px; /* Limitar ancho para mejor legibilidad */
    line-height: 1.6; /* Mejor espaciado de líneas */
}

/* --- 2. FECHA --- */
.date-window {
    background: white;
    border: 3px solid var(--azul-oscuro);
    border-radius: 15px;
    padding: 15px;
    max-width: 300px;
    margin: -40px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: var(--sombra-suave);
    position: relative;
    z-index: 20;
}

/* --- 3. GRID --- */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 95%;
}

@media (max-width: 992px) {
    .content-grid { grid-template-columns: 1fr; }
}

.card { background: white; padding: 25px; border-radius: 16px; margin-bottom: 25px; box-shadow: var(--sombra-suave); border-left: 5px solid var(--azul-oscuro); overflow-wrap: break-word; }
.sidebar-box { background: white; padding: 20px; border-radius: 16px; margin-bottom: 20px; box-shadow: var(--sombra-suave); text-align: center; }

.btn-staff {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--verde-whatsapp); color: white; padding: 12px;
    border-radius: 50px; text-decoration: none; font-weight: 600; margin-top: 15px; transition: 0.3s;
}

.btn-blue {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--azul-brillante); color: white; padding: 12px;
    border-radius: 50px; text-decoration: none; font-weight: 600; margin-top: 15px; transition: 0.3s;
}

.btn-black {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #000000; color: white; padding: 12px;
    border-radius: 50px; text-decoration: none; font-weight: 600; margin-top: 15px; transition: 0.3s;
}

.btn-yellow {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #FFD700; color: #002855; padding: 12px;
    border-radius: 50px; text-decoration: none; font-weight: 700; margin-top: 15px; transition: 0.3s;
    border: 1px solid var(--azul-oscuro);
}

.btn-staff:hover, .btn-blue:hover, .btn-black:hover, .btn-yellow:hover { transform: scale(1.05); opacity: 0.9; }
.news-link { color: var(--azul-brillante); text-decoration: none; font-weight: 500; word-break: break-all; }

footer { background: var(--azul-oscuro); color: white; padding: 40px 20px; text-align: center; margin-top: 50px; }
.disclaimer { font-size: 0.85rem; opacity: 0.9; margin-top: 15px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.4; }
.footer-link { color: var(--dorado-premium); }