/* Be Water Xperience: portadas celestes, opciones de clases, lo que incluye,
   quiz, "ya fuimos", venta cruzada y preguntas. Al final, el inicio (portada con fotos y clima,
   todas las actividades, el trip y el cierre) y los colores de agua.
   Las animaciones de la general están en efectos.css. */

/* ---------- Portada de las páginas internas: agua ---------- */

.portada--agua { background: var(--celeste); color: var(--marino); --acento: var(--marino); }

/* ---------- Lo que incluye: ícono + texto, en grilla ---------- */

.incluye { display: grid; gap: 1px; margin-top: 3.5rem; max-width: 62rem; background: rgba(250,248,243,.22); border: 1px solid rgba(250,248,243,.22); }
.incluye li { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.3rem; background: var(--fondo); font-weight: 600; }
.incluye .ico { width: 2rem; height: 2rem; color: var(--celeste); stroke-width: 1.5; }
@media (min-width: 600px) { .incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .incluye { grid-template-columns: repeat(4, 1fr); } .incluye li { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.4rem; } }

/* versión chica, dentro de un texto (jornadas para escuelas) */
.incluye--chica { margin: .4rem 0 .6rem; width: 100%; max-width: 24rem; grid-template-columns: 1fr 1fr; background: rgba(29,43,87,.2); border-color: rgba(29,43,87,.2); }
.incluye--chica li { padding: .8rem .9rem; flex-direction: row; font-size: .92rem; text-align: left; }
.incluye--chica .ico { width: 1.5rem; height: 1.5rem; color: var(--cafe); }
@media (min-width: 1000px) { .incluye--chica { grid-template-columns: 1fr 1fr; } .incluye--chica li { flex-direction: row; align-items: center; padding: .8rem .9rem; } }

