/* ============================================================
   Website Home — home.css
   Design system: BMW M (canvas negro, type 700/300, sharp edges)
   Fuente: Inter (variable, 300-700) como sustituto de BMW Type Next
   ============================================================ */

:root {
    /* === Brand & accent (M-tricolor + electric blue) === */
    --m-blue-light:  #0066b1;
    --m-blue-dark:   #1c69d4;
    --m-red:         #e22718;
    --bmw-blue:      #1c69d4;
    --electric-blue: #0653b6;

    /* === M-tricolor gradient (signature) === */
    --m-stripe: linear-gradient(90deg,
        var(--m-blue-light) 0%,
        var(--m-blue-dark)  33.33%,
        var(--m-red)        66.66%,
        var(--m-red)        100%);

    /* === Surface (dark hierarchy) === */
    --canvas:           #000000;
    --surface-soft:     #0d0d0d;
    --surface-card:     #1a1a1a;
    --surface-elevated: #262626;
    --carbon-gray:      #2b2b2b;

    /* === Hairlines & borders === */
    --hairline:        #3c3c3c;
    --hairline-strong: #262626;

    /* === Text === */
    --on-primary: #000000;
    --on-dark:    #ffffff;
    --ink:        #ffffff;
    --body:       #bbbbbb;
    --body-strong:#e6e6e6;
    --muted:      #7e7e7e;

    /* === Semantic === */
    --warning: #f4b400;
    --success: #0fa336;

    /* === Spacing (4px base) === */
    --sp-xxs:    4px;
    --sp-xs:     8px;
    --sp-sm:    12px;
    --sp-md:    16px;
    --sp-lg:    24px;
    --sp-xl:    40px;
    --sp-xxl:   64px;
    --sp-section: 96px;

    /* === Border radius (casi siempre 0) === */
    --r-none:  0px;
    --r-xs:    2px;
    --r-sm:    4px;
    --r-md:    6px;
    --r-full: 9999px;

    /* === Typography === */
    --font-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Letter-spacing tokens */
    --ls-display:  0;
    --ls-label:    1.5px;
    --ls-nav:      0.5px;
    --ls-caption:  0.5px;

    /* === Layout === */
    --max-content: 1440px;
    --nav-h:       64px;
}

/* === Reset / Base === */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    font-weight: 300;            /* Light, body default */
    font-size: 16px;
    line-height: 1.5;
    color: var(--body);
    background: var(--canvas);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* === Display headlines: UPPERCASE 700 === */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    line-height: 1.1;
    margin: 0;
}
h1 { font-size: clamp(2.75rem, 5vw + 1rem, 5rem); line-height: 1; }      /* 48px → 80px */
h2 { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.05; }   /* 32px → 56px */
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 2.5rem); line-height: 1.15; }/* 20px → 40px */
h4 { font-size: 1.5rem; line-height: 1.2; }
h5 { font-size: 0.875rem; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--ls-label); }
h6 { font-size: 0.75rem;  line-height: 1.4; text-transform: uppercase; letter-spacing: var(--ls-label); }

p { margin: 0 0 1rem 0; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--on-dark);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* === Skip-link (a11y) === */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--ink);
    color: var(--canvas);
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
    z-index: 1060;
    transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid var(--m-blue-light);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === M-stripe divider (signature element) === */
.m-stripe {
    height: 4px;
    width: 100%;
    background: var(--m-stripe);
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
}
.m-stripe--inline {
    height: 4px;
    width: 64px;
}

/* ============================================================
   Top Nav (black, 64px, sharp edges, M logo)
   ============================================================ */
.m-nav {
    background: var(--canvas);
    color: var(--on-dark);
    height: var(--nav-h);
    border-bottom: 1px solid var(--hairline-strong);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
}

.m-nav__inner {
    max-width: var(--max-content);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--sp-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
}

.m-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--ink);
    text-decoration: none;
}
.m-nav__brand:hover { color: var(--ink); }

.m-nav__logo-img {
    height: 40px;
    width: auto;
    flex: 0 0 auto;
    display: block;
}

.m-nav__logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
}
.m-nav__logo-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--ink);
    line-height: 1.1;
    white-space: nowrap;
}
.m-nav__logo-sub {
    font-size: 0.6875rem;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
}

