/*
 * Propuesta alternativa — territorio vivo.
 * La portada se construye solo con fotografías WebP optimizadas; no usa video.
 */

html { overflow-x: hidden; }

.concept-immersive {
  --concept-ink: #061113;
  --concept-mint: #8fd6bd;
  --concept-water: #4aa9a1;
}

.concept-immersive .nav {
  background: linear-gradient(180deg, rgba(5, 17, 19, .78), rgba(5, 17, 19, .08));
  border-bottom-color: rgba(228, 237, 228, .08);
}

.concept-immersive .nav.scrolled {
  background: rgba(5, 17, 19, .9);
}

.immersive-hero {
  min-height: max(760px, 100svh);
  justify-content: center;
  padding-top: clamp(7.5rem, 17vh, 10rem);
  padding-bottom: clamp(6.5rem, 13vh, 8.5rem);
  background: var(--concept-ink);
}

.immersive-stage {
  --mx: 0;
  --my: 0;
  --lens-x: 70%;
  --lens-y: 42%;
  position: absolute;
  inset: -3.5%;
  z-index: 0;
  overflow: clip;
  contain: paint;
  background: #0b2426;
  transform: translateZ(0);
}

.immersive-slide,
.immersive-lens {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.immersive-slide {
  opacity: 0;
  transform: scale(1.085) translate3d(calc(var(--mx) * -9px), calc(var(--my) * -7px), 0);
  filter: saturate(.95) contrast(1.035);
  transition: opacity 1.8s cubic-bezier(.22, 1, .36, 1), transform 8s linear;
  will-change: opacity, transform;
}

.immersive-slide:first-child {
  background-image: url("assets/img/immersive/rilan-03-desktop.webp?v=20260624-final3");
}

.immersive-slide.is-active {
  opacity: 1;
  transform: scale(1.025) translate3d(calc(var(--mx) * -9px), calc(var(--my) * -7px), 0);
}

.immersive-lens {
  z-index: 3;
  opacity: .4;
  filter: saturate(1.18) brightness(1.09) contrast(1.02);
  transform: scale(1.025) translate3d(calc(var(--mx) * -9px), calc(var(--my) * -7px), 0);
  -webkit-mask-image: radial-gradient(circle 130px at var(--lens-x) var(--lens-y), #000 0 40%, rgba(0,0,0,.66) 65%, transparent 100%);
  mask-image: radial-gradient(circle 130px at var(--lens-x) var(--lens-y), #000 0 40%, rgba(0,0,0,.66) 65%, transparent 100%);
  transition: opacity .5s ease, background-image 1.6s ease;
  pointer-events: none;
}

.immersive-contours {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: .24;
  mix-blend-mode: soft-light;
  transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 3px), 0);
}

.immersive-contours path {
  fill: none;
  stroke: rgba(239, 230, 207, .85);
  stroke-width: 1;
  stroke-dasharray: 3 8;
  vector-effect: non-scaling-stroke;
}

.immersive-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(4, 15, 17, .77) 0%, rgba(4, 15, 17, .42) 34%, rgba(4, 15, 17, .05) 67%, rgba(4, 15, 17, .32) 100%),
    linear-gradient(180deg, rgba(4, 15, 17, .46), transparent 28%, transparent 64%, rgba(4, 15, 17, .76));
}

.immersive-scan {
  position: absolute;
  inset: -20% -40%;
  z-index: 6;
  opacity: .17;
  background: linear-gradient(106deg, transparent 42%, rgba(226, 245, 232, .5) 49%, transparent 56%);
  transform: translateX(-32%);
  animation: territoryScan 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes territoryScan {
  0%, 34% { transform: translateX(-32%); opacity: 0; }
  42% { opacity: .18; }
  62% { transform: translateX(33%); opacity: .08; }
  100% { transform: translateX(33%); opacity: 0; }
}

.concept-immersive .immersive-hero::after {
  height: clamp(170px, 27vh, 290px);
  background: linear-gradient(180deg, transparent, rgba(6,17,19,.22) 24%, rgba(6,17,19,.82) 76%, #071316 100%);
}

.concept-immersive .immersive-hero .hero-tint {
  background: radial-gradient(90% 92% at 9% 51%, rgba(4,14,16,.12), transparent 54%);
}

.concept-immersive .hero-inner {
  width: min(100%, 960px);
  transform: translateY(-1.5vh);
}

.concept-immersive .hero-kicker {
  border-color: rgba(240, 231, 208, .2);
  background: rgba(5, 20, 21, .54);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .18);
}

.concept-immersive .hero-title {
  max-width: 10.5em;
  font-size: clamp(3.15rem, 7vw, 6.8rem);
  text-wrap: balance;
}

.concept-immersive .hero-sub {
  max-width: 34em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .74);
}

