@charset "utf-8";

@font-face {
  font-family: "Oswald";
  src: url("../fuentes/oswald/Oswald-ExtraLight-200.ttf") format("truetype");
  font-style: extraLight;
  font-weight: 200;
}

@font-face {
    font-family: "Oswald";
    src: url("../fuentes/oswald/Oswald-Light-300.ttf") format("truetype");
    font-style: Light;
    font-weight: 300;
}

@font-face {
    font-family: "Oswald";
    src: url("../fuentes/oswald/Oswald-Regular-400.ttf") format("truetype");
    font-style: Regular;
    font-weight: 400;
}

@font-face {
    font-family: "Oswald";
    src: url("../fuentes/oswald/Oswald-Medium-500.ttf") format("truetype");
    font-style: Medium;
    font-weight: 500;
}

@font-face {
    font-family: "Oswald";
    src: url("../fuentes/oswald/Oswald-SemiBold-600.ttf") format("truetype");
    font-style: semiBold;
    font-weight: 600;
}

@font-face {
    font-family: "Oswald";
    src: url("../fuentes/oswald/Oswald-Bold-700.ttf") format("truetype");
    font-style: Bold;
    font-weight: 700;
}

@font-face {
    font-family: "Roboto";
    src: url("../fuentes/robotoCondensed/RobotoCondensed-Regular-400.ttf") format("truetype");
    font-style: Regular;
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("../fuentes/robotoCondensed/RobotoCondensed-Bold-700.ttf") format("truetype");
    font-style: Bold;
    font-weight: 700;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fuentes/alegreya/Alegreya-Medium.ttf") format("truetype");
    font-style: Medium;
    font-weight: 500;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fuentes/alegreya/Alegreya-MediumItalic.ttf") format("truetype");
    font-style: mediumItalic;
    font-weight: 600;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fuentes/alegreya/Alegreya-ExtraBold.ttf") format("truetype");
    font-style: extraBold;
    font-weight: 700;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fuentes/alegreya/Alegreya-ExtraBoldItalic.ttf") format("truetype");
    font-style: extraBoldItalic;
    font-weight: 800;
}

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}
  
:root {
    --negro: #000000;
    --rojo: #CA4546;
    --gris: #767676;
    --dorado: #C7B199;
    --blanco: #FFFFFF;
}

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

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

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

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

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

img {    
    width: 100%;
    height: auto;
}
  
a {
    text-decoration: none;
}
  
ul {
    list-style: none;
}
  
.contenedora {  
    width: min(75rem, 100%);
    margin-inline: auto;
    padding: 1.5rem;
}

::-webkit-scrollbar {
    display: none;
}

/* TÍTULO EN PORTADA */

h1 {    
    position: absolute;
    left: 50vw;
    font-family: "Oswald";
    font-weight: 700;
    font-size: 3.2rem;
    letter-spacing: -.17rem; 
    line-height: 0;
    text-align: center;
    color: var(--blanco);
}

h1#titulo1 {       
    margin: 6.8rem 0 0 -8.35rem;
    color: var(--dorado);
}

h1#titulo2 {       
    margin: 9.7rem 0 0 -2.4rem;
    color: var(--dorado);
}

h1#titulo3 {       
    margin: 12.55rem 0 0 -.675rem;
}

h1#titulo4 {       
    margin: 15.45rem 0 0 -7.2rem;
}

/* INFO ACCESORIA */

h3 {
    font-family: "Oswald";
    font-weight: 500;
    font-size: .8rem;
}

/* MENÚ 1 */

.menu-btn {   
    margin: -.5rem -.3rem 0 0; 
    background: none;
    padding: .75rem;
    width: 3rem;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out;
    position: fixed;
    top: 1em;
    right: 1.1rem;
    z-index: 9500;
}
  
.menu-btn .btn-linea {
    width: 25px;
    height: 3.5px;
    margin: 4px 0 4px 0;
    background: var(--dorado);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}
  
.menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
}

.menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(5px, 7px);
}

.menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
}

.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

#menu1-item1 {
    padding-top: 4rem;
}

nav ul {
  display: grid;
  place-items: center;
  place-content: center;
  position: fixed;
  inset: 0;
  z-index: 8000;
  translate: 0 -100%;
  transition: all .7s ease;
}

.menuVisible ul {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--negro);
  transition: all .4s ease;
  translate: 0;
  opacity: 1;
  z-index: 9000;
}

