/* ============================================
   MISE & STAY — Portfolio
   Maquetas de canales (web, OTAs, Instagram, Stories)
   y galería "muro" con filas que se desplazan al hacer scroll.
   Las interfaces son esquemáticas (sin texto sobre las fotos).
   ============================================ */

/* ---- Contenedor de maqueta dentro de la historia fija ---- */
.story-media > .mock {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 3vw, 40px);
background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #ececf0 100%);
}

/* Barras "esqueleto" que sugieren texto sin escribirlo */
.mk-line { display: block; height: 10px; border-radius: 6px; background: #e5e5ea; }
.mk-line.w90 { width: 90%; } .mk-line.w70 { width: 70%; } .mk-line.w50 { width: 50%; } .mk-line.w35 { width: 35%; } .mk-line.w25 { width: 25%; }
.mk-pill { display: block; height: 30px; width: 124px; border-radius: 999px; background: var(--accent); }

/* 1 · Navegador */
.mk-browser {
width: 100%;
max-height: 100%;
background: #fff;
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06);
overflow: hidden;
display: flex;
flex-direction: column;
}
.mk-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f5f5f7; border-bottom: 1px solid #e5e5ea; }
.mk-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mk-bar i:nth-child(1) { background: #ff5f57; } .mk-bar i:nth-child(2) { background: #febc2e; } .mk-bar i:nth-child(3) { background: #28c840; }
.mk-url { flex: 1; height: 22px; border-radius: 11px; background: #fff; margin-left: 14px; }
.mk-site-nav { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.mk-site-nav .mk-line { height: 8px; width: 44px; }
.mk-site-nav .mk-line:first-child { width: 70px; height: 10px; background: #1d1d1f; margin-right: auto; }
.mk-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f5f7; }
.mk-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-copy { padding: 18px 22px 24px; display: grid; gap: 10px; }

/* 2 · Ficha de un portal de reservas */
.mk-ota { width: min(100%, 540px); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06); padding: 12px; }
.mk-ota-gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; }
.mk-ota-gal img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.mk-ota-gal img:first-child { grid-row: 1 / 3; }
.mk-ota-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 8px 8px; }
.mk-ota-body > div { flex: 1; display: grid; gap: 10px; }
.mk-score { width: 46px; height: 46px; border-radius: 12px 12px 12px 3px; background: var(--accent); flex: 0 0 auto; }
.mk-stars { display: flex; gap: 4px; }
.mk-stars i { width: 12px; height: 12px; background: #f2b134; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); display: block; }

/* 3 y 4 · Móvil */
.mk-phone {
height: 100%;
max-height: 760px;
aspect-ratio: 9 / 18.6;
background: #fff;
border: 8px solid #1d1d1f;
border-radius: 44px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 34px 80px rgba(0, 0, 0, .28);
}
.mk-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 74px; height: 20px; margin-left: -37px; border-radius: 12px; background: #1d1d1f; z-index: 3; }
.mk-ig-head { padding: 40px 14px 10px; display: grid; gap: 12px; }
.mk-ig-top { display: flex; align-items: center; gap: 14px; }
.mk-avatar { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; padding: 3px; background: conic-gradient(from 200deg, #f08a45, #b84d1f, #8f3612, #f08a45); }
.mk-avatar::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #1d1d1f; border: 3px solid #fff; box-sizing: border-box; }
.mk-stats { flex: 1; display: flex; justify-content: space-around; }
.mk-stats span { display: grid; gap: 5px; justify-items: center; }
.mk-stats .mk-line { width: 26px; height: 8px; } .mk-stats .mk-line:first-child { height: 10px; background: #1d1d1f; width: 22px; }
.mk-ig-btns { display: flex; gap: 6px; }
.mk-ig-btns .mk-line { height: 24px; border-radius: 8px; flex: 1; }
.mk-ig-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 2px; border-top: 1px solid #e5e5ea; padding-top: 2px; }
.mk-ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }

.mk-story { background: #111; }
.mk-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-story-top { position: absolute; top: 34px; left: 12px; right: 12px; z-index: 2; display: grid; gap: 12px; }
.mk-prog { display: flex; gap: 4px; }
.mk-prog i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .45); display: block; position: relative; overflow: hidden; }
.mk-prog i:first-child::after { content: ""; position: absolute; inset: 0; background: #fff; }
.mk-prog i:nth-child(2)::after { content: ""; position: absolute; inset: 0; width: 55%; background: #fff; }
.mk-story-who { display: flex; align-items: center; gap: 10px; }
.mk-story-who .mk-avatar { width: 34px; height: 34px; padding: 2px; }
.mk-story-who .mk-avatar::after { border-width: 2px; }
.mk-story-who .mk-line { background: rgba(255, 255, 255, .7); width: 90px; height: 8px; }
.mk-story-bottom { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.mk-story-bottom .mk-input { flex: 1; height: 40px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .8); }
.mk-story-bottom .mk-heart { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); display: grid; place-items: center; }
.mk-story-bottom .mk-heart i { width: 16px; height: 16px; background: #fff; clip-path: path('M8 15 C-4 6 2 -2 8 4 C14 -2 20 6 8 15 Z'); display: block; }
.mk-story::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent); z-index: 1; }
.mk-story::before { z-index: 3; }

/* Pasos de la historia: etiquetas de formato */
.step-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.step-tags span { font-size: .82rem; background: var(--bg-alt); border-radius: 999px; padding: 7px 14px; color: var(--ink); }

/* ---- Muro de fotos: filas que se desplazan en sentidos opuestos ---- */
.wall { padding: clamp(36px, 6vw, 80px) 0 clamp(60px, 9vw, 120px); overflow: hidden; }
.wall-row { overflow: hidden; margin-bottom: 16px; }
.wall-track { display: flex; gap: 16px; width: max-content; will-change: transform; padding: 0 16px; }
.wall-item { flex: 0 0 auto; height: var(--rh, 380px); aspect-ratio: var(--ar, 3 / 2); border-radius: 26px; overflow: hidden; background: var(--bg-alt); position: relative; }
.wall-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wall-item:hover img { transform: scale(1.05); }
.wall-row.r1 { --rh: 400px; }
.wall-row.r2 { --rh: 340px; }

.no-js .wall-row, .reduced .wall-row { overflow-x: auto; }

@media (max-width: 900px) {
.mk-phone { max-height: 100%; border-width: 6px; border-radius: 34px; }
.mk-phone::before { width: 56px; height: 15px; margin-left: -28px; }
.mk-ig-head { padding-top: 30px; }
.mk-story-top { top: 28px; }
.wall-row.r1 { --rh: 250px; }
.wall-row.r2 { --rh: 210px; }
.wall-item { border-radius: 20px; }
.mk-site-nav { padding: 8px 14px; }
.mk-copy { padding: 12px 14px 16px; }
}