/* =========================================================
   TOCA DA KURAMA — SOBRE NÓS
   Página editorial / institucional da marca.
   Carregar DEPOIS de style.css.
   ========================================================= */

.about-page {
    overflow-x: hidden;
    background: #f7f3e9;
    color: var(--dark);
}

/* =========================================================
   PROGRESSO DA PÁGINA
   Controlado pelo GSAP/ScrollTrigger.
   ========================================================= */

.about-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;
    height: 2px;

    background: var(--orange);

    transform: scaleX(0);
    transform-origin: left center;

    pointer-events: none;
    will-change: transform;
}

/* O espaçamento lateral é herdado do .site-shell global. */

/* HERO */

.about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(70px,8vw,132px) 0 clamp(92px,10vw,160px);
    background: linear-gradient(180deg, #f8f4e9 0%, #f2eadc 100%);
}

.about-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-orb-one {
    top: -210px;
    right: -130px;
    width: 580px;
    height: 580px;
    background: rgba(217,104,18,.07);
}

.about-orb-two {
    bottom: -180px;
    left: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(104,112,74,.16);
}

.about-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
    align-items: center;
    gap: clamp(52px,7vw,110px);
}

.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #777166;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.about-eyebrow span {
    width: 32px;
    height: 1px;
    background: var(--orange);
}

.about-hero-copy h1 {
    max-width: 690px;
    margin: 0;
    color: #1b1c18;
    font-size: clamp(4rem,7.1vw,7.3rem);
    font-weight: 950;
    line-height: .88;
    letter-spacing: -.07em;
}

.about-hero-title-line {
    display: block;
}

.about-hero-title-line-dark {
    color: #1b1c18;
}

.about-hero-title-line-accent {
    color: var(--orange);
}

.about-hero-lead {
    max-width: 650px;
    margin: 34px 0 0;
    color: #59574f;
    font-size: clamp(1.05rem,1.4vw,1.24rem);
    line-height: 1.85;
}

.about-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 34px;
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #26271f;
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.about-text-link:hover {
    gap: 12px;
    color: var(--orange);
}

.about-hero-meta {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-width: 590px;
    margin-top: 56px;
    border-top: 1px solid rgba(26,26,23,.12);
}

.about-hero-meta > div {
    display: flex;
    flex-direction: column;
    padding: 21px 28px 0 0;
}

.about-hero-meta > div + div {
    padding-left: 28px;
    border-left: 1px solid rgba(26,26,23,.12);
}

.about-hero-meta span {
    color: var(--orange);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.about-hero-meta strong {
    margin-top: 4px;
    color: #22231e;
    font-size: 1.16rem;
    font-weight: 900;
}

.about-hero-meta small {
    margin-top: 3px;
    color: #7b776f;
    font-size: .75rem;
}

/* FOTO HERO */

.about-hero-visual {
    position: relative;
    min-height: 690px;
}

.about-hero-photo {
    position: absolute;
    inset: 0 36px 52px 0;
    overflow: hidden;
    border-radius: 6px 90px 6px 6px;
    background: linear-gradient(145deg,#ddd4c3,#c9bfaa);
    box-shadow: 0 38px 80px rgba(37,34,27,.16);
}

.about-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,transparent 55%,rgba(20,21,17,.30) 100%);
}

.about-hero-photo > img,
.about-aside-photo > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-photo-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 30px;
    color: #706b60;
    text-align: center;
}

.is-missing .about-photo-fallback { display: flex; }

.about-photo-fallback img {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    object-fit: cover;
    opacity: .84;
}