.m-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--sp-xl);
    list-style: none;
    padding: 0;
    margin: 0;
}

.m-nav__link {
    color: var(--body);
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-nav);
    text-decoration: none;
    padding: var(--sp-xs) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.m-nav__link:hover {
    color: var(--ink);
    border-bottom-color: var(--m-blue-light);
}
.m-nav__link[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--m-red);
}

.m-nav__cta {
    display: inline-block;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    padding: 0.75rem 1.5rem;
    height: 40px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: var(--r-none);
    line-height: 1;
}
.m-nav__cta:hover {
    background: var(--ink);
    color: var(--canvas);
}

.m-nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink);
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: var(--r-none);
}
.m-nav__toggle:focus { outline: 2px solid var(--m-blue-light); outline-offset: 2px; }

@media (max-width: 1023.98px) {
    .m-nav__menu,
    .m-nav__cta { display: none; }
    .m-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* === Mobile offcanvas (full-screen black overlay with M-stripe) === */
.m-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    background: var(--canvas);
    color: var(--on-dark);
    border-left: 1px solid var(--hairline-strong);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1055;
    display: flex;
    flex-direction: column;
}
.m-offcanvas.is-open { transform: translateX(0); }

.m-offcanvas__stripe { /* M-stripe at the top */
    flex: 0 0 auto;
}

.m-offcanvas__header {
    flex: 0 0 auto;
    padding: var(--sp-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--hairline-strong);
}

.m-offcanvas__close {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink);
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: var(--r-none);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.m-offcanvas__close:hover { border-color: var(--m-red); color: var(--m-red); }

.m-offcanvas__body {
    flex: 1 1 auto;
    padding: var(--sp-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.m-offcanvas__nav {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-xl) 0;
}
.m-offcanvas__nav li { border-bottom: 1px solid var(--hairline-strong); }
.m-offcanvas__nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-md) 0;
    color: var(--body);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-nav);
    text-decoration: none;
}
.m-offcanvas__nav a:hover,
.m-offcanvas__nav a[aria-current="page"] {
    color: var(--ink);
}
.m-offcanvas__nav a i { color: var(--m-blue-light); font-size: 1.25rem; width: 28px; }

.m-offcanvas__cta {
    margin-top: auto;
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
}
.m-offcanvas__cta a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    background: var(--ink);
    color: var(--canvas);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
}
.m-offcanvas__contact {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 300;
}
.m-offcanvas__contact a { color: var(--muted); text-decoration: none; }
.m-offcanvas__contact a:hover { color: var(--ink); }
.m-offcanvas__contact p { margin: 0 0 var(--sp-xs) 0; }
.m-offcanvas__contact i { color: var(--m-blue-light); margin-right: var(--sp-xs); }

.m-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.m-offcanvas-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   Hero (full-bleed photo band, UPPERCASE display)
   ============================================================ */
.m-hero {
    position: relative;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--on-dark);
    padding: calc(var(--nav-h) + var(--sp-xxl)) var(--sp-lg) var(--sp-xxl);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.m-hero__grid {
    max-width: var(--max-content);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-xxl);
    align-items: center;
}

.m-hero__copy { display: flex; flex-direction: column; gap: var(--sp-lg); }

.m-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.m-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 4px;
    background: var(--m-stripe);
}

.m-hero__title {
    font-size: clamp(2.75rem, 5vw + 1rem, 5rem);
    line-height: 1;
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}
.m-hero__title em {
    font-style: normal;
    color: var(--m-red);
    position: relative;
}
.m-hero__title em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 4px;
    background: var(--m-stripe);
}

.m-hero__lede {
    color: var(--body);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 540px;
    margin: 0;
}

.m-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
}

.m-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
}
.m-hero__meta i { color: var(--m-blue-light); }

.m-hero__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.m-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%) contrast(1.05);
}

.m-hero__badge {
    position: absolute;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    padding: var(--sp-md);
    color: var(--ink);
    min-width: 160px;
}
.m-hero__badge--top { top: var(--sp-lg); right: -16px; }
.m-hero__badge--bot { bottom: var(--sp-lg); left: -16px; }

.m-hero__badge-icon {
    color: var(--m-red);
    font-size: 1.25rem;
    margin-bottom: var(--sp-xs);
}
.m-hero__badge-value {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--ink);
    line-height: 1;
}
.m-hero__badge-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin-top: var(--sp-xs);
    font-weight: 400;
}

