/* ==========================================================================
   INTRADECON - Main Stylesheet
   International Trade & Logistics | Premium Dark-Accent Theme
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS & CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* --- Colors --- */
    --color-page-bg:        #F4F4F2;
    --color-primary-dark:   #17173F;
    --color-hero-bg:        #0D0D22;
    --color-orange:         #F79433;
    --color-orange-hover:   #ffa64d;
    --color-card-bg:        #ECECE9;
    --color-card-btn-bg:    #E2E2DF;
    --color-tab-active-bg:  #E5E5E2;
    --color-border:         #E4E4E1;
    --color-input-border:   #D8D8D4;
    --color-body-text:      #55555E;
    --color-muted:          #8B8B92;
    --color-label:          #A8A8AD;
    --color-white:          #ffffff;

    /* Gradients */
    --gradient-dark-panel:  linear-gradient(150deg, #1D1D45, #131331);
    --gradient-cta-footer:  linear-gradient(180deg, #15153A, #0E0E28);

    /* --- Typography --- */
    --font-heading:   'Instrument Sans', sans-serif;
    --font-body:      'Instrument Sans', sans-serif;
    --font-mono:      'IBM Plex Mono', monospace;

    /* --- Layout --- */
    --container-max:      1440px;
    --container-padding:  60px;

    /* --- Radius --- */
    --radius-btn:     8px;
    --radius-input:   10px;
    --radius-nav:     14px;
    --radius-card:    18px;
    --radius-panel:   20px;

    /* --- Shadows --- */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.14);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05);

    /* --- Transitions --- */
    --transition:      0.3s ease;
    --transition-fast: 0.15s ease;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-body-text);
    background-color: var(--color-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 24px;
    display: flex;
    justify-content: center;
    transition: padding var(--transition);
    box-sizing: border-box;
    max-width: 100vw;
}

.site-header--scrolled {
    padding: 12px 24px;
}

.site-header--scrolled .nav-pill {
    background: rgba(23, 23, 48, 0.85);
}

/* WordPress admin bar offset */
body.admin-bar .site-header {
    top: 32px;
}

body.admin-bar .nav-pill {
    /* inherited from site-header positioning */
}

body.admin-bar .mobile-menu {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .nav-pill {
        top: 76px;
    }
    body.admin-bar .mobile-menu {
        top: 46px;
    }
}

/* Hide admin bar on home (optional) */
.home .admin-bar #wpadminbar {
    display: none;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

/* Exact from Framer design:
   Hero title: 64px / 500 / -1.92px letter-spacing / 67.2px line-height
   Section big: 58px / 500 / -1.74px / 63.8px
   Section med: 44px / 500 / -1.1px / 50.6px
   Card title: 24px / 600 / -0.48px / 28.8px
*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-primary-dark);
    letter-spacing: -0.03em;
}

h1 { font-size: 64px; line-height: 67.2px; letter-spacing: -1.92px; }
h2 { font-size: 58px; line-height: 63.8px; letter-spacing: -1.74px; }
h3 { font-size: 44px; line-height: 50.6px; letter-spacing: -1.1px; }
h4 { font-size: 24px; font-weight: 600; line-height: 28.8px; letter-spacing: -0.48px; }
h5 { font-size: 20px; font-weight: 600; }
h6 { font-size: 17px; font-weight: 600; }

p {
    margin-bottom: 1em;
}

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

::selection {
    background-color: var(--color-orange);
    color: var(--color-primary-dark);
}


/* ==========================================================================
   3. UTILITY / MONO LABEL STYLE
   ========================================================================== */

.mono-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-muted);
}

.mono-label--orange {
    color: var(--color-orange);
}

.mono-label--white {
    color: rgba(255, 255, 255, 0.5);
}

.mono-label--sm {
    font-size: 10.5px;
    letter-spacing: 0.3em;
}


/* ==========================================================================
   4. LAYOUT & CONTAINER
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container--narrow {
    max-width: 960px;
}

.container--article {
    max-width: 800px;
}

.section {
    padding: 150px 0;
}

.section--sm {
    padding: 100px 0;
}

.section--lg {
    padding: 170px 0;
}

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

.section--no-bottom {
    padding-bottom: 0;
}


/* ==========================================================================
   5. SECTION HEADERS
   ========================================================================== */

.section-header {
    margin-bottom: 60px;
}

.section-header--center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.section-header__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-label);
    margin-bottom: 14px;
}

.section-header__title {
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 500;
    line-height: 63.8px;
    letter-spacing: -1.74px;
    color: var(--color-primary-dark);
    margin-bottom: 20px;
}

.section-header__title--lg {
    font-size: 64px;
    line-height: 67.2px;
    letter-spacing: -1.92px;
}

.section-header__title--md {
    font-size: 44px;
    line-height: 50.6px;
    letter-spacing: -1.1px;
}

.section-header__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 680px;
}

.section-header--center .section-header__text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Dark variant */
.section-header--dark .section-header__label {
    color: rgba(255, 255, 255, 0.5);
}

.section-header--dark .section-header__title {
    color: var(--color-white);
}

.section-header--dark .section-header__text {
    color: rgba(255, 255, 255, 0.65);
}

/* Section-header tag (mono label above title) */
.section-header__tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-label);
    margin-bottom: 14px;
}

.section-header__tag--light {
    color: rgba(255, 255, 255, 0.5);
}

.section-header__title--light {
    color: var(--color-white);
}

.section-header__text--light {
    color: rgba(255, 255, 255, 0.65);
}

/* Dark section variant */
.section--dark {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.section--dark .section-header__title {
    color: var(--color-white);
}

.section--dark .section-header__text {
    color: rgba(255, 255, 255, 0.65);
}

.section--dark .sistema__layer {
    background: rgba(255, 255, 255, 0.06);
}

.section--dark .sistema__layer-name {
    color: var(--color-white);
}

.section--dark .sistema__layer-desc {
    color: rgba(255, 255, 255, 0.6);
}

.section--dark .sistema__layer-number {
    background: var(--color-orange);
    color: var(--color-white);
}

.section--dark .sistema__placeholder {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Eyebrow text (partners heading) */
.section__eyebrow-text {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: 40px;
}

/* Template aliases (section__* maps to section-header__*) */
.section__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-label);
    margin-bottom: 14px;
}

.section__title {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-primary-dark);
    margin-bottom: 20px;
    line-height: 1.1;
}

.section__title--lg {
    font-size: 58px;
}

.section__subtitle {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 680px;
    margin-bottom: 40px;
}

.dark-panel .section__label,
.card--dark .section__label {
    color: rgba(255, 255, 255, 0.5);
}

.dark-panel .section__title,
.card--dark .section__title {
    color: var(--color-white);
}

.dark-panel .section__subtitle,
.card--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.65);
}


/* ==========================================================================
   6. FLOATING NAV BAR
   ========================================================================== */

/* ------------------------------------------------------------------
   NAV PILL — Extracted from Framer design 2026-09-14
   Container: 1219px × 63px, top: 30px, gap: 8px, padding: 10px 10px 10px 22px
   BG: rgba(23, 23, 48, 0.62), backdrop-filter blur(16px), radius 14px
   ------------------------------------------------------------------ */
.nav-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 22px;
    background: rgba(23, 23, 48, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    max-width: 1219px;
    width: 100%;
}

/* 1. Logo — 152×30px */
.nav-pill__logo {
    display: inline-block;
    flex-shrink: 0;
    margin-right: auto; /* push nav to right of logo */
}

.nav-pill__logo-img {
    height: 44px;
    width: auto;
    display: block;
}

.nav-pill__logo-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.02em;
}

/* 2. Nav Menu — Instrument Sans 14px 500, padding 9px 12px */
.nav-pill__nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-pill__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 12px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.nav-pill__link:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
}

.nav-pill__link--has-children::after {
    content: '▾';
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.7;
}

/* 3. Icon button (phone) — 40×40px, radius 10px */
.nav-pill__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.nav-pill__icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.nav-pill__icon-btn svg {
    width: 18px;
    height: 18px;
}

/* 4/5/6. CTA buttons — padding 13px 18px, radius 10px, IBM Plex Mono 11px 600, letter-spacing 1.1px */
.nav-pill__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em; /* 1.1px */
    text-transform: uppercase;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

/* EXPLORAR SOLUCIONES — Orange */
.nav-pill__cta--orange {
    background: var(--color-orange);
    color: rgb(23, 23, 63);
}

.nav-pill__cta--orange:hover {
    background: #ffa64d;
    transform: translateY(-1px);
}

/* RESERVAR ASESORÍA — White */
.nav-pill__cta--white {
    background: var(--color-white);
    color: rgb(23, 23, 63);
}

.nav-pill__cta--white:hover {
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

/* CONTACTO — Translucent white 16% */
.nav-pill__cta--translucent {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
}

.nav-pill__cta--translucent:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* Hamburger toggle (hidden on desktop) */
.nav-pill__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-orange);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.nav-pill__toggle:hover {
    background: var(--color-orange-hover);
}

.nav-pill__toggle span {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--color-primary-dark);
    border-radius: 2px;
    transition: all var(--transition);
}

.nav-pill__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.nav-pill__toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.nav-pill__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}


/* ==========================================================================
   7. MOBILE MENU (slide-out dark panel)
   ========================================================================== */

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    background: var(--color-primary-dark);
    z-index: 999;
    padding: 100px 40px 40px;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu.is-open {
    right: 0;
}

.mobile-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 34, 0.6);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.mobile-menu__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu__link {
    display: block;
    font-family: var(--font-heading);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color var(--transition-fast);
}

.mobile-menu__link:hover,
.mobile-menu__link--active {
    color: var(--color-white);
}

.mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
}


/* ==========================================================================
   8. HERO SECTIONS
   ========================================================================== */

/* ------------------------------------------------------------------
   HERO — Extracted from Framer design 2026-09-14
   Height home: 880px, inner: 640px
   BG: rgb(13, 13, 34) solid dark
   Content bottom-aligned (tag at 637px in 880px hero)
   Title max-width: 1050px, horizontal margin 195px
   ------------------------------------------------------------------ */
.hero {
    position: relative;
    height: 640px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: rgb(13, 13, 34);
}

.hero--home {
    height: 880px;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img,
.hero__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(13, 13, 34, 0.25) 0%,
        rgba(13, 13, 34, 0) 30%,
        rgba(13, 13, 34, 0.72) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Content wrapper - bottom-aligned. Uses .container inside for proper padding & centering */
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 72px;
    overflow: hidden; /* prevent text overflow from breaking layout */
}

/* Constrain title width inside .container */
.hero__content .container {
    max-width: 1440px;
}

.hero__content .hero__title,
.hero__content .hero__subtitle,
.hero__content .hero__tag,
.hero__content .hero__actions {
    max-width: 1050px;
}

/* Tag - EXACT: IBM Plex Mono 11px 500, orange #F79433, letter-spacing 3.3px, margin-bottom 22px */
.hero__tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3.3px;
    color: var(--color-orange);
    margin-bottom: 22px;
    text-align: center;
}

/* Title - EXACT: Instrument Sans 64px 500, white, -1.92px letter-spacing, 67.2px line-height */
.hero__title {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: -1.92px;
    line-height: 67.2px;
    margin: 0 auto;
    max-width: 1050px;
    text-align: center;
}

.hero__title--xl {
    font-size: 74px;
    letter-spacing: -2.22px;
    line-height: 77.7px;
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    max-width: 680px;
    margin-bottom: 32px;
}

.hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   INNER-PAGE HERO (Sistema, Soluciones, etc.) — left aligned, with subtitle
   Values extracted 1:1 from design: eyebrow 11px mono / title 62px / sub 18px
   -------------------------------------------------------------------------- */
.hero--inner .hero__content {
    padding-bottom: 80px;
}

.hero--inner .hero__tag {
    text-align: left;
    margin-bottom: 22px;
}

.hero--inner .hero__content .hero__title {
    text-align: left;
    margin: 0;
    max-width: 900px;
    font-size: 62px;
    font-weight: 500;
    letter-spacing: -1.86px;
    line-height: 65.72px;
    text-wrap: balance;
}

.hero--inner .hero__content .hero__subtitle {
    text-align: left;
    max-width: 620px;
    margin: 28px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
    color: rgba(255, 255, 255, 0.78);
}


/* ==========================================================================
   SISTEMA — "Como funciona" (arquitectura de 5 capas)  [values 1:1 from design]
   ========================================================================== */
.arch {
    padding: 140px 0 120px;
}

.arch__header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.arch__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.arch__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0 auto;
    text-wrap: balance;
}

.arch__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    max-width: 680px;
    margin: 24px auto 0;
}

.arch__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 70px;
}

.arch__card {
    background: rgb(236, 236, 233);
    border-radius: 14px;
    padding: 26px 22px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.arch__card-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--color-muted);
}

.arch__card-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.2px;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Tarjeta destacada (la central) */
.arch__card--dark {
    background: var(--color-primary-dark);
}

.arch__card--dark .arch__card-num {
    color: var(--color-orange);
}

.arch__card--dark .arch__card-name {
    color: var(--color-white);
}


/* ==========================================================================
   SISTEMA — Detalle de las 5 capas  [values 1:1 from design]
   ========================================================================== */
.sys-detail {
    padding-top: 70px;
}

.sys-detail__row {
    display: grid;
    grid-template-columns: 120px 524px 1fr;
    gap: 50px;
    padding: 64px 0;
    border-top: 1px solid rgb(228, 228, 225);
}

.sys-detail__num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2.34px;
    color: var(--color-orange);
}

.sys-detail__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.sys-detail__title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.95px;
    line-height: 41.8px;
    color: var(--color-primary-dark);
    margin: 0;
}

.sys-detail__items {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
}

.sys-detail__item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgb(228, 228, 225);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(85, 85, 94);
}

.sys-detail__plus {
    color: var(--color-orange);
    font-weight: 400;
}


/* ==========================================================================
   SISTEMA — Resultado (impacto en numeros)  [values 1:1 from design]
   ========================================================================== */
.sys-result {
    padding: 170px 0 150px;
}

.sys-result__header {
    max-width: 900px;
}

.sys-result__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.sys-result__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0;
    text-wrap: balance;
}

.sys-result__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 70px;
}

.sys-result__card {
    background: rgb(236, 236, 233);
    border-radius: 18px;
    padding: 40px 36px;
}

.sys-result__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.74px;
    color: var(--color-primary-dark);
    margin-bottom: 18px;
}

.sys-result__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    color: var(--color-primary-dark);
    margin-bottom: 12px;
}

.sys-result__text {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    color: rgb(85, 85, 94);
    margin: 0;
}


/* ==========================================================================
   SOLUCIONES — Catalogo (9 capacidades)  [values 1:1 from design]
   ========================================================================== */
.sol-catalog {
    padding: 140px 0 120px;
}

.sol-catalog__header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px;
}