nav ul li a {
  color: var(--blanco);
  font-size: 1.5rem;
  padding-bottom: .75rem;
}

nav ul li a:hover {
    transition: color .3s;
    color: var(--rojo)
}

#tituloMenu {    
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.275rem;
    letter-spacing: -.03rem;
    position: absolute;
    top: .45rem;
    left: .9rem;
    padding-bottom: .5rem;
}

#tituloMenu::before {
    content: "";
    position: absolute;
    left: -.9rem;
    bottom: -.2rem;
    height: 1px;
    width: 100vw;
    border-bottom: var(--blanco) 2px solid;
}

#menu1-item1::before { 
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    left: -5.5rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item2::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    right: -6rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item3::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    left: -6.3rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item4::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    right: -5.1rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item5::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    left: -6.3rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item6::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    right: -5.2rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}
/*
#menu1-item7::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    left: -5.1rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item8::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    right: -6.1rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}

#menu1-item9::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50vw;
    left: -6.2rem;
    margin-top: 1rem;
    border-bottom: var(--dorado) 2px solid;
}
*/
#menu1-sep1 {
    stroke: var(--dorado);
    margin-block: .4rem .8rem;
}

#menu1-sep2 {
    stroke: var(--dorado);
    margin-block: .25rem 1rem;
}

#menu1-sep3 {
    stroke: var(--dorado);
    margin-block-start: .4rem;
}

/* MENÚ 1 CON TÍTULO AL SCROLLEAR */

header div div#logo.menuScroll {    
    position: fixed;
    z-index: 9000;    
    top: 0;
    left: 0;
    width: 100vw;
    height: 3.7rem;
    padding: 0;
    margin: 0;
    backdrop-filter: blur(20px) brightness(35%);
    border-bottom: var(--blanco) 2px solid;
    transition: all 0.25s ease;
}

div#logo.menuScroll h3.infoAdic {
    display: none;
}

div#logo.menuScroll h1#titulo1, 
div#logo.menuScroll h1#titulo2,
div#logo.menuScroll h1#titulo3,
div#logo.menuScroll h1#titulo4 {
    position: absolute;
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.275rem;
    letter-spacing: -.03rem;
    padding: 0;
    transition: all .4s ease-in-out;
}

div#logo.menuScroll h1#titulo1 {     
    margin: 0;
    top: .45rem;
    left: .9rem;
    color: var(--dorado);
}

div#logo.menuScroll h1#titulo2 {  
    margin: 0;
    top: .45rem;
    left: 5.55rem;
    color: var(--dorado);
}

div#logo.menuScroll h1#titulo3 {
    margin: 0;
    top: 1.7rem;
    left: .9rem;
}

div#logo.menuScroll h1#titulo4 {  
    margin: 0;
    top: 1.7rem;
    left: 4.975rem;
}

/* MENÚ 2 */

.menu2-btn {    
    background: var(--dorado);
    border-radius: .2rem .2rem 0 0;
    padding: .5rem;
    cursor: pointer;
    transition: all 0.3s ease-out;
    position: fixed;
    bottom: .45rem;
    left: 50%;
    margin-left: -1.405rem;
    display: flex;
    gap: .25rem;
    z-index: 7500;
}

.bandaMenu2 {
    position: fixed;
    bottom: 0;
    left: 0;
    background: var(--dorado);
    width: 100vw;
    height: .5rem;
    z-index: 7500;
}

.menu2-btn .btn-punto {
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--negro);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}

nav2.menu2Visible {
    position: fixed;
    inset: 0;
    z-index: 8000;
    backdrop-filter: blur(.75rem) brightness(90%);
}

nav2 ul {    
  display: grid;
  grid-template-columns: repeat(3, 4.5rem);
  grid-template-rows: repeat(2, 4.5rem);
  position: fixed;
  width: 100vw;
  justify-content: center;
  bottom: 1.5rem;
  z-index: 7900;
  transition: all .3s ease;  
  gap: 1rem;  
  translate: 0 110%;
}

.menu2Visible ul {
  translate: 0;  
}

nav2.menu2Visible > button {
    display: none;
}

nav2 ul li {
  display: flex;
  place-items: center;
  justify-content: center;
  background: var(--dorado) ;
  width: 4.5rem;
  aspect-ratio: 1;
  color: var(--blanco);
}

