/* Be Water — los efectos de la general que también usan Xperience y el Surf Shop:
   portada con fotos que se turnan, viajes al mar con su tira de fotos, el camino que avanza de costado,
   aparecer al bajar (data-revela), botones que se llenan de agua y bordes con forma de ola.

   Orden de las hojas: base.css → familia.css → efectos.css → la del sitio. */

/* ---------- Portada: videos de dron detrás del logo, por escenas ----------
   Arranca con la imagen fija del primer video; script.js arma encima cada escena y la funde con la anterior.
   Una escena es un video horizontal a pantalla completa (entra con un leve zoom) o varios verticales
   uno al lado del otro (entran de a uno, subiendo como el agua). En celular, uno solo por vez. */

.inicio--collage { overflow: hidden; }
.collage { position: absolute; inset: 0; z-index: 0; }
.inicio > .collage { animation: none; z-index: 0; }
.inicio--collage > :not(.collage) { position: relative; z-index: 1; }
.collage img, .collage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escena { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; opacity: 0; transition: opacity 1.2s ease; }
.escena.se-ve { opacity: 1; }
.escena__panel { position: relative; overflow: hidden; }
.escena--ancha.se-ve video { animation: escena-zoom 9s ease-out both; }
@keyframes escena-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.escena--altas { opacity: 1; transition: none; }
.escena--altas .escena__panel { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.6,0,.2,1) calc(var(--i) * .22s); }
.escena--altas.se-ve .escena__panel { clip-path: inset(0); }
.collage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,64,.78), rgba(29,43,87,.55) 45%, rgba(20,30,64,.88)); }

/* ---------- Surf & SUP trips: collage de fotos del mar ---------- */

.viajes__grilla { display: grid; gap: 3rem; align-items: center; max-width: var(--ancho); margin: 0 auto; }
.viajes__fotos { position: relative; min-height: 27rem; }
.viajes__foto { position: absolute; object-fit: cover; }
.viajes__foto--grande { left: 0; top: 0; width: 78%; height: 86%; }
.viajes__foto--a { right: 0; top: 6%; width: 40%; aspect-ratio: 3 / 4; border: 6px solid var(--crema); rotate: 4deg; }
.viajes__foto--b { left: 10%; bottom: 0; width: 34%; aspect-ratio: 3 / 4; border: 6px solid var(--crema); rotate: -5deg; }
.viajes__texto { display: grid; gap: 1rem; justify-items: start; }
.viajes__texto .dibujo { color: var(--crema); width: 5.5rem; height: 5.5rem; }
.viajes__texto p:not(.rotulo) { max-width: 28rem; }
.viajes__incluye { display: flex; flex-wrap: wrap; gap: .45rem; }
.viajes__incluye li { font-size: .8rem; font-weight: 600; padding: .45rem .85rem .4rem; border: 1.5px solid rgba(250,248,243,.55); border-radius: 9999px; }
.viajes .btn--lleno { margin-top: .4rem; }
@media (min-width: 900px) {
  .viajes__grilla { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; }
  .viajes__fotos { min-height: 36rem; }
}

/* ---------- Historia: el camino que avanza de costado ----------
   Sin JS o con "reducir movimiento" es una lista hacia abajo. Con JS (clase camino--js),
   la sección se estira y su contenido queda fijo mientras la pista se corre hacia la izquierda. */

.camino { background: var(--crema); padding: var(--aire) var(--borde); }
.camino__rotulo { text-align: center; margin-bottom: 2.5rem; }
.camino__pista { list-style: none; padding: 0; margin: 0 auto; max-width: 40rem; display: grid; gap: 3rem; position: relative; }
.parada { display: grid; gap: .6rem; align-content: start; }
.parada__foto { aspect-ratio: 4 / 5; margin-bottom: .4rem; }
.parada__cuando { font-family: var(--titulos); font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--cafe); }
.parada h3 { font-family: var(--titulos); font-weight: 900; font-size: 1.6rem; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.parada--fin { align-content: center; justify-items: start; }

.camino--js { padding: 0; }
.camino--js .camino__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; align-content: center; gap: 2rem; padding: 2rem 0;
}
.camino--js .camino__rotulo { margin: 0; }
.camino--js .camino__pista {
  display: flex; gap: clamp(2rem, 6vw, 5rem); max-width: none; margin: 0;
  padding: 0 calc(50vw - min(36vw, 13rem)); width: max-content; will-change: transform;
}
/* la línea punteada que une las paradas, como en el flyer */
.camino--js .camino__pista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed rgba(29,43,87,.35); z-index: 0;
}
.camino--js .parada { position: relative; z-index: 1; width: min(72vw, 26rem); background: var(--crema); padding: 0 0 1rem; }
.camino--js .parada__foto { aspect-ratio: 4 / 3; }
@media (max-height: 700px) { .camino--js .parada__foto { aspect-ratio: 16 / 9; } }
.camino__ayuda { opacity: .8; }

