/* Be Water — lo que comparten los cuatro sitios y no estaba en base.css:
   los logos dibujados, el desplegable "Be Water" del menú, la fila de espacios del pie,
   las variantes de cabecera y portada, y los huecos para fotos.

   Orden de las hojas en cada página: base.css → familia.css → la del sitio.

   Clases del <body> que se usan acá (las pone comun.py):
     .quieta      sin los efectos del café (General, Xperience y Surf Shop)
     .cab-junta   cabecera con el logo a la izquierda y todo el menú junto a la derecha
     .cab-oscura  la página abre sobre un fondo claro: la cabecera va en azul */

/* ---------- Logos dibujados (los símbolos están en el HTML; ver herramientas/sitio/logos.py) ---------- */

.logo-svg { display: block; width: 100%; height: auto; }
.logo-svg.sellito { display: inline-block; width: 2.6rem; height: 1.9rem; flex: none; vertical-align: middle; }

/* En la cabecera, cada sitio pone su logo */
.cabecera .marca--sello { width: 3.6rem; }
.cabecera .marca--bw { width: 7.2rem; }
.cabecera .marca--cafe { width: 9.6rem; }

/* ---------- Íconos del menú ---------- */

.ico { width: 1.6em; height: 1.6em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a:has(.ico) { display: inline-flex; align-items: center; gap: .55em; }

/* ---------- Desplegable "Be Water": el único acceso a lo que queda fuera del sitio ---------- */

.salir { position: relative; }
.salir summary {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer; list-style: none;
  font: 600 .74rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; padding: .8rem 0;
}
.salir summary::-webkit-details-marker { display: none; }
/* la flechita: un ángulo que se da vuelta al abrir */
.salir summary i { width: .5em; height: .5em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -.15em; transition: rotate .25s, translate .25s; }
.salir[open] summary i { rotate: -135deg; translate: 0 .1em; }
.salir__lista {
  position: absolute; right: 0; top: 100%; z-index: 5; min-width: 14rem;
  display: grid; padding: .5rem 1.2rem;
  background: var(--crema); color: var(--marino); border: 1.5px solid var(--marino);
}
.salir__lista a { padding: .9rem 0; border-bottom: 1px solid rgba(29,43,87,.18); }
.salir__lista a:last-child { border-bottom: 0; }
.salir__lista :focus-visible { outline-color: var(--marino); }

/* en el panel del celular la lista va debajo, sin caja */
@media (max-width: 899px) {
  .js .nav .ico { width: .62em; height: .62em; stroke-width: 1.4; }
  .js .salir { text-align: center; margin-top: 1.2rem; }
  .js .salir summary { font-size: .9rem; padding: 1rem 0; }
  .js .salir__lista { position: static; min-width: 0; padding: 0; background: none; color: inherit; border: 0; }
  .js .nav .salir__lista a { font: 600 1.05rem/1 var(--texto); letter-spacing: .1em; padding: .8rem 0; border: 0; }
}

/* ---------- Cabecera junta: logo a la izquierda, menú y desplegable a la derecha ---------- */

@media (min-width: 900px) {
  .cab-junta .marca { position: static; translate: none; flex: none; }
  .cab-junta .nav { width: auto; margin-left: auto; gap: 2.2rem; align-items: center; }
  .cab-junta .nav a:nth-child(2) { margin-right: 0; }
}

/* Páginas que abren sobre un fondo claro: la cabecera va en azul hasta que se vuelve sólida */
.cab-oscura .cabecera:not(.es-solida) { color: var(--marino); }
.menu-abierto .cab-oscura .cabecera:not(.es-solida) { color: var(--crema); }
.cab-oscura :focus-visible { outline-color: var(--marino); }
.cab-oscura .pie :focus-visible, .cab-oscura .seccion--campo :focus-visible { outline-color: var(--celeste); }

/* ---------- Quieta: los tres sitios nuevos, sin las animaciones del café ----------
   Cuando cada uno tenga las suyas, van en su propia hoja. */

.quieta .inicio > *, .quieta .portada .apertura > * { animation: none; }

/* botones de portada lisos: uno lleno y uno de borde */
.quieta .inicio .botones { margin-top: 2rem; }
.quieta .inicio .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-width: 13rem; padding: 1.15rem 2rem 1.1rem;
  border: 1.5px solid currentColor; font-size: .86rem;
}
.btn--lleno, .quieta .inicio .btn--lleno { background: var(--celeste); color: var(--marino); border-color: var(--celeste); transition: background-color .22s, border-color .22s; }
.btn--lleno:hover, .quieta .inicio .btn--lleno:hover { background: var(--crema); border-color: var(--crema); color: var(--marino); }

/* el de WhatsApp, con su verde y su ícono */
.btn--whatsapp, .quieta .inicio .btn--whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  background: #25D366; color: #0B3D22; border-color: #25D366; transition: background-color .25s, border-color .25s;
}
.btn--whatsapp:hover, .quieta .inicio .btn--whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; color: #0B3D22; }
.btn--whatsapp .ico { width: 1.5em; height: 1.5em; margin-block: -.4em; }

