@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,400..500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-50..200&display=swap');

:root {
    --insistel-primary: #007aff;
    --insistel-secondary: #005bb5;
    --insistel-accent: #00ffff;
    --insistel-bg: #000000;
    --insistel-surface: #0a0a0c;

    /* Premium Text Gradients (Insistel Brand) */
    --gradient-insistel-core: linear-gradient(135deg, #007aff 0%, #6f00ff 100%); /* Blue to Deep Purple */
    --gradient-insistel-growth: linear-gradient(135deg, #7B1FA2 0%, #00E676 100%); /* Purple to Emerald Green */
    --gradient-insistel-eco: linear-gradient(135deg, #005bb5 0%, #10b981 100%); /* Core Blue to Brilliant Green */
    --gradient-aurora: linear-gradient(135deg, #007aff 0%, #ff00ff 50%, #00ffff 100%);
    
    --insistel-text: #f0f0f5;
    --radius-lg: 32px;
    --radius-md: 24px;
    --radius-sm: 14px;
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.16);
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.05);
    --glass-shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 1px rgba(255, 255, 255, 0.08);
    --transition-bounce: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-smooth: 0.3s ease;
}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--insistel-primary);
    color: #ffffff;
}

::-moz-selection {
    background: var(--insistel-primary);
    color: #ffffff;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.28);
    background-clip: padding-box;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

body {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 400;
    color: var(--insistel-text);
    background-color: var(--insistel-bg);
    line-height: 1.4;
    font-size: 1.125rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
    outline: 2px solid var(--insistel-primary);
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline-color 0.2s ease;
}

body::before {
    content: '';
    position: fixed;
    inset: -50vw -50vh;
    pointer-events: none;
    background: radial-gradient(120vw 100vh at 15% 10%, rgba(255, 255, 255, 0.02), transparent 50%);
    z-index: 0;
}

body::after {
    display: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-smooth), color var(--transition-smooth);
}

a:hover {
    opacity: 0.8;
}

.container {
    width: min(1180px, 92%);
    margin-inline: auto;
}

.section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    z-index: 2;
}

.interstitial-spectacle {
    position: relative;
    width: 100vw;
    height: 100vh;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.spectacle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.spectacle-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    padding: 1.5rem;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
}

.spectacle-title {
    color: #ffffff;
    font-size: clamp(1.8rem, 8vw, 4.5rem);
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 800;
    line-height: 1.2;
    padding-bottom: 0.1em;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    pointer-events: auto;
}

/* Products experience */
.section-products-spotlight,
.section-products-archive {
    position: relative;
    overflow: clip;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-products-spotlight {
    background:
        radial-gradient(circle at top left, rgba(108, 170, 230, 0.2), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
}

.section-products-archive {
    background: #5a9ad1;
    overflow-x: clip;
    overflow-y: visible;
}

.products-spotlight-bg,
.products-archive-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.products-spotlight-bg {
    display: block;
}

.products-archive-bg {
    display: none;
}

.products-orb,
.products-archive-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.28;
}

.products-orb.orb-a,
.products-archive-glow.glow-a {
    width: 280px;
    height: 280px;
    background: rgba(0, 122, 255, 0.55);
    top: 6%;
    left: -4%;
}

.products-orb.orb-b,
.products-archive-glow.glow-b {
    width: 320px;
    height: 320px;
    background: rgba(0, 255, 255, 0.28);
    right: -6%;
    bottom: 10%;
}

.products-spotlight-shell,
.products-archive-shell {
    position: relative;
    z-index: 1;
}

.products-archive-layout {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.products-filters-column,
.products-results-column {
    min-width: 0;
}

.products-filters-column {
    position: sticky;
    top: calc(var(--insistel-sticky-offset, 88px) + 8px);
    align-self: start;
}

.products-results-column {
    position: relative;
}

.section-products-archive .products-archive-shell {
    width: min(1700px, calc(100vw - 2.4rem));
    max-width: none;
}

.products-spotlight-head {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 0 !important;
}

.section-products-spotlight .products-carousel,
.section-products-spotlight .products-spotlight-cta {
    width: min(1680px, calc(100vw - 3rem));
    margin-inline: calc(50% - min(1680px, calc(100vw - 3rem)) / 2);
}

.products-spotlight-head .section-title--two-line {
    display: block !important;
    width: min(820px, calc(100vw - 3rem)) !important;
    max-width: min(820px, calc(100vw - 3rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-self: center !important;
}

.products-spotlight-head .section-title--two-line .forced-line {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
}

.products-spotlight-head > p,
.section-products-spotlight .products-spotlight-head p:last-child {
    width: min(62ch, calc(100vw - 3rem)) !important;
    max-width: min(62ch, calc(100vw - 3rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-self: center !important;
}

.section-products-spotlight .products-spotlight-head .section-title {
    color: #111111 !important;
}

.section-products-spotlight .products-spotlight-head p:last-child {
    max-width: 62ch;
    margin-inline: auto;
    color: #4b5563 !important;
}

.products-kicker {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #ffffff;
}

.section-products-spotlight .products-kicker {
    color: #6b7280 !important;
}

.products-carousel {
    display: grid;
    gap: 1.2rem;
}

.products-carousel-viewport {
    overflow: hidden;
}

.products-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - ((var(--products-visible, 3) - 1) * 1rem)) / var(--products-visible, 3));
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding-bottom: 0.25rem;
}

.products-carousel-track::-webkit-scrollbar {
    display: none;
}

.products-star-carousel {
    --products-visible: 3;
    --products-mobile-visible: 1;
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
}

.products-spotlight-carousels {
    display: grid;
    gap: 1.2rem;
}

.products-static-grid {
    display: grid;
    grid-template-columns: repeat(var(--products-visible, 3), minmax(0, 1fr));
    gap: 1rem;
}

.products-star-carousel-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    align-items: start;
}

.products-star-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
}

.products-star-copy {
    display: grid;
    gap: 0.45rem;
}

.products-star-carousel-head h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.02;
    color: #111827;
}

.products-star-description {
    margin: 0;
    width: 100%;
    max-width: none;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.55;
}

.products-secondary-panel {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.15rem;
    padding: 1.5rem;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(191, 219, 254, 0.22), transparent 22%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 22px 64px rgba(15, 23, 42, 0.07);
}

.products-secondary-carousels {
    display: grid;
    gap: 1.15rem;
}

.products-star-carousel--catalog {
    --products-visible: 3;
}

.products-star-carousel-head--catalog h3 {
    font-size: clamp(1.2rem, 1.75vw, 1.5rem);
}

.product-hero-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.82));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
    scroll-snap-align: start;
}

.product-hero-card-media {
    margin: 0;
}

.product-hero-card-media-stage {
    min-height: 240px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top, rgba(147, 197, 253, 0.26), transparent 38%),
        rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(191, 219, 254, 0.7);
    overflow: hidden;
}

.product-hero-card-media-stage img {
    width: min(100%, 280px);
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(30, 41, 59, 0.18));
}

.product-media-gallery-stage {
    position: relative;
}

.product-media-gallery-controls {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.8rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    pointer-events: none;
}

.product-media-gallery-nav {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px) saturate(138%);
    -webkit-backdrop-filter: blur(12px) saturate(138%);
    pointer-events: auto;
}

.product-media-gallery-nav .material-symbols-rounded {
    font-size: 1.05rem;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

.product-media-gallery-nav:disabled {
    opacity: 0.38;
}

body.insistel-products-page .product-media-gallery-nav {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(191, 219, 254, 0.88);
    color: #102033 !important;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.insistel-products-page .product-media-gallery-nav .material-symbols-rounded {
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

.product-hero-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
}

.product-hero-card-brandline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-hero-card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.8);
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
}

.product-hero-card-category-logo,
.product-hero-card-logo,
.product-hero-card-brand-chip,
.product-card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 22%, 128px);
    max-width: 42%;
    padding: 0.45rem 0.7rem;
    min-height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(203, 213, 225, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    flex: 0 0 auto;
}

.product-hero-card-category-logo img,
.product-hero-card-logo img,
.product-card-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 24px;
    object-fit: contain;
    object-position: center;
    display: block;
}

.product-hero-card-brand-chip {
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(241, 245, 249, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-hero-card .product-hero-card-brand-chip {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

#productos .product-hero-card-brand-chip,
#productos .product-hero-card-brand {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

.product-hero-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
}

.product-hero-card-brand {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.product-hero-card h3 {
    margin: 0;
    font-size: clamp(1.12rem, 1.6vw, 1.45rem);
    line-height: 1.1;
    color: #0f172a;
}

.product-hero-card-model {
    margin: 0;
    color: #475569;
    font-size: 0.84rem;
}

.product-hero-card-price {
    display: block;
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    color: #111827;
    letter-spacing: -0.04em;
}

.product-hero-card-actions {
    display: flex;
    margin-top: auto;
    padding-top: 0.2rem;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.product-hero-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #111827;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.product-hero-card-link:hover,
.product-hero-card-link:focus-visible {
    transform: translateY(-1px);
    background: #0f172a;
    border-color: #0f172a;
}

.product-hero-card-link--ghost {
    background: rgba(226, 232, 240, 0.75);
    color: #111827;
    border-color: rgba(203, 213, 225, 0.9);
}

.product-hero-card-link--ghost:hover,
.product-hero-card-link--ghost:focus-visible {
    background: rgba(226, 232, 240, 0.95);
    color: #111827;
    border-color: rgba(148, 163, 184, 0.95);
}

.product-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(0, 122, 255, 0.12), transparent 34%),
        var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    color: var(--insistel-text);
    isolation: isolate;
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-smooth);
}

.product-card:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-4px) scale(1.01);
}

.product-card--archive {
    height: 100%;
    min-height: 0;
    flex: none;
    background:
        radial-gradient(circle at top left, rgba(0, 122, 255, 0.1), transparent 32%),
        var(--glass-bg);
}

.product-card--archive .product-card-body--hero {
    display: grid;
    gap: 0.9rem;
}

.product-card-brandline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-card-tag,
.product-card-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
}

.product-card-brand-mark {
    width: clamp(92px, 24%, 128px);
    max-width: 42%;
    overflow: hidden;
    flex: 0 0 auto;
}

.product-card-tag {
    font-size: 0.72rem;
    font-weight: 700;
}

.product-card-brand-mark img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 24px;
    object-fit: contain;
    object-position: center;
    display: block;
}

.product-card--archive .product-card-tag,
.product-card--archive .product-card-brand-mark {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(173, 214, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.product-card-copy--hero {
    gap: 0.4rem;
}

.product-card-brandname {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-card-priceblock--hero {
    gap: 0.2rem;
}

.product-card-footer--hero {
    align-items: stretch;
}

.product-card-actions--hero {
    width: 100%;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.product-card-actions--hero .product-card-link {
    flex: 1 1 100%;
}

.product-card-link--ghost::after {
    content: none;
}

.product-card-media {
    position: relative;
    order: 1;
    margin: 0;
    overflow: hidden;
    min-height: 210px;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 1.1rem 1.1rem 0;
}

.product-card-media-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(12, 28, 48, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(128%);
    -webkit-backdrop-filter: blur(14px) saturate(128%);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.product-card-media::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 8%;
    height: 18%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0));
    filter: blur(16px);
}

.product-card-media img {
    position: relative;
    z-index: 1;
    width: min(100%, 240px);
    max-height: 170px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 16px 24px rgba(13, 23, 38, 0.18));
}

.product-card-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(220, 236, 255, 0.38);
}

.product-card-placeholder .material-symbols-rounded {
    font-size: 3rem;
}

.product-card-body {
    order: 2;
    display: grid;
    align-content: space-between;
    gap: 0.85rem;
    padding: 1.15rem 1.1rem 1.15rem;
    flex: 1 1 auto;
}

.product-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.product-card-kicker,
.product-card-brand,
.product-card-model {
    font-size: 0.74rem;
    color: #ffffff;
}

.product-card--archive .product-card-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 24%, 128px);
    max-width: 42%;
    min-height: 34px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(173, 214, 255, 0.1);
    color: rgba(226, 238, 252, 0.92);
    -webkit-text-fill-color: rgba(226, 238, 252, 0.92) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex: 0 0 auto;
}

.product-card-kicker {
    margin: 0;
    letter-spacing: -0.01em;
}

.product-card-brand {
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(173, 214, 255, 0.1);
    backdrop-filter: blur(12px);
}

.product-card-copy {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    max-width: none;
}

.product-card h2,
.product-card h3 {
    font-size: clamp(1rem, 1.15vw, 1.3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: pretty;
}

.product-card-model {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
}

.product-card-description {
    margin: 0;
    color: #ffffff;
    line-height: 1.45;
    font-size: 0.82rem;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(173, 214, 255, 0.08);
}

.product-card-priceblock {
    display: grid;
    gap: 0.15rem;
}

.product-card-price-label {
    font-size: 0.68rem;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.product-card-actions {
    display: flex;
    align-items: center;
}

.product-card-price {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.product-card-link,
.products-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    min-height: 36px;
    padding: 0.56rem 0.82rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(173, 214, 255, 0.12);
    color: #f5f7fa;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
    font-size: 0.76rem;
}

.product-card-link {
    cursor: pointer;
}

.product-card-link::after {
    content: 'north_east';
    font-family: 'Material Symbols Rounded';
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.25s ease;
}

.product-card h2,
.product-card h3,
.product-card p,
.product-card span,
.product-card a,
.product-card strong {
    color: #ffffff !important;
}

.product-card-link:hover,
.products-filter-reset:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
}

.product-card-link:hover::after,
.product-card-link:focus-visible::after {
    content: 'arrow_forward';
    transform: translateX(2px);
}

.products-carousel-controls {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: fit-content !important;
    justify-self: center;
    justify-content: center;
    margin-top: 0.4rem !important;
    z-index: 1 !important;
}

.section-products-spotlight .products-carousel-controls .slider-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(203, 213, 225, 0.92) !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.section-products-spotlight .products-carousel-controls .slider-nav:hover {
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.95) !important;
}

.section-products-spotlight .products-carousel-controls .slider-nav:disabled {
    opacity: 0.38;
    cursor: default;
    transform: none !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(203, 213, 225, 0.92) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot {
    background: rgba(148, 163, 184, 0.6) !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot.is-active {
    background: #111827 !important;
}

.products-carousel-controls[hidden],
[hidden],
template,
.screen-reader-text[hidden] {
    display: none !important;
}

.products-dots {
    min-width: 120px;
}

.products-spotlight-cta {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
}

.products-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 0.85rem;
    align-items: end;
    margin-bottom: 0;
    padding: 1.2rem 1.1rem;
    border-radius: 28px;
    background: rgba(4, 11, 22, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 4, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    position: relative;
    top: auto;
    z-index: 45;
    transition: box-shadow 0.4s ease;
}

.products-filter-control {
    display: grid;
    gap: 0.42rem;
    position: relative;
    width: 100%;
    min-width: 0;
}

.products-filter-control--search,
.products-filter-control--price,
.products-filter-reset {
    grid-column: 1 / -1;
}

.products-filter-control label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #ffffff;
    padding-left: 0.25rem;
}

.products-filter-control input,
.products-filter-control select {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.95rem;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    color: #ffffff;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    appearance: none;
    -webkit-appearance: none;
}

.products-filter-control select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='1'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    padding-right: 2.45rem;
    cursor: pointer;
}

.products-filter-control input:focus,
.products-filter-control select:focus {
    outline: 0;
    border-color: rgba(140, 200, 255, 0.65);
    box-shadow: 0 0 0 4px rgba(94, 180, 255, 0.18), inset 0 2px 6px rgba(0, 0, 0, 0.2);
    background: rgba(4, 10, 22, 0.7);
}

.products-filter-control input:hover:not(:focus),
.products-filter-control select:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}

.products-filter-control input[type="number"]::-webkit-inner-spin-button,
.products-filter-control input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(2);
    opacity: 0.9;
    cursor: pointer;
}

.products-filter-control--price {
    min-width: 0;
}

.products-price-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.products-price-range input {
    text-align: center;
}

.products-filter-control input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.products-filter-reset {
    min-height: 44px;
    width: 100%;
    padding: 0 1rem;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-filter-reset:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
}

.products-results-bar {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: -2.75rem;
    right: 0;
    left: 0;
    margin-bottom: 0;
    min-height: 0;
    align-items: center;
    pointer-events: none;
}

.products-results-copy {
    margin: 0;
    color: rgba(220, 232, 244, 0.8);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1.4rem;
}

.product-card--archive .product-card-media {
    min-height: 220px;
}

.product-card--archive .product-card-body {
    padding-top: 1.2rem;
}

.product-card--archive .product-card-copy {
    max-width: none;
}

.products-empty-state {
    margin-top: 1.4rem;
    padding: 3rem 1.4rem;
    border-radius: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.products-empty-state .material-symbols-rounded {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.74);
}

/* Product modal: premium technical sheet */
.product-modal {
    width: min(1120px, calc(100vw - 1.5rem));
    max-width: none;
    border: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
}

.product-modal::backdrop {
    background: rgba(2, 10, 22, 0.62);
    backdrop-filter: blur(18px) saturate(122%);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
}

.product-modal[open] {
    display: grid;
    place-items: center;
}

.product-modal-backdrop {
    position: fixed;
    inset: 0;
}

.product-modal-dialog {
    position: relative;
    width: min(1020px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 2.4rem);
    overflow: auto;
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 8%, rgba(90, 200, 250, 0.17), rgba(90, 200, 250, 0) 33%),
        radial-gradient(circle at 86% 12%, rgba(0, 122, 255, 0.15), rgba(0, 122, 255, 0) 37%),
        linear-gradient(156deg, rgba(8, 16, 30, 0.96), rgba(8, 14, 26, 0.92));
    border: 1px solid rgba(182, 220, 255, 0.19);
    box-shadow:
        0 40px 90px rgba(2, 7, 14, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.product-modal.is-open .product-modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.product-modal-close {
    position: absolute;
    top: 1.05rem;
    right: 1.05rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 20, 36, 0.78);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.product-modal-close:hover {
    transform: translateY(-1px) scale(1.03);
    background: rgba(14, 28, 48, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.product-modal-content {
    position: relative;
    z-index: 1;
    padding: clamp(1.2rem, 2.2vw, 2rem);
}

.pm-shell {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.8rem);
}

.pm-header {
    display: grid;
    gap: 0.42rem;
    max-width: 70ch;
    padding-right: 2.8rem;
}

.pm-kicker {
    margin: 0;
    font-size: 0.77rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214, 233, 255, 0.72);
}

.pm-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-wrap: balance;
}

.pm-subtitle {
    margin: 0;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
    color: rgba(224, 238, 255, 0.76);
}

.pm-main {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: clamp(0.85rem, 2vw, 1.4rem);
}

.pm-media {
    margin: 0;
    min-height: 280px;
    display: grid;
    gap: 0.78rem;
}

.pm-media-stage {
    position: relative;
    height: 100%;
    min-height: 280px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(12, 28, 48, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -20px 40px rgba(12, 28, 48, 0.08);
    overflow: hidden;
}

.pm-media-stage::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 9%;
    height: 16%;
    border-radius: 999px;
    filter: blur(16px);
    background: radial-gradient(circle, rgba(1, 5, 10, 0.56), rgba(1, 5, 10, 0));
}

.pm-media-stage img {
    position: relative;
    z-index: 1;
    width: min(100%, 410px);
    max-height: 280px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.36));
}

.pm-gallery-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.6rem;
}

.pm-gallery-thumb {
    min-height: 76px;
    padding: 0.55rem;
    border-radius: 18px;
    border: 1px solid rgba(173, 214, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    place-items: center;
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.pm-gallery-thumb img {
    width: 100%;
    max-height: 52px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.18));
}

.pm-gallery-thumb.is-active,
.pm-gallery-thumb[aria-current="true"] {
    border-color: rgba(172, 216, 255, 0.52);
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 12px 24px rgba(2, 10, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pm-image-placeholder-icon {
    font-size: 4rem;
    color: rgba(209, 222, 238, 0.56);
}

.pm-summary {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.pm-price-block {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-price-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(214, 233, 255, 0.65);
}

.pm-price {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pm-actions {
    display: flex;
    align-items: center;
}

.pm-actions .pm-whatsapp-button {
    width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.78rem;
    text-align: center;
    text-decoration: none;
    border-radius: 18px;
    min-height: 58px;
    padding: 0.82rem 1.15rem !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f7fff9 !important;
    -webkit-text-fill-color: #f7fff9 !important;
    background:
        linear-gradient(180deg, rgba(41, 190, 102, 0.96) 0%, rgba(20, 145, 74, 0.98) 100%) !important;
    border: 1px solid rgba(125, 250, 176, 0.34) !important;
    box-shadow:
        0 18px 34px rgba(17, 103, 54, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(7, 87, 39, 0.32) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.pm-actions .pm-whatsapp-button:hover,
.pm-actions .pm-whatsapp-button:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(48, 204, 111, 0.98) 0%, rgba(18, 155, 78, 1) 100%) !important;
    border-color: rgba(165, 255, 201, 0.46) !important;
    box-shadow:
        0 22px 40px rgba(17, 103, 54, 0.3),
        0 0 0 1px rgba(186, 255, 211, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(7, 87, 39, 0.28) !important;
}

.pm-actions .pm-whatsapp-button:active {
    transform: translateY(1px) scale(0.992);
}

.pm-whatsapp-button-icon {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 18px rgba(10, 73, 35, 0.15);
}

.pm-whatsapp-button-icon img {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    object-fit: contain;
}

.pm-whatsapp-button-icon .material-symbols-rounded {
    font-size: 1.12rem;
    line-height: 1;
}

.pm-whatsapp-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.pm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.36rem 0.8rem;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1;
    color: rgba(238, 247, 255, 0.94);
    border: 1px solid rgba(173, 214, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.pm-chip--in-stock {
    border-color: rgba(73, 223, 174, 0.55);
    background: rgba(47, 171, 131, 0.17);
    color: #d9ffe8;
}

.pm-chip--on-demand {
    border-color: rgba(255, 195, 96, 0.45);
    background: rgba(208, 124, 35, 0.17);
    color: #ffe7c8;
}

.pm-specs {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.pm-spec-row {
    padding: 0.74rem 0.82rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    gap: 0.26rem;
}

.pm-spec-row dt {
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(205, 225, 247, 0.64);
}

.pm-spec-row dd {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.24;
    color: rgba(242, 247, 255, 0.96);
    word-break: break-word;
}

.pm-description-wrap {
    border-top: 1px solid rgba(173, 214, 255, 0.18);
    padding-top: 1rem;
}

.pm-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: rgba(228, 242, 255, 0.9);
}

.pm-description {
    color: rgba(219, 233, 250, 0.94);
    font-size: 0.92rem;
    line-height: 1.6;
}

.pm-description p {
    margin: 0;
}

@media (max-width: 900px) {
    .product-modal {
        width: calc(100vw - 0.85rem);
    }

    .product-modal-dialog {
        width: calc(100vw - 0.85rem);
        max-height: calc(100dvh - 1.2rem);
        border-radius: 24px;
    }

    .product-modal-content {
        padding: 1rem;
    }

    .pm-header {
        padding-right: 2.3rem;
    }

    .pm-main {
        grid-template-columns: 1fr;
    }

    .pm-media,
    .pm-media-stage {
        min-height: 220px;
    }

    .pm-media-stage img {
        max-height: 210px;
    }
}

@media (max-width: 640px) {
    .product-modal-close {
        top: 0.65rem;
        right: 0.65rem;
        width: 38px;
        height: 38px;
    }

    .pm-specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {
    .products-archive-layout {
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
        gap: 1rem;
    }

    .products-star-carousel {
        --products-visible: 2;
    }

    .products-star-carousel--catalog {
        --products-visible: 2;
    }

    .product-card {
        min-height: 0;
    }

    .product-card-media {
        min-height: 220px;
    }

    .products-filters {
        padding: 1rem 0.95rem;
    }

    .products-filter-control--price {
        min-width: 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.95rem;
    }

    .products-filter-reset {
        width: 100%;
    }

    .products-filters-column {
        top: calc(var(--insistel-sticky-offset, 76px));
    }
}

@media (min-width: 1081px) and (max-width: 1360px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.insistel-products-page main {
        padding-top: calc(84px + env(safe-area-inset-top, 0px));
    }

    .section-products-spotlight {
        padding-block: 3.5rem;
    }

    .products-spotlight-head {
        text-align: center !important;
        margin-bottom: 0.35rem;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 1rem !important;
    }

    .products-spotlight-head .section-title--two-line {
        width: min(100%, 22rem) !important;
        max-width: min(100%, 22rem) !important;
    }

    .products-spotlight-head .section-title--two-line .forced-line {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .section-products-spotlight .products-spotlight-head .section-title {
        font-size: clamp(1.8rem, 8.2vw, 2.35rem);
        line-height: 1.05;
        text-wrap: balance;
    }

    .section-products-spotlight .products-spotlight-head p:last-child {
        font-size: 1rem;
        line-height: 1.45;
        width: 100% !important;
        max-width: min(100%, 32rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .section-products-archive {
        padding-top: 1.75rem;
    }

    .section-products-archive .products-archive-shell {
        width: calc(100vw - 1.25rem);
    }

    .products-archive-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .products-filters-column {
        position: static;
        top: auto;
    }

    .products-results-bar {
        position: static;
        margin-bottom: 0.9rem;
        min-height: 0;
        justify-content: flex-end;
        pointer-events: auto;
    }

    .section-products-spotlight .products-carousel,
    .section-products-spotlight .products-spotlight-cta {
        width: calc(100vw - 1.25rem);
        margin-inline: calc(50% - (100vw - 1.25rem) / 2);
    }

    .products-carousel {
        gap: 0.85rem;
    }

    .products-carousel-viewport {
        width: 100%;
        overflow: hidden;
    }

    .products-carousel-track {
        width: 100%;
        align-items: stretch;
        gap: 0.85rem;
        grid-auto-columns: calc((100% - ((var(--products-mobile-visible, 1) - 1) * 0.85rem)) / var(--products-mobile-visible, 1));
    }

    .products-carousel-track > .product-hero-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .products-star-carousel {
        padding: 1rem;
        border-radius: 26px;
    }

    .section-products-spotlight .products-star-carousel.reveal,
    .section-products-spotlight .products-spotlight-cta.reveal,
    .section-products-spotlight .products-static-grid.reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .products-secondary-panel {
        padding: 1rem;
        border-radius: 26px;
    }

    .products-star-carousel-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .products-star-carousel-head h3 {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
    }

    .products-static-grid {
        grid-template-columns: repeat(var(--products-mobile-visible, 1), minmax(0, 1fr));
        gap: 0.85rem;
    }

    .products-static-grid > .product-hero-card {
        width: 100%;
        max-width: 100%;
    }

    #valores .section-head {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 1rem !important;
        justify-items: center !important;
        text-align: center !important;
    }

    #valores .section-head .section-title--two-line {
        width: min(100%, 21rem) !important;
        max-width: min(100%, 21rem) !important;
        margin-inline: auto !important;
    }

    #valores .section-head .section-title--two-line .forced-line {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-wrap: balance;
        text-align: center !important;
    }

    #valores .section-head .section-title {
        font-size: clamp(1.8rem, 8vw, 2.3rem) !important;
        line-height: 1.05 !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    #valores .section-head p,
    #valores .section-head .values-lead {
        width: 100% !important;
        max-width: min(100%, 32rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    #soluciones .section-head,
    .solutions-intro .section-head {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 1rem !important;
        justify-items: center !important;
        text-align: center !important;
    }

    #soluciones .section-head .section-title--two-line,
    .solutions-intro .section-head .section-title--two-line {
        width: min(100%, 21rem) !important;
        max-width: min(100%, 21rem) !important;
        margin-inline: auto !important;
    }

    #soluciones .section-head .section-title--two-line .forced-line,
    .solutions-intro .section-head .section-title--two-line .forced-line {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-wrap: balance;
        text-align: center !important;
    }

    #soluciones .section-head .section-title,
    .solutions-intro .section-head .section-title {
        font-size: clamp(1.8rem, 8vw, 2.3rem) !important;
        line-height: 1.05 !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    #soluciones .section-head p,
    .solutions-intro .section-head p {
        width: 100% !important;
        max-width: min(100%, 32rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .solutions-intro {
        margin-bottom: clamp(1.5rem, 5vw, 2.2rem) !important;
    }

    .solutions-track {
        margin-top: 0.5rem !important;
    }

    .products-carousel-controls {
        width: min(100%, 17.5rem) !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.8rem !important;
        margin-top: 1rem !important;
        padding-inline: 0.2rem;
    }

    .section-products-spotlight .products-carousel-controls .slider-nav {
        width: 3.25rem !important;
        height: 3.25rem !important;
        min-width: 3.25rem !important;
        flex: 0 0 3.25rem !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 3rem !important;
        padding: 0.42rem 0.58rem !important;
        gap: 0.34rem !important;
        justify-content: center !important;
        overflow: hidden;
        background: rgba(248, 251, 255, 0.98) !important;
        border-color: rgba(191, 206, 229, 0.94) !important;
        box-shadow:
            0 12px 26px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 0 0 1px rgba(227, 236, 248, 0.8) !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot {
        width: 0.58rem !important;
        height: 0.58rem !important;
        flex: 0 0 0.58rem;
        border-radius: 999px !important;
        background: rgba(157, 173, 196, 0.7) !important;
        box-shadow: none !important;
        transform: none !important;
        transition:
            width .3s cubic-bezier(.22, 1, .36, 1),
            background-color .28s ease,
            opacity .28s ease,
            transform .28s ease !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot[aria-current="false"] {
        opacity: 0.72;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot.is-active {
        width: 1.75rem !important;
        flex-basis: 1.75rem !important;
        background: #0f172a !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow:
            0 6px 12px rgba(15, 23, 42, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    .product-hero-card {
        padding: 0.95rem;
        border-radius: 22px;
    }

    .product-hero-card-media-stage {
        min-height: 190px;
    }

    .product-hero-card-media-stage img {
        max-height: 160px;
    }

    .product-hero-card-actions,
    .product-card-actions {
        width: 100%;
    }

    .product-hero-card-link {
        width: 100%;
    }

    .product-card {
        border-radius: 24px;
    }

    .product-card-media {
        min-height: 190px;
        padding: 1rem 1rem 0;
    }

    .product-card-media-stage {
        min-height: 158px;
        border-radius: 18px;
    }

    .product-card-media img {
        width: min(100%, 200px);
        max-height: 148px;
    }

    .product-card-body {
        padding: 0.95rem 0.95rem 1rem;
        gap: 0.72rem;
    }

    .product-card-topline {
        gap: 0.42rem;
    }

    .product-card-brand,
    .product-card-kicker,
    .product-card-model,
    .product-card-price-label,
    .product-card-link {
        font-size: 0.72rem;
    }

    .product-card h2,
    .product-card h3 {
        font-size: clamp(1rem, 5.8vw, 1.22rem);
        line-height: 1.1;
    }

    .product-card-description {
        -webkit-line-clamp: 3;
        font-size: 0.8rem;
    }

    .product-card-price {
        font-size: 1.08rem;
    }

    .product-card-footer {
        gap: 0.55rem;
        padding-top: 0.6rem;
    }

    .products-carousel-controls {
        width: 100% !important;
        max-width: 320px;
        justify-content: space-between;
        margin-top: 0.2rem !important;
    }

    .products-dots {
        min-width: 84px;
    }

    .products-spotlight-cta {
        margin-top: 1.1rem;
    }

    .products-spotlight-cta .button {
        width: 100%;
        justify-content: center;
    }

    .products-filters {
        grid-template-columns: 1fr;
    }

    .products-filters {
        position: static;
        top: auto;
        border-radius: 24px;
        padding: 1rem 1.15rem;
        gap: 0.75rem;
    }

    .product-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

#inter-4 .spectacle-content {
    max-width: min(1080px, 94vw);
}

#inter-4 .spectacle-title {
    line-height: 1.28;
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}

.section-about {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-catalog {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-conversion {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.section-head {
    margin-bottom: 4rem;
    max-width: 820px;
}

.section-head h2,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Google Sans Flex', sans-serif;
    line-height: 1.15;
    margin: 0;
}

h1,
h2,
h3 {
    color: #ffffff;
    margin-bottom: 0.5em;
    font-weight: 500;
}

h4,
h5,
h6 {
    color: #ffffff;
    margin-bottom: 0.5em;
}

.text-gradient,
.hero h1,
.section-title {
    color: #ffffff;
    /* Unabashedly spectacular, Apple Intelligence / Siri inspired animated gradient */
}

@keyframes spectacular-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero h1 {
    max-width: 14ch;
    font-size: clamp(3rem, 7vw, 6.2rem);
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 0.95;
}

.apple-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.apple-loader img {
    max-height: 60px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
    animation: float 6s ease-in-out infinite;
}

.apple-loader.is-visible img {
    opacity: 1;
    transform: scale(1);
}

.apple-loader.is-finished {
    transform: translateY(-100%);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 50;
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    background: rgba(29, 29, 31, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1000px, 92%);
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
}

.brand-link {
    display: inline-flex;
    align-items: center;
}

.custom-logo,
.default-logo {
    width: auto;
    height: auto;
    max-height: clamp(24px, 4.2vw, 34px);
    max-width: clamp(120px, 22vw, 238px);
    object-fit: contain;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: .94rem;
    opacity: .9;
}

.site-nav a:hover {
    opacity: 1;
    color: var(--insistel-primary);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    width: 42px;
    height: 42px;
    padding: 6px;
    cursor: pointer;
}

.menu-toggle span {
    margin: 0;
}

.menu-toggle .material-symbols-rounded {
    font-size: 1.45rem;
    color: var(--insistel-text);
    transition: transform .24s ease, color .24s ease;
}

.menu-toggle:hover .material-symbols-rounded {
    transform: scale(1.06);
    color: #ffffff;
}

.hero {
    min-height: 90vh;
    position: relative;
    display: grid;
    align-items: center;
    overflow: clip;
}

.hero::before {
    content: '';
    position: absolute;
    inset: auto auto -140px -120px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.1), transparent 68%);
    animation: liquid-float 11s ease-in-out infinite alternate;
    will-change: transform;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 120px -120px auto auto;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.07), transparent 72%);
    animation: liquid-float 13s ease-in-out infinite alternate-reverse;
    will-change: transform;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-content {
    padding: 4rem 0 5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--insistel-primary);
    margin-bottom: 1.15rem;
    background: rgba(0, 122, 255, 0.08);
    backdrop-filter: blur(8px);
}

.hero h1 {
    max-width: 12ch;
    font-size: clamp(2.2rem, 4.4vw, 4.8rem);
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-text {
    max-width: 56ch;
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 1.4rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .82rem 1.4rem;
    font-weight: 600;
    font-size: .96rem;
    font-family: 'Google Sans Flex', sans-serif;
    color: #ffffff;
    background: var(--insistel-primary);
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), background-color var(--transition-smooth);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.25);
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 122, 255, 0.35);
}

.button:active {
    transform: scale(0.96);
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2);
}

.button-alt {
    background: #ffffff;
    color: var(--insistel-primary);
    border: 1px solid rgba(0, 122, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.button-alt:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.stat-grid {
    margin-top: 2rem;
    display: grid;
    gap: .95rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-content-slider {
    position: relative;
    z-index: 2;
}

.liquid-slider {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --slide-depth: 240px;
    position: relative;
    min-height: clamp(500px, 68vh, 740px);
    margin-bottom: 2rem;
}

.slider-webgl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* behind slides viewport (z-index managed by JS) */
    pointer-events: none;
    border-radius: clamp(24px, 3vw, 34px);
    overflow: hidden;
}

.slides-viewport {
    position: relative;
    min-height: inherit;
    perspective: 1600px;
    transform-style: preserve-3d;
}

.liquid-slide {
    --offset: 0;
    --abs: 0;
    position: absolute;
    inset: 0;
    border-radius: clamp(24px, 3vw, 34px);
    overflow: hidden;
    transform:
        translate3d(calc(var(--offset) * 85%), 0, 0) scale(calc(1 - (var(--abs) * .12)));
    opacity: calc(1 - (var(--abs) * .6));
    transition:
        transform 0.95s cubic-bezier(0.25, 1, 0.4, 1),
        opacity 0.9s cubic-bezier(0.25, 1, 0.4, 1),
        filter 0.9s ease;
    filter: blur(calc(var(--abs) * 6px));
    pointer-events: none;
    will-change: transform, opacity;
}

.liquid-slide.is-active {
    pointer-events: auto;
    filter: none;
}

.slide-media,
.slide-glass {
    position: absolute;
    inset: 0;
}

.slide-media {
    background:
        linear-gradient(rgba(2, 10, 22, 0.26), rgba(2, 10, 22, 0.5)),
        var(--slide-image, radial-gradient(circle at 18% 14%, rgba(104, 186, 255, 0.34), rgba(8, 24, 52, 0.46) 48%, rgba(3, 10, 22, 0.72) 100%));
    background-size: cover;
    background-position: center;
    transform: translateZ(-18px) scale(1.08);
    opacity: .8;
}

.slide-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 15%, rgba(0, 122, 255, 0.22), transparent 40%),
        radial-gradient(circle at 86% 20%, rgba(0, 168, 255, 0.18), transparent 42%),
        linear-gradient(155deg, rgba(0, 24, 58, 0.06), rgba(0, 20, 48, 0.32));
}

.slide-media::after {
    content: '';
    position: absolute;
    inset: 0;
}

.media-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 42px 42px, 42px 42px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 82%);
    transform: translateZ(-4px) scale(1.05);
}

.slide-glass {
    inset: auto auto 0 0;
    width: min(800px, 90%);
    margin: 1.4rem;
    padding: clamp(1rem, 2.1vw, 2rem);
    border-radius: clamp(20px, 3vw, 30px);
    background: transparent;
    color: #ffffff;
    transform: translateZ(48px) translateX(calc(var(--tilt-x) * -0.25));
}

.slide-glass>*+* {
    margin-top: .8rem;
}

.liquid-slide h1,
.liquid-slide h2 {
    max-width: 14ch;
    font-size: clamp(2rem, 4.3vw, 4.4rem);
    text-wrap: balance;
    color: #ffffff;
}

.liquid-slide .hero-text {
    max-width: 58ch;
    margin-bottom: .1rem;
    color: rgba(255, 255, 255, 0.9);
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
}

.slider-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--insistel-text);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform var(--transition-bounce), background var(--transition-smooth), box-shadow var(--transition-smooth);
}

.slider-nav:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.slider-nav:active {
    transform: scale(0.92);
    box-shadow: none;
}

.slider-dots {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.slider-dot {
    border: 0;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-bounce), background var(--transition-smooth);
}

.slider-dot:active {
    transform: scale(0.92);
}

.slider-dot.is-active {
    background: var(--insistel-primary);
    transform: scale(1.36);
}

.slider-progress {
    width: 100%;
    margin-top: .9rem;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.slider-progress>span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--insistel-primary);
}

.stat-card,
.card,
.testimonial-card,
.cta-block {
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1.8rem;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    position: relative;
    isolation: isolate;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-smooth);
}

.stat-card:hover,
.card:hover,
.testimonial-card:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-4px) scale(1.01) perspective(1000px);
}

.stat-card::before,
.card::before,
.testimonial-card::before,
.cta-block::before {
    display: none;
}

.stat-card strong {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.icon-inline {
    font-size: 1.1em;
}

.card-icon {
    font-size: 1.35rem;
    line-height: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #ffffff;
    background: var(--insistel-primary);
    box-shadow: 0 6px 14px rgba(0, 122, 255, 0.25);
    margin-bottom: .7rem;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 1, 'wght' 520, 'GRAD' 0, 'opsz' 24;
}

.section-title {
    display: block;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.split-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
}

.timeline {
    display: grid;
    gap: .7rem;
}

.timeline article {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    box-shadow: var(--glass-shadow);
}

.timeline span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--insistel-primary);
}

/* Solutions Section: Apple-Style Horizontal Scroll */
.solutions-scroll-container {
    position: relative;
    width: 100%;
    /* Height will be calculated via JS based on the scrollable content */
    height: 400vh;
}

#soluciones.section-solutions {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #030712;
    z-index: 10;
}