@media (max-width: 1023.98px) {
    .m-hero { padding: calc(var(--nav-h) + var(--sp-xl)) var(--sp-md) var(--sp-xl); min-height: auto; }
    .m-hero__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .m-hero__media { aspect-ratio: 16 / 10; }
    .m-hero__badge--top { right: var(--sp-md); top: var(--sp-md); }
    .m-hero__badge--bot { left: var(--sp-md); bottom: var(--sp-md); }
}

/* ============================================================
   Buttons (sharp, white outline, uppercase)
   ============================================================ */
.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    height: 48px;
    padding: 0 var(--sp-xl);
    font-family: var(--font-base);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1;
    border-radius: var(--r-none);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--canvas);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.m-btn:hover { background: var(--m-red); border-color: var(--m-red); color: var(--ink); }

.m-btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.m-btn--outline:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.m-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline);
}
.m-btn--ghost:hover { border-color: var(--m-blue-light); color: var(--m-blue-light); background: transparent; }

.m-btn--stripe {
    background: var(--m-stripe);
    color: var(--ink);
    border: 0;
    height: 4px;
    padding: 0;
    width: 64px;
    transition: width 0.3s ease;
}
.m-btn--stripe:hover { width: 96px; background: var(--m-stripe); }

.m-btn--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--r-full);
    background: var(--surface-card);
    color: var(--ink);
    border: 1px solid var(--hairline);
}
.m-btn--icon:hover { border-color: var(--m-red); color: var(--m-red); background: var(--surface-card); }

/* ============================================================
   Sections (96px between bands, 64px internal padding)
   ============================================================ */
.m-section {
    padding: var(--sp-section) var(--sp-lg);
    background: var(--canvas);
    color: var(--on-dark);
    border-top: 1px solid var(--hairline-strong);
}
.m-section--alt { background: var(--surface-soft); }

.m-section__inner {
    max-width: var(--max-content);
    margin: 0 auto;
}

.m-section__head {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--sp-xl);
    align-items: end;
    margin-bottom: var(--sp-xxl);
}
.m-section__head--center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.m-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin-bottom: var(--sp-md);
}
.m-eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 4px;
    background: var(--m-stripe);
}

.m-section__title {
    font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
    line-height: 1.05;
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.m-section__lede {
    color: var(--body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 560px;
}

@media (max-width: 1023.98px) {
    .m-section { padding: var(--sp-xxl) var(--sp-md); }
    .m-section__head { grid-template-columns: 1fr; gap: var(--sp-md); }
}

/* ============================================================
   Stats (4 spec cells, dark surface, white numbers)
   ============================================================ */
.m-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hairline-strong);
    border: 1px solid var(--hairline-strong);
}
.m-stats__cell {
    background: var(--surface-soft);
    padding: var(--sp-xl) var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.m-stats__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}
.m-stats__label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: 400;
}

@media (max-width: 1023.98px) {
    .m-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .m-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Services (3-up grid, dark surface cards, sharp corners)
   ============================================================ */
.m-grid {
    display: grid;
    gap: 1px;
    background: var(--hairline-strong);
    border: 1px solid var(--hairline-strong);
}
.m-grid--3 { grid-template-columns: repeat(3, 1fr); }
.m-grid--2 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023.98px) {
    .m-grid--3, .m-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .m-grid--3, .m-grid--2 { grid-template-columns: 1fr; }
}

.m-card {
    background: var(--surface-card);
    color: var(--on-dark);
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    min-height: 280px;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: 0;
}
.m-card:hover { background: var(--surface-elevated); }
.m-card:hover .m-card__icon { color: var(--m-red); }

.m-card__icon {
    color: var(--m-blue-light);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--sp-sm);
    transition: color 0.2s ease;
}

.m-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.m-card__desc {
    color: var(--body);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}

.m-card__link {
    margin-top: auto;
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
}
.m-card__link::after { content: '→'; transition: transform 0.2s ease; }
.m-card__link:hover { color: var(--m-red); }
.m-card__link:hover::after { transform: translateX(4px); }

/* ============================================================
   Locations (3-up grid, dark cards with M tricolor top stripe)
   ============================================================ */
