/* ==========================================================================
   1. FUENTES GENERALES
   ========================================================================== */
    @font-face {
        font-family: Jost-Regular;
        src: url(../fonts/Jost-Regular.woff2);
    }

    @font-face {
        font-family: Jost-Thin;
        src: url(../fonts/Jost-Thin.woff2);
    }

    @font-face {
        font-family: Jost-Light;
        src: url(../fonts/Jost-Light.woff2);
    }
     @font-face {
        font-family: Lumen-Title;
        src: url(../fonts/lumen-title.woff2);
    }

/* ==========================================================================
   2. ESTILOS GLOBALES
   ========================================================================== */

body {
  font-family: Jost-Regular, system-ui, sans-serif;
  background-color: #000000;
  color: #ffffff;

  width: 100vw;
  height: 100vh;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;


}

h1 {
  font-size: 2.5rem;
}

a {
  text-decoration: none;
}

header{
    width: 100%; /* 100% y no 100vw: 100vw incluye la barra de scroll y provoca scroll horizontal */
    padding-inline: 1rem; /* margen lateral para que nada toque los bordes en móvil */
    padding-top: clamp(1.25rem, 3vw, 2.5rem); /* separa el título del borde superior */
    }

footer{
    width: 100%;
    padding-inline: 1rem;
    padding-bottom: clamp(0.5rem, 1.25vw, 1rem); /* separa el pie del borde inferior */
    }

/* ==========================================================================
   3. COMPONENTES (Clases particulares,Ids, tarjetas, etc.)
   ========================================================================== */

  /* clamp(mínimo, preferido, máximo): el tamaño crece con la pantalla (vw)
     pero nunca baja del mínimo ni pasa del máximo */
  .titulo-web{
    font-family: Lumen-Title;

    /* Única escala fluida: todo lo demás va en em (relativo a este tamaño), así que escala solo */
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    line-height: 1; /* sin espacio extra entre líneas: el subtítulo queda pegado a LUMEN */

    position: relative; /* los ::before/::after (absolute) se colocan respecto al título */
    isolation: isolate; /* crea su propia capa: el z-index: -1 del haz no se va detrás del body */
    width: fit-content; /* el h1 mide lo que el texto, así los % del haz son % del título */
    margin-inline: auto; /* centra el h1 en horizontal */

    display: flex;
    flex-direction: column;
    align-items: center; /* centra los hijos */
    text-align: center; /* centra el texto dentro de los span */
  }

  .titulo-web__titulo{
    display: block;

    font-size: 1em;
    letter-spacing: 0.86em; /* espacio entre letras; en em para que escale con la fuente */
    margin-right: -0.86em; /* compensa el hueco que deja el letter-spacing tras la última letra */
  }

  /* Anchos calibrados con las métricas reales de Lumen-Title (ambas líneas usan esa fuente):
     si cambias font-size, letter-spacing o word-spacing de uno, hay que recalcular el otro */
  .titulo-web__subtitulo{
    display: block;

    font-size: 0.25em; /* un cuarto del tamaño de LUMEN */
    letter-spacing: 0.615em; /* separación calculada para igualar el ancho de LUMEN */
    word-spacing: 0.4em; /* espacio extra entre palabras */
    margin-right: -0.615em; /* igual que en el título: quita el hueco tras la última letra */
    margin-top: 0.1em;
    translate: 0.1em 0; /* compensa el margen lateral de los glifos de LUMEN para centrar ópticamente */
  }

  /* Haz de luz bajo el subtítulo, ajustado al perfil del prototipo:
     ::after es el núcleo (rectángulo con blur que la perspectiva convierte en trapecio)
     y ::before el halo amplio y tenue que alarga la caída. Todo en em/%, escala con el h1 */
  .titulo-web::before,
  .titulo-web::after{
    content: ""; /* sin content, un pseudoelemento no se dibuja */
    position: absolute; /* fuera del flujo: no empuja al resto del contenido */
    z-index: -1; /* detrás del texto; contenido por el isolation del h1 */
    pointer-events: none; /* no bloquea clics */

    top: calc(100% - 0.4em); /* arranca por detrás del subtítulo */
    left: 50%; /* junto con translateX(-50%) lo centra respecto al título */
  }

  .titulo-web::after{
    width: 44%;
    height: 2.2em;

    /* Girar el rectángulo en 3D hace que la parte de abajo "se acerque" y se vea más ancha:
       así sale el trapecio. transform-origin fija el giro en el borde superior */
    transform-origin: 50% 0;
    transform: translateX(-50%) perspective(2.6em) rotateX(46deg);

    /* La luz se apaga de arriba abajo; cada línea es un color y el % donde aparece */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(255, 255, 255, 0.78) 30%,
      rgba(255, 255, 255, 0.36) 60%,
      rgba(255, 255, 255, 0.06) 85%,
      transparent 100%
    );
    filter: blur(0.33em); /* sin máscara: una máscara recortaría el blur y endurecería los bordes */
  }

  .titulo-web::before{
    width: min(230%, 100vw - 2rem); /* nunca más ancho que la pantalla: sin scroll horizontal */
    height: 7em;
    transform: translateX(-50%);

    /* Elipse centrada en el borde superior: brilla arriba y se apaga hacia fuera */
    background: radial-gradient(
      ellipse 50% 100% at 50% 0%,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.045) 35%,
      rgba(255, 255, 255, 0.016) 65%,
      transparent 100%
    );
    /* La máscara deja ver solo donde es opaca: aquí desvanece el borde superior para que no sea una línea recta */
    mask-image: linear-gradient(to bottom, transparent 0%, #000 1.2em);
  }

  .pie-pagina{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
   .titulo_footer{
    font-family: Jost-Thin;

    display: flex;

    }