/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   SISTEMA GLOBAL DEL PROYECTO
========================================================= */

:root {

    /* =====================================================
       COLORES PRINCIPALES
    ====================================================== */

    --mtz-navy-950: #0B1624;
    --mtz-navy-900: #10243A;
    --mtz-navy-800: #173653;
    --mtz-navy-700: #214B70;

    --mtz-blue-600: #2F6F9F;
    --mtz-blue-500: #4284B5;
    --mtz-blue-100: #DDECF6;

    --mtz-orange-700: #B9530E;
    --mtz-orange-600: #D96A16;
    --mtz-orange-500: #F18425;
    --mtz-orange-100: #FDE8D5;

    /* =====================================================
       COLORES DE TEXTO
    ====================================================== */

    --mtz-black: #080A0D;
    --mtz-charcoal: #202832;
    --mtz-slate: #4E5D6C;
    --mtz-muted: #6D7884;

    /* =====================================================
       SUPERFICIES Y FONDOS
    ====================================================== */

    --mtz-cream: #F5F1E9;
    --mtz-paper: #F8F7F3;
    --mtz-gray-50: #F7F9FA;
    --mtz-gray-100: #EEF1F4;
    --mtz-gray-200: #DCE2E8;
    --mtz-gray-300: #C6CED6;
    --mtz-white: #FFFFFF;

    /* =====================================================
       ESTADOS
    ====================================================== */

    --mtz-success: #26734D;
    --mtz-warning: #BC6A0A;
    --mtz-error: #B42318;

    /* =====================================================
       VARIABLES SEMÁNTICAS
    ====================================================== */

    --mtz-body-bg: var(--mtz-paper);
    --mtz-text-primary: var(--mtz-navy-950);
    --mtz-text-secondary: var(--mtz-slate);
    --mtz-text-light: var(--mtz-white);

    --mtz-primary: var(--mtz-navy-900);
    --mtz-primary-hover: var(--mtz-navy-800);

    --mtz-accent: var(--mtz-orange-500);
    --mtz-accent-hover: var(--mtz-orange-600);

    --mtz-surface: rgba(255, 255, 255, 0.92);
    --mtz-surface-solid: var(--mtz-white);
    --mtz-surface-dark: var(--mtz-navy-950);

    --mtz-border-light: rgba(16, 36, 58, 0.11);
    --mtz-border-medium: rgba(16, 36, 58, 0.2);
    --mtz-border-dark: rgba(255, 255, 255, 0.15);

    /* =====================================================
       SOMBRAS
    ====================================================== */

    --mtz-shadow-xs:
        0 4px 14px rgba(11, 22, 36, 0.06);

    --mtz-shadow-sm:
        0 8px 24px rgba(11, 22, 36, 0.08);

    --mtz-shadow-md:
        0 18px 45px rgba(11, 22, 36, 0.14);

    --mtz-shadow-lg:
        0 28px 70px rgba(11, 22, 36, 0.2);

    --mtz-shadow-orange:
        0 15px 35px rgba(217, 106, 22, 0.25);

    /* =====================================================
       BORDES REDONDEADOS
    ====================================================== */

    --mtz-radius-xs: 8px;
    --mtz-radius-sm: 12px;
    --mtz-radius-md: 20px;
    --mtz-radius-lg: 30px;
    --mtz-radius-xl: 42px;
    --mtz-radius-pill: 999px;

    /* =====================================================
       TIPOGRAFÍAS
    ====================================================== */

    --mtz-font-body:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --mtz-font-heading:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        ui-sans-serif,
        system-ui,
        sans-serif;

    /* =====================================================
       ESTRUCTURA
    ====================================================== */

    --mtz-container: 1240px;
    --mtz-container-wide: 1440px;
    --mtz-gutter: 32px;

    --mtz-header-height: 88px;
    --mtz-section-space: 110px;

    /* =====================================================
       ANIMACIONES
    ====================================================== */

    --mtz-ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --mtz-ease-smooth:
        cubic-bezier(0.65, 0, 0.35, 1);

    --mtz-transition-fast:
        180ms var(--mtz-ease-standard);

    --mtz-transition-normal:
        350ms var(--mtz-ease-standard);

    --mtz-transition-slow:
        650ms var(--mtz-ease-standard);

    /* =====================================================
       CAPAS
    ====================================================== */

    --mtz-z-background: 0;
    --mtz-z-content: 1;
    --mtz-z-header: 100;
    --mtz-z-floating: 500;
    --mtz-z-section-motion: 9998;
    --mtz-z-page-transition: 9999;
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    scroll-padding-top:
        calc(var(--mtz-header-height) + 24px);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;

    overflow-x: clip;

    color: var(--mtz-text-primary);
    background: var(--mtz-body-bg);

    font-family: var(--mtz-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;

    letter-spacing: -0.01em;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    isolation: isolate;
}

body.mtz-navigation-locked {
    cursor: wait;
}

main,
header,
footer,
section,
article,
aside,
nav {
    display: block;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
blockquote,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mtz-text-primary);
    font-family: var(--mtz-font-heading);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

p {
    color: var(--mtz-text-secondary);
    text-wrap: pretty;
}

ul,
ol {
    padding-left: 1.25rem;
}

::selection {
    color: var(--mtz-white);
    background: var(--mtz-orange-600);
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

:focus-visible {
    outline: 3px solid var(--mtz-orange-500);
    outline-offset: 4px;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

.mtz-skip-link {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: calc(var(--mtz-z-page-transition) + 1);

    padding: 12px 18px;

    color: var(--mtz-white);
    background: var(--mtz-navy-950);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.9rem;
    font-weight: 800;

    transform: translateY(-160%);
    transition: transform var(--mtz-transition-normal);
}

.mtz-skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   ESTRUCTURA PRINCIPAL
========================================================= */

.mtz-site-shell {
    position: relative;
    z-index: var(--mtz-z-content);
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

.mtz-container {
    width: min(
        calc(100% - (var(--mtz-gutter) * 2)),
        var(--mtz-container)
    );
    margin-inline: auto;
}

.mtz-container-wide {
    width: min(
        calc(100% - (var(--mtz-gutter) * 2)),
        var(--mtz-container-wide)
    );
    margin-inline: auto;
}

.mtz-section {
    position: relative;
    padding-block: var(--mtz-section-space);
    scroll-margin-top:
        calc(var(--mtz-header-height) + 24px);
}

section[id],
div[id] {
    scroll-margin-top:
        calc(var(--mtz-header-height) + 24px);
}


/* =========================================================
   FONDO GLOBAL ÚNICO
========================================================= */

.mtz-global-background {
    position: fixed;
    inset: 0;
    z-index: var(--mtz-z-background);

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(47, 111, 159, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(241, 132, 37, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 88%,
            rgba(16, 36, 58, 0.1),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #F9F8F4 0%,
            #F0F4F6 48%,
            #F7F2E9 100%
        );
}

.mtz-global-background::before {
    position: absolute;
    inset: 0;

    content: "";

    opacity: 0.36;

    background-image:
        linear-gradient(
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}

.mtz-global-background::after {
    position: absolute;
    inset: 0;

    content: "";

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.54)
        );
}


/* =========================================================
   RESPLANDORES DEL FONDO
========================================================= */

.mtz-bg-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(20px);
    opacity: 0.45;
}

.mtz-bg-glow-blue {
    top: -18%;
    left: -12%;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(47, 111, 159, 0.28),
            transparent 68%
        );
}

.mtz-bg-glow-orange {
    right: -14%;
    bottom: -20%;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(241, 132, 37, 0.2),
            transparent 68%
        );
}


/* =========================================================
   FIGURAS ABSTRACTAS DE CONSTRUCCIÓN
========================================================= */

.mtz-bg-figure {
    position: absolute;
    z-index: 1;

    display: block;

    opacity: 0.18;
}


/* Techo / roofing */

.mtz-bg-roof {
    top: 6%;
    right: 3%;

    width: 390px;
    height: 210px;

    background:
        linear-gradient(
            135deg,
            transparent 49.2%,
            rgba(16, 36, 58, 0.72) 50%,
            rgba(16, 36, 58, 0.72) 51%,
            transparent 51.8%
        ),
        linear-gradient(
            45deg,
            transparent 49.2%,
            rgba(16, 36, 58, 0.72) 50%,
            rgba(16, 36, 58, 0.72) 51%,
            transparent 51.8%
        );

    transform: rotate(-4deg);
}


/* Estructura de framing */

.mtz-bg-framing {
    bottom: 4%;
    left: -55px;

    width: 310px;
    height: 390px;

    border: 2px solid rgba(47, 111, 159, 0.55);
    border-radius: var(--mtz-radius-lg);

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 48px,
            rgba(47, 111, 159, 0.48) 49px,
            rgba(47, 111, 159, 0.48) 51px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 92px,
            rgba(47, 111, 159, 0.32) 93px,
            rgba(47, 111, 159, 0.32) 95px
        );

    transform: rotate(7deg);
}


/* Tile y cerámica */

.mtz-bg-tiles {
    top: 39%;
    right: 8%;

    width: 230px;
    height: 230px;

    border: 2px solid rgba(217, 106, 22, 0.44);
    border-radius: var(--mtz-radius-md);

    background:
        linear-gradient(
            rgba(217, 106, 22, 0.38) 2px,
            transparent 2px
        ),
        linear-gradient(
            90deg,
            rgba(217, 106, 22, 0.38) 2px,
            transparent 2px
        );

    background-size: 46px 46px;

    transform: rotate(10deg);
}


/* Puerta y ventana */

.mtz-bg-door {
    top: 15%;
    left: 8%;

    width: 128px;
    height: 228px;

    border: 3px solid rgba(16, 36, 58, 0.48);
    border-radius:
        var(--mtz-radius-md)
        var(--mtz-radius-md)
        4px
        4px;

    box-shadow:
        inset 0 0 0 12px rgba(255, 255, 255, 0.14);

    transform: rotate(-6deg);
}

.mtz-bg-door::before {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;

    height: 82px;

    content: "";

    border: 2px solid rgba(16, 36, 58, 0.4);
    border-radius: var(--mtz-radius-xs);

    background:
        linear-gradient(
            90deg,
            transparent 48%,
            rgba(16, 36, 58, 0.35) 49%,
            rgba(16, 36, 58, 0.35) 51%,
            transparent 52%
        ),
        linear-gradient(
            transparent 48%,
            rgba(16, 36, 58, 0.35) 49%,
            rgba(16, 36, 58, 0.35) 51%,
            transparent 52%
        );
}

.mtz-bg-door::after {
    position: absolute;
    top: 59%;
    right: 16px;

    width: 10px;
    height: 10px;

    content: "";

    border-radius: 50%;
    background: rgba(217, 106, 22, 0.75);
}


/* Escalones y decks */

.mtz-bg-stairs {
    right: 18%;
    bottom: 6%;

    width: 310px;
    height: 170px;

    background:
        linear-gradient(
            90deg,
            rgba(16, 36, 58, 0.55),
            rgba(47, 111, 159, 0.34)
        );

    clip-path: polygon(
        0 80%,
        20% 80%,
        20% 60%,
        40% 60%,
        40% 40%,
        60% 40%,
        60% 20%,
        80% 20%,
        80% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    border-radius: 0 0 var(--mtz-radius-md) var(--mtz-radius-md);

    transform: rotate(-3deg);
}


/* =========================================================
   COMPONENTES GLOBALES
========================================================= */

.mtz-card {
    position: relative;

    overflow: hidden;

    background: var(--mtz-surface);
    border: 1px solid var(--mtz-border-light);
    border-radius: var(--mtz-radius-md);

    box-shadow: var(--mtz-shadow-sm);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform var(--mtz-transition-normal),
        box-shadow var(--mtz-transition-normal),
        border-color var(--mtz-transition-normal);
}

.mtz-card:hover {
    border-color: rgba(47, 111, 159, 0.25);
    box-shadow: var(--mtz-shadow-md);
    transform: translateY(-6px);
}

.mtz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 34px;
    margin-bottom: 18px;
    padding: 7px 14px;

    color: var(--mtz-orange-700);
    background: var(--mtz-orange-100);
    border: 1px solid rgba(217, 106, 22, 0.16);
    border-radius: var(--mtz-radius-pill);

    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mtz-eyebrow::before {
    width: 8px;
    height: 8px;

    content: "";

    flex: 0 0 auto;

    border-radius: 50%;
    background: var(--mtz-orange-500);

    box-shadow:
        0 0 0 5px rgba(241, 132, 37, 0.14);
}

.mtz-section-title {
    max-width: 850px;
    margin-bottom: 22px;

    font-size: clamp(2.2rem, 5vw, 4.7rem);
}

.mtz-section-description {
    max-width: 720px;
    margin-bottom: 0;

    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.8;
}


/* =========================================================
   BOTONES GLOBALES
========================================================= */

.mtz-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 54px;
    padding: 14px 24px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: var(--mtz-radius-pill);

    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;

    cursor: pointer;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast),
        box-shadow var(--mtz-transition-fast);
}

.mtz-btn::before {
    position: absolute;
    top: 0;
    left: -130%;

    width: 75%;
    height: 100%;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 600ms var(--mtz-ease-standard);
}

.mtz-btn:hover::before {
    left: 150%;
}

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

.mtz-btn:active {
    transform: translateY(0) scale(0.98);
}

.mtz-btn-primary {
    color: var(--mtz-white);
    background: var(--mtz-orange-500);
    border-color: var(--mtz-orange-500);

    box-shadow: var(--mtz-shadow-orange);
}

.mtz-btn-primary:hover {
    color: var(--mtz-white);
    background: var(--mtz-orange-600);
    border-color: var(--mtz-orange-600);
}

.mtz-btn-dark {
    color: var(--mtz-white);
    background: var(--mtz-navy-950);
    border-color: var(--mtz-navy-950);

    box-shadow: var(--mtz-shadow-sm);
}

.mtz-btn-dark:hover {
    color: var(--mtz-white);
    background: var(--mtz-navy-800);
    border-color: var(--mtz-navy-800);

    box-shadow: var(--mtz-shadow-md);
}

.mtz-btn-outline {
    color: var(--mtz-navy-900);
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(16, 36, 58, 0.2);
}

.mtz-btn-outline:hover {
    color: var(--mtz-white);
    background: var(--mtz-navy-900);
    border-color: var(--mtz-navy-900);
}

.mtz-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}


/* =========================================================
   ANIMACIÓN AL LLEGAR A UNA SECCIÓN
========================================================= */

.mtz-section-arrival {
    animation:
        mtzSectionArrival
        720ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzSectionArrival {

    0% {
        opacity: 0.78;
        transform:
            translate3d(0, 24px, 0)
            scale(0.992);
    }

    55% {
        opacity: 1;
        transform:
            translate3d(0, -3px, 0)
            scale(1.001);
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}


/* =========================================================
   LÍNEA DE TRANSICIÓN ENTRE SECCIONES
========================================================= */

.mtz-section-motion {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--mtz-z-section-motion);

    height: 4px;

    overflow: hidden;
    pointer-events: none;
}

.mtz-section-motion span {
    display: block;
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--mtz-blue-600),
            var(--mtz-orange-500),
            var(--mtz-navy-900)
        );

    transform: scaleX(0);
    transform-origin: left center;
}

body.mtz-anchor-moving .mtz-section-motion span {
    animation:
        mtzSectionProgress
        700ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzSectionProgress {

    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 1;
        transform: scaleX(0.84);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}


/* =========================================================
   TRANSICIÓN ENTRE PÁGINAS
========================================================= */

.mtz-page-transition {
    position: fixed;
    inset: 0;
    z-index: var(--mtz-z-page-transition);

    visibility: hidden;

    overflow: hidden;
    pointer-events: none;
}

.mtz-transition-panel {
    position: absolute;
    left: 0;

    width: 100%;
    height: 50.5%;

    background:
        linear-gradient(
            115deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    transition:
        transform
        560ms
        var(--mtz-ease-smooth);
}

.mtz-transition-panel::after {
    position: absolute;
    inset: 0;

    content: "";

    opacity: 0.17;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

.mtz-transition-panel-top {
    top: 0;
    transform: translate3d(0, -101%, 0);
}

.mtz-transition-panel-bottom {
    bottom: 0;
    transform: translate3d(0, 101%, 0);
}

.mtz-transition-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;

    display: flex;
    align-items: center;
    flex-direction: column;

    width: min(90%, 420px);

    color: var(--mtz-white);
    text-align: center;

    opacity: 0;

    transform:
        translate3d(-50%, -44%, 0)
        scale(0.94);

    transition:
        opacity 250ms ease,
        transform 400ms var(--mtz-ease-standard);
}

.mtz-transition-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;
    margin-bottom: 15px;

    border: 2px solid rgba(255, 255, 255, 0.52);
    border-radius: 20px;

    transform: rotate(45deg);
}

.mtz-transition-icon span {
    width: 23px;
    height: 35px;

    border: 3px solid var(--mtz-orange-500);
    border-radius: 3px;

    transform: rotate(-45deg);
}

.mtz-transition-brand strong {
    margin-bottom: 6px;

    font-family: var(--mtz-font-heading);
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.08em;
}

.mtz-transition-brand small {
    color: rgba(255, 255, 255, 0.74);

    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* Página saliendo */

html.mtz-is-leaving .mtz-page-transition {
    visibility: visible;
    pointer-events: auto;
}

html.mtz-is-leaving .mtz-transition-panel {
    transform: translate3d(0, 0, 0);
}

html.mtz-is-leaving .mtz-transition-panel-bottom {
    transition-delay: 35ms;
}

html.mtz-is-leaving .mtz-transition-brand {
    opacity: 1;

    transform:
        translate3d(-50%, -50%, 0)
        scale(1);

    transition-delay: 220ms;
}


/* Página entrando */

html.mtz-is-entering .mtz-page-transition {
    visibility: visible;
}

html.mtz-is-entering .mtz-transition-panel-top {
    animation:
        mtzPanelTopExit
        720ms
        120ms
        var(--mtz-ease-smooth)
        both;
}

html.mtz-is-entering .mtz-transition-panel-bottom {
    animation:
        mtzPanelBottomExit
        720ms
        120ms
        var(--mtz-ease-smooth)
        both;
}

html.mtz-is-entering .mtz-transition-brand {
    animation:
        mtzBrandExit
        620ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzPanelTopExit {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -101%, 0);
    }
}

@keyframes mtzPanelBottomExit {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 101%, 0);
    }
}

@keyframes mtzBrandExit {

    0%,
    28% {
        opacity: 1;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(-50%, -56%, 0)
            scale(0.94);
    }
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: var(--mtz-gray-100);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--mtz-blue-600),
            var(--mtz-navy-900)
        );

    border: 3px solid var(--mtz-gray-100);
    border-radius: var(--mtz-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mtz-orange-600);
}








































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   ESTRUCTURA SUPERIOR GLOBAL
========================================================= */

:root {
    --mtz-topbar-height: 38px;

    /*
     * Altura combinada del bloque superior fijo.
     * El valor cambia automáticamente en cada breakpoint.
     */
    --mtz-chrome-height:
        calc(
            var(--mtz-topbar-height) +
            var(--mtz-header-height)
        );
}


/* =========================================================
   TOPBAR + HEADER

   Este bloque permanece fijo y no forma parte del flujo
   vertical del hero.
========================================================= */

.mtz-site-chrome {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--mtz-z-header);

    display: grid;
    grid-template-rows:
        var(--mtz-topbar-height)
        var(--mtz-header-height);

    width: 100%;
    height: var(--mtz-chrome-height);

    /*
     * No se utiliza transform en este contenedor.
     * Esto mantiene estable el menú responsive y evita
     * cambios extraños de posición en móviles.
     */
    transform: none;

    isolation: isolate;
}


/* =========================================================
   ESPACIO RESERVADO EN EL CONTENIDO PRINCIPAL

   El hero comenzará visualmente debajo de la topbar
   y el header, aunque ambos estén en position: fixed.
========================================================= */

