@charset "UTF-8";
/* alimentos.plus — hoja de estilo unica. Sin frameworks. */

:root{
  color-scheme: light;           /* la web se ve siempre clara */

  --verde:#1f7a4d;
  --verde-osc:#155c39;
  --verde-clar:#e8f5ee;
  --verde-borde:#bfe3d0;
  --naranja:#d9480f;
  --naranja-clar:#fff1e8;
  --ambar:#b45309;

  --tinta:#16201b;
  --tinta-2:#4a5a52;
  --tinta-3:#71827a;
  --linea:#e2e8e4;
  --fondo:#ffffff;
  --fondo-2:#f6f9f7;

  --r:14px;
  --r-s:9px;
  --sombra:0 1px 2px rgba(16,32,24,.05), 0 4px 14px rgba(16,32,24,.05);
  --sombra-alta:0 2px 6px rgba(16,32,24,.07), 0 12px 32px rgba(16,32,24,.09);
  --ancho:1120px;
  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--tipo); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--verde-osc); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--naranja)}
h1,h2,h3,h4{line-height:1.22; margin:0 0 .5em; font-weight:700; letter-spacing:-.011em; text-wrap:balance}
h1{font-size:clamp(1.85rem,1.25rem + 2.1vw,2.7rem); margin-bottom:.35em}
h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.72rem); margin-top:2.2rem}
h3{font-size:1.16rem; margin-top:1.6rem}
p{margin:0 0 1rem; text-wrap:pretty}
ul,ol{padding-left:1.25rem}
:focus-visible{outline:3px solid var(--naranja); outline-offset:2px; border-radius:4px}

.ancho{max-width:var(--ancho); margin-inline:auto; padding-inline:20px}
.vo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--verde);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--r-s) 0}
.saltar:focus{left:0}

/* ---------- Cabecera ---------- */
.cab{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--linea)}
.cab-in{max-width:var(--ancho); margin-inline:auto; padding:.6rem 20px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem}
.marca{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--tinta); font-weight:800; font-size:1.12rem; letter-spacing:-.02em}
.marca:hover{color:var(--tinta)}
.marca-ico{width:30px;height:30px;flex:none}
.marca-txt b{color:var(--verde); font-weight:800}

.busc{position:relative; max-width:520px; width:100%; justify-self:center}
.busc input{
  width:100%; padding:.62rem 2.9rem .62rem 1rem; font:inherit; font-size:.97rem;
  border:1.5px solid var(--linea); border-radius:999px; background:var(--fondo-2); color:var(--tinta);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.busc input::placeholder{color:var(--tinta-3)}
.busc input:focus{outline:none; background:#fff; border-color:var(--verde); box-shadow:0 0 0 4px var(--verde-clar)}
.busc button{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:34px;height:34px; border:0; border-radius:50%; background:var(--verde); cursor:pointer;
  display:grid; place-items:center;
}
.busc button:hover{background:var(--verde-osc)}
.busc button svg{width:17px;height:17px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round}

.busc-res{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff;
  border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra-alta);
  max-height:min(65vh,430px); overflow-y:auto; z-index:120; padding:.35rem;
}
.busc-res[hidden]{display:none}
.busc-res .gr{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-3);
  padding:.55rem .7rem .3rem; font-weight:700}
.busc-res a{display:flex; align-items:center; gap:.65rem; padding:.5rem .7rem; border-radius:var(--r-s);
  text-decoration:none; color:var(--tinta); font-size:.94rem}
.busc-res a:hover,.busc-res a.sel{background:var(--verde-clar); color:var(--tinta)}
.busc-res .emo{font-size:1.1rem; flex:none; width:1.5rem; text-align:center}
.busc-res .mini{width:38px;height:28px;object-fit:cover;border-radius:5px;flex:none}
.busc-res .kcal{margin-left:auto; color:var(--tinta-3); font-size:.82rem; white-space:nowrap}
.busc-res .nada{padding:1rem .8rem; color:var(--tinta-2); font-size:.93rem}

