:root {
  --fuente-base: 'Open Sans', sans-serif;
  --fuente-base-size: 3.75vw;
  --fuente-titulos: 'Raleway', sans-serif;
  --fuente-titulos-size: 4.5vw;
  --fuente-seccion-size: 5vw;
  --fuente-boton-size: 3.75vw;
  --fuente-footer-size: 2.75vw;
  --color-blanco: #fffaf0;
  --color-marron: #a4755c;
  --color-naranja: #f5c187;
  --color-verde: #3b7364;
  --color-azul: #405a71;
  --color-transparente: #00000000;
  --color-transparente-gris: #00000033;
  --color-er: #ff0000;
  --color-ok: #009900;
}

* {
    box-sizing: border-box;
    line-height: 6vw;
}

body {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: var(--fuente-base-size);
    line-height: 6vw;
}

body.off {
    overflow: hidden;
}

nav {
    width: 100vw;
    height: 10vw;
    background-color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fuente-titulos);
    font-size: var(--fuente-titulos-size);
    color: var(--color-marron);
    font-weight: bold;
    padding: 0 2.5vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

nav img {
    width: 40vw;
    border-radius: 100%;
    margin: 0 1.25vw;
}

nav .intro {
    padding: 5vw 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fuente-boton-size);
    margin: 0 5vw 10vw;
    width: 90vw;
}

#mainMenu {
    width: 100vw;
    height: 100vh;
    position: absolute;
    right: -100vw;
    top: 0;
    background-color: var(--color-transparente);
    padding: 0 0 0 20vw;
    transition: right 0.3s ease;
    overflow: auto;
}

#mainMenu.on {
    right: 0;
}

#mainMenu .front {
    background-color: var(--color-blanco);
    min-height: 100vh;
    position: absolute;
    top: 0;
    width: 80vw;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 10vw 0 0;
    gap: 10vw;
    border-left: solid 1vw var(--color-naranja);
}

#mainMenu .front .nombre {
    font-size: var(--fuente-seccion-size);
}

#mainMenu .front ul {
    list-style-type: none;
    padding: 0;
}

#mainMenu .front li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 2.5vw 0;
}

#mainMenu .front li img {
    width: 10vw;
    height: 10vw;
    margin: 0 5vw 0;
}

a,
a:visited {
    text-decoration: none;
    color: inherit;
}

a.nochange {
    color: inherit !important;
}

button.navbar-toggler {
    color: var(--color-marron);
    border: 0;
    font-size: var(--fuente-boton-size);
}

footer {
    font-size: var(--fuente-footer-size);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 10vw;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: green;
    background-color: var(--color-blanco);
}

