/* =========================================================
   GRAN FERRETERA EL BRILLANTE
   NUESTRA HISTORIA — ESTILO SIMPLE
   ========================================================= */

:root {
    --orange: #ED3D00;
    --orange-light: #F56A00;
    --orange-dark: #C93200;

    --black: #080808;
    --black-soft: #111111;

    --white: #ffffff;
    --gray: #a7a7a7;

    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
   
    
}
.gfe-history-simple {
    --gfe-h-orange: #ed3d00;
    --gfe-h-black: #0b0b0b;
    --gfe-h-dark: #151515;
    --gfe-h-text: #454545;
    --gfe-h-muted: #777777;
    --gfe-h-light: #f5f5f3;
    --gfe-h-border: #dededb;
    --gfe-h-white: #ffffff;

    width: 100%;

    overflow: hidden;

    background: var(--gfe-h-white);

    color: var(--gfe-h-black);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.gfe-history-simple__container {
    width: min(1400px, calc(100% - 50px));

    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.gfe-history-simple__hero {
    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    background: var(--gfe-h-black);

    color: var(--gfe-h-white);

    overflow: hidden;
}

.gfe-history-simple__hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -330px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(45deg);

    border: 1px solid rgba(237, 61, 0, 0.35);
}

.gfe-history-simple__hero::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 5px;

    left: 0;
    bottom: 0;

    background: var(--gfe-h-orange);
}

.gfe-history-simple__hero-inner {
    position: relative;

    z-index: 2;

    width: min(1400px, calc(100% - 50px));

    margin: 0 auto;

    padding: 80px 0;
}

.gfe-history-simple__eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--gfe-h-orange);

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.gfe-history-simple__eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    background: var(--gfe-h-orange);
}

.gfe-history-simple__hero h1 {
    max-width: 1500px;

    margin: 0;

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

    font-size: clamp(48px, 6vw, 76px);

    font-weight: 800;

    line-height: 0.95;

    letter-spacing: -1.5px;

    text-transform: uppercase;
}

.gfe-history-simple__hero h1 span {
    display: block;

    color: var(--gfe-h-orange);
}

.gfe-history-simple__hero p {
    max-width: 500px;

    margin: 25px 0 0;

    color: rgba(255, 255, 255, 0.7);

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

    font-size: 16px;

    line-height: 1.6;
}

.gfe-history-simple__hero-line {
    width: 55px;
    height: 3px;

    margin-top: 30px;

    background: var(--gfe-h-orange);
}


/* =========================================================
   LABEL GENERAL
   ========================================================= */

.gfe-history-simple__section-label {
    display: block;

    margin-bottom: 18px;

    color: var(--gfe-h-orange);

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

    font-size: 30px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* =========================================================
   HISTORIA PRINCIPAL
   ========================================================= */

.gfe-history-simple__story {
    background: var(--gfe-h-white);
}

.gfe-history-simple__story-intro {
    display: grid;

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

    gap: 80px;

    padding: 90px 0 75px;

    border-bottom: 1px solid var(--gfe-h-border);
}

.gfe-history-simple__story-intro p {
    margin: 0 0 18px;

    color: var(--gfe-h-text);

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

    font-size: 16px;

    line-height: 1.85;
}

.gfe-history-simple__story-intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CAPÍTULOS
   ========================================================= */

.gfe-history-simple__chapter {
    display: grid;

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

    gap: 70px;

    padding: 75px 0;

    border-bottom: 1px solid var(--gfe-h-border);
}

.gfe-history-simple__chapter-year {
    color: var(--gfe-h-orange);

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

    font-size: 52px;

    font-weight: 800;

    line-height: 0.85;

    letter-spacing: -2px;
}

.gfe-history-simple__chapter-content {
    max-width: 1400px;
}

.gfe-history-simple__chapter-content h2 {
    margin: 0 0 25px;

    color: var(--gfe-h-black);

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

    font-size: 34px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.5px;
}

.gfe-history-simple__chapter-content p {
    margin: 0 0 18px;

    color: var(--gfe-h-text);

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

    font-size: 16px;

    line-height: 1.85;
}

.gfe-history-simple__chapter-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GALERÍA
   ========================================================= */

.gfe-history-simple__gallery {
    padding: 90px 0;

    background: var(--gfe-h-light);
}

.gfe-history-simple__gallery-heading {
    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 55px;
}

.gfe-history-simple__gallery-heading p {
    margin: 0;

    color: var(--gfe-h-text);

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

    font-size: 17px;

    line-height: 1.5;
}


/* Año */

.gfe-history-simple__gallery-row {
    display: grid;

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

    gap: 45px;

    padding: 35px 0;

    border-top: 1px solid var(--gfe-h-border);
}

.gfe-history-simple__gallery-row:last-child {
    border-bottom: 1px solid var(--gfe-h-border);
}

.gfe-history-simple__gallery-year {
    color: var(--gfe-h-orange);

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

    font-size: 45px;

    font-weight: 800;

    line-height: 0.9;

    letter-spacing: -1px;
}


/* Fotos */

.gfe-history-simple__gallery-images {
    display: grid;

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

    gap: 20px;
}

.gfe-history-simple__gallery-images figure {
    position: relative;

    margin: 0;

    height: 330px;

    overflow: hidden;

    background: #222222;
}

.gfe-history-simple__gallery-images img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;

    filter: grayscale(10%);
}

