/*
Theme Name: La Mesa Resuelta
Theme URI: https://recetas.gt
Author: Resolute Adtech
Description: El vertical de recetas de la red. Se entra por la ocasión, no por el plato. Sitio claro donde vive la publicidad y donde se lee a plena luz en una cocina; modo cocina oscuro, que es la única pantalla sin anuncios. El lima aparece sólo en lo que lleva al modo cocina. Un solo tema para los cuatro países.
Version: 2.5.3
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: mesa-resuelta
*/

/* ══════════════════════════════════════════════════════════════
   COCINA OSCURA
   El sitio compromete un solo mundo visual a propósito: el modo
   cocina ya era oscuro y ahora el sitio entero es coherente con él.
   Por eso no hay tema claro. Todo color se declara explícito.
   El lima es la única señal de "esto se toca".
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Paleta del mockup aprobado del 23-ago. El acento es CORAL, no lima:
     el lima venía de la dirección B del 27, que no es la que se aprobó. */
  --fondo:#FFFFFF;        /* lienzo */
  --sup:#FFF7F4;          /* crema */
  --sup2:#FFEDE8;         /* coral tenue */
  --linea:#F0E2DD;
  --linea2:#F0E2DD;
  --borde:#E3CFC8;        /* línea fuerte */
  --tx:#0A0A0A;           /* tinta */
  --tx2:#786663;          /* gris */
  --tx3:#9C8B87;
  --coral:#FF7A66;
  --brasa:#C6462C;        /* coral-deep · el acento que se lee */
  --mostaza:#FFCB5C;
  --mostaza-deep:#8A6410;
  --vino:#6E1F35;
  --wa:#128C4A;
  --ok:#1F7A4D;
  --sombra:0 1px 2px rgba(36,27,25,.05), 0 8px 24px -12px rgba(36,27,25,.18);
  /* el modo cocina, negro, como en el mockup */
  --noche:#0A0A0A;
  --noche2:#171110;
  --noche-linea:#2A2320;
  --noche-borde:#3A322E;
  --noche-tx:#FFFFFF;
  --noche-tx2:#C9B7B1;
  --disp:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cuerpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--tx);
  font-family:var(--cuerpo);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--brasa);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.mr-sitio{max-width:640px;margin:0 auto;background:var(--fondo)}

/* ── marca ── */
.mr-hd{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--linea)}
.brand,.brand-b{display:block;text-decoration:none;color:var(--tx)}
.bname,.st2{font-family:var(--disp);font-weight:800;font-size:1.2rem;
  letter-spacing:-.035em;line-height:1;display:block}
.bname b,.st2 b{font-weight:800}
.plus{color:var(--brasa)}
.bpais,.st1{display:block;font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx3);margin-top:5px}

.mr-nav{display:flex;gap:6px;overflow-x:auto;padding:10px 20px;
  border-bottom:1px solid var(--linea);scrollbar-width:none}
.mr-nav::-webkit-scrollbar{display:none}
.mr-nav a{font-size:.75rem;font-weight:600;color:var(--tx2);white-space:nowrap;
  text-decoration:none;padding:6px 11px;border-radius:999px;background:var(--sup);
  border:1px solid var(--linea);transition:.15s}
.mr-nav a:hover{color:var(--tx);border-color:var(--borde)}
.mr-nav a[aria-current]{background:var(--tx);border-color:var(--tx);color:#fff;font-weight:700}

/* ── portada ── */
.hero{padding:26px 20px 24px;border-bottom:1px solid var(--linea)}
.kick{display:inline-block;font-family:var(--cuerpo);font-size:.58rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brasa);
  padding:0;margin:0}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(1.75rem,7vw,2.15rem);
  line-height:1.02;letter-spacing:-.04em;margin:14px 0 8px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--brasa)}
.hero p{margin:0 0 18px;font-size:.94rem;color:var(--tx2);max-width:52ch}
.qlab{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3);margin:0 0 9px}

.occ{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}
.occ a{display:block;text-align:left;text-decoration:none;color:var(--tx);
  background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:12px;
  transition:border-color .15s,background .15s}
.occ a:hover,.occ a[aria-current]{border-color:var(--borde);background:var(--sup2)}
.occ .e{font-size:20px;display:block;margin-bottom:5px;line-height:1}
.occ .t{display:block;font-family:var(--disp);font-size:.9rem;font-weight:800;
  line-height:1.15;letter-spacing:-.02em}
