/* Estilos de decoración (1.27.0; inc/decor-style.php, template-parts/decor/). Páginas de WordPress con la ficha del
   estilo: usan los tonos de los modelos (css/header.css) con valores de reserva por si el sitio no tiene modelo. */

.imk-decor-page .entry-meta, .imk-decor-page .post-thumb-img-content { display: none }
/* Al ancho de la cabecera (1.28.0; Carlos, 2026-10-23: «la página tiene un ancho diferente, excede el del menú») */
body.imk-decor-page .site-content > .ast-container { max-width: 1180px; padding-inline: 16px; margin-inline: auto }
.imk-decor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; color: var(--imk-ink, inherit); padding-bottom: 24px }
.imk-decor h2 { margin: 0 0 14px; font-family: var(--imk-display, inherit); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2; text-wrap: balance }
.imk-decor h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700 }
.imk-decor p { margin: 0; max-width: 70ch; line-height: 1.65 }
.imk-decor p + p { margin-top: 12px }
.imk-decor-lead { margin: 6px 0 0; max-width: 62ch; font-size: 1.15rem; line-height: 1.55; color: var(--imk-ink, inherit) }

/* Portada */
.imk-decor figure.imk-decor-cover { margin: 8px 0 0; padding: 0; border: 0; background: none; box-shadow: none !important }
.imk-decor-cover img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px }
.imk-decor-cover figcaption, .imk-decor-credit { display: block; margin-top: 6px; font-size: .76rem; color: var(--imk-muted, #666) }
.imk-decor-cover figcaption a, .imk-decor-credit a { color: inherit }

/* Paleta */
.imk-decor-swatches { display: flex; flex-wrap: wrap; gap: 18px }
.imk-decor-swatch-item { display: grid; justify-items: center; gap: 8px; width: 92px; text-align: center; font-size: .82rem; color: var(--imk-muted, #666) }
.imk-decor-swatch { display: block; width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .1) }
.imk-decor-swatches.is-small { gap: 5px }
.imk-decor-swatches.is-small .imk-decor-swatch { width: 18px; height: 18px }

/* Las claves */
.imk-decor-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px }
.imk-decor-key { padding: 18px 20px; border: 1px solid var(--imk-line, #e5e5e5); border-top: 3px solid var(--imk-accent, #555); border-radius: 12px; background: var(--imk-surface, #fff) }
.imk-decor-key p { font-size: .95rem; line-height: 1.55 }
.imk-decor-key ul { margin: 10px 0 0; padding-left: 18px; color: var(--imk-muted, #666); font-size: .9rem; line-height: 1.5 }

/* El estilo en casa */
.imk-decor-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.imk-decor figure.imk-decor-shot { margin: 0; padding: 0; border: 0; background: none; box-shadow: none !important }
.imk-decor-shot img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px }
.imk-decor-shot figcaption { display: grid; gap: 3px; margin-top: 8px; font-size: .9rem; line-height: 1.5 }
.imk-decor-look { color: var(--imk-muted, #666) }
.imk-decor-look a { color: var(--imk-accent, inherit); text-decoration: underline; text-underline-offset: 2px }

/* Pasos, enlaces, errores y parecidos */
.imk-decor-steps { margin: 0; padding: 0; list-style: none; counter-reset: imk-step; display: grid; gap: 12px; max-width: 72ch }
.imk-decor-steps li { counter-increment: imk-step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; line-height: 1.6 }
.imk-decor-steps li::before { content: counter(imk-step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--imk-accent-soft, #f3f3f3); color: var(--imk-accent, #333); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums }
.imk-decor-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.imk-decor-links a { display: inline-block; padding: 7px 14px; border: 1px solid var(--imk-line, #ddd); border-radius: 999px; color: var(--imk-ink, inherit); text-decoration: none; font-size: .9rem }
.imk-decor-links a:hover { border-color: var(--imk-accent, #555); color: var(--imk-accent, #555) }
/* Guías del estilo como filas de producto (1.29.0; Carlos: «en las píldoras es difícil percibir que es un producto»),
   como las de las ideas de regalo: foto, guía, su frase y «Ver oferta →» debajo; a la derecha, precio y la guía. */
.imk-decor-guides { margin: 0; padding: 0; list-style: none; display: grid }
.imk-decor-guide { 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-decor-guide:first-child { border-top: 1px solid var(--imk-line, #e5e5e5) }
a.imk-decor-guide-photo { display: block; width: 96px; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden }
.imk-decor-guide-photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box }
.imk-decor-guide-body { display: grid; gap: 4px; min-width: 0 }
.imk-decor a.imk-decor-guide-name { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--imk-ink, #222); text-decoration: none }
.imk-decor a.imk-decor-guide-name:hover { color: var(--imk-accent, inherit) }
.imk-decor .imk-decor-guide-body p { font-size: .9rem; line-height: 1.45; color: var(--imk-muted, #666) }
.imk-decor-guide-buy { display: grid; justify-items: end; gap: 6px; min-width: 150px }
.imk-decor-guide-price { font-size: 1.25rem; font-weight: 700; color: var(--imk-ink, #222); font-variant-numeric: tabular-nums; white-space: nowrap }
.imk-decor a.imk-decor-guide-btn, .imk-decor a.imk-decor-guide-offer { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 32px;
  padding: 0 14px; border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap }
.imk-decor a.imk-decor-guide-btn { background: var(--imk-accent, #555); border: 1.5px solid var(--imk-accent, #555); color: var(--imk-accent-ink, #fff) }
.imk-decor a.imk-decor-guide-btn:hover { filter: brightness(1.08) }
.imk-decor a.imk-decor-guide-offer { justify-self: start; margin-top: 4px; border: 1.5px solid var(--imk-accent, #555); color: var(--imk-accent, #555) }
.imk-decor a.imk-decor-guide-offer:hover { background: var(--imk-accent, #555); color: var(--imk-accent-ink, #fff) }

/* Preguntas frecuentes con borde, como en los estudios y las ideas (1.29.0; Carlos: «vamos a dejarlo como los demás») */
.imk-decor .imk-study-faq { display: grid; gap: 8px }
.imk-decor .imk-study-faq h2 { margin-bottom: 6px }
.imk-decor .imk-study-faq details { border: 1px solid var(--imk-line, #e5e5e5); border-radius: 10px; padding: 12px 16px; margin: 0 }
.imk-decor .imk-study-faq summary { cursor: pointer; font-weight: 600; line-height: 1.35 }
.imk-decor .imk-study-faq details[open] summary { color: var(--imk-accent, inherit) }
.imk-decor .imk-study-faq details p { margin-top: 8px }

.imk-decor-mistakes { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 72ch; line-height: 1.55 }
.imk-decor-similar { margin: 0; display: grid; gap: 4px 0; max-width: 72ch }
.imk-decor-similar dt { font-weight: 700; margin-top: 8px }
.imk-decor-similar dd { margin: 0; line-height: 1.55; color: var(--imk-muted, #555) }
.imk-decor-similar a { color: var(--imk-accent, inherit) }

/* Tarjetas de estilos (índice y «Otros estilos») */
.imk-decor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
a.imk-decor-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--imk-line, #e5e5e5); border-radius: 12px;
  background: var(--imk-surface, #fff); color: var(--imk-ink, inherit); text-decoration: none; transition: border-color .15s }
a.imk-decor-card:hover { border-color: var(--imk-accent, #555) }
.imk-decor-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover }
.imk-decor-card-body { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px }
.imk-decor-card-name { font-family: var(--imk-display, inherit); font-size: 1.3rem; line-height: 1.2 }
.imk-decor-card-text { font-size: .9rem; line-height: 1.5; color: var(--imk-muted, #666) }

@media (max-width: 640px) {
  .imk-decor { gap: 34px }
  .imk-decor-gallery { grid-template-columns: minmax(0, 1fr) }
  .imk-decor-swatch-item { width: 76px }
  .imk-decor-swatch { width: 58px; height: 58px }
  .imk-decor-guide { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start }
  a.imk-decor-guide-photo { width: 76px }
  .imk-decor-guide-buy { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; min-width: 0 }
  .imk-decor a.imk-decor-guide-btn { justify-self: end }
}