/* ══════════════════════════════════════════════════════════════════
   MIS RECETAS PREFERIDAS · maqueta 2026 · sistema "warm neutral"
   Halant (titulares) + Instrument Sans (interfaz) · sin CDN
   ══════════════════════════════════════════════════════════════════ */

:root{
  --fondo:#F6F7F3;
  --sup:#FFFFFF;
  --sup-2:#EDF2EC;
  --sup-3:#E2EBE3;
  --tinta:#122019;
  --tinta-fuerte:#0E2A20;
  --verde:#1E4B39;
  --teja:#BF4A32;
  --muted:#55625A;
  --muted-2:#72807A;
  --linea:#E1E6DF;
  --borde:#D2D9CF;

  --disp:'Halant',Georgia,serif;
  --ui:'Instrument Sans',system-ui,-apple-system,sans-serif;

  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --r-pill:999px;

  --sombra:0 1px 2px rgba(15,15,15,.04), 0 14px 40px -18px rgba(15,15,15,.16);
  --sombra-suave:0 1px 2px rgba(15,15,15,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:400 17px/1.62 var(--ui);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:#DCE9DE;color:var(--tinta)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}

.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.wrap-medio{width:min(1000px,100% - 48px);margin-inline:auto}
.wrap-estrecho{width:min(760px,100% - 48px);margin-inline:auto}

/* ── tipografía ─────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h1 em,h2 em{color:var(--teja)}
h1{font-size:clamp(2.9rem,6.6vw,5.5rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.9rem)}
h3{font-size:1.45rem;letter-spacing:-.02em;line-height:1.16}
em{font-style:italic}
.acento{color:var(--muted)}

.chip-et{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .95rem .42rem .55rem;
  border:1px solid var(--borde);border-radius:var(--r-pill);background:var(--sup);
  font:500 .78rem var(--ui);color:var(--tinta);letter-spacing:0}
.chip-et .punto{width:22px;height:22px;border-radius:50%;background:var(--teja);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem}

/* ── cabecera flotante ──────────────────────────────────────────── */
.barra{position:sticky;top:14px;z-index:50;padding:0 0 8px}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:64px;padding:0 8px;background:rgba(246,247,243,.92);
  border:1px solid var(--borde);border-radius:var(--r-pill);
  backdrop-filter:blur(14px);box-shadow:var(--sombra-suave)}
.menu-btn{display:inline-flex;align-items:center;gap:.5rem;height:46px;padding:0 1.1rem;
  border-radius:var(--r-pill);font:500 .92rem var(--ui);color:var(--tinta)}
.menu-btn:hover{background:var(--sup-2)}
.menu-btn svg{width:16px;height:16px}
.marca{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-size:1.34rem;
  letter-spacing:-.03em;line-height:1;white-space:nowrap}
.marca img{width:30px;height:30px;border-radius:50%}
.barra-acc{display:flex;align-items:center;gap:.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:46px;
  padding:0 1.25rem;border-radius:var(--r-pill);font:500 .92rem var(--ui);
  background:var(--verde);color:#F4F8F4;transition:transform .15s,opacity .15s}
.btn:hover{transform:translateY(-1px);opacity:.94}
.btn-ghost{background:transparent;color:var(--tinta);border:1px solid var(--borde)}
.btn-ghost:hover{background:var(--sup-2)}
.btn-sm{height:40px;padding:0 1rem;font-size:.86rem}
.menu-movil{display:none}
.menu-movil[open]{display:block}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{position:relative;padding:18px 0 clamp(2.4rem,5vw,4rem);overflow:hidden}
.hero-fotos{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.6vw,1.4rem);
  align-items:end;height:clamp(180px,26vw,300px);width:min(1320px,100% - 32px);margin:0 auto;
  position:relative}
.hero-fotos a{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--sup-2);
  transform-origin:bottom center;transition:transform .4s ease}
.hero-fotos img{width:100%;height:100%;object-fit:cover}
.hero-fotos a:nth-child(1){height:72%;transform:rotate(-9deg) translateY(8%)}
.hero-fotos a:nth-child(2){height:88%;transform:rotate(-4.5deg) translateY(4%)}
.hero-fotos a:nth-child(3){height:100%;transform:translateY(0)}
.hero-fotos a:nth-child(4){height:88%;transform:rotate(4.5deg) translateY(4%)}
.hero-fotos a:nth-child(5){height:72%;transform:rotate(9deg) translateY(8%)}
.hero-fotos a:hover{transform:translateY(-6px) rotate(0)}
.hero-fotos::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:34%;
  background:linear-gradient(to top,var(--fondo) 6%,rgba(246,247,243,.72) 40%,transparent 100%);
  pointer-events:none;z-index:2}