.about-photo-fallback span {
    font-size: .77rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.about-photo-fallback small { font-size: .70rem; }

.about-hero-stamp {
    position: absolute;
    top: 34px;
    right: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: #25291e;
    color: #f4efe5;
    box-shadow: 0 18px 40px rgba(26,26,23,.22);
    transform: rotate(7deg);
    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .about-hero-stamp:hover {
        transform: rotate(3deg) scale(1.035);
        box-shadow: 0 22px 48px rgba(26,26,23,.27);
    }
}

.about-hero-stamp span {
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.about-hero-stamp strong {
    margin: 4px 0;
    font-size: 1.45rem;
}

.about-hero-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(350px,74%);
    padding: 22px 25px;
    border-radius: 22px 4px 4px 4px;
    background: var(--orange);
    color: #fff;
    box-shadow: 0 18px 42px rgba(185,79,11,.20);
}

.about-hero-caption span {
    display: block;
    margin-bottom: 6px;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.about-hero-caption p {
    margin: 0;
    font-size: .90rem;
    font-weight: 700;
    line-height: 1.55;
}

/* MANIFESTO */

.about-manifesto {
    position: relative;
    z-index: 3;

    background: #f2eadc;
}

.about-manifesto-stage {
    position: relative;

    min-height: 175vh;
}

.about-manifesto-inner {
    position: sticky;
    top: 92px;

    min-height: calc(100vh - 128px);

    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;

    gap: clamp(26px, 4vw, 70px);

    padding: clamp(52px, 6vw, 86px);

    overflow: hidden;

    border-radius: 4px 4px 70px 4px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(217, 104, 18, .13),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #282c20 0%,
            #1d2018 100%
        );

    color: #f6f1e7;
}

.about-manifesto-inner::after {
    content: "";

    position: absolute;
    right: -8%;
    bottom: -32%;

    width: min(44vw, 650px);
    aspect-ratio: 1;

    border: 1px solid rgba(231, 174, 116, .10);
    border-radius: 50%;

    pointer-events: none;
}

.about-manifesto-mark {
    position: relative;
    z-index: 2;

    align-self: start;

    color: var(--orange);

    font-family: var(--font-family-display);
    font-size: clamp(6rem, 11vw, 10rem);
    line-height: .75;
}

.about-manifesto-text {
    position: relative;
    z-index: 2;

    max-width: 1100px;

    margin: 0;

    font-size: clamp(2rem, 4.15vw, 4.65rem);
    font-weight: 800;

    line-height: 1.04;
    letter-spacing: -.045em;
}

.about-manifesto-line {
    display: block;
}

.about-manifesto-line + .about-manifesto-line {
    margin-top: .06em;
}

.about-manifesto-line-accent {
    margin-top: .18em;
}

.about-manifesto-line-accent strong {
    color: #e7ae74;
    font-weight: 900;
}

/* =========================================================
   MANIFESTO — TABLET / MOBILE
   No mobile não alongamos artificialmente a rolagem.
   ========================================================= */

@media (max-width: 991px) {

    .about-manifesto {
        padding: 0 0 100px;
    }

    .about-manifesto-stage {
        min-height: 0;
    }

    .about-manifesto-inner {
        position: relative;
        top: auto;

        min-height: 0;

        grid-template-columns: 80px minmax(0, 1fr);
        align-items: start;
    }

}

/* TÍTULOS */

.about-section-heading {
    max-width: 1040px;
    margin-bottom: 72px;
}

.about-section-heading h2,
.about-team-heading h2,
.about-gallery-heading h2,
.about-values-heading h2 {
    max-width: 920px;
    margin: 0;
    color: #1c1d19;
    font-size: clamp(2.8rem,5.2vw,5.4rem);
    font-weight: 950;
    line-height: .96;
    letter-spacing: -.055em;
}

.about-section-heading h2 span,
.about-team-heading h2 span,
.about-gallery-heading h2 span { color: var(--orange); }

.about-section-heading > p {
    max-width: 720px;
    margin: 26px 0 0;
    color: #6a675f;
    font-size: 1rem;
    line-height: 1.85;
}

/* HISTÓRIA */

.about-story {
    padding: 128px 0 150px;
    background: #faf7ef;
}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,380px);
    align-items: start;
    gap: clamp(48px,6vw,90px);
}

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

.about-timeline {
    --timeline-rail-x: 150px;

    position: relative;
}

/*
 * Track progressivo.
 *
 * Fica oculto sem JS. Nesse cenário, a linha tradicional
 * criada em cada marcador continua funcionando normalmente.
 */
.about-timeline-track {
    position: absolute;
    left: var(--timeline-rail-x);
    z-index: 1;

    display: none;

    width: 2px;
    height: 0;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(26,26,23,.12);

    transform: translateX(-50%);

    pointer-events: none;
}

.about-timeline.is-enhanced .about-timeline-track {
    display: block;
}

