/*======================================================
=            HERO NOSOTROS — ESTILO ARTÍSTICO
======================================================*/

.about-hero {
    position: relative;
    min-height: 760px;
    padding: 95px 0 95px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(201, 162, 77, .18),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(15, 31, 82, .10),
            transparent 30%
        ),
        #fffdf8;
}

/* Textura de papel */

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: .28;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 34px,
            rgba(15, 31, 82, .025) 35px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 34px,
            rgba(15, 31, 82, .018) 35px
        );
}

/* Brochazo superior */

.about-hero::after {
    content: "";
    position: absolute;

    width: 290px;
    height: 95px;

    top: 60px;
    right: -45px;

    background: rgba(201, 162, 77, .28);

    transform: rotate(-8deg);

    clip-path: polygon(
        0 40%,
        12% 15%,
        28% 31%,
        43% 8%,
        61% 29%,
        79% 12%,
        100% 42%,
        94% 75%,
        73% 60%,
        52% 85%,
        30% 64%,
        8% 82%
    );
}

.about-hero .container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 90px;
    align-items: center;
}

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

.about-hero-content {
    position: relative;
    max-width: 650px;
}

/* Línea decorativa */

.about-hero-content::before {
    content: "";
    position: absolute;

    width: 115px;
    height: 58px;

    top: -38px;
    left: 12px;

    border-top: 4px solid rgba(201, 162, 77, .55);
    border-radius: 50%;

    transform: rotate(-9deg);
}

.about-hero .section-tag {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 30px;

    color: #966f20;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.about-hero .section-tag::before {
    content: "";

    width: 44px;
    height: 4px;

    background: #c9a24d;
    border-radius: 999px;

    transform: rotate(-5deg);
}

.about-hero h1 {
    max-width: 690px;
    margin: 0 0 30px;

    color: #0f1f52;

    font-size: clamp(3.4rem, 7vw, 6.5rem);
    line-height: .91;
    font-weight: 900;
    letter-spacing: -4px;
}

.about-hero h1 span {
    position: relative;
    display: inline-block;

    color: #c9a24d;
}

/* Brochazo bajo el título */

.about-hero h1 span::after {
    content: "";
    position: absolute;

    left: 2%;
    bottom: -14px;

    width: 98%;
    height: 20px;

    z-index: -1;

    background: rgba(201, 162, 77, .30);

    transform: rotate(-2deg);

    clip-path: polygon(
        0 42%,
        10% 18%,
        23% 40%,
        38% 12%,
        53% 37%,
        68% 17%,
        84% 39%,
        100% 22%,
        96% 74%,
        80% 60%,
        63% 82%,
        45% 61%,
        27% 79%,
        8% 62%
    );
}

.about-hero-content > p {
    max-width: 560px;
    margin: 0 0 38px;

    color: #596071;

    font-size: 1.12rem;
    line-height: 1.85;
}

/*======================================================
=                       BOTÓN
======================================================*/

.btn-about {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;
    padding: 0 32px;

    overflow: hidden;

    color: #fff;
    background: #0f1f52;

    text-decoration: none;

    font-size: .86rem;
    font-weight: 800;
    letter-spacing: 1.1px;

    clip-path: polygon(
        3% 7%,
        97% 0,
        100% 86%,
        91% 100%,
        0 94%
    );

    box-shadow:
        10px 12px 0 rgba(201, 162, 77, .28);

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        box-shadow .35s ease,
        background .35s ease;
}

.btn-about::before {
    content: "";
    position: absolute;

    width: 70px;
    height: 150px;

    top: -45px;
    left: -95px;

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

    transform: rotate(24deg);

    transition: left .45s ease;
}

.btn-about:hover {
    color: #fff;
    background: #1d397f;

    transform: translateY(-5px) rotate(-1deg);

    box-shadow:
        14px 16px 0 rgba(201, 162, 77, .36);
}

.btn-about:hover::before {
    left: 115%;
}

/*======================================================
=                 COMPOSICIÓN DEL LOGO
======================================================*/

.about-hero-image {
    position: relative;

    min-height: 540px;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
}

/* Mancha azul principal */

.about-hero-image::before {
    content: "";
    position: absolute;

    width: 510px;
    height: 485px;

    top: 30px;
    left: 50%;

    z-index: -3;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, .12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #0f1f52,
            #234b9b
        );

    border-radius:
        44% 56% 62% 38% /
        39% 48% 52% 61%;

    transform: translateX(-50%) rotate(-7deg);

    box-shadow:
        32px 35px 0 rgba(201, 162, 77, .20);
}

/* Contorno irregular */

.about-hero-image::after {
    content: "";
    position: absolute;

    width: 525px;
    height: 500px;

    top: 8px;
    left: 50%;

    z-index: -4;

    border: 3px solid rgba(15, 31, 82, .15);

    border-radius:
        50% 50% 41% 59% /
        47% 39% 61% 53%;

    transform: translateX(-50%) rotate(5deg);
}

/* Tarjeta del logo */

.about-hero-image img {
    position: relative;
    z-index: 3;

    display: block;

    width: min(410px, 82%);
    max-height: 355px;
    object-fit: contain;

    padding: 55px 46px;

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

    clip-path: polygon(
        4% 3%,
        96% 0,
        100% 89%,
        90% 100%,
        2% 96%,
        0 13%
    );

    transform: rotate(3deg);

    box-shadow:
        0 28px 60px rgba(4, 15, 50, .24);

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease;
}

.about-hero-image:hover img {
    transform: rotate(0deg) translateY(-8px);

    box-shadow:
        0 36px 75px rgba(4, 15, 50, .30);
}

/* Cinta adhesiva */

.about-hero-image img::before {
    content: "";
}

/*======================================================
=                    CÍRCULOS
======================================================*/

.hero-circle {
    position: absolute;
    z-index: 2;

    pointer-events: none;
}

.hero-circle-1 {
    width: 105px;
    height: 105px;

    top: 5px;
    right: 25px;

    border: 5px solid rgba(201, 162, 77, .76);
    border-radius: 50%;

    transform: rotate(12deg);
}

.hero-circle-1::after {
    content: "";
    position: absolute;

    width: 72px;
    height: 72px;

    top: 12px;
    left: 12px;

    border: 2px solid rgba(201, 162, 77, .33);
    border-radius: 50%;
}

.hero-circle-2 {
    width: 145px;
    height: 65px;

    left: -15px;
    bottom: 25px;

    border-top: 4px solid rgba(15, 31, 82, .25);
    border-radius: 50%;

    transform: rotate(-18deg);
}

/* Cinta simulada sobre el logo */

.about-hero-image .hero-circle-2::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 40px;

    left: 205px;
    bottom: 395px;

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

    transform: rotate(-6deg);

    box-shadow: 0 5px 15px rgba(15, 31, 82, .08);
}

/*======================================================
=                  DETALLES FLOTANTES
======================================================*/

