@charset "UTF-8";
/* -------- VARIABLES --------- */
* {
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scrollbar-width: none;
  font-family: "national", sans-serif;
  color: #2727dc;
  font-size: 16px; }
  @media only screen and (max-width: 1024px) {
    html, body {
      font-size: 20px; } }

body {
  position: relative; }

h4 {
  font-family: "national", sans-serif;
  font-size: 14px;
  margin: 0;
  font-weight: normal; }

h5 {
  font-family: "national", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  margin-top: 0; }

h1 {
  font-family: "prophet", sans-serif;
  font-weight: normal;
  font-size: 36px; }
  h1.megatitulo {
    text-transform: uppercase;
    font-size: 150px;
    -webkit-font-smoothing: none;
    margin-top: 30px;
    margin-bottom: 5vh; }
    @media only screen and (max-width: 768px) {
      h1.megatitulo {
        margin-bottom: 2vh; } }
    @media (min-width: 768px) and (max-width: 1000px) {
      h1.megatitulo {
        font-size: 120px; } }

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

.btm {
  margin-bottom: 2vh; }

.bottom-big {
  margin-bottom: 20vh; }

.top {
  margin-top: 10vh; }
  @media only screen and (max-width: 768px) {
    .top {
      margin-top: 5vh; } }

.half-top {
  margin-top: 5vh; }

.align-items-center {
  align-items: center; }

.text-negro {
  color: black; }

.text-blanco {
  color: white; }

.terminal {
  font-family: "terminal_grotesque", sans-serif;
  font-weight: normal; }

.poppins {
  font-family: "Poppins", sans-serif;
  font-weight: normal; }

.grotesque {
  font-family: "Darker Grotesque", sans-serif;
  font-weight: normal; }
  .grotesque.bold {
    font-weight: 700; }

.mayus {
  text-transform: uppercase; }

.lowercase {
  text-transform: none; }

#content {
  height: 100vh; }

#content section {
  min-height: 100%;
  display: flex; }

/*-- contenidos --*/
.flex-column {
  display: flex;
  flex-direction: column; }

.flex-row {
  display: flex;
  flex-direction: row; }
  @media only screen and (max-width: 576px) {
    .flex-row.flex-column-small {
      flex-direction: column; } }
  @media only screen and (max-width: 768px) {
    .flex-row.flex-column-md {
      flex-direction: column; } }

.flex-wrap {
  flex-wrap: wrap; }

.container {
  width: 100%;
  max-width: 1400px;
  padding: 40px;
  padding-right: 20px;
  margin: auto;
  display: flex; }
  @media only screen and (max-width: 576px) {
    .container {
      padding: 10px;
      padding-right: 10px; } }
  .container.no-padding {
    padding: 0; }
  .container .col-6 {
    width: 50%;
    padding: 10px; }
    @media only screen and (max-width: 576px) {
      .container .col-6.col-12-sm {
        width: 100%;
        padding: 0; } }
    @media only screen and (max-width: 576px) {
      .container .col-6.col-6-md {
        width: 100%; } }
  .container .col-2 {
    width: 16.66%;
    padding: 10px; }
  .container .col-1 {
    width: 8.33%;
    padding: 10px; }
  .container .col-10 {
    width: 83.33%;
    padding: 10px; }
  .container .col-12 {
    width: 100%; }
  .container .col-7 {
    width: 58.33%;
    padding: 10px; }
    @media only screen and (max-width: 1024px) {
      .container .col-7 {
        width: 100%;
        padding: 5px; } }
  .container .col-8 {
    width: 66.6%;
    padding: 10px; }
    @media only screen and (max-width: 1024px) {
      .container .col-8 {
        width: 100%;
        padding: 5px; } }
  .container .col-4 {
    width: 33.3%; }
    @media only screen and (max-width: 1024px) {
      .container .col-4.col-12-md {
        width: 100%; } }
    @media only screen and (max-width: 768px) {
      .container .col-4.col-12-sm {
        width: 100%; } }
    @media only screen and (max-width: 1024px) {
      .container .col-4.col-6-md {
        width: 50%;
        padding: 20px; } }
    @media only screen and (max-width: 576px) {
      .container .col-4.col-6-md {
        width: 100%;
        padding: 0; } }
  .container .col-30-p {
    width: 30%; }
    @media only screen and (max-width: 1024px) {
      .container .col-30-p {
        width: 100%; } }
  .container .col-40-p {
    width: 40%; }
    @media only screen and (max-width: 1024px) {
      .container .col-40-p {
        width: 100%; } }
  .container .col-5 {
    width: 40%;
    padding: 10px; }
    @media only screen and (max-width: 1024px) {
      .container .col-5 {
        width: 100%;
        padding: 0; } }
    @media only screen and (max-width: 576px) {
      .container .col-5.col-12-sm {
        width: 100%;
        padding: 0; } }
  .container img {
    width: 100%;
    height: auto; }
  .container p {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 0; }
    @media only screen and (max-width: 576px) {
      .container p {
        font-size: 14px;
        line-height: 1.4; } }

