/* *****************FONT******************* */
@font-face {
    font-family: 'AtypDisplay Bold';
    src: url('/fonts/AtypDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AtypDisplay Bold Italic';
    src: url('/fonts/AtypDisplay-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'AtypDisplay Light';
    src: url('/fonts/AtypDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'AtypDisplay Light Italic';
    src: url('/fonts/AtypDisplay-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'AtypDisplay Medium';
    src: url('/fonts/AtypDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'AtypDisplay SemiBold Italic';
    src: url('/fonts/AtypDisplay-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}


@font-face {
    font-family: 'BRSonoma Bold';
    src: url('/fonts/BRSonoma-Bold-BF654c4526823f5.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gentleman Light';
    src: url('/fonts/Gentleman 400 Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* ++++++++ */
.atypBold {
    font-family: 'AtypDisplay Bold';
}

.atypBoldItalic {
    font-family: 'AtypDisplay Bold Italic';
}

.atypLight {
    font-family: 'AtypDisplay Light';
}

.atypRegular {
    font-family: 'AtypDisplay Medium';
}

.atypLightItalic {
    font-family: 'AtypDisplay Light Italic';
}

.atypMedium {
    font-family: 'AtypDisplay Medium';
}

.atypSemiBold {
    font-family: 'AtypDisplay SemiBold', 'AtypDisplay Medium';
}

.atypSemiBoldItalic {
    font-family: 'AtypDisplay SemiBold Italic';
}

.brSonoma {
    font-family: 'BRSonoma Bold';
}

.gentleman {
    font-family: 'Gentleman Light';
}

/* *****************FONT******************* */
.orangeBg{
    background-color: #f24405;
}

.orangeBg2 {
    background-color: #f75708;
}

.deepBlueItemsBg{
    background-color: #34495E;
}

.BGdark{
    background-color: #1d1d1b;
}
.textOrange{
    color: #ff6e34;
    
}
.textOrange2{
    color: #ff8b34;
    
}
.textGray{
    color: #333;
}
.textGray2{
    color: #8b8b8b;
}
.textGray3{
    color: #1d1d1b;
}
.textDarkGray{
    color: #444540;
}

.deepBlueTxt{
    color: #0A507C;
}

.servicesTitle{
    color: #446CB3;
}

.servicesText{
    color: #34495E;
}

.servicesOrangeTitle{
    color: #FF8B38;
}

.servicesBlueTitle{
    color: #4374BF;
}

.auTitle{
    color: #F75708;
}

/* Almacenamiento — ¿Qué incluye? (cards y texto) */
.almQueIncluyeCardBg {
    background-color: #F4F4F4;
}

.almCardText {
    color: #1C1C1C;
}

.auSubtitle,
.auSubTitle{
    color: #CE4502;
}

.auText{
    color: #2A333B;
}

.grayText{
    color: #535353;
}

.graytext2{
    color: #34495E;
}

.blueTitle{
    color: #4374BF;
}

.graySubtitle{
    color: #B3B3B3;
}

.orangeBg{
    background-color: #F75708;
}

.blackTxt{
    color: #282828;
}

.blackTxt2{
    color: #202020;
}

.navyTxt{
    color: #002F65;
}

.beigeBg{
    background-color: #D9D9D9;
}

.formBg{
    background-color: #4374BF;
}

/* Contact form: ref. gráfico continuo, misma columna derecha; hueco fino entre tapa y cuerpo */
.contact-form-assembly {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    --contact-deco-w: 9rem;
    /* Mismo ancho para alinear; ajuste fino con los inset */
    --contact-deco-w-lid: var(--contact-deco-w);
    /* Inset independiente para cada bloque: tapa vs cuerpo */
    --contact-deco-inset: 0.5rem;
    --contact-deco-inset-body: 0.5rem;
}

@media (min-width: 768px) {
    .contact-form-assembly {
        --contact-deco-w: 10.75rem;
        --contact-deco-w-lid: var(--contact-deco-w);
        --contact-deco-inset: 0.625rem;
        --contact-deco-inset-body: 0.625rem;
    }
}

.contact-form-lid {
    min-height: 5.25rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.1);
    background-color: #3f6eb5;
    background-image: url("/images/box-clocking.webp");
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    /* bottom 0: el PNG toca el borde inferior azul de la tapa */
    background-position: right var(--contact-deco-inset) bottom 0;
    background-size: var(--contact-deco-w-lid) auto;
}

@media (min-width: 768px) {
    .contact-form-lid {
        min-height: 6rem;
        border-radius: 1.5rem;
    }
}

.contact-form-body {
    position: relative;
    border-radius: 1.25rem;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.1);
    background-color: #4a7bc0;
    background-image: url("/images/box-clocking2.webp");
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    /* Misma X que la tapa; top 0 para columna continua como la referencia */
    background-position: right var(--contact-deco-inset-body) top 0;
    background-size: var(--contact-deco-w) auto;
}

@media (min-width: 768px) {
    .contact-form-body {
        border-radius: 1.5rem;
    }
}

.contact-form-body-accent {
    position: absolute;
    right: 0.35rem;
    top: 32%;
    bottom: 12%;
    width: 0.45rem;
    border-radius: 9999px;
    background-color: #1e3a5c;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .contact-form-body-accent {
        right: 0.45rem;
        width: 0.5rem;
    }
}
.bg1{
    background-image: url("/images/bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.bg2{
    background-image: url("/images/bg2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
.darkBg{
    background-image: url("/images/darkBG.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.deepBlueBg{
    background-color: #2F4F80;
}

.grayBg{
    background-color: #f7f6fb;
}

/* Tarjetas (ej. ¿Qué incluye? — almacenamiento) */
.bgCardGray {
    background-color: #F4F4F4;
}

.textInk {
    color: #1C1C1C;
}

/* .homeRadius{
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;


} */