/* «¿Es buena oferta?» (1.30.0; inc/deal.php, template-parts/deal/page.php y archive.php). Filas de producto como las
   guías de los estilos, con el veredicto, el precio de hoy y los umbrales. Usa los tonos de los modelos (css/header.css).
   1.32.0: una página por tipo de producto (post imk_deal) y su listado con tarjetas. */

.imk-deal-page .entry-meta, .imk-deal-page .post-thumb-img-content { display: none }
.imk-deal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; color: var(--imk-ink, inherit); padding-bottom: 24px }
.imk-deal h2 { margin: 0 0 14px; font-family: var(--imk-display, inherit); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; text-wrap: balance }
.imk-deal p { margin: 0; line-height: 1.6 }
.imk-deal-lead { margin: 6px 0 0; max-width: 62ch; font-size: 1.15rem; line-height: 1.55; color: var(--imk-ink, inherit) }

/* Cómo leer la página */
.imk-deal-how { border: 1px solid var(--imk-line, #e5e5e5); border-radius: 12px; padding: 18px 20px; background: var(--imk-surface, #fff) }
.imk-deal-how h2 { font-size: 1.15rem; margin-bottom: 10px }
/* El mismo título en el listado que en las páginas (1.32.3): sin las mayúsculas de los bloques de la portada */
.imk-deal-archive .imk-deal-how h2 { margin: 0 0 10px; font-family: var(--imk-display, inherit); font-weight: 500; font-size: 1.15rem;
  line-height: 1.2; text-transform: none; letter-spacing: 0 }
.imk-deal-how ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 75ch; line-height: 1.5 }
.imk-deal-summary { margin-top: 14px !important; font-size: .9rem; color: var(--imk-muted, #666) }
.imk-deal-summary strong { color: var(--imk-ink, #222) }
.imk-deal-summary.has-deals strong { color: #17643a }

/* La escala del veredicto (1.32.2): de menos a más, con el color de cada etiqueta */
.imk-deal-how-normal { max-width: 75ch; line-height: 1.5 }
.imk-deal-scale { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.imk-deal-scale li { display: grid; gap: 6px; justify-items: start; align-content: start; margin: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--imk-line, #e5e5e5); border-top: 4px solid #c9ced3; font-size: .84rem; line-height: 1.35; color: var(--imk-muted, #555) }
.imk-deal-scale li.is-pequena { border-top-color: #e8c66a }
.imk-deal-scale li.is-buena { border-top-color: #8cc56a }
.imk-deal-scale li.is-muy-buena { border-top-color: #2f9a5c }

/* Filas de producto */
.imk-deal-list { margin: 0; padding: 0; list-style: none; display: grid }
.imk-deal-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 0; padding: 14px 0;
  border-bottom: 1px solid var(--imk-line, #e5e5e5) }
.imk-deal-row:first-child { border-top: 1px solid var(--imk-line, #e5e5e5) }
a.imk-deal-photo { display: block; width: 96px; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden }
.imk-deal-photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box }
.imk-deal-body { display: grid; gap: 5px; min-width: 0; justify-items: start }
.imk-deal a.imk-deal-name { font-weight: 700; font-size: .98rem; line-height: 1.3; color: var(--imk-ink, #222); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.imk-deal a.imk-deal-name:hover { color: var(--imk-accent, inherit) }
/* Los tres precios en una fila, etiqueta arriba y cifra abajo (1.32.0; Carlos, 2026-10-24), separados por una línea */
.imk-deal-rule { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 4px 0 2px }
.imk-deal-rule > div { display: grid; gap: 1px; padding: 0 18px; border-left: 1px solid var(--imk-line, #e5e5e5) }
.imk-deal-rule > div:first-child { padding-left: 0; border-left: 0 }
.imk-deal-rule dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--imk-muted, #777); line-height: 1.3 }
.imk-deal-rule dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--imk-ink, #222); font-variant-numeric: tabular-nums; white-space: nowrap }
.imk-deal-rule dd small { font-size: .76rem; font-weight: 400; color: var(--imk-muted, #777) }
.imk-deal-rule > .is-buena dt { color: #3c6614 }
.imk-deal-rule > .is-muy-buena dt { color: #17643a }
.imk-deal a.imk-deal-guide { font-size: .82rem; font-weight: 600; color: var(--imk-accent, inherit); text-decoration: none }

/* Veredicto */
.imk-deal-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  background: #eef0f2; color: #4a5560 }
.is-muy-buena .imk-deal-badge { background: #d9f2e1; color: #17643a }
.is-buena .imk-deal-badge { background: #e7f5d9; color: #3c6614 }
.is-pequena .imk-deal-badge { background: #fbf0d6; color: #7a5a0b }

/* Precio de hoy y botón */
.imk-deal-buy { display: grid; justify-items: end; gap: 3px; min-width: 200px; text-align: right }
.imk-deal-today { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--imk-muted, #777) }
.imk-deal-price { font-size: 1.3rem; font-weight: 700; color: var(--imk-ink, #222); font-variant-numeric: tabular-nums; white-space: nowrap }
.imk-deal-now { display: flex; align-items: baseline; gap: 8px }
/* Ahorro en euros (1.33.0, Carlos 2026-10-25): el precio de antes tachado y «Te ahorras X €» */
.imk-deal-was { font-size: .82rem; color: var(--imk-muted, #777); white-space: nowrap; font-variant-numeric: tabular-nums }
.imk-deal-was s { text-decoration-thickness: 1px }
.imk-deal-was small { font-size: .72rem }
.imk-deal-save { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e7f4ec; color: #1f6f43;
  font-size: .85rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }
.imk-deal-row.is-buena .imk-deal-save, .imk-deal-row.is-muy-buena .imk-deal-save { background: #2f9a5c; color: #fff }
/* En la tarjeta, la píldora a la derecha y bien separada de «X de N» (1.33.1, Carlos) */
.imk-deal-card .has-saving { display: grid; justify-items: end; gap: 4px; margin-left: auto; text-align: right }
.imk-deal-card .imk-study-card-figures .has-saving .imk-deal-save { display: inline-block; font-size: .9rem; color: #1f6f43 }
.imk-deal-date { font-size: .72rem; color: var(--imk-muted, #888); line-height: 1.3; white-space: nowrap }  /* sin partir (Carlos) */
.imk-deal-check { font-size: .72rem; color: var(--imk-accent, #555); max-width: 200px; line-height: 1.3 }
.imk-deal a.imk-deal-btn { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 32px; margin-top: 4px; padding: 0 14px;
  border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--imk-accent, #555); border: 1.5px solid var(--imk-accent, #555); color: var(--imk-accent-ink, #fff) }
.imk-deal a.imk-deal-btn:hover { filter: brightness(1.08) }

.imk-deal-note { font-size: .82rem; color: var(--imk-muted, #666); max-width: 80ch }

/* Más páginas del sitio, en píldoras como la barra «Inspírate» */
.imk-deal-more ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.imk-deal-more li { margin: 0 }
.imk-deal-more a { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--imk-line, #e5e5e5);
  font-size: .88rem; font-weight: 600; color: var(--imk-ink, #222); text-decoration: none }
.imk-deal-more a:hover { border-color: var(--imk-accent, #555); color: var(--imk-accent, #555) }

/* Listado: tarjetas con la foto del primer producto */
.imk-deal-archive .imk-deal-how { margin-bottom: 8px }
.imk-deal-card-photo { display: block; width: 96px; max-width: 100%; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden }
.imk-deal-card-photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box }
.imk-deal-card .imk-study-card-figures b { color: var(--imk-ink, inherit) }
.imk-deal-card .imk-study-card-figures .has-deals b { color: #17643a }
.imk-deal-card-go { font-size: .85rem; font-weight: 600; color: var(--imk-accent, inherit) }

/* Preguntas frecuentes con borde, como en las demás páginas */
.imk-deal .imk-study-faq { display: grid; gap: 8px }
.imk-deal .imk-study-faq h2 { margin-bottom: 6px }
.imk-deal .imk-study-faq details { border: 1px solid var(--imk-line, #e5e5e5); border-radius: 10px; padding: 12px 16px; margin: 0 }
.imk-deal .imk-study-faq summary { cursor: pointer; font-weight: 600; line-height: 1.35 }
.imk-deal .imk-study-faq details[open] summary { color: var(--imk-accent, inherit) }
.imk-deal .imk-study-faq details p { margin-top: 8px; max-width: 75ch }

/* Móvil (1.32.2; Carlos, 2026-10-24): una columna. Foto a todo el ancho, los tres precios uno debajo de otro (etiqueta a
   la izquierda, cifra a la derecha) y el precio de hoy en su caja, con el botón a todo el ancho al final. */
@media (max-width: 640px) {
  .imk-deal { gap: 32px }
  .imk-deal-scale { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .imk-deal-row { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 24px 0 }
  a.imk-deal-photo { width: 100%; aspect-ratio: auto; height: 220px; border-radius: 12px; border: 1px solid var(--imk-line, #e5e5e5) }
  .imk-deal-photo img { padding: 14px }
  .imk-deal-body { gap: 10px }
  .imk-deal a.imk-deal-name { font-size: 1.02rem; -webkit-line-clamp: 3 }
  .imk-deal-rule { display: grid; gap: 0; width: 100%; margin: 2px 0 }
  .imk-deal-rule > div, .imk-deal-rule > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 10px 0; border-left: 0; border-top: 1px solid var(--imk-line, #e5e5e5) }
  .imk-deal-rule > div:last-child { border-bottom: 1px solid var(--imk-line, #e5e5e5) }
  .imk-deal-buy { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; justify-items: start; gap: 4px 10px;
    min-width: 0; text-align: left; padding: 14px 16px 16px; border: 1px solid var(--imk-line, #e5e5e5); border-radius: 12px }
  .imk-deal-now { grid-column: 1 / -1; grid-row: 1 }
  .imk-deal-price { font-size: 1.4rem }
  .imk-deal-date, .imk-deal-check { grid-column: 1 / -1; max-width: none; white-space: normal }
  .imk-deal-was { grid-column: 1 / -1; grid-row: 2 }
  .imk-deal-save { grid-column: 1 / -1; justify-self: start }
  .imk-deal a.imk-deal-btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 46px; margin-top: 10px; font-size: .92rem }
}