@charset "utf-8";

/* reglas generales */

*{box-sizing: border-box;
}

body{
    background-color: #F5F5F5;
    margin: 0;
  }

  ul, ol {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }

  h1 {
    font-family: "Inter", sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    color: #0CB0E5;
    text-align: center;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    font-family: "Inter", sans-serif;
  }

  p,
  li {
    font-family: "Inter", sans-serif;
    text-wrap: pretty;
  }

  /* barra de navegación */

   /* para que la nav bar quede fija */

  header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #0CB0E5;
    height: 5rem;
  }

  /* termina para que la nav bar quede fija */

    /* HAMBURGUESA */

#btn-menu{display: none;}

#btn-menu:checked ~ .menu {
  right: 0vh;
}

/*desaparecer la img del menú hamburguesa*/
header label{
    display: none; 
}

/*convierto el cursor en mano porque tengo una img y no un vínculo*/
header label:hover{
  cursor: pointer; 
  background: rgba(0,0,0,0.3);
}

.menu ul{
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
}

nav ul li {
  padding: 0 0.0058em;
}

.menu li:hover{
  background: rgba(0,0,0,0.3);   
}
.menu li a{
  display: block;
  padding: 1rem 2rem;
  color: white;
  font-weight: 400;
  font-size: 1.25em;
}

@media (max-width:810px){
  /*hago visible la img del menú hamburguesa*/
  header label{
      display: block;
  }

  /*saco del flujo de cajas a menú para poder ubicarlo fuera del plano*/
  .menu{
      position: fixed;
      background: #077296;
      width: auto;
      height: 100vh;
      top: 5rem;
      right: -50vh;
      margin-left: -50%;
      transition: all .3s;
  }
  .menu ul{
      flex-direction: column;
  }


 /*uso el pseudo selector :checked para identificar cuando  la casilla de verificación está marcada.
  Y para que esto ejecute otro elemento necesito el combinador de hermanos (~)*/
  #btn-menu:checked ~ .menu{
      margin: 0;  
  }
}

