/* Casa Vesperia (muestra): secciones al estilo Satius, una por bloque de su página de inicio. */

/* ---------- portada: collage de fotos alrededor del título ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: grid; place-items: center; }
.hero__collage { position: absolute; inset: 0; }
.tesela { position: absolute; margin: 0; overflow: hidden; background: #3a1a14; }
.tesela img, .tesela video { width: 100%; height: 100%; object-fit: cover; }
/* posiciones medidas sobre Satius a 1440 × 900 */
.t1 { left: 1.4vw; top: 5.5vh; width: 15vw; aspect-ratio: 4/5; }
.t2 { left: 34vw; top: 29vh; width: 10vw; aspect-ratio: 2/3; }
.t3 { left: 67vw; top: 14vh; width: 14.9vw; aspect-ratio: 3/4; }
.t4 { left: 17.9vw; top: 55vh; width: 15vw; aspect-ratio: 3/4; }
.t5 { left: 50vw; top: 64vh; width: 10vw; aspect-ratio: 3/4; }
.t6 { left: 82.9vw; top: 55vh; width: 11.1vw; aspect-ratio: 2/3; }
.t7 { left: 91vw; top: 66vh; width: 9vw; aspect-ratio: 3/4; }
.t8 { left: -2vw; top: 93vh; width: 6vw; aspect-ratio: 1; }
.t9 { left: 74vw; top: -4vh; width: 7vw; aspect-ratio: 3/4; }
.hero__texto { position: relative; z-index: 20; display: grid; justify-items: center; gap: 22px; pointer-events: none; }
.hero__sub { margin: 0; color: var(--acento); text-align: center; }
.hero__orn { position: absolute; left: 50%; top: 50%; z-index: 21; width: 92px; aspect-ratio: 1192 / 1479; translate: -50% -50%; color: var(--acento); visibility: hidden; }
/* El logo se parte por la mitad: cada mitad es una copia recortada que se va a su lado. */
.hero__mitad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* se enciman 1% para que no quede una rayita en medio cuando el logo está cerrado */
.hero__mitad--izq { clip-path: inset(-10% 49.5% -10% -10%); }
.hero__mitad--der { clip-path: inset(-10% -10% -10% 49.5%); }
@media (max-width: 760px) {
  .t1 { left: -6vw; top: 22vh; width: 18vw; } .t2 { left: 7vw; top: 40vh; width: 20vw; }
  .t3 { left: 80vw; top: 27vh; width: 20vw; } .t4 { left: 4vw; top: 62vh; width: 23vw; }
  .t5 { left: 42vw; top: 74vh; width: 16vw; } .t6 { left: 75vw; top: 56vh; width: 20vw; }
  .t7 { left: 82vw; top: 66vh; width: 14vw; } .t8, .t9 { display: none; }
}

/* ---------- manifiesto que se enciende ---------- */
.manifiesto { display: grid; place-items: center; min-height: 80vh; }
.encender { max-width: 880px; margin: 0; font: 400 clamp(22px, 2.1vw, 30px)/1.2 var(--serif); color: var(--acento); text-align: center; text-wrap: balance; }

/* ---------- filas de fotos que corren de lado ---------- */
.mueven { padding-bottom: 0; overflow: hidden; }
/* las filas se desvanecen solo arriba y abajo, como en Satius: un degradado del color del fondo encima de las fotos */
.filas { position: relative; display: grid; gap: 8px; margin-top: clamp(56px, 7vw, 96px); }
.filas::before, .filas::after { content: ""; position: absolute; left: -50vw; right: -50vw; z-index: 1; height: 34%; pointer-events: none; }
.filas::before { top: -2px; background: linear-gradient(var(--oscuro) 0%, rgba(33, 10, 10, .88) 22%, rgba(33, 10, 10, .45) 60%, rgba(33, 10, 10, 0) 100%); }
.filas::after { bottom: -2px; background: linear-gradient(0deg, var(--oscuro) 0%, rgba(33, 10, 10, .88) 22%, rgba(33, 10, 10, .45) 60%, rgba(33, 10, 10, 0) 100%); }
.fila { display: flex; gap: 8px; width: max-content; }
.fila img { width: clamp(160px, 15vw, 216px); aspect-ratio: 3/4; object-fit: cover; }