/* ---------- Portada a pantalla completa (.inicio, de base.css) con logo dibujado ---------- */

.inicio { --acento: var(--celeste); }
.inicio__logo--bw, .inicio__logo--xp { width: min(88%, 34rem); }
.inicio__logo--shop { width: min(96%, 40rem); }
.inicio__sobre { margin-bottom: 1.8rem; }
.inicio__lema {
  display: inline-flex; align-items: center; gap: .7em; margin-top: 2.2rem;
  font-family: var(--titulos); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 3.2vw, 1.8rem); line-height: 1; letter-spacing: .16em;
}
.inicio__lema .olas { width: 4.5rem; background: var(--celeste); }
.quieta .inicio__linea { max-width: 26rem; margin-bottom: 0; }

/* Variante clara (Surf Shop): blanco de la marca y todo en azul */
.inicio--claro { background: var(--crema); color: var(--marino); --acento: var(--cafe-osc); }
.quieta .inicio--claro .btn--lleno { background: var(--marino); color: var(--crema); border-color: var(--marino); }
.quieta .inicio--claro .btn--lleno:hover { background: var(--cafe-osc); border-color: var(--cafe-osc); color: var(--crema); }

/* ---------- Fila de espacios en el pie ---------- */

.hermanas {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem 1.8rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(250,248,243,.25); width: min(100%, 46rem);
}
.hermanas a {
  display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 0;
  font: 600 .76rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.hermanas a:hover, .hermanas a[aria-current="page"] { color: var(--celeste); }
.hermanas__marca { flex-basis: 100%; justify-content: center; }
.hermanas__marca .sellito { width: 3.3rem; height: 2.4rem; }
@media (min-width: 700px) { .hermanas__marca { flex-basis: auto; } }

/* ---------- Hueco: el lugar reservado para una foto que todavía no está ----------
   Lo escribe foto() en comun.py. Cuando la foto existe, en su lugar sale un .foto normal. */

.hueco {
  display: grid; place-content: center; justify-items: center; gap: .8rem;
  aspect-ratio: 4 / 3; padding: 1rem; text-align: center;
  color: var(--marino); border: 1.5px dashed currentColor;
  background: repeating-linear-gradient(135deg, rgba(29,43,87,.06) 0 12px, transparent 12px 24px);
}
.seccion--campo .hueco { color: var(--crema); background: repeating-linear-gradient(135deg, rgba(250,248,243,.07) 0 12px, transparent 12px 24px); }
.hueco .dibujo { width: 3.5rem; height: 3.5rem; color: inherit; }
.hueco--alta, .foto.hueco--alta { aspect-ratio: 4 / 5; }
.foto.hueco--ancha { aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .hueco--ancha, .foto.hueco--ancha { aspect-ratio: 16 / 9; } }

/* ---------- Piezas chicas que usan Xperience y Surf Shop ---------- */

.separa { margin-top: 3.5rem; }

/* Tres fotos en fila */
.trio { display: grid; gap: 1rem; }
@media (min-width: 700px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* Lista con tilde */
.tildes { display: grid; gap: .55rem; text-align: left; }
.tildes li { padding-left: 1.7rem; position: relative; }
.tildes li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--acento); }

/* Pasos numerados sobre azul */
.pasos--claros li::before { color: var(--celeste); }

/* ---------- Botones de WhatsApp e Instagram, con su ícono y su color. En todo el sitio. ---------- */