.occ .s{display:block;font-family:var(--mono);font-size:.6rem;color:var(--tx3);margin-top:5px;letter-spacing:.02em}

/* ── el memorándum · banda, nunca ventana emergente ── */
.memo{background:var(--sup);border-bottom:1px solid var(--linea);padding:18px 20px}
.memo h3{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;
  line-height:1.2;margin:12px 0 9px;text-wrap:balance}
.memo h3 em{font-style:normal;color:var(--brasa)}
.memo p{margin:0 0 12px;font-size:.9rem;color:var(--tx2)}
.vals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.vals span{font-size:.72rem;font-weight:600;color:var(--tx2);background:var(--sup2);
  border:1px solid var(--linea);border-radius:999px;padding:5px 11px}
.memo button{border:0;border-radius:9px;background:var(--tx);color:#fff;
  font-family:var(--cuerpo);font-weight:800;font-size:.82rem;padding:10px 16px}
.memo[hidden]{display:none}

.sectitle{display:flex;align-items:baseline;gap:9px;margin:26px 20px 12px}
.sectitle h2{font-family:var(--disp);font-weight:800;font-size:1.1rem;
  letter-spacing:-.03em;margin:0}
.sectitle span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);margin-left:auto}

.ingrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px}
.ingrid a{text-decoration:none;text-align:center;border:1px solid var(--linea);
  border-radius:11px;padding:10px 4px;font-size:.65rem;font-weight:700;
  color:var(--tx2);background:var(--sup);transition:.15s}
.ingrid a:hover{border-color:var(--borde);color:var(--tx)}
.ingrid a i{display:block;font-size:18px;font-style:normal;margin-bottom:4px}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 20px}
.card{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--sup);transition:border-color .15s}
.card:hover{border-color:var(--borde)}
.card a{text-decoration:none;display:block}
/* La brasa vive DEBAJO de la foto. Sin foto no hay brasa: los sitios que
   todavía no tienen imagen no pueden quedar como una pared de naranja. */
/* Sin foto no hay hueco de foto. 253 de 263 piezas no tienen imagen: dejar
   el rectangulo vacio hace que la tarjeta parezca rota. La tarjeta sin foto
   es una tarjeta de titulo, y se lee como algo querido, no como un fallo. */
