/* Responsive YouTube video for smart-home */

.smart-home__video {

    width: 100%;

    max-width: 1200px;

    margin: auto;

}

.smart-home__video-embed {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

}

.smart-home__video-embed iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

html {

    scroll-behavior: smooth;

}

.primary-nav-mobile .btn.btn--primary {

    display: none;

}

/* ======= MOBILE & TABLET MENU ======= */

.mobile-nav-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    margin-left: 16px;

    z-index: 1002;

}

.mobile-nav-toggle .bar {

    display: block;

    width: 28px;

    height: 3px;

    margin: 5px 0;

    background: var(--color-primary-dark, #003956);

    border-radius: 2px;

    transition: all 0.3s cubic-bezier(.4,0,.2,1);

}



.mobile-nav-overlay {

    display: none;

    position: fixed;

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

    background: rgba(0,0,0,0.32);

    z-index: 1000;

}



.primary-nav-mobile {

    display: none;

    position: fixed;

    top: 0;

    right: 0;

    width: 80vw;

    max-width: 340px;

    height: 100vh;

    background: #fff;

    box-shadow: -2px 0 16px 0 rgba(0,0,0,0.08);

    z-index: 1001;

    flex-direction: column;

    padding: 48px 32px 32px 32px;

    gap: 32px;

    transform: translateX(100%);

    transition: transform 0.3s cubic-bezier(.4,0,.2,1);

}

.primary-nav-mobile.open {

    display: flex;

    transform: translateX(0);

}

.mobile-nav-overlay.open {

    display: block;

}



.primary-nav-mobile a {

    font-size: 1.25rem;

    color: var(--color-primary-dark, #003956);

    font-weight: 600;

    padding: 12px 0;

    border-bottom: 1px solid #f0f0f0;

    text-decoration: none;

    transition: color 0.2s;

}

.primary-nav-mobile a:last-child {

    border-bottom: none;

}

.primary-nav-mobile a:hover {

    color: var(--color-primary, #0091DA);

}



@media (max-width: 991.98px) {

    .primary-nav {

        display: none !important;

    }

    .mobile-nav-toggle {

        display: block;

    }

    .primary-nav-mobile {

        /* display: flex;  Only when open */

    }

}

@import url('../assets/fonts/inter.css');



:root {

    --color-white: #ffffff;

    --color-primary: #0091DA;

    --color-primary-dark: #003956;

    --color-accent: #0091DA;

    --color-text-dark: #191A1A;

    --color-text-dark-semi: #4B6673;

    --color-neutral-900: #1b1b1f;

    --color-neutral-700: #4A4D4F;

    --color-neutral-600: #4a4a55;

    --color-neutral-500:  #F2F2F2;

    --color-neutral-300:  #B1B3B4;

    --color-neutral-200: #e8edf2;

    --color-neutral-100: #f5f7fa;

    --color-hero-highlight: #e8f7ff;

    --font-base: 'Inter', 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --font-inter: 'Inter', 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --container-width: min(1200px, 92vw);

    --space-xxs: 0.5rem;

    --space-xs: 0.75rem;

    --space-sm: 1rem;

    --space-md: 1.5rem;

    --space-lg: 2rem;

    --space-xl: 3rem;

    --space-xxl: 4rem;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    color: var(--color-neutral-900);

    background-color: var(--color-white);

    line-height: 1.6;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.img-fluid{

    max-width: none;

    height: auto;

}



a, button {

    color: inherit;

    text-decoration: none;

    border: none;

}



/* Helpers */

.horizontal { display: flex; gap: 20px; }

.vertical { display: flex; flex-direction: column; gap: 20px; padding: 62px 330px; }

.space-between { justify-content: space-between; }

.gap-12 { gap: 12px; }

.contents { display: contents; }

.icon-full { width: 100%; height: 100%; }

.w-520 { width: 520px; }

.sr-only {

    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;

}



/* ---------------------------------------------------------------------------

  Typography

-----------------------------------------------------------------------------*/

/**

 * Estilos para títulos, párrafos y clases de texto.

 */

h1, h2, h3, h4 {

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

    font-weight: 600;

}

p {

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

    font-weight: 400;

}

.h1 { font-size: 56px; line-height: 100%; }

.h2 { font-size: 44px; line-height: 110%; }

.h3 { font-size: 36px; line-height: 110%; }

.text-dark { color: var(--color-neutral-900); }

.text-dark-semi { color: var(--color-text-dark-semi); }

.text-white { color: var(--color-white); }

.text-gray { color: var(--color-neutral-700); }

.text-accent { color: var(--color-accent); }

.text-lg { font-size: 18px; line-height: 140%; font-weight: 400; }

.text-md { font-size: 16px; line-height: 140%; font-weight: 400; }

.text-sm { font-size: 14px; line-height: 130%; font-weight: 400; }

.eyebrow {

    text-transform: uppercase;

    font-weight: 400;

    letter-spacing: 0%;

    line-height: 140%;

    font-size: 18px;

    color: var(--color-primary);

}



/* ---------------------------------------------------------------------------

  Layout Containers & Sections

-----------------------------------------------------------------------------*/

/**

 * Contenedores principales y secciones.

 */

.container {

    width: var(--container-width);

    margin: 0 auto;

    gap: 60px;

}

.section { padding: 70px 0; }

.section__header {

    text-align: center;

    max-width: 640px;

    margin: 0 auto var(--space-xl);

}



/* ---------------------------------------------------------------------------

  Header & Navigation

-----------------------------------------------------------------------------*/

/**

 * Encabezado del sitio y navegación principal.

 */

.site-header {

    position: sticky;

    top: 0;

    background-color: white;

    backdrop-filter: blur(10px);

    z-index: 10;

}

.header__content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    /* padding: 0 120px; */

    height: 80px;

    max-width: 1920px;

}

.primary-nav {

    display: flex;

    gap: var(--space-sm);

    align-items: center;

    flex-wrap: wrap;

    font-weight: 500;

}

.brand__logo { height: 80px; }



/* ---------------------------------------------------------------------------

  Hero Section

-----------------------------------------------------------------------------*/

/**

 * Sección principal (hero) con fondo y gradientes.

 */

.hero {

    position: relative;

    overflow: hidden;

    background-image: url('/assets/hero-main.png');

    background-size: cover;

    background-position: center;

    color: var(--color-white);

}

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: var(--hero-photo);

    background-size: cover;

    background-position: center right;

    opacity: 0.8;

    mix-blend-mode: multiply;

}

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(0, 57, 86, 0.95) 0%, rgba(0, 102, 161, 0.4) 60%, rgba(255, 255, 255, 0) 100%);

}

