/* ====================================
   VARIABLES GLOBALES YACHAY
==================================== */

:root{

    /* Colores principales */

    --primario:#14532D;
    --secundario:#16A34A;
    --acento:#22C55E;

    /* Colores de apoyo */

    --oscuro:#0F172A;
    --oscuro-2:#1E293B;

    --gris:#64748B;
    --gris-claro:#CBD5E1;

    --blanco:#FFFFFF;

    --fondo:#F8FAFC;

    /* Sombras */

    --sombra-sm:
    0 5px 15px rgba(0,0,0,.08);

    --sombra-md:
    0 10px 30px rgba(0,0,0,.10);

    --sombra-lg:
    0 20px 50px rgba(0,0,0,.15);

    /* Glow */

    --glow:
    0 0 25px rgba(34,197,94,.35);

    /* Bordes */

    --radio-sm:12px;
    --radio-md:20px;
    --radio-lg:30px;

    /* Transiciones */

    --transition:.35s ease;

}

/* ====================================
   RESET
==================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--fondo);

    color:var(--oscuro);

    overflow-x:hidden;

    line-height:1.7;

}

/* ====================================
   CONTENEDORES
==================================== */

.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}

/* ====================================
   IMÁGENES
==================================== */

img{

    max-width:100%;

    display:block;

}

/* ====================================
   LINKS
==================================== */

a{

    text-decoration:none;

    transition:var(--transition);

}

/* ====================================
   LISTAS
==================================== */

ul{

    list-style:none;

}

/* ====================================
   BOTONES GENERALES
==================================== */

.btn-primary{

    display:inline-block;

    padding:16px 35px;

    border-radius:14px;

    color:rgb(143, 139, 139);

    font-weight:600;

   

}

.btn-primary:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 40px rgb(151, 153, 152);

}

.btn-secondary{

    display:inline-block;

    padding:16px 35px;

    border-radius:14px;

    border:2px solid white;

    color:white;

    font-weight:600;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:white;

    color:var(--primario);

}

/* ====================================
   TITULOS GENERALES
==================================== */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--acento);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-title h2{

    font-size:3rem;

    margin:15px 0;

    color:var(--oscuro);

}

.section-title p{

    max-width:750px;

    margin:auto;

    color:var(--gris);

}

/* ====================================
   TARJETAS GENERALES
==================================== */

.card{

    background:white;

    border-radius:25px;

    box-shadow:var(--sombra-md);

    transition:var(--transition);

}

.card:hover{

    transform:
    translateY(-10px);

}

/* ====================================
   GLOW EFECTO
==================================== */

.glow-card{

    position:relative;

    overflow:hidden;

}

.glow-card::before{

    content:'';

    position:absolute;

    left:var(--mouse-x);

    top:var(--mouse-y);

    width:250px;
    height:250px;

    transform:
    translate(-50%,-50%);

    background:
    radial-gradient(
    circle,
    rgba(34,197,94,.35),
    transparent 70%
    );

    opacity:var(--glow-opacity,0);

    pointer-events:none;

    transition:opacity .3s;

}

/* ====================================
   REVEAL ANIMATION
==================================== */

.reveal{

    opacity:0;

    transform:
    translateY(50px);

    transition:
    all .9s ease;

}

.reveal.active{

    opacity:1;

    transform:
    translateY(0);

}

/* ====================================
   ESTADÍSTICAS
==================================== */

.counter{

    font-size:3rem;

    font-weight:700;

    color:var(--acento);

}

/* ====================================
   SCROLLBAR
==================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#e2e8f0;

}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    var(--primario),
    var(--acento)
    );

    border-radius:20px;

}

/* ====================================
   SELECCIÓN DE TEXTO
==================================== */

::selection{

    background:var(--acento);

    color:white;

}

/* ====================================
   ANIMACIONES
==================================== */

@keyframes float{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-20px);

    }

    100%{

        transform:
        translateY(0);

    }

}

@keyframes glow{

    0%{

        filter:
        drop-shadow(
        0 0 0 rgba(34,197,94,.2)
        );

    }

    50%{

        filter:
        drop-shadow(
        0 0 40px rgba(34,197,94,.5)
        );

    }

    100%{

        filter:
        drop-shadow(
        0 0 0 rgba(34,197,94,.2)
        );

    }

}