*{
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Lora', serif;
    font-weight: 500;
}

:root{
  --gold-1:#7a5b00;   /* sombra */
  --gold-2:#b58b00;   /* medio oscuro */
  --gold-3:#d4af37;   /* dorado clásico */
  --gold-4:#f6d776;   /* luz */
  --gold-5:#fff2b0;   /* brillo */

  --clasico:linear-gradient(135deg,
      var(--gold-1) 0%,
      var(--gold-2) 20%,
      var(--gold-3) 45%,
      var(--gold-4) 60%,
      var(--gold-3) 75%,
      var(--gold-2) 88%,
      var(--gold-1) 100%);

    --metalico:
    linear-gradient(90deg,
      #3e2e00 0%,
      var(--gold-2) 12%,
      var(--gold-4) 28%,
      var(--gold-3) 42%,
      #a57c00 52%,
      var(--gold-5) 60%,
      var(--gold-3) 72%,
      var(--gold-2) 86%,
      #3e2e00 100%);

      --radial:
      linear-gradient(135deg,
    #b58b00 0%,   /* dorado oscuro cálido */
    #d4af37 25%,  /* dorado clásico */
    #f6d776 50%,  /* amarillo dorado brillante */
    #fff2b0 75%,  /* casi blanco dorado */
    #d4af37 100%  /* regreso al dorado medio */);
}

body {
    background-color: black;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 80px;
    width: 100%;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.689);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border-bottom-left-radius: 5% 50%;
    border-bottom-right-radius: 5% 50%;
}

.logohead {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.logohead img {
    height: 100%;
}

header ul {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

header ul li a {
    background: var(--radial);
    background-size: 150%; 
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 0.98vw;
    transition: background-position 0.4s ease-in-out;
    text-decoration: none;
}

header ul li a:hover {
    background-position: 300% 0; /* mueve el degradado al hacer hover */
}

header span {
    position: absolute;
    width:90%;
    background:var(--clasico);
    height: 3px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
}

.oculto {
    display: none;
}

.sol {
    color: var(--gold-3);
    font-size: 1.5vw;
}

.luna {
    display: none;
    font-size: 1.5vw;
}

.portada {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    height: 100vh;
    background: url(img/portada3.webp);
    background-size: cover;
}

.portada h1 {
    font-family: "imperial script", cursive;
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    font-size: 6vw;
    z-index: 3;
    text-align: center;
    width: 90%;
    margin: auto;
    font-weight: 600;
}

.capa1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.850);
}

.carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    overflow: hidden;
    margin: 100px auto;
}

.contcarr {
    display: flex;
    width: 100%;
    height: 100%;
    animation: carrpc 15s infinite ease;
}

.contimg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(100% / 3);
    border: #7a5b00 0px solid;
}

.contimg img {
    width: 90%;
    margin: 5%;
    box-shadow: 0 0 15px rgba(255, 217, 0, 0.699);
    
}

@keyframes carrpc {
    0% {
        transform: translateX(0%)
    }

    12.5% {
        transform: translateX(0%)
    }

    25% {
        transform: translateX(-100%)
    }

    37.5% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(-200%)
    }

    62.5% {
        transform: translateX(-200%)
    }

    75% {
        transform: translateX(-300%)
    }

    87.5% {
        transform: translateX(-300%)
    }

    100% {
        transform: translateX(-0%)
    }
}

.sobre {
    width: 90%;
    margin: auto;
    margin-bottom: 100px;
}

.sobre h2 {
    font-size: 4vw;
    background: var(--metalico);
    background-clip: text;
    color: transparent;
}

.sobre p {
    font-size: 1vw;
    background: var(--clasico);
    background-clip: text;
    color: transparent;
}

.contimgs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 90%;
    margin: 100px auto;
}

.contimgs .imgcost {
    width: 80%;
    margin: 0 auto;
}

.contimgs .imgcentro {
    width: 86%;
    margin: 0 auto;
}

.historia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    padding: 5%;
    margin: 100px auto;
    gap: 2vw 6vw;
    background: url(img/fondo.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    grid-template-areas: 
    "texto1 imagen1"
    "imagen2 texto2"
    "texto3 imagen3"
    "imagen4 texto4";
}

.capa2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.910);
}

.hissecc {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 2;
}

.texto1  { grid-area: texto1; }
.imagen1 { grid-area: imagen1; }
.imagen2 { grid-area: imagen2; }
.texto2  { grid-area: texto2; }
.texto3  { grid-area: texto3; }
.imagen3 { grid-area: imagen3; }
.imagen4 { grid-area: imagen4; }
.texto4  { grid-area: texto4; }



.hissecc img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 5px white inset;
}

.hissecc h3 {
    font-size: 1.9vw;
    background: var(--metalico);
    background-clip: text;
    color: transparent;
}

.hissecc p {
    font-size: 1.1vw;
    padding: 0 40px;
    background: var(--clasico);
    background-clip: text;
    color: transparent;
}

