html {
    box-sizing: border-box;
    font-size: 62.5%;
    /**Reset para Rems -62.5% = 10px de 16px**/
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-size: 1.6rem;
    line-height: 2;
    font-family: 'Gentium Basic', serif;
}


/*Globales*/

img {
    max-width: 100%;
}

table {
    width: 100%;
}

.contenedor {
    max-width: 120rem;
    width: 95%;
    margin: 0 auto;
}

h1 {
    font-size: 6.5rem;
    margin: 0 0 4rem;
}

h2 {
    font-size: 4.5rem;
}

h3 {
    font-weight: 700;
    font-size: 3rem;
}

h4 {
    font-weight: 600;
    font-size: 2.6rem;
}

h5 {
    font-size: 2rem;
}

h1,
h2 {
    font-family: 'Parisienne', cursive;
}

h3,
h4,
h5 {
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
}


/*Utilidades*/

.seccion {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #e1e1e1;
}

.maxWidth-400 {
    max-width: 400px;
}

.justify-texto p {
    text-align: justify;
    text-align-last: left;
}

.centrar-texto {
    text-align: center;
}

.right-text {
    text-align: right;
}

.SpanGeneral span {
    color: steelblue;
    font-weight: 600;
    margin-right: 2rem;
    margin-left: .5rem;
}

.SpanGeneral span:last-of-type {
    margin-right: 0;
}

.contenido-style {
    padding: 2rem;
    border-radius: 15px;
}

.contenido-style th,
.contenido-style td {
    margin-top: 0;
    padding: 0 1rem;
    text-align: left;
    font-size: 2rem;
}

.contenido-style th {
    color: darkslategray;
    font-family: 'Cormorant Garamond', serif;
}

.contenido-style td {
    color: cornflowerblue;
    font-weight: 700;
}

.title-ul {
    color: darkslategray;
    font-weight: 700;
}

.General-bgColor {
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #e1e1e1;
    background-color: cornflowerblue;
}

.BG-Inside-Content {
    background-color: ghostwhite;
    border: 1px solid cadetblue;
}

.Parisienne-Blue {
    color: dodgerblue;
    text-shadow: 2px 2px 2px #e1e1e1;
}

.d-block {
    display: block!important;
}

.flex-right {
    display: flex;
    justify-content: flex-end;
}


/*Botones*/

.btn {
    margin: 0;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    padding: 1rem 3rem;
    display: inline-block;
    display: block;
    /*ResponsiveDesign para smartphone*/
    flex: 0 0 100%;
    /*Para hijos de flex...ocupa el espacio disp*/
}

@media (min-Width: 1200px) {
    .btn {
        display: inline-block;
        flex: 0 0 auto;
    }
}

.btn-secundario {
    background-color: steelblue;
}

.btn-secundario:hover {
    background-color: royalblue;
}

.btn-principal {
    background-color: royalblue;
}

.btn-principal:hover {
    background-color: mediumblue;
}


/*Grid*/

.column-1 {
    flex: 0 0 calc(8.3% - 1rem);
}

.column-2 {
    flex: 0 0 calc(16.6% - 1rem);
}

.column-3 {
    flex: 0 0 calc(25% - 1rem);
}

.column-4 {
    flex: 0 0 calc(33.3% - 1rem);
}

.column-5 {
    flex: 0 0 calc(41.6% - 1rem);
}

.column-6 {
    flex: 0 0 calc(50% - 1rem);
}

.column-7 {
    flex: 0 0 calc(58.3% - 1rem);
}

.column-8 {
    flex: 0 0 calc(66.6% - 1rem);
}

.column-9 {
    flex: 0 0 calc(75% - 1rem);
}

.column-10 {
    flex: 0 0 calc(83.3% - 1rem);
}


/*Header*/

