/* ═══ 06 · Expediciones ═════════════════════════════════════════════════════ */

#expediciones {
  --exp-fauna: #041826;
  --exp-detalle: #5FE0D9;
  --exp-hud: 0px;
  position: relative;
  padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 8rem);
}
@media (min-width: 1024px) {
  #expediciones { --exp-hud: 110px; }
}

/* ─── Piezas comunes ───────────────────────────────────────────────────── */
#expediciones .exp-entrada { position: relative; z-index: 2; }
#expediciones .exp-titulo { margin-top: .5em; }
#expediciones .exp-entrada .lead { margin-top: 1.4rem; }
#expediciones [data-exp-pincel="escribir"] {
  font-family: var(--f-pincel, var(--f-serif));
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
#expediciones .exp-pincel { color: var(--naranja-luz, var(--naranja)); }
#expediciones .exp-pincel--chico { color: var(--turquesa-luz); }

/* la ruta: piscina → Pacífico → Caribe */
#expediciones .exp-ruta {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  width: min(100%, 340px);
}
#expediciones .exp-ruta__svg { display: block; width: 100%; height: auto; overflow: visible; }
#expediciones .exp-ruta__linea {
  fill: none;
  stroke: var(--turquesa-luz);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  opacity: .8;
}
#expediciones .exp-ruta__punto { fill: var(--espuma); }
#expediciones .exp-ruta__punto--casa { fill: var(--naranja); }
#expediciones .exp-ruta__nombres {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#expediciones .exp-pista-aviso { display: none; }

/* capítulos */
#expediciones .exp-cap { position: relative; }
#expediciones .exp-cap__fondo {
  font-family: var(--f-display);
  font-weight: 850;
  text-transform: uppercase;
  line-height: .8;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: rgba(234, 251, 251, .04);
  -webkit-text-stroke: 1.5px rgba(234, 251, 251, .3);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
#expediciones .exp-cap__texto { position: relative; z-index: 2; }
#expediciones .exp-cap__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 1.1rem;
}
#expediciones .exp-cap__meta span:first-child { color: var(--naranja-luz, var(--naranja)); }
#expediciones .exp-cap__meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 1.1rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .6;
}
#expediciones .exp-cap__bajada {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.3vw, 2.3rem);
  line-height: 1.1;
  color: var(--tinta);
  margin: .55rem 0 1rem;
}
#expediciones .exp-cap__bajada [data-exp-pincel] { font-size: 1.45em; vertical-align: -.08em; }
#expediciones .exp-cap__texto .texto { max-width: 30rem; }
#expediciones .exp-cap__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}

/* fotos y videos */
#expediciones .exp-pieza {
  position: relative;
  margin: 0;
  flex: none;
  box-shadow: 0 30px 60px -30px rgba(2, 10, 17, .7);
}
#expediciones .exp-pieza > img,
#expediciones .exp-pieza > video {
  transition: transform 1.4s var(--agua-ease);
}
@media (hover: hover) and (pointer: fine) {
  #expediciones .exp-pieza:hover > img,
  #expediciones .exp-pieza:hover > video { transform: scale(1.045); }
}
#expediciones .exp-pieza--alta,
#expediciones .exp-pieza--video,
#expediciones .exp-pieza--media,
#expediciones .exp-pieza--chica { aspect-ratio: 3 / 4; }
#expediciones .exp-pieza--ancha { aspect-ratio: 4 / 3; }
#expediciones .exp-pieza--panorama { aspect-ratio: 16 / 9; }
#expediciones .exp-pieza--vertical { aspect-ratio: 9 / 16; }
#expediciones .exp-pieza--cuadrada { aspect-ratio: 1; }
#expediciones .exp-pieza--noche { background: #000; }

#expediciones .exp-pie {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.4rem 1rem .85rem;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espuma);
  background: linear-gradient(180deg, transparent, rgba(2, 10, 17, .62));
  text-shadow: 0 1px 8px rgba(2, 10, 17, .6);
  pointer-events: none;
}
#expediciones .exp-pie span:last-child { color: var(--espuma-2); text-transform: none; letter-spacing: .04em; }