.hero .container { position: relative; z-index: 1; }

.hero__content {

    display: flex;

    min-height: 520px;

    align-items: center;

}

.hero__copy { max-width: 540px; color: var(--color-white); }

.hero__title { font-size: clamp(2.75rem, vw, 56px); margin-bottom: var(--space-sm); }

.hero__highlight { color: var(--color-hero-highlight); }

.hero__description { font-size: 1rem; color: rgba(255, 255, 255, 0.85); }

.hero__actions {

    display: flex;

    gap: var(--space-sm);

    margin-top: var(--space-lg);

    flex-wrap: wrap;

}



/* ---------------------------------------------------------------------------

  Botones

-----------------------------------------------------------------------------*/

/**

 * Estilos para botones principales y variantes.

 */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    border-radius: 24px;

    font-weight: 600;

    height: 45px;

    width: fit-content;

    gap: 12px;

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.btn--primary {

    background: var(--color-primary);

    color: var(--color-white);

}

.btn--primary:hover {

    background: var(--color-primary-dark);

    box-shadow: 0 4px 12px rgba(0, 103, 179, 0.3);

}

.btn--outline {

    background: transparent;

    border: var(--color-white) solid 1px;

}

.btn--ghost {

    border-color: var(--color-primary);

    color: var(--color-primary);

}

.btn:hover { transform: translateY(-2px); }

.btn--outline-light {

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

    color: var(--color-white);

    background: transparent;

    gap: var(--space-xs);

}

.btn--outline-light:hover {

    border-color: var(--color-white);

    background: rgba(255, 255, 255, 0.08);

}

.btn__arrow {

    display: inline-flex;

    width: 1.5rem;

    height: 1.5rem;

    border-radius: 999px;

    border: 1px solid currentColor;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}



/* ---------------------------------------------------------------------------

  Productos

-----------------------------------------------------------------------------*/

/**

 * Listado y tarjetas de productos.

 */

.products { background: var(--color-white); }