.gfe-history-simple__gallery-images figure:hover img {
    transform: scale(1.035);

    filter: grayscale(0%);
}


/* =========================================================
   PRESENTE
   ========================================================= */

.gfe-history-simple__present {
    padding: 100px 0;

    background: var(--gfe-h-white);
}

.gfe-history-simple__present-block {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 90px;

    padding: 0 0 80px;

    border-bottom: 1px solid var(--gfe-h-border);
}

.gfe-history-simple__present-block + .gfe-history-simple__present-block {
    padding-top: 80px;

    padding-bottom: 0;

    border-bottom: 0;
}

.gfe-history-simple__present-title h2 {
    max-width: 400px;

    margin: 0;

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

    font-size: 38px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.8px;
}

.gfe-history-simple__present-text {
    max-width: 760px;
}

.gfe-history-simple__present-text p {
    margin: 0 0 18px;

    color: var(--gfe-h-text);

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

    font-size: 16px;

    line-height: 1.85;
}

.gfe-history-simple__present-text p:last-child {
    margin-bottom: 0;
}


/* Highlight */

.gfe-history-simple__highlight {
    margin-top: 30px !important;

    padding: 20px 25px;

    background: var(--gfe-h-light);

    border-left: 4px solid var(--gfe-h-orange);

    color: var(--gfe-h-black) !important;

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

    font-size: 21px !important;

    font-weight: 800;

    line-height: 1.25 !important;
}


/* =========================================================
   CIERRE DE HISTORIA
   ========================================================= */

.gfe-history-simple__closing {
    padding: 90px 0;

    background: var(--gfe-h-dark);

    color: var(--gfe-h-white);
}

.gfe-history-simple__closing-content {
    max-width: 1400px;
text-align: center;
    margin: 0 auto;
}

.gfe-history-simple__closing-content > p:first-child {
    max-width: 1400px;

    margin: 0 0 55px;

    color: #c1c1c1;

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

    font-size: 17px;

    line-height: 1.85;
}


/* Fechas */

.gfe-history-simple__dates {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top: 1px solid #333333;

    border-bottom: 1px solid #333333;
}

.gfe-history-simple__dates > div {
    min-height: 170px;

    padding: 25px;

    border-right: 1px solid #333333;
}

.gfe-history-simple__dates > div:first-child {
    border-left: 1px solid #333333;
}

.gfe-history-simple__dates strong {
    display: block;

    margin-bottom: 15px;

    color: var(--gfe-h-orange);

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

    font-size: 38px;

    font-weight: 800;

    line-height: 0.9;
}

.gfe-history-simple__dates span {
    display: block;

    color: #a9a9a9;

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

    font-size: 12px;

    line-height: 1.65;
}


/* Compromiso */

.gfe-history-simple__commitment {
    max-width: 1400px;
text-align: center;
    margin: 50px auto 0 !important;

    color: #ffffff !important;

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

    font-size: 28px !important;

    font-weight: 800;

    line-height: 1.1 !important;
}


/* =========================================================
   FRASE FINAL
   ========================================================= */

.gfe-history-simple__final {
    padding: 75px 0;

    background: var(--gfe-h-orange);

    color: var(--gfe-h-white);

    text-align: center;
}

.gfe-history-simple__final .gfe-history-simple__container {
    max-width: 1400px;
}

.gfe-history-simple__final span {
    display: block;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.75);

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.gfe-history-simple__final h2 {
    margin: 0;

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

    font-size: 44px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -1px;
}

