/* Bloque «Explicado fácil» de las fichas (scripts/explicado-facil.py): la puerta de entrada para quien no sabe
   de cosmética. Recuadro de papel con regla fina, sin sombra ni esquinas redondas; el rotulador marca la idea clave. */
.ef{margin:var(--sp-md,28px) 0 0;padding:20px 22px 6px;background:var(--ed-papel-2,#f1efe8);border-top:2px solid var(--d-ink)}
.ef .ef-h{font-family:var(--ed-mono)!important;line-height:1.5;max-width:none;font-size:var(--t-meta,.72rem);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink);margin:0 0 12px}
.ef-f{font-family:var(--ed-serif);font-size:var(--t-h3,1.35rem);line-height:1.24;letter-spacing:-.015em;margin:0 0 14px;max-width:none;text-wrap:balance}
.ef dl{margin:0;display:grid;grid-template-columns:1fr}
.ef dl>div{padding:12px 0 14px;border-top:1px solid var(--d-line)}
.ef dt{font-family:var(--ed-mono);font-size:var(--t-meta,.72rem);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink-2,#555);margin:0 0 4px}
.ef dd{margin:0;line-height:1.5;max-width:34em}
@media(min-width:900px){.ef{padding:22px 26px 6px}}
/* Las cuatro respuestas se abren con un toque: misma regla y misma tinta que el resto de desplegables de la ficha. */
.ef-mas{border-top:1px solid var(--d-line)}
.ef-mas>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--d-ink)}
.ef-mas>summary::-webkit-details-marker{display:none}
.ef-mas>summary::after{content:"+";font-family:var(--ed-mono);color:var(--d-acc);font-weight:400}
.ef-mas[open]>summary::after{content:"−"}
.ef-mas>summary:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
.ef dd{text-wrap:pretty}
html body .wrap>header:has(.ef) .stat{margin-top:var(--sp-md,28px)}
/* En escritorio la cabecera es una rejilla: la columna del bloque la fija ed-ingredientes.css (misma que la entradilla). */
html body main>.wrap>header .ef{align-self:start}
/* La foto ocupa varias filas de la rejilla; con el bloque hay una fila más. Sin esto, la altura de la foto
   se reparte entre pocas filas y deja un hueco entre la entradilla y el bloque. */
@media(min-width:1080px){html body main>.wrap>header:has(.ef) figure.mp{grid-row:5/span 6}}