.m-loc {
    background: var(--surface-card);
    padding: var(--sp-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    align-items: center;
    position: relative;
}
.m-loc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-loc__flag {
    width: 64px;
    height: 64px;
    border-radius: var(--r-full);
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    color: var(--m-blue-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--sp-md);
    margin-top: var(--sp-sm);
}
.m-loc__name {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.1;
    margin: 0;
}
.m-loc__desc {
    color: var(--body);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 280px;
    margin: 0;
}

/* ============================================================
   Testimonials (3-up grid, dark cards with M tricolor top stripe,
   5-star rating, source badge, blockquote, author block)
   ============================================================ */
.m-testimonials__score {
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    align-self: end;
    min-width: 240px;
    position: relative;
}
.m-testimonials__score::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-testimonials__score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
}
.m-testimonials__score-value span {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: var(--sp-xs);
}
.m-testimonials__score-stars {
    color: var(--m-red);
    font-size: 1rem;
    display: inline-flex;
    gap: 2px;
    letter-spacing: 0;
}
.m-testimonials__score-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-xs);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--hairline-strong);
}
.m-testimonials__score-count {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: 400;
}
.m-testimonials__score-sources {
    display: inline-flex;
    gap: var(--sp-sm);
    color: var(--body);
    font-size: 1.125rem;
}
.m-testimonials__score-sources i { color: var(--body); }

.m-testimonial {
    background: var(--surface-card);
    color: var(--on-dark);
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    position: relative;
    transition: background-color 0.2s ease;
    border-radius: 0;
}
.m-testimonial:hover { background: var(--surface-elevated); }
.m-testimonial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}

.m-testimonial__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.m-testimonial__stars {
    color: var(--m-red);
    font-size: 0.875rem;
    display: inline-flex;
    gap: 2px;
    letter-spacing: 0;
}
.m-testimonial__source {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 4px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    border: 1px solid var(--hairline);
    color: var(--body);
    background: var(--surface-soft);
}
.m-testimonial__source i { font-size: 0.875rem; }
.m-testimonial__source--google i { color: var(--m-blue-light); }
.m-testimonial__source--facebook i { color: var(--bmw-blue); }

.m-testimonial__quote {
    margin: 0;
    flex: 1 1 auto;
    position: relative;
    padding-top: var(--sp-lg);
}
.m-testimonial__quote-mark {
    position: absolute;
    top: -4px;
    left: 0;
    color: var(--m-red);
    font-size: 2rem;
    line-height: 1;
    opacity: 0.5;
}
.m-testimonial__quote p {
    color: var(--body-strong);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

.m-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--hairline-strong);
}
.m-testimonial__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.m-testimonial__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.m-testimonial__name {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-testimonial__role {
    color: var(--body);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-testimonial__date {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1.3;
    margin-top: 2px;
}

.m-testimonials__cta {
    display: flex;
    gap: var(--sp-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-xxl);
}

@media (max-width: 1023.98px) {
    .m-testimonials__score { align-self: start; min-width: 0; }
}

/* ============================================================
   Pricing (single centered card, M-tricolor stripe top,
   oversized price display, feature check list, primary CTA)
   ============================================================ */
.m-pricing-wrap {
    display: flex;
    justify-content: center;
}

.m-pricing {
    width: 100%;
    max-width: 640px;
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    padding: var(--sp-xxl) var(--sp-xl);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    border-radius: 0;
}
.m-pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}

.m-pricing__label {
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1;
}

.m-pricing__price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-xs);
    line-height: 0.9;
    margin-top: var(--sp-xs);
}
.m-pricing__price-currency {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0;
}
.m-pricing__price-value {
    font-size: clamp(4rem, 8vw, 6rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.m-pricing__suffix {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin: 0;
}

.m-pricing__divider {
    height: 1px;
    background: var(--hairline-strong);
    border: 0;
    margin: var(--sp-sm) 0 0 0;
    padding: 0;
}

.m-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.m-pricing__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    color: var(--body-strong);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.4;
}
.m-pricing__feature i {
    color: var(--m-blue-light);
    font-size: 1.125rem;
    flex: 0 0 auto;
    line-height: 1.3;
}
.m-pricing__feature span { flex: 1 1 auto; }

.m-pricing__cta {
    margin-top: var(--sp-md);
    width: 100%;
}

@media (max-width: 575.98px) {
    .m-pricing { padding: var(--sp-xl) var(--sp-lg); }
}

/* ============================================================
   Portfolio (full-bleed photo cards, 3-up grid)
   ============================================================ */
.m-grid--photo { gap: 1px; background: var(--canvas); border: 0; }

.m-photo-card {
    position: relative;
    background: var(--canvas);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
.m-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: grayscale(20%) contrast(1.05);
}
.m-photo-card:hover img { transform: scale(1.03); filter: grayscale(0%) contrast(1.1); }

.m-photo-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-lg);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.m-photo-card__cat {
    color: var(--m-red);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1;
}
.m-photo-card__title {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}
.m-photo-card__client {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-nav);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
}
.m-photo-card__client i { color: var(--m-blue-light); }