/* ---------- ¿Qué incluye tu surf trip?: tarjetas crema sobre el azul, la experiencia en celeste ---------- */
.trip-incluye { display: grid; gap: .9rem; max-width: 62rem; margin: 3rem auto 0; list-style: none; padding: 0; }
.trip-incluye > li { border-radius: var(--curva); }
.trip-incluye__item { display: grid; justify-items: center; align-content: start; text-align: center; gap: .5rem; padding: 1.5rem 1.2rem 1.6rem; background: var(--crema); color: var(--marino); }
.trip-incluye__item strong, .trip-incluye__experiencia strong {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}
.trip-incluye__item span:not(.trip-incluye__ico) { font-weight: 600; color: var(--cafe-osc); }
.trip-incluye__ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--celeste); color: var(--marino); margin-bottom: .5rem; }
.trip-incluye__ico .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; }
.trip-incluye__experiencia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.6rem 1.5rem; background: var(--celeste); color: var(--marino); }
.trip-incluye__experiencia .trip-incluye__ico { background: var(--marino); color: var(--celeste); margin: 0; flex: none; }
.trip-incluye__experiencia div { display: grid; gap: .35rem; }
.trip-incluye__experiencia span:not(.trip-incluye__ico) { font-size: 1.1rem; font-weight: 600; }
.trip-incluye__aparte {
  max-width: 62rem; margin: 1.2rem auto 0; padding: 1rem 1.3rem; text-align: center;
  border: 1.5px dashed rgba(250,248,243,.5); border-radius: var(--curva);
}
.trip-incluye__aparte b { color: var(--celeste); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-right: .4rem; }
.trip-incluye__boton { margin-top: 1.8rem; display: flex; justify-content: center; }
@media (min-width: 600px) { .trip-incluye { grid-template-columns: repeat(2, 1fr); } .trip-incluye__experiencia { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .trip-incluye { grid-template-columns: repeat(4, 1fr); }
  .trip-incluye__experiencia { flex-direction: row; justify-content: center; text-align: left; padding: 2rem 2.2rem; }
  .trip-incluye__experiencia strong { font-size: 2.4rem; }
}

/* ---------- Quiz ---------- */

.quiz { margin-top: 3rem; max-width: 46rem; }
.quiz__form { display: grid; gap: 2rem; }
.quiz__form[hidden] { display: none; }
.quiz fieldset { border: 0; margin: 0; padding: 0; }
.quiz legend { font-family: var(--titulos); font-weight: 900; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem; }
.quiz__ops { display: flex; flex-wrap: wrap; gap: .6rem; }
.quiz__ops label { cursor: pointer; }
.quiz__ops input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz__ops span {
  display: inline-block; padding: .85rem 1.3rem .8rem; border: 1.5px solid var(--marino); border-radius: var(--r-btn);
  font-size: .9rem; font-weight: 600; transition: background-color .2s, color .2s;
}
.quiz__ops label:hover span { background: rgba(29,43,87,.08); }
.quiz__ops input:checked + span { background: var(--marino); color: var(--crema); }
.quiz__ops input:focus-visible + span { outline: 3px solid var(--marino); outline-offset: 3px; }

.quiz__resultados { display: grid; gap: 1rem; margin-top: 1.2rem; }
.quiz__resultados li { display: grid; gap: .5rem; padding: 1.6rem 1.5rem 1.8rem; background: var(--marino); color: var(--crema); }
.quiz__resultados li .dato { color: var(--celeste); }
.quiz__resultados h3 { font-family: var(--titulos); font-weight: 900; font-size: 2.2rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.quiz__resultados .botones { justify-content: flex-start; margin-top: .6rem; }
.quiz__resultados .btn--marino { color: var(--crema); }
.quiz__resultados :focus-visible { outline-color: var(--celeste); }

/* con JS: solo se ve el resultado que toca, y nada hasta contestar las dos */
.quiz--js .quiz__sinjs { display: none; }
.quiz--js .quiz__resultados { margin-top: 2rem; }
.quiz--js .quiz__resultados li { display: none; }
.quiz--js .quiz__resultados li.es-resultado { display: grid; animation: subir .5s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Venta cruzada con el Surf Shop ---------- */

.cruzada { display: grid; gap: 2rem; align-items: center; max-width: 60rem; padding: 2rem; border: 1.5px solid var(--marino); }
.cruzada__foto { aspect-ratio: 1; }
.cruzada__texto { display: grid; justify-items: start; gap: .9rem; }
.cruzada__texto .btn { margin-top: .4rem; }
@media (min-width: 800px) { .cruzada { grid-template-columns: 18rem 1fr; gap: 2.5rem; padding: 2.2rem; } }

/* ---------- Preguntas frecuentes ---------- */

.faq { margin-top: 3rem; max-width: 44rem; border-top: 1.5px solid var(--marino); }
.faq details { border-bottom: 1px solid rgba(29,43,87,.25); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--datos); color: var(--cafe-osc); transition: rotate .3s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 2rem 1.3rem 0; max-width: 36rem; }
.faq :focus-visible { outline-color: var(--marino); }

/* ---------- Ajustes de celular y del talón ---------- */
.pasaje__talon .btn { white-space: nowrap; padding-inline: 1.4rem; }

/* ---------- El clima: una tarjeta de vidrio con su ícono animado ---------- */

.inicio--collage > .clima { position: absolute; }
.clima {
  left: 50%; translate: -50% 0; bottom: 1.2rem; z-index: 2;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; row-gap: .5rem;
  padding: .85rem 1.2rem .85rem .95rem; border-radius: 1.2rem; text-align: left; color: var(--crema);
  background: rgba(250,248,243,.12); border: 1px solid rgba(250,248,243,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: clima-entra .9s cubic-bezier(.2,.7,.2,1) both;
}
.clima[hidden] { display: none; }
/* en celular la portada queda limpia: el clima solo se ve en compu (pedido del 30/10/2026) */
@media (max-width: 899px) { .portada-xp > .clima { display: none; } }
@keyframes clima-entra { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.clima__icono svg { display: block; width: 3.4rem; height: 3.4rem; overflow: visible; }
.clima__texto { display: grid; line-height: 1.1; }
.clima__donde { font: 600 .64rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: .2rem; }
.clima__temp { font: 900 2.3rem/1 var(--titulos); }
.clima__cielo { font-size: .86rem; }
.clima__viento { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; font-size: .78rem; padding-top: .5rem; border-top: 1px solid rgba(250,248,243,.25); }
.clima__viento svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; rotate: var(--rumbo, 0deg); transition: rotate 1.2s cubic-bezier(.2,.7,.2,1); }
@media (min-width: 900px) { .clima { left: var(--borde); translate: none; bottom: 1.6rem; } }

/* el dibujo del ícono (lo arma script.js) */
.cl-sol { fill: #FFD66B; }
.cl-rayos { stroke: #FFD66B; stroke-width: 3; stroke-linecap: round; transform-origin: 32px 26px; animation: girar 14s linear infinite; }
.cl-nube { fill: var(--crema); animation: nube 4s ease-in-out infinite alternate; }
.cl-nube--atras { fill: rgba(250,248,243,.55); animation-duration: 5s; }
.cl-gota { stroke: var(--celeste); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 14; animation: gota 1s linear infinite; }
.cl-rayo { fill: #FFD66B; animation: rayo 2.4s steps(1) infinite; }
@keyframes nube { to { transform: translateX(4px); } }
@keyframes gota { to { stroke-dashoffset: -19; } }
@keyframes rayo { 0%, 70% { opacity: 1; } 75% { opacity: 0; } 80% { opacity: 1; } 85% { opacity: 0; } }

/* ---------- Cómo está el río hoy: debajo del clima, si conviene salir a remar (lo escribe script.js) ---------- */
.clima__remar { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 700; }
.clima__remar[hidden] { display: none; }
.clima__remar::before {
  content: ""; flex: none; width: .65rem; height: .65rem; border-radius: 50%;
  background: #5BE38E; box-shadow: 0 0 0 0 rgba(91,227,142,.6); animation: latido-remar 2s infinite;
}
.clima__remar[data-nivel="ojo"]::before { background: #FFD66B; box-shadow: 0 0 0 0 rgba(255,214,107,.6); }
@keyframes latido-remar { 70%, 100% { box-shadow: 0 0 0 .5rem rgba(91,227,142,0); } }

/* ---------- Inicio: portada propia de Xperience (distinta de las tres franjas de la general) ----------
   En compu: azul a la izquierda con el logo, y a la derecha las fotos de acción, de a una, cortadas en
   diagonal con una línea celeste. En celular: las fotos de fondo, a pantalla completa. */
.portada-xp { overflow: hidden; }
.portada-xp__fotos { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.portada-xp__fotos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  animation: portada-xp calc(var(--n) * 5s) linear infinite;
  animation-delay: calc(var(--i) * 5s - var(--n) * 5s);
}
.portada-xp__fotos img:first-child { opacity: 1; } /* la que queda si no hay animación */
@keyframes portada-xp {
  0% { opacity: 0; transform: scale(1.12) translateX(2%); }
  4% { opacity: 1; }
  16.6% { opacity: 1; }
  21% { opacity: 0; transform: scale(1) translateX(0); }
  100% { opacity: 0; }
}
/* celular: un velo azul para que se lea el logo */
.portada-xp__fotos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,64,.75), rgba(29,43,87,.5) 45%, rgba(20,30,64,.9)); }
.portada-xp__franja { display: none; }
.portada-xp > :not(.portada-xp__fotos):not(.portada-xp__franja):not(.clima) { position: relative; z-index: 1; animation: none; }
.portada-xp__texto { display: grid; justify-items: center; }
.sitio-experiencia .portada-xp { padding-bottom: 12rem; }
.portada-xp > .clima { position: absolute; }

@media (min-width: 900px) {
  .sitio-experiencia .portada-xp { align-items: flex-start; padding: 5.5rem var(--borde) 11rem; }
  .portada-xp__fotos { left: 40%; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
  /* en compu las fotos se ven con sus colores; solo una sombra arriba para que se lea el menú */
  .portada-xp__fotos::after { background: linear-gradient(180deg, rgba(20,30,64,.55), rgba(20,30,64,0) 26%); }
  .portada-xp__franja {
    display: block; position: absolute; top: 0; bottom: 0; left: 40%; right: 0; z-index: 1;
    background: var(--celeste); clip-path: polygon(9% 0, 10% 0, 1% 100%, 0 100%);
  }
  .portada-xp__texto { justify-items: start; text-align: left; width: min(38%, 32rem); }
  .portada-xp .inicio__logo--xp { width: min(100%, 28rem); }
  .portada-xp .inicio__linea { margin-inline: 0; }
  .portada-xp .botones { justify-content: flex-start; }
}

/* ---------- Agua: secciones celestes, para que Xperience se sienta fresca ---------- */
.seccion--agua, .actividades { --fondo: var(--celeste); --acento: var(--marino); color: var(--marino); }
.seccion--agua :focus-visible, .actividades :focus-visible { outline-color: var(--marino); }

/* ---------- Elegí cómo vivir el agua: atajos y un bloque grande por actividad ---------- */
.actividades .titulo--grande { max-width: 12em; }
.atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.5rem; }
.atajos a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.25rem .65rem;
  border-radius: var(--r-btn); background: var(--crema); color: var(--marino); text-decoration: none;
  font-size: .9rem; font-weight: 700; transition: background-color .22s, color .22s;
}
.atajos a:hover { background: var(--marino); color: var(--crema); }
.atajos .ico { width: 1.35rem; height: 1.35rem; }

.actividades__lista { display: grid; gap: clamp(4rem, 9vw, 7.5rem); margin-top: clamp(3.5rem, 7vw, 6rem); }
.actividad { display: grid; align-items: center; scroll-margin-top: 1.5rem; }
.actividad__foto { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.actividad__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s cubic-bezier(.2,.7,.2,1); }
.actividad:hover .actividad__foto img { scale: 1.05; }
.actividad__texto {
  position: relative; display: grid; justify-items: start; gap: .9rem;
  margin: -3.5rem .9rem 0; padding: 2.2rem 1.5rem 2.3rem; background: var(--crema);
}
/* el número asoma por arriba de la tarjeta, sin pisar el título */
.actividad__n { position: absolute; top: 0; right: 1.2rem; translate: 0 -58%; font: 900 clamp(4rem, 9vw, 6.5rem)/1 var(--titulos); color: var(--marino); }
.actividad__para { display: inline-flex; align-items: center; gap: .5rem; position: relative; color: var(--cafe-osc); }
.actividad__para .ico { width: 1.5rem; height: 1.5rem; color: var(--marino); }
.actividad__nombre {
  position: relative; font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.7rem, 7vw, 4.3rem); line-height: .92; letter-spacing: .03em;
}
.actividad__texto > p:not([class]) { max-width: 30rem; font-size: 1.08rem; }
.actividad__etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; }
.actividad__etiquetas li { font-size: .82rem; font-weight: 600; padding: .5rem .9rem .45rem; border-radius: 9999px; background: rgba(169,207,240,.5); }
.actividad__botones { display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; margin-top: .6rem; }
.actividad__botones .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.3rem; padding: 1.05rem 1.7rem 1rem; font-size: .86rem; }
@media (max-width: 599px) { .actividad__botones .btn { flex: 1 1 100%; } }
@media (min-width: 900px) {
  .actividad { grid-template-columns: 7fr 5fr; }
  .actividad__foto { grid-column: 1; grid-row: 1; aspect-ratio: 1; }
  .actividad__texto { grid-column: 2; grid-row: 1; margin: 0 0 0 -5rem; padding: 3rem 2.8rem 3.2rem; }
  .actividad:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .actividad:nth-child(even) .actividad__foto { grid-column: 2; }
  .actividad:nth-child(even) .actividad__texto { grid-column: 1; margin: 0 -5rem 0 0; }
}

