/* Artículos (inc/article.php, 1.43.0): planos en SVG, recuadros, etiquetas y tablas del texto. */
.imk-article .entry-content figure.imk-plano { margin: 1.25em 0; background: #fff; border: 1px solid #e3dcd3; border-radius: 12px; padding: 12px; }
.imk-article .entry-content figure.imk-plano svg { width: 100%; height: auto; display: block; }
.imk-article .entry-content figure.imk-plano figcaption { font-size: 14px; color: #6f655c; margin-top: 6px; line-height: 1.5; }
.imk-article .entry-content .imk-planos-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 1.25em 0; }
.imk-article .entry-content .imk-planos-mini figure.imk-plano { margin: 0; }
.imk-article .entry-content .imk-planos-mini figure.imk-plano svg { max-width: 260px; margin: 0 auto; }
.imk-article .entry-content .imk-box { background: #fff; border-left: 4px solid #b23a2e; padding: 10px 14px; border-radius: 6px; margin: 1em 0; }
.imk-article .entry-content .imk-scroll { overflow-x: auto; margin: 1em 0; }
.imk-article .entry-content .imk-scroll table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 560px; margin: 0; }
.imk-article .entry-content .imk-scroll th,
.imk-article .entry-content .imk-scroll td { text-align: left; padding: 7px 8px; border: 0; border-bottom: 1px solid #e3dcd3; vertical-align: top; }
.imk-article .entry-content .imk-tag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.imk-article .entry-content .imk-tag.good { color: #2f7a4f; background: #e9f4ed; }
.imk-article .entry-content .imk-tag.calm { color: #8a5a1e; background: #f8efe2; }
.imk-article .entry-content .imk-note { font-size: 14px; color: #6f655c; }
/* Enlaces a las guías (1.43.1): que se vean como enlaces, también los objetos de los planos; los créditos de las fotos, no. */
/* Solo en el texto: las tarjetas de relacionados (.imk-card) también van dentro de .entry-content (1.43.2). */
.imk-article .entry-content :is(p, li, td, dd, .imk-box) a { color: #b23a2e; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.imk-article .entry-content :is(p, li, td, dd, .imk-box) a:hover { color: #7f2219; text-decoration-thickness: 2px; }
.imk-article .entry-content svg a text:first-child { text-decoration: underline; }
.imk-article .entry-content svg a:hover text { fill: #7f2219; }
.imk-article .entry-content .imk-photo { margin: 1.25em 0; }
.imk-article .entry-content .imk-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }
.imk-article .entry-content .imk-photo figcaption { font-size: 12px; color: #6f655c; margin-top: 4px; }
.imk-article .entry-content .imk-photo.side { float: right; width: 38%; margin: .3em 0 1em 1.5em; }
@media (max-width: 640px) {
    .imk-article .entry-content .imk-photo.side { float: none; width: 100%; margin: 1em 0; }
}

/* Año nuevo chino 2027 (1.47.0; maqueta local/borradores/fengshui/ano-nuevo-chino-2027.html): fechas en tarjetas, la
   fila del año en las tablas, el mapa del año en pequeño y las preguntas frecuentes desplegables. */
.imk-article .entry-content .imk-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 1.25em 0; }
.imk-article .entry-content .imk-fecha { background: #fff; border: 1px solid #e3dcd3; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: #6f655c; }
.imk-article .entry-content .imk-fecha.is-day { border-color: #b23a2e; }
.imk-article .entry-content .imk-fecha b { display: block; font-size: 1.1rem; line-height: 1.25; color: #2b2622; font-variant-numeric: tabular-nums; }
.imk-article .entry-content .imk-scroll tr.is-now td { background: #fbefe9; }
.imk-article .entry-content .imk-scroll tr.is-now td:first-child { font-weight: 700; color: #b23a2e; }
.imk-article .entry-content .imk-scroll td.is-years { color: #6f655c; font-variant-numeric: tabular-nums; }
.imk-article .entry-content figure.imk-plano figcaption a { color: #b23a2e; text-decoration: underline; text-underline-offset: 3px; }
.imk-article .entry-content .imk-fs-mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; max-width: 440px; margin: 0 auto; }
.imk-article .entry-content .imk-fs-dir { text-align: center; font-weight: 600; color: #6f655c; letter-spacing: .08em; font-size: 12px; }
.imk-article .entry-content .imk-fs-mini .imk-fs-dir.w { writing-mode: vertical-rl; transform: rotate(180deg); }
.imk-article .entry-content .imk-fs-mini .imk-fs-dir.e { writing-mode: vertical-rl; }
.imk-article .entry-content .imk-fs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.imk-article .entry-content .imk-fs-cell { border: 1px solid #e3dcd3; border-radius: 8px; padding: 6px 7px; min-width: 0; font-size: 12px; line-height: 1.25; }
.imk-article .entry-content .imk-fs-cell b { display: block; font-size: 1.3rem; line-height: 1; }
.imk-article .entry-content .imk-fs-cell.good { background: #e9f4ed; }
.imk-article .entry-content .imk-fs-cell.calm { background: #f8efe2; }
.imk-article .entry-content .imk-fs-cell.is-center { outline: 2px solid #b23a2e; outline-offset: -2px; }
.imk-article .entry-content details.imk-faq { background: #fff; border: 1px solid #e3dcd3; border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.imk-article .entry-content details.imk-faq summary { font-weight: 600; cursor: pointer; }
.imk-article .entry-content details.imk-faq p { margin: 8px 0 0; }

/* Planos animados (js/plans.js): primero la casa, luego lo que la completa (fs-c), la cuadrícula (fs-v, fs-h), la
   medida (fs-m) y los objetos del 1 al 9 (fs-z). --t0: cuándo empieza la cuadrícula. */
.fs-anim { --t0: 1s; }
.fs-anim.ready .fs-v, .fs-anim.ready .fs-h { transform-box: fill-box; transform: scale(0); }
.fs-anim.ready .fs-v { transform-origin: top; }
.fs-anim.ready .fs-h { transform-origin: left; }
.fs-anim.ready .fs-c, .fs-anim.ready .fs-m, .fs-anim.ready .fs-z { opacity: 0; }
.fs-anim.ready .fs-z { transform-box: fill-box; transform-origin: center; }
.fs-anim.play .fs-c { animation: fsIn .6s ease-out .7s forwards; }
.fs-anim.play .fs-v { animation: fsV .6s ease-out forwards; animation-delay: calc(var(--t0) + var(--d) * .3s); }
.fs-anim.play .fs-h { animation: fsH .6s ease-out forwards; animation-delay: calc(var(--t0) + var(--d) * .3s); }
.fs-anim.play .fs-m { animation: fsIn .5s ease-out forwards; animation-delay: calc(var(--t0) + 1.2s); }
.fs-anim.play .fs-z { animation: fsPop .5s ease-out forwards; animation-delay: calc(var(--t0) + 1.6s + (var(--i) - 1) * .6s); }
@keyframes fsV { to { transform: scaleY(1); } }
@keyframes fsH { to { transform: scaleX(1); } }
@keyframes fsIn { to { opacity: 1; } }
@keyframes fsPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
/* «Ver otra vez» (1.44.0): un botón normal debajo del plano, que no escala con el dibujo; js/plans.js lo enseña al
   terminar la animación (sin JavaScript o con «reducir movimiento» se queda oculto). Ancho normal; en el móvil, entero. */
.imk-article .entry-content button.imk-replay { display: block; width: auto; margin: 8px 0 4px auto; padding: 8px 18px; border: 1.5px solid #b23a2e;
    border-radius: 999px; background: #fff; color: #b23a2e; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
    cursor: pointer; visibility: hidden; opacity: 0; transition: opacity .4s, background .2s, color .2s; }
.imk-article .entry-content button.imk-replay[hidden] { display: none; }
.imk-article .entry-content button.imk-replay.on { visibility: visible; opacity: 1; }
.imk-article .entry-content button.imk-replay:hover,
.imk-article .entry-content button.imk-replay:focus-visible { background: #b23a2e; color: #fff; }
/* Encima de cada plano animado, la brújula y cómo orientar la casa; debajo, la leyenda en texto y «Ver otra vez» en
   la misma línea (1.44.1; Carlos, 2026-11-08). El dibujo va recortado a su contenido y el aire lo pone el relleno. */
.imk-article .entry-content figure.imk-plano svg.fs-anim { box-sizing: border-box; padding: 18px 14px; }
.imk-article .entry-content .imk-norte { display: flex; align-items: center; gap: 12px; margin: 0; padding: 4px 14px 12px; border-bottom: 1px solid #e3dcd3; }
.imk-article .entry-content figure.imk-plano .imk-norte svg.imk-norte-icon { flex: none; width: 44px; height: 54px; max-width: none; margin: 0; display: block; }
.imk-article .entry-content .imk-norte p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.45; color: #2b2622; }
.imk-article .entry-content .imk-plano-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
    margin: 0 0 4px; padding: 10px 14px 0; border-top: 1px solid #e3dcd3; }
.imk-article .entry-content .imk-plano-pie .imk-plano-leyenda { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.45; color: #6f655c; }
.imk-article .entry-content .imk-plano-pie button.imk-replay { margin: 0 0 0 auto; }
.imk-article .entry-content figure.imk-plano .imk-plano-pie ~ figcaption { padding: 0 14px; }
@media (max-width: 640px) {
    .imk-article .entry-content button.imk-replay,
    .imk-article .entry-content .imk-plano-pie button.imk-replay { width: 100%; margin: 0; }
}