/* =====================================================
    SoundMetric - Master System 2026 PRO
    Jerarquía: Settings > Tools > Generic > Elements > Objects > Components > Utilities
    Blindaje: Anti-Ghosting | 0.00 CLS | GPU Hardening | Hero Scaling Fix
   ===================================================== */

/* --- 1. SETTINGS: DESIGN TOKENS --- */
:root {
    color-scheme: dark;
    --sm-header-height: 88px;
    --sm-green: #1ED760;
    --sm-black: #000000;
    --sm-white: #ffffff;
    --sm-overlay: #151515;
    --z-header: 1000000;
    --z-preloader: 2000;
    --btn-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --reveal-timing: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 1199px) { :root { --sm-header-height: 70px; } }

/* --- 2. TOOLS: ANIMATION ENGINE (GPU OPTIMIZED) --- */
@keyframes smFadeUp { 
    from { opacity: 0; transform: translate3d(0, 30px, 0); } 
    to { opacity: 1; transform: translate3d(0, 0, 0); } 
}
@keyframes smPulse { 0%, 100% { opacity: .3; transform: scaleX(.6); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes sm-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.sm-reveal { 
    opacity: 0; 
    will-change: transform, opacity; 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; 
}

.is-visible .sm-reveal, .sm-hero .sm-reveal, .sm-reveal.is-visible { 
    animation: smFadeUp 1.2s var(--reveal-timing) forwards !important; 
}

@supports (animation-timeline: view()) {
    section:not(.sm-hero) .sm-reveal {
        animation: smFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 15% cover 35%;
    }
}

/* --- 3. GENERIC: CORE RESET & UX --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-y: scroll; scroll-padding-top: var(--sm-header-height); }
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: var(--sm-white); background-color: var(--sm-black);
    padding-top: var(--sm-header-height);
    min-height: 100vh; overflow-x: hidden;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { text-decoration: none !important; color: inherit; transition: var(--btn-transition); }

/* --- 4. ELEMENTS: TYPOGRAPHY & MEDIA --- */
h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; margin-bottom: 24px; }
h1 { font-size: clamp(42px, 8vw, 110px); min-height: 1.1em; }
img { max-width: 100%; height: auto; display: block; aspect-ratio: attr(width) / attr(height); }

/* --- 5. OBJECTS: GRID SYSTEM --- */
.sm-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 24px; position: relative; contain: layout; }
.sm-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px; width: 100%; }
[class*="sm-col-"] { grid-column: span var(--col-span, 12); min-width: 0; }
.sm-col-8 { --col-span: 8; } .sm-col-4 { --col-span: 4; }

/* --- 6. COMPONENTS: MASTER HEADER --- */
header#header-sticky.sm-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-header);
    height: var(--sm-header-height); background-color: transparent;
    transition: background 0.3s ease; contain: layout;
}
.sm-header .sm-container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.sm-nav ul { display: flex; list-style: none; gap: 26px; }
.sm-nav a { font-size: 17px; font-weight: 500; white-space: nowrap; }

/* --- 7. COMPONENTS: HERO (SCALING FIXED) --- */
.sm-hero { 
    position: relative; 
    min-height: 100vh; /* Altura completa en Desktop */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    z-index: 1; 
    contain: layout; 
}

.sm-hero__media, .sm-hero__img { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 0; 
}

/* Overlay sutil para legibilidad */
.sm-hero::before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, var(--sm-black) 100%); 
    z-index: 1; 
}

/* REGLA MAESTRA DE REDUCCIÓN */
@media (max-width: 991px) {
    .sm-hero {
        min-height: 80vh; /* Al reducir el alto, la imagen se "aleja" y se ve más contenido */
    }
    .sm-hero__img {
        object-position: center 20%; /* Enfocamos la parte superior de la foto */
    }
}

@media (max-width: 767px) {
    .sm-hero {
        min-height: 70vh; /* Altura ideal para móviles: imagen clara y texto legible */
        padding-top: calc(var(--sm-header-height) + 40px);
    }
}

/* --- 8. COMPONENTS: TESTIMONIALS & PARTNERS --- */
.sm-testimonials { background-color: #0b0b0b; position: relative; overflow: hidden; }
.sm-partners { text-align: center; margin-bottom: 80px; width: 100%; }
.sm-partners__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); margin-bottom: 30px; font-weight: 700; }
.sm-partners__slider { 
    overflow: hidden; white-space: nowrap; position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.sm-partners__track { display: inline-block; animation: sm-ticker 40s linear infinite; will-change: transform; }
.sm-partners__track span { font-size: 22px; font-weight: 800; color: rgba(255,255,255,0.15); margin-right: 60px; transition: 0.3s; }

.sm-testimonial-wrapper { max-width: 900px; margin: 0 auto; text-align: center; position: relative; min-height: 300px; }
.sm-testimonial-item { display: none; opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.6s ease, transform 0.6s ease; }
.sm-testimonial-item.active { display: block !important; opacity: 1 !important; transform: translate3d(0, 0, 0) !important; }

/* --- 9. UTILITIES: MÁRGENES 120PX --- */
.sm-padding { padding-block: 120px; }
@media (max-width: 767px) { .sm-padding { padding-block: 80px; } }

.u-text-green { color: var(--sm-green) !important; }
.sm-news-card__media, .sm-hero__media { background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%); background-size: 200% 100%; animation: sm-shimmer 2s infinite linear; }

/* --- 10. PRELOADER & STICKY --- */
.sm-preloader { position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--sm-black); display: flex; align-items: center; justify-content: center; contain: strict; }
.sm-preloader.is-hidden { opacity: 0; visibility: hidden; transition: 0.45s ease; }
.sm-preloader__pulse { width: 42px; height: 4px; background: var(--sm-green); animation: smPulse 1.4s infinite; }

#header-sticky.sticky { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Scrollbar Style */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; border: 2px solid var(--sm-black); }
/* =====================================================
    SOUNDMETRIC MASTER HEADER - SENIOR SYSTEM 2026
    Blindaje: GPU Performance | 0 CLS | 10/10 Architecture
    Fix: Full-Width Hover & Optimized Logo Scale
   ===================================================== */

header#header-sticky.sm-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000;
    pointer-events: auto;
    background-color: transparent;
    
    /* Hardening: Estabilidad de renderizado GPU */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

/* Capas de profundidad y cursores */
html body .mouseCursor, 
html body .cursor-inner, 
html body .cursor-outer { 
    pointer-events: none; 
}

/* ================= HEADER BASE ================= */
#header-sticky .sm-header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 14px;
    min-height: var(--sm-header-height);
    width: 100%;
    /* BLINDAJE: Evita que los elementos se toquen en pantallas pequeñas */
    gap: 15px; 
    contain: layout;
}

/* ================= LOGO (ESTABLE Y FLEXIBLE) ================= */
#header-sticky .sm-header__logo {
    display: flex;
    align-items: center;
    /* Eliminamos márgenes fijos que rompen el móvil; se controlan con el container */
    margin: 0; 
    min-height: 48px;
    /* BLINDAJE: Permite que el logo ceda espacio si el botón lo necesita */
    flex-shrink: 1; 
    min-width: 0;
}

#header-sticky .sm-header__logo a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
}

#header-sticky .sm-header__logo img {
    /* Mantenemos tus medidas originales */
    width: 165px; 
    height: 40px;
    display: block;
    object-fit: contain;
    aspect-ratio: 165 / 40;
    /* CORRECCIÓN: Nunca usar 'none' en responsive; 100% asegura que se adapte */
    max-width: 100%; 
    transition: width 0.3s ease;
}

/* ================= HEADER RIGHT & UTILS ================= */
#header-sticky .sm-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    /* BLINDAJE: El grupo de botones nunca se encoge */
    flex-shrink: 0; 
    margin: 0;
}

#header-sticky .sm-header__icon, 
#header-sticky .header-right-icon,
#header-sticky .search-toggler { 
    display: none; 
}

