@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*==================================================
=                 3. BODY
==================================================*/
/*Estiliza el fondo de la web*/
body {
    background-color: var(--color-background);
    background-image: url(../../IMG/Logo_portada.webp);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    padding:var(--space-sm);
    min-height: 100vh;
    
    /*Color y estilo de fuente*/
    color: var(--color-text-tertiary);
    font-size: var(--text-h3);
    font-family: "Changa One", sans-serif; 
}

/*=========================================
SURFACE SYSTEM
=========================================*/
.surface{
    position:relative;
    overflow:hidden;
    background:
       var(--glass-bg);
    backdrop-filter:
        blur(var(--card-blur))
        saturate(150%);
    -webkit-backdrop-filter:
        blur(var(--card-blur))
        saturate(150%);
    border:
        1px solid
        var(--glass-border);
    border-radius:
        var(--glass-radius);
    box-shadow:
        var(--shadow-medium);
    transition:
        transform
            var(--motion-normal)
            var(--ease-standard),
        box-shadow
            var(--motion-normal)
            var(--ease-standard),
        border-color
            var(--motion-fast)
            linear;
}

/*=========================================
SURFACE FEATURE
=========================================*/
.surface-feature{
    border:
        1px solid
        var(--glass-highlight);
    box-shadow:
        var(--shadow-large),
        var(--glow-red);
}

/*=========================================
SURFACE HERO
=========================================*/
.surface-hero{
    border:
        1px solid
        var(--glass-highlight);
    box-shadow:
        var(--shadow-large),
        var(--glow-red-strong);
}

.surface:hover{
    transform:
        translateY(-4px)
        scale(1.01);
    border-color:
        var(--glass-highlight);
}

/*=========================================
SURFACE REFLECTION
=========================================*/
.surface::before{
    content:"";
    position:absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:.65;
    background:
    linear-gradient(
        140deg,
        rgba(126, 91, 91, 0.301) 0%,
        rgba(124, 93, 93, 0.04) 18%,
        transparent 30%
    );
    transform:
        translateX(-30%)
        translateY(-30%)
        rotate(0deg);
    transition:
        opacity 1.45s var(--ease-smooth),
        transform 1.45s var(--ease-smooth);
}

.surface > *{
    position:relative;
    z-index:1;
}

/*=========================================
SURFACE HOVER
=========================================*/
.surface:hover::before{
    transform:
        translateX(0%)
        translateY(0%)
        rotate(0deg);
}

/*=========================================
GLOBAL VISUAL OVERLAY
=========================================*/
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(255,255,255,.08) 0%,
            rgba(255, 255, 255, 0.048) 18%,
            transparent 45%
        ),
         radial-gradient(
            circle at 50% 35%,
            rgba(209, 0, 0, 0.264) 0%,
            rgba(186, 0, 0, 0.056) 28%,
            transparent 65%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.28),
            rgba(0,0,0,.42),
            rgba(0,0,0,.60)
        );
}

/*==================================================
=                Overlay fondo y tarjetas
==================================================*/
.hero-overlay{
    width:100%;
    height:100%;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            95deg,
            rgba(2, 2, 2, 0.533) 0%,
            rgba(0, 0, 0, 0.793) 35%,
            rgba(0, 0, 0, 0.913) 65%,
            rgba(91, 0, 0, 0.352) 100%
        );
}

/*==================================================
=                 4. TIPOGRAFÍA
==================================================*/
a {
    text-decoration: none;
    color: var(--color-text-secondary);
    transition:
        color var(--motion-normal),
        text-shadow var(--motion-normal),
        transform var(--motion-normal);
}

/*Esto le da sombra a los Titulos y subtitulos*/
h1, h2, h3, h4, h5 {
    text-shadow: 6px 10px 4px var(--color-background);
}

h1{
    font-size: var(--text-display);
    margin-bottom: var(--space-sm);
}