/* assets/d-recetario.css — auditoría del dueño (9-oct-2026) · unidad R · Recetario (recetario-bar.html) · hallazgo 12.
   Va DESPUÉS de assets/ux.css: aquí vive la carta tipográfica (capítulos con foto, cantidades en columna, preparación plegada),
   los filtros (a la vista, sin cortarse, con tira fija al bajar), el aviso de la copa y las tres columnas del escritorio ancho.
   Usa el sistema de ux.css: --t-seccion · --t-sub · --t-cuerpo · --t-ante · --t-min · --t-serif · --t-flat (docs/AUDITOR-PLAN.md,
   «Sistema entregado»). Sin colores ni tipografías nuevas; el papel con fibra (papel-postal.webp) se queda. */

/* ---------- anchura: tres columnas desde 1200 px (antes dos columnas de ~15 px en 950 px de ancho) ---------- */
@media (min-width:1200px){ .wrap{max-width:1240px} }

/* ---------- portada de la carta: compacta, para que la carta suba ---------- */
@media (max-width:720px){
  .cover{padding:6px 0 0}
  .cover .k{display:none}
  .cover .logo{width:min(150px,42vw);margin:0 auto}
  .cover .sub{font-size:15px;line-height:1.25;margin:2px auto 0;max-width:none}
  .rule{display:none}
}
@media (min-width:721px){
  .cover{padding:16px 0 4px}
  .cover .logo{width:min(270px,40vw);margin:6px auto 0}
  .cover .sub{max-width:none;margin:8px auto 0;font-size:var(--t-cuerpo)}
  .rule{margin:10px auto 0}
}