.mtz-main-content {
    position: relative;
    z-index: var(--mtz-z-content);

    width: 100%;
    min-width: 0;

    padding-top: var(--mtz-chrome-height);
}


/*
 * Los enlaces hacia secciones consideran tanto la altura
 * de la topbar como la del header.
 */
section[id],
div[id] {
    scroll-margin-top:
        calc(
            var(--mtz-chrome-height) +
            24px
        );
}


/* =========================================================
   BARRA INFORMATIVA
========================================================= */

.mtz-topbar {
    position: relative;
    z-index: 2;

    width: 100%;
    height: var(--mtz-topbar-height);
    min-height: var(--mtz-topbar-height);

    overflow: hidden;

    color: var(--mtz-white);

    background:
        linear-gradient(
            105deg,
            var(--mtz-navy-950) 0%,
            var(--mtz-navy-900) 54%,
            var(--mtz-navy-800) 100%
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 5px 18px rgba(11, 22, 36, 0.16);
}


/* Plano arquitectónico decorativo */

.mtz-topbar::before {
    position: absolute;
    inset: 0;

    content: "";

    pointer-events: none;

    opacity: 0.15;

    background-image:
        linear-gradient(
            90deg,
            transparent 0,
            transparent 24px,
            rgba(255, 255, 255, 0.32) 25px,
            transparent 26px
        ),
        linear-gradient(
            135deg,
            transparent 46%,
            rgba(255, 255, 255, 0.2) 47%,
            transparent 48%
        );

    background-size:
        50px 100%,
        150px 150px;
}


/* Acento inferior */

.mtz-topbar::after {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 22%;
    height: 2px;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mtz-orange-500)
        );
}


/* =========================================================
   CONTENIDO INTERIOR
========================================================= */

.mtz-topbar__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    height: 100%;
}

.mtz-topbar__group {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;
    height: 100%;
}

.mtz-topbar__group--actions {
    justify-content: flex-end;
}


/* =========================================================
   LICENSED & INSURED
========================================================= */

.mtz-topbar__licensed {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

    color: var(--mtz-white);

    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mtz-topbar__licensed-icon {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(241, 132, 37, 0.12);
}

.mtz-topbar__licensed-icon svg {
    width: 12px;
    height: 12px;

    fill: currentColor;
}


/* =========================================================
   DIVISORES
========================================================= */

.mtz-topbar__divider {
    display: block;

    width: 1px;
    height: 15px;

    flex: 0 0 auto;

    background:
        rgba(255, 255, 255, 0.2);
}


/* =========================================================
   ÁREA DE SERVICIO
========================================================= */

.mtz-topbar__area {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

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

    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.mtz-topbar__area svg {
    width: 14px;
    height: 14px;

    flex: 0 0 auto;

    fill: var(--mtz-orange-500);
}

.mtz-topbar__area-short {
    display: none;
}


/* =========================================================
   ESTADO DEL NEGOCIO
========================================================= */

.mtz-topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.mtz-topbar__status-dot {
    position: relative;

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;
    background: var(--mtz-gray-300);
}

.mtz-topbar__status.is-open
.mtz-topbar__status-dot {
    background: #59D69A;

    box-shadow:
        0 0 0 4px rgba(89, 214, 154, 0.12);
}

.mtz-topbar__status.is-open
.mtz-topbar__status-dot::after {
    position: absolute;
    inset: -4px;

    content: "";

    border:
        1px solid rgba(89, 214, 154, 0.38);

    border-radius: 50%;

    animation:
        mtzTopbarStatusPulse
        2.2s
        ease-out
        infinite;
}

.mtz-topbar__status.is-closed
.mtz-topbar__status-dot {
    background: var(--mtz-orange-500);

    box-shadow:
        0 0 0 4px rgba(241, 132, 37, 0.12);
}

@keyframes mtzTopbarStatusPulse {

    0% {
        opacity: 1;
        transform: scale(0.8);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


/* =========================================================
   TELÉFONO
========================================================= */

.mtz-topbar__phone {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 28px;
    padding: 0 11px 0 5px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-topbar__phone:hover {
    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);
    border-color: var(--mtz-orange-500);

    transform: translateY(-1px);
}

.mtz-topbar__phone-icon {
    display: grid;
    place-items: center;

    width: 21px;
    height: 21px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 50%;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast);
}

.mtz-topbar__phone:hover
.mtz-topbar__phone-icon {
    color: var(--mtz-white);
    background: var(--mtz-navy-950);
}

.mtz-topbar__phone-icon svg {
    width: 12px;
    height: 12px;

    fill: currentColor;
}

.mtz-topbar__phone-label {
    color: rgba(255, 255, 255, 0.66);

    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;

    transition:
        color var(--mtz-transition-fast);
}

.mtz-topbar__phone:hover
.mtz-topbar__phone-label {
    color: rgba(11, 22, 36, 0.7);
}

.mtz-topbar__phone strong {
    font-weight: 850;
}









































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   HEADER FIJO
========================================================= */

html {
    scroll-padding-top:
        calc(
            var(--mtz-chrome-height) +
            24px
        );
}


/* =========================================================
   UTILIDAD DE ACCESIBILIDAD
========================================================= */

.mtz-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}


/* =========================================================
   HEADER

   El elemento que permanece fijo es .mtz-site-chrome.
   El header ocupa la segunda fila de ese contenedor.
========================================================= */

.mtz-site-header {
    position: relative;
    z-index: 3;

    width: 100%;
    height: var(--mtz-header-height);
    min-height: var(--mtz-header-height);

    color: var(--mtz-text-primary);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 247, 243, 0.96)
        );

    border-bottom:
        1px solid rgba(16, 36, 58, 0.1);

    box-shadow:
        0 12px 34px rgba(11, 22, 36, 0.1);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    isolation: isolate;
}

.mtz-site-header::before {
    position: absolute;
    inset: 0;
    z-index: -1;

    content: "";

    pointer-events: none;

    opacity: 0.2;

    background-image:
        linear-gradient(
            90deg,
            transparent 0,
            transparent 39px,
            rgba(47, 111, 159, 0.13) 40px,
            transparent 41px
        );

    background-size: 80px 100%;
}

.mtz-site-header::after {
    position: absolute;
    right: 0;
    bottom: 0;

    width: min(30vw, 460px);
    height: 3px;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mtz-orange-500)
        );
}


/* =========================================================
   CONTENIDO INTERIOR
========================================================= */

.mtz-header__inner {
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns:
        46px
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 12px;

    height: 100%;
}


/* =========================================================
   LOGOTIPO
========================================================= */

.mtz-header__logo {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height:
        calc(
            var(--mtz-header-height) -
            6px
        );

    overflow: hidden;

    border-radius: var(--mtz-radius-sm);

    transition:
        transform var(--mtz-transition-fast),
        opacity var(--mtz-transition-fast);
}

.mtz-header__logo:hover {
    transform: translateY(-1px);
}

.mtz-header__logo:active {
    transform: scale(0.98);
}

.mtz-header__logo img {
    display: block;

    width: auto;
    height: 98%;
    max-width: 100%;

    object-fit: contain;
    object-position: center;

    transform: scale(1.055);
}


/* =========================================================
   NAVEGACIÓN DE ESCRITORIO
========================================================= */

.mtz-header__desktop-nav {
    display: none;
}

.mtz-header__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.mtz-header__nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 13px;

    color: var(--mtz-charcoal);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-header__nav-link::after {
    position: absolute;
    right: 16px;
    bottom: 7px;
    left: 16px;

    height: 2px;

    content: "";

    border-radius: var(--mtz-radius-pill);

    background: var(--mtz-orange-500);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform var(--mtz-transition-normal);
}

.mtz-header__nav-link:hover,
.mtz-header__nav-link.is-active,
.mtz-header__nav-link[aria-current="page"] {
    color: var(--mtz-navy-900);
    background: rgba(47, 111, 159, 0.08);
}

.mtz-header__nav-link:hover::after,
.mtz-header__nav-link.is-active::after,
.mtz-header__nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}


/* =========================================================
   BOTÓN HAMBURGUESA
========================================================= */

.mtz-header__menu-toggle {
    position: relative;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    padding: 0;

    justify-self: start;

    color: var(--mtz-white);

    background:
        linear-gradient(
            145deg,
            var(--mtz-navy-900),
            var(--mtz-navy-800)
        );

    border:
        1px solid rgba(16, 36, 58, 0.2);

    border-radius: 15px;

    box-shadow:
        0 9px 22px rgba(11, 22, 36, 0.2);

    cursor: pointer;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast),
        box-shadow var(--mtz-transition-fast);
}

.mtz-header__menu-toggle:hover {
    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);
    border-color: var(--mtz-orange-500);

    box-shadow: var(--mtz-shadow-orange);

    transform: translateY(-2px);
}

.mtz-header__menu-toggle:active {
    transform: scale(0.96);
}

.mtz-header__menu-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    width: 22px;
    height: 20px;
}

.mtz-header__menu-icon span {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: var(--mtz-radius-pill);

    background: currentColor;

    transform-origin: center;

    transition:
        opacity var(--mtz-transition-normal),
        transform var(--mtz-transition-normal),
        width var(--mtz-transition-normal);
}

.mtz-header__menu-icon span:nth-child(2) {
    width: 15px;
    margin-left: auto;
}

.mtz-site-header.is-menu-open
.mtz-header__menu-icon span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.mtz-site-header.is-menu-open
.mtz-header__menu-icon span:nth-child(2) {
    width: 0;

    opacity: 0;

    transform: translateX(8px);
}

.mtz-site-header.is-menu-open
.mtz-header__menu-icon span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   BOTÓN FREE ESTIMATE
========================================================= */

.mtz-header__estimate {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 46px;
    padding: 5px 6px 5px 17px;

    justify-self: end;

    overflow: hidden;

    color: var(--mtz-white);

    background:
        linear-gradient(
            135deg,
            var(--mtz-orange-500),
            var(--mtz-orange-600)
        );

    border:
        1px solid rgba(185, 83, 14, 0.16);

    border-radius: var(--mtz-radius-pill);

    box-shadow:
        0 12px 25px rgba(217, 106, 22, 0.25);

    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;

    transition:
        background-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast),
        box-shadow var(--mtz-transition-fast);
}

.mtz-header__estimate::before {
    position: absolute;
    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 600ms var(--mtz-ease-standard);
}

.mtz-header__estimate:hover::before {
    left: 150%;
}

.mtz-header__estimate:hover {
    color: var(--mtz-white);

    box-shadow:
        0 17px 34px rgba(217, 106, 22, 0.33);

    transform: translateY(-2px);
}

.mtz-header__estimate:active {
    transform: scale(0.97);
}

.mtz-header__estimate-text {
    position: relative;
    z-index: 2;
}

.mtz-header__estimate-icon {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-navy-950);

    border-radius: 50%;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-header__estimate:hover
.mtz-header__estimate-icon {
    color: var(--mtz-navy-950);
    background: var(--mtz-white);

    transform: translateX(2px);
}

.mtz-header__estimate-icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   MENÚ RESPONSIVE A PANTALLA COMPLETA
========================================================= */

.mtz-mobile-menu {
    position: fixed;

    /*
     * Cubre topbar, header y contenido.
     */
    inset: 0;

    /*
     * Superior al bloque fijo del header,
     * pero inferior a la transición entre páginas.
     */
    z-index: 9000;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;

    visibility: hidden;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;

    transition:
        visibility 0s linear 420ms,
        opacity 260ms ease;
}


/* Estado abierto */

html.mtz-mobile-menu-open
.mtz-mobile-menu {
    visibility: visible;

    opacity: 1;
    pointer-events: auto;

    transition-delay: 0s;
}


/* Backdrop */

.mtz-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        rgba(11, 22, 36, 0.76);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;

    transition:
        opacity 320ms ease;
}

html.mtz-mobile-menu-open
.mtz-mobile-menu__backdrop {
    opacity: 1;
}


/* Panel principal */

.mtz-mobile-menu__panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    color: var(--mtz-white);

    background:
        radial-gradient(
            circle at 93% 5%,
            rgba(241, 132, 37, 0.2),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(47, 111, 159, 0.24),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--mtz-navy-950),
            #0F2940
        );

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    opacity: 0;

    transform:
        translate3d(0, -18px, 0)
        scale(0.992);

    transform-origin: top center;

    transition:
        opacity 300ms ease,
        transform 480ms var(--mtz-ease-standard);
}

html.mtz-mobile-menu-open
.mtz-mobile-menu__panel {
    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);
}


/* =========================================================
   CABECERA DEL MENÚ
========================================================= */

.mtz-mobile-menu__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;

    margin-bottom: 8px;
}

.mtz-mobile-menu__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;

    color: var(--mtz-orange-500);

    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.mtz-mobile-menu__eyebrow::before {
    width: 20px;
    height: 2px;

    content: "";

    background: currentColor;
}

.mtz-mobile-menu__heading h2 {
    max-width: 480px;
    margin: 0;

    color: var(--mtz-white);

    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1;
}

.mtz-mobile-menu__description {
    max-width: 580px;
    margin-bottom: 22px;

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

    font-size: 0.86rem;
    line-height: 1.65;
}

.mtz-mobile-menu__close {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 15px;

    cursor: pointer;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-mobile-menu__close:hover {
    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    transform: rotate(4deg);
}

.mtz-mobile-menu__close svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}


/* =========================================================
   LINKS RESPONSIVE
========================================================= */

.mtz-mobile-menu__list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.mtz-mobile-menu__link {
    position: relative;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 13px;

    min-height: 66px;
    padding: 10px 16px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 18px;

    font-family: var(--mtz-font-heading);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.015em;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-mobile-menu__link:hover,
.mtz-mobile-menu__link.is-active,
.mtz-mobile-menu__link[aria-current="page"] {
    color: var(--mtz-white);
    background: rgba(241, 132, 37, 0.14);
    border-color: rgba(241, 132, 37, 0.36);

    transform: translateY(-2px);
}

.mtz-mobile-menu__number {
    color: var(--mtz-orange-500);

    font-family: var(--mtz-font-body);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.mtz-mobile-menu__label {
    min-width: 0;
}

.mtz-mobile-menu__link svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.65;

    transition:
        opacity var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-mobile-menu__link:hover svg {
    opacity: 1;

    transform: translateX(3px);
}


/* =========================================================
   FOOTER DEL MENÚ
========================================================= */

.mtz-mobile-menu__footer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 12px;

    margin-top: auto;
    padding-top: 24px;
}

.mtz-mobile-menu__call {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    min-height: 58px;
    padding: 8px 15px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 18px;
}

.mtz-mobile-menu__call-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 13px;
}

.mtz-mobile-menu__call-icon svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}

.mtz-mobile-menu__call > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-mobile-menu__call small {
    margin-bottom: 3px;

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

    font-size: 0.65rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-mobile-menu__call strong {
    overflow: hidden;

    font-size: 0.91rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtz-mobile-menu__estimate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 58px;
    padding: 10px 20px;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border-radius: 18px;

    box-shadow:
        0 14px 28px rgba(217, 106, 22, 0.23);

    font-size: 0.79rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.mtz-mobile-menu__estimate svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   BLOQUEO DE SCROLL

   No se utiliza position: fixed en html ni body.
   No se modifica el valor de window.scrollY.
========================================================= */

html.mtz-mobile-menu-open,
body.mtz-mobile-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.mtz-mobile-menu-open {
    touch-action: none;
}

body.mtz-mobile-menu-open
.mtz-mobile-menu__panel {
    touch-action: pan-y;
}















































































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   HERO PRINCIPAL
========================================================= */

.mtz-hero {
    position: relative;
    z-index: 1;

    width: 100%;

    /*
     * Fallback para navegadores antiguos.
     */
    height:
        calc(
            100vh -
            var(--mtz-chrome-height)
        );

    /*
     * Altura estable para navegadores modernos.
     * No se suma a la altura del header: el main ya reserva
     * el espacio mediante padding-top.
     */
    height:
        calc(
            100svh -
            var(--mtz-chrome-height)
        );

    min-height: 0;
    max-height:
        calc(
            100svh -
            var(--mtz-chrome-height)
        );

    overflow: hidden;

    color: var(--mtz-text-primary);

    background:
        linear-gradient(
            135deg,
            rgba(249, 248, 244, 0.97),
            rgba(238, 243, 247, 0.94) 58%,
            rgba(247, 241, 232, 0.96)
        );

    isolation: isolate;
}


/* =========================================================
   FONDO
========================================================= */

.mtz-hero::before {
    position: absolute;
    inset: 0;
    z-index: -3;

    content: "";

    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(47, 111, 159, 0.17),
            transparent 31%
        ),
        radial-gradient(
            circle at 14% 82%,
            rgba(241, 132, 37, 0.11),
            transparent 27%
        );
}

.mtz-hero::after {
    position: absolute;
    inset: 0;
    z-index: -2;

    content: "";

    pointer-events: none;

    opacity: 0.37;

    background-image:
        linear-gradient(
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 40%,
            black
        );
}

.mtz-hero__background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

.mtz-hero__shape {
    position: absolute;

    display: block;

    pointer-events: none;
}

.mtz-hero__shape--frame {
    top: 14%;
    right: 4%;

    width: 330px;
    height: 330px;

    border:
        2px solid rgba(47, 111, 159, 0.12);

    border-radius: 42px;

    transform: rotate(9deg);
}

.mtz-hero__shape--frame::before {
    position: absolute;
    inset: 26px;

    content: "";

    border:
        1px solid rgba(47, 111, 159, 0.11);

    border-radius: 30px;
}

.mtz-hero__shape--tile {
    right: 26%;
    bottom: -70px;

    width: 220px;
    height: 220px;

    opacity: 0.28;

    border:
        1px solid rgba(217, 106, 22, 0.22);

    border-radius: 28px;

    background-image:
        linear-gradient(
            rgba(217, 106, 22, 0.23) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(217, 106, 22, 0.23) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

    transform: rotate(-8deg);
}

.mtz-hero__shape--line {
    top: 19%;
    left: -80px;

    width: 310px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(241, 132, 37, 0.38),
            transparent
        );

    transform: rotate(-28deg);
}


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

.mtz-hero__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.92fr);
    align-items: center;
    gap: 48px;

    height: 100%;
    min-height: 0;

    padding-top: 24px;
    padding-bottom: 26px;
}


/* =========================================================
   CONTENIDO
========================================================= */

.mtz-hero__content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    min-height: 0;
}

.mtz-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
    min-height: 36px;
    margin-bottom: 17px;
    padding: 7px 15px 7px 8px;

    color: var(--mtz-navy-900);
    background: rgba(255, 255, 255, 0.84);

    border:
        1px solid rgba(16, 36, 58, 0.11);

    border-radius: var(--mtz-radius-pill);

    box-shadow: var(--mtz-shadow-xs);

    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-hero__eyebrow-icon {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border-radius: 50%;
}

.mtz-hero__eyebrow-icon svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-hero__title {
    max-width: 760px;
    margin-bottom: 18px;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            2.8rem,
            5vw,
            5.65rem
        );

    line-height: 0.94;
    letter-spacing: -0.052em;
}

.mtz-hero__title span {
    display: block;

    color: var(--mtz-blue-600);
}

.mtz-hero__description {
    max-width: 680px;
    margin-bottom: 24px;

    color: var(--mtz-slate);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.7;
}


/* =========================================================
   BOTONES
========================================================= */

.mtz-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;

    margin-bottom: 24px;
}

.mtz-hero__primary-button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--mtz-transition-fast);
}

.mtz-hero__primary-button:hover svg {
    transform: translateX(3px);
}

.mtz-hero__call-button {
    gap: 9px;

    color: var(--mtz-navy-900);
}

.mtz-hero__call-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 50%;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast);
}

.mtz-hero__call-icon svg {
    width: 14px;
    height: 14px;

    fill: currentColor;
}

.mtz-hero__call-button:hover
.mtz-hero__call-icon {
    color: var(--mtz-orange-500);
    background: var(--mtz-white);
}