.about-timeline-progress {
    position: absolute;
    inset: 0;

    display: block;

    background:
        linear-gradient(
            180deg,
            #ef852e 0%,
            var(--orange) 55%,
            #bb4d0b 100%
        );

    transform: scaleY(0);
    transform-origin: top center;

    will-change: transform;
}

.about-timeline-item {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 118px 28px minmax(0,1fr);

    column-gap: 18px;

    padding-bottom: 78px;
}

.about-timeline-item:last-child {
    padding-bottom: 0;
}

/* DATA / IDENTIFICADOR */

.about-timeline-date {
    padding-top: 2px;

    color: #756f64;

    font-size: .66rem;
    font-weight: 900;

    letter-spacing: .10em;
    line-height: 1.35;

    text-align: right;
    text-transform: uppercase;

    transition:
        color .32s ease,
        opacity .32s ease;
}

/* MARCADOR */

.about-timeline-marker {
    position: relative;
    z-index: 3;

    display: flex;
    justify-content: center;

    padding-top: 3px;
}

/*
 * Linha tradicional/fallback.
 * Continua disponível se o JavaScript ou GSAP não carregar.
 */
.about-timeline-marker::after {
    content: "";

    position: absolute;

    top: 18px;
    bottom: -78px;
    left: 50%;

    width: 1px;

    background: rgba(26,26,23,.13);

    transform: translateX(-50%);
}

.about-timeline-item:last-child .about-timeline-marker::after {
    display: none;
}

/*
 * Quando a timeline progressiva entra em funcionamento,
 * a linha contínua substitui os segmentos tradicionais.
 */
.about-timeline.is-enhanced .about-timeline-marker::after {
    display: none;
}

.about-timeline-marker span {
    position: relative;
    z-index: 4;

    width: 15px;
    height: 15px;

    display: block;

    border: 4px solid #faf7ef;
    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 0 1px rgba(217,104,18,.30),
        0 4px 12px rgba(217,104,18,.10);

    transition:
        transform .34s ease,
        background-color .34s ease,
        box-shadow .34s ease;
}

/* CONTEÚDO */

.about-timeline-content {
    max-width: 690px;

    padding-left: 8px;

    transform-origin: left top;

    transition:
        opacity .34s ease,
        transform .34s ease;
}

.about-timeline-kicker {
    display: block;

    margin-bottom: 9px;

    color: var(--orange);

    font-size: .67rem;
    font-weight: 900;

    letter-spacing: .11em;

    transition:
        color .34s ease,
        opacity .34s ease;
}

.about-timeline-content h3 {
    margin: 0 0 16px;

    color: #22231e;

    font-size: clamp(1.7rem,2.6vw,2.55rem);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -.04em;

    transition: color .34s ease;
}

.about-timeline-content p {
    max-width: 610px;

    margin: 0;

    color: #625f57;

    font-size: .98rem;
    line-height: 1.8;
}

.about-timeline-content p + p {
    margin-top: 14px;
}

/* =========================================================
   ESTADOS DA HISTÓRIA
   Aplicados apenas quando JS está ativo.
   ========================================================= */

.about-timeline.is-enhanced .about-timeline-item.is-future
.about-timeline-content {
    opacity: .38;
    transform: translateX(-4px) scale(.992);
}

.about-timeline.is-enhanced .about-timeline-item.is-future
.about-timeline-date {
    color: #aaa398;
    opacity: .72;
}

.about-timeline.is-enhanced .about-timeline-item.is-future
.about-timeline-kicker {
    color: #9d978d;
}

.about-timeline.is-enhanced .about-timeline-item.is-future
.about-timeline-marker span {
    background: #c9c3b8;

    box-shadow:
        0 0 0 1px rgba(26,26,23,.10);
}

.about-timeline.is-enhanced .about-timeline-item.is-past
.about-timeline-content {
    opacity: .64;
    transform: scale(.996);
}

.about-timeline.is-enhanced .about-timeline-item.is-past
.about-timeline-date {
    color: #8b8378;
}

.about-timeline.is-enhanced .about-timeline-item.is-past
.about-timeline-marker span {
    background: #d56a1a;

    box-shadow:
        0 0 0 1px rgba(217,104,18,.18);
}

