/* Home · La Centella por escenas (v3). Se apoya en centella.css (capas + movimiento propio).
   Cada escena se arma por capas con el scroll; el texto va directo sobre la ilustración, sin velo. */
:root { --W: max(112vw, 118vh); }
@supports (height: 1svh) { :root { --W: max(112vw, 118svh); } }

.js-journey .escenas .stage { background: #127766; }
.js-journey .escenas .art { transform-origin: 0 0; }
.js-journey .escenas .copy, .js-journey .escenas .intro__inner { text-shadow: 0 1px 14px rgba(8, 40, 34, .35); }
.js-journey .escenas .pill { text-shadow: none; }
.js-journey .escenas .world { pointer-events: none; }
.js-journey .escenas .world .copy { pointer-events: auto; }

/* 01 · sobre: frente al cielo, con el sol y las montañas asomando abajo */
.js-journey .escenas .intro { align-items: flex-start; padding-top: clamp(84px, 11vh, 120px); }
.js-journey .escenas .intro__tap { color: var(--hueso); }
.js-journey .escenas .intro__meta .caps:first-child, .js-journey .escenas .intro__names .script { color: var(--hueso); }

/* 02 · bienvenida: texto en el cielo, sobre el sol */
.js-journey .escenas .world[data-world="bienvenida"] { align-items: flex-start; padding-top: clamp(92px, 13vh, 130px); }
.js-journey .escenas .world[data-world="bienvenida"] .tint-malva { color: var(--hueso); }
.js-journey .escenas .world[data-world="bienvenida"] .copy { gap: 12px; }

/* 03 · destino: panel crema junto al hotel */
.js-journey .escenas .world[data-world="destino"] { justify-content: flex-end; padding-right: clamp(18px, 1.8vw, 30px); }
.js-journey .escenas .world[data-world="destino"] .copy { max-width: 312px; padding: 32px 24px 28px; gap: 12px; background: var(--crema); color: var(--ciruela); text-shadow: none; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); outline: 1px solid rgba(53, 21, 33, .35); outline-offset: -9px; }
.js-journey .escenas .world[data-world="destino"] .tint-malva { color: var(--vino); }
.js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: clamp(26px, 2.3vw, 32px); }
.js-journey .escenas .world[data-world="destino"] .copy .title .script { font-size: clamp(38px, 3.4vw, 48px); }
.js-journey .escenas .world[data-world="destino"] .lead { font-size: 16.5px; line-height: 1.4; }
.js-journey .escenas .world[data-world="destino"] .copy__venue .display { font-size: 19px; }
.js-journey .escenas .world[data-world="destino"] .rule { color: var(--vino); }
.js-journey .escenas .world[data-world="destino"] .pill { background: var(--ciruela); color: var(--hueso); border-color: var(--ciruela); }

/* 04 · encuentro: texto sobre la roca del acantilado, el mar debajo */
.js-journey .escenas .world[data-world="encuentro"] { justify-content: flex-start; align-items: flex-start; padding-top: clamp(96px, 15vh, 150px); padding-left: clamp(28px, 7vw, 110px); }
.js-journey .escenas .world[data-world="encuentro"] .copy { align-items: flex-start; text-align: left; max-width: 460px; gap: 12px; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }

/* 05 · cierre: los nenúfares arriba, el texto donde el mar se vuelve profundo */
.js-journey .escenas .world[data-world="cierre"] { align-items: flex-end; padding-bottom: clamp(40px, 7vh, 80px); }
.js-journey .escenas .world[data-world="cierre"] .copy { gap: 10px; text-shadow: 0 1px 14px rgba(6, 30, 28, .7); }
.js-journey .escenas .world[data-world="cierre"] .copy__sign { margin-top: 2px; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="destino"] { justify-content: center; align-items: flex-end; padding: 0 18px 26px; }
  .js-journey .escenas .world[data-world="destino"] .copy { max-width: 340px; padding: 26px 22px 22px; gap: 8px; }
  .js-journey .escenas .world[data-world="destino"] .lead { font-size: 16px; line-height: 1.35; }
  .js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: 26px; }
  .js-journey .escenas .world[data-world="destino"] .copy .title .script { font-size: 38px; }
  .js-journey .escenas .world[data-world="encuentro"] { justify-content: center; padding: 23vh 22px 0; }
  .js-journey .escenas .world[data-world="encuentro"] .copy { align-items: center; text-align: center; }
  .js-journey .escenas .world[data-world="cierre"] { padding-bottom: 34px; }
}