.sol-catalog__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.sol-catalog__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0 auto;
    text-wrap: balance;
}

.sol-catalog__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    max-width: 680px;
    margin: 24px auto 0;
}

.sol-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cap-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(236, 236, 233);
    border-radius: 18px;
    padding: 32px 30px;
    min-height: 290px;
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23, 23, 63, 0.10);
}

.cap-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 34px;
}

.cap-card__num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    color: var(--color-muted);
}

.cap-card__cat {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: rgb(168, 168, 173);
}

.cap-card__title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.52px;
    line-height: 30.68px;
    color: var(--color-primary-dark);
    margin: 0 0 16px;
}

.cap-card__desc {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    color: rgb(85, 85, 94);
    margin: 0;
}

.cap-card__link {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    color: var(--color-primary-dark);
    margin-top: 24px;
}

/* Tarjeta destacada (Outsourcing BPO) */
.cap-card--dark {
    background: var(--color-primary-dark);
}

.cap-card--dark .cap-card__num,
.cap-card--dark .cap-card__link {
    color: var(--color-orange);
}

.cap-card--dark .cap-card__title {
    color: var(--color-white);
}

.cap-card--dark .cap-card__cat {
    color: rgba(255, 255, 255, 0.5);
}

.cap-card--dark .cap-card__desc {
    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================================
   SOLUCIONES — Modelo BPO (comparacion 2 columnas)  [values 1:1 from design]
   ========================================================================== */
.bpo {
    padding: 30px 0 130px;
}

.bpo__header {
    max-width: 900px;
}

.bpo__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.bpo__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0;
    text-wrap: balance;
}

.bpo__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    max-width: 680px;
    margin: 24px 0 0;
}

.bpo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 70px;
}

.bpo__panel {
    border-radius: 18px;
    padding: 44px 42px;
}

.bpo__panel--muted {
    background: rgb(236, 236, 233);
}

.bpo__panel--dark {
    background: linear-gradient(150deg, rgb(29, 29, 69), rgb(19, 19, 49));
}

.bpo__panel-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    color: var(--color-muted);
    margin-bottom: 28px;
}

.bpo__panel-title--accent {
    color: var(--color-orange);
}

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

.bpo__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(222, 222, 218);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: rgb(85, 85, 94);
}

.bpo__item--dark {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
}

.bpo__mark {
    font-weight: 400;
}

.bpo__mark--neg {
    color: rgb(180, 180, 185);
}

.bpo__mark--pos {
    color: var(--color-orange);
}


/* ==========================================================================
   SOLUCIONES — Radar Global IoT (panel oscuro)  [values 1:1 from design]
   ========================================================================== */
.radar {
    padding: 20px 0 160px;
}

.radar__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgb(13, 13, 34);
    border-radius: 22px;
    overflow: hidden;
}

.radar__content {
    padding: 70px 60px;
}

.radar__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.42px;
    color: var(--color-orange);
    margin-bottom: 24px;
}

.radar__title {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -1.1px;
    line-height: 48.4px;
    color: var(--color-white);
    margin: 0 0 24px;
    max-width: 540px;
}

.radar__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 540px;
    margin: 0 0 38px;
}

.radar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    text-transform: uppercase;
    background: var(--color-orange);
    color: var(--color-primary-dark);
    padding: 16px 28px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.radar__btn:hover {
    background: var(--color-orange-hover);
}

.radar__media {
    position: relative;
    min-height: 100%;
}

.radar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.radar__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-left: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
}


/* ==========================================================================
   SOSTENIBILIDAD — Empresa B (5 pilares)  [values 1:1 from design]
   ========================================================================== */
.empresab {
    padding: 140px 0 120px;
}

.empresab__header {
    max-width: 900px;
}

.empresab__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.empresab__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0;
    text-wrap: balance;
}

.empresab__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    max-width: 680px;
    margin: 24px 0 0;
}

.empresab__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 70px;
}

.pillar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(236, 236, 233);
    border-radius: 14px;
    padding: 30px 26px;
    min-height: 230px;
}

.pillar__num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    line-height: normal;
    color: var(--color-muted);
}

.pillar__name {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.21px;
    line-height: 25.2px;
    color: var(--color-primary-dark);
    margin: 0 0 12px;
}

.pillar__desc {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: rgb(85, 85, 94);
    margin: 0;
}

/* Pilar destacado (Ambiente) */
.pillar--dark {
    background: var(--color-primary-dark);
}

.pillar--dark .pillar__num {
    color: var(--color-orange);
}

.pillar--dark .pillar__name {
    color: var(--color-white);
}

.pillar--dark .pillar__desc {
    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================================
   SOSTENIBILIDAD — Impacto Medido (panel oscuro, 4 stats)  [1:1 from design]
   ========================================================================== */
.impacto {
    padding: 30px 0 120px;
}

.impacto__panel {
    background: linear-gradient(150deg, rgb(29, 29, 69), rgb(19, 19, 49));
    border-radius: 22px;
    padding: 70px 60px;
}

.impacto__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.42px;
    line-height: normal;
    color: var(--color-orange);
    margin-bottom: 24px;
}

.impacto__title {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -1.1px;
    line-height: 48.4px;
    color: var(--color-white);
    max-width: 760px;
    margin: 0;
}

.impacto__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.impacto__stat {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
}

.impacto__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 54px;
    font-weight: 500;
    letter-spacing: -1.62px;
    line-height: normal;
    color: var(--color-white);
    margin-bottom: 12px;
}

.impacto__label {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    color: rgba(255, 255, 255, 0.65);
}


/* ==========================================================================
   SOSTENIBILIDAD — Informes EIB (lista descargable + imagen)  [1:1 design]
   ========================================================================== */
.informes {
    padding: 30px 0 150px;
}

/* Pagina dedicada Informes (tras el hero, sin encabezado en la columna) */
.informes--page {
    padding: 140px 0 130px;
}

.informes__list--flush {
    margin-top: 0;
}

/* Fila sin PDF cargado aun: no interactiva */
.informes__row--empty {
    pointer-events: none;
}

.informes__grid {
    display: grid;
    grid-template-columns: 595fr 655fr;
    gap: 70px;
    align-items: start;
}

.informes__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.informes__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    margin: 0;
    text-wrap: balance;
}

.informes__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    margin: 24px 0 0;
}

.informes__list {
    list-style: none;
    margin: 70px 0 0;
    padding: 0;
}

.informes__row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid rgb(228, 228, 225);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.informes__row:hover {
    opacity: 0.7;
}

.informes__year {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-orange);
}

.informes__name {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.19px;
    color: var(--color-primary-dark);
}

.informes__meta {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    justify-self: end;
    white-space: nowrap;
}

.informes__media {
    position: relative;
    min-height: 660px;
    border-radius: 18px;
    overflow: hidden;
}

.informes__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.informes__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px dashed rgba(23, 23, 63, 0.18);
    border-radius: 18px;
    background: rgb(236, 236, 233);
    color: rgb(139, 139, 146);
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
}


/* ==========================================================================
   ARTICULOS — filtros + destacado  [values 1:1 from design]
   ========================================================================== */
.articulos {
    padding: 120px 0 120px;
}

.art-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.art-filter {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: rgb(154, 154, 160);
    background: transparent;
    border: 1px solid rgb(220, 220, 216);
    border-radius: 8px;
    padding: 13px 18px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.art-filter:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.art-filter--active {
    color: var(--color-primary-dark);
    background: rgb(229, 229, 226);
    border-color: rgb(229, 229, 226);
    font-weight: 600;
}

.art-featured {
    display: grid;
    grid-template-columns: 706fr 614fr;
    background: var(--color-primary-dark);
    border-radius: 22px;
    overflow: hidden;
    margin-top: 60px;
    text-decoration: none;
}

.art-featured__content {
    padding: 66px 58px;
}

.art-featured__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    line-height: normal;
    color: var(--color-orange);
    margin-bottom: 26px;
}

.art-featured__title {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -1.32px;
    line-height: 48.4px;
    color: var(--color-white);
    margin: 0 0 24px;
    text-wrap: balance;
}

.art-featured__excerpt {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 27.2px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
    margin: 0;
}

.art-featured__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.68px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 40px;
}

.art-featured__media {
    position: relative;
    min-height: 100%;
}

.art-featured__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-featured__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-left: 1px dashed rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
}

/* Grid de articulos */
.art-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 22px;
    row-gap: 24px;
    margin-top: 100px;
}

.art-card {
    display: block;
    text-decoration: none;
}

.art-card__media {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}

.art-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(23, 23, 63, 0.18);
    border-radius: 14px;
    background: rgb(236, 236, 233);
    color: rgb(139, 139, 146);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
}

.art-card__tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    color: var(--color-orange);
    margin-bottom: 14px;
}

.art-card__title {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.46px;
    line-height: 28.06px;
    color: var(--color-primary-dark);
    margin: 0 0 12px;
}

.art-card__excerpt {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    color: rgb(85, 85, 94);
    margin: 0 0 18px;
}

.art-card__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.44px;
    color: rgb(168, 168, 173);
}

/* Boletin / newsletter */
.art-news {
    padding: 0 0 120px;
}

.art-news__panel {
    display: grid;
    grid-template-columns: 572fr 572fr;
    gap: 60px;
    align-items: center;
    background: rgb(236, 236, 233);
    border-radius: 22px;
    padding: 64px 58px;
}

.art-news__title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.9px;
    line-height: 41.4px;
    color: var(--color-primary-dark);
    margin: 0 0 14px;
}

.art-news__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    margin: 0;
}

.art-news__label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary-dark);
    margin-bottom: 14px;
}

.art-news__row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.art-news__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(23, 23, 63, 0.25);
    border-radius: 0;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-primary-dark);
}

.art-news__input::placeholder {
    color: rgba(23, 23, 63, 0.4);
}

.art-news__input:focus {
    outline: none;
    border-bottom-color: var(--color-primary-dark);
}

.art-news__btn {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-orange);
    border: 0;
    border-radius: 10px;
    padding: 15px 28px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.art-news__btn:hover {
    background: var(--color-orange-hover);
}


/* ==========================================================================
   NOSOTROS — Proposito  [values 1:1 from design]
   ========================================================================== */
.nos-prop {
    padding: 140px 0 120px;
}

.nos-prop__grid {
    display: grid;
    grid-template-columns: 620fr 620fr;
    gap: 80px;
    align-items: start;
}

.nos-prop__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.nos-prop__title {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1.38px;
    line-height: 50.6px;
    color: var(--color-primary-dark);
    margin: 0;
}

.nos-prop__body p {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 28.05px;
    color: rgb(85, 85, 94);
    margin: 0 0 26px;
}

.nos-prop__body p:last-child {
    font-size: 19px;
    font-weight: 500;
    line-height: 31.35px;
    color: var(--color-primary-dark);
    margin-bottom: 0;
}

/* Principios */
.nos-principios {
    padding: 30px 0 120px;
}

.nos-principios__header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px;
}

.nos-principios__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.nos-principios__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    margin: 0;
    text-wrap: balance;
}

.nos-principios__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.nos-prin {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(236, 236, 233);
    border-radius: 18px;
    padding: 34px 30px;
    min-height: 250px;
}

.nos-prin__num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    color: var(--color-muted);
}

.nos-prin__name {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.33px;
    line-height: 26.4px;
    color: var(--color-primary-dark);
    margin: 0 0 14px;
}

.nos-prin__desc {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    color: rgb(85, 85, 94);
    margin: 0;
}

/* Trayectoria */
.nos-tray {
    padding: 30px 0 120px;
}

.nos-tray__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.nos-tray__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0;
    text-wrap: balance;
}

.nos-tray__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgb(228, 228, 225);
    margin-top: 70px;
}

.nos-tray__item {
    padding: 34px 26px 0;
    border-right: 1px solid rgb(228, 228, 225);
}

.nos-tray__item:last-child {
    border-right: 0;
}

.nos-tray__year {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2.08px;
    color: var(--color-orange);
    margin-bottom: 22px;
}

.nos-tray__name {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.33px;
    line-height: normal;
    color: var(--color-primary-dark);
    margin: 0 0 12px;
}

.nos-tray__desc {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    color: rgb(85, 85, 94);
    margin: 0;
}

/* Equipo */
.nos-equipo {
    padding: 30px 0 120px;
}

.nos-equipo__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.nos-equipo__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    max-width: 900px;
    margin: 0 0 70px;
}

.nos-equipo__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nos-member__media {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.nos-member__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nos-member__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(23, 23, 63, 0.18);
    border-radius: 14px;
    background: rgb(236, 236, 233);
    color: rgb(139, 139, 146);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
    padding: 0 20px;
}

.nos-member__name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: normal;
    color: var(--color-primary-dark);
    margin: 0 0 6px;
}

.nos-member__area {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    margin: 0;
}


/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* 1.1px in design */
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

/* Primary (orange) - matches design: 13px 18px padding, 11px 600 weight, 1.1px letter-spacing */
.btn--primary {
    background: var(--color-orange);
    color: var(--color-primary-dark);
    padding: 13px 18px;
    border-radius: 10px;
}

/* Card button (light gray) - RESOLVER AHORA style: 16px padding, 1.54px letter-spacing */
.btn--card {
    background: var(--color-card-btn-bg);
    color: var(--color-primary-dark);
    padding: 16px;
    border-radius: 10px;
    letter-spacing: 0.14em; /* 1.54px */
    width: 100%;
}

.btn--card:hover {
    background: #D5D5D2;
}

.btn--primary:hover {
    background: var(--color-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 148, 51, 0.25);
}

/* Ghost (dark backgrounds) */
.btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    padding: 20px 34px;
    border-radius: 12px;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Light button */
.btn--light {
    background: var(--color-card-btn-bg);
    color: var(--color-primary-dark);
    padding: 11px 18px;
    border-radius: var(--radius-btn);
}

.btn--light:hover {
    background: #D5D5D2;
}

/* White button */
.btn--white {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding: 14px 28px;
    border-radius: var(--radius-input);
}

.btn--white:hover {
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-2px);
}

/* Large variant */
.btn--lg {
    padding: 18px 38px;
    font-size: 11.5px;
    border-radius: 12px;
}

/* Full width */
.btn--full {
    width: 100%;
}

/* Icon inside button */
.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.btn__icon svg {
    width: 14px;
    height: 14px;
}


/* ==========================================================================
   10. CARDS (Light Background)
   ========================================================================== */

.card {
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    padding: 34px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card__step {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    margin-bottom: 16px;
}

.card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
}

.card__icon img,
.card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.card__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-body-text);
    margin-bottom: 20px;
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: var(--color-card-btn-bg);
    color: var(--color-primary-dark);
    padding: 11px 18px;
    border-radius: var(--radius-btn);
    transition: background var(--transition-fast);
}

.card__link:hover {
    background: #D5D5D2;
}

.card__link svg {
    width: 12px;
    height: 12px;
}