.red {
  display: inline-flex; align-items: center; gap: .5em; padding: .62rem 1.05rem .58rem; border-radius: var(--r-btn);
  font: 700 .74rem/1 var(--texto); letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  transition: filter .22s;
}
.red:hover { filter: brightness(1.08); }
.red:active { transform: translateY(1px); }
.red__ico { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.red--wa, .red--wa:hover { background: #25D366; color: #0B3D22; }
.red--ig, .red--ig:hover { color: #fff; background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285AEB 95%); }

/* ---------- El final de todas las páginas: tres banners a pantalla completa y lo legal ---------- */

.pie { display: block; justify-items: stretch; padding: 0; text-align: left; }
.banners { display: grid; }
.banner {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 85vh; min-height: 85svh; display: grid; align-items: end;
  padding: 3rem var(--borde) 3.2rem; color: var(--crema);
}
.banner__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s cubic-bezier(.2,.7,.2,1); }
.banner:hover .banner__fondo { scale: 1.05; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.banner--xp::before { background: linear-gradient(180deg, rgba(29,43,87,.15), rgba(29,43,87,.55) 40%, rgba(20,30,64,.95) 75%); }
.banner--shop { color: var(--marino); }
.banner--shop::before { background: linear-gradient(180deg, rgba(250,248,243,.1), rgba(250,248,243,.6) 40%, rgba(250,248,243,.97) 72%); }
.banner--cafe::before { background: linear-gradient(180deg, rgba(90,51,25,.15), rgba(90,51,25,.55) 40%, rgba(60,32,14,.96) 75%); }
.banner__contenido { display: grid; gap: .75rem; justify-items: start; width: 100%; max-width: 22rem; }
.banner__logo { display: block; width: min(100%, 16rem); margin-bottom: .3rem; }
.banner__logo svg, .banner__logo img { display: block; width: 100%; height: auto; }
.banner .dato { opacity: .85; }
.banner__redes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.banner__entrar { padding: .7rem 0; font: 700 .78rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; text-underline-offset: .4em; }
.banner__entrar i { font-style: normal; display: inline-block; margin-left: .3em; transition: translate .25s; }
.banner__entrar:hover i { translate: .3em 0; }
.banner .pie__horarios { width: 100%; }
.banner--shop :focus-visible { outline-color: var(--marino); }
@media (min-width: 900px) {
  .banners { grid-template-columns: repeat(3, 1fr); }
  .banner { min-height: 100vh; min-height: 100svh; padding: 3rem 2.2rem 3.4rem; }
}

.legal {
  display: grid; justify-items: center; gap: .55rem; padding: 2.2rem var(--borde) 2.6rem; text-align: center;
  background: var(--marino-osc); color: var(--crema); font-size: .78rem;
}
.legal p { max-width: 48rem; opacity: .78; }
.legal .legal__firma { opacity: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; }
.legal__redes { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.legal .red { padding: .45rem .85rem .42rem; font-size: .68rem; }
.legal .red__ico { width: 1rem; height: 1rem; }
.pie__horarios li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(250,248,243,.22); }
.legal .hermanas__marca { color: inherit; }

/* ---------- Ajustes del final de las páginas ---------- */
/* en compu, Xperience al medio: el Surf Shop a la izquierda y el café a la derecha
   (en celular queda primero Xperience, como está en el HTML) */
@media (min-width: 900px) {
  .banner--shop { order: 1; }
  .banner--xp { order: 2; }
  .banner--cafe { order: 3; }
}
/* Instagram en los banners: sin el degradé, más discreto */
.banner .red--ig { background: rgba(250,248,243,.14); color: inherit; box-shadow: inset 0 0 0 1px rgba(250,248,243,.35); }
.banner--shop .red--ig { background: rgba(29,43,87,.06); box-shadow: inset 0 0 0 1px rgba(29,43,87,.3); }
/* "Diseñado por": a la derecha, chico y sin color, que pase desapercibido */
.legal .legal__firma { justify-self: end; justify-content: flex-end; gap: .3rem; margin-top: .9rem; font-size: .66rem; opacity: .5; }
.legal .legal__firma b { font-weight: 600; }
.legal .legal__redes { gap: .1rem; }
.legal .legal__redes .red { background: none; color: inherit; padding: .2rem .35rem; font-size: .64rem; font-weight: 600; }
.legal .legal__redes .red:hover { transform: none; filter: none; text-decoration: underline; }
.legal .legal__redes .red__ico { width: .85rem; height: .85rem; }

/* el logo y su línea van arriba (alineados entre los tres banners); la info queda abajo, como siempre */
.banner { align-items: stretch; }
.banner__contenido { grid-template-rows: auto 1fr; gap: 2rem; max-width: 22rem; }
.banner__marca { display: grid; gap: .75rem; justify-items: start; }
.banner__info { display: grid; gap: .75rem; justify-items: start; align-self: end; width: 100%; }
/* arriba la foto va más oscura (o más clara en el Surf Shop) para que el logo se lea */
.banner--xp::before { background: linear-gradient(180deg, rgba(20,30,64,.78), rgba(29,43,87,.4) 28%, rgba(29,43,87,.55) 50%, rgba(20,30,64,.95) 78%); }
.banner--shop::before { background: linear-gradient(180deg, rgba(250,248,243,.88), rgba(250,248,243,.45) 28%, rgba(250,248,243,.6) 50%, rgba(250,248,243,.97) 75%); }
.banner--cafe::before { background: linear-gradient(180deg, rgba(60,32,14,.8), rgba(90,51,25,.4) 28%, rgba(90,51,25,.55) 50%, rgba(60,32,14,.96) 78%); }

/* ---------- Cuadros con las puntas apenas redondeadas (las fotos quedan rectas) ---------- */
:root { --curva: 10px; }
/* curva-cuadros */
.puerta, .lugar, .gente__libre, .mapa, .flyer__marco, .hueco, .incluye,
.quiz__resultados li, .cruzada, .forma, .clima { border-radius: var(--curva); }
/* las tarjetas con foto adentro recortan la foto con la misma curva */
.puerta, .lugar, .incluye, .forma, .mapa { overflow: hidden; }