/* =========================================================
   INFORMACIÓN DE CONFIANZA
========================================================= */

.mtz-hero__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 18px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.mtz-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--mtz-charcoal);

    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
    white-space: nowrap;
}

.mtz-hero__trust-icon {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    color: var(--mtz-orange-600);
    background: var(--mtz-orange-100);

    border-radius: 7px;
}

.mtz-hero__trust-icon svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   IMAGEN
========================================================= */

.mtz-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 100%;
    min-height: 0;
}

.mtz-hero__photo-card {
    position: relative;

    width: min(100%, 500px);
    height: min(100%, 570px);

    min-height: 320px;

    padding: 14px;

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.93),
            rgba(255, 255, 255, 0.72)
        );

    border:
        1px solid rgba(16, 36, 58, 0.11);

    border-radius: 38px;

    box-shadow:
        0 28px 70px rgba(11, 22, 36, 0.18);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mtz-hero__photo-outline {
    position: absolute;
    top: -14px;
    right: -14px;

    width: 76%;
    height: 76%;

    border:
        2px solid rgba(241, 132, 37, 0.35);

    border-radius: 38px;

    transform: rotate(4deg);

    pointer-events: none;
}

.mtz-hero__photo-wrapper {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            var(--mtz-gray-200),
            var(--mtz-blue-100)
        );
}

.mtz-hero__photo {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition:
        transform 900ms var(--mtz-ease-standard),
        filter 500ms ease;
}

.mtz-hero__photo-card:hover
.mtz-hero__photo {
    transform: scale(1.025);
}

.mtz-hero__photo-gradient {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 54%,
            rgba(11, 22, 36, 0.17) 72%,
            rgba(11, 22, 36, 0.82) 100%
        );
}

.mtz-hero__photo-caption {
    position: absolute;
    right: 24px;
    bottom: 20px;
    left: 24px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    color: var(--mtz-white);
}

.mtz-hero__photo-caption > span {
    font-family: var(--mtz-font-heading);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: 0.05em;
}

.mtz-hero__photo-caption p {
    max-width: 180px;
    margin: 0;

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

    font-size: 0.65rem;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}


/* =========================================================
   TARJETAS FLOTANTES
========================================================= */

.mtz-hero__badge {
    position: absolute;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.92);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 17px;

    box-shadow: var(--mtz-shadow-md);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mtz-hero__badge > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-hero__badge small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.59rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-hero__badge strong {
    color: var(--mtz-navy-950);

    font-size: 0.79rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.mtz-hero__badge-mark {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 12px;
}

.mtz-hero__badge-mark svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-hero__badge-status {
    position: relative;

    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;
    background: #42B883;

    box-shadow:
        0 0 0 5px rgba(66, 184, 131, 0.14);
}

.mtz-hero__badge--top {
    top: 34px;
    left: -38px;
}

.mtz-hero__badge--bottom {
    right: -28px;
    bottom: 44px;
}


/* =========================================================
   ANIMACIÓN PROGRESIVA

   El contenido permanece visible si JavaScript no funciona.
========================================================= */

.mtz-hero.is-ready
.mtz-hero__content {
    animation:
        mtzHeroContentArrival
        760ms
        var(--mtz-ease-standard)
        both;
}

.mtz-hero.is-ready
.mtz-hero__photo-card {
    animation:
        mtzHeroPhotoArrival
        850ms
        80ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzHeroContentArrival {

    from {
        opacity: 0;
        transform: translate3d(-24px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzHeroPhotoArrival {

    from {
        opacity: 0;
        transform:
            translate3d(22px, 0, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}


/* =========================================================
   ERROR DE IMAGEN
========================================================= */

.mtz-hero.is-image-missing
.mtz-hero__photo-wrapper {
    background:
        linear-gradient(
            145deg,
            var(--mtz-navy-900),
            var(--mtz-blue-600)
        );
}

.mtz-hero.is-image-missing
.mtz-hero__photo {
    visibility: hidden;
}









































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   INTRODUCCIÓN SOBRE MTZ
========================================================= */

.mtz-about {
    position: relative;
    z-index: 1;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(245, 241, 233, 0.88)
        );

    border-top:
        1px solid rgba(16, 36, 58, 0.08);
}


/* Resplandor decorativo */

.mtz-about::before {
    position: absolute;
    top: 12%;
    left: -170px;

    width: 430px;
    height: 430px;

    content: "";

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 111, 159, 0.14),
            transparent 68%
        );

    filter: blur(8px);
}


/* Forma relacionada con construcción */

.mtz-about::after {
    position: absolute;
    right: -80px;
    bottom: -120px;

    width: 360px;
    height: 320px;

    content: "";

    pointer-events: none;

    opacity: 0.14;

    border:
        2px solid var(--mtz-orange-500);

    border-radius: 42px;

    background-image:
        linear-gradient(
            rgba(217, 106, 22, 0.3) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(217, 106, 22, 0.3) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    transform: rotate(10deg);
}

.mtz-about__container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ESTRUCTURA PRINCIPAL
========================================================= */

.mtz-about__layout {
    display: grid;
    grid-template-columns:
        minmax(360px, 0.92fr)
        minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(54px, 7vw, 104px);
}


/* =========================================================
   COMPOSICIÓN VISUAL
========================================================= */

.mtz-about__visual {
    position: relative;

    min-width: 0;
    padding: 18px 0 34px 18px;
}

.mtz-about__blueprint-card {
    position: relative;

    min-height: 570px;
    padding: 34px;

    overflow: hidden;

    color: var(--mtz-white);

    background-image: url('/img/familia1.jpg');
    background-repeat: no-repeat;
    background-size: cover;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--mtz-radius-xl);

    box-shadow: var(--mtz-shadow-lg);

    isolation: isolate;
}

.mtz-about__blueprint-card::before {
    position: absolute;
    inset: 0;
    z-index: -2;

    content: "";

    pointer-events: none;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.15) 1px,
            transparent 1px
        );

    background-size: 40px 40px;
}

.mtz-about__blueprint-card::after {
    position: absolute;
    right: -110px;
    bottom: -125px;
    z-index: -1;

    width: 320px;
    height: 320px;

    content: "";

    pointer-events: none;

    border:
        44px solid rgba(241, 132, 37, 0.08);

    border-radius: 50%;
}


/* Decoraciones arquitectónicas */

.mtz-about__blueprint-decoration {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.mtz-about__frame-line {
    position: absolute;
    top: 120px;
    right: -42px;

    width: 210px;
    height: 270px;

    border:
        2px solid rgba(255, 255, 255, 0.12);

    border-radius: 24px;
}

.mtz-about__frame-line::before,
.mtz-about__frame-line::after {
    position: absolute;

    content: "";
}

.mtz-about__frame-line::before {
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        rgba(255, 255, 255, 0.13);
}

.mtz-about__frame-line::after {
    top: 50%;
    right: 0;
    left: 0;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.13);
}

.mtz-about__door-line {
    position: absolute;
    right: 68px;
    bottom: 65px;

    width: 86px;
    height: 140px;

    border:
        2px solid rgba(241, 132, 37, 0.23);

    border-radius: 16px 16px 2px 2px;
}

.mtz-about__door-line::after {
    position: absolute;
    top: 55%;
    right: 10px;

    width: 7px;
    height: 7px;

    content: "";

    border-radius: 50%;
    background: var(--mtz-orange-500);
}

.mtz-about__measurement-line {
    position: absolute;
    top: 42%;
    left: 23px;

    width: 190px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--mtz-orange-500),
            transparent
        );

    transform: rotate(-28deg);
}


/* Parte superior */

.mtz-about__visual-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mtz-about__visual-label {
    display: inline-flex;
    align-items: center;

    min-height: 32px;
    padding: 7px 13px;

    color: var(--mtz-orange-100);
    background: rgba(241, 132, 37, 0.14);

    border:
        1px solid rgba(241, 132, 37, 0.28);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mtz-about__visual-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 16px;

    box-shadow:
        0 13px 30px rgba(241, 132, 37, 0.22);
}

.mtz-about__visual-icon svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Monograma */

.mtz-about__monogram {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    gap: 18px;

    margin-top: 108px;
}

.mtz-about__monogram > span {
    color: var(--mtz-white);

    font-family: var(--mtz-font-heading);
    font-size: clamp(5.4rem, 9vw, 8rem);
    font-weight: 900;
    line-height: 0.72;
    letter-spacing: -0.045em;
}

.mtz-about__monogram small {
    padding-bottom: 5px;

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

    font-size: 0.67rem;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* Frase */

.mtz-about__quote {
    position: relative;
    z-index: 2;

    max-width: 390px;
    margin: 48px 0 0;
    padding-left: 21px;

    color: #ffffff;

    border-left:
        3px solid var(--mtz-orange-500);

    font-family: var(--mtz-font-heading);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.025em;
}


/* Valores */

.mtz-about__visual-values {
    position: absolute;
    right: 30px;
    bottom: 28px;
    left: 30px;
    z-index: 2;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mtz-about__visual-values > div {
    padding: 12px;

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

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 14px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mtz-about__visual-values span {
    display: block;
    margin-bottom: 4px;

    color: var(--mtz-orange-500);

    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.mtz-about__visual-values strong {
    display: block;

    color: var(--mtz-white);

    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.2;
}


/* Tarjeta flotante */

.mtz-about__location-card {
    position: absolute;
    right: -20px;
    bottom: 0;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 11px;

    width: min(280px, 72%);
    padding: 13px 15px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.94);

    border:
        1px solid var(--mtz-border-light);

    border-radius: 18px;

    box-shadow: var(--mtz-shadow-md);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mtz-about__location-icon {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border-radius: 13px;
}

.mtz-about__location-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-about__location-card > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-about__location-card small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-about__location-card strong {
    color: var(--mtz-navy-950);

    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.25;
}


/* =========================================================
   CONTENIDO DERECHO
========================================================= */

.mtz-about__content {
    min-width: 0;
}

.mtz-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--mtz-orange-700);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mtz-about__eyebrow > span {
    width: 29px;
    height: 2px;

    background: var(--mtz-orange-500);
}

.mtz-about__title {
    max-width: 750px;
    margin-bottom: 25px;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.8rem
        );

    line-height: 0.99;
}

.mtz-about__title span {
    display: block;

    color: var(--mtz-blue-600);
}

.mtz-about__text {
    display: grid;
    gap: 13px;

    max-width: 730px;
    margin-bottom: 29px;
}

.mtz-about__text p {
    margin: 0;

    color: var(--mtz-slate);

    font-size: 1rem;
    line-height: 1.78;
}


/* Principios */

.mtz-about__principles {
    display: grid;
    gap: 10px;

    margin-bottom: 30px;
}

.mtz-about__principle {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;

    padding: 15px 17px;

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

    border:
        1px solid rgba(16, 36, 58, 0.09);

    border-radius: 18px;

    transition:
        border-color var(--mtz-transition-normal),
        box-shadow var(--mtz-transition-normal),
        transform var(--mtz-transition-normal);
}

.mtz-about__principle:hover {
    border-color: rgba(47, 111, 159, 0.22);

    box-shadow: var(--mtz-shadow-sm);

    transform: translateX(5px);
}

.mtz-about__principle-icon {
    display: grid;
    place-items: center;

    width: 41px;
    height: 41px;

    color: var(--mtz-orange-600);
    background: var(--mtz-orange-100);

    border-radius: 13px;
}

.mtz-about__principle-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-about__principle h3 {
    margin: 1px 0 5px;

    color: var(--mtz-navy-950);

    font-family: var(--mtz-font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.mtz-about__principle p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.82rem;
    line-height: 1.55;
}




.mtz-about__images {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
}

.mtz-about__image-card {
    position: relative;
    flex: 1 1 calc(25% - 20px);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(15, 31, 64, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--mtz-navy-950);
}

.mtz-about__image-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(15, 31, 64, 0.18);
}

.mtz-about__image-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.mtz-about__card-caption {
    position: absolute;
    inset: auto 5px 5px;
    padding: 10px 8px;
    background: rgb(255, 255, 255);
    color: var(--mtz-navy-950);
    border-radius: 26px;
    box-shadow: 0 22px 45px rgba(15, 31, 64, 0.12);
    backdrop-filter: blur(5px);
}

.mtz-about__card-caption strong {
    display: block;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color:rgb(43, 42, 42);
}

.mtz-about__card-caption p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgb(104, 103, 103);
}








/* Acciones */

.mtz-about__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.mtz-about__actions .mtz-btn svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--mtz-transition-fast);
}

.mtz-about__actions .mtz-btn:hover svg {
    transform: translateX(3px);
}

.mtz-about__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 50px;

    color: var(--mtz-navy-950);
}

.mtz-about__call-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border-radius: 14px;

    box-shadow:
        0 10px 23px rgba(217, 106, 22, 0.22);

    transition:
        transform var(--mtz-transition-fast);
}

.mtz-about__call:hover
.mtz-about__call-icon {
    transform: rotate(-5deg) scale(1.04);
}

.mtz-about__call-icon svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}

.mtz-about__call > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-about__call small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.61rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mtz-about__call strong {
    color: var(--mtz-navy-950);

    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1;
}


/* =========================================================
   FRANJA INFERIOR
========================================================= */

.mtz-about__service-strip {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 24px;

    margin: 48px 20px;
    padding: 32px 36px;
    max-width: calc(100% - 40px);

    color: var(--mtz-navy-950);

    background: #ffffff;
    border: 1px solid rgba(15, 31, 64, 0.08);
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(15, 31, 64, 0.12);
}

.mtz-about__service-strip > div {
    min-width: 0;
}

.mtz-about__service-strip strong {
    display: block;
    margin-bottom: 4px;

    color: var(--mtz-navy-950);

    font-family: var(--mtz-font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.mtz-about__service-strip span {
    display: block;

    color: rgba(15, 31, 64, 0.65);

    font-size: 0.72rem;
    line-height: 1.4;
}

.mtz-about__strip-divider {
    width: 1px;
    height: 38px;

    background: rgba(15, 31, 64, 0.12);
}


/* =========================================================
   ANIMACIÓN ACTIVADA POR JAVASCRIPT
========================================================= */

.mtz-about.is-in-view
.mtz-about__visual {
    animation:
        mtzAboutVisualEntrance
        780ms
        var(--mtz-ease-standard)
        both;
}

.mtz-about.is-in-view
.mtz-about__content {
    animation:
        mtzAboutContentEntrance
        780ms
        90ms
        var(--mtz-ease-standard)
        both;
}

.mtz-about.is-in-view
.mtz-about__service-strip {
    animation:
        mtzAboutStripEntrance
        680ms
        180ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzAboutVisualEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(-28px, 18px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes mtzAboutContentEntrance {

    from {
        opacity: 0;
        transform: translate3d(28px, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzAboutStripEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}









































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   SERVICIOS PRINCIPALES
========================================================= */

.mtz-services-hub {
    position: relative;
    z-index: 1;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(238, 241, 244, 0.94),
            rgba(248, 247, 243, 0.98)
        );

    border-top:
        1px solid rgba(16, 36, 58, 0.08);
}

.mtz-services-hub::before {
    position: absolute;
    top: -210px;
    right: -190px;

    width: 540px;
    height: 540px;

    content: "";

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 111, 159, 0.18),
            transparent 68%
        );
}

.mtz-services-hub::after {
    position: absolute;
    bottom: -240px;
    left: -210px;

    width: 520px;
    height: 520px;

    content: "";

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(241, 132, 37, 0.12),
            transparent 68%
        );
}

.mtz-services-hub__container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.mtz-services-hub__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.92fr);
    align-items: end;
    gap: 60px;

    margin-bottom: 42px;
}

.mtz-services-hub__heading,
.mtz-services-hub__introduction {
    min-width: 0;
}

.mtz-services-hub__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--mtz-orange-700);

    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mtz-services-hub__eyebrow > span {
    width: 29px;
    height: 2px;

    background: var(--mtz-orange-500);
}

.mtz-services-hub__title {
    max-width: 820px;
    margin: 0;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            2.7rem,
            4.8vw,
            5rem
        );

    line-height: 0.97;
}

.mtz-services-hub__title span {
    display: block;

    color: var(--mtz-blue-600);
}

.mtz-services-hub__introduction {
    padding-bottom: 4px;
}

.mtz-services-hub__introduction > p {
    max-width: 590px;
    margin: 0 0 22px;

    color: var(--mtz-slate);

    font-size: 1rem;
    line-height: 1.75;
}

.mtz-services-hub__summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mtz-services-hub__summary > div {
    min-width: 150px;
    padding: 12px 14px;

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

    border:
        1px solid rgba(16, 36, 58, 0.09);

    border-radius: 16px;
}

.mtz-services-hub__summary strong {
    display: block;
    margin-bottom: 3px;

    color: var(--mtz-navy-950);

    font-family: var(--mtz-font-heading);
    font-size: 1.1rem;
    font-weight: 850;
    line-height: 1;
}

.mtz-services-hub__summary span {
    color: var(--mtz-muted);

    font-size: 0.66rem;
    font-weight: 650;
}


/* =========================================================
   FILTROS
========================================================= */

.mtz-services-hub__filter-area {
    margin-bottom: 25px;
    padding: 20px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 24px;

    box-shadow: var(--mtz-shadow-sm);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mtz-services-hub__filter-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 16px;
}

.mtz-services-hub__filter-heading > div > span {
    display: block;
    margin-bottom: 4px;

    color: var(--mtz-navy-950);

    font-family: var(--mtz-font-heading);
    font-size: 1.08rem;
    font-weight: 850;
}

.mtz-services-hub__filter-heading p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.72rem;
    line-height: 1.4;
}

.mtz-services-hub__gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--mtz-navy-900);

    font-size: 0.74rem;
    font-weight: 850;
    white-space: nowrap;

    transition:
        color var(--mtz-transition-fast),
        gap var(--mtz-transition-fast);
}

.mtz-services-hub__gallery-link:hover {
    color: var(--mtz-orange-600);
    gap: 12px;
}

.mtz-services-hub__gallery-link svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-services-hub__filters {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mtz-services-hub__filter {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 48px;
    padding: 9px 10px 9px 15px;

    color: var(--mtz-charcoal);
    background: var(--mtz-gray-100);

    border:
        1px solid rgba(16, 36, 58, 0.08);

    border-radius: 15px;

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;

    cursor: pointer;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        box-shadow var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-services-hub__filter:hover {
    border-color:
        rgba(47, 111, 159, 0.22);

    transform: translateY(-2px);
}

.mtz-services-hub__filter.is-active {
    color: var(--mtz-white);
    background:
        linear-gradient(
            135deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    border-color: var(--mtz-navy-900);

    box-shadow:
        0 11px 25px rgba(11, 22, 36, 0.18);
}

.mtz-services-hub__filter small {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    color: var(--mtz-navy-900);
    background: rgba(47, 111, 159, 0.12);

    border-radius: 9px;

    font-size: 0.59rem;
    font-weight: 900;
}

.mtz-services-hub__filter.is-active small {
    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);
}

.mtz-services-hub__live-region {
    position: absolute;

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

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    border: 0;
}


/* =========================================================
   GRID DE TARJETAS
========================================================= */

.mtz-services-hub__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.mtz-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.86);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 24px;

    box-shadow: var(--mtz-shadow-sm);

    transition:
        transform var(--mtz-transition-normal),
        border-color var(--mtz-transition-normal),
        box-shadow var(--mtz-transition-normal);
}

.mtz-service-card:hover {
    color: var(--mtz-navy-950);

    border-color:
        rgba(47, 111, 159, 0.27);

    box-shadow: var(--mtz-shadow-md);

    transform: translateY(-7px);
}

.mtz-service-card[hidden] {
    display: none !important;
}


/* =========================================================
   IMAGEN
========================================================= */

.mtz-service-card__media {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--mtz-navy-900),
            var(--mtz-blue-600)
        );
}

.mtz-service-card__media::after {
    position: absolute;
    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 22, 36, 0.03),
            rgba(11, 22, 36, 0.1) 54%,
            rgba(11, 22, 36, 0.72) 100%
        );
}