.nav{display:flex; gap:.15rem; align-items:center}
.nav a{padding:.42rem .68rem; border-radius:var(--r-s); text-decoration:none; color:var(--tinta-2);
  font-size:.92rem; font-weight:600; white-space:nowrap}
.nav a:hover{background:var(--verde-clar); color:var(--verde-osc)}

.menu-btn{display:none; width:40px;height:38px; border:1.5px solid var(--linea); background:#fff;
  border-radius:var(--r-s); cursor:pointer; padding:9px 9px}
.menu-btn span{display:block; height:2px; background:var(--tinta); border-radius:2px; margin:3px 0}

@media (max-width:940px){
  .cab-in{grid-template-columns:auto 1fr auto; gap:.6rem}
  .menu-btn{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--linea);
    flex-direction:column; align-items:stretch; padding:.5rem; gap:.1rem; display:none; box-shadow:var(--sombra)}
  .nav.abierto{display:flex}
  .nav a{padding:.7rem .9rem; font-size:1rem}
}
@media (max-width:620px){
  .cab-in{grid-template-columns:auto auto; grid-template-areas:"marca menu" "busc busc"; row-gap:.55rem}
  .marca{grid-area:marca}
  .menu-btn{grid-area:menu}
  .busc{grid-area:busc; max-width:none}
  .marca-txt{font-size:1rem}
}

/* ---------- Migas ---------- */
.migas{border-bottom:1px solid var(--linea); background:var(--fondo-2)}
.migas ol{list-style:none; margin:0; padding:.55rem 0; display:flex; flex-wrap:wrap; gap:.3rem;
  font-size:.83rem; color:var(--tinta-3)}
.migas li+li::before{content:"›"; margin-right:.3rem; color:var(--tinta-3)}
.migas a{color:var(--tinta-2); text-decoration:none}
.migas a:hover{color:var(--naranja); text-decoration:underline}