.solutions-webgl-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}

.solutions-intro {
    position: absolute;
    top: clamp(4rem, 8vh, 6rem);
    left: 0;
    right: 0;
    z-index: 4;
    text-align: center;
    pointer-events: none;
    /* Let clicks pass through if needed, though mostly text */
}

.solutions-intro .section-head {
    max-width: 800px;
    margin: 0 auto;
}

.solutions-intro .section-title {
    color: #ffffff;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.solutions-intro p {
    color: rgba(230, 240, 255, 0.9);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.solutions-track {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translate3d(0, 0, 0);
    display: flex;
    align-items: center;
    gap: 5vw;
    /* Add padding to the start so the first card sits in the middle, and also to the end */
    padding: 0 35vw;
    will-change: transform;
    z-index: 3;
    /* Default fallback for devices with no JS or while loading */
    transition: transform 0.1s ease-out;
}

.solution-panel {
    position: relative;
    flex: 0 0 auto;
    width: clamp(340px, 50vw, 760px);
    height: clamp(420px, 60vh, 680px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #07194b;
    border: 1px solid rgba(126, 164, 255, 0.24);
    box-shadow: 0 28px 60px rgba(3, 10, 29, 0.32);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-origin: center center;
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-smooth);
}

.solution-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(5rem, 10vh, 6.2rem);
    background: #06153f;
    z-index: 2;
}

.solution-panel:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 34px 72px rgba(3, 10, 29, 0.38);
    border-color: rgba(165, 196, 255, 0.34);
}

.solution-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.solution-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.solution-panel:hover .solution-img {
    transform: scale(1.08);
}

.solution-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 34, 0.28);
    z-index: 1;
}

.solution-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: clamp(1.25rem, 2vw, 1.9rem);
    padding-bottom: calc(clamp(5rem, 10vh, 6.2rem) + clamp(1rem, 1.4vw, 1.2rem));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 0;
    gap: .72rem;
    background: none;
}

.solution-icon {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--insistel-primary);
    margin-bottom: .35rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.solution-title {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 10px 30px rgba(2, 7, 20, 0.72);
}

.solution-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: rgba(220, 235, 255, 0.9);
    line-height: 1.5;
    margin: 0;
    max-width: min(92%, 34rem);
    text-shadow: 0 8px 24px rgba(2, 7, 20, 0.68);
}

.solution-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: auto;
    margin-top: 0;
    min-width: 9.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.35rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    position: absolute;
    right: clamp(1.1rem, 2vw, 1.8rem);
    bottom: clamp(1rem, 1.8vw, 1.5rem);
    transition: background 0.3s, transform 0.3s;
}

.solution-link:hover {
    background: var(--insistel-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.case-card {
    position: relative;
    overflow: hidden;
}

.case-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.15), transparent 70%);
}

.brands-slider {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.brand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem 1.15rem;
    text-align: center;
    border-radius: 999px;
    font-weight: 500;
    font-size: .94rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.testimonial-track {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-card p {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.testimonial-card cite {
    font-style: normal;
    font-size: .9rem;
    color: var(--insistel-accent);
}

.section-cta {
    padding-top: 0;
}

.cta-block {
    text-align: center;
    padding: 2rem;
    max-width: 760px;
    margin-inline: auto;
}

.site-footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #000000 !important;
    position: relative;
    z-index: 2;
    color: #a1a1aa !important;
}

.site-footer h3,
.site-footer h4,
.site-footer strong {
    color: #ffffff !important;
}

.site-footer p,
.site-footer li {
    color: #a1a1aa !important;
}

.site-footer a {
    color: #a1a1aa !important;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #ffffff !important;
}

.footer-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1.2fr .9fr .8fr;
}

.contact-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: .35rem;
}

.footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.prose {
    max-width: 760px;
}

.prose>*+* {
    margin-top: .9rem;
}

.reveal {
    opacity: 0;
    transform: translateY(30px) scale(.98);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .8s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card-media {
    margin: -1.4rem -1.4rem 1.15rem;
    border-radius: 26px 26px 14px 14px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.placeholder-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transform: translateZ(0);
    transition: transform .65s cubic-bezier(.22, .9, .2, 1), filter .65s ease;
    filter: saturate(1.08) contrast(1.03);
}

.card:hover .placeholder-img {
    transform: scale(1.06);
}

.catalog-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-card h3 {
    margin-bottom: .45rem;
}

.value-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

.value-list li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.target-block {
    margin-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--insistel-text) 16%, transparent);
    padding-top: .8rem;
}

.values-grid {
    align-items: center;
}

.media-stack {
    position: relative;
}

.media-stack .placeholder-img {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--insistel-text) 18%, transparent);
    box-shadow: var(--shadow);
}

.media-stack .is-floating {
    width: min(72%, 430px);
    position: absolute;
    right: -3%;
    bottom: -14%;
    animation: media-float 7.5s ease-in-out infinite;
}

/* legacy grid helpers — no longer used by the redesigned sections */
.brochure-grid,
.conversion-grid {
    display: grid;
    gap: 1rem;
}

.cta-contact {
    margin-top: 1rem;
    display: grid;
    gap: .4rem;
    font-size: .95rem;
    color: color-mix(in srgb, var(--insistel-text) 82%, transparent);
}

.cta-contact span {
    display: inline-flex;
    gap: .4rem;
    justify-content: center;
    align-items: center;
}

@keyframes liquid-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(14px, -18px, 0) scale(1.04);
    }

    100% {
        transform: translate3d(-16px, 14px, 0) scale(.98);
    }
}

@keyframes media-float {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.5deg);
    }

    50% {
        transform: translate3d(0, -14px, 0) rotate(-1.4deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0.6deg);
    }
}

@keyframes loader-spin-a {
    to {
        transform: rotate(360deg) rotateX(24deg);
    }
}

@keyframes loader-spin-b {
    to {
        transform: rotate(-360deg) rotateY(32deg);
    }
}

@keyframes loader-spin-c {
    to {
        transform: rotate(360deg) rotateX(-26deg) rotateY(12deg);
    }
}

@keyframes loader-breathe {

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

    50% {
        transform: scale(1.16);
    }
}

@keyframes loader-node {

    0%,
    100% {
        transform: scale(.65);
        opacity: .45;
    }

    50% {
        transform: scale(1.45);
        opacity: 1;
    }
}

@keyframes loader-exit {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(6px);
        transform: scale(1.04);
        visibility: hidden;
    }
}

@keyframes cinematic-ambient {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-3vw, -4vh, 0) scale(1.1);
    }
}

@media (max-width: 980px) {

    .split-grid,
    .cards-grid,
    .promise-grid,
    .catalog-grid,
    .testimonial-track,
    .brands-slider,
    .conversion-grid,
    .brochure-grid,
    .footer-grid,
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero h1 {
        max-width: none;
    }

    .liquid-slide h1,
    .liquid-slide h2 {
        max-width: 20ch;
    }
}

@media (max-width: 760px) {
    .menu-toggle {
        display: block;
    }

    .site-nav {
        position: absolute;
        left: 4%;
        right: 4%;
        top: calc(100% + 8px);
        border-radius: var(--radius-sm);
        padding: .7rem;
        display: none;
        background: color-mix(in srgb, var(--insistel-bg) 94%, #000);
        border: 1px solid color-mix(in srgb, var(--insistel-text) 14%, transparent);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .split-grid,
    .cards-grid,
    .promise-grid,
    .catalog-grid,
    .testimonial-track,
    .brands-slider,
    .conversion-grid,
    .brochure-grid,
    .footer-grid,
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4.5rem 0;
    }

    .liquid-slider {
        min-height: 570px;
    }

    .slide-glass {
        width: calc(100% - 1.4rem);
        margin: .7rem;
        padding: 1rem;
    }

    .liquid-slide h1,
    .liquid-slide h2 {
        font-size: clamp(1.7rem, 9vw, 2.35rem);
    }

    .media-stack .is-floating {
        position: static;
        width: 100%;
        margin-top: .8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-slide {
        transition-duration: .01ms;
        transform: none;
        filter: none;
    }

    .slider-progress {
        display: none;
    }

    .hero::before,
    .hero::after {
        animation: none;
    }

    .loader-ring,
    .loader-core,
    .loader-node,
    .apple-loader.is-finished {
        animation: none;
    }
}

/* --- Phase 6: Scroll Sequence (Apple Experience) --- */
.scroll-sequence {
    --scroll-progress: 0;
    position: relative;
    /* 100vh of sticky space per item, plus the initial view */
    height: calc((var(--total-items, 4) + 1) * 100vh);
    margin-top: 4rem;
}

.sticky-viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 4%;
}

.scroll-sequence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
}

.scroll-headers {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.scroll-text-track {
    position: relative;
    height: 40vh;
    /* space for text items to overlap */
    margin-top: 2rem;
}

.scroll-text-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Math to determine when this specific item is active */
    --activation-point: calc(var(--item-index) / var(--total-items));
    --next-point: calc((var(--item-index) + 1) / var(--total-items));

    /* Calculate raw distance from current progress */
    --distance: calc(var(--scroll-progress) - var(--activation-point));

    /* 
    Visibility logic:
    If we are before the activation point, fade in.
    If we are past the next point, fade out.
    We use clamp to keep opacity between 0 and 1. 
*/
    --local-progress: calc(var(--distance) * var(--total-items));
    --local-abs: max(calc(var(--local-progress) - 0.5), calc(0.5 - var(--local-progress)));

    opacity: clamp(0, calc(1 - var(--local-abs) * 2), 1);
    transform: translateY(calc((0.5 - var(--local-progress)) * 40px));

    transition: opacity 0.1s linear, transform 0.1s linear;
    pointer-events: none;
}

.scroll-text-item h3 {
    color: #ffffff;
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin-bottom: 1rem;
}

.scroll-text-item p {
    font-size: 1.25rem;
    color: #a1a1aa;
    line-height: 1.7;
    font-size: 1.125rem;
}

/* Right side media container */
.scroll-media-track {
    position: relative;
    width: 100%;
    height: 70vh;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    background: #050507;
}

.scroll-media-item {
    position: absolute;
    inset: 0;
    margin: 0;
    --activation-point: calc(var(--item-index) / var(--total-items));
    --distance: calc(var(--scroll-progress) - var(--activation-point));
    --local-progress: calc(var(--distance) * var(--total-items));
    --local-abs: max(calc(var(--local-progress) - 0.5), calc(0.5 - var(--local-progress)));

    /* Fade sequence */
    opacity: clamp(0, calc(2 - var(--local-abs) * 3), 1);

    /* Scale sequence: image grows slightly as you scroll past it */
    transform: scale(calc(1 + (var(--local-progress) * 0.1)));

    /* Blur unactive images for depth */
    filter: blur(calc(clamp(0, var(--local-abs) * 10, 20) * 1px));

    will-change: transform, opacity, filter;
}

.scroll-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glass-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 5, 7, 0.8));
    pointer-events: none;
}

/* --- 2026 Design Polish Layer --- */
:root {
    --insistel-primary: #0a84ff;
    --insistel-secondary: #5e9dff;
    --insistel-accent: #4fd3ff;
    --insistel-bg: #000000;
    --insistel-surface: #0a0a0c;

    /* Premium Text Gradients (Insistel Brand) */
    --gradient-insistel-core: linear-gradient(135deg, #007aff 0%, #6f00ff 100%); /* Blue to Deep Purple */
    --gradient-insistel-growth: linear-gradient(135deg, #7B1FA2 0%, #00E676 100%); /* Purple to Emerald Green */
    --gradient-insistel-eco: linear-gradient(135deg, #005bb5 0%, #10b981 100%); /* Core Blue to Brilliant Green */
    --gradient-aurora: linear-gradient(135deg, #007aff 0%, #ff00ff 50%, #00ffff 100%);
    
    --insistel-surface-2: #101a2d;
    --insistel-text: #eef4ff;
    --insistel-muted: #9fb0c9;
    --insistel-line: rgba(154, 184, 226, 0.18);
    --insistel-glow: 0 24px 80px rgba(10, 132, 255, 0.2);
}

body {
    color: var(--insistel-text);
    background:
        radial-gradient(1300px 760px at 8% -8%, rgba(59, 130, 246, 0.18), transparent 58%),
        radial-gradient(1100px 660px at 95% 8%, rgba(24, 119, 242, 0.12), transparent 62%),
        linear-gradient(180deg, #04060b 0%, #070b15 35%, #060b14 100%);
}

body::before {
    background:
        radial-gradient(1000px 640px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 62%),
        repeating-linear-gradient(90deg, transparent 0, transparent 118px, rgba(255, 255, 255, 0.015) 119px, rgba(255, 255, 255, 0.015) 120px);
    opacity: .7;
}

p,
li,
blockquote {
    color: var(--insistel-muted);
}

.site-header {
    height: 56px;
    background: rgba(9, 14, 24, 0.66);
    border-bottom: 1px solid rgba(168, 189, 222, 0.14);
}

.custom-logo,
.default-logo {
    max-height: clamp(30px, 5vw, 42px);
    max-width: clamp(146px, 24vw, 284px);
}

.site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: .92rem;
    color: rgba(236, 243, 255, 0.82);
    transition: color .25s ease, opacity .25s ease;
}

.site-nav a:hover {
    color: #ffffff;
}

.hero {
    min-height: 100vh;
}

.hero::before {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.22), transparent 70%);
}

.hero::after {
    background: radial-gradient(circle, rgba(79, 211, 255, 0.15), transparent 70%);
}

.hero-badge {
    border-color: rgba(107, 159, 255, 0.35);
    background: rgba(24, 56, 112, 0.35);
    color: #c9dcff;
}

.hero h1,
.liquid-slide h1,
.liquid-slide h2 {
    color: #ffffff;
    animation: none;
}

.hero-text,
.liquid-slide .hero-text {
    color: rgba(231, 240, 255, 0.82);
}

.section {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.section-title {
    color: #ffffff;
    font-size: clamp(2.15rem, 4.6vw, 4.15rem);
    color: #f5f9ff;
    animation: heading-flow 11s ease-in-out infinite;
}

.section-head p {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.4;
    color: rgba(223, 235, 255, 0.78);
}

.section-about,
.section-catalog,
.section-conversion {
    border-color: var(--insistel-line);
}

.section-about,
.section-values,
.section-cases,
.section-testimonials,
.section-brochure {
    position: relative;
}

.section-about::before,
.section-values::before,
.section-cases::before,
.section-testimonials::before,
.section-brochure::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.015));
}

.timeline-wrap {
    display: grid;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.timeline-intro {
    max-width: 62ch;
    align-self: center;
    padding-right: clamp(.2rem, 1.5vw, 1.2rem);
}

.timeline-kicker {
    margin: 0 0 .7rem;
    font-size: .76rem;
    font-weight: 700;
    color: rgba(170, 211, 255, 0.84);
}

.timeline-intro .section-title {
    margin-bottom: 1rem;
    max-width: 17ch;
    font-size: clamp(2rem, 4.8vw, 4.35rem);
    line-height: 1.04;
}

.timeline-intro p {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(1rem, 1.45vw, 1.22rem);
    line-height: 1.44;
    color: rgba(220, 236, 255, 0.82);
}

.timeline-years {
    position: relative;
    z-index: 2;
    padding: .7rem;
    display: flex;
    flex-wrap: wrap;
    border-radius: 999px;
    border: 1px solid rgba(144, 178, 231, 0.3);
    background: rgba(5, 12, 24, 0.52);
    backdrop-filter: blur(14px);
    width: fit-content;
    gap: .55rem;
}

.timeline-year {
    appearance: none;
    border: 1px solid rgba(148, 187, 247, 0.36);
    border-radius: 999px;
    padding: .52rem .72rem;
    background: rgba(14, 30, 60, 0.78);
    color: rgba(226, 239, 255, 0.95);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.timeline-year.is-active {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(211, 232, 255, 0.88);
    box-shadow: 0 10px 28px rgba(22, 106, 242, 0.42), 0 0 0 1px rgba(165, 208, 255, 0.35);
}

.timeline-year:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(149, 203, 255, 0.35), 0 10px 26px rgba(20, 82, 194, 0.45);
}

.timeline article {
    transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.timeline article.is-active {
    border-color: rgba(171, 206, 255, 0.44);
    background:
        linear-gradient(160deg, rgba(17, 34, 61, 0.86), rgba(8, 19, 34, 0.9)),
        radial-gradient(300px 100px at 10% 0%, rgba(99, 174, 255, 0.18), transparent 60%);
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(3, 10, 23, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeline-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.timeline-card>* {
    position: relative;
    z-index: 2;
}

.timeline-card-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .58;
    transition: opacity .55s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-card.is-active .timeline-card-scene {
    opacity: 1;
    transform: scale(1.03);
}

.timeline-card-scene .scene-gradient,
.timeline-card-scene .scene-motion,
.timeline-card-scene .scene-pulse {
    position: absolute;
    inset: 0;
}

.timeline-card-scene .scene-gradient {
    background: radial-gradient(180px 120px at 12% 8%, rgba(153, 220, 255, 0.24), transparent 70%);
}

.timeline-card-scene .scene-motion {
    opacity: .82;
}

.timeline-card-scene .scene-pulse {
    opacity: .75;
}

.timeline-scene--legacy .scene-motion {
    background:
        repeating-linear-gradient(90deg, rgba(165, 223, 255, 0.14) 0, rgba(165, 223, 255, 0.14) 1px, transparent 1px, transparent 16px),
        linear-gradient(120deg, transparent 0%, rgba(134, 211, 255, 0.22) 48%, transparent 100%);
    transform: translateX(-18%);
}

.timeline-scene--legacy .scene-pulse {
    background:
        radial-gradient(120px 54px at 24% 68%, rgba(180, 232, 255, 0.3), transparent 72%),
        radial-gradient(70px 38px at 56% 38%, rgba(120, 204, 255, 0.24), transparent 74%);
}

.timeline-scene--growth .scene-motion {
    background:
        linear-gradient(90deg, rgba(154, 220, 255, 0.2), transparent 26%),
        linear-gradient(180deg, rgba(88, 182, 255, 0.22), transparent 36%);
    clip-path: polygon(0 80%, 22% 58%, 42% 66%, 61% 38%, 82% 48%, 100% 24%, 100% 100%, 0 100%);
    transform-origin: left bottom;
}

.timeline-scene--growth .scene-pulse {
    background:
        radial-gradient(130px 70px at 78% 24%, rgba(188, 236, 255, 0.32), transparent 74%),
        radial-gradient(140px 64px at 44% 80%, rgba(114, 199, 255, 0.24), transparent 74%);
}

.timeline-scene--future .scene-motion {
    background:
        conic-gradient(from 140deg at 68% 42%, rgba(0, 122, 255, 0.22), rgba(0, 255, 255, 0.18), rgba(0, 91, 181, 0.22), rgba(0, 122, 255, 0.22));
    mask-image: radial-gradient(circle at 68% 44%, rgba(0, 0, 0, 0.95) 0 24%, transparent 54%);
    -webkit-mask-image: radial-gradient(circle at 68% 44%, rgba(0, 0, 0, 0.95) 0 24%, transparent 54%);
}

.timeline-scene--future .scene-pulse {
    background:
        radial-gradient(200px 110px at 72% 44%, rgba(138, 225, 255, 0.32), transparent 76%),
        radial-gradient(90px 54px at 34% 66%, rgba(108, 196, 255, 0.24), transparent 74%);
}

.timeline-scene-label {
    margin: .45rem 0 .4rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    color: rgba(196, 226, 255, 0.86);
}

.timeline-card.is-active .timeline-scene-label {
    color: rgba(226, 243, 255, 0.96);
}

@media (prefers-reduced-motion: no-preference) {
    .timeline-card.is-active .timeline-scene--legacy .scene-motion {
        animation: timeline-legacy-flow 7.2s linear infinite;
    }

    .timeline-card.is-active .timeline-scene--growth .scene-motion {
        animation: timeline-growth-rise 5.6s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
    }

    .timeline-card.is-active .timeline-scene--future .scene-motion {
        animation: timeline-future-spin 8.6s linear infinite;
    }

    .timeline-card.is-active .timeline-card-scene .scene-pulse {
        animation: timeline-pulse 3.4s ease-in-out infinite;
    }
}

@keyframes timeline-legacy-flow {
    0% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(16%);
    }
}

@keyframes timeline-growth-rise {
    0% {
        transform: translateY(8%) scaleY(0.96);
    }

    100% {
        transform: translateY(-4%) scaleY(1.04);
    }
}

@keyframes timeline-future-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1.05);
    }
}

@keyframes timeline-pulse {
    0% {
        opacity: .52;
        transform: scale(.98);
    }

    50% {
        opacity: .88;
        transform: scale(1.04);
    }

    100% {
        opacity: .52;
        transform: scale(.98);
    }
}

.liquid-slider {
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 52px 120px rgba(1, 7, 18, 0.65);
    min-height: min(86vh, 900px);
    --slider-aurora-a: rgba(142, 222, 255, 0.8);
    --slider-aurora-b: rgba(8, 116, 232, 0.7);
    --slider-aurora-c: rgba(164, 238, 255, 0.54);
    --slider-flow-phase: 0;
    isolation: isolate;
    background: radial-gradient(120% 95% at 50% 10%, rgba(7, 21, 45, 0.58), rgba(4, 12, 25, 0.92));
}

.liquid-slider::before,
.liquid-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.liquid-slider::before {
    z-index: 0;
    background:
        radial-gradient(56% 56% at 8% 16%, var(--slider-aurora-a), transparent 72%),
        radial-gradient(56% 56% at 92% 84%, var(--slider-aurora-b), transparent 72%);
    filter: blur(20px) saturate(134%);
    transition: background .72s cubic-bezier(0.22, 1, 0.36, 1), filter .72s ease;
}

.liquid-slider::after {
    display: none;
}

@keyframes slider-liquid-flow {
    0% {
        transform: translate3d(calc((var(--slider-flow-phase) - 0.5) * 12%), -2%, 0) scale(1.14);
    }

    50% {
        transform: translate3d(calc((var(--slider-flow-phase) - 0.5) * -10%), 2%, 0) scale(1.2);
    }

    100% {
        transform: translate3d(calc((var(--slider-flow-phase) - 0.5) * 12%), -2%, 0) scale(1.14);
    }
}

@media (prefers-reduced-motion: reduce) {

    .liquid-slider::before,
    .liquid-slider::after {
        animation: none !important;
        transition: none !important;
    }
}

.hero-cinematic-shell {
    width: 100%;
    margin: 0;
    position: relative;
}

.hero-cinematic-shell::before,
.hero-cinematic-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.hero-cinematic-shell::before {
    background: linear-gradient(180deg, rgba(3, 8, 16, 0.45), transparent 26%, transparent 74%, rgba(3, 8, 16, 0.6));
}

.hero-cinematic-shell::after {
    background: radial-gradient(130% 90% at 50% 6%, rgba(160, 215, 255, 0.16), transparent 52%);
}

.slider-atmosphere {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .7;
    mix-blend-mode: screen;
}

.slides-viewport {
    position: relative;
    z-index: 2;
}

