@font-face {
  font-family: "Monoton";
  src:  url("../assets/fonts/Monoton.woff2") format("woff2"),
        url("../assets/fonts/Monoton.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* 
============================================================================
CODIGO PARA EL GRID DE FONDO
============================================================================
*/

:root {
  /* Fondo */
  --bg-top: #8c1eff;
  --bg-bottom: #540d6e;

  /* Grid */
  --grid-color: #f222ff;
  /*--grid-glow: 0 0 8px rgba(255, 52, 179, 0.55),
                0 0 18px rgba(255, 52, 179, 0.35),
                0 0 32px rgba(255, 52, 179, 0.18); */

  /* Separación de líneas */
  --grid-size-x: 30px;
  --grid-size-y: 30px;

  /* Perspectiva general */
  --perspective: 3000px;
  --rotate-x: 85deg;

  /* Control fino del “ángulo” visual */
  --skew-x: 0deg;
  --skew-y: 0deg;

  /* Altura visible del grid */
  --grid-height: 120vh;

  /* Intensidad visual */
  --grid-opacity: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  z-index: 0;
  position: relative;
  /* background: #0d0221; */
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  margin-bottom: -20px;
}

/* Fondo base */
.bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 80, 180, 0.08), transparent 35%),
    linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  z-index: 0;
}

/* Contenedor del grid */
.grid-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20vh;
  height: var(--grid-height);
  perspective: var(--perspective);
  perspective-origin: center top;
  z-index: 1;
  overflow: hidden;
}

/* Plano del grid */
.grid {
  transform-origin: center top;
  position: absolute;
  left: -25%;
  right: -25%;
  top: 0%;
  bottom: 0%;

  opacity: var(--grid-opacity);

  transform:
    rotateX(var(--rotate-x))
    skewX(var(--skew-x))
    skewY(var(--skew-y))
    scale(2);

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--grid-size-x) - 0.5px),
      var(--grid-color) calc(var(--grid-size-x) - 0.5px),
      var(--grid-color) var(--grid-size-x)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--grid-size-y) - 0.5px),
      var(--grid-color) calc(var(--grid-size-y) - 0.5px),
      var(--grid-color) var(--grid-size-y)
    );

  filter: drop-shadow(0 0 4px rgba(255, 52, 179, 0.3))
          drop-shadow(0 0 12px rgba(255, 52, 179, 0.12));
}

/* Fade para que el grid se pierda hacia el horizonte */
.grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 2, 33, 0) 0%,
    rgba(13, 2, 33, 0.12) 35%,
    rgba(13, 2, 33, 0.45) 60%,
    rgba(13, 2, 33, 0.92) 100%
  );
  pointer-events: none;
}
/* =======================================================================
      MONTAÑAS
    =======================================================================
*/
.mountains {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 99vh;
  height: 40vh;
  z-index: 2;
  overflow: hidden;
}

.mountain {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  background: #120a28;
}

.mountain.back {
  height: 100%;
  /* background: #00ccfd; */
  background: #6878e2;
  opacity: 1;
    clip-path: polygon(
    0% 100%,
    6% 9%, 
    16% 51%, 
    25% 10%, 
    31% 40%, 
    40% 6%, 
    53% 76%, 
    65% 15%, 
    75% 37%, 
    85% 15%, 
    90% 37%, 
    100% 14%, 
    100% 99%
  );
}

.mountain.mid1 {
  height: 80%;
  background: #106FD0;
  opacity: 1;
    clip-path: polygon(
    0% 17%, 
    5% 67%, 
    14% 29%, 
    21% 58%, 
    29% 27%, 
    34% 58%, 
    43% 48%, 
    50% 54%, 
    60% 34%, 
    66% 61%, 
    74% 23%, 
    78% 60%, 
    92% 20%, 
    98% 57%, 
    100% 19%, 
    100% 100%, 
    0% 100%
  );
}

.mountain.mid2 {
  height: 60%;
  background: #2011A2;
  opacity: 1;
    clip-path: polygon(
    0% 63%, 
    7% 27%, 
    17% 62%, 
    25% 40%, 
    31% 49%, 
    36% 42%, 
    41% 25%, 
    43% 61%, 
    51% 14%, 
    56% 54%, 
    61% 29%, 
    69% 32%, 
    81% 18%, 
    94% 62%, 
    100% 26%, 
    100% 100%, 
    0% 100%
  );
}

.mountain.mid3 {
  height: 40%;
  background: #201175;
  opacity: 1;
    clip-path: polygon(
    0% 76%, 
    7% 13%, 
    15% 60%, 
    20% 30%, 
    24% 66%, 
    29% 23%, 
    36% 58%, 
    42% 35%, 
    48% 63%, 
    56% 80%, 
    62% 39%, 
    67% 71%, 
    73% 36%, 
    78% 19%, 
    87% 57%, 
    91% 32%, 
    94% 67%, 
    100% 22%, 
    100% 100%, 
    0% 100%
  );
}

.mountain.front {
  height: 20%;
  background: #201148;
  opacity: 1;
    clip-path: polygon(
    0% 12%, 
    5% 75%, 
    13% 28%, 
    19% 66%, 
    23% 12%, 
    30% 73%, 
    37% 22%, 
    42% 72%, 
    53% 38%, 
    60% 51%, 
    68% 39%, 
    76% 66%, 
    83% 24%, 
    88% 64%, 
    96% 16%, 
    100% 52%, 
    100% 100%, 
    0% 100%
  );
}

.mountains::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  
}

.sun {
  position: absolute;
  left: 50%;
  bottom: 14vh; /* ajuste fino */
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;

  background: radial-gradient(circle, #fff 0%, #ffe066 35%, #ffb300 70%, #ff7a00 100%);

  box-shadow:
    0 0 10px rgba(255, 255, 200, 0.6),
    0 0 25px rgba(255, 220, 120, 0.5),
    0 0 60px rgba(255, 180, 80, 0.35),
    0 0 120px rgba(255, 140, 40, 0.2);
}


/* ==========================================================================
  Author's custom styles
   ========================================================================== */

  #top{
    border-style: solid;
    border-width: 2px;
    border-color: #000;
  }

  #hero{
    border-style: solid;
    border-width: 2px;
    border-color: #000;

    margin-top: -7px;
    margin-left: -7px;
    margin-right: -7px;

    min-height: 100vh;
  }

  #titulo_pt1{
    font-family: "Monoton";
    font-size: 100px;
    font-style: normal;
    text-align: center;
    margin-top: 150px;
  color: #fffdf5;
  

  /*text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 200, 0.8),
    0 0 16px rgba(255, 240, 150, 0.7),
    0 0 32px rgba(255, 220, 100, 0.5),
    0 0 64px rgba(255, 200, 50, 0.3);
  */}

    #titulo_pt2{
    font-family: "Monoton";
    font-size: 100px;
    font-style: normal;
    text-align: center;
    margin-top: -70px;
  color: #fffdf5;
  

  /*text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 200, 0.8),
    0 0 16px rgba(255, 240, 150, 0.7),
    0 0 32px rgba(255, 220, 100, 0.5),
    0 0 64px rgba(255, 200, 50, 0.3); */
  }