/* bordes de pincel del cielo: se funden con el fondo del escenario */
.js-journey .escenas .ly--cielo-dia img, .js-journey .escenas .ly--cielo-noche img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
/* el mar se vuelve profundo bajo los nenúfares (solo en el cierre) */
.escenas .depth { display: none; }
.js-journey .escenas .depth { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgba(8, 34, 32, .9) 0%, rgba(8, 34, 32, .72) 38%, rgba(8, 34, 32, 0) 72%); }

.js-journey .escenas .is-open .envelope { margin-top: 78px; }
.js-journey .escenas .intro__after { text-shadow: 0 1px 10px rgba(6, 40, 34, .8); }


/* ================= Sistema art nouveau (v3.1) =================
   Tipografía Jugendstil (Federo) para títulos y etiquetas; tarjeta en arco, botones de
   esquinas cóncavas, ventanas en arco y marco de lámina. Solo geometría: ninguna ilustración. */
.escenas { --f-display: 'Federo', 'Bodoni Moda', Didot, serif; --linea: rgba(242, 232, 216, .6); }
.escenas .display { letter-spacing: .05em; line-height: 1; }
.escenas .caps { font-family: var(--f-display); letter-spacing: .26em; font-weight: 400; }
.escenas .link { font-family: var(--f-display); letter-spacing: .24em; font-size: 12px; }

/* etiqueta de escena: filete · texto · filete */
.escenas .world .copy > .caps:first-child { display: flex; align-items: center; gap: 14px; }
.escenas .world .copy > .caps:first-child::before, .escenas .world .copy > .caps:first-child::after { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .8; }

/* marco de lámina: filete con esquinas cóncavas alrededor de toda la escena */
.escenas .marco { display: none; }
.js-journey .escenas .marco { --r: 18px; --c: var(--linea); display: block; position: absolute; inset: 14px; z-index: 4; pointer-events: none; border: 1px solid var(--c); background-origin: border-box;
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--c) var(--r), var(--c) calc(var(--r) + 1px), transparent calc(var(--r) + 1.5px)) top left / calc(var(--r) + 2px) calc(var(--r) + 2px) no-repeat border-box,
    radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--c) var(--r), var(--c) calc(var(--r) + 1px), transparent calc(var(--r) + 1.5px)) top right / calc(var(--r) + 2px) calc(var(--r) + 2px) no-repeat border-box,
    radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--c) var(--r), var(--c) calc(var(--r) + 1px), transparent calc(var(--r) + 1.5px)) bottom left / calc(var(--r) + 2px) calc(var(--r) + 2px) no-repeat border-box,
    radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--c) var(--r), var(--c) calc(var(--r) + 1px), transparent calc(var(--r) + 1.5px)) bottom right / calc(var(--r) + 2px) calc(var(--r) + 2px) no-repeat border-box;
  -webkit-mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) top left, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) top right, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) bottom left, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) bottom right; -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) top left, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) top right, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) bottom left, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) bottom right; mask-size: 51% 51%; mask-repeat: no-repeat; }

/* botones: placa de esquinas cóncavas con filete interior */
.escenas .pill { --r: 9px; border-radius: 0; border: 0; min-height: 46px; padding: 0 30px; font-family: var(--f-display); letter-spacing: .2em; font-size: 12.5px; font-weight: 400; background: var(--hueso); color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--hueso), inset 0 0 0 4px rgba(53, 21, 33, .55);
  -webkit-mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) top left, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) top right, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) bottom left, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) bottom right; -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) top left, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) top right, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) bottom left, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) bottom right; mask-size: 51% 51%; mask-repeat: no-repeat; }
.escenas .pill:hover { background: var(--malva-claro); color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--malva-claro), inset 0 0 0 4px rgba(53, 21, 33, .55); }

