/* =============================================================================
   LAS GUÍAS · páginas de contenido (pan de hamburguesa, smash, congelado…)

   Son páginas para LEER, no para mirar: aquí manda la columna de texto, no el
   objeto. Por eso tienen hoja propia y no reusan el layout de la landing.

   Por qué están escritas así (no es capricho de diseño):
   quien nos tiene que citar hoy no es solo Google — son ChatGPT, Perplexity y
   las respuestas con IA. La investigación que existe sobre eso mide tres cosas
   concretas: bloques de 150-300 palabras (por debajo de 150 la probabilidad de
   ser citado cae un 23%), entre un 25% y un 35% del contenido en TABLAS y
   listas (+43% de precisión al extraer el dato), y datos numéricos con su
   unidad. De ahí que estas páginas tengan tanta tabla: no es adorno, es el
   formato que se copia en las respuestas.

   Hereda tokens y fuentes de styles.css. Aquí solo lo del artículo.
   ============================================================================= */

.guia { padding-bottom: clamp(60px, 9vw, 120px); }

/* La rejilla del fondo es la firma de la casa, pero detrás de un texto largo
   compite con las letras y cansa. En una página para LEER se baja de volumen:
   sigue estando, deja de estorbar. */
body:has(.guia) .grid-bg { opacity: .34; }

/* ---------- Portada de la guía ---------- */
.g-hero { padding: clamp(28px, 6vw, 76px) 0 clamp(22px, 4vw, 48px); }
.g-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(14px, 2vw, 22px); font-size: 12px; font-weight: var(--fw-med);
  color: var(--muted);
}
.g-migas a { color: var(--muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.g-migas a:hover { color: var(--gold); }
.g-migas span { opacity: .45; }

.g-kicker {
  margin: 0 0 12px; font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.g-h1 {
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  font-size: clamp(2.1rem, 5.6vw, 4.2rem); font-weight: var(--fw-black);
  line-height: .98; letter-spacing: -.035em; color: var(--cream);
  text-wrap: balance; max-width: 18ch;
}
.g-h1 b { color: var(--gold); font-weight: inherit; }
.g-entrada {
  margin: 0; max-width: 62ch;
  font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem); font-weight: var(--fw-reg);
  line-height: 1.62; color: #d8cfbd;
}
.g-entrada b { color: var(--cream); font-weight: var(--fw-semi); }

/* ---------- Cuerpo ---------- */
.g-cuerpo { max-width: 72ch; }
.g-sec { padding-top: clamp(30px, 5vw, 58px); }
.g-sec > h2 {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-size: clamp(1.4rem, 2.6vw, 2.05rem); font-weight: var(--fw-black);
  line-height: 1.1; letter-spacing: -.025em; color: var(--cream); text-wrap: balance;
}
.g-sec > h3 {
  margin: clamp(20px, 3vw, 32px) 0 10px;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: var(--fw-semi);
  letter-spacing: -.01em; color: var(--gold);
}
.g-sec p {
  margin: 0 0 1em; font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
  line-height: 1.7; color: #cfc6b4;
}
/* La negrita marca el DATO, no frases enteras: es lo que se lee de un vistazo y
   lo que se extrae al citar. */
.g-sec p b, .g-sec li b { color: var(--cream); font-weight: var(--fw-semi); }
.g-sec p a, .g-sec li a { color: var(--gold); text-underline-offset: 3px; }

.g-lista { margin: 0 0 1.2em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .7em; }
.g-lista li {
  position: relative; padding-left: 22px;
  font-size: clamp(.98rem, .94rem + .22vw, 1.08rem); line-height: 1.6; color: #cfc6b4;
}
.g-lista li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .8;
}

/* ---------- Tablas: el corazón de estas páginas ----------
   Scroll propio en móvil (la página nunca se mueve de lado) y cifras con
   tabular-nums para que las columnas de números queden a plomo. */
.g-tabla-caja {
  margin: 0 0 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Fondo propio: la tabla se despega de la rejilla y las filas se leen limpias. */
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 6, 5, .72); padding: 4px clamp(4px, 1vw, 10px) 2px;
}
.g-tabla {
  width: 100%; min-width: 460px; border-collapse: collapse;
  font-size: clamp(.86rem, .82rem + .2vw, .96rem); font-variant-numeric: tabular-nums;
}
.g-tabla caption {
  caption-side: top; text-align: left; padding: 12px 14px 12px;
  font-size: 12px; font-weight: var(--fw-med); color: var(--muted);
}
/* En móvil la tabla se desplaza dentro de su caja: hay que decirlo, o parece
   que faltan columnas. */
