/**
fonts
*/
@font-face {
    font-family: 'FuturaNew';
    src: url('./fonts/FuturaNew/FuturaNewBook-Reg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'FuturaNew';
    src: url('./fonts/FuturaNew/FuturaNewBook-Obl.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'FuturaNew';
    src: url('./fonts/FuturaNew/FuturaNewBold-Reg.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'FuturaNew';
    src: url('./fonts/FuturaNew/FuturaNewBold-Obl.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: 'FuturaNew';
    src: url('./fonts/FuturaNew/FuturaNewExtraBold-Obl.woff') format('truetype');
    font-weight: 900;
    font-style: italic;
  }

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'FuturaNew',Arial, sans-serif;
}

body {
    font-family: 'FuturaNew', Arial, sans-serif;
    line-height: 1.6;
    background: #000;
    color: #111;
}

.header {
    background: #000;
    position: relative;
    padding: 0;
}
.header__decor {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

/* Ocultar todos los layouts por defecto */
.layout-tablet-vertical,
.layout-tablet-horizontal,
.layout-desktop {
    display: none;
}

/* Tablet vertical: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .layout-tablet-vertical { display: block; }
    .layout-tablet-horizontal, .layout-desktop, .layout-mobile { display: none !important; }

    .header__decor-mobile {
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        background-color: #000;
    }
    .header__decor-mobile img {
        height:20px;
    }
    .header__logo-mobile {
        background: #f72608;
        padding:  0;
        height: 100px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

    .project-title--tablet {
        background: #e5e5e5;
        text-align: center;
        padding: 0;
        font-size: 1.3rem;
    }
    .project-title__text {
        padding: 5px 0 5px 0;
        font-size: .9rem;
        font-style: normal;
        background: #e5e5e5;
        margin-bottom: 0;
        letter-spacing: .6rem;
    }
    .hero-mobile {
        position: relative;
    }
    .hero__play-mobile {
        position: absolute;
        top: 50%;
        color: #fff;
        left: 50%;
        font-size: 50px;
        transform: translate(-50%, -50%);
    }
    .hero__play-mobile a, .hero__play-mobile a:visited {
        color: #fff;
        text-decoration: none;
    }
    .hero__image-mobile {
        width: 100%;
        background: #d9d9d9;
        position: relative;
        display: flex
;
        align-items: flex-end;
        justify-content: center;
        height: 275px;
    }
    .hero__image-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .logo-bar--tablet-vertical {
        background: #f72608;
        padding:  0;
        height: 100px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .logo-bar--tablet-vertical video{
        height: 220px;
    }
    .main-tablet-vertical {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 320px;
        background: #e5e5e5;
    }
    .main-tablet-vertical__left {
        flex: 1 1 50%;
        display: flex;
        justify-content: end;
        background: #e5e5e5;
        flex-direction: column;
    }
    .central-decor--tablet-vertical {
        background: #e5e5e5;
        
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 230px;
    }
    .central-decor--tablet-vertical img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .main-tablet-vertical__right {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: #f7a8b8;
    }
    .about-tablet-vertical {
        color: #111;
        position: relative;
        height: 390px;
        overflow: hidden;
          
    }

    .about-tablet-vertical .about-tablet-vertical__primary {
        position: absolute;
        width: 100%;
        height: 390px;
        top: 0;
        transition: transform 0.5s ease;
        transform: translateX(0);
        z-index: 2;
    }
  
    .about-tablet-vertical .about-tablet-vertical__secondary {
        position: absolute;
        width: 100%;
        height: 390px;
        transform: translateX(100%);
        z-index: 1;
        transition: transform 0.5s ease;
    }

    .about-tablet-vertical.active .about-tablet-vertical__primary {
        transform: translateX(-100%);
    }

    .about-tablet-vertical.active .about-tablet-vertical__secondary {
        transform: translateX(0);
        padding: 1rem 2rem;
    }

    .about-tablet-vertical .about-tablet-vertical__primary h1 {
        font-size: 200px;
        line-height: 180px;
        font-family: FuturaNew;
        text-align: center;
        padding: 100px 0 0;
        font-style: italic;
        font-weight: 900;
    }
    .about-tablet-vertical .about-tablet-vertical__primary #arrow-tablet-vertical  {
        font-size: 100px;
        text-align: right;
        margin: 0;
        position: relative;
        line-height: 50px;
        cursor: pointer;
        color: #f72608;
        padding-right: 1.5rem;
        font-family: 'FuturaNew';
    }

    .about-tablet-vertical .about-tablet-vertical__primary #arrow-tablet-vertical img {
       height: 40px;
       margin-top:50px;
    }
   
    

    .about-tablet-vertical .about-tablet-vertical__secondary h2 {
        color: #111;
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 8px;
        font-family: 'FuturaNew';
        font-style: italic;
        line-height: 1.4rem;
        padding: 0 0 0 8px;
    }
    .about-tablet-vertical__secondary #hr-about-tablet-vertical {
        border: none;
        height: 2px;
        background: #f72608;
        color: #f72608;
        width: 20%;
        margin: 0 0 0 8px;
    }
    .about-tablet-vertical__secondary .about__text-tablet-vertical {
        color: #111;
        font-size: 1.1rem;
        margin-top: 8px;
        line-height: 1.15rem;
        padding: 0 0 0 8px;
    }
    .claim--tablet-vertical {
        background: #f72608;
        color: #fff;
        text-align: center;
        /* padding: 18px 0; */
        font-size: 2rem;
        font-weight: 900;
        font-family: 'FuturaNew';
        height: 160px;
        display: flex
;
        align-items: center;
    }
    .claim--tablet-vertical h2  {
        color: #fff;
        font-size: 35px;
        margin: 0;
        width: 70%;
        text-align: left;
        padding-left: 20px;
        font-style: oblique;
        line-height: 35px;
        font-weight: 900;
    }
    .footer--tablet-vertical .footer__top--grid {
        display: flex;
        flex-direction: row;
        height: 192px;
    }
    .footer--tablet-vertical .footer__top--grid > div {
        flex: 1 1 25%;
        display: flex;
        align-items: center; 
        justify-content: center; 
    }
    .footer--tablet-vertical .footer__top--grid > div > img {
        width: 100%;
        height: 101%;
        object-fit: cover;
    }
    #geometry-foofer-tablet-2 {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .footer--tablet-vertical .footer__decor, .footer--tablet-vertical .footer__icon {
        width: 100%;
        height: 100%;
    }
    .footer--tablet-vertical .footer__decor {
        background: #fff;
    }
    .footer--tablet-vertical .footer__icon {
        background: #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .footer--tablet-vertical .footer_mail {
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .footer--tablet-vertical .footer_mail .tablet_icon_mail {
        display: flex;
        flex: 1 1 50%;
        align-items: center;
        justify-content: center;
        background: #f72608;
        width: 100%;
    }
    .footer--tablet-vertical .footer_mail .tablet_docoration_mail {
        flex: 1 1 32%;
        background: url(elements/circles.svg) repeat;
        width: 100%;
        background-size: 200%;
    }

    #contact-link-tablet {
        padding-top: 6px;
    }

    #contact-link-tablet img {
        width : 80px
    }


    .footer--tablet-vertical .footer__bottom {
        text-align: center;
        letter-spacing: 0.2em;
        font-size: 1.1rem;
        padding: 18px 0 20px 0;
        color: #fff;
        background: #000;
    }
}