/* ---------- La próxima salida al mar (los estilos de "Del río al mar" están en efectos.css) ---------- */
.viajes__destino { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 10vw, 6rem); line-height: .9; letter-spacing: .02em; }

/* ---------- Cierre del inicio: grande, con WhatsApp e Instagram ---------- */
.llamado .apertura { gap: 1.6rem; }
.llamado__botones { margin-top: .6rem; }
.llamado .btn, .llamado .red { min-height: 3.4rem; padding: 1rem 1.7rem .95rem; font-size: .86rem; }
.llamado .red__ico { width: 1.45rem; height: 1.45rem; }

/* ---------- Trips: los pasos avanzan de costado, sobre crema para despegarse de la portada celeste
   (el camino está en efectos.css) ---------- */
.sitio-experiencia .camino { --fondo: var(--crema); --acento: var(--marino); background: var(--fondo); }
.sitio-experiencia .camino--js .parada { background: var(--crema); }
.sitio-experiencia .parada--fin { justify-items: center; text-align: center; }
.sitio-experiencia .parada__cuando { color: #4F8FC9; } /* celeste más oscuro, que se lea sobre crema */
.sitio-experiencia .camino--js .camino__pista::before { border-top-color: rgba(29,43,87,.45); }
.sitio-experiencia .camino :focus-visible { outline-color: var(--marino); }

/* =====================================================================
   Segunda vuelta de Xperience
   ===================================================================== */

/* ---------- Títulos grandes y un comentario corto debajo, en todas las secciones ---------- */
.sitio-experiencia .titulo { font-size: clamp(2.9rem, 8.5vw, 6.2rem); line-height: .95; max-width: 13em; }
.sitio-experiencia .titulo--chica { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
.sitio-experiencia .titulo--grande { font-size: clamp(3.4rem, 13vw, 8rem); }
.sitio-experiencia .portada .titulo { font-size: clamp(3.2rem, 10vw, 7.2rem); }
.sitio-experiencia .apertura { gap: 1rem; }
.sitio-experiencia .apertura__texto { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 34rem; opacity: .85; }
.sitio-experiencia .par__texto > p:not(.rotulo) { font-size: 1.1rem; }

/* ---------- Inicio: los surf trips con otro armado que en la general ----------
   Tira de fotos arriba (corre al revés, fotos derechas y redondeadas), texto a la izquierda y fotos a la derecha. */
.viajes--xp > .cinta { margin: 0 calc(var(--borde) * -1) var(--aire); padding: .5rem 0; }
.viajes--xp .cinta__pista { animation-direction: reverse; }
.viajes--xp .cinta img { rotate: 0deg; border: 0; border-radius: 1rem; width: 13rem; height: 9rem; }
.viajes__donde { opacity: .8; }
.viajes__grilla--xp .viajes__texto { order: -1; }
.viajes__grilla--xp .viajes__foto--grande { left: auto; right: 0; top: 4%; width: 64%; height: 92%; border-radius: 1.2rem; }
.viajes__grilla--xp .viajes__foto--a { left: 0; right: auto; top: 0; width: 38%; rotate: -6deg; }
.viajes__grilla--xp .viajes__foto--b { left: 8%; bottom: 0; width: 33%; rotate: 5deg; }
.viajes__grilla--xp .viajes__foto--c { right: -2%; bottom: -6%; width: 27%; rotate: -4deg; }
@media (min-width: 900px) { .viajes__grilla--xp { grid-template-columns: 1fr 1.15fr; } }

/* ---------- Clases: las dos formas, en tarjetas grandes con foto (una azul y una celeste) ---------- */
.formas { display: grid; gap: 1.5rem; margin-top: 3.5rem; max-width: 66rem; }
.forma {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 1.4rem;
  background: var(--marino); color: var(--crema); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, opacity .9s;
}
.forma--2 { background: var(--celeste); color: var(--marino); }
.js .forma.visto:hover, .forma:hover { transform: translateY(-6px); box-shadow: 0 1.4rem 2.6rem -1.2rem rgba(20,30,64,.45); }
.forma__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.forma__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s cubic-bezier(.2,.7,.2,1); }
.forma:hover .forma__foto img { scale: 1.06; }
.forma__insignia {
  position: absolute; left: 1rem; top: 1rem; padding: .55rem .95rem .5rem; border-radius: 9999px;
  background: var(--crema); color: var(--marino); font: 700 .78rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase;
}
.forma__cuerpo { display: grid; align-content: start; justify-items: start; gap: 1rem; padding: 1.8rem 1.6rem 2rem; }
.forma__nombre { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 4.2rem); line-height: .92; letter-spacing: .02em; }
.forma__cuerpo > p:not(.dato) { font-size: 1.08rem; }
.forma__puntos { display: grid; gap: .55rem; }
.forma__puntos li { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.forma__puntos li::before {
  content: "✓"; display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--celeste); color: var(--marino); font-size: .8rem; font-weight: 800;
}
.forma--2 .forma__puntos li::before { background: var(--marino); color: var(--crema); }
.forma__donde { opacity: .8; }
.forma .btn { width: 100%; min-height: 3.4rem; font-size: .9rem; margin-top: .4rem; }
.forma--1 :focus-visible { outline-color: var(--celeste); }
@media (min-width: 800px) { .formas { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* ---------- Collage de fotos (clases y "ya fuimos"): la primera grande, como en la general ---------- */
.collage-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; max-width: var(--ancho); margin: 3rem auto 0; }
.collage-fotos li { aspect-ratio: 1; overflow: hidden; }
.collage-fotos li:first-child { grid-column: span 2; grid-row: span 2; }
.collage-fotos img, .collage-fotos video { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.collage-fotos li:hover img, .collage-fotos li:hover video { scale: 1.06; }
@media (min-width: 900px) { .collage-fotos { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* ---------- Kids: ¿quiénes los cuidan? Fotos de los chicos con los profes, y el equipo ---------- */
.cuidan__grilla { display: grid; gap: 3rem; align-items: center; max-width: var(--ancho); margin: 0 auto; }
.cuidan__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding-bottom: 2rem; }
.cuidan__fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; }
.cuidan__fotos img:nth-child(even) { translate: 0 2rem; }
.cuidan__texto { display: grid; gap: 1.1rem; justify-items: start; }
.cuidan__texto > p:not(.rotulo) { max-width: 30rem; font-size: 1.1rem; }
.cuidan__puntos { display: grid; gap: .6rem; width: 100%; max-width: 26rem; }
.cuidan__puntos li { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: .8rem; background: rgba(169,207,240,.4); font-weight: 700; }
.cuidan__puntos .ico { width: 1.8rem; height: 1.8rem; color: var(--marino); }
.cuidan__equipo { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: .4rem; }
.cuidan__equipo li { display: flex; align-items: center; gap: .8rem; }
.cuidan__equipo img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid var(--celeste); }
.cuidan__equipo span { display: grid; font-size: .9rem; line-height: 1.3; }
.cuidan__equipo b { font-family: var(--titulos); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 900px) { .cuidan__grilla { grid-template-columns: 1.1fr 1fr; gap: 4.5rem; } }

/* ---------- Contacto: una página chica, foto y una tarjeta con todos los datos ---------- */
.contacto { padding-block: clamp(3rem, 6vw, 4.5rem); }
.contacto__grilla { display: grid; gap: 2rem; align-items: center; max-width: 68rem; margin: 0 auto; }
.contacto__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.4rem; }
.contacto__tarjeta { display: grid; gap: 1.1rem; justify-items: start; }
.contacto__tarjeta > p { font-size: 1.1rem; max-width: 30rem; }
.contacto__datos { display: grid; width: 100%; margin: .8rem 0 0; border-top: 1.5px solid var(--marino); }
.contacto__datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid rgba(29,43,87,.2); }
.contacto__datos dt { font: 500 .78rem/1.7 var(--datos); text-transform: uppercase; color: var(--cafe-osc); }
.contacto__datos dd { margin: 0; }
.contacto__datos a { font-weight: 700; }
.contacto__datos a i { font-style: normal; }
@media (min-width: 900px) { .contacto__grilla { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .contacto__foto { aspect-ratio: 4 / 5; max-height: 34rem; } }

/* ---------- Ajustes de la segunda vuelta ---------- */
/* los botones de las dos tarjetas de clases quedan a la misma altura, abajo */
.forma__cuerpo { display: flex; flex-direction: column; align-items: flex-start; }
.forma .btn { margin-top: auto; }
.forma__donde { margin-bottom: .6rem; }
/* el título de la caja del Surf Shop, a su medida */
.sitio-experiencia .cruzada .titulo { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.02; }
/* Trips: el título de los días no queda debajo del menú */
/* "Cómo es": el título con aire arriba (rótulo) y abajo (los pasos), que no quede todo pegado */
.sitio-experiencia .camino .titulo { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; }
.sitio-experiencia .camino__rotulo { gap: 1.1rem; }
.sitio-experiencia .camino--js .camino__fijo { padding-top: 5.5rem; gap: clamp(1.8rem, 5vh, 3rem); }
@media (max-height: 700px) { .sitio-experiencia .camino--js .camino__fijo { padding-top: 4.5rem; gap: 1.4rem; } }
/* Contacto: que se vea el grupo entero */
.contacto__foto { object-position: 50% 85%; }

/* ---------- Dónde nos encontramos: el mapa de Google al final de todas las páginas ---------- */
.donde-xp .mapa { max-width: 68rem; height: min(65vh, 28rem); border-radius: 1.4rem; overflow: hidden; border: 3px solid var(--marino); }

/* ---------- El clima, más chico y discreto: que no tape nada ni le robe protagonismo a la portada ---------- */
.sitio-experiencia .clima {
  width: auto; max-width: 15.5rem; bottom: 1rem; padding: .5rem .8rem .55rem .6rem;
  column-gap: .55rem; row-gap: .2rem; border-radius: .9rem;
  background: rgba(20,30,64,.35); border-color: rgba(250,248,243,.22);
}
.sitio-experiencia .clima__icono svg { width: 2rem; height: 2rem; }
.sitio-experiencia .clima__donde { font-size: .54rem; margin-bottom: .1rem; }
.sitio-experiencia .clima__temp { font-size: 1.35rem; }
.sitio-experiencia .clima__cielo { font-size: .72rem; }
.sitio-experiencia .clima__viento { font-size: .68rem; padding-top: .3rem; gap: .35rem; }
.sitio-experiencia .clima__viento svg { width: .8rem; height: .8rem; }
.sitio-experiencia .clima__remar { font-size: .7rem; gap: .4rem; }
.sitio-experiencia .clima__remar::before { width: .5rem; height: .5rem; }
.clima__fuente { grid-column: 1 / -1; font-size: .58rem; opacity: .6; }
.clima__fuente:empty { display: none; }
.sitio-experiencia .portada-xp { padding-bottom: 9rem; }
@media (min-width: 900px) { .sitio-experiencia .portada-xp { padding-bottom: 8rem; } }

/* el clima, en compu, abajo a la derecha (sobre las fotos), no al lado del logo */
@media (min-width: 900px) { .sitio-experiencia .clima { left: auto; right: var(--borde); translate: none; } }

/* ---------- Clases: Laguna → Río → Travesías, en fila de pasos ---------- */
.etapas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; font-weight: 700; }
.etapas span { padding: .45rem .85rem .4rem; border: 1.5px solid currentColor; border-radius: 9999px; font-size: .84rem; }
.etapas i { font-style: normal; opacity: .7; }