.immersive-telemetry {
  position: absolute;
  top: clamp(8.2rem, 17vh, 10.5rem);
  right: var(--pad);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .43rem;
  width: min(25vw, 290px);
  color: rgba(242, 237, 226, .57);
  font-size: .62rem;
  letter-spacing: .16em;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
}

.immersive-telemetry strong {
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -.015em;
  text-transform: none;
}

.telemetry-label { color: var(--accent); }
.telemetry-line { width: 100%; height: 1px; margin: .32rem 0 .14rem; background: linear-gradient(90deg, transparent, rgba(242,237,226,.35)); }
.telemetry-status { display: inline-flex; align-items: center; gap: .45rem; }
.telemetry-status b { width: 5px; height: 5px; border-radius: 50%; background: var(--concept-mint); box-shadow: 0 0 0 4px rgba(143,214,189,.11); }

.immersive-compass {
  position: absolute;
  right: calc(var(--pad) + 1rem);
  top: 48%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: rgba(242,237,226,.58);
  border: 1px solid rgba(242,237,226,.2);
  border-radius: 50%;
  font-size: .55rem;
  letter-spacing: .15em;
}

.immersive-compass::before,
.immersive-compass::after {
  content: "";
  position: absolute;
  background: rgba(242,237,226,.18);
}
.immersive-compass::before { width: 142%; height: 1px; }
.immersive-compass::after { width: 1px; height: 142%; }
.immersive-compass span { position: absolute; top: -1.45rem; }
.immersive-compass i { position: absolute; top: 9px; width: 0; height: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; border-bottom: 14px solid var(--accent); transform: rotate(calc(var(--mx, 0) * 5deg)); }
.immersive-compass b { position: absolute; bottom: -1.65rem; font-weight: 500; }

.immersive-scenes {
  position: absolute;
  left: var(--pad);
  bottom: clamp(2.1rem, 5vh, 3.4rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.scene-count {
  min-width: 3.9rem;
  color: rgba(242, 237, 226, .5);
  font-size: .66rem;
  letter-spacing: .12em;
}
.scene-count b { color: var(--cream); font-weight: 500; }
.scene-dot { width: 28px; height: 28px; padding: 0; border-radius: 50%; position: relative; }
.scene-dot::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(242,237,226,.46); transition: background .3s, transform .3s; }
.scene-dot::after { content: ""; position: absolute; inset: 4px; border: 1px solid transparent; border-radius: 50%; transition: border-color .3s; }
.scene-dot:hover::before,
.scene-dot.is-active::before { background: var(--accent); transform: scale(1.25); }
.scene-dot.is-active::after { border-color: rgba(212,148,73,.52); }

.concept-immersive .hero-scroll { bottom: clamp(2.1rem, 5vh, 3.4rem); }

@media (max-width: 959px) {
  .immersive-hero {
    min-height: max(700px, 100svh);
    justify-content: flex-end;
    padding-top: 7rem;
    padding-bottom: 8.4rem;
  }
  .immersive-stage { inset: -2.5% 0; }
  .immersive-slide:first-child { background-image: url("assets/img/immersive/rilan-03-mobile.webp?v=20260624-final3"); }
  .immersive-slide { background-position: center center; }
  .immersive-vignette {
    background:
      linear-gradient(180deg, rgba(4,15,17,.4), rgba(4,15,17,.04) 26%, rgba(4,15,17,.3) 51%, rgba(4,15,17,.9) 86%),
      linear-gradient(90deg, rgba(4,15,17,.48), rgba(4,15,17,.08));
  }
  .concept-immersive .hero-inner { transform: none; }
  .concept-immersive .hero-title { max-width: 8.5em; font-size: clamp(2.75rem, 12.5vw, 5.4rem); }
  .immersive-telemetry { display: none; }
  .immersive-compass { top: 22%; right: calc(var(--pad) + .3rem); width: 48px; height: 48px; opacity: .72; }
  .immersive-scenes { bottom: 2.1rem; }
  .immersive-contours { opacity: .17; }
  .immersive-lens { display: none; }
}

@media (max-width: 560px) {
  .immersive-hero { padding-bottom: 7.1rem; }
  .concept-immersive .hero-kicker { margin-bottom: 1rem; font-size: .66rem; letter-spacing: .13em; }
  .concept-immersive .hero-title { font-size: clamp(2.65rem, 13vw, 4.15rem); line-height: .94; }
  .concept-immersive .hero-sub { margin-top: 1.15rem; font-size: .94rem; line-height: 1.48; }
  .concept-immersive .hero-actions { margin-top: 1.35rem; }
  .immersive-compass { display: none; }
  .scene-dot { width: 24px; height: 24px; }
  .scene-dot::before { inset: 9px; }
  .scene-dot::after { inset: 3px; }
}

@media (hover: none), (pointer: coarse) {
  .immersive-lens { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-slide { transition: opacity .4s ease; transform: scale(1.025); }
  .immersive-scan { display: none; }
  .immersive-contours { transform: none; }
}