/*Se manejan los estilos correspondientes a las cajas que tienen una 
línea en su parte exterior y las partes que lo acompañan*/

:root{
    --buttom-band-height : 15vh;
    --position-band : 80vh;
}


/*
    ## GOOD CODE
*/
.space-work{
    /*
    Esta clase da el espaciado entre
    la banda inferior y el boton de menú
    > El *space-work* se puede volver responsive 
        modificando el atributo de height
    */
    
    padding-top: var(--size-menu) ;
    height: calc( var(--position-band) - (var(--buttom-band-height)/2) );
}

.space-work .box-right-sw{
    /* 
    Estilo para la caja derecha de space-work
    */
    padding: 3% 0 3% 0;
}

.box-right-sw  div {
    /* bandas dentro de caja derecha de space-work */
    text-align: left;
    /* Se alinea el texto dentro al centro verticalmente */
    display: flex;
    align-items: center;
}

.space-work .box-left-sw{
    /* 
    Estilo para la caja izquierda de space-work
    */
    padding: 2% 0 2% 0;
}

.box-left-sw  div {
    /* bandas dentro de caja izquierda de space-work */
    text-align: right;
    /* Se alinea el texto al centro verticalmente */
    display: flex;
    align-items: center;
}


.space-work > div , .space-work > div > div {
    /* Se añade full size para elementos internos de */
    height: 100%;
    
}

/*
    ## END GOOD CODE
*/



/* Div exterior para poner la linea */

.box-line-right {
    height: 80vh;
    border-right: 1.6vw solid #000000;
    padding: 0;
}

/* Realizando cambios rapidos, se deben unir en uno solo    */

.box-line-right2 {
    height: 60vh;
    margin-top: 5vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-right: 0;
    padding-left: 0;
    border-right: 1.6vw solid #000000;
}

/*unir esta con .inner-box-small para reutilizar code*/ 
.box-small{
    height: 40vh;
    padding: 6vh 2vw 2vh 3vw;
    text-align: center;
    background-color: white;
    font-family: Ancizar sans;
    font-size: large;

}

.box-line-buttom {
    padding-top: 3%;
    padding-left: 3%;
    padding-right: 3%;
    border-bottom: 1.6vw solid #000000;
}

.box-line-top{
    padding-left: 3%;
    padding-right: 3%;
    border-top: 13px solid #000000;
}


.box-line-left{
    border-left: 1.6vw solid #000000;
}

/* Caja para titulo */

.box-top-title{
    background-color: #60021d;
    margin: 0 4% 0 4% ;
    text-transform: uppercase;
    font-size: xx-large;
}



.box-line-subtitle {
    padding: 5px;
    border-bottom: 2px solid #000000;
    border-top: 2px solid #000000;
    border-left: 1.6vw solid #000000;
}







/* Caja de la izquierda */

.box-right {
    height: 80vh;
    padding: 10vh 0 10vh 0;
}


.box-right46 {
    margin-top: 5vh;;
    height: var(--my-height-box);
    padding: 18px 0 18px 0;
}


/* Caja interior */

.inner-box-big {
    height: 70vh;
    margin-top: 5vh;
    padding-top: 5%;
    padding-right: 3%;
    float: right;
    text-align: right;
    background-color: white;
}

/*usar la aplicación de estas propiedades 
con selectores que tomen los hijos para eliminar la clase
ejemplo seleccionar los hijos con (div > p )*/
.inner-box-small {
    height: 30vh;
    padding: 2vh 2vw 2vh 10%;
    float: right;
    text-align: right;
    background-color: white;

}

.inner-box-md {
    padding: 2vh 2vw 2vh 10%;
    float: right;
    text-align: right;
    background-color: white;

}


.strip__content .inner-box-center{
    text-align: justify;
    background-color: white;
    padding: 5%;
    font-size: medium;
    color: black;

}

.box-line-buttom .inner-box-center{
    padding: 5% 10% 5% 10%;
    height: 40vh;
}

.inner-box-center2{
    padding: 5vh 6vw 5vh 6vw;
}

.box-center {
    /* centrar la caja  */
    display: flex;
    justify-content: center;
    align-items: center;
}


.padding-box {
    padding-top: 15%;
    padding-left: 45%;
    padding-right: 2vw;
}

.inner-box h1 {

    font-style: italic;
    font-size: 3.5vw;
    color: black;
}

.inner-box p {
    font-size: 1.2em;
}


.buttom-band{
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    color: white;
    font-size: x-large;
    line-height: normal;
}


/* Boton a la derecha de la caja*/

.box-button-left {
    background-color: #78b82a;
    border: 0;
    color: white;
    font-size: x-large;
    height: 30%;
    text-align: left;
}


.band-right-medium {
    display: block !important;
    padding-left: 5vw;
    color: white;
    height: 60px;
    font-size: large;
}

.band-right-small {
    display: block !important;
    padding-left: 5vw;
    margin: 0;
    font-size: xx-large;
    color: white;
    line-height: 2em;
    font-size: large;
}

/* Banda fija en la parte inferior */

.buttom-band-fixed{
    z-index: 3;
    position: fixed;
    top: var(--position-band);
    width: 100vw;
    height: var(--buttom-band-height);
    background-color: var(--banner-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    /*Font Style*/
    font-size: 23px;
    font-weight: lighter;
}