/* Portfolio de demos: experiencias navegables junto a las apps existentes. */
.demo-portfolio { padding: var(--section) var(--pad); background: var(--stone); border-top: 1px solid var(--line-l); }
.demo-portfolio .section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.demo-portfolio .section-head > p { max-width: 39rem; line-height: 1.65; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.7vw, 2rem); }
.demo-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line-l); border-radius: 20px; background: var(--paper); box-shadow: 0 24px 65px -58px rgba(21,21,19,.55); }
.demo-preview { position: relative; display: grid; place-items: center; height: clamp(19rem, 30vw, 27rem); overflow: hidden; background: #171810; isolation: isolate; }
.demo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease); }
.demo-preview:hover img, .demo-preview:focus-visible img { transform: scale(1.035); }
.demo-card--kastiza .demo-preview { background: #17150f; }
/* La captura es vertical: llenar el marco y centrar la marca, la carta y el acceso a reservas. */
.demo-card--kastiza .demo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 46%; }
.demo-card--pili .demo-preview { background: #111a34; }
.demo-card--pili .demo-preview img { object-position: center 30%; }
.demo-card--jerez .demo-preview { background: #ae4c2b; }
.demo-card--jerez .demo-preview img { object-position: center 7%; }
.demo-preview::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.22)); pointer-events: none; }
.demo-label, .demo-preview-action { position: absolute; z-index: 1; font-family: var(--mono); font-size: .69rem; letter-spacing: .03em; font-weight: 600; }
.demo-label { top: 1rem; left: 1rem; padding: .5rem .8rem; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; background: rgba(251,250,246,.95); color: #23231f; }
.demo-preview-action { right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: 99px; background: var(--paper); color: var(--ink); }
.demo-preview-action span { font-size: 1.15rem; line-height: .8; }
.demo-info { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.3rem); }
.demo-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-family: var(--mono); font-size: .78rem; letter-spacing: .025em; color: var(--ink); }
.demo-meta .demo-status { color: var(--clay-deep); }
.demo-info h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 4vw, 3.7rem); line-height: .99; letter-spacing: -.025em; color: var(--ink); }
.demo-info > p { margin: 0; max-width: 48ch; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.64; color: var(--muted-l); }
.demo-features { display: flex; flex-wrap: wrap; gap: .45rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.demo-features li { padding: .45rem .7rem; border: 1px solid var(--line-l); border-radius: 99px; font-size: .73rem; color: var(--ink); background: var(--bone); }
.demo-visit { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; margin-top: auto; padding: .35rem 0 .3rem; border-bottom: 1px solid var(--clay-deep); font-weight: 650; text-decoration: none; color: var(--ink); text-underline-offset: .2em; }
.demo-visit:hover, .demo-visit:focus-visible { color: var(--clay-deep); }
.demo-portfolio a:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 4px; }
.demo-visit span { font-size: 1.1rem; }
.demo-disclaimer { margin: 1.5rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted-l); }
.demo-card--pili.demo-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); background: #ece9e1; }
.demo-card--featured > .demo-preview { min-height: 31rem; height: auto; }
.demo-card--featured > .demo-info { justify-content: center; gap: 1.5rem; }
.demo-card--featured .demo-info > p { max-width: 42ch; }
.demo-card--featured .demo-info > .demo-visit { margin-top: 1rem; }
.demo-site-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--muted-l); font-size: .84rem; text-underline-offset: 4px; }
.demo-story { grid-column: 1 / -1; border-top: 1px solid var(--line-l); padding: clamp(2rem, 4.5vw, 4rem); }
.demo-story-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(1.4rem, 5vw, 5rem); margin-bottom: clamp(2rem, 3.5vw, 3.3rem); align-items: start; }
.demo-story-kicker { display: block; margin-bottom: .9rem; color: var(--clay-deep); font: 600 .75rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.demo-story-intro h4 { margin: 0; max-width: 12ch; font: 400 clamp(2.3rem, 5vw, 5rem)/1.04 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.demo-story-intro > p { margin: .3rem 0 0; max-width: 49ch; color: var(--muted-l); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.demo-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); }
.demo-story-grid figure { margin: 0; min-width: 0; }
.demo-story-grid img { display: block; width: 100%; height: clamp(12rem, 20vw, 19rem); object-fit: cover; object-position: center top; border-radius: 6px; border: 1px solid var(--line-l); }
.demo-story-grid figcaption { padding: 1rem .15rem 0; color: var(--muted-l); font-size: .86rem; line-height: 1.55; }
.demo-story-grid figcaption strong { display: block; margin-bottom: .3rem; color: var(--ink); font: 400 clamp(1.25rem, 2vw, 1.65rem)/1.2 var(--serif); }
.demo-story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; border-top: 1px solid var(--line-l); padding-top: 1.4rem; }
.demo-story-foot p { color: var(--muted-l); max-width: 56ch; margin: 0; font-size: .85rem; line-height: 1.6; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } .demo-preview { height: clamp(18rem, 56vw, 27rem); } .demo-card--kastiza .demo-preview img { object-position: center 40%; } .demo-card--pili.demo-card--featured { display: flex; grid-column: auto; } .demo-card--featured > .demo-preview { min-height: 23rem; height: clamp(19rem, 56vw, 28rem); width: 100%; } .demo-story-intro { grid-template-columns: 1fr; } .demo-story-intro h4 { max-width: 18ch; } }
@media (max-width: 600px) { .demo-story-grid { grid-template-columns: 1fr; gap: 2rem; } .demo-story-grid img { height: auto; aspect-ratio: 16 / 10; } .demo-story { padding: 1.5rem; } .demo-card--featured > .demo-preview { min-height: 18rem; } }
@media (prefers-reduced-motion: reduce) { .demo-preview img { transition: none; } }