@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat&family=Raleway:ital,wght@1,300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

ul {
  list-style-type: none; }

a {
  text-decoration: none;
  color: #ffaeae; }

img {
  width: 100 img; }

header {
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  height: 12vh;
  width: 100%; }
  header .hdiv__h1 {
    color: #FFAEAE;
    font-size: 3em;
    padding-left: 15rem; }
  header nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40rem; }
    header nav .hdiv__ul {
      display: flex;
      gap: 2rem;
      font-size: 2.5em; }
      header nav .hdiv__ul__li a {
        transition: 1s; }
        header nav .hdiv__ul__li a:hover {
          text-decoration: solid;
          border-bottom: 2px solid #FFAEAE;
          color: #a16868; }

@media (max-width: 1124px) {
  header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem; }
  .hdiv__h1 {
    padding-right: 3rem;
    padding-left: 5rem !important; }
  .hdiv__ul {
    font-size: 1.7em !important; } }

@media (max-width: 500px) {
  header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2.4rem; }
  .hdiv__h1 {
    padding-right: 0; }
  .hdiv__ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 1.7em !important;
    gap: 0 !important;
    text-decoration: underline; } }

.index__main, .gira__main, .discografia__main, .contacto__main {
  background-color: #FFAEAE;
  width: 100%;
  height: 76vh;
  overflow-x: hidden; }
  .index__main .index__contenido, .gira__main .index__contenido, .discografia__main .index__contenido, .contacto__main .index__contenido {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    padding-left: 15rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    height: auto;
    position: relative; }
    .index__main .index__contenido .texto, .gira__main .index__contenido .texto, .discografia__main .index__contenido .texto, .contacto__main .index__contenido .texto {
      grid-column: 1 / 12;
      grid-row: 1 / 6; }
      .index__main .index__contenido .texto .index__h2, .gira__main .index__contenido .texto .index__h2, .discografia__main .index__contenido .texto .index__h2, .contacto__main .index__contenido .texto .index__h2 {
        font-size: 4em;
        padding-bottom: 3rem; }
      .index__main .index__contenido .texto .index__p, .gira__main .index__contenido .texto .index__p, .discografia__main .index__contenido .texto .index__p, .contacto__main .index__contenido .texto .index__p {
        font-size: 1.6em;
        max-width: 50%; }
    .index__main .index__contenido .index__picture, .gira__main .index__contenido .index__picture, .discografia__main .index__contenido .index__picture, .contacto__main .index__contenido .index__picture {
      margin-left: 1rem;
      padding-right: 20rem;
      grid-column: 7 / 9;
      grid-row: 1 / 3; }

@media (max-width: 1500px) {
  .index__main, .gira__main, .discografia__main, .contacto__main {
    height: auto !important; } }

@media (max-width: 922px) {
  .index__contenido {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
    padding-left: 7rem !important; }
  .index__p {
    font-size: 1.6em;
    width: 100vw;
    max-width: 90% !important;
    margin: 0 !important; } }

@media (max-width: 640px) {
  .index__contenido {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
    padding-left: 7rem !important; }
  .index__h2 {
    font-size: 3em; }
  .index__p {
    font-size: 1.6em;
    width: 100vw;
    max-width: 80% !important;
    margin: 0 !important; }
  .index__img {
    width: 30rem;
    padding-left: 10rem; } }

.gira__main {
  height: auto; }
  .gira__main__section {
    background-color: #FFAEAE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; }
    .gira__main__section__picture {
      width: 80rem; }
      .gira__main__section__picture__img {
        width: 100%;
        padding-top: 1.5rem; }
    .gira__main__section__div {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap; }
      .gira__main__section__div__h2 {
        font-size: 4em;
        display: block;
        padding-top: 2rem;
        padding-bottom: 2rem; }
      .gira__main__section__div__div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap; }
        .gira__main__section__div__div__ul {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: nowrap;
          font-size: 3em;
          text-decoration: dotted;
          list-style-type: disc;
          padding-bottom: 5rem; }
          .gira__main__section__div__div__ul__li {
            text-decoration: dotted;
            padding-bottom: 0.2rem; }
          .gira__main__section__div__div__ul__button {
            font-size: 0.9em;
            border-radius: 5px;
            width: 9rem;
            transition: 0.4s;
            cursor: pointer; }
            .gira__main__section__div__div__ul__button:hover {
              cursor: pointer;
              background-color: #a8a3a3; }

@media (max-width: 640px) {
  .gira__main__section {
    display: flex;
    justify-content: center;
    height: auto; }
    .gira__main__section__picture {
      width: 30rem; }
  .gira__main__section__div__h2 {
    font-size: 3em; }
  .gira__main__section__div__div__ul {
    font-size: 2.2em; } }

@media (max-width: 768px) {
  .gira__main {
    padding: 0 4rem; }
  .gira__main__section__picture {
    width: 75vw; }
  .gira__main__section__div__div__ul {
    font-size: 2.3em; }
  .gira__main__section__div__h2 {
    font-size: 4em; } }

@media (max-width: 922px) {
  .gira__main__section {
    display: flex;
    justify-content: center; }
    .gira__main__section__picture {
      width: 60rem; }
  .gira__main__section__div__div__ul {
    font-size: 3em;
    gap: 1.5rem; } }

.discografia__main {
  padding: 0.4rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap; }
  .discografia__main__section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding-top: 5rem;
    padding-bottom: 5rem; }
    .discografia__main__section__h2 {
      font-size: 4em; }
    .discografia__main__section__p {
      padding-top: 0.7rem;
      font-size: 2.3em; }
    .discografia__main__section__div {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      padding-top: 0.7rem;
      gap: 1rem; }
      .discografia__main__section__div__iframe {
        width: 40rem;
        height: 54rem; }