/* 03 · destino: tarjeta en arco con doble filete */
.js-journey .escenas .world[data-world="destino"] .copy { border-radius: 170px 170px 3px 3px; padding: 62px 26px 28px; outline: 0; box-shadow: 0 22px 50px rgba(0, 0, 0, .4); }
.js-journey .escenas .world[data-world="destino"] .copy::before { content: ""; display: block; position: absolute; inset: 7px; z-index: 0; border: 1px solid rgba(113, 48, 73, .7); border-radius: 163px 163px 1px 1px; background: none; opacity: 1; pointer-events: none; }
.js-journey .escenas .world[data-world="destino"] .copy::after { content: ""; position: absolute; inset: 11px; z-index: 0; border: 1px solid rgba(113, 48, 73, .28); border-radius: 159px 159px 0 0; pointer-events: none; }
.js-journey .escenas .world[data-world="destino"] .copy > * { position: relative; z-index: 1; }
.js-journey .escenas .world[data-world="destino"] .pill { background: var(--ciruela); color: var(--hueso); box-shadow: inset 0 0 0 3px var(--ciruela), inset 0 0 0 4px rgba(242, 232, 216, .5); }
.js-journey .escenas .world[data-world="destino"] .copy > .caps:first-child::before, .js-journey .escenas .world[data-world="destino"] .copy > .caps:first-child::after { width: 18px; }

/* 04 · encuentro: filete vertical a la izquierda del texto */
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="encuentro"] .copy { padding: 6px 0 6px 28px; border-left: 1px solid var(--linea); }
  .js-journey .escenas .world[data-world="encuentro"] .copy > .caps:first-child::before { display: none; }
}

/* 05 · cierre: cuenta regresiva en ventanas de arco */
.escenas .countdown { gap: 12px; }
.escenas .countdown > div, .escenas .countdown > div + div { min-width: 86px; padding: 22px 12px 10px; border: 1px solid var(--linea); border-radius: 60px 60px 2px 2px; background: rgba(8, 34, 32, .38); outline: 1px solid rgba(242, 232, 216, .22); outline-offset: 3px; }
.escenas .countdown .display { font-size: clamp(28px, 2.8vw, 40px); }

/* sobre */
.escenas .envelope__card .caps { letter-spacing: .3em; }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .js-journey .escenas .marco { inset: 8px; --r: 14px; }
  .js-journey .escenas .world[data-world="destino"] .copy { padding: 54px 24px 22px; }
  .escenas .countdown > div, .escenas .countdown > div + div { min-width: 78px; padding: 18px 8px 8px; }
}


/* ================= Color y tipografía atrevida (v3.2) =================
   Menos hueso: cada elemento toma un color que contrasta con la ilustración de su escena.
   Títulos en P22 Mucha (Adobe Fonts, letra de cartel de Mucha); Federo queda para etiquetas y datos. */
.escenas { --f-titulo: 'mancine', 'Federo', serif; --sol: #F0D36A; --rosa: #F4A9B8; --coral: #EE7F5C; --manteca: #F8EBC0; --linea: rgba(240, 211, 106, .6); }
.escenas .title .display, .escenas .intro__names, .escenas .copy__date, .escenas .countdown .display { font-family: var(--f-titulo); letter-spacing: .01em; line-height: .92; }
.escenas .copy .title .display { font-size: clamp(54px, 7.2vw, 108px); }
.escenas .copy .title .script { font-size: clamp(54px, 6.6vw, 100px); }
.escenas .title--stack .script { margin-top: -.12em; }
.escenas .intro__names { font-size: clamp(46px, 6.6vw, 96px); color: var(--sol); }
.js-journey .escenas .intro__names .script { color: var(--rosa); }
.js-journey .escenas .intro__meta .caps, .js-journey .escenas .intro__meta .caps:first-child { color: var(--rosa); }
.js-journey .escenas .intro__tap { color: var(--sol); }
.escenas .lead, .escenas .quote { color: var(--manteca); }
.escenas .journey__progress span { border-color: var(--sol); }
.escenas .journey__progress span.is-on { background: var(--sol); }

/* sobre: vino con tarjeta rosa y sello coral */
.escenas .envelope__body { background-color: var(--vino); background-image: repeating-linear-gradient(135deg, rgba(244, 169, 184, .16) 0 1px, transparent 1px 12px); }
.escenas .envelope__body::after { color: var(--rosa); }
.escenas .envelope__flap { background: #5B2139; }
.escenas .envelope__card { background: var(--rosa); }
.escenas .envelope__card .script { color: var(--ciruela); }
.escenas .envelope__seal { background: var(--coral); }

/* botones: coral con tinta ciruela */
.escenas .pill, .escenas .pill--light { background: var(--coral); color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--coral), inset 0 0 0 4px rgba(53, 21, 33, .6); }
.escenas .pill:hover { background: var(--sol); color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--sol), inset 0 0 0 4px rgba(53, 21, 33, .6); }