.about-timeline.is-enhanced .about-timeline-item.is-active
.about-timeline-content {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.about-timeline.is-enhanced .about-timeline-item.is-active
.about-timeline-date {
    color: var(--orange);
}

.about-timeline.is-enhanced .about-timeline-item.is-active
.about-timeline-marker span {
    background: var(--orange);

    transform: scale(1.28);

    box-shadow:
        0 0 0 5px rgba(217,104,18,.10),
        0 7px 18px rgba(217,104,18,.22);
}

.about-timeline.is-enhanced .about-timeline-item.is-active
.about-timeline-content h3 {
    color: #161712;
}

/* =========================================================
   FOTO / ASIDE DA HISTÓRIA
   ========================================================= */

.about-story-aside {
    position: sticky;
    top: 110px;

    align-self: start;
}

.about-aside-photo {
    position: relative;

    overflow: hidden;

    background: #e3dccd;
}

/*
 * A foto da feira é paisagem.
 * 4:3 respeita melhor a composição original.
 */
.about-aside-photo-large {
    height: auto;

    aspect-ratio: 4 / 3;

    border-radius: 70px 4px 4px 4px;
}

.about-aside-note {
    margin-top: 18px;

    padding: 22px 24px;

    border: 1px solid rgba(26,26,23,.10);
    border-radius: 4px 4px 28px 4px;

    background: #fff;
}

.about-aside-note span {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: .66rem;
    font-weight: 900;

    letter-spacing: .11em;
}

.about-aside-note p {
    margin: 0;

    color: #5f5b54;

    font-size: .86rem;
    line-height: 1.65;
}

/* PAPÉIS */

.about-team {
    padding: 130px 0 150px;
    background: #ede6d8;
}

.about-team-heading {
    max-width: 900px;
    margin-bottom: 68px;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: stretch;
    gap: 18px;
}

.about-role-card {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 500px;

    display: flex;
    flex-direction: column;

    padding: clamp(30px,3vw,46px);

    border-radius: 4px 4px 50px 4px;

    transition:
        transform .30s ease,
        box-shadow .30s ease;
}

@media (hover: hover) and (pointer: fine) {
    .about-role-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 58px rgba(24,24,20,.12);
    }
}

.about-role-card-dark {
    background:
        radial-gradient(circle at 100% 0%, rgba(217,104,18,.13), transparent 27%),
        #22251d;
    color: #f5f1e8;
}

