/* Apariencia de la vista interactiva del brochure y de su carrusel tridimensional. */

/* Colores principales que se reutilizan en toda esta página. */
:root {
  --ink: #03110f;
  --dark: #092820;
  --green: #7ed957;
  --neon: #c8ff5a;
  --gold: #c89a52;
  --white: #ffffff;
}

/* Reinicio básico de márgenes y modelo de caja. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

/* Contenedor de pantalla completa y fondo decorativo del brochure. */
.brochure-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(3, 17, 15, .96), rgba(9, 40, 32, .94)),
    repeating-linear-gradient(90deg, rgba(126, 217, 87, .08) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(200, 154, 82, .06) 0 1px, transparent 1px 76px);
}

/* Copia desenfocada de la diapositiva activa que funciona como fondo dinámico. */
.bg-blur {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.34) saturate(1.25);
  transform: scale(1.12);
  opacity: .68;
  transition: background-image .7s ease, transform .25s ease;
}

.brochure-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(126, 217, 87, .16), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .68));
  pointer-events: none;
}

/* Controles fijos para volver al sitio y abrir el PDF descargable. */
.btn-regresar {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 50;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--neon), var(--green));
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 0 28px rgba(126, 217, 87, .52), 0 18px 40px rgba(0, 0, 0, .35);
}

.btn-descargar {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 50;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(7, 27, 23, .62);
  color: var(--white);
  font-weight: 900;
  text-decoration: none;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.btn-descargar:hover,
.btn-descargar:focus {
  background: rgba(126, 217, 87, .18);
}

/* Presentación inicial que desaparece cuando empieza el carrusel. */
.intro {
  position: fixed;
  top: 74px;
  left: 50%;
  z-index: 40;
  width: min(90vw, 800px);
  text-align: center;
  transform: translateX(-50%);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}

body.slider-started .intro {
  opacity: 0;
  transform: translateX(-50%) translateY(-28px) scale(.96);
  filter: blur(10px);
  pointer-events: none;
}

.intro span {
  color: var(--neon);
  font-weight: 900;
  letter-spacing: 5px;
  text-shadow: 0 0 18px rgba(126, 217, 87, .8);
}

.intro h1 {
  margin-top: 10px;
  font-size: clamp(46px, 8vw, 98px);
  font-weight: 900;
  line-height: .92;
}

.intro p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .74);
  font-size: 18px;
}

/* Escenario 3D que centra las diapositivas y permite el efecto de profundidad. */
.parallax-slider {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1500px;
  padding: 88px 70px 58px;
}

.slides {
  position: relative;
  width: min(82vw, 980px);
  height: min(76vh, 720px);
  transform-style: preserve-3d;
}

/* Estado base de cada página; JavaScript asigna active, prev o next. */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(126, 217, 87, .34);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 38px rgba(126, 217, 87, .28),
    0 45px 100px rgba(0, 0, 0, .62);
  opacity: 0;
  overflow: hidden;
  filter: blur(9px) brightness(.45);
  transform: translate3d(0, 35px, -520px) rotateY(0) scale(.64);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2, .9, .2, 1), filter .85s ease;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.slide-text {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slide-text span {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(3, 17, 15, .72);
  border: 1px solid rgba(126, 217, 87, .42);
  color: var(--neon);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(126, 217, 87, .24);
}

/* La diapositiva activa queda al frente; las vecinas aparecen a los lados. */
.slide.active {
  opacity: 1;
  filter: blur(0) brightness(1.05) saturate(1.08);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 120px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(1);
  z-index: 5;
}

.slide.prev {
  opacity: .42;
  filter: blur(5px) brightness(.58);
  transform: translate3d(-42%, 18px, -230px) rotateY(34deg) scale(.78);
  z-index: 3;
}

.slide.next {
  opacity: .42;
  filter: blur(5px) brightness(.58);
  transform: translate3d(42%, 18px, -230px) rotateY(-34deg) scale(.78);
  z-index: 3;
}

/* Flechas laterales para cambiar manualmente de página. */
.nav-btn {
  position: fixed;
  top: 50%;
  z-index: 30;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(126, 217, 87, .45);
  border-radius: 50%;
  background: rgba(7, 27, 23, .55);
  color: var(--neon);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 22px rgba(126, 217, 87, .22);
}

.prev-btn {
  left: 26px;
}

.next-btn {
  right: 26px;
}

/* Ajustes para pantallas pequeñas y teléfonos. */
@media (max-width: 768px) {
  body {
    overflow-y: auto;
  }

  .btn-regresar {
    top: 16px;
    left: 16px;
    padding: 11px 17px;
    font-size: 13px;
  }

  .btn-descargar {
    top: 16px;
    right: 16px;
    padding: 11px 17px;
    font-size: 13px;
  }

  .intro {
    top: 72px;
  }

  .intro p {
    display: none;
  }

  .parallax-slider {
    padding: 120px 16px 78px;
  }

  .slides {
    width: 92vw;
    height: 62vh;
  }

  .slide.prev,
  .slide.next {
    opacity: .22;
  }

  .nav-btn {
    width: 46px;
    height: 46px;
    font-size: 34px;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }
}