/* Card grid layouts */
.cards-grid {
    display: grid;
    gap: 20px;
}

.cards-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.cards-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.cards-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================================
   11. DARK CARDS
   ========================================================================== */

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

.card--dark .card__step {
    color: var(--color-orange);
}

.card--dark .card__title {
    color: var(--color-white);
}

.card--dark .card__text {
    color: rgba(255, 255, 255, 0.6);
}

.card--dark .card__link {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card--dark .card__link:hover {
    background: rgba(255, 255, 255, 0.14);
}

.card--dark:hover {
    box-shadow: 0 12px 40px rgba(23, 23, 63, 0.35);
}


/* ==========================================================================
   12. DARK PANELS (Calculator, Contact Form, etc.)
   ========================================================================== */

.dark-panel {
    background: var(--gradient-dark-panel);
    border-radius: var(--radius-panel);
    padding: 46px;
    color: var(--color-white);
}

.section.dark-panel {
    border-radius: 0;
    padding: 120px 0;
}

.dark-panel__title {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.dark-panel__text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 30px;
    line-height: 1.65;
}

/* Dark panel form fields */
.dark-panel .form-field {
    margin-bottom: 24px;
}

.dark-panel .form-field__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    margin-bottom: 8px;
}

.dark-panel .form-field__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.dark-panel .form-field__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.dark-panel .form-field__input:focus {
    border-bottom-color: var(--color-orange);
}

.dark-panel textarea.form-field__input {
    resize: vertical;
    min-height: 100px;
}

.dark-panel select.form-field__input {
    appearance: none;
    cursor: pointer;
}


/* ==========================================================================
   13. FORM INPUTS (Light Background)
   ========================================================================== */

.form-field {
    margin-bottom: 24px;
}

.form-field__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.form-field__input {
    width: 100%;
    padding: 14px 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-primary-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-input-border);
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-field__input::placeholder {
    color: var(--color-label);
}

.form-field__input:focus {
    border-bottom-color: var(--color-primary-dark);
}

textarea.form-field__input {
    resize: vertical;
    min-height: 100px;
}

select.form-field__input {
    appearance: none;
    cursor: pointer;
}

/* Boxed input variant (for search, newsletter) */
.form-field__input--boxed {
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-input);
    padding: 14px 18px;
}

.form-field__input--boxed:focus {
    border-color: var(--color-primary-dark);
}

.contact-bullets {
    margin: 24px 0;
}

.contact-bullets ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-bullets li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

.contact-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

.contact-info {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-info__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
}

.contact-info__value {
    font-size: 15px;
    color: var(--color-text);
}

.contact-info__value a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.contact-info__value a:hover {
    border-bottom-color: var(--color-accent);
}

.form-privacy {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-align: center;
}


/* ==========================================================================
   14. TABS / PILLS
   ========================================================================== */

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tab {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 11px 18px;
    border-radius: var(--radius-btn);
    border: 1px solid #DCDCD8;
    color: #9A9AA0;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.tab--active {
    background: var(--color-tab-active-bg);
    color: var(--color-primary-dark);
    border-color: var(--color-tab-active-bg);
}


/* ==========================================================================
   15. ACCORDION / FAQ
   ========================================================================== */

.accordion {
    width: 100%;
}

.accordion__item {
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 20px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
}

.accordion__question {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary-dark);
    line-height: 1.35;
}

.accordion__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #B4B4B9;
    transition: transform var(--transition);
}

.accordion__item.is-open .accordion__icon {
    transform: rotate(45deg);
}

.accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.accordion__item.is-open .accordion__body {
    max-height: 600px;
    padding-top: 16px;
}

.accordion__answer {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 760px;
}


/* ==========================================================================
   16. CTA BANNER
   ========================================================================== */

.cta-banner {
    background: var(--gradient-cta-footer);
    clip-path: polygon(0 54px, 3.5% 0, 96.5% 0, 100% 54px, 100% 100%, 0 100%);
    padding: 140px var(--container-padding) 100px;
    text-align: center;
    color: var(--color-white);
}

.cta-banner__title {
    font-family: var(--font-heading);
    font-size: 74px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner__text {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    max-width: 600px;
    margin: 0 auto 40px;
}

.cta-banner__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
    background: var(--gradient-cta-footer);
    color: rgba(255, 255, 255, 0.55);
    padding: 100px 0 0;
}

/* When preceded by CTA banner, remove top padding overlap */
.cta-banner + .footer {
    padding-top: 0;
    background: transparent;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 60px;
}

.footer__logo {
    margin-bottom: 20px;
}

.footer__logo img {
    height: 36px;
    width: auto;
}

.footer__description {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
    max-width: 320px;
}

.footer__social {
    display: flex;
    gap: 10px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    color: var(--color-white);
    transition: background var(--transition-fast);
}

.footer__social-link:hover {
    background: rgba(255, 255, 255, 0.22);
}

.footer__social-link svg {
    width: 16px;
    height: 16px;
}

.footer__column-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer__link {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition-fast);
}

.footer__link:hover {
    color: rgba(255, 255, 255, 0.85);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.footer__bottom-nav {
    display: flex;
    gap: 24px;
}

.footer__bottom-nav a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    transition: color var(--transition-fast);
}

.footer__bottom-nav a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* ==========================================================================
   18. STAT CARDS
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stat-card {
    text-align: center;
    padding: 30px 20px;
}

.stat-card__number {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 600;
    color: var(--color-primary-dark);
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.stat-card__label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stat-card__text {
    font-size: 15px;
    color: var(--color-body-text);
    line-height: 1.6;
}

/* Dark variant */
.stat-card--dark .stat-card__number {
    color: var(--color-white);
}

.stat-card--dark .stat-card__label {
    color: rgba(255, 255, 255, 0.5);
}

.stat-card--dark .stat-card__text {
    color: rgba(255, 255, 255, 0.6);
}

/* Orange number variant */
.stat-card--orange .stat-card__number {
    color: var(--color-orange);
}


/* ==========================================================================
   19. LOGO GRID / PARTNER GRID
   ========================================================================== */

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.logo-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 30px;
    border-left: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.logo-grid__item:first-child {
    border-left: none;
}

.logo-grid__item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.logo-grid__item img {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
    opacity: 0.45;
    transition: opacity var(--transition);
    filter: grayscale(100%);
}

.logo-grid__item:hover img {
    opacity: 0.75;
    filter: grayscale(0%);
}

/* Text-based partner names */
.logo-grid--text .logo-grid__item {
    min-height: 190px;
}

.partner-name {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: #B9B9BE;
    text-align: center;
}


/* ==========================================================================
   20. TIMELINE
   ========================================================================== */

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.timeline__item {
    padding: 24px 0;
}

.timeline__year {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-orange);
    margin-bottom: 14px;
}

.timeline__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.timeline__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-body-text);
}


/* ==========================================================================
   21. TEAM GRID
   ========================================================================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-member {
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.team-member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.team-member__image {
    position: relative;
    height: 320px;
    overflow: hidden;
}

.team-member__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-member:hover .team-member__image img {
    transform: scale(1.04);
}

.team-member__info {
    padding: 20px 24px 24px;
}

.team-member__name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 4px;
}

.team-member__role {
    font-size: 14px;
    color: var(--color-body-text);
}


/* ==========================================================================
   22. ARTICLE CARDS
   ========================================================================== */

.article-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-card-bg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.article-card__image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-card__image img {
    transform: scale(1.04);
}

.article-card__body {
    padding: 28px 30px 32px;
}

.article-card__category {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange);
    margin-bottom: 12px;
    display: inline-block;
}

.article-card__title {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 10px;
}

.article-card__title a {
    color: inherit;
    transition: color var(--transition-fast);
}

.article-card__title a:hover {
    color: var(--color-orange);
}

.article-card__excerpt {
    font-size: 15px;
    color: var(--color-body-text);
    line-height: 1.65;
    margin-bottom: 16px;
}

.article-card__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.article-card__meta span + span::before {
    content: '\2022';
    margin: 0 8px;
    opacity: 0.5;
}


/* ==========================================================================
   23. FEATURED ARTICLE (Dark Card)
   ========================================================================== */

.featured-article {
    background: var(--color-primary-dark);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.featured-article__body {
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-article__category {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange);
    margin-bottom: 16px;
}

.featured-article__title {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 14px;
}

.featured-article__title a {
    color: inherit;
}

.featured-article__text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    margin-bottom: 24px;
}

.featured-article__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.featured-article__image {
    position: relative;
    min-height: 380px;
}

.featured-article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   24. OFFICE GRID
   ========================================================================== */

.office-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--color-border);
}

.office-grid__item {
    padding: 36px 30px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.office-grid__item:nth-child(4n) {
    border-right: none;
}

/* Last row no bottom border */
.office-grid__item:nth-last-child(-n+4) {
    border-bottom: none;
}

.office-grid__item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.office-grid__city {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 6px;
}

.office-grid__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.office-grid__details {
    margin-top: 14px;
    font-size: 14px;
    color: var(--color-body-text);
    line-height: 1.65;
}


/* ==========================================================================
   25. BPO COMPARISON
   ========================================================================== */

.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.comparison__col {
    padding: 44px;
}

.comparison__col--light {
    background: var(--color-card-bg);
}

.comparison__col--dark {
    background: var(--gradient-dark-panel);
    color: var(--color-white);
}

.comparison__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.comparison__col--light .comparison__title {
    color: var(--color-primary-dark);
}

.comparison__col--dark .comparison__title {
    color: var(--color-white);
}

.comparison__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.55;
}

.comparison__col--light .comparison__item {
    color: var(--color-body-text);
}

.comparison__col--dark .comparison__item {
    color: rgba(255, 255, 255, 0.7);
}

.comparison__prefix {
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1.55;
}

.comparison__col--light .comparison__prefix {
    color: var(--color-muted);
}

.comparison__col--dark .comparison__prefix {
    color: var(--color-orange);
}


/* ==========================================================================
   26. NEWSLETTER SIGNUP
   ========================================================================== */

.newsletter {
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    padding: 44px;
}

.newsletter__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 8px;
}

.newsletter__text {
    font-size: 15px;
    color: var(--color-body-text);
    margin-bottom: 24px;
}

.newsletter__form {
    display: flex;
    gap: 12px;
}

.newsletter__input {
    flex: 1;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-input);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter__input::placeholder {
    color: var(--color-label);
}

.newsletter__input:focus {
    border-color: var(--color-primary-dark);
}


/* ==========================================================================
   27. CALCULATOR SECTION
   ========================================================================== */

.calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.calculator__form {
    padding: 10px 0;
}

.calculator__results {
    background: var(--gradient-dark-panel);
    border-radius: var(--radius-panel);
    padding: 44px;
    color: var(--color-white);
}

.calculator__result-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 6px;
}

.calculator__result-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
}

.calculator__result-total {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-orange);
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.calculator__result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
}

.calculator__result-row:last-child {
    border-bottom: none;
}

.calculator__result-label {
    color: rgba(255, 255, 255, 0.55);
}

.calculator__result-value {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-white);
}

/* Custom range slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-input-border);
    border-radius: 2px;
    outline: none;
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-orange);
    cursor: pointer;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-orange);
    cursor: pointer;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark range slider */
.dark-panel input[type="range"] {
    background: rgba(255, 255, 255, 0.12);
}

.dark-panel input[type="range"]::-webkit-slider-thumb {
    border-color: var(--color-primary-dark);
}


/* ==========================================================================
   28. GRIDS & LAYOUT UTILITIES
   ========================================================================== */

.grid {
    display: grid;
    gap: 30px;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--gap-sm { gap: 16px; }
.grid--gap-md { gap: 24px; }
.grid--gap-lg { gap: 40px; }
.grid--gap-xl { gap: 60px; }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--column { flex-direction: column; }
.flex--gap-sm { gap: 12px; }
.flex--gap-md { gap: 20px; }
.flex--gap-lg { gap: 30px; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.mx-auto { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   29. ANIMATIONS (Intersection Observer / scroll reveals)
   ========================================================================== */

/* Fade-in from below */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Stagger children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

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

/* Fade in from left */
.reveal--left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in from right */
.reveal--right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
.reveal--scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================
   30. WORDPRESS / GUTENBERG BLOCK STYLES
   ========================================================================== */

/* Gutenberg alignment */
.wp-block-image,
.wp-block-gallery,
.wp-block-video,
.wp-block-embed {
    margin-bottom: 2em;
}

.wp-block-image img {
    border-radius: var(--radius-btn);
}

.wp-block-image.alignfull img {
    border-radius: 0;
}

/* Gutenberg headings */
.wp-block-heading {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
    margin-bottom: 0.6em;
}

/* Gutenberg paragraphs */
.wp-block-paragraph {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-body-text);
    margin-bottom: 1.5em;
}

/* Gutenberg lists */
.wp-block-list {
    padding-left: 1.4em;
    margin-bottom: 1.5em;
}

.wp-block-list li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-body-text);
    margin-bottom: 0.5em;
    list-style: disc;
}

.wp-block-list--ordered li {
    list-style: decimal;
}

/* Gutenberg quote */
.wp-block-quote {
    border-left: 3px solid var(--color-orange);
    padding: 20px 30px;
    margin: 2em 0;
    background: var(--color-card-bg);
    border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}

.wp-block-quote p {
    font-size: 17px;
    font-style: italic;
    color: var(--color-primary-dark);
    line-height: 1.7;
}

.wp-block-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    color: var(--color-muted);
}

/* Gutenberg separator */
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2.5em 0;
}

/* Gutenberg table */
.wp-block-table {
    overflow-x: auto;
    margin-bottom: 2em;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
    text-align: left;
}