/* ---------- filtros: a la vista y completos (en celular se envuelven; ya no se deslizan ni se cortan) ---------- */
.filters{position:relative;padding:6px 0 0}
.frow{margin:12px 0 0}
.flabel{margin:0 0 6px;text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips button{font-size:16px;line-height:1.1;padding:0 15px;border-color:rgba(92,76,55,.55);color:#2C261F}
.chips button:hover{border-color:var(--tinta);color:var(--tinta)}
.chips button.on{color:var(--paper)}
.count{margin:12px 0 0;font-size:16px;color:#5C4C37}
@media (max-width:720px){
  .frow{margin:4px 0 0}
  .flabel{text-align:left;line-height:1.25}
  .chips{justify-content:flex-start;gap:6px}
  .chips button{font-size:15px;padding:0 11px}
  .count{position:absolute;top:6px;right:0;margin:0;font-size:15px;line-height:1.25}
}

/* FILTROS EN LA BARRA (remate 9-oct). Antes eran dos barras fijas (62 + 45 = 107 px, el 16 % del celular) y la
   segunda, translúcida, dejaba leer el texto que pasaba por detrás. Ahora la tira vive DENTRO de la barra de la casa:
   una sola barra fija y opaca. Aparece al bajar, cuando los filtros salen de la pantalla: dice qué quedó puesto y un
   toque devuelve a los filtros. En celular ocupa el lugar de la firma (antes ahí iba «← Volver»). */
.fstrip{display:none;position:relative;flex:1 1 auto;min-width:0;align-items:center;gap:14px;box-sizing:border-box;min-height:44px}
.fstrip.on{display:flex}
.fs-sel{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--t-serif);font-size:19px;font-weight:500;color:#2C261F}
.fs-n{flex:0 0 auto;font-family:var(--t-flat);font-size:var(--t-ante);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5C4C37}
.fs-btn{flex:0 0 auto;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;color:#2C261F;
  font-family:var(--t-flat);font-size:var(--t-ante);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(44,38,31,.45)}
.fs-btn::after{content:"";position:absolute;inset:0}                    /* toda la tira es el blanco táctil */
.fs-btn:hover{text-decoration-color:#2C261F}
.fs-btn:focus-visible{outline:2px solid #2C261F;outline-offset:2px}
@media (min-width:721px){
  .fstrip{margin-left:6px;padding-left:20px}
  .fstrip::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:rgba(92,76,55,.3)}
}
@media (max-width:720px){
  .casa-bar.filtrando .firma{display:none}
  .fstrip{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
  .fs-btn{order:-1;min-height:0;line-height:1.3}
  .fs-sel{max-width:100%;font-size:19px;line-height:1.15}
  .fs-n{display:none}
}

/* celular: los filtros eran 16 fichas en 7 filas antes de la primera receta. Ahora cada grupo es UNA fila que se
   desliza de borde a borde (la última ficha se desvanece: se entiende que sigue) y la elegida se centra sola. En
   pantallas anchas siguen completas, a la vista. */
@media (max-width:720px){
  .filters{padding:10px 0 0;margin-top:10px;border-top:1px solid rgba(92,76,55,.22)}
  .frow{margin:0 0 8px}
  .flabel{margin:0 0 4px}
  .chips{flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 -18px;padding:0 44px 2px 18px;scroll-padding:0 18px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:0 0 auto;white-space:nowrap}
  .count{position:static;margin:2px 0 10px;text-align:left;font-size:15px;line-height:1.25}
}

/* ---------- capítulos: una foto de la casa a todo el ancho + una lámina botánica junto al título ---------- */
.cap{margin:40px 0 6px;break-inside:auto}
#menu>.section:first-child{margin-top:18px}
.cap-foto{margin:0 0 20px;height:176px;overflow:hidden;background:#efe6d2;border:1px solid rgba(92,76,55,.3);box-shadow:0 8px 22px rgba(44,38,31,.12)}
.cap-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pm,50% 55%)}
.cap .shead{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:104px;margin:0 0 6px;padding-right:96px;text-align:left}
.cap .shead .num{display:block;font-size:13px;letter-spacing:.22em;line-height:1.2}
.cap .shead h2{margin:2px 0 0;font-size:var(--t-seccion);font-weight:500;line-height:1.1;letter-spacing:0;text-transform:none}
.cap .shead .rl{display:block;margin-top:8px}
.cap .shead .rl:before,.cap .shead .rl:after{display:none}
.cap-bot{position:absolute;right:4px;top:50%;height:104px;width:auto;margin-top:-52px;transform:rotate(5deg);pointer-events:none;
  mix-blend-mode:multiply;filter:sepia(.12) saturate(.92)}
@media (min-width:721px){
  .cap{margin:56px 0 8px}
  .cap-foto{height:clamp(300px,31vw,420px);margin-bottom:26px}
  .cap-foto img{object-position:var(--pd,50% 40%)}
  .cap .shead{min-height:150px;margin-bottom:10px;padding-right:0;text-align:center;align-items:center}
  .cap .shead .rl{display:flex;justify-content:center}
  .cap .shead .rl:before,.cap .shead .rl:after{display:block;width:60px}
  .cap-bot{height:150px;margin-top:-75px;right:auto;left:calc(50% + 250px);transform:rotate(6deg)}
  .cap:nth-of-type(odd) .cap-bot{left:auto;right:calc(50% + 250px);transform:rotate(-6deg)}
}

/* ---------- la carta: nombre a 26 px con línea de puntos hasta su etiqueta; cantidades en columna ---------- */
.items{display:grid;grid-template-columns:minmax(0,1fr);gap:0 44px}
@media (min-width:721px){ .items{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .items{grid-template-columns:repeat(3,minmax(0,1fr))} }
.item{display:flex;flex-direction:column;padding:20px 0 22px;border-top:1px solid rgba(92,76,55,.22);scroll-margin-top:130px}
.item .iname{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0}
.item .iname h3{flex:0 1 auto;min-width:0;font-size:26px;font-weight:600;line-height:1.15;overflow-wrap:break-word}
.item .iname .dots{flex:1 1 18px;min-width:18px;border-bottom:1px dotted rgba(92,76,55,.6);transform:translateY(-5px)}
.item .iname .tag{flex:0 0 auto;font-size:var(--t-min);white-space:nowrap}
.item .iname.rota .dots{display:none}
.item .iname.rota .tag{flex-basis:100%;margin-top:2px}
.item .isub{margin:6px 0 10px;font-size:var(--t-cuerpo);line-height:1.35;font-style:italic;color:rgba(20,18,16,.78)}
/* mililitros en Archivo Narrow, alineados a la derecha en su columna; el nombre del insumo arranca siempre en la misma línea */
.item .iings{list-style:none;margin:0;padding:0;font-family:var(--t-serif);font-size:var(--t-cuerpo);line-height:1.35;color:var(--tinta)}
.item .iings li{position:static;display:grid;grid-template-columns:3.6rem minmax(0,1fr);column-gap:14px;align-items:baseline;margin:0;padding:3px 0}
.item .iings li:before{display:none}
.item .iings .q{font-family:var(--t-flat);font-size:15px;font-weight:600;letter-spacing:.04em;text-align:right;white-space:nowrap;color:#2C261F;
  font-variant-numeric:tabular-nums}
.item .iings .nq .t{grid-column:2}
.item .iings li.hi .t{font-weight:600}
.item .iings .par{font-style:italic;font-size:.92em;color:#5C4C37}
/* preparación plegada: la carta se lee de corrido y quien prepara la abre */
.iprep-d{margin:6px 0 0}
.iprep-d summary{display:flex;align-items:center;gap:9px;min-height:44px;list-style:none;cursor:pointer;
  font-family:var(--t-flat);font-size:var(--t-ante);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5C4C37}
.iprep-d summary::-webkit-details-marker{display:none}
.iprep-d summary:before{content:"+";flex:0 0 14px;text-align:center;font-size:17px;font-weight:600;letter-spacing:0;line-height:1}
.iprep-d[open] summary:before{content:"\2212"}
.iprep-d summary:hover{color:#2C261F}
.iprep-d summary:focus-visible{outline:2px solid #2C261F;outline-offset:2px}
.item .iprep{margin:0 0 8px;padding-left:calc(3.6rem + 14px);font-family:var(--t-serif);font-style:italic;font-size:var(--t-cuerpo);line-height:1.4;color:rgba(20,18,16,.8)}
.item .iprep div{margin:2px 0}
/* botones: lo de agregar baja al pie de la tarjeta, parejo entre columnas */
.iacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.iacts .iadd,.iacts .iany{margin:0}
.iadd,.iany{font-family:var(--t-flat);font-size:13.5px;font-weight:500;letter-spacing:.12em}
.iadd .plus{font-family:var(--t-flat);font-size:16px}
.iany{color:#5C4C37;border-color:rgba(92,76,55,.5)}
@media (max-width:820px){ .iadd,.iany{font-size:14px} }

/* escritorio: los renglones de una fila de tarjetas se alinean entre columnas (nombre · frase · insumos · preparación · botones) */
@media (min-width:721px){
  @supports (grid-template-rows:subgrid){
    .item{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
    .item>.iname{grid-row:1;align-self:start}
    .item>.isub{grid-row:2;align-self:start}
    .item>.iings{grid-row:3;align-self:start}
    .item>.iprep-d{grid-row:4;align-self:start}
    .item>.iacts{grid-row:5;align-self:end}
  }
}

/* la postal de la receta (se abre al tocar el nombre) conserva su lista de siempre */
.pc .iings{list-style:none;margin:0;padding:0;font-family:var(--func);font-size:17.5px;line-height:1.45;color:var(--tinta)}
.pc .iings li{position:relative;padding-left:15px;margin:3px 0}
.pc .iings li:before{content:"";position:absolute;left:1px;top:.66em;width:6px;height:1px;background:var(--c40)}
.pc .iings li.hi{font-weight:600}
.pc .iprep{margin:7px 0 0;font-family:var(--func);font-style:italic;font-size:17px;line-height:1.4;color:var(--c75)}
.pc .iprep div{margin:2px 0}

/* ---------- la Copa Medidora y las vitrinas: en papel de la casa (antes casi blanco con botón negro) ---------- */
.wrap .copitabar{margin:40px 0 8px}
.copitabar,.merchshow{background:#efe6d2 url('../img/papel-postal.webp') center/cover;border:1px solid rgba(92,76,55,.3);border-radius:2px;
  box-shadow:0 8px 22px rgba(44,38,31,.12);color:#2C261F}
.copitabar{padding:16px 22px;gap:18px}
.copitabar .t b{font-size:var(--t-sub);font-weight:500;line-height:1.15}
.copitabar .t span{margin-top:4px;font-size:var(--t-cuerpo);line-height:1.35;color:#5C4C37}
.copitabar button{min-height:44px;padding:0 22px;border-radius:2px;background:#432918;color:#EFE9DB;
  font-family:var(--t-flat);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.copitabar button:hover{opacity:1;background:#2C261F}
.copitabar button:focus-visible{outline:2px solid #2C261F;outline-offset:3px}
.merchshow{padding:20px 24px}
.merchshow h4{font-size:var(--t-sub);font-weight:500;line-height:1.15}
.merchshow .md{font-size:var(--t-cuerpo);line-height:1.4;color:#2C261F}
.merchshow .mk{color:#5C4C37}

@media print{ .fstrip{display:none} }

/* detalles: la foto de la copa trae fondo casi blanco → se funde con el papel; los botones de la postal se acomodan sin sangría */
.copitabar img{mix-blend-mode:multiply;border-radius:0}
#pcadd{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#pcadd .iadd,#pcadd .iany{margin:0!important}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   REMATE (ronda 2 del dueño, 9-oct). La carta quedó mejor compuesta pero se leía por una ventana más chica y la
   página creció 25 % en celular. Aquí se aprieta sin perder la composición: capítulos con foto más baja, nombres en
   la escala del sitio (--t-sub, peso 500), un solo negro de botón (#2C261F) y la copa de vuelta arriba, en una nota.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.item{scroll-margin-top:84px}
.item .iname h3{font-size:var(--t-sub);font-weight:500}
.chips button.on{background:#2C261F;border-color:#2C261F}
.foot .cta,#pcadd .iadd:hover,.iadd:hover,.iref:hover{background:#2C261F;border-color:#2C261F}
.wrap .copitabar{margin:18px 0 0}
@media (max-width:720px){
  .cap{margin:30px 0 4px}
  .cap-foto{height:128px;margin-bottom:14px}
  .cap .shead{min-height:84px;padding-right:84px}
  .cap-bot{height:84px;margin-top:-42px}
  .item{padding:16px 0 16px}
  .item .isub{margin:4px 0 8px;line-height:1.3}
  .item .iings li{padding:2px 0}
  .iprep-d{margin:2px 0 0}
  .iacts{padding-top:6px}
  .copitabar{flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px}
  .copitabar img{width:44px;height:44px}
  .copitabar .t{flex:1 1 0}
  .copitabar .t b{font-size:19px}
  .copitabar .t span{font-size:15.5px;line-height:1.3}
  .copitabar button{width:100%}
}
@media (min-width:721px){
  .cap{margin:44px 0 6px}
  .cap-foto{height:clamp(190px,19vw,280px);margin-bottom:18px}
  .cap .shead{min-height:128px;margin-bottom:6px}
  .cap-bot{height:128px;margin-top:-64px}
  .wrap .copitabar{margin:22px auto 0;max-width:820px}
}
/* escritorio: cada capítulo abre con la foto a un lado y su título al otro (antes foto a todo el ancho + título debajo:
   400 px por capítulo y la página 74 % más larga que la original). Misma foto, mismo botánico, mismo texto. */
@media (min-width:960px){
  .cap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:44px;align-items:center;margin:48px 0 6px}
  .cap>.items,.cap>.shead:first-child{grid-column:1 / -1}
  .cap-foto{height:clamp(190px,17vw,250px);margin:0 0 20px}
  .cap .shead{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center;justify-items:start;
    min-height:0;margin:0 0 20px;padding:0;text-align:left}
  .cap .shead .num,.cap .shead h2,.cap .shead .rl{grid-column:1}
  .cap .shead .rl{display:block}
  .cap .shead .rl:before,.cap .shead .rl:after{display:none}
  .cap .shead .cap-bot,.cap:nth-of-type(odd) .shead .cap-bot{position:static;grid-column:2;grid-row:1 / span 3;height:128px;margin:0;left:auto;right:auto;transform:rotate(5deg)}
  .item{padding:18px 0 18px}
  .item .iings li{padding:2px 0}
}
/* la copa, en su recorte de siempre (el del equipaje): la foto con fondo blanco salía como un cuadro pálido sobre el papel */
.copitabar img{mix-blend-mode:normal;width:52px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(44,38,31,.18))}
.copitabar .t b{text-wrap:balance}
@media (max-width:720px){ .copitabar img{width:40px;height:52px} }