.m-section__action {
    margin-top: var(--sp-xl);
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   CTA band (pre-footer, black with M tricolor button)
   ============================================================ */
.m-cta {
    background: var(--canvas);
    color: var(--on-dark);
    padding: var(--sp-section) var(--sp-lg);
    text-align: center;
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
}
.m-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    align-items: center;
}
.m-cta__title {
    font-size: clamp(2rem, 3vw + 1rem, 3rem);
    line-height: 1.05;
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}
.m-cta__lede {
    color: var(--body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 540px;
    margin: 0;
}
.m-cta__contact {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
    justify-content: center;
}
.m-cta__contact a { color: var(--muted); text-decoration: none; }
.m-cta__contact a:hover { color: var(--ink); }
.m-cta__contact i { color: var(--m-blue-light); margin-right: var(--sp-xs); }

/* ============================================================
   Footer (black, hairline dividers, 4 columns)
   ============================================================ */
.m-footer {
    background: var(--canvas);
    color: var(--body);
    padding: var(--sp-xxl) var(--sp-lg) var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
    position: relative;
}
.m-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-footer__inner {
    max-width: var(--max-content);
    margin: 0 auto;
}
.m-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--sp-xl);
    padding-bottom: var(--sp-xl);
    border-bottom: 1px solid var(--hairline-strong);
}
@media (max-width: 1023.98px) {
    .m-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
}
@media (max-width: 575.98px) {
    .m-footer__grid { grid-template-columns: 1fr; }
}

.m-footer__brand p {
    color: var(--body);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.5;
    margin: var(--sp-md) 0;
    max-width: 320px;
}
.m-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--ink);
    text-decoration: none;
    margin-bottom: var(--sp-md);
}
.m-footer__logo:hover { color: var(--ink); }
.m-footer__logo-img {
    height: 56px;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
.m-footer__logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
}
.m-footer__logo-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--ink);
    line-height: 1.1;
}
.m-footer__logo-sub {
    font-size: 0.75rem;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    line-height: 1.2;
    margin-top: 4px;
}

.m-footer__contact {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 300;
}
.m-footer__contact a { color: var(--muted); text-decoration: none; }
.m-footer__contact a:hover { color: var(--ink); }
.m-footer__contact p { margin: 0 0 var(--sp-xs) 0; display: flex; align-items: flex-start; gap: var(--sp-xs); }
.m-footer__contact i { color: var(--m-blue-light); margin-top: 4px; }

.m-footer__heading {
    font-size: 0.75rem;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: 700;
    margin: 0 0 var(--sp-md) 0;
}
.m-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.m-footer__list a {
    color: var(--body);
    font-size: 0.875rem;
    font-weight: 300;
    text-decoration: none;
    transition: color 0.2s ease;
}
.m-footer__list a:hover { color: var(--ink); }