.wp-block-table th {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.wp-block-table td {
    color: var(--color-body-text);
}

/* Gutenberg code */
.wp-block-code {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 24px 30px;
    border-radius: var(--radius-btn);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    overflow-x: auto;
    margin-bottom: 2em;
}

/* Gutenberg buttons */
.wp-block-button .wp-block-button__link {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 14px 28px;
    border-radius: var(--radius-input);
    background: var(--color-orange);
    color: var(--color-primary-dark);
    transition: all var(--transition);
}

.wp-block-button .wp-block-button__link:hover {
    background: var(--color-orange-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* Gutenberg cover */
.wp-block-cover {
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 2em;
}

/* Gutenberg columns */
.wp-block-columns {
    gap: 30px;
    margin-bottom: 2em;
}

/* Gutenberg group */
.wp-block-group {
    margin-bottom: 2em;
}

/* Article content wrapper */
.entry-content {
    max-width: 760px;
    margin: 0 auto;
}

.entry-content > *:first-child {
    margin-top: 0;
}


/* ==========================================================================
   31. SINGLE POST / ARTICLE
   ========================================================================== */

.single-header {
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.single-header__category {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange);
    margin-bottom: 16px;
    display: inline-block;
}

.single-header__title {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-primary-dark);
    margin-bottom: 16px;
    line-height: 1.1;
}

.single-header__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.single-header__meta span + span::before {
    content: '\2022';
    margin: 0 10px;
    opacity: 0.5;
}

.single-featured {
    margin-bottom: 50px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.single-featured img {
    width: 100%;
    height: auto;
}


/* ==========================================================================
   32. PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-btn);
    color: var(--color-body-text);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.pagination a:hover {
    background: var(--color-card-bg);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.pagination .current {
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
}


/* ==========================================================================
   33. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    padding: 20px 0;
}

.breadcrumbs a {
    color: var(--color-muted);
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--color-primary-dark);
}

.breadcrumbs__separator {
    color: var(--color-label);
    font-size: 10px;
}


/* ==========================================================================
   34. BADGES / TAGS
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 6px 12px;
    border-radius: 6px;
}

.badge--orange {
    background: rgba(247, 148, 51, 0.12);
    color: var(--color-orange);
}

.badge--dark {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.badge--light {
    background: var(--color-card-bg);
    color: var(--color-body-text);
}


/* ==========================================================================
   35. TOOLTIPS
   ========================================================================== */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
    z-index: 100;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   36. LOADING / SKELETON
   ========================================================================== */

.skeleton {
    background: linear-gradient(90deg, var(--color-card-bg) 25%, #E8E8E5 50%, var(--color-card-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-btn);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ==========================================================================
   37. SCROLL PROGRESS BAR (optional)
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-orange);
    z-index: 1001;
    transition: width 0.1s linear;
}


/* ==========================================================================
   38. SITE MAIN & FOOTER WRAPPER
   ========================================================================== */

.site-main {
    min-height: 100vh;
}

.site-footer {
    background: var(--gradient-cta-footer);
    color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   39. NAV PILL LOGO TEXT
   ========================================================================== */

.nav-pill__logo-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.02em;
    text-decoration: none;
}


/* ==========================================================================
   40. PARTNER GRID
   ========================================================================== */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.partner-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 30px;
    border-left: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.partner-grid__item:first-child {
    border-left: none;
}

.partner-grid__item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.partner-grid__item img {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
    opacity: 0.45;
    transition: opacity var(--transition);
    filter: grayscale(100%);
}

.partner-grid__item:hover img {
    opacity: 0.75;
    filter: grayscale(0%);
}


/* ==========================================================================
   41. CARD SUB-ELEMENTS
   ========================================================================== */

.card__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    margin-bottom: 16px;
}

.card--dark .card__number {
    color: var(--color-orange);
}

.card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange);
    margin-bottom: 12px;
}

.card__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    margin-bottom: 12px;
}

.card__excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-body-text);
    margin-bottom: 20px;
}

.card--dark .card__excerpt {
    color: rgba(255, 255, 255, 0.6);
}

.card__description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-body-text);
    margin-bottom: 20px;
}

.card--dark .card__description {
    color: rgba(255, 255, 255, 0.6);
}

.card__image {
    margin: 20px -34px;
    overflow: hidden;
}

.card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__role {
    font-size: 14px;
    color: var(--color-body-text);
    margin-bottom: 4px;
}

.card__area {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card__list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-body-text);
}

.card__list-item--positive {
    color: var(--color-body-text);
}

.card__list-item--positive .card__list-prefix {
    color: var(--color-orange);
    font-weight: 600;
}

.card__list-item--negative {
    color: var(--color-muted);
}

.card__list-item--negative .card__list-prefix {
    color: var(--color-muted);
    font-weight: 600;
}

.card__list-prefix {
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1.55;
}

.card--dark .card__list-item {
    color: rgba(255, 255, 255, 0.7);
}

.card--dark .card__list-item--positive .card__list-prefix {
    color: var(--color-orange);
}


/* ==========================================================================
   42. TAB BAR / FILTER PILLS
   ========================================================================== */

.tab-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tab-bar__pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 11px 18px;
    border-radius: var(--radius-btn);
    border: 1px solid #DCDCD8;
    color: #9A9AA0;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-bar__pill:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.tab-bar__pill--active {
    background: var(--color-tab-active-bg);
    color: var(--color-primary-dark);
    border-color: var(--color-tab-active-bg);
}


/* ==========================================================================
   43. CALCULATOR FIELDS
   ========================================================================== */

.calculator__inputs {
    padding: 10px 0;
}

.calculator__field {
    margin-bottom: 24px;
}

.calculator__field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.calculator__field input,
.calculator__field select {
    width: 100%;
    padding: 14px 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-primary-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-input-border);
    outline: none;
    transition: border-color var(--transition-fast);
}

.calculator__field input::placeholder {
    color: var(--color-label);
}

.calculator__field input:focus,
.calculator__field select:focus {
    border-bottom-color: var(--color-primary-dark);
}

.calculator__field select {
    appearance: none;
    cursor: pointer;
}

.calculator__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 24px 0;
}

.calculator__email-form {
    margin-top: 16px;
}

.calculator__email-form .calculator__field label {
    color: rgba(255, 255, 255, 0.45);
}

.calculator__email-form .calculator__field input {
    color: var(--color-white);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.calculator__email-form .calculator__field input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.calculator__email-form .calculator__field input:focus {
    border-bottom-color: var(--color-orange);
}

.calculator__results-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 24px;
}

.calculator__results-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.calculator__results-big {
    display: block;
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.calculator__results-note {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 30px;
}


/* ==========================================================================
   44. SISTEMA SECTION
   ========================================================================== */

.sistema__layers {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sistema__layer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.sistema__layer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.sistema__layer-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
}

.sistema__layer-content {
    flex: 1;
}

.sistema__layer-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 6px;
}

.sistema__layer-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-body-text);
}

.sistema__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sistema__visual img {
    width: 100%;
    border-radius: var(--radius-card);
}

.sistema__placeholder {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    border: 2px dashed var(--color-border);
}


/* ==========================================================================
   45. PLATAFORMA CARDS
   ========================================================================== */

.plataforma__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


/* ==========================================================================
   46. QUOTE / BLOCKQUOTE
   ========================================================================== */

.quote {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.quote__text {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.quote__attribution {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
}


/* ==========================================================================
   47. CONTACT FORM
   ========================================================================== */

.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.contact-form__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
}

.contact-form__field--full {
    grid-column: 1 / -1;
}

.contact-form__field label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    margin-bottom: 8px;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
    border-bottom-color: var(--color-orange);
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form__field select {
    appearance: none;
    cursor: pointer;
}

.contact-form__privacy {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.contact-form__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

.contact-form__info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form__info-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}

.contact-form__info-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.contact-form__info-value:hover {
    color: var(--color-orange);
}


/* ==========================================================================
   48. ACCORDION ALIASES
   ========================================================================== */

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 20px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary-dark);
    line-height: 1.35;
    padding: 0;
}

.accordion__trigger::after {
    content: '+';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #B4B4B9;
    transition: transform var(--transition);
}

.accordion__item.is-open .accordion__trigger::after {
    transform: rotate(45deg);
}

.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.accordion__panel[hidden] {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

.accordion__item.is-open .accordion__panel {
    max-height: 600px;
    padding-top: 16px;
}

.accordion__panel p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 760px;
}


/* ==========================================================================
   49. STAT (template alias for stat-card)
   ========================================================================== */

.stat {
    text-align: center;
    padding: 30px 20px;
}

.stat__value,
.stat__number {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 600;
    color: var(--color-primary-dark);
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.stat__label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stat__text {
    font-size: 15px;
    color: var(--color-body-text);
    line-height: 1.6;
}

.dark-panel .stat__value,
.dark-panel .stat__number {
    color: var(--color-white);
}

.dark-panel .stat__label {
    color: rgba(255, 255, 255, 0.5);
}

.dark-panel .stat__text {
    color: rgba(255, 255, 255, 0.6);
}

.card--dark .stat__value,
.card--dark .stat__number {
    color: var(--color-orange);
}


/* ==========================================================================
   50. GRID--5
   ========================================================================== */

.grid--5 {
    grid-template-columns: repeat(5, 1fr);
}


/* ==========================================================================
   51. INFORMES / REPORTS LIST
   ========================================================================== */

.informes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.informes-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.informes-list__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.informes-list__info {
    flex: 1;
}

.informes-list__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 4px;
}

.informes-list__size {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.informes-image {
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.informes-image img {
    width: 100%;
    height: auto;
}


/* ==========================================================================
   52. DARK PANEL CONTENT / MEDIA
   ========================================================================== */

.dark-panel__content {
    flex: 1;
}

.dark-panel__media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-panel__media img {
    width: 100%;
    border-radius: var(--radius-card);
}

.dark-panel__placeholder {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   53. SECTION HEADER WRAPPER & EMPTY STATE
   ========================================================================== */

.section__header {
    margin-bottom: 60px;
}

.section__empty {
    padding: 40px;
    text-align: center;
    font-size: 15px;
    color: var(--color-muted);
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
}


/* ==========================================================================
   54. ARTICLE CARD ALIASES
   ========================================================================== */

.article-card__tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange);
    margin-bottom: 12px;
    display: inline-block;
}

.article-card__title--lg {
    font-size: 28px;
}


/* ==========================================================================
   55. CARD--DARK BODY / IMAGE (featured article variant)
   ========================================================================== */

.card--dark__body {
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card--dark__image {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

.card--dark__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   56. NEWSLETTER ADDITIONS
   ========================================================================== */

.newsletter__copy {
    margin-bottom: 24px;
}

.newsletter__fields {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.newsletter__form-wrap {
    display: flex;
    gap: 12px;
}


/* ==========================================================================
   57. TIMELINE DESCRIPTION ALIAS
   ========================================================================== */

.timeline__description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-body-text);
}


/* ==========================================================================
   58. CONTACT INFO (page-contacto aliases)
   ========================================================================== */

.contact__info {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* ==========================================================================
   59. SCREEN READER TEXT
   ========================================================================== */

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


/* ==========================================================================
   60. FOOTER CTA SECTION
   ========================================================================== */

.footer-cta {
    position: relative;
}

.footer-cta__bg {
    clip-path: polygon(0 54px, 3.5% 0, 96.5% 0, 100% 54px, 100% 100%, 0 100%);
    padding: 140px var(--container-padding) 80px;
    text-align: center;
}

.footer-cta__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer-cta__heading {
    font-family: var(--font-heading);
    font-size: 74px;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: -2.22px;
    line-height: 79.92px;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.footer-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    padding: 20px 34px;
    border-radius: 12px;
    transition: all var(--transition);
}

.footer-cta__button:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.footer-cta__button-accent {
    color: var(--color-orange);
}


/* ==========================================================================
   61. FOOTER GRID
   ========================================================================== */

.footer-grid {
    padding: 0 0 60px;
}

.footer-grid__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 50px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-padding) 0;
}

.footer-grid__col {
    display: flex;
    flex-direction: column;
}

.footer-grid__col--brand {
    padding-right: 20px;
}

.footer-grid__logo {
    margin-bottom: 44px;
}

.footer-grid__logo img {
    height: 30px;
    width: auto;
}

.footer-grid__logo-text {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
}

.footer-grid__badge {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    max-width: 300px;
}

/* Certifications in brand column: "B™" badge + description, with top border */
.footer-grid__certs {
    width: 120px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-grid__cert-badge {
    display: block;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    line-height: 1.2;
    margin-bottom: 10px;
}

.footer-grid__cert-lines {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

/* "¿Listo para...?" text in HABLEMOS */
.footer-grid__ready {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    line-height: 1.4;
    margin: 0 0 20px;
}

.footer-grid__title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

.footer-grid__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-grid__list li a {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    transition: color var(--transition-fast);
}

.footer-grid__list li a:hover {
    color: var(--color-orange);
}

.footer-grid__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 10px;
    transition: color var(--transition-fast);
}

.footer-grid__phone:hover {
    color: var(--color-orange);
}

.footer-grid__phone-icon {
    flex-shrink: 0;
    color: var(--color-orange);
}

.footer-grid__cta-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 24px;
}

.footer-grid__social {
    display: flex;
    gap: 10px;
}

.footer-grid__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--color-white);
    transition: background var(--transition-fast);
}

.footer-grid__social-link:hover {
    background: rgba(255, 255, 255, 0.18);
}

.footer-grid__social-icon {
    width: 18px;
    height: 18px;
}


/* ==========================================================================
   62. FOOTER BOTTOM BAR
   ========================================================================== */

.footer-bottom {
    padding: 0;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 26px var(--container-padding);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom__copy {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom__links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.footer-bottom__link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--transition-fast);
}

.footer-bottom__link:hover {
    color: rgba(255, 255, 255, 0.75);
}

.footer-bottom__separator {
    color: rgba(255, 255, 255, 0.25);
    font-size: 14px;
}


/* ==========================================================================
   63. SOLUTION CARDS (with image on top)
   ========================================================================== */

.card--solution {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card--solution:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card__image--top {
    margin: 0;
    height: 220px;
    overflow: hidden;
}

.card__image--top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card--solution:hover .card__image--top img {
    transform: scale(1.03);
}

.card__body {
    padding: 28px 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.card__body .card__number {
    margin-bottom: 4px;
}

.card__body .card__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
    letter-spacing: -0.48px;
    margin-bottom: 8px;
}

.card__body .card__excerpt {
    flex: 1;
    margin-bottom: 20px;
}


/* ==========================================================================
   64. CALCULATOR — improved matching design
   ========================================================================== */

.calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    background: var(--color-card-bg);
    border-radius: var(--radius-panel);
    overflow: hidden;
}

.calculator__form {
    padding: 44px 40px;
}

.calculator__form-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary-dark);
    margin-bottom: 24px;
}

.calculator__results {
    background: var(--gradient-dark-panel);
    color: var(--color-white);
    padding: 44px 40px;
    align-self: stretch;
}

.calculator__results-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    margin: 20px 0 14px;
}

.calculator__results-cta {
    margin-top: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
}

.calculator__results-cta strong {
    color: var(--color-white);
}

.calculator__result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
}

.calculator__result-row:last-child { border-bottom: none; }

.calculator__result-label {
    color: rgba(255, 255, 255, 0.7);
}

.calculator__result-value {
    color: var(--color-orange);
    font-weight: 600;
    font-family: var(--font-mono);
}

.calculator__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.calculator__range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--color-muted);
}

.calculator__field input[type="range"] {
    width: 100%;
    accent-color: var(--color-orange);
    padding: 12px 0;
}

.btn--whatsapp {
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 14px 22px;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn--whatsapp:hover {
    background: #1DA851;
    transform: translateY(-1px);
}


/* ==========================================================================
   65. CENTERED SECTION HEADER
   ========================================================================== */

.section__header--center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.section__header--center .section-header__text {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   FASE 11 — FAQ (pixel-perfect from Framer design)
   2 columns: left title+desc, right tabs+accordion. Light bg.
   ========================================================================== */

.faq-section {
    padding: 20px 0 170px;
    background: var(--color-page-bg);
}

.faq-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 90px;
    align-items: start;
}

/* Left aside (sticky title) */
.faq-section__aside {
    position: sticky;
    top: 120px;
}

.faq-section__title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin: 0 0 26px;
}