/* TERMINA HAMBURGUESA */

  .barranav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 1rem 2rem;
    max-width: 75rem;
    margin-inline: auto;
  }
  
  .logo a {
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 2em;
    color: white;
  }
  
  .logo img {
    max-height: 2.5em;
    margin-right: 0.625em;
  }

  

  /* termina barra de navegación */

  /* hero */

  main .bannerinfo {
    background-image: url(../imagenes/fotohero.png);
    background-size: cover;
    padding: 2em 2em 2em 2em;
  }
  
  .bannerinfo h1 {
    font-weight: 700;
    color: #66cbed;
    text-align: center;
    margin: 0.5em 0 0.5em 0;
  }


  .bannerinfo h2 {
    font-size: 1.75em;
    font-weight: 600;
    color: #66cbed;
    text-align: center;
    margin: 0;
  }

  .bannerinfo ul{
    padding: 0.5em 0 0.5em 0;
  }

  .bannerinfo ul li{
    color: #f0f0f0;
    text-align: center;
    font-weight: 400;
    line-height: 150%;
    font-size: 1.125em;
    padding-top: 0.4em;
  }

  .contenedor-botones,
  .botonpleno {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  a.botonpleno {
    background-color: #0CB0E5;
    border-radius: 1em;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
  }
  
  a.botonlinea {
    border: 2px solid #fff;
    border-radius: 1em;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
  }

  /*adaptacion a computadora y tablet */

  @media (min-width:600px) {
    .bannerinfo p {
      max-width: 56em;
      padding: 0;
    }
  }

  /* termina hero */

  /* sección historias */


  .historiasdelmes {
    background-color: #0CB0E5;
    margin: 0;
    padding: 2em;
    padding-bottom: 4em;
   }

   .historiasdelmes .contenedor {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(min(18em, 100%), 1fr));
    gap: 1rem;
   }

   .paquete {
    text-align: center;
    width: 18em;
    display: block;
    margin-inline: auto;
   }

   .paquete img {
    max-width: 100%;
    border-radius: 1em;
   }

   .historiasdelmes h2 {
    color: #FFF;
    text-align: center;
    font-family: "Inter" , sans-serif;
    font-size: 2em;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
   }

   .historiasdelmes h3 {
    color: #FFF;
    font-family: "Inter" ,sans-serif;
    font-size: 1.9em;
    font-style: normal;
    font-weight: 300;
    margin: 0;
    margin-bottom: 1rem;
   }

   .historiasdelmes p {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 300;
    color: #fff;
    text-align: left;
   }

   .historiasdelmes span{
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.375em;
   }

   .historiasdelmes .concursantestextos h3 {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
   }

   #boton3 {
    display: flex;
    justify-content: space-between;
    padding-inline: 0.5rem;
    gap: 1rem;
   }
 
   #boton3 a{
     display: grid;
     border: 2px solid #FFF;
     border-radius: 0.5em;
     padding: 0.5em;
     color: #fff;
     font-family: "Inter", sans-serif;
     font-size: 1em;
     font-weight: 600;
     text-transform: uppercase;
     align-items: center;
   }

   #boton3 .megusta-container {
    display: flex;
    align-items: center;
    background-color: #ffff;
    border-radius: 0.5rem;
    display: inline;
    padding: 0.5em;
    border-radius: 0.5em;
}

    #boton3 .like-count {
        font-family: "Inter", sans-serif;
        color: #0CB0E5;
    }


   /* termina sección historias */


   /* sección video */

   .video {
    margin-top: 5em;
    margin-bottom: 5em;
   }

   .video h2{
      font-family: "Inter", sans-serif;
      font-size: 2em;
      font-weight: 700;
      text-transform: uppercase;
      color:#0CB0E5;
      text-align: center;
   }

   iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    margin-inline: auto;
    max-width: 70rem;
   }

   /* termina sección video */


   /* footer */

   footer {
    background: #3F3F3F;
    margin: 0;
    padding-top: 1em;
    text-align: center;
    padding-bottom: 2em;
  }

   footer img {
    display: inline-block;
    width: 30%;
    align-items: center;
    margin-top: 2em;
   }

   footer p {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 0.75em;
    font-weight: 300;
    line-height: 150%;
    color: #ffff;
    padding: 0.75em;
    margin: 0;
  }

  @media (min-width:600px) {
    footer img {
      width: 10%;
  }
  }

  /* termina footer */


  /*pagina historias*/

  .infocontenedora {
    padding: 1em;
  }


  .infocontenedora h2 {
    font-size: 1.75em;
    font-weight: 600;
    color: #0CB0E5;
    text-align: center;
  }

  .infocontenedora .titulo h1 {
    display: block;
  }

  @media (min-width:600px) {
    .infocontenedora h2 {
      padding-inline: 0;
    }
  }

  .historiasdelmes2 {
    background-color: #F5F5F5;
    margin: 0;
    padding: 2em;
    padding-bottom: 4em;
   }

   .historiasdelmes2 .contenedor {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(min(18em, 100%), 1fr));
    gap: 1rem;
   }
   
   .paquete1 {
    text-align: center;
    background-color: #0CB0E5;
    border-radius: 1em;
    padding: 1rem;
    width:18em;
    display: block;
    margin-inline: auto;
   }

   .historiasdelmes2 .paquete {
    padding: 1rem;
   }

   .paquete1 img {
    max-width: 100%;
   }

   .paquete1 img {
    max-width: 100%;
    border-radius: 1em;
   }

   .historiasdelmes2 .paquete1 p{
    color: #f0f0f0;
   }

   .historiasdelmes2 .paquete1 h3{
    color: #f0f0f0;
   }

   .historias img {
    max-width: 100%;
    border-radius: 1em;
   }

   .historiasdelmes2 h3 {
    color: #111111;
    font-family: "Inter" ,sans-serif;
    font-size: 1.624em;
    font-style: normal;
    font-weight: 600;
    margin: 0;
    margin-bottom: 1rem;
   }

   .historiasdelmes2 p {
    font-size: 1em;
    font-weight: 300;
    color: #181818;
    text-align: left;
   }

   .historiasdelmes2 span{
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.375em;
   }

   .historiasdelmes2 .concursantestextos h3 {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
   }

   #boton4 {
    display: flex;
    justify-content: space-between;
    padding-inline: 0.5rem;
   }

   #boton4 a{
    display: grid;
    border: 2px solid #0CB0E5;
    border-radius: 0.5em;
    padding: 0.5em;
    color: #0CB0E5;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    align-items: center;
  }


  #boton4 .megusta-container {
    display: flex;
    align-items: center;
    background-color: #0CB0E5;
    border-radius: 0.5rem;
    display: inline;
    padding: 0.5em;
    border-radius: 0.5em;
}
  