.about-hero-content::after {
    content: "✦";

    position: absolute;

    right: 25px;
    bottom: -15px;

    color: rgba(201, 162, 77, .70);

    font-size: 2rem;

    transform: rotate(14deg);
}

.about-hero-image .hero-circle-1 {
    animation: hero-float 5s ease-in-out infinite;
}

.about-hero-image .hero-circle-2 {
    animation: hero-float 6.5s ease-in-out infinite reverse;
}

@keyframes hero-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

/*======================================================
=                    RESPONSIVE
======================================================*/

@media (max-width: 1100px) {
    .about-hero .container {
        gap: 55px;
    }

    .about-hero-image::before {
        width: 450px;
        height: 440px;
    }

    .about-hero-image::after {
        width: 465px;
        height: 455px;
    }
}

@media (max-width: 992px) {
    .about-hero {
        min-height: auto;
        padding: 120px 0 100px;
    }

    .about-hero .container {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .about-hero-content {
        max-width: 760px;
        margin: 0 auto;

        text-align: center;
    }

    .about-hero .section-tag {
        justify-content: center;
    }

    .about-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-hero h1 span::after {
        z-index: -1;
    }

    .about-hero-image {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .about-hero-content::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .about-hero {
        padding: 95px 0 75px;
    }

    .about-hero h1 {
        font-size: 3.45rem;
        line-height: .95;
        letter-spacing: -2px;
    }

    .about-hero-content > p {
        font-size: 1rem;
    }

    .btn-about {
        width: 100%;
        max-width: 340px;
        padding: 0 22px;
    }

    .about-hero-image {
        min-height: 430px;
    }

    .about-hero-image::before {
        width: 330px;
        height: 360px;
    }

    .about-hero-image::after {
        width: 345px;
        height: 375px;
    }

    .about-hero-image img {
        width: calc(100% - 50px);
        padding: 42px 30px;
    }

    .hero-circle-1 {
        width: 76px;
        height: 76px;

        top: 20px;
        right: 2px;
    }

    .hero-circle-1::after {
        width: 48px;
        height: 48px;
    }

    .hero-circle-2 {
        left: 0;
        bottom: 18px;
    }

    .about-hero-image .hero-circle-2::after {
        width: 95px;
        height: 32px;

        left: 145px;
        bottom: 305px;
    }
}

/*======================================================
=        NUESTRA ESENCIA — ESTILO ARTÍSTICO
======================================================*/

.about-essence {
    position: relative;
    padding: 130px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(201, 162, 77, .14),
            transparent 23%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(15, 31, 82, .08),
            transparent 26%
        ),
        #fffdf8;
}

/* Textura sutil tipo papel */

.about-essence::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    opacity: .32;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 31px,
            rgba(15, 31, 82, .025) 32px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 31px,
            rgba(15, 31, 82, .018) 32px
        );
}

.about-essence::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 75px;
    top: 45px;
    right: -35px;

    background: rgba(201, 162, 77, .26);

    transform: rotate(-9deg);

    clip-path: polygon(
        0 42%,
        14% 15%,
        31% 30%,
        49% 8%,
        67% 28%,
        84% 12%,
        100% 40%,
        94% 73%,
        72% 61%,
        53% 84%,
        29% 64%,
        8% 82%
    );
}

.about-essence .container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 95px;
    align-items: center;
}

/*======================================================
=                  PARTE VISUAL
======================================================*/

.essence-visual {
    position: relative;
    min-height: 570px;
}

/* Mancha orgánica principal */

.essence-shape {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 15px;
    left: 5px;

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255, 255, 255, .14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #0f1f52,
            #244b9a
        );

    border-radius:
        45% 55% 62% 38% /
        38% 47% 53% 62%;

    transform: rotate(-7deg);

    box-shadow:
        30px 32px 0 rgba(201, 162, 77, .18);
}

/* Contorno dibujado alrededor */

.essence-shape::before {
    content: "";
    position: absolute;
    inset: -18px;

    border: 3px solid rgba(15, 31, 82, .16);

    border-radius:
        50% 50% 40% 60% /
        48% 38% 62% 52%;

    transform: rotate(7deg);
}

/* Círculo decorativo */

.essence-shape::after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    right: -35px;
    top: 55px;

    border: 4px solid rgba(201, 162, 77, .65);
    border-radius: 50%;

    transform: rotate(12deg);
}

/*======================================================
=                  CARD PRINCIPAL
======================================================*/

.essence-card {
    position: absolute;
    z-index: 3;
}

.essence-card-main {
    width: 370px;
    min-height: 315px;

    left: 105px;
    top: 115px;

    padding: 56px 45px 48px;

    background: #fff9e8;

    clip-path: polygon(
        5% 2%,
        96% 0,
        100% 88%,
        91% 100%,
        3% 96%,
        0 14%
    );

    transform: rotate(3deg);

    box-shadow:
        0 28px 55px rgba(15, 31, 82, .17);

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease;
}

.essence-card-main::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 34px;

    top: -12px;
    left: 50%;

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

    transform: translateX(-50%) rotate(-5deg);

    box-shadow: 0 5px 15px rgba(15, 31, 82, .08);
}

.essence-card-main::after {
    content: "";
    position: absolute;
    width: 145px;
    height: 46px;

    bottom: 18px;
    right: -18px;

    border-bottom: 4px solid rgba(201, 162, 77, .52);
    border-radius: 50%;

    transform: rotate(-7deg);
}

.essence-card-main:hover {
    transform: rotate(0deg) translateY(-9px);

    box-shadow:
        0 35px 65px rgba(15, 31, 82, .22);
}

.essence-number {
    position: absolute;
    top: 25px;
    right: 30px;

    color: rgba(15, 31, 82, .11);

    font-size: 5.5rem;
    line-height: 1;
    font-weight: 900;
}

.essence-card-main h3 {
    position: relative;
    z-index: 2;

    max-width: 270px;
    margin: 0 0 22px;

    color: #0f1f52;

    font-size: 2.3rem;
    line-height: 1.08;
    font-weight: 800;
}

.essence-card-main p {
    position: relative;
    z-index: 2;

    max-width: 275px;
    margin: 0;

    color: #4e5568;

    font-size: 1rem;
    line-height: 1.75;
}

/*======================================================
=                  CARD PEQUEÑO
======================================================*/

.essence-card-small {
    right: 5px;
    bottom: 72px;

    min-width: 245px;

    padding: 24px 32px;

    color: #fff;

    background: #0f1f52;

    transform: rotate(-6deg);

    clip-path: polygon(
        3% 10%,
        95% 0,
        100% 78%,
        90% 100%,
        0 90%
    );

    box-shadow:
        12px 15px 0 rgba(201, 162, 77, .27);

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1);
}

.essence-card-small::before {
    content: "✦";
    display: inline-block;
    margin-right: 11px;

    color: #e3c16d;

    font-size: 1rem;
}

.essence-card-small span {
    color: #fff;

    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .4px;
}