.liquid-slide {
    --phase: 0;
    --zoom: 1;
    transform:
        translate3d(calc(var(--offset) * 66%), 0, calc(var(--phase) * 65px)) scale(calc(1 - (var(--abs) * .08) + (var(--phase) * .065)));
    opacity: calc(1 - (var(--abs) * .46));
    filter: blur(calc(var(--abs) * 5px)) saturate(calc(1 + var(--phase) * .38));
    transition:
        transform 1.25s cubic-bezier(0.2, 1, 0.25, 1),
        opacity 1.05s cubic-bezier(0.2, 1, 0.25, 1),
        filter 1.05s ease;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.liquid-slide .slide-media {
    transform: translateZ(-18px) scale(calc(1.08 + (var(--phase) * .1)));
    transition: transform 1.25s cubic-bezier(0.2, 1, 0.25, 1), filter 1.25s ease;
    filter: contrast(calc(1 + var(--phase) * .1)) saturate(calc(1 + var(--phase) * .14));
    animation: none;
    will-change: transform, filter;
    backface-visibility: hidden;
}

.liquid-slide.is-active .slide-media {
    animation: slide-pan-zoom 9.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .9;
    will-change: opacity, transform;
    transform: translateZ(0);
}

.liquid-slide .slide-glass {
    z-index: 2;
    inset: 0 auto 0 0;
    width: min(980px, calc(100% - clamp(2.4rem, 10vw, 11rem)));
    margin-left: var(--insistel-content-gutter);
    padding: clamp(1.2rem, 2.6vw, 3rem) clamp(1.1rem, 2.4vw, 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transform: translateZ(48px) translateY(calc((1 - var(--phase)) * 14px));
    opacity: calc(0.72 + var(--phase) * .28);
    transition: transform 1s cubic-bezier(0.2, 1, 0.25, 1), opacity .9s ease;
    will-change: transform, opacity;
}

.liquid-slide.is-active .slide-glass {
    transform: translateZ(58px) translateY(0);
    opacity: 1;
}

.liquid-slide h1,
.liquid-slide h2,
.liquid-slide .hero-text,
.liquid-slide .hero-actions,
.liquid-slide .hero-badge {
    opacity: 0;
    transform: translateY(22px);
}

.liquid-slide.is-active h1,
.liquid-slide.is-active h2 {
    animation: slide-copy-in .95s cubic-bezier(0.22, 1, 0.36, 1) .12s both;
}

.liquid-slide.is-active .hero-text {
    animation: slide-copy-in .95s cubic-bezier(0.22, 1, 0.36, 1) .24s both;
}

.liquid-slide.is-active .hero-actions {
    animation: slide-copy-in .95s cubic-bezier(0.22, 1, 0.36, 1) .36s both;
}

.liquid-slide.is-active .hero-badge {
    animation: slide-copy-in .85s cubic-bezier(0.22, 1, 0.36, 1) .02s both;
}

.liquid-slide h1,
.liquid-slide h2 {
    max-width: 12.5ch;
    font-size: clamp(2.3rem, 5vw, 5.4rem);
    line-height: .98;
}

.liquid-slide .hero-text {
    max-width: 54ch;
    font-size: clamp(1rem, 1.8vw, 1.34rem);
    color: rgba(238, 246, 255, 0.88);
}

.slide-media::before {
    animation: slide-aurora 10s ease-in-out infinite;
}

.slide-media::after {
    content: '';
    position: absolute;
    inset: -20% -10%;
    background:
        radial-gradient(35% 35% at 20% 35%, rgba(124, 197, 255, 0.18), transparent 80%),
        radial-gradient(30% 30% at 82% 28%, rgba(126, 220, 255, 0.14), transparent 80%);
    mix-blend-mode: screen;
    animation: slide-shimmer 11s linear infinite;
}

@keyframes slide-pan-zoom {
    0% {
        transform: translate3d(-1.8%, 0, -18px) scale(1.1);
    }

    50% {
        transform: translate3d(1.2%, -1.2%, -18px) scale(1.18);
    }

    100% {
        transform: translate3d(-1.2%, .8%, -18px) scale(1.14);
    }
}

@keyframes slide-copy-in {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes slide-aurora {
    0% {
        filter: hue-rotate(0deg) saturate(1.02);
    }

    50% {
        filter: hue-rotate(12deg) saturate(1.14);
    }

    100% {
        filter: hue-rotate(0deg) saturate(1.02);
    }
}

@keyframes slide-shimmer {
    0% {
        transform: translate3d(-2%, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(2%, -1.5%, 0) rotate(1deg);
    }

    100% {
        transform: translate3d(-2%, 0, 0) rotate(0deg);
    }
}

.slider-controls,
.slider-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: min(1100px, 92%);
}

.slider-controls {
    bottom: 3.7rem;
}

.slider-progress {
    bottom: 2.2rem;
}

.hero-content-slider {
    margin-top: -2.6rem;
    position: relative;
    z-index: 5;
}

.stat-visual {
    display: block;
    width: 62px;
    height: 62px;
    margin-bottom: .75rem;
    border-radius: 16px;
    border: 1px solid rgba(141, 188, 255, 0.28);
    background: rgba(12, 29, 57, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(6, 15, 31, 0.46);
}

.section-about {
    overflow: hidden;
    isolation: isolate;
}

.about-timeline-bg,
.about-timeline-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.about-timeline-bg {
    z-index: 0;
}

.about-timeline-overlay {
    z-index: 1;
    background:
        radial-gradient(85% 70% at 0% 100%, rgba(9, 17, 31, 0.72), transparent 65%),
        radial-gradient(80% 65% at 100% 0%, rgba(8, 14, 28, 0.6), transparent 60%),
        linear-gradient(180deg, rgba(4, 8, 15, 0.35), rgba(4, 8, 15, 0.5));
}

.section-about .container {
    position: relative;
    z-index: 2;
}

.section.dynamic-scene {
    overflow: hidden;
    isolation: isolate;
}

.section-scene-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .7;
    mix-blend-mode: screen;
}

.section.dynamic-scene>.container,
.section.dynamic-scene>.sticky-viewport {
    position: relative;
    z-index: 2;
}

.section.section-cinema {
    --section-progress: 0;
    --section-focus: 0;
    position: relative;
}

.section.section-cinema::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: calc(0.08 + var(--section-focus) * 0.2);
    background:
        radial-gradient(80% 65% at calc(16% + var(--section-progress) * 68%) 14%, rgba(144, 214, 255, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.02));
}

.section.section-cinema>.container {
    position: relative;
    z-index: 2;
    transform: translate3d(0, calc((1 - var(--section-focus)) * 26px), 0) scale(calc(0.982 + var(--section-focus) * 0.018));
    opacity: calc(0.72 + var(--section-focus) * 0.28);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .55s ease;
}

.section.section-cinema .section-title {
    transform: translate3d(0, calc((1 - var(--section-focus)) * 16px), 0);
    letter-spacing: calc(-0.03em - var(--section-focus) * 0.008em);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing .55s ease;
}

.section.section-cinema .section-head p {
    transform: translate3d(0, calc((1 - var(--section-focus)) * 14px), 0);
    opacity: calc(0.62 + var(--section-focus) * 0.38);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .55s ease;
}

.section.section-cinema .card,
.section.section-cinema .timeline article,
.section.section-cinema .brand-chip,
.section.section-cinema .testimonial-card {
    transform: translate3d(0, calc((1 - var(--section-focus)) * 18px), 0);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s ease, border-color .45s ease;
}

.button {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(151, 191, 255, 0.24);
    background: linear-gradient(140deg, #1a63f4 0%, #0a84ff 50%, #56b8ff 100%);
    box-shadow: 0 14px 34px rgba(26, 99, 244, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

.button:hover {
    transform: translateY(-2px);
    border-color: rgba(198, 224, 255, 0.72);
    box-shadow: 0 20px 44px rgba(26, 99, 244, 0.48), 0 0 0 1px rgba(188, 220, 255, 0.2);
}

.button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 42%, transparent 72%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}

.button:hover::after {
    transform: translateX(120%);
}

.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(131, 186, 255, 0.35), 0 12px 28px rgba(18, 79, 176, 0.45);
}

.button-alt {
    color: #dcecff;
    background: var(--insistel-surface);
    border-color: rgba(130, 171, 233, 0.4);
    box-shadow: 0 12px 28px rgba(3, 10, 24, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.button-alt:hover {
    border-color: rgba(184, 212, 255, 0.66);
    box-shadow: 0 18px 34px rgba(2, 8, 22, 0.58), 0 0 0 1px rgba(164, 203, 255, 0.2);
}

.site-footer .button,
.site-footer .button-whatsapp {
    min-height: 44px;
    font-weight: 600;
}

.stat-card,
.card,
.testimonial-card,
.cta-block,
.brand-chip,
.timeline article {
    border: 1px solid rgba(151, 183, 226, 0.2);
    background:
        linear-gradient(165deg, rgba(13, 24, 44, 0.86), rgba(8, 15, 28, 0.88)),
        radial-gradient(500px 200px at 10% -5%, rgba(84, 167, 255, 0.12), transparent 50%);
    box-shadow: 0 18px 45px rgba(2, 6, 15, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stat-card:hover,
.card:hover,
.testimonial-card:hover,
.brand-chip:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(148, 191, 255, 0.36);
    box-shadow: 0 28px 65px rgba(1, 7, 18, 0.62), 0 0 32px rgba(38, 126, 255, 0.18);
}

.card-icon {
    background: linear-gradient(135deg, #0a84ff, #68b5ff);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.35);
}

.slider-nav {
    border-color: rgba(130, 163, 206, 0.35);
    background: rgba(228, 238, 255, 0.9);
    color: #12386e;
}

.slider-progress {
    background: rgba(150, 178, 224, 0.2);
}

.slider-progress>span {
    background: linear-gradient(90deg, #5ab3ff 0%, #0a84ff 100%);
}

.scroll-text-item h3 {
    color: #ffffff;
    font-size: clamp(1.8rem, 3.15vw, 2.75rem);
    color: #f4f8ff;
    animation: heading-flow 12s ease-in-out infinite;
}

.section-cta h2,
.footer-brand-block h3,
.footer-contact-stack h4,
.footer-social-block h4 {
    color: #ffffff;
    animation: heading-flow 10s ease-in-out infinite;
}

@keyframes heading-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.scroll-text-item p {
    color: rgba(226, 238, 255, 0.75);
    font-size: clamp(1rem, 1.45vw, 1.2rem);
}

.scroll-media-track {
    border: 1px solid rgba(140, 174, 221, 0.24);
    box-shadow: 0 38px 92px rgba(2, 8, 20, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: var(--insistel-surface);
}

.glass-overlay {
    background: linear-gradient(180deg, rgba(5, 10, 18, 0.08) 30%, rgba(6, 11, 21, 0.92) 100%);
}

.site-footer {
    border-top: 1px solid rgba(154, 187, 232, 0.2);
    background: transparent;
}

.site-footer p,
.site-footer li,
.site-footer small {
    color: rgba(205, 221, 248, 0.88) !important;
}

.site-footer a {
    color: #cfe3ff !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(123, 177, 255, 0.42);
    transition: color .2s ease, text-decoration-color .2s ease, opacity .2s ease;
}

.site-footer a:hover {
    color: #ffffff !important;
    text-decoration-color: rgba(205, 228, 255, 0.8);
}

.site-footer .button,
.site-footer .button-whatsapp {
    color: #ffffff !important;
    text-decoration: none;
}

.footer-brand-block,
.footer-contact-stack,
.footer-social-block {
    padding: 1.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    box-shadow: var(--glass-shadow);
}

.contact-hub {
    padding-left: 0;
    margin: .5rem 0 0;
    list-style: none;
    gap: .55rem;
}

.contact-hub li {
    display: flex;
    align-items: center;
    gap: .48rem;
    font-size: .95rem;
}

.contact-hub a {
    color: #e2f0ff !important;
}

.footer-social-block p {
    margin: .35rem 0 .8rem;
    font-weight: 600;
    color: #ffffff !important;
}

.social-buttons {
    display: grid;
    gap: .6rem;
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem .88rem;
    border-radius: 999px;
    border: 1px solid rgba(144, 189, 253, 0.36);
    background: rgba(10, 30, 60, 0.58);
    color: #dff0ff !important;
    text-decoration: none !important;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.social-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(199, 225, 255, 0.78);
    background: rgba(20, 55, 103, 0.75);
}

@media (max-width: 980px) {
    .timeline-years {
        width: 100%;
        border-radius: 18px;
    }

    .timeline-year {
        font-size: 1rem;
    }

    .scroll-sequence {
        height: auto;
        margin-top: 2.5rem;
    }

    .sticky-viewport {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
        padding: 0;
        display: block;
    }

    .scroll-sequence-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        height: auto;
    }

    .scroll-text-track {
        position: static;
        height: auto;
        display: grid;
        gap: 1rem;
        margin-top: 1rem;
    }

    .scroll-text-item {
        position: static;
        opacity: 1;
        transform: none;
        transition: none;
        pointer-events: auto;
    }

    .scroll-media-track {
        height: clamp(320px, 52vw, 520px);
    }

    .scroll-media-item {
        opacity: 0;
        transform: none;
        filter: none;
        transition: opacity .6s ease;
    }

    .scroll-media-item:first-child {
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .site-header {
        height: 60px;
    }

    .custom-logo,
    .default-logo {
        max-height: 38px;
        max-width: 210px;
    }

    .liquid-slide .slide-glass {
        inset: auto .55rem 4.5rem .55rem;
        width: auto;
        margin-left: 0;
        padding: 1rem;
    }

    .slider-controls {
        bottom: 2.8rem;
        width: calc(100% - 1.2rem);
    }

    .slider-progress {
        bottom: 1.4rem;
        width: calc(100% - 1.2rem);
    }

    .hero-content-slider {
        margin-top: -1.2rem;
    }

    .timeline-years {
        justify-content: flex-start;
    }

    .timeline-year {
        flex: 1 1 auto;
        text-align: center;
    }

    .section-title {
        font-size: clamp(1.9rem, 9vw, 2.45rem);
    }

    .hero-content {
        padding-top: 5.6rem;
    }

    .liquid-slider {
        min-height: 530px;
    }

    .slide-glass {
        width: calc(100% - 1rem);
        margin: .5rem;
        background: linear-gradient(180deg, rgba(2, 8, 18, 0.34), rgba(3, 10, 20, 0.66));
        backdrop-filter: blur(8px);
    }

    .liquid-slide h1,
    .liquid-slide h2 {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
        max-width: 14ch;
    }

    .hero {
        min-height: auto;
    }

    .hero-cinematic-shell::before {
        background: linear-gradient(180deg, rgba(3, 8, 16, 0.36), transparent 24%, transparent 70%, rgba(3, 8, 16, 0.7));
    }

    .slider-atmosphere,
    .slide-fx-canvas {
        opacity: .58;
    }

    .liquid-slider {
        min-height: 78vh;
        margin-bottom: .8rem;
    }

    .liquid-slide {
        filter: blur(calc(var(--abs) * 3px)) saturate(calc(1 + var(--phase) * .12));
    }

    .liquid-slide .slide-glass {
        inset: auto .7rem 4.9rem .7rem;
        width: auto;
        margin: 0;
        padding: 1rem 1rem .95rem;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(2, 8, 18, 0.5), rgba(3, 10, 20, 0.84));
        backdrop-filter: blur(10px);
    }

    .liquid-slide h1,
    .liquid-slide h2 {
        max-width: 16ch;
        font-size: clamp(1.48rem, 6.9vw, 2.05rem);
        line-height: 1.06;
    }

    .liquid-slide .hero-text {
        max-width: none;
        font-size: .95rem;
        line-height: 1.45;
        color: rgba(236, 245, 255, 0.94);
    }

    .hero-badge {
        font-size: .74rem;
        padding: .4rem .68rem;
    }

    .hero-actions {
        width: 100%;
        display: grid;
        gap: .55rem;
    }

    .hero-actions .button,
    .hero-actions .button-alt {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: .72rem 1rem;
        font-size: .9rem;
    }

    .slider-controls {
        bottom: 2.35rem;
        width: calc(100% - 1.4rem);
    }

    .slider-nav {
        width: 40px;
        height: 40px;
    }

    .slider-progress {
        bottom: 1rem;
        width: calc(100% - 1.4rem);
    }

    .hero-content {
        padding-top: 4.9rem;
    }

    .hero-content-slider {
        margin-top: .45rem;
    }

    .stat-grid {
        grid-template-columns: 1fr;
        gap: .7rem;
        margin-top: .6rem;
    }

    .stat-card {
        min-height: 96px;
        padding: .9rem;
    }

    .stat-visual {
        width: 52px;
        height: 52px;
        margin-bottom: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-scene-canvas {
        display: none;
    }

    .section-title,
    .scroll-text-item h3,
    .section-cta h2,
    .footer-brand-block h3,
    .footer-contact-stack h4,
    .footer-social-block h4 {
        animation: none !important;
    }

    .timeline-year,
    .timeline article {
        transition: none !important;
    }

    .liquid-slide .slide-media,
    .slide-media::before,
    .slide-media::after,
    .liquid-slide h1,
    .liquid-slide h2,
    .liquid-slide .hero-text,
    .liquid-slide .hero-actions,
    .liquid-slide .hero-badge {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .section.section-cinema::after {
        display: none;
    }

    .section.section-cinema>.container,
    .section.section-cinema .section-title,
    .section.section-cinema .section-head p,
    .section.section-cinema .card,
    .section.section-cinema .timeline article,
    .section.section-cinema .brand-chip,
    .section.section-cinema .testimonial-card {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .card,
    .stat-card,
    .testimonial-card,
    .button,
    .placeholder-img {
        transition: none !important;
    }

    .card:hover,
    .stat-card:hover,
    .testimonial-card:hover,
    .brand-chip:hover {
        transform: none;
    }
}

/* World-class navigation refinement */
.site-header {
    --nav-glow-x: 50%;
    --nav-glow-y: 50%;
    --nav-glow-alpha: 0.12;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 74px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(190, 225, 255, 0.24);
    background: rgba(8, 18, 33, 0.78);
    box-shadow: none !important;
    backdrop-filter: blur(34px) saturate(185%);
    -webkit-backdrop-filter: blur(34px) saturate(185%);
    overflow: hidden;
    isolation: isolate;
    transition: top .35s ease, height .35s ease, border-color .35s ease, background .35s ease;
}

.site-header,
.site-header.is-scrolled,
.nav-wrap {
    box-shadow: none !important;
    filter: none !important;
}

.site-header::before {
    content: none;
    position: absolute;
    inset: -130% -24%;
    background:
        radial-gradient(42% 42% at 12% 18%, rgba(118, 200, 255, 0.2), transparent 70%),
        radial-gradient(44% 44% at 86% 76%, rgba(82, 217, 255, 0.16), transparent 74%),
        radial-gradient(circle at var(--nav-glow-x) var(--nav-glow-y), rgba(144, 221, 255, calc(var(--nav-glow-alpha) * 1.1)), transparent 34%);
    opacity: .92;
    mix-blend-mode: screen;
    z-index: -2;
    pointer-events: none;
}

.site-header::after {
    content: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1.7px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(110, 199, 255, 0.08) 12%,
            rgba(205, 237, 255, 0.62) 50%,
            rgba(110, 199, 255, 0.08) 88%,
            transparent 100%);
    background-size: 240% 100%;
    opacity: .78;
    pointer-events: none;
    z-index: 2;
}

.site-header::before,
.site-header::after {
    display: none !important;
}

.site-header.is-scrolled {
    top: 0;
    height: 68px;
    border-bottom-color: rgba(198, 226, 255, 0.3);
    background: rgba(8, 17, 31, 0.9);
    box-shadow: none !important;
}

.nav-wrap {
    width: 100%;
    padding-left: var(--insistel-content-gutter);
    padding-right: clamp(1rem, 2.2vw, 1.7rem);
    gap: .95rem;
}

.brand-link,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.custom-logo,
.default-logo {
    max-height: clamp(40px, 4.8vw, 56px);
    max-width: clamp(170px, 28vw, 320px);
    transition: transform .32s ease, filter .32s ease;
}

.brand-link:hover .custom-logo,
.brand-link:hover .default-logo,
.custom-logo-link:hover .custom-logo {
    transform: scale(1.03);
    filter: drop-shadow(0 8px 18px rgba(118, 204, 255, 0.24));
}

.site-nav {
    margin-left: auto;
}

.site-nav ul {
    gap: .32rem;
    padding: .35rem;
    border-radius: 999px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.site-nav li {
    position: relative;
}

.site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .56rem .92rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(236, 245, 255, 0.88);
    transition: color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-nav a:hover {
    color: #ffffff;
    transform: translateY(-1px);
    background: rgba(216, 239, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(219, 239, 255, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-nav .current-menu-item>a,
.site-nav .current-menu-parent>a,
.site-nav .current_page_item>a,
.site-nav .current_page_parent>a {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(115, 201, 255, 0.24), rgba(25, 117, 255, 0.22));
    box-shadow: inset 0 0 0 1px rgba(219, 239, 255, 0.36), 0 8px 16px rgba(3, 36, 80, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: no-preference) {
    .site-header::before {
        animation: nav-aurora-drift 12s cubic-bezier(0.4, 0.02, 0.2, 1) infinite alternate;
    }

    .site-header::after {
        animation: nav-border-glide 5.8s linear infinite;
    }
}

@keyframes nav-aurora-drift {
    0% {
        transform: translate3d(-3%, -2.2%, 0) scale(1);
        filter: hue-rotate(0deg) saturate(1);
    }

    100% {
        transform: translate3d(3%, 2.2%, 0) scale(1.08);
        filter: hue-rotate(16deg) saturate(1.14);
    }
}

@keyframes nav-border-glide {
    0% {
        background-position: 0% 50%;
        opacity: .52;
    }

    50% {
        background-position: 100% 50%;
        opacity: .9;
    }

    100% {
        background-position: 0% 50%;
        opacity: .52;
    }
}

@media (max-width: 760px) {
    .site-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: 70px;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid rgba(190, 225, 255, 0.26);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
        translate: none !important;
    }

    .site-header.is-scrolled {
        top: 0 !important;
        height: 70px !important;
        transform: none !important;
        translate: none !important;
    }

    .nav-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    .custom-logo,
    .default-logo {
        max-height: 42px;
        max-width: min(66vw, 240px);
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 0;
        background: rgba(16, 36, 62, 0.24);
        box-shadow: none;
        backdrop-filter: blur(10px) saturate(170%);
        -webkit-backdrop-filter: blur(10px) saturate(170%);
    }

    .site-nav {
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        padding: .65rem;
        border-radius: 20px;
        background: rgba(10, 24, 44, 0.46);
        border: 0;
        box-shadow: 0 22px 42px rgba(1, 7, 18, 0.4);
        backdrop-filter: blur(22px) saturate(175%);
        -webkit-backdrop-filter: blur(22px) saturate(175%);
    }

    .site-nav ul {
        display: grid;
        gap: .38rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
        width: 100%;
        justify-content: flex-start;
        padding: .72rem .88rem;
    }

    .timeline-intro {
        padding-right: 0;
    }
}

/* Hero metrics redesign: cinematic Apple-like cards under slideshow */
.hero-content-slider .stat-grid {
    margin-top: clamp(1.2rem, 2.8vw, 2.2rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .85rem;
}

.hero-content-slider .stat-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: .4rem;
    min-height: 218px;
    padding: 1.05rem 1.05rem 1rem;
    border: 0;
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgba(225, 239, 255, 0.14), rgba(225, 239, 255, 0.03) 45%, rgba(225, 239, 255, 0.02) 100%),
        linear-gradient(150deg, rgba(7, 16, 30, 0.92), rgba(6, 12, 24, 0.82));
    box-shadow:
        0 26px 52px rgba(2, 8, 20, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transform: translateY(0);
    transition: transform .46s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .46s ease;
}

.hero-content-slider .stat-card:nth-child(1) {
    grid-column: span 6;
}

.hero-content-slider .stat-card:nth-child(2),
.hero-content-slider .stat-card:nth-child(3) {
    grid-column: span 3;
}

.hero-content-slider .stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(380px 170px at 4% -8%, rgba(138, 209, 255, 0.24), transparent 62%),
        radial-gradient(280px 160px at 95% 115%, rgba(82, 164, 255, 0.16), transparent 66%);
    pointer-events: none;
}

.hero-content-slider .stat-card::after {
    content: '';
    position: absolute;
    left: -46%;
    top: -120%;
    width: 64%;
    height: 300%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(24deg);
    opacity: .5;
    pointer-events: none;
}

.hero-content-slider .stat-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 32px 58px rgba(2, 8, 20, 0.62),
        0 0 34px rgba(89, 180, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.hero-content-slider .stat-kicker {
    position: relative;
    z-index: 1;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(196, 227, 255, 0.78);
}

.hero-content-slider .stat-visual {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15, 42, 76, 0.66), rgba(8, 23, 45, 0.7));
    border: 1px solid rgba(174, 212, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-content-slider .stat-card strong {
    position: relative;
    z-index: 1;
    display: block;
    font-size: clamp(2.1rem, 4.3vw, 3.3rem);
    line-height: 1;
    color: #f2f8ff;
}

.hero-content-slider .stat-card>span:last-of-type {
    position: relative;
    z-index: 1;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(225, 240, 255, 0.95);
}

.hero-content-slider .stat-note {
    position: relative;
    z-index: 1;
    margin: .08rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(198, 220, 244, 0.82);
    max-width: 46ch;
}

.hero-content-slider .stat-card-feature .stat-note {
    max-width: 52ch;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content-slider .stat-card::after {
        animation: stat-card-sweep 8.4s linear infinite;
    }
}

@keyframes stat-card-sweep {
    0% {
        transform: translateX(-80%) rotate(24deg);
        opacity: 0;
    }

    12% {
        opacity: .48;
    }

    38% {
        transform: translateX(240%) rotate(24deg);
        opacity: .12;
    }

    100% {
        transform: translateX(240%) rotate(24deg);
        opacity: 0;
    }
}

@media (max-width: 980px) {

    .hero-content-slider .stat-card:nth-child(1),
    .hero-content-slider .stat-card:nth-child(2),
    .hero-content-slider .stat-card:nth-child(3) {
        grid-column: span 6;
    }
}

@media (max-width: 760px) {
    .hero-content-slider .stat-grid {
        grid-template-columns: 1fr;
        gap: .72rem;
    }

    .hero-content-slider .stat-card:nth-child(1),
    .hero-content-slider .stat-card:nth-child(2),
    .hero-content-slider .stat-card:nth-child(3) {
        grid-column: auto;
        min-height: 182px;
        padding: .9rem .9rem .85rem;
    }

    .hero-content-slider .stat-card strong {
        font-size: clamp(1.8rem, 10.2vw, 2.65rem);
    }

    .hero-content-slider .stat-note {
        font-size: .78rem;
        line-height: 1.43;
    }
}

/* Slideshow title/copy arrangement refinement */
.liquid-slide .slide-glass {
    width: min(860px, 90%);
}

.liquid-slide h1,
.liquid-slide h2 {
    max-width: 18ch;
    font-size: clamp(1.85rem, 3.75vw, 3.35rem);
    line-height: 1.06;
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin-bottom: .42rem;
}

.liquid-slide .hero-text {
    max-width: 48ch;
    font-size: clamp(.96rem, 1.55vw, 1.14rem);
    line-height: 1.5;
    margin-top: .3rem;
    color: rgba(231, 240, 255, 0.9);
}

@media (max-width: 760px) {

    .liquid-slide h1,
    .liquid-slide h2 {
        max-width: 100%;
        font-size: clamp(1.2rem, 6.2vw, 1.72rem);
        line-height: 1.08;
        margin-bottom: .34rem;
    }

    .liquid-slide .hero-text {
        font-size: .92rem;
        line-height: 1.45;
    }
}

/* Institutional blue background for independent metrics section */
.hero-metrics-section {
    position: relative;
    margin: 0;
    padding-top: clamp(2rem, 4.2vw, 3.2rem);
    padding-bottom: clamp(2.6rem, 5.4vw, 4rem);
    background: linear-gradient(145deg,
            rgba(0, 122, 255, 0.95) 0%,
            rgba(0, 108, 232, 0.96) 46%,
            rgba(0, 91, 181, 0.97) 100%);
}

.hero-metrics-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    inset: 0;
    background:
        radial-gradient(760px 340px at 12% -8%, rgba(171, 220, 255, 0.3), transparent 60%),
        radial-gradient(700px 360px at 90% 112%, rgba(94, 181, 255, 0.26), transparent 66%);
    z-index: 1;
    pointer-events: none;
}

.hero-metrics-section .hero-content {
    position: relative;
    z-index: 3;
    padding-top: 0;
    padding-bottom: 0;
}

.hero-metrics-section .hero-content-slider {
    margin-top: 0;
    position: relative;
    z-index: 4;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.hero-metrics-section .hero-content-slider::before {
    display: none;
}

.hero-metrics-section .hero-content-slider .stat-grid {
    margin-top: 0;
}

@media (max-width: 760px) {
    .hero-metrics-section {
        margin: 0;
        padding-top: 1.35rem;
        padding-bottom: 2.2rem;
    }

    .hero-metrics-section .hero-content-slider {
        margin-top: 0;
        padding: 0;
    }
}

/* Stabilized overrides after rollback */
.site-header {
    background:
        linear-gradient(145deg, rgba(14, 30, 52, 0.28), rgba(8, 18, 33, 0.14)),
        rgba(8, 16, 30, 0.1);
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    border-bottom: 1px solid rgba(196, 230, 255, 0.3);
}

.site-header::before {
    opacity: .95;
}

.site-header::after {
    opacity: .82;
    background-size: 250% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header::before {
        animation: nav-aurora-drift 11s cubic-bezier(0.4, 0.02, 0.2, 1) infinite alternate;
    }

    .site-header::after {
        animation: nav-border-glide 5.2s linear infinite;
    }
}

.timeline-intro {
    max-width: 62ch;
}

.timeline-intro .section-title {
    margin-bottom: .95rem;
}

.timeline-intro p {
    max-width: 54ch;
}

body,
p,
li,
blockquote,
.hero-text,
.liquid-slide .hero-text,
.timeline-intro p,
.scroll-text-item p,
.hero-content-slider .stat-note {
    line-height: 1.42;
}

/* Final nav style: pure glass + institutional blue bottom gradient */
.site-header {
    background: rgba(10, 20, 34, 0.14) !important;
    backdrop-filter: blur(34px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(185%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(190, 225, 255, 0.24) !important;
    box-shadow: 0 10px 24px rgba(1, 7, 18, 0.22) !important;
}

.site-header::before {
    content: none !important;
}

.site-header::after {
    content: '' !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(0, 122, 255, 0) 0%,
            rgba(0, 122, 255, 0.6) 24%,
            rgba(0, 155, 255, 0.9) 50%,
            rgba(0, 91, 181, 0.62) 76%,
            rgba(0, 91, 181, 0) 100%) !important;
    background-size: 220% 100% !important;
    opacity: .9 !important;
    pointer-events: none;
    z-index: 3;
}

.site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: .84rem;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header::after {
        animation: nav-border-glide 5.4s linear infinite !important;
    }
}

/* Hero shell fit fix */
.hero.hero-slider-wrap {
    display: block;
    min-height: 0;
    padding: 0;
}

.hero-slider-wrap .hero-cinematic-shell {
    width: 100%;
    margin: 0;
}

.hero-slider-wrap .liquid-slider {
    margin-bottom: 0 !important;
}

/* Timeline harmony: institutional blue base + readable cards/text */
#sobre-nosotros.section-about {
    background:
        radial-gradient(840px 420px at 10% -18%, rgba(186, 229, 255, 0.26), transparent 58%),
        radial-gradient(820px 420px at 90% 118%, rgba(121, 200, 255, 0.22), transparent 62%),
        linear-gradient(145deg, #007aff 0%, #006ce8 46%, #005bb5 100%);
}

#sobre-nosotros .about-timeline-overlay {
    background:
        radial-gradient(90% 76% at 0% 100%, rgba(0, 78, 165, 0.34), transparent 65%),
        radial-gradient(80% 64% at 100% 0%, rgba(0, 110, 225, 0.24), transparent 60%),
        linear-gradient(180deg, rgba(0, 122, 255, 0.08), rgba(0, 91, 181, 0.18));
}

#sobre-nosotros .timeline article h3,
#sobre-nosotros .timeline article p,
#sobre-nosotros .timeline-intro p {
    color: rgba(232, 244, 255, 0.92);
}

#sobre-nosotros .timeline-years {
    padding: .45rem;
    border-color: rgba(140, 170, 255, 0.22);
    background: rgba(10, 18, 46, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    gap: .35rem;
}

#sobre-nosotros .timeline-year {
    min-width: 4.4rem;
    padding: .62rem .96rem;
    border-color: rgba(135, 164, 255, 0.2);
    background: rgba(18, 29, 72, 0.92);
    color: rgba(236, 243, 255, 0.82);
    font-size: clamp(.98rem, 1.1vw, 1.12rem);
    font-weight: 430;
    box-shadow: none;
}

#sobre-nosotros .timeline-year.is-active {
    transform: translateY(-1px);
    border-color: rgba(206, 228, 255, 0.6);
    background: rgba(31, 49, 112, 0.98);
    color: #f6fbff;
    box-shadow: 0 12px 26px rgba(6, 16, 42, 0.24);
}

#sobre-nosotros .timeline {
    gap: 1rem;
}

#sobre-nosotros .timeline-card {
    min-height: 11.25rem;
    padding: 1.35rem 1.45rem 1.55rem;
    border: 1px solid rgba(137, 165, 236, 0.24);
    border-radius: 1.85rem;
    background: rgba(9, 21, 58, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

#sobre-nosotros .timeline-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(196, 221, 255, 0.42);
    background: rgba(11, 26, 68, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(196, 221, 255, 0.08);
}

#sobre-nosotros .timeline-card > span:first-of-type {
    display: inline-flex;
    align-items: center;
    margin-bottom: .35rem;
    font-size: 1.45rem;
    font-weight: 450;
    color: #61a8ff;
    letter-spacing: -.02em;
}

#sobre-nosotros .timeline-scene-label {
    margin: 0 0 .8rem;
    font-size: .9rem;
    font-weight: 430;
    color: rgba(213, 230, 255, 0.78);
}

#sobre-nosotros .timeline-card h3 {
    margin-bottom: .55rem;
    font-size: clamp(2rem, 2.35vw, 2.7rem);
    line-height: .98;
    letter-spacing: -.045em;
    color: #f6fbff;
}

#sobre-nosotros .timeline-card p:last-child {
    max-width: 25ch;
    margin: 0;
    font-size: clamp(1rem, 1.12vw, 1.16rem);
    line-height: 1.36;
    color: rgba(226, 237, 255, 0.82);
}

#sobre-nosotros .timeline-card-scene {
    opacity: .12;
    transition: opacity .35s ease;
}

#sobre-nosotros .timeline-card.is-active .timeline-card-scene {
    opacity: .18;
    transform: none;
}

#sobre-nosotros .timeline-card-scene .scene-gradient,
#sobre-nosotros .timeline-card-scene .scene-pulse {
    opacity: 0;
}

#sobre-nosotros .timeline-card-scene .scene-motion {
    opacity: .16;
    filter: none;
}

#sobre-nosotros .timeline-scene--legacy .scene-motion,
#sobre-nosotros .timeline-scene--growth .scene-motion,
#sobre-nosotros .timeline-scene--future .scene-motion {
    background:
        linear-gradient(90deg, rgba(124, 181, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(108, 153, 255, 0.12), transparent 44%);
    clip-path: none;
    mask-image: none;
    -webkit-mask-image: none;
}

/* ==========================================================================
   Valores - Stack Section
   ========================================================================== */
.section-values-stack {
    position: relative;
    background:
        radial-gradient(circle at 18% 12%, rgba(150, 120, 255, 0.24), transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(90, 150, 255, 0.2), transparent 38%),
        linear-gradient(180deg, #251d74 0%, #2c3fa2 52%, #243f97 100%);
    padding-top: clamp(5rem, 8vw, 8rem);
    padding-bottom: clamp(4rem, 8vh, 8rem);
    z-index: 5;
}

.values-stack-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.values-stack-intro {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto clamp(3rem, 6vh, 5rem);
    text-align: center;
    opacity: 1 !important;
}

.values-stack-intro .values-kicker {
    margin: 0;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-size: .88rem;
    font-weight: 600;
}

.values-stack-intro .section-title {
    margin-top: .4rem;
    margin-bottom: .6rem;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

.values-stack-intro .values-lead {
    margin: 0 auto;
    max-width: 52ch;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-size: clamp(1.02rem, 1.36vw, 1.2rem);
    line-height: 1.45;
}

.values-main-media {
    margin: clamp(1.3rem, 2.4vw, 2rem) auto 0;
    max-width: min(900px, 94vw);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(173, 208, 255, 0.24);
    box-shadow: 0 28px 70px -36px rgba(0, 0, 0, 0.7);
}

.values-main-media .placeholder-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.values-stack-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding: 0 1.5rem;
    /* Removed padding-bottom: 20vh to eliminate the black gap */
}

.value-stack-card {
    position: sticky;
    top: clamp(80px, 15vh, 120px);
    width: 100%;
    /* Let height be determined by content + padding to avoid weird vertical gaps */
    height: auto;
    min-height: clamp(380px, 60vh, 600px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Apple's signature highly saturated dark glass */
    background: rgba(44, 62, 150, 0.78);
    border: 1px solid rgba(130, 154, 255, 0.18);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    /* Glowing 1px multi-stop border effect using inset box-shadow */
    box-shadow: 0 26px 64px rgba(9, 15, 44, 0.28);
    transform-origin: top center;
    will-change: transform, opacity;
    margin-top: calc(var(--card-index) * .7rem);
    margin-bottom: 0;
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-smooth);
}

.value-stack-card:hover {
    box-shadow: 0 28px 70px rgba(8, 14, 40, 0.32);
    border-color: rgba(150, 172, 255, 0.24);
}

.value-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(44, 62, 150, 0.78);
    pointer-events: none;
}

.value-card-content.value-split-layout {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    /* Slightly wider image area */
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    /* Precise padding creates the 'frame' feel */
    padding: clamp(3rem, 5vw, 4rem);
    align-items: stretch;
}

.value-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.value-split-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 28px;
    overflow: hidden;
    /* Physical object shadow pushing into the glass */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0 20px 40px -10px rgba(0, 0, 0, 0.5);
    transform: translateZ(0);
    /* Hardware accel for inner image smooth scaling */
}