#boton4 .like-count {
  font-family: "Inter", sans-serif;
  color: #fff;
}


   /*pagina historias*/

  /*historias marta julio y julia*/

   .infocontenedora2 {
    padding: 2em 2em 2em 2em;
  }

  .contenedorflexible {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(min(20em, 100%), 1fr));
    gap: 1rem;
    padding-bottom: 1em;
  }

  .infocontenedora2 h1 {
    text-align: left;
    margin: 0;
  }

  .informacion {
    padding: 0.5em;
  }

  .informacionusuario h1 {
    padding: 0;
    margin: 0;
  }

  .informacionusuario h2 {
    padding: 0;
    margin: 0.5em 0 0 0;
  }

  .infocontenedora2 h2 {
    text-align: left;
    font-size: 1.75em;
    font-weight: 600;
    color: #0CB0E5;
  }
    .infocontenedora2 p {
      color: #0CB0E5;
      text-align: left;
      font-size: 1.125em;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      gap: 1em;
    }

    #boton5 {
      display: flex;
      align-items: center;
      background-color: #0CB0E5;
      border-radius: 0.5rem;
      display: inline;
      padding: 0.5em;
      border-radius: 0.5em;
  }

  #boton5 img {
    max-width: 6%;
    align-items: center;
  }

  #boton5 .like-count {
    font-family: "Inter", sans-serif;
    color: #fff;
}

   
  @media (min-width: 600px) {

    .infocontenedora2 {
      padding: 5em 5em 5em 5em;
     }
   }

   .infocontenedora2 img {
    max-width: 100%;
   }

   /* foto julia */
    .infocontenedora2 img.fotoperfil {
      width: 100rem;
    }

   /*pagina notificaciones*/

   .infocontenedora3 {
    margin-inline: auto;
  }

  .infocontenedora3 h1 {
    font-family: "Inter", sans-serif;
    font-size: 2.5em;
    font-weight: 600;
    color: #0CB0E5;
    text-align: center;
    margin-bottom: 0;
  }

  .infocontenedora3 h2 {
    font-family: "Inter", sans-serif;
    font-size: 1.75em;
    font-weight: 600;
    color: #0CB0E5;
    text-align: left;
  }

  .infocontenedora3 p{
    color: #040404;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.125em;
    line-height: 126.023%;
    margin: 2rem;
    text-align: left;
  }

  .contenedor-botones2, .botonpleno2 {
    display: flex;
    justify-content: left;
    margin-left: 1rem;
}

.formulario2 {
  padding: 1.25em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  margin: 0 2rem;
}

.formulario2 button.botonmail {
  margin-top: 1rem;
}


  @media (min-width:600px) {
    .infocontenedora3 h2 {
      padding-inline: 0;
    }
    .infocontenedora3 h1 {
      text-align: left;
      margin-left: 2rem;
    }
    .infocontenedora3 p{
      text-align: left;
      margin-left: 2rem;
    }
    .formulario2 {
      width: 25em;
  }
  }

  .infocontenedora3 #boton1 {
    text-align: left;
  }

  .infocontenedora3 #boton1 .secundario {
    text-align: left;
    background-color: #0cafe58e;
  }

  .listado ul.notificaciones {
    padding: 0;
  }

  .listado {
    padding: 1em 2em;
    background-color: #93def7;
    margin-top: 1em;
  }

  .listado li {
    padding: 2rem 0;
  }

  .listado img {
    width: 20%;
    border-radius: 100%;
  }

  .listado p {
    font-family: "Inter", sans-serif;
    font-size: 1.125em;
    font-weight: 500;
    color: #040404;
    padding: 0.5em 0;
    margin: 0;
  }

  .listado h2 {
    font-family: "Inter", sans-serif;
    font-size: 1.562em;
    font-weight: 700;
    color: #040404;
    text-transform: uppercase;
    padding: 0;
    margin: 1em 0 0;
  }

  .listado h3 {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 300;
    color: #040404;
    padding: 0;
    margin: 0;
  }

  .botoncargar a {
    display: inline-block;
    background-color: #0CB0E5;
    border-radius: 1em;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0.5em;
    margin-right: 1em;
  }

   @media (min-width:600px) {
    .listado img {
      width: 10%;
      border-radius: 100%;
    }
  }

  /*condiciones */

.terminos {
  text-align:left;
  padding: 1em 2em;
}

.terminos2 {
  border: 2px solid #0CB0E5;
  margin: 2em;
  padding: 1em;
  display: inline-block;
}


