/* Doble Fondo. Papel blanco, tinta casi negra, verde y ámbar; Bodoni, Garamond y Gill Sans.
   Las superficies oscuras son las fotos (portada, receta) y la franja de fotos de usuarios.
   El movimiento es lento y discreto, y desaparece con «reducir movimiento». */
:root {
  --paper: #ffffff;
  --ink: #1e1d1a;
  --muted: #77726a;
  --green: #4e5d2f;
  --amber: #955b12;
  --rule: #c9c3b8;
  --night: #0b0b0b;
  --night-ink: #f4efe6;
  --night-muted: #b9b2a6;
  --night-amber: #d9a44a;
  --night-rule: #5a564f;
  /* Tipografías del Word. Se usan las instaladas en el equipo (Windows con Office, macOS, iOS);
     donde no existen, las equivalentes libres de Google Fonts. */
  --display: "Bodoni MT", "Bodoni 72", "Bodoni Moda", Didot, serif;
  --serif: Garamond, "EB Garamond", "Adobe Garamond Pro", Georgia, serif;
  --sans: "Gill Sans MT", "Gill Sans", Cabin, "Trebuchet MS", sans-serif;
  --measure: 68ch;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--paper);
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.label {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.27em;
  text-transform: uppercase; color: var(--green);
}
.label.amber { color: var(--amber); }
.label.muted { color: var(--muted); }
.display { font-family: var(--display); line-height: 1.02; }
.loading { padding-block: 18vh; }
.loading .display { font-size: 2.4rem; color: var(--muted); }

/* Encabezado de sección como big_heading del Word: Bodoni, subtítulo en cursiva, filete negro. */
.big-heading { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 24px; }
.big-heading h2 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1.1; }
.big-heading p { font-style: italic; color: var(--muted); font-size: 1.12rem; }

/* ---------- barra superior ---------- */
/* Fija en todo el sitio. En la portada empieza transparente sobre la foto y se vuelve blanca al bajar. */
:root { --top-h: 60px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 8; height: var(--top-h);
  background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.topbar-inner {
  max-width: 1180px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wordmark { font-family: var(--display); font-size: 1.55rem; text-decoration: none; white-space: nowrap; }
.topnav { display: flex; gap: 26px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-left: auto; }
.topnav a { text-decoration: none; color: var(--muted); padding-block: 6px; position: relative; transition: color 0.25s ease; }
.topnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after, .topnav a[aria-current="page"]::after { transform: scaleX(1); }
.topnav a[aria-current="page"] { color: var(--ink); }
.tools { display: flex; align-items: center; gap: 14px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; transition: background 0.25s ease; }
.icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
.nav-quiet { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.nav-quiet:hover { color: var(--ink); }
/* Idioma: las dos opciones a la vista, la activa marcada. */
.lang-sw { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; }
.lang-sw button { border: 0; background: none; padding: 4px 5px; color: var(--muted); opacity: 0.75; transition: color 0.2s ease, opacity 0.2s ease; }
.lang-sw button + button { border-left: 1px solid currentColor; }
.lang-sw button[aria-pressed="true"] { color: var(--ink); opacity: 1; font-weight: 600; }
.lang-sw.big { font-size: 0.8rem; letter-spacing: 0.08em; }
.lang-sw.big button { padding: 6px 12px; }
.badge {
  display: inline-block; min-width: 1.6em; padding: 0 0.4em; margin-left: 4px;
  border-radius: 999px; background: var(--amber); color: var(--paper);
  font-size: 0.7rem; letter-spacing: 0; text-align: center; line-height: 1.55;
}
/* Interruptor de versión (Esencial / De autor): primer filtro del sitio, siempre a mano. */
.nivel-sw { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 2px; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; flex: none; }
.nivel-sw button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; color: inherit; opacity: 0.7; transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s; }
.nivel-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); opacity: 1; }
body.home .topbar { position: fixed; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; color: var(--night-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home .topnav a, body.home .lang-sw button, body.home .nav-quiet { color: var(--night-ink); }
body.home .lang-sw button[aria-pressed="true"] { color: var(--night-ink); }
body.home .nivel-sw button[aria-pressed="true"] { background: var(--night-ink); color: var(--night); }
body.home .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
body.home.scrolled .topbar { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--rule); color: var(--ink); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
body.home.scrolled .topnav a, body.home.scrolled .lang-sw button, body.home.scrolled .nav-quiet { color: var(--muted); }
body.home.scrolled .topnav a:hover, body.home.scrolled .lang-sw button[aria-pressed="true"] { color: var(--ink); }
body.home.scrolled .nivel-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; background: var(--amber); transform: scaleX(0); transform-origin: left; display: none; }
body.receta .progress { display: block; }

/* Barra inferior (celular) y hoja «Más» */
.tabs { display: none; }
.sheet { position: fixed; inset: auto 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0; z-index: 12; background: var(--paper); border-top: 1px solid var(--ink); padding: 18px max(16px, env(safe-area-inset-left)) 22px; display: grid; gap: 16px; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.08); animation: subir 0.3s var(--ease) both; }
.sheet a { text-decoration: none; color: var(--ink); padding-block: 4px; }
.sheet-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-transform: none; letter-spacing: 0; }