.m-footer__social {
    display: flex;
    gap: var(--sp-xs);
    margin-top: var(--sp-md);
}
.m-footer__social a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline);
    color: var(--body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.m-footer__social a:hover { color: var(--m-red); border-color: var(--m-red); }

.m-footer__bottom {
    padding-top: var(--sp-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-md);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.m-footer__bottom p { margin: 0; }
.m-footer__bottom a { color: var(--muted); text-decoration: none; }
.m-footer__bottom a:hover { color: var(--ink); }

/* ============================================================
   WhatsApp float (icon button, bottom-right)
   ============================================================ */
.m-whatsapp {
    position: fixed;
    bottom: var(--sp-lg);
    right: var(--sp-lg);
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    background: var(--m-red);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    z-index: 1050;
    box-shadow: 0 0 0 4px rgba(226, 39, 24, 0.2);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.m-whatsapp:hover {
    color: var(--ink);
    box-shadow: 0 0 0 8px rgba(226, 39, 24, 0.2);
    transform: scale(1.05);
}
@media (max-width: 575.98px) {
    .m-whatsapp { width: 52px; height: 52px; bottom: var(--sp-md); right: var(--sp-md); }
}

/* === Bootstrap overrides for dark theme === */
body.bg-light, section.bg-light { background-color: var(--canvas) !important; color: var(--body) !important; }
.text-muted { color: var(--muted) !important; }
.text-dark  { color: var(--ink) !important; }
.text-white { color: var(--ink) !important; }
.text-white-50 { color: var(--muted) !important; }
.text-primary { color: var(--m-blue-light) !important; }
.bg-white { background-color: var(--surface-card) !important; }
.bg-soft  { background-color: var(--surface-soft) !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg { box-shadow: none !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5 { border-radius: 0 !important; }

/* ============================================================
   Page Hero (band reutilizable: título + breadcrumb + lede)
   Usado en páginas internas: blog, portfolio, contacto, etc.
   ============================================================ */
.m-page-hero {
    background: var(--surface-soft);
    color: var(--on-dark);
    padding: calc(var(--nav-h) + var(--sp-xl)) var(--sp-lg) var(--sp-xl);
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
    overflow: hidden;
}
.m-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at top right,
        rgba(0, 102, 177, 0.10) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.m-page-hero__inner {
    max-width: var(--max-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    position: relative;
    z-index: 1;
}

.m-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    align-self: flex-start;
}
.m-page-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 4px;
    background: var(--m-stripe);
    flex: 0 0 auto;
}

.m-page-hero__title {
    font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
    line-height: 1.05;
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    max-width: 900px;
}

.m-page-hero__lede {
    color: var(--body);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 720px;
    margin: 0;
}

.m-page-hero__breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: var(--sp-sm) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.m-page-hero__breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
}
.m-page-hero__breadcrumb li + li::before {
    content: '/';
    color: var(--hairline);
    margin-right: var(--sp-xs);
    font-weight: 300;
}
.m-page-hero__breadcrumb a {
    color: var(--body);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--hairline-strong);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.m-page-hero__breadcrumb a:hover {
    color: var(--ink);
    border-color: var(--m-blue-light);
    background: var(--surface-card);
}
.m-page-hero__breadcrumb a i { color: var(--m-blue-light); font-size: 0.875rem; }
.m-page-hero__breadcrumb li[aria-current="page"] span {
    color: var(--ink);
    font-weight: 700;
    padding: 4px 8px;
    border: 1px solid var(--m-red);
    background: var(--surface-card);
}

@media (max-width: 575.98px) {
    .m-page-hero { padding: calc(var(--nav-h) + var(--sp-lg)) var(--sp-md) var(--sp-lg); }
    .m-page-hero__breadcrumb ol { font-size: 0.6875rem; }
}

/* ============================================================
   Blog List (tarjetas de artículos en grid 3-up)
   M-tricolor stripe superior, image media, body con contraste
   ============================================================ */
.m-blog-grid { background: var(--hairline-strong); border-color: var(--hairline-strong); }

.m-blog-card {
    background: var(--surface-card);
    color: var(--on-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 0;
    overflow: hidden;
}
.m-blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
    z-index: 2;
}
.m-blog-card:hover { background: var(--surface-elevated); }
.m-blog-card:hover .m-blog-card__img { transform: scale(1.04); filter: grayscale(0%) contrast(1.1); }
.m-blog-card:hover .m-blog-card__link { color: var(--m-red); }
.m-blog-card:hover .m-blog-card__link i { transform: translateX(4px); }

.m-blog-card__media-link {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--canvas);
    position: relative;
}
.m-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
    filter: grayscale(20%) contrast(1.05);
    display: block;
}

.m-blog-card__body {
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    flex: 1 1 auto;
}

.m-blog-card__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--m-blue-light);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    line-height: 1;
}
.m-blog-card__date i { font-size: 0.875rem; }