.essence-card-small:hover {
    transform: rotate(-2deg) translateY(-6px);
}

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

.essence-content {
    position: relative;
    padding: 10px 0;
}

/* Garabato decorativo */

.essence-content::before {
    content: "";
    position: absolute;

    width: 115px;
    height: 55px;

    top: -15px;
    right: 10px;

    border-top: 4px solid rgba(201, 162, 77, .56);
    border-radius: 50%;

    transform: rotate(12deg);
}

.section-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 25px;

    color: #9a7220;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.section-tag::before {
    content: "";

    width: 42px;
    height: 4px;

    background: #c9a24d;

    border-radius: 999px;

    transform: rotate(-4deg);
}

.essence-content h2 {
    max-width: 620px;
    margin: 0 0 30px;

    color: #0f1f52;

    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: .98;
    font-weight: 850;
    letter-spacing: -2px;
}

.essence-content h2::after {
    content: "";
    display: block;

    width: 210px;
    height: 15px;

    margin-top: 18px;

    background: rgba(201, 162, 77, .45);

    transform: rotate(-2deg);

    clip-path: polygon(
        0 45%,
        12% 18%,
        26% 42%,
        43% 12%,
        60% 38%,
        78% 20%,
        100% 48%,
        92% 72%,
        71% 58%,
        48% 80%,
        24% 61%,
        7% 78%
    );
}

.essence-content > p {
    max-width: 600px;
    margin: 0;

    color: #5e6473;

    font-size: 1.08rem;
    line-height: 1.9;
}

/*======================================================
=                    HIGHLIGHTS
======================================================*/

.essence-highlights {
    display: grid;
    gap: 17px;

    margin-top: 42px;
}

.essence-highlight {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    width: fit-content;
    min-width: 310px;

    padding: 18px 28px 18px 22px;

    color: #0f1f52;

    background: #fff;

    border: 1px solid rgba(15, 31, 82, .07);

    font-size: .98rem;
    font-weight: 700;

    box-shadow:
        8px 10px 0 rgba(15, 31, 82, .06);

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

.essence-highlight:nth-child(1) {
    transform: rotate(-1.5deg);
}

.essence-highlight:nth-child(2) {
    margin-left: 35px;
    transform: rotate(1deg);
}

.essence-highlight:nth-child(3) {
    margin-left: 12px;
    transform: rotate(-.7deg);
}

.essence-highlight:hover {
    transform: translateX(8px) rotate(0deg);

    box-shadow:
        12px 14px 0 rgba(201, 162, 77, .17);
}

.essence-highlight > span {
    position: relative;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    background: #0f1f52;

    border-radius:
        52% 48% 62% 38% /
        40% 55% 45% 60%;

    transform: rotate(12deg);
}

.essence-highlight > span::before {
    content: "✓";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: #e3c16d;

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

    transform: rotate(-12deg);
}

/*======================================================
=                    RESPONSIVE
======================================================*/

@media (max-width: 1100px) {
    .about-essence .container {
        gap: 55px;
    }

    .essence-shape {
        width: 440px;
        height: 440px;
    }

    .essence-card-main {
        left: 65px;
    }
}

@media (max-width: 992px) {
    .about-essence {
        padding: 100px 0;
    }

    .about-essence .container {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .essence-visual {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .essence-content {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
    }

    .section-tag {
        justify-content: center;
    }

    .essence-content h2,
    .essence-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .essence-content h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .essence-highlights {
        align-items: center;
    }

    .essence-highlight {
        margin-left: auto !important;
        margin-right: auto;
    }
}

@media (max-width: 576px) {
    .about-essence {
        padding: 80px 0;
    }

    .essence-visual {
        min-height: 500px;
    }

    .essence-shape {
        width: 340px;
        height: 390px;

        top: 20px;
        left: 50%;

        transform: translateX(-50%) rotate(-6deg);
    }

    .essence-card-main {
        width: calc(100% - 42px);
        min-height: auto;

        left: 21px;
        top: 105px;

        padding: 48px 32px 44px;
    }

    .essence-card-main h3 {
        font-size: 1.9rem;
    }

    .essence-number {
        font-size: 4.4rem;
    }

    .essence-card-small {
        right: 14px;
        bottom: 30px;

        min-width: 215px;

        padding: 20px 24px;
    }

    .essence-content h2 {
        font-size: 2.65rem;
        letter-spacing: -1px;
    }

    .essence-highlight {
        width: 100%;
        min-width: 0;

        text-align: left;
    }
}

/*======================================================
=            ANIMACIONES AL HACER SCROLL
======================================================*/

.reveal{

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;

    will-change:opacity, transform;

}

/* Desde abajo */

.reveal-up{

    transform:translateY(45px);

}

/* Desde la izquierda */

.reveal-left{

    transform:translateX(-55px);

}

/* Desde la derecha */

.reveal-right{

    transform:translateX(55px);

}

/* Zoom suave */

.reveal-scale{

    transform:scale(.92);

}

/* Cuando entra en pantalla */

.reveal.is-visible{

    opacity:1;

    transform:translate(0,0) scale(1);

    filter:blur(0);

}

/* Retrasos */

.delay-1{

    transition-delay:.12s;

}

.delay-2{

    transition-delay:.24s;

}

.delay-3{

    transition-delay:.36s;

}

.delay-4{

    transition-delay:.48s;

}

/* Accesibilidad */

@media(prefers-reduced-motion:reduce){

    .reveal{

        opacity:1;

        transform:none;

        transition:none;

    }

}

/*======================================================
=     PROPÓSITO — ESTILO ARTÍSTICO VELARTE
======================================================*/

.creative-purpose {
    position: relative;
    padding: 130px 0 145px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(201, 162, 77, .14),
            transparent 24%
        ),
        radial-gradient(
            circle at 91% 80%,
            rgba(15, 31, 82, .09),
            transparent 28%
        ),
        #fffdf8;
}

/* Textura ligera tipo papel */

.creative-purpose::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: .30;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .025) 34px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .018) 34px
        );
}

/* Brochazo decorativo del fondo */

.creative-purpose::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 95px;

    right: -55px;
    top: 68px;

    background: rgba(201, 162, 77, .25);

    transform: rotate(-8deg);

    clip-path: polygon(
        0 40%,
        12% 15%,
        28% 31%,
        43% 8%,
        61% 29%,
        79% 12%,
        100% 42%,
        94% 75%,
        73% 60%,
        52% 85%,
        30% 64%,
        8% 82%
    );
}

.creative-purpose .container {
    position: relative;
    z-index: 2;
}

/*======================================================
=                    ENCABEZADO
======================================================*/

.creative-purpose-heading {
    position: relative;

    max-width: 850px;
    margin: 0 auto 85px;

    text-align: center;
}

.creative-purpose-heading::before {
    content: "";
    position: absolute;

    width: 115px;
    height: 56px;

    top: -38px;
    left: 50px;

    border-top: 4px solid rgba(201, 162, 77, .52);
    border-radius: 50%;

    transform: rotate(-12deg);
}