/* ---------- buscador global ---------- */
.search-ov { position: fixed; inset: 0; z-index: 30; background: rgba(20, 19, 17, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.22s ease; }
.search-ov.open { opacity: 1; }
.so-panel { background: var(--paper); max-width: 760px; margin: 9vh auto 0; padding: 22px 26px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25); transform: translateY(-14px); transition: transform 0.3s var(--ease); max-height: 80vh; overflow: auto; }
.search-ov.open .so-panel { transform: none; }
.so-top { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.so-top input { flex: 1; border: 0; background: none; font-family: var(--display); font-size: clamp(1.4rem, 3.6vw, 2rem); color: var(--ink); min-width: 0; padding: 4px 0; border-radius: 0; }
.so-top input:focus { outline: none; }
.so-top input::placeholder { color: var(--rule); font-style: italic; }
.so-res { display: grid; gap: 2px; padding-top: 16px; }
.so-res .label { margin: 4px 0 8px; }
.so-sep { margin-top: 18px !important; }
.so-row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 8px; margin-inline: -8px; text-decoration: none; transition: background 0.2s ease; }
.so-row:hover, .so-row:focus-visible { background: #f6f3ec; }
.so-row img, .so-row > span:first-child { width: 56px; height: 56px; object-fit: cover; background: var(--night); }
.so-row small { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.so-row b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; }
.so-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.so-chips .chip { text-decoration: none; }
.so-empty { color: var(--muted); font-style: italic; padding: 10px 0; }
body.buscando { overflow: hidden; }

/* ---------- portada ---------- */
.masthead { padding-block: 60px 30px; display: grid; gap: 12px; }
.masthead h1 { font-size: clamp(3.4rem, 10vw, 6.6rem); }
.masthead .lede { font-style: italic; color: var(--muted); max-width: 52ch; font-size: 1.25rem; }
.hero { position: relative; min-height: min(94vh, 880px); color: var(--night-ink); background: var(--night); display: flex; align-items: flex-end; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.94; animation: kb 22s var(--ease) both; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,11,0.9) 0%, rgba(11,11,11,0.3) 48%, rgba(11,11,11,0.45) 100%); }
.hero .in { position: relative; z-index: 2; padding-bottom: 64px; width: 100%; }
.hero .in > * { animation: up 1s var(--ease) both; }
.hero .in > :nth-child(2) { animation-delay: 0.12s; }
.hero .in > :nth-child(3) { animation-delay: 0.24s; }
.hero .in > :nth-child(4) { animation-delay: 0.36s; }
.hero .in > :nth-child(5) { animation-delay: 0.44s; }
.hero .k { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--night-amber); }
.hero h1 { font-family: var(--display); font-size: clamp(3rem, 9vw, 7rem); line-height: 0.98; margin-top: 16px; }
.hero h1 em { display: block; font-size: 0.42em; line-height: 1.12; margin-top: 12px; max-width: 26ch; }
.hero .f { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--night-muted); margin-top: 22px; }
.hero .acts { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero .btn { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); text-decoration: none; display: inline-block; }
.hero .btn:hover { background: transparent; color: var(--night-ink); }
.hero .btn.ghost { background: none; color: var(--night-ink); }
.hero .btn.ghost:hover { background: var(--night-ink); color: var(--night); }
.hero .tr { position: absolute; right: max(16px, 4vw); bottom: 64px; z-index: 2; display: none; align-items: center; gap: 14px; text-decoration: none; padding: 10px 16px 10px 10px; border: 1px solid var(--night-rule); background: rgba(11, 11, 11, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.3s ease, background 0.3s ease; animation: up 1s 0.6s var(--ease) both; }
.hero .tr:hover { border-color: var(--night-amber); background: rgba(11, 11, 11, 0.7); }
.hero .tr img { width: 64px; height: 64px; object-fit: cover; }
.hero .tr .k { display: block; margin-bottom: 4px; font-size: 0.6rem; }
.hero .tr b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; display: block; line-height: 1.1; max-width: 16ch; }
@media (min-width: 900px) { .hero .tr { display: flex; } }
.cue { position: absolute; left: 50%; bottom: 18px; z-index: 2; width: 1px; height: 34px; background: rgba(244, 239, 230, 0.35); overflow: hidden; }
.cue::after { content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: var(--night-ink); animation: cue 2.2s ease-in-out infinite; }
.rcover { min-height: min(80vh, 760px); }
.rcover .in { padding-bottom: 48px; }
.rcover h1 { font-size: clamp(2.9rem, 8.4vw, 6.2rem); }
.rcover .sub { font-style: italic; color: var(--night-amber); font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-top: 16px; }
.rcover .f { text-transform: none; letter-spacing: 0.06em; font-size: 0.82rem; max-width: 70ch; border-top: 1px solid var(--night-rule); padding-top: 14px; }
.rcover .rating { color: var(--night-muted); margin-top: 8px; }
/* Carriles */
.rail { padding-top: 56px; }
.rail-h, .sec-t { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; }
.rail-h h2, .sec-t { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.rail-h a, .link-arrow { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.2s ease; }
.rail-h a::after { content: " →"; display: inline-block; transition: transform 0.3s var(--ease); }
.rail-h a:hover { color: var(--ink); }
.rail-h a:hover::after { transform: translateX(4px); }
.track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-bottom: 14px; scrollbar-width: none; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.track::-webkit-scrollbar { display: none; }
.tc { flex: 0 0 min(72vw, 270px); scroll-snap-align: start; text-decoration: none; display: grid; gap: 7px; align-content: start; min-width: 0; }
.tc .im { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); }
.tc img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.4s ease; }
.tc:hover img { transform: scale(1.05); filter: brightness(1.04); }
.tc small { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-top: 4px; }
.tc b { font-family: var(--display); font-weight: 400; font-size: 1.22rem; line-height: 1.16; transition: color 0.25s ease; }
.tc:hover b { color: var(--green); }
.tc i { color: var(--muted); font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc .rating { font-size: 0.74rem; }
.tc .initial { display: grid; place-items: center; height: 100%; font-family: var(--display); font-style: italic; font-size: 3.2rem; color: var(--night-muted); }
.tc.soon .im { background: transparent; border: 1px dashed var(--rule); display: grid; place-items: center; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.tc.soon b { color: var(--muted); }
/* Tiempo y presentación */
.tiempos, .que { padding-top: 64px; }
.sec-t { border-bottom: 1px solid var(--ink); margin-bottom: 22px; }
.tiempo3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 0; }
.tiempo3 a { padding: 26px 24px 28px; text-decoration: none; display: grid; gap: 6px; border-left: 1px solid var(--rule); transition: background 0.3s ease; }
.tiempo3 a:first-child { border-left: 0; padding-left: 0; }
.tiempo3 a:hover { background: #faf8f3; }
.tiempo3 .n, .que3 .n { font-family: var(--display); color: var(--amber); font-size: 1.1rem; }
.tiempo3 b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.tiempo3 span:last-child { color: var(--muted); font-style: italic; }
.que3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.que3 h3 { font-family: var(--display); font-size: 1.45rem; margin: 6px 0 8px; }
.que3 p { color: var(--muted); }
.mesa { margin-top: 72px; background: var(--night); color: var(--night-ink); padding: 56px 0; }
.mesa .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.mesa .label { color: var(--night-amber); }
.mesa h2 { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 2.8rem); margin: 10px 0 12px; }
.mesa p { color: var(--night-muted); }
.mesa .fr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mesa .fr div { aspect-ratio: 4 / 5; border: 1px dashed var(--night-rule); display: grid; place-items: center; color: var(--night-amber); }
/* Pie */
.pie { border-top: 1px solid var(--ink); padding-block: 44px 40px; margin-top: 80px; font-family: var(--sans); font-size: 0.8rem; }
.mesa + .pie { margin-top: 0; border-top: 0; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; align-items: start; }
.pie-marca { font-family: var(--display); font-weight: 400; font-size: 1.7rem; display: block; margin-bottom: 4px; }
.pie-grid p { color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.02rem; }
.pie nav { display: grid; gap: 8px; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; }
.pie nav a { text-decoration: none; color: var(--muted); }
.pie nav a:hover { color: var(--ink); }
.pie-lang { display: grid; gap: 10px; justify-items: start; }
.pie-sw { display: inline-flex; gap: 0; }
.pie-sw button { border: 1px solid var(--rule); background: none; padding: 6px 12px; font-family: var(--sans); font-size: 0.74rem; color: var(--muted); }
.pie-sw button + button { border-left: 0; }
.pie-sw button[aria-pressed="true"] { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.pie-nota { grid-column: 1 / -1; font-size: 0.85rem !important; padding-top: 18px; border-top: 1px solid var(--rule); }

/* ---------- índices (platos y tragos) ---------- */
.ph { padding: 64px 0 18px; display: grid; gap: 8px; }
.ph h1 { font-family: var(--display); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; }
.ph .lede { font-style: italic; color: var(--muted); font-size: 1.2rem; max-width: 56ch; }
/* Sin backdrop-filter: crearía un bloque contenedor y la hoja de opciones (fixed) del celular quedaría pegada arriba. */
.fb { position: sticky; top: var(--top-h); z-index: 6; background: var(--paper); padding-block: 12px; border-bottom: 1px solid var(--rule); }
.fb-in { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fsels { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fsel { position: relative; }
.fpill { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); padding: 8px 34px 8px 16px; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); position: relative; transition: border-color 0.2s ease, background 0.2s ease; }
.fpill::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease); }
.fpill[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.fpill:hover { border-color: var(--ink); }
.fpill .fl { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.fpill.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fpill.on .fl { color: var(--night-muted); }
.fpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 9; min-width: 250px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); padding: 6px; display: grid; animation: pop 0.22s var(--ease) both; }
.fpop button { display: flex; justify-content: flex-start; gap: 10px; align-items: baseline; border: 0; background: none; text-align: left; padding: 9px 12px; font-size: 1.05rem; transition: background 0.15s ease; }
.fpop button::before { content: ""; width: 10px; flex: none; font-size: 0.55rem; color: var(--amber); align-self: center; }
.fpop button:hover:not([disabled]) { background: #f6f3ec; }
.fpop button[aria-pressed="true"] { color: var(--green); }
.fpop button[aria-pressed="true"]::before { content: "●"; }
.fpop button[disabled] { color: var(--rule); cursor: default; }
.fpop small { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin-left: auto; padding-left: 16px; }
.fq-wrap { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); color: var(--muted); transition: border-color 0.2s; }
.fq-wrap:focus-within { border-color: var(--amber); color: var(--ink); }
.fq { border: 0; font-family: var(--serif); font-size: 1.08rem; padding: 6px 0; background: none; width: 230px; border-radius: 0; color: var(--ink); }
.fq:focus { outline: none; }
.fq::placeholder { color: var(--muted); font-style: italic; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 22px; padding-top: 8px; }
.grid .tc { flex: none; }
.cnt { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); padding-block: 22px 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.chip { cursor: pointer; border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: 4px 13px; font-family: var(--sans); font-size: 0.82rem; color: var(--ink); transition: border-color 0.2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.empty-state { padding-block: 48px; display: grid; gap: 10px; max-width: var(--measure); }
.empty-state h2 { font-family: var(--display); font-size: 1.9rem; }
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin: 18px 0 48px; text-decoration: none; border: 1px solid var(--ink); }
.feature .im { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); max-height: 640px; }
.feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature:hover img { transform: scale(1.04); }
.feature .tx { padding: 44px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.feature h2 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; }
.feature h2 em { display: block; font-size: 0.55em; margin-top: 6px; }
.feature .sub { font-style: italic; color: var(--amber); font-size: 1.2rem; }
.feature .f { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.foto-usuario { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center; margin-block: 64px 10px; padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fu-frame { aspect-ratio: 4 / 5; border: 1px dashed var(--amber); display: grid; place-items: center; color: var(--amber); }
.foto-usuario h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: 6px; }
.foto-usuario p { color: var(--muted); margin-bottom: 14px; }

/* ---------- movimiento ---------- */
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cue { 0% { top: -100%; } 60%, 100% { top: 100%; } }
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv .tc, .rv .tiempo3 > a, .rv .que3 > div { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease) var(--d, 0ms), transform 0.8s var(--ease) var(--d, 0ms); }
.rv.in .tc, .rv.in .tiempo3 > a, .rv.in .que3 > div { opacity: 1; transform: none; }
.rv.in .tc img { transition: transform 0.9s var(--ease), filter 0.4s ease; }
::view-transition-old(root) { animation: 0.22s ease both vt-out; }
::view-transition-new(root) { animation: 0.38s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.btn { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn:not([disabled]):hover { background: transparent; color: var(--ink); }
.btn.ghost:not([disabled]):hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .rv .tc, .rv .tiempo3 > a, .rv .que3 > div { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .tiempo3, .que3, .mesa .wrap, .feature, .pie-grid { grid-template-columns: 1fr; }
  .tiempo3 a { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .tiempo3 a:first-child { border-top: 0; }
  .feature .tx { padding: 26px 22px 30px; }
  .feature .im { aspect-ratio: 4 / 3; }
  .topnav { gap: 18px; }
  .nav-long { display: none; }
}
@media (max-width: 700px) {
  :root { --top-h: 54px; }
  .topnav, .tools .lang-sw, .tools .nav-quiet { display: none; }
  .tools { margin-left: auto; gap: 8px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; inset-inline: 0; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); z-index: 13; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabs a, .tabs button { display: grid; justify-items: center; gap: 3px; padding: 9px 2px 8px; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--muted); border: 0; background: none; position: relative; transition: color 0.2s; }
  .tabs .badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; font-size: 0.6rem; }
  .tabs [aria-current="page"], .tabs [aria-expanded="true"] { color: var(--ink); }
  .tabs [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--amber); }
  .hero { min-height: min(88vh, 720px); }
  .hero .in { padding-bottom: 48px; }
  .cue { display: none; }
  .rcover { min-height: min(76vh, 620px); }
  .fb-in { gap: 10px; }
  .fsels { gap: 6px; }
  .fpill { padding: 7px 28px 7px 12px; font-size: 0.8rem; }
  .fpill::after { right: 11px; }
  .fpop { position: fixed; inset: auto 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0; min-width: 0; border: 0; border-top: 1px solid var(--ink); max-height: 60vh; overflow: auto; padding: 10px max(16px, env(safe-area-inset-left)); animation-name: subir; }
  .fpop button { padding: 12px 6px; font-size: 1.12rem; border-bottom: 1px solid #eee9df; }
  .fq-wrap { flex: 1 1 100%; }
  .fq { width: 100%; }
  .so-panel { margin: 0; max-width: none; min-height: 100%; max-height: none; padding: 16px; }
  .foto-usuario { grid-template-columns: 76px 1fr; gap: 16px; }
  .ph { padding-top: 40px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .grid .tc b { font-size: 1.05rem; }
  .grid .tc i { font-size: 0.88rem; }
  .grid .tc small { font-size: 0.56rem; letter-spacing: 0.12em; }
  .mesa .fr div { aspect-ratio: 1; }
}

/* Selector de nivel: hogareña o gourmet, y variantes dentro de un nivel. */
.levelbar { border-bottom: 1px solid var(--rule); }
.levelbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 14px; }
.level-switch { display: inline-flex; border: 1px solid var(--ink); }
.level-switch .lv {
  padding: 8px 20px; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.level-switch .lv + .lv { border-left: 1px solid var(--ink); }
.level-switch .lv.on { background: var(--ink); color: var(--paper); }
.level-switch .lv.off { color: var(--rule); cursor: default; }
.level-switch .lv.off small { font-size: 0.85em; letter-spacing: 0.08em; text-transform: none; font-family: var(--serif); font-style: italic; }
.variants { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.variants .chip { text-decoration: none; }
.variants .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card .levels { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.card .levels b { font-weight: 400; }
.level-note { flex-basis: 100%; font-style: italic; color: var(--muted); font-size: 1rem; }
.img-note { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--night-muted); padding-block: 8px 0; }
.actions { border-bottom: 1px solid var(--rule); }
.actions-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-block: 14px; }
/* Botones: una sola forma en todo el sitio, la píldora (como el selector de versión). */
.btn {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 999px;
  padding: 11px 24px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.ghost { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.stepper { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.85rem; }
.stepper button { width: 30px; height: 30px; border: 1px solid var(--rule); background: transparent; border-radius: 50%; line-height: 1; }
.stepper output { min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; }
.status { font-family: var(--sans); font-size: 0.82rem; color: var(--green); }
.back { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-left: auto; }

/* ---------- receta: la idea (extensive_opening) ---------- */
.opening { padding-block: 64px 20px; max-width: 860px; }
.opening .label { margin-bottom: 22px; }
.quote { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.3; max-width: 30ch; padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.intro-rows { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 18px 24px; }
.intro-rows .label { padding-top: 0.35em; margin: 0; }
.intro-rows p { font-size: 1.22rem; line-height: 1.55; max-width: var(--measure); }

/* ---------- calendario (extensive_calendar) ---------- */
.calendar { padding-block: 56px 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 22px; }
.cal-item .label { font-weight: 600; display: block; padding-bottom: 6px; border-bottom: 2px solid var(--green); margin-bottom: 10px; }
.cal-item.last .label { color: var(--amber); border-bottom-color: var(--amber); }
.cal-item p { font-size: 1.05rem; line-height: 1.45; }
.components-list { margin-top: 38px; display: grid; gap: 6px; }
.components-list .label { margin-bottom: 8px; }
.components-list a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; text-decoration: none; padding-block: 2px; }
.components-list .n { font-family: var(--display); color: var(--amber); font-size: 1.25rem; }
.components-list .t { font-family: var(--display); font-size: 1.35rem; }
.components-list .t em { font-family: var(--serif); color: var(--muted); font-size: 1.05rem; margin-left: 0.6em; }
.components-list a:hover .t { color: var(--green); }

/* ---------- capítulos (extensive_chapters) ---------- */
.component { padding-block: 60px 6px; scroll-margin-top: 70px; }
.component .big-n { font-family: var(--display); color: var(--amber); font-size: clamp(3rem, 7vw, 3.9rem); line-height: 1; margin-bottom: 4px; }
.comp-grid { display: grid; grid-template-columns: minmax(220px, 15rem) minmax(0, 1fr); gap: 0; }
.comp-ing { padding-right: 24px; border-right: 1px solid var(--rule); }
.comp-steps { padding-left: 26px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.ing-head { margin: 14px 0 6px; color: var(--muted); font-size: 0.66rem; }
.ing-head:first-child { margin-top: 0; }
.ing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ing-list li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 8px; font-size: 1.04rem; line-height: 1.3; }
.ing-list .qty { font-family: var(--sans); font-size: 0.86rem; color: var(--green); padding-top: 0.1em; font-variant-numeric: tabular-nums; }
.ing-list li.noqty { grid-template-columns: minmax(0, 1fr); }
.step-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.step-head .n { font-family: var(--display); color: var(--amber); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.step-head .lead { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.step p { font-size: 1.15rem; line-height: 1.55; max-width: var(--measure); hyphens: auto; }

/* ---------- el plato (extensive_plating) ---------- */
.plating { padding-block: 70px 10px; }
.plating h2 { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.6rem); }
.plate-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 34px; align-items: start; }
.plate-grid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.plate-grid p { font-size: 1.15rem; line-height: 1.6; max-width: var(--measure); }
.plate-grid .final { font-style: italic; border-top: 1px solid var(--amber); padding-top: 12px; margin-top: 16px; }
.plate-grid.noimg { grid-template-columns: minmax(0, 1fr); }

/* ---------- notas del cocinero (extensive_notes) ---------- */
.notes { padding-block: 70px; }
.note-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--rule); padding-block: 14px 18px; }
.note-row .label { padding-top: 0.35em; }
.note-row ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.note-row li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); font-size: 1.08rem; line-height: 1.45; }
.note-row li .r { font-family: var(--display); color: var(--amber); }
.note-row p { font-size: 1.08rem; line-height: 1.45; max-width: var(--measure); }

