.about-hero{

padding:180px 0 140px;

background:
linear-gradient(
180deg,
rgba(106,0,205,.04),
transparent
);

}

.hero-grid{

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:80px;

align-items:center;

}

.hero-content h1{

font-size:clamp(3rem,6vw,5rem);

line-height:1.1;

margin:
20px 0 25px;

max-width:700px;

}

.hero-content p{

font-size:1.15rem;

line-height:1.9;

color:var(--gray);

max-width:600px;

margin-bottom:35px;

}

.hero-reveal{

    opacity:0;

    transform:
    translateY(40px);

    animation:
    heroReveal 1s cubic-bezier(.16,1,.3,1)
    forwards;

}

@keyframes heroReveal{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero-visual{

display:flex;

justify-content:center;

}

.hero-card span{

font-size:1.2rem;

font-weight:700;

color:white;

}

/* ==================================
   PURPOSE
================================== */

.purpose{

padding:140px 0;

}

.purpose-content{

max-width:900px;

margin:auto;

text-align:center;

}

.purpose-content h2{

font-size:clamp(2.5rem,5vw,4rem);

margin:
20px 0 30px;

line-height:1.2;

}

.purpose-content p{

font-size:1.15rem;

line-height:2;

color:var(--gray);

margin-bottom:25px;

}

/* ==================================
   IDENTIDAD
================================== */

.identity{

padding:140px 0;

background:var(--bg-soft);

}

.identity-block{

text-align:center;

max-width:1000px;

margin:auto;

}

.krinein-word{

font-size:clamp(4rem,12vw,8rem);

letter-spacing:10px;

margin-bottom:20px;

color:var(--primary);

}

.identity-block p{

font-size:1.2rem;

color:var(--gray);

max-width:700px;

margin:auto;

line-height:1.8;

}

.identity-values{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:50px;

}

.identity-values span{

padding:
16px 26px;

border-radius:999px;

background:white;

font-weight:600;

box-shadow:
0 8px 20px rgba(0,0,0,.05);

}

/* ==================================
   IMPACTO
================================== */

.impact{

padding:140px 0;

}

.impact-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.impact-card{

text-align:center;

padding:40px 20px;

}

.impact-card h3{

font-size:3.5rem;

color:var(--primary);

margin-bottom:10px;

}

.impact-card p{

color:var(--gray);

}

/* ==================================
   METODOLOGIA
================================== */

.work-method{

padding:140px 0;

background:var(--bg-soft);

}

.method-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:25px;

margin-top:70px;

}

.method-card{

padding:40px 25px;

background:white;

border-radius:24px;

text-align:center;

font-weight:700;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

transition:.3s;

}

.method-card:hover{

transform:
translateY(-8px);

}

/* ==================================
   MISION
================================== */

.mission{

padding:140px 0;

}

.mission-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:25px;

margin-top:70px;

}

.mission-large{

grid-column:span 2;

}

.mission-card{

background:white;

padding:45px;

border-radius:28px;

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

border:
1px solid rgba(106,0,205,.08);

}

.mission-card h3{

margin-bottom:20px;

}

.mission-card p{

line-height:1.9;

color:var(--gray);

}

.mission-card ul{

padding-left:20px;

}

.mission-card li{

margin-bottom:12px;

}

/* ==================================
   TIMELINE
================================== */

.timeline-preview{

padding:140px 0;

background:var(--bg-soft);

}

.timeline-placeholder{

display:flex;

justify-content:space-between;

gap:25px;

margin-top:70px;

overflow:auto;

padding-bottom:15px;

}

.timeline-placeholder div{

min-width:240px;

padding:35px;

background:white;

border-radius:24px;

font-weight:600;

box-shadow:
0 10px 25px rgba(0,0,0,.05);

}

/* ==================================
   TRANSPARENCIA
================================== */

.transparency{

padding:140px 0;

}

.transparency-links{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:50px;

}

.transparency-links a{

padding:
18px 30px;

background:white;

border-radius:999px;

text-decoration:none;

color:var(--primary);

font-weight:600;

box-shadow:
0 8px 20px rgba(0,0,0,.05);

transition:.3s;

}

.transparency-links a:hover{

transform:
translateY(-4px);

}

/* ==================================
   TIMELINE PREMIUM
================================== */

.timeline-section{

    padding:140px 0;

    background:var(--bg-soft);

    overflow:hidden;

}

.timeline-wrapper{

    position:relative;

    margin-top:80px;

    cursor:grab;

    overflow:hidden;

}

.timeline-wrapper:active{

    cursor:grabbing;

}

/* LINEA */

.timeline-line{

    position:absolute;

    top:57px;

    left:0;

    height:4px;

    background:
    rgba(106,0,205,.15);

    border-radius:999px;

    z-index:0;

    pointer-events:none;

}

/* TRACK */

.timeline-track{

    position:relative;

    z-index:1;

    display:flex;

    gap:40px;

    padding:80px 0 40px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.timeline-track::-webkit-scrollbar{

    display:none;

}

/* ITEM */

.timeline-item{

    flex:0 0 420px;

    background:white;

    border-radius:28px;

    padding:60px 40px 40px;

    position:relative;

    z-index:2;

    scroll-snap-align:start;

    box-shadow:
    0 15px 40px rgba(0,0,0,.06);

    border:
    1px solid rgba(106,0,205,.08);

    opacity:0;

    transform:translateY(50px);

}

/* NODO */

.timeline-item::before{

    content:"";

    position:absolute;

    top:-38px;

    left:179px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--primary);

    border:5px solid white;

    box-shadow:
    0 0 0 6px rgba(106,0,205,.15);

}

/* VISIBLE */

.timeline-item.visible{

    opacity:1;

    transform:translateY(0);

    transition:
    all .8s ease;

}

/* HOVER */

.timeline-item:hover{

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);

}

/* AÑO */

.year{

    display:inline-block;

    margin-bottom:18px;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

    user-select: none;

}

/* TITULO */

.timeline-item h3{

    margin-bottom:15px;
    
    user-select: none;

}

/* TEXTO */

.timeline-item p{

    line-height:1.8;

    color:var(--gray);

    user-select: none;

}

/* TABLET */

@media(max-width:992px){

    .timeline-item{

        flex:0 0 360px;

    }

}

/* MOBILE */

@media(max-width:768px){

    .timeline-track{

        gap:25px;

        padding-top:70px;

    }

    .timeline-item{

        flex:0 0 300px;

        padding:50px 30px 30px;

    }

    .timeline-item::before{

        left:125px;

    }

}

@media (max-width: 992px) {

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .hero-content {
        margin: auto;
    }

    .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {

    .about-hero {
        padding: 100px 0 70px;
    }

    .hero-card {
        padding: 30px;
    }

    .impact-grid {
        grid-template-columns: 1fr;
    }

    .method-grid {
        grid-template-columns: 1fr;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .mission-large {
        grid-column: auto;
    }

    .krinein-word {
        letter-spacing: 3px;
    }

    .timeline-track {
        gap: 20px;
        padding-top: 60px;
    }

    .timeline-item {
        flex: 0 0 290px;
        padding: 45px 25px 30px;
    }

    .timeline-item::before {
        left: 120px;
    }

}

@media (max-width: 480px) {

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .purpose-content h2 {
        font-size: 1.8rem;
    }

    .krinein-word {
        font-size: 2.6rem;
    }

    .identity-values {
        flex-direction: column;
    }

    .identity-values span {
        width: 100%;
    }

    .timeline-item {
        flex-basis: 270px;
    }

}