@font-face {
    font-family: "DINCondensed-Bold";
    src: url("./fonts/DINCondensed-Bold.ttf");
}

@font-face {
    font-family: "DIN Pro";
    src: url("./fonts/DINPro.ttf");
}

@font-face {
    font-family: "DIN Pro Bold";
    src: url("./fonts/DIN-Bold.ttf");
}


:root {
    --azulALDI:#01B6ED;
    --azulOscuro: #1E2B4A;
    --negro:#000;
    --blanco:#FFF;
    --blancoCrema:#FAF7F3;
    --azulMedio:#283375;
    --gris:#E6EBEB;
}


* {
    box-sizing:border-box;
}

b, strong {
    font-weight: 600;
}
/* Introducción */

.introduccion {
    background-image: url(./images/cabecera_fondo.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin: 0 0;
    border-bottom: 12px solid var(--azulALDI);
    height: calc(0.42083 * 100vw); /* Cálculo para que tenga el tamaño de la imagen de fondo */
    box-sizing: content-box;
    background-color: var(--azulALDI);
}

h1 {
    color: var(--blanco);
    text-align: center;
    font-family: DINCondensed-Bold, sans-serif;
    font-size: 100.8px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 17px;
    margin-bottom: 17px;
    padding: 0;
}

h1 span {
    color: var(--azulALDI);
}

.introduccion p {
    color: var(--blanco);
    text-align: center;
    font-family: DINCondensed-Bold, sans-serif;
    font-size: 29.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px; 
    margin-top: 0;
}

.introduccion img, .introduccion svg {
    display: block;
}

.introduccion img {
    padding-top: 20px;
    padding-left: 20px;
}

.introduccion svg {
    margin:auto;
}

/* Recetas */

.recetas {
    text-align: center;
}

.recetas p {    
	max-width: 85%;
    margin: 112px auto;
    color: var(--azulALDI);
    font-family: DIN Pro;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.recetas h3 {
    color: var(--azulOscuro);
    font-family: DIN Pro;
    font-size: 29.4px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.recetas #crear-receta {
    border-radius: 3px;
    background: var(--azulALDI);
    color: #FFF;
    text-align: center;
    font-family: DIN Pro;
    font-size: 25.2px;
    font-weight: 700;
    padding: 13px 100px;
    border:none;
    margin:auto;
}

.recetas input {
    display: block;
}

.recetas #texto-sobras {
    font-family: DIN Pro;
    font-size: 25.2px;
    font-style: normal;
    background-color: transparent;
    border:none;
    width: 100%;
}

.recetas #texto-sobras:focus {
    border:none;
    outline: none;
}

.recetas .texto-sobras img {
    margin-right: 25px;
}

.recetas .texto-sobras {
    display: flex;
    background-color: var(--gris);
	width: 90%;
    padding: 15px;
    border: none;
    margin: 0 auto 75px;
}


.recetas form {
    margin-top: 35px;
    text-align: center;
    padding-bottom: 86px;
    border-bottom:5px solid var(--azulALDI);
}

.recetas .titulo-receta {
    margin-bottom: 51px;
}

.resultado-receta {
    padding-top:80px;
    padding-bottom: 80px;
    border-bottom:5px solid var(--azulALDI);
}
.recetas .resultado-receta h3{
	font-size: 37.8px;
}
.resultado-receta .ingredientes {
    background-color: var(--blancoCrema);
    padding: 33px 80px;
    text-align: left;
}

.resultado-receta .ingredientes ul {
    list-style-type: none;
}

.resultado-receta .instrucciones-receta {
    padding: 33px 45px;
    text-align: left;
}

.resultado-receta .ingredientes h4 {
    margin-bottom: 85px;
    text-align: center;
}

.resultado-receta .instrucciones-receta h4 {
    text-align: center;
    margin-bottom: 33px;
}

.resultado-receta .instrucciones-receta li {
    margin-bottom: 33px;
}

.resultado-receta h4, .resultado-receta li {
    color: #1E2B4A;
    
    font-family: DIN Pro;
    font-size: 29.4px;
	line-height: 45px;
}