.creative-purpose-heading .section-tag {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 28px;

    color: #966f20;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.creative-purpose-heading .section-tag::before {
    content: "";

    width: 44px;
    height: 4px;

    background: #c9a24d;
    border-radius: 999px;

    transform: rotate(-5deg);
}

.creative-purpose-heading h2 {
    margin: 0 0 24px;

    color: #0f1f52;

    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -3px;
}

.creative-purpose-heading h2 span {
    position: relative;
    display: inline-block;

    color: #c9a24d;
}

.creative-purpose-heading h2 span::after {
    content: "";
    position: absolute;

    left: 2%;
    bottom: -13px;

    width: 98%;
    height: 18px;

    z-index: -1;

    background: rgba(201, 162, 77, .30);

    transform: rotate(-2deg);

    clip-path: polygon(
        0 42%,
        10% 18%,
        23% 40%,
        38% 12%,
        53% 37%,
        68% 17%,
        84% 39%,
        100% 22%,
        96% 74%,
        80% 60%,
        63% 82%,
        45% 61%,
        27% 79%,
        8% 62%
    );
}

.creative-purpose-heading p {
    max-width: 620px;
    margin: 0 auto;

    color: #5d6473;

    font-size: 1.08rem;
    line-height: 1.8;
}

/*======================================================
=                     LIENZO
======================================================*/

.creative-purpose-canvas {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px;
    align-items: center;
}

/* Línea central dibujada */

.creative-purpose-canvas::before {
    content: "";
    position: absolute;

    width: 90px;
    height: 50px;

    left: 50%;
    top: 48%;

    border-top: 4px solid rgba(201, 162, 77, .48);
    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(-11deg);
}

/* Estrella flotante */

.creative-purpose-canvas::after {
    content: "✦";
    position: absolute;

    left: 49%;
    top: 38%;

    color: rgba(201, 162, 77, .72);

    font-size: 1.7rem;

    transform: rotate(13deg);
}

/*======================================================
=                BLOQUES GENERALES
======================================================*/

.creative-purpose-block {
    position: relative;

    min-height: 430px;
    padding: 62px 52px 58px;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease;
}

.purpose-block-content,
.purpose-block-icon,
.purpose-block-label,
.purpose-hand-line,
.purpose-scribble {
    position: relative;
    z-index: 3;
}

/*======================================================
=                      MISIÓN
======================================================*/

.mission-block {
    color: #fff;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(255, 255, 255, .12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0f1f52,
            #244b9a
        );

    transform: rotate(-2.2deg);

    clip-path: polygon(
        4% 2%,
        96% 0,
        100% 88%,
        90% 100%,
        3% 96%,
        0 13%
    );

    box-shadow:
        20px 24px 0 rgba(201, 162, 77, .20),
        0 30px 55px rgba(15, 31, 82, .18);
}

.mission-block::before {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    right: -75px;
    bottom: -90px;

    z-index: 1;

    border: 3px solid rgba(255, 255, 255, .10);
    border-radius:
        44% 56% 62% 38% /
        39% 48% 52% 61%;

    transform: rotate(16deg);
}

.mission-block::after {
    content: "";
    position: absolute;

    width: 150px;
    height: 48px;

    left: 34px;
    bottom: 22px;

    z-index: 1;

    border-bottom: 4px solid rgba(227, 193, 109, .55);
    border-radius: 50%;

    transform: rotate(-8deg);
}

/* Icono misión */

.mission-block .purpose-block-icon {
    width: 74px;
    height: 74px;

    display: grid;
    place-items: center;

    margin-bottom: 36px;

    color: #0f1f52;
    background: #e3c16d;

    border-radius:
        52% 48% 62% 38% /
        40% 55% 45% 60%;

    font-size: 1.8rem;

    transform: rotate(-8deg);

    box-shadow:
        8px 9px 0 rgba(255, 255, 255, .10);
}

.mission-block .purpose-block-label {
    display: block;

    margin-bottom: 18px;

    color: #e3c16d;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.mission-block h3 {
    max-width: 490px;
    margin: 0 0 25px;

    color: #fff !important;

    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.08;
    font-weight: 850;
}

.mission-block p {
    max-width: 470px;
    margin: 0;

    color: rgba(255, 255, 255, .90) !important;

    font-size: 1.04rem;
    line-height: 1.8;
}

/* Brochazo de misión */

.mission-block .purpose-brush {
    position: absolute;

    width: 250px;
    height: 100px;

    top: 20px;
    right: -45px;

    z-index: 1;

    background: rgba(227, 193, 109, .20);

    transform: rotate(12deg);

    clip-path: polygon(
        0 34%,
        12% 15%,
        28% 24%,
        45% 5%,
        66% 22%,
        84% 8%,
        100% 30%,
        94% 73%,
        73% 85%,
        48% 69%,
        25% 91%,
        4% 72%
    );
}

.mission-block .purpose-hand-line {
    position: absolute;

    width: 125px;
    height: 45px;

    right: 42px;
    bottom: 38px;

    border-bottom: 3px solid rgba(227, 193, 109, .60);
    border-radius: 50%;

    transform: rotate(-9deg);
}

.mission-block:hover {
    transform: rotate(0deg) translateY(-9px);

    box-shadow:
        25px 28px 0 rgba(201, 162, 77, .25),
        0 38px 70px rgba(15, 31, 82, .25);
}

/*======================================================
=                       VISIÓN
======================================================*/

.vision-block {
    color: #0f1f52;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 255, 255, .62),
            transparent 31%
        ),
        #f4e2a8;

    transform: rotate(2.2deg);

    clip-path: polygon(
        5% 0,
        97% 4%,
        100% 89%,
        93% 100%,
        1% 95%,
        3% 12%
    );

    box-shadow:
        -20px 24px 0 rgba(15, 31, 82, .10),
        0 30px 55px rgba(75, 55, 15, .10);
}

.vision-block::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -62px;
    bottom: -70px;

    z-index: 1;

    background: rgba(15, 31, 82, .08);

    border-radius:
        54% 46% 39% 61% /
        41% 55% 45% 59%;

    transform: rotate(-15deg);
}

.vision-block::after {
    content: "✦";
    position: absolute;

    left: 42px;
    bottom: 32px;

    z-index: 1;

    color: rgba(15, 31, 82, .25);

    font-size: 2rem;

    transform: rotate(-12deg);
}

/* Cinta adhesiva */

.vision-block .purpose-tape {
    position: absolute;

    width: 135px;
    height: 42px;

    top: -15px;
    left: 50%;

    z-index: 4;

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

    transform: translateX(-50%) rotate(-5deg);

    box-shadow:
        0 6px 16px rgba(15, 31, 82, .08);
}

/* Icono visión */