.site-header {
    background-image: url("/img/bgHeader3.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    padding: 1rem 0 3rem 0;
    background-size: cover;
}

@media (min-Width: 1200px) {
    .site-header {
        height: 35rem;
    }
}

.site-header.inicio {
    background-position: center center;
    height: 50vh;
    min-height: 50rem;
}

@media (min-Width: 1200px) {
    .site-header.inicio {
        height: 100vh;
        background-attachment: fixed;
    }
}

.contenido-header {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contenido-header p {
    color: white;
    padding-bottom: 1rem;
    font-family: 'Parisienne', cursive;
}

@media (min-Width: 1200px) {
    .contenido-header p {
        font-size: 5rem;
        padding-bottom: 3rem;
    }
}

.barra {
    margin-top: 2rem;
}

@media (min-Width: 1200px) {
    .barra {
        margin-top: 6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.logo-size img {
    width: 33rem;
    margin: 0 auto;
}

@media (min-Width: 1200px) {
    .logo-size img {
        width: 36rem;
    }
}


/*Navegación*/

.navegacion a {
    color: #ffffff;
    text-decoration: none;
    font-size: 2.2rem;
    font-style: italic;
    font-family: 'Nunito', sans-serif;
    display: block;
}

.navegacion a:hover {
    color: burlywood;
}

@media (min-Width: 1200px) {
    .navegacion a {
        margin-right: 1rem;
        display: inline-block;
    }
    .navegacion a:last-of-type {
        margin-right: 0;
    }
}


/*Quienes Somos*/

.nosotros-content {
    max-height: 100%;
}

.nosotros-content h4 {
    text-align: center;
}

.nosotros-content p,
.nosotros-content h3,
.nosotros-content h4 {
    margin: 0px;
}

@media (min-Width: 1200px) {
    .nosotros-content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .nosotros-content h4 {
        text-align: left;
    }
}

.logo-nosotros {
    width: 100%;
    overflow: hidden;
    margin: 1.5rem auto 0rem;
}


/*Talleres**/

.contenedor-taller {
    display: flex;
    flex-direction: column;
}

.contenido-taller {
    padding: 2.5rem;
    text-shadow: 1px 1px 2px #e1e1e1;
}

@media (min-Width: 1200px) {
    .contenido-taller {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .contenido-taller.inverse {
        flex-direction: row-reverse;
    }
}

.border-data {
    padding: 2rem;
    border-radius: 10px;
}

.border-data h3 {
    font-size: 2.5rem;
    line-height: 3.5rem;
}

@media (min-Width: 1200px) {
    .border-data h3 {
        font-size: 3rem;
    }
}


/*Promociones*/

.seccion-promocion {
    height: 100%;
}

.seccion-promocion h3 {
    margin-bottom: 2rem;
    color: #ffffff;
    text-align: center;
}

@media (min-Width: 1200px) {
    .contenedor-promocion {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
}

.contenido-promocion {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.contenido-promocion p {
    text-align: justify;
    text-align-last: auto;
}

.entrada-promocion {
    padding: 2rem;
}

.entrada-promocion h4 {
    line-height: 4.5rem;
}

.entrada-promocion h4,
.entrada-promocion p {
    margin: 0 0 1.5rem;
}


/**Gallerie**/

.grid-gallerie {
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 5rem;
}

.grid-gallerie div {
    margin: 1rem auto;
}

@media (min-Width: 1200px) {
    .grid-gallerie {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

.grid-gallerie img {
    display: block;
    object-fit: cover;
}

.item-1 {
    grid-area: 1 / 1 / 3 / 2;
    /*RowStart-ColumnStart-RowEnd-ColumnEnd*/
}

.item-2 {
    grid-area: 1 / 2 / span 1 / span 1;
    /*RowStar-ColumnStart*/
}

.item-3 {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
}

.item-4 {
    grid-column: 2 / span 2;
    grid-row: 2 / span 1;
}

.item-5 {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
}


/*Footer*/

footer {
    width: 100%;
    color: #ffffff;
    background-color: cornflowerblue;
}

.main-Footer {
    height: 105rem;
}

@media (min-Width: 1200px) {
    .main-Footer.index {
        height: 78rem;
    }
    .main-Footer {
        height: 70rem;
    }
}

.footer-body {
    padding: 50px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-Width: 1200px) {
    .footer-body {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.footer-body ul {
    padding: 0;
    list-style-position: inside;
}

.row {
    margin-top: 2rem;
    display: flex;
}

.row img,
.footer-foot img {
    width: 3.6rem;
    height: 3.6rem;
}

.row label {
    margin-top: 3px;
    margin-left: 20px;
}

.footer-foot {
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-foot h5 {
    margin: 0;
}

.contenido-footer {
    height: 100%;
    max-height: 70rem;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.maxWidth-700 {
    max-width: 300px;
}

@media (min-Width: 1200px) {
    .maxWidth-700 {
        max-width: 700px;
    }
}


/*INTERNAS**/


/*Layout de Promociones*/

.grid-Container {
    gap: 2rem;
    display: grid;
    justify-content: space-between;
    grid-template-areas: 'resume' 'foto1' 'indicaciones' 'foto2' 'contraindicaciones' 'foto3' 'beneficios' 'botonRegresar''botonPromociones';
}

.grid-Container img {
    border-radius: 15px;
}

.grid-Container ul {
    padding-left: 2rem;
}

.grid-Container li {
    text-align: justify;
    text-align-last: auto;
}

@media (min-Width: 1200px) {
    .grid-Container {
        grid-template-areas: 'foto1 resume resume' 'foto2 indicaciones beneficios' 'foto3 contraindicaciones beneficios' 'botonRegresar botonRegresar botonPromociones ';
    }
}

.grid-Container h1 {
    font-size: 5rem;
}

.grid-Container h2 {
    margin-top: 0rem;
    line-height: 4rem;
}

.foto1 {
    grid-area: foto1;
}

.foto2 {
    grid-area: foto2;
}

.foto3 {
    grid-area: foto3;
}

.resumen {
    grid-area: resume;
}

.indicaciones {
    grid-area: indicaciones;
}

.contraindicaciones {
    grid-area: contraindicaciones;
}

.beneficios {
    grid-area: beneficios;
}

.botonRegresar {
    grid-area: botonRegresar;
}

.botonPromociones {
    grid-area: botonPromociones;
}

.maxWidth-900 {
    max-width: 950px;
    margin: 0 auto;
}


/*Layout de Talleres*/

.grid-LayoutTaller {
    gap: 2rem;
    display: grid;
    justify-content: space-around;
}

.grid-LayoutTaller h2 {
    margin-top: 0rem;
    line-height: 4rem;
}

@media (min-Width: 1200px) {
    .grid-LayoutTaller {
        grid-template-columns: 65% 30%;
        grid-row: repeat(5, 1fr);
    }
    .imagenGrid {
        grid-area: 1 / 1 / 2 / 2;
    }
    .detalles {
        grid-area: 1 / 2 / span 2 / span 1;
    }
    .descripcion {
        grid-area: 2 / 1 / span 1 / span 1;
    }
    .temario {
        grid-area: 3 / 1 / span 1 / span 1;
    }
    .requisitos {
        grid-area: 3 / 2 / span 1 / span 1;
    }
    .botonTalleres {
        grid-area: 4 / 1 / span 1 / span 1;
    }
}

.details-divMargin {
    margin-bottom: 5rem;
}

.details-divMargin:last-of-type {
    margin-bottom: 0;
}