<template>

    <div>
        <app-menu ></app-menu>
        <main class="centrar">
            <div class="titulo">
                <h1>Costos de Inscripción</h1>
            </div>
            
        </main>
            <div class="container alin">
                <div class="row">
                    <div class="col">
                        <h3><a class="bold">Ponente</a></h3>
                        <ol type="a">
                            <li>$600.00 MXN o $30 USD por inscripción como ponente, en la modalidad oral (inscripción por autor), lo que dará derecho a la presentación de cada uno de los trabajos registrados, el ingreso a todas las sesiones y ponencias durante los tres días que durará el evento, así como constancia de participación y asistencia (electrónicas).</li>
                            <li>$300.00 MXN o $15 USD por inscripción como ponente, en la modalidad de cartel (inscripción por autor), lo que dará derecho a la presentación de cada uno de los trabajos registrados, el ingreso a todas las sesiones y ponencias durante los tres días que durará el evento, así como constancia de participación y asistencia (electrónicas).</li>
                            
                        </ol>
                       

                        <h3><a class="bold">Asistente al Coloquio comunidad externa</a></h3>
                        <ol type="a">
                            <li>$300.00 MXN o $15 USD con derecho a ingresar los tres días a todas las sesiones y ponencias, así como a obtener constancia de asistencia.</li>
                            <li>Comunidad interna: exenta de pago para asistir al coloquio.</li>
                        </ol>



                    </div>
                </div>
            </div>
     
    </div>
 

</template>

<script>

import webMenu from '../estetica/menu.vue';


export default {
 
    
    components: {
        
        appMenu: webMenu,
          }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bold{
     font-weight: bold;
}
.container{
    margin-bottom: 4rem;
}
.alin{
    text-align: justify;
}
.titulo{
    margin-top: 3rem;
    margin-bottom: 3rem;
}
h1 {
   padding-left: 2rem;
    padding-right: 2rem;
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    
}
main img {
    width: 20rem;
    margin-bottom: 6rem;
}

@media screen and (min-width: 768px) {
    main img {
        width: 40rem;
    }
    h1{
         display: inline; 
       border-bottom: solid .1rem black;
    
        font-size: 2rem;
    }
}

@media screen and (min-width: 1024px) {
    main img {
        width: 60rem;
    }
    h1{
        font-size: 2.5rem;
    }
}
</style>