.mtz-service-card__media img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 850ms var(--mtz-ease-standard),
        filter var(--mtz-transition-normal);
}

.mtz-service-card:hover
.mtz-service-card__media img {
    transform: scale(1.055);
}

.mtz-service-card.is-image-missing
.mtz-service-card__media img {
    display: none;
}


/* Número */

.mtz-service-card__number {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 4;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--mtz-white);
    background: rgba(11, 22, 36, 0.72);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 11px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}


/* Fallback */

.mtz-service-card__fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;

    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

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

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 22px;

    transform:
        translate(-50%, -50%)
        rotate(-4deg);
}

.mtz-service-card__fallback svg {
    width: 35px;
    height: 35px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Etiqueta inferior */

.mtz-service-card__photo-label {
    position: absolute;
    right: 13px;
    bottom: 12px;
    z-index: 4;

    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 6px 10px;

    color: var(--mtz-white);
    background: rgba(11, 22, 36, 0.7);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: var(--mtz-radius-pill);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   CUERPO DE TARJETA
========================================================= */

.mtz-service-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 19px;
}

.mtz-service-card__category {
    display: block;
    margin-bottom: 8px;

    color: var(--mtz-orange-700);

    font-size: 0.57rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mtz-service-card__body h3 {
    margin: 0 0 9px;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.65rem
        );

    line-height: 1.02;
}

.mtz-service-card__body p {
    margin: 0 0 18px;

    color: var(--mtz-muted);

    font-size: 0.76rem;
    line-height: 1.55;
}

.mtz-service-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;

    color: var(--mtz-navy-900);

    font-size: 0.68rem;
    font-weight: 850;

    transition:
        color var(--mtz-transition-fast),
        gap var(--mtz-transition-fast);
}

.mtz-service-card:hover
.mtz-service-card__action {
    color: var(--mtz-orange-600);
    gap: 12px;
}

.mtz-service-card__action svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Animación al cambiar filtro */

.mtz-service-card.is-filter-entering {
    animation:
        mtzServiceCardFilterEntrance
        480ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzServiceCardFilterEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(0, 18px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}


/* =========================================================
   SERVICIOS ADICIONALES
========================================================= */

.mtz-services-hub__additional {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 27px;

    margin-top: 28px;
    padding: 20px 22px;

    color: var(--mtz-white);

    background:
        linear-gradient(
            110deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 23px;

    box-shadow: var(--mtz-shadow-md);
}

.mtz-services-hub__additional-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.mtz-services-hub__additional-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 14px;
}

.mtz-services-hub__additional-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-services-hub__additional-heading > div > span {
    display: block;
    margin-bottom: 4px;

    color: var(--mtz-orange-500);

    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mtz-services-hub__additional-heading h3 {
    margin: 0;

    color: var(--mtz-white);

    font-size: 1rem;
}

.mtz-services-hub__additional-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.mtz-services-hub__additional-list span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;
    padding: 6px 11px;

    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.62rem;
    font-weight: 700;
}

.mtz-services-hub__additional-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--mtz-white);

    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.mtz-services-hub__additional-action svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--mtz-transition-fast);
}

.mtz-services-hub__additional-action:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   CTA
========================================================= */

.mtz-services-hub__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 22px;
    padding: 22px 25px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 23px;

    box-shadow: var(--mtz-shadow-sm);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mtz-services-hub__cta > div:first-child {
    min-width: 0;
}

.mtz-services-hub__cta-label {
    display: block;
    margin-bottom: 5px;

    color: var(--mtz-orange-700);

    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mtz-services-hub__cta h3 {
    margin: 0 0 5px;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.9rem
        );
}

.mtz-services-hub__cta p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.73rem;
    line-height: 1.5;
}

.mtz-services-hub__cta-actions {
    display: flex;
    align-items: center;
    gap: 17px;

    flex: 0 0 auto;
}

.mtz-services-hub__cta-actions
.mtz-btn svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-services-hub__cta-phone {
    display: flex;
    flex-direction: column;

    color: var(--mtz-navy-950);
}

.mtz-services-hub__cta-phone small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-services-hub__cta-phone strong {
    font-size: 0.82rem;
    font-weight: 850;
}


/* =========================================================
   ANIMACIONES DE ENTRADA
========================================================= */

.mtz-services-hub.is-in-view
.mtz-services-hub__header {
    animation:
        mtzServicesHubHeaderEntrance
        700ms
        var(--mtz-ease-standard)
        both;
}

.mtz-services-hub.is-in-view
.mtz-services-hub__filter-area {
    animation:
        mtzServicesHubFilterEntrance
        700ms
        70ms
        var(--mtz-ease-standard)
        both;
}

.mtz-services-hub.is-in-view
.mtz-services-hub__grid {
    animation:
        mtzServicesHubGridEntrance
        780ms
        130ms
        var(--mtz-ease-standard)
        both;
}

.mtz-services-hub.is-in-view
.mtz-services-hub__additional,
.mtz-services-hub.is-in-view
.mtz-services-hub__cta {
    animation:
        mtzServicesHubBottomEntrance
        700ms
        190ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzServicesHubHeaderEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzServicesHubFilterEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzServicesHubGridEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 25px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzServicesHubBottomEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}










































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   RESEÑAS DE CLIENTES
========================================================= */

.mtz-reviews {
    position: relative;
    z-index: 1;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(248, 247, 243, 0.97),
            rgba(238, 243, 247, 0.96)
        );

    border-top:
        1px solid rgba(16, 36, 58, 0.08);
}

.mtz-reviews__container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   FONDO DECORATIVO
========================================================= */

.mtz-reviews__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.mtz-reviews__background::before {
    position: absolute;
    inset: 0;

    content: "";

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 45%,
            black
        );
}

.mtz-reviews__glow {
    position: absolute;

    display: block;

    border-radius: 50%;
    filter: blur(12px);
}

.mtz-reviews__glow--blue {
    top: -210px;
    left: -180px;

    width: 530px;
    height: 530px;

    background:
        radial-gradient(
            circle,
            rgba(47, 111, 159, 0.2),
            transparent 67%
        );
}

.mtz-reviews__glow--orange {
    right: -180px;
    bottom: -220px;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(241, 132, 37, 0.15),
            transparent 68%
        );
}


/* Figura de framing */

.mtz-reviews__shape--frame {
    position: absolute;
    top: 13%;
    left: -85px;

    width: 270px;
    height: 390px;

    opacity: 0.13;

    border:
        2px solid var(--mtz-blue-600);

    border-radius: 34px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 50px,
            rgba(47, 111, 159, 0.35) 51px,
            rgba(47, 111, 159, 0.35) 53px
        );

    transform: rotate(-7deg);
}


/* Mosaicos */

.mtz-reviews__shape--tiles {
    position: absolute;
    right: -65px;
    bottom: 16%;

    width: 245px;
    height: 245px;

    opacity: 0.15;

    border:
        2px solid var(--mtz-orange-500);

    border-radius: 28px;

    background-image:
        linear-gradient(
            rgba(217, 106, 22, 0.42) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(217, 106, 22, 0.42) 1px,
            transparent 1px
        );

    background-size: 49px 49px;

    transform: rotate(9deg);
}


/* Viga diagonal */

.mtz-reviews__shape--beam {
    position: absolute;
    top: 42%;
    right: 10%;

    width: 340px;
    height: 3px;

    opacity: 0.3;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mtz-orange-500),
            transparent
        );

    transform: rotate(-31deg);
}


/* Comillas grandes */

.mtz-reviews__quote-mark {
    position: absolute;
    top: 30px;
    right: 5%;

    color: rgba(47, 111, 159, 0.08);

    font-family: Georgia, serif;
    font-size: clamp(12rem, 22vw, 23rem);
    font-weight: 900;
    line-height: 0.8;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.mtz-reviews__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.92fr);
    align-items: end;
    gap: 64px;

    margin-bottom: 51px;
}

.mtz-reviews__heading,
.mtz-reviews__introduction {
    min-width: 0;
}

.mtz-reviews__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--mtz-orange-700);

    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mtz-reviews__eyebrow > span {
    width: 29px;
    height: 2px;

    background: var(--mtz-orange-500);
}

.mtz-reviews__title {
    max-width: 820px;
    margin: 0;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            2.7rem,
            4.8vw,
            5rem
        );

    line-height: 0.97;
}

.mtz-reviews__title span {
    display: block;

    color: var(--mtz-blue-600);
}

.mtz-reviews__introduction > p {
    max-width: 590px;
    margin: 0 0 20px;

    color: var(--mtz-slate);

    font-size: 1rem;
    line-height: 1.75;
}


/* Elfsight badge */

.mtz-reviews__platform {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 13px 9px 9px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.74);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: var(--mtz-radius-pill);

    box-shadow: var(--mtz-shadow-xs);
}

.mtz-reviews__platform-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 50%;
}

.mtz-reviews__platform-icon svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.mtz-reviews__platform > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-reviews__platform small {
    margin-bottom: 2px;

    color: var(--mtz-muted);

    font-size: 0.54rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mtz-reviews__platform strong {
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
}


/* =========================================================
   DISTRIBUCIÓN PRINCIPAL
========================================================= */

.mtz-reviews__layout {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(0, 1.22fr);
    align-items: stretch;
    gap: 27px;
}


/* =========================================================
   PANEL DE MARCA
========================================================= */

.mtz-reviews__brand-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 590px;
    padding: 31px;

    overflow: hidden;

    color: var(--mtz-white);

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(47, 111, 159, 0.4),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 34px;

    box-shadow: var(--mtz-shadow-lg);

    isolation: isolate;
}

.mtz-reviews__brand-grid {
    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.13;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}

.mtz-reviews__brand-panel::before {
    position: absolute;
    right: -115px;
    bottom: -130px;
    z-index: -1;

    width: 320px;
    height: 320px;

    content: "";

    border:
        47px solid rgba(241, 132, 37, 0.08);

    border-radius: 50%;
}

.mtz-reviews__brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mtz-reviews__brand-label {
    display: inline-flex;
    align-items: center;

    min-height: 31px;
    padding: 7px 12px;

    color: var(--mtz-orange-100);
    background: rgba(241, 132, 37, 0.12);

    border:
        1px solid rgba(241, 132, 37, 0.26);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mtz-reviews__brand-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 15px;

    box-shadow:
        0 14px 28px rgba(241, 132, 37, 0.2);
}

.mtz-reviews__brand-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-reviews__brand-copy {
    position: relative;
    z-index: 2;

    margin-top: 74px;
}

.mtz-reviews__brand-mark {
    display: block;
    margin-bottom: 25px;

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

    font-family: var(--mtz-font-heading);
    font-size: clamp(5.8rem, 9vw, 8.8rem);
    font-weight: 900;
    line-height: 0.7;
    letter-spacing: -0.05em;
}

.mtz-reviews__brand-copy h3 {
    max-width: 400px;
    margin: 0 0 17px;

    color: var(--mtz-white);

    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    line-height: 1.04;
}

.mtz-reviews__brand-copy p {
    max-width: 400px;
    margin: 0;

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

    font-size: 0.82rem;
    line-height: 1.65;
}


/* Estrellas */

.mtz-reviews__stars {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 26px;
}

.mtz-reviews__stars span {
    color: var(--mtz-orange-500);

    font-size: 1rem;
    line-height: 1;
}


/* Valores */

.mtz-reviews__values {
    display: grid;
    gap: 7px;

    margin-top: auto;
    padding-top: 32px;
}

.mtz-reviews__values > div {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;

    padding: 12px 13px;

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

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mtz-reviews__values span {
    grid-row: 1 / 3;

    color: var(--mtz-orange-500);

    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.mtz-reviews__values strong {
    color: var(--mtz-white);

    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.1;
}

.mtz-reviews__values small {
    color: rgba(255, 255, 255, 0.42);

    font-size: 0.56rem;
    line-height: 1.35;
}


/* Puerta decorativa */

.mtz-reviews__brand-door {
    position: absolute;
    top: 121px;
    right: -27px;
    z-index: 0;

    width: 128px;
    height: 205px;

    opacity: 0.17;

    border:
        2px solid var(--mtz-orange-500);

    border-radius: 21px 21px 2px 2px;
}

.mtz-reviews__brand-door::before {
    position: absolute;
    top: 51%;
    right: 14px;

    width: 8px;
    height: 8px;

    content: "";

    border-radius: 50%;
    background: var(--mtz-orange-500);
}


/* =========================================================
   COLUMNA DEL WIDGET
========================================================= */

.mtz-reviews__widget-column {
    position: relative;

    min-width: 0;
    padding: 15px 17px 25px;
}

.mtz-reviews__widget-shell {
    position: relative;
    z-index: 2;

    min-height: 590px;
    padding: 19px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 31px;

    box-shadow: var(--mtz-shadow-lg);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* Barra del widget */

.mtz-reviews__widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 60px;
    padding: 8px 11px 15px;

    border-bottom:
        1px solid rgba(16, 36, 58, 0.09);
}

.mtz-reviews__widget-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mtz-reviews__widget-icon {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 13px;
}

.mtz-reviews__widget-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-reviews__widget-heading > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-reviews__widget-heading small {
    margin-bottom: 3px;

    color: var(--mtz-orange-700);

    font-size: 0.53rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-reviews__widget-heading strong {
    color: var(--mtz-navy-950);

    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1;
}

.mtz-reviews__live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--mtz-muted);

    font-size: 0.61rem;
    font-weight: 750;
}

.mtz-reviews__live-status > span {
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #42B883;

    box-shadow:
        0 0 0 4px rgba(66, 184, 131, 0.12);
}


/* Área Elfsight */

.mtz-reviews__widget-area {
    position: relative;

    min-height: 430px;
    padding: 17px 2px;

    overflow: visible;
}

.mtz-reviews__elfsight {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 390px;

    opacity: 0;

    transition:
        opacity 450ms ease;
}

.mtz-reviews.is-widget-ready
.mtz-reviews__elfsight {
    opacity: 1;
}


/*
 * Elfsight suele crear wrappers o iframes.
 * No se usa overflow:hidden para evitar recortar
 * sombras, popups o controles del widget.
 */

.mtz-reviews__elfsight > div {
    width: 100%;
}


/* Loader */

.mtz-reviews__loader {
    position: absolute;
    inset: 18px 2px;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.mtz-reviews.is-widget-ready
.mtz-reviews__loader {
    visibility: hidden;

    opacity: 0;
}

.mtz-reviews__loader-card {
    min-height: 260px;
    padding: 18px;

    background: var(--mtz-gray-100);

    border:
        1px solid rgba(16, 36, 58, 0.06);

    border-radius: 18px;

    overflow: hidden;
}

.mtz-reviews__loader-card span {
    position: relative;

    display: block;

    overflow: hidden;

    background: var(--mtz-gray-200);
    border-radius: var(--mtz-radius-pill);
}

.mtz-reviews__loader-card span::after {
    position: absolute;
    inset: 0;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.82),
            transparent
        );

    transform: translateX(-100%);

    animation:
        mtzReviewsLoading
        1.6s
        ease-in-out
        infinite;
}

.mtz-reviews__loader-card span:nth-child(1) {
    width: 44%;
    height: 13px;
    margin-bottom: 22px;
}

.mtz-reviews__loader-card span:nth-child(2) {
    width: 100%;
    height: 10px;
    margin-bottom: 10px;
}

.mtz-reviews__loader-card span:nth-child(3) {
    width: 72%;
    height: 10px;
}

@keyframes mtzReviewsLoading {

    to {
        transform: translateX(100%);
    }
}


/* Fallback */

.mtz-reviews__fallback-message {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 4;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    width: min(90%, 460px);
    padding: 18px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-100);

    border:
        1px solid rgba(217, 106, 22, 0.2);

    border-radius: 18px;

    transform: translate(-50%, -50%);
}

.mtz-reviews__fallback-message[hidden] {
    display: none;
}

.mtz-reviews__fallback-icon {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-orange-600);

    border-radius: 13px;
}

.mtz-reviews__fallback-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-reviews__fallback-message strong {
    display: block;
    margin-bottom: 5px;

    color: var(--mtz-navy-950);

    font-size: 0.84rem;
}

.mtz-reviews__fallback-message p {
    margin: 0;

    color: var(--mtz-slate);

    font-size: 0.72rem;
    line-height: 1.5;
}


/* Footer widget */

.mtz-reviews__widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 14px 10px 2px;

    border-top:
        1px solid rgba(16, 36, 58, 0.08);
}

.mtz-reviews__widget-footer p {
    max-width: 470px;
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.61rem;
    line-height: 1.45;
}

.mtz-reviews__widget-footer > span {
    color: var(--mtz-orange-700);

    font-size: 0.58rem;
    font-weight: 850;
    white-space: nowrap;
}


/* =========================================================
   TARJETAS FLOTANTES
========================================================= */

.mtz-reviews__floating-card {
    position: absolute;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.94);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 16px;

    box-shadow: var(--mtz-shadow-md);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mtz-reviews__floating-card > span:first-child {
    color: var(--mtz-orange-500);

    font-size: 1.2rem;
    line-height: 1;
}

.mtz-reviews__floating-card > div {
    display: flex;
    flex-direction: column;
}

.mtz-reviews__floating-card small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.51rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-reviews__floating-card strong {
    color: var(--mtz-navy-950);

    font-size: 0.69rem;
    font-weight: 850;
    line-height: 1;
}

.mtz-reviews__floating-card--top {
    top: 0;
    right: 38px;
}

.mtz-reviews__floating-card--bottom {
    right: 0;
    bottom: 0;
}

.mtz-reviews__floating-check {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    color: var(--mtz-white) !important;
    background: var(--mtz-orange-500);

    border-radius: 10px;
}

.mtz-reviews__floating-check svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   FRANJA DE CONFIANZA
========================================================= */

.mtz-reviews__trust-strip {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 22px;

    margin-top: 42px;
    padding: 20px 23px;

    color: var(--mtz-white);

    background:
        linear-gradient(
            110deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 22px;

    box-shadow: var(--mtz-shadow-md);
}

.mtz-reviews__trust-item {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

.mtz-reviews__trust-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 13px;
}

.mtz-reviews__trust-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-reviews__trust-item > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-reviews__trust-item strong {
    margin-bottom: 3px;

    color: var(--mtz-white);

    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.2;
}

.mtz-reviews__trust-item small {
    color: rgba(255, 255, 255, 0.46);

    font-size: 0.57rem;
    line-height: 1.35;
}

.mtz-reviews__trust-divider {
    width: 1px;
    height: 39px;

    background: rgba(255, 255, 255, 0.13);
}


/* =========================================================
   CTA FINAL
========================================================= */

.mtz-reviews__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    margin-top: 22px;
    padding: 22px 25px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 22px;

    box-shadow: var(--mtz-shadow-sm);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mtz-reviews__cta-copy {
    min-width: 0;
}

.mtz-reviews__cta-label {
    display: block;
    margin-bottom: 5px;

    color: var(--mtz-orange-700);

    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mtz-reviews__cta h3 {
    margin: 0 0 5px;

    color: var(--mtz-navy-950);

    font-size: clamp(1.35rem, 2.3vw, 1.95rem);
}

.mtz-reviews__cta p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.72rem;
    line-height: 1.45;
}

.mtz-reviews__cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    flex: 0 0 auto;
}

.mtz-reviews__cta-actions
.mtz-btn svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-reviews__phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--mtz-navy-950);
}

.mtz-reviews__phone-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 12px;
}

.mtz-reviews__phone-icon svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.mtz-reviews__phone > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-reviews__phone small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-reviews__phone strong {
    font-size: 0.78rem;
    font-weight: 850;
}


/* =========================================================
   ANIMACIONES DE ENTRADA
========================================================= */

.mtz-reviews.is-in-view
.mtz-reviews__header {
    animation:
        mtzReviewsHeaderEntrance
        700ms
        var(--mtz-ease-standard)
        both;
}

