/* =========================================================
   JCA TRAVELS — estilos de /jca-travels
   Se carga después de styles.css (de ahí salen la tipografía,
   los botones base y el pie legal de Detelon).
   Colores del logo de JCA (negro + verde). Por defecto en modo oscuro
   (portada de noche con luna y estrellas); el botón de la cabecera
   cambia al modo claro (portada de atardecer con sol), ver el final.
   ========================================================= */

.jca-web {
  --jca-negro: #06140c;
  --jca-verde: #39e27a;          /* verde neón: fondos de botones y detalles */
  --jca-verde-texto: #39e27a;    /* verde para texto sobre fondo oscuro */
  --jca-titulo: #ffffff;
  --jca-fondo: #020805;
  --jca-texto: #cfe0d5;
  --jca-suave: #8fb39b;
  --jca-tarjeta: #0a1d12;
  --jca-linea: #173524;
  /* siluetas de noche: más claras (con bruma) cuanto más lejos */
  --sil-lejos: #1a4430;
  --sil-medio: #10301f;
  --sil-heroe: #07190e;
  --sil-cerca: #020a05;
  background: var(--jca-fondo);
  color: var(--jca-texto);
}
.jca-web h1, .jca-web h2, .jca-web h3 { color: var(--jca-titulo); }
.jca-web a { color: var(--jca-verde-texto); }
.jca-web a:hover { color: var(--jca-titulo); }
.jca-web :focus-visible { outline-color: var(--jca-verde); }

.jca-eyebrow { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--jca-verde-texto); margin-bottom: 12px; }

.btn--jca { background: var(--jca-verde); color: var(--jca-negro) !important; box-shadow: 0 10px 24px -12px rgba(15, 138, 66, .8); }
.btn--jca:hover { background: #5cf095; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(15, 138, 66, .7); }
.btn--jca-borde { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); }
.btn--jca-borde:hover { border-color: var(--jca-verde); color: var(--jca-verde) !important; }

