/* Be Water general: las tres puertas, dónde estamos, una forma de vivir, de dónde venimos, nuestra gente
   y la página de historia. Las animaciones, el collage de la portada, los viajes y el camino de costado
   están en efectos.css (los comparte con Xperience). */

/* ---------- Las tres puertas, sobre celeste. La experiencia es la grande. ---------- */

.elegir {
  background: var(--celeste); --acento: var(--marino);
  padding: var(--aire) var(--borde);
  display: grid; justify-items: center; gap: 3rem;
}
.puertas { display: grid; gap: 1rem; width: 100%; max-width: var(--ancho); }

.puerta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: center; justify-items: center; gap: 1.1rem; text-align: center;
  min-height: 19rem; padding: 2.5rem 1.5rem;
  text-decoration: none; color: var(--marino);
}
.puerta--agua { background: var(--marino); color: var(--crema); min-height: 26rem; }
.puerta--tienda { background: var(--crema); }
.puerta--cafe { background: var(--cafe-osc); color: var(--crema); }

/* la foto de fondo de la puerta del café, teñida de marrón */
.puerta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s cubic-bezier(.2,.7,.2,1); }
.puerta--cafe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(90,51,25,.6), rgba(60,32,14,.9)); }

.puerta__logo { display: block; transition: scale .5s cubic-bezier(.2,.7,.2,1); }
.puerta__logo--xp { width: min(88%, 18rem); }
.puerta__logo--shop { width: min(90%, 17rem); }
.puerta__logo--cafe { width: min(80%, 15rem); }
.puerta__logo--cafe img { display: block; width: 100%; height: auto; }
.puerta__texto { max-width: 17rem; }

.puerta__entrar {
  margin-top: .4rem; padding: .9rem 1.6rem .85rem;
  font-size: .8rem; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid currentColor; border-radius: var(--r-btn);
  transition: background-color .22s, color .22s, border-color .22s;
}
.puerta__entrar i { font-style: normal; display: inline-block; margin-left: .5em; }
.puerta--agua .puerta__entrar { background: var(--celeste); color: var(--marino); border-color: var(--celeste); }

.puerta--agua:hover .puerta__entrar { background: var(--crema); border-color: var(--crema); }
.puerta--tienda:hover .puerta__entrar { background: var(--marino); color: var(--crema); border-color: var(--marino); }
.puerta--cafe:hover .puerta__entrar { background: var(--crema); color: var(--cafe-osc); border-color: var(--crema); }
.puerta:hover > img { scale: 1.06; }
.puerta:hover .puerta__logo { scale: 1.04; }
.puerta:focus-visible { outline-color: var(--marino); outline-offset: 4px; }

@media (min-width: 900px) {
  .puertas { grid-template-columns: 1fr 1.35fr 1fr; align-items: center; gap: 1.25rem; }
  .puerta { min-height: 24rem; }
  /* en el HTML la experiencia va primera (así queda arriba en celular); acá pasa al centro */
  .puerta--agua { order: 2; min-height: 33rem; }
  .puerta--tienda { order: 1; }
  .puerta--cafe { order: 3; }
  .puerta__logo--xp { width: min(78%, 21rem); }
}

/* ---------- Qué es Be Water: un par (foto + cuento) por espacio, uno debajo del otro ---------- */

.espacios .par { margin-top: var(--aire); }
.espacios .apertura + .par { margin-top: 3.5rem; }

/* ---------- Historia ---------- */

/* foto que se muestra entera, sin recortar (el flyer del recorrido) */
.foto--entera { aspect-ratio: 1088 / 1344; background: none; }
.foto--entera img { object-fit: contain; }

/* enlace para volver, arriba del título de historia.html */
.portada__volver { font: 600 .74rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: .9rem 0; }
.portada__volver:hover { color: var(--celeste); }
.portada__volver i { font-style: normal; display: inline-block; margin-right: .4em; transition: translate .25s; }
.portada__volver:hover i { translate: -.25em 0; }