#expediciones .exp-cita {
  margin: 0;
  max-width: 22rem;
}
#expediciones .exp-cita p {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-2);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--tinta);
}
#expediciones .exp-cita .serif {
  text-transform: none;
  font-size: 1.1em;
  letter-spacing: -.01em;
  font-weight: 400;
}
#expediciones .exp-cita footer {
  margin-top: .9rem;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  color: var(--tinta-3);
}
#expediciones .exp-nota {
  max-width: 19rem;
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--tinta-2);
}
#expediciones .exp-nota span {
  display: block;
  margin-bottom: .3rem;
  color: var(--turquesa-luz);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* flora que se mece al pie de cada capítulo */
#expediciones .exp-flora {
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  color: var(--exp-fauna);
  --detalle: var(--exp-detalle);
  --brillo: #6BFFE6;
}
#expediciones .exp-flora svg {
  display: block;
  height: auto;
  transform-origin: 50% 100%;
  animation: exp-mecer 7s ease-in-out infinite alternate;
}
#expediciones .exp-alga--a { width: clamp(54px, 6vw, 92px); }
#expediciones .exp-alga--b { width: clamp(60px, 7vw, 110px); margin-left: -18px; animation-duration: 8.5s; animation-delay: -2s; }
#expediciones .exp-alga--c { width: clamp(34px, 3.4vw, 54px); margin-left: 6px; animation-duration: 9.5s; animation-delay: -4s; }
#expediciones .exp-coral--a { width: clamp(80px, 9vw, 140px); }
#expediciones .exp-coral--b { width: clamp(90px, 10vw, 160px); margin-left: -20px; animation: none; }
#expediciones .exp-coral--c { width: clamp(60px, 7vw, 110px); margin-left: -10px; animation-duration: 10s; }
@keyframes exp-mecer {
  from { transform: rotate(-3deg) skewX(2deg); }
  to   { transform: rotate(3deg) skewX(-2deg); }
}

/* interludio con delfines */
#expediciones .exp-rumbo { position: relative; }
#expediciones .exp-delfines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#expediciones .exp-delfin {
  position: absolute;
  height: auto;
  color: var(--exp-fauna);
  --detalle: var(--exp-detalle);
  --brillo: #6BFFE6;
  animation: exp-nado 3.6s ease-in-out infinite;
  will-change: transform;
}
#expediciones .exp-delfin--1 { width: clamp(150px, 17vw, 260px); top: 18%; left: 8%; }
#expediciones .exp-delfin--2 { width: clamp(110px, 12vw, 190px); top: 32%; left: 30%; animation-delay: -1.2s; opacity: .85; }
#expediciones .exp-delfin--3 { width: clamp(90px, 9vw, 150px); top: 12%; left: 46%; animation-delay: -2.3s; opacity: .7; filter: blur(1px); }
@keyframes exp-nado {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -10px; rotate: -3deg; }
}
#expediciones .exp-rumbo__texto { position: relative; z-index: 2; }
#expediciones .exp-rumbo__ruta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
#expediciones .exp-rumbo__ruta i {
  flex: 1;
  max-width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--tinta-3), var(--turquesa-luz));
}
#expediciones .exp-rumbo__frase {
  margin: 1rem 0;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-3);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--tinta);
  max-width: 22rem;
}
#expediciones .exp-rumbo__frase .serif {
  display: block;
  text-transform: none;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: -.01em;
  color: var(--turquesa-luz);
}

/* cierre */
#expediciones .exp-cierre { position: relative; z-index: 2; }
#expediciones .exp-cierre__koru {
  --espiral-tam: 64px;
  display: block;
  margin-bottom: 1.2rem;
  color: var(--naranja);
  animation: exp-girar 24s linear infinite;
}
#expediciones .exp-cierre .lead { margin-top: 1.2rem; }
#expediciones .exp-cierre__acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
@keyframes exp-girar { to { rotate: 360deg; } }

#expediciones .exp-rumbo-barra { display: none; }