@media (max-width: 450px) {
  .discografia__main__section__h2 {
    font-size: 3em; }
  .discografia__main__section__p {
    font-size: 3em; }
  .discografia__main__section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
  .discografia__main__section__div__iframe {
    width: 25rem; } }

@media (max-width: 922px) {
  .discografia__main {
    height: auto;
    padding: 0 4rem; }
  .discografia__main__section__div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
  .discografia__main__section__div__iframe {
    width: 70vw !important; } }

@media (max-width: 1300px) {
  .discografia__main__section__div__iframe {
    width: 30vw; } }

body {
  max-width: 100%;
  overflow-x: hidden; }
  body .galeria__main {
    background-color: #FFAEAE;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%; }
    body .galeria__main__section-galeria {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap; }
      body .galeria__main__section-galeria__h2 {
        display: inline;
        font-size: 4em;
        padding-left: 3rem;
        padding-top: 5rem; }
      body .galeria__main__section-galeria__div {
        width: 100%;
        margin: 3rem;
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 2rem;
        box-sizing: border-box; }
        body .galeria__main__section-galeria__div img {
          width: 100%;
          height: 100%; }
        body .galeria__main__section-galeria__div .elemento3 {
          padding-right: 12rem; }
        body .galeria__main__section-galeria__div .elemento6 {
          padding-right: 12rem; }
    body .galeria__main__section-videos {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap; }
      body .galeria__main__section-videos__h2 {
        font-size: 4em; }
      body .galeria__main__section-videos__div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 7rem;
        gap: 2rem; }
        body .galeria__main__section-videos__div-1, body .galeria__main__section-videos__div-2 {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 2rem; }
          body .galeria__main__section-videos__div-1 iframe, body .galeria__main__section-videos__div-2 iframe {
            width: 560px;
            height: 315px; }
        body .galeria__main__section-videos__div-2 iframe {
          width: 560px;
          height: 315px; }

@media (max-width: 640px) {
  .galeria__iframe {
    width: 80vw !important; } }

@media (max-width: 768px) {
  .galeria__main__section-galeria__div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    padding-right: 9rem; }
  .elemento3 {
    padding-right: 0rem !important; }
  .elemento6 {
    padding-right: 0rem !important; } }

body {
  background-color: #FFAEAE; }

.contacto__main {
  height: 76vh; }
  .contacto__main__section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding-top: 3rem;
    padding-bottom: 5rem; }
    .contacto__main__section__div-1 {
      display: inline-flex;
      flex-direction: column;
      padding-left: 20rem; }
      .contacto__main__section__div-1__h2 {
        font-size: 4em;
        display: inline; }
      .contacto__main__section__div-1__p {
        font-size: 2.4em;
        display: inline;
        width: 90%; }
    .contacto__main__section__div-2 {
      width: 60rem;
      font-size: 2rem;
      padding-right: 64rem; }
      .contacto__main__section__div-2__form {
        display: inline;
        width: 100%; }
        .contacto__main__section__div-2__form__fieldset {
          height: 37rem;
          padding-left: 3rem;
          width: 50rem; }
          .contacto__main__section__div-2__form__fieldset__div {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: nowrap; }
            .contacto__main__section__div-2__form__fieldset__div__input {
              font-size: 1em;
              width: 30rem;
              border-radius: 4px; }
            .contacto__main__section__div-2__form__fieldset__div__input-mensaje {
              width: 30rem;
              height: 6rem;
              font-size: 1em;
              border-radius: 4px; }
            .contacto__main__section__div-2__form__fieldset__div__input-enviar {
              font-size: 1.2em;
              border-radius: 5px;
              width: 8rem;
              transition: 0.4s; }

@media (max-width: 640px) {
  .contacto__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
  .contacto__main__section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 5rem; }
  .contacto__main__section__div-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    padding-left: 2rem; }
  .contacto__main__section__div-1__h2 {
    font-size: 3em; }
  .contacto__main__section__div-1__p {
    font-size: 1.7em;
    width: 50%; }
  .contacto__main__section__div-2__form__fieldset__div__input {
    width: 85vw; }
  .contacto__main__section__div-2__form__fieldset__div__input-mensaje {
    width: 85vw;
    height: 8vh; } }

@media (max-width: 922px) {
  .contacto__main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap; }
  .contacto__main__section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 5rem; }
  .contacto__main__section__div-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    padding-left: 2rem; } }

.footer {
  background-color: black;
  height: 12vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 60rem;
  padding: 3rem;
  width: 100%; }
  .footer__p {
    color: #FFAEAE;
    font-size: 2em; }
  .footer__rs {
    display: flex; }

@media (max-width: 1300px) {
  .footer {
    gap: 5rem; } }