nav2 ul li a {
    display: flex;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
}

#menu2-item5 {
    background: none;
    border: var(--dorado) 2px solid;
}

nav2 ul li a img {
    width: 100%;
    aspect-ratio: 1;
}

#menu2-item6 a img {
    padding: .85rem;
}

#menu2-item2 a img, #menu2-item3 a img {
    padding: .6rem;    
}

#menu2-item4 a img {
    padding: .85rem .95rem .85rem .75rem;
}

.x {
    cursor: pointer;
    padding: .6rem;
}

.com-btn {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--dorado);
    cursor: pointer;
}

.com-btn img {
    padding: .95rem .85rem .75rem .85rem;
}

/* COMENTARIOS */

#menu2-item1 ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4.5rem 1.5rem 1rem 1.5rem;
  position: fixed;
  bottom: -1.5rem;
  left: 0;
  height: 100vh; 
  translate: -100%;
  z-index: 9999;
  transition: all .5s ease;
}

#menu2-item1 ul.comentarios {
  background-color: var(--negro);
  translate: 0; 
  position: fixed;
  z-index: 9999;
}

#menu2-item1 ul.comentarios li {
    display: block;
    background: none;
    width: 100%;
    aspect-ratio: unset;
    color: var(--blanco);
}

li.com-titulo h3 {
    color: var(--dorado);
    font-size: 1.175rem;
    line-height: 0;
    letter-spacing: -.02rem;
    font-weight: 400;
    width: 7.5rem;
    padding-bottom: 1.8rem;
    border-bottom: var(--dorado) 1.5px solid;
}

/* FORMULARIO */

#com-form {
    font-family: "Roboto";
    font-size: 1rem;     
    color: var(--blanco);                                                                                                                                                                                                              
}

#com-form #nombre {
    font-family: "Roboto";
    font-size: 1rem;    
    font-weight: 700;
    line-height: 0;
    letter-spacing: -.02rem;   
    color: var(--blanco);  
    padding: .2rem .5rem;
    background: none;
    border: var(--blanco) solid 1.5px;
    border-radius: .2rem;
    width: 45%;
}

#com-form #label {
    display: inline-block;
    font-family: "Roboto";
    font-size: 1rem;
    color: var(--rojo);
    font-weight: 100;
}

#com-form #comentario { 
    resize: none; 
    font-family: "Roboto";
    font-size: 1rem;    
    letter-spacing: -.02rem;  
    color: var(--blanco);  
    margin-top: .7rem; 
    padding: .2rem .5rem; 
    background: none;
    border: var(--blanco) solid 1.5px;
    border-radius: .2rem;
    width: 100%;
    height: 4rem;
}

#com-form button {
    font-family: "Roboto";
    font-size: .9rem;
    line-height: 0;
    font-weight: 700;   
    letter-spacing: -.02rem;  
    color: var(--negro);  
    background: var(--dorado) ;  
    margin-top: .45rem; 
    border-radius: .2rem;
    padding: .2rem .3rem; 
    height: 1.5rem;
}

nav2.menu2Visible ul.menu2 #menu2-item1 ul {
display: flex;
flex-direction: column;
align-items: center;
}

ul2 {
    overflow-y: scroll;
}

ul2 li {
    width: 100%;
    padding-block: .875rem;
    border-top: var(--dorado) 1.5px solid;
}

ul2 li h3 {
    line-height: 1.75rem;
    font-family: "Roboto";
    font-size: 1rem;
}

.flex {
    display: flex;
    justify-content: space-between;
}

.comp-r1 {
    font-weight: 700;
}

.comp-r2 {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--gris);
}

.comp-r3 {
    font-weight: 400;
    line-height: 1.25rem;
}

#menu2-item1 a {
    cursor: pointer;
    width: 3rem;
    aspect-ratio: 1;
    padding: .85rem;
    background: none;
    border: var(--dorado) 1.5px solid;
    margin-inline: auto;
}

/* ESTRUCTURA DEL SITIO */

section:not(.sticky-parent) {
    min-height: calc(100vh - 4rem);
    width: 100%;



    display: grid;
    place-content: center;
    place-items: center;
}

.sticky-parent{
    height: 750vh;
}