/* ================= HAMBURGER ================= */
#header-sticky .sm-hamburger-toggle {
    width: 50px;
    height: 50px;
    background-color: var(--sm-white);
    color: var(--sm-black); /* Color inicial del icono */
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* BLINDAJE: El botón nunca se deforma ni se encoge */
    flex: 0 0 50px; 
    transition: var(--btn-transition);
    touch-action: manipulation;
    outline: none;
    position: relative;
    z-index: 2;
}

/* Hover: Feedback para Desktop */
#header-sticky .sm-hamburger-toggle:hover { 
    background-color: var(--sm-green); 
    color: var(--sm-black); 
    transform: translateY(-2px);
}

/* Senior Polish: Feedback Táctil para Móvil (Tap Target) */
#header-sticky .sm-hamburger-toggle:active {
    transform: scale(0.92); /* Efecto de click/toque */
    background-color: var(--sm-green);
    transition: transform 0.1s ease;
}

/* ================= REFINAMIENTO PARA PANTALLAS MINI (320px - 360px) ================= */
@media (max-width: 360px) {
    #header-sticky .sm-header__logo img {
        /* Ajuste fino: un poco más pequeño para dejar aire al botón */
        width: 120px; 
    }
    #header-sticky .sm-hamburger-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
}

/* ================= NAVIGATION & METRIC INDICATOR ================= */
#header-sticky .sm-nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none;
    display: flex;
}

#header-sticky .sm-nav ul li {
    position: relative;
    margin-inline-end: 26px;
}

#header-sticky .sm-nav ul li:last-child { margin-inline-end: 0; }

#header-sticky .sm-nav ul li > a {
    font-size: 17px;
    font-weight: 500;
    color: var(--sm-white);
    padding-block: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.1;
    text-decoration: none;
    transition: color 0.3s ease;
}

#header-sticky .sm-nav ul li > a::before {
    content: ""; 
    width: 14px; 
    height: 16px; 
    display: inline-block; 
    border-radius: 10px;
    opacity: 0; 
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    background:
        linear-gradient(var(--sm-green) 0 0) left bottom / 3px 4px no-repeat,
        linear-gradient(var(--sm-green) 0 0) center bottom / 3px 7px no-repeat,
        linear-gradient(var(--sm-green) 0 0) right bottom / 3px 10px no-repeat;
}

#header-sticky .sm-nav ul li:hover > a { color: var(--sm-green); }
#header-sticky .sm-nav ul li:hover > a::before {
    opacity: 1; 
    transform: translateY(0);
    background:
        linear-gradient(var(--sm-green) 0 0) left bottom / 3px 6px no-repeat,
        linear-gradient(var(--sm-green) 0 0) center bottom / 3px 10px no-repeat,
        linear-gradient(var(--sm-green) 0 0) right bottom / 3px 16px no-repeat;
}

/* ================= DROPDOWNS (FULL WIDTH HOVER FIX) ================= */
#header-sticky .sm-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: var(--sm-black);
    border-block-start: 3px solid var(--sm-green);
    border-radius: 0 0 14px 14px;
    padding-block: 10px;
    padding-inline: 0; /* IMPORTANTE: 0 padding lateral para el hover a sangre */
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 99999;
    will-change: transform, opacity;
}

#header-sticky .sm-nav ul li:hover > .sm-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#header-sticky .sm-submenu li {
    display: block;
    width: 100%;
}

#header-sticky .sm-submenu li a {
    display: block;
    width: 100%;
    color: var(--sm-white);
    font-size: 16px;
    font-weight: 500;
    padding: 12px 25px; /* Padding interno que simula el ancho total */
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

#header-sticky .sm-submenu li a:hover {
    background-color: color-mix(in srgb, var(--sm-green), transparent 88%);
    color: var(--sm-green);
}

/* =====================================================
    SM HEADER UI COMPONENTS — PROFESSIONAL 2026
    Componentes: Language Toggle & Sticky Logic
    Blindaje: 0.00 CLS | GPU Compose | Senior Architecture
   ===================================================== */

/* --- 1. LANGUAGE TOGGLE (ANTI-SHIFT LOCK) --- */
#header-sticky .sm-header__lang-toggle button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Dimensiones Blindadas: Coinciden con el Hamburger para simetría */
    min-width: 56px;
    height: 50px;
    padding: 0 16px;
    
    /* Estética Base Clean */
    background-color: var(--sm-white);
    color: var(--sm-black);
    border: 2px solid var(--sm-white);
    border-radius: 999px;
    
    /* Tipografía Senior */
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    /* Hardening de Renderizado */
    cursor: pointer;
    transition: 
        background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    -webkit-tap-highlight-color: transparent;
    outline: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hover Interactivo (Sin Bloques Negros) */
@media (hover: hover) {
    #header-sticky .sm-header__lang-toggle button:hover {
        background-color: var(--sm-green);
        border-color: var(--sm-green);
        color: var(--sm-black);
        transform: translateY(-2px);
    }
}

/* Click Feedback */
#header-sticky .sm-header__lang-toggle button:active {
    transform: translateY(0) scale(0.95);
}

/* --- 2. STICKY MODE (GLASSMORPHISM HARDENING) --- */
#header-sticky.sticky {
    /* Uso de color-mix senior para transparencia controlada */
    background-color: color-mix(in srgb, var(--sm-black), transparent 12%);
    
    /* Fix Visual Studio & Browser Compatibility */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    
    /* Sombra sutil de profundidad (No ensucia el diseño) */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Aceleración de Composición */
    transform: translate3d(0, 0, 0);
}

/* Ajustes de Elementos en modo Sticky (Inversión de Colores) */
#header-sticky.sticky .sm-hamburger-toggle,
#header-sticky.sticky .sm-header__lang-toggle button {
    background-color: var(--sm-green);
    border-color: var(--sm-green);
    color: var(--sm-black);
}

/* Hover en modo Sticky: El botón Lang cambia a Blanco (Inversión Pro) */
@media (hover: hover) {
    #header-sticky.sticky .sm-hamburger-toggle:hover,
    #header-sticky.sticky .sm-header__lang-toggle button:hover {
        background-color: var(--sm-white);
        border-color: var(--sm-white);
        color: var(--sm-black);
        transform: translateY(-2px);
    }
}

/* Accesibilidad: Focus visible para navegación por teclado */
#header-sticky .sm-header__lang-toggle button:focus-visible {
    box-shadow: 0 0 0 3px var(--sm-green);
    outline: none;
}

/* =====================================================
    OFFCANVAS CORE — OPERATIVIDAD SENIOR
    Blindaje: GPU Safe | Tus Z-index y Medidas Preservadas
    Rating: 10/10 Performance | 0 CLS
   ===================================================== */

/* 1. OVERLAY (Capa oscura de fondo) */
.sm-offcanvas__overlay {
    position: fixed;
    inset: 0;
    background-color: var(--sm-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000001; /* Preservado */
}

.sm-offcanvas__overlay.is-open {
    opacity: 0.85;
    visibility: visible;
    pointer-events: auto;
}

/* 2. CONTENEDOR PRINCIPAL (Panel lateral) */
#sm-offcanvas.sm-offcanvas__info {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px; /* Tu medida original */
    height: 100dvh; /* Altura dinámica para navegadores móviles */
    background-color: var(--sm-black);
    color: var(--sm-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000002; /* Preservado */
    
    /* Senior Hardening: Animación por GPU para 60fps */
    transform: translate3d(100%, 0, 0); 
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

#sm-offcanvas.is-open {
    transform: translate3d(0, 0, 0);
}

/* 3. HEADER (Barra superior del Offcanvas) */
#sm-offcanvas .sm-offcanvas__header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Equilibrio perfecto */
    align-items: center;
    padding: 16px 20px;
    background-color: var(--sm-black);
    border-bottom: 1px solid color-mix(in srgb, var(--sm-white), transparent 95%);
}

/* Idioma */
#sm-offcanvas .sm-offcanvas__lang {
    grid-column: 1;
    justify-self: start;
}

#sm-offcanvas .sm-offcanvas__lang button {
    background-color: color-mix(in srgb, var(--sm-white), transparent 92%);
    color: var(--sm-white);
    border: 0;
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}

