[Proyecto] Haz lo que hicimos en el aula

 <main>
        <section class="principal">
            <h2 class="titulo-princial">Sobre la Barbería Alura</h2>
            <img class="utensilio" src="img/utensilios.jpg" alt="utensilios">
            <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. 
            Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>
            <p id="misión"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>
            <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, 
            para así ofrecer a nuestros clientes las últimas tendencias.
            El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p> 
        </section>

        <section class="mapa">
            <h3 class="titulo-princial">Nuestra Ubicación</h3>
            <p>estamos aqui</p>

            <div class="mapa-contenido">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d914.1026993532864!2d-46.63555717744089!3d-23.589595878786046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5bd9bb943bf5%3A0x6f642995c970f0fe!2scaelum%20alura!5e0!3m2!1ses!2spe!4v1685412437854!5m2!1ses!2spe" 
            width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </section>

        <section class="Diferenciales">
            <h3 class="titulo-princial">Diferenciales</h3>
            <div class="contenido-diferenciales">
                <ul class="lista-diferenciales">
                    <li class="item">Atencion al clientes</li>
                    <li class="item">Localización</li>
                    <li class="item">Espacio Diferenciales</li>
                    <li class="item">Profesionales</li> 
                </ul><img src="img/barber_action.jpg" alt="" class="imagen-diferenciales">


            </div>

        </section>

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            allowfullscreen></iframe>
        </div>

    </main>

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}
.item{
    line-height: 1.5;
}
.item:first-child{
    font-weight: bold;
}
.item:before{
    content:"★"
}