.g-tabla caption::after {
  content: " Se desliza a los lados para ver el resto."; color: var(--gold); opacity: .8;
}
@media (min-width: 720px) { .g-tabla caption::after { content: none; } }
.g-tabla th, .g-tabla td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.g-tabla thead th {
  font-size: 11.5px; font-weight: var(--fw-semi); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border-bottom-color: var(--line-gold); white-space: nowrap;
}
.g-tabla tbody th { font-weight: var(--fw-semi); color: var(--cream); white-space: nowrap; }
.g-tabla td { color: #cfc6b4; }
.g-tabla tbody tr:hover td, .g-tabla tbody tr:hover th { background: rgba(255, 255, 255, .022); }
/* Los nombres de la tabla son enlaces a su ficha. Se marcan con un subrayado
   dorado tenue: sin él parecen texto y nadie los pincha; con un color fuerte,
   la tabla se convierte en un semáforo. */
.g-tabla a {
  color: var(--cream); text-decoration: underline;
  text-decoration-color: rgba(254, 179, 0, .38); text-underline-offset: 4px;
  text-decoration-thickness: 1px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.g-tabla a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.g-tabla .num { font-weight: var(--fw-semi); color: var(--cream); }

/* ---------- El dato suelto que hay que ver desde lejos ---------- */
.g-dato {
  margin: clamp(22px, 3.4vw, 34px) 0; padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.8vw, 30px);
  border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 70%);
}
.g-dato p { margin: 0; }
.g-dato .cifra {
  display: block; margin-bottom: 4px;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: var(--fw-black);
  line-height: 1; letter-spacing: -.03em; color: var(--cream); font-variant-numeric: tabular-nums;
}
/* La unidad va a la BASELINE de la cifra y NUNCA por debajo de 0.8em: un símbolo
   enano se pierde justo cuando es lo que da sentido al número. */
.g-dato .cifra u { font-size: .8em; font-weight: var(--fw-semi); color: var(--gold); text-decoration: none; }

/* ---------- Cierre ---------- */
.g-cta {
  margin-top: clamp(36px, 6vw, 72px); padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line-gold); border-radius: 20px;
  background: linear-gradient(180deg, rgba(254, 179, 0, .05), transparent 65%);
}
.g-cta h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: var(--fw-black); letter-spacing: -.025em; color: var(--cream); }
.g-cta p { margin: 0 0 20px; max-width: 52ch; color: #cfc6b4; line-height: 1.6; }
.g-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 24px; border-radius: 999px; font-size: 14px; font-weight: var(--fw-semi);
  text-decoration: none; transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.g-btn--1 { background: var(--gold); color: var(--ink-invert); }
.g-btn--2 { border: 1px solid var(--line-gold); color: var(--gold); }
.g-btn:hover { transform: translateY(-1px); }
.g-btn:active { transform: scale(.98); }

/* ---------- Enlaces a las otras guías ---------- */
.g-sigue { margin-top: clamp(34px, 5vw, 60px); }
.g-sigue h2 { margin: 0 0 16px; font-size: 13px; font-weight: var(--fw-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* Dos por fila como mucho: tres en línea estrechan cada tarjeta y parten el texto. */
.g-sigue-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Si son tres, el tercero baja y se centra con el mismo ancho que los de arriba. */
.g-sigue-l:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 6px); justify-self: center; }
.g-sigue-l a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  color: var(--cream); text-decoration: none; font-size: 14px; font-weight: var(--fw-semi);
  line-height: 1.35; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.g-sigue-l a span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: var(--fw-reg); color: var(--muted); }