.value-split-media .media-inner {
    width: 100%;
    height: 100%;
}

.value-split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Very subtle filter to make it look integrated */
    filter: saturate(1.1) contrast(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.1, 1);
}

.value-stack-card:hover .value-split-media img {
    /* Larger scale on hover for a strong interactive feel */
    transform: scale(1.06);
}

.value-index-large {
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 4.5rem);
    /* Brilliant white gradient for the index number */
    margin-bottom: 2rem;
    line-height: 1;
    font-weight: 300;
}

.value-index-large .material-symbols-rounded {
    font-size: clamp(3rem, 6vw, 4.5rem);
}

.value-copy-large {
    font-size: clamp(2.2rem, 4.1vw, 3.35rem);
    color: #ffffff;
    max-width: 16ch;
    line-height: 1.08;
    margin: 0;
    font-weight: 430;
}

/* Audience Card Special */
.value-stack-card--audience {
    background: rgba(34, 45, 118, 0.68);
}

.value-stack-card--audience .dark-liquid-glass {
    position: absolute;
    inset: 0;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.value-stack-card--audience .dark-liquid-glass::before {
    content: none !important;
    display: none !important;
}

.value-stack-card--audience .value-card-content.value-split-layout {
    grid-template-columns: 1fr 1.15fr;
}

.value-stack-card--audience .value-split-text {
    justify-content: center;
}

.value-stack-card--audience .value-index-large {
    margin-bottom: 1.5rem;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
}

.value-stack-card--audience .value-index-large .material-symbols-rounded {
    font-size: clamp(2.9rem, 5vw, 4rem);
    font-variation-settings: 'wght' 320, 'opsz' 48;
    opacity: .98;
}

.value-stack-card--audience .value-copy-large {
    max-width: 11ch;
    font-size: clamp(2.2rem, 4.1vw, 3.35rem);
    line-height: 1.08;
}

.audience-lead {
    margin-top: 1.15rem;
    font-size: clamp(1rem, 1.18vw, 1.14rem);
    color: rgba(224, 240, 255, 0.84);
    line-height: 1.42;
    max-width: 32ch;
}

.value-stack-card--audience .value-split-media {
    min-height: 320px;
}

.value-stack-card--audience .values-audience-image {
    filter: saturate(1.1) contrast(1.05);
}

@media (max-width: 992px) {
    .value-card-content.value-split-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .value-split-media {
        min-height: 200px;
    }

    .conversion-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .conversion-copy {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .value-stack-card {
        margin-top: calc(var(--card-index) * .5rem);
        border-radius: 32px;
        height: auto;
        min-height: 60vh;
    }

    .value-stack-card--audience .value-card-content.value-split-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 1.6rem !important;
        padding: 2rem !important;
    }

    .value-stack-card--audience .value-split-text {
        justify-content: flex-start !important;
    }

    .value-stack-card--audience .value-copy-large,
    .value-stack-card--audience .audience-lead {
        max-width: 100% !important;
    }

    .value-stack-card--audience .value-split-media {
        min-height: 240px !important;
        height: clamp(240px, 38vh, 340px) !important;
    }

    .value-stack-card--audience .values-audience-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .values-stack-container {
        padding-bottom: 1.5rem;
    }

    .section-values-stack + .solutions-scroll-container {
        margin-top: 0;
    }
}

/* Fix overlap/readability in section after values */
.solutions-scroll-container {
    position: relative;
    z-index: 6;
    /* Must be higher than values stack (5) to overlap without gap */
}

#soluciones.section-solutions {
    z-index: 6;
    justify-content: flex-start;
    padding-top: clamp(2rem, 4vh, 3rem);
}

.solutions-intro {
    top: 0;
    padding-top: clamp(2rem, 4vh, 3rem);
    z-index: 9;
}

.solutions-intro .section-head {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.solutions-intro .section-title {
    font-size: clamp(2.15rem, 4.6vw, 4.15rem);
}

.solutions-intro p {
    font-size: clamp(1rem, 1.45vw, 1.2rem);
}

.solutions-track {
    top: calc(50% + clamp(10rem, 16vh, 14rem));
    z-index: 4;
}

.solution-panel {
    height: clamp(380px, 56vh, 640px);
}

@media (max-width: 1024px) {
    .values-apple-layout {
        grid-template-columns: 1fr;
    }

    .values-apple-media {
        position: relative;
        top: 0;
    }

    .values-media-shell {
        min-height: clamp(380px, 54vh, 520px);
    }
}

@media (max-width: 760px) {
    .values-audience-card {
        grid-template-columns: 1fr;
    }

    .values-story-card {
        padding: .76rem .82rem;
    }

    .solutions-track {
        top: calc(50% + clamp(7.8rem, 12vh, 9.2rem));
    }
}

/* Navigation cinematic transition */
.site-header {
    background: rgba(7, 14, 24, 0.08) !important;
    backdrop-filter: blur(38px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(38px) saturate(185%) !important;
    box-shadow: 0 12px 30px rgba(1, 6, 15, 0.2) !important;
}

.site-header::after {
    height: 2px;
    background: linear-gradient(90deg,
            rgba(0, 122, 255, 0) 0%,
            rgba(0, 122, 255, 0.58) 22%,
            rgba(0, 168, 255, 0.95) 50%,
            rgba(0, 91, 181, 0.62) 78%,
            rgba(0, 91, 181, 0) 100%) !important;
    background-size: 250% 100% !important;
}


/* Slideshow cleanup: remove opaque center panel and keep copy elegant */
.liquid-slide .slide-glass {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-transition-layer {
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    opacity: 0;
    transition: opacity .48s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.nav-transition-layer.is-active {
    opacity: 1;
}

.nav-transition-glow,
.nav-transition-grid {
    position: absolute;
    inset: -8%;
}

.nav-transition-glow {
    background:
        radial-gradient(55% 46% at 16% 28%, rgba(145, 214, 255, 0.2), transparent 70%),
        radial-gradient(62% 54% at 86% 72%, rgba(0, 122, 255, 0.22), transparent 72%),
        radial-gradient(58% 52% at 50% 50%, rgba(0, 91, 181, 0.2), transparent 74%);
    filter: blur(26px) saturate(115%);
    mix-blend-mode: screen;
    animation: nav-transition-drift 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nav-transition-grid {
    background-image:
        linear-gradient(rgba(150, 208, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 208, 255, 0.08) 1px, transparent 1px);
    background-size: 34px 34px, 34px 34px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent 82%);
    opacity: .52;
    transform: scale(1.08);
    animation: nav-transition-grid-sweep 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.is-nav-transitioning main {
    filter: saturate(112%) contrast(103%);
    transform: scale(1.003);
    transition: filter .35s ease, transform .35s ease;
}

@keyframes nav-transition-drift {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(1.05);
    }

    40% {
        opacity: .85;
    }

    100% {
        opacity: .25;
        transform: translate3d(0, -14px, 0) scale(1.12);
    }
}

@keyframes nav-transition-grid-sweep {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(1.12);
    }

    45% {
        opacity: .58;
    }

    100% {
        opacity: .18;
        transform: translate3d(0, -12px, 0) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav-transition-layer,
    .nav-transition-glow,
    .nav-transition-grid,
    body.is-nav-transitioning main {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Solutions modal experience */
body.is-modal-open {
    overflow: hidden;
}

.solution-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s ease;
}

.solution-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.solution-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 65% at 50% 12%, rgba(0, 134, 255, 0.2), transparent 60%),
        rgba(2, 8, 17, 0.72);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.solution-modal-dialog {
    position: relative;
    width: min(980px, 100%);
    max-height: min(86vh, 820px);
    overflow: auto;
    padding: clamp(1rem, 2.5vw, 2rem);
    border-radius: 28px;
    border: 1px solid rgba(192, 226, 255, 0.34);
    background:
        linear-gradient(160deg, rgba(8, 24, 48, 0.9), rgba(5, 16, 33, 0.88)),
        rgba(5, 15, 30, 0.86);
    box-shadow: 0 28px 80px rgba(1, 8, 20, 0.52);
    transform: translateY(12px) scale(.985);
    transition: transform .36s cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-modal.is-open .solution-modal-dialog {
    transform: translateY(0) scale(1);
}

.solution-modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    color: #eaf5ff;
    background: rgba(138, 201, 255, 0.14);
    cursor: pointer;
}

.solution-modal-kicker {
    margin: 0;
    color: rgba(177, 222, 255, 0.92);
    font-size: .76rem;
}

.solution-modal-title {
    margin: .45rem 0 .4rem;
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    line-height: 1.08;
    color: #f3f9ff;
}

.solution-modal-lead {
    margin: 0 0 1rem;
    max-width: 68ch;
    color: rgba(223, 241, 255, 0.88);
    line-height: 1.38;
}

.solution-modal-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-modal[data-card-count="2"] .solution-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-modal[data-card-count="4"] .solution-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-modal-card {
    padding: .9rem .95rem;
    border-radius: 16px;
    border: 1px solid rgba(173, 219, 255, 0.24);
    background: linear-gradient(150deg, rgba(10, 34, 70, 0.58), rgba(8, 24, 48, 0.42));
}

.solution-modal-card h4 {
    margin: 0 0 .35rem;
    font-size: .88rem;
    color: #ecf7ff;
}

.solution-modal-card p,
.solution-modal-copy {
    margin: 0;
    color: rgba(224, 241, 255, 0.9);
    line-height: 1.36;
    font-size: .94rem;
}

.solution-modal-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Solutions modal redesign v2 */
.solution-modal-dialog {
    width: min(1040px, 100%);
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: 30px;
    border: 1px solid rgba(201, 231, 255, 0.32);
    background:
        radial-gradient(130% 88% at 4% -8%, rgba(130, 201, 255, 0.15), transparent 54%),
        radial-gradient(120% 92% at 100% 120%, rgba(0, 122, 255, 0.14), transparent 60%),
        linear-gradient(152deg, rgba(5, 17, 35, 0.96), rgba(4, 12, 25, 0.94));
    box-shadow:
        0 44px 90px rgba(1, 8, 20, 0.64),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.solution-modal-hero {
    position: relative;
    padding: clamp(.9rem, 2.2vw, 1.4rem);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(171, 216, 255, 0.24);
    background:
        linear-gradient(160deg, rgba(10, 35, 72, 0.62), rgba(8, 24, 50, 0.46));
    margin-bottom: .85rem;
}

.solution-modal-hero-glow {
    position: absolute;
    inset: -30% -20%;
    background:
        radial-gradient(38% 42% at 12% 20%, rgba(173, 228, 255, 0.24), transparent 72%),
        radial-gradient(38% 42% at 84% 75%, rgba(106, 196, 255, 0.2), transparent 76%);
    filter: blur(16px);
    pointer-events: none;
}

.solution-modal-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .92;
}

.solution-modal-hero-copy {
    position: relative;
    z-index: 2;
    max-width: min(62ch, 100%);
}

.solution-modal-kicker {
    font-size: .72rem;
    color: rgba(201, 232, 255, 0.84);
    margin-bottom: .3rem;
}

.solution-modal-category {
    display: inline-flex;
    align-items: center;
    margin: 0 0 .5rem;
    padding: .26rem .62rem;
    border-radius: 999px;
    font-size: .72rem;
    color: rgba(228, 245, 255, 0.95);
    border: 1px solid rgba(175, 218, 255, 0.3);
    background: rgba(123, 195, 255, 0.14);
}

.solution-modal-title {
    margin: 0 0 .35rem;
    max-width: 22ch;
    font-size: clamp(1.5rem, 2.85vw, 2.8rem);
    line-height: 1.03;
}

.solution-modal-lead {
    margin: 0;
    max-width: 72ch;
    font-size: clamp(.96rem, 1.2vw, 1.08rem);
    line-height: 1.34;
    color: rgba(229, 243, 255, 0.9);
}

.solution-modal-grid {
    gap: .72rem;
}

.solution-modal-card {
    padding: .95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(169, 213, 255, 0.24);
    background:
        linear-gradient(150deg, rgba(10, 31, 65, 0.52), rgba(7, 21, 44, 0.36));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1), border-color .34s ease, background .34s ease, box-shadow .34s ease;
    cursor: pointer;
}

.solution-modal-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(196, 232, 255, 0.46);
    background:
        linear-gradient(150deg, rgba(14, 45, 90, 0.6), rgba(9, 28, 58, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 28px rgba(2, 12, 30, 0.28);
}

.solution-modal-card h4 {
    font-size: .8rem;
    color: rgba(204, 233, 255, 0.9);
    margin-bottom: .46rem;
}

.solution-modal-card p,
.solution-modal-copy {
    font-size: .92rem;
    line-height: 1.34;
}

.solution-modal-copy ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.2rem;
}

.solution-modal-copy li {
    margin: 0;
    color: rgba(224, 241, 255, 0.9);
}

.solution-modal-media {
    margin: 0 0 0.9rem;
}

.solution-media-showcase {
    display: grid;
    gap: 0.65rem;
}

.solution-media-showcase--single {
    grid-template-columns: 1fr;
}

.solution-media-showcase--double {
    grid-template-columns: minmax(0, 1fr);
}

.solution-media-frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(170, 214, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(15, 38, 76, 0.7), rgba(7, 20, 42, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 28px rgba(2, 12, 30, 0.24);
    aspect-ratio: 16 / 9;
}

.solution-media-frame--split {
    aspect-ratio: auto;
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0;
}

.solution-media-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(180deg, transparent 58%, rgba(4, 11, 24, 0.18));
    pointer-events: none;
    z-index: 1;
}

.solution-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.solution-media-frame.is-contain img {
    object-fit: contain;
    padding: 0.65rem;
}

.solution-media-showcase--double .solution-media-frame--split img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 156px;
    object-fit: contain;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(170, 214, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(15, 38, 76, 0.7), rgba(7, 20, 42, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 28px rgba(2, 12, 30, 0.24);
}

.solution-media-showcase--double .solution-media-frame--split::before {
    display: none;
}

.solution-modal[data-visual-style="brand-panels"] .solution-modal-card {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    min-height: 100%;
    padding: 1rem;
}

.solution-modal[data-visual-style="brand-panels"] .solution-modal-grid {
    align-items: stretch;
}

.solution-modal[data-visual-style="brand-panels"] .solution-modal-card h4 {
    font-size: 0.92rem;
    letter-spacing: -0.01em;
}

.solution-modal[data-visual-style="brand-panels"] .solution-modal-copy {
    color: rgba(235, 246, 255, 0.94);
    max-width: 30ch;
}

.solution-modal-actions {
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(167, 212, 255, 0.2);
    justify-content: flex-start;
}

.solution-modal-close {
    background: rgba(127, 199, 255, 0.2);
    border: 1px solid rgba(166, 218, 255, 0.3);
    transition: transform .24s ease, background-color .24s ease;
}

.solution-modal-close:hover {
    transform: scale(1.04);
    background: rgba(145, 211, 255, 0.3);
}

.solution-modal[data-solution-category="security"] .solution-modal-hero {
    background: linear-gradient(160deg, rgba(8, 34, 72, 0.68), rgba(7, 23, 48, 0.5));
}

.solution-modal[data-solution-category="network"] .solution-modal-hero {
    background: linear-gradient(160deg, rgba(5, 31, 70, 0.68), rgba(5, 21, 46, 0.5));
}

.solution-modal[data-solution-category="communications"] .solution-modal-hero {
    background: linear-gradient(160deg, rgba(8, 38, 74, 0.7), rgba(6, 26, 50, 0.5));
}

/* Navigation responsiveness upgrade */
@media (min-width: 1181px) {
    .menu-toggle {
        display: none !important;
    }

    .site-nav {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .site-nav ul {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .site-nav ul::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 1180px) {
    .site-header {
        height: 68px !important;
        overflow: visible !important;
    }

    .nav-wrap {
        position: relative;
    }

    .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .site-nav {
        position: absolute !important;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 70;
        display: none !important;
        padding: .7rem;
        border-radius: 18px;
        border: 1px solid rgba(186, 222, 255, 0.26);
        background: rgba(7, 18, 34, 0.74) !important;
        box-shadow: 0 24px 44px rgba(1, 7, 18, 0.42);
        backdrop-filter: blur(16px) saturate(165%);
        -webkit-backdrop-filter: blur(16px) saturate(165%);
        max-height: min(72vh, 560px);
        overflow: auto;
    }

    .site-nav.is-open {
        display: block !important;
    }

    .site-nav ul {
        display: grid !important;
        gap: .34rem;
        padding: 0;
    }

    .site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
        width: 100%;
        justify-content: flex-start;
        padding: .76rem .88rem !important;
    }
}

@media (max-width: 760px) {
    .solution-modal-dialog {
        border-radius: 20px;
        padding: .95rem .9rem 1rem;
    }

    .solution-modal-grid {
        grid-template-columns: 1fr;
    }

    /* Slideshow mobile: centered copy with stronger hierarchy */
    .liquid-slide .slide-glass {
        inset: auto .8rem 3.2rem .8rem !important;
        width: auto !important;
        margin: 0 !important;
        padding: 1.05rem .85rem .95rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .liquid-slide h1,
    .liquid-slide h2 {
        max-width: 100% !important;
        margin: 0 0 .5rem !important;
        font-size: clamp(1.7rem, 7.5vw, 2.35rem) !important;
        line-height: 1.04 !important;
        text-wrap: balance;
    }

    .liquid-slide .hero-text {
        max-width: 32ch !important;
        margin: 0 auto !important;
        font-size: clamp(1rem, 3.9vw, 1.14rem) !important;
        line-height: 1.3 !important;
        color: rgba(239, 247, 255, 0.95) !important;
    }
}

/* Slideshow cleanup */
.liquid-slider .hero-actions,
.liquid-slider .slider-progress {
    display: none !important;
}

/* Apple TV inspired controls */
.slider-controls--apple {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3.2vh, 2rem);
    transform: translateX(-50%);
    width: min(760px, calc(100% - 1.6rem));
    z-index: 8;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .65rem;
}

.slider-controls--apple .slider-nav {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(206, 232, 255, 0.32);
    background: rgba(9, 24, 46, 0.38);
    color: rgba(235, 246, 255, 0.96);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    box-shadow: 0 10px 22px rgba(2, 10, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}

.slider-controls--apple .slider-nav:hover {
    transform: translateY(-1px) scale(1.02);
    background: rgba(12, 32, 62, 0.52);
    border-color: rgba(228, 244, 255, 0.56);
}

.slider-dots--apple {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: 44px;
    padding: .45rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(200, 231, 255, 0.25);
    background: rgba(6, 18, 36, 0.34);
    backdrop-filter: blur(14px) saturate(138%);
    -webkit-backdrop-filter: blur(14px) saturate(138%);
    box-shadow: 0 14px 26px rgba(2, 10, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.slider-dots--apple .slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: 0;
    background: rgba(219, 239, 255, 0.48);
    transition: width .28s cubic-bezier(0.22, 1, 0.36, 1), background-color .28s ease, transform .28s ease;
}

.slider-dots--apple .slider-dot.is-active {
    width: 24px;
    background: rgba(243, 250, 255, 0.96);
}

@media (max-width: 760px) {
    .slider-controls--apple {
        bottom: .7rem;
        width: calc(100% - 1rem);
        gap: .42rem;
    }

    .slider-controls--apple .slider-nav {
        width: 38px;
        height: 38px;
    }

    .slider-dots--apple {
        min-height: 38px;
        padding: .38rem .52rem;
    }

    .slider-dots--apple .slider-dot.is-active {
        width: 18px;
    }
}

/* Slideshow overlay cleanup */
.hero-cinematic-shell::before,
.hero-cinematic-shell::after {
    content: none !important;
}

.liquid-slide .slide-media {
    background:
        linear-gradient(rgba(2, 10, 22, 0.02), rgba(2, 10, 22, 0.08)),
        var(--slide-image, radial-gradient(circle at 18% 14%, rgba(104, 186, 255, 0.34), rgba(8, 24, 52, 0.46) 48%, rgba(3, 10, 22, 0.72) 100%)) !important;
    opacity: .97 !important;
}

.liquid-slide .slide-media::before,
.liquid-slide .slide-media::after,
.liquid-slide .media-grid {
    display: none !important;
}

/* Slideshow final tuning: no stacking layers + stronger color shift + longer rhythm */
.liquid-slider {
    background:
        radial-gradient(140% 110% at 50% 8%, color-mix(in srgb, var(--slider-aurora-a) 70%, transparent), transparent 56%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--slider-aurora-b) 54%, #030917) 0%,
            color-mix(in srgb, var(--slider-aurora-c) 26%, #020612) 52%,
            #020611 100%) !important;
    transition: background 1.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.liquid-slide {
    opacity: 0 !important;
    filter: none !important;
    transform: translate3d(0, 0, 0) scale(1.015) !important;
    transition:
        opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.liquid-slide.is-active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    z-index: 120 !important;
}

.liquid-slide:not(.is-active) {
    z-index: 20 !important;
}

.liquid-slide.is-active .slide-media {
    animation: slide-pan-zoom 13s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Highlights redesign (below slideshow) */
.hero-metrics-section .highlights-experience {
    position: relative;
    z-index: 5;
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.7rem);
}

.hero-metrics-section .highlights-intro {
    display: grid;
    gap: .64rem;
    max-width: 76ch;
}

.hero-metrics-section .highlights-eyebrow {
    margin: 0;
    font-size: .74rem;
    color: rgba(219, 238, 255, 0.92);
}

.hero-metrics-section .highlights-title {
    margin: 0;
    max-width: 19ch;
    font-size: clamp(2rem, 4.1vw, 3.65rem);
    line-height: .95;
    color: #f7fbff;
    text-wrap: balance;
}

.hero-metrics-section .highlights-copy {
    margin: 0;
    max-width: 72ch;
    color: rgba(228, 242, 255, 0.92);
    font-size: clamp(.98rem, 1.35vw, 1.12rem);
    line-height: 1.28;
}

.hero-metrics-section .highlights-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .96fr);
    gap: clamp(.78rem, 1.6vw, 1rem);
    align-items: stretch;
}

.hero-metrics-section .highlights-visual {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    min-height: clamp(340px, 48vw, 600px);
    border: 1px solid rgba(206, 232, 255, 0.42);
    background:
        radial-gradient(145% 120% at 16% 8%, rgba(195, 230, 255, 0.22), transparent 60%),
        linear-gradient(160deg, rgba(6, 25, 51, 0.45) 0%, rgba(3, 16, 37, 0.62) 58%, rgba(3, 14, 34, 0.8) 100%);
    box-shadow: 0 34px 72px rgba(0, 8, 24, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-metrics-section .highlights-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-metrics-section .highlights-glass {
    position: absolute;
    left: clamp(.9rem, 2vw, 1.4rem);
    right: clamp(.9rem, 2vw, 1.4rem);
    bottom: clamp(.9rem, 2vw, 1.3rem);
    z-index: 2;
    padding: clamp(.85rem, 1.8vw, 1.15rem);
    border-radius: 20px;
    border: 1px solid rgba(205, 232, 255, 0.36);
    background: rgba(8, 24, 49, 0.36);
    backdrop-filter: blur(14px) saturate(138%);
    -webkit-backdrop-filter: blur(14px) saturate(138%);
    display: grid;
    gap: .34rem;
}

.hero-metrics-section .highlights-glass-kicker {
    margin: 0;
    font-size: .62rem;
    color: rgba(210, 236, 255, 0.84);
}

.hero-metrics-section .highlights-glass-title {
    margin: 0;
    color: #f2f9ff;
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    line-height: 1.06;
}

.hero-metrics-section .highlights-glass-copy {
    margin: 0;
    color: rgba(224, 240, 255, 0.92);
    font-size: clamp(.9rem, 1.22vw, 1.02rem);
    line-height: 1.22;
}

.hero-metrics-section .highlights-list {
    display: grid;
    gap: .72rem;
}

.hero-metrics-section .highlight-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(200, 230, 255, 0.34);
    background: rgba(255, 255, 255, 0.03);
    padding: clamp(.88rem, 1.7vw, 1.06rem);
    display: grid;
    gap: .36rem;
    cursor: pointer;
    transition: border-color .34s ease, transform .34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .34s ease, background .34s ease;
}

.hero-metrics-section .highlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(260px 140px at var(--card-glow-x, 50%) var(--card-glow-y, 50%), rgba(165, 224, 255, 0.22), transparent 72%);
    opacity: 0;
    transition: opacity .34s ease;
    pointer-events: none;
}

.hero-metrics-section .highlight-card:hover,
.hero-metrics-section .highlight-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(222, 242, 255, 0.58);
}

.hero-metrics-section .highlight-card:hover::before,
.hero-metrics-section .highlight-card:focus-visible::before {
    opacity: 1;
}

.hero-metrics-section .highlight-card.is-active {
    border-color: rgba(236, 247, 255, 0.68);
    background: linear-gradient(152deg, rgba(10, 34, 66, 0.72), rgba(5, 22, 46, 0.62));
    box-shadow: 0 22px 40px rgba(0, 10, 27, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-metrics-section .highlight-card-kicker {
    margin: 0;
    font-size: .7rem;
    color: rgba(211, 236, 255, 0.86);
}

.hero-metrics-section .highlight-card h3 {
    margin: 0;
    color: #f2f9ff;
    font-size: clamp(1.03rem, 1.4vw, 1.28rem);
    line-height: 1.1;
}

.hero-metrics-section .highlight-card p {
    margin: 0;
    color: rgba(223, 240, 255, 0.9);
    line-height: 1.2;
    font-size: .91rem;
}

.hero-metrics-section .highlight-card strong {
    margin-top: .16rem;
    font-size: .83rem;
    color: rgba(244, 251, 255, 0.96);
    line-height: 1.1;
    font-weight: 700;
}

.hero-metrics-section .highlight-card strong .counter {
    font-size: 1.1em;
}

@media (max-width: 1040px) {
    .hero-metrics-section .highlights-stage {
        grid-template-columns: 1fr;
    }

    .hero-metrics-section .highlights-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hero-metrics-section .highlights-title {
        max-width: 100%;
        font-size: clamp(1.6rem, 8.4vw, 2.2rem);
    }

    .hero-metrics-section .highlights-copy {
        font-size: .95rem;
    }

    .hero-metrics-section .highlights-visual {
        min-height: 320px;
        border-radius: 26px;
    }

    .hero-metrics-section .highlights-list {
        grid-template-columns: 1fr;
    }
}

/* Catalog immersive redesign */
.section-catalog.section-catalog-immersive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 0;
    background: linear-gradient(156deg, #007aff 0%, #006fe8 42%, #005cc2 100%);
    border-top: 1px solid rgba(222, 241, 255, 0.22);
    border-bottom: 1px solid rgba(192, 226, 255, 0.24);
}

.section-catalog.section-catalog-immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 85% at 10% -6%, rgba(196, 231, 255, 0.36), transparent 62%),
        radial-gradient(95% 70% at 88% 118%, rgba(94, 184, 255, 0.32), transparent 68%);
}

.section-catalog.section-catalog-immersive .catalog-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    filter: saturate(1.15) contrast(1.04);
}

.section-catalog.section-catalog-immersive .catalog-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 10, 23, 0.02), rgba(2, 10, 23, 0.22)),
        radial-gradient(60% 70% at 50% 120%, rgba(2, 9, 22, 0.24), transparent 80%);
}

.section-catalog.section-catalog-immersive .catalog-shell {
    position: relative;
    z-index: 3;
}

.section-catalog.section-catalog-immersive .catalog-head {
    margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}

.section-catalog.section-catalog-immersive .catalog-head .section-title {
    color: #ffffff;
    max-width: 18ch;
}

.section-catalog.section-catalog-immersive .catalog-head p {
    max-width: 72ch;
    color: rgba(231, 245, 255, 0.93);
}

.section-catalog.section-catalog-immersive .catalog-showcase {
    display: grid;
    gap: .9rem;
}

.section-catalog.section-catalog-immersive .catalog-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(210, 235, 255, 0.44);
    background: linear-gradient(155deg, rgba(6, 25, 52, 0.4), rgba(5, 18, 40, 0.62));
    box-shadow: 0 36px 74px rgba(0, 9, 25, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.section-catalog.section-catalog-immersive .catalog-track {
    display: flex;
    transition: transform .85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.section-catalog.section-catalog-immersive .catalog-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
    align-items: stretch;
    gap: 0;
    opacity: .6;
    transform: scale(0.985);
    transition: opacity .5s ease, transform .6s ease;
}

.section-catalog.section-catalog-immersive .catalog-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.section-catalog.section-catalog-immersive .catalog-media-frame {
    margin: 0;
    overflow: hidden;
    position: relative;
    min-height: clamp(280px, 42vw, 520px);
}

.section-catalog.section-catalog-immersive .catalog-media-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 10, 22, 0) 38%, rgba(2, 10, 22, 0.36) 100%),
        radial-gradient(100% 75% at 16% -6%, rgba(192, 233, 255, 0.24), transparent 62%);
}