.sticky {
    position: sticky;
    top: 0px;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

.dim{
    display: block;
    min-width: 100vw;
    height: 100vh;

    display: grid;
    place-content:center;
    place-items: center;

    line-height: 1.6rem;
}

.contenido{
    max-height: 70vh;
    overflow-y: auto;
}

.dim p{
    margin-block: 1rem;
}

.horizontal {
    display: flex;
}



































/* CUERPO */

header {
    position: absolute;
    z-index: 1;
}

body {
    color: var(--blanco);
    background-color: var(--negro);
}

/* RELATO 1 */

#secH1 #img1 {
    position: relative;
    z-index: -13;
    height: 25rem;
}

.menu li a, div#subtitulo {
    display: flex;
    gap: .75rem;
}

h2 {
    font-family: "Oswald";    
    font-weight: 200;
    line-height: 2.3rem;
}

h2.numSubtitulo {    
    font-size: 2.5rem;
    color: var(--dorado);
}

h2.subtitulo {
    font-size: 1.2rem;    
    line-height: 1.2rem;
}

.alignIzq {
    text-align: left;
}

.alignDer {
    text-align: right;
}

#h1Ini {    
    position: relative;
    background-image: url("../imagenes/iniFondo1.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h1Fin {    
    position: relative;
    background-image: url("../imagenes/iniFondo1.png");
    width: 100%;
    aspect-ratio: 950/184;
    rotate: 180deg;
    overflow: visible;
    background-size: contain;
}

#h1 {
    position: relative;
    background-image: url("../imagenes/Fondo1.png");
    background-size: contain;
}

article#h1 {    
    display: block;
}

#subtitulo .numSubtitulo{
    font-size: 3rem;
    line-height: 2.5rem;
    color: var(--dorado);
}

#subtitulo .subtitulo{
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35rem;
    color: var(--rojo);
}

.parrafo {
    margin-top: 1.5rem;
    font-family: "Roboto";
    font-size: 1rem;
    line-height: 1.5em ;
    letter-spacing: 0.2px;
}


div.destacado {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-left: -2rem;
}

div .sepDestacado1 {
    width: 2rem;
    margin-top: 2rem;
    margin-left: 0;
}

#h1 div #destacado1 {
    margin-top: 1.8rem;
    font-family: "Roboto";
    font-weight: 700;
    color: var(--rojo);
    line-height: 1.5rem;
    padding-inline: 0 2rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
}

.indicNavMob {
    display: flex;
    justify-content: center;   
    padding-block: 1.6rem .9rem;
}

.indicNavMob img {
    width: 6rem;
}

/* RELATO 2 */

#secH2 #img2 {
    position: relative;
    z-index: -12;
    margin-top: -7rem;
    height: 21rem;
}

#h2Ini {    
    position: relative;
    background-image: url("../imagenes/iniFondo2.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h2 {
    position: relative;
    background-image: url("../imagenes/Fondo2.png");
    background-size: contain;
}

#h2Fin {    
    position: relative;
    background-image: url("../imagenes/iniFondo2.png");
    width: 100%;
    aspect-ratio: 950/184;
    rotate: 180deg;
    overflow: visible;
    background-size: contain;
}

#h2 div p.destacado2 {
    margin-top: 1.8rem;
    font-family: "Alegreya";
    font-weight: 500;
    font-style: italic;
    line-height: 1.3rem;
    padding-inline: 0 5rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

#h2 div.destacado2 {
    padding-inline: 1.5rem 5rem;
    border-left: var(--dorado) 1.5px solid;
}

#h2 div.destacado2 p {
    font-weight: 600;
    font-style: normal;
}

/* RELATO 3 */

#secH3 #img3 {
    position: relative;
    z-index: -11;
    margin-top: -9rem;
    height: 23rem;
}

#h3Ini {    
    position: relative;
    background-image: url("../imagenes/iniFondo3.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h3 {
    position: relative;
    background-image: url("../imagenes/Fondo3.png");
    background-size: contain;
    color: var(--negro);
    font-weight: 600;
}

#h3Fin {    
    position: relative;
    background-image: url("../imagenes/iniFondo3.png");
    width: 100%;
    aspect-ratio: 950/184;
    rotate: 180deg;
    overflow: visible;
    background-size: contain;
}

#subtitulo > h2.numSubtitulo.negro {
    color: var(--negro);
}

#h3 div.destacado3 div {
    height: min(10rem, 14rem);
    aspect-ratio: 944/1276;
}