/* bienvenida: sol sobre el cielo verde */
.js-journey .escenas .world[data-world="bienvenida"] .title .display { color: var(--sol); }
.js-journey .escenas .world[data-world="bienvenida"] .tint-malva { color: var(--rosa); }
.js-journey .escenas .world[data-world="bienvenida"] .rule { color: var(--sol); }

/* destino: tarjeta amarilla, tinta ciruela, filetes vino */
.js-journey .escenas .world[data-world="destino"] .copy { background: var(--sol); color: var(--ciruela); max-width: 330px; }
.js-journey .escenas .world[data-world="destino"] .lead { color: var(--ciruela); }
.js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: clamp(30px, 2.6vw, 36px); }
.js-journey .escenas .world[data-world="destino"] .copy .title .script { font-size: clamp(44px, 3.8vw, 54px); margin-top: -.08em; }
.js-journey .escenas .world[data-world="destino"] .pill { background: var(--vino); color: var(--sol); box-shadow: inset 0 0 0 3px var(--vino), inset 0 0 0 4px rgba(240, 211, 106, .6); }

/* encuentro: coral sobre la roca gris */
.js-journey .escenas .world[data-world="encuentro"] .title .display { color: var(--coral); }
.js-journey .escenas .world[data-world="encuentro"] .tint-malva { color: var(--sol); }
.js-journey .escenas .world[data-world="encuentro"] .rule, .js-journey .escenas .world[data-world="encuentro"] .link { color: var(--sol); }

/* cierre: sol y rosa sobre el mar profundo; arcos vino */
.js-journey .escenas .world[data-world="cierre"] .title .display { color: var(--sol); }
.js-journey .escenas .world[data-world="cierre"] .tint-malva, .js-journey .escenas .world[data-world="cierre"] .copy__sign { color: var(--rosa); }
.js-journey .escenas .world[data-world="cierre"] .copy__date { color: var(--coral); }
.js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(46px, 5.6vw, 84px); }
.js-journey .escenas .world[data-world="cierre"] .copy .title .script { font-size: clamp(50px, 5.6vw, 84px); }
.escenas .countdown > div, .escenas .countdown > div + div { background: var(--vino); border-color: var(--rosa); outline-color: rgba(244, 169, 184, .35); color: var(--rosa); }
.escenas .countdown .display { color: var(--sol); }

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .escenas .copy .title .display { font-size: clamp(40px, 12vw, 56px); }
  .escenas .copy .title .script { font-size: clamp(44px, 12.5vw, 58px); }
  .js-journey .escenas .world[data-world="bienvenida"] .copy .title .display { font-size: clamp(27px, 8.4vw, 40px); }
  .js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: 30px; }
  .js-journey .escenas .world[data-world="destino"] .copy .title .script { font-size: 44px; }
  .js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(34px, 10vw, 46px); }
  .js-journey .escenas .world[data-world="cierre"] .copy .title .script { font-size: clamp(40px, 11vw, 50px); }
  .escenas .intro__names { font-size: clamp(34px, 9.6vw, 46px); }
}

/* ajustes v3.2 */
.js-journey .escenas .is-open .envelope { margin-top: 124px; }
.music { background: #F0D36A; color: #351521; }
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="encuentro"] { padding-top: clamp(84px, 12vh, 120px); }
  .js-journey .escenas .world[data-world="encuentro"] .copy { max-width: 560px; gap: 10px; }
  .js-journey .escenas .world[data-world="encuentro"] .copy .title { flex-wrap: nowrap; }
  .js-journey .escenas .world[data-world="encuentro"] .copy .title .display { font-size: clamp(48px, 5.6vw, 84px); }
  .js-journey .escenas .world[data-world="encuentro"] .copy .title .script { font-size: clamp(50px, 5.6vw, 84px); }
  .js-journey .escenas .world[data-world="encuentro"] .copy p { max-width: 400px; }
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .js-journey .escenas .is-open .envelope { margin-top: 108px; }
}