/* ---------- Opciones sin precio: cada una abre WhatsApp. La recomendada, rellena y más grande ---------- */
.opciones { display: grid; gap: .6rem; width: 100%; max-width: 30rem; text-align: left; }
.opcion a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; padding: 1rem 1.1rem;
  border: 1.5px solid currentColor; border-radius: var(--curva); color: inherit; text-decoration: none;
  transition: background-color .22s, border-color .22s;
}
.opcion a:hover { background: rgba(169,207,240,.14); }
.opcion--destacada a:hover { background: #bcdaf4; }
.forma--2 .opcion--destacada a:hover { background: #26366b; }
.opcion strong { grid-column: 1; font: 900 1.35rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .03em; }
.opcion span:not(.opcion__marca) { grid-column: 1; font-size: .92rem; opacity: .85; }
.opcion em {
  grid-column: 2; grid-row: 1 / span 3; font-style: normal; font-weight: 700; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .6rem .9rem; border-radius: var(--r-btn); border: 1.5px solid currentColor;
}
.opcion__marca {
  grid-column: 1; justify-self: start; font: 800 .68rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .7rem .35rem; border-radius: 9999px; background: var(--marino); color: var(--celeste);
}
.opcion--destacada a { background: var(--celeste); color: var(--marino); border-color: var(--celeste); padding: 1.3rem 1.2rem; }
.opcion--destacada strong { font-size: 1.8rem; }
.opcion--destacada em { background: var(--marino); color: var(--crema); border-color: var(--marino); }
/* sobre la tarjeta celeste, la recomendada va en azul */
.forma--2 .opcion--destacada a { background: var(--marino); color: var(--crema); border-color: var(--marino); }
.forma--2 .opcion--destacada .opcion__marca { background: var(--celeste); color: var(--marino); }
.forma--2 .opcion--destacada em { background: var(--celeste); color: var(--marino); border-color: var(--celeste); }
.forma__opciones { margin-top: .4rem; opacity: .8; }
.forma__aclara { font-size: .86rem; opacity: .8; }

/* ---------- Cadillac en la laguna ---------- */
.cadillac__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cadillac__cuando { display: inline-flex; align-items: center; gap: .55rem; }
.cadillac__cuando .ico { width: 1.4rem; height: 1.4rem; color: var(--celeste); flex: none; }
.cadillac__aviso { max-width: 30rem; padding: .9rem 1.1rem; border: 1.5px dashed rgba(250,248,243,.5); border-radius: var(--curva); font-size: .95rem; }
.cadillac__subtitulo {
  text-align: center; margin: clamp(3rem, 8vw, 5rem) 0 0; font: 900 clamp(2rem, 5vw, 3.2rem)/1 var(--titulos);
  text-transform: uppercase; letter-spacing: .03em;
}
.cadillac .pasos { margin-inline: auto; }

/* ---------- Be Water Kids: lo que hacen en la colonia ---------- */
.kids__lista { display: grid; gap: .9rem; max-width: 28rem; text-align: left; }
.kids__lista li { display: flex; align-items: flex-start; gap: .85rem; }
.kids__lista .ico { flex: none; width: 2.2rem; height: 2.2rem; padding: .4rem; border-radius: 50%; background: var(--celeste); color: var(--marino); stroke-width: 1.6; }
.kids__lista b { display: block; font-weight: 800; }
.kids__lema { font: 900 clamp(1.5rem, 4vw, 2rem)/1.05 var(--titulos); text-transform: uppercase; letter-spacing: .03em; }