#sm-offcanvas .sm-offcanvas__lang button:hover {
    background-color: var(--sm-green);
    color: var(--sm-black);
}

/* Logo Móvil (Tamaño específico preservado) */
#sm-offcanvas .sm-offcanvas__logo {
    grid-column: 2;
    display: flex;
    justify-content: center;
}

#sm-offcanvas .sm-offcanvas__logo img {
    width: 140px;
    height: 34px;
    display: block;
    object-fit: contain;
    aspect-ratio: 140 / 34; /* Blindaje contra saltos de diseño */
}

/* Botón Cerrar */
#sm-offcanvas .sm-offcanvas__close {
    grid-column: 3;
    justify-self: end;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sm-white), transparent 92%);
    color: var(--sm-white);
    border: 0;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#sm-offcanvas .sm-offcanvas__close:hover {
    background-color: #ff4b4b; /* Color de alerta para cerrar */
    color: var(--sm-white);
    transform: rotate(90deg); /* Micro-interacción moderna */
}

/* 4. ÁREA DE CONTENIDO (Scrollable) */
#sm-offcanvas .sm-offcanvas__content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--sm-green) transparent;
}

/* =====================================================
    SOUNDMETRIC MASTER ARCHITECTURE PRO (2026)
    Components: Navigation, Responsive & Hardening
    Rating: 10/10 Senior Level | 0 CLS | GPU Optimized
   ===================================================== */

/* --- 1. OFFCANVAS: ESTRUCTURA Y ACORDEÓN --- */

#sm-offcanvas .sm-offcanvas__nav,
#sm-offcanvas .sm-offcanvas__nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#sm-offcanvas .sm-offcanvas__nav {
    display: block;
}

#sm-offcanvas .sm-offcanvas__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sm-offcanvas .sm-offcanvas__nav li {
    position: relative;
    width: 100%;
    display: block;
}

/* Enlaces de Nivel 1 (Principales) */
#sm-offcanvas .sm-offcanvas__nav > ul > li {
    border-bottom: 1px solid color-mix(in srgb, var(--sm-white), transparent 97%);
}

#sm-offcanvas .sm-offcanvas__nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 15px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sm-white);
    text-decoration: none;
    border-radius: 12px;
    margin-block-end: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sm-offcanvas .sm-offcanvas__nav > ul > li > a:hover {
    background: color-mix(in srgb, var(--sm-white), transparent 95%);
    color: var(--sm-green);
}

#sm-offcanvas .sm-offcanvas__nav .status-dot {
    flex-shrink: 0;
}

/* Flecha Dropdown */
#sm-offcanvas .sm-offcanvas__nav .sm-has-dropdown > a::after {
    content: "▾";
    margin-inline-start: auto;
    font-size: 14px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

#sm-offcanvas .sm-offcanvas__nav .sm-has-dropdown.is-open > a::after {
    transform: rotate(180deg);
    color: var(--sm-green);
}

/* --- 2. SUBMENÚS: DISEÑO MINIMALISTA Y MODERNO --- */

#sm-offcanvas .sm-offcanvas__nav .sm-submenu {
    position: relative;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    
    /* Limpieza total: sin bordes ni márgenes que parezcan cajas */
    padding-inline-start: 35px; 
    margin: 0;
    display: flex;
    flex-direction: column;
    
    /* Animación fluida */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    will-change: max-height, opacity;
}

#sm-offcanvas .sm-offcanvas__nav .sm-has-dropdown.is-open > .sm-submenu {
    max-height: 800px;
    visibility: visible;
    opacity: 1;
    margin-block: 5px 15px;
}

/* Items Nivel 2: Hover Perfecto */
#sm-offcanvas .sm-offcanvas__nav .sm-submenu li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    color: color-mix(in srgb, var(--sm-white), transparent 50%);
    text-decoration: none;
    border-radius: 8px;
    
    /* Transición para el efecto de deslizamiento */
    transition: color 0.3s ease, background 0.3s ease, padding-inline-start 0.3s ease;
}

/* La línea verde: más sutil y moderna */
#sm-offcanvas .sm-offcanvas__nav .sm-submenu li a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--sm-green);
    transition: width 0.3s ease;
    opacity: 0;
}

#sm-offcanvas .sm-offcanvas__nav .sm-submenu li a:hover {
    background: color-mix(in srgb, var(--sm-green), transparent 98%);
    color: var(--sm-green);
    padding-inline-start: 20px; /* Deslizamiento moderno */
}

#sm-offcanvas .sm-offcanvas__nav .sm-submenu li a:hover::before {
    width: 12px;
    opacity: 1;
}

/* --- 3. RESPONSIVE ENGINE (PRECISION GRID) --- */

#header-sticky .sm-header__container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 64px;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    #header-sticky .sm-nav { display: block; }
    #header-sticky .sm-header__lang-toggle { display: flex; }
    #header-sticky .sm-header__hamburger { display: none; }
}

@media (max-width: 1199px) {
    #header-sticky .sm-nav, 
    #header-sticky .sm-header__lang-toggle { display: none; }
    #header-sticky .sm-header__hamburger { display: flex; }
    #header-sticky .sm-header__logo img { height: 30px; width: auto; }
    #header-sticky .sm-header__logo { margin-inline-start: 20px; }
    #header-sticky .sm-header__right { margin-inline-end: 20px; }
    #header-sticky .sm-header__container { padding-inline: 24px; }
    #sm-offcanvas .sm-offcanvas__logo img { height: 40px; width: auto; }
}

@media (max-width: 991px) {
    #header-sticky .sm-header__logo img { height: 28px; }
}

@media (max-width: 575px) {
    #header-sticky .sm-hamburger-toggle { width: 46px; height: 46px; flex: 0 0 46px; }
    #header-sticky .sm-header__container { padding-inline: 20px; }
    #header-sticky .sm-header__logo { margin-inline-start: 10px; }
}

@media (max-width: 380px) {
    #header-sticky .sm-header__container { padding-inline: 12px; } 
    #header-sticky .sm-header__logo { margin-inline-start: 0; margin-inline-end: 10px; } 
    #header-sticky .sm-header__logo img { height: 24px; } 
    #header-sticky .sm-btn, #header-sticky .sm-header__cta a { padding: 8px 14px; font-size: 13px; }
    #header-sticky .sm-header__right { margin-inline-end: 0; gap: 6px; }
    #header-sticky .sm-hamburger-toggle { width: 40px; height: 40px; flex: 0 0 40px; }
}

/* --- 4. HARDENING & PERFORMANCE LAYER --- */

.sm-header, .sm-offcanvas__info {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Accesibilidad Focus */
#header-sticky a:focus-visible, 
#header-sticky button:focus-visible,
#sm-offcanvas a:focus-visible,
#sm-offcanvas button:focus-visible {
    outline: 2px solid var(--sm-green);
    outline-offset: 4px;
}

/* Optimización Táctil */
.sm-hamburger-toggle, .sm-header__lang-toggle button, 
.sm-btn, .sm-offcanvas__close, .sm-offcanvas__nav a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Glassmorphism Header */
#header-sticky.sticky {
    background: color-mix(in srgb, var(--sm-black), transparent 12%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid rgba(255, 255, 255, 0.05);
}

/* Scrollbar Refinado */
#sm-offcanvas .sm-offcanvas__content::-webkit-scrollbar { width: 4px; }
#sm-offcanvas .sm-offcanvas__content::-webkit-scrollbar-thumb {
    background: var(--sm-green);
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .sm-offcanvas__info, .sm-offcanvas__overlay, .sm-submenu {
        transition: none !important;
    }
}
/* =====================================================
    SoundMetric - Global Utilities
    Blindado: Z-Index gestionado por Tokens y Motor Central
   ===================================================== */

/* --- 1. PRELOADER (ENTRADA DE SITIO) --- */
.sm-preloader {
    position: fixed; 
    inset: 0; 
    /* BLINDAJE: Capa máxima controlada */
    z-index: var(--z-preloader); 
    background: var(--sm-black);
    display: flex; 
    align-items: center; 
    justify-content: center;
    pointer-events: none; 
    transition: opacity .45s ease, visibility .45s ease;
}