.faq-section__desc {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    line-height: 25.6px;
    margin: 0;
    max-width: 360px;
}

/* Tabs */
.faq-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.faq-tab {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: rgb(154, 154, 160);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.faq-tab:hover {
    color: rgb(23, 23, 63);
}

.faq-tab.is-active {
    background: rgb(229, 229, 226);
    color: rgb(23, 23, 63);
    font-weight: 600;
}

/* Accordion */
.faq-accordion {
    margin-top: 8px;
}

.faq-item {
    border-bottom: 1px solid rgba(23, 23, 63, 0.1);
}

.faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 24px 0;
    text-align: left;
}

.faq-item__q {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -0.2px;
    line-height: 1.35;
}

/* +/- icon */
.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    background: rgb(23, 23, 63);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq-item__icon::before {
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
}

.faq-item__icon::after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 20px;
}

.faq-item.is-open .faq-item__icon::after {
    transform: scaleY(0);
    opacity: 0;
}

.faq-item__panel {
    overflow: hidden;
    padding-bottom: 4px;
}

.faq-item__answer {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    line-height: 26px;
    padding: 0 60px 28px 0;
}

.faq-item__answer p {
    margin: 0 0 12px;
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   FASE 10 — CONTACT FORM (pixel-perfect from Framer design)
   Light bg. Centered header. Left: intro+bullets. Right: dark form panel.
   ========================================================================== */

.contact-section {
    padding: 0 0 150px;
    background: var(--color-page-bg);
}

.contact-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;
}

.contact-section__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -1.56px;
    line-height: 59.8px;
    text-align: center;
    margin: 0 auto 90px;
    max-width: 860px;
}

.contact-section__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: start;
}

/* Left aside */
.contact-section__intro {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    color: rgb(51, 51, 62);
    line-height: 27.2px;
    margin: 0 0 34px;
}

.contact-section__bullets {
    list-style: none;
    margin: 0 0 44px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-section__bullet {
    position: relative;
    padding-left: 30px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: rgb(23, 23, 63);
    line-height: 1.5;
}

.contact-section__bullet::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-orange);
}

.contact-section__trust-label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    color: rgb(139, 139, 146);
    margin: 0 0 20px;
}

.contact-section__trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
}

.contact-section__trust-logo {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: rgb(185, 185, 190);
    white-space: nowrap;
}

.contact-section__trust-img {
    max-height: 28px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Right dark form panel */
.contact-panel {
    background: linear-gradient(150deg, rgb(29, 29, 69), rgb(19, 19, 49));
    border-radius: 20px;
    padding: 44px 46px;
}

.contact-panel__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.contact-panel__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.contact-panel__field label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

.contact-panel__field input,
.contact-panel__field select {
    height: 32px;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    color: rgb(255, 255, 255);
    outline: none;
    transition: border-bottom-color 0.15s ease;
}

.contact-panel__field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.contact-panel__field input:focus,
.contact-panel__field select:focus {
    border-bottom-color: var(--color-orange);
}

.contact-panel__field select {
    appearance: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
}

.contact-panel__field select option {
    color: rgb(23, 23, 63);
}

.contact-panel__btn {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.contact-panel__btn:hover {
    background: var(--color-orange);
    color: rgb(23, 23, 63);
}


/* ==========================================================================
   CONTACTO (pagina) — seccion contacto  [values 1:1 from design]
   ========================================================================== */
#contacto-form.contact-section {
    padding: 140px 0 120px;
}

#contacto-form .contact-section__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.contact-section__grid--contacto {
    grid-template-columns: 610fr 640fr;
    gap: 70px;
}

/* Bullets con barra naranja a la izquierda */
.cont-bullets {
    border-left: 2px solid var(--color-orange);
    padding-left: 24px;
    margin-bottom: 0;
}

/* Datos de contacto (filas label / valor con divisores) */
.cont-info {
    margin-top: 46px;
}

.cont-info__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgb(228, 228, 225);
}

.cont-info__row:first-child {
    border-top: 1px solid rgb(228, 228, 225);
}

.cont-info__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(168, 168, 173);
}

.cont-info__value {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

a.cont-info__value:hover {
    color: var(--color-orange);
}

/* Textarea dentro del panel oscuro */
.contact-panel__field textarea {
    min-height: 56px;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    color: rgb(255, 255, 255);
    outline: none;
    resize: vertical;
    transition: border-bottom-color 0.15s ease;
}

.contact-panel__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.contact-panel__field textarea:focus {
    border-bottom-color: var(--color-orange);
}

/* Boton solido naranja (pagina contacto) */
.contact-panel__btn--solid {
    background: var(--color-orange);
    color: var(--color-primary-dark);
}

.contact-panel__btn--solid:hover {
    background: var(--color-orange-hover);
    color: var(--color-primary-dark);
}

.contact-panel__privacy {
    margin: 18px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}


/* ==========================================================================
   CONTACTO — Presencia (8 nodos)  [values 1:1 from design]
   ========================================================================== */
.presencia {
    padding: 30px 0 120px;
}

.presencia__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: rgb(168, 168, 173);
    margin-bottom: 16px;
}

.presencia__title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.56px;
    line-height: 58.24px;
    color: var(--color-primary-dark);
    margin: 0;
}

.presencia__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: rgb(85, 85, 94);
    max-width: 680px;
    margin: 24px 0 0;
}

.presencia__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 70px;
    background: rgb(228, 228, 225);
    border: 1px solid rgb(228, 228, 225);
    border-radius: 14px;
    overflow: hidden;
}

.presencia__node {
    background: rgb(244, 244, 242);
    padding: 32px 28px;
}

.presencia__node-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.76px;
    color: rgb(168, 168, 173);
    margin-bottom: 32px;
}

.presencia__node-city {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.48px;
    line-height: normal;
    color: var(--color-primary-dark);
    margin: 0;
}


/* ==========================================================================
   FASE 9 — QUOTE (pixel-perfect from Framer design)
   Dark solid #101024, ~780px, centered logo + quote 40px + attribution
   ========================================================================== */

.quote-section {
    position: relative;
    background: rgb(16, 16, 36);
    min-height: 780px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 60px;
    background-size: cover;
    background-position: center;
}

.quote-section--image {
    background-color: rgb(16, 16, 36);
}

.quote-section__mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 16, 36, 0.88) 0%, rgba(16, 16, 36, 0.78) 50%, rgba(16, 16, 36, 0.9) 100%);
    pointer-events: none;
}

.quote-section__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quote-section__logo {
    margin-bottom: 40px;
}

.quote-section__logo img {
    height: 40px;
    width: auto;
}

.quote-section__text {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    letter-spacing: -0.8px;
    line-height: 52px;
    margin: 0;
    max-width: 900px;
}

.quote-section__attribution {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-section__role {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    color: rgb(255, 255, 255);
}

.quote-section__org {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   FASE 7 — PLATAFORMA (pixel-perfect from Framer design)
   Light bg. Centered header. Tabs. Slider of big cards 700x600 w/ bg image + mask
   ========================================================================== */

.plataforma-section {
    padding: 0 0 150px;
    background: var(--color-page-bg);
    overflow: hidden;
}

.plataforma-section__container {
    max-width: 1440px;
    margin: 0 auto;
}

.plataforma-section__header {
    text-align: center;
    padding: 0 60px;
    margin-bottom: 50px;
}

.plataforma-section__eyebrow {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    margin: 0 0 16px;
}

.plataforma-section__title {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -1.1px;
    line-height: 50.6px;
    margin: 0;
}

.plataforma-section__desc {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    line-height: 24px;
    max-width: 760px;
    margin: 22px auto 0;
}

/* Controls row: tabs (left) + nav arrows (right) — padding 24px like design */
.plataforma-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    margin-bottom: 24px;
}

.plataforma-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.plataforma-nav__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(229, 229, 226);
    border: none;
    border-radius: 8px;
    color: rgb(23, 23, 63);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plataforma-nav__btn:hover {
    background: rgb(215, 215, 211);
}

/* Tabs */
.plataforma-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.plataforma-tab {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    color: rgb(154, 154, 160);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.plataforma-tab:hover {
    color: rgb(23, 23, 63);
}

.plataforma-tab.is-active {
    background: rgb(229, 229, 226);
    color: rgb(23, 23, 63);
    font-weight: 600;
}

/* Slider of big cards — padding 24px so cards peek at the edges like design */
.plataforma-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 24px;
    scrollbar-width: none;
    scroll-padding-left: 24px;
}

.plataforma-slider::-webkit-scrollbar {
    display: none;
}

/* Cards shrink by position: active = 700, next = 520, rest = 420 */
.plataforma-card {
    position: relative;
    flex: 0 0 420px;
    width: 420px;
    height: 600px;
    border-radius: 18px;
    overflow: hidden;
    background-color: rgb(58, 58, 80);
    background-size: cover;
    background-position: center;
    display: flex;
    transition: flex-basis 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.plataforma-card.is-active {
    flex-basis: 700px;
    width: 700px;
}

.plataforma-card.is-active + .plataforma-card {
    flex-basis: 520px;
    width: 520px;
}

/* Empty card (no image): light gray placeholder like design's 2nd card */
.plataforma-card--empty {
    background-color: rgb(217, 217, 214);
}

.plataforma-card__mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 15, 35, 0.75) 0%, rgba(15, 15, 35, 0.3) 40%, rgba(15, 15, 35, 0.55) 100%);
    pointer-events: none;
}

/* Body: fixed width (of expanded card) so text clips instead of reflowing when card shrinks */
.plataforma-card__body {
    position: relative;
    z-index: 2;
    padding: 44px 46px;
    width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.plataforma-card__top {
    display: flex;
    flex-direction: column;
}

.plataforma-card__tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 16px;
}

.plataforma-card__title {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    letter-spacing: -0.68px;
    line-height: 40.8px;
    margin: 0 0 20px;
}

.plataforma-card__desc {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 24px;
    margin: 0;
    max-width: 90%;
}

.plataforma-card__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: rgb(23, 23, 63);
    background: rgb(244, 244, 242);
    padding: 15px 34px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.plataforma-card__btn:hover {
    background: #ffffff;
}

/* Empty card: dark text on light bg */
.plataforma-card--empty .plataforma-card__title {
    color: rgb(23, 23, 63);
}

.plataforma-card--empty .plataforma-card__desc {
    color: rgba(23, 23, 63, 0.7);
}

.plataforma-card--empty .plataforma-card__tag {
    color: rgb(154, 154, 160);
}

.plataforma-card--empty .plataforma-card__btn {
    background: rgb(23, 23, 63);
    color: rgb(255, 255, 255);
}


/* ==========================================================================
   FASE 6 — SISTEMA (pixel-perfect from Framer design)
   Light bg. Centered header. Grid: accordion (left) + image 655x640 r16 (right)
   ========================================================================== */

.sistema-section {
    padding: 130px 0 150px;
    background: var(--color-page-bg);
}

.sistema-section__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
}

.sistema-section__header {
    text-align: center;
    margin-bottom: 80px;
}

.sistema-section__eyebrow {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    margin: 0 0 18px;
}

.sistema-section__title {
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -1.74px;
    line-height: 63.8px;
    margin: 0 auto;
    max-width: 900px;
}

.sistema-section__desc {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    line-height: 25.6px;
    max-width: 680px;
    margin: 28px auto 0;
}

.sistema-section__grid {
    display: grid;
    grid-template-columns: 1fr 655px;
    gap: 70px;
    align-items: start;
}

/* Layers list — each: number (left) + paragraph (name bold + desc gray, inline) */
.sistema-layers {
    display: flex;
    flex-direction: column;
}

.sistema-layer {
    display: flex;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(23, 23, 63, 0.08);
}

.sistema-layer:first-child {
    border-top: 1px solid rgba(23, 23, 63, 0.08);
}

.sistema-layer__num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: rgb(214, 214, 217);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    padding-top: 6px;
}

.sistema-layer--first .sistema-layer__num {
    color: rgb(180, 180, 185);
}

.sistema-layer__text {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

.sistema-layer__name {
    font-weight: 600;
    color: rgb(23, 23, 63);
}

.sistema-layer__desc {
    font-weight: 500;
    color: rgb(201, 201, 204);
}

/* First layer: bigger name on its own line */
.sistema-layer--first .sistema-layer__name {
    display: block;
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 30px;
    margin-bottom: 10px;
}

/* Visual (image) with brand mask overlay */
.sistema-section__visual {
    position: relative;
    height: 640px;
    border-radius: 16px;
    overflow: hidden;
}

.sistema-section__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Brand mask/overlay on top of the image */
.sistema-section__mask {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(23, 23, 63, 0.45) 0%, rgba(23, 23, 63, 0) 45%),
        linear-gradient(0deg, rgba(23, 23, 63, 0.55) 0%, rgba(23, 23, 63, 0) 40%);
    pointer-events: none;
}

.sistema-section__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(150deg, #E8E8E5, #DCDCD8);
    padding: 40px;
    text-align: center;
}

.sistema-section__placeholder-text {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(150, 150, 155);
}


/* ==========================================================================
   FASE 5 — CALCULATOR (pixel-perfect from Framer design)
   Container: 1440x968, padding 60px 60px 160px
   Grid: form 615px + gap 60px + dark panel 645px = 1320
   Dark panel: linear-gradient 150deg #1D1D45→#131331, radius 20px, padding 44px 46px
   ========================================================================== */

.calc-section {
    padding: 60px 60px 160px;
    background: var(--color-page-bg);
}

.calc-section__container {
    max-width: 1440px;
    margin: 0 auto;
}

.calc-section__subtitle {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    text-align: center;
    margin: 0 0 18px;
    line-height: normal;
}

.calc-section__title {
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -1.74px;
    line-height: 63.8px;
    text-align: center;
    margin: 0 0 40px;
}

.calc-section__grid {
    display: grid;
    grid-template-columns: 615fr 645fr;
    gap: 60px;
    align-items: stretch;
}

/* ---- Form (left) ---- */
.calc-form {
    padding: 44px 0;
}

.calc-form__eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    margin-bottom: 6px;
}

.calc-form__heading {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    letter-spacing: -0.52px;
    line-height: 1.2;
    margin: 0 0 34px;
}

.calc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.calc-form__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.calc-form__field label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    color: rgb(23, 23, 63);
    margin-bottom: 8px;
    line-height: 1.3;
}

.calc-form__label-desc {
    color: rgb(143, 143, 168);
    font-weight: 400;
}

