/* Proyectos — Hero — #projects_hero */

#projects_hero {
    padding: clamp(48px,7vw,104px) 0 clamp(36px,4.4vw,60px);
}

#projects_hero .mgx-projects-hero-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,56px);
}

#projects_hero .mgx-projects-hero-003 {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px var(--font-body);
    color: var(--mg-grey);
    margin-bottom: clamp(28px,3.4vw,44px);
}

#projects_hero .mgx-projects-hero-004 {
    color: var(--mg-grey);
    text-decoration: none;
}

#projects_hero .mgx-projects-hero-005 {
    color: var(--color-text);
}

#projects_hero .mgx-projects-hero-006 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

#projects_hero .mgx-projects-hero-007 {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--color-accent);
}

#projects_hero .mgx-projects-hero-008 {
    font: 600 11px var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-accent);
}

#projects_hero .mgx-projects-hero-009 {
    margin: 0 0 clamp(24px,3vw,38px);
    max-width: 20ch;
    text-wrap: balance;
}

#projects_hero .mgx-projects-hero-010 {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px,4vw,72px);
    align-items: end;
    border-top: 2px solid var(--color-divider);
    padding-top: 28px;
}

#projects_hero .mgx-projects-hero-011 {
    font: 400 clamp(15px,1.35vw,19px)/1.7 var(--font-body);
    color: var(--mg-body);
    margin: 0;
    max-width: 56ch;
}

#projects_hero .mgx-projects-hero-012 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 600 12px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-accent);
    justify-self: start;
}

/* Proyectos — Destacado — #projects_featured */

#projects_featured {
    border-top: 2px solid var(--color-divider);
    padding: clamp(40px,5.4vw,76px) 0 clamp(52px,7vw,100px);
}

#projects_featured .mgx-projects-featured-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,56px);
}

#projects_featured .mgx-projects-featured-003 {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(26px,4vw,64px);
    align-items: center;
}

#projects_featured .mgx-projects-featured-004 {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #211f1d;
    border: 1px solid var(--color-divider);
}

#projects_featured .mgx-projects-featured-005 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#projects_featured .mgx-projects-featured-006 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

#projects_featured .mgx-projects-featured-007 {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--mg-gold);
}

#projects_featured .mgx-projects-featured-008 {
    font: 600 10px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-accent);
}

#projects_featured .mgx-projects-featured-009 {
    margin: 0 0 16px;
    max-width: 18ch;
}

#projects_featured .mgx-projects-featured-010 {
    font: 400 clamp(15px,1.1vw,16.5px)/1.75 var(--font-body);
    color: var(--mg-body);
    margin: 0 0 26px;
    max-width: 46ch;
}

#projects_featured .mgx-projects-featured-011 {
    margin: 0 0 26px;
    border-top: 1px solid var(--color-divider);
}

#projects_featured .mgx-projects-featured-012 {
    display: grid;
    grid-template-columns: minmax(96px,.3fr) 1fr;
    gap: 8px 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-divider);
}

#projects_featured .mgx-projects-featured-013 {
    font: 600 10px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin: 0;
}

#projects_featured .mgx-projects-featured-014 {
    font: 400 14px var(--font-body);
    margin: 0;
}

#projects_featured .mgx-projects-featured-015 {
    display: grid;
    grid-template-columns: minmax(96px,.3fr) 1fr;
    gap: 8px 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-divider);
}

#projects_featured .mgx-projects-featured-016 {
    font: 600 10px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin: 0;
}

#projects_featured .mgx-projects-featured-017 {
    font: 400 14px var(--font-body);
    margin: 0;
}

#projects_featured .mgx-projects-featured-018 {
    display: grid;
    grid-template-columns: minmax(96px,.3fr) 1fr;
    gap: 8px 20px;
    padding: 13px 0;
}

#projects_featured .mgx-projects-featured-019 {
    font: 600 10px var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mg-grey);
    margin: 0;
}

#projects_featured .mgx-projects-featured-020 {
    font: 400 14px var(--font-body);
    margin: 0;
}

#projects_featured .mgx-projects-featured-021 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 600 12px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-accent);
}

/* Proyectos — Galería — #projects_grid */

#projects_grid {
    border-top: 2px solid var(--color-divider);
    background: var(--color-surface);
    padding: clamp(48px,6.4vw,96px) 0;
}

#projects_grid .mgx-projects-grid-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,56px);
}

#projects_grid .mgx-projects-grid-003 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(18px,3vw,40px);
    align-items: end;
    margin-bottom: clamp(22px,2.6vw,32px);
}

