/* La Friteuse Joyeuse · app de recetas
   Identidad = la del libro que compraron (y la de los anuncios): banda verde oscura, títulos en serif
   tipo Georgia, cajas verde menta, números de paso en círculo verde, crema de fondo, naranja de la marca.
   Pensado para 60-85 años: letra grande, botones con icono + texto, una acción principal por pantalla. */
:root {
  /* 26-10 (tarde): la identidad pasa de «banda verde en todo» a la paleta de la landing:
     fondo crema cálido, el verde SOLO como color de acción (botón de compra de la landing),
     tinta cálida en las cabeceras. Así anuncio → landing → app por fin se parecen (informe 11.4).
     Se conservan los nombres --green-* para no reescribir 1.000 reglas; cambian de papel:
       --green-dark  -> antes banda/fondo; ahora SOLO texto-verde y acción fuerte
       --ink-head    -> NUEVO: fondo de cabeceras grandes (tinta cálida, no verde)
       --green-pale  -> cajas suaves pasan a crema-2 (menos verde ambiente) */
  --green-dark: #15803D;   /* VERDE DE ACCIÓN (botón de compra de la landing). Texto blanco 4,8:1 */
  --go-d: #0F6A31;         /* verde pulsado / sombra inferior del botón */
  --green-mid: #2f7d45;    /* viñetas, metadatos verdes */
  --green-bright: #15803D; /* checks e iconos de acción (mismo verde, coherente) */
  --green-text: #15803D;   /* verde con texto blanco encima */
  --green-pale: #FDEBD3;   /* cajas suaves: crema hundida (antes verde menta) */
  --green-tips: #FDEBD3;   /* consejos: misma crema hundida */
  --rule: #EADBC8;         /* bordes de 1 px color crema (antes verde) */
  --cream: #FFF6EA;        /* fondo general = landing */
  --cream-2: #FDEBD3;      /* zonas hundidas */
  --ink-head: #1F1A17;     /* cabeceras grandes: tinta cálida casi negra (no verde) */
  --mint: #DCF3E2;         /* chip «hecho» / fondo de ✓ (verde muy claro de la landing) */
  --mega-bg: #14110F;      /* fondo de la oferta del Méga: negro cálido (portada y anuncio) */
  --gold: #FFD44D;         /* oro: SOLO oferta del Méga y ♥ de favoritas */
  --card: #FFFFFF;
  --ink: #1F1A17;
  --ink2: #433A33;
  --muted: #6B5E53;
  --orange: #F47C16;       /* el logo */
  --brand-d: #A94C00;      /* naranja oscuro para texto sobre crema (eyebrow idea del día) */
  --buy: #E8740F;          /* comprar: naranja de marca (decisión del dueño 26-10) */
  --err: #C62828;
  --head: "Gelasio", Georgia, "Times New Roman", serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --r: 16px;
  --ease: cubic-bezier(.23, 1, .32, 1); /* ease-out fuerte: responde al instante y se posa suave */
  --shadow: 0 1px 2px rgba(31, 26, 23, .06), 0 8px 24px -12px rgba(31, 26, 23, .25);
  color-scheme: light;
}
html { font-size: 125%; -webkit-text-size-adjust: 100%; }
html[data-size="2"] { font-size: 143.75%; }
html[data-size="3"] { font-size: 162.5%; }
/* Letra grande en el móvil: las fotos y los iconos no crecen con la letra, para dejar sitio al texto. */
@media (max-width: 520px) {
  html[data-size="2"] .ph-img, html[data-size="3"] .ph-img { width: 64px; }
  html[data-size="3"] .pagehead { align-items: flex-start; }
  html[data-size="2"] .item img, html[data-size="2"] .item .noimg, html[data-size="3"] .item img, html[data-size="3"] .item .noimg { width: 56px; height: 56px; }
  html[data-size="3"] .lockeditem .lk { width: 36px; height: 36px; }
  html[data-size="3"] .item { gap: .5rem; }
  html[data-size="3"] .ph-title { overflow-wrap: anywhere; hyphens: auto; }
  html[data-size="3"] input::placeholder { font-size: .78em; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 .95rem/1.6 var(--body); -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
svg { width: 1.25em; height: 1.25em; flex: none; }
a { color: inherit; }
button { font: inherit; color: inherit; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.small { font-size: .82rem; color: var(--muted); margin: .4rem 0; }

/* ---------- cabecera verde (como la banda del libro) ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--cream); color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.top.scrolled { border-bottom-color: var(--rule); box-shadow: 0 2px 10px -6px rgba(31, 26, 23, .18); }
.top-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; padding: .3rem .8rem; }
.brand { display: flex; align-items: center; gap: .55rem; min-height: 44px; text-decoration: none; font: 800 1rem/1.1 var(--head); color: var(--brand-d); min-width: 0; } /* 44 px: se toca bien para volver al inicio. Nombre en naranja oscuro sobre crema */
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .mark { width: 2.1rem; height: 2.1rem; }
.top-r { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.hbtn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.8rem; min-width: 2.8rem; padding: 0 .9rem; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: .92rem; color: var(--ink); background: var(--card); border: 2px solid var(--rule); white-space: nowrap; }
.hbtn:active { transform: scale(.96); }
.hbtn.back svg { width: 1.4rem; height: 1.4rem; }
.flagbtn { padding: 0 .55rem; gap: .35rem; }
.hbtn .flag { width: 1.9rem; height: auto; border-radius: 3px; }
.flagbtn .chev { width: 1rem; height: 1rem; transform: rotate(90deg); opacity: .8; }

/* ---------- marco ---------- */
.frame { max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.frame.has-bar { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
#main { outline: none; }
.narrow { max-width: 28rem; margin: 0 auto; }
.narrow.wide-ok { max-width: 40rem; }
.h1 { font: 700 1.6rem/1.2 var(--head); color: var(--green-dark); margin: .4rem 0 .5rem; }
.h2 { font: 700 1.2rem/1.25 var(--head); color: var(--green-dark); margin: 1.4rem 0 .6rem; }
.h3 { font: 700 1.02rem/1.3 var(--head); color: var(--green-dark); margin: 1rem 0 .4rem; }
.lead { font-size: 1.05rem; color: var(--ink2); margin: 0 0 1.2rem; }
.note { background: var(--green-pale); border-radius: var(--r); padding: .8rem 1rem; color: var(--ink2); }
.err { background: #FDECEA; color: var(--err); border-radius: var(--r); padding: .8rem 1rem; font-weight: 800; margin: .5rem 0; }
.ok { display: flex; gap: .5rem; align-items: flex-start; background: var(--green-pale); color: var(--green-dark); border-radius: var(--r); padding: .8rem 1rem; font-weight: 800; }
.link { color: var(--green-dark); font-weight: 800; text-underline-offset: 4px; display: inline-block; padding: .6rem; }

/* ---------- botones: rellenos, con relieve, icono + texto ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.2rem; padding: .6rem 1.3rem; border-radius: 14px; border: 2px solid var(--rule); background: var(--card); color: var(--green-dark); font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; text-align: center; box-shadow: 0 3px 0 var(--rule); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rule); }
.btn svg { width: 1.4rem; height: 1.4rem; }
.btn .flag { width: 1.8rem; height: auto; border-radius: 3px; }
.btn.big { width: 100%; min-height: 3.7rem; font-size: 1.12rem; }
.btn.primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; box-shadow: 0 4px 0 #0d3320; }
.btn.primary:active { box-shadow: 0 1px 0 #0d3320; }
.btn.buy { background: var(--buy); border-color: var(--buy); color: #fff; box-shadow: 0 4px 0 #7c2d12; }
.btn.buy:active { box-shadow: 0 1px 0 #7c2d12; }
.btn.cook { background: var(--green-dark); border-color: var(--green-dark); color: #fff; box-shadow: 0 4px 0 var(--go-d); font-size: 1.2rem; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; width: 100%; }
.btn.danger { color: var(--err); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.loading { opacity: .7; pointer-events: none; }
.btn.loading::after { content: ""; width: 1.1rem; height: 1.1rem; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* ---------- bienvenida (país, entrar, nombre) ---------- */
.hello { display: flex; justify-content: center; margin: .6rem 0 0; }
.mark.big { width: 4.2rem; height: 4.2rem; }
.welcome { margin: -1rem -1rem 1.2rem; background: var(--cream-2); color: var(--ink); padding: 1.2rem 1rem 1.4rem; border-radius: 0 0 28px 28px; text-align: center; overflow: hidden; }
.welcome .collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; max-width: 30rem; margin: .2rem auto 1rem; }
.welcome .collage img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; border-radius: 14px; border: 3px solid var(--card); box-shadow: var(--shadow); }
.welcome .collage img:nth-child(odd) { transform: rotate(-3deg); }
.welcome .collage img:nth-child(even) { transform: rotate(3deg) translateY(6px); }
.welcome h1 { font: 800 1.75rem/1.15 var(--head); margin: .3rem 0 .4rem; color: var(--ink); }
.welcome p { margin: 0 auto; max-width: 26rem; color: var(--ink2); font-size: 1.02rem; }
.welcome.compact { padding: .7rem 1rem .9rem; margin-bottom: .9rem; }
.welcome.compact .collage { grid-template-columns: repeat(4, 3.3rem); justify-content: center; gap: .35rem; margin-bottom: .45rem; }
.welcome.compact .collage img { border-radius: 50%; border-width: 2px; transform: none !important; }
.welcome.compact h1 { font-size: 1.35rem; margin: .1rem 0 .2rem; }
.welcome.compact p { font-size: .9rem; }
.welcome.compact + .narrow .form { gap: .8rem; }
.tight { margin: .2rem 0 0; }
.promises { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0; margin: 1rem auto 0; max-width: 30rem; }
.promises li { display: grid; justify-items: center; gap: .3rem; background: rgba(255, 255, 255, .1); border-radius: 14px; padding: .6rem .3rem; font-size: .8rem; font-weight: 800; line-height: 1.25; }
.promises svg { width: 1.7rem; height: 1.7rem; color: var(--green-mid); }
.countries { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .4rem; }
@media (min-width: 700px) { .countries { grid-template-columns: repeat(4, 1fr); } .narrow:has(.countries) { max-width: 44rem; } }
.country { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .6rem .5rem; background: var(--card); border: 2px solid var(--rule); border-radius: var(--r); cursor: pointer; font: 800 1rem var(--body); box-shadow: var(--shadow); transition: transform .12s var(--ease); }
.country:active { transform: scale(.97); }
.country.on { border-color: var(--green-mid); background: var(--green-pale); }
.country .flag.big { width: 3.4rem; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.country .tick { position: absolute; top: .4rem; right: .4rem; color: #fff; background: var(--green-bright); border-radius: 50%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; }
.country .tick svg { width: 1.1rem; height: 1.1rem; }
.country small { font-weight: 700; color: var(--muted); font-size: .72rem; }

/* ---------- formularios ---------- */
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .4rem; }
.flabel { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--green-dark); }
.field small { color: var(--muted); font-size: .85rem; }
input { font: inherit; font-size: 1.12rem; width: 100%; min-height: 3.5rem; padding: .6rem 1rem; border: 2px solid #b9cfbd; border-radius: 14px; background: #fff; color: var(--ink); }
input:focus { border-color: var(--green-dark); outline: none; box-shadow: 0 0 0 4px rgba(92, 184, 92, .3); }
.inline { display: flex; gap: .5rem; }
.inline input { flex: 1; }
.shake { animation: shake .35s; }

/* ---------- banda de título de cada pantalla: «vous êtes ici» ---------- */
.pagehead { display: flex; align-items: center; gap: 1rem; margin: -1rem -1rem 1.2rem; padding: 1rem 1rem 1.2rem; background: var(--cream-2); border-bottom: 1px solid var(--rule); }
.pagehead.rose { background: #fdeceb; border-color: #f4cfcc; }
.ph-icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--green-dark); color: #fff; flex: none; }
.ph-icon svg { width: 1.8rem; height: 1.8rem; }
.rose .ph-icon { background: #c0392b; }
.ph-img { width: 5.4rem; height: auto; aspect-ratio: 595 / 842; object-fit: cover; border-radius: 6px 10px 10px 6px; box-shadow: var(--shadow); flex: none; }
.ph-txt { min-width: 0; }
.ph-title { font: 800 1.55rem/1.15 var(--head); color: var(--ink); margin: .1rem 0; }
.ph-sub { margin: .2rem 0 0; color: var(--ink2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .3rem; font-size: .85rem; font-weight: 800; color: var(--green-mid); }
.crumbs a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 3px; padding: .25rem 0; }
.crumbs i { display: flex; color: #9bb9a2; }
.crumbs i svg { width: 1rem; height: 1rem; }

/* ---------- inicio ---------- */
.hero { margin: -1rem -1rem 1.2rem; padding: 1.1rem 1rem 1.4rem; background: var(--cream); color: var(--ink); border-radius: 0 0 28px 28px; }
.hero-in { max-width: 46rem; margin: 0 auto; }
.hero-row { display: flex; align-items: center; gap: .7rem; }
.hero-mark { width: 3rem; height: 3rem; }
.greet { font: 800 clamp(1.8rem, 6vw, 2.5rem)/1.1 var(--head); letter-spacing: -.015em; margin: 0; color: var(--ink); } /* titular grande: tracking negativo, las letras no se alejan al crecer */
.ask { color: var(--ink2); margin: .5rem 0 .9rem; font-size: 1.05rem; }
.searchbar { position: relative; display: flex; gap: .5rem; align-items: stretch; }
.searchbar .si { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--green-mid); display: flex; pointer-events: none; }
.searchbar input { padding-left: 3rem; min-height: 3.6rem; border-radius: 14px; font-size: 1.08rem; }
.searchbar .btn { flex: none; min-height: 3.6rem; }
.hero .searchbar input { border-color: var(--rule); background: var(--card); }
.hero .searchbar .btn.primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; box-shadow: 0 4px 0 var(--go-d, #0F6A31); }
.searchbar.slim { margin: 0 0 1rem; }
.sec { max-width: 1240px; margin: 0 auto; }
.sech { display: flex; align-items: center; gap: .55rem; font: 700 1.3rem/1.2 var(--head); color: var(--green-dark); margin: 1.8rem 0 .9rem; }
.sech svg { width: 1.5rem; height: 1.5rem; color: var(--green-mid); }
.sech .count { margin-left: auto; font: 800 .8rem var(--body); color: var(--green-dark); background: var(--green-pale); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }

/* idea del día */
.idea { display: grid; max-width: 46rem; margin: 0 auto; background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 2px solid var(--rule); }
.idea > a { display: block; }
.idea img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.idea-in { padding: .9rem 1.1rem 1.1rem; display: grid; gap: .45rem; align-content: center; }
.idea-tag { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; background: #FFF1D6; color: #7a3d00; font-weight: 800; font-size: .82rem; border-radius: 999px; padding: .2rem .8rem; }
.idea-tag svg { width: 1.1rem; height: 1.1rem; }
.idea h3 { font: 700 1.45rem/1.2 var(--head); margin: 0; color: var(--green-dark); }
.idea-actions { display: grid; gap: .5rem; margin-top: .4rem; }
@media (min-width: 760px) { .idea { grid-template-columns: 1.1fr 1fr; } .idea img { height: 100%; aspect-ratio: auto; min-height: 16rem; } }

/* accesos rápidos con foto */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .7rem; }
.qt { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: var(--shadow); background: var(--green-dark); transition: transform .12s var(--ease); }
.qt img { width: 100%; height: 100%; object-fit: cover; }
.qt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .7rem .55rem; color: #fff; font: 800 1rem/1.2 var(--body); background: linear-gradient(transparent, rgba(10, 40, 24, .9)); display: flex; align-items: center; gap: .35rem; }
.qt span svg { width: 1.2rem; height: 1.2rem; }
.qt:active { transform: scale(.97); }

.resume { display: flex; align-items: center; gap: .9rem; max-width: 46rem; margin: 1.2rem auto 0; padding: .7rem; background: var(--card); border: 2px solid var(--rule); border-radius: 18px; text-decoration: none; box-shadow: var(--shadow); }
.resume img, .resume .ph-icon { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 12px; }
.resume div { display: grid; flex: 1; min-width: 0; }
.resume div > span { color: var(--green-mid); font-weight: 800; font-size: .82rem; }
.resume strong { font: 700 1.05rem/1.25 var(--head); color: var(--green-dark); }
.resume small { color: var(--muted); font-size: .82rem; }

/* estanterías de libros */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 1.3rem .9rem; }
.bk { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.bk-c { position: relative; aspect-ratio: 595 / 842; border-radius: 6px 12px 12px 6px; overflow: hidden; background: var(--green-pale); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .12), var(--shadow); transition: transform .15s var(--ease); }
.bk:active .bk-c { transform: scale(.97); }
.bk-c img { width: 100%; height: 100%; object-fit: cover; }
.bk strong { font: 700 .92rem/1.25 var(--head); color: var(--green-dark); margin-top: .35rem; }
.bk > span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .45rem; min-height: 2.8rem; border-radius: 12px; font-style: normal; font-weight: 800; font-size: .92rem; }
.bk-btn svg { width: 1.15rem; height: 1.15rem; }
.bk-btn.open { background: var(--green-dark); color: #fff; box-shadow: 0 3px 0 #0d3320; }
.bk-btn.unlock { background: #fff; color: var(--buy); border: 2px solid #f3c6ad; }
.resume .bk-btn { margin: 0; padding: 0 .9rem; flex: none; }
.bk.locked .bk-c img { filter: grayscale(.5) brightness(.9); }
.bk .lk { position: absolute; inset: auto .4rem .4rem auto; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--buy); color: #fff; }
.bk .lk svg { width: 1.2rem; height: 1.2rem; }
.bk.soon { opacity: .55; }
.nocover { display: grid; place-items: center; height: 100%; padding: .5rem; font: 700 .8rem var(--head); text-align: center; }
.offer { background: var(--mega-bg); color: #F0E9DF; border-radius: 22px; padding: 1.2rem; margin: 0 0 1.4rem; max-width: 34rem; box-shadow: var(--shadow); }
.offer h3 { font: 700 1.5rem/1.2 var(--head); margin: .3rem 0; color: #fff; }
.offer p { margin: 0 0 .9rem; }
.offer .small { color: #CFE6D4; text-align: center; margin: .7rem 0 0; }
.offer-tag { display: inline-block; line-height: 1.35; font-weight: 800; font-size: .85rem; color: #4a2205; background: #FFD08A; border-radius: 999px; padding: .2rem .8rem; margin: 0 0 .3rem; }
.offer-tag svg { width: 1.05rem; height: 1.05rem; vertical-align: -.18rem; margin-right: .3rem; }
/* Tarjeta al final del inicio (antes flotaba y tapaba el precio y «Je le veux»). */
.installbar { position: static; margin: 1.4rem auto 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; max-width: 40rem; margin: 0 auto; background: var(--card); border: 2px solid var(--green-mid); border-radius: 18px; padding: .7rem .9rem; box-shadow: 0 10px 30px -10px rgba(26, 83, 54, .5); animation: rise .3s var(--ease); }
.installbar .mark { width: 2.2rem; height: 2.2rem; }
.installbar p { flex: 1; margin: 0; font-weight: 800; min-width: 10rem; }
.installbar .btn.ghost { width: auto; }

/* ---------- libro y capítulos ---------- */
.chapters { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.chapters a { display: flex; align-items: center; gap: .9rem; padding: .55rem; padding-right: .8rem; background: var(--card); border: 2px solid var(--rule); border-radius: 18px; text-decoration: none; box-shadow: var(--shadow); transition: transform .12s var(--ease); }
.chapters a:active { transform: scale(.98); }
.chapters img, .chapters .noimg { width: 4.8rem; height: 4.8rem; border-radius: 12px; object-fit: cover; flex: none; }
.ch-txt { display: grid; flex: 1; min-width: 0; }
.ch-txt strong { font: 700 1.1rem/1.25 var(--head); color: var(--green-dark); overflow-wrap: anywhere; }
.ch-txt span { color: var(--muted); font-size: .85rem; }
.go { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--green-dark); color: #fff; flex: none; }
.items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.item { display: flex; align-items: center; gap: .9rem; padding: .45rem; padding-right: .7rem; border-radius: 16px; text-decoration: none; background: var(--card); border: 2px solid var(--rule); transition: transform .12s var(--ease); }
.item:active { transform: scale(.98); }
.item.cur { border-color: var(--green-bright); background: var(--green-pale); box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); }
.item img, .item .noimg { width: 4.2rem; height: 4.2rem; border-radius: 12px; object-fit: cover; flex: none; }
.noimg { display: grid; place-items: center; background: var(--green-pale); color: var(--green-mid); }
.it-txt { display: grid; min-width: 0; flex: 1; gap: .15rem; }
.it-txt strong { font-weight: 800; line-height: 1.3; color: var(--ink); }
.it-txt em { font-style: normal; color: var(--green-mid); font-size: .78rem; font-weight: 800; }
.item > svg { color: var(--green-mid); width: 1.4rem; height: 1.4rem; }
.chips-s { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.chip-s { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--ink2); font-weight: 700; }
.chip-s svg { width: 1rem; height: 1rem; color: var(--green-mid); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.2rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.9rem; padding: 0 1.1rem; border-radius: 999px; border: 2px solid var(--rule); background: var(--card); font-weight: 800; cursor: pointer; color: var(--green-dark); text-decoration: none; }
.chip svg { width: 1.1rem; height: 1.1rem; }
.chip.on { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.empty { display: grid; justify-items: center; text-align: center; gap: .5rem; padding: 2rem 1rem; color: var(--muted); }
.empty svg { width: 3.4rem; height: 3.4rem; color: #e3a19a; }

/* ---------- receta: la página del libro ---------- */
.recipe { max-width: 54rem; margin: 0 auto; }
.rband { margin: -1rem -1rem 1rem; padding: .8rem 1rem 1.2rem; background: var(--cream-2); color: var(--ink); border-radius: 0 0 26px 26px; position: relative; overflow: hidden; }
.rband .crumbs, .rband .crumbs a { color: var(--green-mid); }
.rband .crumbs i { color: var(--muted); }
.rtitle { font: 800 clamp(1.45rem, 5vw, 2rem)/1.15 var(--head); letter-spacing: -.01em; margin: .2rem 0 .6rem; color: var(--ink); position: relative; }
.pill { display: inline-block; background: var(--green-text); color: #fff; border-radius: 999px; padding: .2rem .9rem; font-weight: 800; font-size: .85rem; position: relative; }
.rband .leaf { position: absolute; right: -14px; top: -18px; width: 6rem; height: 6rem; opacity: .16; }
.rhead { display: grid; gap: 1rem; }
@media (min-width: 720px) { .rhead { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.photo { margin: 0; border-radius: 16px; overflow: hidden; background: var(--green-pale); aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.wide { aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.enbref { background: var(--green-pale); border-radius: 16px; padding: .9rem 1rem; }
.boxh { display: flex; align-items: center; gap: .45rem; font: 700 1.02rem/1.2 var(--head); color: var(--green-dark); margin: 0 0 .55rem; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .5rem; margin: 0 0 .5rem; }
.trio div { display: grid; justify-items: center; text-align: center; background: #fff; border-radius: 14px; padding: .55rem .3rem; border: 2px solid var(--rule); }
.trio i { color: var(--green-bright); display: flex; }
.trio i svg { width: 1.5rem; height: 1.5rem; }
.trio b { font: 800 1.3rem/1.15 var(--body); color: var(--green-dark); white-space: nowrap; }
.trio span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.checks { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .25rem; font-size: .9rem; }
.checks li { display: flex; align-items: center; gap: .45rem; }
.checks svg { width: 1.15rem; height: 1.15rem; color: #fff; background: var(--green-bright); border-radius: 50%; padding: 2px; }
.nutri { margin-top: .9rem; }
.nutri ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; font-size: .9rem; }
.nutri li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green-mid); margin-right: .45rem; vertical-align: .1rem; }
.actions { display: grid; gap: .6rem; margin: 1.1rem 0 .6rem; }
.actions .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.actions .row .btn { flex-direction: column; gap: .15rem; font-size: .82rem; padding: .45rem .3rem; min-height: 4rem; line-height: 1.15; }
.actions .btn[aria-pressed="true"] { background: #fdeceb; border-color: #f2b8b2; color: #b2332a; box-shadow: 0 3px 0 #f2b8b2; }
.divider { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .2rem; color: var(--rule); }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 3px dotted var(--rule); }
.divider svg { color: var(--green-mid); }
.cols { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 1.8rem; } .cols .stp { border-left: 2px solid var(--rule); padding-left: 1.6rem; } }
.bigh { font: 700 1.55rem/1.15 var(--head); color: var(--green-dark); margin: .6rem 0 .1rem; }
.forwho { font-style: italic; font-weight: 800; color: var(--green-mid); margin: 0 0 .6rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.tk { display: flex; gap: .7rem; align-items: flex-start; width: 100%; text-align: left; padding: .5rem .4rem; border: 0; background: transparent; border-radius: 12px; cursor: pointer; line-height: 1.45; }
.tk:active { background: var(--green-pale); }
.tk i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border: 2.5px solid var(--green-mid); border-radius: 50%; color: transparent; margin-top: .05rem; transition: background .15s, border-color .15s; }
.tk i svg { width: 1.1rem; height: 1.1rem; }
.tk[aria-pressed="true"] span { color: var(--muted); text-decoration: line-through; }
.tk[aria-pressed="true"] i { background: var(--green-bright); border-color: var(--green-bright); color: #fff; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: .4rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: .6rem .6rem .6rem .3rem; border-radius: 14px; cursor: pointer; transition: background .15s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green-text); color: #fff; font: 800 1.1rem var(--body); }
.steps li p { margin: .2rem 0 0; font-size: 1.04rem; line-height: 1.6; }
.steps li p b { color: var(--green-dark); white-space: nowrap; background: var(--green-pale); border-radius: 6px; padding: 0 .25rem; }
/* Ayuda «¿dónde está mi número de pedido?»: mismos círculos que los pasos de receta, pero no se pueden tocar. */
.steps.where { margin: .6rem 0 1.4rem; }
.steps.where li { cursor: default; }
.steps li.now { background: var(--green-pale); box-shadow: inset 4px 0 0 var(--green-bright); }
.done { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 14px; background: var(--green-pale); color: var(--green-dark); font-size: .95rem; line-height: 1.45; }
.done svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem; }
.done b { font-weight: 800; }
.trio small.alt { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-top: -.1rem; }
.tips { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--green-tips); border-radius: 18px; padding: 1rem 1.1rem; margin-top: 1.4rem; }
.tips .bulb { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--green-dark); color: #FFE08A; }
.tips .bulb svg { width: 1.7rem; height: 1.7rem; }
.tips h3 { font: 700 1.05rem var(--head); color: var(--green-dark); margin: .2rem 0 .3rem; }
.tips ul { margin: 0; padding-left: 1.1rem; }
.tips li { margin: .3rem 0; }
.tips li::marker { color: var(--green-mid); }
.disclaimer { font-size: .72rem; color: #7a8a7a; margin: 1.4rem 0 0; }
/* Aviso de supermercado: ingrediente difícil + sustituto fácil. Discreto, dentro de ingredientes. */
.swapbox { margin-top: 1rem; padding: .8rem .9rem; background: var(--cream-2); border: 2px solid var(--rule); border-radius: 16px; }
.swap-h { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font: 700 1rem var(--head); color: var(--ink); }
.swap-h svg { width: 1.25rem; height: 1.25rem; color: var(--green-dark); flex: none; }
.swap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.swap-list li { font-size: .98rem; line-height: 1.35; }
.swap-list b { color: var(--ink); }
.swap-list em { display: block; font-style: normal; color: var(--muted); font-size: .9rem; }
/* Mi nota: recuadro propio del cliente, cálido y claro. */
.rnote { margin-top: 1.4rem; }
.rnote-h { display: flex; align-items: center; gap: .5rem; font: 700 1.05rem var(--head); color: var(--ink); margin: 0 0 .5rem; }
.rnote-h svg { width: 1.4rem; height: 1.4rem; color: var(--green-dark); }
.rnote textarea { width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: .8rem .9rem; font: 400 1.02rem/1.4 var(--body); color: var(--ink); background: var(--cream-2); border: 2px solid var(--rule); border-radius: 16px; resize: vertical; }
.rnote textarea:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; border-color: var(--green-dark); }
.rnote-ok { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0; color: var(--green-dark); font-weight: 800; font-size: .9rem; }
.rnote-ok svg { width: 1.1rem; height: 1.1rem; }
.disclaimer b { color: var(--green-mid); }
.page .para { margin: .6rem 0; }
.page.card { background: var(--card); border-radius: 18px; padding: .4rem 1.1rem 1rem; border: 2px solid var(--rule); }
.bul { padding-left: 1.3rem; margin: .4rem 0 1rem; }
.bul li { margin: .3rem 0; }
.bul li::marker { color: var(--green-mid); }
.tbl { overflow-x: auto; margin: .6rem 0 1rem; }
table { border-collapse: collapse; width: 100%; background: var(--card); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--green-dark); color: #fff; font-weight: 800; }
tr:nth-child(even) td { background: #f6fbf6; }
.refline { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .75rem 1rem; margin: .45rem 0; background: var(--green-pale); border-radius: 12px; font-weight: 800; text-decoration: none; color: var(--green-dark); }
.eyebrow { display: inline-block; background: var(--green-text); color: #fff; border-radius: 999px; padding: .15rem .8rem; font-weight: 800; font-size: .85rem; margin: 0; }

/* hoja con la página original del libro */
dialog.pdfdlg { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: #3d4a41; }
dialog.pdfdlg[open] { display: flex; flex-direction: column; }
/* La barra cabe siempre: debajo de la cámara del móvil, botones que no se parten y el título que cede sitio. */
.pdf-top { flex: none; display: flex; align-items: center; gap: .5rem; padding: calc(.55rem + env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) .55rem max(.7rem, env(safe-area-inset-left)); background: var(--ink-head); color: #fff; }
.pdf-top strong { flex: 1; min-width: 0; font: 700 1rem var(--head); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-top .btn { flex: none; min-height: 3rem; padding: .3rem .9rem; font-size: 1rem; white-space: nowrap; }
.pdf-top .btn:not(.primary) { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; box-shadow: none; }
.pdf-top .btn.primary { background: #fff; color: var(--green-dark); border-color: #fff; box-shadow: none; }
@media (max-width: 400px) { .pdf-top strong { display: none; } .pdf-top { justify-content: space-between; } }
.pdf-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.pdf-pages { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; justify-items: center; align-content: start; gap: .8rem; padding: .8rem .5rem 2rem; }
.pdf-pages canvas { background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); border-radius: 4px; max-width: 100%; height: auto; }
.pdf-wait { color: #fff; font-weight: 800; margin-top: 3rem; }

/* libro entero en PDF, discreto al final del sumario */
.bookpdf { display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0 .4rem; padding: 1rem 1.1rem; border: 2px dashed var(--rule); border-radius: 16px; color: var(--green-dark); text-decoration: none; }
.bookpdf svg { flex: none; width: 1.8rem; height: 1.8rem; }
.bookpdf strong { display: block; font-weight: 800; }
.bookpdf small { display: block; color: var(--muted, #5b6b60); font-size: .9rem; margin-top: .1rem; }
.shelfgroup { margin-top: 1.4rem; }
.btn.more { width: 100%; margin-top: .9rem; }
/* Móvil: foto y flecha algo menores para que el título del capítulo quepa en dos líneas. */
@media (max-width: 520px) { .chapters img, .chapters .noimg { width: 72px; height: 72px; } .chapters .go { width: 2.2rem; height: 2.2rem; } .chapters a { gap: .7rem; } }
.shelfgroup:first-of-type { margin-top: .4rem; }

/* barra de abajo en la receta: anterior / sumario / siguiente */
.pager { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); background: #fff; border-top: 3px solid var(--rule); box-shadow: 0 -6px 18px -12px rgba(26, 83, 54, .5); }
.pg { display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 3.6rem; padding: .3rem .6rem; border-radius: 14px; background: var(--green-pale); color: var(--green-dark); text-decoration: none; font-weight: 800; font-size: .95rem; }
.pg:active { transform: scale(.97); }
.pg svg { width: 1.5rem; height: 1.5rem; }
.pg.mid { flex-direction: column; gap: 0; background: var(--green-dark); color: #fff; padding: .25rem 1rem; font-size: .85rem; }
.pg.mid small { font-size: .7rem; opacity: .85; font-weight: 700; }
.pg.mid svg { width: 1.3rem; height: 1.3rem; }
.pg.off { background: transparent; }

/* barra de pestañas: siempre en el mismo sitio, icono + palabra */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background: #fff; border-top: 3px solid var(--rule); box-shadow: 0 -6px 18px -12px rgba(31, 26, 23, .35); }
.tab { display: grid; justify-items: center; gap: .1rem; padding: .35rem .1rem; border-radius: 14px; text-decoration: none; color: var(--muted); font-weight: 800; font-size: .72rem; text-align: center; line-height: 1.15; }
.tab svg { width: 1.7rem; height: 1.7rem; }
.tab.on { background: var(--green-dark); color: #fff; }
.tab:active { transform: scale(.95); }
@media (min-width: 900px) { .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 34rem; bottom: .7rem; border: 3px solid var(--rule); border-radius: 22px; } }

/* ---------- modo cocina ---------- */
dialog.cookdlg { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--cream); color: var(--ink); }
dialog.cookdlg::backdrop { background: var(--ink-head); }
.ck { display: flex; flex-direction: column; height: 100%; max-width: 46rem; margin: 0 auto; overflow: hidden; }
.ck-top { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--ink-head); color: #fff; }
.ck-top strong { flex: 1; min-width: 0; font: 700 .85rem/1.2 var(--head); text-transform: uppercase; }
/* «Cerrar» no ocupa todo el ancho (los botones «ghost» son de ancho completo en otras pantallas): el título respira. */
.ck-top .btn { flex: none; width: auto; min-height: 2.8rem; padding: .3rem .8rem; color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); box-shadow: none; }
.ck-x { width: auto; color: #fff; }
.ck-bar { height: .55rem; background: var(--rule); }
.ck-bar span { display: block; height: 100%; background: var(--green-bright); transform-origin: left; transition: transform .35s var(--ease); } /* scaleX: sin recalcular el diseño en cada paso */
.ck-body { flex: 1; overflow: auto; padding: 1.2rem 1.2rem 1rem; }
.timers { display: grid; gap: .6rem; }
.ck-step { display: inline-block; background: var(--green-dark); color: #fff; font-weight: 800; border-radius: 999px; padding: .25rem 1rem; margin: 0 0 .8rem; }
.ck-text { font-size: 1.45rem; line-height: 1.5; margin: 0 0 1.2rem; }
.ck-text b { color: var(--green-dark); background: var(--green-pale); border-radius: 8px; padding: 0 .3rem; white-space: nowrap; }
.ticks.big .tk { font-size: 1.15rem; padding: .7rem .4rem; }
.ck-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: #fff; border-top: 3px solid var(--rule); }
.ck-nav .btn { min-height: 3.8rem; font-size: 1.02rem; min-width: 0; padding: .5rem .7rem; line-height: 1.2; }
.timerbtn { background: #FFF1D6; border-color: #F5C77A; color: #7a3d00; box-shadow: 0 4px 0 #F5C77A; }
.bravo { display: grid; justify-items: center; text-align: center; padding-top: 2rem; }
.tpill { display: flex; align-items: center; gap: .6rem; max-width: 100%; box-sizing: border-box; background: #FFF1D6; border: 2px solid #F5C77A; color: #7a3d00; border-radius: 16px; padding: .4rem .5rem .4rem .9rem; font-weight: 800; box-shadow: var(--shadow); }
.tpill b { font: 800 1.5rem var(--body); font-variant-numeric: tabular-nums; flex: 1; }
.tpill .btn { min-height: 2.6rem; padding: 0 .9rem; font-size: .9rem; }
#tpill { position: fixed; right: .8rem; bottom: calc(5.8rem + env(safe-area-inset-bottom)); z-index: 26; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; width: min(22rem, calc(100vw - 1.6rem)); }
.tp-host { padding: .5rem 1rem 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.ring { display: grid; place-items: center; width: 5rem; height: 5rem; margin: 0 auto .5rem; border-radius: 50%; background: var(--green-bright); color: #fff; animation: ring 1s ease-in-out 3; }
.ring svg { width: 2.6rem; height: 2.6rem; }

/* ---------- ayuda ---------- */
.box { background: var(--card); border: 2px solid var(--rule); border-radius: 18px; padding: .2rem 1.1rem 1.1rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.box .sech { margin-top: 1rem; font-size: 1.15rem; }
.step-ill { background: var(--green-pale); border-radius: 12px; padding: .8rem 1rem; font-weight: 800; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg button { display: grid; justify-items: center; align-content: center; gap: .3rem; padding: .55rem .3rem .5rem; min-height: 4.6rem; border-radius: 14px; border: 2px solid var(--rule); background: #fff; font-weight: 800; cursor: pointer; font-size: .85rem; color: var(--green-dark); }
.seg b { font-family: var(--head); line-height: 1; height: 2.1rem; display: flex; align-items: flex-end; } /* las 3 «A» apoyadas en la misma línea, con aire arriba */
.seg .s1 b { font-size: 1.2rem; } .seg .s2 b { font-size: 1.6rem; } .seg .s3 b { font-size: 2rem; }
.seg [aria-checked="true"] { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
/* «Mi freidora»: 3 opciones con texto (no la A de la letra); alto cómodo para el dedo. */
.seg3 button { min-height: 3.6rem; align-content: center; font-size: .92rem; line-height: 1.15; padding: .3rem .4rem; white-space: normal; }
.myfry { display: block; margin-top: .25rem; font-size: .76rem; font-weight: 800; color: var(--buy); }
.trio small.myfry { grid-column: 1 / -1; }
.devices { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.device { display: flex; align-items: center; gap: .9rem; background: var(--card); border: 2px solid var(--rule); border-radius: 16px; padding: .7rem .9rem; flex-wrap: wrap; }
.dv-ic { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--green-pale); color: var(--green-dark); flex: none; }
.device div { display: grid; flex: 1; }
.device div span { color: var(--muted); font-size: .88rem; }

/* ---------- hoja de oferta y avisos ---------- */
dialog.sheet { border: 0; padding: 0; width: min(34rem, 100%); max-width: 100%; max-height: 92vh; margin: auto auto 0; border-radius: 26px 26px 0 0; background: var(--cream); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(20, 17, 15, .62); backdrop-filter: blur(8px) saturate(120%); } /* el fondo se aleja de verdad detrás de la hoja (material, no solo oscurecer) */
.sheet-in { position: relative; padding: 3.6rem 1.2rem 1rem; display: grid; gap: .45rem; }
.sheet-in .h2 { margin: .2rem 0 0; font-size: 1.45rem; padding-right: 3rem; }
.sheet-in p { margin: 0; }
.sheet-x { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: var(--green-pale); color: var(--green-dark); cursor: pointer; }
.mini { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .45rem; max-height: 38vh; overflow: auto; }
.mini li { display: flex; gap: .7rem; align-items: center; }
.mini img { width: 2.6rem; height: auto; aspect-ratio: 595 / 842; border-radius: 4px; object-fit: cover; }
.mini span { display: grid; font-size: .82rem; color: var(--muted); }
.mini strong { color: var(--green-dark); font-size: .95rem; }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 26px; } }

/* ---------- tablet grande y ordenador: sumario a la izquierda, receta a la derecha ---------- */
.side { display: none; }
@media (min-width: 1100px) {
  .frame.split { display: grid; grid-template-columns: 20rem 1fr; gap: 1.8rem; align-items: start; }
  .split .side { display: block; position: sticky; top: 4.4rem; max-height: calc(100vh - 10rem); overflow: auto; padding: 1rem .4rem 1rem 0; }
  .side-h { display: flex; align-items: center; gap: .4rem; font: 700 1.05rem var(--head); color: var(--green-dark); margin: 0 0 .7rem; }
  .side .item { padding: .3rem; }
  .side .item img, .side .item .noimg { width: 3rem; height: 3rem; }
  .side .item strong { font-size: .85rem; }
  .side .chips-s, .side .item > svg { display: none; }
  .split .rband { margin-top: 0; border-radius: 22px; }
}
@media (max-width: 520px) { .nutri ul { grid-template-columns: 1fr; } .pager { gap: .35rem; padding-left: .4rem; padding-right: .4rem; } .pg { min-width: 0; padding: .3rem .35rem; font-size: .8rem; gap: .15rem; } .pg svg { width: 1.2rem; height: 1.2rem; } .pg.mid { padding: .2rem .5rem; font-size: .75rem; } .resume { flex-wrap: wrap; } .resume .bk-btn { flex: 1 1 100%; } .searchbar { flex-wrap: wrap; } .searchbar .si { top: 1.8rem; } .searchbar input { flex: 1 1 100%; } .searchbar .btn { flex: 1 1 100%; } .hide-s { display: none; } .brand span { font-size: .85rem; max-width: 9rem; } }

/* ---------- movimiento: suave, corto y solo para explicar lo que pasa ---------- */
.view { animation: viewIn .2s var(--ease) both; }
/* Escalonado corto y con tope: con 27 libros el último no espera un segundo. */
.stagger > * { animation: viewIn .24s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 30ms); }
.pop { animation: pop .32s var(--ease); }
.mark .steam path { animation: steam 2.4s ease-in-out infinite; }
.mark .steam path:nth-child(2) { animation-delay: .4s; }
.mark .steam path:nth-child(3) { animation-delay: .8s; }
/* La hoja (dialog.sheet) se anima más abajo con sheetUp/sheetDown (sube desde el borde de abajo y sale
   por el mismo sitio, salida más rápida). Antes había aquí un `rise` duplicado que quedaba anulado. */
dialog.cookdlg[open], dialog.pdfdlg[open] { animation: fadeIn .2s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes steam { 0%, 100% { transform: translateY(1px); opacity: .35; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
/* Movimiento reducido: nada se desplaza, pero las cosas siguen apareciendo con un fundido (sin saltos bruscos)
   y lo que avisa de que algo carga sigue girando. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .view, .stagger > *, dialog.sheet[open], dialog.cookdlg[open], dialog.pdfdlg[open], .installbar { animation: fadeIn .2s ease-out both !important; }
  .toast { animation: fadeIn .2s ease-out both !important; }
  .toast.out { animation: fadeOut .15s ease-in both !important; }
  .spinner, .btn.loading::after { animation: spin 1.4s linear infinite !important; }
}

/* ---------- imprimir una receta: como la página del libro ---------- */
@media print {
  html { font-size: 11pt; }
  body { background: #fff; }
  .top, .side, .pager, .tabbar, .actions, .installbar, #tpill, .crumbs, .small { display: none !important; }
  .frame { padding: 0; display: block !important; }
  .rband { margin: 0 0 .4cm; border-radius: 0 0 14px 14px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .enbref, .tips, .steps li::before, .trio div, .tk i, .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rhead { grid-template-columns: 1.1fr 1fr; }
  .photo { max-height: 7.5cm; aspect-ratio: auto; box-shadow: none; }
  .cols { grid-template-columns: .9fr 1.4fr; }
  .cols .stp { border-left: 2px solid var(--rule); padding-left: .6cm; }
  .steps li { padding: .1cm 0; }
}

/* ---------- v3: inicio sencillo, oferta única, candados que venden ---------- */
.hero.simple { padding: 1rem 1rem 1.2rem; }
.hero.simple .greet { font-size: clamp(1.7rem, 7vw, 2.3rem); }
.hero.simple .ask { margin: .35rem 0 .9rem; }
.searchlink { display: flex; align-items: center; gap: .7rem; min-height: 3.6rem; padding: 0 1.1rem; border-radius: 14px; background: #fff; color: var(--muted); font-size: 1.08rem; text-decoration: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.searchlink svg { color: var(--green-mid); width: 1.5rem; height: 1.5rem; }
.searchlink:active { transform: scale(.98); }
.booksbtn { max-width: 46rem; margin: 1.2rem auto 0; display: flex; justify-content: space-between; }
.booksbtn span { flex: 1; text-align: left; }
.homeoffer { max-width: 46rem; margin: 1.4rem auto 0; }
.homeoffer .offer { max-width: none; margin: 0; }
/* Mensaje de venta que cambia cada 2 días: tarjeta tranquila, sin rojo ni cuenta atrás. */
.sellmsg { display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 46rem; margin: 1.3rem auto 0; padding: .85rem 1rem; min-height: 56px; text-align: left; background: var(--cream-2); border: 2px solid var(--rule); border-radius: 18px; color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); transition: transform .14s var(--ease), border-color .14s var(--ease); }
.sellmsg .sm-ic { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--mint); color: var(--green-dark); }
.sellmsg .sm-ic svg { width: 1.35rem; height: 1.35rem; }
.sellmsg .sm-txt { flex: 1; min-width: 0; font-size: 1.02rem; line-height: 1.3; font-weight: 600; }
.sellmsg .sm-go { flex: none; display: inline-flex; align-items: center; gap: .2rem; color: var(--green-dark); font-weight: 800; font-size: .9rem; }
.sellmsg .sm-go svg { width: 1.1rem; height: 1.1rem; }
.sellmsg:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .sellmsg:hover { border-color: var(--green-dark); } }
@media (max-width: 520px) { .sellmsg .sm-go span, .sellmsg .sm-go { font-size: 0; gap: 0; } .sellmsg .sm-go svg { width: 1.3rem; height: 1.3rem; } }
.offer-lead { font-size: 1.02rem; color: #E6F3E8; }
.offer-list { list-style: none; padding: 0; margin: .2rem 0 1rem; display: grid; gap: .45rem; }
.offer-list li { display: flex; gap: .55rem; align-items: flex-start; font-weight: 700; }
.offer-list svg { width: 1.3rem; height: 1.3rem; flex: none; color: #fff; background: var(--green-dark); border-radius: 50%; padding: 3px; margin-top: .1rem; }
.offer-list.dark li { color: var(--ink); }
.covers-row { display: flex; gap: .35rem; align-items: center; margin: .6rem 0 .3rem; overflow: hidden; }
/* Las portadas encogen para que el «+6» se vea siempre, también con la letra muy grande. */
.covers-row img { flex: 1 1 0; min-width: 0; max-width: 2.9rem; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: var(--shadow); }
.covers-row span { flex: none; font-weight: 800; color: var(--green-dark); margin-left: .2rem; }
.idea-pic { position: relative; }
.idea-pic img { filter: saturate(.85); }
.idea-pic .lk, .lockeditem .lk { position: absolute; right: .7rem; bottom: .7rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--buy); color: #fff; }
.idea-tag.lockedtag { background: #FDE7DB; color: var(--buy); }
.teaser { margin-top: 1.6rem; padding-top: 1rem; border-top: 3px dotted var(--rule); }
.teaser-h { display: flex; align-items: center; gap: .5rem; font: 700 1.1rem/1.3 var(--head); color: var(--buy); margin: 0 0 .7rem; }
.teaser-h svg { width: 1.4rem; height: 1.4rem; flex: none; }
.teaser .offer { margin-top: 1rem; }
.lockeditem { position: relative; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.lockeditem img { filter: saturate(.8) brightness(.95); }
.lockeditem .lk { position: static; width: 2.3rem; height: 2.3rem; flex: none; }
.upsell { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: .9rem 1rem; border-radius: 16px; background: #FFF4EC; border: 2px solid #F6D3BE; }
.upsell div { display: grid; flex: 1; gap: .1rem; }
.upsell strong { font: 700 1.05rem var(--head); color: var(--buy); }
.upsell span { font-size: .9rem; color: var(--ink2); }
.upsell .btn { flex: none; }
.toast { position: fixed; left: 50%; bottom: calc(6.4rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 2rem); background: var(--ink-head); color: #fff; font-weight: 800; padding: .8rem 1.2rem; border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: rise .22s var(--ease); text-align: center; }
.toast.out { animation: fadeOut .15s ease-in forwards; }
/* Como popover (capa superior, encima de las hojas): se anulan los estilos del navegador para que quede igual. */
.toast[popover] { inset: auto; top: auto; right: auto; left: 50%; bottom: calc(6.4rem + env(safe-area-inset-bottom)); margin: 0; border: 0; width: max-content; height: auto; overflow: visible; color: #fff; background: var(--ink-head); }
.bk.new .bk-c { box-shadow: 0 0 0 4px var(--green-bright), var(--shadow); animation: pop .5s var(--ease) 2; }
.bk.new strong::after { content: ""; }
@media (max-width: 520px) { .shelf { grid-template-columns: 1fr 1fr; gap: 1.1rem .7rem; } .upsell { flex-wrap: wrap; } .upsell .btn { flex: 1 1 100%; } .tab svg { width: 1.55rem; height: 1.55rem; } }

/* ---------- urgencia y precio: mismo HTML y CSS que la landing de Francia ---------- */
:root { --land-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --land-red: #C62828; --land-ink: #1F1A17; --land-grey: #6B5E53; }
.cd { max-width: 520px; margin: 0 auto 14px; padding: 8px 12px; border-radius: 10px; background: #FFF1F1; text-align: center; line-height: 1.25; }
.cd-top { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--land-red); font-size: 15px; font-weight: 700; }
.cd-pill { background: var(--land-red); color: #fff; font-family: var(--land-head); font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.cd-clock { font-family: var(--land-head); font-size: 17px; font-weight: 800; color: var(--land-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-line { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--land-ink); }
.bb-total { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.bb-total .now { font-family: var(--land-head); font-size: 44px; font-weight: 800; line-height: 1; }
.bb-total .was { font-size: 17px; font-weight: 600; color: var(--land-grey); text-decoration: line-through; }
.bb-total .off { background: #DCF3E2; color: #0F5E2B; font-weight: 800; font-size: 15px; padding: 4px 10px; border-radius: 8px; }
.offer .bb-total .now { color: #fff; }
.offer .bb-total .was { color: #CFE6D4; }
.offer .cd { margin-top: .4rem; }
@media (max-width: 479px) {
  .bb-total { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 8px; }
  .bb-total .now { grid-column: 2; }
  .bb-total .was { grid-column: 3; justify-self: start; font-size: 15px; white-space: nowrap; }
  .bb-total .off { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 359px) { .bb-total .now { font-size: 38px; } }

/* ---------- oferta: confianza, no alarma. Un solo acento cálido (naranja de la marca), nada de rojo ni parpadeos ---------- */
/* Un público de 55-85 años lee el rojo que late y el «−63 %» como señal de estafa (lo dicen los avatares y AARP).
   Mantenemos la cuenta atrás (72 h de verdad) pero tranquila, y el candado en dorado = «está en el Méga», no «error». */
:root { --buy: #E8740F; }
.btn.buy { background: var(--buy); border-color: var(--buy); box-shadow: 0 4px 0 #B85A08; }
.btn.buy:active { box-shadow: 0 1px 0 #B85A08; }
.cd { background: #FFF7EC; border: 1px solid #F3D9B3; border-radius: 12px; padding: 10px 12px; box-shadow: none; animation: none; }
.cd-top { color: #8A5A12; font-size: 15px; }
.cd-pill { background: var(--buy); color: #fff; }
.cd-clock { color: var(--land-ink); font-size: 20px; letter-spacing: .02em; }
.cd-line { color: var(--land-grey); }
.offer .cd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.offer .cd-top { color: #FFE7C6; }
.offer .cd-clock { color: #fff; }
.offer .cd-line { color: #EADFD2; }
.bk .lk, .idea-pic .lk, .lockeditem .lk { background: #B8860B; }
.bk-btn.unlock { color: #8A5A12; border-color: #E8C98B; }
.teaser-h, .upsell strong { color: var(--green-dark); }
.upsell { background: #FBF6EC; border-color: #EAD9BD; }

/* Bajo el botón de compra, como en la landing: pago seguro y sin suscripción */
.under-btn { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .7rem 0 0; font-size: .82rem; font-weight: 800; }
.under-btn span { display: inline-flex; align-items: center; gap: .3rem; }
.under-btn svg { width: 1rem; height: 1rem; }
.offer .under-btn { color: #DCEFE0; }
.sheet .under-btn { color: var(--ink2); }

/* Detectar el autorrelleno del navegador (las casillas del código se pintan solas) */
input:-webkit-autofill { animation-name: autofill; animation-duration: .01s; }
@keyframes autofill { from { opacity: 1; } to { opacity: 1; } }

/* Entrar sin escribir: el aviso del correo y el código plegado como plan B */
/* Entrar: una línea que dice qué hace falta (correo + número de pedido), sin caja que empuje el formulario hacia abajo. */
.loginhint { margin: 0 0 1rem; text-align: center; font-size: 1.02rem; line-height: 1.5; color: var(--muted); }
.spinner { width: 3.2rem; height: 3.2rem; margin: 2rem auto; border: 5px solid var(--rule); border-top-color: var(--green-dark); border-radius: 50%; animation: spin .8s linear infinite; }

/* ---------- v4 (23-10): todo lo importante en la primera pantalla, sin deslizar ---------- */
/* Inicio: saludo con la cara de la marca de su país, cuántas recetas lleva, buscar y la idea con sus dos botones. */
.hero.simple { padding: .8rem 1rem 1rem; margin-bottom: .9rem; }
.hero-row { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; }
.hero-txt { flex: 1; min-width: 0; }
.hero.simple .greet { font-size: clamp(1.45rem, 6.2vw, 2.1rem); overflow-wrap: anywhere; }
.hero.simple .ask { display: flex; align-items: flex-start; gap: .35rem; margin: .3rem 0 0; font-size: .95rem; line-height: 1.35; }
.hero.simple .ask svg { width: 1.15rem; height: 1.15rem; color: var(--green-mid); margin-top: .1rem; }
.avatar { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); flex: none; background: var(--green-mid); }
.searchlink { min-height: 3.2rem; }
.idea-img { display: block; overflow: hidden; background: var(--green-pale); }
.idea img { aspect-ratio: 2 / 1; max-height: 30vh; width: 100%; object-fit: cover; }
.idea-in { padding: .7rem .95rem .95rem; gap: .35rem; }
.idea h3 { font-size: 1.28rem; }
.idea-actions { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); margin-top: .3rem; }
.idea-actions .btn { min-height: 3.3rem; padding: .45rem .6rem; font-size: 1rem; line-height: 1.15; }
.idea-actions .btn.big { width: auto; font-size: 1.02rem; }
.idea { transition: opacity .15s var(--ease); }
.idea.swap { opacity: .45; }
.idea.fresh { animation: fadeIn .22s ease-out both; }
@media (min-width: 760px) { .idea img { max-height: none; aspect-ratio: auto; } }

/* Esqueletos: el sitio reservado mientras carga, con un brillo lento. */
.sk { background: linear-gradient(90deg, #e4ede2 25%, #f1f6ef 37%, #e4ede2 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 12px; }
.sk-img { aspect-ratio: 2 / 1; max-height: 30vh; width: 100%; border-radius: 0; }
.sk-h { height: 1.7rem; width: 72%; }
.sk-l { height: 1rem; width: 90%; }
.sk-l.short { width: 42%; }
.sk-btn { height: 3.3rem; width: 100%; margin-top: .4rem; }
.idea.skel { pointer-events: none; }
.skel-page { max-width: 46rem; margin: 0 auto; display: grid; gap: .8rem; }
.skel-page .sk-img { border-radius: 16px; aspect-ratio: 16 / 10; }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Receta: título, foto, los 3 datos y «Empezar a cocinar» caben en la pantalla del móvil. */
.rband { padding: .5rem 1rem .85rem; margin-bottom: .8rem; border-radius: 0 0 22px 22px; }
.rcrumb { display: inline-flex; align-items: center; min-height: 2.2rem; color: var(--green-mid); font-weight: 800; font-size: .82rem; text-underline-offset: 3px; position: relative; }
.rtitle { text-transform: none; letter-spacing: 0; font-size: clamp(1.4rem, 5.8vw, 1.95rem); margin: 0; overflow-wrap: anywhere; }
.donebadge { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; background: var(--mint); color: var(--green-mid); border-radius: 999px; padding: .2rem .7rem; font-weight: 800; font-size: .8rem; position: relative; }
.donebadge svg { width: 1rem; height: 1rem; color: var(--green-dark); }
.rhead { gap: .7rem; }
.photo { aspect-ratio: 16 / 10; }
@media (max-width: 719px) { .photo { aspect-ratio: auto; height: min(30vh, 58vw); } }
.enbref { padding: 0; background: none; }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.trio:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio div { padding: .45rem .25rem .4rem; min-width: 0; background: var(--green-pale); border-color: var(--rule); }
.trio i svg { width: 1.3rem; height: 1.3rem; }
/* El dato nunca se sale de su caja: si no cabe, baja de tamaño o pasa a dos líneas. */
.trio b { font-size: clamp(.95rem, 4.4vw, 1.25rem); white-space: normal; overflow-wrap: anywhere; line-height: 1.15; text-align: center; }
.trio span { font-size: .72rem; line-height: 1.2; }
.checks { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin: .45rem 0 0; font-size: .85rem; }
.actions { margin: .8rem 0 .4rem; }
/* «La he hecho»: siempre disponible, al final de los pasos. */
.donebox { margin: 1.3rem 0 .4rem; }
.donebtn { border-color: var(--green-mid); color: var(--green-dark); }
.donebtn[aria-pressed="true"] { background: var(--green-pale); border-color: var(--green-bright); box-shadow: 0 3px 0 var(--green-bright); }
.donebtn[aria-pressed="true"] svg { color: #fff; background: var(--green-bright); border-radius: 50%; padding: 3px; }
.ck-nav:has(.donebtn) { grid-template-columns: 1fr; }
/* Nutrición: por 100 g y por ración, como en una etiqueta. */
.nutri2 { margin-top: 1.4rem; background: var(--card); border: 2px solid var(--rule); border-radius: 16px; padding: .9rem 1rem .6rem; }
.nutri2 .tbl { margin: .2rem 0 .4rem; }
.nutri2 table { font-size: .9rem; }
.nutri2 thead th { font-size: .78rem; text-align: right; padding: .45rem .55rem; }
.nutri2 thead th:first-child { background: var(--green-dark); }
.nutri2 tbody th { background: none; color: var(--ink); font-weight: 800; text-align: left; }
.nutri2 td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nutri2 tr.sub th { font-weight: 600; padding-left: 1.4rem; color: var(--ink2); }
.nutri2 .small { font-size: .74rem; }
/* Ayuda: el correo baja de línea en vez de salirse; los pasos para instalar, con el dibujo del botón. */
.btn > span { min-width: 0; }
.mailaddr { text-align: center; overflow-wrap: anywhere; color: var(--muted); font-size: .85rem; margin: .55rem 0 0; }
.isteps { list-style: none; padding: 0; margin: .4rem 0 .2rem; display: grid; gap: .55rem; }
.isteps li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .6rem; background: var(--green-pale); border-radius: 14px; padding: .6rem .7rem; font-weight: 700; line-height: 1.35; }
.isn { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--green-dark); color: #fff; font-weight: 800; font-size: .9rem; }
.isi { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: #fff; color: var(--green-dark); border: 2px solid var(--rule); }
.isi svg { width: 1.4rem; height: 1.4rem; }
.instbox { padding-top: 1rem; }
/* Sin conexión: una franja arriba que se va sola. */
.offbar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: calc(.35rem + env(safe-area-inset-top)) 1rem .35rem; background: #7a3d00; color: #fff; font-weight: 800; font-size: .85rem; transform: translateY(-100%); transition: transform .2s var(--ease); }
.offbar svg { width: 1.1rem; height: 1.1rem; }
body.offline .offbar { transform: none; }
/* Franja de «versión nueva»: abajo, discreta, con botón de actualizar. Encima de la barra de pestañas. */
.updbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: calc(.6rem + env(safe-area-inset-bottom)) 1rem .6rem; background: var(--ink-head); color: #fff; font-weight: 700; font-size: .95rem; }
.updbar .btn { min-height: 2.4rem; }
.updbar .btn.ghost { color: #fff; padding: .3rem .5rem; }
.updbar .btn.ghost svg { width: 1.2rem; height: 1.2rem; }
@media (min-width: 700px) { .updbar { left: auto; right: 1rem; bottom: 1rem; border-radius: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.25); } }
.neterr svg { color: var(--muted); }
.neterr .btn { max-width: 22rem; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none !important; } .idea.swap { opacity: .7; } }
@media print { .donebox, .nutri2 .small, .offbar { display: none !important; } .nutri2 { break-inside: avoid; } }
/* Más sitio en la primera pantalla del móvil (medido con el revisor automático en 390×700 y 360×640). */
@media (max-width: 520px) {
  .top-in { min-height: 3.1rem; padding: .2rem .7rem; }
  .hbtn { min-height: 2.6rem; }
  .tab { white-space: nowrap; font-size: .68rem; padding: .3rem 0; }
  .tab svg { width: 1.45rem; height: 1.45rem; }
  .tabbar { padding-top: .3rem; padding-bottom: calc(.3rem + env(safe-area-inset-bottom)); }
  .pg { min-height: 3.1rem; }
  .avatar { width: 3.7rem; height: 3.7rem; }
  .hero-row { margin-bottom: .6rem; }
  .hero.simple { margin-bottom: .7rem; }
  .idea img, .sk-img { max-height: 24vh; }
  .photo { height: min(24vh, 50vw); }
  .rband { padding-bottom: .7rem; }
}
/* Móviles estrechos (360 px): todo un 5 % más pequeño; sigue siendo letra grande. */
@media (max-width: 380px) { html { font-size: 118.75%; } }
.idea { position: relative; }
.idea-tag.over { position: absolute; top: .6rem; left: .6rem; z-index: 1; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45); }
/* Los 3 datos: icono y número en una línea, la palabra debajo. */
.trio div { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: .3rem; padding: .4rem .25rem; }
.trio span { grid-column: 1 / -1; }
.trio small.alt { grid-column: 1 / -1; }
.trio i svg { width: 1.15rem; height: 1.15rem; }
.actions .checks { justify-content: center; margin-top: .2rem; }
@media (max-width: 380px) { .idea img, .sk-img { max-height: 21vh; } .photo { height: min(21vh, 46vw); } }
.idea-actions .btn { white-space: nowrap; gap: .4rem; }
.idea-actions .btn svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 380px) { .idea-actions .btn { font-size: .92rem; padding: .4rem .45rem; } }
.idea-img img { transition: height .2s var(--ease); }
/* Los botones de la idea pueden partirse en dos líneas (nunca cortarse). */
.idea-actions .btn { white-space: normal; font-size: .95rem; line-height: 1.12; gap: .35rem; }
.hero.simple .greet { font-size: clamp(1.35rem, 5.6vw, 2rem); }
.hero.simple .ask { font-size: .9rem; }
/* Pestañas siempre del mismo ancho; con la letra muy grande, la palabra puede ir en dos líneas. */
.tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-size="3"] .tab { white-space: normal; font-size: .6rem; }
@media (max-width: 380px) { .idea h3 { font-size: 1.12rem; } .idea .chip-s { font-size: .74rem; } }
.idea-img[hidden], .photo[hidden] { display: none; }
/* Letra «Grande» en el móvil: lo grande es el texto; los márgenes, la cara y las cajas se recogen para que quepa. */
@media (max-width: 520px) {
  html[data-size="2"] .avatar, html[data-size="3"] .avatar { width: 3rem; height: 3rem; }
  html[data-size="2"] .hero.simple, html[data-size="3"] .hero.simple { padding: .55rem .9rem .75rem; }
  html[data-size="2"] .hero-row, html[data-size="3"] .hero-row { margin-bottom: .45rem; }
  html[data-size="2"] .searchlink, html[data-size="3"] .searchlink { min-height: 2.7rem; font-size: .95rem; }
  html[data-size="2"] .idea-in, html[data-size="3"] .idea-in { padding: .5rem .75rem .7rem; gap: .25rem; }
  html[data-size="2"] .idea h3, html[data-size="3"] .idea h3 { font-size: 1.05rem; }
  html[data-size="2"] .idea-actions .btn, html[data-size="3"] .idea-actions .btn { min-height: 2.9rem; font-size: .88rem; }
  html[data-size="2"] .tab, html[data-size="3"] .tab { font-size: .58rem; }
  html[data-size="2"] .tab svg, html[data-size="3"] .tab svg { width: 1.25rem; height: 1.25rem; }
  html[data-size="2"] .top-in, html[data-size="3"] .top-in { min-height: 2.7rem; }
  html[data-size="2"] .rtitle, html[data-size="3"] .rtitle { font-size: 1.25rem; }
  html[data-size="2"] .rcrumb, html[data-size="3"] .rcrumb { min-height: 1.8rem; font-size: .72rem; }
  html[data-size="2"] .trio div, html[data-size="3"] .trio div { padding: .25rem .2rem; }
  html[data-size="2"] .trio span, html[data-size="3"] .trio span { font-size: .62rem; }
  html[data-size="2"] .btn.cook, html[data-size="3"] .btn.cook { min-height: 3rem; font-size: 1rem; }
  html[data-size="2"] .pg, html[data-size="3"] .pg { min-height: 2.7rem; }
}
@media (max-width: 520px) { html[data-size="2"] .idea .chip-s, html[data-size="3"] .idea .chip-s { font-size: .68rem; } html[data-size="2"] .idea .chips-s, html[data-size="3"] .idea .chips-s { gap: .15rem .45rem; } }

/* ---------- v5 (24-10): auditoría UX para 55-85 años ---------- */
/* Botones de la receta: siempre del mismo ancho y alineados (3 en fila, o 2×2 si hay 4). */
.actions .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions .row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actions .row .btn { min-height: 4.2rem; }
.actions .row .donebtn[aria-pressed="true"] { background: var(--green-pale); border-color: var(--green-bright); color: var(--green-dark); box-shadow: 0 3px 0 var(--green-bright); }
/* Cabecera de la receta: hecha, su nota y la media */
.rmeta { display: flex; flex-wrap: wrap; gap: .35rem; position: relative; }
.rmeta:empty { display: none; }
.starsbtn { border: 0; cursor: pointer; min-height: 2.2rem; }
.donebadge.avg svg { color: #FFD166; }
.stars { display: inline-flex; gap: 1px; color: #F5B301; vertical-align: -.15em; }
.stars svg { width: 1.05em; height: 1.05em; }
.rband .stars { color: #FFD166; }
.it-txt .stars { font-size: .9rem; }
/* «¿Qué tal te ha salido?»: 5 estrellas grandes, fáciles de tocar */
.ratebar { display: flex; justify-content: center; gap: .3rem; margin: .8rem 0 .4rem; }
.rstar { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border: 0; background: none; color: #D8D2C6; cursor: pointer; border-radius: 12px; transition: transform .12s var(--ease), color .12s; }
.rstar svg { width: 2.6rem; height: 2.6rem; }
.rstar.on { color: #F5B301; }
.rstar:active { transform: scale(.9); }
/* Preguntas frecuentes: cortas, se abren al tocar */
.faq { border-top: 2px solid var(--rule); }
.faq:first-of-type { border-top: 0; }
.faq summary { min-height: 3rem; display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--green-dark); cursor: pointer; list-style: none; padding: .4rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--green-mid); }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 0 0 .8rem; color: var(--ink2); }
/* v6: la hoja de estrellas cabe en móvil pequeño y con letra grande */
.sheet-in > * { min-width: 0; }
.sheet-in.center .h2 { padding: 0 3rem; }
.ratebar { gap: .2rem; }
.rstar { flex: 1 1 0; width: auto; max-width: 3.4rem; height: auto; aspect-ratio: 1; }
.rstar svg { width: 80%; height: 80%; }
/* Favoritas vacía pero con recetas hechas: una línea, no el bloque grande */
.favhint { display: flex; align-items: center; gap: .6rem; color: var(--ink2); margin: .4rem 0 1rem; }
.favhint svg { flex: none; width: 1.8rem; height: 1.8rem; color: #E0A09A; }
/* Imprimir la página del libro: en papel solo sale esa página, a hoja completa */
#printpage { display: none; }
@media print {
  body.printing-page > :not(#printpage) { display: none !important; }
  body.printing-page #printpage { display: block; }
  /* Una página del libro = UNA hoja (26-10: en Safari se partía en dos y el número de página se cortaba).
     Cabe en A4 y en Letter (EE. UU.) aunque el navegador ponga sus márgenes: alto máx. 245 mm, centrada. */
  #printpage img { display: block; width: auto; max-width: 100%; height: auto; max-height: 245mm; margin: 0 auto; object-fit: contain; break-inside: avoid; break-after: page; }
  #printpage img:last-child { break-after: auto; }
}
/* Instalar: la recomendación de cómo hacerlo, encima de los pasos */
.instrec { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .6rem; font-weight: 700; color: var(--green-dark); line-height: 1.4; }
.instrec svg { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.instbox #other { margin-top: .6rem; width: 100%; }
/* Pantalla de instalar: tres botones para elegir el aparato */
.instwhere { margin: 0 0 .5rem; font-weight: 800; color: var(--green-dark); }
.insttabs { margin-bottom: 1rem; }
.insttabs button { font-size: 1rem; align-content: center; gap: .15rem; padding: .4rem; }
.insttabs small { font-weight: 600; font-size: .8rem; opacity: .85; }
/* Botones «Abrir» / «Desbloquear» siempre a la misma altura en cada fila, aunque el título ocupe más líneas en un idioma */
.shelf .bk-btn { margin-top: auto; }
.shelf .bk > span { margin-bottom: .45rem; }
/* Ayuda: dos partes con su título (Configuración / Ayuda) */
.grouph { font: 700 1.25rem/1.2 var(--head); color: var(--green-dark); margin: 1.4rem 0 .2rem; }
.grouph:first-child { margin-top: .2rem; }
/* Imagen del Méga Pack de su país en la oferta */
.offer-img { display: block; width: 100%; max-width: 21rem; height: auto; margin: 0 auto .9rem; border-radius: 14px; box-shadow: var(--shadow); }
.sheet .offer-img { max-width: 17rem; margin: .4rem auto 1rem; }
.upsell-img { flex: none; width: 4.2rem; height: auto; border-radius: 8px; }
/* Síguenos: discreto, al final */
.social { text-align: center; margin: 1.6rem 0 .6rem; }
.social p { margin: 0 0 .7rem; color: var(--muted); font-weight: 700; }
.social-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.sbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.2rem; border-radius: 999px; border: 2px solid var(--rule); background: #fff; color: var(--green-dark); font-weight: 800; text-decoration: none; }
.sbtn svg { width: 1.4rem; height: 1.4rem; }
.sbtn:active { transform: scale(.97); }
/* Los 3 datos (temperatura, tiempo, personas): el valor nunca se parte («200 °C» en una línea)
   y la letra se ajusta al ancho real del bloque, no al de la pantalla. */
.enbref { container-type: inline-size; }
.trio b { white-space: nowrap; overflow-wrap: normal; font-size: clamp(.95rem, 6.4cqi, 1.35rem); }
.trio span { line-height: 1.15; }
/* Con la foto al lado: los 3 datos uno debajo de otro, a la altura de la foto, sin hueco vacío. */
@media (min-width: 720px) {
  .rhead { align-items: stretch; }
  .rhead .enbref { display: flex; }
  .rhead .trio { flex: 1; grid-template-columns: 1fr !important; grid-auto-rows: 1fr; gap: .6rem; }
  .rhead .trio div { grid-template-columns: 2.4rem 1fr; justify-content: stretch; justify-items: start; align-content: center; text-align: left; column-gap: .8rem; padding: .5rem 1.1rem; }
  .rhead .trio i { grid-row: 1 / span 3; align-self: center; }
  .rhead .trio i svg { width: 1.9rem; height: 1.9rem; }
  .rhead .trio b { font-size: clamp(1.25rem, 8cqi, 1.75rem); }
  .rhead .trio span, .rhead .trio small.alt { grid-column: 2; font-size: .85rem; }
}
.insttabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insttabs button { min-width: 0; font-size: clamp(.82rem, 3.6vw, 1rem); line-height: 1.15; overflow-wrap: anywhere; padding: .45rem .3rem; }
/* Elegir país: bandera y nombre juntos, en filas compactas (los 11 países caben sin bajar tanto) */
.countries { gap: .5rem; }
@media (min-width: 700px) { .countries { grid-template-columns: repeat(3, 1fr); } }
.country { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; min-height: 3.6rem; text-align: left; }
.country .flag.big { flex: none; width: 2.6rem; border-radius: 4px; }
.country span { line-height: 1.15; overflow-wrap: anywhere; }
.country .tick { position: static; flex: none; margin-left: auto; width: 1.45rem; height: 1.45rem; }
.country .tick svg { width: .95rem; height: .95rem; }
.country span { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 400px) { .country { gap: .5rem; padding: .5rem .55rem; } .country .flag.big { width: 2.2rem; } .country span { font-size: .95rem; } }
.countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .countries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.country { min-width: 0; }
.country span { overflow-wrap: break-word; }
/* Receta: sin la línea del capítulo encima, el título necesita su aire arriba */
.rband { padding-top: 1.1rem; }
/* País elegido: la marca va en la esquina y no le quita sitio al nombre */
.country .tick { position: absolute; top: -.45rem; right: -.45rem; margin: 0; box-shadow: 0 0 0 3px var(--bg, #fff8ef); }
.country span { font-size: .95rem; }
@media (max-width: 400px) { .country span { font-size: .9rem; } .country .flag.big { width: 2rem; } }

/* ===== Inicio v2 (26-10): la cocina de quien lo usa, no una plantilla =====
   Lo único llamativo: la pantallita de la freidora con grados y minutos de la idea del día.
   Todo lo demás, tranquilo: foto a sangre, marcapáginas para «por dónde iba», portadas reales de sus libros. */
:root { --fry-bg: #0f2e1c; --fry-glow: #FFB46B; }

/* La idea del día: foto a todo el ancho, sin marco de tarjeta; el texto se apoya en la crema */
.idea { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; max-width: 46rem; }
.idea-img { border-radius: 22px; box-shadow: 0 14px 28px -18px rgba(15, 46, 28, .65); }
.idea img { aspect-ratio: 4 / 3; max-height: 34vh; }
.idea-in { padding: .9rem .2rem 0; gap: .55rem; }
.idea h3 { font-size: clamp(1.35rem, 5.6vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.idea-tag.over { top: .75rem; left: .75rem; background: var(--orange); color: #fff; font-size: .85rem; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.idea-tag.over svg { color: #fff; }
.idea-tag.over.lockedtag { background: #FDE7DB; color: var(--buy); }
@media (min-width: 760px) {
  .idea { grid-template-columns: 1.15fr 1fr; gap: 1.4rem; align-items: center; }
  .idea img { max-height: none; min-height: 17rem; }
  .idea-in { padding: 0; }
}

/* La pantallita de la freidora: dígitos cálidos sobre verde casi negro, como el aparato encendido */
.fryrow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: .1rem 0 .2rem; }
.fry { display: inline-flex; align-items: center; gap: .85rem; padding: .45rem 1rem .5rem; border-radius: 14px; background: var(--fry-bg); box-shadow: inset 0 0 0 2px rgba(255, 180, 107, .14), inset 0 -10px 18px -12px rgba(0, 0, 0, .6); }
.fry-v { display: inline-flex; align-items: baseline; gap: .15rem; color: var(--fry-glow); text-shadow: 0 0 10px rgba(255, 150, 60, .45); }
.fry-v b { font: 800 1.65rem/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fry-v i { font-style: normal; font-weight: 800; font-size: .85rem; opacity: .85; }
.fry-sep { width: 2px; align-self: stretch; margin: .2rem 0; background: rgba(255, 180, 107, .25); border-radius: 2px; }
.fry-serv { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink2); font-weight: 800; font-size: .95rem; }
.fry-serv svg { width: 1.25rem; height: 1.25rem; color: var(--green-mid); }
.idea-actions { margin-top: .5rem; }
.idea-actions #other { background: transparent; border-color: var(--rule); }

/* «Por dónde iba»: un marcapáginas con su cinta, no otra tarjeta más */
.resume.bookmark { position: relative; margin-top: 1.5rem; padding: .7rem .8rem .7rem 1.15rem; border-radius: 14px; border-width: 0 0 0 0; background: var(--green-pale); box-shadow: none; overflow: visible; }
.resume.bookmark::before { content: ""; position: absolute; left: .55rem; top: -.45rem; width: .9rem; height: 2.4rem; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.resume.bookmark img { width: 4rem; height: 4rem; margin-left: .55rem; }
.resume.bookmark div > span { color: var(--green-text); }

/* Sus libros: las portadas de verdad, un poco inclinadas como en una estantería, y el botón para verlos todos */
.homeshelf { max-width: 46rem; margin: 1.8rem auto 0; }
.hs-covers { display: flex; justify-content: center; align-items: flex-end; gap: .2rem; margin-bottom: -.6rem; padding: 0 1rem; position: relative; z-index: 1; }
.hs-covers:empty { display: none; }
.hs-covers a { display: block; width: 26%; max-width: 7.5rem; border-radius: 4px 9px 9px 4px; overflow: hidden; box-shadow: inset 4px 0 0 rgba(0, 0, 0, .14), 0 10px 18px -12px rgba(0, 0, 0, .6); transition: transform .15s var(--ease); }
.hs-covers a:nth-child(1) { transform: rotate(-5deg) translateY(4px); }
.hs-covers a:nth-child(2) { transform: translateY(-6px); z-index: 1; width: 29%; }
.hs-covers a:nth-child(3) { transform: rotate(5deg) translateY(4px); }
.hs-covers a:active { transform: scale(.97); }
.hs-covers img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: cover; }
.homeshelf .booksbtn { margin-top: 0; position: relative; padding-top: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .hs-covers a { transition: none; } }
/* Inicio v2, ajuste: todo cabe sin deslizar en el móvil (si no, fitFold quita la foto) */
.idea-in { padding-top: .65rem; gap: .4rem; }
.idea h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
.fryrow { flex-wrap: nowrap; gap: .7rem; }
.fry { gap: .6rem; padding: .3rem .75rem .35rem; border-radius: 12px; flex: none; }
.fry-v b { font-size: 1.35rem; }
.fry-v i { font-size: .78rem; }
.fry-serv { font-size: .9rem; min-width: 0; }
.idea-actions { margin-top: .25rem; }
@media (min-width: 760px) { .fry-v b { font-size: 1.7rem; } .fry { padding: .45rem 1rem .5rem; } }
.idea-actions #other { white-space: normal; gap: .35rem; padding-left: .4rem; padding-right: .4rem; text-align: center; line-height: 1.15; } /* «Une autre idée» puede ir en dos líneas, nunca cortarse */
.idea-actions #other svg { width: 1.2rem; height: 1.2rem; }
.fry-serv { white-space: nowrap; }
/* Marcapáginas: una sola fila tocable también en el móvil (la flecha basta, toda la fila es el enlace) */
.resume.bookmark { flex-wrap: nowrap; }
.resume.bookmark .bk-btn { flex: none; width: 2.9rem; min-height: 2.9rem; padding: 0; border-radius: 50%; font-size: 0; gap: 0; }
.resume.bookmark .bk-btn svg { width: 1.35rem; height: 1.35rem; }
.resume.bookmark strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Móvil pequeño: más sitio para el título (las palabras largas del neerlandés, «Zelfgemaakte», caben enteras). */
@media (max-width: 400px) { .resume.bookmark { gap: .6rem; } .resume.bookmark img { width: 3.3rem; height: 3.3rem; margin-left: .4rem; } .resume.bookmark strong { font-size: .95rem; } }
.resume.bookmark small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La oferta en el móvil: la imagen del pack no se come la pantalla */
@media (max-width: 520px) { .offer-img { max-width: 15rem; } .homeoffer .offer h3 { font-size: 1.35rem; } }
/* Fotos de receta: son cuadradas y se ven ENTERAS. El hueco de los lados se rellena con la misma foto desenfocada
   (nada de franjas vacías ni de platos cortados por arriba y por abajo). */
.idea-img, .photo { position: relative; isolation: isolate; }


/* ===== Sensación de app instalada (skill mobile-native) =====
   Los controles responden al instante (sin esperar el doble toque) y no se seleccionan al dejar el dedo encima;
   el texto de las recetas sí se puede seleccionar y copiar. */
a, [role="button"], .btn, .tab, .chip, .country, .bk, .item, .pg, .sbtn, .resume { touch-action: manipulation; }
button, .btn, .tab, .chip, .country, .pg, .sbtn, .seg button, .bk-btn, .tk { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-touch-callout: none; }

/* Inicio: atajos según su hogar («Para dos» / «Rápidas»), bajo el buscador, sobre la banda verde */
.hchips { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
.hchip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--card); border: 2px solid var(--rule); color: var(--ink); font-weight: 800; font-size: .92rem; text-decoration: none; transition: transform .12s var(--ease), background .15s; }
.hchip svg { width: 1.2rem; height: 1.2rem; color: var(--green-mid); }
.hchip:active { transform: scale(.97); background: var(--cream-2); }

/* ===== Hoja de oferta (skills animate + emil-design-eng) =====
   Móvil: hoja que sube desde el borde de abajo y sale por el mismo sitio (salida más rápida que la entrada).
   Pantalla grande: modal centrado (sin origen, así que escala desde el centro). Fondo con fundido. */
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
dialog.sheet[open] { animation: sheetUp .3s var(--ease-drawer); }
dialog.sheet.out { animation: sheetDown .2s var(--ease) forwards; }
dialog.sheet[open]::backdrop { animation: fadeIn .3s var(--ease); }
dialog.sheet.out::backdrop { animation: fadeOutBg .2s var(--ease) forwards; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeOutBg { to { opacity: 0; } }
@media (min-width: 700px) {
  dialog.sheet[open] { animation: modalIn .25s var(--ease); }
  dialog.sheet.out { animation: modalOut .18s var(--ease) forwards; }
}
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  dialog.sheet.out { animation: fadeOutBg .15s ease-out forwards !important; }
}
/* Atajos del inicio: en pantallas bajas se quitan (siguen en «Buscar») para que la idea del día quepa sin deslizar */
@media (max-height: 700px) and (max-width: 520px) { .hchips { display: none; } }

/* ===== Fotos de receta: cuadradas y ENTERAS, sin relleno =====
   La foto es una tarjeta cuadrada centrada; si la pantalla es baja, encoge entera (nunca se corta). */
.idea-img, .photo { aspect-ratio: 1 / 1 !important; width: min(100%, 46vh); height: auto !important; margin-inline: auto; }
.idea-img img, .photo img { width: 100%; height: 100% !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover !important; }
.photo.wide { width: min(100%, 56vh); }
@media (min-width: 720px) { .rhead .photo { width: 100%; } .idea-img { width: 100%; } }

/* ===== Cabecera: la cocinera del país a la derecha, en círculo y con aire alrededor (menos zoom) ===== */
/* Rueda de configuración arriba a la derecha (26-10: sustituye a la cocinera). 48 px: se toca bien. */
.hgear { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--card); color: var(--ink); border: 2px solid var(--rule); box-shadow: var(--shadow); text-decoration: none; transition: transform .12s var(--ease); touch-action: manipulation; }
.hgear svg { width: 1.55rem; height: 1.55rem; }
.hgear:active { transform: scale(.94); }

/* Panel del dueño: discreto, con borde discontinuo para que se vea que no es de los clientes */
.owner { border: 2px dashed #b9cfbd; background: #fbfdf9; }
.owner .seg { margin: .6rem 0 .8rem; }
.countries.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.countries.mini .country { min-height: 3rem; padding: .35rem .6rem; box-shadow: none; }
.countries.mini .country span { font-size: .85rem; }
@media (min-width: 700px) { .countries.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Instalar, paso a paso (una cosa por pantalla) ===== */
.install-wiz { text-align: center; padding-top: .6rem; }
.istep-of { margin: 0; color: var(--green-text); font-weight: 800; font-size: .95rem; }
.istep-dots { display: flex; justify-content: center; gap: .4rem; margin: .45rem 0 1rem; }
.istep-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rule); transition: transform .2s var(--ease), background .2s; }
.istep-dots i.past { background: var(--green-mid); }
.istep-dots i.on { background: var(--green-dark); transform: scale(1.35); }
.istep-head { font: 700 clamp(1.5rem, 6vw, 2rem)/1.15 var(--head); color: var(--green-dark); margin: 0 0 .3rem; }
.istep-sub { margin: 0 0 1.1rem; color: var(--ink2); }
.istep { display: grid; justify-items: center; gap: .5rem; padding: 1.2rem 1rem; background: var(--card); border: 2px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow); }
.istep .h1 { margin: .3rem 0 0; font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
.istep .lead { margin: 0; font-size: 1.05rem; line-height: 1.5; max-width: 30rem; }
.istep-icon { border-radius: 22px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.istep-art { width: 100%; display: grid; justify-items: center; margin-bottom: .3rem; }
.istep-nav { display: grid; gap: .5rem; margin-top: 1rem; }
.istep-nav .btn.primary svg { order: 2; }
/* Dibujo de la barra del navegador, con el botón que hay que tocar marcado */
.bbar { display: flex; justify-content: space-around; align-items: center; width: min(100%, 20rem); padding: .55rem .4rem; background: #f2f2f4; border: 1.5px solid #d9d9de; border-radius: 16px; }
.bbar-bottom { border-radius: 16px 16px 26px 26px; }
.bb-i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #3a6fd8; }
.bb-i svg { width: 1.5rem; height: 1.5rem; }
.bb-i.hit, .sheetmock .hit, .addmock .hit { position: relative; background: #fff; color: #1a5fd0; box-shadow: 0 0 0 3px var(--orange); }
.bb-i.hit::after, .sheetmock .hit::after, .addmock .hit::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(244, 124, 22, .6); animation: tapme 1.6s var(--ease) 3; }
@keyframes tapme { 0% { box-shadow: 0 0 0 0 rgba(244, 124, 22, .55); } 100% { box-shadow: 0 0 0 14px rgba(244, 124, 22, 0); } }
.sheetmock { display: grid; gap: .35rem; width: min(100%, 20rem); padding: .55rem; background: #f2f2f4; border-radius: 16px; border: 1.5px solid #d9d9de; }
.sheetmock span { display: flex; align-items: center; gap: .6rem; min-height: 2.6rem; padding: 0 .8rem; border-radius: 10px; background: #e7e7eb; color: #555; }
.sheetmock span.hit { justify-content: flex-start; }
.sheetmock svg { width: 1.3rem; height: 1.3rem; flex: none; }
.sheetmock b { font-weight: 800; color: #1c1c1e; text-align: left; }
.addmock { display: flex; align-items: center; justify-content: space-between; width: min(100%, 20rem); padding: .6rem .8rem; background: #f2f2f4; border-radius: 16px; border: 1.5px solid #d9d9de; }
.addmock img { border-radius: 12px; }
.addmock span { padding: .35rem .9rem; border-radius: 999px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .bb-i.hit::after, .sheetmock .hit::after, .addmock .hit::after { animation: none; } .istep-dots i { transition: none; } }
/* La etiqueta «La idea de hoy» va centrada sobre el borde de arriba de la foto (la foto ya no ocupa todo el ancho) */
.idea { position: relative; }
.idea-tag.over { left: 50%; top: -.55rem; transform: translateX(-50%); white-space: nowrap; z-index: 2; }
@media (min-width: 760px) { .idea-tag.over { left: 1.2rem; transform: none; top: .75rem; } }

/* ---------- Bienvenida a pantalla completa (una vez al día) ---------- */
dialog.hellodlg { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--cream); color: var(--ink); overflow: auto; }
dialog.hellodlg::backdrop { background: var(--cream); }
.hello-in { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); }
.hello-face { width: 46vw; max-width: 220px; height: 46vw; max-height: 220px; border-radius: 50%; object-fit: cover; object-position: center bottom; background: #284023; box-shadow: 0 14px 34px -14px rgba(0,0,0,.45), 0 0 0 4px #fff; animation: hello-rise .4s var(--ease, ease-out) both; }
.hello-h { font: 800 clamp(2.3rem, 12vw, 3.6rem)/1.05 "Poppins", var(--head); color: var(--green-dark); margin: .6rem 0 0; letter-spacing: -.01em; }
.hello-sub { font-size: 1.2rem; color: var(--ink2); margin: 0 0 1.2rem; animation: hello-rise .4s var(--ease, ease-out) .12s both; }
.hellodlg .btn.primary.big { width: 100%; max-width: 440px; }
.hello-links { display: flex; gap: 1.2rem 2rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }
.hello-links a, .hello-links button { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer; color: var(--green-dark); font: 700 1.1rem var(--body); text-decoration: underline; text-underline-offset: 5px; padding: .7rem .5rem; }
.hello-links svg { width: 1.3rem; height: 1.3rem; }
@keyframes hello-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) { .hello-h { font-size: 4rem; } .hello-face { max-width: 260px; max-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .hello-face, .hello-sub { animation: none; } }

/* La idea del día: el rótulo ya no flota sobre la foto; es un texto pequeño encima del título (petición del dueño). */
.idea-eyebrow { display: inline-flex; align-items: center; gap: .35rem; color: #A94C00; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .15rem; }
.idea-eyebrow svg { width: 1.05rem; height: 1.05rem; }
.idea-eyebrow.locked { color: #8A5A12; }

/* Idea del día: una sola acción principal a lo ancho; «Une autre idée» pasa a enlace de una línea debajo (no botón que se parte). */
.idea-actions { grid-template-columns: 1fr; gap: .35rem; }
.idea-actions .btn.big { width: 100%; }
.idea-actions #other { background: transparent; border: 0; box-shadow: none; color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; min-height: 2.6rem; white-space: nowrap; font-weight: 700; justify-content: center; }
.idea-actions #other svg { width: 1.15rem; height: 1.15rem; }

/* Receta en iPad/tablet: la foto no debe empujar «Je lance la recette» fuera de pantalla.
   Se limita el alto de la foto y los tres datos van en fila compacta, para que el botón de cocina quede visible. */
@media (min-width: 720px) {
  /* Una sola columna: foto arriba con alto FIJO (para que no empuje), datos en fila y el botón de cocina a la vista.
     Se usa !important para ganar a .rhead .trio (línea ~839) y a .photo img (línea ~984), que fuerzan el diseño antiguo. */
  .recipe .rhead { grid-template-columns: 1fr; gap: .8rem; }
  .recipe .rhead .photo { height: 13rem !important; max-height: 13rem !important; aspect-ratio: auto; }
  .recipe .rhead .photo img { height: 100% !important; aspect-ratio: auto !important; }
  .recipe .enbref { background: none; padding: 0; }
  .recipe .rhead .trio { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: .5rem; }
  .recipe .trio div { padding: .5rem .3rem; }
  .recipe .trio b { font-size: 1.2rem; }
  .recipe .actions { margin-top: .6rem; }
}

/* Panel del dueño: lista de estadísticas (clave a la izquierda, número a la derecha) */
.statlist { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
.statlist li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.statlist li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.statlist li b { color: var(--green-dark); font-variant-numeric: tabular-nums; flex: none; }

/* Modo cocina: chip fijo con grados/minutos (siempre a la vista) y texto del paso más grande (se lee a distancia). */
.ck-set { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem .9rem; padding: .6rem 1rem; background: var(--green-pale); border-bottom: 1px solid var(--rule); }
.ck-set span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--ink2); font-size: 1rem; }
.ck-set b { color: var(--green-dark); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ck-set svg { width: 1.3rem; height: 1.3rem; color: var(--green-bright); }
.ck-text { font-size: 1.7rem; line-height: 1.45; }
@media (max-width: 380px) { .ck-text { font-size: 1.5rem; } }
.ck-nav .btn span { white-space: normal; }

/* Lista de la compra (desde la receta): botón claro y la hoja con los ingredientes para marcar / WhatsApp / imprimir. */
.btn.shoplist { width: 100%; margin-top: 1rem; background: #DCF3E2; color: var(--green-dark); border: 2px solid #BFE6C9; box-shadow: none; }
.btn.shoplist:active { transform: scale(.98); }
.shoplist-items { margin: .4rem 0 1rem; }
#printshop { display: none; }
#printshop h1 { font-size: 20pt; margin: 0 0 4pt; }
#printshop h2 { font-size: 14pt; color: #000; font-weight: 700; margin: 0 0 10pt; }
#printshop ul { font-size: 14pt; line-height: 1.9; padding-left: 1.4em; }
#printshop li { margin-bottom: 5pt; }
@media print {
  body.printing-shop > *:not(#printshop) { display: none !important; }
  #printshop { display: block !important; }
}

/* Minutero: tiempo (fijo) + etiqueta de la receta (truncada) + botón de parar a la derecha. */
.tpill b.tp-time { flex: none; }
.tpill .tp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 700; opacity: .8; }
.tpill .btn { flex: none; }
@media (max-width: 420px) { .tpill .tp-label { display: none; } }

/* Panel de valoraciones del dueño — estilo Apple (números grandes, tarjetas sobrias, una idea por bloque). */
.orate-hero { display: grid; justify-items: center; gap: .3rem; text-align: center; padding: 1.1rem 1rem 1.3rem; margin: .2rem 0 .6rem; background: var(--cream-2); border: 1px solid var(--rule); border-radius: 20px; }
.orate-big { display: inline-flex; align-items: center; gap: .25rem; font: 800 clamp(2.6rem, 12vw, 3.6rem)/1 var(--head); letter-spacing: -.03em; color: var(--ink); }
.orate-big i { display: inline-flex; color: #E8A317; }
.orate-big i svg { width: clamp(1.8rem, 8vw, 2.4rem); height: auto; }
.orate-stars { display: inline-flex; gap: .15rem; color: #E8A317; }
.orate-stars svg { width: 1.3rem; height: auto; }
.orate-list { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.orate-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.orate-rtxt { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.orate-rtxt strong { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.orate-rtxt em { font-style: normal; font-size: .82rem; color: #8A7E70; overflow-wrap: anywhere; }
.orate-rb { flex: none; display: inline-flex; align-items: center; gap: .18rem; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.orate-rb i { display: inline-flex; color: #E8A317; }
.orate-rb i svg { width: 1.05rem; height: auto; }
.orate-rb small { font-weight: 700; font-size: .72rem; color: #8A7E70; margin-left: .15rem; }

/* Tarjeta «¿Te gusta? Deja una opinión» (Trustpilot) — estrellas grandes en ámbar, sin presión. */
.rv-stars { display: inline-flex; gap: .25rem; color: #E8A317; margin: .2rem 0 .4rem; }
.rv-stars svg { width: 1.8rem; height: auto; }

/* Instalar primero (26-10): el icono real de la app arriba del primer paso («así se verá en su móvil»)
   y la salida para quien no puede instalar, pequeña y abajo (texto subrayado, sin caja), pero con
   zona táctil de 44 px y buen contraste para que se pueda leer y tocar. */
.istep-appicon { display: block; margin: .2rem auto .8rem; border-radius: 22px; box-shadow: 0 12px 28px -14px rgba(31, 26, 23, .55); }
.istep-skip { display: block; margin: 1.1rem auto 0; min-height: 44px; padding: .5rem 1rem; background: none; border: 0; color: #6B6157; font: 700 .95rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.istep-skip:active { opacity: .6; }

/* Guía de instalación en UNA pantalla (26-10, el dueño no quiere deslizar): todo más compacto,
   medidas que se encogen con la altura de la pantalla (vh) para que quepa también en móviles bajos. */
.install-wiz { padding-top: .2rem; }
.istep-top { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 clamp(.4rem, 1.6vh, .9rem); }
.istep-top .istep-dots { margin: 0; }
.istep-hero { display: flex; align-items: center; gap: .8rem; text-align: left; margin: 0 0 clamp(.5rem, 1.8vh, 1rem); }
.istep-hero .istep-appicon { margin: 0; flex: none; width: clamp(52px, 8vh, 64px); height: auto; border-radius: 16px; }
.istep-hero .istep-head { font-size: clamp(1.2rem, 5vw, 1.6rem); margin: 0 0 .15rem; }
.istep-hero .istep-sub { margin: 0; font-size: .95rem; line-height: 1.35; }
.istep { gap: .35rem; padding: clamp(.7rem, 2vh, 1.1rem) .9rem; }
.istep .h1 { margin: .1rem 0 0; font-size: clamp(1.2rem, 4.8vw, 1.55rem); }
.istep .lead { font-size: 1rem; line-height: 1.42; }
.istep-art { margin-bottom: .1rem; }
.istep.done .istep-icon { width: clamp(64px, 11vh, 96px); height: auto; }
.istep-nav { margin-top: clamp(.6rem, 1.8vh, 1rem); }
.istep-nav.two { grid-template-columns: auto 1fr; align-items: stretch; }
.istep-nav.two #prev { min-width: 3.4rem; padding: 0 .8rem; }
.istep-skip { margin-top: clamp(.2rem, 1vh, .6rem); }

/* Minutero dentro del propio botón del paso (26-10): al pulsar, el recuadro pasa a contar. Cifras de ancho fijo
   (no baila cada segundo); «Parar» a la derecha. Tinta cálida para que se vea que está en marcha. */
.timerbtn.running { display: flex; align-items: center; justify-content: flex-start; gap: .7rem; background: var(--ink-head); border-color: var(--ink-head); color: #fff; box-shadow: 0 4px 0 #000; }
.timerbtn.running .tb-time { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.timerbtn.running .tb-stop { margin-left: auto; padding: .35rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .16); font-size: .95rem; }

/* Márgenes de impresión pequeños e iguales en todos los navegadores. */
@media print { @page { margin: 10mm; } body.printing-page { margin: 0; padding: 0; background: #fff; } body.printing-page #printpage { margin: 0; padding: 0; } }

/* Opinión sobre la app y «¿qué ha fallado?» (26-10). Letra ≥ 16 px: el iPhone no hace zoom al escribir. */
.optext { display: block; width: 100%; box-sizing: border-box; min-height: 5.5rem; margin: .4rem 0 .7rem; padding: .75rem .9rem; font: 1.05rem/1.45 var(--body); color: var(--ink); background: #fff; border: 2px solid var(--rule); border-radius: 14px; resize: vertical; }
.optext:focus { outline: none; border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(21, 128, 61, .18); }

/* Permiso de correos y SMS: una pantalla, lo que gana delante, botón grande y el «no» discreto (sin trucos). */
.consent-wiz { text-align: center; padding-top: clamp(.6rem, 4vh, 2.2rem); }
.con-ic { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin: 0 auto .8rem; border-radius: 50%; background: var(--cream-2); color: var(--green-dark); }
.con-ic svg { width: 2.1rem; height: 2.1rem; }
.consent-wiz .istep-sub { margin: 0 auto 1.2rem; max-width: 28rem; font-size: 1.02rem; line-height: 1.5; }
.consent-wiz .form { text-align: left; max-width: 26rem; margin: 0 auto; }
.consent-wiz > .btn.primary { width: min(100%, 26rem); }

/* Interruptores grandes en Configuración (correos y SMS). */
.toggle { display: flex; align-items: center; gap: .8rem; min-height: 3.2rem; padding: .3rem 0; font-weight: 700; cursor: pointer; }
.toggle input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 3.2rem; height: 1.9rem; margin: 0; border-radius: 999px; background: #D9D1C5; cursor: pointer; transition: background .2s var(--ease); }
.toggle input::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.toggle input:checked { background: var(--green-dark); }
.toggle input:checked::after { transform: translateX(1.3rem); }
.toggle input:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toggle input, .toggle input::after { transition: none; } }

/* Panel del dueño: opiniones. */
.op-list { list-style: none; margin: .2rem 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.op-row { padding: .7rem .9rem; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.op-head { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.op-head b { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.op-head span { font-size: .8rem; color: #8A7E70; }
.op-row p { margin: .35rem 0 0; line-height: 1.45; overflow-wrap: anywhere; }
/* Interruptor: el estilo general de «input» (ancho 100 %, alto 3,5 rem, borde) lo convertía en un círculo. */
.toggle input[type="checkbox"] { width: 3.2rem; height: 1.9rem; min-height: 0; padding: 0; border: 0; border-radius: 999px; box-shadow: none; font-size: 0; }
.toggle input[type="checkbox"]:focus { box-shadow: none; }