/* ==========================================================================
   ======================= SECTION: THE EXPERIENCE ========================
   ========================================================================== */

/* Color del título */
.bohoo-color-gray {
    color: var(--bohoo-gray); /* O puedes poner #CCCCCC directamente */
}

.bohoo-section-title {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* --- Reproductor de Video --- */
.bohoo-video-player {
    position: relative;
    width: 100%;
}

/* AQUÍ ESTÁ LA MAGIA: Fuerza las proporciones del video vertical desde el inicio */
.bohoo-video-vertical {
    aspect-ratio: 9 / 16; /* Proporción exacta de video de celular */
    width: 100%;
    object-fit: cover;
    background-color: #fcfaf8; /* Fondo sutil por si el internet es lento */
    border-radius: 4px;
    outline: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); /* Sombra elegante */
}

/* --- Textos Descriptivos --- */
.bohoo-subtitle {
    font-size: 0.95rem;
    color: #333333;
    letter-spacing: 0.5px;
}

.bohoo-text {
    font-size: 0.95rem;
    font-weight: 300;
    color: #666666;
    line-height: 1.8; /* Mayor espacio entre líneas para lectura fácil */
}

/* ==========================================================
   ============== RESPONSIVE: THE EXPERIENCE ================
   ========================================================== */
@media (max-width: 991px) {
    /* Ajustes de espaciado en móviles */
    .bohoo-experience-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .bohoo-section-title {
        font-size: 1.8rem; /* Título un poco más pequeño en celular */
    }

    .bohoo-experience-content {
        margin-top: 1rem;
    }

    /* Quitamos el padding izquierdo del texto en móviles para que quede alineado */
    .bohoo-experience-text > div {
        padding-left: 0 !important;
    }
}