#projects_grid .mgx-projects-grid-004 {
    margin: 0;
    max-width: 20ch;
}

#projects_grid .mgx-projects-grid-005 {
    font: 400 13px var(--font-body);
    color: var(--mg-grey);
}

#projects_grid .mgx-projects-grid-006 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(22px,2.6vw,32px);
}

#projects_grid .mgx-projects-grid-007 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-008 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-009 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-010 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-011 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-012 {
    font: 600 11.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s;
}

#projects_grid .mgx-projects-grid-013 {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: clamp(16px,1.8vw,26px);
}

#projects_grid .mgx-projects-grid-014 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-015 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-016 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-017 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-018 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-019 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-020 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-021 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-022 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-023 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-024 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-025 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-026 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-027 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-028 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-029 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-030 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-031 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-032 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-033 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-034 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-035 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-036 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-037 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-038 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-039 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-040 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-041 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-042 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-043 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-044 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-045 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-046 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-047 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-048 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-049 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-050 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-051 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-052 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-053 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-054 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-055 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-056 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-057 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-058 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-059 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-060 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-061 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-062 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-063 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-064 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-065 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-066 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-067 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-068 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-069 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-070 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-071 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-072 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-073 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-074 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-075 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-076 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-077 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-078 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-079 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-080 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-081 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-082 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-083 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-084 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-085 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-086 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-087 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-088 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-089 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-090 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-091 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-092 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-093 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-094 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-095 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-096 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-097 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-098 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-099 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-100 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-101 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-102 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-103 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-104 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-105 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-106 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-107 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-108 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-109 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-110 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-111 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-112 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-113 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-114 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-115 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-116 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-117 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-118 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-119 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-120 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-121 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-122 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-123 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

#projects_grid .mgx-projects-grid-124 {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #211f1d;
    text-decoration: none;
}

#projects_grid .mgx-projects-grid-125 {
    position: absolute;
    inset: 0;
    background-color: #211f1d;
    background-size: cover;
    background-position: center;
}

#projects_grid .mgx-projects-grid-126 {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(18,16,15,.62) 0%,rgba(18,16,15,.16) 44%,rgba(18,16,15,0) 72%);
}

#projects_grid .mgx-projects-grid-127 {
    position: absolute;
    right: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .4s,transform .4s;
}

#projects_grid .mgx-projects-grid-128 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 17px 15px;
    background: rgba(24,21,20,.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
    transition: background .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;
}

#projects_grid .mgx-projects-grid-129 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

#projects_grid .mgx-projects-grid-130 {
    display: block;
    width: 15px;
    height: 2px;
    background: #f2c14e;
}

#projects_grid .mgx-projects-grid-131 {
    font: 600 9.5px var(--font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2c14e;
}

#projects_grid .mgx-projects-grid-132 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: var(--mg-h4);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.4);
    margin-bottom: 5px;
}

#projects_grid .mgx-projects-grid-133 {
    font: 400 12px/1.45 var(--font-body);
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* Proyectos — CTA — #projects_cta */

#projects_cta {
    position: relative;
    background: var(--color-accent);
    color: #f7f5f1;
    overflow: hidden;
}

#projects_cta .mgx-projects-cta-002 {
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(52px,7vw,96px) clamp(20px,5vw,56px);
}

#projects_cta .mgx-projects-cta-003 {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(28px,5vw,72px);
    align-items: center;
}

#projects_cta .mgx-projects-cta-004 {
    font: 600 11px var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(247,245,241,.7);
    margin-bottom: 20px;
}

#projects_cta .mgx-projects-cta-005 {
    margin: 0 0 18px;
    color: #faf8f4;
    max-width: 22ch;
}

#projects_cta .mgx-projects-cta-006 {
    font: 400 clamp(15px,1.2vw,18px)/1.65 var(--font-body);
    color: rgba(247,245,241,.86);
    margin: 0;
    max-width: 52ch;
}

#projects_cta .mgx-projects-cta-007 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#projects_cta .mgx-projects-cta-008 {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f7f5f1;
    color: var(--color-accent);
    text-decoration: none;
    font: 600 14px var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 21px 26px;
    border-radius: 3px;
}

#projects_cta .mgx-projects-cta-009 {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    color: #f7f5f1;
    text-decoration: none;
    font: 600 14px var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 21px 26px;
    border: 1px solid rgba(247,245,241,.4);
    border-radius: 3px;
}