.section-catalog.section-catalog-immersive .catalog-slide .placeholder-img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    filter: saturate(1.16) contrast(1.06);
    transform: scale(1.02);
}

.section-catalog.section-catalog-immersive .catalog-copy {
    padding: clamp(1rem, 2.5vw, 2rem);
    display: grid;
    align-content: center;
    gap: .5rem;
    background:
        linear-gradient(160deg, rgba(7, 24, 49, 0.7), rgba(4, 14, 31, 0.76)),
        radial-gradient(180% 80% at 0% 0%, rgba(158, 219, 255, 0.16), transparent 54%);
}

.section-catalog.section-catalog-immersive .catalog-kicker {
    margin: 0;
    font-size: .78rem;
    line-height: 1.2;
    color: rgba(214, 238, 255, 0.86);
}

.section-catalog.section-catalog-immersive .catalog-copy h3 {
    margin: 0;
    font-size: clamp(1.4rem, 2.7vw, 2.35rem);
    line-height: 1;
    color: #f7fbff;
    text-wrap: balance;
}

.section-catalog.section-catalog-immersive .catalog-copy p {
    margin: 0;
    color: rgba(227, 242, 255, 0.92);
    font-size: clamp(.95rem, 1.24vw, 1.06rem);
    line-height: 1.24;
}

.section-catalog.section-catalog-immersive .catalog-controls {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: fit-content;
    justify-self: center;
}

.section-catalog.section-catalog-immersive .catalog-controls .slider-nav {
    background: rgba(9, 27, 51, 0.44);
    border-color: rgba(210, 236, 255, 0.42);
}

.section-catalog.section-catalog-immersive .catalog-controls .slider-nav:hover {
    background: rgba(13, 34, 63, 0.58);
}

.section-catalog.section-catalog-immersive .catalog-dots {
    background: rgba(8, 22, 43, 0.38);
    border-color: rgba(206, 234, 255, 0.34);
}

@media (max-width: 980px) {
    .section-catalog.section-catalog-immersive .catalog-slide {
        grid-template-columns: 1fr;
    }

    .section-catalog.section-catalog-immersive .catalog-media-frame {
        min-height: 250px;
    }
}

@media (max-width: 760px) {
    .section-catalog.section-catalog-immersive .catalog-viewport {
        border-radius: 24px;
    }

    .section-catalog.section-catalog-immersive .catalog-copy {
        padding: .95rem .9rem 1rem;
    }

    .section-catalog.section-catalog-immersive .catalog-copy h3 {
        font-size: clamp(1.2rem, 6.1vw, 1.6rem);
    }

    .section-catalog.section-catalog-immersive .catalog-copy p {
        font-size: .92rem;
        line-height: 1.2;
    }
}

/* Brands wall redesign */
.section-brands.section-brands-apple {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 95% at 10% -8%, rgba(115, 187, 255, 0.14), transparent 62%),
        linear-gradient(160deg, rgba(3, 12, 28, 0.96), rgba(3, 10, 22, 0.98));
    border-top: 1px solid rgba(197, 228, 255, 0.16);
    border-bottom: 1px solid rgba(177, 215, 255, 0.12);
}

.section-brands.section-brands-apple .section-head p {
    color: rgba(225, 240, 255, 0.9);
}

.section-brands.section-brands-apple .brands-wall {
    position: relative;
    padding: clamp(.3rem, 1vw, .8rem) 0;
}

.section-brands.section-brands-apple .brands-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .72rem;
    padding: .85rem;
    border-radius: 24px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.section-brands.section-brands-apple .brand-logo-card {
    width: 100%;
    min-height: clamp(72px, 7.4vw, 100px);
    border-radius: 16px;
    border: 1px solid rgba(186, 222, 255, 0.24);
    background: rgba(8, 20, 39, 0.44);
    backdrop-filter: blur(10px) saturate(122%);
    -webkit-backdrop-filter: blur(10px) saturate(122%);
    display: grid;
    place-items: center;
    padding: 0;
    transition: transform .28s ease, border-color .28s ease, background-color .28s ease;
}

.section-brands.section-brands-apple .brand-logo-link {
    width: 100%;
    min-height: inherit;
    display: grid;
    place-items: center;
    padding: .82rem 1rem;
}

.section-brands.section-brands-apple .brand-logo-card:hover {
    transform: translateY(-1px);
    border-color: rgba(219, 240, 255, 0.5);
    background: rgba(11, 30, 57, 0.58);
}

.section-brands.section-brands-apple .brand-logo-card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(26px, 3.2vw, 44px);
    object-fit: contain;
    opacity: .94;
}

.section-brands.section-brands-apple .brand-logo-text {
    font-size: .82rem;
    line-height: 1.2;
    color: rgba(240, 249, 255, 0.95);
    text-align: center;
}

@media (max-width: 760px) {
    .section-brands.section-brands-apple .brands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .58rem;
        padding: .65rem;
    }

    .section-brands.section-brands-apple .brand-logo-card {
        min-height: 68px;
        border-radius: 14px;
    }
}

/* Cases slideshow redesign */
.section-cases.section-cases-immersive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(130% 110% at 100% -8%, rgba(106, 190, 255, 0.22), transparent 62%),
        linear-gradient(162deg, rgba(3, 11, 24, 0.98), rgba(2, 8, 18, 0.98));
    border-top: 1px solid rgba(183, 220, 255, 0.16);
    border-bottom: 1px solid rgba(174, 213, 255, 0.14);
}

.section-cases.section-cases-immersive .cases-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    filter: saturate(1.16) contrast(1.06);
}

.section-cases.section-cases-immersive .cases-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 8, 20, 0.02), rgba(2, 8, 20, 0.2)),
        radial-gradient(80% 60% at 50% 120%, rgba(2, 8, 20, 0.2), transparent 72%);
}

.section-cases.section-cases-immersive .cases-shell {
    position: relative;
    z-index: 2;
}

.section-cases.section-cases-immersive .cases-head {
    margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
}

.section-cases.section-cases-immersive .cases-head p {
    color: rgba(228, 242, 255, 0.9);
}

.section-cases.section-cases-immersive .cases-showcase {
    display: grid;
    gap: .9rem;
}

.section-cases.section-cases-immersive .cases-viewport {
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(196, 228, 255, 0.34);
    background:
        linear-gradient(156deg, rgba(8, 26, 50, 0.54), rgba(5, 17, 35, 0.62)),
        radial-gradient(140% 90% at 8% 4%, rgba(180, 230, 255, 0.14), transparent 58%);
    box-shadow: 0 34px 72px rgba(1, 7, 20, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.section-cases.section-cases-immersive .cases-track {
    display: flex;
    transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.section-cases.section-cases-immersive .case-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    opacity: .58;
    transform: scale(.985);
    transition: opacity .5s ease, transform .55s ease;
}

.section-cases.section-cases-immersive .case-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.section-cases.section-cases-immersive .case-slide-media {
    margin: 0;
    min-height: clamp(280px, 42vw, 530px);
    overflow: hidden;
    position: relative;
}

.section-cases.section-cases-immersive .case-slide-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 8, 20, 0.02) 22%, rgba(2, 8, 20, 0.34) 100%),
        radial-gradient(90% 80% at 20% -4%, rgba(184, 233, 255, 0.2), transparent 62%);
}

.section-cases.section-cases-immersive .case-slide-media .placeholder-img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.1) contrast(1.05);
}

.section-cases.section-cases-immersive .case-slide-copy {
    display: grid;
    align-content: center;
    gap: .55rem;
    padding: clamp(1rem, 2.3vw, 1.9rem);
    background:
        linear-gradient(160deg, rgba(8, 25, 49, 0.72), rgba(5, 16, 34, 0.78)),
        radial-gradient(140% 80% at 0 0, rgba(163, 222, 255, 0.18), transparent 56%);
}

.section-cases.section-cases-immersive .case-slide-kicker {
    margin: 0;
    color: rgba(217, 238, 255, 0.86);
    font-size: .78rem;
}

.section-cases.section-cases-immersive .case-slide-copy h3 {
    margin: 0;
    font-size: clamp(1.38rem, 2.75vw, 2.36rem);
    line-height: 1.02;
    color: #f7fbff;
    text-wrap: balance;
}

.section-cases.section-cases-immersive .case-slide-copy p {
    margin: 0;
    color: rgba(226, 242, 255, 0.92);
    font-size: clamp(.95rem, 1.25vw, 1.05rem);
    line-height: 1.24;
}

.section-cases.section-cases-immersive .cases-controls {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: fit-content;
    justify-self: center;
}

.section-cases.section-cases-immersive .cases-controls .slider-nav {
    background: rgba(8, 24, 46, 0.42);
    border-color: rgba(210, 235, 255, 0.38);
}

.section-cases.section-cases-immersive .cases-controls .slider-nav:hover {
    background: rgba(12, 32, 60, 0.56);
}

.section-cases.section-cases-immersive .cases-dots {
    background: rgba(7, 21, 41, 0.38);
    border-color: rgba(196, 230, 255, 0.28);
}

@media (max-width: 980px) {
    .section-cases.section-cases-immersive .case-slide {
        grid-template-columns: 1fr;
    }

    .section-cases.section-cases-immersive .case-slide-media {
        min-height: 250px;
    }
}

@media (max-width: 760px) {
    .section-cases.section-cases-immersive .cases-viewport {
        border-radius: 24px;
    }

    .section-cases.section-cases-immersive .case-slide-copy {
        padding: .95rem .92rem 1rem;
    }

    .section-cases.section-cases-immersive .case-slide-copy h3 {
        font-size: clamp(1.14rem, 6vw, 1.56rem);
    }

    .section-cases.section-cases-immersive .case-slide-copy p {
        font-size: .92rem;
        line-height: 1.2;
    }
}

/* Architecture modal v3: full-canvas cinematic */
.solution-modal-dialog {
    overflow: hidden !important;
    border-radius: 34px !important;
    padding: 0 !important;
    min-height: min(84vh, 760px);
    background: linear-gradient(160deg, rgba(3, 9, 20, 0.94), rgba(2, 6, 14, 0.92)) !important;
}

.solution-modal-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.solution-modal-content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: grid;
    align-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.8rem);
    background:
        radial-gradient(120% 92% at 50% 100%, rgba(2, 8, 20, 0.44), rgba(2, 8, 20, 0.82) 72%),
        linear-gradient(180deg, rgba(2, 8, 20, 0.08) 22%, rgba(2, 8, 20, 0.72) 100%);
}

.solution-modal-hero {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.solution-modal-kicker {
    margin: 0 0 .42rem !important;
    display: block;
    font-size: clamp(.88rem, 1.18vw, 1.02rem) !important;
    font-weight: 600;
    line-height: 1.3 !important;
    letter-spacing: .01em !important;
    color: rgba(230, 244, 255, 0.92) !important;
    text-transform: none !important;
}

.solution-modal-category {
    display: none !important;
}

.solution-modal-title {
    max-width: 20ch !important;
    font-size: clamp(1.9rem, 4vw, 3.5rem) !important;
    line-height: .98 !important;
    color: #f4fbff !important;
}

.solution-modal-lead {
    max-width: 62ch !important;
    font-size: clamp(1rem, 1.3vw, 1.16rem) !important;
    color: rgba(232, 246, 255, 0.92) !important;
}

.solution-modal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.solution-modal-card {
    background: rgba(7, 20, 42, 0.42) !important;
    border: 1px solid rgba(178, 221, 255, 0.22) !important;
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.solution-modal-card.is-active {
    background: rgba(10, 31, 62, 0.56) !important;
    border-color: rgba(201, 233, 255, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 42px rgba(2, 10, 24, 0.3) !important;
}

.solution-modal-actions {
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

.solution-modal-close {
    z-index: 4;
}

@media (max-width: 760px) {
    .solution-modal-dialog {
        border-radius: 24px !important;
        min-height: min(86vh, 720px);
    }

    .solution-modal-content {
        padding: .95rem .9rem 1rem;
    }

    .solution-modal-grid {
        grid-template-columns: 1fr;
    }

    .solution-modal-title {
        font-size: clamp(1.6rem, 7.2vw, 2.2rem) !important;
    }
}

/* ==========================================================================
   Highlights Horizontal Scroll Section (Apple Style)
   ==========================================================================*/
/* Premium Apple-Style Highlights Section */
.highlights-scroll-container {
    position: relative;
    /* Extra height for scrolling = 100vh for each screen you want to scroll through */
    height: 400vh;
    background-color: #02060f;
    will-change: transform;
    z-index: 10;
}

.section-highlights-apple {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #02060f;
}

.highlights-webgl-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    line-height: 1.4;
    max-width: 700px;
    margin: 0 auto;
}

/* Track Viewport */
.highlights-track-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: visible;
    z-index: 5;
}

.highlights-track {
    display: flex;
    gap: clamp(2rem, 5vw, 4rem);
    padding: 0 clamp(5vw, 15vw, 25vw);
    will-change: transform;
}

/* Individual Cards */
.highlight-card-apple {
    position: relative;
    width: clamp(320px, 75vw, 980px);
    height: clamp(400px, 70vh, 750px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    background: var(--glass-bg);
    transform-origin: center center;
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-smooth);
}

.highlight-card-apple:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-hover);
}

.highlight-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.highlight-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.highlight-card-apple:hover .highlight-card-bg img {
    transform: scale(1.08);
}

.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 18, 0.1) 0%, rgba(2, 6, 18, 0.85) 70%, rgba(2, 6, 18, 0.95) 100%);
}

.highlight-card-content {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 800px;
}

.highlight-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.highlight-icon {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.highlight-icon-gold {
    color: #e2c17c;
    background: rgba(226, 193, 124, 0.15);
}

.highlight-card-kicker {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(220, 240, 255, 0.8);
}

.highlight-card-apple h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.1;
    color: #ffffff;
}

.highlight-card-apple p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    max-width: 85%;
}

.highlight-stat {
    margin-top: 1.2rem;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-number {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1;
    color: #ffffff;
}

.stat-label {
    font-size: clamp(0.9rem, 1vw, 1rem);
    color: rgba(200, 230, 255, 0.8);
    font-weight: 500;
}

/* Glass Card Variant */
.highlight-card-glass {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.15);
}

.dark-liquid-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(16, 32, 64, 0.24), rgba(8, 16, 32, 0.48));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.dark-liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at bottom right, rgba(0, 150, 255, 0.12), transparent 50%);
    pointer-events: none;
}

.highlight-card-glass .gradient-overlay {
    background: linear-gradient(180deg, rgba(2, 6, 18, 0.06) 0%, rgba(2, 6, 18, 0.62) 70%, rgba(2, 6, 18, 0.78) 100%);
}

.highlight-title-large {
    font-weight: 300 !important;
    color: #ffffff;
    font-size: clamp(3.5rem, 6.5vw, 5.5rem) !important;
    max-width: 320px;
    margin-bottom: 0.8rem;
    line-height: 0.95 !important;
}

.highlight-text-large {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    max-width: 480px !important;
}

@media (max-width: 1024px) {
    .highlight-card-apple {
        height: clamp(380px, 65vh, 600px);
    }
}

@media (max-width: 768px) {
    .highlights-scroll-container {
        height: 300vh;
    }

    .highlights-track {
        gap: 1.5rem;
        padding: 0 5vw;
    }

    .highlight-card-apple {
        width: 85vw;
        border-radius: 24px;
        padding: 0;
    }

    .highlight-card-content {
        padding: 1.5rem;
    }

    .highlight-card-apple p {
        max-width: 100%;
    }

    .highlight-title-large {
    font-weight: 300 !important;
        font-size: 2.2rem !important;
    }
}

/* Production polish overrides: section flow + mobile-safe horizontal experiences */
.section {
    transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
}

.section:not(.section-solutions) {
    opacity: .95;
    transform: translateY(8px);
}

.section.is-inview:not(.section-solutions) {
    opacity: 1;
    transform: translateY(0);
}

.highlights-scroll-container.is-linear {
    height: auto;
}

.highlights-scroll-container.is-linear .section-highlights-apple {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(3rem, 7vw, 4.5rem) 0;
}

.highlights-scroll-container.is-linear .highlights-track-viewport {
    height: auto;
    align-items: stretch;
}

.highlights-scroll-container.is-linear .highlights-track {
    display: grid;
    gap: 1rem;
    transform: none !important;
    padding: 0 min(5vw, 1rem);
}

.highlights-scroll-container.is-linear .highlight-card-apple,
.highlights-scroll-container.is-linear .highlight-intro-slide {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.solutions-scroll-container.is-linear {
    height: auto;
}

.solutions-scroll-container.is-linear #soluciones.section-solutions {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(3rem, 7vw, 4.5rem) 0;
}

.solutions-scroll-container.is-linear .solutions-intro {
    position: relative;
    top: 0;
    pointer-events: auto;
    margin-bottom: 1rem;
}

.solutions-scroll-container.is-linear .solutions-track {
    position: relative;
    top: 0;
    transform: none !important;
    display: grid;
    gap: 1rem;
    padding: 0 min(5vw, 1rem);
}

.solutions-scroll-container.is-linear .solution-panel {
    width: 100%;
    height: min(74vh, 560px);
}

/* Restore normal transition between values and architecture sections to avoid gaps */
.section-values-stack+.solutions-scroll-container {
    margin-top: -3rem;
    /* physically pull up the next section */
    position: relative;
    z-index: 6;
    background-color: transparent;
    /* Let backgrounds overlap */
}

/* Base style for horizontal scroll - Redesigned to use Flexbox to naturally prevent overlap */
#soluciones.section-solutions {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(2rem, 4vh, 3rem) !important;
    padding-bottom: clamp(3rem, 6vh, 5rem) !important;
    background: linear-gradient(180deg, transparent 0%, #030814 10vh);
    /* Seamless blend from the section above */
    z-index: 6;
}

.solutions-intro {
    position: relative !important;
    top: auto !important;
    padding-top: 0 !important;
    margin-bottom: clamp(2rem, 5vh, 4rem) !important;
    flex-shrink: 0;
    z-index: 9;
}

.solutions-track {
    position: relative !important;
    top: auto !important;
    transform: none;
    /* Let JS handle translate3d when in horizontal mode */
    flex: 1;
    z-index: 4;
}

/* Let JS apply the X-axis transform on the track itself directly, but remove the Y-axis fixed centering */
.solutions-scroll-container:not(.is-linear) .solutions-track {
    transform: translate3d(var(--js-translate, 0px), 0, 0) !important;
}

/* Linear/Mobile Override for perfect stacking without overlap */
.solutions-scroll-container.is-linear #soluciones.section-solutions {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: clamp(2rem, 5vh, 4rem) !important;
    padding-bottom: clamp(2rem, 5vh, 4rem) !important;
}

.solutions-scroll-container.is-linear .solutions-intro {
    position: static !important;
    margin-bottom: clamp(1.5rem, 4vh, 3rem) !important;
}

.solutions-scroll-container.is-linear .solutions-track {
    transform: none !important;
}

/* Avoid perceived empty gap at the start of sticky cinematic sections */
#soluciones .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ─── Conversion: WhatsApp contact ──────────────────────────────────────── */

.conversion-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 18, 38, 0.56);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.conversion-card-media {
    position: relative;
    overflow: hidden;
    min-height: 440px;
}

.conversion-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 18, 38, 0.62) 0%, transparent 60%),
        linear-gradient(180deg, transparent 50%, rgba(7, 18, 38, 0.48));
}

.conversion-card-media .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.06) contrast(1.03);
    display: block;
}

.conversion-card-body {
    padding: clamp(2rem, 4.5vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.conversion-card-body h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.12;
    color: #ffffff;
    margin: 0;
}

.conversion-card-body>p {
    color: rgba(220, 238, 255, 0.86);
    line-height: 1.62;
    max-width: 44ch;
    margin: 0;
}

.conversion-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.conversion-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(196, 224, 255, 0.88);
    font-size: 0.94rem;
    transition: color 0.2s ease;
}

.conversion-contact:hover {
    color: #ffffff;
}

.conversion-contact .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--insistel-primary);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

.conversion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

@media (max-width: 760px) {
    .conversion-card {
        grid-template-columns: 1fr;
    }

    .conversion-card-media {
        min-height: 260px;
        order: 2;
    }

    .conversion-card-media::after {
        background: linear-gradient(0deg, rgba(7, 18, 38, 0.72), transparent 55%);
    }

    .conversion-card-body {
        order: 1;
    }
}

/* ─── Brochure: Document download ───────────────────────────────────────── */

.brochure-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 18, 38, 0.56);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.brochure-card-body {
    padding: clamp(2rem, 4.5vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.brochure-card-body .section-title {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.08;
}

.brochure-card-body>p {
    color: rgba(220, 238, 255, 0.86);
    line-height: 1.62;
    max-width: 44ch;
    margin: 0;
}

.brochure-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.brochure-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: rgba(210, 232, 255, 0.9);
    font-size: 0.94rem;
    line-height: 1.5;
}

.brochure-list li .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--insistel-primary);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
    margin-top: 0.12em;
}

.brochure-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.brochure-card-media {
    position: relative;
    overflow: hidden;
    min-height: 440px;
}

.brochure-card-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(7, 18, 38, 0.48) 0%, transparent 55%);
}

.brochure-card-media .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.05) contrast(1.03);
    display: block;
}

@media (max-width: 760px) {
    .brochure-card {
        grid-template-columns: 1fr;
    }

    .brochure-card-media {
        min-height: 280px;
    }

    .brochure-card-media::before {
        background: linear-gradient(180deg, transparent 40%, rgba(7, 18, 38, 0.7));
    }
}

/* ─── legacy immersive overrides — retained for back-compat, neutralised ─ */
.section-brochure .brochure-grid-immersive {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-height: clamp(560px, 82vh, 860px);
    padding: 0;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(180, 218, 255, 0.24);
    background: rgba(5, 14, 30, 0.5);
    box-shadow: 0 36px 90px rgba(1, 8, 22, 0.48);
    isolation: isolate;
}

.section-brochure .brochure-media-immersive {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.section-brochure .brochure-media-immersive .placeholder-img {
    width: 100%;
    height: 100%;
    min-height: clamp(560px, 82vh, 860px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.04);
}

.section-brochure .brochure-grid-immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 10, 24, 0.82) 0%, rgba(2, 10, 24, 0.55) 42%, rgba(2, 10, 24, 0.2) 78%),
        linear-gradient(180deg, rgba(2, 10, 24, 0.2) 0%, rgba(2, 10, 24, 0.55) 100%);
}

.section-brochure .brochure-copy-immersive {
    position: relative;
    z-index: 2;
    align-self: end;
    margin: clamp(1rem, 3.2vw, 2rem);
    max-width: min(640px, calc(100% - 2rem));
    border-radius: 24px;
    border: 1px solid rgba(184, 222, 255, 0.34);
    background: rgba(6, 18, 38, 0.5);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 22px 54px rgba(2, 10, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.section-brochure .brochure-copy-immersive .section-title {
    font-size: clamp(2rem, 4.1vw, 3.3rem);
}

.section-brochure .brochure-copy-immersive p {
    color: rgba(229, 242, 255, 0.92);
}

.section-brochure .brochure-copy-immersive .value-list li {
    color: rgba(224, 240, 255, 0.95);
}

@media (max-width: 980px) {
    .section-brochure .brochure-grid-immersive {
        min-height: clamp(520px, 76vh, 760px);
    }

    .section-brochure .brochure-media-immersive .placeholder-img {
        min-height: clamp(520px, 76vh, 760px);
    }

    .section-brochure .brochure-grid-immersive::before {
        background:
            linear-gradient(180deg, rgba(2, 10, 24, 0.14) 0%, rgba(2, 10, 24, 0.78) 100%),
            linear-gradient(90deg, rgba(2, 10, 24, 0.3) 0%, rgba(2, 10, 24, 0.35) 100%);
    }

    .section-brochure .brochure-copy-immersive {
        margin: 1rem;
        max-width: none;
    }
}

/* Conversion immersive redesign */
.section-conversion .conversion-grid-immersive {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-height: clamp(520px, 74vh, 760px);
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(180, 218, 255, 0.24);
    background: rgba(5, 14, 30, 0.5);
    box-shadow: 0 34px 82px rgba(1, 8, 22, 0.45);
    isolation: isolate;
}

.section-conversion .conversion-media-immersive {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.section-conversion .conversion-media-immersive .placeholder-img {
    width: 100%;
    height: 100%;
    min-height: clamp(520px, 74vh, 760px);
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.04);
}

.section-conversion .conversion-grid-immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 10, 24, 0.82) 0%, rgba(2, 10, 24, 0.52) 44%, rgba(2, 10, 24, 0.2) 78%),
        linear-gradient(180deg, rgba(2, 10, 24, 0.24) 0%, rgba(2, 10, 24, 0.58) 100%);
}