/* Tablet horizontal: 1024px - 1279px */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .layout-tablet-horizontal { display: block; }
    .layout-tablet-vertical, .layout-desktop, .layout-mobile { display: none !important; }

    .header__decor-mobile {
        height: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        background-color: #000;
    }

    .header__decor-mobile img {
        height:20px;
    }

    .project-title--tablet-horizontal {
        font-size: 1.5rem;
        padding: 0;
        background: #e5e5e5;
    }
    .project-title__text {
        padding: 5px 0 3px 0;
        font-size: 14px;
        text-align: center;
        letter-spacing: 10px;
        line-height: 14px;
    }
    .main-horizontal {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 275px;
        background: #fff;
    }
    .main-horizontal__left, .main-horizontal__center, .main-horizontal__right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main-horizontal__left {
        flex: 1 1 25%;
        background: #f72608;
        min-width: 220px;
        padding: 0;
        display: flex;
    }
    .claim--horizontal {
        background: #f72608;
        color: #fff;
        text-align: left;
        font-size: 2.1rem;
        font-weight: bold;
        /* margin: 32px 0 0 0; */
        /* padding: 0 0 24px 0; */
        width: 100%;
        max-width: 320px;
        flex: 1 1 50%;
        display: flex;
        justify-items: center;
        align-items: center;
    }
    .claim--horizontal h2  {
        font-size: 35px;
        line-height: 35px;
        width: 80%;
        margin: auto;
        font-style: italic;
        font-weight: 900;
    }
    .main-horizontal__decor-left {
        background: #d9d9d9;
        width: 100%;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 50%;
    }
    .main-horizontal__center {
        flex: 1 1 44%;
        
        
        
    }
    .main-horizontal__center .hero__image {
        width: 100%;
        position: relative;
     
        height: 100%;
    }

    .hero__image-mobile {
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hero__image-mobile img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .hero__play-mobile {
        position:absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

    .main-horizontal__right {
        flex: 1 1 25%;
        background: #fff;
        min-width: 180px;
        padding: 0;
    }

    .main-horizontal__right img{
        height: 101%;
        object-fit: cover;
    }
    
    .logo-bar--tablet-horizontal {
        /* width: 100%; */
        background: #f72608;
        /* color: #fff; */
        text-align: center;
        height: 80px;
        /* font-size: 2.2rem; */
        /* font-weight: bold; */
        /* letter-spacing: 0.1em; */
        /* padding: 18px 0 8px 0; */
        /* font-family: 'Arial Black', Arial, sans-serif; */
        /* border-bottom: 8px solid #fff; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    #logo-video-tablet-horizontal {
        height: 200px !important;
    }

    .central-horizontal {
        width: 100%;
        background: #fff;
    }
    .central-horizontal__top {
        width: 100%;
        background: #fff;
    }
    .central-horizontal__band {
        width: 100%;
        height: 40px;
        background: url('./elements/circles.svg') repeat center center;
    }
    .central-horizontal__bottom {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 220px;
        background: #fff;
    }
    .central-horizontal__left {
        flex: 1 1 25%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 220px;
        flex-direction: column;
    }

    .central-horizontal__decor_1 {
        width: 100%;
        background: url('./elements/circles.svg') repeat left top;
        height: 100px;
    }
    .central-horizontal__decor_2 {
        width: 100%;
        height: 230px;
        background: #d9d9d9;
    }
    .central-horizontal__decor_2 img{
        width: 100%;
        height: 100%;
        object-fit: contain;

    }
    .central-horizontal__right {
        flex: 1 1 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .central-horizontal__middle {
        flex: 1 1 44%;
        background-color: #f7a8b8;
    }
    .central-horizontal__contact {
        background-color: #f72608;
        height: 80px;
        
            display: flex       ;
            justify-content: center;
            align-items: center;
        
    }
    .central-horizontal__contact img {
        display: block;
        height: 60px;
    }
    .central-horizontal__decor_3 {
        background-color: #d9d9d9;
        height: 250px;
    }
    .central-horizontal__decor_3 img {
        width: 100%;
        height: 101%;
        object-fit: cover;
    }
    .about--tablet-horizontal {
        background: transparent;
        color: #111;
        padding: 0;
        font-size: 1.1rem;
    }
    .about--tablet-horizontal h2 {
        color: #f72608;
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    .about--tablet-horizontal .about__text {
        color: #111;
        font-size: 1rem;
        margin-top: 8px;
    }
    .footer--tablet-horizontal .footer-horizontal {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 120px;
    }
    .footer--tablet-horizontal .footer-horizontal__left {
        flex: 1 1 50%;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer--tablet-horizontal .footer-horizontal__right {
        flex: 1 1 50%;
        background: #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer--tablet-horizontal .footer__bottom {
        text-align: center;
        letter-spacing: 0.2em;
        font-size: 14px;
        padding: 6px 0 6px 0;
        color: #fff;
        background: #000;
    }

    .about-tablet-horizontal {
        color: #111;
        position: relative;
        height: 330px;
        overflow: hidden;
          
    }

    .about-tablet-horizontal .about-tablet-horizontal__primary {
        position: absolute;
        width: 100%;
        height: 330px;
        top: 0;
        transition: transform 0.5s ease;
        transform: translateX(0);
        z-index: 2;
    }
  
    .about-tablet-horizontal .about-tablet-horizontal__secondary {
        position: absolute;
        width: 100%;
        height: 330px;
        transform: translateX(100%);
        z-index: 1;
        transition: transform 0.5s ease;
    }

    .about-tablet-horizontal.active .about-tablet-horizontal__primary {
        transform: translateX(-100%);
    }

    .about-tablet-horizontal.active .about-tablet-horizontal__secondary {
        transform: translateX(0);
        padding: 2rem;
    }

    .about-tablet-horizontal .about-tablet-horizontal__primary h1 {
        font-size: 200px;
        line-height: 180px;
        font-family: FuturaNew;
        text-align: center;
        padding: 70px 0 0;
        font-style: italic;
        font-weight: 900;
    }
    .about-tablet-horizontal .about-tablet-horizontal__primary #arrow-tablet-horizontal  {
        font-size: 100px;
        text-align: right;
        margin: 0;
        position: relative;
        line-height: 48px;
        cursor: pointer;
        color: #f72608;
        padding-right: 30px;
        font-family: 'FuturaNew';
    }

    #arrow-tablet-horizontal img {
        width: 46px;
    }
   
    

    .about-tablet-horizontal .about-tablet-horizontal__secondary h2 {
        color: #111;
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 8px;
        font-family: 'FuturaNew';
        font-style: italic;
        line-height: 1.4rem;
        padding: 0 0 0 8px;
    }
    .about-tablet-horizontal__secondary #hr-about-tablet-horizontal {
        border: none;
        height: 2px;
        background: #f72608;
        color: #f72608;
        width: 20%;
        margin: 0 0 0 8px;
    }
    .about-tablet-horizontal__secondary .about__text-tablet-horizontal {
        color: #111;
        font-size: 1.1rem;
        margin-top: 8px;
        line-height: 1.15rem;
        padding: 0 0 0 8px;
    }
}

/* Escritorio: 1280px o más */
@media screen and (min-width: 1280px) {
    .layout-desktop { display: block; max-width: 1920px; margin: auto;}
    .layout-tablet-vertical, .layout-tablet-horizontal, .layout-mobile { display: none !important; }

    .header__decor-mobile {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        background: #000;
    }
    .header__decor-mobile img {
        height:25px;
    }

    .project-title--desktop {
        background: #e5e5e5;
        width: 100%;
        text-align: center;
        padding: 0;
        font-size: 1.6rem;
        letter-spacing: 0.5rem;
        text-transform: uppercase;
    }
    .project-title__text {
        padding: 0;
        /* font-size: 25px; */
        font-family: 'FuturaNew';
        background: #e5e5e5;
        margin-bottom: 0;
        font-size: 20px;
        font-weight: normal;
        padding: 9px 0;
        line-height: 30px;
    }
    .main-desktop {
        display: flex;
        flex-direction: row;
        width: 100%;
        
        min-height: 420px;
        background: #fff;
    }
    .main-desktop__left {
        flex: 1 1 33%;
        background: #f72608;
        min-width: 340px;
        height: 630px;
        display: flex
;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        
        overflow: hidden;
    }
    .main-desktop__left img {
        /* height: 590px; */
        width: 100%;
        position: absolute;
        bottom: 0;
        object-fit: contain;
        
    }
    .main-desktop__center {
        flex: 1 1 34%;
        background: #fff;
        min-width: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .main-desktop__center .hero__image {
        width: 100%;
        height: 432px;
        background: #d9d9d9;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 0;
    }
    .logo-bar--desktop {
        width: 100%;
        background: #f72608;
        color: #fff;
        text-align: center;
        font-size: 2.3rem;
        font-weight: bold;
        letter-spacing: 0.1em;
        font-family: 'Arial Black', Arial, sans-serif;
        min-height: 150px;
        height: 150px;
        overflow: hidden;
        display: flex
;
        justify-content: center;
        align-items: center;
    }
    .logo-bar--desktop video{
        height: 300px;
        object-fit: cover;
    }
    .main-desktop__right {
        flex: 1 1 33%;
        background: #f7a8b8;
        min-width: 340px;
        padding: 1% 1% 0 1%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero__image {
        position: relative;
    }
    .hero__image-desktop {
        position:absolute;
        top: 0;
        height: 100%;
    }
    .hero__play-desktop {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .hero__image-desktop img{
        width: 100%;
        object-fit: cover;
        height: 100%;
        
    }
    .about-desktop {
        color: #111;
        position: relative;
        overflow: hidden;
        min-height: 600px;
    }

    .about-desktop .about-desktop__primary {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: inherit;
        justify-content: center;
        transition: transform 0.5s ease;
        transform: translateX(0);
        z-index: 2;
    }
  
    .about-desktop .about-desktop__secondary {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-right: 1%;
        transform: translateX(100%);
        z-index: 1;
        transition: transform 0.5s ease;
        justify-content: center;
    }

    .about-desktop.active .about-desktop__primary {
        transform: translateX(-100%);
    }

    .about-desktop.active .about-desktop__secondary {
        transform: translateX(0);
        z-index: 2;
        background: #f7a8b8;
        min-height: 600px;
        overflow: hidden;
    }

    .about-desktop .about-desktop__primary h1  {
        font-size: 250px;
        line-height: 350px;
        font-family: FuturaNew;
        text-align: center;
        font-style: italic;
        font-weight: 900;
    }

    .about-desktop .about-desktop__primary #arrow-desktop {
        font-size: 6rem;
        text-align: right;
        margin: 0;
        position: relative;
        cursor: pointer;
        line-height: 1rem;
    }

    .about-desktop .about-desktop__primary #arrow-desktop img {
        padding-right: 20px;
        padding-top: 90px;
    }

    .about-desktop .about-desktop__secondary h2 {
        color: #111;
        font-size: 35px;
        font-weight: bold;
        margin-bottom: 18px;
        font-family: 'FuturaNew';
        font-style: italic;
        line-height: 35px;
        font-weight: 900;
    }

    .about-desktop__secondary #hr-about-desktop {
        border: 2px solid #f72608;
        height: 2px;
        background: #f72608;
        color: #f72608;
        width: 20%;
        
    }

    .about-desktop__secondary .about__text-desktop {
        color: #111;
        font-size: 24px;
        margin-top: 18px;
        line-height: 26px;
     
    }
    .band-desktop {
        width: 100%;
        height: 36px;
        background: repeating-linear-gradient(90deg, #fff 0 24px, #111 24px 48px);
    }
    .bottom-desktop {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 220px;
        background: #fff;
    }
    .bottom-desktop__left {
        flex: 1 1 33%;
        
        display: flex;
        align-items: center;
        justify-content: left;
        min-width: 340px;
        font-size: 70px;
        line-height: 50px;
        font-style: oblique;
        flex-direction: column;
    }
    .claim--desktop {
        background: #f7a8b8;
        margin: 0 0 0 0;
        padding: 0 0 0 1%;
        width: 100%;
        height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 60px;
    }
    .claim--desktop h2{
        color: #111;
        text-align: left;
        font-size: 70px;
        font-weight: 900;
    }
    .claim-decor--desktop {
        /* background-attachment: fixed; */
        background-image: url(elements/circles.svg);
        background-position: top;
        background-repeat: repeat;
        background-size: contain;
        min-height: 130px;
        width: 100%;
        z-index: 2;
    }
    .bottom-desktop__center {
        flex: 1 1 34%;
        background: #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 400px;
    }
    .bottom-desktop__center img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .bottom-desktop__right {
        flex: 1 1 33%;
        background: #fff;
        min-width: 340px;
        display: flex;
        
    }
    .bottom-desktop__decor1 {
        flex: 1 1 60%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        
    }
    .bottom-desktop__decor1 img{
        width: 100%;
        height: 101%;
        object-fit: cover;   
        object-position: center;
    }
    .bottom-desktop__decor2 {
        flex: 1 1 40%;
        background: #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        flex-direction: column;
    }
    .bottom-desktop__decor2_circle {
       width: 100%; 
       height: 230px;
       display: flex;
       align-items: center;
       justify-content: center
    }
    .bottom-desktop__decor2_circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .bottom-desktop__decor2_mail {
        width: 100%; 
        min-height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f72608;
    }
    .footer--desktop {
        width: 100%;
        background: #000;
        color: #fff;
        margin: 0;
        padding: 0;
    }
    .footer__bottom--desktop {
        text-align: center;
        letter-spacing: 0.2em;
        font-size: 25px;
        padding: 5px 0;
        color: #fff;
        background: #000;
        width: 100%;
    }
}

/* Layout móvil: menos de 768px */
@media screen and (max-width: 767px) {
    .layout-mobile { display: block; }
    .layout-tablet-vertical, .layout-tablet-horizontal, .layout-desktop { display: none !important; }

    .header-mobile {
        background: #000;
        padding: 0;
    }
    .header__decor-mobile {
        height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
    }
    .header__decor-mobile img {
        height:20px;
    }
    .header__logo-mobile {
        background: #f72608;
        padding:  0;
        height: 90px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .header__logo-mobile video {
        display: block;
        width: 100%;
    }
    .hero-mobile {
        position: relative;
    }
    .hero__play-mobile {
        position: absolute;
        top: 50%;
        color: #fff;
        left: 50%;
        font-size: 50px;
        transform: translate(-50%, -50%);
    }
    .hero__play-mobile a, .hero__play-mobile a:visited {
        color: #fff;
        text-decoration: none;
    }
    .hero__image-mobile {
        width: 100%;
        background: #d9d9d9;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 400px;
    }
    .hero__image-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .project-title-mobile {
        background: #fff;
        text-align: center;
        padding: 0;
    }
    .project-title__text-mobile {
        font-size: 1.2rem;
        padding: 8px 0 8px 8px;
        background: #d9d9d9;
        letter-spacing: 0.7rem;
        text-align: center;
    }
    .project-title__text-mobile a, .project-title__text-mobile a:visited {
        color:#000;
        text-decoration: none;
    }
    .project-title__decor-mobile {
        height: 50px;
        background-color: #fff;
        overflow: hidden;
    }

    .project-title__decor-mobile img  {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .claim-mobile {
        background: #f7a8b8;
        text-align: center;
        padding: 0;
        height: 160px;
        display: flex
;
        align-items: center;
    }

    .claim-mobile h2   {
        font-size: 2.2rem;
        font-weight: 900;
        color: #111;
        font-style: oblique;
        width: 60%;
        text-align: left;
        padding: 1.5rem;
        line-height: 2.2rem;
    }
    .central-decor-mobile {
        background: #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .central-decor-mobile img{
        width: 100%;
    }

    .about-mobile {
        background: #f72608;
        color: #111;
        position: relative;
        overflow: hidden;
        min-height: 470px;
    }

    .about-mobile .about-mobile__primary {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: inherit;
        justify-content: center;
        transition: transform 0.5s ease;
        transform: translateX(0);
        z-index: 2;
        background: #f72608;
    }
  
    .about-mobile .about-mobile__secondary {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        transform: translateX(100%);
        z-index: 1;
        transition: transform 0.5s ease;
        background: #f72608;
        justify-content: center;
    }

    .about-mobile.active .about-mobile__primary {
        transform: translateX(-100%);
    }

    .about-mobile.active .about-mobile__secondary {
        transform: translateX(0);
    }

    .about-mobile .about-mobile__primary h1  {
        font-size: 240px;
        line-height: 1;
        font-family: FuturaNew;
        text-align: center;
        font-style: italic;
        font-weight: 900;
    }

    .about-mobile .about-mobile__primary #arrow-mobile {
        font-size: 6rem;
        text-align: right;
        margin: 0;
        position: relative;
        cursor: pointer;
        line-height: 1rem;
    }

    .about-mobile .about-mobile__primary #arrow-mobile img {
        padding-right:50px;
    }

    .about-mobile .about-mobile__secondary h2 {
        color: #111;
        font-size: 35px;
        font-weight: 900;
        margin-bottom: 8px;
        font-family: 'FuturaNew';
        font-style: italic;
        line-height: 35px;
     
    }

    .about-mobile__secondary #hr-about-mobile {
        border: 2px;
        height: 2px;
        background: #fff;
        color: #fff;
        width: 15%;
        margin: 8px 0 8px 0;
    }

    .about-mobile__secondary .about__text-mobile {
        color: #111;
        font-size: 18px;
        margin-top: 8px;
        line-height: 20px;
        padding: 0 20px 0 0;
    }

    .footer-mobile {
        background: #fff;
        color: #111;
        font-size: 1rem;
    }
    .footer__top-mobile {
        display: flex;
    }
    .footer__decor-mobile {
        background: #fff;
        width: 50%;
        height: 190px;
    }
    .footer__decor-mobile  img{
        width: 100%;
        height: 101%;
        object-fit: cover;
        
    }
    .footer__icon-mobile {
        background: #f7a8b8;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer__bottom-mobile {
        text-align: center;
        letter-spacing: 0.2em;
        font-size: 1rem;
        padding: 12px 0 16px 0;
        color: #fff;
        background: #000;
    }
}


/* gran escritorio: 1800px o más */
@media screen and (min-width: 1800px) {
    .about-desktop .about-desktop__primary h1 {
        font-size: 350px;
        line-height: 350px;
        font-family: FuturaNew;
        text-align: center;
        font-style: italic;
        font-weight: 900;
    }

    .claim--desktop h2 {
        color: #111;
        text-align: left;
        font-size: 70px;
        font-weight: 900;
        padding-left:30px;
    }

    .main-desktop__right {
        flex: 1 1 33%;
        background: #f7a8b8;
        min-width: 340px;
        padding: 1% 1% 0 1%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0px 30px 0 30px;
    }

    .main-desktop__left img {
        /* height: 590px; */
        width: 100%;
        position: absolute;
        bottom: 0;
        object-fit: contain;
        max-height: 600px;
    }
}

/* Estilos del formulario de contacto */
.contact-form-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: right 0.3s ease-in-out;
}

.contact-form-overlay.active {
    right: 0;
}

.contact-form-container {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #fff;
    padding: 2rem;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

/* Móvil y tablet vertical */
@media screen and (max-width: 1023px) {
    .contact-form-container {
        width: 100%;
    }
}

/* Tablet horizontal */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .contact-form-container {
        width: 70%;
    }
}

/* Escritorio */
@media screen and (min-width: 1280px) {
    .contact-form-container {
        width: 50%;
    }
}

.close-contact-form {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #111;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 1rem;
    color: #111;
}

.form-group input,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-button {
    background: #f72608;
    color: #fff;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.submit-button:hover {
    background: #d91e06;
}

#contact-form h2 a {
    color:#000;
    font-weight: 700;
}