.hero-centro{position:relative;z-index:3;text-align:center;margin-top:clamp(-2.4rem,-3.4vw,-.9rem)}
.hero-centro h1{margin:1.1rem auto 0;max-width:15ch}
.hero-centro p.sub{max-width:56ch;margin:1.1rem auto 0;color:var(--muted);font-size:1.06rem}

.buscador{position:relative;max-width:900px;margin:1.4rem auto 0;padding:1.1rem;
  border-radius:26px;box-shadow:var(--sombra);background:var(--sup)}
.buscador::before{content:"";position:absolute;inset:0;border-radius:26px;border:1px solid var(--borde);
  pointer-events:none}
.buscador-in{display:flex;align-items:center;gap:.8rem;padding:.2rem .3rem}
.buscador input{flex:1;min-width:0;border:0;background:transparent;font:400 1.02rem var(--ui);
  color:var(--tinta);padding:.55rem .4rem}
.buscador input::placeholder{color:var(--muted-2)}
.buscador input:focus{outline:none}
.buscador:focus-within{box-shadow:var(--sombra),0 0 0 3px rgba(15,15,15,.06)}
.buscador .lupa{width:20px;height:20px;color:var(--muted);flex:none}
.buscador-pie{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;
  padding:.55rem .3rem .1rem;border-top:1px solid var(--linea)}
.sug{display:inline-flex;align-items:center;height:34px;padding:0 .9rem;border:1px solid var(--borde);
  border-radius:var(--r-pill);font:500 .82rem var(--ui);color:var(--muted);background:var(--sup)}
.sug:hover{color:var(--tinta);background:var(--sup-3)}
.buscador .btn{margin-left:auto}

.hero-datos{display:flex;justify-content:center;gap:clamp(1.6rem,4vw,3.4rem);margin-top:2.4rem;
  flex-wrap:wrap}
.hero-datos div{text-align:center}
.hero-datos b{display:block;font:400 1.9rem var(--disp);line-height:1;letter-spacing:-.03em}
.hero-datos span{font:500 .74rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ── secciones ──────────────────────────────────────────────────── */
.seccion{padding:clamp(3.4rem,7vw,6rem) 0;scroll-margin-top:100px}
.seccion-alt{background:var(--sup-2)}
.cab-centro{text-align:center;max-width:720px;margin:0 auto clamp(2rem,4vw,3rem)}
.cab-centro h2{margin:1rem 0 0}
.cab-centro p{margin:.9rem auto 0;color:var(--muted);max-width:52ch}
.cab-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2.2rem}
.cab-fila h2{margin:.7rem 0 0}
.cab-fila p{margin:.6rem 0 0;color:var(--muted);max-width:48ch}
.enlace{display:inline-flex;align-items:center;gap:.4rem;font:500 .92rem var(--ui);
  color:var(--tinta);border-bottom:1px solid var(--borde);padding-bottom:.15rem}
.enlace:hover{border-color:var(--tinta)}