.terminos h2 {
  font-family: "Inter", sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  color: #040404;
}

.terminos p {
  font-family: "Inter", sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  color: #040404;
  line-height: 150%;
}

.terminos2 p.parrafopaso {
  margin: 0;
  padding-top: 1.5rem;
}

.terminos2 h2.titulopasos {
  color: #0CB0E5;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.terminos2 span.pasos {
  font-weight: 700;
  color:#040404;
  font-size: 1.1em;
  text-transform: uppercase;
}

.condicion h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.125em;
  font-weight: 700;
  color: #0CB0E5;
}

.condicion  h3 span {
  font-weight: 600;
}

.condicion p {
  font-size: 1em;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  color: #040404;
  line-height: 150%;
}

.botonplenocondiciones a {
    justify-content: left;
    padding-top: 1em;
      display: inline-block;
      background-color: #0CB0E5;
      border-radius: 1em;
      padding: 0.8em;
      color: #F5F5F5;
      font-family: "Inter", sans-serif;
      font-size: 1em;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 0.5em;
      margin-right: 1em;
  }

  /*aca termina condiciones*/

   /*pagina canje*/

   .canje img {
    display: block;
    max-width: 100%;
    margin-inline: auto;
    border-radius: 2em;
    padding-inline: 2em;
   }

   .productocanje {
    padding-inline: 2em;
   }

   .productocanje h2{
    font-family: "Inter", sans-serif;
    color: #0CB0E5;
    font-weight: 700;
   }

   .productocanje h4 {
    font-family: "Inter", sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    color: #040404;
    text-transform: uppercase;
  }

   .productocanje p{
    font-family: "Inter", sans-serif;
    font-size: 1.125em;
    font-weight: 500;
    color: #040404;
   }

   .productocanje span{
    font-weight: 600;
   }

   #boton2 {
    margin-top: 2em;
    padding-bottom: 2em;
   }

   #boton2 a {
    background-color: #0CB0E5;
    display: inline;
    border-radius: 0.7em;
    padding: 0.7em;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    color: #FFF;
    font-weight: 500;
    font-size: 1em;
   }

   .completa {
    margin-bottom: 2em;
   }


   @media (min-width:600px) {
   .completa {
    display: flex;
   }

   .productocanje {
    padding-top: 6em;
   }
  }

/*productos*/

.categoriasproductos .contenedorproductos {
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(min(15em, 100%), 1fr));
  gap: 1rem;
}

.infocontenedora p {
  color: #040404;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 126.023%;
  text-align: center;
}

.infocontenedora p{
  padding-inline: 2em;
  margin-inline: auto;
}

.productos {
  text-align: center;
  width: 15em;
  margin-inline: auto;
}

.productos h3{
  color: #040404;
  font-family: "Inter" ,sans-serif;
  font-size: 1.125em;
  font-style: normal;
  font-weight: 700;
}

.productos img{
  max-width: 100%;
}

a.boton5 {
  display: inline-block;
  border: 2px solid #0CB0E5;
  border-radius: 0.5em;
  padding: 0.5em;
  color: #0CB0E5;
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
}

/* seccion canjeados */

.canjeados {
  padding: 2em 0 2em 0;
}

.contenedorcanjeados {
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(min(20em, 100%), 1fr));
  gap: 1rem;
}

.canjeados .contenedor {
  background-color: #3F3F3F;
  border-radius: 1em;
  text-align: center;
  justify-content: center;
  width: 20em;
  margin-inline: auto;
  overflow: hidden;  
}