.hissecc ul {
    font-size: 1.1vw;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.hissecc ul li strong {
    background: var(--metalico);
    background-clip: text;
    color: transparent;
}

.hissecc ul li {
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 3fr;
}

.eventos {
    box-shadow: 0 0 15px rgba(255, 217, 0, 0.699);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 80%;
    margin: 100px auto;
}

.txteventos {
    text-align: end;
    height: 90%;
    margin: auto;
}

.txteventos h2 {
    width: 90%;
    margin-left: 10%;
    border-bottom: 2px solid rgb(110, 94, 0);
    font-size: 1.4vw;
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    padding-bottom: 15px;
}

.txteventos p {
    font-size: 1vw;
    width: 95%;
    margin-left: 5%;
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    padding-top: 15px;
}

.carruseleventos {
    height: 90%;
    width: 90%;
    margin: auto;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.deslizar {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    animation: carruselvertical 20s infinite linear;
}

@keyframes carruselvertical {
    0% {
        transform: translateY(0%)
    }

    6.25% {
        transform: translateY(0%)
    }

    12.5% {
        transform: translateY(-100%)
    }

    18.75% {
        transform: translateY(-100%)
    }

    25% {
        transform: translateY(-200%)
    }

    31.25% {
        transform: translateY(-200%)
    }

    37.5% {
        transform: translateY(-300%)
    }

    43.75% {
        transform: translateY(-300%)
    }

    50% {
        transform: translateY(-400%)
    }

    56.25%{
        transform: translateY(-400%)
    }

    62.5%{
        transform: translateY(-500%)
    }

    68.75%{
        transform: translateY(-500%)
    }

    75% {
        transform: translateY(-600%)
    }

    81.25% {
        transform: translateY(-600%)
    }

    87.5% {
        transform: translateY(-700%)
    }

    93.75% {
        transform: translateY(-700%)
    }

    100% {
        transform: translateY(0%)
    }
}

.deslizar img {
    width: 100%;
    height: 100%;
}

.ubicacion {
    margin: 100px 0;
}

.ubicacion h2 {
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    font-size: 1.9vw;
    text-align: center;
    margin: 50px 0;
    
}

.mapa {
    width: 50%;
    margin: 0 25%;
    aspect-ratio: 16/9;
}

footer {
    box-shadow: 0 0 15px rgba(255, 217, 0, 0.699);
    padding: 10vh 0;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.footertop {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0px 20%;
}

.footertop ion-icon {
    color: rgba(255, 217, 0, 0.9999);
    font-size: 2vw;
}

.footerbot {
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    font-size: 1.4vw;
    text-align: center;
}

.footerbot a {
    background: var(--metalico);
    background-clip: text;
    color: transparent;
    text-decoration: none;
    font-size: 1.4vw;
    background-size: 150%; 
    transition: background-position 0.2s;
}

.footerbot a:hover {
    background-position: 300% 0; /* mueve el degradado al hacer hover */
}



/* menu.html */

@keyframes mostrar {
    from {
        opacity: 0;
        scale: 70%;
        transform: rotate(50deg);
    }

    to {
        opacity: 1;
        scale: 100%;

    }
}

.menubody {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:linear-gradient(135deg, #755a00, black, black, #856600);
      position: relative;
}

.menubody div {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.menubody div img{
    view-timeline-name: --img;
    view-timeline-axis: block;

    animation-timeline: --img;
    animation-name: mostrar;

    animation-range:entry 5% cover 40%;
    animation-fill-mode: both;

    width: 80%;
    margin: 5vh auto;
}




@media (max-width:991px) {
    header {
        display: flex;
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .logohead img {
        height: 90px;
    }

    header ul {
        width: 90%;
    }

    header ul li a {
        font-size: 3.5vw;
    }

    .portada {
        height: 30vh;
        background-position: center;
        position: relative;
    }

    .contimg img {
        box-shadow: 0 0 4px rgba(255, 217, 0, 0.699);
    }

    .sobre h2 {
        font-size: 6vw;
    }

    .sobre p {
        font-size: 3vw;
    }

    .historia {
        grid-template-columns: 1fr;
        grid-template-areas: 
      "texto1"
      "imagen1"
      "texto2"
      "imagen2"
      "texto3"
      "imagen3"
      "texto4"
      "imagen4";
    }

    .hissecc h3 {
        font-size: 6.5vw;
    }

    .hissecc p {
        font-size: 3vw;
        padding: 0 0;
    }

    .hissecc ul {
        font-size: 2.7vw;
        
    }
    
    .eventos {
        width: 90%;
        grid-template-columns: 1fr;
    }

    .txteventos h2 {
        font-size: 5vw;
        margin: auto;
    }

    .txteventos p {
        font-size: 3.5vw;
        margin: auto;
        margin-bottom: 15px;
        width: 90%;
    }

    .ubicacion h2 {
        font-size: 6vw;
    }

    .mapa {
        width: 90%;
        margin: 5%;
    }

    .footertop {
        justify-content: space-between;
        padding: 0 15%;
    }

    .footertop ion-icon {
        font-size: 8vw;
    }

    .footerbot {
        font-size: 4vw;
    }

    .footerbot a {
        font-size: 4vw;
    }



    .menubody div {
        width: 90%;
        margin-bottom: 10vh;
    }

    .menubody div img {
        margin: 2vh auto;
    }
}