.g-sigue-l a:hover { border-color: var(--line-gold); transform: translateY(-1px); }

@media (max-width: 640px) {
  .g-sigue-l { grid-template-columns: 1fr; }
  .g-sigue-l:has(> :nth-child(3):last-child) > :nth-child(3) { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-btn, .g-sigue-l a { transition: none; }
}

/* ---------- "Dime tu carne y te digo tu pan" ----------
   Dos desplegables y una respuesta. Nada más: cuantos menos mandos, más gente
   lo usa. Los dos campos van uno al lado del otro y nunca tres en fila. */
.el-caja {
  margin: 0 0 1.4em; padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line-gold); border-radius: 18px;
  background: linear-gradient(180deg, rgba(254, 179, 0, .045), transparent 62%);
}
.el-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.el-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.el-campo > span {
  font-size: 12px; font-weight: var(--fw-semi); letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
}
.el-campo select {
  min-height: 48px; padding: 0 40px 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-1); color: var(--cream);
  font-family: inherit; font-size: 16px; font-weight: var(--fw-med);
  appearance: none; cursor: pointer;
  /* La flecha, dibujada: sin imagen que descargar y siempre del color de marca. */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  transition: border-color .2s var(--ease);
}
.el-campo select:focus-visible, .el-campo select:hover { border-color: var(--line-gold); outline: none; }

.el-salida { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.el-vacio { margin: 0; font-size: 14px; color: var(--muted); }
.el-titular {
  margin: 0 0 14px; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45; color: #d8cfbd;
}
.el-titular b { color: var(--gold); font-weight: var(--fw-semi); }
.el-sub { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.el-sub--flojo { margin-top: 14px; font-size: 13.5px; }
.el-sub a, .el-lista a { color: var(--cream); text-decoration: underline; text-decoration-color: rgba(254, 179, 0, .4); text-underline-offset: 3px; }
.el-sub a:hover, .el-lista a:hover { color: var(--gold); }
.el-lista { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.el-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: var(--fw-semi); color: var(--cream);
}
.el-lista li:last-child { border-bottom: 0; }
.el-lista span { font-size: 13.5px; font-weight: var(--fw-reg); color: var(--muted); font-variant-numeric: tabular-nums; }
.el-pie { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #8d8274; }
.el-pie b { color: var(--muted); font-weight: var(--fw-semi); }

@media (max-width: 560px) { .el-campos { grid-template-columns: 1fr; } }

/* ---------- /productos · la parrilla de los 16 ----------
   Dos por fila como mucho, nunca tres: con tres, cada tarjeta se estrecha y el
   nombre se parte. En pantallas grandes caben tres porque hay sitio de sobra
   para que ninguna baje de 300 px. */
.pr-rejilla {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.pr-c {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 20px);
  padding: clamp(14px, 1.8vw, 18px);
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 65%);
  text-decoration: none; min-height: 44px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.pr-c:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.pr-c:active { transform: scale(.99); transition-duration: .1s; }
/* La foto en su hueco fijo: sin esto, hasta que carga cada pan la fila baila. */
.pr-foto {
  flex: none; width: clamp(76px, 9vw, 96px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.pr-foto img { width: 100%; height: 100%; object-fit: contain; }
.pr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-n {
  font-size: clamp(.98rem, 1.4vw, 1.08rem); font-weight: var(--fw-semi);
  letter-spacing: -.01em; color: var(--cream); line-height: 1.2;
}
.pr-m { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Las palabras del nombre (POTATO · AIR · HIGH): la clave para entender la gama
   de un vistazo, en pequeño y en oro apagado para que no compitan con el nombre. */
.pr-f {
  margin-top: 2px; font-size: 10.5px; font-weight: var(--fw-semi);
  letter-spacing: .1em; color: var(--gold); opacity: .75;
}
@media (prefers-reduced-motion: reduce) { .pr-c { transition: none; } }