/* 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; }
.demo-card--pili .demo-preview { background: #f3efe7; }
.demo-card--pili .demo-preview img { object-position: center 40%; }
.demo-card--jerez .demo-preview { background: #f3ece1; }
.demo-card--jerez .demo-preview img { object-position: center; }
.demo-card--regalos .demo-preview { background: #fbeec8; }
.demo-card--refugio { background: #ece6dc; }
.demo-card--refugio .demo-preview { background: #ece6dc; }
.demo-card--refugio .demo-preview img { object-position: left top; }
.demo-card--refugio .demo-status { color: #4c5640; }
.demo-card--club .demo-preview { background: #fdfcfa; }
.demo-card--regalos .demo-preview img { object-position: center top; }
.demo-card--club .demo-preview img { object-position: center 45%; }
.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 h2, .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 h2 a { color: inherit; text-decoration: none; }
.demo-info h2 a:hover, .demo-info h2 a:focus-visible { color: var(--clay-deep); }
.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--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--club .demo-preview img { object-position: 22% 45%; } .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; } }
/* Recorrido en video (tour.js): la foto queda debajo hasta que el video arranca. */
.demo-stage { display: flex; flex-direction: column; min-width: 0; }
.demo-stage > .demo-preview { width: 100%; }
.demo-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.demo-stage.is-live .demo-video { opacity: 1; }
.demo-preview:hover .demo-video, .demo-preview:focus-visible .demo-video { transform: scale(1.02); }
.demo-card--kastiza .demo-video { object-position: center; }
.demo-tour { display: flex; align-items: center; gap: .75rem; padding: .7rem clamp(.9rem, 2vw, 1.3rem); border-bottom: 1px solid var(--line-l); background: var(--bone); }
.demo-tour-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -.3rem 0; border: 1px solid var(--line-l); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.demo-tour-toggle::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.demo-tour-toggle.is-playing::before { width: 10px; height: 12px; margin: 0; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.demo-tour-toggle:hover { border-color: var(--clay-deep); color: var(--clay-deep); }
.demo-tour-chapters { display: flex; flex-wrap: wrap; gap: .1rem .2rem; min-width: 0; }
.demo-tour-chip { --p: 0; position: relative; min-height: 44px; padding: .5rem .55rem .65rem; border: 0; background: none; font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--muted-l); cursor: pointer; transition: color .2s; }
.demo-tour-chip::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .45rem; height: 2px; border-radius: 2px; background: linear-gradient(var(--clay-deep), var(--clay-deep)) 0 0 / calc(var(--p) * 100%) 100% no-repeat, var(--line-l); }
.demo-tour-chip:hover, .demo-tour-chip.is-on { color: var(--ink); }
.demo-portfolio button:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 2px; }
.demo-card--featured > .demo-stage > .demo-preview { min-height: 31rem; height: auto; flex: 1; }
@media (max-width: 860px) { .demo-card--featured > .demo-stage { width: 100%; } .demo-card--featured > .demo-stage > .demo-preview { min-height: 23rem; height: clamp(19rem, 56vw, 28rem); flex: none; } }
@media (max-width: 600px) { .demo-card--featured > .demo-stage > .demo-preview { min-height: 18rem; } .demo-tour { align-items: flex-start; } .demo-tour-chip { padding-inline: .45rem; font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .demo-video { transition: none; } .demo-preview:hover .demo-video { transform: none; } }

/* La web se ve entera dentro del recuadro: el recuadro toma la proporción del recorrido (1280 x 864). */
.demo-card[data-tour] .demo-preview,
.demo-card--featured[data-tour] > .demo-preview,
.demo-card--featured[data-tour] > .demo-stage > .demo-preview { height: auto; min-height: 0; flex: none; aspect-ratio: 1280 / 864; }
.demo-card--featured[data-tour] > .demo-stage { justify-content: center; }
.demo-card[data-tour] .demo-video { object-fit: contain; object-position: center; }
.demo-card[data-tour] .demo-preview:hover img, .demo-card[data-tour] .demo-preview:focus-visible img,
.demo-card[data-tour] .demo-preview:hover .demo-video, .demo-card[data-tour] .demo-preview:focus-visible .demo-video { transform: none; }

/* Cada web también en el iPhone, con el mismo marco que las apps. Queda delante del recorrido en video. */
.demo-preview .web-iphone { position: absolute; right: 5%; bottom: 9%; z-index: 1; height: 82%; aspect-ratio: 652 / 1397; padding: max(3px, .45%); border-radius: 15% / 7%; background: #1F1F1C; box-shadow: 0 2px 4px rgba(21,21,19,.16), 0 28px 44px -20px rgba(21,21,19,.6); transition: transform .6s var(--ease); }
.demo-preview .web-iphone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 13% / 6%; transform: none; background: var(--stone); }
.demo-preview:hover .web-iphone img, .demo-preview:focus-visible .web-iphone img { transform: none; }
.demo-preview:hover .web-iphone, .demo-preview:focus-visible .web-iphone { transform: translateY(-6px); }
.demo-preview:has(.web-iphone) .demo-preview-action { right: auto; left: 1rem; }
@media (prefers-reduced-motion: reduce) { .demo-preview .web-iphone { transition: none; } .demo-preview:hover .web-iphone { transform: none; } }