/* v3.3 · P22 Mucha es condensada: los títulos suben de tamaño */
.escenas .title .display, .escenas .intro__names, .escenas .copy__date, .escenas .countdown .display { letter-spacing: .02em; line-height: .95; }
.escenas .copy .title .display { font-size: clamp(64px, 8.6vw, 130px); }
.escenas .intro__names { font-size: clamp(56px, 7.8vw, 116px); }
.js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: clamp(38px, 3.2vw, 46px); }
.js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(56px, 6.6vw, 100px); }
.escenas .copy__date { font-size: clamp(40px, 4.2vw, 62px); }
.escenas .countdown .display { font-size: clamp(34px, 3.2vw, 46px); }
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="encuentro"] .copy .title .display { font-size: clamp(60px, 6.8vw, 104px); }
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .escenas .copy .title .display { font-size: clamp(50px, 15vw, 70px); }
  .js-journey .escenas .world[data-world="bienvenida"] .copy .title .display { font-size: clamp(40px, 12.4vw, 58px); }
  .js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: 40px; }
  .js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(44px, 13vw, 60px); }
  .escenas .intro__names { font-size: clamp(36px, 10.4vw, 52px); white-space: nowrap; }
}

/* v3.5 · títulos en Mancine ExtraBold (Adobe Fonts), en minúsculas: sus mayúsculas seguidas no se leen.
   Fecha y cuenta regresiva vuelven a Federo porque los números de Mancine se confunden. */
.escenas .title .display, .escenas .intro__names { font-weight: 800; text-transform: none; letter-spacing: 0; line-height: 1; }
.escenas .copy__date, .escenas .countdown .display { font-family: var(--f-display); letter-spacing: .06em; }
.escenas .copy .title .display { font-size: clamp(52px, 6.6vw, 100px); }
.escenas .intro__names { font-size: clamp(46px, 6.4vw, 94px); }
.escenas .title--stack .script { margin-top: 0; }
.js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: clamp(30px, 2.5vw, 35px); }
.js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(46px, 5.4vw, 82px); }
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="encuentro"] .copy .title .display { font-size: clamp(50px, 5.8vw, 88px); }
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .escenas .copy .title .display { font-size: clamp(40px, 11.5vw, 56px); }
  .js-journey .escenas .world[data-world="bienvenida"] .copy .title .display { font-size: clamp(30px, 9.2vw, 44px); }
  .js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: 32px; }
  .js-journey .escenas .world[data-world="cierre"] .copy .title .display { font-size: clamp(32px, 9.4vw, 46px); }
  .escenas .intro__names { font-size: clamp(30px, 8.4vw, 42px); }
}

/* v3.6 · sobre abierto en desktop: que la frase y el botón quepan en pantallas bajas */
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .intro { padding-top: clamp(64px, 8vh, 100px); }
  .js-journey .escenas .is-open .envelope { margin-top: 104px; width: min(320px, 78vw); }
  .js-journey .escenas .intro__after { gap: 8px; }
  .js-journey .escenas .intro__after .quote { font-size: clamp(20px, 1.9vw, 25px); }
  .js-journey .escenas .intro__after .pill { margin-top: 4px; }
}

/* v3.7 · números en Galahad (Adobe Fonts): fecha, cuenta regresiva, coordenadas y fecha del sobre */
.escenas { --f-num: 'galahad-std', 'Federo', serif; }
.escenas .copy__date, .escenas .countdown .display, .escenas .num { font-family: var(--f-num); font-weight: 400; }
.escenas .copy__date { letter-spacing: .05em; font-size: clamp(42px, 4.4vw, 64px); }
.escenas .countdown .display { letter-spacing: .03em; font-size: clamp(34px, 3.2vw, 46px); }
.escenas .caps.num { font-size: 15px; letter-spacing: .2em; }
.escenas .envelope__card .caps.num { font-size: 12px; letter-spacing: .26em; }