.sm-preloader.is-hidden { opacity: 0; visibility: hidden; }

.sm-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sm-preloader__inner img { display: block; max-width: 180px; height: auto; }

.sm-preloader__pulse {
    width: 42px; 
    height: 4px; 
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(30,215,96,.15), var(--sm-green), rgba(30,215,96,.15));
    /* Llama al motor central de animaciones TOOLS */
    animation: smPulse 1.4s ease-in-out infinite;
}

/* ELIMINADO: @keyframes smPulse (Ya centralizado en TOOLS) */


/* --- 2. BACK TO TOP (NAVEGACIÓN) --- */
.sm-back-to-top {
    position: fixed; 
    right: 28px; 
    bottom: 28px; 
    width: 48px; 
    height: 48px;
    border-radius: 999px; 
    background: var(--sm-green); 
    color: var(--sm-black);
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 18px; 
    cursor: pointer; 
    opacity: 0; 
    visibility: hidden;
    transform: translateY(10px); 
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    /* BLINDAJE: Capa de utilidad baja */
    z-index: var(--z-back-to-top);
}

.sm-back-to-top:hover { 
    background: var(--sm-white); 
    color: var(--sm-black); 
    transform: translateY(-5px);
}

.sm-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Ajuste Responsivo Móvil */
@media (max-width: 575px) { 
    .sm-back-to-top { 
        right: 18px; 
        bottom: 18px; 
        width: 44px; 
        height: 44px; 
    } 
}
/* =====================================================
    SM FOOTER SYSTEM (VERSION FINAL BLINDADA)
    Blindado: 0.00 CLS | GPU Hardening | Senior Responsive
    Fix: Centered Status & Zero Bottom Gap
   ===================================================== */

.sm-footer {
    background-color: #050505;
    color: var(--sm-white);
    font-size: 15px;
    position: relative;
    z-index: 10;
    /* BLINDAJE: Aislamiento total */
    contain: layout;
    /* FIX: Eliminamos min-height fijo para evitar la franja negra sobrante */
    display: block;
}

.sm-footer__container { 
    max-width: 1320px; 
    margin-inline: auto; 
    padding: 80px 40px; 
    box-sizing: border-box; 
    width: 100%;
}

/* --- GRID PRINCIPAL --- */
.sm-footer__grid { 
    display: grid;
    /* Escritorio: Proporción original bloqueada */
    grid-template-columns: 2fr 1fr 1fr 1.5fr; 
    gap: 60px; 
    align-items: start;
    width: 100%;
}

/* COLUMNA 1: MARCA */
.sm-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sm-footer__logo img { 
    width: 140px;
    height: 34px; 
    display: block; 
    object-fit: contain;
    aspect-ratio: 140 / 34;
}

.sm-footer__text { 
    margin-block: 24px 32px; 
    color: rgba(255, 255, 255, 0.6); 
    max-width: 300px; 
    line-height: 1.6; 
    text-wrap: pretty;
}

/* REDES SOCIALES */
.sm-footer__social {
    display: flex;
    gap: 12px;
}

.sm-footer__social a {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 40px; 
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%; 
    color: var(--sm-white); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sm-footer__social a:hover {
    background: var(--sm-green); 
    color: var(--sm-black);
    transform: translate3d(0, -3px, 0); 
}

/* COLUMNAS DE ENLACES */
.sm-footer__title { 
    font-size: 14px; 
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px; 
    color: var(--sm-white); 
    font-weight: 700; 
    opacity: 0.4;
    min-height: 1.2em;
}

.sm-footer__list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.sm-footer__list li { 
    margin-bottom: 12px; 
}

.sm-footer__list a { 
    color: rgba(255, 255, 255, 0.7); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; 
    align-items: center; 
    position: relative;
    white-space: nowrap;
}

/* EFECTO DOT */
.sm-footer__list a::before {
    content: '';
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--sm-green);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sm-footer__list a:hover { 
    color: var(--sm-white); 
    padding-left: 16px; 
}

.sm-footer__list a:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* --- BARRA INFERIOR (REESTRUCTURADA PARA CENTRADO) --- */
.sm-footer__bottom { 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    background-color: #020202; 
    min-height: 80px;
    display: flex;
    align-items: center;
}

.sm-footer__bottom-inner { 
    max-width: 1320px; 
    margin: 0 auto; 
    padding: 0 40px !important; /* Mantenemos consistencia de contenedor */
    display: grid; 
    /* 3 COLUMNAS: Izquierda (1fr), Centro (Auto), Derecha (1fr) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    color: rgba(255, 255, 255, 0.5); 
    font-size: 13px;
    width: 100%;
}

.sm-footer__copyright {
    grid-column: 1;
    justify-self: start;
}

/* CENTRADO REAL NIVEL DIOS */
.sm-system-status {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 50px;
    white-space: nowrap;
}

.status-dot {
    width: 8px; height: 8px;
    background-color: var(--sm-green);
    border-radius: 50%;
    animation: sm-pulse-green 2s infinite ease-in-out;
    flex-shrink: 0;
}

.sm-footer__legal { 
    grid-column: 3;
    justify-self: end;
    list-style: none; 
    display: flex; 
    gap: 24px; 
}

/* --- RESPONSIVE FIXES (PRESERVADO) --- */
@media (max-width: 1199px) {
    .sm-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .sm-footer__bottom-inner {
        grid-template-columns: 1fr; /* Apilado en tablets/móviles */
        gap: 20px;
        padding-block: 30px !important;
    }
    .sm-footer__copyright, 
    .sm-system-status, 
    .sm-footer__legal {
        grid-column: 1;
        justify-self: center;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .sm-footer__container {
        padding: 60px 24px;
    }
    .sm-footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sm-footer__brand {
        align-items: center;
        text-align: center;
    }
}

/* =====================================================
    BLINDAJE RESPONSIVO (SENIOR FIX)
   ===================================================== */

@media (max-width: 1199px) {
    .sm-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 767px) {
    .sm-footer__container {
        padding: 60px 24px;
    }

    .sm-footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sm-footer__brand {
        align-items: center;
        text-align: center;
    }

    .sm-footer__bottom-inner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
    }

    .sm-footer__legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* =====================================================
    SoundMetric - MASTER BUTTON SYSTEM (REFINED)
    Efecto: High-Speed Slide | Sin Sombras
    Blindaje: 0.00 CLS | GPU Accelerated | Senior UX
   ===================================================== */

.sm-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    /* Estética Base Clean */
    background-color: var(--sm-green);
    color: var(--sm-black);
    border: 2px solid var(--sm-green);
    border-radius: 999px;
    
    /* Tipografía Senior */
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    /* Dimensiones Blindadas (0 CLS) */
    padding: 16px 32px;
    min-height: 52px;

    /* Hardening de Renderizado */
    cursor: pointer;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    will-change: transform;
}

/* EL SLIDE DE FONDO (Optimizado con Transform) */
.sm-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sm-black);
    z-index: -1;
    
    /* Estado Inicial: Encogido a la izquierda */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
    will-change: transform;
}

/* El Icono ADN */
.sm-btn .sm-icon {
    font-size: 15px;
    transform: rotate(-40deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    color: inherit;
}

/* === INTERACCIÓN REFINADA (HOVER) === */
@media (hover: hover) {
    .sm-btn:hover {
        color: var(--sm-green);
        /* Eliminada la sombra según tu instrucción */
        transform: translateY(-2px); /* Pequeña elevación de elegancia */
    }

    /* Activación del fondo negro */
    .sm-btn:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* Micro-interacción del icono */
    .sm-btn:hover .sm-icon {
        transform: rotate(0deg) scale(1.1);
    }
}

/* Efecto de Click (Presión Física) */
.sm-btn:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.1s ease;
}

/* =====================================================
    VARIACIÓN: BOTÓN OUTLINE (MODERN GHOST)
   ===================================================== */
