* { font-family: 'Asap', sans-serif !important; }
.cabecera { position: relative; }
.cabecera .fondo { width: 100%; }
.cabecera .fondo-mobile { display: none; }
.cabecera .titulo { position: absolute; top: 60px; left: 30px; width: 35%; }
.cabecera .titulo img { width: 250px; }
.cabecera .titulo h1 { font-size: 2.25em; font-weight: bold; }
.cabecera .titulo h1 span { display: block; color: #0097A9; }
.cabecera .lema { font-size: 1.2em; margin-top: 25px; }
.cabecera .lema span { font-weight: bold; color: #0097A9; }
.pasos { text-align: center; max-width: 1100px; margin: 0 auto; }
.pasos h1 { font-weight: 600; font-size: 2em; margin-bottom: 20px; }
.pasos h1 span { font-weight: 600; color: #0097A9; }
.pasos h1 span.numero { display: flex; justify-content: center; margin-bottom: 15px; }
.pasos h1 span.numero span { display: flex; background: #0097A9; color: white; width: 50px; height: 50px; border-radius: 25px; justify-content: center; align-items: center; font-weight: lighter; }
.pasos .bonos { display: flex; justify-content: space-between; padding: 10px 0; }
.pasos .bonos h2 { color: #b7bf10; font-weight: 600; margin: 0; font-size: 1.5em; }
.pasos .bonos p { margin: 5px 0; border-bottom: 1px solid #b7bf10; padding: 5px 0; font-size: 1.1em; font-weight: 700; }
.pasos .bonos .bono { border: 5px solid #b7bf10; border-radius: 10px; padding: 10px 15px; }
.pasos .bonos p:last-child { color: #0097A9; border-bottom: 0; }
.pasos .bono input[type="radio"]:checked::before { transform: scale(1); }
.pasos .bono input[type="radio"]::before { content: ''; width: 12px; height: 12px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; background-color: #b7bf10; }
.pasos .bono input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; margin: 0; width: 22px; height: 22px; border: 2px solid #b7bf10; border-radius: 50%; background-color: #fff; cursor: pointer; position: relative; transition: background-color 0.2s; display: grid; place-content: center; }
.pasos .campo { max-width: 500px; margin: 10px auto; text-align: left; font-size: 1.1em; }
.pasos .campo label { width: 100%; }
.pasos .campo label input[type="text"] { display: block; margin-top: 5px; padding: 10px 15px; width: 100%; border-color: #0097A9; border-width: 1px; border-radius: 5px; }
.pasos .campo input[type="checkbox"] { margin-right: 5px; }
.pasos button { background: #b7bf10; color: white; padding: 8px 20px; border-radius: 40px; border: 0; }
.como-canjear { background: #0097A9; margin-top: 60px; padding: 45px 0; }
.como-canjear h2 { text-align: center; color: white; font-size: 1.75em; font-weight: bold; }
.como-canjear p { width: 500px; margin: 0 auto; text-align: center; font-weight: lighter; color: white; }
.como-canjear .capturas { display: flex; max-width: 1200px; margin: 30px auto; }
.como-canjear .capturas div { width: 25%; }
.como-canjear .capturas div img { width: 100%; }
.como-canjear .capturas div span { display: block; color: white; font-size: .9em; font-weight: lighter; text-align: center; padding: 0 25px; }
.como-canjear .explicacion { text-align: center; max-width: 890px; margin: 0 auto; color: white; font-weight: lighter; font-size: .9em; border: 1px solid white; padding: 20px 30px; }
.como-canjear .app { padding-top: 30px; }
.como-canjear .app h2 { font-size: 1.5em; }
.como-canjear .app .stores { margin: 20px auto; width: 300px; display: flex; }
.como-canjear .app .stores a { padding: 0 5px; }
.como-canjear .app .stores img { width: 100%; }
.footer { text-align: center; padding-top: 45px; }
.footer .logo img { width: 200px; }
.footer .enlaces { padding-top: 30px; color: white; font-weight: lighter; }
.footer .enlaces a { color: white; }
.cabecera.resumen { text-align: left; padding-top: 25px; max-width: 1000px; margin: 0 auto; }
.cabecera.resumen img { width: 200px; }
.contenido.resumen { text-align: left; max-width: 1000px; margin: 0 auto; }
.contenido.resumen h1 { text-align: left; font-weight: bold; }
.contenido.resumen h2 { text-align: left; font-size: 1.75em; font-weight: bold; color: #0097A9; }
.contenido.resumen h3 { text-align: left; font-weight: bold; color: #b7bf10; }
.contenido.resumen p { text-align: center; font-size: 1.4em; }
.contenido.resumen .opcion { border: 5px solid #b7bf10; border-radius: 10px; padding: 15px 25px; text-align: left; margin-bottom: 30px; }
.contenido.resumen label { width: 100%; position: relative; }
.contenido.resumen .opcion p { margin: 10px 0 0 0; text-align: left; font-size: 1.2em; }
.contenido.resumen label .titulo { position: absolute; top: 0; left: 40px; font-size: 1.4em; font-weight: bold; }
.contenido.resumen label .titulo span { color: #b7bf10; }
.contenido.resumen input.beneficiario { width: 400px; margin-top: 10px; border: 1px solid #ccc; padding: 5px 15px; border-radius: 5px; font-size: 1.1em; }
.contenido.resumen .opcion input[type="radio"]:checked::before { transform: scale(1); }
.contenido.resumen .opcion input[type="radio"]::before { content: ''; width: 12px; height: 12px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; background-color: #b7bf10; }
.contenido.resumen .opcion input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; margin: 0; width: 22px; height: 22px; border: 2px solid #b7bf10; border-radius: 50%; background-color: #fff; cursor: pointer; position: relative; transition: background-color 0.2s; display: grid; place-content: center; }
.contenido.resumen .bono { max-width: 300px; margin: 0 auto; }
.contenido.resumen .bono h2 { color: #b7bf10; font-weight: 600; margin: 0; font-size: 1.5em; }
.contenido.resumen .bono p { margin: 5px 0; border-bottom: 1px solid #b7bf10; padding: 5px 0; font-size: 1.1em; font-weight: 700; }
.contenido.resumen .bono { border: 5px solid #b7bf10; border-radius: 10px; padding: 10px 15px; }
.contenido.resumen .bono p:last-child { color: #0097A9; border-bottom: 0; }
.contenido.resumen form { text-align: center; padding: 0; }
.contenido.resumen p { text-align: center; margin: 30px 0; font-size: 1em; }
.contenido.resumen a { background: #0097A9; border: 0; padding: 10px 40px; color: white; font-size: 1.3em; font-weight: 600; border-radius: 40px; }
.contenido.resumen a:hover { text-decoration: none; }
.contenido.resumen button { background: #b7bf10; border: 0; border-radius: 40px; color: white; padding: 10px 25px; font-size: 1.2em; }

@media all and ( max-width: 667px ) {
    .cabecera { aspect-ratio: 1/1.9; }
    .cabecera.resumen { aspect-ratio: auto; }
    .cabecera.resumen img { margin-left: 15px; }
    .contenido.resumen { padding: 0 15px; }
    .cabecera img.fondo { display: none; }
    .cabecera img.fondo-mobile { display: block; width: 100%; position: absolute; }
    .cabecera .titulo { position: relative; width: 100%; height: 100%; top: 0; left: 0; text-align: left; padding: 15px 25px; }
    .cabecera .titulo h1 { font-size: 1.75em; }
    .cabecera .titulo img { width: 150px; }
    .cabecera .titulo .lema { position: absolute; top: 75%; }
    .contenido.resumen .opcion.beneficiario p { margin-top: 35px; }
    .contenido.resumen input.beneficiario { width: 100%; }
    .pasos { padding: 0 15px; }
    .pasos .bonos { flex-direction: column; }
    .pasos .bonos .bono { max-width: 300px; margin: 10px auto; }
    .como-canjear { padding-left: 15px; padding-right: 15px; }
    .como-canjear .capturas { flex-direction: column; }
    .como-canjear .capturas div { width: 100%; max-width: 200px; margin: 0 auto; }
    .como-canjear .capturas div span { padding: 0; }
    .como-canjear p { width: 100%; }
}