.vision-block .purpose-block-icon {
    width: 74px;
    height: 74px;

    display: grid;
    place-items: center;

    margin-bottom: 36px;

    color: #fff;
    background: #0f1f52;

    border-radius:
        44% 56% 60% 40% /
        48% 40% 60% 52%;

    font-size: 1.8rem;

    transform: rotate(8deg);

    box-shadow:
        8px 9px 0 rgba(255, 255, 255, .35);
}

.vision-block .purpose-block-label {
    display: block;

    margin-bottom: 18px;

    color: #8d6820;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.vision-block h3 {
    max-width: 500px;
    margin: 0 0 25px;

    color: #0f1f52 !important;

    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.08;
    font-weight: 850;
}

.vision-block p {
    max-width: 470px;
    margin: 0;

    color: rgba(15, 31, 82, .80) !important;

    font-size: 1.04rem;
    line-height: 1.8;
}

.vision-block .purpose-scribble {
    position: absolute;

    right: 38px;
    bottom: 28px;

    color: rgba(15, 31, 82, .42);

    font-family: cursive;
    font-size: 1.16rem;

    transform: rotate(-8deg);
}

.vision-block:hover {
    transform: rotate(0deg) translateY(-9px);

    box-shadow:
        -25px 28px 0 rgba(15, 31, 82, .13),
        0 38px 70px rgba(75, 55, 15, .14);
}

/*======================================================
=                   GARABATOS FONDO
======================================================*/

.purpose-doodle {
    position: absolute;
    pointer-events: none;
}

.purpose-doodle-one {
    width: 100px;
    height: 100px;

    top: 175px;
    left: 4%;

    border: 4px solid rgba(201, 162, 77, .36);

    border-radius:
        44% 56% 60% 40% /
        48% 40% 60% 52%;

    transform: rotate(20deg);

    animation: purpose-float 6s ease-in-out infinite;
}

.purpose-doodle-two {
    width: 135px;
    height: 65px;

    right: 4%;
    bottom: 75px;

    border-top: 4px solid rgba(15, 31, 82, .20);
    border-radius: 50%;

    transform: rotate(-16deg);

    animation: purpose-float 7s ease-in-out infinite reverse;
}

@keyframes purpose-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

/*======================================================
=                    RESPONSIVE
======================================================*/

@media (max-width: 1050px) {
    .creative-purpose-canvas {
        gap: 42px;
    }

    .creative-purpose-block {
        padding: 56px 42px 55px;
    }
}

@media (max-width: 992px) {
    .creative-purpose {
        padding: 100px 0;
    }

    .creative-purpose-heading {
        margin-bottom: 70px;
    }

    .creative-purpose-canvas {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .creative-purpose-canvas::before,
    .creative-purpose-canvas::after {
        display: none;
    }

    .creative-purpose-block {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .mission-block {
        transform: rotate(-1.3deg);
    }

    .vision-block {
        transform: rotate(1.3deg);
    }
}

@media (max-width: 576px) {
    .creative-purpose {
        padding: 82px 0;
    }

    .creative-purpose-heading {
        margin-bottom: 52px;
    }

    .creative-purpose-heading h2 {
        font-size: 3rem;
        line-height: .97;
        letter-spacing: -1.5px;
    }

    .creative-purpose-heading p {
        font-size: 1rem;
    }

    .creative-purpose-block {
        min-height: auto;
        padding: 50px 30px 65px;
    }

    .mission-block h3,
    .vision-block h3 {
        font-size: 2rem;
    }

    .mission-block p,
    .vision-block p {
        font-size: .98rem;
        line-height: 1.75;
    }

    .purpose-block-icon {
        width: 66px !important;
        height: 66px !important;
    }

    .vision-block .purpose-scribble {
        right: 24px;
        bottom: 20px;
        font-size: 1rem;
    }

    .purpose-doodle-one {
        top: 130px;
        left: -35px;
    }

    .purpose-doodle-two {
        right: -40px;
        bottom: 35px;
    }
}

/*======================================================
=        PROCESO CREATIVO — LÍNEA DEL TIEMPO
======================================================*/

.creative-process {
    position: relative;
    padding: 95px 0 100px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(201, 162, 77, .14),
            transparent 23%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(15, 31, 82, .09),
            transparent 27%
        ),
        #fffdf8;
}

/* Textura tipo papel */

.creative-process::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: .28;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .024) 34px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .017) 34px
        );
}

/* Brochazo decorativo */

.creative-process::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 90px;

    top: 68px;
    left: -55px;

    background: rgba(201, 162, 77, .24);

    transform: rotate(8deg);

    clip-path: polygon(
        0 39%,
        13% 14%,
        28% 30%,
        45% 8%,
        62% 28%,
        80% 10%,
        100% 41%,
        94% 74%,
        73% 60%,
        52% 84%,
        29% 63%,
        8% 82%
    );
}

.creative-process .container {
    position: relative;
    z-index: 2;
}

/*======================================================
=                    ENCABEZADO
======================================================*/

.creative-process-heading {
    position: relative;

    max-width: 850px;
    margin: 0 auto 100px;

    text-align: center;
}

.creative-process-heading::before {
    content: "";
    position: absolute;

    width: 120px;
    height: 55px;

    top: -38px;
    right: 55px;

    border-top: 4px solid rgba(201, 162, 77, .52);
    border-radius: 50%;

    transform: rotate(12deg);
}

.creative-process-heading .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 28px;

    color: #966f20;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.creative-process-heading .section-tag::before {
    content: "";

    width: 44px;
    height: 4px;

    background: #c9a24d;
    border-radius: 999px;

    transform: rotate(-5deg);
}

.creative-process-heading h2 {
    margin: 0 0 25px;

    color: #0f1f52;

    font-size: clamp(3rem, 6vw, 5.3rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -3px;
}

.creative-process-heading h2 span {
    position: relative;
    display: inline-block;

    color: #c9a24d;
}

.creative-process-heading h2 span::after {
    content: "";
    position: absolute;

    left: 1%;
    bottom: -12px;

    width: 100%;
    height: 18px;

    z-index: -1;

    background: rgba(201, 162, 77, .30);

    transform: rotate(-2deg);

    clip-path: polygon(
        0 42%,
        10% 18%,
        23% 40%,
        38% 12%,
        53% 37%,
        68% 17%,
        84% 39%,
        100% 22%,
        96% 74%,
        80% 60%,
        63% 82%,
        45% 61%,
        27% 79%,
        8% 62%
    );
}

.creative-process-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #5d6473;

    font-size: 1.08rem;
    line-height: 1.85;
}

/*======================================================
=                 LÍNEA DEL TIEMPO
======================================================*/

.creative-process-timeline {
    position: relative;

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

    align-items: center;
}

/* Línea base detrás de las tarjetas */

.creative-process-timeline::before {
    content: "";
    position: absolute;

    left: 6%;
    right: 6%;
    top: 50%;

    height: 4px;

    z-index: -1;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(15, 31, 82, .22) 0 14px,
            transparent 14px 25px
        );

    transform: rotate(-1deg);
}