/* ---------- lista de compras ---------- */
.list-head { padding-block: 52px 18px; display: grid; gap: 10px; }
.list-head h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
.sync { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); }
.picked { display: grid; border-top: 1px solid var(--ink); }
.picked-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.picked-row a { font-family: var(--display); font-size: 1.2rem; text-decoration: none; flex: 1 1 240px; min-width: 0; }
.link-btn { border: 0; background: none; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 4px; }
.shop { padding-block: 30px 60px; display: grid; gap: 6px; max-width: 760px; }
.shop h2 { font-family: var(--display); font-size: 1.7rem; padding-block: 18px 6px; }
.shop-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding-block: 10px; border-bottom: 1px dotted var(--rule); align-items: start; cursor: pointer; }
.shop-item input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--green); }
.shop-item .what { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.shop-item .name { font-size: 1.12rem; }
.shop-item .qty { font-family: var(--sans); font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--green); white-space: nowrap; }
.shop-item .from { grid-column: 2; font-family: var(--sans); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.shop-item.done .name, .shop-item.done .qty { text-decoration: line-through; color: var(--muted); }
.list-tools { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; }

@media (max-width: 760px) {
  .comp-grid { grid-template-columns: minmax(0, 1fr); }
  .comp-ing { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 20px; }
  .comp-steps { padding-left: 0; }
  .plate-grid { grid-template-columns: minmax(0, 1fr); }
  .plate-grid img { max-width: 340px; }
  .intro-rows, .note-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  body { font-size: 1.12rem; }
  .back { margin-left: 0; }
  .masthead { padding-block: 36px 18px; }
}

/* ---------- registro de pruebas (sólo con ingreso) ---------- */
.solo-ingreso, .solo-ingreso-inline { display: none; }
body.con-ingreso .solo-ingreso { display: block; }
body.con-ingreso .solo-ingreso-inline { display: inline-block; }
body.con-ingreso .solo-visitante { display: none; }
.prueba-login { border-top: 1px solid var(--rule); padding-top: 18px; color: var(--muted); font-style: italic; }
.prueba { padding-block: 0 80px; }
.prueba > details { border-top: 1px solid var(--ink); padding-top: 18px; }
.prueba summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.prueba summary::-webkit-details-marker { display: none; }
.prueba-title { font-family: var(--display); font-size: 1.6rem; }
.prueba form { display: grid; gap: 22px; margin-top: 22px; max-width: 760px; min-width: 0; }
.prueba form * { box-sizing: border-box; min-width: 0; }
.prueba label, .prueba-main { display: grid; gap: 6px; }
.prueba-main { gap: 18px; }
.prueba textarea, .prueba input[type="text"], .prueba input[type="date"] {
  font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink); width: 100%;
}
.stars { display: flex; gap: 2px; }
.stars button { font-size: 1.9rem; line-height: 1; color: var(--rule); background: none; border: 0; padding: 2px 3px; cursor: pointer; }
.stars button.on { color: var(--amber); }
.prueba-more summary { color: var(--green); font-weight: 600; }
.prueba-more[open] { display: grid; gap: 12px; }
.prueba-send { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- valoraciones públicas ---------- */
.rating { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); min-height: 1em; }
.rating:empty { display: none; }
.rating-stars { color: var(--amber); font-weight: 600; }
.cover-rating { margin-top: 6px; }