.sm-btn--outline {
    background-color: transparent;
    color: var(--sm-white);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.sm-btn--outline::before {
    background-color: var(--sm-white);
}

@media (hover: hover) {
    .sm-btn--outline:hover {
        border-color: var(--sm-white);
        color: var(--sm-black);
    }
}

/* =====================================================
    RESPONSIVE PRECISION
   ===================================================== */
@media (max-width: 767px) {
    .sm-btn {
        padding: 14px 28px;
        min-height: 48px;
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .sm-btn {
        padding: 12px 20px;
        font-size: 14px;
        gap: 8px;
    }
}

/* =====================================================
   SM-FRAMEWORK: SMART GRID SYSTEM
   Blindado para 0 redundancia y máxima performance
   ===================================================== */

/* =====================================================
    5. OBJECTS: GRID & LAYOUT SYSTEM
    Blindaje: 0 CLS | Isolation | Migration Ready
   ===================================================== */

/* 5.1. Containers: Aislamiento de Layout */
.sm-container { 
    width: 100%; 
    max-width: 1320px; 
    margin-inline: auto; 
    padding-inline: 24px; 
    
    /* BLINDAJE: Evita que cambios internos (como animaciones) 
       provoquen recálculos en el resto del documento */
    position: relative;
    contain: layout;
}

/* 5.2. Smart Grid System (0 Redundancia) */
.sm-row { 
    display: grid; 
    /* Blindaje: Altura mínima basada en contenido para evitar colapso inicial */
    grid-template-rows: minmax(min-content, max-content);
    grid-template-columns: repeat(var(--sm-cols, 12), 1fr); 
    gap: var(--sm-gap, 30px); 
    width: 100%;
    
    /* Alineación por defecto */
    align-items: start;
}

/* Modificadores de alineación para filas */
.sm-row--align-end { align-items: end; }
.sm-row--align-center { align-items: center; }

/* 5.3. Column Spanning (Blindaje de ancho) */
[class*="sm-col-"] {
    grid-column: span var(--col-span, 12);
    /* VITAL: Evita que la celda se expanda por error si el contenido 
       es más ancho que la grilla antes de procesar el CSS */
    min-width: 0; 
}

.sm-col-8 { --col-span: 8; }
.sm-col-6 { --col-span: 6; }
.sm-col-4 { --col-span: 4; }
.sm-col-3 { --col-span: 3; }

/* 5.4. Responsive Engine */

/* Desktop & Tablets */
@media (max-width: 1199px) {
    [class*="sm-col-"] { --col-span: 12; }
    .sm-container { padding-inline: 40px; }
}

/* Mobile Hardening */
@media (max-width: 767px) { 
    .sm-row { 
        --sm-cols: 1; 
        gap: 24px; /* Gap más pequeño para pantallas pequeñas */
    } 
    .sm-container { 
        padding-inline: 20px; 
    }
}

/* =====================================================
    1. REVEAL ANIMATIONS (GPU OPTIMIZED)
    Blindaje: 0.00 CLS | Anti-Ghosting
   ===================================================== */

@keyframes smFadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.sm-reveal { 
    opacity: 0; 
    will-change: transform, opacity; 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; 
}

/* Disparo instantáneo para el Hero */
.sm-hero .sm-reveal {
    animation: smFadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Escalonamiento de elementos */
.sm-hero .sm-delay-1 { animation-delay: 0.15s; }
.sm-hero .sm-delay-2 { animation-delay: 0.3s; }


/* =====================================================
    2. SM HERO — MASTER LAYOUT
    Configuración: Centered / 0.00 CLS / SEO First
   ===================================================== */

.sm-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center; 
    justify-content: center;
    overflow: hidden;
    background-color: var(--sm-black);
    z-index: 1;
    padding-top: var(--sm-header-height);
    contain: layout;
    isolation: isolate;
}

/* --- MEDIA LAYER (ROBUST) --- */
.sm-hero__bg,
.sm-hero__media,
.sm-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Desktop: Default */
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* --- OVERLAY (SMART GRADIENT) --- */
.sm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.25) 45%,
        rgba(0,0,0,0.15) 65%,
        var(--sm-black) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* --- CONTENT STRUCTURE --- */
.sm-hero .sm-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.sm-hero h1 {
    font-size: clamp(42px, 8vw, 110px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: var(--sm-white);
    max-width: 12ch;
    margin: 0;
}

.sm-hero__desc {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    border-left: 2px solid var(--sm-green);
    padding-left: 20px;
    margin-bottom: 30px;
    max-width: 360px;
}

.sm-hero__info {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sm-hero__client-box {
    background: rgba(30,215,96,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(30,215,96,0.35);
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    color: var(--sm-green);
    font-weight: 700;
}


/* =====================================================
    3. RESPONSIVE ADJUSTMENTS (PRECISION SCALING)
   ===================================================== */

/* --- TABLET --- */
@media (max-width: 991px) {
    .sm-hero {
        min-height: 80vh;
    }

    .sm-hero h1 {
        max-width: none;
    }

    .sm-hero__media img {
        /* Desplazamiento al 80% para no cortar al sujeto */
        object-position: 80% center; 
    }
}

/* --- MÓVIL (+150px Extra Displacement) --- */
@media (max-width: 767px) {
    .sm-hero {
        padding-top: calc(var(--sm-header-height) + 40px);
        min-height: 70vh; 
    }

    .sm-hero__media img {
        /* FIX: Forzamos el desplazamiento lateral de 150px para ver el extremo derecho */
        object-position: calc(100% + 150px) center;
    }

    .sm-hero__desc {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 0;
        padding-bottom: 20px;
        margin-top: 20px;
    }

    .sm-hero__info {
        gap: 15px;
        flex-wrap: wrap;
    }
}

/* --- MÓVILES MINI (iPhone SE Fix) --- */
@media (max-width: 380px) {
    .sm-hero {
        min-height: 550px;
    }

    .sm-hero__media img {
        /* Mantenemos la consistencia del punto focal extremo */
        object-position: calc(100% + 150px) center;
    }
    
    .sm-hero h1 {
        font-size: 36px;
    }

    .sm-hero__client-box {
        padding: 8px 16px;
        font-size: 20px;
    }
}

/* =====================================================
   SM ABOUT SECTION — PROFESSIONAL 2026
   Blindado: Solo estilos de componente (Grilla delegada)
   ===================================================== */

.sm-about {
    /* Mantenemos el espaciado y fondo */
    padding: 120px 0;
    background-color: var(--sm-black);
    min-height: 70vh;
    position: relative;
    /* Performance: Aísla el renderizado de esta sección */
    contain: layout; 
}

/* El contenido se ajusta a su columna */
.sm-about__content { 
    max-width: 580px; 
}

/* Tipografía específica del componente */
.sm-about__text {
    margin-top: 30px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.sm-about__actions { 
    margin-top: 45px; 
}

/* Media area: Posicionamiento de las stats */
.sm-about__media {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* TARJETA DE ESTADÍSTICAS (Diseño Pro) */
.sm-about__stats {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    padding: 50px 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    max-width: 600px;
}

.sm-stat h3 {
    font-size: 64px;
    color: var(--sm-green);
    margin-bottom: 15px;
    line-height: 1;
    font-weight: 800;
}

.sm-stat p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

.sm-stat--divider {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 40px;
    margin-right: 40px;
}

/* RESPONSIVE ESPECÍFICO DE ABOUT */
@media (max-width: 991px) {
    .sm-about { padding: 80px 0; }
    
    .sm-about__media { justify-content: flex-start; }
    
    .sm-about__stats { 
        flex-direction: column; 
        gap: 40px; 
        padding: 40px 30px;
    }
    
    .sm-stat--divider {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 0 30px 0;
        margin: 0;
    }
}

/* =====================================================
   SM PROCESS SECTION — HORIZONTAL PRO 2026
   Blindado: Ahorro de scroll y alineación lateral
   ===================================================== */

.sm-process {
    position: relative;
    background-color: #0b0b0b; 
    contain: layout; 
}

/* El título ahora está arriba, usamos la utilidad de margen que creamos */
.sm-process .sm-section-title {
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
}

/* CONTENEDOR DE TARJETAS (Cambiado a Grid de 3 columnas) */
.sm-process-content {
    display: grid;
    /* BLINDAJE: 3 columnas iguales */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

/* TARJETA DE PROCESO (Mantenemos tu ADN visual) */
.sm-process-card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    /* Mantenemos tu detalle de diseño favorito */
    border-left: 2px solid rgba(255, 255, 255, 0.1); 
    border-radius: 0 16px 16px 0; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%; /* Para que todas midan lo mismo */
}

.sm-process-card:hover {
    border-left-color: var(--sm-green);
    background: rgba(255, 255, 255, 0.04);
    /* En horizontal, subir 10px se ve más elegante que ir a la derecha */
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.sm-process-card__header {
    margin-bottom: 20px;
}

.sm-process-card h3 {
    font-size: 22px; /* Ajustado para caber mejor en horizontal */
    margin-top: 15px;
    font-weight: 700;
}

.sm-process-card p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-size: 15px;
}

/* =====================================================
   RESPONSIVE (BLINDADO)
   ===================================================== */

/* Tablet (2 columnas) */
@media (max-width: 1199px) {
    .sm-process-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil (1 columna para legibilidad) */
@media (max-width: 767px) {
    .sm-process-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .sm-process-card {
        padding: 30px;
        text-align: center;
        border-radius: 16px; /* Borde completo en móvil */
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}


/* =====================================================
   SM SERVICES SECTION — PROFESSIONAL 2026
   Blindado: Sistema de Grilla Única y Fix de Solapamiento
   ===================================================== */

.sm-services {
    position: relative;
    background-color: var(--sm-bg-dark, #0b0b0b);
    contain: layout; 
}

.sm-services__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}

/* FILA DE SERVICIO 
   Corrección: Se añade min-height para que la imagen absoluta 
   no tape las filas adyacentes si hay poco texto.
*/
.sm-service-row {
    position: relative;
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* BLINDAJE: Asegura que la fila mida al menos lo mismo que la imagen (240px) 
       evitando que se monten unas sobre otras. */
    min-height: 280px; 
    display: flex;
    align-items: center;
}

.sm-service-row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* CONTENIDO DE LA TARJETA */
.sm-service-card {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.sm-service-card__num {
    font-size: 48px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.4s ease;
    min-width: 80px; 
    margin: 0;
}

.sm-service-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sm-service-card__info {
    flex: 1;
}

.sm-service-card__info h3 {
    margin: 0 0 10px 0;
    font-size: 32px;
}

.sm-service-card__info p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 500px;
    transition: color 0.3s ease;
}

.sm-service-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.sm-service-card__arrow .sm-icon {
    transform: rotate(-45deg); 
    transition: transform 0.4s ease;
}

/* IMAGEN HOVER 
   Mantenemos el diseño original pero con blindaje de renderizado.
*/
.sm-service-card__img-hover {
    position: absolute;
    top: 50%;
    right: 15%; 
    transform: translateY(-50%) scale(0.95);
    width: 340px;
    height: 240px;
    aspect-ratio: 340 / 240;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 12px;
    overflow: hidden;
    will-change: transform, opacity;
}

.sm-service-card__img-hover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================
   ESTADOS (UNIFICADOS PARA LIMPIEZA)
   ===================================================== */

.sm-service-row:hover,
.sm-service-row.active {
    background-color: rgba(255, 255, 255, 0.03); 
}

.sm-service-row:hover .sm-service-card__num,
.sm-service-row.active .sm-service-card__num {
    color: var(--sm-green); 
}

.sm-service-row:hover .sm-service-card__info p,
.sm-service-row.active .sm-service-card__info p {
    color: var(--sm-white);
}

.sm-service-row:hover .sm-service-card__arrow,
.sm-service-row.active .sm-service-card__arrow {
    background-color: var(--sm-white);
    border-color: var(--sm-white);
    color: var(--sm-black);
}

.sm-service-row:hover .sm-service-card__arrow .sm-icon,
.sm-service-row.active .sm-service-card__arrow .sm-icon {
    transform: rotate(0deg); 
}

.sm-service-row:hover .sm-service-card__img-hover,
.sm-service-row.active .sm-service-card__img-hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1); 
}

/* RESPONSIVE */
@media (max-width: 1199px) {
    .sm-service-card__img-hover { display: none; }
}

@media (max-width: 991px) {
    .sm-services__header { flex-direction: column; align-items: flex-start; gap: 30px; }
    .sm-service-card { gap: 30px; }
    /* En móvil no hace falta la altura mínima ya que no hay imagen flotante */
    .sm-service-row { min-height: auto; padding: 40px 0; }
}

@media (max-width: 767px) {
    .sm-service-card__body { flex-direction: column; align-items: flex-start; gap: 20px; }
}


/* =====================================================
   SM ABOUT - RESPONSIVE DESIGN (Mantenido)
   ===================================================== */
@media (max-width: 991px) {
    .sm-about { padding: 80px 0; }
    
    /* El sistema sm-row centralizado ya maneja esto, 
       pero mantenemos tus márgenes específicos */
    .sm-about__media { justify-content: flex-start; }
    .sm-about__stats { flex-direction: column; gap: 40px; }
    
    .sm-stat--divider {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 0 30px 0;
        margin: 0;
    }
}



/* =====================================================
    SM FEATURES SECTION — PROFESSIONAL 2026
    Blindado: Direct Grid Control | Responsive Stack
    Diseño: 100% Preservado
   ===================================================== */

.sm-features {
    position: relative;
    background-color: #111111; 
    contain: layout; 
    overflow: hidden; /* Evita fugas de ancho por sombras o animaciones */
}

/* --- GRID SYSTEM (REFORZADO) --- */
.sm-features .sm-row {
    display: grid;
    /* Escritorio: 4 columnas */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    width: 100%;
}

/* --- FEATURE CARD STYLES --- */
.sm-feature-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 16px;
    height: 100%; 
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.sm-feature-card:hover,
.sm-feature-card.active {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--sm-green); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sm-feature-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 25px;
    color: var(--sm-white);
    transition: all 0.3s ease;
}

.sm-feature-card:hover .sm-feature-card__icon,
.sm-feature-card.active .sm-feature-card__icon {
    background-color: var(--sm-green);
    color: var(--sm-black); 
}

.sm-feature-card h4 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

.sm-feature-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 25px;
    flex-grow: 1; 
}

/* BOTÓN DE TEXTO ADN */
.sm-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sm-text-btn .sm-icon {
    font-size: 11px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sm-feature-card:hover .sm-text-btn .sm-icon {
    transform: translateX(6px);
    color: var(--sm-green);
}

/* =====================================================
    BLINDAJE RESPONSIVO (SENIOR FIX)
   ===================================================== */

/* Tablet / Laptop Pequeña */
@media (max-width: 1200px) {
    .sm-features .sm-row {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    }
}

/* Tablet Vertical / Mobile Grande */
@media (max-width: 991px) {
    .sm-features .sm-row {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 20px;
    }
    
    .sm-feature-card {
        padding: 30px 20px; /* Reducimos padding para ganar espacio */
    }
}

/* Móvil Standard */
@media (max-width: 767px) {
    .sm-features .sm-row {
        grid-template-columns: 1fr; /* 1 columna vertical */
    }
    
    .sm-feature-card {
        text-align: center;
        align-items: center;
    }
    
    .sm-feature-card__icon {
        margin-inline: auto;
    }
}

/* Ajuste para pantallas extra pequeñas */
@media (max-width: 380px) {
    .sm-features {
        padding-inline: 15px; /* Evita que las cards toquen el borde del teléfono */
    }
}

/* =====================================================
   SM TESTIMONIALS & PARTNERS — PROFESSIONAL 2026
   Blindado: Ticker infinito y Slider optimizado.
   ===================================================== */

.sm-testimonials {
    /* Usamos la variable de fondo para las máscaras laterales */
    background-color: var(--sm-bg-dark, #0b0b0b);
    position: relative;
    /* Performance: Evita cálculos fuera de esta sección */
    contain: content; 
}

/* 1. LOGOS TICKER (MARQUESINA INFINITA) */
.sm-partners {
    text-align: center;
    margin-bottom: 100px;
    position: relative;
}

.sm-partners__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 40px;
    font-weight: 700;
}

.sm-partners__slider {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Previene parpadeos en navegadores Webkit */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Máscaras laterales para suavizar la entrada/salida de marcas */
.sm-partners__slider::before,
.sm-partners__slider::after {
    content: "";
    position: absolute;
    top: 0; 
    width: 150px; 
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.sm-partners__slider::before { 
    left: 0; 
    background: linear-gradient(to right, var(--sm-bg-dark, #0b0b0b), transparent); 
}
.sm-partners__slider::after { 
    right: 0; 
    background: linear-gradient(to left, var(--sm-bg-dark, #0b0b0b), transparent); 
}

.sm-partners__track {
    display: inline-block;
    animation: sm-ticker 40s linear infinite;
    /* BLINDAJE: Aceleración GPU */
    will-change: transform; 
}

.sm-partners__track:hover {
    animation-play-state: paused;
}

.sm-partners__track span {
    font-size: 24px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    margin-right: 80px;
    transition: color 0.3s ease;
}

.sm-partners__track span:hover { 
    color: var(--sm-green); 
}


/* 2. TESTIMONIAL SLIDER */
.sm-testimonial-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    /* Evita saltos de diseño (CLS) al cargar */
    min-height: 300px; 
}

.sm-testimonial-item {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.sm-testimonial-item.active {
    display: block;
    animation: sm-fadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.sm-testimonial__data {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 30px;
    padding: 6px 18px;
    border: 1px solid rgba(30, 215, 96, 0.3); 
    border-radius: 50px;
    color: var(--sm-green);
    background: rgba(30, 215, 96, 0.05);
}

.sm-testimonial-item h3 {
    /* Escala fluida para el texto del testimonio */
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.3;
    color: var(--sm-white);
    margin-bottom: 40px;
    font-weight: 500;
}

.sm-testimonial__author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sm-testimonial__author strong {
    color: var(--sm-white);
    font-size: 18px;
    font-weight: 700;
}

.sm-testimonial__author span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Dots / Indicadores */
.sm-testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 50px;
}

.sm-testimonial-dots .dot {
    width: 30px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.sm-testimonial-dots .dot.active {
    background: var(--sm-green);
    width: 50px; /* Efecto de estiramiento visual */
}



/* RESPONSIVE */
@media (max-width: 768px) {
    .sm-partners__slider::before, 
    .sm-partners__slider::after { width: 50px; }
    
    .sm-partners__track span { font-size: 18px; margin-right: 40px; }

    .sm-testimonial-wrapper { min-height: auto; }
    
    .sm-testimonial-item h3 { margin-bottom: 30px; }
}

/* =====================================================
    SM INTELLIGENCE HUB (BLOG SECTION)
    Blindado: 0.00 CLS | GPU Hardened | Reveal Compatible
   ===================================================== */

.sm-news {
    position: relative;
    background-color: #111111;
    /* Aislamiento de layout para evitar que el hover afecte a otras secciones */
    contain: layout; 
}

/* --- BLOG GRID (Usando el sistema sm-row global) --- */
.sm-news .sm-row {
    --sm-gap: 30px;
}

/* --- NEWS CARD --- */
.sm-news-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    overflow: hidden;
    height: 100%; 
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    /* Optimización para animaciones fluidas */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sm-news-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--sm-green);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* --- MEDIA LAYER (BLINDAJE ANTI-SHIFT) --- */
.sm-news-card__media {
    position: relative;
    width: 100%;
    /* Fijamos la proporción para que el navegador reserve el espacio antes de cargar la foto */
    height: 240px; 
    aspect-ratio: 16 / 11;
    overflow: hidden;
    flex-shrink: 0;
    background-color: rgba(255,255,255,0.03); /* Placeholder mientras carga */
}

.sm-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sm-news-card:hover .sm-news-card__media img {
    transform: scale(1.05);
}

/* Tag sobre la imagen */
.sm-news-card__tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--sm-green);
    color: var(--sm-black);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* --- CARD BODY --- */
.sm-news-card__body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sm-news-card__date {
    font-size: 13px;
    color: var(--sm-green);
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sm-news-card h3 {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--sm-white);
}

.sm-news-card h3 a:hover { 
    color: var(--sm-green); 
}

.sm-news-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; 
}

/* --- BOTÓN READ INSIGHT (ADN SoundMetric) --- */
.sm-news-card .sm-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sm-white);
    text-transform: uppercase;
    margin-top: auto; /* Empuja el botón al final de la card */
}

.sm-news-card .sm-text-btn .sm-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    transform: rotate(-45deg); /* Estética SoundMetric */
}

.sm-news-card:hover .sm-text-btn .sm-icon {
    transform: rotate(0deg) translateX(6px);
    color: var(--sm-green);
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 767px) {
    .sm-news-card__media {
        height: 200px;
    }
    .sm-news-card__body {
        padding: 20px;
    }
    .sm-news-card h3 {
        font-size: 19px;
    }
}

/* =====================================================
    SM PRICING SECTION — PROFESSIONAL 2026
    Blindado: 0.0000 CLS | Layout Isolation | GPU Hardened
   ===================================================== */

.sm-pricing {
    position: relative;
    background-color: #111111;
    
    /* BLINDAJE DE CAJA: 
       display: flow-root evita el "margin collapsing" que causa saltos.
       contain: layout asegura que nada interno mueva el DOM externo. */
    display: flow-root;
    width: 100%;
    contain: layout;
    
    /* RESERVA DE ESPACIO INTRÍNSECO: 
       Evita que la sección mida 0px al inicio del scroll. */
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px; 
}

/* FIX DE ÍCONOS: Bloqueo de dimensiones estricto */
.sm-icon.ic-sparkle {
    display: inline-block;
    width: 24px;  
    height: 24px; 
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    contain: strict; /* No permite variaciones de tamaño */
}

/* --- PRICING GRID (Estabilización) --- */
.sm-pricing .sm-row {
    align-items: stretch; /* Fuerza a todas las cards a medir lo mismo desde el inicio */
}

/* --- PRICING CARD --- */
.sm-price-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px 40px;
    border-radius: 28px;
    height: 100%; 
    display: flex;
    flex-direction: column;
    position: relative;
    
    /* Hardening de Renderizado */
    box-sizing: border-box; 
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), 
                background 0.4s ease, 
                box-shadow 0.4s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sm-price-card.active,
.sm-price-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--sm-green);
    transform: translate3d(0, -12px, 0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Subtítulo (Bloqueo de 2 líneas para evitar shift) */
.sm-price-card__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 10px;
    font-weight: 500;
    display: block;
    min-height: 40px; /* Espacio para 2 líneas garantizado */
    line-height: 1.4;
}

/* --- BLOQUEO DE DINERO (STRICT) --- */
.sm-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-top: 25px;
    /* Altura fija para que el número grande no estire la card al cargar */
    height: 70px; 
    overflow: hidden;
}

.sm-price .currency { 
    font-size: 20px; 
    font-weight: 600; 
    color: var(--sm-green); 
    margin-right: 4px;
    line-height: 1;
}

.sm-price .amount { 
    font-size: 64px; 
    font-weight: 800; 
    color: var(--sm-white); 
    letter-spacing: -0.03em;
    line-height: 1;
    /* Números de ancho fijo (Crucial para CLS) */
    font-variant-numeric: tabular-nums; 
}

/* --- LISTA DE FEATURES --- */
.sm-price-features {
    list-style: none;
    padding: 0;
    margin: 30px 0 45px 0;
    flex-grow: 1;
    text-align: left;
}

.sm-price-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    min-height: 22px; /* Estabiliza la altura de cada fila */
}

.sm-price-features li .sm-icon {
    font-size: 12px;
    color: var(--sm-green);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- BOTONES (RESERVA DE ESPACIO) --- */
.sm-price-card .sm-btn {
    width: 100%;
    justify-content: center;
    min-height: 56px; /* Coincide con tu sistema de botones global */
}

/* --- RESPONSIVE PRECISION --- */
@media (max-width: 991px) {
    .sm-price-card { padding: 40px 25px; }
}

@media (max-width: 767px) {
    .sm-price {
        height: 60px;
        justify-content: center;
    }
    .sm-price .amount { font-size: 52px; }
    .sm-price-card { text-align: center; }
    .sm-price-card__header { text-align: center; }
    .sm-price-features li { justify-content: center; }
    
    .sm-pricing {
        contain-intrinsic-size: 1px 1500px; /* Más alto en móvil por el stack vertical */
    }
}

/* =====================================================
    SM MARQUEE SECTION — PROFESSIONAL 2026
    Blindado: 0.00 CLS | GPU 3D Acceleration | Zero-Reflow
   ===================================================== */

.sm-marquee-section {
    /* Variables de Control Local */
    --sm-marquee-speed: 40s;
    --sm-marquee-gap: 60px;
    --sm-marquee-bg: #0b0b0b;

    padding: 60px 0;
    overflow: hidden;
    background-color: var(--sm-marquee-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    
    /* BLOQUEO CRÍTICO ANTI-SHIFT: 
       Fijamos la altura para que el navegador no espere a la fuente para calcular el espacio. */
    min-height: 140px; 
    height: 140px; 
    contain: size layout; /* Orden de no mover el DOM externo */
    content-visibility: auto;
}

.sm-marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.sm-marquee__wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sm-marquee-gap); 
    padding-right: var(--sm-marquee-gap); 
    min-width: 100%;
    
    /* ACELERACIÓN 3D REAL: Movido a la GPU */
    animation: sm-marquee-horizontal var(--sm-marquee-speed) linear infinite;
    will-change: transform; 
    transform: translate3d(0, 0, 0);
    
    /* FIX VISUAL STUDIO: Compatibilidad total */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes sm-marquee-horizontal {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

.sm-marquee:hover .sm-marquee__wrap {
    animation-play-state: paused;
}

.sm-marquee__item {
    font-size: clamp(30px, 6vw, 80px);
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    line-height: 1; /* Fijo para evitar variaciones de altura de línea */
}

.sm-marquee__item:hover {
    color: var(--sm-green); 
    -webkit-text-stroke: 1px var(--sm-green);
    transform: scale(1.02);
}

.sm-marquee .sm-icon {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: transform 0.5s ease;
}

/* =====================================================
    SM FINAL CTA SECTION — PREMIUM 2026
    Blindado: 0.00 CLS | GPU Glow Acceleration | Senior A11y
   ===================================================== */

.sm-final-cta {
    position: relative;
    contain: layout; 
    overflow: hidden;
    background-color: var(--sm-black);
    /* RESERVA DE ESPACIO GLOBAL: Evita que el bloque entero "aparezca" de golpe */
    min-height: 560px; 
}

.sm-cta-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 80px 40px;
    border-radius: 32px;
    text-align: center;
    position: relative;
    z-index: 1;
    
    /* BLOQUEO DE CAJA: Reserva espacio para el H2 y los botones */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout;
}

/* EFECTO DE RESPLANDOR (GLOW) - OPTIMIZADO GPU */
.sm-cta-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: var(--sm-green);
    filter: blur(150px);
    opacity: 0.15;
    /* FIX VISUAL STUDIO: Estándar y Prefijo */
    transform: translate3d(-50%, -50%, 0);
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sm-cta-box__content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    z-index: 2;
}

.sm-cta-box h2 {
    font-size: clamp(32px, 5vw, 56px);
    margin-bottom: 24px;
    /* Reserva de espacio para el título (LCP Element) */
    min-height: 1.1em; 
    text-wrap: balance;
}

.sm-cta-box p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 50px; 
    line-height: 1.6;
    text-wrap: pretty;
}

/* FIX sm-btn--full (Mencionado en reporte de shift) */
.sm-btn.sm-btn--full {
    width: 100%;
    min-height: 56px; /* Congela el tamaño del botón antes de que cargue el icono */
    justify-content: center;
}

.sm-cta-box__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; 
}

