:root{
--bg:#f4f6f8; --card:#fff; --ink:#14181f; --muted:#667085;
--line:#e6e9ee; --brand:#12a150; --brand-d:#0c7c3d;
--brand-soft:#e7f7ee; --gold:#b8860b; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);
font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:64rem;margin:0 auto;padding:0 1rem}
/* ---- HERO ---- */
/* Misma cabecera que la portada en TODAS las páginas de dentro (categorías,
guías, marcas y fichas): antes era blanca con el logo pequeño y al entrar
en una categoría parecía otra web. */
header.hero{background:linear-gradient(135deg,#0b7238 0%,#12a150 55%,#16b85c 100%);
color:#fff;padding:1.5rem 1rem 1.4rem;text-align:center}
.logo{font-size:2.3rem;font-weight:800;letter-spacing:-.045em;line-height:1;
text-shadow:0 2px 10px rgba(0,0,0,.16)}
header.hero .logo,header.hero .logo a{color:#fff;text-decoration:none}
.logo span{color:#bdf0d2}
.tag{color:#d8f6e6;margin-top:.4rem;font-size:1.02rem;font-weight:600;
line-height:1.3;max-width:44rem;margin-left:auto;margin-right:auto}
/* el sello de dietistas sale de la cabecera, como en la portada: sigue en el
pie, en la caja de autor y en /sobre/ */
header.hero .firma{display:none}
/* cabecera de categoría: con buscador, selector de categoría y Gramo */
header.hero.con-busca{position:relative;overflow:hidden;padding:1.4rem 1rem 1.5rem}
header.hero.con-busca .in{max-width:46rem;margin:0 auto;position:relative;z-index:2}
header.hero.con-busca .tag{margin-bottom:1rem}
header.hero .gramo{position:absolute;right:-10px;bottom:-14px;height:150px;z-index:1;
opacity:.92;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
a.btn-home{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:3rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
border-radius:999px;text-decoration:none;font-size:1.15rem;line-height:1;
transition:background .14s}
a.btn-home:hover{background:#fff}
.firma{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
background:var(--brand-soft);color:var(--brand-d);border:1px solid #cde9d8;
padding:.35rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600}
.firma b{font-weight:700}
/* aviso de ofertas por Telegram */
.canal{display:block;width:fit-content;margin:1rem auto 0;text-decoration:none;
background:#229ED9;color:#fff;padding:.6rem 1.3rem;border-radius:999px;
font-size:.9rem;font-weight:600;box-shadow:0 2px 10px rgba(34,158,217,.28);
transition:transform .12s ease,box-shadow .12s ease}
.canal:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(34,158,217,.36)}
.canal b{font-weight:800}
.hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.hero-cta .canal{margin:0}
.btn-guias{display:inline-flex;align-items:center;text-decoration:none;
background:var(--brand);color:#fff;border:none;
padding:.6rem 1.3rem;border-radius:999px;font-size:.9rem;font-weight:800;
box-shadow:0 2px 10px rgba(18,161,80,.32);
transition:transform .12s ease,box-shadow .12s ease,background .12s}
.btn-guias:hover{transform:translateY(-1px);background:var(--brand-d);
box-shadow:0 5px 16px rgba(18,161,80,.42)}
/* separado de «detrás hay un equipo»: pegados parecían la misma caja */
.canal-cta{max-width:64rem;margin:2.8rem auto 2.5rem;padding:1.6rem 1rem;text-align:center;
background:var(--brand-soft);border:1px solid #cde9d8;border-radius:14px}
.canal-cta h3{font-size:1.1rem;margin-bottom:.35rem}
.canal-cta p{color:var(--muted);font-size:.9rem;max-width:34rem;margin:0 auto}
/* Tarjetas: el catálogo es el argumento más fuerte de la web y en una línea
de texto gris pasaba desapercibido. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;
max-width:44rem;margin:1.6rem auto 0;padding:0 .3rem}
.stats>div{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:.85rem .5rem;text-align:center;box-shadow:var(--shadow)}
.stats b{display:block;color:var(--brand-d);font-size:1.5rem;font-weight:800;
line-height:1.1;letter-spacing:-.02em;margin-bottom:.25rem}
.stats span{display:block;color:var(--muted);font-size:.76rem;line-height:1.25}
/* la fecha y las tiendas son texto, no cifras: no deben gritar como los números */
.stats>div.dato-txt b{font-size:.98rem;color:var(--ink);font-weight:700}
@media(max-width:640px){
.stats{grid-template-columns:1fr 1fr;gap:.6rem}
.stats b{font-size:1.35rem}
}
.aviso{max-width:64rem;margin:1.1rem auto 0;padding:0 1rem;color:var(--muted);
font-size:.82rem;text-align:center}
/* ---- SECCIONES ---- */
main{padding:1rem 0 3rem}
h2.cat{display:flex;align-items:center;gap:.55rem;margin:2rem 0 .9rem;
font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
h2.cat .em{font-size:1.4rem}
h2.cat small{font-weight:600;color:var(--muted);font-size:.8rem;margin-left:auto}
/* ---- TARJETAS ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.8rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow);padding:.9rem;display:flex;flex-direction:column;
position:relative;transition:.15s}
.card:hover{box-shadow:0 4px 12px rgba(16,24,40,.10);transform:translateY(-2px)}
.card.best{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow)}
.badge-best{position:absolute;top:.7rem;left:.7rem;background:var(--brand);color:#fff;
font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;
letter-spacing:.02em;z-index:2}
/* Selector de orden. Los tres distintivos y el marco del ganador viajan en
el HTML y se encienden por CSS según el orden elegido: el JS solo mueve
las tarjetas de sitio, nunca decide quién gana. */
.card .bb{display:none}
.grid[data-orden="precio"] .card .bb.b-precio,
.grid[data-orden="activo"] .card .bb.b-activo,
.grid[data-orden="comp"] .card .bb.b-comp{display:inline-block}
.grid[data-orden="precio"] .card[data-w-precio],
.grid[data-orden="activo"] .card[data-w-activo],
.grid[data-orden="comp"] .card[data-w-comp]{
border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow)}
.ordenar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:.7rem .9rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.ordenar label{font-size:.85rem;font-weight:700;color:var(--muted)}
.ordenar select{border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;
font:inherit;font-size:.88rem;font-weight:600;background:#fff;
color:var(--ink);max-width:100%}
.ordenar select:focus{outline:2px solid var(--brand);outline-offset:-1px}
.ordenar .pista{flex:1 1 100%;font-size:.82rem;color:var(--muted);line-height:1.45}
.ordenar .pista b{color:var(--ink)}
@media(max-width:620px){
.ordenar{flex-direction:column;align-items:stretch;gap:.45rem}
.ordenar select{width:100%}
}
.thumb{height:8.5rem;display:flex;align-items:center;justify-content:center;
background:#fafbfc;border-radius:10px;margin-bottom:.7rem;overflow:hidden}
.thumb img{max-height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb .ph{font-size:2.6rem;opacity:.5}
.nombre{font-size:.9rem;font-weight:600;line-height:1.35;min-height:2.4rem;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.precios{display:flex;align-items:baseline;gap:.5rem;margin:.6rem 0 .1rem;flex-wrap:wrap}
.precio{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.ppk{background:var(--brand-soft);color:var(--brand-d);font-weight:700;
font-size:.82rem;padding:.12rem .5rem;border-radius:7px}
.ppk.na{background:#f1f3f6;color:var(--muted);font-weight:600}
.envio{font-size:.76rem;color:var(--muted);margin-top:.15rem}
/* ---- ÍNDICE DE COMPOSICIÓN (€ por gramo de principio activo) ---- */
.activo{margin-top:.45rem;font-size:.8rem;line-height:1.35;color:var(--brand-d);
border-top:1px dashed var(--line);padding-top:.45rem}
.activo b{display:block;font-weight:800;font-size:.88rem}
.activo span{color:var(--muted);font-size:.76rem}
.activo.na span{color:#9aa3ae;font-style:italic}
.cta{margin-top:.75rem;display:block;text-align:center;background:var(--brand);color:#fff;
font-weight:700;font-size:.9rem;padding:.6rem;border-radius:10px;text-decoration:none;
transition:.15s}
.cta:hover{background:var(--brand-d)}
/* ---- FIRMA BLOQUE ---- */
.autor{background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin:2.5rem 0 0;
display:flex;gap:1rem;align-items:flex-start}
.autor .ava{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;
background:var(--brand-soft);display:flex;align-items:center;justify-content:center;
font-size:1.5rem}
.autor h3{font-size:1rem;margin-bottom:.25rem}
.autor p{color:var(--muted);font-size:.88rem}
.autor a{color:var(--brand-d);font-weight:600;text-decoration:none}
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:2.5rem 1rem;
border-top:1px solid var(--line);margin-top:2rem}
footer a{color:var(--brand-d);text-decoration:none;font-weight:600}
.card .nombre a.nlink{color:inherit;text-decoration:underline;
text-decoration-color:#c9d2dc;text-decoration-thickness:1px;text-underline-offset:3px}
.card .nombre a.nlink:hover{color:var(--brand-d);text-decoration-color:var(--brand)}
.card .nombre a.nlink .fl{color:var(--brand-d);font-weight:900;margin-left:.25rem;
text-decoration:none;display:inline-block}
.card .thumb a{display:block}
/* Aviso de cómo funciona cada tarjeta: se explica una vez por página */
.pista{max-width:64rem;margin:.2rem auto 1rem;padding:0 1rem;color:var(--muted);
font-size:.88rem;text-align:center}
.intro-cat .pista{text-align:left;padding:0;max-width:52rem;margin:.9rem 0 0}
.pista b{color:var(--ink)}
.pista .v{color:var(--brand-d);font-weight:700}
/* ---- TIRA DE LOGOS DE TIENDAS ---- */
.tira-tiendas{max-width:64rem;margin:2rem auto 0;padding:1.4rem 1rem 0;text-align:center;
border-top:1px solid var(--line)}
.tira-tiendas>p{color:var(--muted);font-size:.8rem;text-transform:uppercase;
letter-spacing:.05em;font-weight:700;margin-bottom:1rem}
.tira-tiendas .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:1.6rem 2.4rem}
.tira-tiendas .logos img{height:26px;width:auto;max-width:120px;object-fit:contain;
opacity:.72;filter:grayscale(1);transition:opacity .15s,filter .15s}
.tira-tiendas .logos img:hover{opacity:1;filter:none}
.tira-tiendas .sinlogo{font-weight:800;color:var(--muted);font-size:1.05rem;letter-spacing:-.01em}
.tira-tiendas .marcas{color:var(--muted);font-size:.86rem;margin-top:1rem}
.tira-tiendas .marcas b{color:var(--brand-d)}
@media(max-width:560px){.tira-tiendas .logos{gap:1.2rem 1.6rem}
.tira-tiendas .logos img{height:22px;max-width:96px}}
/* ================= PORTADA (rediseño 06-08-2026) =================
Antes la home metía las 5.229 tarjetas de producto en el HTML: 7,3 MB y
25.478 px de alto. Ahora la portada es una puerta de entrada —buscador,
categorías, bajadas del día— y los productos viven en su categoría. */
.portada{position:relative;overflow:hidden;color:#fff;text-align:center;
background:linear-gradient(135deg,#0b7238 0%,#12a150 55%,#16b85c 100%);
padding:1.5rem 1rem 1.4rem}
.portada .in{max-width:46rem;margin:0 auto;position:relative;z-index:2}
/* El nombre manda: es la marca y es lo que se recuerda. El claim va debajo,
en pequeño, haciendo de subtítulo. */
.portada .logo{font-size:2.9rem;font-weight:800;letter-spacing:-.045em;
margin:0 0 .15rem;color:#fff;line-height:1;
text-shadow:0 2px 10px rgba(0,0,0,.16)}
.portada .logo span{color:#bdf0d2}
.portada h1{font-size:1.05rem;font-weight:600;line-height:1.25;letter-spacing:0;
margin:0 0 1rem;color:#d8f6e6}
.portada h1 em{font-style:normal;color:#fff;font-weight:800}
.portada .gramo{position:absolute;right:-14px;bottom:-16px;height:190px;z-index:1;
opacity:.92;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
/* buscador + filtro de categoría, juntos y arriba: el filtro estaba tan abajo
que no se veía al entrar */
.hero-busca{display:flex;gap:.5rem;max-width:44rem;margin:0 auto;align-items:stretch}
.busca{position:relative;flex:1 1 auto;min-width:0}
/* la lupa va de fondo del propio input: como emoji en un span posicionado
dejaba un doble dibujado sobre el desplegable en el móvil */
.busca input{width:100%;padding:.95rem 1.1rem .95rem 3rem;font-size:1.02rem;
border:2px solid transparent;border-radius:999px;background:#fff;color:var(--ink);
box-shadow:0 8px 26px rgba(0,0,0,.18);transition:box-shadow .15s,border-color .15s;
background-image:url("data:image/svg+xml;utf8, del sistema no
admite iconos, en el móvil abre la rueda nativa y se ve distinto en cada
aparato. Dentro van enlaces de verdad: sin JS también se navega. */
.cat-menu{flex:0 0 auto;position:relative}
.cat-boton{font:inherit;font-size:.95rem;font-weight:700;color:var(--ink);background:#fff;
border:2px solid transparent;border-radius:999px;padding:.62rem 1rem .62rem 1.2rem;
min-width:15rem;max-width:20rem;height:100%;cursor:pointer;display:flex;align-items:center;
justify-content:space-between;gap:.6rem;box-shadow:0 8px 26px rgba(0,0,0,.18);
transition:border-color .14s}
.cat-boton:focus-visible{outline:none;border-color:#0a5f30}
.cat-boton .et{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-boton .fl{color:var(--brand-d);font-size:.8rem;transition:transform .16s}
.cat-boton[aria-expanded="true"] .fl{transform:rotate(180deg)}
/* fijo y colocado con JS: el hero recorta lo que se sale (overflow:hidden por
Gramo), así que dentro del flujo el panel se cortaría */
.cat-panel{position:fixed;z-index:60;background:#fff;border:1px solid var(--line);
border-radius:14px;box-shadow:0 18px 44px rgba(16,24,40,.24);padding:.35rem;
max-height:min(62vh,27rem);overflow-y:auto;min-width:17rem;text-align:left}
.cat-panel[hidden]{display:none}
a.cat-op{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px;
text-decoration:none;color:var(--ink);font-size:.92rem;font-weight:600;line-height:1.2}
a.cat-op:hover,a.cat-op:focus-visible{background:var(--brand-soft);outline:none}
a.cat-op.activa{background:var(--brand-soft);color:var(--brand-d)}
a.cat-op .ic{font-size:1.1rem;width:1.5rem;text-align:center;flex:0 0 auto}
a.cat-op .tx{flex:1;min-width:0}
a.cat-op .n{color:var(--muted);font-size:.78rem;font-weight:700;flex:0 0 auto}
a.cat-op.vacia{opacity:.35}
/* las guías, también arriba: botón con la carita de Gramo y el título a secas */
.chips-guias{display:flex;justify-content:center;align-items:center;gap:.5rem;
flex-wrap:wrap;max-width:68rem;margin:1.1rem auto 0;position:relative;z-index:2}
/* Segunda fila: los accesos a las dos secciones. Van aparte de los chips de
«Últimas guías» porque son navegación, no contenido, y mezclarlos obligaba
a recortar la fila a dos guías para que cupiera todo (27-08-2026). */
.chips-secciones{display:flex;justify-content:center;align-items:center;gap:.6rem;
flex-wrap:wrap;max-width:68rem;margin:.65rem auto 0;position:relative;z-index:2}
/* Cada sección con su color, y los dos fuera del verde: en translúcido blanco
se confundían con los chips blancos de «Últimas guías» de la fila de arriba
y con el propio degradado del hero (David pidió otro color, 27-08-2026).
Ámbar para producto y coral para deporte — cálidos los dos, que es lo que
más contrasta sobre el verde, y distintos entre sí para que se vea de un
vistazo que son dos sitios diferentes. Texto oscuro para que el contraste
aguante: sobre estos tonos el blanco no llega. */
/* Rectangulares con las esquinas redondeadas (no píldora): así no se
confunden con los chips redondos de «Últimas guías» de la fila de arriba,
que es contenido, mientras que esto es navegación. Y en tonos OSCUROS: el
ámbar y el coral que se probaron antes no gustaron y además metían dos
colores nuevos en una paleta que es verde. Verde profundo para producto y
azul verdoso para deporte — los dos de la familia, distintos entre sí y con
contraste de sobra sobre el degradado del hero (27-08-2026). */
a.btn-seccion{display:inline-flex;align-items:center;gap:.55rem;
border-radius:10px;padding:.55rem 1.15rem;text-decoration:none;color:#fff;
font-size:.95rem;font-weight:800;letter-spacing:.01em;
border:1.5px solid rgba(255,255,255,.32);
box-shadow:0 2px 8px rgba(0,0,0,.22);
transition:transform .14s,box-shadow .14s,filter .14s,border-color .14s}
a.btn-seccion:hover{transform:translateY(-2px);background:#1178ad;
border-color:rgba(255,255,255,.7);box-shadow:0 5px 14px rgba(0,0,0,.28)}
a.btn-seccion .bs-em{font-size:1.05rem;line-height:1}
a.btn-seccion .bs-n{font-size:.78rem;font-weight:800;border-radius:6px;
padding:.08rem .45rem;line-height:1.5;background:rgba(255,255,255,.2)}
/* Las dos del mismo azul y un punto más claro que el #0a4a58 de la primera
prueba (David, 27-08-2026). Al ser el mismo color, lo que las distingue es
el icono y la etiqueta, no el fondo — que para dos accesos hermanos es más
tranquilo que dos colores compitiendo. Blanco sobre este azul da 6,82:1. */
/* Ojo al orden: esta regla va DESPUÉS de :hover y tiene la misma
especificidad, así que sin el :hover propio de abajo pisaría el color al
pasar el ratón. */
a.bs-producto,a.bs-deporte,a.bs-nutricion{background:#0e6379}
a.bs-producto:hover,a.bs-deporte:hover,a.bs-nutricion:hover{background:#1178ad}
@media(max-width:560px){
.chips-secciones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
padding:0 1rem;scrollbar-width:none}
.chips-secciones::-webkit-scrollbar{display:none}
a.btn-seccion{flex:0 0 auto}
}
.chips-guias .et{font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.01em;
text-shadow:0 1px 2px rgba(0,0,0,.18);margin-right:.15rem}
a.chip-guia{display:inline-flex;align-items:center;gap:.45rem;background:#fff;
border:1px solid #fff;border-radius:999px;padding:.28rem .85rem .28rem .28rem;
color:var(--brand-d);text-decoration:none;font-size:.9rem;font-weight:700;line-height:1.25;
box-shadow:0 2px 6px rgba(0,0,0,.16);
transition:background .14s,transform .14s,box-shadow .14s}
a.chip-guia:hover{background:#eaf7ef;transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,.22)}
a.chip-guia img{width:30px;height:30px;border-radius:50%;object-fit:cover;
object-position:center top;background:#eaf7ef;flex:0 0 auto}
a.chip-guia.todas{padding:.42rem .9rem;font-weight:800;background:transparent;
border:2px solid #fff;color:#fff;box-shadow:none}
a.chip-guia.todas:hover{background:#fff;color:var(--brand-d)}
/* las cifras, legibles de verdad: son la prueba de que esto está vivo */
.cifras{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;
margin:0 0 1rem}
.cifras .c{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);
border-radius:.8rem;padding:.5rem .95rem;min-width:7.5rem;
backdrop-filter:blur(2px)}
.cifras b{display:block;color:#fff;font-size:1.35rem;font-weight:800;line-height:1.1;
letter-spacing:-.02em}
.cifras i{display:block;font-style:normal;color:#d8f6e6;font-size:.76rem;font-weight:600;
text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
/* resultados de búsqueda: filas compactas, sin foto, para que vuelen */
.resultados{max-width:52rem;margin:1.6rem auto 0;padding:0 1rem}
.resultados .cab{font-size:.9rem;color:var(--muted);margin-bottom:.7rem;
display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.resultados .filtro-res{margin-bottom:0}
.resultados a.fila{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;
background:#fff;border:1px solid var(--line);border-radius:.7rem;margin-bottom:.45rem;
text-decoration:none;color:var(--ink)}
.resultados a.fila:hover{border-color:var(--brand);background:var(--brand-soft)}
.resultados .foto{flex:0 0 auto;width:44px;height:44px;object-fit:contain;background:#fff;
border:1px solid var(--line);border-radius:.45rem}
.resultados .nom{flex:1;min-width:0;font-size:.95rem;line-height:1.3}
.resultados .mk{display:block;color:var(--muted);font-size:.8rem;margin-top:.1rem}
.resultados .pr{font-weight:800;white-space:nowrap}
.resultados .un{color:var(--brand-d);font-weight:700;font-size:.82rem;
background:var(--brand-soft);border-radius:999px;padding:.1rem .5rem;white-space:nowrap}
.resultados .vacio{text-align:center;color:var(--muted);padding:2rem 1rem}
/* rejilla de categorías: la navegación de verdad del comparador */
.bloque{padding:2.6rem 1rem}
.bloque.gris{background:#f4f7f9;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.bloque .in{max-width:64rem;margin:0 auto}
.bloque h2{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.35rem}
.bloque .lead{color:var(--muted);margin-bottom:1.4rem;font-size:.97rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.8rem}
a.cat-card{display:flex;align-items:center;gap:.8rem;background:#fff;
border:1px solid var(--line);border-radius:.85rem;padding:.85rem .95rem;
text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s,box-shadow .12s}
a.cat-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow)}
a.cat-card .em{font-size:1.7rem;line-height:1;flex:0 0 auto}
a.cat-card .foto{flex:0 0 auto;width:52px;height:52px;object-fit:contain;background:#fff;
border-radius:.5rem;border:1px solid var(--line)}
a.cat-card .t{font-weight:700;font-size:.95rem;line-height:1.25}
a.cat-card .n{display:block;color:var(--muted);font-weight:500;font-size:.8rem;margin-top:.15rem}
a.cat-card .n em{font-style:normal;color:var(--brand-d);font-weight:700}
/* bajadas del día: el motivo para volver mañana */
.cab-bloque{display:flex;align-items:flex-end;justify-content:space-between;
gap:1rem;flex-wrap:wrap}
/* align-items:flex-start es necesario: al envolverse en el móvil, el select
se estiraba (stretch) más allá del ancho de la caja y sacaba scroll lateral */
.filtro{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:.9rem;max-width:100%}
.filtro select{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:.6rem;
padding:.45rem .7rem;min-width:13rem;max-width:100%;cursor:pointer}
.filtro select:focus{outline:2px solid var(--brand);outline-offset:1px}
.sin-bajadas{color:var(--muted);margin:.6rem 0 0}
button.mas{display:block;margin:1rem auto 0;background:#fff;color:var(--brand-d);
border:1px solid var(--brand);border-radius:999px;padding:.55rem 1.4rem;
font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
button.mas:hover{background:var(--brand);color:#fff}
button.mas[hidden]{display:none} /* display:block gana al atributo hidden */
.baja-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
a.baja{display:flex;gap:.7rem;align-items:flex-start;background:#fff;
border:1px solid var(--line);border-radius:.85rem;
padding:.9rem;text-decoration:none;color:var(--ink);position:relative;
transition:transform .12s,border-color .12s}
a.baja.oculta{display:none}
a.baja:hover{transform:translateY(-2px);border-color:var(--brand)}
/* la foto del producto: una lista de nombres no dice qué estás mirando */
a.baja .foto{flex:0 0 auto;width:60px;height:60px;object-fit:contain;background:#fff;
border-radius:.5rem;border:1px solid var(--line)}
a.baja .foto.em{display:flex;align-items:center;justify-content:center;font-size:1.6rem}
a.baja .d{min-width:0;flex:1}
a.baja .pct{position:absolute;top:.7rem;right:.7rem;background:#e8f8ee;color:var(--brand-d);
font-weight:800;font-size:.78rem;border-radius:999px;padding:.15rem .5rem}
a.baja .nom{font-weight:600;font-size:.9rem;line-height:1.3;margin-bottom:.5rem;
padding-right:3.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
a.baja .antes{color:var(--muted);text-decoration:line-through;font-size:.85rem;margin-right:.4rem}
a.baja .ahora{font-weight:800;font-size:1.1rem}
a.baja .tienda{display:block;color:var(--muted);font-size:.78rem;margin-top:.3rem}
@media(max-width:640px){
.portada{padding:1.3rem .9rem 1.2rem}
.portada h1{font-size:.95rem;margin-bottom:.85rem}
.portada .logo{font-size:2.05rem}
/* Gramo fuera en el móvil: se comía las cifras, y ahí el espacio de arriba
es justo lo que no sobra. El verde ya da la cara. */
.portada .gramo{display:none}
/* buscador y filtro en dos líneas: uno al lado del otro no caben. Con
flex-wrap (y no column) el botón de inicio se queda al lado del campo
en vez de comerse una línea él solo. */
.hero-busca{flex-wrap:wrap}
.busca{flex:1 1 60%}
.cat-menu{flex:1 1 100%}
.cat-boton{width:100%;max-width:100%;min-width:0;padding:.7rem 1.1rem}
a.btn-home{width:2.8rem}
/* Gramo más pequeño en el móvil: a 150 px se metía debajo del buscador */
header.hero .gramo{height:112px;right:-8px;bottom:-10px}
.cifras{gap:.4rem;margin:0 0 .8rem}
.chips-guias{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
margin-left:-.9rem;margin-right:-.9rem;padding:.15rem .9rem .3rem;
scrollbar-width:none}
.chips-guias::-webkit-scrollbar{display:none}
a.chip-guia{flex:0 0 auto}
.chips-guias .et{flex:0 0 auto}
.cifras .c{padding:.4rem .7rem;min-width:6.4rem;flex:1 1 auto}
.cifras b{font-size:1.1rem}
.cifras i{font-size:.68rem}
.busca input{font-size:1rem;padding:.85rem 1rem .85rem 2.8rem}
.bloque{padding:2rem .9rem}
.bloque h2{font-size:1.3rem}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem}
a.cat-card{padding:.75rem .8rem;gap:.6rem}
a.cat-card .em{font-size:1.45rem}
a.cat-card .foto{width:44px;height:44px}
a.cat-card .t{font-size:.88rem}
}
/* ---- PÁGINAS DE CATEGORÍA ---- */
.comparar{max-width:64rem;margin:2rem auto 0;padding:1.4rem 1rem;border-top:1px solid var(--line)}
.comparar h2{font-size:1.15rem;margin-bottom:.7rem;letter-spacing:-.01em}
.comparar p{color:#3a4452;font-size:.98rem;line-height:1.7;max-width:52rem}
.comparar .faq{margin-top:1.3rem;display:grid;gap:.9rem;max-width:52rem}
.comparar .faq h3{font-size:1rem;color:var(--ink);margin-bottom:.25rem}
.comparar .faq p{font-size:.95rem;margin:0}
.comparar .remate{margin-top:1.2rem;font-size:.95rem}
.comparar .remate a{color:var(--brand-d);font-weight:700;text-decoration:none}
.intro-cat{max-width:64rem;margin:1.1rem auto 0;padding:0 1rem}
/* los párrafos iban pegados unos a otros y se leía como un bloque */
.intro-cat p{color:#3a4452;font-size:.98rem;line-height:1.7;max-width:52rem;
margin-bottom:.85rem}
.intro-cat p:last-child{margin-bottom:0}
.intro-cat .dato a.mejor{color:var(--brand-d);text-decoration:none;
border-bottom:1px solid #9ad4b4}
.intro-cat .dato a.mejor:hover{border-bottom-color:var(--brand-d)}
/* la caja del más rentable y la pista pedían aire: iban pegadas entre sí y
a la parrilla de productos */
.intro-cat .dato{margin:1.1rem 0}
.intro-cat .pista{margin:1rem 0 0}
/* botón de la guía de la categoría: era un enlace de texto suelto */
/* sin max-width: la parrilla de productos llega al borde del contenedor y el
banner se quedaba corto por la derecha */
a.cta-guia{display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 .4rem;
background:#fff;border:1px solid #cde9d8;border-left:4px solid var(--brand);
border-radius:14px;padding:.7rem .9rem;text-decoration:none;color:var(--ink);
box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s,border-color .14s}
a.cta-guia:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,24,40,.12);
border-color:var(--brand)}
a.cta-guia img{width:58px;height:58px;object-fit:cover;object-position:center top;
border-radius:50%;background:var(--brand-soft);flex:0 0 auto}
a.cta-guia .em{width:58px;height:58px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--brand-soft);font-size:1.6rem;flex:0 0 auto}
a.cta-guia .txt{flex:1;min-width:0}
a.cta-guia .et{display:block;color:var(--brand-d);font-size:.74rem;font-weight:800;
text-transform:uppercase;letter-spacing:.04em}
a.cta-guia .ti{display:block;font-weight:700;font-size:1rem;line-height:1.3;margin-top:.1rem}
a.cta-guia .ir{flex:0 0 auto;background:var(--brand);color:#fff;font-weight:800;font-size:.85rem;
padding:.45rem .9rem;border-radius:999px;white-space:nowrap}
a.cta-guia:hover .ir{background:var(--brand-d)}
.intro-cat .dato{margin-top:.7rem;background:var(--brand-soft);border:1px solid #cde9d8;
border-radius:12px;padding:.7rem 1rem;font-size:.9rem;color:var(--brand-d);
display:inline-block}
.intro-cat .dato b{font-weight:800}
.intro-cat .criterio{margin-top:1rem;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:1rem 1.15rem;box-shadow:var(--shadow);
max-width:52rem}
.intro-cat .tipos{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.intro-cat .tipos .et{font-size:.85rem;color:var(--muted);font-weight:600;margin-right:.15rem}
.intro-cat .tipos a{display:inline-flex;align-items:center;gap:.35rem;background:#fff;
border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem;
font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none}
.intro-cat .tipos a:hover{border-color:var(--brand);color:var(--brand-d)}
.intro-cat .tipos a span{font-size:.75rem;color:var(--muted);font-weight:500}
.intro-cat .volver-cat{font-size:.9rem;margin-bottom:.5rem}
.intro-cat .volver-cat a{color:var(--brand-d);font-weight:600}
.intro-cat .cuanto{margin-top:1rem;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:1rem 1.15rem;box-shadow:var(--shadow);
max-width:52rem}
.intro-cat .cuanto h2{font-size:1.05rem;margin-bottom:.45rem;letter-spacing:-.01em}
.intro-cat .cuanto p{font-size:.95rem;line-height:1.65;color:#3a4452}
.intro-cat .criterio h2{font-size:1rem;margin-bottom:.45rem}
.intro-cat .criterio p{font-size:.92rem}
.intro-cat .criterio .criterio-nota{margin-top:.55rem;color:var(--muted);font-size:.84rem}
.h2link{color:inherit;text-decoration:none}
.h2link:hover{color:var(--brand-d)}
header.hero .h2link:hover{color:#bdf0d2}
.otras{max-width:64rem;margin:2rem auto 0;padding:1.4rem 1rem;border-top:1px solid var(--line)}
.otras h3{font-size:1rem;margin-bottom:.8rem}
.otras .lista{display:flex;flex-wrap:wrap;gap:.5rem}
.otras a{background:#fff;border:1px solid var(--line);border-radius:999px;
padding:.4rem .85rem;font-size:.85rem;text-decoration:none;color:var(--ink);
box-shadow:var(--shadow)}
.otras a:hover{border-color:var(--brand);color:var(--brand-d)}
/* ---- GUÍAS (artículos) ---- */
.guia{max-width:44rem;margin:1.4rem auto 0;padding:0 1.1rem}
.guia h2{font-size:1.3rem;margin:1.8rem 0 .5rem;letter-spacing:-.01em}
.guia p{margin:.7rem 0;color:#2b333d;line-height:1.75;font-size:1.02rem}
.guia ul{margin:.6rem 0 .6rem 1.3rem}
.guia li{margin:.35rem 0;color:#2b333d;line-height:1.65}
.guia table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.guia th,.guia td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}
.guia th{background:var(--brand-soft);color:var(--brand-d)}
/* Páginas por deporte: mismo cuerpo que una guía, pero con parrillas de
producto intercaladas entre bloque y bloque (27-08-2026). */
.guia.dep .dep-bloque{margin:3rem 0 2.2rem;padding-top:.9rem;
border-top:2px solid var(--brand-soft)}
.guia.dep .dep-bloque:first-of-type{border-top:0}
.guia.dep .dep-bloque h2{display:flex;align-items:center;gap:.55rem}
.guia.dep .dep-em{font-size:1.5rem;line-height:1}
/* La parrilla se sale del ancho del texto: el cuerpo se lee mejor a 44rem,
pero tres tarjetas ahí dentro solo caben dos y queda un hueco tonto. */
/* El mismo aire arriba y abajo: la parrilla tenía 4rem por encima y 2rem por
debajo y se notaba descentrada dentro de su bloque (lo vio David). */
.guia.dep .dep-tarjetas{display:grid;gap:.9rem;margin:3rem auto;
grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
width:min(60rem,92vw);
position:relative;left:50%;transform:translateX(-50%)}
@media(max-width:700px){
.guia.dep .dep-tarjetas{grid-template-columns:1fr;width:100%;left:0;transform:none}
}
.guia.dep .dep-vertodo{margin:0;text-align:right}
.guia.dep .dep-vertodo a{color:var(--brand-d);font-weight:700;text-decoration:none}
.guia.dep .dep-vertodo a:hover{text-decoration:underline}
.grupo-guias{margin:0 0 2.4rem}
.grupo-guias + .grupo-guias{padding-top:1.6rem;border-top:2px solid var(--line)}
.grupo-guias h2{display:flex;align-items:center;gap:.55rem;font-size:1.35rem;
margin:0 0 .25rem;letter-spacing:-.01em}
/* También dentro de .intro-seccion: en /nutricion/ y /deporte/ el panel no
va dentro de un .grupo-guias, así que el contador se quedaba sin píldora y
salía como un número suelto detrás del título («Guías de nutrición 3»),
que parece una errata. Y ahí el fondo tiene que ser blanco, porque el panel
ya es verde suave y la píldora se perdía encima. */
.grupo-guias h2 .cuenta,
.intro-seccion h2 .cuenta{font-size:.85rem;font-weight:800;color:var(--brand-d);
background:var(--brand-soft);border-radius:999px;
padding:.1rem .55rem;line-height:1.5}
.intro-seccion h2 .cuenta{background:#fff}
/* Presentación de cada familia de guías. Antes era un renglón gris pequeño
debajo del título y David dijo que «se ve poco»: parecía el pie de una foto
y no explicaba para qué sirven esas guías (06-09-2026). Ahora es un panel
con fondo, filo verde y texto del color normal, para que se lea como lo que
es —la presentación de la sección— y no como una nota al margen. */
.intro-seccion{background:var(--brand-soft);border-left:4px solid var(--brand);
border-radius:0 10px 10px 0;padding:.95rem 1.15rem;margin:0 0 1.35rem}
.intro-seccion h2{margin:0 0 .35rem;border:0;padding:0}
.intro-seccion p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.55;
max-width:52rem}
.intro-seccion p .remate{color:var(--muted)}
.intro-seccion p a{color:var(--brand-d);font-weight:700;text-decoration:none}
.intro-seccion p a:hover{text-decoration:underline}
/* Pie de /deporte/ y /nutricion/: las otras familias de guías. Mismo filo
que separa los grupos en /guias/, para que se lea como «hasta aquí esta
sección» y no como más contenido de la que se estaba leyendo. */
.otras-secciones{margin:2.6rem 0 0;padding-top:1.6rem;border-top:2px solid var(--line)}
.otras-secciones .os-tit{font-size:1.1rem;color:var(--muted);font-weight:700;
margin:0 0 .9rem;border:0;padding:0;letter-spacing:-.01em}
.grupo-guias .grupo-sub{margin:0 0 1.1rem;color:var(--muted);font-size:.97rem}
.grupo-guias .grupo-sub a{color:var(--brand-d);font-weight:700;text-decoration:none}
.grupo-guias .grupo-sub a:hover{text-decoration:underline}
.dep-guias{margin:1.4rem 0}
.dep-guias h2{font-size:1.15rem;color:var(--ink);margin:0 0 .7rem}
.dep-guias .mini-guias a{background:#fff;border:1px solid var(--line);border-radius:999px;
padding:.5rem .9rem;text-decoration:none;color:var(--ink);
font-weight:600;font-size:.92rem}
.dep-guias .mini-guias a:hover{border-color:var(--brand);color:var(--brand-d)}
.guia .box{background:var(--brand-soft);border:1px solid #cde9d8;border-radius:14px;
padding:1rem 1.2rem;margin:1.4rem 0}
.guia .box p{margin:.4rem 0}
.guia .box a{color:var(--brand-d);font-weight:700;text-decoration:none}
/* tarjeta de oferta real dentro de la guía */
.oferta-guia{max-width:44rem;margin:1.6rem auto;background:#fff;border:2px solid var(--brand);
border-radius:16px;padding:1rem 1.1rem;box-shadow:0 6px 18px rgba(12,124,61,.12)}
.oferta-guia .og-tag{font-weight:800;color:var(--brand-d);font-size:.9rem;margin-bottom:.7rem}
.oferta-guia .og-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.oferta-guia .og-img{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
.oferta-guia .og-info{flex:1 1 10rem;min-width:0}
.oferta-guia .og-nombre{font-weight:700;color:var(--ink);line-height:1.25;font-size:.98rem}
.oferta-guia .og-meta{color:#777;font-size:.82rem;margin-top:.1rem}
.oferta-guia .og-precios{margin-top:.35rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.oferta-guia .og-precio{font-weight:800;color:var(--ink);font-size:1.15rem}
.oferta-guia .og-ppk{color:var(--brand-d);font-weight:700;font-size:.85rem;
background:var(--brand-soft);padding:.1rem .45rem;border-radius:999px}
.oferta-guia .og-cta{flex:0 0 auto;background:var(--brand);color:#fff;font-weight:800;
text-decoration:none;padding:.7rem 1.2rem;border-radius:999px;white-space:nowrap;
transition:background .16s ease}
.oferta-guia .og-cta:hover{background:var(--brand-d)}
.oferta-guia .og-nota{color:#999;font-size:.75rem;margin-top:.6rem}
@media(max-width:480px){.oferta-guia .og-cta{flex:1 1 100%;text-align:center;margin-top:.3rem}}
.guia sup.ref{line-height:0}
.guia sup.ref a{color:var(--brand-d);font-weight:700;font-size:.72em;
text-decoration:none;padding:0 1px}
.referencias{max-width:44rem;margin:1.8rem auto 0;padding:1.2rem 1.1rem 0;
border-top:1px solid var(--line)}
.referencias h2{font-size:1.1rem;margin-bottom:.6rem}
.referencias ol{margin:0 0 0 1.2rem;padding:0}
.referencias li{font-size:.82rem;color:var(--muted);line-height:1.55;margin:.5rem 0}
.referencias li a{color:var(--brand-d);font-weight:600;text-decoration:none;white-space:nowrap}
.referencias li:target{background:var(--brand-soft);border-radius:6px;padding:.2rem .4rem}
.guia-meta .autor{background:#eef7f1}
.guia-head{max-width:44rem;margin:1.2rem auto 0;padding:0 1.1rem}
.guia-head h1{font-size:1.9rem;line-height:1.2;letter-spacing:-.02em;margin-bottom:.6rem}
.guia-meta{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:.5rem;
flex-wrap:wrap}
.guia-meta .autor{background:var(--brand-soft);color:var(--brand-d);border:1px solid #cde9d8;
padding:.2rem .7rem;border-radius:999px;font-weight:700}
.guia-firma{max-width:44rem;margin:1.6rem auto 0;padding:1.1rem;border-top:1px solid var(--line);
display:flex;gap:.9rem;align-items:center;color:var(--muted);font-size:.9rem}
.guia-firma .ava{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;
background:var(--brand-soft);display:flex;align-items:center;
justify-content:center;font-size:1.3rem}
.guia-firma b{color:var(--ink)}
/* índice de guías */
.guias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
gap:1rem;margin-top:1.2rem}
.guia-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:1.1rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;
display:block;transition:border-color .12s}
.guia-card:hover{border-color:var(--brand)}
.guia-card{padding:0;overflow:hidden}
.guia-card .cab{background:linear-gradient(135deg,#0c7c3d,#12a150);height:96px;
position:relative;overflow:hidden;display:flex;align-items:center;
justify-content:center}
.guia-card .cab .em{font-size:3.2rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.guia-card .cab.foto{justify-content:flex-end;align-items:flex-end}
.guia-card .cab.foto img{height:118px;margin-right:8px}
.guia-card .cont{padding:1rem 1.1rem}
.guia-card h3{font-size:1.05rem;margin-bottom:.35rem;color:var(--ink)}
.guia-card p{color:var(--muted);font-size:.88rem;line-height:1.5}
.nav-guias{margin-left:.5rem}
.guias-buscador{margin:0 0 1.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.guias-buscador input{flex:1 1 16rem;padding:.8rem 1rem;border:2px solid var(--line);
border-radius:12px;font-size:1rem;background:#fff;outline:none;
transition:border-color .14s}
.guias-buscador input:focus{border-color:var(--brand)}
.guias-temas{flex:0 0 auto;padding:.8rem 2.4rem .8rem 1rem;border:2px solid var(--line);
border-radius:12px;font:inherit;font-size:1rem;font-weight:700;color:var(--brand-d);
background:#fff;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,