.product-list {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}

.product-card {

    display: flex;

    flex-direction: column;

    width: 285px;

    border: 1px solid var(--color-neutral-300);

    border-radius: 32px;

    padding: 32px 24px 32px 24px;

    gap: 32px;

    text-align: center;

    transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1);

}

.product-card__image-container {

    display: grid;

    place-items: center;

    width: 100%;

    height: 260px;

}

.product-card img {

    grid-area: 1 / 1;

    height: 240px;

    width: auto;

    object-fit: contain;

    transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.3s ease-in-out;

}

.product-img-hover {

    opacity: 0;

}

.product-card:hover {

    box-shadow: 0 8px 32px 0 rgba(0, 57, 86, 0.13), 0 1.5px 6px 0 rgba(0,0,0,0.04);

    z-index: 2;

}

.product-card:hover .product-img-default {

    opacity: 0;

    transform: scale(1.04);

}

.product-card:hover .product-img-hover {

    opacity: 1;

    transform: scale(1.04);

}

.product-card h3 {

    margin-top: var(--space-sm);

    margin-bottom: var(--space-xs);

}



/* ---------------------------------------------------------------------------

  SAT (Servicio de Asistencia Técnica)

-----------------------------------------------------------------------------*/

.sat {

    background: white;

    color: var(--color-text-dark);

}

.sat__content {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-lg);

}

.note {

    font-size: 0.9rem;

    opacity: 0.85;

    margin-top: var(--space-xs);

}



/* ---------------------------------------------------------------------------

  Garantía

-----------------------------------------------------------------------------*/

.guarantee.py-100{  padding: 100px 0;  }

.guarantee.section { padding: 0 0; }

.guarantee__content {

    display: grid;

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

    gap: 48px;

    align-items: start;

}

.section.guarantee { background: var(--color-neutral-500);  margin-top: 0;;}

.text__garantee-cta { max-width: 360px; }

.header__garantee {

    display: flex;

    flex-direction: column;

    gap: 24px;

    padding: 148px 0 0 0;

}

.header__btn-contacto{

    display: block;

}

.guarantee__form-wrapper { display: flex; justify-content: center; }

.guarantee-form {

    background: var(--color-white);

    border: 2px solid #f7f7f7;

    border-radius: 40px;

    box-shadow: 0 20px 45px rgba(8, 38, 53, 0.08);

    padding: 60px 40px;

    width: min(640px, 100%);

    margin: -44px;

}

.guarantee-form__title {

    font-size: 36px;

    line-height: 1.2;

    color: #082635;

    margin-bottom: 36px;

    font-weight: 600;

}

.guarantee-form__grid { display: grid; gap: 16px; }

.guarantee-form__row { display: grid; gap: 16px; }

.guarantee-form__row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.guarantee-form__field { display: flex; }

.guarantee-form__input {

    width: 100%;

    background: #f7f7f7;

    border: 1px solid #cdcdcb;

    border-radius: 8px;

    padding: 16px 24px;

    font-size: 16px;

    line-height: 1.4;

    color: #082635;

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

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.guarantee-form__input::placeholder { color: #082635; opacity: 0.75; }

.guarantee-form__input:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(0, 145, 218, 0.2);

}

.guarantee-form__legal {

    display: grid;

    gap: 12px;

    margin-top: 12px;

    color: #4b6673;

    font-size: 12px;

    line-height: 1.4;

}

.guarantee-form__checkbox {

    display: flex;

    gap: 12px;

    align-items: flex-start;

}

.guarantee-form__checkbox input[type="checkbox"] {

    margin-top: 2px;

    /* width: 16px; */

    height: 16px;

    border-radius: 4px;

    border: 1px solid #e0e5e7;

    accent-color: var(--color-primary);

}

.guarantee-form__legal a {

    color: var(--color-primary-dark);

    text-decoration: underline;

    text-underline-offset: 2px;

}

.guarantee-form__actions {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 24px;

}

.btn.btn--secondary {

    background: var(--color-primary-dark);

    color: var(--color-white);

    transition: background .2s ease, box-shadow .2s ease;

}

.btn.btn--secondary:hover { background: #005a97; box-shadow: 0 4px 12px rgba(0,57,86,0.3); }

.guarantee-form__submit {

    margin-top: 24px;

    width: 100%;

    background: linear-gradient(135deg, #0091da 0%, #005a97 100%);

    color: var(--color-white);

    border: none;

    border-radius: 24px;

    padding: 12px 24px;

    font-size: 18px;

    font-weight: 600;

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

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.2);

}

.guarantee-form__submit:hover {

    transform: translateY(-2px);

    box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.3), 0 10px 20px rgba(0, 90, 151, 0.25);

}

.guarantee__list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: var(--space-md);

    list-style: none;

}