/* Design: underline inputs only — no box, no radius, transparent bg */
.calc-form__field input[type="number"],
.calc-form__field input[type="text"] {
    height: 28px;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(216, 216, 212);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    color: rgb(85, 85, 94);
    outline: none;
    transition: border-bottom-color 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.calc-form__field input[type="number"]:focus,
.calc-form__field input[type="text"]:focus {
    border-bottom-color: var(--color-orange);
}

.calc-form__field input::placeholder {
    color: rgb(168, 168, 173);
}

.calc-form__range {
    width: 100%;
    accent-color: var(--color-orange);
    height: 4px;
    margin: 12px 0 6px;
}

.calc-form__range-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: rgb(168, 168, 173);
}

/* ---- Dark Results Panel (right) ---- */
.calc-panel {
    background: linear-gradient(150deg, rgb(29, 29, 69), rgb(19, 19, 49));
    border-radius: 20px;
    padding: 44px 46px;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Hero: 2 cols — "Con Intradecon / su operación ahorra" LEFT | "$96,240 / Ahorro est.: 21%" RIGHT
   Border-bottom separator */
.calc-panel__hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.calc-panel__hero-right {
    text-align: right;
}

/* Title block: "Con Intradecon" (white) + <br> + "su operación ahorra" (gray)
   BOTH at 30px 500, same block */
.calc-panel__hero-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    letter-spacing: -0.6px;
    line-height: 36px;
}

.calc-panel__hero-title-alt {
    color: rgb(143, 143, 168);
}

.calc-panel__amount {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    letter-spacing: -0.88px;
    line-height: 1;
}

.calc-panel__pct-line {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(143, 143, 168);
    margin-top: 6px;
}

.calc-panel__pct-line strong {
    color: rgb(255, 255, 255);
    font-weight: 600;
}

/* Categories */
.calc-panel__categories {
    padding: 28px 0 30px;
}

.calc-panel__cat-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    margin: 0 0 16px;
    line-height: 1.4;
}

.calc-panel__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    gap: 20px;
}

.calc-panel__cat-left {
    flex: 1;
}

.calc-panel__cat-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    line-height: 1.35;
}

.calc-panel__cat-desc {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(143, 143, 168);
    line-height: 1.35;
    margin-left: 6px;
}