.section-conversion .conversion-copy-immersive {
    position: relative;
    z-index: 2;
    align-self: end;
    margin: clamp(1rem, 3.2vw, 2rem);
    max-width: min(640px, calc(100% - 2rem));
    border-radius: 24px;
    border: 1px solid rgba(184, 222, 255, 0.34);
    background: rgba(6, 18, 38, 0.5);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 22px 54px rgba(2, 10, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-align: left;
}

.section-conversion .conversion-copy-immersive .section-title {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
}

.section-conversion .conversion-copy-immersive p {
    color: rgba(229, 242, 255, 0.92);
}

.section-conversion .conversion-copy-immersive blockquote {
    border-color: rgba(194, 228, 255, 0.35);
    background: rgba(8, 23, 47, 0.56);
    color: rgba(235, 245, 255, 0.95);
}

@media (max-width: 980px) {

    .section-conversion .conversion-grid-immersive,
    .section-conversion .conversion-media-immersive .placeholder-img {
        min-height: clamp(500px, 70vh, 690px);
    }

    .section-conversion .conversion-grid-immersive::before {
        background:
            linear-gradient(180deg, rgba(2, 10, 24, 0.14) 0%, rgba(2, 10, 24, 0.78) 100%),
            linear-gradient(90deg, rgba(2, 10, 24, 0.3) 0%, rgba(2, 10, 24, 0.35) 100%);
    }

    .section-conversion .conversion-copy-immersive {
        margin: 1rem;
        max-width: none;
        text-align: center;
    }
}

/* Brochure + Conversion: Apple editorial refinement */
.section-brochure .brochure-grid-immersive {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(1rem, 2.2vw, 1.6rem);
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.section-brochure .brochure-grid-immersive::before {
    content: none;
}

.section-brochure .brochure-media-immersive {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(196, 228, 255, 0.26);
    background: rgba(6, 18, 38, 0.32);
    box-shadow: 0 28px 64px rgba(2, 10, 24, 0.38);
}

.section-brochure .brochure-media-immersive .placeholder-img {
    min-height: clamp(420px, 62vh, 760px);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.04) contrast(1.03);
    transform: none;
}

.section-brochure .brochure-copy-immersive {
    position: static;
    margin: 0;
    max-width: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 26px;
    border: 1px solid rgba(184, 222, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 22px 54px rgba(2, 10, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.section-brochure .brochure-copy-immersive .section-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.05;
}

.section-conversion .conversion-grid-immersive {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(1rem, 2.2vw, 1.6rem);
    min-height: auto;
    max-width: 1160px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.section-conversion .conversion-grid-immersive::before {
    content: none;
}

.section-conversion .conversion-copy-immersive {
    order: 1;
    position: static;
    margin: 0;
    max-width: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    border-radius: 26px;
    border: 1px solid rgba(184, 222, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 22px 54px rgba(2, 10, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.section-conversion .conversion-media-immersive {
    order: 2;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(196, 228, 255, 0.26);
    background: rgba(6, 18, 38, 0.32);
    box-shadow: 0 28px 64px rgba(2, 10, 24, 0.38);
}

.section-conversion .conversion-media-immersive .placeholder-img {
    min-height: clamp(420px, 62vh, 760px);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: saturate(1.04) contrast(1.03);
}

@media (max-width: 980px) {

    .section-brochure .brochure-grid-immersive,
    .section-conversion .conversion-grid-immersive {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .section-conversion .conversion-copy-immersive,
    .section-conversion .conversion-media-immersive {
        order: initial;
    }

    .section-brochure .brochure-copy-immersive,
    .section-conversion .conversion-copy-immersive {
        text-align: left;
    }

    .section-brochure .brochure-media-immersive .placeholder-img,
    .section-conversion .conversion-media-immersive .placeholder-img {
        min-height: clamp(330px, 52vh, 500px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCTION POLISH — UI/UX refinement layer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS variable aliases & missing tokens ─────────────────────────────── */
:root {
    --radius-small: var(--radius-sm);   /* alias fix: mobile nav used --radius-small */
    --font-numbers: 'Google Sans Flex', sans-serif;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
}

/* ── Loader: prevent FOUC before JS replaces the class ─────────────────── */
.insistel-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 760px) {
    .insistel-loader,
    .apple-loader {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.section-products-spotlight .products-carousel-controls {
    width: fit-content !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem !important;
    margin-top: 0.85rem !important;
    padding: 0.18rem !important;
    border-radius: 999px;
}

.section-products-spotlight .products-carousel-controls .slider-nav {
    width: 3.15rem !important;
    height: 3.15rem !important;
    min-width: 3.15rem !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 247, 252, 0.94)) !important;
    border: 1px solid rgba(197, 210, 228, 0.92) !important;
    color: #0f172a !important;
    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(203, 213, 225, 0.38) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

.section-products-spotlight .products-carousel-controls .slider-nav .material-symbols-rounded {
    font-size: 1.65rem;
    font-variation-settings: "wght" 340;
}

.section-products-spotlight .products-carousel-controls .slider-nav:hover {
    transform: translateY(-1px) scale(1.015) !important;
    background: linear-gradient(180deg, #ffffff, rgba(246, 249, 253, 0.96)) !important;
    border-color: rgba(180, 196, 219, 0.98) !important;
    box-shadow:
        0 16px 30px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(203, 213, 225, 0.42) !important;
}

.section-products-spotlight .products-carousel-controls .slider-nav:disabled {
    opacity: 0.44 !important;
    color: rgba(100, 116, 139, 0.82) !important;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple {
    position: relative;
    min-width: min(14rem, 52vw) !important;
    min-height: 3.05rem !important;
    padding: 0.42rem 0.78rem !important;
    gap: 0.42rem !important;
    border-radius: 999px !important;
    justify-content: center !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 247, 252, 0.94)) !important;
    border: 1px solid rgba(197, 210, 228, 0.92) !important;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(203, 213, 225, 0.36) !important;
    overflow: hidden;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple::before,
.section-products-spotlight .products-carousel-controls .slider-dots--apple::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.1rem;
    pointer-events: none;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple::before {
    left: 0;
    background: linear-gradient(90deg, rgba(246, 249, 253, 0.98), rgba(246, 249, 253, 0));
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple::after {
    right: 0;
    background: linear-gradient(270deg, rgba(246, 249, 253, 0.98), rgba(246, 249, 253, 0));
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot {
    width: 0.52rem !important;
    height: 0.52rem !important;
    flex: 0 0 0.52rem;
    border-radius: 999px !important;
    background: rgba(179, 191, 209, 0.9) !important;
    opacity: 0.9 !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        width .34s cubic-bezier(.22, 1, .36, 1),
        flex-basis .34s cubic-bezier(.22, 1, .36, 1),
        background-color .28s ease,
        opacity .28s ease !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot[aria-current="false"] {
    opacity: 0.72 !important;
}

.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot.is-active,
.section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot[aria-current="true"] {
    width: 1.9rem !important;
    flex-basis: 1.9rem !important;
    background: linear-gradient(180deg, #152036, #0f172a) !important;
    opacity: 1 !important;
    box-shadow:
        0 8px 14px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 720px) {
    .section-products-spotlight .products-carousel-controls {
        width: min(100%, 18rem) !important;
        gap: 0.65rem !important;
        margin-top: 0.95rem !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-nav {
        width: 3rem !important;
        height: 3rem !important;
        min-width: 3rem !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-nav .material-symbols-rounded {
        font-size: 1.55rem;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 2.9rem !important;
        padding: 0.38rem 0.72rem !important;
        gap: 0.38rem !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot {
        width: 0.5rem !important;
        height: 0.5rem !important;
        flex-basis: 0.5rem !important;
    }

    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot.is-active,
    .section-products-spotlight .products-carousel-controls .slider-dots--apple .slider-dot[aria-current="true"] {
        width: 1.7rem !important;
        flex-basis: 1.7rem !important;
    }

    .product-media-gallery-controls {
        display: none !important;
    }
}

/* ── Typography micro-refinements ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
}

strong,
.stat-card strong,
.hero-content-slider .stat-card strong {
    font-feature-settings: 'tnum' 1, 'kern' 1;
}

/* ── Mobile navigation: smooth slide-in instead of instant display:block ─ */
@media (max-width: 760px) {
    .site-nav {
        display: block !important;
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
        pointer-events: none;
        transition:
            opacity 0.28s var(--ease-out),
            transform 0.28s var(--ease-out);
        visibility: hidden;
    }

    .site-nav.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
    }
}

/* ── Menu toggle: smoother icon transition ──────────────────────────────── */
.menu-toggle {
    transition: background 0.2s ease, transform 0.2s ease;
}

.menu-toggle:active {
    transform: scale(0.92);
}

/* ── Hero content padding on mobile ─────────────────────────────────────── */
@media (max-width: 760px) {
    .hero-content {
        padding-top: clamp(5rem, 14vw, 6.5rem);
        padding-bottom: 3rem;
    }
}

/* ── Buttons: min touch target & consistent padding ─────────────────────── */
.button,
.button-alt,
.button-whatsapp {
    min-height: 44px;
    font-feature-settings: 'kern' 1;
}

/* ── Button WhatsApp: distinct green identity ──────────────────────────── */
.button-whatsapp {
    background: linear-gradient(140deg, #25d366 0%, #128c42 100%);
    color: #ffffff;
    border: 1px solid rgba(37, 211, 102, 0.3);
    box-shadow: 0 10px 26px rgba(18, 140, 66, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600;
}

.button-whatsapp:hover {
    background: linear-gradient(140deg, #2fe876 0%, #15a84d 100%);
    border-color: rgba(47, 232, 118, 0.5);
    box-shadow: 0 16px 36px rgba(18, 140, 66, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1;
}

.button-whatsapp:active {
    transform: scale(0.96);
    box-shadow: 0 6px 14px rgba(18, 140, 66, 0.2);
}

/* ── Site footer: clean underline pattern ───────────────────────────────── */
.site-footer a {
    text-decoration: none !important;
}

.site-footer .contact-hub a:hover,
.site-footer .social-pill:hover {
    text-decoration: none !important;
}

/* ── Section heads: consistent max-width capping ───────────────────────── */
.section-head {
    max-width: 820px;
}

/* ── Card hover: unified lift across all card types ────────────────────── */
.card,
.stat-card,
.testimonial-card {
    will-change: transform;
}

/* ── Solution modal: better close button affordance ───────────────────── */
.solution-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s var(--ease-spring);
}

.solution-modal-close:hover {
    background: rgba(138, 201, 255, 0.26);
    transform: scale(1.08);
}

.solution-modal-close:active {
    transform: scale(0.9);
}

/* ── Slider dots: visible on all backgrounds ──────────────────────────── */
.slider-dot {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.slider-dot.is-active {
    background: var(--insistel-primary);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}

/* ── Timeline year buttons: better focus ring ──────────────────────────── */
.timeline-year:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(149, 203, 255, 0.35),
        0 10px 26px rgba(20, 82, 194, 0.45);
}

/* ── Images: prevent layout shift ──────────────────────────────────────── */
img {
    max-width: 100%;
}

.placeholder-img,
.solution-img {
    display: block;
    height: auto;
}

/* ── Section transition strips: subtle separators ──────────────────────── */
.section-about,
.section-values,
.section-cases,
.section-testimonials {
    isolation: isolate;
}

/* ── Footer grid: ensure minimum column width ──────────────────────────── */
.footer-grid {
    gap: 1.4rem;
}

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand-block {
        grid-column: auto;
    }
}

/* ── Footer blocks: consistent padding ─────────────────────────────────── */
.footer-brand-block,
.footer-contact-stack,
.footer-social-block {
    padding: 1.6rem;
}

.footer-brand-block h3 {
    margin-bottom: 0.6rem;
}

/* ── Social pill: min touch target ─────────────────────────────────────── */
.social-pill {
    min-height: 44px;
}

/* ── Smooth scrollbar: Firefox support ─────────────────────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

/* ── Reduce layout shift from font loading ─────────────────────────────── */
.material-symbols-rounded {
    font-display: swap;
}

/* ── CTA block: more generous padding ──────────────────────────────────── */
.cta-block {
    padding: clamp(2.4rem, 5vw, 4rem);
}

/* ── Interstitial: ensure content is always readable ──────────────────── */
.spectacle-content {
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 75%);
}

/* ── Hero badge: subtle pulse on load ──────────────────────────────────── */
@keyframes badge-appear {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-badge {
    animation: badge-appear 0.6s var(--ease-out) 0.2s both;
}

/* ── Link transition: smoother opacity fade ─────────────────────────────── */
a {
    transition: color var(--transition-smooth), opacity 0.2s ease;
}

/* ── Reveal animation: start from less distance for smoother feel ─────── */
.reveal {
    transform: translateY(20px) scale(0.99);
}

.reveal.is-visible {
    transform: translateY(0) scale(1);
}

/* ── Focus-visible: brand-consistent outline ────────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.7);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Prevent horizontal overflow on small screens ──────────────────────── */
.container {
    overflow-clip-margin: content-box;
}

/* ── Section about: consistent first-child margin reset ─────────────────── */
.section-head h2:first-child,
.section-head h3:first-child {
    margin-top: 0;
}

/* ── Improve text legibility at small sizes ─────────────────────────────── */
p, li {
    max-width: 72ch;
}

.section-head p,
.hero-text,
.brochure-card-body > p,
.conversion-card-body > p {
    max-width: 54ch;
}

@media (max-width: 760px) {
    p, li {
        max-width: none;
    }
}

/* ── Inner pages: account for fixed header ──────────────────────────────── */
.section-inner-page {
    padding-top: calc(74px + clamp(3rem, 6vw, 5rem));
    min-height: 60vh;
}

.inner-page-title {
    color: #ffffff;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    margin-bottom: 1.5rem;
    animation: heading-flow 11s ease-in-out infinite;
}

/* ── 404 page: centered error layout ───────────────────────────────────── */
.section-404 {
    display: flex;
    align-items: center;
}

.error-404-wrap {
    max-width: 600px;
}

.error-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--insistel-primary);
    margin: 0 0 0.75rem;
}

.error-body {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(220, 236, 255, 0.8);
    line-height: 1.4;
    font-size: 1.125rem;
    max-width: 48ch;
    margin: 0;
}

/* ── Print styles: clean minimal output ─────────────────────────────────── */
@media print {
    .site-header,
    .insistel-loader,
    .apple-loader,
    .nav-transition-layer,
    .solution-modal {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* ── Full-screen hero slideshow (100dvh immersive) ───────────────────────── */
.hero.hero-slider-wrap {
    height: 100dvh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.hero.hero-slider-wrap .hero-cinematic-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hero.hero-slider-wrap .liquid-slider {
    flex: 1;
    min-height: 0 !important;
    height: auto;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hero.hero-slider-wrap .slides-viewport {
    height: 100%;
    min-height: 0;
}

/* Prevent Intersection Observer reveal on above-fold element */
.hero.hero-slider-wrap .liquid-slider.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
}

/* ── Scroll indicator (bottom-right, vertical) ───────────────────────────── */
.scroll-indicator {
    position: absolute;
    bottom: clamp(4.5rem, 9vh, 6.5rem);
    right: clamp(1.5rem, 3vw, 2.5rem);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    pointer-events: none;
    opacity: 0;
    animation: scroll-hint-appear 0.8s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 3s both;
}

.scroll-indicator-label {
    font-size: 0.59rem;
    color: rgba(210, 235, 255, 0.56);
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.scroll-indicator-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, rgba(200, 228, 255, 0.52), transparent);
    animation: scroll-line-drop 2.2s cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
    transform-origin: top center;
}

@keyframes scroll-hint-appear {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-line-drop {
    0%   { clip-path: inset(0 0 100% 0); }
    50%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
}

@media (max-width: 760px) {
    .scroll-indicator { display: none; }
}

/* ── Slide counter (01 — 03) ─────────────────────────────────────────────── */
.slider-counter {
    position: absolute;
    top: clamp(1.25rem, 2.8vh, 2rem);
    right: clamp(1.25rem, 2.8vw, 2rem);
    z-index: 20;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 0.72rem;
    color: rgba(210, 235, 255, 0.62);
    pointer-events: none;
    user-select: none;
    text-rendering: geometricPrecision;
    transition: color 0.5s ease;
}

@media (max-width: 760px) {
    .slider-counter { display: none; }
}

/* ── Film grain overlay (body::after) ───────────────────────────────────── */
body::after {
    display: block;
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99997;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
    body::after { display: none; }
}

/* ── Brand selection color ───────────────────────────────────────────────── */
::selection {
    background: rgba(10, 132, 255, 0.38);
    color: #ffffff;
}

/* ── Focus-visible: keyboard navigation ring ─────────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.8);
    outline-offset: 3px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.8);
    outline-offset: 3px;
}

/* ── Reduced-motion: disable all transitions ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .scroll-indicator,
    .scroll-indicator-line,
    .slider-counter {
        animation: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   APPLE-QUALITY INTERACTION POLISH LAYER
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Nav links: animated underline + active section state ────────────────── */
.site-nav a {
    position: relative;
    padding-bottom: 2px;
}

.site-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--insistel-primary, #0a84ff);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Keep nav hover clean: no capsule/background fill */
.site-nav a:hover {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-nav a.is-current {
    color: #ffffff !important;
    opacity: 1 !important;
}

.site-nav a.is-current::after {
    transform: scaleX(1);
    background: rgba(255, 255, 255, 0.6);
}

/* ── Button shimmer sweep on hover ───────────────────────────────────────── */
.button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 55%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.17) 50%,
        transparent 100%
    );
    transform: skewX(-18deg) translateX(-160%);
    pointer-events: none;
    z-index: 1;
}

.button:hover::before {
    animation: btn-shimmer 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes btn-shimmer {
    from { transform: skewX(-18deg) translateX(-160%); }
    to   { transform: skewX(-18deg) translateX(360%); }
}

/* ── Slider initial cursor state ─────────────────────────────────────────── */
.liquid-slider {
    cursor: grab;
}

/* ── Lazy image fade-in (progressive reveal) ─────────────────────────────── */
img.img-ready {
    opacity: 0;
    transition: opacity 0.48s ease;
}

img.img-ready.is-loaded {
    opacity: 1;
}

/* ── Footer: luminous top separator ─────────────────────────────────────── */
.site-footer {
    border-top: 1px solid rgba(10, 132, 255, 0.2) !important;
    box-shadow:
        0 -1px 0 0 rgba(79, 211, 255, 0.07),
        0 -80px 160px rgba(10, 132, 255, 0.04);
}

/* ── Solution modal close button: glassmorphic refinement ────────────────── */
.solution-modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(180, 220, 255, 0.2) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.solution-modal-close:hover {
    background: rgba(180, 220, 255, 0.2) !important;
    border-color: rgba(210, 236, 255, 0.48) !important;
    transform: scale(1.1) !important;
}

.solution-modal-close:active {
    transform: scale(0.92) !important;
}

/* ── Solution modal detail cards: interactive hover state ────────────────── */
.solution-modal-card {
    cursor: pointer;
    transition:
        border-color 0.24s ease,
        background 0.24s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease !important;
}

.solution-modal-card:hover:not(.is-active) {
    border-color: rgba(196, 228, 255, 0.48) !important;
    background: linear-gradient(150deg, rgba(16, 46, 96, 0.7), rgba(11, 32, 64, 0.56)) !important;
    transform: translateY(-2px) !important;
}

.solution-modal-card.is-active {
    border-color: rgba(10, 132, 255, 0.55) !important;
    background: linear-gradient(150deg, rgba(8, 36, 80, 0.9), rgba(6, 26, 60, 0.78)) !important;
    box-shadow:
        0 0 0 1px rgba(10, 132, 255, 0.16),
        0 8px 28px rgba(10, 132, 255, 0.14) !important;
}

/* ── Social pills: icon micro-animation on hover ─────────────────────────── */
.social-pill .material-symbols-rounded {
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-pill:hover .material-symbols-rounded {
    transform: scale(1.2) rotate(-6deg);
}

/* ── Contact list items: slide-right on hover ────────────────────────────── */
.contact-list a {
    transition: color 0.2s ease;
}

.contact-list a:hover {
    color: rgba(190, 225, 255, 1);
    opacity: 1;
}

.contact-list li {
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-list li:hover {
    transform: translateX(4px);
}

/* ── Slide glass: text shadow for legibility over bright backgrounds ─────── */
.slide-glass h1,
.slide-glass h2 {
    filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.32));
}

.slide-glass .hero-text {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.24);
}

/* ── Highlight cards: richer hover lift ──────────────────────────────────── */
.highlight-card-apple {
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease !important;
}

.highlight-card-apple:hover {
    transform: translateY(-7px) scale(1.015) !important;
    box-shadow:
        0 32px 80px rgba(2, 10, 28, 0.7),
        0 0 0 1px rgba(140, 200, 255, 0.11) !important;
}

/* ── Solution link: arrow nudge on panel hover ───────────────────────────── */
.solution-link {
    gap: 0.5rem;
    transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease, gap 0.28s ease !important;
}

.solution-panel:hover .solution-link {
    gap: 0.75rem;
}

/* ── Brand logo hover: brightness lift ───────────────────────────────────── */
.brand-link:hover .custom-logo,
.brand-link:hover .default-logo {
    filter: brightness(1.1) !important;
}

/* ── Scroll indicator: fade out when user scrolls past hero ─────────────── */
.hero.hero-slider-wrap.is-scrolled-past .scroll-indicator {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease !important;
}

/* ── Timeline year buttons: tablist-style role ring ─────────────────────── */
.timeline-year:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.7) !important;
    outline-offset: 3px !important;
}

/* ── Value stack cards: image zoom on hover ──────────────────────────────── */
.value-split-media .media-inner {
    overflow: hidden;
    border-radius: inherit;
}

.value-split-media .media-inner img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-stack-card:hover .value-split-media .media-inner img {
    transform: scale(1.04);
}

/* ── Section eyebrow labels: homogeneous treatment ───────────────────────── */
.values-kicker,
.highlights-eyebrow,
.timeline-kicker {
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    color: rgba(160, 208, 255, 0.82) !important;
}

/* ── Reduced-motion guard for new interactions ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .button::before,
    img.img-ready,
    .contact-list li,
    .social-pill .material-symbols-rounded,
    .highlight-card-apple,
    .solution-modal-card,
    .value-split-media .media-inner img {
        animation: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRODUCT SANS TYPOGRAPHY SYSTEM
   Google-quality type: generous sizes · minimal tracking · clear hierarchy
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base rendering ──────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    letter-spacing: 0;
    line-height: 1.62;
}

p, li, blockquote, figcaption, dd {
    letter-spacing: 0;
    line-height: 1.64;
    font-weight: 400;
}

/* ── Heading hierarchy ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Google Sans Flex', sans-serif;
    line-height: 1.1;
    font-weight: 400;
}

h1 {
    font-size: clamp(2.8rem, 6vw, 6rem);
    line-height: 1.05;
    font-weight: 300;
}

h2 {
    font-size: clamp(2rem, 4.4vw, 4.2rem);
    line-height: 1.1;
    font-weight: 400;
}

h3 {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.2;
    font-weight: 400;
}

h4, h5, h6 {
    letter-spacing: 0;
    line-height: 1.3;
    font-weight: 500;
}

/* ── Hero slideshow: Google display scale ────────────────────────────────── */
.liquid-slide h1,
.liquid-slide h2 {
    font-size: clamp(3.2rem, 7.5vw, 7.5rem) !important;
    font-weight: 300 !important;
    line-height: 1.06 !important;
    max-width: 16ch !important;
}

.liquid-slide .hero-text {
    font-size: clamp(1.1rem, 2vw, 1.42rem) !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

@media (max-width: 760px) {
    .liquid-slide h1,
    .liquid-slide h2 {
        font-size: clamp(2.4rem, 9vw, 4.4rem) !important;
        line-height: 1.08 !important;
    }

    .liquid-slide .hero-text {
        font-size: 1.05rem !important;
    }
}

/* ── Section titles ──────────────────────────────────────────────────────── */
.section-title {
    font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 300 !important;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.site-nav a {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 0.95rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.button {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 600;
}

/* ── Section description copy ────────────────────────────────────────────── */
.section-head p,
.timeline-intro p,
.hero-text {
    letter-spacing: 0;
    line-height: 1.62;
    font-weight: 400;
}

/* ── Eyebrow / kicker labels: unified tight tracking ─────────────────────── */
.values-kicker,
.highlights-eyebrow,
.timeline-kicker,
.error-eyebrow,
.solution-modal-kicker {
    font-weight: 700 !important;
    font-size: 0.72rem !important;
}

/* ── Stat / number figures: tabular alignment ────────────────────────────── */
.stat-number,
.counter,
.value-index-large {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.slider-counter {
    font-family: 'Google Sans Flex', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ── Loader text ─────────────────────────────────────────────────────────── */
.loader-brand {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 700;
}

.loader-label {
    font-weight: 400;
}

/* ── Inner page titles ───────────────────────────────────────────────────── */
.inner-page-title {
    font-weight: 300 !important;
    line-height: 1.08 !important;
}

/* ── Card headings ───────────────────────────────────────────────────────── */
.highlight-card-apple h3,
.solution-title,
.value-copy-large,
.timeline-card h3,
.scroll-text-item h3 {
    font-weight: 500;
    line-height: 1.15;
}

/* ── Interstitial spectacle text ─────────────────────────────────────────── */
.spectacle-title {
    font-weight: 300 !important;
    line-height: 1.1 !important;
}

/* ── Footer text ─────────────────────────────────────────────────────────── */
.site-footer h3,
.site-footer h4 {
    font-weight: 500;
}

.footer-bottom small {
    letter-spacing: 0;
    font-weight: 400;
}

/* ── Mobile: reduce tracking at smaller viewport ─────────────────────────── */
@media (max-width: 600px) {
    .section-title {
    }

    h1 {
    }

    h2 {
    }
}

/* ── Highlights intro slide: prevent title cutoff ────────────────────────── */
.highlight-intro-slide {
    min-width: min(580px, 88vw);
    flex-shrink: 0;
}

.highlight-intro-content .section-title,
.hero-metrics-section .highlights-title {
    max-width: none !important;
    white-space: normal !important;
}

/* ── Section background refresh: solid palette, no gradients ───────────── */
:root {
    --insistel-primary: #3f7dff;
    --insistel-secondary: #2fc2ff;
    --insistel-accent: #7a5cff;
    --insistel-page-bg-solid: #07162a;
    --insistel-section-hero: #3293ff;
    --insistel-section-highlights: #1d8fff;
    --insistel-section-about: #5a4dff;
    --insistel-section-differentiators: #224cff;
    --insistel-section-values: #6c38ff;
    --insistel-section-solutions: #6f1dff;
    --insistel-section-catalog: #7a33ff;
    --insistel-section-brands: #2b7cff;
    --insistel-section-cases: #5a2dff;
    --insistel-section-conversion: #1698ff;
    --insistel-section-testimonials: #7f3bff;
    --insistel-section-brochure: #356bff;
    --insistel-section-cta: #6d46ff;
    --insistel-section-spectacle: #101f68;
}

body {
    background: var(--insistel-page-bg-solid);
}

body::before {
    content: none;
}

.interstitial-spectacle {
    background: var(--insistel-section-spectacle);
}

.hero.hero-slider-wrap,
.hero.hero-slider-wrap .hero-cinematic-shell,
.hero.hero-slider-wrap .liquid-slider {
    background: var(--insistel-section-hero);
}

.hero.hero-slider-wrap .liquid-slider::before {
    content: none;
}

.hero.hero-slider-wrap .hero-cinematic-shell::before {
    background: rgba(4, 13, 24, 0.34);
}

.hero.hero-slider-wrap .hero-cinematic-shell::after {
    content: none;
}

.highlights-scroll-container,
.section-highlights-apple,
.hero-metrics-section {
    background: var(--insistel-section-highlights);
}

.hero-metrics-section::after {
    content: none;
}

#sobre-nosotros.section-about {
    background: var(--insistel-section-about);
}

#sobre-nosotros .about-timeline-overlay {
    background: rgba(9, 10, 38, 0.2);
}

#diferenciales.section-differentiators,
#diferenciales .sticky-viewport {
    background: var(--insistel-section-differentiators);
}

.section-values-stack,
.values-stack-bg {
    background: var(--insistel-section-values);
}

.solutions-scroll-container,
.section-values-stack + .solutions-scroll-container,
#soluciones.section-solutions {
    background: var(--insistel-section-solutions);
}

.section-catalog.section-catalog-immersive {
    background: var(--insistel-section-catalog);
}

.section-catalog.section-catalog-immersive::before {
    content: none;
}

.section-catalog.section-catalog-immersive .catalog-bg-vignette {
    background: rgba(15, 10, 52, 0.18);
}

.section-brands.section-brands-apple {
    background: var(--insistel-section-brands);
}

.section-cases.section-cases-immersive {
    background: var(--insistel-section-cases);
}

.section-cases.section-cases-immersive .cases-bg-overlay {
    background: rgba(11, 8, 44, 0.2);
}

.section-conversion {
    background: var(--insistel-section-conversion);
}

.section-testimonials {
    background: var(--insistel-section-testimonials);
}

.section-brochure {
    background: var(--insistel-section-brochure);
}

.section-cta {
    background: var(--insistel-section-cta);
}

.section-about::before,
.section-values::before,
.section-cases::before,
.section-testimonials::before,
.section-brochure::before {
    content: none;
}

/* ── Typography refresh: Google Sans Flex system ────────────────────────── */
:root {
    --insistel-font-family: 'Google Sans Flex', sans-serif;
    --insistel-letter-spacing: 0.18px;
    --insistel-title-letter-spacing: -0.065em;
    --insistel-title-weight: 430;
    --insistel-text-weight: 400;
    --insistel-title-line-height: 1.06;
    --insistel-text-line-height: 1.48;
}

body,
button,
input,
textarea,
select {
    font-family: var(--insistel-font-family);
    font-optical-sizing: auto;
    font-variation-settings: "wght" 400;
    letter-spacing: var(--insistel-letter-spacing);
    font-weight: var(--insistel-text-weight);
    line-height: var(--insistel-text-line-height);
}

p,
li,
a,
label,
small,
blockquote,
cite,
.hero-text,
.section-head p,
.timeline-intro p,
.scroll-text-item p,
.highlight-card-apple p,
.highlight-text-large,
.catalog-copy p,
.case-slide-copy p,
.values-lead,
.testimonial-card p,
.brochure-card-body p,
.conversion-card-body p,
.section-title + p {
    letter-spacing: var(--insistel-letter-spacing) !important;
    font-weight: var(--insistel-text-weight) !important;
    line-height: var(--insistel-text-line-height) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.spectacle-title,
.hero h1,
.hero h2,
.liquid-slide h1,
.liquid-slide h2,
.highlight-card-apple h3,
.highlight-title-large,
.solution-title,
.value-copy-large,
.timeline-card h3,
.scroll-text-item h3,
.catalog-copy h3,
.case-slide-copy h3,
.brochure-card-body h2,
.conversion-card-body h2,
.section-cta h2 {
    font-family: var(--insistel-font-family) !important;
    font-variation-settings: "wght" var(--insistel-title-weight);
    font-weight: var(--insistel-title-weight) !important;
    letter-spacing: var(--insistel-title-letter-spacing) !important;
    line-height: var(--insistel-title-line-height) !important;
}

.button,
.button-alt,
.button-whatsapp,
.site-nav a,
.slider-counter,
.hero-badge,
.timeline-year,
.timeline-scene-label,
.values-kicker,
.highlights-eyebrow,
.timeline-kicker,
.highlight-card-kicker,
.catalog-kicker,
.case-slide-kicker,
.solution-modal-kicker,
.footer-bottom small,
.loader-brand,
.loader-label {
    font-family: var(--insistel-font-family) !important;
    font-variation-settings: "wght" 400;
    letter-spacing: var(--insistel-letter-spacing) !important;
    font-weight: var(--insistel-text-weight) !important;
}

/* ── Visual refinement pass: hero, highlights, spacing ──────────────────── */
:root {
    --insistel-letter-spacing: 0.06px;
    --insistel-title-letter-spacing: -0.05em;
}

.section {
    padding: clamp(3.2rem, 6vw, 5.4rem) 0;
}

/* ── Consult Form Section ──────────────────────────────────────────────── */
.section-consult-form {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 12% 16%, rgba(78, 152, 255, 0.24), rgba(78, 152, 255, 0) 28%),
        radial-gradient(circle at 84% 14%, rgba(90, 200, 250, 0.16), rgba(90, 200, 250, 0) 24%),
        linear-gradient(180deg, #08111f 0%, #0a1527 58%, #050a13 100%);
}

.section-consult-form::before {
    content: "";
    position: absolute;
    inset: auto -12% -24% auto;
    width: 36rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.18), rgba(0, 122, 255, 0));
    filter: blur(18px);
    pointer-events: none;
}

.consult-form-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.15rem, 2.5vw, 1.8rem);
    align-items: start;
}

.consult-form-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: stretch;
}

.consult-form-copy {
    display: grid;
    gap: 0.95rem;
    align-content: start;
    padding: clamp(0.6rem, 1.2vw, 1rem) 0;
}

.consult-form-copy .section-title {
    max-width: 11ch;
    margin-bottom: 0;
    color: #f8fbff;
    font-size: clamp(2rem, 4.6vw, 4.25rem);
}

.consult-form-copy > p {
    max-width: 60ch;
    margin: 0;
    color: rgba(222, 234, 247, 0.78);
    font-size: 1.02rem;
}

.consult-form-badge {
    width: fit-content;
    background: rgba(255, 255, 255, 0.08);
    color: #f8fbff;
    border-color: rgba(186, 218, 255, 0.12);
}

.consult-form-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.8rem;
}

.consult-form-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(236, 244, 255, 0.88);
    font-size: 0.98rem;
}

.consult-form-benefits .material-symbols-rounded {
    font-size: 1.15rem;
    color: #8fd0ff;
}

.consult-form-contact-panel {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.consult-form-contact-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(185, 220, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.consult-form-contact-card .material-symbols-rounded {
    color: #8fd0ff;
    font-size: 1.2rem;
    margin-top: 0.1rem;
}

.consult-form-contact-card strong {
    display: block;
    color: #f8fbff;
    font-size: 0.95rem;
}

.consult-form-contact-card p {
    margin: 0.2rem 0 0;
    color: rgba(222, 234, 247, 0.74);
    font-size: 0.92rem;
}

.consult-form-card {
    position: relative;
    padding: clamp(1.1rem, 1.7vw, 1.45rem);
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 12%, rgba(90, 200, 250, 0.16), rgba(90, 200, 250, 0) 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.92));
    border: 1px solid rgba(188, 216, 246, 0.58);
    box-shadow:
        0 28px 60px rgba(1, 7, 18, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px) saturate(132%);
    -webkit-backdrop-filter: blur(24px) saturate(132%);
}

.consult-form {
    display: grid;
    gap: 1.1rem;
}

.consult-form-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1rem;
}

.consult-form-column {
    display: grid;
    gap: 1rem;
}

.consult-panel {
    display: grid;
    gap: 0.95rem;
    padding: 1.05rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(184, 209, 236, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.consult-panel--soft {
    background: rgba(248, 252, 255, 0.58);
}

.consult-panel-head {
    display: grid;
    gap: 0.25rem;
}

.consult-panel-kicker {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5d7089;
    font-weight: 700;
}

.consult-panel-head h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.08;
    color: #102033;
}

.section-consult-form .consult-form-card,
.section-consult-form .consult-panel,
.section-consult-form .consult-panel *,
.section-consult-form .consult-field,
.section-consult-form .consult-field *,
.section-consult-form .consult-options,
.section-consult-form .consult-options *,
.section-consult-form .consult-choice-card span,
.section-consult-form .consult-submit-button.button-alt {
    -webkit-text-fill-color: initial;
}

.consult-form-grid {
    display: grid;
    gap: 0.9rem;
}

.consult-form-grid--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consult-field {
    display: grid;
    gap: 0.45rem;
}

.consult-field--wide {
    grid-column: 1 / -1;
}

.consult-field span,
.consult-options legend {
    font-size: 0.84rem;
    color: #445164;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.consult-field input,
.consult-field textarea {
    width: 100%;
    border: 1px solid rgba(149, 172, 198, 0.28);
    border-radius: 18px;
    padding: 0.92rem 1rem;
    background: rgba(255, 255, 255, 0.72);
    color: #111827;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 20px rgba(15, 23, 42, 0.04);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.consult-field textarea {
    resize: vertical;
    min-height: 130px;
}

.consult-field input::placeholder,
.consult-field textarea::placeholder {
    color: #7b8899;
}

.consult-field input:focus,
.consult-field textarea:focus {
    outline: none;
    border-color: rgba(0, 122, 255, 0.45);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0 0 5px rgba(0, 122, 255, 0.1), 0 18px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.consult-options {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.62rem;
}

.consult-choice-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.consult-choice-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consult-choice-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.consult-choice-grid--solutions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.consult-choice-grid--budget {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consult-choice-card {
    position: relative;
    display: block;
}

.consult-choice-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

.consult-choice-card span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0.85rem 0.9rem;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(149, 172, 198, 0.24);
    background: rgba(255, 255, 255, 0.56);
    color: #253244;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.consult-choice-card--stacked span {
    justify-content: flex-start;
    text-align: left;
}

.consult-choice-card--compact span {
    min-height: 52px;
    padding: 0.78rem 0.85rem;
    font-size: 0.96rem;
}

.consult-choice-card:hover span {
    transform: translateY(-1px);
    border-color: rgba(0, 122, 255, 0.24);
    background: rgba(255, 255, 255, 0.74);
}

.consult-choice-card input:checked + span {
    border-color: rgba(0, 122, 255, 0.42);
    background: linear-gradient(180deg, rgba(235, 245, 255, 0.98), rgba(219, 237, 255, 0.92));
    color: #0f3c78;
    box-shadow:
        0 14px 28px rgba(0, 122, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.consult-form-submit-row {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.15rem;
}

.consult-submit-button {
    justify-content: center;
    min-height: 52px;
    border-radius: 18px;
    font-size: 0.98rem;
    padding-inline: 1rem;
}

.consult-submit-button.button-alt {
    background: rgba(255, 255, 255, 0.7);
    color: #102033;
    -webkit-text-fill-color: #102033 !important;
    border: 1px solid rgba(149, 172, 198, 0.24);
    box-shadow: none;
}

.consult-submit-button.button-alt:hover {
    background: rgba(255, 255, 255, 0.94);
    color: #102033;
    -webkit-text-fill-color: #102033 !important;
}

.consult-form-disclaimer {
    margin: 0;
    color: #5c6778;
    font-size: 0.88rem;
    text-align: center;
    width: 100%;
    max-width: 62ch;
    justify-self: center;
    margin-inline: auto;
    line-height: 1.45;
}

.consult-form-inline-groups {
    display: grid;
    gap: 1rem;
}

@media (max-width: 1100px) {
    .consult-form-header,
    .consult-form-main-grid {
        grid-template-columns: 1fr;
    }

    .consult-form-contact-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .consult-form-copy .section-title {
        max-width: 14ch;
    }

    .consult-choice-grid,
    .consult-choice-grid--solutions,
    .consult-choice-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .section-consult-form {
        padding-top: 2.4rem;
        padding-bottom: 2.8rem;
    }

    .consult-form-shell {
        gap: 1rem;
    }

    .consult-form-header {
        gap: 0.9rem;
    }

    .consult-form-copy {
        gap: 0.8rem;
        padding: 0;
    }

    .consult-form-copy > p {
        font-size: 0.98rem;
        max-width: none;
    }

    .consult-form-benefits {
        gap: 0.7rem;
    }

    .consult-form-benefits li {
        align-items: flex-start;
        font-size: 0.94rem;
        line-height: 1.4;
    }

    .consult-form-contact-panel {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .consult-form-contact-card {
        padding: 0.92rem 0.95rem;
        border-radius: 18px;
    }

    .consult-form-contact-card p {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .consult-form-card {
        border-radius: 26px;
        padding: 0.9rem;
    }

    .consult-form {
        gap: 0.9rem;
    }

    .consult-panel {
        padding: 0.85rem;
        border-radius: 20px;
        gap: 0.75rem;
    }

    .consult-panel-head {
        gap: 0.18rem;
    }

    .consult-panel-head h3 {
        font-size: 1.02rem;
    }

    .consult-panel-kicker {
        font-size: 0.68rem;
    }

    .consult-form-grid--contact,
    .consult-choice-grid,
    .consult-choice-grid--two,
    .consult-choice-grid--three,
    .consult-choice-grid--solutions,
    .consult-choice-grid--budget,
    .consult-form-submit-row {
        grid-template-columns: 1fr;
    }

    .consult-field {
        gap: 0.38rem;
    }

    .consult-field span,
    .consult-options legend {
        font-size: 0.8rem;
    }

    .consult-field input,
    .consult-field textarea {
        border-radius: 16px;
        padding: 0.88rem 0.95rem;
        font-size: 0.96rem;
    }

    .consult-field textarea {
        min-height: 124px;
    }

    .consult-options {
        gap: 0.55rem;
    }

    .consult-choice-card span,
    .consult-choice-card--compact span {
        min-height: 50px;
        padding: 0.78rem 0.82rem;
        border-radius: 16px;
        font-size: 0.95rem;
        line-height: 1.28;
    }

    .consult-choice-card--stacked span {
        justify-content: center;
        text-align: center;
    }

    .consult-form-inline-groups {
        gap: 0.85rem;
    }

    .consult-submit-button {
        min-height: 50px;
        border-radius: 16px;
        font-size: 0.95rem;
    }

    .consult-form-disclaimer {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .consult-form-copy .section-title {
        font-size: clamp(1.8rem, 9.2vw, 3rem);
    }
}

@media (max-width: 420px) {
    .consult-form-copy .section-title {
        max-width: 10ch;
        font-size: clamp(1.7rem, 9.5vw, 2.45rem);
    }

    .consult-form-copy > p {
        font-size: 0.94rem;
    }

    .consult-form-card {
        padding: 0.8rem;
        border-radius: 22px;
    }

    .consult-panel {
        padding: 0.78rem;
        border-radius: 18px;
    }

    .consult-choice-card span,
    .consult-choice-card--compact span {
        min-height: 48px;
        font-size: 0.92rem;
    }
}

.section-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.scroll-sequence {
    margin-top: 0;
}

#diferenciales .sticky-viewport {
    position: sticky;
    top: 0;
    align-items: flex-start;
    padding-top: clamp(5.8rem, 8vw, 6.8rem);
    height: 100vh;
    min-height: 680px;
    padding-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
    background: transparent !important;
}

#diferenciales.section-differentiators {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #0a1430 !important;
}

#diferenciales.section-differentiators::before {
    content: none;
}

#diferenciales.section-differentiators::after {
    content: none;
}

#diferenciales .scroll-sequence-grid {
    align-items: start;
    gap: clamp(1.8rem, 3.4vw, 2.8rem);
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    padding-top: 0;
    height: 100%;
    position: relative;
    z-index: 1;
}

#diferenciales .scroll-headers {
    justify-content: flex-start;
    gap: clamp(1rem, 1.8vw, 1.25rem);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#diferenciales .section-head {
    margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}

#diferenciales .section-head .section-title {
    max-width: 9ch !important;
    font-size: clamp(2.65rem, 4.55vw, 4.5rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.04em !important;
    animation: none;
}

#diferenciales .section-head p {
    max-width: 34ch !important;
    color: rgba(220, 231, 247, 0.78) !important;
}

#diferenciales .scroll-text-track {
    margin-top: .4rem;
    height: clamp(260px, 34vh, 360px);
    min-height: 260px;
}

#diferenciales .scroll-text-item {
    max-width: 34rem;
}

#diferenciales .scroll-text-item h3 {
    max-width: 10ch;
    margin: 0 0 .7rem;
    font-size: clamp(2.1rem, 3.25vw, 3.1rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance;
    animation: none;
}

#diferenciales .scroll-text-item p {
    max-width: 38ch;
    color: rgba(207, 220, 240, 0.68) !important;
}

#diferenciales .scroll-media-track {
    height: min(62vh, 720px);
    border-radius: 34px;
    border: 1px solid rgba(171, 203, 255, 0.16);
    background: #08101d;
    box-shadow: 0 28px 72px rgba(2, 8, 20, 0.42);
}

#diferenciales .scroll-media-track::before {
    content: none;
}

#diferenciales .scroll-media-item {
    filter: blur(calc(clamp(0, var(--local-abs) * 5, 10) * 1px));
}

#diferenciales .scroll-media-item img {
    transform: scale(1.01);
    filter: saturate(1.02) contrast(1.02);
}

#diferenciales .glass-overlay {
    background: linear-gradient(180deg, rgba(6, 12, 22, 0.02) 0%, rgba(6, 12, 22, 0.08) 58%, rgba(6, 12, 22, 0.24) 100%);
}

#diferenciales .scroll-media-item::after {
    content: none;
}

#diferenciales.scroll-sequence {
    height: calc((var(--total-items, 4) + 1) * 100vh);
}

/* ── Differentiators redesign: premium slideshow over animated bg ──────── */
#diferenciales.section-differentiators {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--insistel-section-differentiators) !important;
    border-top: 1px solid rgba(180, 220, 255, 0.14);
    border-bottom: 1px solid rgba(170, 210, 255, 0.12);
}

#diferenciales .differentiators-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(1.35rem, 2.4vw, 1.9rem);
    align-content: start;
}