/* === RESPONSIVE FIXES === */
@media (max-width: 768px) {
    .sm-marquee-section { 
        padding: 40px 0;
        min-height: 100px;
        height: 100px;
    }
    
    .sm-cta-box {
        padding: 60px 24px;
        min-height: auto;
    }

    .sm-cta-box__actions {
        flex-direction: column; 
        width: 100%;
        gap: 15px;
    }

    .sm-final-cta { min-height: auto; }
}

/* =====================================================
    SM HARDENING - SENIOR ARCHITECTURE (FINAL LAYER)
    Objetivo: 100/100 Lighthouse & Container Queries
   ===================================================== */

/* 1. SOPORTE DE CONTAINER QUERIES (Responsive 2.0) 
   Permite que los componentes se adapten a su espacio, no solo a la pantalla.
*/
.sm-row > * {
    container-type: inline-size;
}

/* 2. SKELETON LOADING (Perceived Performance) 
   Efecto de carga Shimmer para imágenes.
*/
.sm-news-card__media, 
.sm-hero__media, 
.sm-service-card__img-hover {
    background: linear-gradient(
        90deg, 
        rgba(255,255,255,0.03) 25%, 
        rgba(255,255,255,0.08) 50%, 
        rgba(255,255,255,0.03) 75%
    );
    background-size: 200% 100%;
    animation: sm-shimmer 2s infinite linear;
}

