/* ¿Qué ceno? v4 — «mercado, cocina y buen humor». Sin variables, sin gap, sin sticky: compatible con Chrome 60. */
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url(fuentes/nunito-400.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url(fuentes/nunito-700.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url(fuentes/nunito-800.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url(fuentes/poppins-700.woff2) format("woff2"); }
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 56px 0 92px 0; font-family: Nunito, Roboto, "Segoe UI", Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.4; color: #2B2118; background: #FFF6E5; }
a { color: #2B2118; }
h1 { font-size: 32px; line-height: 1.1; font-weight: 800; margin: 0 0 12px 0; }
h2 { font-size: 24px; font-weight: 800; margin: 26px 0 10px 0; }
p { margin: 0 0 12px 0; }
img { border: 0; }

/* ---------- cabecera y barra ---------- */
#cab { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 20; background: #1F7A6B; color: #fff; border-bottom: 2px solid #2B2118; }
#titulo { position: absolute; left: 64px; right: 64px; top: 0; line-height: 53px; text-align: center; font-size: 21px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#atras { position: absolute; left: 6px; top: 5px; width: 48px; height: 44px; border: 2px solid #2B2118; border-radius: 14px; background: #FFF6E5; color: #2B2118; font-size: 30px; line-height: 30px; font-weight: 800; padding: 0; }
body.inicio #atras { visibility: hidden; }
#barra { position: fixed; left: 0; right: 0; bottom: 0; height: 78px; z-index: 20; background: #fff; border-top: 2px solid #2B2118; border-radius: 24px 24px 0 0; display: -webkit-box; display: flex; overflow: visible; }
#barra a { -webkit-box-flex: 1; flex: 1; text-align: center; text-decoration: none; padding-top: 7px; font-weight: 800; font-size: 14px; color: #7A6B5A; position: relative; }
#barra .ico { display: block; width: 62px; height: 36px; margin: 0 auto 2px auto; padding-top: 3px; border: 3px solid transparent; border-radius: 20px; line-height: 0; -webkit-transition: background .2s, -webkit-transform .2s; transition: background .2s, transform .2s; }
#barra .ico svg { display: inline-block; vertical-align: top; }
#barra a.on { color: #2B2118; }
#barra a.on .ico { background: #F4B731; border-color: #2B2118; box-shadow: none; -webkit-animation: nav-pop .3s ease-out; animation: nav-pop .3s ease-out; }
#barra a:active .ico { -webkit-transform: scale(.9); transform: scale(.9); }
@-webkit-keyframes nav-pop { 0% { -webkit-transform: scale(.8); } 60% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } }
@keyframes nav-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
#n-cuenta { position: absolute; top: 2px; left: 57%; min-width: 24px; height: 24px; line-height: 24px; border-radius: 12px; background: #1F7A6B; color: #fff; font-size: 14px; padding: 0 5px; }
#n-cuenta:empty { display: none; }

#app { max-width: 560px; margin: 0 auto; padding: 14px 14px 20px 14px; }

/* ---------- pegatinas y botones ---------- */
.peg { background: #fff; border: 2px solid #2B2118; border-radius: 26px; box-shadow: none; margin: 0 0 22px 0; overflow: hidden; position: relative; }
a.peg, button.peg { display: block; text-decoration: none; color: inherit; font-family: inherit; text-align: left; padding: 0; width: 100%; }
.peg:active, .btn:active, .ficha:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: none; }
.btn { display: block; width: 100%; min-height: 64px; padding: 12px 16px; margin: 0 0 20px 0; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #1F7A6B; color: #fff; font-family: inherit; font-size: 22px; font-weight: 800; text-align: center; text-decoration: none; }
.btn.claro { background: #fff; color: #2B2118; }
.btn.verde { background: #155E52; }
.btn.amarillo { background: #F4B731; color: #2B2118; }
.btn.on { background: #155E52; color: #fff; }
.fila2 { margin: 0 -6px; overflow: hidden; }
.fila2 .btn { float: left; width: 50%; margin: 0 0 20px 0; border-radius: 22px; }
.fila2 .c { float: left; width: 50%; padding: 0 6px; }
.fila2 .c .btn { width: 100%; font-size: 19px; padding: 10px 6px; }

/* ---------- inicio ---------- */
.cielo { margin: -14px -14px 18px -14px; padding: 18px 16px 22px 16px; border-bottom: 2px solid #2B2118; background: #CDEBB0; }
.cielo.m { background: #CFE8F5; }
.cielo.t { background: #CDEBB0; }
.cielo.a { background: #8CCB6B; }
.cielo.n { background: #12433A; color: #FFF6E5; }
.cielo .hola { font-size: 18px; font-weight: 800; margin: 0 0 4px 0; }
.cielo h1 { margin-bottom: 0; }
.idea { margin: 18px 0 0 0; }
.idea .foto { height: 230px; background: #FFF0B3; position: relative; overflow: hidden; border-bottom: 2px solid #2B2118; }
.idea .foto img, .rc .foto img, .hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idea .velo, .rc .velo, .hero .velo { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 10px 14px; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.78)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.78)); color: #fff; }
.velo b { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; }
.etq { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border: 2px solid #2B2118; border-radius: 999px; background: #fff; color: #2B2118; font-size: 15px; font-weight: 800; }
.etq.f { background: #CFE8F5; }
.etq.c { background: #FFF0B3; }
.etq.s { background: #D3EEE8; }
.idea .abajo { padding: 12px 14px 20px 14px; background: #fff; }
.idea .abajo .btn { margin: 0 0 6px 0 !important; width: 100%; }
.etiq { padding: 8px 14px 0 14px; }
.grupo { margin: 0 0 14px 0; }
.grupo h3 { margin: 0 0 8px 0; font-size: 19px; font-weight: 800; }
.fichas { margin: 0 -4px; overflow: hidden; }
.ficha { float: left; width: 33.33%; padding: 0 4px; }
.ficha button { display: block; width: 100%; height: 86px; padding: 6px 2px; border: 2px solid #2B2118; border-radius: 20px; box-shadow: none; background: #fff; font-family: inherit; color: #2B2118; font-size: 17px; font-weight: 800; line-height: 1.15; }
.ficha button .e { display: block; font-size: 28px; line-height: 32px; }
.ficha button.on { background: #1F7A6B; color: #fff; }
.ficha button:active { -webkit-transform: translateY(3px); transform: translateY(3px); box-shadow: none; }
.fichas:after, .fila2:after { content: ""; display: block; clear: both; }
.fichas { margin-bottom: 8px; padding-bottom: 6px; }
.progreso { padding: 12px 14px; }
.progreso b { display: block; font-size: 19px; margin-bottom: 8px; }
.barra { height: 22px; border: 2px solid #2B2118; border-radius: 12px; background: #fff; overflow: hidden; }
.barra i { display: block; height: 100%; background: #155E52; }
.chiste { padding: 14px; background: #FFF0B3; }
.chiste p { margin: 0 0 10px 0; font-size: 20px; }
.chiste .btn { margin-bottom: 0; min-height: 52px; font-size: 18px; }

/* ---------- opciones ---------- */
.resumen { margin: 0 0 16px 0; font-weight: 800; }
.resumen button { margin-left: 8px; border: 2px solid #2B2118; border-radius: 999px; background: #fff; font-family: inherit; font-size: 16px; font-weight: 800; padding: 4px 14px; }
.rc .foto { height: 210px; position: relative; background: #FFF0B3; overflow: hidden; }
.rc.fr .foto { background: #CFE8F5; }
.rc .velo { padding-top: 56px; }
.rc .cuerpo { padding: 10px 14px 6px 14px; }
.cor { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; border: 2px solid #2B2118; border-radius: 26px; background: #fff; font-family: inherit; font-size: 26px; line-height: 40px; padding: 0; text-align: center; color: #1F7A6B; }
.mini-sello { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border: 3px solid #1F7A6B; border-radius: 10px; background: #fff; color: #1F7A6B; font-size: 14px; font-weight: 800; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }

/* ---------- receta ---------- */
.hero { position: relative; height: 270px; margin: -14px -14px 14px -14px; background: #FFF0B3; border-bottom: 2px solid #2B2118; overflow: hidden; }
.hero.fr { background: #CFE8F5; }
.hero .velo b { font-size: 30px; }
.credito { margin: -6px 0 14px 0; font-size: 14px; color: #5A4A3A; }
.credito a { color: #5A4A3A; }
.vapor { position: absolute; left: 0; right: 0; top: 30px; height: 100px; pointer-events: none; }
.vapor i { position: absolute; bottom: 0; width: 12px; height: 56px; border-radius: 8px; background: #fff; opacity: 0; -webkit-animation: sube 3.2s linear infinite; animation: sube 3.2s linear infinite; }
.vapor i:nth-child(1) { left: 34%; }
.vapor i:nth-child(2) { left: 50%; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.vapor i:nth-child(3) { left: 66%; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
.escarcha i { width: 16px; height: 16px; border-radius: 4px; background: #CFE8F5; border: 2px solid #fff; height: 16px; -webkit-animation-name: baja; animation-name: baja; }
@-webkit-keyframes sube { 0% { -webkit-transform: translateY(40px); opacity: 0; } 25% { opacity: .7; } 100% { -webkit-transform: translateY(-30px); opacity: 0; } }
@keyframes sube { 0% { transform: translateY(40px); opacity: 0; } 25% { opacity: .7; } 100% { transform: translateY(-30px); opacity: 0; } }
@-webkit-keyframes baja { 0% { -webkit-transform: translateY(-20px) rotate(0); opacity: 0; } 30% { opacity: .9; } 100% { -webkit-transform: translateY(60px) rotate(120deg); opacity: 0; } }
@keyframes baja { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(60px) rotate(120deg); opacity: 0; } }
.datos { margin: 0 0 14px 0; }
.sello { position: absolute; right: 14px; top: 14px; width: 104px; height: 104px; border: 6px solid #1F7A6B; border-radius: 52px; background: rgba(255,255,255,.9); color: #1F7A6B; font-size: 22px; line-height: 1; font-weight: 900; text-align: center; padding-top: 30px; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); -webkit-animation: sello .35s ease-out; animation: sello .35s ease-out; }
@-webkit-keyframes sello { 0% { -webkit-transform: rotate(-12deg) scale(2.2); opacity: 0; } 70% { -webkit-transform: rotate(-12deg) scale(.9); opacity: 1; } 100% { -webkit-transform: rotate(-12deg) scale(1); } }
@keyframes sello { 0% { transform: rotate(-12deg) scale(2.2); opacity: 0; } 70% { transform: rotate(-12deg) scale(.9); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
.ings { margin: 0 -5px 8px -5px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.ing { width: 50%; padding: 0 5px 10px 5px; }
.ing > div { height: 100%; border: 2px solid #2B2118; border-radius: 20px; background: #fff; padding: 8px; text-align: center; }
.ing img { display: block; margin: 0 auto 6px auto; width: 72px; height: 72px; object-fit: contain; }
.ing b { display: block; font-size: 16px; line-height: 1.15; }
.ing span { display: block; font-size: 16px; color: #5A4A3A; }
.ing .pr { font-weight: 800; color: #2B2118; }
.ing.op > div { background: #FFF6E5; border-style: dashed; }
.interr { display: block; width: 100%; margin: 0 0 14px 0; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #D3EEE8; padding: 12px 14px; font-family: inherit; font-size: 20px; font-weight: 800; color: #12433A; text-align: left; position: relative; padding-right: 86px; }
.interr .sw { position: absolute; right: 12px; top: 50%; margin-top: -18px; width: 64px; height: 36px; border: 2px solid #2B2118; border-radius: 18px; background: #fff; }
.interr .sw i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 12px; background: #2B2118; }
.interr.on { background: #155E52; color: #fff; }
.interr.on .sw { background: #F4B731; }
.interr.on .sw i { left: 31px; }
.sano { margin: 0 0 20px 0; padding: 14px; border: 2px solid #2B2118; border-radius: 22px; background: #D3EEE8; }
.sano b { display: block; font-size: 19px; margin-bottom: 4px; color: #12433A; }
.sano p { margin: 0 0 8px 0; }
.truco { margin: 0 0 20px 0; padding: 14px; border: 2px solid #2B2118; border-radius: 22px; background: #FFF0B3; }
.truco b { display: block; font-size: 19px; margin-bottom: 4px; }
.truco p { margin: 0; }
.cuaderno { position: relative; margin: 0 0 22px 0; padding: 8px 12px 8px 54px; border: 2px solid #2B2118; border-radius: 22px; background: #FFFDF5; background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 38px, #BFD3E6 39px, #BFD3E6 40px); background-size: 100% 40px; overflow: hidden; }
.cuaderno:before { content: ""; position: absolute; left: 40px; top: 0; bottom: 0; width: 3px; background: #7DB88A; }
.cuaderno ol { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.cuaderno li { position: relative; padding: 10px 0 10px 0; line-height: 1.35; counter-increment: p; }
.cuaderno li:before { content: counter(p); position: absolute; left: -46px; top: 8px; width: 30px; height: 30px; border: 2px solid #2B2118; border-radius: 15px; background: #F4B731; font-size: 16px; font-weight: 900; line-height: 24px; text-align: center; }
.cuaderno li:nth-child(3n+2):before { background: #CFE8F5; }
.cuaderno li:nth-child(3n):before { background: #FFF0B3; }
.nota { margin: 0 0 18px 0; padding: 12px 14px; border: 2px dashed #2B2118; border-radius: 18px; background: #fff; font-size: 18px; }

/* ---------- compra: ticket ---------- */
.ticket { position: relative; margin: 6px 0 22px 0; padding: 26px 16px 26px 16px; background: #FFFEF8; border-left: 2px solid #2B2118; border-right: 2px solid #2B2118; font-family: "Courier New", Courier, monospace; font-size: 19px; }
.ticket:before, .ticket:after { content: ""; position: absolute; left: -3px; right: -3px; height: 14px; background: -webkit-linear-gradient(135deg, #FFF6E5 25%, rgba(0,0,0,0) 25%) 0 0, -webkit-linear-gradient(225deg, #FFF6E5 25%, rgba(0,0,0,0) 25%) 0 0; background-size: 20px 20px; }
.ticket:before { top: -1px; }
.ticket:after { bottom: -1px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.ticket h2 { margin: 0 0 10px 0; text-align: center; font-family: inherit; font-size: 22px; }
.lin { position: relative; padding: 10px 0 10px 44px; border-bottom: 2px dashed #B7A98F; min-height: 48px; }
.lin button { position: absolute; left: 0; top: 8px; width: 34px; height: 34px; border: 2px solid #2B2118; border-radius: 8px; background: #fff; font-size: 22px; line-height: 24px; padding: 0; font-weight: 900; color: #fff; }
.lin.h button { background: #155E52; }
.lin.h .t { text-decoration: line-through; color: #8A7C66; }
.lin .t b { display: block; font-size: 18px; line-height: 1.15; }
.lin .t span { font-size: 15px; color: #5A4A3A; }
.lin .p { float: right; font-weight: 700; margin-left: 8px; }
.tot { margin-top: 14px; padding-top: 8px; border-top: 3px double #2B2118; font-size: 24px; font-weight: 700; text-align: right; }
.gracias { margin-top: 14px; text-align: center; font-weight: 700; }
.vacio { padding: 30px 14px; text-align: center; }
.vacio .gr { font-size: 64px; line-height: 70px; }

/* ---------- fase 2 ---------- */
body.cocina #barra, body.bienv #barra, body.bienv #cab { display: none; }
body.bienv { padding: 0; background: #CDEBB0; }
body.bienv #app { max-width: none; padding: 0; }
.bienv { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background: #1F3D1F; text-align: center; }
.bienv .foto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; -webkit-animation: bv-zoom 14s ease-out forwards; animation: bv-zoom 14s ease-out forwards; }
.bienv .velo { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; background: -webkit-linear-gradient(top, rgba(20,45,20,0), rgba(20,45,20,.86) 55%, rgba(20,45,20,.96)); background: linear-gradient(to bottom, rgba(20,45,20,0), rgba(20,45,20,.86) 55%, rgba(20,45,20,.96)); }
.bienv .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 26px 20px; }
.bienv .bvtop { position: absolute; top: 16px; left: 0; right: 0; padding: 0 22px; }
.bienv .bvsello { display: inline-block; max-width: 100%; background: #F2B93B; color: #2B2118; border: 2px solid #2B2118; border-radius: 22px; padding: 8px 16px; font-size: 20px; line-height: 1.2; font-weight: 800; box-shadow: none; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); -webkit-animation: bv-sube .7s .2s both; animation: bv-sube .7s .2s both; }
.bienv h1 { color: #fff; font-size: 38px; line-height: 1.08; margin: 0 0 8px 0; text-shadow: 0 3px 0 rgba(0,0,0,.35); -webkit-animation: bv-sube .7s .45s both; animation: bv-sube .7s .45s both; }
.bienv h1 span { color: #FFD966; }
.bienv .sub { color: #DDF2EE; font-size: 19px; margin: 0 0 18px 0; -webkit-animation: bv-sube .7s .7s both; animation: bv-sube .7s .7s both; }
.bienv .btn { width: 100%; max-width: 420px; margin: 0 auto; font-size: 26px; min-height: 72px; -webkit-animation: bv-sube .7s .95s both, bv-pulso 2.2s 2s infinite; animation: bv-sube .7s .95s both, bv-pulso 2.2s 2s infinite; }
.bienv .co { position: absolute; bottom: 42%; font-size: 26px; opacity: 0; -webkit-animation: bv-flota 7s linear infinite; animation: bv-flota 7s linear infinite; }
@-webkit-keyframes bv-zoom { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.12); } }
@keyframes bv-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@-webkit-keyframes bv-sube { from { opacity: 0; -webkit-transform: translateY(24px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes bv-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes bv-pulso { 0%,100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.04); } }
@keyframes bv-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@-webkit-keyframes bv-flota { 0% { opacity: 0; -webkit-transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; -webkit-transform: translateY(-34vh); } }
@keyframes bv-flota { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34vh); } }
.nivel { display: block; margin-top: 8px; font-size: 18px; font-weight: 800; color: #155E52; }
.sec { margin: 14px 0 2px 0; font-weight: 700; font-size: 17px; border-bottom: 2px solid #2B2118; padding-bottom: 2px; }
.barra-c { padding: 12px; }
.ck { text-align: center; padding-top: 4px; }
.puntos { margin: 0 0 16px 0; }
.puntos i { display: inline-block; width: 14px; height: 14px; margin: 0 3px; border: 2px solid #2B2118; border-radius: 8px; background: #fff; }
.puntos i.h { background: #155E52; }
.puntos i.a { background: #1F7A6B; width: 26px; }
.ckn { font-size: 18px; font-weight: 800; color: #1F7A6B; margin: 8px 0; }
.cktx { font-size: 29px; line-height: 1.3; font-weight: 700; margin: 6px 0 20px 0; min-height: 190px; text-align: left; padding: 18px; border: 2px solid #2B2118; border-radius: 26px; background: #FFFDF5; box-shadow: none; }
.prep { text-align: left; margin: 0 0 14px 0; }
.pl { padding: 10px 14px; margin: 0 0 8px 0; border: 2px solid #2B2118; border-radius: 16px; background: #fff; }
.pl b { display: block; font-size: 19px; }
.pl span { color: #5A4A3A; font-size: 18px; }
.tm { display: block; width: 100%; margin: 0 0 20px 0; padding: 12px; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #CFE8F5; font-family: inherit; color: #2B2118; }
.tm span { display: block; font-size: 52px; line-height: 56px; font-weight: 900; font-family: "Courier New", Courier, monospace; }
.tm small { font-size: 17px; font-weight: 800; }
.tm.fin { background: #F4B731; color: #2B2118; -webkit-animation: late .5s linear infinite alternate; animation: late .5s linear infinite alternate; }
@-webkit-keyframes late { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.04); } }
@keyframes late { from { transform: scale(1); } to { transform: scale(1.04); } }
.ckb { margin: 0 -6px; overflow: hidden; }
.ckb .btn, .ckb a.btn { float: left; width: 50%; margin: 0 0 20px 0; font-size: 20px; }
.ckb > :first-child { width: 42%; } .ckb > :last-child { width: 58%; }
.ckb .btn { border-radius: 22px; }
input#q { display: block; width: 100%; height: 64px; padding: 0 16px; margin: 0 0 16px 0; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #fff; font-family: inherit; font-size: 22px; color: #2B2118; }
.aviso { color: #5A4A3A; font-size: 18px; }
.chips { margin: 0 -3px 12px -3px; }
.chip { margin: 0 3px 8px 3px; padding: 10px 14px; border: 2px solid #2B2118; border-radius: 999px; background: #fff; font-family: inherit; font-size: 18px; font-weight: 800; color: #2B2118; }
.chip.on { background: #155E52; color: #fff; }
.chip.no { background: #5A4A3A; color: #fff; }
.ruleta { padding: 8px 0 20px 0; -webkit-perspective: 800px; perspective: 800px; }
.rcard { border: 2px solid #2B2118; border-radius: 26px; box-shadow: none; background: #fff; overflow: hidden; }
.rcard .rf { height: 260px; background: #FFF0B3; }
.rcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard b { display: block; padding: 14px; font-size: 25px; line-height: 1.15; text-align: center; min-height: 80px; }
.rcard.v0 { -webkit-transform: rotateY(8deg); transform: rotateY(8deg); }
.rcard.v1 { -webkit-transform: rotateY(-8deg); transform: rotateY(-8deg); }
.rcard.caer { -webkit-animation: caer .5s ease-out; animation: caer .5s ease-out; }
@-webkit-keyframes caer { 0% { -webkit-transform: rotateY(90deg) scale(.8); } 60% { -webkit-transform: rotateY(-12deg) scale(1.04); } 100% { -webkit-transform: rotateY(0) scale(1); } }
@keyframes caer { 0% { transform: rotateY(90deg) scale(.8); } 60% { transform: rotateY(-12deg) scale(1.04); } 100% { transform: rotateY(0) scale(1); } }

/* ---------- ajustes de la ronda 3 ---------- */
.insig { position: absolute; top: 10px; right: 10px; width: 68px; height: 68px; border: 2px solid #2B2118; border-radius: 34px; background: #F4B731; box-shadow: inset 0 0 0 3px #FFF0B3; text-align: center; -webkit-transform: rotate(10deg); transform: rotate(10deg); }
.insig b { display: block; font-size: 26px; line-height: 34px; margin-top: 6px; color: #12433A; }
.insig small { display: block; font-size: 10px; line-height: 10px; font-weight: 900; letter-spacing: 0.5px; color: #12433A; }
.tj { display: block; margin-bottom: 6px; font-size: 19px; }
.chiste .btn { margin-bottom: 12px; }
.chiste .btn:last-child { margin-bottom: 0; }
.lin .ck1 { position: absolute; left: 0; top: 8px; }
.lin { padding-right: 0; }
.lin .qt { position: absolute; left: auto; right: 0; top: 8px; width: 34px; height: 34px; border: 2px solid #2B2118; border-radius: 17px; background: #fff !important; color: #5A4A3A !important; font-size: 16px; line-height: 20px; padding: 0; font-weight: 900; }
.lin .p { margin-right: 44px; }
.lin .t { padding-right: 40px; }
.lin.op .t b { font-weight: 400; }
.lin.h .ck1 { background: #155E52; }
.lluvia { position: fixed; left: 0; right: 0; bottom: 70px; top: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.lluvia i { position: absolute; bottom: 8%; font-style: normal; color: #E8506A; opacity: 0; -webkit-animation: vuela 1.4s ease-out forwards; animation: vuela 1.4s ease-out forwards; }
@-webkit-keyframes vuela { 0% { -webkit-transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { -webkit-transform: translateY(-420px) scale(1.2); opacity: 0; } }
@keyframes vuela { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-420px) scale(1.2); opacity: 0; } }

/* ---------- categorías y aviso final ---------- */
.cat { display: block; position: relative; width: 100%; min-height: 84px; margin: 0 0 14px 0; padding: 12px 14px 12px 74px; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #fff; color: #2B2118; font-family: inherit; text-align: left; }
.cat .ce { position: absolute; left: 14px; top: 50%; margin-top: -22px; font-size: 38px; line-height: 44px; }
.cat b { display: block; font-size: 23px; line-height: 1.15; }
.cat small { display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 700; color: #5A4A3A; }
.cat.on { background: #1F7A6B; color: #fff; }
.cat.on small { color: #DDF2EE; }
.cat:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: none; }
#modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 60; background: rgba(18,67,58,.82); padding: 24px 18px; overflow: auto; }
#modal .mc { max-width: 420px; margin: 40px auto 0 auto; padding: 22px 18px 6px 18px; border: 2px solid #2B2118; border-radius: 26px; box-shadow: none; background: #FFF6E5; text-align: center; }
#modal .gr { font-size: 60px; line-height: 66px; }
#modal h2 { margin: 6px 0 12px 0; font-size: 27px; }

/* ---------- portada simplificada ---------- */
.cielo h1 { margin: 0 0 14px 0; font-size: 30px; }
.cielo .idea { margin: 0 0 16px 0; }
.cielo .sorp { margin: 0; }
.idea.nueva { -webkit-animation: caer .45s ease-out; animation: caer .45s ease-out; }
.cat { min-height: 70px; padding-top: 10px; padding-bottom: 10px; }
.cat b { font-size: 24px; line-height: 50px; }
.chiste.cb { display: block; width: 100%; min-height: 84px; padding: 16px 14px; text-align: center; font-family: inherit; color: #2B2118; font-size: 20px; line-height: 1.3; background: #FFF0B3; }
.chiste.cb .cj-b { font-size: 24px; font-weight: 800; }
.chiste.cb .cj-t { font-weight: 700; }

.cielo { padding-top: 16px; }

/* ---------- selección clara ---------- */
.pista { margin: 6px 0 8px 2px; font-size: 15px; font-weight: 800; color: #5A4A3A; text-transform: uppercase; letter-spacing: 0.6px; }
.cat.on { background: #F4B731; color: #2B2118; }
.cat.on:after { content: "✓"; position: absolute; right: 18px; top: 50%; margin-top: -18px; font-size: 30px; line-height: 36px; font-weight: 900; }
.btn.ver { background: #1F7A6B; margin-top: 22px; }
.btn.rep { min-height: 52px; font-size: 19px; margin-bottom: 18px; }

.ckb .btn { line-height: 1.15; }
.ck > a.btn.verde { margin-top: 4px; }

.ckb { margin: 0; }
.ckb > :first-child { width: 38%; margin-right: 4%; }
.ckb > :last-child { width: 58%; }

.insig { width: 74px; height: 74px; }
.insig b { font-size: 24px; line-height: 28px; margin-top: 8px; color: #D8355A; }
.insig small { font-size: 9.5px; line-height: 10px; }
.sello { font-size: 15px; padding-top: 40px; line-height: 1.1; }

/* ---------- fichas con foto ---------- */
.tiles { overflow: hidden; margin: -10px -10px 8px -10px; padding: 10px 10px 4px 10px; }
.tile { position: relative; float: left; width: 48.5%; height: 150px; margin: 0 3% 16px 0; padding: 0; border: 2px solid #2B2118; border-radius: 22px; box-shadow: none; background: #EFE6D2; overflow: hidden; font-family: inherit; color: #fff; text-align: left; }
.tile:nth-child(2n) { margin-right: 0; }
.tile.t-todas { width: 48.5%; height: 150px; }
.tile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .tv { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 8px 10px; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)); }
.tile .tv b { display: block; font-size: 19px; line-height: 1.12; font-weight: 800; }
.tile .te { position: absolute; left: 8px; top: 8px; width: 42px; height: 42px; border: 2px solid #2B2118; border-radius: 21px; background: #fff; font-style: normal; font-size: 22px; line-height: 36px; text-align: center; }
.tile.t-cuchara .te { background: #FFF0B3; } .tile.t-sarten .te { background: #D3EEE8; } .tile.t-fresco .te { background: #CFE8F5; }
.tile .tk { display: none; position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border: 2px solid #2B2118; border-radius: 19px; background: #F4B731; color: #2B2118; font-size: 24px; line-height: 32px; font-weight: 900; text-align: center; text-decoration: none; }
.tile.on { box-shadow: 0 0 0 5px #F4B731; }
.tile.on .tk { display: block; }
.tile.on .tv { background: -webkit-linear-gradient(top, rgba(18,67,58,0), rgba(18,67,58,.95)); background: linear-gradient(to bottom, rgba(18,67,58,0), rgba(18,67,58,.95)); }
.tile:active { -webkit-transform: translateY(4px); transform: translateY(4px); }
.tile.pop { -webkit-animation: pop .28s ease-out; animation: pop .28s ease-out; }
@-webkit-keyframes pop { 0% { -webkit-transform: scale(.94); } 60% { -webkit-transform: scale(1.04); } 100% { -webkit-transform: scale(1); } }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.btn.off { background: #D8CFBD; color: #6B5E4C; box-shadow: none; border-color: #B7A98F; margin-top: 18px; }
.btn.ver { margin-top: 18px; }
/* buscar: fila fina */
.busca { display: block; margin: 0 0 22px 0; padding: 12px 14px; border: 2px solid #B7A98F; border-radius: 28px; background: rgba(255,255,255,.6); color: #4A3F30; text-align: center; text-decoration: none; font-size: 18px; font-weight: 700; }
/* chiste: burbuja con carita */
.cb2 { display: block; width: 100%; margin: 6px 0 24px 0; padding: 0; border: 0; background: none; text-align: left; font-family: inherit; color: #2B2118; overflow: visible; padding-top: 8px; }
.cb2:after { content: ""; display: block; clear: both; }
.cb2 .face { float: left; width: 64px; height: 64px; border: 2px solid #2B2118; border-radius: 32px; background: #F4B731; font-size: 36px; line-height: 58px; text-align: center; }
.cb2 .bub { display: block; position: relative; margin-left: 86px; min-height: 64px; padding: 14px 16px; border: 2px solid #2B2118; border-radius: 22px; background: #FFF0B3; box-shadow: none; font-size: 20px; line-height: 1.3; }
.cb2 .bub:before { content: ""; position: absolute; left: -17px; top: 18px; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 15px solid #2B2118; }
.cb2 .bub:after { content: ""; position: absolute; left: -11px; top: 21px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 11px solid #FFF0B3; }
.cb2 .cj-b { font-size: 23px; font-weight: 800; line-height: 34px; }
.cb2 .cj-t { font-weight: 700; }
.cb2.habla .face { -webkit-animation: habla .5s ease-in-out infinite alternate; animation: habla .5s ease-in-out infinite alternate; }
@-webkit-keyframes habla { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-4px); } }
@keyframes habla { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* ---------- salida de la portada ---------- */
.bienv.sale .foto { -webkit-animation: bv-fuera 1s ease-in forwards; animation: bv-fuera 1s ease-in forwards; }
.bienv.sale .txt, .bienv.sale .bvtop { -webkit-animation: bv-baja .5s ease-in forwards; animation: bv-baja .5s ease-in forwards; }
.bienv.sale .co { display: none; }
.bienv .bvtelon { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #8FD16A; -webkit-animation: bv-circulo .95s .1s ease-in forwards; animation: bv-circulo .95s .1s ease-in forwards; }
.bienv .bvplato { position: absolute; left: 0; right: 0; top: 50%; margin-top: -50px; text-align: center; font-size: 90px; line-height: 100px; opacity: 0; -webkit-animation: bv-plato .8s .35s ease-out forwards; animation: bv-plato .8s .35s ease-out forwards; }
@-webkit-keyframes bv-fuera { to { -webkit-transform: scale(1.5); opacity: .2; } }
@keyframes bv-fuera { to { transform: scale(1.5); opacity: .2; } }
@-webkit-keyframes bv-baja { to { opacity: 0; -webkit-transform: translateY(40px); } }
@keyframes bv-baja { to { opacity: 0; transform: translateY(40px); } }
@-webkit-keyframes bv-circulo { to { -webkit-transform: scale(60); } }
@keyframes bv-circulo { to { transform: scale(60); } }
@-webkit-keyframes bv-plato { 0% { opacity: 0; -webkit-transform: scale(.3) rotate(-30deg); } 50% { opacity: 1; -webkit-transform: scale(1.15) rotate(8deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0); } }
@keyframes bv-plato { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 50% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- transiciones entre pantallas ---------- */
#app.pg > * { -webkit-animation: pg-in .22s ease-out backwards; animation: pg-in .22s ease-out backwards; }
@-webkit-keyframes pg-in { from { opacity: .35; -webkit-transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes pg-in { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tiles .tile { -webkit-transition: -webkit-transform .15s, box-shadow .15s; transition: transform .15s, box-shadow .15s; }
.tiles .tile:active { -webkit-transform: scale(.95); transform: scale(.95); }
.btn.ver { -webkit-animation: ver-in .4s ease-out; animation: ver-in .4s ease-out; }
@-webkit-keyframes ver-in { 0% { -webkit-transform: scale(.9); } 60% { -webkit-transform: scale(1.04); } 100% { -webkit-transform: scale(1); } }
@keyframes ver-in { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* ¡Sorpréndeme! */
.idea.sale { -webkit-animation: idea-sale .26s ease-in forwards; animation: idea-sale .26s ease-in forwards; }
@-webkit-keyframes idea-sale { to { opacity: 0; -webkit-transform: translateX(-60px) rotate(-6deg) scale(.92); } }
@keyframes idea-sale { to { opacity: 0; transform: translateX(-60px) rotate(-6deg) scale(.92); } }
.sorp.gira { -webkit-animation: sorp-gira .5s ease-out; animation: sorp-gira .5s ease-out; }
@-webkit-keyframes sorp-gira { 0% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(1.08) rotate(-3deg); } 100% { -webkit-transform: scale(1); } }
@keyframes sorp-gira { 0% { transform: scale(1); } 40% { transform: scale(1.08) rotate(-3deg); } 100% { transform: scale(1); } }

.idea.entra { -webkit-animation: idea-entra .5s cubic-bezier(.2,.9,.3,1.2); animation: idea-entra .5s cubic-bezier(.2,.9,.3,1.2); }
@-webkit-keyframes idea-entra { 0% { opacity: 0; -webkit-transform: translateX(70px) rotate(6deg) scale(.9); } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0) scale(1); } }
@keyframes idea-entra { 0% { opacity: 0; transform: translateX(70px) rotate(6deg) scale(.9); } 100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }

/* ---------- que se vea que hay más abajo ---------- */
.cielo .idea .foto { height: -webkit-calc(100vh - 500px); height: calc(100vh - 500px); min-height: 96px; max-height: 230px; }
#baja { display: none; position: fixed; left: 50%; bottom: 98px; z-index: 19; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 6px 16px; border: 2px solid #2B2118; border-radius: 999px; background: #F4B731; color: #2B2118; font-family: inherit; font-size: 16px; font-weight: 800; box-shadow: none; white-space: nowrap; -webkit-animation: baja-bota 1.4s ease-in-out infinite; animation: baja-bota 1.4s ease-in-out infinite; }
#baja i { font-style: normal; display: inline-block; }
body.cb.ve #baja { display: block; }
@-webkit-keyframes baja-bota { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: -8px; } }
@keyframes baja-bota { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: -8px; } }

/* ---------- tipografía: Nunito para el texto, Poppins para botones ---------- */
.btn, #baja, #barra a, .tile .tv b, .resumen button, .chip, .ficha button, .interr, .busca, .btn.ver { font-family: Poppins, Nunito, Roboto, Arial, sans-serif; font-weight: 700; }
.btn { font-size: 20px; }
.tile .tv b { font-size: 17px; }
#baja { font-size: 15px; }
#barra a { font-size: 13px; }
#titulo { font-size: 19px; }

/* velo suave detrás del globo: el texto de abajo se desvanece y no choca con él */
#bajaf { display: none; position: fixed; left: 0; right: 0; bottom: 75px; height: 96px; z-index: 18; pointer-events: none; background: -webkit-linear-gradient(top, rgba(255,246,229,0), rgba(255,246,229,.94) 62%, #FFF6E5); background: linear-gradient(to bottom, rgba(255,246,229,0), rgba(255,246,229,.94) 62%, #FFF6E5); }
body.cb.ve #bajaf { display: block; }

/* botones de cocinar: lado a lado sin saltos de línea; en la primera pantalla, «¡Empezamos!» grande y «Salir» debajo */
.ckb { display: -webkit-box; display: flex; overflow: visible; margin: 0; }
.ckb .btn, .ckb a.btn { float: none; margin: 0 0 20px 0; width: auto; -webkit-box-flex: 1; flex: 1 1 0; min-width: 0; }
.ckb > :first-child { -webkit-box-flex: 0; flex: 0 0 36%; margin-right: 4%; width: auto; }
.ckb > :last-child { flex: 1 1 0; width: auto; }
.ckb.ck0 { display: block; }
.ckb.ck0 .btn, .ckb.ck0 a.btn { display: block; width: 100%; margin-right: 0; }
.ckb.ck0 > :last-child { font-size: 24px; min-height: 72px; margin-bottom: 14px; }
.ckb.ck0 > :first-child { min-height: 54px; font-size: 17px; margin-bottom: 20px; }
.ckb.ck0 { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }

/* lista de la compra: todo va marcado; el único botón de cada producto es ✕ para quitarlo */
.lin span.ck1 { position: absolute; left: 0; top: 8px; width: 34px; height: 34px; border: 2px solid #2B2118; border-radius: 8px; background: #155E52; color: #fff; font-size: 20px; line-height: 28px; text-align: center; font-weight: 900; }
.lin.op span.ck1 { background: #8FD16A; color: #2B2118; }

/* sin casillas: la línea empieza pegada al borde */
.lin { padding-left: 0; }

/* receta: botones redondos sobre la foto y «Cocinar paso a paso» siempre a mano */
.hero .cor { z-index: 3; color: #2B2118; box-shadow: none; }
.hero .cor svg { display: inline-block; vertical-align: middle; margin-top: -2px; }
.hero .c-lista { top: 72px; }
.hero .c-fav.on { background: #F4B731; color: #C0392B; }
.hero .c-lista.on { background: #1F7A6B; color: #fff; }
.hero .cor:active { -webkit-transform: scale(.9); transform: scale(.9); }
.hero .sello { right: auto; left: 14px; top: 14px; }
#cfija { display: none; position: fixed; left: 0; right: 0; bottom: 75px; z-index: 18; padding: 28px 14px 12px 14px; background: -webkit-linear-gradient(top, rgba(255,246,229,0), rgba(255,246,229,.96) 40%, #FFF6E5); background: linear-gradient(to bottom, rgba(255,246,229,0), rgba(255,246,229,.96) 40%, #FFF6E5); }
#cfija .btn { margin: 0 auto; max-width: 532px; }
body.rec #cfija { display: block; }
body.rec #app { padding-bottom: 110px; }

/* receta: menos aire antes de los ingredientes, botón de cocinar más fino y botón de la compra en azul */
.hero + .credito + div + h2, .hero ~ h2:first-of-type { margin-top: 16px; }
.btn.azul { background: #CFE8F5; color: #2B2118; }
.btn.azul.hecho { background: #9CCBE8; }
#cfija { padding: 22px 14px 10px 14px; text-align: center; }
#cfija .btn { display: inline-block; width: auto; min-height: 0; max-width: none; margin: 0; padding: 12px 34px; font-size: 18px; border-radius: 999px; box-shadow: none; }
body.rec #app { padding-bottom: 96px; }

/* cielo del inicio: un solo color cálido, complementario del verde azulado */
.cielo, .cielo.m, .cielo.t, .cielo.a, .cielo.n { background: #F9B58C; color: #2B2118; }

/* «Cocinar paso a paso» flotante: se ve que flota y avisa de que hay más abajo */
#cfija { padding: 30px 14px 12px 14px; background: -webkit-linear-gradient(top, rgba(255,246,229,0), rgba(255,246,229,.72) 55%, rgba(255,246,229,.88)); background: linear-gradient(to bottom, rgba(255,246,229,0), rgba(255,246,229,.72) 55%, rgba(255,246,229,.88)); pointer-events: none; }
#cfija .caja { position: relative; display: inline-block; pointer-events: auto; -webkit-animation: flota-b 3.2s ease-in-out infinite; animation: flota-b 3.2s ease-in-out infinite; }
#cfija .btn { padding: 12px 64px 12px 30px; box-shadow: 0 14px 18px rgba(0,0,0,.28); }
#cfija .cbaja { position: absolute; right: 7px; top: 50%; margin-top: -19px; width: 38px; height: 38px; padding: 0; border: 2px solid #2B2118; border-radius: 50%; background: #F4B731; color: #2B2118; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 30px; text-align: center; }
#cfija .cbaja i { display: block; font-style: normal; -webkit-animation: flecha-b 1.2s ease-in-out infinite; animation: flecha-b 1.2s ease-in-out infinite; }
#cfija.fin .cbaja { display: none; }
#cfija.fin .btn { padding-right: 30px; }
@-webkit-keyframes flota-b { 0%,100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-4px); } }
@keyframes flota-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@-webkit-keyframes flecha-b { 0%,100% { -webkit-transform: translateY(-2px); } 50% { -webkit-transform: translateY(3px); } }
@keyframes flecha-b { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* receta: círculo ↓ suelto en la esquina y barra de progreso bajo la cabecera */
#cfija .btn { padding: 12px 30px; }
#cfija .cbaja { display: none; }
#sigue, #prog { display: none; }
body.rec #sigue { display: block; }
body.rec #prog { display: block; }
#sigue.fin { display: none !important; }
#sigue { position: fixed; right: 14px; bottom: 150px; z-index: 19; width: 52px; height: 52px; padding: 0; border: 2px solid #2B2118; border-radius: 50%; background: #F4B731; color: #2B2118; font-family: inherit; font-size: 26px; font-weight: 800; line-height: 40px; text-align: center; box-shadow: 0 10px 14px rgba(0,0,0,.25); -webkit-animation: flota-b 3.2s ease-in-out infinite; animation: flota-b 3.2s ease-in-out infinite; }
#sigue i { display: block; font-style: normal; -webkit-animation: flecha-b 1.2s ease-in-out infinite; animation: flecha-b 1.2s ease-in-out infinite; }
#sigue:active { background: #E0A21F; }
#prog { position: fixed; left: 0; right: 0; top: 56px; height: 5px; z-index: 21; background: rgba(43,33,24,.15); }
#prog i { display: block; height: 100%; width: 0; background: #F4B731; border-right: 2px solid #2B2118; -webkit-transition: width .15s; transition: width .15s; }

/* sin círculo ↓; más difuminado detrás del botón de cocinar */
#sigue { display: none !important; }
#cfija { padding: 84px 14px 12px 14px; background: -webkit-linear-gradient(top, rgba(255,246,229,0) 0%, rgba(255,246,229,.5) 30%, rgba(255,246,229,.88) 60%, #FFF6E5 85%); background: linear-gradient(to bottom, rgba(255,246,229,0) 0%, rgba(255,246,229,.5) 30%, rgba(255,246,229,.88) 60%, #FFF6E5 85%); }

/* receta: botones con texto bajo las etiquetas y aviso al tocar */
.hero .cor { display: none; }
.acc { display: -webkit-box; display: flex; margin: 12px 0 0 0; }
.acc .btn.mini { -webkit-box-flex: 1; flex: 1 1 0; min-width: 0; min-height: 58px; margin: 0 0 4px 0; padding: 10px 6px; font-size: 16px; line-height: 1.15; border-radius: 18px; box-shadow: none; }
.acc .btn.mini:first-child { margin-right: 10px; }
.btn.azul { margin-top: 4px; }
#aviso { position: fixed; left: 50%; top: 74px; z-index: 40; max-width: 88%; padding: 10px 20px; border: 2px solid #2B2118; border-radius: 999px; background: #2B2118; color: #fff; font-family: Poppins, Nunito, Arial, sans-serif; font-weight: 700; font-size: 16px; text-align: center; opacity: 0; pointer-events: none; -webkit-transform: translate(-50%, -14px); transform: translate(-50%, -14px); -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, transform .2s; }
#aviso.ver { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

/* resumen de la categoría en la lista de opciones */
.resumen { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin: 0 0 18px 0; padding: 8px 8px 8px 8px; border: 2px solid #2B2118; border-radius: 22px; background: #fff; box-shadow: none; font-weight: 400; }
.resumen .re { -webkit-box-flex: 0; flex: 0 0 48px; width: 48px; height: 48px; margin-right: 10px; border: 2px solid #2B2118; border-radius: 50%; background: #FFF0B3; font-size: 25px; line-height: 42px; text-align: center; }
.resumen.r-sarten .re { background: #D3EEE8; } .resumen.r-fresco .re { background: #CFE8F5; } .resumen.r-todas .re { background: #fff; }
.resumen .rt { -webkit-box-flex: 1; flex: 1 1 0; min-width: 0; }
.resumen .rt b { display: block; font-size: 19px; line-height: 1.15; font-weight: 800; }
.resumen .rt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.2; color: #5A4A3A; }
.resumen button { -webkit-box-flex: 0; flex: 0 0 auto; margin: 0 0 0 8px; padding: 8px 14px; border: 2px solid #2B2118; border-radius: 999px; background: #F4B731; color: #2B2118; font-size: 14px; box-shadow: none; }
.resumen button:active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: none; }

/* consejos que salen al cocinar */
.tip { margin: 0 0 14px 0; padding: 12px 14px 12px 14px; text-align: left; border: 2px solid #2B2118; border-radius: 20px; box-shadow: none; -webkit-animation: tip-sale .55s .5s cubic-bezier(.2,.9,.3,1.25) backwards; animation: tip-sale .55s .5s cubic-bezier(.2,.9,.3,1.25) backwards; }
.tip + .tip { -webkit-animation-delay: .8s; animation-delay: .8s; }
.tip b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.tip p { margin: 0; font-size: 18px; line-height: 1.3; }
.tip-s { background: #FFF0B3; }
.tip-h { background: #D3EEE8; }
@-webkit-keyframes tip-sale { 0% { opacity: 0; -webkit-transform: translateY(30px) scale(.92); } 100% { opacity: 1; -webkit-transform: translateY(0) scale(1); } }
@keyframes tip-sale { 0% { opacity: 0; transform: translateY(30px) scale(.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* lista de la compra: botones de quitar en rojo */
.lin .qt { background: #D9453B !important; color: #fff !important; border-color: #2B2118; font-size: 17px; font-weight: 900; box-shadow: none; }
.lin .qt:active { background: #B5342B !important; -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: none; }

/* lista de la compra: lo quitado queda tachado y se puede volver a poner con el botón verde */
.lin.q .t b, .lin.q .t span, .lin.q .p { text-decoration: line-through; color: #9A8C78; }
.lin.q { opacity: .8; }
.lin .qt.rest { background: #2E9B5A !important; color: #fff !important; font-size: 20px; line-height: 22px; }
.lin .qt.rest:active { background: #1F7A44 !important; }

/* botón de quitar: rojo pálido */
.lin .qt:not(.rest) { background: #F4B6B0 !important; color: #8A2A22 !important; }
.lin .qt:not(.rest):active { background: #EC9C94 !important; }

/* ingredientes: tarjetas planas y suaves, que no parezcan botones */
.ing > div { border: 1.5px solid #E6DAC0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(43,33,24,.08); }
.ing.op > div { background: #FFFBF1; border: 1.5px dashed #D9C9A6; box-shadow: none; }

/* barra de abajo: plana, sin borde negro ni esquinas redondeadas */
#barra { border-top: 1px solid #E6DAC0; border-radius: 0; box-shadow: none; }

/* barra de abajo: esquinas redondeadas y un poquito de relieve suave */
#barra { border-top: 1px solid #E6DAC0; border-radius: 22px 22px 0 0; box-shadow: 0 -3px 10px rgba(43,33,24,.12); }

/* botón de volver: píldora suave con flecha y «Atrás» */
#atras { left: 8px; top: 6px; width: auto; min-width: 84px; height: 42px; padding: 0 14px 0 10px; border: 1.5px solid #E6DAC0; border-radius: 999px; background: #FFF6E5; color: #12433A; box-shadow: 0 2px 5px rgba(0,0,0,.22); font-family: Poppins, Nunito, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }
#atras svg { display: block; margin-right: 5px; }
#atras span { display: block; margin-top: 1px; }
#atras:active { -webkit-transform: scale(.94); transform: scale(.94); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
#titulo { left: 100px; right: 100px; }
#titulo { left: 112px; right: 112px; font-size: 18px; }

/* «Atrás» en estilo discreto: blanco sobre el teal, sin sombra */
#atras { top: 7px; left: 8px; height: 40px; min-width: 0; padding: 0 14px 0 9px; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.9); color: #fff; box-shadow: none; font-size: 15px; }
#atras svg { margin-right: 4px; }
#atras:active { background: rgba(255,255,255,.34); -webkit-transform: scale(.95); transform: scale(.95); box-shadow: none; }
#titulo { left: 104px; right: 104px; }

/* receta: mismo contorno negro pero más fino (2 px) y relieve más corto */
body.rec .btn, body.rec .acc .btn.mini { border-width: 2px; box-shadow: none; }
body.rec .btn:active { box-shadow: none; }
#cfija .btn { border-width: 2px; box-shadow: 0 12px 16px rgba(0,0,0,.24); }
body.rec .truco, body.rec .sano, body.rec .cuaderno { border-width: 2px; box-shadow: none; }
body.rec .nota { border-width: 2px; }
body.rec .cuaderno li:before { border-width: 2px; }

/* sello de favorito: el mismo en las tarjetas y en la receta, en la esquina de arriba a la derecha y recto */
.insig { top: 10px; right: 10px; width: 76px; height: 76px; border-radius: 50%; -webkit-transform: none; transform: none; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; z-index: 3; }
.insig b { margin: 0 0 2px 0; font-size: 26px; line-height: 26px; }
.insig small { font-size: 10px; line-height: 11px; }
.insig { width: 82px; height: 82px; }
.insig small { font-size: 9.5px; letter-spacing: .2px; }

/* recuadros de truco: sin contorno */
.truco, .sano, body.rec .truco, body.rec .sano { border: 0; box-shadow: none; }

/* «LA IDEA DE HOY»: píldora con contorno, como el botón de Atrás */
.idea .velo small { display: inline-block; margin-bottom: 8px; padding: 5px 14px; border: 2px solid rgba(255,255,255,.9); border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-family: Poppins, Nunito, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .6px; line-height: 1; }

/* compras guardadas: pestañas, mini tickets y detalle */
.tabs { display: -webkit-box; display: flex; margin: 0 0 16px 0; }
.tab { -webkit-box-flex: 1; flex: 1 1 0; text-align: center; padding: 10px 6px; border: 2px solid #2B2118; background: #fff; color: #2B2118; font-family: Poppins, Nunito, Arial, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; }
.tab:first-child { border-radius: 999px 0 0 999px; border-right-width: 1px; }
.tab:last-child { border-radius: 0 999px 999px 0; border-left-width: 1px; }
.tab.on { background: #F4B731; }
.minis { margin: 0 -5px; overflow: hidden; }
.mini { display: block; float: left; width: 50%; padding: 0 5px; margin: 0 0 12px 0; text-decoration: none; color: #2B2118; }
.mini > b, .mini > span { display: block; padding: 0 10px; background: #FFFEF8; border-left: 2px solid #2B2118; border-right: 2px solid #2B2118; font-family: "Courier New", Courier, monospace; }
.mini > b { padding-top: 10px; font-size: 13px; text-align: center; border-top: 2px solid #2B2118; border-radius: 8px 8px 0 0; }
.mini .mf { font-size: 12px; text-align: center; color: #5A4A3A; padding-bottom: 6px; border-bottom: 1px dashed #B7A98F; }
.mini .mr { font-size: 12px; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; min-height: 52px; }
.mini .mn { font-size: 12px; color: #5A4A3A; }
.mini .mt { padding-bottom: 10px; font-size: 18px; font-weight: 700; border-bottom: 2px solid #2B2118; border-radius: 0 0 8px 8px; }
.mini:active { -webkit-transform: scale(.97); transform: scale(.97); }
.fecha-g { margin: 0 0 12px 0; font-family: Poppins, Nunito, Arial, sans-serif; font-weight: 700; font-size: 16px; color: #5A4A3A; }
.rmins { margin: 0 0 18px 0; }
.rmin { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin: 0 0 8px 0; padding: 6px; border: 1.5px solid #E6DAC0; border-radius: 16px; background: #fff; text-decoration: none; color: #2B2118; }
.rmin img { width: 56px; height: 56px; margin-right: 12px; border-radius: 12px; object-fit: cover; }
.rmin b { font-size: 17px; line-height: 1.2; }
.lin.ro .t { padding-right: 0; }
.lin.ro .p { margin-right: 0; }

/* botones de la compra: dos juntos y el de vaciar/borrar como enlace discreto */
.acc2 { margin: 8px 0 6px 0; }
.acc2 .btn.mini { min-height: 52px; font-size: 14px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; text-decoration: none; }
.acc2 .btn.mini.amarillo { background: #F4B731; color: #2B2118; }
.acc2 .btn.mini.verde { background: #1F7A6B; color: #fff; }
.enlace-p { margin: 10px 0 24px 0; text-align: center; }
.enlace { border: 0; background: none; padding: 10px 14px; color: #8A2A22; font-family: Poppins, Nunito, Arial, sans-serif; font-size: 14px; font-weight: 700; text-decoration: underline; }
.enlace:active { color: #5E1B16; }

/* «Cocinar paso a paso»: flota y, al llegar al final, ocupa el sitio del último botón */
body.rec #app { padding-bottom: 88px; }
#cfin { margin-bottom: 0; }
#cfin + .btn { margin-top: 20px; }
#cfija .btn { display: block; width: 100%; max-width: 290px; margin: 0 auto; -webkit-transition: max-width .3s, min-height .3s, font-size .3s, box-shadow .3s; transition: max-width .3s, min-height .3s, font-size .3s, box-shadow .3s; }
#cfija.cerca { background: none; }
#cfija.cerca .btn { max-width: 532px; min-height: 64px; font-size: 20px; box-shadow: none; }
#cfija.llega { visibility: hidden; }
#cfija .caja { display: block; }
body.rec { padding-bottom: 0; }

/* sello «MIS FAVORITOS»: corazón y texto más grandes y centrados en el círculo */
.insig { width: 94px; height: 94px; padding: 0; }
.insig b { margin: 0 0 3px 0; font-size: 30px; line-height: 26px; }
.insig small { font-size: 11.5px; line-height: 13px; letter-spacing: 0; font-weight: 800; }

/* sello «MIS FAVORITOS» como medalla: borde dentado, anillo de puntos, corazón que late */
.insig { width: 98px; height: 98px; border: 0; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250.0%2C2.0%2054.9%2C6.8%2060.7%2C3.2%2064.4%2C8.9%2070.8%2C6.8%2073.1%2C13.2%2079.9%2C12.5%2080.8%2C19.2%2087.5%2C20.1%2086.8%2C26.9%2093.2%2C29.2%2091.1%2C35.6%2096.8%2C39.3%2093.2%2C45.1%2098.0%2C50.0%2093.2%2C54.9%2096.8%2C60.7%2091.1%2C64.4%2093.2%2C70.8%2086.8%2C73.1%2087.5%2C79.9%2080.8%2C80.8%2079.9%2C87.5%2073.1%2C86.8%2070.8%2C93.2%2064.4%2C91.1%2060.7%2C96.8%2054.9%2C93.2%2050.0%2C98.0%2045.1%2C93.2%2039.3%2C96.8%2035.6%2C91.1%2029.2%2C93.2%2026.9%2C86.8%2020.1%2C87.5%2019.2%2C80.8%2012.5%2C79.9%2013.2%2C73.1%206.8%2C70.8%208.9%2C64.4%203.2%2C60.7%206.8%2C54.9%202.0%2C50.0%206.8%2C45.1%203.2%2C39.3%208.9%2C35.6%206.8%2C29.2%2013.2%2C26.9%2012.5%2C20.1%2019.2%2C19.2%2020.1%2C12.5%2026.9%2C13.2%2029.2%2C6.8%2035.6%2C8.9%2039.3%2C3.2%2045.1%2C6.8%22%20fill%3D%22%23F4B731%22%20stroke%3D%22%232B2118%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2238.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%221.6%22%20stroke-dasharray%3D%223%203%22%2F%3E%3C%2Fsvg%3E") center center no-repeat; background-size: 100% 100%; -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.insig b { margin: 0 0 2px 0; font-size: 28px; line-height: 26px; color: #D8355A; -webkit-animation: latido 1.8s ease-in-out infinite; animation: latido 1.8s ease-in-out infinite; }
.insig small { font-size: 11px; line-height: 12px; color: #12433A; }
@-webkit-keyframes latido { 0%,60%,100% { -webkit-transform: scale(1); } 20% { -webkit-transform: scale(1.22); } 40% { -webkit-transform: scale(1); } }
@keyframes latido { 0%,60%,100% { transform: scale(1); } 20% { transform: scale(1.22); } 40% { transform: scale(1); } }

/* confirmar el borrado de una compra guardada (sin ventana del navegador) */
.enlace-p.conf { padding: 14px; border: 2px solid #2B2118; border-radius: 22px; background: #fff; }
.preg-b { display: block; margin: 0 0 12px 0; font-weight: 800; font-size: 17px; line-height: 1.25; color: #2B2118; }
.enlace-p.conf .btn { margin: 0 0 10px 0; }
.enlace-p.conf .btn:last-child { margin-bottom: 0; }
.btn.borra { background: #C0392B; color: #fff; }