@font-face {
    font-family: 'Alternate Gothic ATF';
    src: url('/assets/fonts/AlternateGothicATF-Black/AlternateGothicATF-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
  }

@font-face {
    font-family: 'Alternate Gothic ATF-Heavy';
    src: url('/assets/fonts/AlternateGothicATF-Black/AlternateGothicATF-Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
  }

@font-face {
    font-family: 'Nunito Sans';
    src: url('/assets/fonts/AlternateGothicATF-Black/NunitoSans_10pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans 500';
    src: url('/assets/fonts/AlternateGothicATF-Black/NunitoSans_10pt-Bold.ttf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans ExtraBold';
    src: url('/assets/fonts/AlternateGothicATF-Black/NunitoSans_10pt-ExtraBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Alternate Gothic ATF', sans-serif;
}

h1, h2, h3 {
  font-weight: 900;
}

h1 {
    /* font-size: 100px; */
    font-size: 5.3vh; /* 11.5vw → ≈ 5.3vh */
    letter-spacing: 4px;
    /* text-transform: uppercase; */
    color: #ffffff;
    text-align: center;
    line-height: 4.8vh; /* 👈 este es el interlineado */
    margin-bottom: 1vh;
}

h3 {
    font-size: 2.3vh; /* 5vw → ≈ 2.3vh */
    letter-spacing: 2px;
    /* text-transform: uppercase; */
    color: #000000;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 3vh;
}

.body {
    display: flex;
    background-size: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    height: 100vh;
    /* background-color: #EA6306; */
    justify-content: center;
    /* max-width: 50vh; */
    background-position: bottom center;
}

.body::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    z-index: -1;
}

.header {
    background-color: transparent;
    position: relative;
    display: flex;
    z-index: 2;
    padding: 85px 20px 20px 20px;
    width: 40.1vh; /* 87vw → ≈ 40.1vh */
    align-self: center;
    margin: 0 auto;
    justify-content: space-between;
}

.img-header-1 {
    width: 17.9vh; /* 39vw → ≈ 17.9vh */
    margin-bottom: 7px;

}

.img-header-2 {
    width: 5.5vh; /* 12vw → ≈ 5.5vh */
    margin-right: 10px;

}

.div_tarjeta {
  background-color: transparent;
  position: relative;
  margin-top: 1.5vh;
  border-radius: 4.1vh;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  min-width: 90%;
}

.div {
    z-index: 2;
    background-color: transparent;
    position: relative;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}

.img-estrellas {
    margin-top: -1.5vh;
    width: 24.5vh; /* 53vw → ≈ 24.5vh */
}

.btn-entrar {
    background-color: #070707;
    letter-spacing: 1px;
    color: #F7CA07;
    font-weight: 700;
    /* text-transform: uppercase; */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.7vh; /* 3.7vw → ≈ 1.7vh */
    padding: 1.2vh 4.2vh; /* 9vw → ≈ 4.2vh */
    border: none;
    border-radius: 0.8vh;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.1vh;
  }


    .btn-entrar:hover {
        background-color: #222;
    }

    .img-lateral-1-desktop,
    .img-lateral-2-desktop,
    .img-mincultura,
    .h1-titulo-desktop {
      display: none;
    }

    .iphone-wrapper {
      aspect-ratio: 499 / 1080;
      width: 45.99vh; /* 499px → ≈ 45.99vh */
      border-radius: 2.78vh;
    }


.padre {
    max-width: 100%;
    left: 50% !important;
    /* padding: 50px; */
}

/* inicio slider */
.bx-wrapper{
    -webkit-box-shadow: none;
    background-color: inherit;
    border: 0px;
    border-radius: 20px;
}
.bx-wrapper img {
    margin: auto;
}
/* fin slider */

.btn-siguiente {
    background-color: #F7CA07;
    letter-spacing: 1px;
    color: #FE6602;
    font-weight: 800;
    /* text-transform: uppercase; */
    font-family: 'Nunito Sans ', sans-serif;
    font-size: 1.3vh; /* 2.7vw → ≈1.3vh */
    padding: 1vh 2.3vh; /* 5vw → ≈2.3vh */
    border: none;
    border-radius: 2.3vh; /* 5vh → se mantiene igual */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 2vh;
    margin-bottom: 2vh;
    display: flex ;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.25);
}

.btn-siguiente:hover {
    background-color: #9b7997;
}

.titulo_uno{
    font-family: 'Alternate Gothic ATF', sans-serif;
    font-weight: 900;
    font-size: 4.8vh;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    color: #000000;
    text-align: center;
    line-height: 4.5vh;
}

.titulo_dos{
font-family: 'Alternate Gothic ATF', sans-serif;
  font-weight: 900;
  font-size: 100px;
  font-size: 2.5vh;
  letter-spacing: 1px;
  /* text-transform: uppercase; */
  color: #D66216;
  text-align: center;
  margin-top: 1vh;
  margin-bottom: 3vh;
}

.titulo_tres{
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 1.62vh;
  /* text-transform: uppercase; */
  color: #000000;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% 100%;
  background-size: contain;
  padding: 10px 0px;
  display: inline-block;
}


/* inicio progress bar */

.wrapper {
    width: 70%;
    margin-top: 6px;
}

.progress-bar {
    width: 100%;
    border-radius: 3px;
}

.progress-bar-fill {
    display: block;
    height: 4px;
    border-radius: 3px;
}

/* fin progress bar */

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 55vh;;
  margin-bottom: 40px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Create two equal columns that floats next to each other */
.column-uno {
  float: left;
  width: 40%;
  display: flex;
  padding-left: 30px;
}

.column-dos {
  float: right;
  width: 60%;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


.div-indice {
    width: 100%;
    align-items: center;
    display: flex;
    margin-bottom: calc(var(--vh) * 1.5);
}

.div-indice-inicio {
    border-radius: 2.3vh 2.3vh 0 0;
}

.div-indice-fin {
    border-radius: 0 0 2.3vh 2.3vh;
}

.div-indice h3 {
    font-family: 'Alternate Gothic ATF', sans-serif;
    font-weight: 900;
    font-size: 2.1vh;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    color: #000000;
    text-align: left;
    margin-top: 3vh;
    line-height: 1;
}

.div-indice h2 {
    font-family: 'Alternate Gothic ATF', sans-serif;
    font-weight: 900;
    font-size: 3.7vh; /* 8vw → ≈3.7vh */
    letter-spacing: 2px;
    /* text-transform: uppercase; */
    color: #FFFFFF;
    text-align: center;
    z-index: 1;
}



.columnas_dos{
  display: flex;
}
.col{
  padding: 10px;
  flex: 50%;
}

.contenedor-mensaje {
  margin-top: 2vh;
  background-color: #262626;
  border-radius: 2.3vh; /* 5vw → ≈2.3vh */
  padding: 2.3vh; /* 5vw → ≈2.3vh */
  width: 41.5vh; /* 90vw → ≈41.5vh */
  height: 43vh;
  position: relative;
  box-sizing: border-box;
}
  
.contenedor-mensaje textarea {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  resize: none;
  color: #fff;
  font-size: 16px;
  font-family: sans-serif;
  outline: none;
}
  
.contenedor-mensaje textarea::placeholder {
  font-size: 1.5vh; /* 3.2vw → ≈1.5vh */
  color: #474747;
}

/* Línea gris inferior */
.linea {
  position: absolute;
  bottom: 45px;
  left: 20px;
  right: 20px;
  height: 5px;
  background-color: #444;
}
  
  /* Botón compartir */
.btn-compartir {
  position: absolute;
  bottom: 1vh;
  right: 2.7vh; /* 6vw → ≈2.7vh */
  padding: 0.5vh 0.9vh; /* 2vw → ≈0.9vh */
  border-radius: 1.4vh; /* 3vw → ≈1.4vh */
  font-size: 1.2vh; /* 2.5vw → ≈1.2vh */
  background-color: #FFFCF3 ;
  color: #1e1e1e;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: sans-serif;
  letter-spacing: 2px;
}

@media (min-width: 981px) {
    .body::after {
        background-image: none;
    }

    .iphone-wrapper {
        /* width: 35vw;  */
        /* o 40vw si prefieres */
        height: auto;
        background-color: #FFF;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 2.78vh; /* 30px → ≈ 2.78vh */
        position: absolute;
        left: 73%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .iphone-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
        z-index: -1;
        pointer-events: none;
    }

    .iphone-content {
        width: 100%;
        /* height: 100%; */
        min-height: 100%;
        position: relative;
        --vw: calc((499 / 1080) * 1vh); /* ≈0.462vh */
        --vh: 1vh;
    }

    h1 {
        font-size: calc(var(--vw) * 11.5);
        line-height: calc(var(--vh) * 4.8);
        margin-bottom: calc(var(--vh) * 1);
    }

    h3 {
        font-size: calc(var(--vw) * 5);
        margin-bottom: calc(var(--vh) * 3);
    }

    .header {
        width: calc(var(--vw) * 87);
        padding: calc(var(--vh) * 9.1) calc(var(--vw) * 4.6) calc(var(--vh) * 2.1);
    }

    .img-header-1 {
        width: calc(var(--vw) * 39);
        margin-bottom: calc(var(--vh) * 0.7);
    }

    .img-header-2 {
        width: calc(var(--vw) * 12);
        margin-right: calc(var(--vw) * 2.3);
    }

    .div {
        margin-top: 0;
    }

    .img-estrellas {
        margin-top: calc(var(--vh) * -1.5);
        width: calc(var(--vw) * 53);
    }

    .btn-entrar {
        font-size: calc(var(--vw) * 3.7);
        padding: calc(var(--vh) * 1.2) calc(var(--vw) * 9);
        border-radius: calc(var(--vh) * 0.8);
        margin-top: calc(var(--vh) * 1.1);
    }

        /* ============ IMÁGENES DESKTOP ============ */
        .img-lateral-1-desktop,
        .img-lateral-2-desktop {
          display: block;
          position: absolute;
        }

        .img-lateral-1-desktop {
          top: 0;
          right: 0;
          height: 100vh;
          z-index: -1;
        }

        .img-lateral-2-desktop {
          bottom: 0;
          left: 0;
          height: 80vh;
          z-index: -1;
        }

        .img-mincultura {
          /* top: 50%;
          left: 25%; */
          display: block;
          height: 4.62vh; /* 50px → ≈4.62vh */
          z-index: 0;
        }

        .h1-titulo-desktop {
          /* top: 25%;
          left: 21.2%; */
          font-family: 'Alternate Gothic ATF';
          z-index: 2;
          color: #349868;
          font-size: 7.4vh; /* 80px → ≈7.4vh */
          line-height: 7vh; /* 70px → ≈6.48vh */
          font-weight: 900;
          letter-spacing: 0;
          display: block;
        }

        .contain-desktop {
            margin-left: 10vw;
            display: flex;
            align-items: center;
            height: 45vh;
            width: 30vw;
            flex-direction: column;
            justify-content: space-evenly;
        }

        /* ============ BACKGROUND DESKTOP ============ */
        .body {
          background-color: #FFF;
          display: flex;
          align-items: center;
          justify-content: space-between;
          overflow: hidden;
        }

    .div-indice-inicio {
      border-radius: calc(var(--vw) * 5) calc(var(--vw) * 5) 0 0;
    }

    .div-indice-fin {
      border-radius: 0 0 calc(var(--vw) * 5) calc(var(--vw) * 5);
    }

    .div-indice h3 {
      font-size: calc(var(--vw) * 4.5);
      margin-top: calc(var(--vh) * 3);
      text-align: left;
    }

    .div-indice h2 {
      font-size: calc(var(--vw) * 8);
    }
  }