/* ---------- Cabecera ---------- */
.jca-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.jca-header.is-scrolled { background: rgba(2, 8, 5, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(57, 226, 122, .2); }
.jca-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.jca-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.jca-brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px var(--jca-linea); }
.jca-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.jca-brand b { color: var(--jca-titulo); font-weight: 800; font-size: 1.08rem; letter-spacing: .01em; }
.jca-brand small { color: var(--jca-verde-texto); font-weight: 600; font-size: .74rem; letter-spacing: .04em; }
.jca-header .nav a:not(.btn) { color: var(--jca-titulo); }
.jca-header .nav a:not(.btn)::after { background: var(--jca-verde); }
.jca-header .nav a.jca-nav-detelon { color: var(--jca-suave); }
.jca-header .nav-toggle { color: var(--jca-titulo); }
/* botón de modo oscuro / claro */
.jca-tema {
  order: 3; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--jca-titulo); border: 1.5px solid var(--jca-linea); transition: border-color .15s, color .15s;
}
.jca-tema svg { width: 20px; height: 20px; }
.jca-tema:hover { border-color: var(--jca-verde); color: var(--jca-verde); }
.jca-tema__luna, .jca-claro .jca-tema__sol { display: none; }
.jca-claro .jca-tema__luna { display: block; }
/* arriba del todo la cabecera va sobre el cielo oscuro: texto en blanco */
.jca-header:not(.is-scrolled) .jca-brand b,
.jca-header:not(.is-scrolled) .nav-toggle,
.jca-header:not(.is-scrolled) .jca-tema { color: #fff; }
.jca-header:not(.is-scrolled) .jca-tema { border-color: rgba(255, 255, 255, .35); }
.jca-header:not(.is-scrolled) .jca-tema:hover { border-color: var(--jca-verde); color: var(--jca-verde); }
.jca-header:not(.is-scrolled) .jca-brand small { color: var(--jca-verde); }
@media (min-width: 861px) {
  .jca-header:not(.is-scrolled) .nav a:not(.btn) { color: #fff; }
  .jca-header:not(.is-scrolled) .nav a.jca-nav-detelon { color: #b9e3c8; }
}
@media (max-width: 860px) {
  .jca-header .nav { top: 72px; background: var(--jca-fondo); border-color: var(--jca-linea); }
  .jca-header .nav a:not(.btn) { border-color: var(--jca-linea); }
  .jca-header:has(.nav.is-open) { background: var(--jca-fondo); }
  .jca-header:has(.nav.is-open) .jca-brand b, .jca-header:has(.nav.is-open) .nav-toggle, .jca-header:has(.nav.is-open) .jca-tema { color: var(--jca-titulo); }
  .jca-header:has(.nav.is-open) .jca-tema { border-color: var(--jca-linea); }
  .jca-tema { order: 0; margin-left: auto; }
}

/* =========================================================
   ESCENA PARALLAX
   La sección mide más que la pantalla; dentro, .escena__vista
   se queda fija (sticky) mientras jca.js mueve cada capa a su
   propia velocidad según el progreso del scroll.
   ========================================================= */
.escena { position: relative; height: 340vh; height: 340svh; }
.escena__vista {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 6%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 31%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 12%, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 91% 27%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 38%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 41%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 84% 44%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 52%, rgba(255, 255, 255, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 55%, rgba(255, 255, 255, .5) 50%, transparent 51%),
    radial-gradient(22% 30% at 86% 20%, rgba(214, 255, 230, .14), transparent 70%),
    radial-gradient(70% 45% at 50% 100%, rgba(57, 226, 122, .24), transparent 70%),
    linear-gradient(180deg, #010602 0%, #04120a 30%, #0a2717 62%, #1d4430 100%);
}
/* más estrellas, que titilan despacio (solo de noche) */
.escena__vista::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 33% 10%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 81% 7%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 14%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 42% 16%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 35%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 25%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 56% 9%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 54% 36%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 11% 36%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 11% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 62% 31%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 77% 29%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 49%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 57% 33%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 29% 61%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 17% 22%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 5% 42%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 34% 22%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 7%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 69% 5%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 29% 25%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 93% 23%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 49% 14%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 73% 25%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 17% 26%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 81% 54%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 98% 43%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 16% 12%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 2% 52%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 29% 10%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 54%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 40% 25%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 5%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 1% 10%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 5%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 16% 16%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47% 8%, rgba(214, 255, 230, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 74% 46%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 52% 14%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 34%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 97% 54%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 23%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 38%, rgba(255, 255, 255, .85) 50%, transparent 51%);
  animation: jca-titila 5s ease-in-out infinite alternate;
}
@keyframes jca-titila { from { opacity: 1; } to { opacity: .55; } }
.escena__fondo { position: absolute; inset: 0; }
.capa { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.capa svg { position: absolute; display: block; max-width: none; }
.capa-full { inset: 0; width: 100%; height: 100%; }

/* luna creciente arriba a la derecha, detrás de todo (en modo claro, el sol) */
.capa:has(> .obj--sol) { display: none; }
.obj--luna { left: 83%; top: 15%; width: clamp(56px, 5vw, 84px); height: auto; filter: drop-shadow(0 0 18px rgba(214, 255, 230, .55)); }

/* nubes de noche, apenas iluminadas */
.nubes { fill: #304a3a; overflow: visible; }
.capa--nubes-lejos .nubes { opacity: .3; top: 18%; height: 70%; }
.capa--nubes-medio .nubes { opacity: .42; top: 24%; height: 70%; }


/* lejos: colinas, dos montañas rusas, esfera geodésica y torre de caída (con bruma) */
.capa--lejos { color: var(--sil-lejos); fill: var(--sil-lejos); }
.colinas { top: auto; bottom: 6vh; height: 34vh; fill: #1e4d36; }
.obj--esfera pattern path { stroke: var(--jca-verde); stroke-opacity: .22; }
.obj--kingda    { left: 41%; bottom: 23vh; height: 42vh; width: auto; }
.obj--giga      { left: 71%; bottom: 24vh; height: 21vh; width: auto; }
.obj--esfera    { left: 30%; bottom: 25vh; height: 24vh; width: auto; }
.obj--torre     { left: 88%; bottom: 24vh; height: 44vh; width: auto; }
.baliza { animation: jca-baliza 1.6s steps(1) infinite; }
@keyframes jca-baliza { 50% { opacity: .15; } }
.luz { opacity: .9; filter: drop-shadow(0 0 2px #ffd98a); }

/* medio: la noria */
.capa--medio { color: var(--sil-medio); fill: var(--sil-medio); }
.obj--noria { left: 3%; bottom: 13vh; height: 50vh; width: auto; }

/* la protagonista: una hiper montaña rusa a contraluz */
.capa--heroe { color: var(--sil-heroe); fill: var(--sil-heroe); }
.obj--heroe { left: -22vh; bottom: 11vh; height: 44vh; width: auto; }
.tren-guia { fill: none; }
/* de noche el tren lleva luces: ventanillas y faro delante */
.tren { filter: drop-shadow(0 0 3px rgba(255, 217, 138, .55)); }
.tren__luz { fill: #ffd98a; }
.tren__faro { fill: #fff6d8; filter: drop-shadow(0 0 4px #fff2b0); }

/* avión que cruza el cielo entre las nubes; de noche, con luces */
.obj--avion { left: 0; top: 21%; width: 84px; height: auto; fill: #2a4636; animation: jca-avion 46s linear infinite; }
.avion__ala-lejos { opacity: .7; }
.avion__ventanas { fill: #ffd98a; opacity: .85; }
.avion__baliza { fill: #ff5a4d; animation: jca-parpadeo 1.4s steps(1) infinite; }
.avion__punta { fill: #ff5a4d; filter: drop-shadow(0 0 3px #ff5a4d); }
.avion__estrobo { fill: #fff; filter: drop-shadow(0 0 4px #fff); animation: jca-parpadeo 1.1s steps(1) .3s infinite; }
@keyframes jca-avion { from { transform: translate(-90px, 3vh); } to { transform: translate(calc(100vw + 90px), -4vh); } }
@keyframes jca-parpadeo { 50% { opacity: 0; } }

/* primer plano: suelo, árboles y la vía que cruza la pantalla */
.capa--cerca { color: var(--sil-cerca); fill: var(--sil-cerca); }
.primer-plano { top: auto; bottom: -14vh; height: 40vh; }

/* texto de portada */
.escena__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(72px + 12vh) 16px 0; text-align: center; will-change: transform, opacity;
}
.escena__texto h1 {
  font-size: clamp(3rem, 10vw, 7.4rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 .25em;
  color: #fff !important; text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
.escena__texto h1 span { color: var(--jca-verde); text-shadow: 0 0 40px rgba(57, 226, 122, .35); }
.escena__texto .jca-eyebrow { color: var(--jca-verde); }
.escena__texto p { font-size: clamp(1.02rem, 2vw, 1.3rem); font-weight: 500; color: #eafaf0; max-width: 34ch; margin: 0 0 1.6em; }
.escena__bajar { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.escena__bajar svg { width: 28px; height: 28px; color: var(--jca-verde); animation: jca-bajar 1.8s ease-in-out infinite; }
@keyframes jca-bajar { 50% { transform: translateY(6px); } }

/* nubes: cada una flota con su propio ritmo */
.nube__flota { animation: jca-flota var(--t, 24s) ease-in-out infinite alternate; }
@keyframes jca-flota { from { transform: translateX(calc(var(--a, 30px) * -1)); } to { transform: translateX(var(--a, 30px)); } }

/* mensajes durante el recorrido del tren */
.escena__mensajes { position: absolute; inset: calc(72px + 9vh) 16px auto; height: 9em; pointer-events: none; }
.escena__mensaje {
  position: absolute; inset: 0 0 auto; margin: 0 auto; max-width: 18em; text-align: center;
  font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.15; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
  opacity: 0; will-change: opacity, transform;
}
.escena__mensaje span { color: var(--jca-verde); }
.no-js .escena__mensajes { display: none; }
@media (prefers-reduced-motion: reduce) { .escena__mensajes { display: none; } }

@media (max-width: 760px) {
  .obj--luna      { left: 80%; top: 12%; width: 44px; }
  .obj--avion     { width: 56px; animation-duration: 30s; }
  .capa:has(> .obj--luna) { transform: none !important; } /* en el móvil la luna no se mueve, para no pisar el texto */
  .obj--kingda    { left: 34%; height: 32vh; }
  .capa .obj--giga { display: none; }
  .obj--esfera    { left: -6%; height: 18vh; }
  .capa .obj--torre { display: none; }
  .obj--noria     { left: -40%; height: 34vh; }
  .obj--heroe     { left: -19vh; height: 30vh; }
  .primer-plano   { height: 30vh; }
}

/* sin animaciones: la escena se ve ya montada, sin scroll extra */
@media (prefers-reduced-motion: reduce) {
  .escena { height: auto; }
  .escena__vista { position: relative; }
  .escena__texto { padding-top: calc(72px + 6vh); }
}
.no-js .escena { height: auto; }
.no-js .escena__vista { position: relative; }

/* =========================================================
   CONTENIDO
   ========================================================= */
.jca-contenido {
  position: relative; z-index: 1;
  background: var(--jca-fondo);
}
/* el suelo de la escena termina en una ola y da paso al fondo del contenido */
.jca-contenido::before {
  content: ""; display: block; height: clamp(36px, 5vw, 70px); margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 90' preserveAspectRatio='none'%3E%3Cpath fill='%23020a05' d='M0 0h1600v38c-140 30-260 44-420 30S880 18 720 30 420 82 260 76 80 46 0 52z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}

/* ---------- Carruseles de viajes ---------- */
.viajes { padding: 40px 0 40px; }
.viajes + .viajes { padding-top: 40px; }
.viajes__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.viajes__cabecera h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.viajes__vacio { padding: 28px; border: 1.5px dashed #24503a; background: var(--jca-tarjeta); border-radius: var(--radius-lg); color: var(--jca-suave); margin: 0; }

.carrusel__botones { display: flex; gap: 10px; flex: none; }
.carrusel__btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--jca-fondo); color: var(--jca-titulo); border: 1.5px solid #2a3a30; transition: border-color .15s, color .15s, opacity .15s;
}
.carrusel__btn svg { width: 22px; height: 22px; }
.carrusel__btn:hover:not(:disabled) { border-color: var(--jca-verde); background: var(--jca-verde); color: var(--jca-negro); }
.carrusel__btn:disabled { opacity: .3; cursor: default; }

.carrusel {
  --hueco: max(16px, (100vw - var(--wrap)) / 2);
  list-style: none; margin: 0; padding: 6px var(--hueco) 24px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 340px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline-offset: -3px; }

.viaje {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  background: var(--jca-tarjeta); border: 1px solid var(--jca-linea); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.viaje:hover { transform: translateY(-4px); border-color: var(--jca-verde); box-shadow: 0 22px 44px -24px rgba(15, 138, 66, .55); }
.viaje__arte {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(80% 55% at 50% 105%, rgba(57, 226, 122, .45), transparent 70%), linear-gradient(180deg, #04140c, #0a2a18);
}
.viaje__arte svg { width: 78%; height: 84%; fill: #020905; color: #020905; }
.viaje__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viaje__arte--esfera   { background: radial-gradient(80% 55% at 50% 105%, rgba(40, 190, 170, .5), transparent 70%), linear-gradient(180deg, #04121a, #082a30); }
.viaje__arte--tophat { background: radial-gradient(80% 55% at 50% 105%, rgba(170, 90, 200, .45), transparent 70%), linear-gradient(180deg, #0b0a1e, #1d1238); }
.viaje__arte--noria    { background: radial-gradient(80% 55% at 50% 105%, rgba(255, 170, 80, .4), transparent 70%), linear-gradient(180deg, #120c06, #2a1a0c); }
.viaje__arte--torre    { background: radial-gradient(80% 55% at 50% 105%, rgba(80, 140, 255, .45), transparent 70%), linear-gradient(180deg, #050b1a, #0c1a38); }
.viaje__arte--esfera svg, .viaje__arte--torre svg, .viaje__arte--tophat svg, .viaje__arte--noria svg { fill: #020905; color: #020905; }
.viaje--pasado .viaje__arte { filter: saturate(.7); }
.viaje__plazas {
  position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em; background: var(--jca-verde); color: var(--jca-negro);
}
.viaje__plazas--ultimas { background: #ffcf4d; }
.viaje__plazas--completo, .viaje__plazas--cerradas { background: #e2e2e2; color: var(--jca-negro); }

.viaje__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.viaje__fechas { margin: 0; color: var(--jca-verde-texto); font-weight: 700; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; }
.viaje h3 { margin: 0; font-size: 1.22rem; }
.viaje__destino { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--jca-suave); font-size: .92rem; }
.viaje__destino svg { width: 16px; height: 16px; flex: none; }
.viaje__parques { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.viaje__parques li { font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #10291b; color: #d6efe0; }
/* Plazo para apuntarse en la ficha: tablero de estación con paletas, en neón verde */
.plazo {
  --paleta-alto: clamp(46px, 13vw, 62px); --paleta-ancho: clamp(29px, 8.4vw, 40px);
  display: inline-block; max-width: 100%; margin: 0 0 18px; padding: 12px 14px 10px; border-radius: 12px;
  background: #030b07; border: 1.5px solid var(--jca-verde);
  box-shadow: 0 0 18px rgba(57, 226, 122, .45), inset 0 0 14px rgba(57, 226, 122, .12);
}
.plazo__cabecera { display: flex; justify-content: space-between; gap: 24px; margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jca-verde); text-shadow: 0 0 8px rgba(57, 226, 122, .7); }
.plazo__tiempo { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.plazo__tiempo[hidden], .plazo__letras[hidden], [data-si-abierto][hidden] { display: none !important; }
.plazo__tiempo li { text-align: center; }
.plazo__digitos, .plazo__letras { display: flex; gap: 3px; }
.plazo__letras { flex-wrap: wrap; }
.plazo__unidad { display: block; margin-top: 5px; font-size: .68rem; color: #8ff0b4; }
.paleta {
  position: relative; display: block; flex: none; width: var(--paleta-ancho); height: var(--paleta-alto); perspective: 240px;
  font-size: calc(var(--paleta-alto) * .66); font-weight: 800; color: var(--jca-verde); text-shadow: 0 0 7px rgba(57, 226, 122, .55);
}
.paleta--letra { width: calc(var(--paleta-ancho) * .86); font-size: calc(var(--paleta-alto) * .5); }
.paleta > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.paleta__sup, .paleta__hoja--sup { top: 0; border-radius: 6px 6px 0 0; background: #0d2a1a; transform-origin: bottom; }
.paleta__inf, .paleta__hoja--inf { bottom: 0; border-radius: 0 0 6px 6px; background: #0a2114; transform-origin: top; }
.paleta i { position: absolute; left: 0; right: 0; height: var(--paleta-alto); font-style: normal; line-height: var(--paleta-alto); text-align: center; font-variant-numeric: tabular-nums; }
.paleta__sup i, .paleta__hoja--sup i { top: 0; }
.paleta__inf i, .paleta__hoja--inf i { bottom: 0; }
.paleta .paleta__hoja { visibility: hidden; z-index: 2; }
.paleta::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #020805; z-index: 3; }

.viaje__cta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .92rem; text-decoration: none; }
.viaje__cta--suave { color: var(--jca-suave) !important; }
/* Toda la tarjeta es clicable: el enlace se extiende por encima de ella */
.viaje__cta::after { content: ""; position: absolute; inset: 0; }
.viaje__cta:focus-visible { outline: none; }
.viaje:has(.viaje__cta:focus-visible) { outline: 2px solid var(--jca-verde); outline-offset: 2px; }

/* ---------- Qué es JCA ---------- */
.jca-sobre { padding: 80px 0; }
.jca-sobre__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.jca-sobre h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.jca-sobre__lede { font-size: 1.15rem; font-weight: 600; color: var(--jca-titulo); }
.jca-sobre__lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.jca-sobre__lista li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--jca-titulo); }
.jca-sobre__lista svg { width: 22px; height: 22px; color: var(--jca-verde-texto); flex: none; }
.jca-sobre__logo { display: block; max-width: 400px; width: 100%; justify-self: center; }
.jca-sobre__logo img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(57, 226, 122, .35); transition: transform .25s ease; }
.jca-sobre__logo:hover img { transform: scale(1.02) rotate(-1deg); }
@media (max-width: 900px) { .jca-sobre__grid { grid-template-columns: 1fr; gap: 36px; } .jca-sobre__logo { max-width: 300px; } }

/* ---------- Llamada final ---------- */
/* el único bloque en negro + neón, como el logo y el canal */
.jca-cta {
  padding: 90px 0 100px; text-align: center; color: #cfe9d8;
  background: radial-gradient(60% 90% at 50% 110%, rgba(57, 226, 122, .35), transparent 70%), var(--jca-negro);
}
.jca-cta h2 { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff !important; }
.jca-cta h2 span { color: var(--jca-verde); }
.jca-cta p { color: #a9cbb5; }
.jca-cta a:not(.btn) { color: var(--jca-verde); }
.jca-cta a:not(.btn):hover { color: #fff; }
.jca-cta__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 30px; }
.jca-cta__organiza { font-size: .9rem; }
.jca-cta__despedida {
  margin: 8px 0 26px; color: #fff !important; font-weight: 800; font-style: italic;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem); letter-spacing: -.01em; transform-origin: center;
}
.jca-cta__despedida span { color: var(--jca-verde); text-shadow: 0 0 28px rgba(57, 226, 122, .45); }

/* pie legal de Detelon, en negro para enlazar con la escena */
.jca-web .site-footer { background: #000; border-top: 1px solid rgba(57, 226, 122, .2); padding-top: 32px; }
.jca-web .site-footer a { color: #dbe4f5; }
.jca-web .site-footer a:hover { color: var(--jca-verde); }


/* =========================================================
   CONTENIDO QUE APARECE AL HACER SCROLL
   main.js añade .is-visible a cada .reveal cuando entra en pantalla.
   Aquí se le da una entrada más viva: sube, entra desde la izquierda o
   crece, y con --d (retraso) los elementos de un grupo entran uno detrás de otro.
   Solo se usa "backwards" para que, al terminar, el hover de las tarjetas siga funcionando.
   ========================================================= */
.jca-web .reveal.is-visible { animation: jca-entra .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) backwards; }
.jca-web .reveal--izq.is-visible { animation-name: jca-entra-izq; }
.jca-web .reveal--zoom.is-visible { animation-name: jca-entra-zoom; animation-duration: .9s; }
@keyframes jca-entra { from { opacity: 0; transform: translateY(36px); } }
@keyframes jca-entra-izq { from { opacity: 0; transform: translateX(-48px); } }
@keyframes jca-entra-zoom { from { opacity: 0; transform: scale(.82) rotate(-3deg); } }

/* =========================================================
   FICHA DE UN VIAJE (/jca-travels/viajes/{slug})
   Cabecera en negro + neón (la cabecera fija va encima con texto blanco)
   y el contenido en el fondo oscuro, con los precios en una columna aparte.
   ========================================================= */
.ficha__cabecera {
  padding: 112px 0 56px; color: #cfe9d8;
  background: radial-gradient(70% 90% at 85% 0%, rgba(57, 226, 122, .22), transparent 70%), var(--jca-negro);
}
.ficha__cabecera-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.ficha__volver { display: inline-block; margin-bottom: 18px; font-weight: 600; font-size: .92rem; text-decoration: none; color: #b9e3c8 !important; }
.ficha__volver:hover { color: var(--jca-verde) !important; }
.ficha__fechas { margin: 0 0 8px; color: var(--jca-verde); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.ficha h1 { margin: 0 0 10px; font-size: clamp(2.1rem, 5.5vw, 3.4rem); color: #fff !important; }
.ficha__destino { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: #b9e3c8; }
.ficha__destino svg { width: 18px; height: 18px; flex: none; }
.ficha__resumen { margin: 0 0 24px; font-size: 1.12rem; color: #e3f4e9; max-width: 56ch; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ficha__plazas { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--jca-verde); color: var(--jca-negro); }
.ficha__plazas--ultimas { background: #ffcf4d; }
.ficha__plazas--completo { background: #fff; }
.ficha__cabecera .ficha__nota { color: #a9cbb5; }
.ficha__cabecera .ficha__nota a { color: var(--jca-verde); }
.ficha__arte { border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ficha__nota { margin: 0; font-size: .9rem; color: var(--jca-suave); }

.ficha__contenido { padding: 48px 0 80px; }
.ficha__columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.ficha__columnas--sin-lateral { grid-template-columns: minmax(0, 1fr); }
.ficha__principal { display: grid; gap: 28px; }
.ficha__bloque { padding: 26px; background: var(--jca-tarjeta); border: 1px solid var(--jca-linea); border-radius: var(--radius-lg); }
.ficha__bloque h2 { margin: 0 0 14px; font-size: 1.5rem; }
.ficha__bloque h3 { margin: 0 0 6px; font-size: 1.08rem; }
.ficha__bloque h3 span { margin-left: 6px; font-size: .85rem; font-weight: 600; color: var(--jca-verde-texto); }
.ficha__texto { line-height: 1.7; }

.ficha__telegram { display: flex; gap: 18px; align-items: flex-start; border-color: #16465c; background: #06171f; }
.ficha__telegram-icono { width: 44px; height: 44px; flex: none; color: #26a5e4; }
.ficha__telegram p { margin: 0 0 14px; }

.ficha__incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ficha__incluye li { display: flex; gap: 10px; align-items: flex-start; }
.ficha__incluye svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--jca-verde-texto); }

.ficha__parte + .ficha__parte { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--jca-linea); }
.ficha__opcional { margin: 0 0 8px; font-size: .88rem; color: var(--jca-suave); }
.ficha__parques { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.ficha__parque { font-weight: 600; color: var(--jca-titulo); }
.ficha__dia { margin-left: 8px; font-size: .85rem; color: var(--jca-suave); }
.ficha__dias { list-style: none; margin: 14px 0 0; padding: 0; }
.ficha__dias > li { position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--jca-linea); margin-left: 6px; }
.ficha__dias > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.ficha__dias > li::before { content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--jca-verde); box-shadow: 0 0 0 3px var(--jca-tarjeta); }
.ficha__dias-fecha { display: block; font-weight: 800; color: var(--jca-titulo); }
.ficha__dias-fecha::first-letter { text-transform: uppercase; }
.ficha__dias p { margin: 4px 0 0; }
.ficha__dias-parques { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha__dias-parques li { padding: 3px 10px; border-radius: 999px; background: var(--jca-verde); color: var(--jca-negro); font-size: .82rem; font-weight: 700; }

/* Con fotos, la cabecera las lleva de fondo (van pasando solas) y el texto va abajo, encima */
.ficha__cabecera--fotos { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; min-height: min(86vh, 760px); padding-bottom: 44px; background: var(--jca-negro); }
.ficha__cabecera--fotos .ficha__cabecera-grid { grid-template-columns: minmax(0, 720px); }
.ficha__cabecera--fotos h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.ficha__cabecera--fotos .ficha__resumen { text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.ficha__cabecera--fotos .ficha__cabecera-grid--trailer { grid-template-columns: 1.05fr .95fr; align-items: end; }
.ficha__cabecera-grid--trailer .ficha__fotos { gap: 8px; }
.ficha__cabecera-grid--trailer .ficha__fotos a { width: 80px; height: 58px; }
/* El tráiler, a la derecha del texto */
.ficha__trailer .ficha__video { border: 2px solid rgba(255, 255, 255, .25); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ficha__trailer .ficha__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55)); pointer-events: none; }
.ficha__trailer .ficha__play { z-index: 1; width: 84px; height: 84px; }
.ficha__trailer .ficha__play svg { width: 40px; height: 40px; margin-left: 4px; }
.ficha__trailer-texto { position: absolute; left: 20px; bottom: 16px; z-index: 1; color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.ficha__fondos { position: absolute; inset: 0; z-index: -1; }
.ficha__fondos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.ficha__fondos img.is-visible { opacity: 1; }
.ficha__fondos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 8, 5, .55) 0%, rgba(2, 8, 5, .1) 30%, rgba(2, 8, 5, .8) 72%, var(--jca-fondo) 100%), linear-gradient(90deg, rgba(2, 8, 5, .6), transparent 60%);
}
.ficha__fotos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.ficha__fotos a { display: grid; place-items: center; width: 96px; height: 68px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .7); border-radius: 10px; transition: border-color .15s, transform .15s; }
.ficha__fotos a:hover { border-color: var(--jca-verde); transform: translateY(-2px); }
.ficha__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha__fotos-todas { padding: 0 8px; background: rgba(2, 8, 5, .6); color: #fff !important; font-size: .8rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; }

/* Visor de fotos a pantalla completa */
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(2, 8, 5, .96); color: #fff; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: transparent; }
.visor__foto { max-width: 92vw; max-height: min(84vh, calc(100vh - 160px)); border-radius: 8px; box-shadow: 0 30px 80px -20px #000; }
.visor__fuente { position: absolute; bottom: 52px; left: 16px; right: 16px; margin: 0; text-align: center; color: #dfe9e3; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.visor__fuente a { color: inherit; text-decoration: underline; }
.visor__fuente a:hover { color: var(--jca-verde); }
.visor__cuenta { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; text-align: center; color: #b9e3c8; font-weight: 700; letter-spacing: .1em; }
.visor__boton { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(2, 8, 5, .75); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.visor__boton:hover { background: var(--jca-verde); color: var(--jca-negro); }
.visor__cerrar { top: 20px; right: 20px; }
.visor__anterior { left: 20px; top: 50%; transform: translateY(-50%); }
.visor__siguiente { right: 20px; top: 50%; transform: translateY(-50%); }

.ficha__videos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.ficha__videos p { margin: 8px 0 0; font-weight: 600; font-size: .92rem; color: var(--jca-titulo); }
.ficha__video { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.ficha__video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .2s; }
.ficha__video:hover img { opacity: 1; }
.ficha__play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--jca-verde); color: var(--jca-negro); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); }
.ficha__play svg { width: 30px; height: 30px; margin-left: 3px; }
.ficha__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ficha__lateral { position: sticky; top: 92px; }
.ficha__precios h3 { margin-top: 18px; }
.ficha__precios dl { margin: 8px 0 0; display: grid; gap: 6px; }
.ficha__precios dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--jca-linea); }
.ficha__precios dt { color: var(--jca-texto); }
.ficha__precios dd { margin: 0; font-weight: 800; color: var(--jca-titulo); white-space: nowrap; }

@media (max-width: 900px) {
  .ficha__cabecera { padding-top: 96px; }
  .ficha__cabecera-grid, .ficha__columnas { grid-template-columns: 1fr; }
  .ficha__arte { order: -1; }
  .ficha__lateral { position: static; }
  .ficha__bloque { padding: 20px; }
  .ficha__cabecera--fotos { min-height: min(92vh, 720px); }
  .ficha__cabecera--fotos .ficha__cabecera-grid--trailer { grid-template-columns: 1fr; }
  .ficha__trailer .ficha__play { width: 64px; height: 64px; }
  .ficha__fotos a, .ficha__cabecera-grid--trailer .ficha__fotos a { width: 72px; height: 54px; }
  .ficha__fotos li:nth-child(n+4):not(:last-child) { display: none; }
  .visor__boton { width: 44px; height: 44px; }
  .visor__anterior { left: 8px; }
  .visor__siguiente { right: 8px; }
}

/* =========================================================
   MODO CLARO
   jca.js pone .jca-claro en <html> al pulsar el botón de la cabecera
   (y lo recuerda en localStorage). Portada de atardecer: cielo de verde
   a dorado, sol bajo y atracciones a contraluz; contenido en fondo claro.
   ========================================================= */
.jca-claro .jca-web {
  --jca-verde-texto: #0f8a42;
  --jca-titulo: var(--jca-negro);
  --jca-fondo: #f3fbf5;
  --jca-texto: #1d3327;
  --jca-suave: #557263;
  --jca-tarjeta: #ffffff;
  --jca-linea: #d6eadd;
  --sil-lejos: #6f9c84;
  --sil-medio: #2f5a48;
  --sil-heroe: #12291f;
  --sil-cerca: #07160e;
}
.jca-claro .jca-header.is-scrolled { background: rgba(255, 255, 255, .88); border-color: var(--jca-linea); }
@media (max-width: 860px) {
  .jca-claro .jca-header .nav, .jca-claro .jca-header:has(.nav.is-open) { background: #fff; }
}

.jca-claro .escena__vista {
  background:
    radial-gradient(55% 40% at 68% 88%, rgba(255, 214, 140, .75), transparent 70%),
    linear-gradient(180deg, #15493c 0%, #2c7a5e 26%, #8fc191 52%, #f1d98f 74%, #f6b066 100%);
}
/* sol bajo, detrás de todo (se va poniendo al hacer scroll) */
.jca-claro .capa:has(> .obj--sol) { display: block; }
.jca-claro .capa:has(> .obj--luna) { display: none; }
.obj--sol { left: 56%; top: 48%; width: clamp(220px, 26vw, 420px); height: auto; }
@media (max-width: 760px) { .obj--sol { left: 20%; width: 300px; } }
/* nubes iluminadas por el atardecer */
.jca-claro .nubes { fill: #fff3df; }
.jca-claro .capa--nubes-lejos .nubes { opacity: .4; }
.jca-claro .capa--nubes-medio .nubes { opacity: .6; }
.jca-claro .colinas { fill: #86b394; }
.jca-claro .escena__vista::before { display: none; }
.jca-claro .luz { filter: none; }
.jca-claro .tren { filter: none; }
.jca-claro .tren__luz { display: none; }
.jca-claro .obj--avion { fill: #f7faf8; }
.jca-claro .avion__luces { display: none; }
.jca-claro .obj--esfera pattern path { stroke: #fff; stroke-opacity: .32; }
.jca-claro .escena__texto h1 { text-shadow: 0 6px 30px rgba(4, 30, 20, .35); }
.jca-claro .escena__texto h1 span { text-shadow: none; }
.jca-claro .escena__texto .jca-eyebrow { color: #b9f5cf; }
.jca-claro .escena__mensaje { text-shadow: 0 4px 24px rgba(4, 30, 20, .45); }
.jca-claro .jca-contenido::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 90' preserveAspectRatio='none'%3E%3Cpath fill='%2307160e' d='M0 0h1600v38c-140 30-260 44-420 30S880 18 720 30 420 82 260 76 80 46 0 52z'/%3E%3C/svg%3E");
}

.jca-claro .viajes__vacio { border-color: #b5dcc3; }
.jca-claro .carrusel__btn { background: #fff; border-color: var(--jca-linea); }
.jca-claro .viaje { box-shadow: 0 10px 30px -20px rgba(6, 40, 20, .35); }
.jca-claro .viaje:hover { box-shadow: 0 22px 44px -24px rgba(15, 138, 66, .55); }
.jca-claro .viaje__arte { background: radial-gradient(70% 60% at 75% 25%, rgba(255, 246, 190, .9), transparent 60%), linear-gradient(180deg, #8fe4ae, #e4fbe8); }
.jca-claro .viaje__arte svg { fill: #0e4a2a; color: #0e4a2a; }
.jca-claro .viaje__arte--esfera { background: radial-gradient(70% 60% at 75% 25%, rgba(255, 255, 255, .8), transparent 60%), linear-gradient(180deg, #8fd3f4, #e6f7ff); }
.jca-claro .viaje__arte--tophat { background: radial-gradient(70% 60% at 75% 25%, rgba(255, 240, 250, .9), transparent 60%), linear-gradient(180deg, #c7b5f5, #f6efff); }
.jca-claro .viaje__arte--noria { background: radial-gradient(70% 60% at 75% 25%, rgba(255, 250, 220, .9), transparent 60%), linear-gradient(180deg, #ffc58f, #fff1dc); }
.jca-claro .viaje__arte--torre { background: radial-gradient(70% 60% at 75% 25%, rgba(255, 255, 255, .8), transparent 60%), linear-gradient(180deg, #9cc7ff, #eaf3ff); }
.jca-claro .viaje__arte--esfera svg, .jca-claro .viaje__arte--torre svg { fill: #12345a; color: #12345a; }
.jca-claro .viaje__arte--tophat svg { fill: #3a2470; color: #3a2470; }
.jca-claro .viaje__arte--noria svg { fill: #6b2f12; color: #6b2f12; }
.jca-claro .viaje__plazas--completo { background: var(--jca-negro); color: #fff; }
.jca-claro .viaje__parques li { background: #e3f6ea; color: #17552f; }
.jca-claro .jca-sobre__logo img { box-shadow: 0 30px 60px -30px rgba(6, 40, 20, .55); }
.jca-claro .ficha__telegram { border-color: #b7e2f5; background: #f2fbff; }

/* sin animaciones: el avión se queda quieto en el cielo y las estrellas no titilan */
@media (prefers-reduced-motion: reduce) {
  .obj--avion { animation: none; left: 28%; }
  .escena__vista::before, .avion__baliza, .avion__estrobo { animation: none; }
}