/* Recetarios de Aquí · Páginas propias de cada receta (receta/<id>.html, tools/prerender.js).
   Ligeras y legibles sin JavaScript: los mismos colores y la misma letra de la app (css/styles.css). */
:root { --cream: #FBF6EE; --ivory: #FFFDF9; --line: #E6D8C4; --ink: #2B1D14; --ink-2: #5E4A3C; --achiote: #A63A12; --achiote-600: #8C300E; --focus: #1D4ED8; }
@media (prefers-color-scheme: dark) {
  :root { --cream: #1B1410; --ivory: #241B15; --line: #3D3027; --ink: #F3E9DA; --ink-2: #CDBBA8; --achiote: #F08A5D; --achiote-600: #F6A57F; --focus: #8AB4FF; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.65 Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; }
a { color: var(--achiote-600); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top { border-bottom: 1px solid var(--line); background: var(--ivory); }
.brand { display: inline-flex; align-items: baseline; gap: .5em; min-height: 44px; padding: 10px 16px; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand span { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
.wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
.crumbs { font-size: .95rem; color: var(--ink-2); }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; margin: .4em 0 .1em; }
h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
h3 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.en-name { margin: 0 0 1em; color: var(--ink-2); }
.facts { list-style: none; padding: 12px 16px; margin: 0 0 16px; background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 4px; }
.open { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--achiote); color: #fff; font-weight: 700; text-decoration: none; }
@media (prefers-color-scheme: dark) { .open { color: #1B1410; } }
.ings li, .steps li { margin-bottom: .45em; }
.steps li { padding-left: .2em; }
.english { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); }
.note { margin-top: 2em; font-size: .95rem; color: var(--ink-2); }
.related ul { padding-left: 1.2em; }
.related li { margin-bottom: .3em; }
.foot { border-top: 1px solid var(--line); padding: 16px; text-align: center; font-size: .95rem; color: var(--ink-2); }
.foot a { display: inline-block; min-height: 44px; line-height: 44px; }
@media print { .top, .open, .related, .foot, .crumbs { display: none; } body { background: #fff; color: #000; } }