:root {
            --color-primary: #222120;
            --color-secondary: #222120;
            --color-accent: #c32b09;
            --color-bg-light: #f4f4f4;
            --color-text-dark: #0a0a0a;
            --transition-ease: 0.3s ease;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: var(--color-text-dark);
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        a {
            text-decoration: none;
            color: var(--color-primary);
            transition: color var(--transition-ease);
        }

        a:hover,
        a:focus {
            color: var(--color-secondary);
            text-decoration: none;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--color-primary);
        }

        p {
            margin-bottom: 1rem;
        }
        .mt-50{
            margin-top: 50px;
        }
        .mb-50{
            margin-bottom: 50px;
        }

        /* --- Navbar --- */
        .logo{
            max-width: 60px;
        }
        .navbar {
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--color-primary);
        }

        .nav-link {
            font-weight: 600;
            color: var(--color-primary) !important;
            padding: 0.5rem 1rem;
            transition: background-color var(--transition-ease), color var(--transition-ease);
        }

        .nav-link:hover,
        .nav-link:focus {
            background-color: var(--color-bg-light);
            color: var(--color-primary) !important;
            border-radius: 0.25rem;
        }

        /* --- Secciones Generales --- */
        section {
            padding: 80px 15px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .section-divider {
            width: 60px;
            height: 3px;
            background-color: var(--color-accent);
            border-radius: 2px;
        }

        /* --- Hero Section del Workshop --- */
        .workshop-hero {
            background-color: var(--color-bg-light);
            padding: 80px 15px;
            text-align: center;
        }

        .workshop-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .workshop-subtitle {
            font-size: 1.25rem;
            color: #6c757d;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .icon {
            font-size: 1.3rem;
            color: var(--color-accent);
            margin-right: 0.5rem;
        }

        .section-icon {
            font-size: 2.5rem;
            color: var(--color-accent);
        }

        #tematicas {
            background-color: #ffffff;
        }

        #plan-accion, #inscripcion {
            background-color: var(--color-bg-light);
        }

        /* --- Botš®n Principal del Workshop --- */
        .btn-workshop {
            background-color: var(--color-accent);
            color: white;
            padding: 15px 30px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: inline-block;
            border-color: transparent;
        }

        .btn-workshop:hover {
            background-color: #b02405;
            color: white;
            transform: translateY(-3px);
        }

        /* --- Contacto y Footer --- */
        #contacto {
            background-color: white;
            padding-bottom: 40px;
        }

        footer {
            background-color: var(--color-secondary);
            color: #fff;
            text-align: center;
            padding: 1.5rem 1rem;
        }

        footer a {
            color: #fff;
            margin: 0 0.5rem;
            transition: color var(--transition-ease);
        }

        footer a:hover,
        footer a:focus {
            color: var(--color-accent);
        }

        footer p {
            margin: 0;
        }

        /* --- Botš®n Flotante de WhatsApp --- */
        .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #25D366;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            text-decoration: none;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
        }
        
        .form-control:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 0.25rem rgba(195, 43, 9, 0.25);
        }

        /* --- Hero Section del Workshop --- */
.workshop-hero {
    background-color: var(--color-bg-light); /* Fondo claro para toda la secciš®n */
    padding: 0; /* Quitamos el padding para que el banner ocupe todo el ancho */
    text-align: center;
}

/* --- NUEVA CLASE PARA EL BANNER --- */
.banner-container {
    background-image: url('banner.jpg'); /* Ruta a tu imagen */
    background-size: cover;
    background-position: center;
    padding: 100px 15px; /* Padding interno para separar el texto de los bordes */
    position: relative;
    color: white;
}

/* Capa oscura para legibilidad */
.banner-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.banner-container .container {
    position: relative;
    z-index: 2;
}

/* Ajustes para el texto sobre el banner */
.workshop-title {
    color: white; /* Aseguramos que el tšªtulo sea blanco */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}

.workshop-subtitle {
    color: #f0f0f0; /* Blanco suave para el subtšªtulo */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}
#contacto i{
    color: #c32b09;
}
/* Aseguramos que el resto del contenido del header no tenga fondo de imagen */
.workshop-hero > .container {
    padding-bottom: 80px;
}

        /* --- Media Queries para Responsividad --- */
        @media (max-width: 768px) {
            .logo{
            max-width: 40px;
        }
            .workshop-title {
                font-size: 2rem;
            }

            .workshop-subtitle {
                font-size: 1.1rem;
            }

            section {
                padding: 60px 15px;
            }
            
            .text-center.mt-5 .col-md-4 {
                margin-bottom: 2rem;
            }
        }