/*======================================================
=                      TARJETAS
======================================================*/

.process-step {
    position: relative;

    min-height: 390px;
    padding: 60px 34px 42px;

    overflow: visible;
    isolation: isolate;

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease;
}

.process-step-one,
.process-step-three {
    color: #fff;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(255, 255, 255, .12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #0f1f52,
            #244b9a
        );

    box-shadow:
        14px 16px 0 rgba(201, 162, 77, .19),
        0 25px 45px rgba(15, 31, 82, .18);
}

.process-step-two,
.process-step-four {
    color: #0f1f52;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(255, 255, 255, .60),
            transparent 28%
        ),
        #f3dfa1;

    box-shadow:
        -14px 16px 0 rgba(15, 31, 82, .10),
        0 25px 45px rgba(80, 58, 15, .10);
}

/* Formas irregulares */

.process-step-one {
    clip-path: polygon(
        5% 2%,
        96% 0,
        100% 88%,
        90% 100%,
        2% 95%,
        0 13%
    );

    transform: rotate(-3deg);
}

.process-step-two {
    clip-path: polygon(
        4% 0,
        96% 4%,
        100% 92%,
        91% 100%,
        0 95%,
        3% 11%
    );

    transform: rotate(2deg);
}

.process-step-three {
    clip-path: polygon(
        5% 3%,
        98% 0,
        100% 88%,
        92% 100%,
        1% 96%,
        0 10%
    );

    transform: rotate(-1.5deg);
}

.process-step-four {
    clip-path: polygon(
        3% 1%,
        95% 3%,
        100% 90%,
        89% 100%,
        0 94%,
        3% 12%
    );

    transform: rotate(3deg);
}

/* Número grande */

.process-number {
    position: absolute;

    top: 18px;
    right: 24px;

    z-index: 1;

    font-size: 5.5rem;
    line-height: 1;
    font-weight: 900;
}

.process-step-one .process-number,
.process-step-three .process-number {
    color: rgba(255, 255, 255, .11);
}

.process-step-two .process-number,
.process-step-four .process-number {
    color: rgba(15, 31, 82, .10);
}

/*======================================================
=                       ICONOS
======================================================*/

.process-icon {
    position: relative;
    z-index: 3;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    margin-bottom: 34px;

    font-size: 1.75rem;

    border-radius:
        48% 52% 60% 40% /
        42% 56% 44% 58%;
}

.process-step-one .process-icon,
.process-step-three .process-icon {
    color: #0f1f52;
    background: #e3c16d;

    box-shadow:
        7px 8px 0 rgba(255, 255, 255, .10);
}

.process-step-two .process-icon,
.process-step-four .process-icon {
    color: #fff;
    background: #0f1f52;

    box-shadow:
        7px 8px 0 rgba(255, 255, 255, .35);
}

.process-step-one .process-icon {
    transform: rotate(-8deg);
}

.process-step-two .process-icon {
    transform: rotate(8deg);
}

.process-step-three .process-icon {
    transform: rotate(-5deg);
}

.process-step-four .process-icon {
    transform: rotate(7deg);
}

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

.process-step-content {
    position: relative;
    z-index: 3;
}

.process-step-label {
    display: block;

    margin-bottom: 15px;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.process-step-one .process-step-label,
.process-step-three .process-step-label {
    color: #e3c16d;
}

.process-step-two .process-step-label,
.process-step-four .process-step-label {
    color: #916c22;
}

.process-step h3 {
    margin: 0 0 20px;

    font-size: 2rem;
    line-height: 1.05;
    font-weight: 850;
}

.process-step-one h3,
.process-step-three h3 {
    color: #fff !important;
}

.process-step-two h3,
.process-step-four h3 {
    color: #0f1f52 !important;
}

.process-step p {
    margin: 0;

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

.process-step-one p,
.process-step-three p {
    color: rgba(255, 255, 255, .88) !important;
}

.process-step-two p,
.process-step-four p {
    color: rgba(15, 31, 82, .78) !important;
}

/*======================================================
=                  CINTAS ADHESIVAS
======================================================*/

.process-tape {
    position: absolute;

    width: 110px;
    height: 36px;

    top: -13px;
    left: 50%;

    z-index: 5;

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

    transform: translateX(-50%) rotate(-6deg);

    box-shadow:
        0 5px 14px rgba(15, 31, 82, .08);
}

.process-step-four .process-tape {
    transform: translateX(-50%) rotate(6deg);
}

/*======================================================
=                       FLECHAS
======================================================*/

.process-arrow {
    position: relative;

    width: 100%;
    height: 65px;
}

.process-arrow::before {
    content: "";
    position: absolute;

    width: 54px;
    height: 34px;

    left: 4px;
    top: 12px;

    border-top: 4px solid rgba(15, 31, 82, .40);
    border-radius: 50%;

    transform: rotate(9deg);
}

.process-arrow::after {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    right: 3px;
    top: 15px;

    border-top: 4px solid rgba(15, 31, 82, .40);
    border-right: 4px solid rgba(15, 31, 82, .40);

    transform: rotate(48deg);
}

.process-arrow-two::before {
    transform: rotate(-8deg);
}

.process-arrow-three::before {
    transform: rotate(10deg);
}

/*======================================================
=                       HOVER
======================================================*/

.process-step:hover {
    transform: rotate(0deg) translateY(-10px);
}

.process-step-one:hover,
.process-step-three:hover {
    box-shadow:
        18px 20px 0 rgba(201, 162, 77, .24),
        0 35px 60px rgba(15, 31, 82, .23);
}

.process-step-two:hover,
.process-step-four:hover {
    box-shadow:
        -18px 20px 0 rgba(15, 31, 82, .13),
        0 35px 60px rgba(80, 58, 15, .14);
}

/*======================================================
=                 DETALLES DECORATIVOS
======================================================*/

.process-doodle {
    position: absolute;
    pointer-events: none;
}

.process-doodle-one {
    width: 100px;
    height: 100px;

    left: 3%;
    bottom: 75px;

    border: 4px solid rgba(201, 162, 77, .35);

    border-radius:
        42% 58% 61% 39% /
        48% 40% 60% 52%;

    transform: rotate(18deg);

    animation: process-float 6s ease-in-out infinite;
}

.process-doodle-two {
    width: 135px;
    height: 65px;

    top: 185px;
    right: 3%;

    border-top: 4px solid rgba(15, 31, 82, .20);
    border-radius: 50%;

    transform: rotate(-16deg);

    animation: process-float 7s ease-in-out infinite reverse;
}

@keyframes process-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

/*======================================================
=                    RESPONSIVE
======================================================*/

@media (max-width: 1200px) {
    .creative-process-timeline {
        grid-template-columns:
            minmax(0, 1fr)
            45px
            minmax(0, 1fr)
            45px
            minmax(0, 1fr)
            45px
            minmax(0, 1fr);
    }

    .process-step {
        padding-left: 27px;
        padding-right: 27px;
    }

    .process-arrow::before {
        width: 36px;
    }
}

@media (max-width: 992px) {
    .creative-process {
        padding: 105px 0;
    }

    .creative-process-heading {
        margin-bottom: 75px;
    }

    .creative-process-timeline {
        max-width: 720px;
        margin: 0 auto;

        grid-template-columns: 1fr;
        gap: 65px;
    }

    .creative-process-timeline::before {
        left: 50%;
        right: auto;
        top: 3%;
        bottom: 3%;

        width: 4px;
        height: auto;

        background:
            repeating-linear-gradient(
                180deg,
                rgba(15, 31, 82, .22) 0 14px,
                transparent 14px 25px
            );

        transform: translateX(-50%);
    }

    .process-arrow {
        display: none;
    }

    .process-step {
        min-height: 360px;
    }
}

@media (max-width: 576px) {
    .creative-process {
        padding: 82px 0;
    }

    .creative-process-heading {
        margin-bottom: 55px;
    }

    .creative-process-heading h2 {
        font-size: 3rem;
        line-height: .97;
        letter-spacing: -1.5px;
    }

    .creative-process-heading p {
        font-size: 1rem;
    }

    .creative-process-timeline {
        gap: 45px;
    }

    .process-step {
        min-height: auto;
        padding: 52px 30px 48px;
    }

    .process-number {
        font-size: 4.5rem;
    }

    .process-icon {
        width: 66px;
        height: 66px;

        font-size: 1.55rem;
    }

    .process-step h3 {
        font-size: 1.9rem;
    }

    .process-step p {
        font-size: .96rem;
    }

    .process-doodle-one {
        left: -45px;
        bottom: 35px;
    }

    .process-doodle-two {
        right: -45px;
        top: 130px;
    }
}

/*======================================================
=               GALERÍA ARTÍSTICA
======================================================*/

.creative-gallery {
    position: relative;
    padding: 95px 0 110px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(201, 162, 77, .14),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(15, 31, 82, .09),
            transparent 28%
        ),
        #fffdf8;
}

.creative-gallery::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: .28;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .024) 34px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 33px,
            rgba(15, 31, 82, .017) 34px
        );
}

