/* =========================================================
   ABOUT PAGE (about.css)
   - Organized by sections
   - Responsive rules grouped at the end
========================================================= */

/* ===== HERO ===== */
.about-hero{
    padding: 3rem 0;
    background-color: #f5f5f5;
    height: auto;
}

.about-hero__container{
    display: grid;
    gap: 22px;
    align-items: center;
}

.about-hero__content h1{
    margin: 0 0 10px;
    line-height: 1.05;
    font-size: clamp(24px, 3vw, 36px);
}

.about-hero__content .lead{
    margin: 0 0 18px;
    max-width: 70ch;
    line-height: 1.65;
    opacity: .9;
}

.about-hero__actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.about-hero__badges{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-top: 16px;
}

.about-hero__media{
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    background: #f4f6f4;
}

/* video (hero) */
.about-hero__media video{
    width: 100%;
    height: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: right center;
    display: block;
}

/* ===== REVEAL (lazy-down) ===== */
.reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
}

.reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .reveal{
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* ===== STORY ===== */
.story{
    margin-top: 18px;
    display: grid;
    gap: 18px;
}

/* Story image */
.story__image{
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.story__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;      /* CLAVE para vertical */
    object-position: center;
    display: block;

    /* look más editorial */
    filter: saturate(.85) contrast(.95);
    transform: scale(1.02);
}

.story_text_grid{
    display: grid;
    gap: 12px;
}

.story__text{
    padding: 18px;
    height: 100%;
    align-content: center;
}

.story__text p{
    margin: 0 0 12px;
    line-height: 1.75;
    opacity: .9;
}
.story__text p:last-child{ margin-bottom: 0; }

/* Timeline */
.timeline{ padding: 18px; }

.timeline h3{
    margin: 0 0 12px;
    color: var(--green);
}

.timeline__item{
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,.06);
}

.timeline__item_grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
    margin-top: 4px;
    box-shadow: 0 0 0 4px rgba(47,107,74,.12);
}

.timeline__title{
    margin: 0;
    font-weight: 800;
}

.timeline__desc{
    margin: 4px 0 0;
    opacity: .85;
    line-height: 1.6;
}

/* ===== MVV (Mission / Vision / Values) ===== */
.mvv-circles{
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.mvv-circle{
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.mvv-circle:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mvv-circle__icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 24px;
    color: #fff;
    background-color: var(--green);
}

.mvv-circle h3{
    text-align: center;
    color: #2d3436;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.mvv-circle p{
    color: #636e72;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

.mvv-circle ul{
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    text-align: left;
}

.mvv-circle li{
    margin-bottom: 0.5rem;
    color: #636e72;
    position: relative;
    padding-left: 1.5rem;
}

.mvv-circle li:before{
    content: "♻️";
    color: #2f6b4a;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* ring not needed */
.mvv-circle__ring{ display: none; }

/* ===== TEAM (profile style) ===== */
.team--grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    max-width: 820px;
    margin: 26px auto 0;
    gap: 20px;
}

.team-card--profile{
    text-align: center;
    padding: 10px 10px 0;
}

.team-card__avatar{
    width: 250px;
    height: 250px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #eef2f7;
    padding: 10px;
    transition: transform .2s ease;
}

.team-card__avatar:hover{ transform: scale(1.05); }

.team-card__avatar img{
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.team-card__name{
    margin: 6px 0 4px;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
}

.team-card__role{
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--green);
}

.team-card__desc{
    margin: 0 auto 14px;
    max-width: 340px;
    font-size: 13px;
    line-height: 1.7;
    opacity: .82;
    font-style: italic;
}

.team-card__social{
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 8px;
}

.social{
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #111827;
    background: #eef2f7;
    font-weight: 800;
    font-size: 12px;
    transition: transform .15s ease, background .15s ease;
}

.social:hover{
    transform: translateY(-2px);
    background: #e5e7eb;
}

/* ===== WHY BAND ===== */
.why-band{
    padding: 3.2rem 0;
}

.why-band__visual{
    border-radius: 18px;
    overflow: hidden;
}

.why-band__image{
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.why-band__banner{
    border-radius: 18px;
    padding: 1.4rem;
    background: linear-gradient(180deg, rgba(47,107,74,.12), rgba(47,107,74,.12));
    text-align: center;
}

.why-band__quote{
    position: relative;
    margin: 0;
    padding: 1.2rem;
    text-align: center;
    line-height: 1.4;
    color: rgba(0,0,0,.78);
}

.why-band__head{
    margin-top: 22px;
}

.why-band__head h2{
    margin: 0 0 10px;
    line-height: 1.15;
}

.why-band__head .sub{
    margin: 0;
    opacity: .85;
    line-height: 1.6;
    max-width: 70ch;
}

.why-band__row{
    margin-top: 18px;
    border-radius: 16px;
    background: #f3faf6;
    border: 1px solid rgba(47,107,74,.12);
    padding: 14px 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.why-band__item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
}

.why-band__icon{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 3px solid rgba(47,107,74,.95);
    color: rgba(47,107,74,.95);
    background: #fff;
    flex-shrink: 0;
}

.why-band__icon i{ font-size: 18px; }

.why-band__text{
    font-weight: 700;
    color: rgba(0,0,0,.75);
}

.why-band__sep{
    display: none;
    width: 1px;
    background: rgba(0,0,0,.10);
}

/* ===== Responsive (MOBILE / TABLET / DESKTOP) ===== */
/* Small phones */
@media (max-width: 480px){
    .about-hero{ padding: 2.2rem 0; }
    .about-hero__media video{ min-height: 210px; }
}

/* Tablet */
@media (min-width: 768px){
    .mvv-circles{ grid-template-columns: repeat(3, 1fr); }
}

/* Team stack */
@media (max-width: 820px){
    .team--grid{ grid-template-columns: 1fr; gap: 24px; }
    .team-card__avatar{ width: 140px; height: 140px; }
}

/* Desktop layouts */
@media (min-width: 900px){
    .about-hero__container{ grid-template-columns: 1.5fr .8fr; }

    .story{
        grid-template-columns: .35fr 1fr;
        align-items: start;
    }

    .story_text_grid{
        grid-template-rows: 1fr 1fr;
    }

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

    .why-band__row{
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 0;
        padding: 16px 18px;
    }

    .why-band__sep{
        display: block;
        height: 44px;
        justify-self: center;
    }

    .why-band__item{
        justify-content: center;
        padding: 10px 8px;
    }
}