/* TÈMPORA JOURNAL — revista de lujo: composiciones distintas según el protagonismo (portada, destacado, breve, panorámica, fila). No es una cuadrícula de tienda. */
.jkicker { display: inline-block; font: 600 0.68rem/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink-deep); }
a.jkicker:hover { text-decoration: underline; text-underline-offset: 4px; }
.jmeta { display: block; margin-top: 0.7rem; font: 400 0.78rem/1.3 var(--f-ui); letter-spacing: 0.04em; color: var(--text-3); }
.jmore { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; font: 500 0.74rem/1 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; }
.jmore svg { width: 1.1em; height: 1.1em; transition: transform var(--t-med) var(--ease-out); }
a:hover > .jmore svg, .jcover__link:hover .jmore svg { transform: translateX(5px); }

/* cabecera de la revista y navegación por secciones */
.jmast { padding-top: calc(var(--bar-h) + var(--header-h) + clamp(2rem, 5vw, 5rem)); padding-bottom: clamp(1.2rem, 3vw, 2.4rem); display: grid; gap: clamp(0.8rem, 2vw, 1.6rem); }
.jfront { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: 0.5rem; display: grid; gap: clamp(0.8rem, 2vw, 1.6rem); }
.jmast__t { margin: 0; font: 800 min(calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 9.2), 9rem)/0.88 var(--f-bold); letter-spacing: -0.05em; text-transform: uppercase; }
.jmast__t em { font-family: var(--f-accent); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: -0.02em; color: var(--pink-deep); }
.jmast__d { margin: 0 auto; color: var(--text-2); max-width: var(--max); font-size: 1.1rem; }
.jnav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); margin-top: 0.6rem; }
.jnav a { font: 500 0.7rem/1 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; padding: 0.7rem 0; border-bottom: 1px solid transparent; color: var(--text-2); }
.jnav a:hover, .jnav a[aria-current] { color: var(--ink); border-bottom-color: var(--pink-deep); }

/* 1 · historia principal: fotografía a pantalla completa con el titular encima */
.jcover { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #0b0b0b; color: #fff; }
.jcover__link { position: absolute; inset: 0; display: block; }
.jcover__img { position: absolute; inset: 0; display: block; }
.jcover__img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; transition: transform 2200ms var(--ease-out); }
.jcover__link:hover .jcover__img img { transform: scale(1.04); }
.jcover__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); }
.jcover__txt { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 7vh, 5rem); max-width: 56rem; display: block; }
.jcover__txt .jkicker { color: var(--pink); margin-bottom: 1.2rem; }
.jcover__t { margin: 0; font: 400 clamp(2.6rem, 1rem + 6.2vw, 7rem)/0.95 var(--f-display); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.jcover__d { margin: 1.2rem 0 0; max-width: 36em; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); line-height: 1.45; color: rgba(255,255,255,.88); }

/* 2 · destacado: foto vertical + titular grande; a su lado, breves solo-texto */
.jlead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 5vw, 6rem); padding-block: clamp(3rem, 6vw, 7rem); align-items: start; }
.jfeat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: end; }
.jfeat--flip { direction: rtl; } .jfeat--flip > * { direction: ltr; }
.jfeat__img { display: block; aspect-ratio: 4/5; overflow: hidden; background: #111; }
.jfeat__img img, .jrow__img img, .jwide__img img, .jbrief__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1600ms var(--ease-out); }
.jfeat:hover .jfeat__img img, .jrow:hover .jrow__img img, .jwide:hover .jwide__img img, .jbrief:hover .jbrief__img img { transform: scale(1.045); }
.jfeat__txt { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 0.6rem; }
.jfeat__t { margin: 0; font: 400 clamp(2rem, 1rem + 3vw, 4.2rem)/1 var(--f-display); letter-spacing: -0.015em; }
.jfeat__txt p { margin: 0; color: var(--text-2); line-height: 1.55; }
.jlead__side { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.jbrief { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-strong); align-items: start; }
.jbrief__t { margin: 0.8rem 0 0; font: 400 clamp(1.3rem, 1rem + 0.9vw, 1.9rem)/1.12 var(--f-display); }
.jbrief__img { display: block; aspect-ratio: 1; overflow: hidden; background: #111; }

/* 3 · panorámica: foto ancha y titular al lado */
.jband { padding-bottom: clamp(3rem, 6vw, 7rem); }
.jwide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.5vw, 3rem); }
.jwide__img { grid-column: 1 / -1; display: block; aspect-ratio: 21/9; overflow: hidden; background: #111; }
.jwide__txt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0.8rem clamp(1.5rem, 4vw, 5rem); align-items: start; }
.jwide__txt .jkicker { grid-column: 1 / -1; }
.jwide__t { margin: 0; font: 400 clamp(2rem, 1rem + 3.4vw, 4.6rem)/1 var(--f-display); letter-spacing: -0.015em; }
.jwide__txt p { margin: 0.3rem 0 0; color: var(--text-2); line-height: 1.55; align-self: end; }
.jwide__txt .jmeta { grid-column: 2; margin-top: 0; }