.creative-gallery::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 95px;

    top: 60px;
    right: -55px;

    background: rgba(201, 162, 77, .25);

    transform: rotate(-8deg);

    clip-path: polygon(
        0 40%,
        12% 15%,
        28% 31%,
        43% 8%,
        61% 29%,
        79% 12%,
        100% 42%,
        94% 75%,
        73% 60%,
        52% 85%,
        30% 64%,
        8% 82%
    );
}

.creative-gallery .container {
    position: relative;
    z-index: 2;
}

/* Encabezado */

.creative-gallery-heading {
    position: relative;

    max-width: 850px;
    margin: 0 auto 90px;

    text-align: center;
}

.creative-gallery-heading .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 28px;

    color: #966f20;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.creative-gallery-heading .section-tag::before {
    content: "";

    width: 44px;
    height: 4px;

    background: #c9a24d;
    border-radius: 999px;

    transform: rotate(-5deg);
}

.creative-gallery-heading h2 {
    margin: 0 0 25px;

    color: #0f1f52;

    font-size: clamp(3rem, 6vw, 5.3rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -3px;
}

.creative-gallery-heading h2 span {
    position: relative;
    display: inline-block;

    color: #c9a24d;
}

.creative-gallery-heading h2 span::after {
    content: "";
    position: absolute;

    left: 1%;
    bottom: -12px;

    width: 100%;
    height: 18px;

    z-index: -1;

    background: rgba(201, 162, 77, .30);

    transform: rotate(-2deg);

    clip-path: polygon(
        0 42%,
        10% 18%,
        23% 40%,
        38% 12%,
        53% 37%,
        68% 17%,
        84% 39%,
        100% 22%,
        96% 74%,
        80% 60%,
        63% 82%,
        45% 61%,
        27% 79%,
        8% 62%
    );
}

.creative-gallery-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #5d6473;

    font-size: 1.08rem;
    line-height: 1.85;
}

/* Grid collage */

.creative-gallery-grid {
    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 90px;
    gap: 24px;
}

.gallery-item {
    position: relative;

    margin: 0;
    overflow: hidden;
    isolation: isolate;

    background: #0f1f52;

    box-shadow:
        0 25px 50px rgba(15, 31, 82, .16);

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease;
}

.gallery-item-large {
    grid-column: 1 / span 7;
    grid-row: 1 / span 6;

    transform: rotate(-1.5deg);

    clip-path: polygon(
        2% 2%,
        98% 0,
        100% 92%,
        94% 100%,
        0 97%,
        1% 10%
    );
}

.gallery-item-top {
    grid-column: 8 / span 5;
    grid-row: 1 / span 3;

    transform: rotate(2deg);

    clip-path: polygon(
        3% 0,
        97% 3%,
        100% 90%,
        91% 100%,
        0 95%,
        2% 10%
    );
}

.gallery-item-middle {
    grid-column: 8 / span 5;
    grid-row: 4 / span 3;

    transform: rotate(-2deg);

    clip-path: polygon(
        2% 3%,
        100% 0,
        97% 94%,
        89% 100%,
        0 96%
    );
}

.gallery-item-bottom {
    grid-column: 1 / span 5;
    grid-row: 7 / span 4;

    transform: rotate(2deg);

    clip-path: polygon(
        4% 0,
        96% 3%,
        100% 92%,
        91% 100%,
        0 96%,
        2% 12%
    );
}

.gallery-item-wide {
    grid-column: 6 / span 7;
    grid-row: 7 / span 4;

    transform: rotate(-1deg);

    clip-path: polygon(
        2% 2%,
        98% 0,
        100% 91%,
        92% 100%,
        0 96%,
        1% 10%
    );
}

/* Imágenes */

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .65s cubic-bezier(.2, .8, .2, 1),
        filter .45s ease;
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(4, 12, 39, .84) 100%
        );

    pointer-events: none;
}

/* Información */

.gallery-item figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    padding: 35px 36px;
}