.calc-panel__cat-value {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Glass sub-panel */
.calc-panel__glass {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px 26px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calc-panel__cta {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.calc-panel__cta-heading {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    letter-spacing: -0.2px;
    line-height: 25px;
    flex-shrink: 0;
    white-space: nowrap;
}

.calc-panel__cta-text {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    color: rgb(169, 169, 190);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.calc-panel__email {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
}

.calc-panel__email-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    margin-bottom: 8px;
}

.calc-panel__email-field input {
    width: 100%;
    height: 28px;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    color: rgb(143, 143, 168);
    outline: none;
    transition: border-bottom-color 0.15s ease;
}

.calc-panel__email-field input::placeholder {
    color: rgb(143, 143, 168);
}

.calc-panel__email-field input:focus {
    border-bottom-color: var(--color-orange);
    color: rgb(255, 255, 255);
}

.calc-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    padding: 0 26px;
    border-radius: 8px;
    border: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.calc-panel__btn--send {
    background: var(--color-orange);
    color: rgb(23, 23, 63);
}

.calc-panel__btn--send:hover:not(:disabled) {
    background: #ffa64d;
}

.calc-panel__btn--send:disabled {
    opacity: 0.6;
    cursor: default;
}


/* ==========================================================================
   FASE 4 — SOLUTIONS PREVIEW (pixel-perfect from Framer design)
   Grid: 3 cols 449px, gap 22px, container 1392px | Card: 555h, bg #ECECE9
   ========================================================================== */

.solutions-preview {
    padding: 0 0 150px;
    background: var(--color-page-bg);
}

.solutions-preview__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

.solutions-preview__heading {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    line-height: 58.24px;
    letter-spacing: -1.56px;
    color: rgb(23, 23, 63);
    text-align: center;
    margin: 0 auto 70px;
    max-width: 820px;
}

.solutions-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.sol-card {
    background: rgb(236, 236, 233);
    border-radius: 18px;
    padding: 34px 34px 20px;
    display: flex;
    flex-direction: column;
    min-height: 555px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.sol-card__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: rgb(139, 139, 146);
    letter-spacing: 1.98px;
    text-transform: uppercase;
    text-align: left;
}

.sol-card__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: rgb(23, 23, 63);
    line-height: 28.8px;
    letter-spacing: -0.48px;
    margin: 16px 0 12px;
}

.sol-card__excerpt {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(85, 85, 94);
    line-height: 23.25px;
    margin: 0 0 20px;
    flex: 0 0 auto;
}

.sol-card__image {
    flex: 1;
    margin: 8px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    min-height: 200px;
}

.sol-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sol-card__button {
    display: block;
    width: 100%;
    background: rgb(226, 226, 223);
    color: rgb(23, 23, 63);
    padding: 16px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    margin-top: auto;
    transition: background 0.15s ease;
}

.sol-card__button:hover {
    background: rgb(210, 210, 205);
}


/* ==========================================================================
   FASE 3 — PARTNERS SECTION (pixel-perfect from Framer design)
   Padding: 130px 0 150px | Heading: 46px 500 -1.15px | Grid: 6 col, 207x150
   ========================================================================== */

.partners-section {
    padding: 130px 0 150px;
    background: var(--color-page-bg);
}

.partners-section__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.partners-section__heading {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 500;
    line-height: 52.9px;
    letter-spacing: -1.15px;
    color: rgb(23, 23, 63);
    text-align: center;
    margin: 0 auto 70px;
    max-width: 760px;
}

/* Institutional variant: eyebrow + bigger heading (52px) */
.partners-section__eyebrow-label {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: rgb(168, 168, 173);
    text-align: center;
    margin: 0 0 18px;
}

.partners-section__heading--lg {
    font-size: 52px;
    line-height: 58.24px;
    letter-spacing: -1.56px;
    max-width: 900px;
    margin-bottom: 80px;
}

/* Institutional grid: 5 columns */
.partners-section--institutional .partners-section__grid {
    grid-template-columns: repeat(5, 1fr);
}

.partners-section--institutional .partners-section__logo-text {
    font-size: 18px;
}

.partners-section__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    border-top: 1px solid rgba(23, 23, 63, 0.08);
    border-bottom: 1px solid rgba(23, 23, 63, 0.08);
}

.partners-section__item {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-left: 1px solid rgba(23, 23, 63, 0.08);
}

.partners-section__item:first-child {
    border-left: none;
}

.partners-section__logo-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: rgb(185, 185, 190);
    text-align: center;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.partners-section__item:hover .partners-section__logo-text {
    color: rgb(120, 120, 130);
}

.partners-section__logo-img {
    max-width: 140px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: opacity var(--transition), filter var(--transition);
}

.partners-section__item:hover .partners-section__logo-img {
    opacity: 1;
    filter: grayscale(0%);
}


/* ==========================================================================
   RESPONSIVE - TABLET (<=1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --container-padding: 40px;
    }

    h1 { font-size: 44px; }
    h2 { font-size: 38px; }
    h3 { font-size: 28px; }

    /* FAQ + Contact — tablet: single column */
    .faq-section__container,
    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .faq-section__aside {
        position: static;
    }

    .section {
        padding: 110px 0;
    }

    .section-header__title {
        font-size: 38px;
    }

    .section-header__title--lg {
        font-size: 46px;
    }

    /* Hero — tablet */
    .hero__content {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero__title {
        font-size: 52px;
        line-height: 1.05;
        letter-spacing: -1.56px;
    }

    .hero__title--xl {
        font-size: 58px;
    }

    .cta-banner__title {
        font-size: 54px;
    }

    /* Nav — hide desktop CTAs, show hamburger */
    .nav-pill__cta--white,
    .nav-pill__cta--translucent {
        display: none;
    }

    .nav-pill__icon-btn {
        margin-left: auto;
    }

    /* Grids to 2 columns */
    .grid--4,
    .cards-grid--4,
    .stats-grid,
    .team-grid,
    .timeline,
    .office-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .office-grid__item:nth-child(4n) {
        border-right: 1px solid var(--color-border);
    }

    .office-grid__item:nth-child(2n) {
        border-right: none;
    }

    .office-grid__item:nth-last-child(-n+4) {
        border-bottom: 1px solid var(--color-border);
    }

    .office-grid__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    /* Footer grid at tablet */
    .footer-grid__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-cta__heading {
        font-size: 44px;
    }

    /* Plataforma cards */
    .plataforma__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid-5 at tablet */
    .grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Quote */
    .quote__text {
        font-size: 30px;
    }

    /* Partner grid at tablet */
    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Solutions preview — tablet: 2 cols */
    .solutions-preview__heading {
        font-size: 40px;
        line-height: 46px;
        letter-spacing: -1.2px;
        margin-bottom: 50px;
    }

    .solutions-preview__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Plataforma — tablet */
    .plataforma-section__header,
    .plataforma-controls,
    .plataforma-slider {
        padding-left: 40px;
        padding-right: 40px;
    }

    .plataforma-section__title {
        font-size: 34px;
        line-height: 40px;
        letter-spacing: -0.85px;
    }

    .plataforma-card {
        flex-basis: 560px;
        height: 520px;
    }

    .plataforma-card__title {
        font-size: 28px;
        line-height: 34px;
    }

    /* Sistema — tablet */
    .sistema-section {
        padding: 90px 0 100px;
    }

    .sistema-section__container {
        padding: 0 40px;
    }

    .sistema-section__title {
        font-size: 42px;
        line-height: 46px;
        letter-spacing: -1.26px;
    }

    .sistema-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sistema-section__visual {
        height: 400px;
        order: -1;
    }

    /* Calculator — tablet */
    .calc-section {
        padding: 60px 40px 120px;
    }

    .calc-section__title {
        font-size: 44px;
        line-height: 48px;
        letter-spacing: -1.32px;
        margin-bottom: 60px;
    }

    .calc-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .calc-form {
        padding: 0;
    }

    .calc-panel {
        padding: 36px 32px;
    }

    .calc-panel__amount {
        font-size: 40px;
    }

    .calc-panel__note {
        font-size: 24px;
        line-height: 30px;
    }

    /* Partners section — tablet */
    .partners-section {
        padding: 90px 0 100px;
    }

    .partners-section__heading {
        font-size: 36px;
        line-height: 41px;
        letter-spacing: -0.9px;
        margin-bottom: 50px;
    }

    .partners-section__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .partners-section__item {
        height: 120px;
    }

    /* Nav adjustments */
    .nav-pill__nav {
        display: none;
    }

    .nav-pill__toggle {
        display: flex;
    }

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


/* ==========================================================================
   39. RESPONSIVE - MOBILE (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --container-padding: 24px;
    }

    body {
        font-size: 15px;
    }

    h1 { font-size: 36px; }
    h2 { font-size: 32px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }

    .section {
        padding: 80px 0;
    }

    .section--lg {
        padding: 100px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-header__title {
        font-size: 32px;
    }

    .section-header__title--lg {
        font-size: 38px;
    }

    /* Hero — mobile */
    .hero {
        height: 560px;
    }

    .hero--home {
        height: 620px;
    }

    .hero--inner {
        height: 440px;
    }

    .hero__content {
        padding-bottom: 40px;
    }

    /* Tag: allow wrap on mobile so it doesn't overflow */
    .hero__tag {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 14px;
        white-space: normal;
        word-break: break-word;
    }

    .hero__title {
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -0.6px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        max-width: 100%;
    }

    .hero__title--xl {
        font-size: 34px;
    }

    .hero__subtitle {
        font-size: 15px;
    }

    /* Nav pill — mobile: only logo + hamburger */
    .site-header {
        padding: 16px 16px;
    }

    .nav-pill {
        padding: 8px 8px 8px 16px;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-pill__logo-img {
        height: 30px;
    }

    .nav-pill__icon-btn,
    .nav-pill__cta--orange {
        display: none;
    }

    /* Hamburger MUST be visible on mobile */
    .nav-pill__toggle {
        display: flex !important;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Mobile drawer nav when hamburger is opened */
    .nav-pill__nav.nav--open {
        display: flex !important;
        position: fixed;
        top: 88px; /* below the pill */
        left: 16px;
        right: 16px;
        flex-direction: column;
        gap: 4px;
        background: rgba(23, 23, 48, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 14px;
        padding: 16px;
        z-index: 999;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .nav-pill__nav.nav--open .nav-pill__link {
        padding: 14px 16px;
        font-size: 16px;
        width: 100%;
        justify-content: flex-start;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* CTA Banner */
    .cta-banner {
        padding: 100px 24px 70px;
        clip-path: polygon(0 30px, 4% 0, 96% 0, 100% 30px, 100% 100%, 0 100%);
    }

    .cta-banner__title {
        font-size: 38px;
    }

    .cta-banner__text {
        font-size: 15px;
    }

    .cta-banner__actions {
        flex-direction: column;
        align-items: center;
    }

    /* All multi-column grids to single column */
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .cards-grid--2,
    .cards-grid--3,
    .cards-grid--4,
    .stats-grid,
    .team-grid,
    .timeline {
        grid-template-columns: 1fr;
    }

    /* Plataforma cards single column */
    .plataforma__cards {
        grid-template-columns: 1fr;
    }

    /* Contact form single column */
    .contact-form__fields {
        grid-template-columns: 1fr;
    }

    /* Footer grid single column */
    .footer-grid__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-cta__bg {
        padding: 100px var(--container-padding) 60px;
        clip-path: polygon(0 30px, 4% 0, 96% 0, 100% 30px, 100% 100%, 0 100%);
    }

    .footer-cta__heading {
        font-size: 36px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-bottom__links {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Partner grid single row scroll */
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-grid__item {
        min-height: 100px;
        border-left: none;
    }

    .partner-grid__item:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    /* Plataforma — mobile */
    .plataforma-section__header,
    .plataforma-controls,
    .plataforma-slider {
        padding-left: 16px;
        padding-right: 16px;
    }

    .plataforma-section__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.7px;
    }

    .plataforma-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .plataforma-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .plataforma-tabs::-webkit-scrollbar { display: none; }

    .plataforma-nav {
        display: none;
    }

    .plataforma-card {
        flex-basis: 85vw;
        height: 460px;
    }

    .plataforma-card__body {
        padding: 30px;
    }

    .plataforma-card__title {
        font-size: 24px;
        line-height: 29px;
    }

    /* FAQ — mobile: single column */
    .faq-section {
        padding: 0 0 70px;
    }

    .faq-section__container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 16px;
    }

    .faq-section__aside {
        position: static;
    }

    .faq-section__title {
        font-size: 28px;
    }

    .faq-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .faq-tabs::-webkit-scrollbar { display: none; }

    .faq-item__q {
        font-size: 17px;
    }

    /* Contact — mobile */
    .contact-section {
        padding: 0 0 60px;
    }

    .contact-section__container {
        padding: 0 16px;
    }

    .contact-section__title {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: -0.75px;
        margin-bottom: 40px;
    }

    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-panel {
        padding: 30px 24px;
    }

    .contact-panel__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Quote — mobile */
    .quote-section {
        min-height: auto;
        padding: 70px 24px;
    }

    .quote-section__text {
        font-size: 26px;
        line-height: 34px;
        letter-spacing: -0.5px;
    }

    .quote-section__logo {
        margin-bottom: 30px;
    }

    /* Sistema — mobile */
    .sistema-section {
        padding: 60px 0 70px;
    }

    .sistema-section__container {
        padding: 0 16px;
    }

    .sistema-section__header {
        margin-bottom: 50px;
    }

    .sistema-section__title {
        font-size: 30px;
        line-height: 34px;
        letter-spacing: -0.75px;
    }

    .sistema-section__desc {
        font-size: 15px;
        line-height: 23px;
    }

    .sistema-section__visual {
        height: 280px;
    }

    .sistema-layer__name {
        font-size: 18px;
    }

    .sistema-layer.is-open .sistema-layer__name {
        font-size: 20px;
    }

    .sistema-layer__desc {
        font-size: 17px;
    }

    .sistema-layer__body {
        padding-left: 40px;
    }

    /* Calculator — mobile */
    .calc-section {
        padding: 40px 16px 80px;
    }

    .calc-section__title {
        font-size: 30px;
        line-height: 34px;
        letter-spacing: -0.75px;
        margin-bottom: 40px;
    }

    .calc-form__heading {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 24px;
    }

    .calc-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .calc-panel {
        padding: 28px 24px;
    }

    .calc-panel__hero {
        flex-direction: column;
        gap: 12px;
    }

    .calc-panel__amount {
        text-align: left;
        font-size: 36px;
    }

    .calc-panel__note {
        flex-direction: column;
        align-items: flex-start;
        font-size: 22px;
        line-height: 28px;
        gap: 6px;
    }

    .calc-panel__cta {
        flex-direction: column;
        gap: 8px;
    }

    .calc-panel__email {
        grid-template-columns: 1fr;
    }

    .calc-panel__buttons {
        flex-direction: column;
    }

    .calc-panel__btn {
        width: 100%;
    }

    /* Solutions preview — mobile: 1 col */
    .solutions-preview {
        padding: 0 0 60px;
    }

    .solutions-preview__container {
        padding: 0 16px;
    }

    .solutions-preview__heading {
        font-size: 30px;
        line-height: 34px;
        letter-spacing: -0.75px;
        margin-bottom: 36px;
    }

    .solutions-preview__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sol-card {
        padding: 28px 24px 20px;
        min-height: auto;
    }

    .sol-card__title {
        font-size: 22px;
        line-height: 26px;
    }

    /* Partners section — mobile */
    .partners-section {
        padding: 60px 0 70px;
    }

    .partners-section__container {
        padding: 0 24px;
    }

    .partners-section__heading {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.7px;
        margin-bottom: 36px;
    }

    .partners-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-section__item {
        height: 90px;
    }

    .partners-section__logo-text {
        font-size: 14px;
    }

    /* Quote mobile */
    .quote__text {
        font-size: 26px;
    }

    /* Sistema layers */
    .sistema__layer {
        flex-direction: column;
    }

    /* Stat mobile */
    .stat__value,
    .stat__number {
        font-size: 40px;
    }

    /* Tab bar scroll on mobile */
    .tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 8px;
    }

    .tab-bar__pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Newsletter fields stack */
    .newsletter__fields {
        flex-direction: column;
    }

    .newsletter__form-wrap {
        flex-direction: column;
    }

    /* Dark panel content stack */
    .dark-panel--split {
        flex-direction: column;
    }

    .dark-panel__media {
        order: -1;
    }

    /* Office grid to 2 columns still */
    .office-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Featured article stack */
    .featured-article {
        grid-template-columns: 1fr;
    }

    .featured-article__image {
        min-height: 250px;
        order: -1;
    }

    .featured-article__body {
        padding: 30px;
    }

    .featured-article__title {
        font-size: 26px;
    }

    /* Comparison stack */
    .comparison {
        grid-template-columns: 1fr;
    }

    .comparison__col {
        padding: 30px;
    }

    /* Calculator stack */
    .calculator {
        grid-template-columns: 1fr;
    }

    .calculator__results {
        padding: 30px;
    }

    .calculator__form {
        padding: 30px;
    }

    .calculator__actions {
        flex-direction: column;
    }

    .calculator__actions .btn,
    .calculator__actions .btn--whatsapp {
        width: 100%;
    }

    /* Footer */
    .footer__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer__bottom-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Nav */
    .nav-pill {
        top: 16px;
        max-width: calc(100% - 32px);
    }

    .nav-pill__actions {
        gap: 4px;
    }

    .nav-pill__cta {
        padding: 8px 12px;
        font-size: 10px;
    }

    /* Hide desktop-only CTAs on mobile */
    .nav-pill__actions .nav-pill__cta:not(:first-child) {
        display: none;
    }

    /* Newsletter stack */
    .newsletter__form {
        flex-direction: column;
    }

    /* Dark panel padding */
    .dark-panel {
        padding: 30px;
    }

    /* Single post */
    .single-header__title {
        font-size: 32px;
    }

    /* Stat cards */
    .stat-card__number {
        font-size: 40px;
    }

    /* Logo grid single column */
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .logo-grid__item {
        min-height: 120px;
        border-left: none;
    }

    .logo-grid__item:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }
}


/* ==========================================================================
   40. RESPONSIVE - SMALL MOBILE (<=480px)
   ========================================================================== */

@media (max-width: 480px) {
    h1 { font-size: 30px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }

    .hero__title {
        font-size: 32px;
    }

    .hero__title--xl {
        font-size: 36px;
    }

    .section {
        padding: 60px 0;
    }

    .section-header__title {
        font-size: 28px;
    }

    .section-header__title--lg {
        font-size: 32px;
    }

    .cta-banner__title {
        font-size: 32px;
    }

    .card {
        padding: 26px;
    }

    .nav-pill {
        padding: 6px 8px;
    }

    .nav-pill__logo img {
        height: 26px;
    }

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

    .office-grid__item {
        border-right: none;
    }

    .team-member__image {
        height: 260px;
    }

    .stat-card__number {
        font-size: 36px;
    }

    /* Accordion */
    .accordion__question {
        font-size: 17px;
    }

    .accordion__trigger {
        font-size: 17px;
    }

    /* Footer CTA */
    .footer-cta__heading {
        font-size: 30px;
    }

    .footer-cta__button {
        padding: 14px 28px;
    }

    /* Partner grid */
    .partner-grid {
        grid-template-columns: 1fr;
    }

    .partner-grid__item {
        border-right: none !important;
    }

    /* Quote */
    .quote__text {
        font-size: 22px;
    }

    /* Sistema layer number */
    .sistema__layer-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    /* Stat cards */
    .stat__value,
    .stat__number {
        font-size: 36px;
    }
}


/* ==========================================================================
   41. PRINT STYLES
   ========================================================================== */

/* ==========================================================================
   BREADCRUMBS (SEO)
   ========================================================================== */

.breadcrumb {
    background: var(--color-page-bg);
    padding: 16px 60px;
}

.breadcrumb__container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--color-muted);
}

.breadcrumb__link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.breadcrumb__sep {
    margin: 0 10px;
    color: var(--color-border);
}

.breadcrumb__current {
    color: var(--color-primary-dark);
}

@media (max-width: 768px) {
    .breadcrumb {
        padding: 12px 20px;
    }
}

/* ==========================================================================
   CWV: CSS Containment — reduce paint/layout cost on self-contained sections
   ========================================================================== */

.partners-section,
.solutions-preview,
.calc-section,
.sistema-section,
.plataforma-section,
.quote-section,
.contact-section,
.faq-section {
    contain: layout style paint;
}

@media print {
    .nav-pill,
    .mobile-menu,
    .mobile-menu__overlay,
    .cta-banner,
    .footer,
    .footer-cta,
    .site-footer,
    .scroll-progress,
    .nav-pill__toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .section {
        padding: 20pt 0;
    }

    .hero {
        height: auto;
        min-height: 0;
        padding: 40pt 0;
    }

    .hero__title {
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .card,
    .article-card,
    .team-member {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}

/* Interior page heroes with photo background: stronger left-side overlay for text legibility */
.hero--inner .hero__overlay {
	background:
		linear-gradient(90deg, rgba(13, 13, 34, 0.8) 0%, rgba(13, 13, 34, 0.5) 55%, rgba(13, 13, 34, 0.15) 100%),
		linear-gradient(180deg, rgba(13, 13, 34, 0.3) 0%, rgba(13, 13, 34, 0) 30%, rgba(13, 13, 34, 0.55) 100%);
}

/* Home hero: larger, with an extra dark layer and text shadow for legibility */
.hero--home .hero__overlay {
	background:
		linear-gradient(180deg, rgba(13, 13, 34, 0.45) 0%, rgba(13, 13, 34, 0.12) 26%, rgba(13, 13, 34, 0.55) 58%, rgba(13, 13, 34, 0.93) 100%),
		radial-gradient(ellipse at 50% 88%, rgba(13, 13, 34, 0.7) 0%, rgba(13, 13, 34, 0) 68%);
}
.hero--home .hero__content .hero__title,
.hero--home .hero__content .hero__tag { max-width: 1200px; text-shadow: 0 2px 28px rgba(13, 13, 34, 0.6); }
.hero--home .hero__tag { font-size: 14px; letter-spacing: 0.22em; }
.hero--home .hero__content { padding-bottom: 96px; }
@media (min-width: 1025px) {
	.hero--home { height: max(900px, 100vh); }
	.hero--home .hero__title { font-size: 84px; line-height: 1.04; letter-spacing: -2.52px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.hero--home .hero__title { font-size: 62px; line-height: 1.06; }
}

/* ==========================================================================
   SISTEMA PAGE — cards with icons, photo rows, results over photo
   ========================================================================== */
.sx-arch { padding: 110px 0 90px; background: radial-gradient(55% 45% at 85% 0%, rgba(247, 148, 51, 0.12), transparent 70%), radial-gradient(45% 45% at 5% 100%, rgba(23, 23, 63, 0.07), transparent 70%); }
.sx-arch__grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; }
.sx-arch__grid::before { content: ''; position: absolute; top: 56px; left: 6%; right: 6%; height: 2px; background: repeating-linear-gradient(90deg, var(--color-orange) 0 8px, transparent 8px 16px); opacity: 0.5; }
.sx-arch__card { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 290px; padding: 28px 24px 24px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.sx-arch__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--color-orange); }
.sx-arch__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(247, 148, 51, 0.14); color: var(--color-orange); transition: background var(--transition), color var(--transition); }
.sx-arch__card:hover .sx-arch__icon { background: var(--color-orange); color: var(--color-white); }
.sx-arch__num { position: absolute; top: 30px; right: 24px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; letter-spacing: 0.1em; color: var(--color-label); }
.sx-arch__name { margin: auto 0 0; padding-top: 36px; font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.4px; color: var(--color-primary-dark); }
.sx-arch__arrow { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 38px; height: 38px; margin-top: 20px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary-dark); transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.sx-arch__card:hover .sx-arch__arrow { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); transform: translateX(4px); }
.sx-arch__card.is-featured { background: linear-gradient(160deg, var(--color-primary-dark), var(--color-hero-bg)); border-color: transparent; }
.sx-arch__card.is-featured .sx-arch__icon { background: var(--color-orange); color: var(--color-white); }
.sx-arch__card.is-featured .sx-arch__num { color: rgba(255, 255, 255, 0.55); }
.sx-arch__card.is-featured .sx-arch__name { color: var(--color-white); }
.sx-arch__card.is-featured .sx-arch__arrow { border-color: rgba(255, 255, 255, 0.3); color: var(--color-white); }

.sx-detail { padding: 30px 0 110px; }
.sx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 110px; }
.sx-row:last-child { border-bottom: 0; }
.sx-row--rev .sx-row__media { order: 2; }
.sx-row__media { position: relative; }
.sx-row__media::before { content: ''; position: absolute; right: -18px; bottom: -18px; width: 62%; height: 62%; border-radius: 30px; background: rgba(247, 148, 51, 0.16); }
.sx-row--rev .sx-row__media::before { right: auto; left: -18px; }
.sx-row__media img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-xl); transition: transform 0.6s ease; }
.sx-row:hover .sx-row__media img { transform: scale(1.02); }
.sx-row__badge { position: absolute; top: 22px; left: 22px; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-orange); color: var(--color-white); font-family: var(--font-heading); font-size: 20px; font-weight: 500; box-shadow: 0 8px 24px rgba(247, 148, 51, 0.45); }
.sx-row__eyebrow { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-orange); }
.sx-row__title { margin: 14px 0 28px; font-family: var(--font-heading); font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -1.3px; color: var(--color-primary-dark); text-wrap: balance; }
.sx-row__items { margin: 0; padding: 0; list-style: none; }
.sx-row__item { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-top: 1px solid var(--color-border); font-size: 16px; line-height: 1.5; color: var(--color-body-text); }
.sx-row__item:last-child { border-bottom: 1px solid var(--color-border); }
.sx-row__check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: rgba(247, 148, 51, 0.16); color: var(--color-orange); }

.sx-result { position: relative; padding: 120px 0; background-color: var(--color-primary-dark); background-size: cover; background-position: center; color: var(--color-white); isolation: isolate; }
.sx-result::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 13, 34, 0.9) 0%, rgba(23, 23, 63, 0.82) 100%); }
.sx-result__header { max-width: 760px; margin-bottom: 56px; }
.sx-result__eyebrow { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-orange); }
.sx-result__title { margin: 16px 0 0; font-family: var(--font-heading); font-size: 52px; font-weight: 500; line-height: 1.1; letter-spacing: -1.56px; color: var(--color-white); text-wrap: balance; }
.sx-result__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sx-result__card { display: flex; flex-direction: column; padding: 40px 34px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 26px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform var(--transition), border-color var(--transition); }
.sx-result__card:hover { transform: translateY(-6px); border-color: var(--color-orange); }
.sx-result__number { font-family: var(--font-heading); font-size: 80px; font-weight: 500; line-height: 1; letter-spacing: -2.4px; color: var(--color-orange); }
.sx-result__label { margin-top: 22px; font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--color-white); }
.sx-result__text { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }

.sx-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.sx-reveal.sx-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
	.sx-arch__grid { grid-template-columns: repeat(3, 1fr); }
	.sx-arch__grid::before { display: none; }
	.sx-row { gap: 48px; }
	.sx-row__title { font-size: 36px; }
}
@media (max-width: 860px) {
	.sx-arch { padding: 72px 0 56px; }
	.sx-arch__grid { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
	.sx-arch__card { min-height: 230px; }
	.sx-row { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; }
	.sx-row--rev .sx-row__media { order: 0; }
	.sx-row__media::before { right: -10px; bottom: -10px; }
	.sx-row--rev .sx-row__media::before { left: auto; right: -10px; }
	.sx-result { padding: 80px 0; }
	.sx-result__grid { grid-template-columns: 1fr; }
	.sx-result__title { font-size: 38px; }
	.sx-result__number { font-size: 64px; }
}
@media (max-width: 520px) {
	.sx-arch__grid { grid-template-columns: 1fr; }
	.sx-row__title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   COHERENCE LAYER — shared card, timeline and count-up styling for inner pages
   ========================================================================== */
.nos-prin, .pillar, .cap-card, .presencia__node { position: relative; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.nos-prin, .pillar { display: flex; flex-direction: column; padding: 30px 26px 28px; }
.cap-card { display: flex; flex-direction: column; }
.nos-prin:hover, .pillar:hover, .cap-card:hover, .presencia__node:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--color-orange); }
.nos-prin::before, .pillar::before, .cap-card::before, .presencia__node::before { content: ''; display: block; flex: none; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background-color: rgba(247, 148, 51, 0.14); background-position: center; background-repeat: no-repeat; background-size: 26px; transition: background-color var(--transition); }
.nos-prin:hover::before, .pillar:hover::before, .cap-card:hover::before, .presencia__node:hover::before { background-color: var(--color-orange); }
.nos-prin__num, .pillar__num { position: absolute; top: 32px; right: 26px; }
.pillar--dark, .cap-card--dark { background: linear-gradient(160deg, var(--color-primary-dark), var(--color-hero-bg)); border-color: transparent; }
.presencia__node { padding: 24px 22px; }
.nos-prin:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(1):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(2):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(3):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-8M22%2020H2%22%2F%3E%3C%2Fsvg%3E"); }
.nos-prin:nth-child(4):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-8M22%2020H2%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V8l8-5%208%205v13%22%2F%3E%3Cpath%20d%3D%22M9%2021v-6h6v6M9%2011h.01M15%2011h.01%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(1):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V8l8-5%208%205v13%22%2F%3E%3Cpath%20d%3D%22M9%2021v-6h6v6M9%2011h.01M15%2011h.01%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-6%206-6s6%202.7%206%206%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M16%2014.2c2.9.3%205%202.6%205%205.8%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(2):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-6%206-6s6%202.7%206%206%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M16%2014.2c2.9.3%205%202.6%205%205.8%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203.2%203%2014.8%200%2018M12%203c-3%203.2-3%2014.8%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(3):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203.2%203%2014.8%200%2018M12%203c-3%203.2-3%2014.8%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-14%200%2010-6%2015-14%2015%22%2F%3E%3Cpath%20d%3D%22M5%2019c3-5%206-8%2010-10%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(4):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-14%200%2010-6%2015-14%2015%22%2F%3E%3Cpath%20d%3D%22M5%2019c3-5%206-8%2010-10%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%204.5-3.4%208-8%209-4.6-1-8-4.5-8-9V6z%22%2F%3E%3Cpath%20d%3D%22M8.5%2012l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); }
.pillar:nth-child(5):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%204.5-3.4%208-8%209-4.6-1-8-4.5-8-9V6z%22%2F%3E%3Cpath%20d%3D%22M8.5%2012l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h13l-3-3M20%2016H7l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(1):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h13l-3-3M20%2016H7l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h7l5%205v13H7z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5M10%2013h6M10%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(2):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h7l5%205v13H7z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5M10%2013h6M10%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M15%209.5a5%205%200%201%201-5.5%205.5%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(3):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M15%209.5a5%205%200%201%201-5.5%205.5%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203.2%203%2014.8%200%2018M12%203c-3%203.2-3%2014.8%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(4):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203.2%203%2014.8%200%2018M12%203c-3%203.2-3%2014.8%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021V9l9-5%209%205v12%22%2F%3E%3Cpath%20d%3D%22M8%2021v-7h8v7%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(5):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021V9l9-5%209%205v12%22%2F%3E%3Cpath%20d%3D%22M8%2021v-7h8v7%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(6)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M7%2020h10M5%207h14%22%2F%3E%3Cpath%20d%3D%22M5%207l-3%206a3%203%200%200%200%206%200L5%207zM19%207l-3%206a3%203%200%200%200%206%200l-3-6z%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(6):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M7%2020h10M5%207h14%22%2F%3E%3Cpath%20d%3D%22M5%207l-3%206a3%203%200%200%200%206%200L5%207zM19%207l-3%206a3%203%200%200%200%206%200l-3-6z%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(7)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(7):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(8)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(8):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(9)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-14%200%2010-6%2015-14%2015%22%2F%3E%3Cpath%20d%3D%22M5%2019c3-5%206-8%2010-10%22%2F%3E%3C%2Fsvg%3E"); }
.cap-card:nth-child(9):hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-14%200%2010-6%2015-14%2015%22%2F%3E%3Cpath%20d%3D%22M5%2019c3-5%206-8%2010-10%22%2F%3E%3C%2Fsvg%3E"); }
.presencia__node::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F79433%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11.5A7%207%200%200%200%205%209.5C5%2014.8%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
.presencia__node:hover::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11.5A7%207%200%200%200%205%209.5C5%2014.8%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
.pillar--dark::before, .cap-card--dark::before { background-color: var(--color-orange); }
.pillar--dark::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c0-8%205-14%2015-14%200%2010-6%2015-14%2015%22%2F%3E%3Cpath%20d%3D%22M5%2019c3-5%206-8%2010-10%22%2F%3E%3C%2Fsvg%3E") !important; }
.cap-card--dark::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E") !important; }
.nos-tray__grid { position: relative; border-top: 0; }
.nos-tray__grid::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-orange), rgba(247, 148, 51, 0.12)); }
.nos-tray__grid .nos-tray__item { position: relative; padding: 40px 28px 0 0; border-left: 0; border-right: 0; }
.nos-tray__grid .nos-tray__item::before { content: ''; position: absolute; top: -8px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); border: 4px solid var(--color-orange); box-shadow: 0 0 0 7px rgba(247, 148, 51, 0.16); }
.nos-tray__year { font-size: 15px; font-weight: 600; }
.nos-prop__body p:last-child { padding-left: 22px; border-left: 4px solid var(--color-orange); font-size: 20px; line-height: 1.5; }
.impacto__number { color: var(--color-orange); }
.nos-member { transition: transform var(--transition); }
.nos-member:hover { transform: translateY(-6px); }

/* ==========================================================================
   INNER PAGES RESPONSIVE — grids collapse on tablet and phone
   ========================================================================== */
@media (max-width: 1100px) {
	.nos-principios__grid, .nos-equipo__grid, .nos-tray__grid, .impacto__grid, .sol-catalog__grid, .presencia__grid { grid-template-columns: repeat(2, 1fr); }
	.empresab__grid { grid-template-columns: repeat(3, 1fr); }
	.nos-tray__grid::before { right: 0; }
}
@media (max-width: 760px) {
	.nos-prop__grid, .nos-principios__grid, .sol-catalog__grid, .empresab__grid, .informes__grid, .bpo__grid, .radar__panel { grid-template-columns: 1fr; }
	.nos-equipo__grid, .impacto__grid, .presencia__grid { grid-template-columns: repeat(2, 1fr); }
	.nos-prop__body p:last-child { font-size: 18px; }

	.nos-tray__grid { grid-template-columns: 1fr; margin-top: 40px; }
	.nos-tray__grid::before { top: 6px; bottom: 6px; left: 8px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-orange), rgba(247, 148, 51, 0.12)); }
	.nos-tray__grid .nos-tray__item { padding: 0 0 34px 44px; }
	.nos-tray__grid .nos-tray__item::before { top: 2px; left: 0; }
}
@media (max-width: 480px) {
	.nos-equipo__grid, .impacto__grid, .presencia__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
	.art-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.art-grid, .art-featured, .art-news__panel { grid-template-columns: 1fr; }
	.art-news__panel { padding: 36px 24px; gap: 28px; }
	.art-news__row { flex-direction: column; align-items: stretch; }
	.art-news__btn { width: 100%; }
}

/* ==========================================================================
   HOME COHERENCE — same card language as the inner pages
   ========================================================================== */
.partners-section__grid { border: 0; gap: 16px; }
.partners-section__item { display: flex; align-items: center; justify-content: center; height: 118px; padding: 18px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.partners-section__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-orange); }
.partners-section__logo-img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter var(--transition), opacity var(--transition); }
.partners-section__item:hover .partners-section__logo-img { filter: none; opacity: 1; }

.sol-card { background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.sol-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--color-orange); }

.sistema-section__visual { box-shadow: 18px 18px 0 0 rgba(247, 148, 51, 0.18), var(--shadow-xl); }
.calc-section { background-image: radial-gradient(50% 40% at 92% 0%, rgba(247, 148, 51, 0.1), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(23, 23, 63, 0.06), transparent 70%); }

@media (max-width: 1100px) {
	.partners-section__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
	.partners-section__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.partners-section__item { height: 92px; padding: 12px; }
	.partners-section__logo-img { max-height: 44px; }
	.sistema-section__visual { box-shadow: 10px 10px 0 0 rgba(247, 148, 51, 0.18), var(--shadow-lg); }
}
@media (max-width: 480px) {
	.partners-section__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   NAV PILL FIT — wider bar and tighter spacing so every item keeps its margin
   ========================================================================== */
.nav-pill { max-width: 1320px; }
@media (max-width: 1360px) {
	.nav-pill { padding: 10px 14px 10px 18px; gap: 6px; }
	.nav-pill__link { padding: 9px 9px; font-size: 13.5px; }
	.nav-pill__cta { padding: 12px 14px; }
}
@media (max-width: 1240px) {
	.nav-pill__logo-img { height: 38px; }
	.nav-pill__link { padding: 9px 7px; font-size: 13px; }
	.nav-pill__cta { padding: 11px 12px; font-size: 10.5px; letter-spacing: 0.06em; }
}

.cont-info__phones { display: flex; flex-direction: column; gap: 4px; }

/* ==========================================================================
   QA ROUND 1 — platform slider, system layers, mobile fixes, forms, detail pages
   ========================================================================== */
/* Platform slider */
.plataforma-card.is-filtered-out { display: none; }
.plataforma-nav__btn:disabled { opacity: 0.4; cursor: default; }
.plataforma-tab, .plataforma-nav__btn { cursor: pointer; }

/* System layers: first layer looked bigger than the others */
.sistema-layer--first .sistema-layer__name { display: inline; font-size: inherit; letter-spacing: inherit; line-height: inherit; }

/* Articles: featured note rendered as a normal card when filtering */
.art-grid--filtered { margin-top: 48px; }
.art-card__meta { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; color: rgba(23, 23, 63, 0.5); }

/* Inline form errors + messages */
.field-error { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #B42318; }
.field-error[hidden], .form-msg[hidden] { display: none; }
.has-error input, .has-error select, .has-error textarea { border-color: #D64545 !important; box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12); }
.form-msg { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font: 500 14px/1.5 var(--font-body); }
.form-msg-ok { background: #E8F7EE; color: #14663A; }
.form-msg-err { background: #FDECEC; color: #9B1C1C; }
.calc-panel .field-error, .art-news .field-error { color: #FFB4B4; }

/* Generic pages (legal texts) */
.section--page, .section--single { padding: 170px 0 90px; }
.section--page .section__title { max-width: 760px; margin: 0 auto 32px; }
.page__content { max-width: 760px; margin: 0 auto; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: #3A3A4F; }
.page__content h2 { margin: 40px 0 12px; font-family: var(--font-heading); font-size: 26px; font-weight: 600; letter-spacing: -0.5px; color: var(--color-primary-dark); }
.page__content p, .page__content ul { margin: 0 0 16px; }
.page__content ul { padding-left: 22px; }
.page__content a { color: var(--color-primary-dark); text-decoration: underline; }

/* Detail pages (soluciones, capacidades, artículos) */
.detail { padding: 64px 0 96px; }
.detail__meta { margin: 0 0 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.7px; color: rgba(23, 23, 63, 0.55); }
.detail__content { max-width: 760px; margin: 0 auto 40px; font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: #3A3A4F; }
.detail__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.detail__cta { display: inline-flex; padding: 16px 28px; border-radius: 10px; background: var(--color-orange); color: #17173F; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-decoration: none; }
.detail__cta:hover { background: #FFA64D; }
.detail__back { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: #17173F; text-decoration: none; }
.detail__back:hover { text-decoration: underline; }

/* Mobile menu extra actions (hidden on desktop) */
.nav-mobile-actions { display: none; }

@media (max-width: 992px) {
	/* The --contacto modifier kept two columns on phones; min-content also let the FAQ tabs widen the page */
	.faq-section .faq-section__container,
	.contact-section .contact-section__grid,
	.contact-section .contact-section__grid--contacto { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
	.faq-section__container > *, .contact-section__grid > * { min-width: 0; }
}

@media (max-width: 768px) {
	/* Inner banners: fixed height + huge title pushed the text under the header */
	.hero.hero--inner { height: auto !important; min-height: 460px !important; padding-top: 140px; }
	.hero--inner .hero__content { padding-bottom: 44px; }
	.hero--inner .hero__title { font-size: 38px; line-height: 1.1; letter-spacing: -1px; }
	.hero--inner .hero__subtitle { font-size: 16px; line-height: 1.55; }

	/* Mobile menu: solid panel + phone and the three CTAs */
	#mainNav.nav--open { background: #171730; -webkit-backdrop-filter: none; backdrop-filter: none; max-height: calc(100vh - 150px); overflow-y: auto; }
	#mainNav .nav-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 16px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
	#mainNav .nav-mobile-actions .nav-pill__icon-btn,
	#mainNav .nav-mobile-actions .nav-pill__cta { display: inline-flex !important; width: 100%; height: auto; padding: 14px 18px; justify-content: center; gap: 8px; }
	.section--page, .section--single { padding-top: 140px; }
}

@media (max-width: 560px) {
	.contact-panel__row { grid-template-columns: 1fr; gap: 0; }
}

/* QA ROUND 2 — title size on phones + informes grid overflow */
@media (max-width: 992px) {
	.informes__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
	.informes__grid > * { min-width: 0; }
}
@media (max-width: 768px) {
	.hero.hero--inner .hero__content .hero__title { font-size: 40px !important; line-height: 1.1 !important; letter-spacing: -1px !important; }
	.hero.hero--inner .hero__content .hero__subtitle { font-size: 16px !important; line-height: 1.55 !important; }
}

/* QA ROUND 3 — informes meta label wraps on phones */
@media (max-width: 560px) {
	.informes__meta { white-space: normal; text-align: right; max-width: 104px; }
}