@media only screen and (max-width: 1024px) {
  .hide-md {
    display: none; } }

/* ---- PARCHES ----- */
.parches .intro-parches {
  margin-bottom: 2vh; }
  .parches .intro-parches .heading {
    line-height: 1;
    margin-bottom: 20px;
    margin-top: 5vh;
    font-size: 80px;
    font-weight: 400px !important;
    background-color: #2BDEA2;
    color: white;
    display: inline-block;
    padding: 10px 5px; }
    @media only screen and (max-width: 1024px) {
      .parches .intro-parches .heading {
        font-size: 60px; } }
    @media only screen and (max-width: 768px) {
      .parches .intro-parches .heading {
        font-size: 55px; } }
    @media only screen and (max-width: 768px) {
      .parches .intro-parches .heading {
        font-size: 45px; } }
  .parches .intro-parches .subheading {
    color: black;
    font-family: "prophet", sans-serif;
    margin-top: 0;
    letter-spacing: 1.2; }

.parches .parche {
  padding: 20px;
  margin-left: -20px;
  cursor: pointer; }
  @media only screen and (max-width: 1024px) {
    .parches .parche {
      padding: 10px; } }
  @media only screen and (max-width: 576px) {
    .parches .parche {
      padding: 0;
      margin-left: 0; } }

.parches .parche-container {
  border: solid 2px black;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  position: relative; }
  .parches .parche-container .img-parche {
    padding: 10px;
    object-fit: cover !important; }
  .parches .parche-container .play-negro,
  .parches .parche-container .play-color {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer; }
  .parches .parche-container .des-parches {
    min-height: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: black;
    font-family: "prophet", sans-serif;
    padding: 10px;
    padding-right: 40px;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px; }
  .parches .parche-container .transcripcion {
    background-color: #2BDEA2;
    overflow-y: scroll;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px;
    padding-right: 40px; }
    @media (min-width: 768px) and (max-width: 1000px) {
      .parches .parche-container .transcripcion {
        padding-right: 15px; } }
    .parches .parche-container .transcripcion p {
      font-family: "Darker Grotesque", sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 1.2;
      color: white; }
      @media (max-width: 1000px) {
        .parches .parche-container .transcripcion p {
          font-size: 18px; } }

.cred {
  font-family: "prophet", sans-serif;
  font-weight: 300;
  color: #2BDEA2; }

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

body {
  -ms-overflow-style: none; }

.contenido {
  scrollbar-width: none; }

/* ------ color de resaltado ------ */
::selection {
  background-color: #2BDEA2;
  color: white; }

::-webkit-selection {
  background-color: #2BDEA2;
  color: white; }

/* ------ TIPOGRAFÍAS ------ */
@font-face {
  font-family: 'national';
  src: url("../fonts/nb.otf") format("opentype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'national';
  src: url("../fonts/nm.otf") format("opentype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'national';
  src: url("../fonts/nr.otf") format("opentype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'prophet';
  src: url("../fonts/pr.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'prophet';
  src: url("../fonts/pb.otf") format("opentype");
  font-weight: 500;
  font-style: normal; }