.m-blog-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0;
}
.m-blog-card__title-link {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}
.m-blog-card__title-link:hover { color: var(--m-blue-light); }

.m-blog-card__desc {
    color: var(--body);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}

.m-blog-card__link {
    margin-top: var(--sp-sm);
    color: var(--m-blue-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--hairline-strong);
    transition: color 0.2s ease;
}
.m-blog-card__link i { transition: transform 0.2s ease; }

.m-blog-list__empty {
    text-align: center;
    color: var(--muted);
    padding: var(--sp-xl) 0;
}

/* ============================================================
   Article Hero (extensión de m-page-hero con subtítulo + meta)
   ============================================================ */
.m-article-hero {
    padding-bottom: var(--sp-lg);
}
.m-article-hero__title {
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.1;
    max-width: 1000px;
}
.m-article-hero__subtitle {
    color: var(--body-strong);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.45;
    max-width: 800px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
.m-article-hero__meta {
    list-style: none;
    padding: 0;
    margin: var(--sp-md) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm) var(--sp-lg);
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.m-article-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.m-article-hero__meta i {
    color: var(--m-blue-light);
    font-size: 0.9375rem;
}
.m-article-hero__meta time,
.m-article-hero__meta span {
    color: var(--body);
}

/* ============================================================
   Article Cover (full-width cover image, sharp edges, M-stripe)
   ============================================================ */
.m-article-cover {
    margin: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
    overflow: hidden;
    max-height: 560px;
}
.m-article-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
    z-index: 2;
}
.m-article-cover img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    display: block;
    filter: grayscale(15%) contrast(1.05);
}

/* ============================================================
   Article Body (container 2-col: main + sidebar)
   ============================================================ */
.m-article {
    background: var(--canvas);
    color: var(--on-dark);
    padding: var(--sp-xxl) var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
}
.m-article__inner {
    max-width: var(--max-content);
    margin: 0 auto;
}
.m-article__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-xxl);
    align-items: start;
}
.m-article__main {
    min-width: 0;
}
.m-article__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-lg));
}
@media (max-width: 1023.98px) {
    .m-article { padding: var(--sp-xl) var(--sp-md); }
    .m-article__layout { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .m-article__sidebar { position: static; }
}

/* === Article content typography (TinyMCE HTML) === */
.m-article__content {
    color: var(--body-strong);
    font-size: 1.0625rem;
    line-height: 1.75;
    font-weight: 300;
    max-width: 72ch;
}
.m-article__content > *:first-child { margin-top: 0; }
.m-article__content > *:last-child  { margin-bottom: 0; }

.m-article__content p {
    margin: 0 0 var(--sp-lg) 0;
}
.m-article__content p:last-child { margin-bottom: 0; }

.m-article__content h2,
.m-article__content h3,
.m-article__content h4 {
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
    margin: var(--sp-xl) 0 var(--sp-md) 0;
    letter-spacing: 0;
}
.m-article__content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
}
.m-article__content h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 4px;
    background: var(--m-stripe);
}
.m-article__content h3 { font-size: 1.375rem; }
.m-article__content h4 { font-size: 1.125rem; letter-spacing: 1px; }

.m-article__content a {
    color: var(--m-blue-light);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.m-article__content a:hover {
    color: var(--m-red);
    text-decoration-color: var(--m-red);
}

.m-article__content strong { color: var(--ink); font-weight: 700; }
.m-article__content em { color: var(--body-strong); font-style: italic; }

.m-article__content ul,
.m-article__content ol {
    padding-left: var(--sp-lg);
    margin: 0 0 var(--sp-lg) 0;
}
.m-article__content ul li,
.m-article__content ol li {
    margin-bottom: var(--sp-xs);
    padding-left: var(--sp-xs);
}
.m-article__content ul li::marker { color: var(--m-red); }
.m-article__content ol li::marker { color: var(--m-blue-light); font-weight: 700; }

.m-article__content blockquote {
    margin: var(--sp-xl) 0;
    padding: var(--sp-md) var(--sp-lg);
    border-left: 4px solid var(--m-blue-light);
    background: var(--surface-soft);
    color: var(--body-strong);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
}
.m-article__content blockquote p { margin: 0 0 var(--sp-sm) 0; }
.m-article__content blockquote p:last-child { margin: 0; }
.m-article__content blockquote cite {
    display: block;
    margin-top: var(--sp-sm);
    color: var(--muted);
    font-size: 0.8125rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: 700;
}

.m-article__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--sp-lg) auto;
    border: 1px solid var(--hairline-strong);
}
.m-article__content figure {
    margin: var(--sp-lg) 0;
}
.m-article__content figcaption {
    margin-top: var(--sp-sm);
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.m-article__content code {
    background: var(--surface-soft);
    color: var(--m-blue-light);
    padding: 2px 6px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.9em;
    border: 1px solid var(--hairline-strong);
}
.m-article__content pre {
    background: var(--surface-soft);
    border: 1px solid var(--hairline-strong);
    padding: var(--sp-md);
    overflow-x: auto;
    margin: var(--sp-lg) 0;
    border-left: 4px solid var(--m-red);
}
.m-article__content pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--body-strong);
}