.about-role-card-orange {
    background: linear-gradient(145deg,#e87820,#c4550f);
    color: #fff;
}

.about-role-card-light {
    border: 1px solid rgba(26,26,23,.10);
    background: #faf7ef;
    color: #1f201c;
}

.about-role-copy { margin-top: 0; }

.about-role-copy > span {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-role-card-dark .about-role-copy > span { color: #dca36f; }
.about-role-card-light .about-role-copy > span { color: var(--orange); }

.about-role-copy h3 {
    margin: 0 0 18px;
    font-size: clamp(2rem,3vw,3.5rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.05em;
}

.about-role-copy p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.78;
    opacity: .83;
}

.about-role-tags {
    display: flex;
    flex-wrap: wrap;

    margin-top: auto;
    padding-top: 30px;
    gap: 7px;
}

.about-role-tags span {
    padding: 7px 10px;

    border: 1px solid currentColor;
    border-radius: 999px;

    font-size: .65rem;
    font-weight: 800;

    opacity: .72;

    transition:
        opacity .22s ease,
        transform .22s ease,
        background-color .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .about-role-tags span:hover {
        opacity: 1;
        transform: translateY(-2px);
        background: rgba(255,255,255,.06);
    }

    .about-role-card-light .about-role-tags span:hover {
        background: rgba(26,26,23,.04);
    }
}

/* FAMÍLIA */

.about-family-moment {
    padding: 145px 0;
    background: #faf7ef;
}

.about-family-moment-grid {
    display: grid;
    grid-template-columns: minmax(360px,.86fr) minmax(0,1fr);
    align-items: center;
    gap: clamp(60px,8vw,130px);
}

.about-family-photo {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    border-radius: 4px 80px 4px 4px;

    background: #ddd4c2;

    box-shadow: 0 30px 65px rgba(27,27,23,.11);
}

.about-family-photo > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
}

.about-family-copy h2 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(3rem,5vw,5.7rem);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.06em;
}

.about-family-copy h2 span { color: var(--orange); }

.about-family-copy p {
    max-width: 670px;
    margin: 30px 0 0;
    color: #646158;
    font-size: 1rem;
    line-height: 1.9;
}

/* NOME */

.about-name {
    padding: 0 0 145px;
    background: #faf7ef;
}

.about-name-card {
    position: relative;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
    gap: clamp(45px, 7vw, 110px);
    overflow: hidden;
    padding: clamp(50px, 7vw, 95px);
    border-radius: 4px 70px 4px 4px;
    background:
        radial-gradient(circle at 92% 10%, rgba(217, 104, 18, .11), transparent 22%),
        linear-gradient(135deg, #262a1f, #1d2018);
    color: #f6f1e8;
}

.about-name-card::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(231, 175, 117, .08);
    border-radius: 50%;
    pointer-events: none;
}

.about-name-logo {
    position: relative;
    z-index: 1;
    width: 230px;
    height: 230px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    transform-origin: center;
}

.about-name-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.about-name-copy {
    position: relative;
    z-index: 1;
    max-width: 830px;
}

.about-name-copy h2 {
    margin: 0;
    font-size: clamp(2.6rem, 4.8vw, 5rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.05em;
}

.about-name-copy p {
    max-width: 760px;
    margin: 26px 0 0;
    color: #c9c9bc;
    font-size: 1rem;
    line-height: 1.85;
}

.about-name-copy > strong {
    display: block;
    margin-top: 24px;
    color: #e7af75;
    font-size: 1rem;
}

/* GALERIA */

.about-gallery {
    padding: 130px 0 150px;
    background:
        radial-gradient(circle at 5% 12%, rgba(217, 104, 18, .10), transparent 25%),
        #1f221a;
    color: #fff;
}

.about-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 58px;
}

.about-gallery-heading h2 {
    color: #f7f2e9;
}

.about-text-link-light {
    flex-shrink: 0;
    color: #dedfd5;
}

.about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-gallery-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px 5px 38px 5px;
    background: #292d23;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.about-gallery-card:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 104, 18, .25);
    box-shadow: 0 34px 76px rgba(0, 0, 0, .22);
}

.about-gallery-visual {
    position: relative;
    isolation: isolate;
    height: clamp(440px, 38vw, 650px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #20231c;
}

/* A mesma foto preenche o fundo sem cortar a peça principal. */
.about-gallery-backdrop {
    position: absolute;
    inset: -30px;
    z-index: 0;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    object-position: center;
    opacity: .82;
    filter: blur(28px) brightness(.42) saturate(.88);
    transform: scale(1.12);
}

.about-gallery-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(18, 20, 16, .08) 0%,
        rgba(18, 20, 16, .22) 100%
    );
    pointer-events: none;
}

.about-gallery-photo {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .30));
    transition: transform .35s ease;
}

.about-gallery-card:hover .about-gallery-photo {
    transform: scale(1.018);
}

.about-gallery-caption {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 26px 27px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .025),
        rgba(255, 255, 255, 0)
    );
}

.about-gallery-caption span {
    display: block;
    margin-bottom: 7px;
    color: #df9454;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.about-gallery-caption strong {
    color: #f4f0e8;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.35;
}

@media (max-width: 991px) {
    .about-gallery-grid {
        grid-template-columns: 1fr;
    }

    .about-gallery-visual {
        height: min(720px, 80vw);
    }
}

@media (max-width: 680px) {
    .about-gallery-visual {
        height: 115vw;
        max-height: 610px;
    }

    .about-gallery-photo {
        width: calc(100% - 28px);
        height: calc(100% - 28px);
    }

    .about-gallery-caption {
        min-height: 98px;
        padding: 20px 22px 23px;
    }
}

/* VALORES */

.about-values {
    padding: 135px 0 150px;
    background: #f5efe3;
}