.modal {
    background-color: var(--color-transparente-gris);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal .content {
    margin: 10vw;
    background-color: white;
    width: 80vw;
    height: calc(100vh - 20vw);
}

.galeria {
    width: 100%;
    display: flex;
    justify-content: fspace-between;
    flex-wrap: wrap;
    gap: 4vw;
    padding: 4vw;
    flex-flow: column;
    height: 100%;
}

.galeria .activa {
    width: 100%;
    height: calc(100% - 32vw);
    overflow: hidden;
}

.galeria .activa img {
    width: 100%;
}

.galeria .slideshow {
    width: 100%;
    height: 27vw;
    overflow: auto;
    white-space: nowrap;
    padding: 8vw 0 1vw;
    border-top: solid 1vw var(--color-naranja);
}

.galeria .slideshow img.mini {
    width: 15vw;
    border: dashed 0.25vw var(--color-transparente-gris);
    object-fit: cover;
    height: 15vw;
    object-position: top;
    padding: 1vw;
    margin: 0 2vw 0 0;
}

.galeria .slideshow img.mini:last-child {
    padding-right: 0;
}

.ok,
.er {
    font-weight: bold;
    color: var(--color-ok);
    font-family: var(--fuente-titulos);
}

.er {
    color: var(--color-er);
}


/* NUEVAS */


.page {
    display: flex;
    flex-flow: column;
    gap: 5vw;
    padding: 0;
    margin: 15vw 0 22.5vw;
}

h1 {
    width: 100%;
    height: 25vw;
    border-top: solid 1vw var(--color-naranja);
    border-bottom: solid 1vw var(--color-naranja);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7.5vw;
    font-family: var(--fuente-titulos);
    font-size: var(--fuente-seccion-size);
    color: var(--color-marron);
    line-height: 7vw;
}

h1 img {
    width: 30vw;
    height: 30vw;
    margin-bottom: 2vw;
}

.row,
.col {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 2.5vw;
    gap: 5vw;
}

.col {
    flex-flow: column;
}

.row .row,
.row .col,
.col .row,
.col .col {
    padding: 0;
}

.row p {
    line-height: 7vw;
    margin: auto 0;
}

.rounded {
    width: 40vw;
    height: 60vw;
    object-fit: cover;
    border-radius: 5vw;
}

.small {
    width: 30vw;
    height: 40vw;
}

.circle {
    width: 40vw;
    height: 40vw;
    object-fit: cover;
    border-radius: 100%;
}

.circle-small {
    height: 25vw;
    width: 25vw;
}

.btn {
    color: var(--color-verde);
    background-color: var(--color-naranja);
    text-align: center;
    font-size: var(--fuente-boton-size);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
}

.btn-fijo {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 12.5vw;
}

.btn-inferior {
    bottom: 0;
}

.btn-mini {
    width: 15vw;
    height: 12.5vw;
    background-color: #fff;
    border-radius: 5vw;
    margin: 0;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 0.5vw var(--color-naranja);
}

.btn-maxi {
    width: 80vw;
    height: 12.5vw;
    border-radius: 10vw;
    margin: 0 auto 10vw;
    border: 0;
}

.titulo {
    font-family: var(--fuente-titulos);
    color: var(--color-verde) !important;
    font-weight: bold;
    font-size: var(--fuente-titulos-size);
}

span {
    display: block;
    line-height: inherit;
}

.botones {
    justify-content: flex-start;
    gap: 2.5vw;
}

.justify {
    text-align: justify;
}

.portada {
    height: 80vw;
    width: auto;
    object-fit: cover;
    margin: auto;
    border-radius: 10vw;
}

.moto,
.intro {
    font-style: italic;
    padding: 0 2.5vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fuente-boton-size);
}

.intro {
    font-style: normal;
}

.center {
    justify-content: center;
    text-align: center;
}

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    width: 100%;
    justify-content: start;
}

.etiqueta {
    border: solid 0.25vw var(--color-naranja);
    border-radius: 2.5vw;
    padding: 1vw 5vw;
    white-space: nowrap;
    flex: 1 1 0;
    text-align: center;
}

.start {
    justify-content: flex-start;;
    flex: 0;
}

p {
    margin: 0;
}

form {
    width: 100%;
}

form input,
form textarea {
    width: 100%;
    height: 12.5vw;
    padding: 0 5vw;
    margin: 0 0 5vw;
    border: 0;
    border-bottom: solid 0.5vw var(--color-naranja);
    font-family: var(--fuente-base);
    font-size: var(--fuente-base-size);
    line-height: 6vw;
}

form textarea {
    height: 50vw;
    padding: 5vw;
}

form input::placeholder,
form textarea::placeholder {
    font-family: var(--fuente-titulos);
    font-style: italic;
}

.info {
    width: 60vw;
}

p.texto span {
    text-indent: 5vw;
}

p.texto span:first-child {
    text-indent: 0;
}

p.texto:last-child {
    margin-bottom: 5vw;
    border-bottom: dashed 0.5vw var(--color-naranja);
    padding-bottom: 5vw;
}

.presentacion {
    color: var(--color-verde);
    text-align: center;
    border-bottom: dashed 0.5vw var(--color-naranja);
    padding-bottom: 5vw;
}

.news {
    overflow: hidden;
    height: calc(100% - 5vw);
    width: 100%;
}

.new {
    font-size: var(--fuente-base-size);
    font-weight: normal;
    font-family: var(--fuente-base);
    color: var(--color-azul);
    display: none;
}

.new:first-child {
    display: block;
}

.nogap {
    gap: 0;
}

.hidden {
    display: none;
}

.modal .content section {
    padding: 5vw;
    overflow: auto;
    width: 100%;
    height: 100%;
}

.modal .content.mensaje {
    height: auto! important;
    padding: 10vw !important;
    font-family: var(--fuente-base) !important;
    font-size: var(--fuente-base-size);
}