:root {
  --primary-color: rgb(255, 224, 50); /* Color primario de la página */
  --gold-h1: linear-gradient(
    /* Gradiente para el título principal (h1) */ 160deg,
    #9e7b28 0%,
    #ffe7a9 25%,
    #cc9b29 30%,
    #ffc637 50%,
    #ffe7a9 70%,
    #e6ad32 85%,
    #c09226 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  html {
    animation: none;
  }
}

body {
  background-color: rgb(15, 15, 15);
}

h1 {
  font-family: "Miss Fajardose", system-ui, sans-serif;
  background: var(--gold-h1);
  background-clip: text;
  color: transparent;
  font-size: 8rem;
}

h2 {
  font-family: "Cinzel Variable", system-ui, sans-serif;
  background: var(--gold-h1);
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: 400;
}

#titulo2{
  margin-left:30px;
}

h3 {
  font-family: "Cinzel Variable", system-ui, sans-serif;
  background: var(--gold-h1);
  background-clip: text;
  color: transparent;
  font-size: 2.5rem;
  margin-top: 35px;
  font-weight: 400;
}

h4 {
  font-family: "Cinzel Variable", system-ui, sans-serif;
  background: var(--gold-h1);
  background-clip: text;
  color: transparent;
  font-size: 2rem;
  font-weight: 400;
}

.card-title {
  font-family: "Cinzel Variable", system-ui, sans-serif;
  font-size: 2rem;
  background: var(--gold-h1);
  background-clip: text;
  color: transparent;
}

a.btn.btn-primary {
  font-family: "Poppins", system-ui;
  border-color: var(--primary-color);
  background-color: rgb(15, 15, 15);
  color: white;
  transition: ease 0.3s transform;
  margin-top:30px;
}

a.btn.btn-primary:hover {
  transform: scale(1.1);
  box-shadow:
  0 0 1px rgb(0, 0, 0),
  0 2px 3px rgba(233, 225, 221, 0.699),
  0 3px 2px rgb(71, 55, 11);
}

a {
  text-decoration: none;
  color: white;
}

header {
  margin-top: 30px;
}

header img {
  margin-top: 20px;
  border: 5px solid var(--primary-color);
}

section .col-md-6 h2 {
  margin-top: 35px;
}

#section1 {
  margin-top: 30px;
}

#section2 {
  margin-top: 30px;
}

.card {
  background-color: rgb(15, 15, 15);
  border: 5px solid var(--primary-color);
  height: 650px;
}

.card-title {
  display: grid;
  place-items: center;
  height: 75px;
}

.card-text {
  height: 145px;
  text-wrap: balance;
}
iframe {
  width: 550px;
  height: 300px;
  border: 5px solid var(--primary-color);
}


p {
  font-family: "Poppins", system-ui, sans-serif;
  color: white;
  font-size: 1.3rem;
}

div.text-center{
  margin-top:50px;
}

footer {
  margin-top: 30px;
  margin-bottom: 60px;
}

.text-center a {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.5rem;
}

a.redes {
    display: inline-block;
    transition: ease 0.3s transform;
    will-change: transform;
}

a.redes:hover,
a.redes:focus,
a.redes:active {
    transform: scale(1.2);
    filter: drop-shadow(0 0 1px rgb(0, 0, 0)) drop-shadow(0 0 3px rgba(233, 225, 221, 0.699))  drop-shadow(2px 2px 2px rgb(48, 37, 7));
}

@media screen and (width < 416px) {
  html {
    width: 100%;
  }
  body {
    width: 100%;
  }

  header {
    margin-top: 30px;
  }
  header div {
    justify-content: center;
  }
  header img {
    margin-top: 20px;
    width: 290px;
  }

  div.row {
    justify-content: center;
  }

  h1 {
    text-align: center;
    font-size: 7rem;
  }
  h2 {
    text-align: center;
    font-size: 2rem;
  }

  #titulo2{
    margin-left:0;
  }

  h3 {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  h4{
    margin-top:10px;
  }

  h5.card-title {
    margin: 0px;
  }

  .card-title {
    font-size: 1.5rem;
  }

  iframe {
    width: 100%;
    margin-right: 10px;
  }

  p {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 5px;
  }

  .card-text {
    height: 110px;
    text-wrap: balance;
    font-size: 1.1rem;
    margin: 0px;
  }

  .card {
  height: 540px;
  margin-top: 20px;
}
.card-body{
    position: relative;

}
a.btn.btn-primary{
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}
a.btn.btn-primary:hover{
    transform: translateX(-50%);
}
}
#redes{
    font-size:1.1rem;
}

