/* Casa Vesperia (muestra): piezas de las páginas internas (el salón, paquetes y galería). */

/* ---------- el salón ---------- */
.recorrido { padding: 0 16px clamp(80px, 10vw, 140px); }
.recorrido video { width: 100%; max-width: 1408px; margin: 0 auto; aspect-ratio: 16/9; object-fit: cover; }
.espacios { display: grid; gap: clamp(72px, 9vw, 140px); max-width: 1408px; margin: clamp(48px, 6vw, 80px) auto 0; }
.espacio { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); }
.espacio:nth-child(even) { grid-template-columns: 1fr 1.3fr; }
.espacio:nth-child(even) figure { order: 2; }
.espacio figure { margin: 0; overflow: hidden; }
.espacio img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.espacio__num { font: 400 italic 18px/1 var(--serif); color: var(--acento); }
.espacio h3 { margin: 12px 0 0; font: 400 clamp(36px, 4vw, 60px)/1.05 var(--serif); color: var(--acento); text-transform: uppercase; }
.espacio p { max-width: 420px; margin: 16px 0 0; color: var(--crema-tenue); }
.espacio .etiqueta { display: inline-block; margin-top: 20px; color: var(--crema); }
@media (max-width: 760px) { .espacio, .espacio:nth-child(even) { grid-template-columns: 1fr; } .espacio:nth-child(even) figure { order: 0; } }

.rejilla-num { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; max-width: 1408px; margin: clamp(40px, 5vw, 64px) auto 0; border-top: 1px solid var(--borde-claro); }
.rejilla-num li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--borde-claro); }
.rejilla-num b { font: 400 italic 18px/1.3 var(--serif); color: var(--acento-osc); font-weight: 400; }
.rejilla-num strong { display: block; font: 400 20px/1.3 var(--serif); }
.rejilla-num span { display: block; margin-top: 4px; color: var(--oscuro-tenue); }
.rejilla-num { list-style: none; padding: 0; }
@media (max-width: 760px) { .rejilla-num { grid-template-columns: 1fr; } }

.ubicacion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1408px; margin: 0 auto; }
.ubicacion img { width: 100%; aspect-ratio: 3/4; object-fit: cover; max-height: 80vh; }
.ubicacion .titulo { text-align: left; }
.ubicacion dl { display: grid; gap: 16px; margin: 32px 0; }
.ubicacion dt { font: 500 12px/1.3 var(--sans); text-transform: uppercase; color: var(--acento); }
.ubicacion dd { margin: 4px 0 0; font: 400 20px/1.3 var(--serif); }
.ubicacion .btn-linea { width: fit-content; }
@media (max-width: 760px) { .ubicacion { grid-template-columns: 1fr; } .ubicacion .titulo { text-align: center; } }

/* ---------- paquetes: tabla para comparar y extras ---------- */
.tabla-caja { max-width: 1408px; margin: clamp(40px, 5vw, 64px) auto 0; overflow-x: auto; }
.tabla { width: 100%; min-width: 760px; border-collapse: collapse; }
.tabla th, .tabla td { padding: 14px 12px; border-bottom: 1px solid var(--borde-claro); text-align: center; }
.tabla thead th { font: 400 italic 24px/1.2 var(--serif); vertical-align: bottom; }
.tabla thead small { display: block; font: 400 italic 14px/1 var(--serif); color: var(--acento-osc); margin-bottom: 6px; }
.tabla tbody th { text-align: left; font-weight: 400; color: var(--oscuro-tenue); }
.tabla .si { color: var(--acento-osc); font: 400 18px/1 var(--serif); }
.tabla .no { color: rgba(33, 10, 10, .35); }

.extras { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; border-top: 1px solid var(--borde-oscuro); }
.extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--borde-oscuro); }
.extras li span:first-child { font: 400 clamp(20px, 2vw, 28px)/1.2 var(--serif); }
.extras li span:last-child { color: var(--acento); white-space: nowrap; }
.nota-dias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.nota-dias span { padding: 8px 14px; border: 1px solid var(--borde-oscuro); border-radius: 999px; font-size: 14px; }

/* ---------- galería ---------- */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.filtros button { min-height: 44px; padding: 0 18px; border: 1px solid var(--borde-oscuro); border-radius: 999px; background: none; cursor: pointer; font-size: 14px; }
.filtros button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--oscuro); }
.mosaico { columns: 3 280px; column-gap: 8px; max-width: 1408px; margin: clamp(40px, 5vw, 64px) auto 0; }
.mosaico button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; cursor: zoom-in; break-inside: avoid; }
.mosaico img { width: 100%; height: auto; }
.mosaico button[hidden] { display: none; }
.visor { width: min(1100px, 100vw - 32px); max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; color: var(--crema); overflow: visible; }
.visor::backdrop { background: rgba(20, 6, 6, .92); }
.visor img { max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; object-fit: contain; }
.visor p { margin: 12px 0 0; text-align: center; font: 400 italic 18px/1.3 var(--serif); }
.visor__botones { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.visor__botones button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borde-oscuro); border-radius: 50%; background: var(--oscuro); cursor: pointer; }
.visor__botones svg { width: 20px; height: 20px; }