:root {
    --guinda-sedena: #761c3f;
    --dorado-gob: #bc955c;
    --gris-claro: #f4f4f4;
}

    body { 
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
        background-color: white; 
    }

    /* Navbar y Navegación */
    .navbar-custom { 
        background-color: white; 
        border-bottom: 3px solid var(--guinda-sedena); 
    }

    /* Botones de Convocatoria, Reglas y Privacidad (Dorado) */
    .btn-consulta {
        background-color: var(--dorado-gob) !important;
        color: white !important;
        font-weight: bold;
        border: none;
        border-radius: 20px;
        transition: background-color 0.3s;
    }
    
    .btn-consulta:hover {
        background-color: #a3814d !important;
    }

    /* Sección Hero */
 /* 1. Fondo Guinda con Patrón de Rombos */
    .hero-container-style {
        background-color: #761c3f; /* Tu Guinda Institucional */
        background-image: 
            linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%);
        background-size: 60px 60px; /* Tamaño del patrón de rombos */
        color: white;
        padding: 100px 0;
        position: relative;
        overflow: hidden;
    }

    /* 2. Elementos Geométricos Decorativos (Como en la imagen de referencia) */
    .hero-container-style::before,
    .hero-container-style::after {
        content: '';
        position: absolute;
        opacity: 0.1;
        z-index: 1;
    }

    /* Triángulos decorativos en la esquina superior izquierda */
    .hero-container-style::before {
        top: -50px; left: -50px;
        width: 200px; height: 200px;
        background: linear-gradient(135deg, white 50%, transparent 50%);
    }

    /* Círculo decorativo en la esquina inferior derecha */
    .hero-container-style::after {
        bottom: -80px; right: -80px;
        width: 300px; height: 300px;
        background-color: white;
        border-radius: 50%;
    }

    /* Asegurar que el contenido esté sobre los elementos decorativos */
    .hero-content {
        position: relative;
        z-index: 2;
    }

    /* 3. Estilo del Título (Robusto y Blanco) */
    .hero-title-style {
        font-weight: 900;
        color: white;
        text-transform: uppercase;
        line-height: 1.1;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    }

    /* Subtítulo Dorado (Opcional, como en la referencia) */
    .hero-subtitle {
        color: #bc955c; /* Tu Dorado Institucional */
        font-weight: bold;
        margin-bottom: 20px;
        display: block;
    }

    /* 4. Estilo de la Imagen (Como en la referencia) */
    .hero-image-style {
        max-width: 100%;
        height: auto;
        border: 5px solid #bc955c; /* Borde Dorado */
        border-radius: 15px; /* Bordes Redondeados */
        box-shadow: 10px 10px 25px rgba(0,0,0,0.5); /* Sombra para dar profundidad */
    }

    /* Estilo de Tarjetas de Pasos */
    .step-card {
        border: 2px solid var(--guinda-sedena);
        border-radius: 15px;
        height: 100%;
        transition: transform 0.3s;
    }
    
    .step-card:hover { transform: translateY(-5px); }
    
    .step-title { 
        color: var(--guinda-sedena); 
        font-weight: bold; 
        min-height: 50px; 
    }

    /* Botones "Haz Click Aquí" (Dorado) */
    .btn-haz-click {
        background-color: var(--dorado-gob) !important;
        color: white !important;
        font-weight: bold;
        border-radius: 20px;
        padding: 10px 25px;
        border: none;
    }
    
    .btn-haz-click:hover { background-color: #a3814d !important; }

    /* Estilos del Modal */
    .modal-header {
        background-color: var(--guinda-sedena) !important;
        color: white !important;
    }

    .footer-custom { 
        background-color: var(--gris-claro); 
        padding: 30px 0; 
        border-top: 5px solid var(--guinda-sedena); 
    }



    .check-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: bold;
}
.check-furb {
    width: 14px;
    height: 14px;
    cursor: pointer;
    border: 1px solid #000;
}




    .seccion-info-degradada {
        /* Degradado que va de un guinda más suave a tu color oficial #761c3f */
        background: linear-gradient(135deg, #8b2d4e 0%, #761c3f 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .seccion-info-degradada h2 {
        /* Usamos el dorado para el título para que resalte sobre el guinda */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    .seccion-info-degradada p, .seccion-info-degradada li {
        color: rgba(255, 255, 255, 0.95); /* Blanco ligeramente transparente para suavidad */
    }



    body {
        margin: 0;
        padding: 0;
        background-color: #ffffff; /* Fondo blanco de base */
        /* Patrón de pétalos sutil para todo el sitio */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 80 80'%3E%3Cpath d='M40 0C40 22.0914 22.0914 40 0 40C22.0914 40 40 57.9086 40 80C40 57.9086 57.9086 40 80 40C57.9086 40 40 22.0914 40 0Z' fill='%23761c3f' fill-opacity='0.03'/%3E%3C/svg%3E");
        background-attachment: fixed; /* El fondo se queda quieto al hacer scroll */
    }

    /* Sección Institucional Guinda */
    .seccion-info-institucional {
        position: relative;
        background-color: #761c3f;
        background-image: 
            linear-gradient(135deg, rgba(139, 45, 78, 0.95) 0%, rgba(118, 28, 63, 1) 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0C40 22.0914 22.0914 40 0 40C22.0914 40 40 57.9086 40 80C40 57.9086 57.9086 40 80 40C57.9086 40 40 22.0914 40 0Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
        box-shadow: 0 15px 35px rgba(118, 28, 63, 0.2);
        z-index: 1;
    }

    .info-content {
        position: relative;
        z-index: 2;
    }

    .img-visor-furb {
        position: relative;
        z-index: 10;
    }



   
    .footer-custom {
        position: relative;
        background-color: #761c3f; /* Dorado Institucional */
        color: #ffffff; /* Texto blanco para contraste */
        padding: 40px 0;
        border-top: 5px solid #761c3f; /* Línea guinda superior para dividir */
        overflow: hidden;
    }

    /* Aplicamos el patrón de pétalos sutil sobre el dorado */
    .footer-custom::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0C40 22.0914 22.0914 40 0 40C22.0914 40 40 57.9086 40 80C40 57.9086 57.9086 40 80 40C57.9086 40 40 22.0914 40 0Z' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
        background-size: 50px 50px;
        z-index: 1;
    }

    .footer-content {
        position: relative;
        z-index: 2; /* Para que el texto quede sobre el patrón */
    }

    .footer-custom i {
        transition: transform 0.3s ease;
        color: #ffffff;
    }

    .footer-custom i:hover {
        transform: scale(1.2);
        color: #761c3f; /* Los iconos cambian a guinda al pasar el mouse */
    }


   /* Contenedor principal para dar espacio vertical */
.banner-proporcional {
        width: 100%;
        padding: 25px 0; /* Un poco más de espacio arriba y abajo */
        overflow: hidden;
    }

    .img-completa {
        width: 100%;
        height: auto; /* Mantiene la proporción para que no se vea cortada */
        display: block;
        border-radius: 20px; /* Bordes un poco más curvos para el nuevo ancho */
        border: 1px solid rgba(118, 28, 63, 0.15);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Sombra más profunda para resaltar */
    }

    /* Ajustamos el botón para que siga viéndose bien con el nuevo ancho */
    .overlay-btn-registro {
        position: absolute;
        bottom: 15%; 
        right: 10%;
        z-index: 10;
    }

    .btn-banner-entrar {
        background-color: #761c3f; /* Guinda institucional */
        color: white !important;
        padding: 12px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        display: inline-block;
    }

    .btn-banner-entrar:hover {
        background-color: #bc955c; /* Dorado institucional */
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    }

    /* En pantallas pequeñas quitamos los márgenes laterales para aprovechar el espacio */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        .btn-banner-entrar {
            padding: 8px 20px;
            font-size: 0.8rem;
        }
    }