/* ==========================================================
   TRINITY ECUADOR
   HERO.CSS
==========================================================*/

/*==========================================================
  HERO
==========================================================*/

.hero{

    position:relative;

    min-height:100vh - 90px;

    display:flex;

    align-items:center;

    padding-top:30px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f4f8fd 45%,
        #eef5ff 100%
    );

}

.hero-container{

    padding-top: 0px;

}

/*==========================================================
  BACKGROUND
==========================================================*/

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

/*==========================================================
  CONTENIDO
==========================================================*/

.hero-content{

    position:relative;

    z-index:5;

}

/*==========================================================
  LABEL
==========================================================*/

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(47,128,237,.10);

    color:var(--color-primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:30px;

}

.hero-label::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--color-success);

}

/*==========================================================
  TITULO
==========================================================*/

.hero-content h2{

    font-size:68px;

    font-weight:800;

    line-height:1.2;

    color:var(--gray-900);

    margin-bottom:35px;

}

.hero-content h2 span{

    color:var(--color-primary);

}

/*==========================================================
  TEXTO
==========================================================*/

.hero-content p{

    font-size:20px;

    color:var(--gray-500);

    max-width:620px;

    margin-top:15px;
    
    margin-bottom:25px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:30px;

}

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

.hero-stats{

    display:flex;

    gap:60px;

}

.stat{

    position:relative;

}

.stat::after{

    content:"";

    position:absolute;

    right:-30px;

    top:10px;

    width:1px;

    height:55px;

    background:var(--color-border);

}

.stat:last-child::after{

    display:none;

}

.stat h2{

    font-size:44px;

    color:var(--color-primary);

    margin-top: 10PX;
    
    margin-bottom:5px;

    text-align: center;

}

.stat p{

    margin:0;

    font-size:15px;

    color:var(--gray-500);

    text-align: center;

}

/*==========================================================
  IMAGEN
==========================================================*/

.hero-image{

    
    
    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==========================================================
  TARJETA
==========================================================*/

.image-card{

    position:relative;

    width:100%;

    max-width:620px;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:0 35px 80px rgba(15,76,129,.18);

}

/*==========================================================
  IMAGEN
==========================================================*/

.image-card img{

    display:block;

    width:100%;

}

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

.image-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,0) 0%,

        rgba(15,76,129,.05) 100%

    );

    z-index:2;

}

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

.image-card::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(47,128,237,.18);

    filter:blur(120px);

    z-index:-1;

    bottom:-120px;

    right:-120px;

}

/*==========================================================
  SCROLL
==========================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    color:var(--gray-500);

    font-size:14px;

    letter-spacing:2px;

}

/*==========================================================
  DECORACIÓN
==========================================================*/

.hero::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:45%;

    height:100%;

    background:linear-gradient(

        135deg,

        rgba(47,128,237,.03),

        rgba(15,76,129,.06)

    );

    clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%);

}

/*==========================================================
  ANIMACIÓN DE ENTRADA
==========================================================*/

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1.2s ease;

}

/*==========================================================
  RESPONSIVE BÁSICO
==========================================================*/

@media(max-width:1100px){

.hero-content h1{

    font-size:54px;

}

.hero-container{

    gap:50px;

}

}

@media(max-width:900px){

.hero{

    padding-top:140px;

    min-height:auto;

}

.hero-container{

    grid-template-columns:1fr;

}

.hero-content{

    text-align:center;

}

.hero-content p{

    margin:auto auto 40px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-image{

    margin-top:60px;

}

}