/* ── tarjetas de receta ─────────────────────────────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.rejilla-4{grid-template-columns:repeat(4,1fr)}

.card{display:flex;flex-direction:column;padding:10px;border-radius:var(--r-lg);
  background:var(--sup);border:1px solid var(--linea);box-shadow:var(--sombra-suave);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--borde)}
.card .foto{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--sup-2)}
.card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .foto img{transform:scale(1.04)}
.card .tag{position:absolute;top:10px;left:10px;padding:.32rem .7rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font:500 .72rem var(--ui);color:var(--tinta)}
.card .cuerpo{padding:1rem .6rem .7rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card h3{font-size:1.32rem;line-height:1.14}
.card p.desc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .meta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:auto;padding-top:.7rem;
  font:500 .76rem var(--ui);color:var(--muted-2)}
.card .meta b{color:var(--tinta);font-weight:600}

.card .foto.deco{display:flex;align-items:center;justify-content:center;aspect-ratio:4/1.55;
  background:linear-gradient(115deg,#E4EFE4 0%,#D8E7DA 45%,#EDF0DC 100%)}
.card .foto.deco span{font:400 2.6rem var(--disp);color:#2F1706;opacity:.55}

/* ── categorías ─────────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cat{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1.5;
  background:var(--sup-2);border:1px solid var(--linea)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat:hover img{transform:scale(1.05)}
.cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,18,12,.90) 0%,rgba(4,18,12,.62) 15%,rgba(4,18,12,.12) 32%,transparent 44%)}
.cat .tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1rem}
.cat b{display:block;font:400 1.3rem var(--disp);line-height:1.05;color:#FFFFFF;letter-spacing:-.02em}
.cat .tx > span{display:inline-block;margin-top:.45rem;font:500 .72rem var(--ui);color:#E9F0E8;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);border-radius:var(--r-pill);
  padding:.18rem .6rem}

/* ── lista de clásicos ──────────────────────────────────────────── */
.lista{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 2.4rem;margin:0;padding:0;list-style:none}
.lista li{display:grid;grid-template-columns:auto 92px 1fr auto;gap:1rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--linea)}
.lista .n{font:400 1.5rem var(--disp);color:var(--muted-2);min-width:2ch}
.lista img{width:92px;height:68px;border-radius:14px;object-fit:cover}
.lista b{display:block;font:400 1.2rem var(--disp);line-height:1.1;letter-spacing:-.02em}
.lista small{font:500 .76rem var(--ui);color:var(--muted-2)}
.lista .flecha{color:var(--muted-2);font-size:1.1rem}
.lista li:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ── pasos / cómo funciona ──────────────────────────────────────── */
.pasos-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.paso-card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.4rem;display:flex;flex-direction:column;gap:1rem;min-height:250px}
.paso-card .et{font:500 .74rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.paso-card .hueco{flex:1;border-radius:18px;background:var(--sup-2);display:flex;
  align-items:center;justify-content:center;padding:1rem}
.paso-card h3{font-size:1.6rem}
.paso-card p{margin:0;color:var(--muted);font-size:.94rem}

/* ── newsletter ─────────────────────────────────────────────────── */
.news{padding:clamp(3rem,6vw,5rem) 0}
.news-in{position:relative;border-radius:32px;padding:clamp(2rem,4vw,3.4rem);text-align:center;
  background:var(--sup-2);border:1px solid var(--linea);overflow:hidden}
.news-in::before,.news-in::after{content:"";position:absolute;width:340px;height:340px;
  border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.news-in::before{background:#CFE2CE;left:-80px;bottom:-140px}
.news-in::after{background:#E7E9CB;right:-90px;top:-150px}
.news-in > *{position:relative;z-index:1}
.news h2{margin:.9rem auto 0;max-width:22ch}
.news p{color:var(--muted);max-width:46ch;margin:.9rem auto 0}
.news form{display:flex;gap:.5rem;justify-content:center;margin:1.6rem auto 0;max-width:520px;
  position:relative;z-index:1}
.news input{flex:1;min-width:0;height:52px;padding:0 1.2rem;border:1px solid var(--borde);
  border-radius:var(--r-pill);background:var(--sup);font:400 .98rem var(--ui);color:var(--tinta)}
.news .legal{font:400 .78rem var(--ui);color:var(--muted-2);margin-top:.8rem}

/* ── pie ────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);padding:clamp(2.6rem,5vw,4rem) 0 1.6rem;background:var(--fondo)}
.pie-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.pie h3{font:500 .76rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:.9rem;font-family:var(--ui)}
.pie a{display:block;padding:.24rem 0;color:var(--muted);font-size:.94rem}
.pie a:hover{color:var(--tinta)}
.pie .marca{font-size:1.5rem;margin-bottom:.7rem}
.pie p{color:var(--muted-2);font-size:.92rem;max-width:32ch}
.pie-bajo{margin-top:2.4rem;border-top:1px solid var(--linea);padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:400 .78rem var(--ui);color:var(--muted-2)}

/* ── listado / categoría ────────────────────────────────────────── */
.cab-lista{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.4rem,3vw,2rem);text-align:center}
.cab-lista h1{margin:.9rem 0 0;font-size:clamp(2.6rem,6vw,4.6rem)}
.cab-lista p.intro{margin:1rem auto 0;max-width:56ch;color:var(--muted)}
.cab-lista .cuenta{display:inline-flex;margin-top:1.4rem;padding:.4rem .95rem;border-radius:var(--r-pill);
  background:var(--sup);border:1px solid var(--borde);font:500 .8rem var(--ui);color:var(--muted)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:1.8rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .95rem;
  border-radius:var(--r-pill);border:1px solid var(--borde);background:var(--sup);
  font:500 .82rem var(--ui);color:var(--muted);transition:.15s}
.chip:hover{color:var(--tinta);background:var(--sup-3)}
.chip.on{background:var(--verde);color:#F4F8F4;border-color:var(--verde)}
.chip .n{opacity:.55;font-size:.74rem}
.barra-orden{display:flex;justify-content:flex-end;align-items:center;gap:.6rem;margin:1.6rem 0 0;
  font:500 .78rem var(--ui);color:var(--muted-2)}
.barra-orden select{height:38px;padding:0 1rem;border-radius:var(--r-pill);border:1px solid var(--borde);
  background:var(--sup);font:500 .8rem var(--ui);color:var(--tinta)}
.paginacion{display:flex;justify-content:center;gap:.4rem;margin:2.6rem 0 0;flex-wrap:wrap}
.paginacion a,.paginacion span{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .8rem;border-radius:var(--r-pill);border:1px solid var(--borde);
  font:500 .85rem var(--ui);background:var(--sup);color:var(--muted)}
.paginacion .on{background:var(--verde);color:#F4F8F4;border-color:var(--verde)}
.paginacion a:hover{background:var(--sup-3);color:var(--tinta)}

/* ── receta ─────────────────────────────────────────────────────── */
.migas{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;padding:1.6rem 0 0;
  font:400 .82rem var(--ui);color:var(--muted-2)}
.migas a:hover{color:var(--tinta)}
.receta-cab{text-align:center;padding:1.2rem 0 0;max-width:900px;margin-inline:auto}
.receta-cab h1{margin:1rem 0 0;font-size:clamp(2.4rem,5.6vw,4.4rem)}
.receta-meta{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0 0}
.pill{display:inline-flex;align-items:center;gap:.4rem;height:38px;padding:0 .95rem;
  border-radius:var(--r-pill);border:1px solid var(--borde);background:var(--sup);
  font:500 .8rem var(--ui);color:var(--muted)}
.pill b{color:var(--tinta);font-weight:600}
.pill-oscura{background:var(--verde);color:#F4F8F4;border-color:var(--verde)}

.receta-foto{max-width:1120px;margin:2.2rem auto 0;border-radius:32px;overflow:hidden;
  position:relative;aspect-ratio:16/8.4;background:var(--sup-2);box-shadow:var(--sombra)}
.receta-foto img{width:100%;height:100%;object-fit:cover}

.receta-cuerpo{display:grid;grid-template-columns:1.5fr .95fr;gap:clamp(2rem,4vw,4rem);
  padding:clamp(2.4rem,5vw,4rem) 0}
.entrada{font-size:1.14rem;line-height:1.7;color:#1F1F1F}
.bloque{margin-top:2.8rem}
.bloque h2{font-size:1.9rem;margin-bottom:1.2rem}
.pasos{list-style:none;margin:0;padding:0;counter-reset:p}
.pasos li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.1rem 0;
  border-bottom:1px solid var(--linea)}
.pasos li:first-child{padding-top:0}
.pasos .n{font:400 1.5rem var(--disp);color:var(--muted-2);min-width:2.4ch;line-height:1.2}
.pasos p{margin:0;font-size:1.04rem;line-height:1.65}

.ingredientes{position:sticky;top:96px;background:var(--sup);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sombra-suave)}
.ingredientes h2{font-size:1.6rem;margin:0 0 .3rem}
.ingredientes .sub{font:400 .8rem var(--ui);color:var(--muted-2);margin:0 0 1rem}
.ingredientes ul{list-style:none;margin:0;padding:0}
.ingredientes li{border-top:1px solid var(--linea)}
.ingredientes label{display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 0;cursor:pointer;
  font-size:.97rem;line-height:1.45}
.ingredientes input{appearance:none;width:19px;height:19px;flex:none;margin-top:.15rem;
  border:1px solid var(--borde);border-radius:6px;background:var(--fondo);cursor:pointer;position:relative}
.ingredientes input:checked{background:var(--tinta-fuerte);border-color:var(--tinta-fuerte)}
.ingredientes input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #F4F8F4;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.ingredientes input:checked + span{text-decoration:line-through;color:var(--muted-2)}
.acciones{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}

.trucos{margin-top:2.4rem;background:var(--sup-2);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.4rem}
.trucos h2{font-size:1.5rem;margin:0 0 .6rem}
.trucos li{margin:.35rem 0;color:#1F1F1F}

.compartir{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:2.4rem;
  padding-top:1.6rem;border-top:1px solid var(--linea)}
.compartir .et{font:500 .76rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

.valora{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);padding:1.1rem 1.2rem;
  margin-bottom:1rem}
.valora b{display:block;font:400 1.2rem var(--disp);margin-bottom:.5rem}
.estrellas{display:flex;gap:.2rem}
.estrellas button{font-size:1.4rem;line-height:1;color:#CFD6CF;padding:0 .1rem;transition:.12s}
.estrellas button:hover,.estrellas button.on{color:var(--teja)}

/* ── resultados de búsqueda ─────────────────────────────────────── */
.res{display:grid;gap:.8rem}
.res-item{display:grid;grid-template-columns:132px 1fr;gap:0;align-items:stretch;
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .2s,transform .2s}
.res-item:hover{border-color:var(--borde);transform:translateY(-2px)}
.res-item img{width:132px;height:100%;min-height:104px;object-fit:cover}
.res-item .tx{padding:1rem 1.2rem;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.res-item h3{font-size:1.25rem}
.res-item small{font:500 .78rem var(--ui);color:var(--muted-2)}
.res-item mark{background:#E3EEDF;color:inherit;border-radius:3px;padding:0 .12em}

/* ── panel de menú ──────────────────────────────────────────────── */
.panel{margin-top:10px;background:var(--sup);border:1px solid var(--borde);border-radius:22px;
  padding:10px;box-shadow:var(--sombra);position:relative;z-index:49}
.panel-in{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.panel a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;
  border-radius:12px;font:500 .92rem var(--ui);color:var(--muted)}
.panel a:hover{background:var(--sup-2);color:var(--tinta)}
.panel a .n{color:var(--muted-2);font-size:.78rem}

/* ── varios ─────────────────────────────────────────────────────── */
.vacio{border:1px dashed var(--borde);border-radius:var(--r-lg);padding:3rem 2rem;text-align:center;
  background:var(--sup)}
.vacio h2{font-size:1.8rem}
.vacio p{color:var(--muted);margin:.6rem auto 0;max-width:44ch}
.salto{position:absolute;left:-9999px}
.salto:focus{left:1rem;top:1rem;z-index:99;background:var(--sup);border:1px solid var(--borde);
  padding:.7rem 1.1rem;border-radius:var(--r-pill);font-weight:600}
.aviso{background:var(--sup-3);border-bottom:1px solid var(--linea);font:500 .74rem var(--ui);
  letter-spacing:.04em;text-align:center;padding:.45rem 1rem;color:var(--muted)}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:1080px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .rejilla-4{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .receta-cuerpo{grid-template-columns:1fr}
  .ingredientes{position:static;order:2}
  .pie-in{grid-template-columns:1fr 1fr}
  .hero-fotos{height:220px}
}
@media (max-width:760px){
  .barra{top:8px}
  .barra-in{height:56px;padding:0 6px}
  .menu-btn span,.barra-acc .btn-ghost,.barra-acc .lbl{display:none}
  .menu-btn{padding:0 .8rem}
  .barra-acc .btn{width:42px;height:42px;padding:0;border-radius:50%}
  .marca{font-size:1.22rem;gap:.4rem}
  .marca img{width:26px;height:26px}
  .hero-fotos{grid-template-columns:repeat(3,1fr);height:170px;gap:.5rem}
  .hero-fotos a:nth-child(4),.hero-fotos a:nth-child(5){display:none}
  .hero-fotos a:nth-child(1){transform:rotate(-6deg) translateY(6%)}
  .hero-fotos a:nth-child(2){transform:rotate(-2.5deg) translateY(3%)}
  .hero-fotos a:nth-child(3){transform:rotate(5deg) translateY(5%)}
  .hero-fotos::after{height:40%}
  .hero-centro{margin-top:-1.2rem}
  .panel-in{grid-template-columns:1fr 1fr}
  .buscador{padding:.8rem;border-radius:22px}
  .buscador-in{flex-wrap:wrap}
  .buscador .btn{width:100%;margin:.5rem 0 0}
  .pasos-3,.rejilla,.rejilla-4{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .lista{grid-template-columns:1fr}
  .news form{flex-direction:column}
  .news .btn{width:100%}
  .pie-in{grid-template-columns:1fr}
  .receta-foto{aspect-ratio:4/3;border-radius:24px}
  .res-item{grid-template-columns:96px 1fr}
  .res-item img{width:96px;min-height:96px}
  .pasos li{grid-template-columns:1fr;gap:.3rem}
}
@media (max-width:480px){
  .hero-centro h1{font-size:2.5rem}
  .aviso{font-size:.66rem}
}