.about-values-heading {
    max-width: 820px;
    margin-bottom: 64px;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-values-grid article {
    min-height: 300px;
    padding: 38px;
    border: 1px solid rgba(26, 26, 23, .09);
    border-radius: 4px 4px 38px 4px;
    background: rgba(255, 255, 255, .72);
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background-color .28s ease;
}

.about-value-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
    border-radius: 50%;
    background: #262a1f;
    color: #e6b176;
    font-size: 1.1rem;
    transition: transform .28s ease;
}

.about-values-grid h3 {
    margin: 0 0 12px;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.about-values-grid p {
    margin: 0;
    color: #68645c;
    font-size: .92rem;
    line-height: 1.75;
}

@media (hover: hover) and (pointer: fine) {
    .about-values-grid article:hover {
        transform: translateY(-5px);
        border-color: rgba(217, 104, 18, .18);
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 24px 50px rgba(31, 30, 25, .08);
    }

    .about-values-grid article:hover .about-value-icon {
        transform: scale(1.06);
    }
}

/* CTA FINAL */

.about-final {
    padding: 0 0 130px;
    background: #f5efe3;
}

.about-final-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding: clamp(48px, 7vw, 90px);
    border-radius: 4px 4px 72px 4px;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .13), transparent 24%),
        linear-gradient(135deg, #ed7920, #c5530e);
    color: #fff;
}

.about-final-card::after {
    content: "";
    position: absolute;
    right: -135px;
    bottom: -230px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}

.about-final-card > * {
    position: relative;
    z-index: 1;
}

.about-final-label {
    display: block;
    margin-bottom: 20px;
    font-size: .70rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.about-final-card h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.8rem, 5.2vw, 5.7rem);
    font-weight: 950;
    line-height: .94;
    letter-spacing: -.055em;
}

.about-final-card h2 span {
    color: #ffe5c8;
}

.about-final-actions {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.about-final-primary,
.about-final-secondary {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 900;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        color .22s ease;
}

.about-final-primary {
    border: 1px solid #fff;
    background: #fff;
    color: #1e2119;
}

.about-final-primary:hover {
    border-color: #25291e;
    background: #25291e;
    color: #fff;
}

.about-final-secondary {
    border: 1px solid rgba(255, 255, 255, .48);
    color: #fff;
}

.about-final-secondary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .about-final-primary:hover,
    .about-final-secondary:hover {
        transform: translateY(-2px);
    }
}

/* RESPONSIVO */

@media (max-width: 1199px) {
    .about-hero-grid {
        grid-template-columns: minmax(0,.95fr) minmax(390px,1.05fr);
        gap: 50px;
    }

    .about-hero-visual { min-height: 590px; }

    .about-story-grid {
        grid-template-columns: minmax(0,1fr) 330px;
        gap: 55px;
    }

    .about-timeline {
        --timeline-rail-x: 133px;
    }

    .about-timeline-item {
        grid-template-columns: 105px 26px minmax(0,1fr);
        column-gap: 15px;
    }

}