.canjeados h2 {
  color: #0CB0E5;
  font-family: "Inter" ,sans-serif;
  font-size: 1.56em;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.canjeados p.bajada {
  max-width: 100%;
  font-weight: 600;
  font-size: 1.1em;
}

.canjeados p {
  color: 040404;
  font-family: "Inter" ,sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 300;
  max-width: 20em;
  text-align: center;
  margin-inline: auto;
}

.descripcionimagen {
  padding: 1em;
}

.seccionganadores img { 
  display: block;
  margin-inline: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}

.seccionganadores h2 {
  color: #ffffff;
  font-family: "Inter" ,sans-serif;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 700;
}

.seccionganadores h3 {
  color: #ffffff;
  font-family: "Inter" ,sans-serif;
  font-size: 1.125em;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
}

.seccionganadores p {
  color: #ffffff;
  font-family: "Inter" ,sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 300;
}
 
 /*aca termina productos*/


  /*descripcion producto*/

  article.seccionprincipal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15em, 100%), 1fr));
    gap: 1rem;
}
  .infocontenedora img{
    max-width: 100%;
  }

  .producto {
    background-color: white;
    border-color: black 2x solid;
    border-radius: 1em;
    border: 2px solid #101010;
  }

  .descripcionproducto {
    margin: 1rem;
    padding: 0;
  }

  .descripcionproducto{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(min(20em, 100%), 1fr));
    text-align: center;
  }

  .listadoproducto {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    padding: 0 1em 0 1em;
    margin-top: 0;
    margin-bottom: 1em;
    line-height: 156%;
  }

  .infocontenedora h4{
      max-width: 20em;
      font-size: 1.5em;
      margin-left: 1em;
      font-family: "Inter", sans-serif;
      font-weight: 600;
  }

  .botoncanjear a{
    display: inline-block;
    background-color: #0CB0E5;
    border-radius: 1em;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
  }

  .producto p{
    font-family: "Inter", sans-serif;
    color: #181818;
    font-weight: 600;
    font-size: 1em;
  }
 
   .descripcionproducto {
    text-align: center;
    background-color: #FFF;
    border-radius: 1em;
   }

   .fichatecnica{
    text-align: center;
    background-color: #FFF;
    border-radius: 1em;
    padding-bottom: 2em;
    padding: 2em;
    margin: 0 1rem 1rem 1rem;
   }

   .ficha h3{
    font-family: "Inter", sans-serif;
    color: #0CB0E5;
    font-weight: 700;
    font-size: 1.25em;
    text-align: left;
    text-transform: uppercase;
   }

   .ficha p{
    font-family: "Inter", sans-serif;
    color: #181818;
    font-weight: 400;
    font-size: 1em;
    text-align: left;
    margin: 0.5rem 0;
    padding: 0;
    line-height: 150%;
   }

   /* aca termina descripcion producto*/

   /*producto heladera */

   .cadaproducto {
    padding: 1rem 0;
    width: 15em;
    margin-inline: auto;
   }

   .cadaproducto img {
    max-width: 100%;
   }

   .variedad p{
    font-family: "Inter", sans-serif;
    font-size: 1.1em;
    color: #040404;
   }

   .botonheladeras {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
   }

   .botonheladeras h3{
    font-family: "Inter", sans-serif;
    color: #040404;
    font-size: 1.1em;
    margin-left: 1rem;
   }

   .botonheladeras a {
    display: inline-block;
    background-color: #0CB0E5;
    border-radius: 1em;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0.5em;
  }

  /* formulario */

  .formulario {
    padding: 1.25em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.corto {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 50rem;
}

.campo {
    margin-bottom: 0.9em;
}

label {
    display: block;
    margin-bottom: 0.3em;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    color:#040404;
    font-weight: 400;
}

input,
textarea,
select {
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 0.25em;
}

input,
textarea,
select:hover {
  border-color: #077296;
}

button {
    background-color: #0CB0E5;
    color: white;
    border: none;
    border-radius: 1em;
    cursor: pointer;
    padding: 0.8em;
    color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
}

button:hover {
    background-color: #077296;
}

.botonpopup {
  display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1em;
}

a.botonprimario {
  background-color: #0CB0E5;
  border-radius: 1em;
  padding: 0.8em;
  color: #F5F5F5;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

a.botonsecundario {
  border: 2px solid #0CB0E5;
  border-radius: 1em;
  padding: 0.8em;
  color: #0CB0E5;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

#confirmacionPopup img {
  max-width: 50%;
}


@media (min-width:600px) {
  .formulario {
    width: 25em;
  }
}

/* pop up de canjear */

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.popup-content {
  background: #fff;
  padding: 1.25em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 2rem;
}

.close {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  font-size: 1.25em;
  cursor: pointer;
}

.botonvolver a {
  display: inline-block;
  background-color: #0CB0E5;
  border-radius: 1em;
  padding: 0.8em;
  color: #F5F5F5;
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 1rem;
}

.popup h2 {
  font-family: "Inter", sans-serif;
    font-size: 1.70em;
    font-weight: 600;
    color: #0CB0E5;
    text-align: center;
    margin-inline: auto;
    margin: 0;
    margin: 1rem;
}

.popup p {
  font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: #040404;
    text-align: center;
    margin-inline: auto;
    margin: 1rem;
}


@media (min-width:600px) {
 .popup-content {
  width: 25em;
 }
}