.mtz-reviews.is-in-view
.mtz-reviews__brand-panel {
    animation:
        mtzReviewsPanelEntrance
        780ms
        80ms
        var(--mtz-ease-standard)
        both;
}

.mtz-reviews.is-in-view
.mtz-reviews__widget-column {
    animation:
        mtzReviewsWidgetEntrance
        780ms
        130ms
        var(--mtz-ease-standard)
        both;
}

.mtz-reviews.is-in-view
.mtz-reviews__trust-strip,
.mtz-reviews.is-in-view
.mtz-reviews__cta {
    animation:
        mtzReviewsBottomEntrance
        680ms
        190ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzReviewsHeaderEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzReviewsPanelEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(-25px, 17px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes mtzReviewsWidgetEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(25px, 17px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes mtzReviewsBottomEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}









































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   ÁREA DE SERVICIO CON LEAFLET
========================================================= */

.mtz-service-area {
    position: relative;
    z-index: 1;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(238, 243, 247, 0.97),
            rgba(248, 247, 243, 0.98)
        );

    border-top:
        1px solid rgba(16, 36, 58, 0.08);
}

.mtz-service-area__container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   FONDO DECORATIVO
========================================================= */

.mtz-service-area__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.mtz-service-area__glow {
    position: absolute;
    top: -230px;
    right: -180px;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 111, 159, 0.2),
            transparent 68%
        );
}

.mtz-service-area__grid {
    position: absolute;
    inset: 0;

    opacity: 0.24;

    background-image:
        linear-gradient(
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 36, 58, 0.045) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 46%,
            black
        );
}

.mtz-service-area__route {
    position: absolute;
    bottom: 9%;
    left: -85px;

    width: 430px;
    height: 210px;

    opacity: 0.17;

    border:
        3px dashed var(--mtz-orange-500);

    border-right-color: transparent;
    border-bottom-color: transparent;

    border-radius: 50%;

    transform: rotate(16deg);
}

.mtz-service-area__compass {
    position: absolute;
    top: 17%;
    right: -115px;

    width: 260px;
    height: 260px;

    opacity: 0.11;

    border:
        3px solid var(--mtz-blue-600);

    border-radius: 50%;
}

.mtz-service-area__compass::before,
.mtz-service-area__compass::after {
    position: absolute;
    top: 50%;
    left: 50%;

    content: "";

    background: var(--mtz-blue-600);

    transform:
        translate(-50%, -50%)
        rotate(35deg);
}

.mtz-service-area__compass::before {
    width: 2px;
    height: 125%;
}

.mtz-service-area__compass::after {
    width: 125%;
    height: 2px;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.mtz-service-area__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.92fr);
    align-items: end;
    gap: 62px;

    margin-bottom: 49px;
}

.mtz-service-area__heading,
.mtz-service-area__introduction {
    min-width: 0;
}

.mtz-service-area__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--mtz-orange-700);

    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mtz-service-area__eyebrow > span {
    width: 29px;
    height: 2px;

    background: var(--mtz-orange-500);
}

.mtz-service-area__title {
    max-width: 830px;
    margin: 0;

    color: var(--mtz-navy-950);

    font-size:
        clamp(
            2.7rem,
            4.8vw,
            5rem
        );

    line-height: 0.97;
}

.mtz-service-area__title span {
    display: block;

    color: var(--mtz-blue-600);
}

.mtz-service-area__introduction > p {
    max-width: 590px;
    margin: 0 0 20px;

    color: var(--mtz-slate);

    font-size: 1rem;
    line-height: 1.75;
}

.mtz-service-area__coverage-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 14px 9px 9px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: var(--mtz-radius-pill);

    box-shadow: var(--mtz-shadow-xs);
}

.mtz-service-area__coverage-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border-radius: 50%;
}

.mtz-service-area__coverage-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__coverage-summary > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-service-area__coverage-summary small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-service-area__coverage-summary strong {
    color: var(--mtz-navy-950);

    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
}


/* =========================================================
   DISTRIBUCIÓN
========================================================= */

.mtz-service-area__layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(0, 1.22fr);
    align-items: stretch;
    gap: 28px;
}


/* =========================================================
   PANEL DE INFORMACIÓN
========================================================= */

.mtz-service-area__panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 640px;
    padding: 29px;

    overflow: hidden;

    color: var(--mtz-white);

    background:
        radial-gradient(
            circle at 91% 8%,
            rgba(47, 111, 159, 0.42),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--mtz-navy-950),
            var(--mtz-navy-800)
        );

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 34px;

    box-shadow: var(--mtz-shadow-lg);

    isolation: isolate;
}

.mtz-service-area__panel-grid {
    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.13;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}

.mtz-service-area__panel::before {
    position: absolute;
    right: -110px;
    bottom: -120px;
    z-index: -1;

    width: 300px;
    height: 300px;

    content: "";

    border:
        46px solid rgba(241, 132, 37, 0.08);

    border-radius: 50%;
}

.mtz-service-area__panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mtz-service-area__panel-label {
    display: inline-flex;
    align-items: center;

    min-height: 31px;
    padding: 7px 12px;

    color: var(--mtz-orange-100);
    background: rgba(241, 132, 37, 0.13);

    border:
        1px solid rgba(241, 132, 37, 0.27);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mtz-service-area__panel-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 15px;
}

.mtz-service-area__panel-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__panel-content {
    margin-top: 53px;
}

.mtz-service-area__panel-mark {
    display: block;
    margin-bottom: 23px;

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

    font-family: var(--mtz-font-heading);
    font-size: clamp(6rem, 9vw, 8.5rem);
    font-weight: 900;
    line-height: 0.7;
}

.mtz-service-area__panel-content h3 {
    max-width: 390px;
    margin: 0 0 15px;

    color: var(--mtz-white);

    font-size: clamp(1.75rem, 2.8vw, 2.6rem);
    line-height: 1.03;
}

.mtz-service-area__panel-content p {
    max-width: 410px;
    margin: 0;

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

    font-size: 0.8rem;
    line-height: 1.65;
}


/* =========================================================
   LEYENDA
========================================================= */

.mtz-service-area__legend {
    display: grid;
    gap: 7px;

    margin-top: 25px;
}

.mtz-service-area__legend > div {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 10px 12px;

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

    border:
        1px solid rgba(255, 255, 255, 0.085);

    border-radius: 14px;
}

.mtz-service-area__legend-symbol {
    display: block;

    width: 26px;
    height: 26px;

    flex: 0 0 auto;
}

.mtz-service-area__legend-symbol--center {
    border:
        7px solid var(--mtz-orange-500);

    border-radius: 50%;

    background: var(--mtz-white);

    box-shadow:
        0 0 0 4px rgba(241, 132, 37, 0.15);
}

.mtz-service-area__legend-symbol--coverage {
    border:
        2px dashed var(--mtz-orange-500);

    border-radius: 50%;

    background: rgba(241, 132, 37, 0.16);
}

.mtz-service-area__legend-symbol--city {
    position: relative;

    width: 14px;
    height: 14px;
    margin-inline: 6px;

    border-radius: 50%;
    background: var(--mtz-blue-500);

    box-shadow:
        0 0 0 5px rgba(66, 132, 181, 0.15);
}

.mtz-service-area__legend > div > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-service-area__legend strong {
    margin-bottom: 2px;

    color: var(--mtz-white);

    font-size: 0.68rem;
    font-weight: 850;
}

.mtz-service-area__legend small {
    color: rgba(255, 255, 255, 0.42);

    font-size: 0.54rem;
}


/* =========================================================
   BOTONES DE CIUDADES
========================================================= */

.mtz-service-area__cities {
    margin-top: 24px;
}

.mtz-service-area__cities-heading {
    margin-bottom: 10px;
}

.mtz-service-area__cities-heading span {
    display: block;
    margin-bottom: 3px;

    color: var(--mtz-orange-500);

    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-service-area__cities-heading p {
    margin: 0;

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

    font-size: 0.6rem;
}

.mtz-service-area__city-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.mtz-service-area__city {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;

    min-height: 48px;
    padding: 9px 11px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    cursor: pointer;

    transition:
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-service-area__city:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(241, 132, 37, 0.26);

    transform: translateY(-2px);
}

.mtz-service-area__city.is-active {
    background: rgba(241, 132, 37, 0.14);
    border-color: rgba(241, 132, 37, 0.4);
}

.mtz-service-area__city span {
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.1;
}

.mtz-service-area__city small {
    color: rgba(255, 255, 255, 0.4);

    font-size: 0.5rem;
    font-weight: 650;
}


/* Nota inferior */

.mtz-service-area__panel-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: auto;
    padding-top: 23px;
}

.mtz-service-area__panel-note-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 10px;
}

.mtz-service-area__panel-note-icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__panel-note p {
    margin: 2px 0 0;

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

    font-size: 0.61rem;
    line-height: 1.5;
}


/* =========================================================
   COLUMNA DEL MAPA
========================================================= */

.mtz-service-area__map-column {
    min-width: 0;
}

.mtz-service-area__map-shell {
    position: relative;

    min-height: 640px;
    padding: 17px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 34px;

    box-shadow: var(--mtz-shadow-lg);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mtz-service-area__map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 62px;
    padding: 8px 10px 15px;

    border-bottom:
        1px solid rgba(16, 36, 58, 0.09);
}

.mtz-service-area__map-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mtz-service-area__map-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 13px;
}

.mtz-service-area__map-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__map-heading > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-service-area__map-heading small {
    margin-bottom: 3px;

    color: var(--mtz-orange-700);

    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-service-area__map-heading strong {
    color: var(--mtz-navy-950);

    font-size: 0.82rem;
    font-weight: 850;
}

.mtz-service-area__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 38px;
    padding: 7px 12px;

    color: var(--mtz-navy-900);
    background: var(--mtz-gray-100);

    border:
        1px solid rgba(16, 36, 58, 0.09);

    border-radius: 12px;

    font-size: 0.64rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-service-area__reset:hover {
    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    transform: translateY(-2px);
}

.mtz-service-area__reset svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.mtz-service-area__map {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 538px;
    margin-top: 15px;

    overflow: hidden;

    background: var(--mtz-gray-200);

    border-radius: 24px;

    outline: none;
}

.mtz-service-area__map:focus-visible {
    box-shadow:
        0 0 0 4px rgba(241, 132, 37, 0.25);
}


/* Leaflet */

.mtz-service-area__map.leaflet-container {
    font-family: var(--mtz-font-body);
}

.mtz-service-area__map
.leaflet-control-zoom {
    overflow: hidden;

    border: 0;

    border-radius: 13px;

    box-shadow:
        0 10px 24px rgba(11, 22, 36, 0.18);
}

.mtz-service-area__map
.leaflet-control-zoom a {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid rgba(16, 36, 58, 0.08);

    font-family: var(--mtz-font-body);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.mtz-service-area__map
.leaflet-control-zoom a:hover {
    color: var(--mtz-white);
    background: var(--mtz-orange-500);
}

.mtz-service-area__map
.leaflet-control-scale-line {
    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.88);

    border-color: var(--mtz-navy-900);

    font-size: 0.56rem;
    font-weight: 750;
}

.mtz-service-area__map
.leaflet-control-attribution {
    color: var(--mtz-muted);
    background: rgba(255, 255, 255, 0.88);

    font-size: 0.52rem;
}

.mtz-service-area__map
.leaflet-control-attribution a {
    color: var(--mtz-blue-600);
}


/* Popup */

.mtz-service-area__map
.leaflet-popup-content-wrapper {
    padding: 0;

    overflow: hidden;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.97);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 17px;

    box-shadow:
        0 18px 45px rgba(11, 22, 36, 0.2);
}

.mtz-service-area__map
.leaflet-popup-content {
    width: 210px !important;
    margin: 0;
}

.mtz-service-area__map
.leaflet-popup-tip {
    background: var(--mtz-white);
}

.mtz-map-popup {
    padding: 15px;
}

.mtz-map-popup__eyebrow {
    display: block;
    margin-bottom: 5px;

    color: var(--mtz-orange-700);

    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-map-popup strong {
    display: block;
    margin-bottom: 6px;

    color: var(--mtz-navy-950);

    font-family: var(--mtz-font-heading);
    font-size: 1rem;
    line-height: 1.1;
}

.mtz-map-popup p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.66rem;
    line-height: 1.45;
}


/* =========================================================
   MARCADORES PERSONALIZADOS
========================================================= */

.mtz-map-marker {
    position: relative;

    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
}

.mtz-map-marker__pulse {
    position: absolute;
    inset: -8px;

    border:
        1px solid rgba(241, 132, 37, 0.55);

    border-radius: 50%;

    animation:
        mtzMapMarkerPulse
        2.2s
        ease-out
        infinite;
}

.mtz-map-marker__center {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    color: var(--mtz-white);
    background: var(--mtz-orange-500);

    border:
        4px solid var(--mtz-white);

    border-radius: 50%;

    box-shadow:
        0 8px 20px rgba(11, 22, 36, 0.25);
}

.mtz-map-marker--city
.mtz-map-marker__center {
    width: 17px;
    height: 17px;

    background: var(--mtz-blue-600);

    border-width: 3px;
}

.mtz-map-marker--city
.mtz-map-marker__pulse {
    display: none;
}

@keyframes mtzMapMarkerPulse {

    0% {
        opacity: 0.8;
        transform: scale(0.65);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}


/* =========================================================
   LOADER Y ERROR
========================================================= */

.mtz-service-area__map-loader {
    position: absolute;
    inset:
        95px
        17px
        17px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;

    color: var(--mtz-navy-900);
    background:
        linear-gradient(
            145deg,
            var(--mtz-gray-100),
            var(--mtz-blue-100)
        );

    border-radius: 24px;

    font-size: 0.68rem;
    font-weight: 800;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.mtz-service-area.is-map-ready
.mtz-service-area__map-loader {
    visibility: hidden;

    opacity: 0;
}

.mtz-service-area__map-loader-ring {
    width: 42px;
    height: 42px;

    border:
        4px solid rgba(47, 111, 159, 0.16);

    border-top-color: var(--mtz-orange-500);

    border-radius: 50%;

    animation:
        mtzServiceMapLoading
        900ms
        linear
        infinite;
}

@keyframes mtzServiceMapLoading {

    to {
        transform: rotate(360deg);
    }
}

.mtz-service-area__map-error {
    position: absolute;
    inset:
        95px
        17px
        17px;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 25px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-100);

    border-radius: 24px;
}

.mtz-service-area__map-error[hidden] {
    display: none;
}

.mtz-service-area__map-error-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-orange-600);

    border-radius: 14px;
}

.mtz-service-area__map-error-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__map-error strong {
    display: block;
    margin-bottom: 5px;

    font-size: 0.84rem;
}

.mtz-service-area__map-error p {
    max-width: 360px;
    margin: 0;

    color: var(--mtz-slate);

    font-size: 0.69rem;
    line-height: 1.5;
}


/* Badge flotante */

.mtz-service-area__map-badge {
    position: absolute;
    top: 106px;
    left: 29px;
    z-index: 450;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;

    color: var(--mtz-navy-950);
    background: rgba(255, 255, 255, 0.92);

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 15px;

    box-shadow: var(--mtz-shadow-sm);

    pointer-events: none;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mtz-service-area__map-badge-dot {
    width: 11px;
    height: 11px;

    border:
        2px dashed var(--mtz-orange-500);

    border-radius: 50%;
    background: rgba(241, 132, 37, 0.16);
}

.mtz-service-area__map-badge > span:last-child {
    display: flex;
    flex-direction: column;
}

.mtz-service-area__map-badge small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.49rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-service-area__map-badge strong {
    font-size: 0.66rem;
    font-weight: 850;
}


/* Instrucciones */

.mtz-service-area__map-instructions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;

    padding-top: 13px;

    color: var(--mtz-muted);

    font-size: 0.58rem;
    font-weight: 700;
}

.mtz-service-area__map-instructions > span:nth-child(even) {
    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--mtz-orange-500);
}


/* =========================================================
   CTA
========================================================= */

.mtz-service-area__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    margin-top: 29px;
    padding: 22px 25px;

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

    border:
        1px solid rgba(16, 36, 58, 0.1);

    border-radius: 23px;

    box-shadow: var(--mtz-shadow-sm);
}

.mtz-service-area__cta-content {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}

.mtz-service-area__cta-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    color: var(--mtz-white);
    background: var(--mtz-navy-900);

    border-radius: 15px;
}

.mtz-service-area__cta-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__cta-content > div > span {
    display: block;
    margin-bottom: 4px;

    color: var(--mtz-orange-700);

    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mtz-service-area__cta h3 {
    margin: 0 0 4px;

    color: var(--mtz-navy-950);

    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
}

.mtz-service-area__cta p {
    margin: 0;

    color: var(--mtz-muted);

    font-size: 0.69rem;
    line-height: 1.45;
}

.mtz-service-area__cta-actions {
    display: flex;
    align-items: center;
    gap: 17px;

    flex: 0 0 auto;
}

.mtz-service-area__cta-actions
.mtz-btn svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-service-area__cta-phone {
    display: flex;
    flex-direction: column;

    color: var(--mtz-navy-950);
}

.mtz-service-area__cta-phone small {
    margin-bottom: 3px;

    color: var(--mtz-muted);

    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-service-area__cta-phone strong {
    font-size: 0.79rem;
    font-weight: 850;
}


/* =========================================================
   ANIMACIONES
========================================================= */

.mtz-service-area.is-in-view
.mtz-service-area__header {
    animation:
        mtzServiceAreaHeaderEntrance
        700ms
        var(--mtz-ease-standard)
        both;
}

.mtz-service-area.is-in-view
.mtz-service-area__panel {
    animation:
        mtzServiceAreaPanelEntrance
        780ms
        80ms
        var(--mtz-ease-standard)
        both;
}

.mtz-service-area.is-in-view
.mtz-service-area__map-column {
    animation:
        mtzServiceAreaMapEntrance
        780ms
        130ms
        var(--mtz-ease-standard)
        both;
}

.mtz-service-area.is-in-view
.mtz-service-area__cta {
    animation:
        mtzServiceAreaCtaEntrance
        680ms
        190ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzServiceAreaHeaderEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzServiceAreaPanelEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(-25px, 18px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes mtzServiceAreaMapEntrance {

    from {
        opacity: 0;
        transform:
            translate3d(25px, 18px, 0)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes mtzServiceAreaCtaEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}










































/* =========================================================
   MTZ CONSTRUCTION & REMODELING LLC
   FOOTER
========================================================= */

.mtz-footer {
    position: relative;
    z-index: 1;

    overflow: hidden;

    color: var(--mtz-white);

    background:
        radial-gradient(
            circle at 8% 14%,
            rgba(47, 111, 159, 0.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(241, 132, 37, 0.13),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--mtz-navy-950),
            #0D2236 58%,
            var(--mtz-navy-900)
        );

    border-top:
        4px solid var(--mtz-orange-500);

    isolation: isolate;
}

.mtz-footer__container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   DECORACIÓN
========================================================= */

.mtz-footer__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.mtz-footer__grid {
    position: absolute;
    inset: 0;

    opacity: 0.1;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 55%,
            black
        );
}

.mtz-footer__glow {
    position: absolute;

    display: block;

    border-radius: 50%;
    filter: blur(15px);
}

.mtz-footer__glow--blue {
    top: -210px;
    left: -180px;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(66, 132, 181, 0.25),
            transparent 68%
        );
}

.mtz-footer__glow--orange {
    right: -200px;
    bottom: -230px;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(241, 132, 37, 0.18),
            transparent 68%
        );
}

.mtz-footer__frame {
    position: absolute;
    top: 17%;
    right: -85px;

    width: 270px;
    height: 390px;

    opacity: 0.1;

    border:
        2px solid var(--mtz-orange-500);

    border-radius: 34px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 52px,
            rgba(241, 132, 37, 0.3) 53px,
            rgba(241, 132, 37, 0.3) 55px
        );

    transform: rotate(8deg);
}

.mtz-footer__monogram {
    position: absolute;
    bottom: 75px;
    left: 3%;

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

    font-family: var(--mtz-font-heading);
    font-size: clamp(12rem, 24vw, 28rem);
    font-weight: 900;
    line-height: 0.7;
    letter-spacing: -0.07em;
}


/* =========================================================
   DISTRIBUCIÓN PRINCIPAL
========================================================= */

.mtz-footer__main {
    display: grid;
    grid-template-columns:
        minmax(290px, 1.25fr)
        minmax(175px, 0.7fr)
        minmax(250px, 0.95fr)
        minmax(230px, 0.9fr);
    gap: clamp(35px, 4vw, 68px);

    padding-top: clamp(72px, 8vw, 110px);
    padding-bottom: clamp(55px, 6vw, 82px);
}


/* =========================================================
   INFORMACIÓN DE LA MARCA
========================================================= */

.mtz-footer__brand {
    min-width: 0;
}

.mtz-footer__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 23px;

    color: var(--mtz-white);
}