.gallery-item figcaption > span {
    display: block;

    margin-bottom: 8px;

    color: #e3c16d;

    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.gallery-item h3 {
    margin: 0 0 8px;

    color: #fff !important;

    font-size: clamp(1.55rem, 2.5vw, 2.4rem);
    line-height: 1.05;
    font-weight: 850;
}

.gallery-item p {
    max-width: 430px;
    margin: 0;

    color: rgba(255, 255, 255, .84) !important;

    font-size: .96rem;
    line-height: 1.6;
}

/* Cinta adhesiva */

.gallery-tape {
    position: absolute;

    width: 115px;
    height: 36px;

    top: -10px;
    left: 50%;

    z-index: 5;

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

    transform: translateX(-50%) rotate(-6deg);

    box-shadow:
        0 5px 14px rgba(15, 31, 82, .10);
}

.gallery-tape-right {
    left: auto;
    right: 35px;

    transform: rotate(7deg);
}

/* Hover */

.gallery-item:hover {
    transform: rotate(0deg) translateY(-9px);

    box-shadow:
        0 35px 70px rgba(15, 31, 82, .24);
}

.gallery-item:hover img {
    transform: scale(1.07);
    filter: saturate(1.08);
}

/* Garabatos */

.gallery-doodle {
    position: absolute;
    pointer-events: none;
}

.gallery-doodle-one {
    width: 105px;
    height: 105px;

    left: 3%;
    bottom: 95px;

    border: 4px solid rgba(201, 162, 77, .36);

    border-radius:
        42% 58% 61% 39% /
        48% 40% 60% 52%;

    transform: rotate(18deg);
}

.gallery-doodle-two {
    width: 140px;
    height: 70px;

    top: 185px;
    right: 3%;

    border-top: 4px solid rgba(15, 31, 82, .20);
    border-radius: 50%;

    transform: rotate(-16deg);
}

/* Responsive */

@media (max-width: 992px) {
    .creative-gallery {
        padding: 105px 0;
    }

    .creative-gallery-heading {
        margin-bottom: 70px;
    }

    .creative-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 310px;
    }

    .gallery-item-large,
    .gallery-item-top,
    .gallery-item-middle,
    .gallery-item-bottom,
    .gallery-item-wide {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-item-large,
    .gallery-item-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .creative-gallery {
        padding: 82px 0;
    }

    .creative-gallery-heading {
        margin-bottom: 52px;
    }

    .creative-gallery-heading h2 {
        font-size: 3rem;
        line-height: .97;
        letter-spacing: -1.5px;
    }

    .creative-gallery-heading p {
        font-size: 1rem;
    }

    .creative-gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 360px;
        gap: 28px;
    }

    .gallery-item-large,
    .gallery-item-top,
    .gallery-item-middle,
    .gallery-item-bottom,
    .gallery-item-wide {
        grid-column: auto;
    }

    .gallery-item-large {
        min-height: 430px;
    }

    .gallery-item figcaption {
        padding: 28px 25px;
    }

    .gallery-item h3 {
        font-size: 2rem;
    }
}

/*==================================================
=                CONTACTO FINAL
==================================================*/

.creative-contact{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:
        radial-gradient(circle at 10% 15%,rgba(201,162,77,.14),transparent 25%),
        radial-gradient(circle at 90% 82%,rgba(15,31,82,.09),transparent 28%),
        #fffdf8;

}

/* textura */

.creative-contact::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.28;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 33px,
            rgba(15,31,82,.024) 34px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 33px,
            rgba(15,31,82,.017) 34px
        );

}

.creative-contact .container{

    position:relative;
    z-index:2;

}

/*========================================*/

.creative-contact-card{

    position:relative;

    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:70px;

    align-items:center;

    padding:85px;

    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(circle at 85% 18%,rgba(255,255,255,.10),transparent 30%),
        linear-gradient(145deg,#0f1f52,#244b9a);

    clip-path:polygon(
        3% 2%,
        97% 0,
        100% 90%,
        92% 100%,
        1% 96%,
        0 12%
    );

    box-shadow:
        26px 28px 0 rgba(201,162,77,.18),
        0 40px 70px rgba(15,31,82,.25);

}

/*========================================*/

.contact-tape{

    position:absolute;

    top:-12px;

    left:50%;

    width:150px;

    height:42px;

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

    transform:
        translateX(-50%)
        rotate(-5deg);

}

.contact-brush{

    position:absolute;

    width:260px;

    height:100px;

    top:20px;

    right:-35px;

    background:rgba(227,193,109,.18);

    transform:rotate(10deg);

    clip-path:polygon(
        0 34%,
        12% 15%,
        28% 24%,
        45% 5%,
        66% 22%,
        84% 8%,
        100% 30%,
        94% 73%,
        73% 85%,
        48% 69%,
        25% 91%,
        4% 72%
    );

}

/*========================================*/

.creative-contact-content{

    position:relative;
    z-index:2;

}

.creative-contact .section-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

    color:#e3c16d;

    font-size:.8rem;

    letter-spacing:3px;

    font-weight:700;

}

.creative-contact .section-tag::before{

    content:"";

    width:42px;

    height:4px;

    background:#e3c16d;

    border-radius:999px;

}

.creative-contact h2{

    margin-bottom:28px;

    color:#fff;

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

    line-height:.95;

    font-weight:900;

}

.creative-contact h2 span{

    color:#e3c16d;

}

.creative-contact p{

    max-width:620px;

    color:rgba(255,255,255,.86);

    font-size:1.08rem;

    line-height:1.9;

}

/*========================================*/

.creative-contact-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.btn-contact-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    color:#0f1f52;

    background:#e3c16d;

    text-decoration:none;

    font-weight:700;

    clip-path:polygon(
        3% 6%,
        97% 0,
        100% 86%,
        91% 100%,
        0 94%
    );

    transition:.35s;

}

.btn-contact-primary:hover{

    transform:
        translateY(-6px)
        rotate(-1deg);

}

.btn-contact-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    height:58px;

    padding:0 30px;

    color:#fff;

    text-decoration:none;

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

    backdrop-filter:blur(8px);

    transition:.35s;

}

.btn-contact-secondary:hover{

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

    transform:translateY(-6px);

}

/*========================================*/

.creative-contact-visual{

    position:relative;

    min-height:330px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-word{

    position:absolute;

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

    font-size:9rem;

    font-weight:900;

    transform:rotate(-10deg);

}

.contact-shape{

    width:170px;

    height:170px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0f1f52;

    background:#e3c16d;

    border-radius:
        45% 55% 60% 40% /
        40% 55% 45% 60%;

    transform:rotate(8deg);

    font-size:4rem;

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

}

.contact-signature{

    position:absolute;

    bottom:20px;

    right:0;

    color:rgba(255,255,255,.65);

    font-family:cursive;

    transform:rotate(-8deg);

}

/*========================================*/

.contact-doodle{

    position:absolute;

}

.contact-doodle-one{

    width:105px;

    height:105px;

    left:4%;

    top:90px;

    border:4px solid rgba(201,162,77,.35);

    border-radius:50%;

}

.contact-doodle-two{

    width:140px;

    height:70px;

    right:4%;

    bottom:60px;

    border-top:4px solid rgba(15,31,82,.20);

    border-radius:50%;

}

/*========================================*/

@media(max-width:992px){

.creative-contact-card{

grid-template-columns:1fr;

text-align:center;

padding:65px 45px;

}

.creative-contact-buttons{

justify-content:center;

}

}

@media(max-width:576px){

.creative-contact{

padding:90px 0;

}

.creative-contact-card{

padding:55px 28px;

}

.creative-contact h2{

font-size:3rem;

}

.creative-contact-buttons{

flex-direction:column;

}

.btn-contact-primary,
.btn-contact-secondary{

width:100%;

justify-content:center;

}

}