/* capítulos: texto más largo, alineado a la izquierda para que se lea cómodo */
.par__texto--largo { justify-items: start; text-align: left; }
.par__texto--largo p:not(.rotulo) { max-width: 30rem; }
.espacios .capitulo:first-child { margin-top: 0; }

/* las fotos de estos pares son cuadradas y traen el logo al centro: se muestran cuadradas */
.espacios .par__foto { aspect-ratio: 1 / 1; }

/* ---------- Foto con el logo del café encima ---------- */

.foto--logo::after { content: ""; position: absolute; inset: 0; background: rgba(20,30,64,.38); }
.foto .foto__logo { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 70%; height: auto; color: var(--crema); }

/* ---------- Portada: el logo sobre el collage (el collage está en efectos.css) ---------- */

.inicio__logo--bw { width: min(82%, 28rem); }
.inicio--collage .inicio__lema { margin-top: 1.6rem; }

/* ---------- Las puertas de Xperience y Surf Shop también llevan foto, como la del café ---------- */

.puerta > img { filter: blur(2.5px); scale: 1.08; }
.puerta:hover > img { scale: 1.14; }
.puerta--agua::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29,43,87,.7), rgba(20,30,64,.92)); }
.puerta--tienda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(250,248,243,.8), rgba(250,248,243,.93)); }

/* ---------- Dónde nos encontramos: el mapa de Google con pestañas y las tarjetas ---------- */

.donde { display: grid; gap: 2.5rem; align-items: center; margin-top: 3rem; max-width: 72rem; }

.lugares { display: grid; gap: 1rem; }
.lugar { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.1rem; align-items: center; padding: .8rem; border: 1.5px solid var(--marino); background: var(--crema); }
.lugar__foto { width: 6.5rem; height: 6.5rem; object-fit: cover; }
.lugar__texto { display: grid; gap: .35rem; }
.lugar h3 { display: flex; align-items: center; gap: .55rem; font-family: var(--titulos); font-weight: 900; font-size: 1.55rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.lugar__n { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: var(--crema); font: 900 1rem/1 var(--titulos); }
.lugar--1 .lugar__n { background: var(--marino); }
.lugar--2 .lugar__n { background: #2F5FA8; }
.lugar--3 .lugar__n { background: var(--cafe); }
.lugar p { font-size: .9rem; }
.lugar__redes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.lugar .red { padding: .45rem .8rem .42rem; font-size: .68rem; }
.lugar .red__ico { width: 1rem; height: 1rem; }
@media (min-width: 1000px) { .donde { grid-template-columns: 1.35fr 1fr; gap: 3rem; } }

/* Surf Shop y Café del Río están en el mismo lugar: sus pestañas van en una sola cápsula ("mismo lugar"),
   el mapa muestra un cartel al elegirlos y sus tarjetas van juntas en un recuadro */
.pestanas__juntas {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .25rem;
  border: 1.5px dashed rgba(29,43,87,.45); border-radius: calc(var(--r-btn) + 4px);
}
.pestanas__mismo { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cafe-osc); padding: 0 .15rem; }
.donde__mapa .mapa { position: relative; }
.mapa__aviso {
  position: absolute; left: 1rem; right: 1rem; top: 1rem; z-index: 1; margin: 0; padding: .75rem 1rem;
  border-radius: var(--r-btn); background: var(--marino); color: var(--crema); font-size: .9rem; text-align: center;
  box-shadow: 0 .6rem 1.4rem -.8rem rgba(0,0,0,.5);
}
.mapa__aviso b { color: var(--celeste); }
.lugares__juntos { display: grid; gap: .7rem; padding: .9rem; border: 1.5px dashed rgba(29,43,87,.45); border-radius: calc(var(--curva) + 4px); }
.lugares__mismo { font-size: .86rem; color: var(--marino); }
.lugares__mismo b { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--cafe-osc); }
.lugares__juntos .lugares { gap: .7rem; }

/* ---------- Una forma de vivir: las frases avanzan con el scroll ----------
   Sin JS (o con "reducir movimiento") se ven las tres juntas. Con JS (clase vivir--js) la sección se
   alarga, queda fija en pantalla y script.js mueve cada frase según cuánto se bajó. */