.mtz-footer__brand-mark {
    display: grid;
    place-items: center;

    width: 69px;
    height: 69px;

    color: var(--mtz-navy-950);
    background:
        linear-gradient(
            145deg,
            var(--mtz-orange-500),
            var(--mtz-orange-600)
        );

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 21px;

    box-shadow:
        0 18px 40px rgba(241, 132, 37, 0.22);

    font-family: var(--mtz-font-heading);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.mtz-footer__brand-name {
    display: flex;
    flex-direction: column;

    max-width: 205px;
}

.mtz-footer__brand-name strong {
    color: var(--mtz-white);

    font-family: var(--mtz-font-heading);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.05;
}

.mtz-footer__brand-name small {
    margin-top: 4px;

    color: var(--mtz-orange-500);

    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.mtz-footer__description {
    max-width: 410px;
    margin: 0 0 22px;

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

    font-size: 0.82rem;
    line-height: 1.72;
}


/* Badges */

.mtz-footer__business-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 26px;
}

.mtz-footer__business-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 30px;
    padding: 6px 10px;

    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: var(--mtz-radius-pill);

    font-size: 0.57rem;
    font-weight: 750;
}

.mtz-footer__business-badges svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: var(--mtz-orange-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Contactos */

.mtz-footer__contact-list {
    display: grid;
    gap: 8px;

    max-width: 430px;
}

.mtz-footer__contact {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    padding: 9px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius: 15px;

    transition:
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

a.mtz-footer__contact:hover {
    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(241, 132, 37, 0.25);

    transform: translateX(4px);
}

.mtz-footer__contact-icon {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    flex: 0 0 auto;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 11px;
}

.mtz-footer__contact-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-footer__contact:first-child
.mtz-footer__contact-icon svg {
    fill: currentColor;
    stroke: none;
}

.mtz-footer__contact > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-footer__contact small {
    margin-bottom: 3px;

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

    font-size: 0.49rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mtz-footer__contact strong {
    overflow: hidden;

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

    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
}


/* =========================================================
   TÍTULOS DE COLUMNAS
========================================================= */

.mtz-footer__column {
    min-width: 0;
}

.mtz-footer__column-heading {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 52px;
    margin-bottom: 24px;
    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.mtz-footer__column-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    color: var(--mtz-orange-500);
    background: rgba(241, 132, 37, 0.1);

    border:
        1px solid rgba(241, 132, 37, 0.19);

    border-radius: 11px;

    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.mtz-footer__column-heading > div {
    display: flex;
    flex-direction: column;
}

.mtz-footer__column-heading > div > span {
    margin-bottom: 4px;

    color: var(--mtz-orange-500);

    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mtz-footer__column-heading h2 {
    margin: 0;

    color: var(--mtz-white);

    font-size: 1.05rem;
    line-height: 1;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.mtz-footer__links {
    display: grid;
    gap: 4px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.mtz-footer__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    min-height: 41px;
    padding: 8px 4px;

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

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

    font-size: 0.7rem;
    font-weight: 700;

    transition:
        color var(--mtz-transition-fast),
        padding-left var(--mtz-transition-fast);
}

.mtz-footer__links a:hover {
    padding-left: 7px;

    color: var(--mtz-white);
}

.mtz-footer__links svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: var(--mtz-orange-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-footer__links a:hover svg {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   HORARIOS
========================================================= */

.mtz-footer__business-status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;
    padding: 11px 12px;

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

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;
}

.mtz-footer__status-indicator {
    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;
    background: var(--mtz-gray-300);

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.05);
}

.mtz-footer__business-status.is-open
.mtz-footer__status-indicator {
    background: #59D69A;

    box-shadow:
        0 0 0 5px rgba(89, 214, 154, 0.12);
}

.mtz-footer__business-status.is-closed
.mtz-footer__status-indicator {
    background: var(--mtz-orange-500);

    box-shadow:
        0 0 0 5px rgba(241, 132, 37, 0.12);
}

.mtz-footer__business-status > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-footer__business-status small {
    margin-bottom: 3px;

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

    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mtz-footer__business-status strong {
    color: rgba(255, 255, 255, 0.82);

    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1.2;
}


/* Tabla de horarios */

.mtz-footer__schedule {
    display: grid;
    gap: 3px;
}

.mtz-footer__schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 35px;
    padding: 7px 9px;

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

    border-radius: 10px;

    font-size: 0.61rem;

    transition:
        color var(--mtz-transition-fast),
        background-color var(--mtz-transition-fast);
}

.mtz-footer__schedule-row span {
    font-weight: 700;
}

.mtz-footer__schedule-row strong {
    color: rgba(255, 255, 255, 0.72);

    font-size: 0.58rem;
    font-weight: 800;
    white-space: nowrap;
}

.mtz-footer__schedule-row.is-today {
    color: var(--mtz-white);
    background: rgba(241, 132, 37, 0.12);

    border:
        1px solid rgba(241, 132, 37, 0.2);
}

.mtz-footer__schedule-row.is-today strong {
    color: var(--mtz-orange-500);
}

.mtz-footer__schedule-row--closed strong {
    color: rgba(241, 132, 37, 0.78);
}

.mtz-footer__hours-note {
    margin: 14px 0 0;

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

    font-size: 0.55rem;
    line-height: 1.5;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.mtz-footer__social-description {
    margin: 0 0 17px;

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

    font-size: 0.69rem;
    line-height: 1.6;
}

.mtz-footer__social-links {
    display: grid;
    gap: 7px;
}

.mtz-footer__social-link {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 10px;

    min-height: 55px;
    padding: 8px 10px;

    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius: 14px;

    transition:
        background-color var(--mtz-transition-fast),
        border-color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-footer__social-link:hover {
    color: var(--mtz-white);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(241, 132, 37, 0.24);

    transform: translateX(4px);
}

.mtz-footer__social-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    color: var(--mtz-navy-950);
    background: var(--mtz-orange-500);

    border-radius: 11px;
}

.mtz-footer__social-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtz-footer__social-link:nth-child(2)
.mtz-footer__social-icon svg {
    fill: currentColor;
    stroke: none;
}

.mtz-footer__social-fill {
    fill: currentColor;
    stroke: none;
}

.mtz-footer__social-link > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.mtz-footer__social-link strong {
    margin-bottom: 3px;

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

    font-size: 0.68rem;
    font-weight: 850;
}

.mtz-footer__social-link small {
    color: rgba(255, 255, 255, 0.35);

    font-size: 0.51rem;
}

.mtz-footer__social-arrow {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: var(--mtz-orange-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.55;

    transition:
        opacity var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-footer__social-link:hover
.mtz-footer__social-arrow {
    opacity: 1;
    transform: translateX(3px);
}


/* Estimate */

.mtz-footer__estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 16px;
    padding: 13px 14px;

    color: var(--mtz-navy-950);
    background:
        linear-gradient(
            135deg,
            var(--mtz-orange-500),
            var(--mtz-orange-600)
        );

    border-radius: 16px;

    box-shadow:
        0 15px 34px rgba(217, 106, 22, 0.18);

    transition:
        color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast),
        box-shadow var(--mtz-transition-fast);
}

.mtz-footer__estimate:hover {
    color: var(--mtz-navy-950);

    box-shadow:
        0 19px 40px rgba(217, 106, 22, 0.27);

    transform: translateY(-3px);
}

.mtz-footer__estimate > span {
    display: flex;
    flex-direction: column;
}

.mtz-footer__estimate small {
    margin-bottom: 3px;

    color: rgba(11, 22, 36, 0.64);

    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mtz-footer__estimate strong {
    font-size: 0.69rem;
    font-weight: 900;
}

.mtz-footer__estimate > svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--mtz-transition-fast);
}

.mtz-footer__estimate:hover > svg {
    transform: translateX(4px);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.mtz-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 78px;
    padding: 19px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}

.mtz-footer__copyright {
    margin: 0;

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

    font-size: 0.61rem;
    line-height: 1.5;
}

.mtz-footer__bottom-divider {
    display: none;
}

.mtz-footer__developer {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

    font-size: 0.61rem;

    transition:
        color var(--mtz-transition-fast),
        transform var(--mtz-transition-fast);
}

.mtz-footer__developer:hover {
    color: var(--mtz-white);

    transform: translateY(-2px);
}

.mtz-footer__developer strong {
    color: var(--mtz-orange-500);
    font-weight: 850;
}

.mtz-footer__developer svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ANIMACIÓN
========================================================= */

.mtz-footer.is-in-view
.mtz-footer__main {
    animation:
        mtzFooterEntrance
        780ms
        var(--mtz-ease-standard)
        both;
}

.mtz-footer.is-in-view
.mtz-footer__bottom {
    animation:
        mtzFooterBottomEntrance
        650ms
        150ms
        var(--mtz-ease-standard)
        both;
}

@keyframes mtzFooterEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mtzFooterBottomEntrance {

    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}








































/* =========================================================
   1. COMPUTADORAS
========================================================= */

@media (min-width: 1200px) {
     .mtz-footer__main {
        grid-template-columns:
            minmax(310px, 1.25fr)
            minmax(180px, 0.68fr)
            minmax(260px, 0.95fr)
            minmax(245px, 0.9fr);
    }
    .mtz-service-area__layout {
        grid-template-columns:
            minmax(350px, 0.78fr)
            minmax(0, 1.22fr);

        gap: 30px;
    }

    .mtz-service-area__panel,
    .mtz-service-area__map-shell {
        min-height: 660px;
    }

    .mtz-service-area__map {
        height: 558px;
    }
     .mtz-reviews__layout {
        grid-template-columns:
            minmax(340px, 0.78fr)
            minmax(0, 1.22fr);

        gap: 30px;
    }

    .mtz-reviews__brand-panel,
    .mtz-reviews__widget-shell {
        min-height: 610px;
    }
    .mtz-services-hub__grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .mtz-service-card__body {
        padding: 20px;
    }

    .mtz-services-hub__additional {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }
      .mtz-about__layout {
        grid-template-columns:
            minmax(390px, 0.92fr)
            minmax(0, 1.08fr);

        gap: clamp(70px, 7vw, 108px);
    }

    .mtz-about__blueprint-card {
        min-height: 585px;
    }

    .mtz-about__title {
        max-width: 760px;
    }
       .mtz-hero__inner {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, 0.92fr);

        gap: 54px;

        padding-top: 26px;
        padding-bottom: 28px;
    }

    .mtz-hero__photo-card {
        width: min(100%, 510px);
        height: min(100%, 585px);
    }

    .mtz-hero__title {
        max-width: 790px;
    }
       .mtz-header__inner {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .mtz-header__menu-toggle {
        display: none;
    }

    .mtz-header__logo {
        width: 178px;
        height:
            calc(
                var(--mtz-header-height) -
                6px
            );

        flex: 0 0 178px;
    }

    .mtz-header__desktop-nav {
        display: block;

        min-width: 0;
        margin-left: auto;
    }

    .mtz-header__nav-list {
        gap: 2px;
    }

    .mtz-header__nav-link {
        padding-inline: 12px;

        font-size: 0.82rem;
    }

    .mtz-header__estimate {
        min-height: 50px;
        padding-left: 19px;

        flex: 0 0 auto;

        font-size: 0.8rem;
    }

    .mtz-header__estimate-icon {
        width: 38px;
        height: 38px;
    }

    .mtz-mobile-menu {
        display: none;
    }
        :root {
        --mtz-topbar-height: 38px;
    }

    .mtz-topbar__inner {
        gap: 30px;
    }

    .mtz-topbar__group {
        gap: 16px;
    }

    .mtz-topbar__licensed {
        font-size: 0.72rem;
    }

    .mtz-topbar__area,
    .mtz-topbar__phone {
        font-size: 0.75rem;
    }

    :root {
        --mtz-container: 1240px;
        --mtz-gutter: 36px;
        --mtz-header-height: 88px;
        --mtz-section-space: 112px;
    }

    body {
        font-size: 16px;
    }

    .mtz-bg-roof {
        width: 420px;
        height: 230px;
    }

    .mtz-bg-framing {
        width: 330px;
        height: 420px;
    }

    .mtz-bg-tiles {
        width: 240px;
        height: 240px;
    }
}


/* =========================================================
   2. TABLETS Y COMPUTADORAS PEQUEÑAS
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
     .mtz-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 50px 42px;
    }

    .mtz-footer__brand {
        padding-right: 20px;
    }

    .mtz-footer__quick-links {
        padding-left: 20px;
    }

    .mtz-footer__hours,
    .mtz-footer__social {
        padding-top: 12px;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }
     .mtz-service-area__header {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(290px, 0.96fr);

        gap: 39px;

        margin-bottom: 41px;
    }

    .mtz-service-area__title {
        font-size:
            clamp(
                2.4rem,
                4.8vw,
                4rem
            );
    }

    .mtz-service-area__introduction > p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .mtz-service-area__layout {
        grid-template-columns:
            minmax(280px, 0.82fr)
            minmax(0, 1.18fr);

        gap: 20px;
    }

    .mtz-service-area__panel {
        min-height: 610px;
        padding: 24px;

        border-radius: 28px;
    }

    .mtz-service-area__panel-content {
        margin-top: 45px;
    }

    .mtz-service-area__panel-mark {
        font-size: 6rem;
    }

    .mtz-service-area__panel-content h3 {
        font-size: 1.85rem;
    }

    .mtz-service-area__city-list {
        grid-template-columns: 1fr;
    }

    .mtz-service-area__map-shell {
        min-height: 610px;
        padding: 14px;

        border-radius: 28px;
    }

    .mtz-service-area__map {
        height: 510px;

        border-radius: 21px;
    }

    .mtz-service-area__map-loader,
    .mtz-service-area__map-error {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }

    .mtz-service-area__map-badge {
        left: 25px;
    }

    .mtz-service-area__cta {
        gap: 23px;
    }
    .mtz-reviews__header {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(290px, 0.96fr);

        gap: 39px;

        margin-bottom: 42px;
    }

    .mtz-reviews__title {
        font-size:
            clamp(
                2.4rem,
                4.8vw,
                4rem
            );
    }

    .mtz-reviews__introduction > p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .mtz-reviews__layout {
        grid-template-columns:
            minmax(280px, 0.82fr)
            minmax(0, 1.18fr);

        gap: 20px;
    }

    .mtz-reviews__brand-panel {
        min-height: 560px;
        padding: 25px;

        border-radius: 28px;
    }

    .mtz-reviews__brand-copy {
        margin-top: 62px;
    }

    .mtz-reviews__brand-mark {
        font-size: 6rem;
    }

    .mtz-reviews__brand-copy h3 {
        font-size: 1.8rem;
    }

    .mtz-reviews__widget-column {
        padding-inline: 8px;
    }

    .mtz-reviews__widget-shell {
        min-height: 560px;
        padding: 16px;

        border-radius: 27px;
    }

    .mtz-reviews__loader {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mtz-reviews__loader-card:last-child {
        display: none;
    }

    .mtz-reviews__trust-strip {
        gap: 15px;
        padding-inline: 19px;
    }

    .mtz-reviews__cta {
        gap: 23px;
    }
       .mtz-services-hub__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(290px, 0.95fr);
        gap: 38px;

        margin-bottom: 36px;
    }

    .mtz-services-hub__title {
        font-size:
            clamp(
                2.4rem,
                4.8vw,
                4rem
            );
    }

    .mtz-services-hub__introduction > p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .mtz-services-hub__filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mtz-services-hub__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mtz-service-card__body {
        padding: 17px;
    }

    .mtz-service-card__body h3 {
        font-size: 1.28rem;
    }

    .mtz-services-hub__additional {
        grid-template-columns:
            auto
            minmax(0, 1fr);
        gap: 17px;
    }

    .mtz-services-hub__additional-action {
        grid-column: 1 / -1;
        justify-self: flex-end;
    }

    .mtz-services-hub__cta {
        gap: 24px;
    }
     .mtz-about__layout {
        grid-template-columns:
            minmax(310px, 0.9fr)
            minmax(0, 1.1fr);

        gap: 42px;
    }

    .mtz-about__visual {
        padding-left: 8px;
    }

    .mtz-about__blueprint-card {
        min-height: 540px;
        padding: 27px;

        border-radius: 34px;
    }

    .mtz-about__monogram {
        margin-top: 90px;
    }

    .mtz-about__monogram > span {
        font-size: clamp(4.7rem, 8vw, 6.3rem);
    }

    .mtz-about__quote {
        margin-top: 42px;

        font-size: 1.28rem;
    }

    .mtz-about__visual-values {
        right: 22px;
        bottom: 22px;
        left: 22px;
    }

    .mtz-about__visual-values > div {
        padding: 10px 8px;
    }

    .mtz-about__visual-values strong {
        font-size: 0.59rem;
    }

    .mtz-about__location-card {
        right: -8px;

        width: min(250px, 78%);
    }

    .mtz-about__title {
        margin-bottom: 20px;

        font-size:
            clamp(
                2.2rem,
                4.5vw,
                3.8rem
            );
    }

    .mtz-about__text {
        margin-bottom: 22px;
    }

    .mtz-about__text p {
        font-size: 0.92rem;
        line-height: 1.66;
    }

    .mtz-about__principles {
        margin-bottom: 24px;
    }

    .mtz-about__principle {
        padding: 13px 14px;
    }

    .mtz-about__service-strip {
        gap: 18px;

        margin-top: 58px;
        padding: 20px 22px;
    }
     .mtz-hero__inner {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(290px, 0.96fr);

        gap: 28px;

        padding-top: 20px;
        padding-bottom: 22px;
    }

    .mtz-hero__eyebrow {
        margin-bottom: 13px;
    }

    .mtz-hero__title {
        margin-bottom: 14px;

        font-size:
            clamp(
                2.35rem,
                5vw,
                4.2rem
            );
    }

    .mtz-hero__description {
        margin-bottom: 18px;

        font-size: 0.96rem;
        line-height: 1.58;
    }

    .mtz-hero__actions {
        margin-bottom: 18px;
    }

    .mtz-hero__trust {
        gap: 8px 13px;
    }

    .mtz-hero__trust li {
        font-size: 0.69rem;
    }

    .mtz-hero__photo-card {
        width: min(100%, 420px);
        height: min(100%, 500px);

        min-height: 280px;

        border-radius: 31px;
    }

    .mtz-hero__photo-wrapper {
        border-radius: 23px;
    }

    .mtz-hero__badge--top {
        top: 28px;
        left: -20px;
    }

    .mtz-hero__badge--bottom {
        right: -14px;
        bottom: 34px;
    }

    .mtz-hero__badge strong {
        font-size: 0.72rem;
    }


    .mtz-header__inner {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            auto;

        gap: 18px;
    }

    .mtz-header__menu-toggle {
        width: 46px;
        height: 46px;
    }

    .mtz-header__logo {
        justify-self: center;

        width: min(230px, 100%);
        height:
            calc(
                var(--mtz-header-height) -
                6px
            );
    }

    .mtz-header__logo img {
        transform: scale(1.07);
    }

    .mtz-header__estimate {
        min-height: 48px;
        padding:
            5px
            6px
            5px
            18px;

        font-size: 0.78rem;
    }

    .mtz-header__estimate-icon {
        width: 36px;
        height: 36px;
    }

    .mtz-mobile-menu__content {
        width:
            min(
                calc(100% - 56px),
                760px
            );

        padding-block: 30px;
    }

    .mtz-mobile-menu__list {
        gap: 11px;
    }
        :root {
        --mtz-topbar-height: 36px;
    }

    .mtz-topbar__inner {
        gap: 18px;
    }

    .mtz-topbar__group {
        gap: 11px;
    }

    .mtz-topbar__licensed {
        font-size: 0.68rem;
    }

    .mtz-topbar__area {
        font-size: 0.7rem;
    }

    .mtz-topbar__status {
        font-size: 0.68rem;
    }

    .mtz-topbar__phone {
        height: 27px;
        padding-right: 9px;

        font-size: 0.7rem;
    }

    .mtz-topbar__phone-label {
        display: none;
    }

    :root {
        --mtz-container: 940px;
        --mtz-gutter: 28px;
        --mtz-header-height: 80px;
        --mtz-section-space: 92px;
    }

    .mtz-bg-roof {
        top: 8%;
        right: -6%;

        width: 330px;
        height: 180px;
    }

    .mtz-bg-framing {
        left: -100px;

        width: 280px;
        height: 350px;
    }

    .mtz-bg-tiles {
        right: 3%;

        width: 190px;
        height: 190px;

        background-size: 38px 38px;
    }

    .mtz-bg-door {
        left: 4%;

        width: 110px;
        height: 196px;
    }

    .mtz-bg-stairs {
        right: 10%;

        width: 250px;
        height: 145px;
    }
}


/* =========================================================
   3. CELULARES
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {
      .mtz-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 45px 27px;

        padding-top: 70px;
    }

    .mtz-footer__brand {
        grid-column: 1 / -1;

        max-width: 650px;
    }

    .mtz-footer__contact-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 100%;
    }

    .mtz-footer__contact:last-child {
        grid-column: 1 / -1;
    }

    .mtz-footer__social {
        grid-column: 1 / -1;
    }

    .mtz-footer__social-links {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mtz-footer__social-link {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .mtz-footer__social-arrow {
        display: none;
    }

    .mtz-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
     .mtz-service-area__header {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-bottom: 36px;
    }

    .mtz-service-area__title {
        font-size:
            clamp(
                2.3rem,
                8.5vw,
                3.6rem
            );
    }

    .mtz-service-area__introduction > p {
        max-width: 650px;

        font-size: 0.93rem;
    }

    .mtz-service-area__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mtz-service-area__panel {
        width: min(100%, 590px);
        min-height: auto;
        margin-inline: auto;
        padding: 27px;

        border-radius: 28px;
    }

    .mtz-service-area__panel-content {
        margin-top: 48px;
    }

    .mtz-service-area__city-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mtz-service-area__panel-note {
        margin-top: 24px;
    }

    .mtz-service-area__map-shell {
        min-height: auto;
        padding: 15px;

        border-radius: 27px;
    }

    .mtz-service-area__map {
        height: 480px;

        border-radius: 21px;
    }

    .mtz-service-area__map-loader,
    .mtz-service-area__map-error {
        right: 15px;
        bottom: 15px;
        left: 15px;
    }

    .mtz-service-area__cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .mtz-service-area__cta-actions {
        justify-content: space-between;

        width: 100%;
    }
     .mtz-reviews__header {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-bottom: 37px;
    }

    .mtz-reviews__title {
        font-size:
            clamp(
                2.3rem,
                8.5vw,
                3.6rem
            );
    }

    .mtz-reviews__introduction > p {
        max-width: 650px;

        font-size: 0.93rem;
    }

    .mtz-reviews__layout {
        grid-template-columns: 1fr;
        gap: 31px;
    }

    .mtz-reviews__brand-panel {
        width: min(100%, 570px);
        min-height: 505px;
        margin-inline: auto;
        padding: 27px;

        border-radius: 28px;
    }

    .mtz-reviews__brand-copy {
        margin-top: 57px;
    }

    .mtz-reviews__brand-mark {
        font-size: 6.2rem;
    }

    .mtz-reviews__widget-column {
        padding: 10px 8px 23px;
    }

    .mtz-reviews__widget-shell {
        min-height: 540px;

        border-radius: 26px;
    }

    .mtz-reviews__loader {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mtz-reviews__loader-card:last-child {
        display: none;
    }

    .mtz-reviews__floating-card--top {
        right: 25px;
    }

    .mtz-reviews__trust-strip {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 13px;

        margin-top: 36px;
        padding: 18px;
    }

    .mtz-reviews__trust-divider {
        display: none;
    }

    .mtz-reviews__trust-item {
        align-items: flex-start;
    }

    .mtz-reviews__trust-icon {
        width: 36px;
        height: 36px;
    }

    .mtz-reviews__cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .mtz-reviews__cta-actions {
        justify-content: space-between;

        width: 100%;
    }
      .mtz-services-hub__header {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-bottom: 32px;
    }

    .mtz-services-hub__title {
        font-size:
            clamp(
                2.25rem,
                8.5vw,
                3.5rem
            );
    }

    .mtz-services-hub__introduction > p {
        max-width: 650px;

        font-size: 0.93rem;
    }

    .mtz-services-hub__summary {
        flex-wrap: wrap;
    }

    .mtz-services-hub__filter-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .mtz-services-hub__filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mtz-services-hub__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mtz-services-hub__additional {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mtz-services-hub__additional-action {
        justify-self: flex-start;
    }

    .mtz-services-hub__cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .mtz-services-hub__cta-actions {
        justify-content: space-between;

        width: 100%;
    }

      .mtz-about__layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .mtz-about__visual {
        width: min(100%, 520px);
        margin-inline: auto;
        padding: 8px 15px 30px 0;
    }

    .mtz-about__blueprint-card {
        min-height: 465px;
        padding: 25px;

        border-radius: 30px;
    }

    .mtz-about__monogram {
        margin-top: 68px;
    }

    .mtz-about__monogram > span {
        font-size: clamp(4.8rem, 17vw, 6.7rem);
    }

    .mtz-about__quote {
        max-width: 330px;
        margin-top: 38px;

        font-size: 1.18rem;
    }

    .mtz-about__visual-values {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .mtz-about__location-card {
        right: 0;

        width: min(265px, 72%);
    }

    .mtz-about__content {
        text-align: left;
    }

    .mtz-about__title {
        max-width: 650px;

        font-size:
            clamp(
                2.25rem,
                8.5vw,
                3.5rem
            );
    }

    .mtz-about__text p {
        font-size: 0.94rem;
        line-height: 1.68;
    }

    .mtz-about__principles {
        grid-template-columns: 1fr;
    }

    .mtz-about__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mtz-about__actions .mtz-btn {
        width: 100%;
    }

    .mtz-about__call {
        justify-content: center;

        width: 100%;
        padding: 8px;

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

        border:
            1px solid rgba(16, 36, 58, 0.09);

        border-radius: 16px;
    }

    .mtz-about__service-strip {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 12px;

        margin-top: 52px;
        padding: 19px;

        border-radius: 20px;
    }

    .mtz-about__strip-divider {
        display: none;
    }

    .mtz-about__service-strip strong {
        font-size: 0.88rem;
    }

    .mtz-about__service-strip span {
        font-size: 0.64rem;
    }
       .mtz-hero__inner {
        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            minmax(155px, 1fr);

        align-content: center;
        gap: 12px;

        width: calc(100% - 32px);

        padding-top: 13px;
        padding-bottom: 14px;
    }

    .mtz-hero__content {
        justify-content: flex-start;
    }

    .mtz-hero__eyebrow {
        min-height: 30px;
        margin-bottom: 9px;
        padding: 5px 11px 5px 5px;

        font-size: 0.6rem;
    }

    .mtz-hero__eyebrow-icon {
        width: 22px;
        height: 22px;
    }

    .mtz-hero__title {
        max-width: 600px;
        margin-bottom: 9px;

        font-size:
            clamp(
                2rem,
                7.8vw,
                3rem
            );

        line-height: 0.95;
    }

    .mtz-hero__description {
        max-width: 620px;
        margin-bottom: 12px;

        font-size: 0.86rem;
        line-height: 1.45;
    }

    .mtz-hero__actions {
        gap: 8px;
        margin-bottom: 11px;
    }

    .mtz-hero__actions .mtz-btn {
        min-height: 43px;
        padding: 10px 16px;

        font-size: 0.76rem;
    }

    .mtz-hero__call-icon {
        width: 26px;
        height: 26px;
    }

    .mtz-hero__trust {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .mtz-hero__trust li {
        min-width: 0;

        font-size: 0.62rem;
        white-space: normal;
    }

    .mtz-hero__trust-icon {
        width: 20px;
        height: 20px;
    }

    .mtz-hero__visual {
        align-items: stretch;
    }

    .mtz-hero__photo-card {
        width: min(100%, 440px);
        height: 100%;
        min-height: 150px;

        margin-inline: auto;
        padding: 9px;

        border-radius: 24px;
    }

    .mtz-hero__photo-wrapper {
        border-radius: 18px;
    }

    .mtz-hero__photo {
        object-position: center 24%;
    }

    .mtz-hero__photo-outline {
        top: -7px;
        right: -7px;

        border-radius: 24px;
    }

    .mtz-hero__photo-caption {
        right: 16px;
        bottom: 12px;
        left: 16px;
    }

    .mtz-hero__photo-caption > span {
        font-size: 1.55rem;
    }

    .mtz-hero__photo-caption p {
        max-width: 145px;

        font-size: 0.55rem;
    }

    .mtz-hero__badge {
        padding: 7px 9px;

        border-radius: 13px;
    }

    .mtz-hero__badge-mark {
        width: 29px;
        height: 29px;

        border-radius: 10px;
    }

    .mtz-hero__badge small {
        font-size: 0.5rem;
    }

    .mtz-hero__badge strong {
        font-size: 0.63rem;
    }

    .mtz-hero__badge--top {
        top: 16px;
        left: -5px;
    }

    .mtz-hero__badge--bottom {
        right: -5px;
        bottom: 18px;
    }
     .mtz-header__inner {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;

        width: calc(100% - 32px);
        gap: 10px;
    }

    .mtz-header__menu-toggle {
        width: 43px;
        height: 43px;

        border-radius: 14px;
    }

    .mtz-header__menu-icon,
    .mtz-header__menu-icon span {
        width: 20px;
    }

    .mtz-header__menu-icon span:nth-child(2) {
        width: 14px;
    }

    .mtz-header__logo {
        justify-self: center;

        width: min(158px, 100%);
        height:
            calc(
                var(--mtz-header-height) -
                5px
            );

        border-radius: 9px;
    }

    .mtz-header__logo img {
        transform: scale(1.09);
    }

    .mtz-header__estimate {
        min-height: 43px;
        padding:
            4px
            5px
            4px
            13px;
        gap: 7px;

        font-size: 0.69rem;
    }

    .mtz-header__estimate-icon {
        width: 32px;
        height: 32px;
    }

    .mtz-header__estimate-icon svg {
        width: 14px;
        height: 14px;
    }

    .mtz-mobile-menu__content {
        width: calc(100% - 32px);
        padding: 22px 0 24px;
    }

    .mtz-mobile-menu__heading h2 {
        font-size: 2rem;
    }

    .mtz-mobile-menu__description {
        margin-bottom: 16px;

        font-size: 0.8rem;
    }

    .mtz-mobile-menu__list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .mtz-mobile-menu__link {
        min-height: 58px;
        padding: 9px 12px;
        gap: 9px;

        border-radius: 15px;

        font-size: 0.95rem;
    }

    .mtz-mobile-menu__footer {
        gap: 9px;
        padding-top: 18px;
    }

    .mtz-mobile-menu__call,
    .mtz-mobile-menu__estimate {
        min-height: 53px;

        border-radius: 15px;
    }

    .mtz-mobile-menu__estimate {
        padding-inline: 15px;

        font-size: 0.72rem;
    }
      :root {
        --mtz-topbar-height: 34px;
    }

    .mtz-topbar::after {
        width: 35%;
    }

    .mtz-topbar__inner {
        width: calc(100% - 32px);
        gap: 10px;
    }

    .mtz-topbar__group {
        gap: 9px;
    }

    .mtz-topbar__licensed {
        font-size: 0.63rem;
        letter-spacing: 0.055em;
    }

    .mtz-topbar__licensed-icon {
        width: 18px;
        height: 18px;
    }

    .mtz-topbar__licensed-icon svg {
        width: 10px;
        height: 10px;
    }

    .mtz-topbar__group--primary
    .mtz-topbar__divider {
        display: none;
    }

    .mtz-topbar__area-full {
        display: none;
    }

    .mtz-topbar__area-short {
        display: inline;
    }

    .mtz-topbar__area {
        font-size: 0.65rem;
    }

    .mtz-topbar__status,
    .mtz-topbar__group--actions
    .mtz-topbar__divider {
        display: none;
    }

    .mtz-topbar__phone {
        height: 26px;
        padding: 0 8px 0 4px;

        font-size: 0.68rem;
    }

    .mtz-topbar__phone-label {
        display: none;
    }

    .mtz-topbar__phone-icon {
        width: 19px;
        height: 19px;
    }
    :root {
        --mtz-container: 100%;
        --mtz-gutter: 20px;
        --mtz-header-height: 74px;
        --mtz-section-space: 76px;
    }

    body {
        font-size: 15.5px;
    }

    .mtz-section-title {
        font-size: clamp(2rem, 10vw, 3.2rem);
    }

    .mtz-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mtz-actions .mtz-btn {
        width: 100%;
    }

    .mtz-bg-roof {
        top: 4%;
        right: -120px;

        width: 280px;
        height: 160px;

        opacity: 0.12;
    }

    .mtz-bg-framing {
        bottom: 2%;
        left: -135px;

        width: 250px;
        height: 320px;

        opacity: 0.12;
    }

    .mtz-bg-tiles {
        top: 48%;
        right: -80px;

        width: 170px;
        height: 170px;

        opacity: 0.12;

        background-size: 34px 34px;
    }

    .mtz-bg-door {
        top: 19%;
        left: -46px;

        width: 92px;
        height: 170px;

        opacity: 0.11;
    }

    .mtz-bg-stairs {
        right: -60px;
        bottom: 7%;

        width: 210px;
        height: 120px;

        opacity: 0.1;
    }

    .mtz-transition-brand {
        width: calc(100% - 40px);
    }
}


/* =========================================================
   4. CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .mtz-about__images {
        padding: 0;
    }

    .mtz-about__image-card {
        flex: 1 1 100%;
        max-width: none;
    }

    .mtz-about__image-card img {
        min-height: 280px;
    }

     .mtz-footer__main {
        grid-template-columns: 1fr;
        gap: 42px;

        padding-top: 62px;
        padding-bottom: 48px;
    }

    .mtz-footer__brand-mark {
        width: 61px;
        height: 61px;

        border-radius: 18px;
    }

    .mtz-footer__description {
        font-size: 0.76rem;
    }

    .mtz-footer__contact strong {
        font-size: 0.62rem;
    }

    .mtz-footer__column-heading {
        margin-bottom: 18px;
    }

    .mtz-footer__social-links {
        grid-template-columns: 1fr;
    }

    .mtz-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;

        min-height: auto;
        padding: 21px 0;
    }

    .mtz-footer__copyright {
        max-width: 330px;
    }

    .mtz-footer__developer {
        flex-wrap: wrap;
    }

    .mtz-footer__frame {
        right: -210px;
    }
     .mtz-service-area__header {
        grid-template-columns: 1fr;
        gap: 17px;

        margin-bottom: 30px;
    }

    .mtz-service-area__eyebrow {
        margin-bottom: 13px;

        font-size: 0.62rem;
    }

    .mtz-service-area__title {
        font-size:
            clamp(
                2.05rem,
                10vw,
                2.9rem
            );
    }

    .mtz-service-area__introduction > p {
        margin-bottom: 16px;

        font-size: 0.86rem;
        line-height: 1.6;
    }

    .mtz-service-area__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mtz-service-area__panel {
        min-height: auto;
        padding: 20px;

        border-radius: 24px;
    }

    .mtz-service-area__panel-label {
        min-height: 28px;
        padding: 6px 9px;

        font-size: 0.5rem;
    }

    .mtz-service-area__panel-icon {
        width: 40px;
        height: 40px;

        border-radius: 13px;
    }

    .mtz-service-area__panel-content {
        margin-top: 39px;
    }

    .mtz-service-area__panel-mark {
        margin-bottom: 19px;

        font-size: 5rem;
    }

    .mtz-service-area__panel-content h3 {
        font-size: 1.55rem;
    }

    .mtz-service-area__panel-content p {
        font-size: 0.74rem;
    }

    .mtz-service-area__legend {
        margin-top: 20px;
    }

    .mtz-service-area__city-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mtz-service-area__city {
        min-height: 45px;
        padding: 8px 9px;
    }

    .mtz-service-area__map-shell {
        min-height: auto;
        padding: 11px;

        border-radius: 22px;
    }

    .mtz-service-area__map-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;

        padding: 5px 5px 11px;
    }

    .mtz-service-area__reset {
        align-self: flex-end;
    }

    .mtz-service-area__map {
        height: 410px;
        margin-top: 11px;

        border-radius: 17px;
    }

    .mtz-service-area__map-loader,
    .mtz-service-area__map-error {
        inset:
            126px
            11px
            11px;

        border-radius: 17px;
    }

    .mtz-service-area__map-badge {
        top: 137px;
        left: 20px;

        padding: 8px 9px;

        border-radius: 12px;
    }

    .mtz-service-area__map-badge strong {
        font-size: 0.58rem;
    }

    .mtz-service-area__map-instructions {
        gap: 6px;

        font-size: 0.5rem;
        text-align: center;
    }

    .mtz-service-area__cta {
        align-items: stretch;
        flex-direction: column;
        gap: 17px;

        margin-top: 20px;
        padding: 17px;

        border-radius: 19px;
    }

    .mtz-service-area__cta-content {
        align-items: flex-start;
    }

    .mtz-service-area__cta-icon {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .mtz-service-area__cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .mtz-service-area__cta-actions
    .mtz-btn {
        width: 100%;
    }

    .mtz-service-area__cta-phone {
        align-items: center;

        text-align: center;
    }
       .mtz-reviews__header {
        grid-template-columns: 1fr;
        gap: 17px;

        margin-bottom: 31px;
    }

    .mtz-reviews__eyebrow {
        margin-bottom: 13px;

        font-size: 0.62rem;
    }

    .mtz-reviews__title {
        font-size:
            clamp(
                2.05rem,
                10vw,
                2.9rem
            );
    }

    .mtz-reviews__introduction > p {
        margin-bottom: 16px;

        font-size: 0.86rem;
        line-height: 1.6;
    }

    .mtz-reviews__platform {
        padding: 7px 10px 7px 7px;
    }

    .mtz-reviews__layout {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .mtz-reviews__brand-panel {
        min-height: 455px;
        padding: 21px;

        border-radius: 24px;
    }

    .mtz-reviews__brand-label {
        min-height: 28px;
        padding: 6px 9px;

        font-size: 0.5rem;
    }

    .mtz-reviews__brand-icon {
        width: 40px;
        height: 40px;

        border-radius: 13px;
    }

    .mtz-reviews__brand-copy {
        margin-top: 46px;
    }

    .mtz-reviews__brand-mark {
        margin-bottom: 20px;

        font-size: 5rem;
    }

    .mtz-reviews__brand-copy h3 {
        font-size: 1.55rem;
    }

    .mtz-reviews__brand-copy p {
        font-size: 0.75rem;
    }

    .mtz-reviews__values {
        padding-top: 23px;
    }

    .mtz-reviews__values > div {
        padding: 10px;
    }

    .mtz-reviews__brand-door {
        right: -50px;

        opacity: 0.12;
    }

    .mtz-reviews__widget-column {
        padding: 8px 0 19px;
    }

    .mtz-reviews__widget-shell {
        min-height: 500px;
        padding: 13px;

        border-radius: 22px;
    }

    .mtz-reviews__widget-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;

        padding: 7px 6px 12px;
    }

    .mtz-reviews__live-status {
        padding-left: 49px;
    }

    .mtz-reviews__widget-area {
        min-height: 375px;
        padding-block: 13px;
    }

    .mtz-reviews__elfsight {
        min-height: 350px;
    }

    .mtz-reviews__loader {
        grid-template-columns: 1fr;
    }

    .mtz-reviews__loader-card {
        min-height: 160px;
    }

    .mtz-reviews__loader-card:nth-child(2),
    .mtz-reviews__loader-card:nth-child(3) {
        display: none;
    }

    .mtz-reviews__widget-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;

        padding-inline: 6px;
    }

    .mtz-reviews__widget-footer > span {
        white-space: normal;
    }

    .mtz-reviews__floating-card {
        padding: 8px 10px;

        border-radius: 13px;
    }

    .mtz-reviews__floating-card strong {
        font-size: 0.6rem;
    }

    .mtz-reviews__floating-card--top {
        top: -1px;
        right: 12px;
    }

    .mtz-reviews__floating-card--bottom {
        right: 5px;
    }

    .mtz-reviews__trust-strip {
        grid-template-columns: 1fr;
        gap: 13px;

        margin-top: 31px;
        padding: 17px;

        border-radius: 19px;
    }

    .mtz-reviews__trust-divider {
        display: none;
    }

    .mtz-reviews__trust-item {
        padding-bottom: 12px;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.09);
    }

    .mtz-reviews__trust-item:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .mtz-reviews__cta {
        align-items: stretch;
        flex-direction: column;
        gap: 17px;

        margin-top: 18px;
        padding: 18px;

        border-radius: 19px;
    }

    .mtz-reviews__cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .mtz-reviews__cta-actions
    .mtz-btn {
        width: 100%;
    }

    .mtz-reviews__phone {
        justify-content: center;

        width: 100%;
    }

    .mtz-reviews__shape--frame {
        left: -190px;
    }

    .mtz-reviews__shape--tiles {
        right: -150px;
    }
     .mtz-services-hub__header {
        grid-template-columns: 1fr;
        gap: 17px;

        margin-bottom: 28px;
    }

    .mtz-services-hub__eyebrow {
        margin-bottom: 13px;

        font-size: 0.62rem;
    }

    .mtz-services-hub__title {
        font-size:
            clamp(
                2.05rem,
                10vw,
                2.9rem
            );
    }

    .mtz-services-hub__introduction > p {
        margin-bottom: 17px;

        font-size: 0.86rem;
        line-height: 1.6;
    }

    .mtz-services-hub__summary {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .mtz-services-hub__summary > div {
        min-width: 0;
        padding: 10px;
    }

    .mtz-services-hub__filter-area {
        padding: 14px;

        border-radius: 19px;
    }

    .mtz-services-hub__filter-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;

        margin-bottom: 13px;
    }

    .mtz-services-hub__gallery-link {
        font-size: 0.66rem;
    }

    .mtz-services-hub__filters {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mtz-services-hub__filter {
        min-height: 43px;
        padding:
            7px
            8px
            7px
            12px;

        border-radius: 13px;

        font-size: 0.68rem;
    }

    .mtz-services-hub__filter small {
        width: 25px;
        height: 25px;
    }

    .mtz-services-hub__grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .mtz-service-card {
        border-radius: 20px;
    }

    .mtz-service-card__media {
        aspect-ratio: 16 / 9;
    }

    .mtz-service-card__body {
        padding: 16px;
    }

    .mtz-service-card__body h3 {
        font-size: 1.32rem;
    }

    .mtz-service-card__body p {
        margin-bottom: 15px;

        font-size: 0.73rem;
    }

    .mtz-services-hub__additional {
        grid-template-columns: 1fr;
        gap: 15px;

        margin-top: 21px;
        padding: 17px;

        border-radius: 19px;
    }

    .mtz-services-hub__additional-list {
        gap: 5px;
    }

    .mtz-services-hub__additional-list span {
        min-height: 28px;
        padding: 5px 9px;

        font-size: 0.57rem;
    }

    .mtz-services-hub__additional-action {
        justify-self: flex-start;
    }

    .mtz-services-hub__cta {
        align-items: stretch;
        flex-direction: column;
        gap: 17px;

        margin-top: 18px;
        padding: 18px;

        border-radius: 19px;
    }

    .mtz-services-hub__cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .mtz-services-hub__cta-actions
    .mtz-btn {
        width: 100%;
    }

    .mtz-services-hub__cta-phone {
        align-items: center;

        text-align: center;
    }
       .mtz-about__layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .mtz-about__visual {
        padding: 4px 9px 26px 0;
    }

    .mtz-about__blueprint-card {
        min-height: 425px;
        padding: 21px;

        border-radius: 26px;
    }

    .mtz-about__visual-label {
        min-height: 29px;
        padding: 6px 10px;

        font-size: 0.56rem;
    }

    .mtz-about__visual-icon {
        width: 41px;
        height: 41px;

        border-radius: 13px;
    }

    .mtz-about__visual-icon svg {
        width: 20px;
        height: 20px;
    }

    .mtz-about__monogram {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;

        margin-top: 57px;
    }

    .mtz-about__monogram > span {
        font-size: clamp(4.3rem, 24vw, 6rem);
    }

    .mtz-about__monogram small {
        font-size: 0.55rem;
    }

    .mtz-about__quote {
        max-width: 270px;
        margin-top: 29px;
        padding-left: 15px;

        font-size: 1rem;
    }

    .mtz-about__visual-values {
        right: 14px;
        bottom: 14px;
        left: 14px;

        gap: 5px;
    }

    .mtz-about__visual-values > div {
        padding: 8px 6px;

        border-radius: 11px;
    }

    .mtz-about__visual-values span {
        font-size: 0.48rem;
    }

    .mtz-about__visual-values strong {
        font-size: 0.5rem;
    }

    .mtz-about__location-card {
        right: 0;

        width: min(245px, 82%);
        padding: 10px 11px;

        border-radius: 15px;
    }

    .mtz-about__location-icon {
        width: 34px;
        height: 34px;

        border-radius: 11px;
    }

    .mtz-about__location-card strong {
        font-size: 0.67rem;
    }

    .mtz-about__eyebrow {
        margin-bottom: 13px;

        font-size: 0.63rem;
    }

    .mtz-about__title {
        margin-bottom: 19px;

        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }

    .mtz-about__text {
        margin-bottom: 22px;
    }

    .mtz-about__text p {
        font-size: 0.88rem;
        line-height: 1.64;
    }

    .mtz-about__principles {
        margin-bottom: 24px;
    }

    .mtz-about__principle {
        gap: 11px;

        padding: 12px;

        border-radius: 15px;
    }

    .mtz-about__principle-icon {
        width: 36px;
        height: 36px;

        border-radius: 11px;
    }

    .mtz-about__principle h3 {
        font-size: 0.95rem;
    }

    .mtz-about__principle p {
        font-size: 0.75rem;
    }

    .mtz-about__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .mtz-about__actions .mtz-btn {
        width: 100%;
    }

    .mtz-about__call {
        justify-content: center;

        width: 100%;
        padding: 8px;

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

        border:
            1px solid rgba(16, 36, 58, 0.09);

        border-radius: 15px;
    }

    .mtz-about__service-strip {
        grid-template-columns: 1fr;
        gap: 13px;

        margin-top: 43px;
        padding: 18px;

        border-radius: 18px;
    }

    .mtz-about__strip-divider {
        display: none;
    }

    .mtz-about__service-strip > div {
        padding-bottom: 12px;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.1);
    }

    .mtz-about__service-strip > div:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .mtz-about__service-strip strong {
        font-size: 0.93rem;
    }

    .mtz-about__service-strip span {
        font-size: 0.68rem;
    }
     .mtz-hero__inner {
        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            minmax(128px, 1fr);

        align-content: center;
        gap: 9px;

        width: calc(100% - 24px);

        padding-top: 9px;
        padding-bottom: 10px;
    }

    .mtz-hero__eyebrow {
        min-height: 27px;
        margin-bottom: 7px;
        padding: 4px 9px 4px 4px;
        gap: 7px;

        font-size: 0.53rem;
        letter-spacing: 0.07em;
    }

    .mtz-hero__eyebrow-icon {
        width: 20px;
        height: 20px;
    }

    .mtz-hero__eyebrow-icon svg {
        width: 11px;
        height: 11px;
    }

    .mtz-hero__title {
        margin-bottom: 7px;

        font-size:
            clamp(
                1.76rem,
                8.8vw,
                2.45rem
            );

        line-height: 0.96;
    }

    .mtz-hero__description {
        margin-bottom: 9px;

        font-size: 0.76rem;
        line-height: 1.36;
    }

    .mtz-hero__actions {
        display: grid;
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.8fr);
        gap: 6px;

        margin-bottom: 9px;
    }

    .mtz-hero__actions .mtz-btn {
        width: 100%;
        min-height: 39px;
        padding: 8px 10px;

        font-size: 0.65rem;
    }

    .mtz-hero__primary-button svg {
        display: none;
    }

    .mtz-hero__call-icon {
        width: 23px;
        height: 23px;
    }

    .mtz-hero__call-icon svg {
        width: 11px;
        height: 11px;
    }

    .mtz-hero__trust {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .mtz-hero__trust li {
        align-items: flex-start;
        gap: 4px;

        min-width: 0;

        font-size: 0.52rem;
        line-height: 1.2;
        white-space: normal;
    }

    .mtz-hero__trust-icon {
        width: 17px;
        height: 17px;

        border-radius: 5px;
    }

    .mtz-hero__trust-icon svg {
        width: 10px;
        height: 10px;
    }

    .mtz-hero__photo-card {
        width: 100%;
        height: 100%;
        min-height: 124px;

        padding: 7px;

        border-radius: 20px;
    }

    .mtz-hero__photo-wrapper {
        border-radius: 15px;
    }

    .mtz-hero__photo {
        object-position: center 22%;
    }

    .mtz-hero__photo-outline {
        top: -5px;
        right: -5px;

        border-radius: 20px;
    }

    .mtz-hero__photo-caption {
        right: 12px;
        bottom: 9px;
        left: 12px;
    }

    .mtz-hero__photo-caption > span {
        font-size: 1.28rem;
    }

    .mtz-hero__photo-caption p {
        max-width: 120px;

        font-size: 0.45rem;
        line-height: 1.25;
    }

    .mtz-hero__badge {
        gap: 6px;

        padding: 6px 7px;

        border-radius: 11px;
    }

    .mtz-hero__badge-mark {
        width: 25px;
        height: 25px;

        border-radius: 8px;
    }

    .mtz-hero__badge-mark svg {
        width: 13px;
        height: 13px;
    }

    .mtz-hero__badge small {
        font-size: 0.42rem;
    }

    .mtz-hero__badge strong {
        font-size: 0.54rem;
    }

    .mtz-hero__badge-status {
        width: 7px;
        height: 7px;

        box-shadow:
            0 0 0 3px rgba(66, 184, 131, 0.14);
    }

    .mtz-hero__badge--top {
        top: 12px;
        left: -3px;
    }

    .mtz-hero__badge--bottom {
        right: -3px;
        bottom: 13px;
    }

    .mtz-hero__shape--frame {
        right: -150px;
    }

    .mtz-hero__shape--tile {
        right: -100px;
    }
      .mtz-header__inner {
        grid-template-columns:
            40px
            minmax(88px, 1fr)
            auto;

        width: calc(100% - 24px);
        gap: 7px;
    }

    .mtz-header__menu-toggle {
        width: 40px;
        height: 40px;

        border-radius: 13px;

        box-shadow:
            0 7px 18px rgba(11, 22, 36, 0.19);
    }

    .mtz-header__menu-icon {
        gap: 4px;

        width: 19px;
    }

    .mtz-header__menu-icon span {
        width: 19px;
    }

    .mtz-header__menu-icon span:nth-child(2) {
        width: 13px;
    }

    .mtz-site-header.is-menu-open
    .mtz-header__menu-icon span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }

    .mtz-site-header.is-menu-open
    .mtz-header__menu-icon span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }

    .mtz-header__logo {
        justify-self: center;

        width: min(124px, 100%);
        height:
            calc(
                var(--mtz-header-height) -
                5px
            );

        border-radius: 8px;
    }

    .mtz-header__logo img {
        transform: scale(1.1);
    }

    .mtz-header__estimate {
        min-height: 40px;
        padding:
            4px
            5px
            4px
            10px;
        gap: 5px;

        font-size: 0.6rem;
        letter-spacing: -0.015em;

        box-shadow:
            0 8px 18px rgba(217, 106, 22, 0.22);
    }

    .mtz-header__estimate-icon {
        width: 29px;
        height: 29px;
    }

    .mtz-header__estimate-icon svg {
        width: 13px;
        height: 13px;
    }

    .mtz-mobile-menu__content {
        width: calc(100% - 24px);
        padding: 17px 0 20px;
    }

    .mtz-mobile-menu__heading {
        align-items: center;
        gap: 12px;

        margin-bottom: 6px;
    }

    .mtz-mobile-menu__eyebrow {
        margin-bottom: 5px;

        font-size: 0.58rem;
    }

    .mtz-mobile-menu__heading h2 {
        font-size: 1.45rem;
    }

    .mtz-mobile-menu__description {
        display: none;
    }

    .mtz-mobile-menu__close {
        width: 39px;
        height: 39px;

        border-radius: 13px;
    }

    .mtz-mobile-menu__list {
        grid-template-columns: 1fr;
        gap: 6px;

        margin-top: 10px;
    }

    .mtz-mobile-menu__link {
        min-height: 49px;
        padding: 7px 12px;
        gap: 10px;

        border-radius: 14px;

        font-size: 0.9rem;
    }

    .mtz-mobile-menu__number {
        font-size: 0.56rem;
    }

    .mtz-mobile-menu__link svg {
        width: 15px;
        height: 15px;
    }

    .mtz-mobile-menu__footer {
        grid-template-columns:
            1fr
            1fr;
        gap: 7px;

        padding-top: 13px;
    }

    .mtz-mobile-menu__call,
    .mtz-mobile-menu__estimate {
        min-height: 47px;
        padding: 6px 9px;

        border-radius: 14px;
    }

    .mtz-mobile-menu__call {
        gap: 7px;
    }

    .mtz-mobile-menu__call-icon {
        width: 31px;
        height: 31px;

        border-radius: 10px;
    }

    .mtz-mobile-menu__call-icon svg {
        width: 15px;
        height: 15px;
    }

    .mtz-mobile-menu__call small {
        font-size: 0.52rem;
    }

    .mtz-mobile-menu__call strong {
        font-size: 0.7rem;
    }

    .mtz-mobile-menu__estimate {
        gap: 6px;

        font-size: 0.61rem;
        line-height: 1.2;
        white-space: normal;
    }

    .mtz-mobile-menu__estimate svg {
        display: none;
    }
       :root {
        --mtz-topbar-height: 32px;
    }

    .mtz-topbar__inner {
        width: calc(100% - 24px);
        gap: 8px;
    }

    .mtz-topbar__group {
        gap: 7px;
    }

    .mtz-topbar__licensed {
        gap: 6px;

        font-size: 0.59rem;
        letter-spacing: 0.035em;
    }

    .mtz-topbar__licensed-icon {
        width: 17px;
        height: 17px;
    }

    .mtz-topbar__licensed-icon svg {
        width: 9px;
        height: 9px;
    }

    .mtz-topbar__group--primary
    .mtz-topbar__divider,
    .mtz-topbar__area,
    .mtz-topbar__status,
    .mtz-topbar__group--actions
    .mtz-topbar__divider {
        display: none;
    }

    .mtz-topbar__phone {
        height: 25px;
        padding: 0 7px 0 4px;

        font-size: 0.64rem;
    }

    .mtz-topbar__phone-label {
        display: none;
    }

    .mtz-topbar__phone-icon {
        width: 18px;
        height: 18px;
    }

    .mtz-topbar__phone-icon svg {
        width: 10px;
        height: 10px;
    }
    :root {
        --mtz-container: 100%;
        --mtz-gutter: 16px;
        --mtz-header-height: 70px;
        --mtz-section-space: 66px;
    }

    body {
        font-size: 15px;
    }

    .mtz-section-title {
        font-size: clamp(1.9rem, 11vw, 2.8rem);
    }

    .mtz-section-description {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .mtz-eyebrow {
        padding: 7px 12px;

        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }

    .mtz-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mtz-actions .mtz-btn {
        width: 100%;
    }

    .mtz-btn {
        min-height: 52px;
        padding-inline: 20px;
    }

    .mtz-card {
        border-radius: 18px;
    }

    .mtz-bg-roof {
        top: 3%;
        right: -145px;

        width: 260px;
        height: 150px;

        opacity: 0.1;
    }

    .mtz-bg-framing {
        bottom: -25px;
        left: -160px;

        width: 245px;
        height: 300px;

        opacity: 0.1;
    }

    .mtz-bg-tiles {
        top: 45%;
        right: -105px;

        width: 160px;
        height: 160px;

        opacity: 0.1;

        background-size: 32px 32px;
    }

    .mtz-bg-door {
        display: none;
    }

    .mtz-bg-stairs {
        right: -85px;
        bottom: 8%;

        width: 190px;
        height: 110px;

        opacity: 0.09;
    }

    .mtz-transition-icon {
        width: 58px;
        height: 58px;

        border-radius: 17px;
    }

    .mtz-transition-icon span {
        width: 20px;
        height: 31px;
    }

    .mtz-transition-brand small {
        max-width: 260px;

        font-size: 0.66rem;
        line-height: 1.5;
    }
}


/* =========================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   No es un breakpoint de dispositivo.
========================================================= */

@media (prefers-reduced-motion: reduce) {
     .mtz-footer__main,
    .mtz-footer__bottom,
    .mtz-footer__contact,
    .mtz-footer__links a,
    .mtz-footer__social-link,
    .mtz-footer__estimate,
    .mtz-footer__developer {
        animation: none !important;
        transition: none !important;
    }
       .mtz-service-area__header,
    .mtz-service-area__panel,
    .mtz-service-area__map-column,
    .mtz-service-area__cta,
    .mtz-service-area__city,
    .mtz-service-area__map-loader-ring,
    .mtz-map-marker__pulse {
        animation: none !important;
        transition: none !important;
    }
      .mtz-reviews__header,
    .mtz-reviews__brand-panel,
    .mtz-reviews__widget-column,
    .mtz-reviews__trust-strip,
    .mtz-reviews__cta,
    .mtz-reviews__loader-card span::after,
    .mtz-reviews__elfsight {
        animation: none !important;
        transition: none !important;
    }
   
    .mtz-services-hub__header,
    .mtz-services-hub__filter-area,
    .mtz-services-hub__grid,
    .mtz-services-hub__additional,
    .mtz-services-hub__cta,
    .mtz-service-card,
    .mtz-service-card__media img {
        animation: none !important;
        transition: none !important;
    }
     .mtz-hero__floating,
    .mtz-hero__visual-card,
    .mtz-hero__trust-item {
        transition: none !important;
        animation: none !important;
    }
    .mtz-header__menu-icon span,
    .mtz-mobile-menu,
    .mtz-mobile-menu__backdrop,
    .mtz-mobile-menu__panel,
    .mtz-header__estimate,
    .mtz-header__estimate::before,
    .mtz-header__nav-link,
    .mtz-header__nav-link::after {
        animation: none !important;
        transition: none !important;
    }
     .mtz-topbar__status.is-open
    .mtz-topbar__status-dot::after {
        animation: none;
    }

    .mtz-topbar__phone {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .mtz-page-transition,
    .mtz-section-motion {
        display: none !important;
    }
}