/* ---------- Bloques ---------- */
.seccion{padding:2.4rem 0}
.seccion-tit{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.seccion-tit h2{margin:0}
.enl-mas{font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap}
.enl-mas::after{content:" →"}

/*
 * Rejillas sin huecos. Con grid auto-fill la ultima fila deja el hueco de las
 * celdas que faltan; con flex y flex-grow los elementos que quedan se reparten
 * el ancho sobrante y la fila siempre llega hasta el borde.
 */
.rejilla{display:flex; flex-wrap:wrap; gap:.85rem}
.rejilla > *{flex:1 1 var(--base,220px); min-width:var(--base,220px)}
.rej-2{--base:300px}
.rej-3{--base:240px}
.rej-4{--base:200px}
.rej-5{--base:170px}
@media (max-width:520px){
  .rejilla{--base:100%}
  .rejilla > *{min-width:0}
}

/* ---------- Tarjetas ---------- */
.tj{display:flex; text-decoration:none; color:var(--tinta); background:#fff;
  border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
  transition:border-color .15s, box-shadow .15s, transform .15s}
.tj:hover{border-color:var(--verde-borde); box-shadow:var(--sombra); transform:translateY(-2px); color:var(--tinta)}
.tj-cuerpo{display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem; min-width:0; flex:1}
.tj-tit{font-weight:650; font-size:.97rem; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tj-dato{font-size:.82rem; color:var(--tinta-3)}
.tj-dato b{color:var(--naranja); font-size:.95rem}
.tj-sep{margin:0 .35rem}

.tj-al{align-items:center}
.tj-al .tj-emo{font-size:1.5rem; padding-left:.85rem; flex:none}

.tj-re{flex-direction:column}
.tj-re .tj-foto{display:block; aspect-ratio:16/9; background:var(--verde-clar); overflow:hidden}
.tj-re .tj-foto img{width:100%;height:100%;object-fit:cover; transition:transform .4s}
.tj-re:hover .tj-foto img{transform:scale(1.045)}
.tj-sinfoto{display:grid; place-items:center; width:100%; height:100%; font-size:2rem; opacity:.45}

/* ---------- Portada ---------- */
.hero{background:linear-gradient(168deg,var(--verde-clar) 0%,#fff 62%); border-bottom:1px solid var(--linea)}
.hero-in{max-width:var(--ancho); margin-inline:auto; padding:3.2rem 20px 2.8rem; text-align:center}
.hero h1{max-width:19ch; margin-inline:auto}
.hero h1 em{font-style:normal; color:var(--verde)}
.hero-sub{font-size:1.1rem; color:var(--tinta-2); max-width:60ch; margin:0 auto 1.6rem}
.hero-busc{max-width:600px; margin:0 auto}
.hero-busc .busc{max-width:none}
.hero-busc .busc input{padding:.9rem 3.3rem .9rem 1.25rem; font-size:1.05rem; background:#fff;
  border-color:var(--verde-borde); box-shadow:var(--sombra)}
.hero-busc .busc button{width:40px;height:40px;right:7px}
.hero-sug{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1rem;
  font-size:.87rem; color:var(--tinta-3)}
.hero-sug a{background:#fff; border:1px solid var(--linea); border-radius:999px; padding:.28rem .8rem;
  text-decoration:none; color:var(--tinta-2)}
.hero-sug a:hover{border-color:var(--verde); color:var(--verde-osc); background:var(--verde-clar)}

.cifras{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem}
.cifra{flex:1 1 160px; min-width:140px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:1rem; text-align:center}
.cifra b{display:block; font-size:1.65rem; color:var(--verde); line-height:1.1; letter-spacing:-.02em}
.cifra span{font-size:.84rem; color:var(--tinta-3)}

/* ---------- Ficha de alimento ---------- */
.ficha-cab{background:var(--fondo-2); border-bottom:1px solid var(--linea); padding:2rem 0 1.6rem}
/* El flex va en la fila del titulo, no en todo .ancho: si no, el bloque de
   macros se convierte en un flex-item y colapsa a su ancho de contenido. */
.ficha-fila{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.ficha-emo{font-size:3rem; line-height:1; flex:none}
.ficha-tit{flex:1 1 300px; min-width:0}
.ficha-tit h1{margin-bottom:.4rem}
.ficha-cat{display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--linea);
  border-radius:999px; padding:.2rem .7rem; font-size:.83rem; color:var(--tinta-2); text-decoration:none}
.ficha-cat:hover{border-color:var(--verde); color:var(--verde-osc)}
.ficha-sci{font-style:italic; color:var(--tinta-3); font-size:.9rem; margin-top:.4rem}

/* Cinco macros en una sola fila que ocupa todo el ancho */
.macros{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem}
.macro{flex:1 1 150px; min-width:130px}
.macro{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:.85rem; text-align:center}
@media (max-width:560px){ .macro{flex:1 1 calc(50% - .35rem); min-width:0} }
.macro.destaca{background:var(--naranja-clar); border-color:#f5cbb2}
.macro b{display:block; font-size:1.5rem; line-height:1.15; letter-spacing:-.02em}
.macro.destaca b{color:var(--naranja)}
.macro span{font-size:.8rem; color:var(--tinta-3); display:block}
.macro em{font-style:normal; font-size:.72rem; color:var(--tinta-3)}

/* Calculadora de raciones */
.calc{background:var(--verde-clar); border:1px solid var(--verde-borde); border-radius:var(--r); padding:1.2rem}
.calc h2{margin-top:0}
.calc-fila{display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap}
.calc label{font-size:.87rem; font-weight:600; color:var(--tinta-2); display:block; margin-bottom:.3rem}
.calc input[type=number]{width:130px; padding:.55rem .7rem; font:inherit; border:1.5px solid var(--verde-borde);
  border-radius:var(--r-s); background:#fff; color:var(--tinta)}
.calc input:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(31,122,77,.16)}
.calc-rap{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.8rem}
.calc-rap button{background:#fff; border:1px solid var(--verde-borde); border-radius:999px; padding:.28rem .75rem;
  font:inherit; font-size:.85rem; cursor:pointer; color:var(--tinta-2)}
.calc-rap button:hover{background:var(--verde); color:#fff; border-color:var(--verde)}
.calc-res{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.6rem}
.calc-res div{flex:1 1 120px; min-width:100px; background:#fff; border-radius:var(--r-s); padding:.65rem; text-align:center}
.calc-res b{display:block; font-size:1.2rem; color:var(--verde-osc)}
.calc-res span{font-size:.78rem; color:var(--tinta-3)}

/* Tabla de composición */
.tabla-env{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:#fff}
table.datos{width:100%; border-collapse:collapse; font-size:.93rem; min-width:460px}
table.datos caption{text-align:left; padding:.85rem 1rem; font-weight:700; background:var(--fondo-2);
  border-bottom:1px solid var(--linea); font-size:.95rem}
table.datos th,table.datos td{padding:.55rem 1rem; text-align:left; border-bottom:1px solid var(--linea)}
table.datos thead th{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3);
  background:var(--fondo-2); font-weight:700}
table.datos td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.datos tbody tr:last-child td{border-bottom:0}
table.datos tbody tr:hover{background:var(--fondo-2)}
table.datos .ud{color:var(--tinta-3); font-size:.85em; margin-left:.2em}
table.datos .nd{color:var(--tinta-3)}

.vrn{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.vrn-barra{width:52px; height:6px; background:var(--linea); border-radius:3px; overflow:hidden; flex:none}
.vrn-barra i{display:block; height:100%; background:var(--verde); border-radius:3px}
.vrn.alto .vrn-barra i{background:var(--verde)}
.vrn.medio .vrn-barra i{background:#5aa87c}
.vrn.bajo .vrn-barra i{background:#a8c9b7}
.vrn-pct{font-size:.8rem; color:var(--tinta-3); font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right}

.grupo-nav{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.grupo-nav button{background:#fff; border:1.5px solid var(--linea); border-radius:999px; padding:.35rem .85rem;
  font:inherit; font-size:.88rem; cursor:pointer; color:var(--tinta-2); font-weight:600}
.grupo-nav button[aria-selected=true]{background:var(--verde); border-color:var(--verde); color:#fff}

/* Bloque de respuesta destacada */
.respuesta{background:var(--verde-clar); border-left:4px solid var(--verde); border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem; margin:1.2rem 0}
.respuesta h2,.respuesta h3{margin-top:0}
.respuesta p:last-child{margin-bottom:0}
.respuesta.aviso{background:var(--naranja-clar); border-left-color:var(--naranja)}

.etiquetas{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0}
.etiq{flex:1 1 auto; justify-content:center; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.35rem; background:var(--verde-clar); color:var(--verde-osc);
  border:1px solid var(--verde-borde); border-radius:999px; padding:.25rem .75rem; font-size:.85rem; font-weight:600}
.etiq.ojo{background:var(--naranja-clar); color:var(--ambar); border-color:#f5cbb2}

/* ---------- Ficha de receta ---------- */
/* La foto y el texto se estiran a la misma altura. Antes la lista de
   ingredientes iba en la columna derecha y, con veinte ingredientes, dejaba
   medio folio en blanco al lado de la foto. */
.rec-cab{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:1.8rem; align-items:stretch; padding:2rem 0 1rem}
.rec-cab > div:first-child{display:flex}
.rec-cab img{border-radius:var(--r); width:100%; height:100%; min-height:280px;
  object-fit:cover; box-shadow:var(--sombra)}
.rec-info{display:flex; flex-direction:column; justify-content:center}
.rec-resumen{color:var(--tinta-2)}
.rec-meta{display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0}
.rec-meta div{flex:1 1 90px; background:var(--fondo-2); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:.5rem .8rem; font-size:.85rem; text-align:center}
.rec-meta b{display:block; color:var(--verde-osc); font-size:.95rem}
@media (max-width:800px){ .rec-cab{grid-template-columns:1fr; gap:1.2rem} }

.ingredientes{list-style:none; padding:0; margin:0}
.ingredientes li{padding:.55rem 0 .55rem 1.9rem; border-bottom:1px solid var(--linea); position:relative}
.ingredientes li::before{content:""; position:absolute; left:.35rem; top:1.1rem; width:7px; height:7px;
  background:var(--verde); border-radius:50%}
.ingredientes li:last-child{border-bottom:0}
/* Con muchos ingredientes la lista se reparte en columnas en vez de estirarse */
.ingredientes-cols{columns:3 220px; column-gap:2.2rem}
.ingredientes-cols li{break-inside:avoid}

.pasos{list-style:none; padding:0; margin:0; counter-reset:paso}
.pasos li{counter-increment:paso; position:relative; padding:0 0 1.15rem 2.9rem; margin-bottom:.2rem}
.pasos li::before{content:counter(paso); position:absolute; left:0; top:0; width:2rem; height:2rem;
  background:var(--verde); color:#fff; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.9rem}
.pasos li::after{content:""; position:absolute; left:1rem; top:2.2rem; bottom:.2rem; width:2px; background:var(--linea)}
.pasos li:last-child::after{display:none}

/* ---------- Comparador ---------- */
.comp-sel{display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; margin-bottom:1.6rem}
.comp-vs{font-weight:800; color:var(--tinta-3); font-size:1.1rem}
@media (max-width:700px){ .comp-sel{grid-template-columns:1fr; text-align:center} }
table.comp td.gana{background:var(--verde-clar); font-weight:700}
table.comp .col-a,table.comp .col-b{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Listados y paginacion ---------- */
/* Las pastillas crecen para repartirse la fila: asi el bloque no deja el
   escalón en diagonal que queda con flex-wrap a secas. */
.filtros{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem}
.filtros a{flex:1 1 auto; text-align:center; white-space:nowrap;
  background:#fff; border:1.5px solid var(--linea); border-radius:999px; padding:.35rem .85rem;
  font-size:.88rem; text-decoration:none; color:var(--tinta-2); font-weight:600}
.filtros a:hover{border-color:var(--verde); color:var(--verde-osc)}
.filtros a[aria-current=page]{background:var(--verde); border-color:var(--verde); color:#fff}

.pag{display:flex; gap:.35rem; justify-content:center; align-items:center; margin:2.2rem 0 .5rem; flex-wrap:wrap}
.pag a,.pag span{min-width:40px; text-align:center; padding:.45rem .6rem; border:1px solid var(--linea);
  border-radius:var(--r-s); text-decoration:none; color:var(--tinta-2); font-size:.9rem; background:#fff}
.pag a:hover{border-color:var(--verde); color:var(--verde-osc)}
.pag [aria-current=page]{background:var(--verde); border-color:var(--verde); color:#fff; font-weight:700}
.pag .hueco{border:0; background:none; color:var(--tinta-3)}

/* ---------- Contenido de texto ---------- */
.prosa{max-width:72ch}
.prosa h2:first-child{margin-top:0}
.aviso-fuente{font-size:.85rem; color:var(--tinta-3); border-top:1px solid var(--linea); padding-top:1rem; margin-top:2rem}

/* ---------- Pie ---------- */
.pie{background:var(--fondo-2); border-top:1px solid var(--linea); margin-top:3.5rem; padding:2.6rem 0 1.6rem}
.pie-cols{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:1.8rem}
@media (max-width:800px){ .pie-cols{grid-template-columns:1fr 1fr; gap:1.4rem} }
@media (max-width:480px){ .pie-cols{grid-template-columns:1fr} }
.pie h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-3); margin:0 0 .6rem}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:.35rem}
.pie a{color:var(--tinta-2); text-decoration:none; font-size:.92rem}
.pie a:hover{color:var(--naranja); text-decoration:underline}
.pie p{font-size:.92rem; color:var(--tinta-2)}
.pie-marca{font-weight:800; font-size:1.1rem; color:var(--tinta); margin-bottom:.4rem}
.pie-marca b{color:var(--verde)}
.pie-fin{border-top:1px solid var(--linea); margin-top:1.8rem; padding-top:1.2rem}
.pie-fin p{font-size:.83rem; color:var(--tinta-3); margin-bottom:.3rem}
.pie-fin .aviso{font-style:italic}

/* ---------- Anuncios ---------- */
.anuncio{margin:2rem auto; text-align:center; min-height:90px}
.anuncio::before{content:"Publicidad"; display:block; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--tinta-3); margin-bottom:.35rem}

/* ---------- Bloques de apoyo ---------- */
.bloque{background:var(--fondo-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.1rem}
.bloque h3{margin:0 0 .6rem; font-size:1rem}
.bloque p{margin:0; font-size:.9rem; color:var(--tinta-2)}
.bloque-dato{font-size:1.6rem !important; font-weight:800; color:var(--verde-osc); line-height:1.1}
.bloque-dato b{font-size:1.9rem}
.bloque-nota{margin-top:.5rem !important; font-size:.83rem !important; color:var(--tinta-3) !important}
.lista-limpia{list-style:none; padding:0; margin:0; font-size:.92rem; color:var(--tinta-2)}
.lista-limpia li{padding:.28rem 0; display:flex; gap:.5rem; align-items:baseline}

/* ---------- Fotos repartidas por la ficha ---------- */
.foto{margin:0}
.foto img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--linea); background:var(--fondo-2); display:block}
.foto figcaption{font-size:.72rem; color:var(--tinta-3); margin-top:.35rem; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.foto figcaption a{color:var(--tinta-3)}
.foto figcaption a:hover{color:var(--naranja)}
.foto-ancha{margin:2.2rem 0}
.foto-ancha img{aspect-ratio:21/8}

/* Texto e imagen a la par, sin que ninguno deje hueco */
.con-foto{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:1.8rem; align-items:center}
.con-foto-izq{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.con-foto-txt > :first-child{margin-top:0}
.con-foto-txt > :last-child{margin-bottom:0}
@media (max-width:760px){
  .con-foto,.con-foto-izq{grid-template-columns:1fr; gap:1.2rem}
  .con-foto-izq .foto{order:2}
  .foto-ancha img{aspect-ratio:16/9}
}

/* ---------- Barras de reparto ---------- */
.barras{display:flex; flex-direction:column; gap:.55rem; margin:1.2rem 0}
.barra{display:flex; align-items:center; gap:.8rem}
.barra-etq{flex:0 0 clamp(7rem,20%,11rem); font-size:.9rem; font-weight:600; color:var(--tinta-2)}
.barra-vis{flex:1; height:16px; background:var(--fondo-2); border-radius:8px; overflow:hidden;
  border:1px solid var(--linea)}
.barra-vis i{display:block; height:100%; border-radius:8px 0 0 8px; background:var(--verde)}
.barra-num{flex:0 0 3.2rem; text-align:right; font-variant-numeric:tabular-nums;
  font-weight:700; font-size:.92rem; color:var(--tinta-2)}
.m-grasa,.m-sat{background:#d9803f}
.m-carbohidratos{background:#c9a227}
.m-proteina{background:#2f7d8f}
.m-fibra{background:#5c9e5c}
.m-alcohol{background:#8a6bb0}
.m-mono{background:#3f8455}
.m-poli{background:#6fae86}
@media (max-width:520px){
  .barra{flex-wrap:wrap; gap:.3rem}
  .barra-etq{flex:1 1 auto}
  .barra-num{flex:0 0 auto}
  .barra-vis{flex:1 1 100%; order:3}
}

.dato-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  padding:.9rem; text-align:center}
.dato-caja b{display:block; font-size:1.45rem; line-height:1.15; color:var(--verde-osc); letter-spacing:-.02em}
.dato-caja span{font-size:.82rem; color:var(--tinta-3)}

/* ---------- Comentarios ---------- */
.coms{list-style:none; padding:0; margin:0 0 2rem}
.coms li{border:1px solid var(--linea); border-radius:var(--r); padding:.9rem 1.1rem; margin-bottom:.7rem; background:#fff}
.coms p{margin:0; color:var(--tinta-2)}
.com-cab{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.35rem; flex-wrap:wrap}
.com-quien{font-weight:700; font-size:.95rem}
.com-cab time{font-size:.8rem; color:var(--tinta-3)}
.com-vacio{color:var(--tinta-3); margin-bottom:1.5rem}

.com-form{background:var(--fondo-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.3rem}
.com-form h3{margin:0 0 1rem}
.com-form label{display:block; font-size:.87rem; font-weight:600; color:var(--tinta-2); margin-bottom:.3rem}
.com-form input[type=text],.com-form textarea{
  width:100%; padding:.6rem .8rem; font:inherit; color:var(--tinta); background:#fff;
  border:1.5px solid var(--linea); border-radius:var(--r-s); resize:vertical}
.com-form input[type=text]:focus,.com-form textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px var(--verde-clar)}
.com-fila{margin-bottom:.9rem; max-width:340px}
.com-pie{display:flex; align-items:flex-start; gap:1rem; margin-top:1rem; flex-wrap:wrap}
.com-form button{flex:none; padding:.65rem 1.5rem; font:inherit; font-weight:700; cursor:pointer;
  border:0; border-radius:var(--r-s); background:var(--verde); color:#fff}
.com-form button:hover{background:var(--verde-osc)}
.com-nota{flex:1 1 320px; margin:0; font-size:.8rem; color:var(--tinta-3); line-height:1.5}
/* Campo trampa: fuera de la vista pero accesible para quien no deba verlo */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Consentimiento de cookies ---------- */
.cookies{position:fixed; inset:auto 0 0 0; z-index:150; background:#fff;
  border-top:1px solid var(--linea); box-shadow:0 -4px 24px rgba(16,32,24,.10)}
.cookies[hidden]{display:none}
.cookies-in{max-width:var(--ancho); margin-inline:auto; padding:1rem 20px;
  display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.cookies p{margin:0; flex:1; min-width:260px; font-size:.9rem; color:var(--tinta-2)}
.cookies-btn{display:flex; gap:.5rem; flex-wrap:wrap}
.cookies-btn button{font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  padding:.55rem 1.1rem; border-radius:var(--r-s); border:1.5px solid var(--linea);
  background:#fff; color:var(--tinta-2)}
.cookies-btn button:hover{border-color:var(--verde); color:var(--verde-osc)}
.cookies-btn .pri{background:var(--verde); border-color:var(--verde); color:#fff}
.cookies-btn .pri:hover{background:var(--verde-osc); border-color:var(--verde-osc); color:#fff}

.enl-cookies{background:none; border:0; padding:0; font:inherit; font-size:.83rem;
  color:var(--tinta-3); text-decoration:underline; cursor:pointer}
.enl-cookies:hover{color:var(--naranja)}

/* ---------- 404 ---------- */
.err{text-align:center; padding:4rem 0}
.err .cod{font-size:4.5rem; font-weight:800; color:var(--verde-clar); line-height:1; letter-spacing:-.04em}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .tj:hover{transform:none}
  .tj-re:hover .tj-foto img{transform:none}
}

@media print{
  .cab,.pie,.migas,.anuncio,.busc,.calc-rap{display:none}
  body{font-size:12pt}
  .tabla-env{border:0}
}