/* v3.8 · cuenta regresiva: una sola placa de contorno ondulado (sin arcos, para no repetir la forma de la tarjeta de El destino) */
.escenas .countdown { position: relative; width: min(460px, 86vw); aspect-ratio: 520 / 150; align-items: center; justify-content: center; gap: 0; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 150' preserveAspectRatio='none'><path d='M40 30C40 14 60 10 80 14C140 26 200 26 244 12Q260 4 276 12C320 26 380 26 440 14C460 10 480 14 480 30C480 50 500 55 508 75C500 95 480 100 480 120C480 136 460 140 440 136C380 124 320 124 276 138Q260 146 244 138C200 124 140 124 80 136C60 140 40 136 40 120C40 100 20 95 12 75C20 55 40 50 40 30Z' fill='%23713049'/><path d='M40 30C40 14 60 10 80 14C140 26 200 26 244 12Q260 4 276 12C320 26 380 26 440 14C460 10 480 14 480 30C480 50 500 55 508 75C500 95 480 100 480 120C480 136 460 140 440 136C380 124 320 124 276 138Q260 146 244 138C200 124 140 124 80 136C60 140 40 136 40 120C40 100 20 95 12 75C20 55 40 50 40 30Z' fill='none' stroke='%23F4A9B8' stroke-width='1.2' transform='translate(260 75) scale(.955 .87) translate(-260 -75)'/></svg>") center / 100% 100% no-repeat; }
.escenas .countdown > div, .escenas .countdown > div + div { min-width: 0; padding: 0 clamp(14px, 2.4vw, 24px); border: 0; border-radius: 0; background: none; outline: 0; }
.escenas .countdown > div + div { border-left: 1px solid rgba(244, 169, 184, .6); }
.escenas .countdown .display { font-size: clamp(28px, 2.9vw, 40px); }
.escenas .countdown .caps { font-size: 9.5px; letter-spacing: .24em; }
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .escenas .countdown { width: min(340px, 86vw); }
  .escenas .countdown > div, .escenas .countdown > div + div { padding: 0 14px; }
  .escenas .countdown .display { font-size: 28px; }
  .escenas .countdown .caps { font-size: 8.5px; letter-spacing: .2em; }
}

/* v3.9 · tarjeta de El destino: silueta "en ola" (cintura y bordes ondulados) en lugar del arco */
.js-journey .escenas .world[data-world="destino"] .copy { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 500' preserveAspectRatio='none'><path d='M20 60C20 30 50 20 80 30C110 40 130 16 170 14C210 16 230 40 260 30C290 20 320 30 320 60C320 120 308 180 308 250C308 320 320 380 320 440C320 470 290 480 260 470C230 460 210 484 170 486C130 484 110 460 80 470C50 480 20 470 20 440C20 380 32 320 32 250C32 180 20 120 20 60Z' fill='%23F0D36A'/><path d='M20 60C20 30 50 20 80 30C110 40 130 16 170 14C210 16 230 40 260 30C290 20 320 30 320 60C320 120 308 180 308 250C308 320 320 380 320 440C320 470 290 480 260 470C230 460 210 484 170 486C130 484 110 460 80 470C50 480 20 470 20 440C20 380 32 320 32 250C32 180 20 120 20 60Z' fill='none' stroke='%23713049' stroke-opacity='.75' stroke-width='1.2' vector-effect='non-scaling-stroke' transform='translate(170 250) scale(.93 .955) translate(-170 -250)'/></svg>") center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .45)); padding: 58px 46px 52px; max-width: 356px; }
.js-journey .escenas .world[data-world="destino"] .copy::before, .js-journey .escenas .world[data-world="destino"] .copy::after { display: none; }
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="destino"] .copy { padding: 50px 44px 44px; max-width: 356px; }
}

/* v4.0 · ajustes de posición
   destino (desktop): tarjeta más estrecha y pegada al borde para no tapar la garza
   cierre (desktop): bloque más compacto para que el título no toque el nenúfar
   encuentro (móvil): el texto baja a la roca, fuera del follaje (la cámara sube en escenas.js) */
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="destino"] { padding-right: clamp(12px, 1.2vw, 18px); }
  .js-journey .escenas .world[data-world="destino"] .copy { max-width: 332px; padding: 56px 46px 50px; gap: 10px; }
  .js-journey .escenas .world[data-world="destino"] .copy .title .display { font-size: clamp(28px, 2.2vw, 32px); }
  .js-journey .escenas .world[data-world="destino"] .copy .title .script { font-size: clamp(40px, 3.4vw, 48px); }
  .js-journey .escenas .world[data-world="destino"] .lead { font-size: 15.5px; }
  .js-journey .escenas .world[data-world="destino"] .copy__venue .display { font-size: 17px; }
  .js-journey .escenas .world[data-world="cierre"] { padding-bottom: clamp(22px, 3.4vh, 36px); }
  .js-journey .escenas .world[data-world="cierre"] .copy { gap: 7px; }
  .js-journey .escenas .world[data-world="cierre"] .countdown { width: min(400px, 86vw); }
  .js-journey .escenas .world[data-world="cierre"] .countdown .display { font-size: clamp(26px, 2.5vw, 34px); }
  .js-journey .escenas .world[data-world="cierre"] .copy__sign { font-size: clamp(32px, 3.2vw, 46px); margin-top: 0; }
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .js-journey .escenas .world[data-world="encuentro"] { padding-top: 27vh; }
}