/* ---------------------------------------------------------------------------

    Modal Garantía

-----------------------------------------------------------------------------*/

.modal { position: fixed; inset: 0; display: none; z-index: 2000; }

.modal--open { display: block; }

.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }

.modal__dialog { position: relative; width: min(860px, 90vw); max-height: 80vh; overflow-y: auto; background: #ffffff; border-radius: 8px; margin: 6vh auto; padding: 48px 40px 40px; box-shadow: 0 28px 60px -8px rgba(0,57,86,0.35), 0 4px 14px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 24px; }

.modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }

.modal__content p { margin-bottom: 16px; font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); }

.modal__footer { display: flex; justify-content: flex-end; margin-top: 8px; }

.modal__close { background: transparent; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--color-primary-dark); padding: 4px 12px; }

.modal__close:hover { color: var(--color-primary); }

.modal--opening .modal__dialog { animation: modalFadeIn .25s cubic-bezier(.4,0,.2,1); }

.modal--closing .modal__dialog { animation: modalFadeOut .2s cubic-bezier(.4,0,.2,1); }

@keyframes modalFadeIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }

@keyframes modalFadeOut { from { opacity:1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(.96); } }



/* ---------------------------------------------------------------------------

  Smart Home

-----------------------------------------------------------------------------*/

.smart-home__content {

    display: flex;

    flex-direction: column;

    text-align: center;

    align-items: center;

}

.smart-home__cta {

    display: flex;

    flex-direction: row;

    border-radius: 32px;

    border: 1px solid var(--color-neutral-300);

    overflow: hidden;

    width: 100%;

}

.smart-home__cta-content {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 0 80px;

    flex-shrink: 1;

    text-align: left;

    align-self: center;

}

.smart-home__media { width: 535px; height: 448px; margin: 0 auto; }

.smart-home__copy ul {

    list-style: disc inside;

    margin: var(--space-md) 0;

    color: var(--color-neutral-600);

}

.smart-home__app-buttons {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 12px;

}

.smart-home__app-buttons .btn {

    min-width: 250px;

}

.smart-home__video {

    border-radius: 32px;

    width: 100%;

    height: auto;

    overflow: hidden;

}



.text-left{

    text-align: left;

}



.align-items-center{

    align-items: center;

}



/* ---------------------------------------------------------------------------

  Contacto

-----------------------------------------------------------------------------*/

.contact { background: var(--color-neutral-100); }

.section.contact { background-color: var(--color-primary-dark); }

.contact_list {

    display: flex;

    flex-direction: column;

    gap: var(--space-xl);

    align-items: center;

}

.contact__cards {

    display: flex;

    gap: 1rem;

}

.contact__cards article {

    background: var(--color-white);

    border-radius: 1rem;

    padding:  12px 20px;

    text-align: center;

    border: 1px solid var(--color-neutral-200);

    height: fit-content;

}

.contact__cards h3 {

    margin: var(--space-sm) 0 var(--space-xs);

}



/* ---------------------------------------------------------------------------

  Footer (Pie de página)

-----------------------------------------------------------------------------*/

/**

 * Estilos para el footer principal y variante Figma.

 */

.site-footer {

    background: var(--color-neutral-500);

    color: var(--color-text-dark);

    padding: 50px 120px;

}

.footer__content {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: var(--space-lg);

    align-items: start;

}