/* ---------- la casa: fotos que flotan y una tarjeta ---------- */
.casa { min-height: 150vh; display: grid; place-items: center; overflow: clip; }
.flota { position: absolute; margin: 0; }
.flota img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
/* siete fotos alrededor del texto, que ocupa el centro (más o menos del 35% al 65% de ancho) */
.f1 { left: 28%; top: 2%; width: clamp(130px, 15vw, 280px); }
.f2 { left: 3%; top: 60%; width: clamp(130px, 18vw, 320px); }
.f3 { right: 17%; top: 66%; width: clamp(140px, 18vw, 320px); }
.f4 { right: 5%; top: 6%; width: clamp(110px, 15vw, 270px); }
.f5 { left: 5%; top: 16%; width: clamp(110px, 14vw, 250px); }
.f6 { right: 2%; top: 38%; width: clamp(100px, 12vw, 220px); }
.f7 { left: 37%; top: 84%; width: clamp(100px, 11vw, 200px); }
.ficha {
  position: absolute; left: 52%; bottom: 14%; z-index: 2; width: 220px; padding: 12px; background: var(--crema); color: var(--oscuro);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ficha strong { display: block; font: 500 12px/1.2 var(--sans); text-transform: uppercase; }
.ficha span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--oscuro-tenue); }
.casa__texto { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .casa { min-height: 140vh; }
  .f1 { left: 2%; top: 3%; width: 34vw; } .f4 { right: 3%; top: 8%; width: 30vw; } .f5 { left: 40%; top: 16%; width: 22vw; }
  .f2 { left: 3%; top: 70%; width: 36vw; } .f3 { right: 3%; top: 76%; width: 34vw; } .f6, .f7 { display: none; }
  .ficha { left: 40%; bottom: 10%; width: 170px; }
}

/* ---------- momentos: sección fija, fondo que cambia y tarjetas ---------- */
.momentos { position: relative; height: 100vh; overflow: hidden; }
.momentos__fondos { position: absolute; inset: 0; }
.momentos__fondos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.72); }
.momentos__fondos img:first-child { opacity: 1; }
.momentos::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(var(--oscuro) 12%, rgba(33, 10, 10, .2) 45%, rgba(33, 10, 10, .5) 100%); }
.momentos__cabeza { position: relative; z-index: 2; padding: calc(var(--menu-alto) + 24px) 16px 0; }
.momentos__cabeza .texto { margin-top: 12px; }
.momentos__pista { position: absolute; left: 50%; bottom: 7vh; z-index: 2; display: flex; gap: clamp(24px, 9vw, 140px); }
.tarjeta-m { flex: none; width: clamp(200px, 19vw, 280px); margin: 0; background: #2a1310; transform-origin: 50% 100%; }
.tarjeta-m img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.tarjeta-m figcaption { position: absolute; inset: auto 0 0; padding: 16px; background: linear-gradient(transparent, rgba(33, 10, 10, .85)); }
.tarjeta-m { position: relative; }
.tarjeta-m b { display: block; font: 400 italic 20px/1.2 var(--serif); }
.tarjeta-m span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--crema-tenue); }

/* sin movimiento: las tarjetas se recorren de lado con el dedo o la rueda */
.momentos--quieto { height: auto; padding-bottom: 64px; }
.momentos--quieto .momentos__pista { position: relative; left: auto; bottom: auto; margin-top: 48px; padding: 0 16px; overflow-x: auto; }