/* ─── Vertical (móvil, tablet y movimiento reducido) ───────────────────── */
#expediciones:not(.exp--horizontal) .exp-entrada,
#expediciones:not(.exp--horizontal) .exp-cap__texto,
#expediciones:not(.exp--horizontal) .exp-rumbo__texto,
#expediciones:not(.exp--horizontal) .exp-cierre {
  margin-inline: auto;
  padding-inline: var(--margen);
  max-width: calc(var(--ancho-max) + 2 * var(--margen));
  padding-right: calc(var(--margen) + var(--exp-hud));
}
#expediciones:not(.exp--horizontal) .exp-cap {
  margin-top: clamp(5rem, 14vh, 9rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
#expediciones:not(.exp--horizontal) .exp-cap__fondo {
  font-size: clamp(5.5rem, 26vw, 17rem);
  padding-left: var(--margen);
  margin-bottom: -.32em;
  position: relative;
  z-index: 0;
}
#expediciones:not(.exp--horizontal) .exp-cap--sai .exp-cap__fondo { margin-bottom: -.5em; }
#expediciones:not(.exp--horizontal) .exp-pieza--panorama {
  width: calc(100% - 2 * var(--margen));
  max-width: 980px;
  margin: 0 auto 2.2rem;
  position: relative;
  z-index: 1;
}
#expediciones:not(.exp--horizontal) .exp-galeria {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2.2rem;
  padding: 6px var(--margen) 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
  position: relative;
  z-index: 2;
  outline-offset: -4px;
}
#expediciones:not(.exp--horizontal) .exp-galeria::-webkit-scrollbar { display: none; }
#expediciones:not(.exp--horizontal) .exp-col { display: contents; }
#expediciones:not(.exp--horizontal) .exp-galeria > *,
#expediciones:not(.exp--horizontal) .exp-col > * { scroll-snap-align: start; flex: none; }
#expediciones:not(.exp--horizontal) .exp-galeria .exp-pieza { height: min(58svh, 460px); width: auto; }
#expediciones:not(.exp--horizontal) .exp-galeria .exp-pieza--ancha,
#expediciones:not(.exp--horizontal) .exp-galeria .exp-pieza--cuadrada { height: min(42svh, 330px); }
#expediciones:not(.exp--horizontal) .exp-cita,
#expediciones:not(.exp--horizontal) .exp-nota {
  width: min(68vw, 300px);
  padding: 1.4rem 1.2rem;
  border-radius: var(--r-medio);
  border: 1px solid var(--linea);
  background: var(--vidrio-fondo);
}
#expediciones:not(.exp--horizontal) .exp-cita p { font-size: clamp(1.7rem, 7vw, 2.6rem); }
#expediciones:not(.exp--horizontal) .exp-flora {
  left: 0;
  bottom: -1rem;
  opacity: .9;
}
#expediciones:not(.exp--horizontal) .exp-flora--sai { left: auto; right: var(--exp-hud); }
#expediciones .exp-galeria-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  #expediciones:not(.exp--horizontal) .exp-galeria-nav {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding-inline: var(--margen);
    padding-right: calc(var(--margen) + var(--exp-hud));
    max-width: calc(var(--ancho-max) + 2 * var(--margen));
    margin: .4rem auto 0;
  }
}
#expediciones:not(.exp--horizontal) .exp-rumbo {
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(8rem, 22vh, 13rem);
}
#expediciones:not(.exp--horizontal) .exp-delfin--1 { top: 4%; left: 6%; }
#expediciones:not(.exp--horizontal) .exp-delfin--2 { top: 16%; left: 40%; }
#expediciones:not(.exp--horizontal) .exp-delfin--3 { top: 2%; left: 62%; }
#expediciones:not(.exp--horizontal) .exp-cierre {
  margin-top: clamp(5rem, 14vh, 9rem);
  text-align: left;
}

@media (min-width: 768px) {
  #expediciones:not(.exp--horizontal) .exp-cap__texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: end; }
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .exp-cap__meta,
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .titulo,
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .exp-cap__bajada { grid-column: 1; }
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .texto,
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .exp-cap__chips { grid-column: 2; }
  #expediciones:not(.exp--horizontal) .exp-cap__texto > .texto { grid-row: 1 / span 2; align-self: end; }
}
@media (max-width: 479px) {
  #expediciones .exp-cap__meta { gap: .3rem .8rem; }
  #expediciones .exp-cap__meta span + span::before { margin-right: .8rem; }
  #expediciones .exp-cierre .btn--grande { width: 100%; justify-content: center; }
}

/* ─── Horizontal (escritorio): la pista se fija y corre de lado ────────── */
#expediciones.exp--horizontal { padding-block: 0; }
#expediciones.exp--horizontal .exp-viaje {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
#expediciones.exp--horizontal .exp-pista {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  padding-left: var(--margen);
  will-change: transform;
}
#expediciones.exp--horizontal .exp-entrada {
  flex: none;
  width: min(42vw, 600px);
  margin-right: 9vw;
  padding-top: var(--nav-alto);
}
#expediciones.exp--horizontal .exp-pista-aviso {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#expediciones.exp--horizontal .exp-pista-aviso .ico { animation: exp-empuje 2.4s var(--agua-ease) infinite; }
@keyframes exp-empuje { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }

#expediciones.exp--horizontal .exp-cap {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4.5vw;
  height: 100%;
  padding: var(--nav-alto) 6vw 0 3vw;
}
#expediciones.exp--horizontal .exp-cap__fondo {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.42em;
  z-index: 0;
  font-size: min(44vh, 30vw);
}
#expediciones.exp--horizontal .exp-cap--sai .exp-cap__fondo { top: 66%; }
#expediciones.exp--horizontal .exp-cap__texto { flex: none; width: min(35vw, 510px); }
#expediciones.exp--horizontal .exp-cap__texto .titulo { font-size: clamp(2.2rem, 3.7vw, 3.9rem); }
#expediciones.exp--horizontal .exp-galeria {
  display: flex;
  align-items: center;
  gap: 4vw;
  height: 100%;
}
#expediciones.exp--horizontal .exp-col {
  display: flex;
  flex-direction: column;
  gap: 4vh;
}
#expediciones.exp--horizontal .exp-col--baja { margin-top: 20vh; }
#expediciones.exp--horizontal .exp-col--alta { margin-top: -16vh; }
#expediciones.exp--horizontal .exp-pieza--alta { height: 68vh; }
#expediciones.exp--horizontal .exp-pieza--video { height: 50vh; }
#expediciones.exp--horizontal .exp-pieza--ancha { height: 38vh; }
#expediciones.exp--horizontal .exp-pieza--media { height: 56vh; margin-top: 8vh; }
#expediciones.exp--horizontal .exp-pieza--chica { height: 38vh; margin-top: -26vh; }
#expediciones.exp--horizontal .exp-pieza--panorama { height: 64vh; margin-top: -6vh; }
#expediciones.exp--horizontal .exp-pieza--vertical { height: 70vh; }
#expediciones.exp--horizontal .exp-pieza--cuadrada { height: 38vh; }
#expediciones.exp--horizontal .exp-galeria .exp-pieza { width: auto; }
#expediciones.exp--horizontal .exp-cap--sai .exp-cap__texto {
  width: min(38vw, 540px);
  margin-left: -16vw;
  margin-top: 12vh;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  border-radius: var(--r-panel);
  background: rgba(4, 24, 38, .62);
  border: 1px solid rgba(234, 251, 251, .14);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--sombra-2, 0 30px 60px -30px rgba(2, 10, 17, .7));
}
#expediciones.exp--horizontal .exp-flora { left: 2vw; }
#expediciones.exp--horizontal .exp-flora--sai { left: auto; right: 10vw; }

#expediciones.exp--horizontal .exp-rumbo {
  flex: none;
  width: 72vw;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 4vw 22vh;
}
#expediciones.exp--horizontal .exp-rumbo__texto { margin-left: 18vw; }

#expediciones.exp--horizontal .exp-cierre {
  flex: none;
  width: min(44vw, 620px);
  margin: 0 calc(12vw + var(--exp-hud)) 0 4vw;
  padding-top: var(--nav-alto);
}

#expediciones.exp--horizontal .exp-rumbo-barra {
  position: absolute;
  left: var(--margen);
  bottom: clamp(18px, 3.4vh, 34px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(40vw, 520px);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-shadow: 0 1px 10px var(--sombra-texto, rgba(2, 10, 17, .6));
}
#expediciones.exp--horizontal .exp-rumbo-barra__riel {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(234, 251, 251, .22);
}
#expediciones.exp--horizontal .exp-rumbo-barra__riel i {
  position: absolute;
  inset: 0;
  background: var(--naranja);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
#expediciones.exp--horizontal .exp-rumbo-barra__riel b {
  position: absolute;
  left: -4px; top: -4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 4px rgba(250, 129, 23, .2), 0 0 18px rgba(250, 129, 23, .7);
}

@media (prefers-reduced-motion: reduce) {
  #expediciones .exp-flora svg,
  #expediciones .exp-delfin,
  #expediciones .exp-cierre__koru,
  #expediciones .exp-pista-aviso .ico { animation: none; }
}