#h3 div.destacado3 {
    display: flex;
    gap: 1rem;
    margin-top: 1.8rem;
    font-family: "Alegreya";
    line-height: 1.1rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

/* RELATO 4 */

#img4 {
    position: relative;
    z-index: -10;
    margin-top: -4rem;
    height: 23rem;
}

#h4Ini {   
    position: relative;
    z-index: 1;
    background-image: url("../imagenes/iniFondo1.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h4 {
    position: relative;
    background-image: url("../imagenes/Fondo1.png");
    background-size: contain;
    color: var(--BLANCO);
    font-weight: 400;
}

#h4 #subtitulo {
    padding-block: 1rem .6rem;
}

#h4 > div > div.indicNavMob {
    padding-bottom: 7rem;    
}

#h4 > div > div.destacado > img {
    margin-top: .75rem;
}

#h4 div p.destacado4 {
    margin-top: .5rem;
    font-family: "Alegreya";
    font-weight: 500;
    font-style: italic;
    line-height: 1.3rem;
    padding-inline: 0 5rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

/* RELATO 5 */

#img5 {
    position: relative;
    z-index: -9;
    margin-top: -1.9rem;
    height: 23rem;
}

#h5Ini {   
    position: relative;
    z-index: 1;
    background-image: url("../imagenes/iniFondo2.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h5 {
    position: relative;
    background-image: url("../imagenes/Fondo2.png");
    background-size: contain;
    color: var(--BLANCO);
    font-weight: 400;
}

#h5 div #subtitulo {
    font-weight: 500;
    padding-block-end: .5rem;
}

#h5 div #subtitulo h2.subtitulo {
    font-weight: 400;
}

#h5Fin {    
    position: relative;
    background-image: url("../imagenes/iniFondo2.png");
    width: 100%;
    aspect-ratio: 950/184;
    rotate: 180deg;
    overflow: visible;
    background-size: contain;
}

#h5 div.destacado2 {
    padding-inline: 1.5rem 5rem;
    border-left: var(--dorado) 1.5px solid;
}

#h5 > div > p:nth-child(3) {
    padding-bottom: .5rem;
}

#h5 div.destacado2 p {
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: 600;
    font-style: normal;
    width: 70%;
}

#h5 > div > div.indicNavMob {
    padding-bottom: 7rem;    
}

/* SLIDER */

.galeria {
    padding: 0 1em 2em 1em;
    width: min(75em, 100%);
    margin-inline: auto;
}

.slider {
    width: 100%;
    height: max(400px, 50vh);
    position: relative;
    overflow: hidden;
}

.slide {
    width: 100%;
    height: auto;
    position: absolute;
    transition: all 0.5s;
}

.slide img {
    border-radius: 0.5em;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.slide a {
    background-color: hsl(209 100% 35% / 0.5);
    color: hsl(0 0% 90% / 0.85);
    padding: .25em 1em;
    border-radius: 2em;
    text-decoration: none;
    justify-self: end;
    margin-block-start: 1em;
}

.slide a::after {
    content: " →";
}

.slide a:hover {
    background-color: hsl(209 100% 35% / 0.95);
    box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
    color: hsl(0 0% 90%);
}

.btnbtn-prox {
    position: absolute;
    margin-top: 13em;
    width: 25px;
    margin-left: 2em;
}

.btnbtn-prev {
    position: absolute;
    margin-top: 13em;
    width: 25px;
}

/* RELATO 6 */

#img6 {
    position: relative;
    z-index: -8;
    margin-top: -10rem;
    height: 31rem;
}

#h6Ini {   
    position: relative;
    z-index: 1;
    background-image: url("../imagenes/iniFondo3.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h6 {
    position: relative;
    background-image: url("../imagenes/Fondo3.png");
    background-size: contain;
    font-weight: 400;
    color: var(--negro);
    font-weight: 600;
}

#h6 div #subtitulo {
    padding-block-end: .5rem;
}

#h6Fin {    
    background-image: url("../imagenes/iniFondo3.png");
    width: 100%;
    rotate: 180deg;
    aspect-ratio: 950/184;
    overflow: visible;
    background-size: contain;
}

#h6 div div.destacado p.destacado2 {
    margin-top: 1rem;
    font-family: "Alegreya";
    font-weight: 600;
    font-style: italic;
    line-height: 1.3rem;
    padding-inline: 0 7rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

#h6 > div > div.destacado > img {
    margin-top: 1.25rem;
}