@media (max-width: 991px) {
    .about-hero { padding-top: 70px; }
    .about-hero-grid { grid-template-columns: 1fr; }
    .about-hero-copy h1 { max-width: 760px; }
    .about-hero-visual { min-height: 720px; }

    .about-section-heading > p { max-width: 650px; }

    .about-story-grid {
        grid-template-columns: 1fr;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
    }

    .about-role-card {
        min-height: 390px;
    }

    .about-story-aside {
        position: static;
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 18px;
    }

    .about-aside-photo-large {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .about-aside-note {
        height: fit-content;
        align-self: end;
        margin-top: 0;
    }

    .about-family-moment-grid { grid-template-columns: 1fr; }
    .about-family-photo { min-height: 600px; }

    .about-name-card {
        grid-template-columns: 180px 1fr;
        gap: 46px;
    }

    .about-name-logo {
        width: 170px;
        height: 170px;
    }

    .about-values-grid { grid-template-columns: 1fr; }
    .about-values-grid article { min-height: 0; }
    .about-value-icon { margin-bottom: 30px; }

    .about-final-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-final-actions {
        width: 100%;
        max-width: 420px;
    }
}

@media (max-width: 680px) {

    .about-gallery-grid {
        gap: 14px;
    }

    .about-hero { padding: 54px 0 82px; }
    .about-eyebrow { flex-wrap: wrap; }

    .about-hero-copy h1 {
        font-size: clamp(3.55rem,18vw,5rem);
    }

    .about-hero-lead {
        margin-top: 26px;
        font-size: 1rem;
    }

    .about-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-hero-actions .btn { width: 100%; }
    .about-text-link { justify-content: center; }

    .about-hero-meta {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .about-hero-meta > div { padding: 18px 0; }

    .about-hero-meta > div + div {
        padding-left: 0;
        border-top: 1px solid rgba(26,26,23,.12);
        border-left: 0;
    }

    .about-hero-visual { min-height: 520px; }

    .about-hero-photo {
        inset: 0 18px 42px 0;
        border-radius: 4px 55px 4px 4px;
    }

    .about-hero-stamp {
        top: 18px;
        width: 92px;
        height: 92px;
    }

    .about-hero-caption {
        width: 82%;
        padding: 18px 20px;
    }

    .about-manifesto {
        padding-bottom: 80px;
    }

    .about-manifesto-inner {
        grid-template-columns: 1fr;
        gap: 4px;

        padding: 42px 28px;

        border-radius: 4px 4px 42px 4px;
    }

    .about-manifesto-mark {
        font-size: 5rem;
    }

    .about-manifesto-text {
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .about-story,
    .about-team,
    .about-family-moment,
    .about-gallery,
    .about-values {
        padding-top: 86px;
        padding-bottom: 96px;
    }

    .about-section-heading,
    .about-team-heading,
    .about-gallery-heading,
    .about-values-heading { margin-bottom: 48px; }

    .about-section-heading h2,
    .about-team-heading h2,
    .about-gallery-heading h2,
    .about-values-heading h2 {
        font-size: clamp(2.75rem,13vw,4.2rem);
    }

    .about-timeline {
        --timeline-rail-x: 11px;
    }

    .about-timeline-item {
        grid-template-columns: 22px minmax(0,1fr);
        column-gap: 16px;
        padding-bottom: 60px;
    }

    .about-timeline-date {
        grid-column: 2;
        grid-row: 1;
        padding: 0 0 10px;
        text-align: left;
    }

    .about-timeline-marker {
        grid-column: 1;
        grid-row: 1 / 3;
        padding-top: 2px;
    }

    .about-timeline-marker::after {
        top: 18px;
        bottom: -60px;
    }

    .about-timeline-content {
        grid-column: 2;
        grid-row: 2;
        padding-left: 0;
    }

    .about-timeline.is-enhanced .about-timeline-item.is-future
    .about-timeline-content {
        opacity: .58;
        transform: none;
    }

    .about-timeline.is-enhanced .about-timeline-item.is-past
    .about-timeline-content {
        opacity: .76;
        transform: none;
    }

    .about-story-aside { grid-template-columns: 1fr; }

    .about-aside-photo-large {
        height: auto;
        aspect-ratio: 4 / 3;

        border-radius: 44px 4px 4px 4px;
    }

    .about-role-card {
        min-height: 430px;
    }

    .about-family-photo {
        min-height: 470px;
        border-radius: 4px 55px 4px 4px;
    }

    .about-family-copy h2 {
        font-size: clamp(2.8rem,13vw,4.4rem);
    }

    .about-name { padding-bottom: 95px; }

    .about-name-card {
        grid-template-columns: 1fr;
        padding: 45px 28px;
        border-radius: 4px 45px 4px 4px;
    }

    .about-name-logo {
        width: 120px;
        height: 120px;
    }

    .about-gallery-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-text-link-light { justify-content: flex-start; }

    .about-final { padding-bottom: 82px; }

    .about-final-card {
        padding: 42px 28px;
        border-radius: 4px 4px 45px 4px;
    }

    .about-final-card h2 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .about-final-actions {
        max-width: none;
    }

    .about-final-primary,
    .about-final-secondary {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-scroll-progress {
        display: none;
    }

    .about-gallery-card,
    .about-gallery-photo,
    .about-text-link,
    .about-hero-stamp,
    .about-timeline-content,
    .about-timeline-date,
    .about-timeline-kicker,
    .about-timeline-marker span,
    .about-role-card,
    .about-role-tags span,
    .about-values-grid article,
    .about-value-icon,
    .about-final-primary,
    .about-final-secondary {
        transition: none;
    }
}