.vivir { padding: var(--aire) var(--borde); }
.vivir--js { height: 320vh; padding: 0; }
.vivir--js .vivir__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 0 var(--borde); overflow: hidden; }
.vivir--js [data-frase] { opacity: 0; will-change: transform, opacity; }

/* las puertas: el agua sube un poco desde abajo al pasar el mouse */
.puerta__agua {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 0; z-index: -1; pointer-events: none;
  background: rgba(169,207,240,.35);
  -webkit-mask: var(--ola-mascara) 0 0 / 160px 18px repeat-x, linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
          mask: var(--ola-mascara) 0 0 / 160px 18px repeat-x, linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
  transition: height .9s cubic-bezier(.2,.7,.2,1);
  animation: ola-puerta 3s linear infinite;
}
.puerta:hover .puerta__agua { height: 38%; }
.puerta--tienda .puerta__agua { background: rgba(29,43,87,.12); }
@keyframes ola-puerta { to { -webkit-mask-position: 160px 0, 0 17px; mask-position: 160px 0, 0 17px; } }

.vivir.con-ola { --color-ola: var(--marino-osc); }

/* ---------- Una forma de vivir: grande, sobre azul profundo, con olas que se mueven abajo ---------- */
.vivir { background: var(--marino-osc); --fondo: var(--marino-osc); --acento: var(--celeste); color: var(--crema); }
.vivir .cita blockquote { font-size: clamp(2.8rem, 9vw, 7.4rem); line-height: .98; }
.vivir .cita blockquote b { color: var(--celeste); }
.vivir__fijo { position: relative; }
.vivir__olas { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; }
.vivir__olas span {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: rgba(169,207,240,.10);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='60'%3E%3Cpath d='M0 30C100 0 200 0 300 30S500 60 600 30V60H0z'/%3E%3C/svg%3E") 0 0 / 600px 60px repeat-x, linear-gradient(#000 0 0) 0 58px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='60'%3E%3Cpath d='M0 30C100 0 200 0 300 30S500 60 600 30V60H0z'/%3E%3C/svg%3E") 0 0 / 600px 60px repeat-x, linear-gradient(#000 0 0) 0 58px / 100% 100% no-repeat;
  animation: ola-vivir 12s linear infinite;
}
.vivir__olas span:nth-child(2) { height: 75%; animation-duration: 8s; animation-direction: reverse; background: rgba(169,207,240,.12); }
.vivir__olas span:nth-child(3) { height: 50%; animation-duration: 6s; background: rgba(169,207,240,.16); }
@keyframes ola-vivir { to { -webkit-mask-position: 600px 0, 0 58px; mask-position: 600px 0, 0 58px; } }
.vivir .cita { position: relative; z-index: 1; }

