/* CSS content (all pages) */
/* Definición de la paleta de colores Scout */
        :root {
            --color-scout-orange: #FF8C00; /* Naranja Oscuro */
            --color-scout-yellow: #FFD700; /* Dorado */
            --color-scout-red: #DC143C;   /* Carmesí (para acentos o advertencias) */
            --color-scout-blue: #4682B4;  /* Azul Acero */
            --color-scout-green: #228B22; /* Verde Bosque */
            --color-text-dark: #333;
            --color-text-light: #f8f8f8;
            --color-bg-light: #f0f4f8;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color-bg-light);
            color: var(--color-text-dark);
        }

        /* Estilos para la sección Hero */
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/medias/image/scout05wixarica/images/hero_scout05wixarica.webp') no-repeat center center/cover;
            background-attachment: fixed; /* Efecto parallax */
            border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
            border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
        }

        /* Botón primario con color naranja scout */
        .button.is-primary-scout {
            background-color: var(--color-scout-orange);
            color: var(--color-text-light);
            font-weight: bold;
            border-radius: 9999px; /* rounded-full */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }
        .button.is-primary-scout:hover {
            background-color: #E67E00; /* Naranja ligeramente más oscuro */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
            transform: scale(1.05); /* hover:scale-105 */
        }

        /* Estilos para los iconos SVG */
        .icon-svg {
            width: 48px;
            height: 48px;
            fill: var(--color-scout-green); /* Verde para los iconos */
            margin: 0 auto 1rem auto; /* Centrar y margen inferior */
        }

        /* Estilo para el contenedor de la galería */
        /* Eliminamos el grid-template-columns personalizado para usar las columnas de Bulma */
        .gallery-grid {
            display: block; /* Bulma columns manejarán el layout */
        }

        /* Estilos específicos de secciones */
        #beneficios {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin: -4rem auto 0 auto; /* -mt-16 */
            position: relative;
            z-index: 10;
            max-width: 960px; /* max-w-6xl */
            padding: 3rem 1.5rem;
        }
        #beneficios .box {
            background-color: #fcfcfc;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            transition: box-shadow 0.3s ease;
        }
        #beneficios .box:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        #metodologia {
            background-color: var(--color-bg-light); /* Un gris claro para esta sección */
            padding: 4rem 1.5rem;
        }
        #metodologia .box {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }
        #metodologia .title.is-5 {
            color: var(--color-scout-green);
        }

        #quienes-somos {
            background-color: white;
            padding: 4rem 1.5rem;
        }

        #galeria {
            background-color: var(--color-bg-light);
            padding: 4rem 1.5rem;
        }
        #galeria img {
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        #testimonios {
            background-color: white;
            padding: 4rem 1.5rem;
        }
        #testimonios .box {
            background-color: #fcfcfc;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }
        #testimonios .has-text-green {
            color: var(--color-scout-green);
        }

        #unete {
            background-color: var(--color-scout-blue); /* Azul scout para la sección de contacto */
            color: var(--color-text-light);
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            padding: 4rem 1.5rem;
        }
        #unete .box {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            max-width: 500px; /* max-w-lg */
            margin: 0 auto;
            padding: 2rem;
            color: var(--color-text-dark);
        }
        #unete .input, #unete .textarea {
            border-radius: 0.25rem;
            border: 1px solid #dbdbdb;
            box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
            padding: 0.5rem 1rem;
            width: 100%;
        }
        #unete .input:focus, #unete .textarea:focus {
            border-color: var(--color-scout-green);
            box-shadow: 0 0 0 0.125em rgba(34, 139, 34, 0.25);
        }
        #unete .button.is-fullwidth {
            background-color: var(--color-scout-orange);
            color: white;
            font-weight: bold;
            border-radius: 0.25rem;
            transition: background-color 0.3s ease;
        }
        #unete .button.is-fullwidth:hover {
            background-color: #E67E00;
        }
        #unete .has-text-green {
            color: var(--color-scout-green);
        }
        #unete .has-text-grey {
            color: #666;
        }

        footer {
            background-color: var(--color-scout-green); /* Verde oscuro para el footer */
            color: var(--color-text-light);
            padding: 2rem 1.5rem;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }
        footer a {
            color: var(--color-text-light);
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }
        footer a:hover {
            opacity: 1;
        }