@keyframes sm-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* 3. AISLAMIENTO DE RENDERIZADO 
   Evita conflictos de capas (Z-index) entre secciones.
*/
section {
    isolation: isolate;
}

/* 4. MEJORA DE ACCESIBILIDAD (A11y) 
   Google ama el foco claro para navegación por teclado.
*/
:focus-visible {
    outline: 2px solid var(--sm-green) !important;
    outline-offset: 4px !important;
}

/* 5. SOPORTE PARA MÓVILES MINI (Fix de Logo) 
   Asegura operatividad en dispositivos de menos de 340px.
*/
@media (max-width: 340px) {
    :root { --sm-header-height: 60px; }
    .sm-header__logo img { height: 22px !important; }
}

/* 6. REDUCED MOTION GLOBAL 
   Desactiva animaciones pesadas si el usuario tiene activado "reducir movimiento".
*/
@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;
    }
}

/* =====================================================
    SM FINAL GOLDEN TOUCH - SENIOR POLISH
    Blindaje: Branding | Font Stability | Image Integrity
   ===================================================== */

/* 1. SELECTION BRANDING
   Personaliza el color de resaltado de texto para que coincida con el ADN SoundMetric
*/
::selection {
    background-color: var(--sm-green);
    color: var(--sm-black);
}