/* ---------- sugerencias y votación ---------- */
.votes { padding-block: 10px 40px; }
.vote-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 760px; }
.vote-row { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.vote-count { display: grid; justify-items: center; line-height: 1; }
.vote-count b { font-family: var(--display); font-size: 1.9rem; font-weight: 500; }
.vote-count span { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.vote-what h3 { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.vote-what p { color: var(--muted); font-style: italic; margin-top: 4px; }
.vote-btn { font: inherit; font-family: var(--sans); font-size: 0.85rem; padding: 8px 16px; border: 1px solid var(--green); border-radius: 999px; background: none; color: var(--green); cursor: pointer; }
.vote-btn.on { background: var(--green); color: var(--paper); }
.vote-btn:disabled { opacity: 0.6; cursor: wait; }
.plain-list { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 8px; max-width: 760px; }
.plain-list .muted { color: var(--muted); font-style: italic; }
.ya-hay { font-style: italic; color: var(--muted); margin: -6px 0 0; }
.prueba input[type="text"]:invalid { box-shadow: none; }
@media (max-width: 640px) {
  .vote-row { grid-template-columns: 3.2rem 1fr; }
  .vote-btn { grid-column: 2; justify-self: start; }
}
.tc .initial { display: grid; place-items: center; height: 100%; font-family: var(--display); font-style: italic; font-size: 3.2rem; color: var(--night-muted); }

/* Flechas y arrastre de los carriles (escritorio) */
.rail-wrap { position: relative; }
.rail-btn { position: absolute; top: 120px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.95); color: var(--ink); font-size: 1.5rem; line-height: 1; padding: 0 0 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); opacity: 0; transition: opacity 0.25s ease, background 0.2s, color 0.2s; }
.rail-wrap:hover .rail-btn, .rail-btn:focus-visible { opacity: 1; }
.rail-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rail-btn.prev { left: -14px; }
.rail-btn.next { right: -14px; }
.track { cursor: grab; }
.track.drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.track a, .track img { -webkit-user-drag: none; }
@media (hover: none) { .rail-btn { display: none; } .track { cursor: auto; } }
.mesa .fr svg, .fu-frame svg { width: 34px; height: 34px; }
.search-ov { overflow-x: hidden; overflow-y: auto; }
.so-top input::-webkit-search-cancel-button, .fq::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Selector de versión dentro de la receta: la misma píldora que la cabecera, más grande. */
.level-switch { border-radius: 999px; padding: 3px; border: 1px solid var(--ink); }
.level-switch .lv { border-radius: 999px; padding: 8px 20px; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.level-switch .lv + .lv { border-left: 0; }
.level-switch .lv:not(.on):hover { background: #f1ede5; }
.stepper button { transition: border-color 0.2s, background 0.2s; }
.stepper button:hover { border-color: var(--ink); }

/* ---------- coherencia (D-046) ---------- */
/* Selector de versión en píldora: el mismo en la portada (sobre la foto), las recetas y los tragos. */
.vpill { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; padding: 3px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.vpill a, .vpill button, .vpill .off { border: 0; background: none; color: inherit; text-decoration: none; padding: 8px 20px; border-radius: 999px; letter-spacing: inherit; text-transform: inherit; font: inherit; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.vpill .on, .vpill [aria-current="true"], .vpill [aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.vpill a:not(.on):hover, .vpill button[aria-pressed="false"]:hover { background: rgba(0, 0, 0, 0.06); }
.vpill .off { color: var(--rule); cursor: default; }
.vpill.dark { border-color: rgba(244, 239, 230, 0.7); color: var(--night-ink); }
.vpill.dark [aria-pressed="true"] { background: var(--night-ink); color: var(--night); }
.vpill.dark button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.12); }
.hero .acts { align-items: center; }
.btn.pill.light { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.btn.pill.light:hover { background: transparent; color: var(--night-ink); }
.btn.pill.light span { transition: transform 0.3s var(--ease); }
.btn.pill.light:hover span { transform: translateX(4px); }
.hero .vnote { font-style: italic; color: var(--night-muted); font-size: 1rem; margin-top: 14px; max-width: 52ch; }
/* Buscador siempre a la vista: píldora con texto en la cabecera, campo grande en la portada, pestaña en celular. */
.search-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); padding: 6px 8px 6px 14px; min-width: 170px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.25s, color 0.25s; }
.search-pill:hover { border-color: var(--ink); color: var(--ink); }
.search-pill span { flex: 1; text-align: left; }
kbd { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; opacity: 0.6; line-height: 1.5; }
body.home .search-pill { color: var(--night-ink); border-color: rgba(244, 239, 230, 0.45); }
body.home .search-pill:hover { border-color: var(--night-ink); }
body.home.scrolled .search-pill { color: var(--muted); border-color: var(--rule); }
body.home.scrolled .search-pill:hover { color: var(--ink); border-color: var(--ink); }
/* En la portada el selector de versión de la cabecera aparece al bajar: arriba ya está el de la foto. */
.topbar .nivel-sw { transition: opacity 0.3s ease; }
body.home:not(.scrolled) .topbar .nivel-sw { display: none; }
.menu-btn { display: none; }
.home-search { padding-top: 56px; }
.hs-field { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: none; padding: 10px 2px 14px; color: var(--muted); text-align: left; transition: color 0.25s, border-color 0.25s; }
.hs-field span { flex: 1; font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 3.2vw, 2rem); }
.hs-field svg { width: 24px; height: 24px; }
.hs-field:hover { color: var(--ink); border-color: var(--amber); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hs-chips .chip { text-decoration: none; }
/* Movimiento automático de los carriles: sin imán para que el desplazamiento sea continuo. */
.track.auto { scroll-snap-type: none; }
.rail-btn { display: grid; place-items: center; padding: 0; }
.rail-btn svg { width: 22px; height: 22px; }
.levelbar .vpill { font-size: 0.74rem; }
@media (max-width: 1100px) {
  .search-pill { min-width: 0; padding: 7px; border-color: transparent; }
  .search-pill span, .search-pill kbd { display: none; }
}
@media (max-width: 700px) {
  .search-pill { display: none; }
  .menu-btn { display: grid; flex: none; }
  .topbar-inner { gap: 10px; }
  .wordmark { font-size: 1.32rem; }
  .tools { gap: 4px; min-width: 0; }
  .nivel-sw button { padding: 5px 9px; letter-spacing: 0.08em; }
  .sheet { inset: calc(var(--top-h) + env(safe-area-inset-top, 0px)) 0 auto 0; border-top: 0; border-bottom: 1px solid var(--ink); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1); animation-name: bajar; }
  .hero .acts { gap: 10px; }
  .hero .acts .btn { flex: 1 1 100%; }
  .hero .vpill { width: 100%; }
  .hero .vpill button { flex: 1; }
  .home-search { padding-top: 36px; }
  .hs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .hs-chips::-webkit-scrollbar { display: none; }
  .hs-chips .chip { flex: none; }
  .hs-field kbd { display: none; }
}
@keyframes bajar { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.foto-usuario + .prueba .prueba-login, .wrap:has(.foto-usuario) + .prueba .prueba-login { border-top: 0; padding-top: 6px; }
.list-head, .masthead { padding-top: 64px; }
.hs-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 700px) { .hs-field span { font-size: 1.22rem; } }
/* Buscador de la página Platos: grande y a la vista, arriba de los filtros (D-046). */
.big-q { display: flex; align-items: center; gap: 14px; margin-top: 22px; border-bottom: 1px solid var(--ink); padding: 6px 2px 12px; color: var(--muted); transition: border-color 0.25s, color 0.25s; cursor: text; }
.big-q:focus-within, .big-q:hover { border-color: var(--amber); color: var(--ink); }
.big-q svg { width: 26px; height: 26px; flex: none; }
.big-q input { flex: 1; min-width: 0; border: 0; background: none; border-radius: 0; padding: 4px 0; font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 2rem); color: var(--ink); }
.big-q input:focus { outline: none; }
.big-q input::placeholder { color: var(--muted); font-style: italic; opacity: 0.85; }
.big-q input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
@media (max-width: 700px) { .big-q input { font-size: 1.15rem; } .big-q svg { width: 22px; height: 22px; } }

/* Página estática de receta (scripts/site_seo.py): lo que ven buscadores y navegadores sin JavaScript,
   hasta que la aplicación dibuja la ficha. */
.seo { padding-block: 22vh 8vh; max-width: var(--measure); }
.seo h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0.2em 0 0.5em; }
.seo h2 { font-family: var(--display); font-weight: 400; margin: 1.8em 0 0.4em; }
.seo h3 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin: 1.4em 0 0.3em; }
.seo-img { width: 100%; height: auto; display: block; margin: 0 0 1.4em; }