.card .ci{display:none}
.card .ci:has(img){display:block;aspect-ratio:16/10;border-bottom:0}
.card:not(:has(.ci img)) .cb{padding:16px 15px 17px}
.card:not(:has(.ci img)) .cb b{font-size:.98rem}
.card .ci:has(img){background:
  radial-gradient(58% 68% at 36% 32%,#FFB05C 0%,transparent 60%),
  linear-gradient(150deg,#7E1E0C,#D9481F 58%,#FF8A3D);border-bottom:0}
.card .ci img{width:100%;height:100%;object-fit:cover;display:block}
.card .cb{padding:10px 11px 12px}
.card .cb b{display:block;font-family:var(--disp);font-size:.88rem;font-weight:800;
  line-height:1.2;letter-spacing:-.025em}
.card .cb small{display:block;font-family:var(--mono);font-size:.58rem;color:var(--tx3);margin-top:5px}

.mr-vacio{margin:16px 20px;padding:24px 16px;border:1px dashed var(--borde);
  border-radius:12px;background:var(--sup);text-align:center;font-size:.88rem;color:var(--tx2)}
.mr-vacio a{color:var(--brasa);font-weight:700}

/* ── la receta ── */
.mr-body{padding:20px 20px 30px}
h1.tit{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,7vw,2rem);
  line-height:1.02;letter-spacing:-.04em;margin:12px 0 10px;text-wrap:balance}
.meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx2);display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0}
.meta b{color:var(--tx);font-weight:700}
.foto{margin:16px 0 0;border-radius:12px;aspect-ratio:16/10;overflow:hidden;background:
  radial-gradient(58% 68% at 36% 32%,#FFB05C 0%,transparent 60%),
  linear-gradient(150deg,#7E1E0C,#D9481F 58%,#FF8A3D)}
.foto img{width:100%;height:100%;object-fit:cover}

/* Cuidado con el selector: `.ficha div` alcanzaba tambien a .v y a .l, que
   son divs hijos, y cada cifra salia metida en su propia caja. Sobre fondo
   oscuro no se notaba; sobre papel canta. Va con `>`. */
.ficha{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 6px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ficha > div{padding:15px 8px;text-align:center;position:relative}
.ficha > div + div::before{content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--linea)}
.ficha .v{display:block;font-family:var(--disp);font-size:1.3rem;font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ficha .l{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);margin-top:5px}

.lead{font-size:1rem;color:var(--tx2);margin:14px 0}
.h3{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.035em;
  margin:26px 0 12px;display:flex;align-items:center;gap:9px}

/* ── el escalador ── */
.scaler{background:var(--sup);border:1px solid var(--linea2);border-radius:12px;
  padding:13px 14px;margin-bottom:12px}
.scaler .row{display:flex;align-items:center;gap:10px}
.scaler .q{font-size:.88rem;font-weight:700;flex:1}
.stepper{display:flex;align-items:center;gap:3px;background:var(--fondo);
  border:1px solid var(--borde);border-radius:999px;padding:3px}
.stepper button{width:34px;height:34px;border:0;border-radius:50%;background:var(--tx);
  color:#fff;font-size:19px;font-weight:800;line-height:1;transition:.15s}
.stepper button:disabled{background:var(--sup2);color:var(--tx3);cursor:not-allowed}
.stepper .n{min-width:44px;text-align:center;font-family:var(--mono);font-weight:700;
  font-size:1.05rem;font-variant-numeric:tabular-nums}
.scaler .hint{font-family:var(--mono);font-size:.62rem;color:var(--tx3);margin:8px 0 0;line-height:1.5}

/* ── ingredientes ── */
.ings{list-style:none;margin:0;padding:0;border:1px solid var(--linea2);
  border-radius:12px;overflow:hidden;background:var(--sup)}
.ings li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--linea2);font-size:.94rem;cursor:pointer;transition:background .12s}
.ings li:last-child{border-bottom:0}
.ings li:hover{background:var(--sup2)}
.ings li.on{color:var(--tx3);text-decoration:line-through;text-decoration-color:var(--brasa)}
.tick{flex:0 0 auto;width:18px;height:18px;border:1.5px solid var(--borde);border-radius:5px;
  background:transparent;display:grid;place-items:center;font-size:11px;color:transparent;margin-top:2px;transition:.15s}
.ings li.on .tick{background:var(--tx);border-color:var(--tx);color:#fff}
.qty{font-weight:700;font-variant-numeric:tabular-nums}
.ings li.on .qty{color:var(--tx3)}

.prog{display:flex;align-items:center;gap:10px;margin:10px 2px 0;
  font-family:var(--mono);font-size:.62rem;color:var(--tx3)}
.bar{flex:1;height:5px;background:var(--sup2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--coral);width:0;transition:width .25s}

.btn-wa{display:flex;width:100%;justify-content:center;align-items:center;gap:9px;
  margin-top:12px;padding:15px;border:0;border-radius:11px;background:var(--wa);
  color:#fff;font-weight:800;font-size:.95rem;transition:.15s}
.btn-wa:hover{filter:brightness(1.08)}

/* ── pasos ── */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{counter-increment:s;display:flex;gap:13px}
.steps li::before{content:counter(s);flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--mostaza);border:0;color:#3A2A00;
  font-family:var(--cuerpo);font-weight:800;display:grid;place-items:center;font-size:.85rem}
.steps p{margin:3px 0 0;font-size:.94rem;color:var(--tx)}
.timer{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:7px 13px;
  border-radius:999px;border:1.5px solid var(--coral);background:var(--sup2);color:var(--brasa);
  font-family:var(--cuerpo);font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums;transition:.15s}
.timer:hover{border-color:var(--brasa);background:#FFE3DC}
.timer.run{background:var(--brasa);color:#fff;border-color:var(--brasa)}
.timer.done{background:transparent;border-color:var(--ok);color:var(--ok)}

/* ── el vino · tipo y uva por delante, nunca la puntuación ── */
/* El maridaje se queda en burdeos a proposito. El negro del modo cocina y el
   vino son los dos momentos de noche de la pagina, cocinar y descorchar, y
   son los dos unicos sin publicidad. Oscuros dentro del papel: coherente. */
.wine{background:linear-gradient(155deg,#2A0E19,#4A1428 58%,#6E1F35);
  border:1px solid #57203A;color:#F6E7EB;border-radius:16px;padding:22px;margin:30px 0}
.wine .wk{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#E5B7C3;margin:0}
.wine h4{font-family:var(--disp);font-weight:800;margin:9px 0 5px;font-size:1.4rem;
  letter-spacing:-.035em;color:#fff}
.wine .wsub{font-size:.95rem;color:#E5C4CD;margin:0 0 15px;max-width:58ch}
.grapes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.grapes span{font-family:var(--mono);font-size:.66rem;font-weight:700;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:5px 12px}
.lanes{display:grid;gap:7px;margin-bottom:13px}
.lane{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.26);
  border-radius:11px;padding:12px 14px}
.lane b{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.11em;flex:0 0 108px;color:#F0CDD6;font-weight:700}
.lane .p{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wine .note{font-size:.92rem;border-top:1px solid rgba(255,255,255,.18);padding-top:14px;margin:0;color:#EFD9E0}
.wine .note b{color:#fff}
.wine .legal{font-size:.64rem;color:#C79AA8;margin:13px 0 0;line-height:1.55;
  border-top:1px solid rgba(255,255,255,.18);padding-top:12px}

/* ── el maridaje en portada ──
   Mismo burdeos que en la pieza, pero apaisado y con foto. En una portada
   blanca es lo unico oscuro, y esa es exactamente la idea. */
.winehome{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0;
  overflow:hidden;margin:26px 0}
.winehome .wh-txt{padding:26px 24px}
.winehome h4{font-size:1.55rem;margin:8px 0 2px}
.winehome .wh-plato{margin:0 0 12px;font-size:.95rem;color:#E5C4CD}
.winehome .wh-plato a{color:#fff;text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.35)}
.winehome .wh-plato a:hover{border-bottom-color:#fff}
.winehome .wsub{margin-bottom:14px}
.winehome .wh-ir{display:inline-block;margin-top:4px;background:#FFCB5C;color:#3A2A00;
  font-weight:700;font-size:.9rem;text-decoration:none;padding:11px 18px;border-radius:999px}
.winehome .wh-ir:hover{background:#fff}
.winehome .legal{margin-top:14px}
.winehome .wh-foto{display:block;min-height:200px}
.winehome .wh-foto img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:760px){
  .winehome{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .winehome .wh-txt{padding:32px 30px}
  .winehome .wh-foto{min-height:100%}
}

/* El signature del maridaje. Vive dentro del burdeos porque lo que se vende
   es el contenedor. Si nadie lo compra no deja un hueco negro: se pliega. */
.wine .mr-slot{margin:16px 0 0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:12px}
.wine .mr-slot .rot{color:#C79AA8}
.wine:not(:has(.mr-slot .mr-lleno)) .mr-slot{display:none}

/* ── seguir cocinando ── */
.rel{display:grid;gap:11px;margin-top:12px}
.rel a{display:flex;gap:12px;align-items:center;text-decoration:none;
  border:1px solid var(--linea2);border-radius:11px;padding:9px;background:var(--sup);transition:border-color .15s}
.rel a:hover{border-color:var(--borde)}
.rel .th{flex:0 0 auto;width:54px;height:54px;border-radius:8px;overflow:hidden;
  background:var(--fondo);border:1px solid var(--linea)}
.rel .th:has(img){background:linear-gradient(140deg,#7E1E0C,#D9481F 58%,#FF8A3D);border:0}
.rel .th img{width:100%;height:100%;object-fit:cover;display:block}
.rel .tx{font-family:var(--disp);font-size:.88rem;font-weight:800;line-height:1.2;letter-spacing:-.025em}
.rel .ex{display:block;font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brasa);margin-bottom:4px}

/* ── modo cocina · el sitio ya era esto, ahora todo es coherente ── */
.fab{position:sticky;bottom:16px;margin:22px 20px 0;display:flex;justify-content:center;
  align-items:center;gap:9px;width:calc(100% - 40px);padding:16px;border:0;border-radius:12px;
  background:var(--tx);color:#fff;font-weight:800;font-size:1rem;
  box-shadow:0 10px 28px rgba(0,0,0,.5);z-index:15}
.cook{position:fixed;inset:0;z-index:200;background:#08090B;color:var(--noche-tx);display:none;flex-direction:column}
.cook.on{display:flex}
.cook-hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--noche-linea)}
.cook-hd .wake{font-family:var(--mono);font-size:.58rem;color:var(--noche-tx2);
  letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.cook-hd .x{margin-left:auto;background:transparent;border:1px solid var(--noche-borde);color:var(--noche-tx);
  border-radius:999px;padding:7px 15px;font-size:.75rem;font-weight:700}
.cook-main{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:22px;max-width:640px;margin:0 auto;width:100%}
.cook-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mostaza);font-weight:700;margin:0}
.cook-tx{font-family:var(--disp);font-size:clamp(1.5rem,5.5vw,2.1rem);line-height:1.22;
  font-weight:800;letter-spacing:-.035em;margin:14px 0 0;text-wrap:balance}
.cook-ing{margin:22px 0 0;border-top:1px solid var(--noche-linea);padding-top:15px;
  font-family:var(--mono);font-size:.72rem;color:var(--noche-tx2)}
.cook-timer{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;
  border-radius:999px;background:var(--mostaza);color:#3A2A00;border:0;font-family:var(--cuerpo);
  font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;align-self:flex-start}
.cook-timer.done{background:var(--ok)}
.cook-ft{display:flex;gap:10px;padding:15px 18px 24px;border-top:1px solid var(--noche-linea);
  max-width:640px;margin:0 auto;width:100%}
.cook-ft button{flex:1;padding:16px;border-radius:11px;border:1px solid var(--noche-borde);
  background:transparent;color:var(--noche-tx);font-weight:700;font-size:.95rem}
.cook-ft button:disabled{opacity:.35}
.cook-ft button.pri{background:var(--mostaza);color:#3A2A00;border-color:var(--mostaza);font-weight:800}
.dots{display:flex;gap:5px;justify-content:center;padding:0 0 6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--noche-linea)}
.dots i.on{background:var(--mostaza)}

/* ── huecos · colapsan si no hay relleno ── */
.mr-slot{margin:0;padding:0;min-height:0;line-height:0;font-size:0}
.mr-slot:not(.mr-lleno){display:none}
.mr-slot.mr-lleno{display:block;margin:20px;line-height:normal;font-size:16px}
.mr-slot .rot{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);text-align:center;padding-bottom:6px}

/* el signature es contenido patrocinable, no un hueco de subasta */
.sig{margin:18px 20px;border:1px solid var(--borde);border-radius:12px;
  background:var(--sup);padding:14px;position:relative;overflow:hidden}
.sig::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brasa)}
.sig .rib{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brasa);margin:0}
.sig h4{font-family:var(--disp);font-weight:800;margin:7px 0 4px;font-size:.98rem;letter-spacing:-.025em}
.sig p{margin:0;font-size:.75rem;color:var(--tx3)}

/* ── pie ── */
.mr-ft{border-top:1px solid var(--linea);padding:22px 20px 30px;
  font-family:var(--mono);font-size:.66rem;color:var(--tx3)}
.mr-ft a{color:var(--tx2);text-decoration:none;font-weight:500}
.mr-ft a:hover{color:var(--brasa)}
.mr-ft .fl{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.mr-proc{font-family:var(--mono);font-size:.66rem;color:var(--tx3);
  border-top:1px solid var(--linea2);margin-top:22px;padding-top:13px;line-height:1.6}
.mr-proc a{color:var(--brasa)}

.pagination,.nav-links{display:flex;gap:8px;justify-content:center;margin:22px 20px 0}
.page-numbers{font-family:var(--mono);font-size:.75rem;padding:8px 12px;border-radius:8px;
  border:1px solid var(--linea);background:var(--sup);color:var(--tx2);text-decoration:none}
.page-numbers.current{background:var(--tx);border-color:var(--tx);color:#fff;font-weight:700}

/* ══════════════════════════════════════════════════════════════
   ESCRITORIO
   La versión 2.0.0 salió sin un solo punto de ruptura: el sitio
   entero estaba clavado a 640 px y en un monitor se veía como un
   teléfono estirado en mitad de la pantalla. Esto lo repara.
   Se sube en dos escalones y nada cambia de sitio: sólo respira.
   ══════════════════════════════════════════════════════════════ */

/* ── escalón 1 · tableta ── */
@media (min-width:760px){
  .mr-sitio{max-width:1180px}

  /* marca y menú comparten fila: en escritorio una barra de dos pisos sobra */
  .mr-hd{padding:20px 32px 14px;border-bottom:0}
  .mr-nav{padding:0 32px 16px;overflow-x:visible;flex-wrap:wrap;gap:8px}
  .mr-nav a{font-size:.8rem;padding:7px 14px}

  .hero{padding:34px 32px 32px}
  .hero h1{font-size:clamp(2.2rem,4.4vw,3.1rem);margin:16px 0 10px}
  .hero p{font-size:1.05rem;max-width:56ch;margin-bottom:26px}
  .qlab{font-size:.64rem;margin-bottom:12px}

  .occ{grid-template-columns:repeat(3,1fr);gap:12px}
  .occ a{padding:16px}
  .occ .e{font-size:24px;margin-bottom:8px}
  .occ .t{font-size:1rem}

  .memo{padding:26px 32px}
  .memo h3{font-size:1.5rem}
  .memo p{font-size:.97rem;max-width:70ch}

  .sig{margin:22px 32px;padding:18px 20px}
  .sig h4{font-size:1.1rem}
  .sig p{font-size:.82rem}

  .sectitle{margin:34px 32px 14px}
  .sectitle h2{font-size:1.4rem}

  .ingrid{grid-template-columns:repeat(8,1fr);gap:10px;padding:0 32px}
  .ingrid a{font-size:.7rem;padding:13px 6px}

  .cards{grid-template-columns:repeat(3,1fr);gap:16px;padding:0 32px}
  .card .cb{padding:13px 14px 15px}
  .card .cb b{font-size:.95rem}

  .mr-vacio{margin:20px 32px;padding:34px 20px;font-size:.95rem}
  .mr-slot.mr-lleno{margin:26px 32px}
  .mr-ft{padding:26px 32px}

  /* la pieza: una columna de lectura, centrada y con medida cómoda */
  .mr-body{max-width:760px;margin:0 auto;padding:32px 32px 44px}
  h1.tit{font-size:clamp(2.1rem,4.2vw,2.9rem)}
  .lead{font-size:1.12rem}
  .h3{font-size:1.5rem;margin:36px 0 14px}
  .steps p,.ings li{font-size:1rem}
  .ficha div{padding:14px 16px}
  .ficha .v{font-size:1.25rem}
  .lanes{grid-template-columns:repeat(3,1fr)}
  .lane{flex-direction:column;align-items:flex-start;gap:6px}
  .lane b{flex:none}
  .wine{padding:26px}
  .rel{grid-template-columns:repeat(3,1fr)}
  .rel a{flex-direction:column;align-items:stretch;gap:10px;padding:10px}
  .rel .th{width:100%;height:120px}

  /* sin foto no hay hueco negro: la fila se queda solo con el texto */
  .rel .th:not(:has(img)){display:none}

  /* el botón de modo cocina deja de ser una barra y se va a la esquina */
  .fab{position:fixed;right:28px;bottom:24px;width:auto;margin:0;padding:15px 24px;border-radius:999px}

  .cook-main,.cook-ft{max-width:780px}
}

/* ── escalón 2 · monitor ── */
@media (min-width:1100px){
  .mr-hd{padding:26px 40px 16px}
  .mr-nav{padding:0 40px 20px}
  .hero{padding:44px 40px 40px}
  .hero p{font-size:1.12rem}
  .occ{gap:14px}
  .memo,.mr-ft{padding-left:40px;padding-right:40px}
  .sig,.sectitle,.mr-slot.mr-lleno,.mr-vacio{margin-left:40px;margin-right:40px}
  .ingrid,.cards{padding-left:40px;padding-right:40px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .ings{columns:2;column-gap:0}
  .ings li{break-inside:avoid}
  .ings li:nth-last-child(-n+1){border-bottom:0}
}





/* ══════════════════════════════════════════════════════════════
   2.2 · LO QUE FALTABA DE LA MAQUETA
   ══════════════════════════════════════════════════════════════ */

/* ── buscador y categorías ─────────────────────────────────── */
.mr-buscar{display:flex;align-items:center;gap:10px;margin:0 20px 12px;
  background:var(--sup);border:1px solid var(--linea2);border-radius:999px;padding:11px 18px}
.mr-buscar span{font-size:14px;line-height:1;opacity:.5}
.mr-buscar input{flex:1;border:0;background:transparent;font-family:inherit;
  font-size:.92rem;color:var(--tx);min-width:0}
.mr-buscar input::placeholder{color:var(--tx3)}
.mr-buscar input:focus{outline:0}
.mr-buscar:focus-within{border-color:var(--borde)}

/* Las categorías son donde vive el volumen: 116 piezas en una sola. */
.mr-cats{display:flex;gap:7px;overflow-x:auto;padding:0 20px 12px;scrollbar-width:none}
.mr-cats::-webkit-scrollbar{display:none}
.mr-cats a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.78rem;font-weight:600;color:var(--tx2);text-decoration:none;
  padding:7px 13px;border-radius:999px;background:var(--sup2);transition:.15s}
.mr-cats a:hover{color:var(--tx)}
.mr-cats a[aria-current]{background:var(--tx);color:#fff}
.mr-cats a i{font-style:normal;font-family:var(--mono);font-size:.62rem;
  font-weight:700;color:var(--tx3)}
.mr-cats a[aria-current] i{color:rgba(255,255,255,.6)}

/* ── ir a la receta ────────────────────────────────────────── */
.cta-ir{background:var(--brasa);color:#fff;border:0;border-radius:12px;
  padding:14px 26px;font-weight:800;font-size:.95rem;margin:0 0 18px}
.cta-ir:hover{filter:brightness(1.15)}

/* ── el conversor ──────────────────────────────────────────── */
.conv{background:var(--sup2);border-radius:14px;padding:16px 18px;margin:30px 0}
.conv .ck{font-family:var(--mono);font-size:.58rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3);margin:0 0 11px}
.crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crow input,.crow select{font-family:inherit;font-size:.88rem;color:var(--tx);
  background:var(--sup);border:1px solid var(--linea2);border-radius:9px;padding:9px 11px}
.crow input{width:74px}
.cout{font-family:var(--disp);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;margin-left:4px}
.conv .cleg{font-family:var(--mono);font-size:.6rem;color:var(--tx3);margin:11px 0 0;line-height:1.5}

/* ── el bloque de retail · sólo si hay precios de verdad ───── */
.retail{border:1px solid #E4B98F;background:linear-gradient(150deg,#FFF6EC,#FDEBD8);
  border-radius:14px;padding:18px;margin:18px 0 0}
.retail .rib{display:inline-block;font-family:var(--mono);font-size:.55rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#8A4A12;border:1px solid #E4B98F;
  border-radius:999px;padding:3px 10px;margin:0 0 11px}
.retail .rtx{margin:0 0 14px;font-size:.92rem;color:#5A3A1C}
.retail .rtx b{color:#3A2410;display:block;font-family:var(--disp);font-size:1.05rem;
  font-weight:800;letter-spacing:-.025em;margin-bottom:3px}
.rprecio{display:flex;align-items:center;gap:14px}
.rprecio .big{font-family:var(--disp);font-weight:800;font-size:2rem;letter-spacing:-.04em;color:#3A2410}
.rprecio .lab{font-size:.82rem;color:#7A5330;line-height:1.4}
.retail .rleg{font-family:var(--mono);font-size:.58rem;color:#8A6842;margin:13px 0 0;
  border-top:1px solid #E4B98F;padding-top:11px;line-height:1.5}

/* ── seguí cocinando, con el motivo por delante ────────────── */
.rel a{align-items:flex-start}
.rel .tx small{display:block;font-family:var(--mono);font-size:.6rem;color:var(--tx3);
  margin-top:5px;font-weight:400;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════════
   ESCRITORIO · LA COLUMNA DE ANUNCIOS
   La maqueta lo dice en el propio hueco: «en escritorio, columna
   derecha, sticky». Hasta ahora los tres huecos iban dentro del
   cuerpo y colapsados, o sea inventario que no se servía.
   ══════════════════════════════════════════════════════════════ */
.rail{display:none}

@media(min-width:1000px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
    align-items:stretch;max-width:1180px;margin:0 auto;padding:0 40px}
  /* Con el relleno a cero la columna derecha queda muerta en cada pieza. Si
     ningun hueco se llena, el articulo se queda con todo el ancho. En cuanto
     entre inventario de verdad, la columna aparece sola. */
  .layout:not(:has(.rail .mr-lleno)){grid-template-columns:minmax(0,1fr);max-width:840px}
  .mr-body{max-width:none;margin:0;padding:32px 0 44px}
  .rail{display:flex;flex-direction:column;padding:32px 0 44px}
  .rail .mr-slot{width:300px;margin:0!important}
  .rail .mr-slot.mr-lleno:first-child{position:sticky;top:22px}
  .rail .mr-slot.mr-lleno:last-child{margin-top:auto!important;position:sticky;bottom:22px}
  .mr-buscar{margin:0 40px 14px;max-width:420px}
  .mr-cats{padding:0 40px 14px;flex-wrap:wrap;overflow:visible}
  .mr-cats a{font-size:.8rem}
  .crow input{width:88px}
}

/* ── paginación de la portada ──────────────────────────────── */
.mr-paginas{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:28px 20px 0}
.mr-paginas .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:11px 15px;border-radius:11px;background:var(--sup);
  border:1px solid var(--linea2);color:var(--tx2);text-decoration:none;
  font-weight:700;font-size:.85rem;transition:.15s}
.mr-paginas .page-numbers:hover{border-color:var(--borde);color:var(--tx)}
.mr-paginas .page-numbers.current{background:var(--tx);border-color:var(--tx);color:#fff}
.mr-paginas .dots{background:transparent;border:0}
.mr-cuantas{font-family:var(--mono);font-size:.62rem;color:var(--tx3);text-align:center;
  margin:14px 20px 0;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════════
   RETAIL MEDIA · el momento de más intención
   La lista ya está decidida: es cuando el precio importa. Un solo
   patrocinador para toda la lista, nunca uno por ingrediente.
   ══════════════════════════════════════════════════════════════ */
.spon{border:1.5px solid var(--mostaza);border-radius:14px;
  background:linear-gradient(120deg,#FFFCF4,#FFF4DC);padding:14px;margin-top:14px}
.spon .tag{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mostaza-deep);background:#fff;border:1px solid var(--mostaza);
  border-radius:999px;padding:3px 9px;display:inline-block}
.brandbox{display:flex;align-items:center;gap:11px;margin-top:10px}
.brandmark{flex:0 0 auto;width:52px;height:52px;border-radius:10px;
  background:repeating-linear-gradient(135deg,#F3E4BC,#F3E4BC 6px,#EAD7A4 6px,#EAD7A4 12px);
  display:grid;place-items:center;font-size:8px;font-weight:800;color:#7A5B12;
  text-align:center;line-height:1.15;letter-spacing:.04em}
.brandbox .bt{display:block;font-size:.88rem;font-weight:700;line-height:1.25}
.brandbox .bs{display:block;font-size:.75rem;color:var(--tx2);margin-top:2px}
.cost{display:flex;align-items:baseline;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid #EBD9A8;flex-wrap:wrap}
.cost .big{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cost .u{font-size:.75rem;color:var(--tx2)}
.cost .src{margin-left:auto;font-size:10px;color:var(--tx2);text-align:right;max-width:46%}

/* la etiqueta va en el ingrediente que patrocina, dentro de la línea */
.ingspon{display:inline-block;margin-left:6px;font-size:9px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mostaza-deep);
  background:#FFF4DC;border:1px solid #EBD9A8;border-radius:999px;
  padding:1px 7px;vertical-align:middle}

/* ── el botón pegajoso de modo cocina, negro, como en el mockup ── */
.fab{position:sticky;bottom:14px;margin:22px 20px 0;display:flex;justify-content:center;
  align-items:center;gap:9px;width:calc(100% - 40px);padding:15px;border:0;border-radius:14px;
  background:var(--tx);color:#fff;font-weight:800;font-size:1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:15}
@media(min-width:760px){
  .fab{max-width:360px;margin-left:auto;margin-right:auto}
}

/* ══════════════════════════════════════════════════════════════
   ¿QUÉ COCINO HOY? · el segundo eje de entrada del mockup
   Quien no tiene ocasión clara tiene una nevera. Tres preguntas y
   un plato, sin registro. Los chips escriben en la URL y la
   consulta de la portada los lee: filtra de verdad.
   ══════════════════════════════════════════════════════════════ */
.tool2{background:var(--sup);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);padding:24px 20px;margin-top:4px}
.tool2 .tk{font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brasa);margin:0}
.tool2 h2{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.035em;
  margin:9px 0 5px}
.tool2 .tsub{margin:0 0 18px;font-size:.9rem;color:var(--tx2)}
.tnum{font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx3);margin:16px 0 8px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips button{background:var(--fondo);border:1px solid var(--borde);border-radius:999px;
  padding:9px 15px;font-size:.85rem;font-weight:600;color:var(--tx);transition:.15s}
.chips button:hover{border-color:var(--tx3)}
.chips button.on{background:var(--tx);border-color:var(--tx);color:#fff;font-weight:700}
.tgo{margin-top:20px;background:var(--brasa);color:#fff;border:0;border-radius:12px;
  padding:14px 28px;font-weight:800;font-size:.95rem}
.tclear{display:inline-block;margin-left:14px;font-size:.85rem;color:var(--tx2);
  text-decoration:underline;text-underline-offset:3px}

/* ── por ingrediente, con su emoji, como en el mockup ── */
.ingrid a i{display:block;font-size:22px;font-style:normal;margin-bottom:5px}

@media(min-width:760px){
  .tool2{padding:30px 40px}
  .tool2 h2{font-size:1.9rem}
  .chips button{font-size:.9rem;padding:10px 17px}
}