.gfe-history-simple__final p {
    margin: 22px 0 0;

    color: var(--gfe-h-black);

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

    font-size: 16px;

    font-weight: 800;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
.gfe-history-simple__section-label{
    font-size: 25px;
}
    .gfe-history-simple__container,
    .gfe-history-simple__hero-inner {
        width: calc(100% - 40px);
    }

    .gfe-history-simple__story-intro {
        grid-template-columns: 170px 1fr;

        gap: 45px;
    }

    .gfe-history-simple__chapter {
        grid-template-columns: 110px 1fr;

        gap: 40px;
    }

    .gfe-history-simple__present-block {
        grid-template-columns: 0.7fr 1.3fr;

        gap: 50px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gfe-history-simple__container,
    .gfe-history-simple__hero-inner {
        width: calc(100% - 30px);
    }


    /* HERO */

    .gfe-history-simple__hero {
        min-height: 390px;
    }

    .gfe-history-simple__hero-inner {
        padding: 70px 0;
    }

    .gfe-history-simple__hero h1 {
        font-size: 40px;

        line-height: 0.98;

        letter-spacing: -0.8px;
    }

    .gfe-history-simple__hero p {
        margin-top: 20px;

        font-size: 14px;
    }


    /* HISTORIA */

    .gfe-history-simple__story-intro {
        display: block;

        padding: 65px 0 55px;
    }

    .gfe-history-simple__story-intro p {
        font-size: 14px;

        line-height: 1.8;
    }

    .gfe-history-simple__chapter {
        display: block;

        padding: 55px 0;
    }

    .gfe-history-simple__chapter-year {
        margin-bottom: 20px;

        font-size: 42px;
    }

    .gfe-history-simple__chapter-content h2 {
        margin-bottom: 20px;

        font-size: 27px;

        line-height: 1.05;
    }

    .gfe-history-simple__chapter-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    /* GALERÍA */

    .gfe-history-simple__gallery {
        padding: 65px 0;
    }

    .gfe-history-simple__gallery-heading {
        display: block;

        margin-bottom: 35px;
    }

    .gfe-history-simple__gallery-heading p {
        font-size: 14px;
    }

    .gfe-history-simple__gallery-row {
        display: block;

        padding: 28px 0;
    }

    .gfe-history-simple__gallery-year {
        margin-bottom: 18px;

        font-size: 38px;
    }

    .gfe-history-simple__gallery-images {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .gfe-history-simple__gallery-images figure {
        height: 240px;
    }


    /* PRESENTE */

    .gfe-history-simple__present {
        padding: 70px 0;
    }

    .gfe-history-simple__present-block {
        display: block;

        padding-bottom: 60px;
    }

    .gfe-history-simple__present-block + .gfe-history-simple__present-block {
        padding-top: 60px;
    }

    .gfe-history-simple__present-title {
        margin-bottom: 30px;
    }

    .gfe-history-simple__present-title h2 {
        max-width: 100%;

        font-size: 29px;

        line-height: 1.05;
    }

    .gfe-history-simple__present-text p {
        font-size: 14px;

        line-height: 1.8;
    }

    .gfe-history-simple__highlight {
        font-size: 18px !important;
    }


    /* CIERRE */

    .gfe-history-simple__closing {
        padding: 65px 0;
    }

    .gfe-history-simple__closing-content > p:first-child {
        margin-bottom: 40px;
    text-align: center;
        font-size: 14px;

        line-height: 1.8;
    }

    .gfe-history-simple__dates {
        grid-template-columns: 1fr;
    }

    .gfe-history-simple__dates > div {
        min-height: auto;

        padding: 22px;

        border-right: 0;

        border-bottom: 1px solid #333333;
    }

    .gfe-history-simple__dates > div:first-child {
        border-left: 1px solid #333333;
    }

    .gfe-history-simple__dates > div:last-child {
        border-bottom: 0;
    }

    .gfe-history-simple__dates strong {
        font-size: 34px;
    }

    .gfe-history-simple__commitment {
        margin-top: 40px !important;

        font-size: 23px !important;

        line-height: 1.12 !important;
    }


    /* FINAL */

    .gfe-history-simple__final {
        padding: 60px 0;
    }

    .gfe-history-simple__final h2 {
        font-size: 30px;

        line-height: 1.05;
    }

    .gfe-history-simple__final p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 380px) {

    .gfe-history-simple__container,
    .gfe-history-simple__hero-inner {
        width: calc(100% - 24px);
    }

    .gfe-history-simple__hero h1 {
        font-size: 36px;
    }

    .gfe-history-simple__gallery-images figure {
        height: 220px;
    }
}