/* Como funciona */

.como-funciona {
    margin-top: 104px;
    background: var(--blancoCrema);
    border-bottom: 19px solid var(--azulALDI);
	padding-bottom: 80px;
}

.como-funciona h2 {
    padding-top: 81px;
    margin-bottom: 34px;
    color: var(--azulALDI);
    text-align: center;
    font-family: DIN Pro Bold;
    font-size: 50.4px;
    text-transform: uppercase;
    font-weight: 900;
}

.como-funciona h3 {
    color: var(--azulALDI);
    font-family: DIN Pro;
    font-size: 29.4px;
    font-weight: 700; 
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
}

.como-funciona p {
    color: #1E2B4A;
    font-family: DIN Pro;
    font-size: 18.9px;
    font-weight: 400;
    text-align: left;
}

.como-funciona .numero p{
    display: inline-block;
    color: var(--ALDI, #01B6ED);
    font-family: DIN Pro;
    font-size: 67.2px;
    font-style: normal;
    font-weight: 700;
}

.como-funciona .numero {
    gap: 10px;
    display: flex;
    align-items: stretch;
	justify-content: flex-start;
}

.como-funciona .texto {
    display: none;
}

/* Beneficios */

.beneficios {
     background-color: var(--azulALDI);
}

.beneficios .imagen{
    background-image: url(./images/beneficios_fondo.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin: 0 0;
    height: calc(0.322916 * 100vw); /* Cálculo para que tenga el tamaño de la imagen de fondo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.beneficios .responsables {
    color: var(--blanco);
    font-family: DINCondensed-Bold;
    font-size: 75.6px;
    font-weight: 700; 
    padding: 15px 150px;
    background-color: var(--azulALDI);
}

.beneficios p {
    color: #000;
    text-align: center;
    font-family: DIN Pro;
    font-size: 11px;
    font-weight: 300;
    padding: 28px 70px 30px 70px;
}

.beneficios .responsables span {
    color: var(--azulMedio);
}

.beneficios h2 {
    margin-top: 54px;
    color: #1E2B4A;
    font-family: DIN Pro;
    font-size: 25.2px;
    font-weight: 700;
}

.beneficios ul {
    margin-top: 27px;
}

.beneficios li {
    color: var(--blanco);
    font-family: DIN Pro;
    font-size: 21px;
    font-weight: 400;
    list-style-type: square;
    border-bottom: 1px solid var(--blanco) ;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.beneficios a {
    color: var(--blanco);
    font-family: DIN Pro;
    font-size: 21px;
}

/* Compartir */

.compartir p {
    color: #1E2B4A;
    text-align: center;
    font-family: DIN Pro;
    font-size: 29.4px; 
    font-weight: 500;
}

.compartir .rrss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:80px;
    padding-bottom:60px;
}

.compartir .advertencia {
    margin-top: 50px;
    margin-bottom: 50px;
    color: #000;
    font-family: DIN Pro;
    font-size: 13px;
    font-weight: 300;
	max-width: 900px;
}

 .compartir .folleto p {
        color: #FFF;
        text-align: center;
        font-family: DIN Pro;
        font-size: 29.4px;
        font-weight: 900;
}

.compartir .folleto {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(./images/cabecera_landing_folleto_v1.jpg);
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url(./images/cabecera_landing_folleto_v1.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:20px;
    padding-bottom: 20px;
    min-height: calc( (326 / 1440) * 100vw); /* Cálculo para que tenga el tamaño de la imagen de fondo */
}

.compartir .folleto a {
    color: #FFF;
    text-align: center;
    font-family: DIN Pro;
    font-size: 29.4px;
    font-weight: 700;
    text-decoration-line: none;
    background-color: var(--azulMedio);
    padding: 10px 62px;
}

.compartir .mas-recetas {
    background-color: var(--azulALDI);
    color: #FFF;
    text-align: center;
    font-family: DIN Pro;
    padding: 50px 0;
}

.compartir .mas-recetas p, .compartir .mas-recetas a {
    font-size: 25.2px;
    font-weight: 400;
    color: #FFF;
}

.compartir .mas-recetas p:first-of-type {
    font-size: 33.6px;
    font-weight: 700;
}

.compartir .mas-recetas a {
    text-decoration-line: underline;
    font-weight: 700;
    color: #FFF;
    display: inline;
}


/* Footer */

footer {
    background-color: var(--azulOscuro);
    padding: 20px;
    padding-top: 64px;
    padding-bottom: 64px;

}

footer p {
    color: var(--blanco);
    font-size: 33.6px; 
}

footer .descargar {
    margin:0;
    color: #FFF;
    font-family: DIN Pro;
    font-size: 32px;
    font-weight: 700;
}

footer .logo {
    background-color: var(--blanco);
    padding: 15px;
    border-radius: 20px;
}

footer .links {
    margin-top: 30px;
    display: flex;
    gap: 30px;
}

footer .rrss {
    gap: 17px;
    justify-content: flex-end;
    align-items: stretch;
    display: flex;
    font-weight: 600;
    margin-top:10px;
}

footer .rrss a {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .rrss p {
    margin-bottom: 0;
}

footer .links img {
    margin-right: 18px;
}

footer .rrss .x {
    fill: var(--blanco);
    background-blend-mode: screen;
}

footer .rrss svg {
    margin-right: 66px;
}

footer .mobile {
    display: none;
}


@media only screen and (max-width: 1280px) {
	.introduccion img {
		max-width: 80px;
	}
	.introduccion svg{
		max-width: 75px;
	}
	h1{
		font-size: 64px;
	}
	.introduccion p {
		font-size: 24px;
	}
	.resultado-receta .ingredientes{
		padding: 33px 40px;
	}
	.resultado-receta h4, .resultado-receta li{
		font-size: 20px;
		line-height: normal;
	}
}
@media only screen and (max-width: 768px) {
   
    /* Introdccion */

    .introduccion {
        background-image: url(./images/mobile/cabecera.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc( (195 / 390) * 100vw); /* Cálculo para que tenga el tamaño de la imagen de fondo */
		border-bottom: 6px solid var(--azulALDI);
    }

    .introduccion h1 {
        font-size: 30px;
		margin-bottom: 0;
        /* Cambio */
    }

    .introduccion p {
        font-size: 15px;
		line-height: normal;
        /* Cambio */
    }

    .introduccion img {
        width: 50px;
        height: 50px;
    }

    .introduccion svg {
        /* Cambio */
        width: 30px;
        height: 30px;
    }


    /* Recetas */ 

    .recetas p {
        margin-top: 38px;
        margin-bottom: 38px;
        font-size: 11px;
    }

    .recetas h3 {
        font-size: 16px;
    }

    .recetas form {
        border-bottom: 2px solid var(--azulALDI);
        padding-bottom:32px;
        margin-top: 21px;
    }

    .recetas .row >div {
        flex: 1 0 100%;
    }

    .recetas #texto-sobras {
        font-size: 11px;
    }

    .recetas .texto-sobras {
        padding: 7px;
        border-radius: 2px;
        margin-bottom: 28px;
    }

    .recetas .texto-sobras img {
        width: 17px;
        height: 17px;
    }

    .recetas #crear-receta {
        font-size: 12px;
        padding: 7px 38px;
    }

    .resultado-receta {
        padding-top: 28px;
        padding-bottom:0;
        border-bottom: 2px solid var(--azulALDI);
    }

    .recetas .titulo-receta {
        margin-bottom: 28px;
    }
	.recetas .resultado-receta h3{		
		font-size: 18px;
	}
    .resultado-receta h4 {
        font-size: 14px;
		line-height: normal;
    }

    .ingredientes li, .instrucciones-receta li {
        font-size: 12px;
		line-height: normal;
    }

    .titulo-receta {
        margin-bottom: 28px;
    }

    .resultado-receta .ingredientes h4 {
        margin-bottom: 10px;
    }

    .resultado-receta .ingredientes {
        padding: 21px;
    }

    .resultado-receta .instrucciones-receta {
        padding: 20px 0;
    }

    .resultado-receta .instrucciones-receta h4 {
        margin-bottom: 12px;
    }

    .resultado-receta .instrucciones-receta li {
        margin-bottom: 10px;
    }

    .resultado-receta ul {
        margin-bottom: 0;
    }

    /* Como funciona */

    .como-funciona {
        margin-top: 24px;
		padding-bottom:24px;
		border-bottom: 6px solid var(--azulALDI);
    }

    .como-funciona .textos {
        display: none;
    }

    .como-funciona .texto {
        display: block;
    }

    .como-funciona .col-sm {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        flex: 1 0 100%;

    }

    .como-funciona .numero {
        align-items: center;
    }

    .como-funciona .numero p {
        font-size: 51px;
        margin: 0;
        padding: 0;
    }

    .como-funciona .numero img {
        width: 36px;
        height: 36px;
    }

    .como-funciona p {
        font-size: 11px
    }

    .como-funciona h3 {
        font-size: 15px;
        margin-bottom: 0;
    }

    .como-funciona h2 {
        font-size: 25px;
        padding-top: 21px;
        margin-bottom: 0;
    }


    /* Beneficios */
	.beneficios .responsables{
		font-size: 30px;
		padding: 0px 30px;
	}

    .beneficios h2 {
        font-size: 17px;
		padding-left: 1em;
    }

	.beneficios a,
    .beneficios li {
        font-size: 11px;
    }

    .beneficios p {
        padding: 10px 20px 20px 2rem;
        font-size: 6px;
    }

    /* Compartir */ 

    .compartir p {
        font-size: 16px;
    }

    .compartir .rrss {
        gap:33px;
        padding-bottom: 24px;
		width: 90%;
    }

    .compartir img {
        width: 21px;
        height: 21px;
    }

    .compartir .advertencia {
        font-size: 6px;
        margin-top: 24px;
        margin-bottom: 24px;
		width: 90%;
    }

    .compartir .advertencia {
        margin-top: 50px;
        margin-bottom: 50px;
        color: #000;
        font-family: DIN Pro;
        font-size: 13px;
        font-weight: 300;
        max-width: 900px;
    }
    
     .compartir .folleto p {
        font-size: 11px;
    }
    
    .compartir .folleto {
        background-image: url(./images/cabecera_landing_folleto_v1.jpg);
        padding-top: 20px;
        padding-bottom: 20px;
        min-height: calc( (88 / 390) * 100vw); /* Cálculo para que tenga el tamaño de la imagen de fondo */
    }
    
    .compartir .folleto a {
        font-size: 12px;
        padding: 3px 20px;
    }
    
    .compartir .mas-recetas {
        padding: 18px 0;
    }
    
    .compartir .mas-recetas p, .compartir .mas-recetas a {
        font-size: 12px;
    }
    
    .compartir .mas-recetas p:first-of-type {
        font-size: 15px;
    }

    .compartir .advertencia {
        font-size: 6px;
    }

    /* Beneficios */

    .beneficios .imagen {
        background-image: url(./images/mobile/beneficios_fondo.png);
        height: calc((1280 / 1920) * 100vw);
    }

    /* Footer */

    footer {
        padding: 20px;
    }

    footer .links > img {
        margin-right: 5px;
        width: 42px;
        height: 42px;
    }

    footer .links a img {
        margin-right: 5px;
        width: 70px;
    }

    footer .links {
        margin-top:10px;
        gap:10px;
    }
 
    footer .logo {
        width: 41px;
        height: 40px;
        padding: 3px;
        border-radius: 3px;
    }

    footer .rrss img {
        width: 11px;
        height: 11px;
    }

    footer .mobile {
        display: inline-block;
    }

    footer .desktop {
        display: none;
    }

    footer p {
        font-size: 9px;
        margin-bottom: 5px;
    }

    footer .descargar {
        font-size: 15px;
    }
}


.recetas form{
    display: none;
}

.resultado-receta{
    display: none;
}