/* Obras en sala: cada concepto trae su propio mundo. 1em = 1/80 del lienzo (horizontal) o 1/24 (teléfono). */

.exhibit { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.exhibit * { margin: 0; padding: 0; list-style: none; }
.exhibit svg { display: block; max-width: none; }
.ex-l { font-size: 1.25cqi; }
.ex-p { font-size: 4.1667cqi; }


/* ---------- Casa Izalco ---------- */
.ex-izalco { background: #f0b93b; color: #14301f; }
.iz-nav { display: flex; align-items: center; gap: 3em; padding: 2.2em 5em; }
.iz-logo { font-family: "Gloock", Georgia, serif; font-size: 1.9em; letter-spacing: -.01em; margin-right: auto; line-height: 1; }
.iz-logo b { font-weight: 400; color: #9e2b17; }
.iz-links { display: flex; gap: 2.4em; font-size: 1.05em; font-weight: 500; }
.iz-btn { background: #14301f; color: #f0b93b; padding: .8em 1.4em; border-radius: 99em; font-weight: 600; white-space: nowrap; }
.iz-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: end; gap: 2em; padding: 2.5em 5em 0; }
.iz-title { font-family: "Gloock", Georgia, serif; font-size: 6.6em; line-height: .92; letter-spacing: -.03em; }
.iz-sub { margin-top: 1.1em; font-size: 1.35em; line-height: 1.45; max-width: 24em; }
.iz-cta { display: flex; align-items: center; gap: 2em; margin-top: 2em; padding-bottom: 5em; }
.iz-btn-lg { font-size: 1.15em; padding: 1em 1.6em; background: #c23b22; color: #fbebc5; }
.iz-link { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.iz-art { width: 100%; height: auto; }
.iz-band { display: flex; justify-content: center; gap: 1.4em; background: #14301f; color: #f0b93b; padding: 1.3em; font-size: 1.1em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.iz-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5em; padding: 5em; background: #fbebc5; }
.iz-h { font-family: "Gloock", Georgia, serif; font-size: 2.6em; margin-bottom: .5em; color: #c23b22; line-height: 1.1; }
.iz-menu li { display: flex; align-items: baseline; gap: .6em; font-size: 1.3em; padding: .5em 0; }
.iz-menu li i { flex: 1; border-bottom: .14em dotted rgb(20 48 31 / .45); translate: 0 -.25em; }
.iz-menu li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.iz-foot { display: flex; justify-content: space-between; align-items: center; padding: 2.4em 5em; background: #14301f; color: #fbebc5; font-size: 1.05em; }
.iz-foot .iz-logo { margin: 0; }
.iz-foot .iz-logo b { color: #f0b93b; }


/* ---------- Obsidiana ---------- */
.ex-obsidiana { background: #ece7df; color: #141312; }
.ob-nav { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; padding: 2.4em 5em; font-size: .95em; letter-spacing: .16em; text-transform: uppercase; font-stretch: 115%; }
.ob-nav > :nth-child(n + 4) { justify-self: end; }
.ob-logo { font-size: 2.2em; font-weight: 250; letter-spacing: .42em; font-stretch: 125%; padding-left: .42em; }
.ob-hero { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 44em; }
.ob-piece { background: #e1dad0; display: grid; place-items: center; }
.ob-piece svg { width: 64%; height: auto; }
.ob-info { padding: 4em 5em; display: flex; flex-direction: column; justify-content: center; }
.ob-name { font-size: 3.4em; font-weight: 250; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.ob-meta { margin-top: 1em; font-size: 1.2em; color: #6e675f; }
.ob-price { margin-top: 2em; font-size: 1.8em; font-variant-numeric: tabular-nums; }
.ob-btn { margin-top: 1.8em; display: block; text-align: center; background: #141312; color: #ece7df; padding: 1.3em; font-size: 1em; letter-spacing: .2em; text-transform: uppercase; font-stretch: 115%; }
.ob-small { margin-top: 1.4em; font-size: 1em; color: #6e675f; }
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; padding: 5em; }
.ob-img { aspect-ratio: 4 / 5; background: #e1dad0; display: grid; place-items: center; }
.ob-img svg { width: 56%; height: auto; }
.ob-item p { display: flex; justify-content: space-between; margin-top: 1.2em; font-size: 1.05em; letter-spacing: .12em; text-transform: uppercase; font-stretch: 112%; }
.ob-quote { padding: 3em 10em 7em; text-align: center; font-family: "Ibarra Real Nova", Georgia, serif; font-style: italic; font-size: 3em; line-height: 1.2; }


/* ---------- Norte Arquitectos ---------- */
.ex-norte {
  background-color: #d6d3cd; color: #111;
  background-image: linear-gradient(90deg, rgb(17 17 17 / .07) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.no-nav { display: flex; align-items: center; gap: 3em; padding: 2.4em 5em; font-size: 1.1em; font-weight: 500; border-bottom: 1px solid #111; }
.no-logo { margin-right: auto; font-weight: 800; font-size: 1.5em; letter-spacing: -.02em; }
.no-logo span { color: #e4572e; margin: 0 .12em; font-weight: 400; }
.no-lang { color: #555; }
.no-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 3em; padding: 4.5em 5em 4em; align-items: end; border-bottom: 1px solid #111; }
.no-title { font-size: 6em; font-weight: 700; line-height: .95; letter-spacing: -.04em; }
.no-lead { margin-top: 1.6em; font-size: 1.35em; max-width: 30em; color: #333; line-height: 1.45; }
.no-hero svg { width: 100%; height: auto; }
.no-cats { display: flex; gap: 4em; padding: 1.8em 5em; font-size: 1.1em; border-bottom: 1px solid #111; }
.no-cats b { color: #e4572e; font-weight: 600; }
.no-projects { display: grid; grid-template-columns: repeat(3, 1fr); }
.no-proj { padding: 3em 3em 4em; border-right: 1px solid #111; }
.no-proj:first-child { padding-left: 5em; }
.no-proj:last-child { border-right: 0; padding-right: 5em; }
.no-proj svg { width: 100%; height: auto; background: #cac6bf; }
.no-proj b { display: block; font-size: 1.6em; margin-top: 1em; letter-spacing: -.02em; }
.no-proj span { font-size: 1.05em; color: #444; }


/* ---------- Anuario 01: piezas nuevas ---------- */


/* Obsidiana · versión móvil */
.ex-obsphone { background: #ece7df; color: #141312; padding: 2.2em 1.4em 2em; }
.obp-bar { display: flex; align-items: center; justify-content: space-between; font-size: .8em; letter-spacing: .14em; text-transform: uppercase; }
.obp-logo { font-size: 1.15em; font-weight: 300; font-stretch: 122%; letter-spacing: .3em; }
.obp-menu { width: 1.5em; height: .65em; border-top: .13em solid #141312; border-bottom: .13em solid #141312; }
.obp-piece { margin-top: 1.4em; aspect-ratio: 1 / .92; background: #e1dad0; display: grid; place-items: center; }
.obp-piece svg { width: 76%; height: auto; }
.obp-name { margin-top: 1.3em; font-size: 2em; font-weight: 250; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; line-height: 1.05; }
.obp-meta { margin-top: .5em; font-size: .9em; color: #6e675f; }
.obp-price { margin-top: .8em; font-size: 1.4em; font-variant-numeric: tabular-nums; }
.obp-btn { display: block; margin-top: 1em; padding: 1.05em; background: #141312; color: #ece7df; text-align: center; font-size: .8em; letter-spacing: .2em; text-transform: uppercase; }
.obp-list { margin-top: 1.2em; }
.obp-list li { display: flex; justify-content: space-between; padding: .6em 0; border-bottom: 1px solid rgb(20 19 18 / .12); font-size: .85em; color: #6e675f; }

/* Obsidiana · estados del botón */
.ex-obstates { background: #ece7df; color: #141312; padding: 5em; }
.obs-h { font-size: 1.7em; font-weight: 500; letter-spacing: -.01em; }
.obs-row { display: flex; align-items: center; gap: 2.4em; margin-top: 2.4em; }
.obs-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 22em; padding: 1.2em 2em; background: #141312; color: #ece7df; font-size: 1.05em; letter-spacing: .2em; text-transform: uppercase; }
.obs-btn.is-hover { background: #34302c; box-shadow: 0 .6em 1.4em -.6em rgb(20 19 18 / .55); }
.obs-btn.is-done { background: transparent; color: #141312; border: 1px solid #141312; }
.obs-k { font-size: 1.1em; color: #6e675f; }
.obs-note { margin-top: 3.4em; padding-top: 1.4em; border-top: 1px solid rgb(20 19 18 / .18); font-size: 1em; color: #6e675f; }

/* Norte Arquitectos · versión móvil */
.ex-norphone {
  background-color: #d6d3cd; color: #111; padding: 2.2em 1.4em 2em;
  background-image: linear-gradient(90deg, rgb(17 17 17 / .07) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
.nop-bar { display: flex; align-items: baseline; justify-content: space-between; }
.nop-logo { font-weight: 800; font-size: 1.35em; letter-spacing: -.02em; }
.nop-logo span { color: #e4572e; margin: 0 .08em; font-weight: 400; }
.nop-lang { font-size: .8em; color: #555; }
.nop-title { margin-top: 1.5em; font-size: 2.3em; font-weight: 700; line-height: .98; letter-spacing: -.035em; }
.nop-draw { width: 100%; height: auto; margin-top: 1.3em; }
.nop-list { margin-top: 1.4em; border-top: 1px solid #111; }
.nop-list li { padding: .75em 0; border-bottom: 1px solid rgb(17 17 17 / .25); }
.nop-list b { display: block; font-size: 1.1em; letter-spacing: -.01em; }
.nop-list span { font-size: .85em; color: #444; }
.nop-btn { display: block; margin-top: 1.4em; padding: 1em; background: #111; color: #d6d3cd; text-align: center; font-size: .9em; font-weight: 600; }

/* Norte Arquitectos · la retícula */
.ex-nogrid { position: relative; background: #d6d3cd; color: #111; padding: 5em; }
.nog-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.6em; padding: 0 5em; }
.nog-cols i { background: rgb(228 87 46 / .12); }
.nog-title { position: relative; max-width: 58%; font-size: 4.6em; font-weight: 700; line-height: .95; letter-spacing: -.04em; }
.nog-meta { position: relative; margin-top: 1.6em; font-size: 1.1em; color: #444; }
.nog-marks { position: absolute; left: 5em; right: 5em; bottom: 3em; display: flex; justify-content: space-between; font-size: .9em; color: #6d6a65; font-variant-numeric: tabular-nums; }

.ex-l { min-height: 50em; }
.ex-p { min-height: 49.6em; }


.no-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #e4572e; margin-right: .5em; vertical-align: .08em; }
.obp-cart { font-size: .85em; letter-spacing: .14em; }

/* Casa Izalco · versión móvil (app) */
.ex-izphone { position: relative; background: #f0b93b; color: #14301f; padding: 2em 1.3em 5.2em; }
.izp-bar { display: flex; justify-content: space-between; align-items: center; }
.izp-logo { font-family: "Gloock", Georgia, serif; font-size: 1.55em; line-height: 1; }
.izp-logo b { font-weight: 400; color: #9e2b17; }
.izp-menu { width: 1.5em; height: .62em; border-top: .14em solid #14301f; border-bottom: .14em solid #14301f; }
.izp-hero { position: relative; margin-top: 1em; border-radius: 1em; overflow: hidden; aspect-ratio: 1 / .54; }
.izp-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.izp-hero::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(to bottom, rgb(11 34 22 / 0), rgb(11 34 22 / .82)); }
.izp-title { position: absolute; z-index: 1; left: .8em; right: .8em; bottom: .7em; font-family: "Gloock", Georgia, serif; font-size: 1.85em; line-height: 1; letter-spacing: -.03em; color: #fbebc5; text-shadow: 0 .06em .3em rgb(11 34 22 / .45); }
.izp-sub { margin-top: .85em; font-size: .95em; line-height: 1.4; color: rgb(20 48 31 / .8); }
.izp-actions { display: grid; gap: .5em; margin-top: .9em; }
.izp-cta { display: block; background: #c23b22; color: #fbebc5; text-align: center; border-radius: 99em; padding: .95em; font-weight: 700; font-size: .98em; }
.izp-alt { display: block; text-align: center; border: .1em solid rgb(20 48 31 / .4); border-radius: 99em; padding: .85em; font-weight: 600; font-size: .92em; }
.izp-open { display: flex; align-items: center; gap: .55em; margin-top: .9em; padding: .68em .9em; background: rgb(20 48 31 / .09); border-radius: .8em; font-size: .9em; }
.izp-open i { width: .5em; height: .5em; border-radius: 50%; background: #1f7a45; }
.izp-open b { margin-left: auto; font-variant-numeric: tabular-nums; }
.izp-h { margin-top: 1.1em; font-family: "Gloock", Georgia, serif; font-size: 1.35em; color: #9e2b17; }
.izp-favs { margin-top: .5em; display: grid; gap: .45em; }
.izp-favs li { display: flex; align-items: center; gap: .7em; background: #fbebc5; border-radius: .7em; padding: .6em .8em; font-size: .92em; }
.izp-favs b { font-weight: 600; }
.izp-favs li > span:last-child { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.izp-thumb { width: 2.1em; height: 2.1em; border-radius: .55em; flex: none; }
.izp-t1 { background: radial-gradient(circle at 35% 35%, #e8c15c, #c8912f); }
.izp-t2 { background: radial-gradient(circle at 35% 35%, #d9a441, #a86a22); }
.izp-t3 { background: radial-gradient(circle at 35% 35%, #7a4a2a, #3d2116); }
.izp-tab { position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em; display: flex; justify-content: space-around; background: #14301f; color: rgb(240 185 59 / .75); border-radius: 99em; padding: .85em; font-size: .82em; font-weight: 600; }
.izp-tab .on { color: #fbebc5; }

/* Casa Izalco · menú con código QR */
.ex-izqr { position: relative; background: #fbebc5; color: #14301f; padding: 2.1em 1.3em 5.6em; }
.izq-top { display: flex; align-items: center; justify-content: space-between; }
.izq-logo { font-family: "Gloock", Georgia, serif; font-size: 1.45em; line-height: 1; }
.izq-logo b { font-weight: 400; color: #9e2b17; }
.izq-table { font-size: .78em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: #14301f; color: #f0b93b; border-radius: 99em; padding: .5em .9em; }
.izq-scan { display: flex; align-items: center; gap: 1em; margin-top: 1.2em; padding: .9em; background: #fff8e6; border: .08em solid rgb(20 48 31 / .15); border-radius: 1em; }
.izq-qr { width: 4.6em; height: 4.6em; flex: none; border-radius: .4em; }
.izq-scan-t b { display: block; font-family: "Gloock", Georgia, serif; font-size: 1.3em; }
.izq-scan-t span { display: block; margin-top: .25em; font-size: .85em; color: rgb(20 48 31 / .7); }
.izq-tabs { display: flex; gap: .45em; margin-top: 1.3em; }
.izq-tabs span { font-size: .82em; font-weight: 600; padding: .6em .95em; border-radius: 99em; border: .08em solid rgb(20 48 31 / .25); color: rgb(20 48 31 / .75); }
.izq-tabs .on { background: #14301f; border-color: #14301f; color: #f0b93b; }
.izq-list { margin-top: 1.1em; }
.izq-list li { display: flex; align-items: flex-start; gap: 1em; padding: .85em 0; border-bottom: 1px solid rgb(20 48 31 / .16); }
.izq-list b { font-size: .98em; font-weight: 600; line-height: 1.25; }
.izq-list span { display: block; margin-top: .25em; font-size: .82em; line-height: 1.35; color: rgb(20 48 31 / .65); }
.izq-list li > div { flex: 1; min-width: 0; }
.izq-list i { margin-left: auto; font-style: normal; font-weight: 700; font-size: .98em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.izq-foot { position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em; }
.izq-order { display: block; text-align: center; background: #c23b22; color: #fbebc5; border-radius: 99em; padding: 1.05em; font-weight: 700; font-size: .95em; }


/* ---------- Vida dentro de cada obra (solo con la lámina encendida) ---------- */
.is-lit .iz-smoke, .is-lit .izp-smoke { animation: humo 9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes humo {
  0%, 100% { transform: translateX(0) scaleY(1); opacity: .85; }
  35% { transform: translateX(.6%) scaleY(1.06); opacity: .6; }
  70% { transform: translateX(-.5%) scaleY(.97); opacity: .9; }
}
.is-lit .iz-sun, .is-lit .izp-sun { animation: sol 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sol { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(1.04); } }
.is-lit .iz-band { overflow: hidden; }
.is-lit .iz-band span { animation: banda 12s linear infinite alternate; }
@keyframes banda { from { transform: translateX(0); } to { transform: translateX(-.6em); } }
.is-lit .izp-cta, .is-lit .izq-order { animation: latido 4.5s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgb(194 59 34 / .35); } 50% { box-shadow: 0 0 0 .45em rgb(194 59 34 / 0); } }
.izq-scan { position: relative; overflow: hidden; }
.is-lit .izq-scan::after {
  content: ""; position: absolute; left: .9em; top: 0; width: 4.6em; height: .55em; border-radius: 99em;
  background: linear-gradient(90deg, transparent, rgb(194 59 34 / .55), transparent); animation: escaneo 4.5s ease-in-out infinite;
}
@keyframes escaneo { 0%, 100% { transform: translateY(.9em); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateY(5em); opacity: 1; } 80% { opacity: 0; } }

.ob-piece, .obp-piece { position: relative; overflow: hidden; }
.is-lit .ob-piece::after, .is-lit .obp-piece::after {
  content: ""; position: absolute; inset: -30%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .5) 50%, transparent 58%);
  animation: brillo 6s ease-in-out infinite;
}
@keyframes brillo { 0%, 100% { transform: translateX(-60%); } 55% { transform: translateX(60%); } }
.is-lit .ob-item { animation: sube .8s var(--ease-out, cubic-bezier(.23,1,.32,1)) both; }
.is-lit .ob-item:nth-child(2) { animation-delay: .12s; }
.is-lit .ob-item:nth-child(3) { animation-delay: .24s; }
@keyframes sube { from { opacity: 0; transform: translateY(1.4em); } to { opacity: 1; transform: none; } }
.is-lit .obs-btn.is-done { animation: confirma 5s ease-in-out infinite; }
@keyframes confirma { 0%, 70%, 100% { background: transparent; color: #141312; } 78%, 92% { background: #1f7a45; border-color: #1f7a45; color: #f3f7f4; } }

.no-hero svg g path, .nop-draw g path { stroke-dasharray: 760; stroke-dashoffset: 760; }
.is-lit .no-hero svg g path, .is-lit .nop-draw g path { animation: dibuja 2.2s var(--ease-out, cubic-bezier(.23,1,.32,1)) forwards; }
.is-lit .no-hero svg g path:nth-child(2) { animation-delay: .18s; }
.is-lit .no-hero svg g path:nth-child(3) { animation-delay: .34s; }
.is-lit .no-hero svg g path:nth-child(4) { animation-delay: .5s; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
.is-lit .nog-cols i { animation: columna .9s var(--ease-out, cubic-bezier(.23,1,.32,1)) both; }
.nog-cols i:nth-child(2) { animation-delay: .04s; } .nog-cols i:nth-child(3) { animation-delay: .08s; } .nog-cols i:nth-child(4) { animation-delay: .12s; }
.nog-cols i:nth-child(5) { animation-delay: .16s; } .nog-cols i:nth-child(6) { animation-delay: .2s; } .nog-cols i:nth-child(7) { animation-delay: .24s; }
.nog-cols i:nth-child(8) { animation-delay: .28s; } .nog-cols i:nth-child(9) { animation-delay: .32s; } .nog-cols i:nth-child(10) { animation-delay: .36s; }
.nog-cols i:nth-child(11) { animation-delay: .4s; } .nog-cols i:nth-child(12) { animation-delay: .44s; }
@keyframes columna { from { opacity: 0; transform: scaleY(.4); transform-origin: 50% 0; } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .is-lit .iz-smoke, .is-lit .izp-smoke, .is-lit .iz-sun, .is-lit .izp-sun, .is-lit .iz-band span,
  .is-lit .izp-cta, .is-lit .izq-order, .is-lit .izq-scan::after, .is-lit .ob-piece::after, .is-lit .obp-piece::after,
  .is-lit .ob-item, .is-lit .obs-btn.is-done, .is-lit .nog-cols i { animation: none; }
  .no-hero svg g path, .nop-draw g path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .is-lit .no-hero svg g path, .is-lit .nop-draw g path { animation: none; }
}