#diferenciales .differentiators-head {
    min-height: clamp(220px, 28vh, 280px);
    margin-bottom: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: min(100%, 760px) !important;
    margin-inline: auto;
}

#diferenciales .differentiators-head .section-title {
    max-width: 9.4ch !important;
    width: 100%;
    margin: 0 auto !important;
    font-size: clamp(2.8rem, 5vw, 5rem) !important;
    line-height: .94 !important;
    letter-spacing: -0.05em !important;
    animation: none;
    text-align: center !important;
}

#diferenciales .differentiators-head p {
    max-width: 40ch !important;
    width: 100%;
    margin: 0 auto !important;
    color: rgba(226, 238, 255, 0.84) !important;
    text-align: center !important;
}

#diferenciales .differentiator-slide-kicker {
    display: none;
}

#diferenciales .differentiators-stage {
    display: grid;
    gap: .9rem;
}

#diferenciales .differentiators-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(196, 228, 255, 0.28);
    background: rgba(8, 25, 49, 0.56);
    box-shadow: 0 34px 76px rgba(1, 7, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#diferenciales .differentiators-track {
    display: flex;
    transition: transform .95s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

#diferenciales .differentiator-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: stretch;
    opacity: .54;
    transform: scale(.985);
    transition: opacity .48s ease, transform .58s ease;
}

#diferenciales .differentiator-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

#diferenciales .differentiator-slide-copy {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: start;
    gap: .65rem;
    padding: clamp(1.3rem, 2.8vw, 2.3rem);
    min-height: clamp(380px, 56vw, 620px);
    background: linear-gradient(165deg, rgba(8, 24, 47, 0.78), rgba(5, 15, 32, 0.82));
}

#diferenciales .differentiator-slide-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 32%, transparent 72%, rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

#diferenciales .differentiator-slide-kicker {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .82rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(203, 229, 255, 0.72);
}

#diferenciales .differentiator-slide-copy h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 8.4ch;
    font-size: clamp(2.5rem, 4.8vw, 5rem);
    line-height: .94;
    letter-spacing: -0.055em;
    color: #f8fbff;
    text-wrap: balance;
    align-self: center;
}

#diferenciales .differentiator-slide-copy p:last-child {
    position: relative;
    z-index: 1;
    margin: .1rem 0 0;
    max-width: 30ch;
    color: rgba(225, 238, 255, 0.82);
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.42;
    align-self: center;
}

#diferenciales .differentiator-slide-media {
    position: relative;
    margin: 0;
    min-height: clamp(380px, 56vw, 620px);
    overflow: hidden;
}

#diferenciales .differentiator-slide-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 9, 22, 0.02) 24%, rgba(3, 9, 22, 0.28) 100%),
        radial-gradient(100% 80% at 18% -6%, rgba(192, 233, 255, 0.22), transparent 62%);
}

#diferenciales .differentiator-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.16) 44%, transparent 66%);
    transform: translateX(-135%);
    transition: transform 1.15s cubic-bezier(.19, 1, .22, 1);
    pointer-events: none;
}

#diferenciales .differentiator-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.08) contrast(1.05);
    transition: transform 1.15s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}

#diferenciales .differentiators-controls {
    width: fit-content;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: .72rem;
}

#diferenciales .differentiators-controls .slider-nav {
    background: rgba(8, 24, 46, 0.42);
    border-color: rgba(210, 236, 255, 0.38);
}

#diferenciales .differentiators-controls .slider-nav:hover {
    background: rgba(12, 32, 60, 0.56);
}

#diferenciales .differentiators-dots {
    background: rgba(7, 21, 41, 0.38);
    border-color: rgba(196, 230, 255, 0.28);
}

@media (hover: hover) and (pointer: fine) {
    #diferenciales .differentiator-slide.is-active:hover .differentiator-slide-media img {
        transform: scale(1.065);
        filter: saturate(1.12) contrast(1.06);
    }

    #diferenciales .differentiator-slide.is-active:hover .differentiator-slide-media::after {
        transform: translateX(135%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #diferenciales .differentiators-track,
    #diferenciales .differentiator-slide,
    #diferenciales .differentiator-slide-media::after,
    #diferenciales .differentiator-slide-media img {
        transition: none !important;
    }
}

@media (max-width: 980px) {
    #diferenciales .differentiator-slide {
        grid-template-columns: 1fr;
    }

    #diferenciales .differentiator-slide-copy,
    #diferenciales .differentiator-slide-media {
        min-height: auto;
    }

    #diferenciales .differentiator-slide-media {
        min-height: 320px;
    }

    #diferenciales .differentiator-slide-copy h3 {
        max-width: 10ch;
    }
}

@media (max-width: 680px) {
    #diferenciales .differentiators-head .section-title {
        max-width: 9.2ch !important;
        font-size: clamp(2.35rem, 10vw, 3.5rem) !important;
    }

    #diferenciales .differentiators-viewport {
        border-radius: 26px;
    }

    #diferenciales .differentiator-slide-copy {
        padding: 1rem .95rem 1.1rem;
        gap: .5rem;
    }

    #diferenciales .differentiator-slide-copy h3 {
        font-size: clamp(2rem, 8.4vw, 3rem);
    }

    #diferenciales .differentiator-slide-copy p:last-child {
        max-width: 100%;
        font-size: .95rem;
    }

    #diferenciales .differentiator-slide-media {
        min-height: 260px;
    }
}

.hero.hero-slider-wrap .liquid-slider {
    background: var(--insistel-section-hero) !important;
    transition: background-color 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.hero.hero-slider-wrap::before,
.hero.hero-slider-wrap::after,
.hero.hero-slider-wrap .hero-cinematic-shell::before,
.hero.hero-slider-wrap .hero-cinematic-shell::after {
    content: none !important;
    background: none !important;
}

.hero.hero-slider-wrap .slider-webgl-canvas {
    z-index: 2 !important;
    opacity: .62 !important;
    mix-blend-mode: screen;
    filter: saturate(1.06) brightness(1.02) contrast(1.04);
}

.hero.hero-slider-wrap .slides-viewport {
    z-index: auto !important;
}

.hero.hero-slider-wrap .liquid-slide {
    isolation: isolate;
}

.hero.hero-slider-wrap .liquid-slide .slide-media {
    z-index: 1 !important;
    background-color: var(--insistel-section-hero) !important;
    background-image: var(--slide-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: .7 !important;
    filter: saturate(1.01) contrast(1.02) brightness(.92) !important;
}

.hero.hero-slider-wrap .liquid-slide.is-active .slide-media {
    opacity: .68 !important;
}

.hero.hero-slider-wrap .liquid-slide:not(.is-active) .slide-media {
    opacity: .4 !important;
}

.hero.hero-slider-wrap .liquid-slider.is-chromium .slider-webgl-canvas {
    opacity: .3 !important;
    mix-blend-mode: normal !important;
    filter: saturate(1.02) brightness(1) contrast(1.01) !important;
}

.hero.hero-slider-wrap .liquid-slider.is-chromium .liquid-slide .slide-media {
    opacity: .9 !important;
    filter: saturate(1.02) contrast(1.01) brightness(.98) !important;
}

.hero.hero-slider-wrap .liquid-slider.is-chromium .liquid-slide.is-active .slide-media {
    opacity: 1 !important;
}

.hero.hero-slider-wrap .liquid-slider.is-chromium .liquid-slide:not(.is-active) .slide-media {
    opacity: .72 !important;
}

.hero.hero-slider-wrap .liquid-slide .slide-glass,
.hero.hero-slider-wrap .slider-controls,
.hero.hero-slider-wrap .slider-counter {
    z-index: 3 !important;
}

.hero.hero-slider-wrap .liquid-slide .slide-media::before,
.hero.hero-slider-wrap .liquid-slide .slide-media::after,
.hero.hero-slider-wrap .liquid-slide .media-grid {
    display: none !important;
    background: none !important;
}

.highlights-scroll-container {
    height: 360vh;
    overflow-x: clip;
}

.section-highlights-apple {
    align-items: stretch;
    overflow-x: clip;
}

.highlights-track-viewport {
    height: 100%;
    align-items: center;
    width: 100%;
    overflow-x: clip;
}

.highlights-track {
    align-items: stretch;
    gap: clamp(.85rem, 1.2vw, 1.25rem);
    padding: 0 clamp(1rem, 4vw, 5rem);
    --highlights-panel-height: clamp(420px, 68vh, 700px);
    box-sizing: border-box;
    max-width: 100%;
}

.highlight-intro-slide {
    min-width: min(clamp(700px, 56vw, 860px), calc(100vw - clamp(2rem, 8vw, 10rem)));
    max-width: calc(100vw - clamp(2rem, 8vw, 10rem));
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: auto;
    min-height: var(--highlights-panel-height);
    padding: 0;
}

.highlight-intro-content {
    position: relative;
    width: min(100%, 820px);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: grid;
    align-content: space-between;
    gap: clamp(1.4rem, 2.4vw, 2.2rem);
    padding: clamp(2.35rem, 4vw, 3.2rem) clamp(2.6rem, 4.6vw, 3.8rem);
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(193, 224, 255, 0.18);
    box-shadow: 0 28px 70px rgba(2, 10, 24, 0.3);
    backdrop-filter: blur(18px) saturate(126%);
    -webkit-backdrop-filter: blur(18px) saturate(126%);
}

.highlight-intro-content,
.highlight-intro-content * {
    min-width: 0;
}

.highlight-intro-content .highlights-eyebrow {
    margin: 0 0 .95rem;
    font-size: clamp(.96rem, 1vw, 1.08rem) !important;
    color: rgba(219, 238, 255, 0.88);
}

.highlight-intro-content .section-title,
.hero-metrics-section .highlights-title {
    max-width: 10.2ch !important;
    font-size: clamp(3rem, 4.45vw, 4.9rem) !important;
    line-height: .97 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
}

.highlight-intro-content .highlights-copy,
.hero-metrics-section .highlights-copy {
    max-width: 34ch;
    font-size: clamp(1.04rem, 1.24vw, 1.16rem) !important;
    line-height: 1.46 !important;
    color: rgba(229, 242, 255, 0.84);
}

.highlight-card-apple {
    width: min(clamp(360px, 68vw, 920px), calc(100vw - clamp(2rem, 8vw, 10rem)));
    max-width: calc(100vw - clamp(2rem, 8vw, 10rem));
    flex: 0 0 auto;
    height: auto;
    min-height: var(--highlights-panel-height);
    border-radius: 36px;
    border-color: rgba(194, 226, 255, 0.16);
    box-shadow: 0 30px 74px rgba(2, 10, 24, 0.34);
}

.section-highlights-apple .reveal,
.section-highlights-apple .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

.highlight-card-content {
    padding: clamp(1.75rem, 3.2vw, 2.75rem);
}

.highlight-card-apple h3 {
    font-size: clamp(1.85rem, 3vw, 2.75rem);
}

@media (max-width: 980px) {
    .highlights-scroll-container {
        height: 320vh;
    }

    .highlight-intro-slide {
        min-width: min(100%, calc(100vw - 2.4rem));
        max-width: calc(100vw - 2.4rem);
    }

    .highlights-track {
        --highlights-panel-height: clamp(390px, 62vh, 560px);
        padding: 0 clamp(0.8rem, 3vw, 1.2rem);
    }

    .highlight-card-apple {
        width: min(100%, calc(100vw - 2.4rem));
        max-width: calc(100vw - 2.4rem);
    }

    .highlight-intro-content .section-title,
    .hero-metrics-section .highlights-title {
        max-width: 100% !important;
        font-size: clamp(2.2rem, 6vw, 3.5rem) !important;
    }
}

@media (max-width: 768px) {
    .section {
        padding: clamp(2.8rem, 8vw, 4rem) 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .section-title,
    .spectacle-title,
    .hero h1,
    .hero h2,
    .liquid-slide h1,
    .liquid-slide h2,
    .highlight-card-apple h3,
    .highlight-title-large,
    .solution-title,
    .value-copy-large,
    .timeline-card h3,
    .scroll-text-item h3,
    .catalog-copy h3,
    .case-slide-copy h3,
    .brochure-card-body h2,
    .conversion-card-body h2,
    .section-cta h2 {
        letter-spacing: -0.03em !important;
    }

    #diferenciales .sticky-viewport {
        padding-top: 1.4rem;
        height: auto;
        min-height: 0;
        padding-bottom: 0;
    }

    .highlights-scroll-container {
        height: 300vh;
    }

    .highlights-track {
        padding: 0 var(--insistel-mobile-gutter, 0.8rem);
    }

    .highlight-intro-slide {
        min-width: calc(100vw - (var(--insistel-mobile-gutter, 0.8rem) * 2));
        max-width: calc(100vw - (var(--insistel-mobile-gutter, 0.8rem) * 2));
        height: auto;
        min-height: 0;
    }

    .highlight-intro-content {
        height: auto;
        min-height: auto;
        gap: 1.2rem;
        padding: 1.8rem 1.5rem 1.9rem;
        border-radius: 28px;
    }

    .highlight-intro-content .section-title,
    .hero-metrics-section .highlights-title {
        max-width: 100% !important;
        font-size: clamp(1.95rem, 8.2vw, 3rem) !important;
    }

    .highlight-card-apple {
        width: calc(100vw - (var(--insistel-mobile-gutter, 0.8rem) * 2));
        max-width: calc(100vw - (var(--insistel-mobile-gutter, 0.8rem) * 2));
        height: auto;
        min-height: clamp(400px, 70vh, 560px);
    }

    #diferenciales .scroll-text-item h3 {
        max-width: 10ch;
        font-size: clamp(2rem, 7vw, 2.8rem) !important;
        line-height: 1.01 !important;
    }

    #diferenciales .scroll-text-track,
    #diferenciales .scroll-media-track {
        height: auto;
        min-height: 0;
    }

    #diferenciales.scroll-sequence {
        height: auto;
    }
}

/* ── Typography consistency layer ───────────────────────────────────────── */
:root {
    --insistel-body-letter-spacing: 0.04px;
    --insistel-label-letter-spacing: 0.02px;
    --insistel-title-letter-spacing: -0.038em;
    --insistel-card-title-letter-spacing: -0.028em;
    --insistel-title-weight: 425;
    --insistel-card-title-weight: 420;
    --insistel-label-weight: 500;
    --insistel-title-line-height-tight: 1.03;
    --insistel-card-title-line-height: 1.08;
    --insistel-body-line-height: 1.42;
}

body,
p,
li,
a,
label,
small,
blockquote,
cite,
.hero-text,
.section-head p,
.timeline-intro p,
.scroll-text-item p,
.highlight-card-apple p,
.highlight-text-large,
.catalog-copy p,
.case-slide-copy p,
.values-lead,
.testimonial-card p,
.brochure-card-body p,
.conversion-card-body p,
.solution-desc,
.audience-lead {
    font-variation-settings: "wght" 400 !important;
    font-weight: 400 !important;
    letter-spacing: var(--insistel-body-letter-spacing) !important;
    line-height: var(--insistel-body-line-height) !important;
}

.section-head,
.values-stack-intro .section-head,
.solutions-intro .section-head,
.catalog-head,
.cases-head {
    display: grid;
    gap: clamp(.7rem, 1.4vw, 1rem);
}

.values-stack-intro .section-head,
.solutions-intro .section-head,
.catalog-head,
.cases-head {
    justify-items: center;
    text-align: center;
}

.section-title,
.spectacle-title,
.values-stack-intro .section-title,
.solutions-intro .section-title,
.catalog-head .section-title,
.cases-head .section-title,
.section-testimonials .section-title,
.brochure-card-body .section-title,
.conversion-card-body .section-title {
    font-variation-settings: "wght" var(--insistel-title-weight) !important;
    font-weight: var(--insistel-title-weight) !important;
    letter-spacing: var(--insistel-title-letter-spacing) !important;
    line-height: var(--insistel-title-line-height-tight) !important;
    text-wrap: balance;
}

.values-stack-intro .section-title,
.solutions-intro .section-title,
.catalog-head .section-title,
.cases-head .section-title {
    max-width: 11ch !important;
    margin-inline: auto;
}

.values-stack-intro .section-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.values-stack-intro .values-kicker,
.highlights-eyebrow,
.timeline-kicker,
.highlight-card-kicker,
.catalog-kicker,
.case-slide-kicker,
.solution-modal-kicker,
.hero-badge,
.site-nav a,
.timeline-year,
.solution-link,
.button,
.button-alt,
.button-whatsapp {
    font-family: var(--insistel-font-family) !important;
    font-variation-settings: "wght" var(--insistel-label-weight) !important;
    font-weight: var(--insistel-label-weight) !important;
    letter-spacing: var(--insistel-label-letter-spacing) !important;
    line-height: 1.2 !important;
}

.values-stack-intro .values-kicker,
.highlights-eyebrow,
.timeline-kicker {
    font-size: clamp(.82rem, .85vw, .92rem) !important;
    color: rgba(219, 236, 255, 0.84) !important;
}

.solution-title,
.catalog-copy h3,
.case-slide-copy h3,
.highlight-card-apple h3,
.value-copy-large,
.timeline-card h3,
.scroll-text-item h3,
.brochure-card-body h2,
.conversion-card-body h2 {
    font-variation-settings: "wght" var(--insistel-card-title-weight) !important;
    font-weight: var(--insistel-card-title-weight) !important;
    letter-spacing: var(--insistel-card-title-letter-spacing) !important;
    line-height: var(--insistel-card-title-line-height) !important;
    text-wrap: balance;
}

.solutions-intro .section-title {
    font-size: clamp(2.9rem, 5.4vw, 5.1rem) !important;
}

.values-stack-intro .section-title {
    font-size: clamp(2.8rem, 5.1vw, 4.9rem) !important;
}

.solutions-intro p,
.values-stack-intro .values-lead,
.catalog-head p,
.cases-head p {
    max-width: 38ch;
    margin-inline: auto;
}

.solution-content,
.catalog-copy,
.case-slide-copy {
    gap: .72rem;
}

.solution-link,
.button,
.button-alt,
.button-whatsapp {
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .section-title,
    .spectacle-title,
    .values-stack-intro .section-title,
    .solutions-intro .section-title,
    .catalog-head .section-title,
    .cases-head .section-title,
    .section-testimonials .section-title,
    .brochure-card-body .section-title,
    .conversion-card-body .section-title {
        letter-spacing: -0.026em !important;
    }

    .solution-title,
    .catalog-copy h3,
    .case-slide-copy h3,
    .highlight-card-apple h3,
    .value-copy-large,
    .timeline-card h3,
    .scroll-text-item h3,
    .brochure-card-body h2,
    .conversion-card-body h2 {
        letter-spacing: -0.02em !important;
    }
}

/* ── Footer editorial alignment ─────────────────────────────────────────── */
.site-footer {
    padding-top: clamp(3.4rem, 7vw, 5.5rem);
    padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .62fr) minmax(220px, .62fr);
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start;
}

.footer-brand-block,
.footer-contact-stack,
.footer-social-block {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.footer-brand-block,
.footer-contact-stack,
.footer-social-block {
    display: grid;
    align-content: start;
    gap: .85rem;
}

.footer-brand-block h3,
.footer-contact-stack h4,
.footer-social-block h4 {
    margin: 0;
    font-family: var(--insistel-font-family) !important;
    font-variation-settings: "wght" var(--insistel-card-title-weight) !important;
    font-weight: var(--insistel-card-title-weight) !important;
    letter-spacing: var(--insistel-card-title-letter-spacing) !important;
    line-height: 1.06 !important;
    color: #ffffff !important;
}

.footer-brand-block h3 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    max-width: 10ch;
}

.footer-contact-stack h4,
.footer-social-block h4 {
    font-size: clamp(1.05rem, 1.3vw, 1.22rem);
}

.footer-brand-block p {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: var(--insistel-body-line-height) !important;
    letter-spacing: var(--insistel-body-letter-spacing) !important;
}

.footer-contact-stack,
.footer-social-block {
    padding-top: .5rem !important;
}

.contact-hub {
    margin: 0;
    gap: .7rem;
}

.contact-hub li {
    align-items: flex-start;
    gap: .6rem;
    line-height: 1.35;
}

.footer-social-block p {
    margin: 0;
    font-size: .98rem;
    font-variation-settings: "wght" 400 !important;
    font-weight: 400 !important;
    color: rgba(224, 239, 255, 0.86) !important;
}

.social-buttons {
    gap: .75rem;
}

.site-footer .button-whatsapp {
    justify-self: start;
    margin-top: .35rem;
}

.footer-bottom {
    margin-top: clamp(2rem, 4vw, 2.8rem);
    padding-top: 1rem;
}

@media (max-width: 980px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
        max-width: 42rem;
    }
}

@media (max-width: 600px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-brand-block {
        grid-column: auto;
    }
}

/* ── Section intro consistency ──────────────────────────────────────────── */
.section-brands .container,
.section-testimonials .container {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.2rem);
}

.section-brands .section-head,
.section-testimonials .section-head {
    display: grid;
    gap: clamp(.7rem, 1.4vw, 1rem);
    justify-items: center;
    text-align: center;
    width: min(100%, 760px);
    margin-inline: auto;
    margin-bottom: 0;
}

.section-brands .section-title,
.section-testimonials .section-title {
    max-width: 11ch !important;
    margin-inline: auto;
}

.section-brands .section-head p,
.section-testimonials .section-head p {
    max-width: 36ch;
    margin: 0 auto;
}

.section-brands .brands-wall,
.section-testimonials .testimonial-track {
    width: min(100%, 1320px);
    margin-inline: auto;
}

.section-brands .brands-wall {
    padding-top: .2rem;
}