iframe{
    width: 100%;
    aspect-ratio: 4/3;
    padding: .5rem;
}

#h6 div ul {
    font-size: 1rem;
    line-height: 1.2rem;
    font-family: "Roboto";
    font-weight: 400;
}

#h6 div ul li {
    margin-block: .6rem;
}

#h6 div ul li span {
    font-weight: 600;
}

#h6 > div > div.indicNavMob {
    padding-bottom: 7rem;    
}

/* HISTORIA */

#imgH {
    position: relative;
    z-index: -8;
    height: 14rem;
}

#imgH img {
    margin-top: -8rem;
}

#hIni {   
    background-image: url("../imagenes/iniFondo1.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#h div p.destacado4 {
    margin-top: 1.8rem;
    font-family: "Alegreya";
    font-weight: 500;
    font-style: italic;
    line-height: 1.3rem;
    padding-inline: 0 5rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

#h {
    position: relative;
    background-image: url("../imagenes/Fondo1.png");
    background-size: contain;
    color: var(--BLANCO);
    font-weight: 400;
}

#hFin {    
    background-image: url("../imagenes/iniFondo1.png");
    width: 100%;
    rotate: 180deg;
    aspect-ratio: 950/184;
    overflow: visible;
    background-size: contain;
}

#h h2.subtitulo {
    font-weight: 400;
    padding-bottom: 1.25rem;
    border-bottom: var(--rojo) 1.5px solid;
    width: 50%;
}

/* ESTRUCTURA */

#imgE {
    position: relative;
    z-index: -8;
    height: 10rem;
}

#imgE img {
    margin-top: -6rem;
}

#eIni {   
    background-image: url("../imagenes/iniFondo2.png");    
    width: 100%;
    aspect-ratio: 950/184;
    background-size: contain;
}

#e {
    position: relative;
    background-image: url("../imagenes/Fondo2.png");
    background-size: contain;
    color: var(--BLANCO);
    font-weight: 400;
}

#eFin {    
    background-image: url("../imagenes/iniFondo2.png");
    width: 100%;
    rotate: 180deg;
    aspect-ratio: 950/184;
    overflow: visible;
    background-size: contain;
}

#e h2.subtitulo {
    font-weight: 400;
    padding-bottom: 1.25rem;
    border-bottom: var(--dorado) 1.5px solid;
    width: 50%;
}

#menu2-item4 > a > img {
    cursor: pointer;
}

#e > div > p {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: 700;
    font-family: "Alegreya";
    font-style: italic;
    width: 70%;
}

#e div.destacado2 {
    padding-inline: 1.5rem 5rem;
    border-left: var(--rojo) 2px solid;
}


/* FUENTES */

#fuentes {
  background-image: url(../imagenes/Img12.png) ;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -12rem;
}

#fuentes div.contenedora {
    display: grid;
    place-items: center;
}


#fuentes div.contenedora h2,
#fuentes div.contenedora div {    
    padding-block: .25rem;    
}

#fuentes div p {     
    padding-block: 8rem .5rem;
    padding-inline: 3rem;
    line-height: 1.2rem;
    color: var(--dorado);
}

#fuentes div #subtitulo > h2.subtitulo {
    font-size: 1.2rem;
    font-weight: 400;
}

#fuentes div  #subtitulo > h2.numSubtitulo {
    font-weight: 100;
    color: var(--dorado);
}

/* MEDIA QUERIES */

@media screen and (min-width: 570px) {

}

@media screen and (min-width: 900px) {


}














/* HASTA ACÁ */

/*TODO ESTO QUE SIGUE ES PARA PONER LA IMAGEN DISEÑADA POR DEBAJO DEL
CÓDIGO Y ASÍ TENER MUCHA MAYOR PRECISIÓN AL UBICAR TODOS LOS ELEMENTOS,
UNA VEZ TODOS LOS ELEMENTOS ESTÉN BIEN UBICADOS, TODO ESTO QUE SIGUE
SE PUEDE BORRAR

body {
    position: relative;
    background-color: var(--blanco);
    color: var(--blanco)
}*
#menu2-item1 ul.comentarios::after {
    content: '';
    position: absolute;
    top: -.35rem;
    right: 0;
    bottom: 0;
    left: -.3rem;
    background-image: url(../imagenes/Prueba/Comentarios.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .3;
}/*
*/