/* ==========================================================================
   VOLCANO ACQUA PARK — S00153
   home.css — Hero, olas, bento de atracciones y ajustes de index.html
   ========================================================================== */

/* ---- Anuncio superior ---- */

.anuncio-superior {
  position: relative;
  padding: 0.55rem var(--sp-sm);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blanco);
  background: linear-gradient(90deg, rgba(39, 103, 236, 0.14), rgba(242, 89, 26, 0.1), rgba(39, 103, 236, 0.14));
  border-bottom: 1px solid var(--borde-cristal);
}

.anuncio-superior span {
  display: inline-block;
  max-width: 100%;
}

@media (max-width: 640px) {
  .anuncio-superior {
    font-size: 0.7rem;
    padding: 0.5rem var(--sp-xs);
  }
}

/* ---- Hero: split-screen — panel de texto sólido a la izquierda, grilla
   de fotos reales del proyecto a la derecha. Nada de foto de fondo con
   texto encima: cada mitad tiene su propio trabajo (leer / mirar). ---- */

.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
}

.hero__panel-texto {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(360px, 38vw, 520px);
  display: flex;
  align-items: center;
  padding: 2.25rem 2.5rem;
  background:
    radial-gradient(ellipse 90% 60% at 25% 15%, rgba(39, 103, 236, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 55% at 85% 95%, rgba(242, 89, 26, 0.09), transparent 60%),
    linear-gradient(180deg, var(--abismo-profundo), var(--abismo));
}

.hero__texto {
  max-width: 440px;
}

/* ---- Caption editorial: una leyenda callada, sin ícono ni chip. ---- */
.hero__caption {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--niebla-tenue);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  color: var(--blanco-puro);
  letter-spacing: var(--ls-display-ancho);
  line-height: 1.18;
  margin-bottom: 0.85rem;
}

.hero__subtitulo {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--niebla-tenue);
  max-width: 400px;
  margin-bottom: 1.4rem;
}

/* ---- CTA callado: un link de texto, sin flecha ni acento — el próximo
   paso se sugiere, no se vende. ---- */
.hero__cta-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--niebla);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--borde-cristal-fuerte);
  transition: color var(--transicion), border-color var(--transicion);
}

.hero__cta-link:hover,
.hero__cta-link:focus-visible {
  color: var(--blanco-puro);
  border-color: var(--blanco-puro);
}

/* ---- Panel de fotos: grilla bento — el volcán arriba a lo ancho, tres
   fotos reales del proyecto abajo. ---- */
.hero__panel-fotos {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.35fr 1fr;
  gap: 2px;
  background: var(--abismo-profundo);
}

.hero__foto {
  position: relative;
  overflow: hidden;
}

.hero__foto--grande {
  grid-column: 1 / -1;
}

.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.16, 0.8, 0.24, 1);
}

.hero__foto:hover img {
  transform: scale(1.045);
}

.hero__cue {
  position: absolute;
  bottom: var(--sp-lg);
  left: calc(clamp(360px, 38vw, 520px) / 2);
  transform: translateX(-50%);
  display: flex;
  color: var(--niebla-tenue);
  z-index: 2;
  opacity: 0.7;
  transition: opacity var(--transicion);
}

.hero__cue:hover {
  opacity: 1;
}

.hero__cue svg {
  width: 18px;
  height: 18px;
  animation: rebote 1.8s ease-in-out infinite;
}

@keyframes rebote {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue svg,
  .hero__foto img {
    animation: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    min-height: auto;
  }

  .hero__panel-texto {
    flex: none;
    padding: var(--sp-xl) var(--sp-lg);
  }

  .hero__panel-fotos {
    flex: none;
    height: 60vh;
    min-height: 380px;
  }

  .hero__cue {
    display: none;
  }
}