/* ---------- paquetes: lista desplegable numerada ---------- */
.lista { max-width: 1408px; margin: clamp(40px, 5vw, 64px) auto 0; border-top: 1px solid var(--borde-claro); }
.fila-p { border-bottom: 1px solid var(--borde-claro); }
.fila-p > summary {
  position: relative; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; min-height: 96px; padding: 8px 0;
  list-style: none; cursor: pointer;
}
.fila-p > summary::-webkit-details-marker { display: none; }
.fila-p__num { font: 400 italic 18px/1 var(--serif); color: var(--acento-osc); }
.fila-p__nombre { position: relative; justify-self: center; font: 400 italic clamp(28px, 2.8vw, 40px)/1.2 var(--serif); text-align: center; }
.fila-p__orn { justify-self: end; width: 20px; height: 24px; color: var(--acento-osc); transition: rotate .4s; }
.fila-p[open] .fila-p__orn { rotate: 180deg; }
.fila-p__precio {
  position: absolute; right: 100%; top: -6px; margin-right: 4px; padding: 3px 8px; border-radius: 999px; background: var(--acento-osc);
  color: #fff; font: 600 11px/1.3 var(--sans); white-space: nowrap; visibility: hidden;
}
.fila-p[open] .fila-p__precio, .fila-p > summary:hover .fila-p__precio { visibility: visible; }
.fila-p__cuerpo { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin: 0 auto; padding: 0 16px 32px; text-align: center; }
.fila-p__lema { margin: 0; font-size: 14px; color: var(--oscuro); }
.fila-p__detalle { margin: 0; color: var(--oscuro-tenue); text-wrap: pretty; }
.fila-p__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.fila-p__lista li { padding: 4px 10px; border: 1px solid var(--borde-claro); border-radius: 999px; font-size: 13px; }
.fila-p__cuerpo .btn-linea { color: var(--acento-osc); border-color: var(--acento-osc); }
.centro { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 600px) { .fila-p > summary { grid-template-columns: 36px 1fr 36px; min-height: 80px; } .fila-p__precio { right: auto; left: 50%; top: -14px; translate: -50% 0; margin: 0; } }

/* ---------- historias: tarjetas que corren ---------- */
.historias { overflow: hidden; padding-left: 0; padding-right: 0; }
.cinta { display: flex; gap: 8px; width: max-content; margin-top: clamp(40px, 5vw, 64px); }
.historia {
  display: flex; flex-direction: column; justify-content: space-between; width: clamp(240px, 21vw, 300px); min-height: 340px; padding: 16px;
  border: 1px solid var(--borde-claro); background: var(--crema);
}
.historia svg { width: 16px; height: 20px; color: var(--acento-osc); }
.historia blockquote { margin: 12px 0 0; font: 400 italic 18px/1.3 var(--serif); }
.historia footer { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 12px; line-height: 1.3; }
.historia footer i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--oscuro); color: var(--crema); font: 400 12px/1 var(--serif); font-style: normal; }
.historia footer b { display: block; font-weight: 500; color: var(--acento-osc); text-transform: uppercase; }
.historia footer span { color: var(--oscuro-tenue); }

/* ---------- preguntas numeradas ---------- */
.preguntas .lista { max-width: 1408px; }
.preg { border-bottom: 1px solid var(--borde-claro); }
.preg > summary { display: grid; grid-template-columns: 1fr 2fr 44px; align-items: center; min-height: 60px; list-style: none; cursor: pointer; gap: 16px; }
.preg > summary::-webkit-details-marker { display: none; }
.preg__num { font: 400 italic 18px/1 var(--serif); color: var(--acento-osc); }
.preg__q { font: 400 18px/1.3 var(--serif); }
.preg__mas { justify-self: end; width: 24px; height: 24px; color: var(--acento-osc); transition: rotate .3s; }
.preg[open] .preg__mas { rotate: 45deg; }
.preg__r { margin: 0; padding: 0 44px 20px 0; margin-left: calc(33.33% + 5px); color: var(--oscuro-tenue); max-width: 640px; }
@media (max-width: 700px) {
  .preg > summary { grid-template-columns: 32px 1fr 32px; gap: 8px; }
  .preg__r { margin-left: 40px; padding-right: 0; }
}

/* ---------- portada corta de las páginas internas ---------- */
.portada { display: grid; place-items: center; min-height: 72vh; padding: calc(var(--menu-alto) + 64px) 16px 64px; }