/* Accesos y aclaraciones de la auditoría de uso. */
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 50; transform: translateY(-160%); background: var(--paper); color: var(--ink); padding: 10px 16px; border: 1px solid var(--ink); border-radius: 24px; }
.skip-link:focus { transform: none; }
.recipe-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.recipe-jumps .btn { font-size: 0.72rem; }
.recipe-disclosure { padding-block: 12px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.recipe-disclosure .img-note { margin: 0; padding: 0; }
.validation-note { font-family: var(--sans); font-size: 0.8rem; color: var(--green); }
.purchase-yield { display: grid; gap: 8px; }
.purchase-yield .label { font-size: 0.7rem; letter-spacing: 0.12em; }
.base-note { font-size: 1rem; color: var(--muted); padding-block: 14px; }
#ingredientes, #preparacion, .component, #app { scroll-margin-top: calc(var(--top-h) + 20px); }
.motion-toggle { justify-self: start; font-family: var(--sans); font-size: 0.8rem; padding-block: 10px; }
.lang-sw button { opacity: 1; min-height: 30px; }
@media (max-width: 700px) {
  .recipe-jumps .btn { padding: 10px 14px; font-size: 0.65rem; letter-spacing: 0.1em; }
  .recipe-disclosure { display: grid; }
  .purchase-yield { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
@media (max-width: 360px) {
  .topbar-inner { gap: 10px; }
  .wordmark { font-size: 1.3rem; }
  .nivel-sw button { padding-inline: 8px; }
}
@media (max-width: 700px) {
  .so-panel { min-height: 0; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
}

.recipe-disclosure .img-note { color: var(--muted); font-size: 0.8rem; letter-spacing: 0; }

/* Evita mostrar la ficha estática antes de que se dibuje la interactiva.
   Si falta JavaScript, o falla la carga, la ficha estática queda disponible. */
.js-loading .seo { visibility: hidden; }
.js-loading main:has(.seo)::before { content: "Cargando receta…"; display: block; padding: 18vh 16px 0; text-align: center; color: var(--muted); }
html[lang="en"].js-loading main:has(.seo)::before { content: "Loading recipe…"; }

.ing-list .scaled-qty { color: var(--green); font-family: var(--sans); }