/* 4 · filas editoriales: miniatura a un lado y texto al otro, alternando */
.jrows { display: grid; gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(3rem, 6vw, 7rem); }
.jrows--more { padding-top: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--line-strong); }
.jrow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(1.2rem, 4vw, 5rem); align-items: center; }
.jrow--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } .jrow--flip .jrow__img { order: 2; }
.jrow__img { display: block; aspect-ratio: 3/2; overflow: hidden; background: #111; }
.jrow__txt { display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; }
.jrow__t { margin: 0; font: 400 clamp(1.7rem, 1rem + 2vw, 3rem)/1.05 var(--f-display); letter-spacing: -0.01em; }
.jrow__txt p { margin: 0; color: var(--text-2); line-height: 1.55; }
.jfeat__t a:hover, .jbrief__t a:hover, .jwide__t a:hover, .jrow__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* secciones: lista tipográfica numerada */
.jcats { padding-block: clamp(3rem, 6vw, 7rem); }
.jcats ol { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.jcats li { border-bottom: 1px solid var(--line-strong); }
.jcats a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 22ch); gap: 1.2rem; align-items: baseline; padding: 1.5rem 0; transition: padding var(--t-med) var(--ease-out); }
.jcats b { font: 700 0.8rem/1 var(--f-bold); color: var(--pink-deep); }
.jcats__n { font: 800 clamp(1.6rem, 0.8rem + 3.4vw, 4.4rem)/1 var(--f-bold); letter-spacing: -0.04em; text-transform: uppercase; }
.jcats__d { color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; }
.jcats a:hover { padding-left: 1rem; } .jcats a:hover .jcats__n { color: var(--pink-deep); }
.jcats li[aria-current] .jcats__n { color: var(--pink-deep); }
.jempty { padding-block: clamp(3rem, 8vw, 8rem); display: grid; gap: 1.5rem; justify-items: start; }

/* artículo */
.jpreview { position: sticky; top: 0; z-index: 50; margin: 0; padding: 0.7rem var(--gutter); background: var(--ink); color: #fff; font: 500 0.78rem/1.3 var(--f-ui); letter-spacing: 0.06em; text-align: center; }
.jhero { position: relative; height: 92vh; height: 92svh; min-height: 520px; overflow: hidden; background: #0b0b0b; color: #fff; display: flex; align-items: flex-end; }
.jhero__img, .jhero__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.jhero__img img { object-fit: cover; object-position: 70% 35%; }
.jhero__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%); }
.jhero__txt { position: relative; z-index: 2; padding-bottom: clamp(2rem, 7vh, 5rem); }
.jhero__txt .jkicker { color: var(--pink); margin-bottom: 1.2rem; }
.jhero__t { margin: 0; max-width: 18em; font: 400 clamp(2.6rem, 1rem + 6vw, 7rem)/0.95 var(--f-display); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.jart__head { max-width: 62rem; padding-top: clamp(2.5rem, 5vw, 5rem); }
.jdek { margin: 0; font: 400 clamp(1.5rem, 1rem + 1.8vw, 2.6rem)/1.2 var(--f-display); letter-spacing: -0.01em; }
.jby { margin: 1.6rem 0 0; font: 400 0.8rem/1.4 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.jcredit { margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--text-3); }
.jbody { max-width: 42rem; margin: clamp(2rem, 4vw, 4rem) auto 0; padding: 0 var(--gutter); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.78; color: var(--text-1, var(--ink)); }
.jbody > p { margin: 0 0 1.5em; }
.jbody > p:first-child::first-letter { float: left; font: 400 5.2em/0.78 var(--f-display); padding: 0.06em 0.1em 0 0; color: var(--pink-deep); }
.jbody__h { margin: 2.2em 0 0.7em; font: 400 clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -0.01em; }
.jquote { margin: 2.4em 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--pink-deep); }
.jquote p { margin: 0; font: italic 400 clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem)/1.15 var(--f-accent); color: var(--pink-deep); }
.jquote cite { display: block; margin-top: 0.8rem; font: 500 0.72rem/1 var(--f-ui); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.jfig { margin: 2.4em 0; } .jfig img { width: 100%; height: auto; display: block; }
.jfig--wide { position: relative; left: 50%; width: min(1180px, 94vw); transform: translateX(-50%); }
.jfig figcaption { margin-top: 0.7rem; font-size: 0.82rem; line-height: 1.4; color: var(--text-3); } .jfig figcaption small { margin-left: 0.4rem; }
.jrule { border: 0; border-top: 1px solid var(--line-strong); margin: 3em 0; }
.jsources { max-width: 42rem; margin: 2rem auto 0; padding: 1.5rem var(--gutter) 0; }
.jsources ul { margin: 0.8rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--text-2); } .jsources a { text-decoration: underline; text-underline-offset: 3px; }
.jalts { padding-top: clamp(3rem, 6vw, 6rem); display: grid; gap: 0.6rem; }
.jalts .grid { margin-top: 1.6rem; }
.jindep { margin-block: clamp(2rem, 4vw, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--line-strong); font-size: 0.85rem; color: var(--text-3); max-width: 62rem; }