.footer__social {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.footer__social-list { display: flex; gap: 16px; }

.footer__legal {

    text-align: left;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.fotter__legal-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    gap: 8px;

    flex-direction: column;

}



/* Footer Figma style */

.footer--figma {

    background: #f5f5f5;

    color: #222;

    padding: 0;

    border: none;

}

.footer-figma__container {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0;

    max-width: 100vw;

    width: 100%;

    padding: 48px 0 32px 0;

    background: #f5f5f5;

}

.footer-figma__logo {

    flex: 1 1 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    min-width: 320px;

    padding-left: 4vw;

}

.footer__logo { max-width: 220px; height: auto; }

.footer-figma__legal {

    flex: 1 1 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    min-width: 320px;

    padding-left: 2vw;

    padding-right: 2vw;

}

.footer-figma__legal-title {

    font-size: 1.5rem;

    font-weight: 500;

    margin-bottom: 12px;

    color: #222;

}

.footer-figma__legal ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-figma__legal li {

    margin-bottom: 8px;

    font-size: 1.15rem;

    color: #555;

}

.footer-figma__legal a {

    color: #555;

    text-decoration: none;

    transition: color 0.2s;

}

.footer-figma__legal a:hover {

    color: #0091da;

    text-decoration: underline;

}

.footer-figma__social {

    flex: 1 1 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-start;

    min-width: 320px;

    padding-right: 4vw;

}

.footer-figma__social-title {

    font-size: 1.3rem;

    font-weight: 500;

    margin-bottom: 12px;

    color: #222;

}

.footer-figma__icons {

    display: flex;

    gap: 24px;

    margin-top: 8px;

}

.footer-figma__icons a img {

    width: 36px;

    height: 36px;

    object-fit: contain;

    filter: grayscale(100%) brightness(0.2) invert(0.2);

    transition: filter 0.2s;

}

.footer-figma__icons a:hover img { filter: none; }



/* ---------------------------------------------------------------------------

  Media Queries (Responsive)

-----------------------------------------------------------------------------*/

/**

 * Adaptaciones responsivas para tablets y móviles.

 */

@media (max-width: 992px) {

    .header__btn-contacto{

       display: none;

    }

    .header__content{

        display: flex;

        padding: 0 24px;

    }

    .guarantee__content {

        display: flex;

        gap: 48px;

        align-items: start;

        flex-direction: column;

    }

    .header__garantee {

        align-items: center;

        text-align: center;

        padding: 3rem 0;

    }

    .smart-home__cta{

        flex-direction: column;

    }

    .smart-home__cta-content {

        padding: 3rem 2rem;

        text-align: center;

        align-items: center;

    }

    .smart-home__media{

        width: 100%;

        height: auto;

    }

    .img-fluid{

        width: 100%;

        height: auto;

    }



    .site-footer {

        padding: 40px 72px;

    }



    .footer-figma__container {

        flex-direction: column;

        align-items: center;

        gap: 32px;

        padding: 32px 0 24px 0;

    }

    .footer-figma__logo,

    .footer-figma__legal,

    .footer-figma__social {

        align-items: center !important;

        justify-content: center !important;

        min-width: unset;

        padding: 0;

    }

    .footer-figma__legal { align-items: center; text-align: center; }

    .footer-figma__social { align-items: center; }



    .contact__cards {

        flex-direction: column;

        gap: 1rem;

    }



    .footer__content{

        flex-direction: row;

        justify-content: center;

        align-items: start;

        flex-wrap: nowrap;

    }



    .footer__content > .horizontal {

        flex-direction: column;

        align-items: center;

        gap: 2rem;

    }



    .w-520 { width: auto; }

}

@media (max-width: 768px) {

    .primary-nav { justify-content: flex-end; }

    .hero { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

    .hero__content { min-height: auto; }

    .guarantee__content { grid-template-columns: 1fr; }

    .header__garantee { text-align: center; align-items: center; }

    .guarantee-form { padding: 40px 24px; }

    .guarantee-form__row--split { grid-template-columns: 1fr; }

    .container { padding: 16px 8px; }

    .h1 { font-size: 40px;  }

    .h2 { font-size: 32px;  }

    .h3 { font-size: 28px;  }

    .text-lg { font-size: 16px;  }

    .text-md { font-size: 14px;  }

    .text-sm { font-size: 12px;  }

    

    .eyebrow { font-size: 16px;  }

    .footer__content {

        flex-direction: column;

        align-items: center;

        gap: var(--space-lg);

    }

    .container.footer__content{

        width: 100%;

    }

    .smart-home__app-buttons{

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    .footer__legal{

        text-align: center;

        align-items: center;

    }

    .footer__social{

        align-items: center;

        text-align: center;

    }

    .brand__logo{

        height: auto;

    }

}





.sat__map{

    border-radius: 32px;

    overflow: auto;

}