/* la pista del camino no ensancha la grilla */
.camino--js .camino__fijo { grid-template-columns: minmax(0, 1fr); }
.camino--js .camino__pista { justify-self: start; }

/* =====================================================================
   Animaciones (todas se apagan con "reducir movimiento", ver base.css)
   ===================================================================== */

/* ---------- Aparecer al bajar: data-revela (sube), ="izq" (entra de costado), ="zoom" (crece) ---------- */
.js [data-revela] {
  opacity: 0; transform: translateY(46px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.js [data-revela="izq"] { transform: translateX(-60px); }
.js [data-revela="zoom"] { transform: scale(.9); }
.js [data-revela].visto { opacity: 1; transform: none; }

@keyframes ola-corre { to { -webkit-mask-position: 90px 0, 0 13px; mask-position: 90px 0, 0 13px; } }
:root { --ola-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Cpath d='M0 7q11-7 22.5 0t22.5 0 22.5 0 22.5 0V14H0z'/%3E%3C/svg%3E"); }

/* ---------- Bordes entre secciones con forma de ola, en vez de un corte recto ---------- */
.con-ola { position: relative; }
.con-ola::before {
  content: ""; position: absolute; left: 0; right: 0; top: -39px; height: 40px; z-index: 2; pointer-events: none;
  background: var(--color-ola, var(--fondo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='40'%3E%3Cpath d='M0 22C120 6 240 6 360 22S600 38 720 22V40H0z'/%3E%3C/svg%3E") 0 0 / 720px 40px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='40'%3E%3Cpath d='M0 22C120 6 240 6 360 22S600 38 720 22V40H0z'/%3E%3C/svg%3E") 0 0 / 720px 40px repeat-x;
  animation: ola-borde 18s linear infinite;
}
@keyframes ola-borde { to { -webkit-mask-position: 720px 0; mask-position: 720px 0; } }

/* ---------- Surf & SUP trips: una foto más y la tira de fotos que corre ---------- */
.viajes__foto--c { right: 20%; bottom: -2%; width: 30%; aspect-ratio: 1; border: 6px solid var(--crema); rotate: 7deg; }
.cinta { margin: var(--aire) calc(var(--borde) * -1) 0; overflow: hidden; }
.cinta__pista { display: flex; gap: 1rem; width: max-content; animation: cinta 50s linear infinite; }
.cinta img { width: 15rem; height: 11rem; object-fit: cover; border: 5px solid var(--crema); }
.cinta img:nth-child(odd) { rotate: -2deg; }
.cinta img:nth-child(even) { rotate: 2deg; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* la tira de fotos ocupa todo el ancho y no se corta arriba ni abajo */
.viajes > .cinta { max-width: none; margin: var(--aire) calc(var(--borde) * -1) 0; padding: 1.2rem 0; }

/* ---------- Trips: lo que incluye en tarjetitas, botón llamativo y tira sin cortes ---------- */
.viajes__incluye { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; width: 100%; max-width: 30rem; margin: .4rem 0; }
.viajes__incluye li {
  display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-radius: .8rem;
  background: rgba(250,248,243,.07); border: 1px solid rgba(250,248,243,.18); font-size: .9rem; font-weight: 600;
  border-color: rgba(250,248,243,.18); transition: background-color .3s, transform .3s;
}
.viajes__incluye li:hover { background: rgba(169,207,240,.16); transform: translateY(-2px); }
.viajes__incluye .ico { width: 1.6rem; height: 1.6rem; color: var(--celeste); stroke-width: 1.6; }
@media (min-width: 600px) { .viajes__incluye { grid-template-columns: repeat(3, 1fr); } .viajes__incluye--dos { grid-template-columns: repeat(2, 1fr); } }

.viajes__boton {
  margin-top: .8rem; display: inline-flex; align-items: center; gap: 1rem; padding: 1.15rem 2rem 1.1rem;
  border-radius: var(--r-btn); background: var(--celeste); color: var(--marino); text-decoration: none;
  font: 800 .9rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .22s;
}
.viajes__boton i { font-style: normal; font-size: 1.2rem; }
.viajes__boton:hover, .viajes__boton:focus-visible { background: var(--crema); }
.viajes__boton:active { transform: translateY(1px); }

/* la tira: margen a la derecha de cada foto (en vez de gap) para que el corrimiento del 50% calce justo */
.cinta__pista { gap: 0; }
.cinta img { margin-right: 1rem; }
/* la foto chica de abajo se corre para no tapar a la gente del Mega SUP */
.viajes__foto--b { left: -3%; bottom: -10%; width: 27%; }