/* ----------------------------------------
   CONFIGURACIÓN GENERAL
---------------------------------------- */

/* Eliminamos los márgenes que pone el navegador por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* La página ocupa toda la pantalla */
html,
body {
    width: 100%;
    height: 100%;
}

/* Configuración general del cuerpo */
body {
    position: relative;
    overflow: hidden;

    /* Fondo base */
    background: #fbfaf8;

    /* Tipografía sencilla */
    font-family: "Economica", Arial, sans-serif;

    color: #222;
}


/* ----------------------------------------
   NEBULOSA
---------------------------------------- */

/* Contenedor general de la nebulosa */
.nebula {
    position: fixed;

    /* Ocupa toda la pantalla */
    inset: 0;

    /* La nebulosa queda detrás del contenido */
    z-index: 0;

    /* No interfiere con el ratón */
    pointer-events: none;

    /* Recortamos cualquier parte que salga de la pantalla */
    overflow: hidden;
}


/* ----------------------------------------
   CAPAS DE COLOR
---------------------------------------- */

/* Manchas degradadas distribuidas por toda la pantalla. */
.nebula-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112vmin;
    height: 112vmin;
    border-radius: 50%;
    filter: blur(34px) saturate(1.35);
    opacity: 0.78;
    will-change: transform;
    transform-origin: center;
}

.nebula-turquoise { background: radial-gradient(ellipse, rgba(80, 225, 194, .88) 0%, rgba(80, 225, 194, .58) 24%, transparent 69%); }
.nebula-violet { background: radial-gradient(ellipse, rgba(159, 117, 240, .86) 0%, rgba(159, 117, 240, .56) 24%, transparent 69%); }
.nebula-pink { background: radial-gradient(ellipse, rgba(245, 112, 183, .84) 0%, rgba(245, 112, 183, .54) 24%, transparent 69%); }
.nebula-blue { background: radial-gradient(ellipse, rgba(84, 174, 247, .86) 0%, rgba(84, 174, 247, .56) 24%, transparent 69%); }
.nebula-coral { background: radial-gradient(ellipse, rgba(255, 128, 96, .82) 0%, rgba(255, 128, 96, .52) 24%, transparent 69%); }
.nebula-lime { background: radial-gradient(ellipse, rgba(177, 222, 85, .78) 0%, rgba(177, 222, 85, .48) 24%, transparent 69%); }
.nebula-indigo { background: radial-gradient(ellipse, rgba(103, 111, 235, .84) 0%, rgba(103, 111, 235, .54) 24%, transparent 69%); }
.nebula-gold { background: radial-gradient(ellipse, rgba(255, 199, 68, .82) 0%, rgba(255, 199, 68, .52) 24%, transparent 69%); }

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .nebula-layer {
        width: 100vmin;
        height: 100vmin;
        filter: blur(25px) saturate(1.35);
        opacity: 0.72;
    }
}
/* ----------------------------------------
   CONTENIDO PRINCIPAL
---------------------------------------- */

.hero {
    position: relative;

    /* Lo colocamos por encima de la nebulosa */
    z-index: 1;

    /* Ocupa toda la pantalla */
    width: 100%;
    height: 100vh;

    /* Centramos el contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}


/* Nombre de la marca */

.hero h1 {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.02em;
}


/* Texto secundario */

.hero p {
    margin-top: 1rem;

    font-size: 1rem;
    font-weight: 400;
}


/* Enlace de contacto */

.hero a {
    margin-top: 2rem;

    color: inherit;
    text-decoration: none;

    font-size: 0.95rem;
}


/* Pequeño efecto al pasar por encima */

.hero a:hover {
    opacity: 0.5;
}