.m-article__content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-lg) 0;
    background: var(--surface-soft);
    border: 1px solid var(--hairline-strong);
}
.m-article__content th,
.m-article__content td {
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--hairline-strong);
    text-align: left;
    color: var(--body-strong);
}
.m-article__content th {
    background: var(--surface-card);
    color: var(--ink);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: var(--ls-label);
}

.m-article__content hr {
    border: 0;
    height: 4px;
    background: var(--m-stripe);
    margin: var(--sp-xl) 0;
    width: 64px;
}

.m-article__content iframe {
    max-width: 100%;
    border: 1px solid var(--hairline-strong);
    display: block;
    margin: var(--sp-lg) 0;
}

/* === Article tags (pills) === */
.m-article__tags {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}
.m-article__tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    padding: 6px 0;
    flex: 0 0 auto;
}
.m-article__tags-label i { color: var(--m-blue-light); }
.m-article__tags ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.m-article__tags li a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    color: var(--body);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--hairline-strong);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.m-article__tags li a::before {
    content: '#';
    color: var(--m-red);
    margin-right: 2px;
}
.m-article__tags li a:hover {
    color: var(--ink);
    background: var(--surface-card);
    border-color: var(--m-blue-light);
}

/* === Article footer (back to blog) === */
.m-article__footer {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--hairline-strong);
}

/* === Article sidebar: author block === */
.m-article-sidebar__author {
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    padding: var(--sp-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    position: relative;
}
.m-article-sidebar__author::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-article-sidebar__author-avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.m-article-sidebar__author-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.m-article-sidebar__author-label {
    color: var(--m-blue-light);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.m-article-sidebar__author-name {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Article sidebar: related list === */
.m-article-sidebar__related {
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    padding: var(--sp-lg);
    position: relative;
}
.m-article-sidebar__related::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--m-stripe);
}
.m-article-sidebar__heading {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin: 0 0 var(--sp-md) 0;
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--hairline-strong);
}
.m-article-sidebar__related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.m-article-sidebar__related li {
    border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: var(--sp-md);
}
.m-article-sidebar__related li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.m-article-sidebar__related-link {
    display: flex;
    gap: var(--sp-sm);
    text-decoration: none;
    color: var(--body-strong);
    transition: color 0.2s ease;
}
.m-article-sidebar__related-link:hover { color: var(--m-blue-light); }
.m-article-sidebar__related-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    display: block;
}
.m-article-sidebar__related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(20%);
}
.m-article-sidebar__related-link:hover .m-article-sidebar__related-thumb img {
    transform: scale(1.05);
    filter: grayscale(0%);
}
.m-article-sidebar__related-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.m-article-sidebar__related-title {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.m-article-sidebar__related-link:hover .m-article-sidebar__related-title { color: var(--m-blue-light); }
.m-article-sidebar__related-date {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.m-article-sidebar__related-date i { color: var(--m-blue-light); font-size: 0.8125rem; }

/* ============================================================
   Blog 404 (artículo no encontrado)
   ============================================================ */
.m-blog-404 {
    text-align: center;
    padding: var(--sp-xl) 0;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-lg);
}
.m-blog-404__code {
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 700;
    line-height: 1;
    background: var(--m-stripe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.m-blog-404__lede {
    color: var(--body);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}
.m-blog-404__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    justify-content: center;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}