/*==========================================================
PUENTE DEL INCA
DESIGN SYSTEM
04. COMPONENTS
==========================================================*/

/*==========================================================
TÍTULOS
==========================================================*/

.pi-eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--pi-accent);

}

.pi-title{

    font-family:var(--font-heading);

    font-size:var(--fs-h2);

    line-height:var(--lh-heading);

    font-weight:400;

    color:var(--pi-primary);

    margin-bottom:1.5rem;

}

.pi-title--light{

    color:#FFF;

}

.pi-subtitle{

    max-width:720px;

    font-size:1.15rem;

    color:var(--pi-text-light);

    line-height:1.9;

}

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

.pi-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    height:58px;

    padding:0 36px;

    border-radius:999px;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.02em;

    text-decoration:none;

    transition:all .45s cubic-bezier(.19,1,.22,1);

    cursor:pointer;

}

.pi-btn,
.pi-btn:visited{

    color:#F7F4EE;

}

.pi-btn:hover,
.pi-btn:focus{

    color:#F7F4EE;

    text-decoration:none;

}

.pi-btn-primary{

    background:var(--pi-primary);

    color:#F7F4EE;

    box-shadow:0 12px 28px rgba(0,0,0,.18);

}

.pi-btn-primary:hover{

    background:#295051;

    color:#F7F4EE;

    transform:translateY(-2px);

    box-shadow:0 20px 40px rgba(0,0,0,.22);

}

.pi-btn-secondary{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.28);

    backdrop-filter:blur(16px);

    color:#F7F4EE;

}

.pi-btn-secondary:hover{

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.55);

    color:#F7F4EE;

    transform:translateY(-2px);

    box-shadow:0 14px 35px rgba(0,0,0,.14);

}

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

.pi-image{

    overflow:hidden;

    border-radius:var(--radius-lg);

}

.pi-image img{

    width:100%;

    transition:transform .8s ease;

}

.pi-image:hover img{

    transform:scale(1.04);

}

/*==========================================================
CARDS
==========================================================*/

.pi-card{

    background:#FFF;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.pi-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}