@media (max-width: 768px) {
    .section-brands .section-head,
    .section-testimonials .section-head {
        width: 100%;
    }

    .section-brands .section-head p,
    .section-testimonials .section-head p {
        max-width: 32ch;
    }
}

/* ── Section intro system ───────────────────────────────────────────────── */
:root {
    --section-intro-gap: clamp(.7rem, 1.35vw, 1rem);
    --section-intro-title-max-left: 10ch;
    --section-intro-title-max-center: 11ch;
    --section-intro-copy-max-left: 43ch;
    --section-intro-copy-max-center: 46ch;
    --section-intro-copy-size: clamp(1.02rem, 1.16vw, 1.14rem);
    --insistel-content-gutter: clamp(1.2rem, 5vw, 5.5rem);
}

:is(
    #sobre-nosotros .timeline-intro,
    #diferenciales .section-head,
    #brochure .brochure-card-body,
    #conversion .conversion-card-body
) {
    display: grid;
    gap: var(--section-intro-gap);
    justify-items: start;
    align-content: start;
    text-align: left;
    width: min(100%, 760px);
}

:is(
    #sobre-nosotros .timeline-intro .section-title,
    #diferenciales .section-head .section-title,
    #brochure .brochure-card-body .section-title,
    #conversion .conversion-card-body h2
) {
    max-width: var(--section-intro-title-max-left) !important;
    margin: 0;
}

:is(
    #sobre-nosotros .timeline-intro p,
    #diferenciales .section-head p,
    #brochure .brochure-card-body > p,
    #conversion .conversion-card-body > p
) {
    max-width: var(--section-intro-copy-max-left) !important;
    margin: 0;
    font-size: var(--section-intro-copy-size) !important;
}

:is(
    #marcas .section-head,
    #testimonios .section-head,
    #valores .section-head,
    #soluciones .section-head,
    #catalogo .catalog-head,
    #casos .cases-head
) {
    display: grid;
    gap: var(--section-intro-gap);
    justify-items: center;
    align-content: start;
    text-align: center;
    width: min(100%, 820px);
    margin-inline: auto;
}

:is(
    #marcas .section-head .section-title,
    #testimonios .section-head .section-title,
    #valores .section-head .section-title,
    #soluciones .section-head .section-title,
    #catalogo .catalog-head .section-title,
    #casos .cases-head .section-title
) {
    max-width: var(--section-intro-title-max-center) !important;
    margin: 0 auto;
}

:is(
    #marcas .section-head p,
    #testimonios .section-head p,
    #valores .section-head p,
    #soluciones .section-head p,
    #catalogo .catalog-head p,
    #casos .cases-head p
) {
    max-width: var(--section-intro-copy-max-center) !important;
    margin: 0 auto;
    font-size: var(--section-intro-copy-size) !important;
}

#marcas .container,
#testimonios .container {
    gap: clamp(1.2rem, 2.4vw, 1.8rem) !important;
}

#marcas .brands-wall,
#testimonios .testimonial-track {
    margin-top: .15rem;
}

@media (max-width: 768px) {
    :root {
        --insistel-mobile-gutter: 0.8rem;
    }

    .about-timeline-bg,
    .section-scene-canvas,
    .solutions-webgl-bg,
    .catalog-bg-canvas,
    .cases-bg-canvas,
    .highlights-webgl-bg,
    .stat-visual[data-stat-visual] {
        display: none !important;
    }

    .container,
    .section-products-archive .products-archive-shell,
    .section-products-spotlight .products-carousel,
    .section-products-spotlight .products-spotlight-cta,
    #marcas .container,
    #testimonios .container {
        width: calc(100vw - (var(--insistel-mobile-gutter) * 2)) !important;
        max-width: calc(100vw - (var(--insistel-mobile-gutter) * 2)) !important;
        margin-inline: auto !important;
    }

    :is(
        #sobre-nosotros .timeline-intro,
        #diferenciales .section-head,
        #marcas .section-head,
        #testimonios .section-head,
        #brochure .brochure-card-body,
        #conversion .conversion-card-body,
        #valores .section-head,
        #soluciones .section-head,
        #catalogo .catalog-head,
        #casos .cases-head
    ) {
        width: 100%;
    }

    :is(
        #sobre-nosotros .timeline-intro p,
        #diferenciales .section-head p,
        #marcas .section-head p,
        #testimonios .section-head p,
        #brochure .brochure-card-body > p,
        #conversion .conversion-card-body > p,
        #valores .section-head p,
        #soluciones .section-head p,
        #catalogo .catalog-head p,
        #casos .cases-head p
    ) {
        max-width: 40ch !important;
    }

    .highlights-scroll-container.is-linear .highlights-track-viewport {
        width: 100% !important;
        padding-inline: var(--insistel-mobile-gutter) !important;
        box-sizing: border-box !important;
    }

    .highlights-scroll-container.is-linear .highlights-track {
        width: 100% !important;
        padding: 0 !important;
        justify-items: center !important;
        box-sizing: border-box !important;
    }

    .highlights-scroll-container.is-linear .highlight-intro-slide,
    .highlights-scroll-container.is-linear .highlight-card-apple {
        width: 100% !important;
        max-width: calc(100vw - (var(--insistel-mobile-gutter) * 2)) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        justify-self: center !important;
    }

    .highlights-scroll-container.is-linear .highlight-intro-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #sobre-nosotros .about-timeline-overlay {
        opacity: 0.42 !important;
    }

    #sobre-nosotros .timeline-card-scene {
        opacity: 0.07 !important;
    }

    #sobre-nosotros .timeline-card.is-active .timeline-card-scene {
        opacity: 0.11 !important;
    }

    #sobre-nosotros .timeline-card-scene .scene-motion {
        opacity: 0.08 !important;
    }

    #sobre-nosotros .timeline-card-scene .scene-gradient,
    #sobre-nosotros .timeline-card-scene .scene-pulse {
        opacity: 0 !important;
    }
}

/* ── Section palette cadence: distinct blues and purples ───────────────── */
:root {
    --insistel-primary: #4c8dff;
    --insistel-secondary: #5130c7;
    --insistel-accent: #6b46de;
    --insistel-page-bg-solid: #05101f;
    --insistel-section-hero: #183f9f;
    --insistel-section-highlights: #2a74d6;
    --insistel-section-about: #38208f;
    --insistel-section-differentiators: #1f4ab8;
    --insistel-section-values: #3340a7;
    --insistel-section-solutions: #4b00c9;
    --insistel-section-catalog: #45249f;
    --insistel-section-brands: #255abf;
    --insistel-section-cases: #40209b;
    --insistel-section-conversion: #2455c7;
    --insistel-section-testimonials: #5330b5;
    --insistel-section-brochure: #2d64c9;
    --insistel-section-cta: #47258f;
    --insistel-section-spectacle: #24308f;
}

#sobre-nosotros .about-timeline-overlay {
    background: rgba(33, 18, 95, 0.16);
}

.section-catalog.section-catalog-immersive .catalog-bg-vignette {
    background: rgba(56, 22, 132, 0.18);
}

.section-catalog.section-catalog-immersive .catalog-viewport {
    background: rgba(52, 26, 130, 0.34);
    border-color: rgba(228, 240, 255, 0.28);
}

.section-catalog.section-catalog-immersive .catalog-copy {
    background: rgba(63, 28, 144, 0.46);
}

/* ── Button system: cleaner Material-inspired polish ───────────────────── */
:root {
    --insistel-button-radius: 999px;
    --insistel-button-height: 3rem;
    --insistel-button-padding-x: 1.35rem;
    --insistel-button-bg: #dbe7ff;
    --insistel-button-bg-hover: #e7efff;
    --insistel-button-text: #17306a;
    --insistel-button-border: rgba(184, 206, 255, 0.42);
    --insistel-button-shadow: 0 1px 2px rgba(5, 14, 36, 0.14), 0 4px 10px rgba(5, 14, 36, 0.1);
    --insistel-button-shadow-hover: 0 2px 4px rgba(5, 14, 36, 0.16), 0 8px 18px rgba(5, 14, 36, 0.12);
    --insistel-button-tonal-bg: rgba(222, 234, 255, 0.14);
    --insistel-button-tonal-bg-hover: rgba(222, 234, 255, 0.22);
    --insistel-button-tonal-text: #eff5ff;
    --insistel-button-tonal-border: rgba(198, 220, 255, 0.18);
}

.button,
.button-alt,
.button-whatsapp,
.solution-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--insistel-button-height);
    padding: .72rem var(--insistel-button-padding-x);
    border-radius: var(--insistel-button-radius);
    border: 1px solid var(--insistel-button-border);
    background: var(--insistel-button-bg) !important;
    color: var(--insistel-button-text) !important;
    box-shadow: var(--insistel-button-shadow) !important;
    text-decoration: none;
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease,
        transform .22s cubic-bezier(.2, 0, 0, 1) !important;
}

.button::before,
.button::after,
.button-alt::before,
.button-alt::after,
.button-whatsapp::before,
.button-whatsapp::after,
.solution-link::before,
.solution-link::after {
    content: none !important;
    display: none !important;
}

.button:hover,
.button-alt:hover,
.button-whatsapp:hover,
.solution-link:hover {
    background: var(--insistel-button-bg-hover) !important;
    border-color: rgba(198, 218, 255, 0.58) !important;
    color: #10285e !important;
    box-shadow: var(--insistel-button-shadow-hover) !important;
    transform: translateY(-1px);
}

.button:active,
.button-alt:active,
.button-whatsapp:active,
.solution-link:active {
    transform: scale(.985);
    box-shadow: 0 1px 3px rgba(5, 14, 36, 0.14) !important;
}

.button-alt,
.button-whatsapp,
.solution-link {
    background: var(--insistel-button-tonal-bg) !important;
    color: var(--insistel-button-tonal-text) !important;
    border-color: var(--insistel-button-tonal-border) !important;
    box-shadow: 0 1px 2px rgba(5, 14, 36, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.button-alt:hover,
.button-whatsapp:hover,
.solution-link:hover {
    background: var(--insistel-button-tonal-bg-hover) !important;
    color: #ffffff !important;
    border-color: rgba(214, 232, 255, 0.3) !important;
}

.button-whatsapp {
    min-width: 11.5rem;
}

.solution-link {
    width: fit-content;
    min-height: 2.9rem;
    padding-inline: 1.2rem;
}

#soluciones .solution-panel .solution-link {
    position: absolute !important;
    right: clamp(1.1rem, 2vw, 1.8rem) !important;
    bottom: clamp(1rem, 1.8vw, 1.5rem) !important;
    left: auto !important;
    top: auto !important;
    z-index: 4;
    margin: 0 !important;
}

.timeline-year,
.slider-nav,
.solution-modal-close {
    background-image: none !important;
}

.slider-nav,
.solution-modal-close {
    border-radius: 999px !important;
    border: 1px solid rgba(194, 216, 255, 0.22) !important;
    background: rgba(221, 233, 255, 0.12) !important;
    box-shadow: 0 1px 2px rgba(5, 14, 36, 0.14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, 0, 0, 1) !important;
}

.slider-nav:hover,
.solution-modal-close:hover {
    background: rgba(226, 237, 255, 0.18) !important;
    border-color: rgba(220, 236, 255, 0.34) !important;
    box-shadow: 0 2px 6px rgba(5, 14, 36, 0.16) !important;
    transform: translateY(-1px) !important;
}

.slider-controls--apple,
.section-catalog.section-catalog-immersive .catalog-controls,
.section-cases.section-cases-immersive .cases-controls,
#diferenciales .differentiators-controls {
    width: fit-content;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-inline: auto;
}

.slider-controls--apple .slider-nav,
.section-catalog.section-catalog-immersive .catalog-controls .slider-nav,
.section-cases.section-cases-immersive .cases-controls .slider-nav,
#diferenciales .differentiators-controls .slider-nav {
    width: 42px;
    height: 42px;
    background: rgba(9, 27, 51, 0.44) !important;
    border: 1px solid rgba(210, 236, 255, 0.42) !important;
    color: rgba(235, 246, 255, 0.96) !important;
    box-shadow: 0 10px 22px rgba(2, 10, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

.slider-controls--apple .slider-nav:hover,
.section-catalog.section-catalog-immersive .catalog-controls .slider-nav:hover,
.section-cases.section-cases-immersive .cases-controls .slider-nav:hover,
#diferenciales .differentiators-controls .slider-nav:hover {
    background: rgba(13, 34, 63, 0.58) !important;
    border-color: rgba(228, 244, 255, 0.56) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

.slider-dots--apple,
.section-catalog.section-catalog-immersive .catalog-dots,
.section-cases.section-cases-immersive .cases-dots,
#diferenciales .differentiators-dots {
    gap: .48rem;
    min-height: 44px;
    padding: .45rem .72rem;
    border-radius: 999px;
    background: rgba(8, 22, 43, 0.38) !important;
    border: 1px solid rgba(206, 234, 255, 0.34) !important;
    box-shadow: 0 14px 26px rgba(2, 10, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) saturate(138%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(138%) !important;
}

.section-brands.section-brands-apple .brand-logo-card {
    background: rgba(12, 31, 82, 0.36);
    border-color: rgba(216, 229, 255, 0.22);
}

.section-brands.section-brands-apple .brand-logo-card:hover {
    background: rgba(16, 42, 108, 0.5);
}

.section-cases.section-cases-immersive .cases-bg-overlay {
    background: rgba(9, 24, 68, 0.14);
}

.section-cases.section-cases-immersive .cases-viewport {
    background: rgba(15, 18, 68, 0.3);
    border-color: rgba(218, 232, 255, 0.28);
}

.section-cases.section-cases-immersive .case-slide-copy {
    background: rgba(12, 28, 82, 0.5);
}

.section-brochure .brochure-media-immersive,
.section-conversion .conversion-media-immersive {
    background: rgba(12, 31, 82, 0.26);
}

.section-brochure .brochure-copy-immersive {
    background: rgba(49, 110, 210, 0.12);
    border-color: rgba(209, 226, 255, 0.24);
}

.section-conversion .conversion-copy-immersive {
    background: rgba(42, 116, 208, 0.12);
    border-color: rgba(213, 228, 255, 0.24);
}

/* ── White text lock for colored sections ──────────────────────────────── */
:is(
    .highlights-scroll-container,
    .section-highlights-apple,
    .hero-metrics-section,
    .interstitial-spectacle,
    #sobre-nosotros.section-about,
    #diferenciales.section-differentiators,
    .section-values-stack,
    .solutions-scroll-container,
    #soluciones.section-solutions,
    .section-catalog.section-catalog-immersive,
    .section-brands.section-brands-apple,
    .section-cases.section-cases-immersive,
    .section-conversion,
    .section-testimonials,
    .section-brochure,
    .section-cta
) :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    small,
    strong,
    blockquote,
    cite,
    label,
    a:not(.button):not(.button-alt):not(.button-whatsapp):not(.solution-link)
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── Catalog intro alignment consistency ───────────────────────────────── */
#catalogo .catalog-shell {
    display: grid;
    gap: clamp(1.2rem, 2.4vw, 1.8rem);
    justify-items: center;
}

#catalogo .catalog-head {
    justify-self: center;
    align-items: center;
    text-align: center !important;
    width: min(100%, 820px) !important;
    margin-inline: auto !important;
}

#catalogo .catalog-head .section-title {
    text-align: center !important;
    margin-inline: auto !important;
}

#catalogo .catalog-head p {
    text-align: center !important;
    margin-inline: auto !important;
}

/* ── Brands section: hard-center layout fix ────────────────────────────── */
#marcas .container {
    width: min(1120px, 92%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(1.35rem, 2.5vw, 2rem) !important;
    margin-inline: auto !important;
    min-width: 0 !important;
}

#marcas .section-head {
    flex: 0 0 auto !important;
    align-items: center !important;
    text-align: center !important;
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding-inline: 0 !important;
    min-width: 0 !important;
}

#marcas .section-head .section-title {
    max-width: 9ch !important;
    text-align: center !important;
    margin: 0 auto !important;
}

#marcas .section-head p {
    max-width: 34ch !important;
    text-align: center !important;
    margin: 0 auto !important;
}

#marcas .brands-wall {
    flex: 0 0 auto !important;
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

#marcas .brands-grid {
    width: 100% !important;
    margin-inline: auto !important;
}

#marcas.section-brands.section-brands-apple {
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.12), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95)) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

#marcas .section-head .section-title {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

#marcas .section-head,
#marcas .section-head * {
    color: inherit !important;
}

#marcas .section-head p {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

#marcas .brand-logo-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

#marcas .brand-logo-card:hover {
    border-color: rgba(59, 130, 246, 0.24) !important;
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12) !important;
}

#marcas .brand-logo-link,
#marcas .brand-logo-link *,
#marcas .brand-logo-text {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
}

/* ── Footer redesign: editorial wordmark layout ───────────────────────── */
.site-header {
    background:
        linear-gradient(180deg, rgba(7, 12, 22, 0.82), rgba(10, 16, 28, 0.72)) !important;
    border-bottom: 1px solid rgba(190, 220, 255, 0.14) !important;
    box-shadow:
        0 18px 40px rgba(2, 8, 18, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(32px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(155%) !important;
}

.site-header::before {
    opacity: 0.38 !important;
}

.site-header::after {
    opacity: 0.9 !important;
}

.nav-wrap {
    background: rgba(255, 255, 255, 0.02) !important;
}

.site-nav a,
.menu-toggle,
.brand,
.brand a {
    color: rgba(244, 248, 255, 0.96) !important;
}

.site-nav a:hover,
.site-nav a.is-current {
    color: #ffffff !important;
}

.menu-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(190, 220, 255, 0.16) !important;
}

.section-title--two-line {
    display: table !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-self: center !important;
}

.section-title--two-line .forced-line {
    display: block;
    white-space: nowrap;
}

.products-spotlight-head .section-title--two-line,
#diferenciales .section-head .section-title--two-line,
#valores .section-head .section-title--two-line,
#soluciones .section-head .section-title--two-line {
    display: table !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-self: center !important;
}

#inter-1,
#inter-2,
#inter-3,
#inter-4 {
    display: none !important;
}

.site-footer {
    background: #ececec !important;
    color: #0b0c16 !important;
    border-top: 0 !important;
    padding: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1.4rem, 2.8vw, 2rem) !important;
}

.site-footer .footer-shell {
    width: min(100%, calc(100% - 2rem));
    background: #ececec;
    border-radius: 36px;
    overflow: hidden;
    padding: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.6vw, 1.8rem);
}

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(140px, .6fr) minmax(180px, .7fr);
    justify-content: end;
    gap: clamp(1.4rem, 4vw, 4.5rem);
    align-items: start;
    margin-bottom: clamp(1.4rem, 2.8vw, 2rem);
}

.site-footer .footer-link-column {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-footer .footer-link-column {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-width: 0;
}

.site-footer .footer-link-column a,
.site-footer .footer-bottom-links span,
.site-footer .footer-bottom small {
    color: #12131d !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

.site-footer .footer-link-column a {
    font-size: 1rem;
    line-height: 1.25;
}

.site-footer .footer-link-column a:hover {
    opacity: .6;
}

.site-footer .footer-wordmark-wrap {
    overflow: hidden;
    margin: clamp(.4rem, 1.4vw, .8rem) 0 clamp(.8rem, 1.6vw, 1rem);
    width: 100%;
}

.site-footer .footer-wordmark {
    margin: 0;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1rem, 4.9vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.04em !important;
    color: #0a2f78 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0a2f78;
    mix-blend-mode: normal;
    filter: none;
    text-shadow: none;
    font-variation-settings: "wght" 470 !important;
    font-weight: 470 !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.site-footer .footer-bottom small {
    font-size: 1rem;
}

.site-footer .footer-bottom small a {
    color: #0a2f78 !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 4px;
}

.site-footer .footer-bottom small a:link,
.site-footer .footer-bottom small a:visited,
.site-footer .footer-bottom small a:hover,
.site-footer .footer-bottom small a:active,
.site-footer .footer-bottom small a:focus,
.site-footer .footer-bottom small a:focus-visible {
    color: #0a2f78 !important;
    opacity: 1 !important;
}

.site-footer .footer-bottom-links a,
.site-footer .footer-bottom-links a:link,
.site-footer .footer-bottom-links a:visited,
.site-footer .footer-bottom-links a:hover,
.site-footer .footer-bottom-links a:active,
.site-footer .footer-bottom-links a:focus,
.site-footer .footer-bottom-links a:focus-visible {
    color: #0a2f78 !important;
    -webkit-text-fill-color: #0a2f78 !important;
    opacity: 1 !important;
}

.site-footer .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .9rem 1.2rem;
    max-width: 42rem;
    font-size: .98rem;
    line-height: 1.25;
}

@media (max-width: 980px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }

    .site-footer .footer-wordmark {
        font-size: clamp(.95rem, 4.7vw, 3.2rem);
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .footer-bottom-links {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .site-footer .footer-shell {
        width: min(100%, calc(100% - 1rem));
        border-radius: 28px;
        padding-inline: 1rem;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        justify-content: stretch;
    }

    .site-footer .footer-wordmark {
        font-size: clamp(.9rem, 4.15vw, 1.45rem);
        letter-spacing: -0.028em !important;
    }
}

#testimonios .testimonial-card .card-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: .9rem;
    border-radius: 999px;
    color: #f5f9ff;
    background: rgba(58, 121, 255, 0.94) !important;
    border: 1px solid rgba(183, 214, 255, 0.14);
    box-shadow: 0 8px 18px rgba(8, 20, 54, 0.18);
    font-size: 1.22rem;
    font-variation-settings: 'FILL' 1, 'wght' 460, 'GRAD' 0, 'opsz' 24;
}

@media (max-width: 760px) {
    body.insistel-products-page .products-grid {
        grid-template-columns: 1fr !important;
    }

    body.insistel-products-page .product-card--archive {
        width: 100% !important;
        max-width: 100% !important;
    }

    #sobre-nosotros .timeline-intro {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 1rem !important;
        display: grid !important;
        justify-items: center !important;
        text-align: center !important;
    }

    #sobre-nosotros .timeline-intro .section-title {
        width: min(100%, 21rem) !important;
        max-width: min(100%, 21rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    #sobre-nosotros .timeline-intro p {
        width: min(100%, 32rem) !important;
        max-width: min(100%, 32rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    :is(
        #sobre-nosotros .section-title,
        #diferenciales .section-title,
        #productos .section-title,
        #valores .section-title,
        #soluciones .section-title,
        #catalogo .section-title,
        #marcas .section-title,
        #casos .section-title,
        #testimonios .section-title,
        .section-brochure .section-title,
        .section-conversion .section-title,
        .section-cta .section-title
    ) {
        width: min(100%, 21rem) !important;
        max-width: min(100%, 21rem) !important;
        margin-inline: auto !important;
        display: block !important;
        overflow: visible !important;
        text-wrap: balance;
    }

    .section-title--two-line {
        width: min(100%, 21rem) !important;
        max-width: min(100%, 21rem) !important;
        margin-inline: auto !important;
    }

    .section-title--two-line .forced-line {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance;
        text-align: center !important;
    }

    .hero.hero-slider-wrap .liquid-slide .slide-glass {
        inset: auto 0.8rem 5.4rem 0.8rem !important;
        width: calc(100vw - 1.6rem) !important;
        max-width: calc(100vw - 1.6rem) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero.hero-slider-wrap .liquid-slide h1,
    .hero.hero-slider-wrap .liquid-slide h2 {
        max-width: 9.2ch !important;
        margin: 0 0 1rem !important;
        font-size: clamp(3.25rem, 14vw, 5.15rem) !important;
        line-height: 0.9 !important;
        letter-spacing: -0.068em !important;
        text-align: left !important;
        text-wrap: balance;
        text-shadow: 0 8px 28px rgba(7, 18, 44, 0.12);
    }

    .hero.hero-slider-wrap .liquid-slide .hero-text {
        max-width: 22ch !important;
        margin: 0 !important;
        font-size: clamp(1.28rem, 5.15vw, 1.62rem) !important;
        line-height: 1.28 !important;
        letter-spacing: -0.028em !important;
        text-align: left !important;
        color: rgba(242, 248, 255, 0.94) !important;
        text-wrap: pretty;
    }
}

/* ── Final brands light theme lock ─────────────────────────────────────── */
body #marcas.section-brands.section-brands-apple.section-brands-light .section-title,
body #marcas.section-brands.section-brands-apple.section-brands-light .section-head .section-title,
body #marcas.section-brands.section-brands-apple.section-brands-light h2.section-title {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body #marcas.section-brands.section-brands-apple.section-brands-light .section-head p,
body #marcas.section-brands.section-brands-apple.section-brands-light .section-head > p {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

body #marcas.section-brands.section-brands-apple.section-brands-light .brand-logo-text,
body #marcas.section-brands.section-brands-apple.section-brands-light .brand-logo-link,
body #marcas.section-brands.section-brands-apple.section-brands-light .brand-logo-link span,
body #marcas.section-brands.section-brands-apple.section-brands-light .brand-logo-link strong,
body #marcas.section-brands.section-brands-apple.section-brands-light .brand-logo-link small {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ── Solutions header offset fix ───────────────────────────────────────── */
:root {
    --insistel-header-offset: 72px;
}

body #soluciones.section-solutions {
    top: var(--insistel-header-offset) !important;
    height: calc(100vh - var(--insistel-header-offset)) !important;
}

body .solutions-intro {
    margin-top: clamp(0.35rem, 1vh, 0.8rem) !important;
}

@media (max-width: 768px) {
    :root {
        --insistel-header-offset: 64px;
    }
}

@media (max-width: 980px) {
    body .solutions-scroll-container {
        height: auto !important;
    }

    body .solutions-scroll-container.is-linear #soluciones.section-solutions,
    body #solutions-scroll-container #soluciones.section-solutions {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding-top: clamp(1.25rem, 4.5vw, 2rem) !important;
        padding-bottom: clamp(1.5rem, 5vw, 2.25rem) !important;
    }

    body .solutions-scroll-container.is-linear .solutions-intro,
    body #solutions-scroll-container .solutions-intro {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 1.6rem !important;
        padding-top: 0 !important;
        z-index: 9 !important;
    }

    body .solutions-scroll-container.is-linear .solutions-intro .section-head,
    body #solutions-scroll-container .solutions-intro .section-head {
        gap: 0.7rem !important;
    }

    body .solutions-scroll-container.is-linear .solutions-intro p,
    body #solutions-scroll-container .solutions-intro p {
        position: relative !important;
        z-index: 9 !important;
        margin-bottom: 0 !important;
    }

    body .solutions-scroll-container.is-linear .solutions-track,
    body #solutions-scroll-container .solutions-track {
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        display: grid !important;
        gap: 0.9rem !important;
        padding: 0 min(4vw, 0.9rem) !important;
        transform: none !important;
        will-change: auto !important;
    }

    body .solutions-scroll-container.is-linear .solution-panel,
    body #solutions-scroll-container .solution-panel {
        width: 100% !important;
        height: auto !important;
        min-height: clamp(320px, 58vh, 460px) !important;
    }
}

/* ── Final light header lock ───────────────────────────────────────────── */
body .site-header,
body .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.76) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
}

body .site-header::before {
    opacity: 0.14 !important;
}

body .site-header::after {
    opacity: 0 !important;
}

body .nav-wrap {
    background: rgba(255, 255, 255, 0.36) !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 12px 30px rgba(15, 23, 42, 0.05) !important;
}

body .site-nav a,
body .site-nav a:link,
body .site-nav a:visited,
body .site-nav a:hover,
body .site-nav a:active,
body .site-nav a:focus,
body .site-nav a.is-current,
body .menu-toggle,
body .brand,
body .brand a {
    color: #0a2f78 !important;
    -webkit-text-fill-color: #0a2f78 !important;
}

body .site-nav a::after {
    background: #0a2f78 !important;
}

body .menu-toggle {
    background: rgba(255, 255, 255, 0.52) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

body .default-logo,
body .custom-logo {
    width: auto !important;
    height: clamp(38px, 3.2vw, 46px) !important;
    max-width: none !important;
    object-fit: contain !important;
}

@media (max-width: 980px) {
    body .site-header,
    body .site-header.is-scrolled {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    body .nav-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    body .site-nav,
    body .site-nav.is-open {
        background: rgba(7, 18, 34, 0.9) !important;
    }

    body .site-nav a,
    body .site-nav a:link,
    body .site-nav a:visited,
    body .site-nav a:hover,
    body .site-nav a:active,
    body .site-nav a:focus,
    body .site-nav a.is-current {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body .site-nav a::after {
        background: rgba(255, 255, 255, 0.9) !important;
    }
}

@media (max-width: 768px) {
    #brochure .brochure-card-body {
        justify-items: start !important;
        text-align: left !important;
    }

    #brochure .brochure-card-body .section-title,
    #brochure .brochure-card-body h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: start !important;
        text-align: left !important;
        text-wrap: pretty !important;
    }
}

/* ── Final square hero slider lock ─────────────────────────────────────── */
body .hero.hero-slider-wrap,
body .hero.hero-slider-wrap .hero-cinematic-shell,
body .hero.hero-slider-wrap .liquid-slider,
body .hero.hero-slider-wrap .slides-viewport,
body .hero.hero-slider-wrap .liquid-slide,
body .hero.hero-slider-wrap .liquid-slide .slide-media,
body .hero.hero-slider-wrap .liquid-slide .slide-glass {
    border-radius: 0 !important;
}

body .hero.hero-slider-wrap .liquid-slide.scene-settings_phone .slide-glass {
    max-width: min(58rem, 62vw) !important;
}

body .hero.hero-slider-wrap .liquid-slide.scene-settings_phone h1,
body .hero.hero-slider-wrap .liquid-slide.scene-settings_phone h2 {
    font-size: clamp(3.1rem, 4.8vw, 4.6rem) !important;
    line-height: 1 !important;
    max-width: 13.8ch !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
}

/* ── Siri Aura Brochure Widget ─────────────────────────────────────────── */
.brochure-widget {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 3.2rem);
    right: clamp(1.5rem, 3.5vw, 3.2rem);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 2px; /* Space for the aura border */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer;
    text-decoration: none;
}

.brochure-widget:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(7, 18, 52, 0.4);
}

.brochure-widget:active {
    transform: translateY(0) scale(0.98);
}

.brochure-aura {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #007aff, #ffffff, #5856d6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    pointer-events: none;
    z-index: 1;
}

.brochure-glass {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    background: rgba(10, 20, 45, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 0.6rem 1.4rem 0.6rem 0.6rem;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-decoration: none !important;
    overflow: hidden;
    transition: background 0.3s ease;
}

.brochure-widget:hover .brochure-glass {
    background: rgba(14, 28, 62, 0.75);
}

.brochure-thumb-wrap {
    width: 48px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(2, 6, 22, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.brochure-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brochure-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.brochure-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.brochure-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(230, 242, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.brochure-subtitle .material-symbols-rounded {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Optimización Responsive Móvil para el Widget */
@media (max-width: 980px) {
    .brochure-widget {
        bottom: auto;
        top: calc(var(--insistel-header-offset, 72px) + 1.5rem);
        right: clamp(1.2rem, 3vw, 2rem);
        transform-origin: top right;
        transform: scale(0.9);
    }
}

@media (max-width: 680px) {
    .brochure-widget {
        bottom: auto;
        top: calc(var(--insistel-header-offset, 64px) + 1.2rem);
        right: 1.2rem;
        transform: scale(0.82);
    }
    
    .brochure-glass {
        padding: 0.5rem 1.1rem 0.5rem 0.5rem;
        gap: 0.9rem;
    }
    
    .brochure-thumb-wrap {
        width: 40px;
        height: 52px;
    }
    
    .brochure-title {
        font-size: 0.98rem;
    }
    
    .brochure-subtitle {
        font-size: 0.76rem;
    }
}

@media (max-width: 480px) {
    .brochure-widget {
        transform: scale(0.75);
    }
}