/* ---------- Nuestra gente: grilla pareja de fotos de grupo, con lugares libres para las que vienen ---------- */
.gente .titulo--grande { margin-bottom: .5rem; }
.gente__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; max-width: var(--ancho); margin: 3rem auto 0; }
.gente__collage li { aspect-ratio: 1; overflow: hidden; }
.gente__collage li:first-child { grid-column: span 2; grid-row: span 2; }
.gente__collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.gente__collage li:hover img { scale: 1.06; }
.gente__libre { display: grid; place-content: center; justify-items: center; gap: .5rem; border: 1.5px dashed rgba(29,43,87,.45); color: var(--marino); background: repeating-linear-gradient(135deg, rgba(29,43,87,.05) 0 12px, transparent 12px 24px); }
.gente__libre .dibujo { width: 3rem; height: 3rem; color: inherit; opacity: .6; }
.gente__libre .dato { opacity: .65; }
@media (min-width: 900px) { .gente__collage { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* ---------- Ajustes ---------- */
/* "Una forma de vivir": el azul va escrito directo, así nunca queda letra blanca sobre fondo claro */
.vivir { background: #141E40; color: #FAF8F3; }

/* ---------- Dónde nos encontramos: pestañas arriba del mapa de Google ---------- */
.donde__mapa { display: grid; gap: .8rem; }
.donde__mapa .mapa { margin-top: 0; height: min(65vh, 30rem); border-radius: 1.2rem; overflow: hidden; border: 3px solid var(--marino); }
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pestana {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .6rem 1.1rem .55rem .65rem;
  border-radius: var(--r-btn); border: 1.5px solid var(--marino); color: var(--marino); text-decoration: none;
  font-size: .86rem; font-weight: 700; transition: background-color .22s, color .22s;
}
.pestana b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--crema); font: 900 .95rem/1 var(--titulos); }
.pestana--1 b { background: var(--marino); }
.pestana--2 b { background: #2F5FA8; }
.pestana--3 b { background: var(--cafe); }
.pestana:hover, .pestana[aria-current="true"] { background: var(--marino); color: var(--crema); }
.pestana[aria-current="true"] b { box-shadow: 0 0 0 2px var(--crema); }
.lugar__mapa { justify-self: start; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-underline-offset: .3em; padding: .3rem 0; }
.lugar__mapa i { font-style: normal; display: inline-block; transition: translate .25s; }
.lugar__mapa:hover i { translate: .25em 0; }


/* ---------- Portada: "Elegí tu lugar". Abajo asoma el borde de los tres lugares (una franja crema con los tres
   logos); cada 7 s amaga a subir y vuelve, como una ola. Con "reducir movimiento" o al bajar, queda quieta. ---------- */
.inicio--collage > .asoma {
  position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(92%, 44rem); translate: -50% 0;
  color: var(--marino); text-decoration: none;
}
.asoma__panel {
  --se-ve: 3.3rem;                          /* lo que asoma quieta: solo "Elegí tu lugar" */
  display: grid; justify-items: center; gap: 1.1rem; padding: 1.05rem 1.5rem 2rem;
  background: var(--crema); border-radius: 1.2rem 1.2rem 0 0;
  box-shadow: 0 -1.2rem 2.6rem -1.4rem rgba(0,0,0,.55);
  transform: translateY(calc(100% - var(--se-ve)));
  animation: amague 7s cubic-bezier(.45,0,.25,1) 2.5s infinite;
  transition: transform .55s cubic-bezier(.3,.7,.2,1);
}
@keyframes amague {
  0%, 68%, 100% { transform: translateY(calc(100% - var(--se-ve))); }
  78% { transform: translateY(calc(100% - var(--se-ve) - 4.8rem)); }
  85% { transform: translateY(calc(100% - var(--se-ve) - 3.8rem)); }
  93% { transform: translateY(calc(100% - var(--se-ve))); }
}
.asoma__rotulo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(.95rem, 2.4vw, 1.15rem);
}
.asoma__rotulo i { font-style: normal; color: #4F8FC9; }
.asoma__logos { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 4vw, 2.2rem); }
.asoma__logos .logo-svg { width: auto; height: clamp(1.5rem, 4.4vw, 2.9rem); }
/* al pasar el mouse sube y muestra los tres; quieta cuando la persona ya bajó (clase que pone script.js) */
.asoma:hover .asoma__panel, .asoma:focus-visible .asoma__panel { animation: none; transform: translateY(calc(100% - var(--se-ve) - 4.8rem)); }
.asoma--quieta .asoma__panel { animation: none; }
@media (prefers-reduced-motion: reduce) { .asoma__panel { animation: none; } }

/* ---------- Historia: "Mi historia", la biografía de Diego (texto largo; la foto lo acompaña al bajar) ---------- */
.par--bio { align-items: start; }
.bio p:not(.rotulo):not(.bio__firma) { font-size: 1.05rem; }
.bio__firma { font-family: var(--titulos); font-weight: 900; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); }
@media (min-width: 800px) { .par--bio > :first-child { position: sticky; top: 6rem; } }

/* Historia: la parada que todavía no tiene foto va solo con su texto, centrada sobre la línea y con el año más grande */
.camino--js .parada--sin-foto { align-self: center; padding: 1.4rem 0; }
.parada--sin-foto .parada__cuando { font-size: clamp(3rem, 6vw, 4.2rem); }