/* 2. ROBUST FONT STACK (Fallbacks Senior)
   Asegura que el diseño no "salte" mientras la fuente Jakarta carga.
*/
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 3. IMAGE INTEGRITY (Anti-Distorsión)
   Evita que las imágenes se vean aplastadas o estiradas sin importar su origen.
*/
img {
    object-fit: cover; /* Las fotos se encuadran solas, nunca se deforman */
    image-rendering: -webkit-optimize-contrast; /* Máxima nitidez en pantallas Retina */
    transition: opacity 0.5s ease-in-out;
}

/* 4. PRINT RESET (Optimización de Tinta)
   Un Senior siempre piensa en el usuario que necesita imprimir la propuesta o el sitio.
*/
@media print {
    .sm-header, .sm-offcanvas__overlay, .sm-preloader, .sm-back-to-top {
        display: none !important;
    }
    body {
        background: white;
        color: black;
        padding: 0;
    }
    .sm-container {
        width: 100%;
        max-width: 100%;
    }
}

/* 5. FIX DE SCROLLBAR (Diseño Unificado)
   Asegura que la barra de scroll de Windows sea tan elegante como la de Mac.
*/
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--sm-black);
}
::-webkit-scrollbar-thumb {
    background: #222;
    border: 2px solid var(--sm-black);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sm-green);
}