@media (max-width: 900px) {
  .jlead { grid-template-columns: 1fr; }
  .jfeat, .jfeat--flip { grid-template-columns: 1fr; direction: ltr; } .jfeat__img { max-height: 78svh; aspect-ratio: 4/5; }
  .jwide__img { aspect-ratio: 16/10; } .jwide__txt { grid-template-columns: 1fr; } .jwide__txt .jmeta { grid-column: 1; }
  .jrow, .jrow--flip { grid-template-columns: 1fr; } .jrow--flip .jrow__img { order: 0; } .jrow__txt { max-width: none; }
  .jcats a { grid-template-columns: 2.4rem 1fr; } .jcats__d { grid-column: 2; }
}
@media (max-width: 560px) { .jbrief { grid-template-columns: minmax(0, 1fr) 5rem; } .jcover__img img, .jhero__img img { object-position: 60% 30%; } .jfig--wide { width: 100vw; } }
/* las fotografías de campaña llevan a la modelo a la derecha: los recortes verticales y panorámicos la mantienen a la vista */
.jfeat__img img, .jrow__img img, .jwide__img img, .jbrief__img img, .jpiece__img img { object-position: 82% 30%; }
.previewbar { position: sticky; top: 0; z-index: 200; padding: 0.55rem var(--gutter); background: var(--pink-deep); color: #fff; font: 500 0.78rem/1.3 var(--f-ui); letter-spacing: 0.05em; text-align: center; }

/* ============================================================ La PARED de la galería (portada del Journal) ============================================================
   Una exposición: cuadros de distintas medidas colgados en una pared de 12 columnas, con marco, paspartú, fotografía protagonista y cartela. */
.jhome { background: var(--pearl); color: var(--ink); padding-block: clamp(4rem, 2rem + 7vw, 9rem); }
.jhome__head { display: grid; gap: clamp(0.6rem, 1.5vw, 1.2rem); margin-bottom: clamp(2rem, 4vw, 4rem); }
.jhome__mast { margin: 0; font: 800 clamp(2.6rem, 1rem + 6.4vw, 8.4rem)/0.88 var(--f-bold); letter-spacing: -0.05em; text-transform: uppercase; }
.jhome__mast em { font-family: var(--f-accent); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: -0.02em; color: var(--pink-deep); }
.jhome__all { margin: clamp(2.5rem, 5vw, 5rem) 0 0; text-align: center; }

.wall { --gap: clamp(0.7rem, 1.8vw, 1.9rem); --colw: calc((min(100vw, var(--max)) - 2 * var(--gutter) - 11 * var(--gap)) / 12);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: calc(var(--colw) * 0.8); column-gap: var(--gap); row-gap: var(--gap);
  padding: clamp(1.2rem, 3vw, 3.2rem) clamp(0.8rem, 2.4vw, 2.6rem); border-radius: 4px; position: relative; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #fbf8f2 0%, #efe9df 48%, #e4ddd0 100%); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06), inset 0 -40px 80px -50px rgba(60, 45, 25, 0.25); }
.wall__f { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); margin: 0; display: flex; flex-direction: column; gap: clamp(0.6rem, 1vw, 1rem); min-width: 0; min-height: 0; container-type: inline-size; }
.wall__art { flex: 1 1 0; min-height: 0; display: block; padding: clamp(4px, 0.55vw, 9px); position: relative; transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
  background: #15110e; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 3px rgba(0, 0, 0, 0.25), 0 22px 38px -22px rgba(30, 20, 8, 0.55); }
.wall__f--gold .wall__art { background: linear-gradient(135deg, #c9ab6a, #8f7436 45%, #d3b878 70%, #8a6e30); }
.wall__f--walnut .wall__art { background: #3a281c; }
.wall__f:hover .wall__art, .wall__art:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 3px 5px rgba(0, 0, 0, 0.25), 0 34px 50px -24px rgba(30, 20, 8, 0.6); }
.wall__mat { display: block; height: 100%; padding: clamp(9px, 1.5cqw, 24px); background: #f8f4ec; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 2px 7px rgba(0, 0, 0, 0.14); }
.wall__mat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); transition: transform 1600ms var(--ease-out); }
.wall__f:hover .wall__mat img { transform: scale(1.045); }
.wall__mat--empty { display: grid; place-items: center; background: #f3eee5; }
.wall__mat--empty > span { font: 400 clamp(1rem, 0.5rem + 2.2cqw, 1.7rem)/1 var(--f-accent); font-style: italic; color: var(--text-3); }
.wall__cap { flex: none; display: grid; gap: 0.35rem; align-content: start; padding-inline: 2px; }
.wall__no { font: 600 0.62rem/1.2 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink-deep); }
.wall__t { margin: 0; font: 400 clamp(1.05rem, 0.7rem + 1.4cqw, 1.6rem)/1.08 var(--f-display); letter-spacing: -0.01em; }
.wall__t a:hover { text-decoration: underline; text-underline-offset: 5px; }
.wall__d { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wall__d--soon { font: 400 1rem/1.2 var(--f-accent); font-style: italic; color: var(--text-3); }
.wall__btn { justify-self: start; margin-top: 0.15rem; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font: 500 0.68rem/1 var(--f-ui); letter-spacing: 0.24em; text-transform: uppercase; display: inline-flex; gap: 0.6rem; transition: gap var(--t-med) var(--ease-out), color var(--t-med); }
.wall__btn:hover { gap: 1rem; color: var(--pink-deep); border-color: var(--pink-deep); }
@container (max-width: 250px) { .wall__d { display: none; } }
.wall__f--main .wall__t { font-size: clamp(1.7rem, 0.9rem + 2.4cqw, 3.4rem); line-height: 1; }
.wall__f--main .wall__d { font-size: 0.98rem; -webkit-line-clamp: 3; max-width: 34em; }
.wall__f--main .wall__no { font-size: 0.7rem; }

/* móvil: galería vertical. Cada cuadro conserva su proporción (ancho:alto de la pared) y su jerarquía (más grande = más ancho); alternan lados como colgados en zigzag */
@media (max-width: 760px) {
  .wall { display: flex; flex-direction: column; gap: clamp(2.2rem, 10vw, 3.6rem); padding: 1.4rem 0.9rem 2.2rem; }
  .wall__f { width: calc(48% + var(--w) * 8%); align-self: flex-start; }
  .wall__f[data-side='end'] { align-self: flex-end; }
  .wall__f--main { width: 100%; align-self: stretch; }
  .wall__art { flex: none; aspect-ratio: calc(var(--w) / (var(--h) * 0.8)); max-height: 82svh; }
  .wall__f[data-frame='the-rare-find'] .wall__art { aspect-ratio: 0.55; }
  .wall__d { display: -webkit-box; }
  .wall__mat { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { .wall__art, .wall__mat img { transition: none; } .wall__f:hover .wall__art { transform: none; } }
.jwall { padding-bottom: clamp(3rem, 6vw, 6rem); } .jnote { text-align: center; color: var(--text-2); padding-bottom: clamp(2rem, 4vw, 4rem); font: 400 1.2rem/1.3 var(--f-accent); font-style: italic; }