/* ==========================================================================
   Bento de atracciones — grilla explícita de 12 columnas
   Fila 1: pileta de olas (8 cols) + toboganes (4 cols).
   Fila 2: zona familiar (5 cols) + Club VIP (7 cols, más protagonismo dorado).
   Zoom de fondo por scroll y etiqueta flotante dorada.
   Ver assets/js/main.js: inicializarParallaxBento().
   ========================================================================== */

.bento-atracciones {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-md);
}

.bento-atracciones__item {
  position: relative;
  min-height: 320px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--sombra-md);
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.bento-atracciones__item:hover {
  box-shadow: var(--resplandor-cian);
}

.bento-atracciones__item--vip {
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo-oro);
}

.bento-atracciones__item--vip:hover {
  box-shadow: var(--resplandor-oro);
}

.bento-atracciones__item--olas {
  grid-column: span 8;
}
.bento-atracciones__item--toboganes {
  grid-column: span 4;
}
.bento-atracciones__item--familiar {
  grid-column: span 5;
}
.bento-atracciones__item--vip {
  grid-column: span 7;
}

.bento-atracciones__fondo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(39, 103, 236, 0.22), transparent 60%),
    linear-gradient(160deg, var(--superficie), var(--superficie-alt));
  will-change: transform;
}

.bento-atracciones__item--vip .bento-atracciones__fondo {
  background: radial-gradient(circle at 30% 20%, rgba(242, 89, 26, 0.22), transparent 60%),
    linear-gradient(160deg, var(--superficie), var(--superficie-alt));
}

.bento-atracciones__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08);
}

.bento-atracciones__item--familiar .bento-atracciones__texto h3,
.bento-atracciones__item--vip .bento-atracciones__texto h3 {
  font-size: var(--fs-md);
}

.bento-atracciones__texto {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-md);
  background: linear-gradient(0deg, rgba(3, 5, 9, 0.9) 15%, rgba(3, 5, 9, 0.5) 65%, transparent 100%);
}

.bento-atracciones__texto h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.3rem;
}

.bento-atracciones__item--olas .bento-atracciones__texto h3 {
  font-size: var(--fs-xl);
}

.bento-atracciones__texto p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--niebla);
  max-width: 46ch;
}

.bento-atracciones__item--toboganes .bento-atracciones__texto p,
.bento-atracciones__item--familiar .bento-atracciones__texto p,
.bento-atracciones__item--vip .bento-atracciones__texto p {
  display: none;
}

/* ---- Tags de amenidades reales: nombres puntuales de atracciones,
   separados por un punto medio — visibles siempre (a diferencia del
   párrafo largo, que se oculta en desktop salvo en la card de olas). ---- */
.bento-atracciones__tags {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--niebla-tenue);
}

.bento-atracciones__tags li:not(:last-child)::after {
  content: "·";
  margin: 0 0.5rem;
  color: var(--cian-neon);
  opacity: 0.7;
}

@media (max-width: 1100px) {
  .bento-atracciones {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-atracciones__item--olas {
    grid-column: span 2;
  }
  .bento-atracciones__item--toboganes {
    grid-column: span 1;
  }
  .bento-atracciones__item--familiar {
    grid-column: span 1;
  }
  .bento-atracciones__item--vip {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .bento-atracciones {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
  .bento-atracciones__item,
  .bento-atracciones__item--olas,
  .bento-atracciones__item--toboganes,
  .bento-atracciones__item--familiar,
  .bento-atracciones__item--vip {
    grid-column: span 1;
  }
  .bento-atracciones__item {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .bento-atracciones__texto p {
    display: block !important;
  }
}

/* ---- Ubicación (index) ---- */

.grid-ubicacion {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-lg);
  align-items: stretch;
}

.mapa-estatico-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.mapa-estatico-col .mapa-estatico {
  flex: 1;
}

.nota-mapa {
  font-size: var(--fs-xs);
  color: var(--niebla-tenue);
  text-align: center;
}

@media (max-width: 860px) {
  .grid-ubicacion {
    grid-template-columns: 1fr;
  }
}