/* ==========================================================================
   CSII — Editorial Trío (Impeccable Lane A)
   Display: Oswald (Chathura del brand book tenía diacríticos rotos en web).
   Body: Roboto.
   Triad peer: Navy + Arcturus (orange) + Olive (green).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand triad — peer */
    --c-navy:        oklch(36% 0.14 263);
    --c-navy-100:    oklch(46% 0.14 261);
    --c-navy-deep:   oklch(22% 0.09 263);
    --c-arctur:      oklch(60% 0.16 41);
    --c-arctur-100:  oklch(67% 0.18 47);
    --c-olive:       oklch(67% 0.14 117);
    --c-olive-100:   oklch(76% 0.18 121);

    /* Tinted neutrals — toward navy */
    --surface-0:    oklch(99% 0.003 263);
    --surface-1:    oklch(96.5% 0.005 263);
    --surface-2:    oklch(93% 0.008 263);
    --surface-deep: oklch(18% 0.04 263);
    --ink:          oklch(20% 0.012 263);
    --ink-muted:    oklch(45% 0.008 263);
    --ink-soft:     oklch(60% 0.006 263);
    --on-dark:      oklch(96% 0.005 263);
    --on-dark-muted:oklch(75% 0.008 263);
    --border:       oklch(88% 0.005 263);
    --border-strong:oklch(78% 0.008 263);

    /* Brand utility for tokens */
    --hairline: 1px solid var(--border);

    /* Type */
    --font-display: 'Oswald', 'Helvetica Neue', sans-serif;
    --font-body:    'Roboto', system-ui, -apple-system, sans-serif;

    /* Modular scale (perfect fourth, 1.333) */
    --fs-xs:    0.75rem;   /* 12 */
    --fs-sm:    0.875rem;  /* 14 */
    --fs-base:  1rem;      /* 16 */
    --fs-md:    1.125rem;  /* 18 */
    --fs-lead:  1.25rem;   /* 20 */
    --fs-lg:    1.5rem;    /* 24 */
    --fs-xl:    2rem;      /* 32 */
    --fs-2xl:   2.667rem;  /* ~43 */
    --fs-3xl:   3.555rem;  /* ~57 */
    --fs-display: clamp(3.25rem, 9vw, 7rem);
    --fs-numeric: clamp(4rem, 14vw, 10rem);

    /* Space (4-base) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-10: 128px;

    /* Shape */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Layout */
    --container: 1240px;
    --content: 68ch;
    --gutter:  clamp(1.25rem, 3vw, 2.25rem);

    /* Elevation (tinted toward navy) */
    --elev-1: 0 1px 2px oklch(36% 0.14 263 / 0.06);
    --elev-2: 0 6px 22px oklch(36% 0.14 263 / 0.10);
    --elev-3: 0 18px 44px oklch(36% 0.14 263 / 0.16);

    /* Motion */
    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  150ms;
    --dur:       280ms;
    --dur-slow:  480ms;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: oklch(60% 0.16 41 / 0.25); color: var(--c-navy-deep); }

:focus-visible {
    outline: 2px solid var(--c-arctur);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   Container & utilities
   -------------------------------------------------------------------------- */

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-arctur);
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
}
.eyebrow--olive { color: var(--c-olive); }
.eyebrow--navy  { color: var(--c-navy); }
.eyebrow--invert { color: var(--c-arctur-100); }

.section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-3xl);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-transform: uppercase;
}
.section-title em {
    font-style: normal;
    color: var(--c-arctur);
}
@media (max-width: 720px) {
    .section-title { font-size: var(--fs-2xl); }
}

.lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 60ch;
}

.prose p + p { margin-top: 1em; }
.prose { max-width: var(--content); color: var(--ink-muted); }

.divider {
    height: 1px;
    background: var(--border);
    border: 0;
}

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 46px;
    padding: 0 var(--sp-6);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: linear-gradient(135deg, var(--c-arctur) 0%, var(--c-arctur-100) 100%);
    color: var(--on-dark);
    box-shadow: 0 6px 20px oklch(60% 0.16 41 / 0.3);
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--c-arctur-100) 0%, var(--c-arctur) 100%);
    box-shadow: 0 12px 32px oklch(60% 0.16 41 / 0.45);
}

.btn--ink {
    background: var(--ink);
    color: var(--on-dark);
}
.btn--ink:hover { background: var(--c-navy-deep); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--border-strong);
}
.btn--ghost:hover {
    border-color: var(--ink);
    background: var(--surface-1);
}

.btn--ghost-light {
    background: transparent;
    color: var(--on-dark);
    border-color: oklch(96% 0.005 263 / 0.4);
}
.btn--ghost-light:hover {
    border-color: var(--on-dark);
    background: oklch(96% 0.005 263 / 0.08);
}

.btn--lg { min-height: 54px; padding: 0 var(--sp-7); font-size: var(--fs-base); }
.btn--sm { min-height: 38px; padding: 0 var(--sp-5); font-size: var(--fs-xs); }

.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Header (topbar + nav)
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-0);
    border-bottom: var(--hairline);
    transition: background var(--dur) var(--ease);
}
.header--scrolled {
    background: oklch(99% 0.003 263 / 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header__topbar {
    background: var(--ink);
    color: var(--on-dark-muted);
    font-size: var(--fs-xs);
}
.header__topbar-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 10px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
}
.header__topbar a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: inherit;
    transition: color var(--dur) var(--ease);
}
.header__topbar a:hover { color: var(--on-dark); }
.header__topbar-left,
.header__topbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.nav {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-4) var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}
.nav__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.nav__logo img {
    height: 44px;
    width: auto;
}
.nav__menu {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin-left: auto;
}
.nav__link {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    padding: var(--sp-2) 0;
    transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-arctur); }
.nav__link--active { color: var(--c-arctur); }
.nav__link--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--c-arctur);
}
.nav__cta {
    margin-left: var(--sp-3);
}
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.nav__hamburger {
    width: 24px;
    height: 16px;
    position: relative;
}
.nav__hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ink);
    transition: transform var(--dur) var(--ease), top var(--dur) var(--ease), opacity var(--dur) var(--ease);
    border-radius: 2px;
}
.nav__hamburger span:nth-child(1) { top: 0; }
.nav__hamburger span:nth-child(2) { top: 7px; }
.nav__hamburger span:nth-child(3) { top: 14px; }

.nav--open .nav__hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav--open .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav--open .nav__hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (max-width: 960px) {
    .nav__toggle { display: inline-flex; }
    .nav__menu, .nav__cta {
        position: fixed;
        inset: 96px 0 0 0;
        z-index: 40;
    }
    .nav__menu {
        flex-direction: column;
        gap: var(--sp-5);
        padding: var(--sp-7) var(--gutter);
        background: var(--surface-0);
        align-items: flex-start;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .nav__menu .nav__link { font-size: var(--fs-xl); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
    .nav__cta {
        bottom: var(--sp-7);
        top: auto;
        left: var(--gutter);
        right: var(--gutter);
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .nav--open .nav__menu,
    .nav--open .nav__cta {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}
@media (max-width: 540px) {
    .header__topbar-inner { padding-block: 8px; gap: var(--sp-3); }
    .header__topbar-left { gap: var(--sp-3); flex-wrap: wrap; }
    .header__topbar-left a:nth-child(1) span { display: none; }
    .nav__logo img { height: 38px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    background: var(--surface-deep);
    color: var(--on-dark-muted);
    padding-block: var(--sp-9) var(--sp-6);
    margin-top: var(--sp-10);
}
.footer__content {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--sp-9);
}
.footer__brand img { height: 56px; width: auto; margin-bottom: var(--sp-5); }
.footer__brand p {
    font-size: var(--fs-sm);
    color: var(--on-dark-muted);
    margin-bottom: var(--sp-2);
}
.footer__brand p:first-of-type {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lead);
    color: var(--on-dark);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: var(--sp-3);
}
.footer__social {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.footer__social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid oklch(96% 0.005 263 / 0.18);
    border-radius: var(--r-pill);
    color: var(--on-dark);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer__social a:hover { background: var(--c-arctur); border-color: var(--c-arctur); color: var(--on-dark); }
.footer__social svg { width: 16px; height: 16px; }
.footer h4 {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-dark);
    margin-bottom: var(--sp-4);
}
.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.footer__links a {
    color: var(--on-dark-muted);
    font-size: var(--fs-sm);
    transition: color var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--c-arctur-100); }
.footer__bottom {
    max-width: var(--container);
    margin: var(--sp-9) auto 0;
    padding: var(--sp-5) var(--gutter) 0;
    border-top: 1px solid oklch(96% 0.005 263 / 0.1);
    font-size: var(--fs-xs);
    color: var(--on-dark-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
@media (max-width: 800px) {
    .footer__content { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   Hero — typographic, no decorative shapes
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--surface-0);
    padding-block: var(--sp-9) var(--sp-10);
    overflow: hidden;
}
.hero__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}
.hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-display);
    line-height: 0.86;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-transform: uppercase;
    max-width: 14ch;
}
.hero__title em {
    font-style: normal;
    color: var(--c-arctur);
    display: block;
}
.hero__subtitle {
    margin-top: var(--sp-6);
    font-size: var(--fs-md);
    color: var(--ink-muted);
    max-width: 52ch;
    line-height: 1.6;
}
.hero__actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    flex-wrap: wrap;
}
.hero__meta {
    margin-top: var(--sp-9);
    padding-top: var(--sp-6);
    border-top: var(--hairline);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    max-width: 720px;
}
.hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.hero__meta-item dt {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.hero__meta-item dd {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--ink);
    line-height: 1.1;
    text-transform: uppercase;
}
.hero__triad {
    position: absolute;
    right: calc(var(--gutter) * -0.5);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(220px, 32vw, 480px);
    aspect-ratio: 1;
    z-index: 1;
    opacity: 0.16;
    pointer-events: none;
}
.hero__triad svg { width: 100%; height: 100%; }

/* ----- Split hero: copy left, SR credential card right ----- */
.hero--split {
    padding-block: var(--sp-9) var(--sp-9);
}
.hero__layout {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
    gap: var(--sp-7);
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero--split .hero__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* SR credential card */
.sr-card {
    position: relative;
    background: var(--surface-deep, oklch(18% 0.04 263));
    color: var(--on-dark);
    border-radius: var(--r-lg);
    padding: var(--sp-7) var(--sp-6);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 24px 60px oklch(15% 0.05 263 / 0.35),
        0 0 0 1px oklch(50% 0.05 263 / 0.18) inset;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.sr-card__glow {
    position: absolute;
    inset: -30% -30% auto auto;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        oklch(60% 0.16 41 / 0.32) 0%,
        oklch(60% 0.16 41 / 0.10) 35%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.sr-card > *:not(.sr-card__glow) { position: relative; z-index: 1; }

.sr-card__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--c-arctur-100);
}

.sr-card__lockup {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.sr-card__panel {
    flex: 1;
    background: var(--surface-0);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
}
.sr-card__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
}
.sr-card__badge {
    width: 96px;
    height: auto;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: 0 8px 22px oklch(15% 0.05 263 / 0.45);
    transform: rotate(2deg);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-card:hover .sr-card__badge {
    transform: rotate(0deg) translateY(-2px);
}

.sr-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 2.6vw, 40px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--on-dark);
    text-transform: uppercase;
    margin: 0;
}
.sr-card__title em {
    font-style: normal;
    color: var(--c-arctur-100);
    display: block;
}
.sr-card__lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: oklch(85% 0.012 263);
    margin: 0;
}

.sr-card__stats {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid oklch(60% 0.08 263 / 0.25);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.sr-card__stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sr-card__stats strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--on-dark);
}
.sr-card__stats li:nth-child(1) strong { color: var(--c-olive-100); }
.sr-card__stats li:nth-child(2) strong { color: var(--c-arctur-100); }
.sr-card__stats li:nth-child(3) strong { color: oklch(78% 0.10 263); }
.sr-card__stats span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(75% 0.012 263);
    line-height: 1.3;
}

.sr-card__link {
    margin-top: var(--sp-2);
    align-self: start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-arctur-100);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: color 240ms ease, border-color 240ms ease;
}
.sr-card__link span {
    display: inline-block;
    margin-left: 6px;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-card__link:hover {
    color: #ffffff;
    border-color: #ffffff;
}
.sr-card__link:hover span {
    transform: translateX(8px);
}

@media (max-width: 1100px) {
    .hero__layout { grid-template-columns: 1fr; gap: var(--sp-7); }
    .sr-card { max-width: 540px; }
}
@media (max-width: 960px) {
    .hero__meta { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}
@media (max-width: 720px) {
    .hero { padding-block: var(--sp-7) var(--sp-9); }
    .hero__triad { display: none; }
    .hero__meta { grid-template-columns: 1fr; gap: var(--sp-3); }
    .sr-card__lockup { flex-direction: column-reverse; }
    .sr-card__badge { width: 80px; transform: none; }
    .sr-card__panel { width: 100%; }
    .sr-card__stats { grid-template-columns: 1fr; gap: var(--sp-2); }
}
@media (max-width: 360px) {
    .sr-card { padding: var(--sp-4) var(--sp-3); }
    .sr-card__stats { gap: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   Page banner (inner pages — thinner than hero)
   -------------------------------------------------------------------------- */

.page-banner {
    background: var(--ink);
    color: var(--on-dark);
    padding-block: var(--sp-9) var(--sp-7);
    position: relative;
    overflow: hidden;
}
.page-banner__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}
.page-banner__crumbs {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    color: var(--on-dark-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}
.page-banner__crumbs a:hover { color: var(--c-arctur-100); }
.page-banner__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--on-dark);
}
.page-banner__title em {
    font-style: normal;
    color: var(--c-arctur);
}
.page-banner__lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--on-dark-muted);
    max-width: 56ch;
}

/* Decorative arrows pattern (logo motif, subtle) */
.page-banner__arrows {
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    opacity: 0.08;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.page-banner__arrows svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Generic section wrappers
   -------------------------------------------------------------------------- */

.section {
    padding-block: var(--sp-10);
}
.section--sm { padding-block: var(--sp-9); }
.section--alt { background: var(--surface-1); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark .section-title { color: var(--on-dark); }
.section--dark .lead { color: var(--on-dark-muted); }

.section__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    padding-inline: var(--gutter);
}
.section__head-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: end;
}
@media (max-width: 960px) {
    .section__head-grid { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
}

@media (max-width: 720px) {
    .section { padding-block: var(--sp-9); }
    .section--sm { padding-block: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   Reveal (used by main.js)
   -------------------------------------------------------------------------- */

[data-reveal],
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible,
[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 360ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Home — services bento (asymmetric)
   -------------------------------------------------------------------------- */

.home-bento {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-auto-rows: minmax(220px, auto);
    gap: var(--sp-4);
}

.bento {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--sp-7);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--on-dark);
    background: var(--ink);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    isolation: isolate;
}
.bento:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

.bento--navy   { background: var(--c-navy); }
.bento--olive  { background: var(--c-olive); color: var(--c-navy-deep); }
.bento--olive .bento__num { color: oklch(22% 0.09 263 / 0.6); }
.bento--olive .bento__title { color: var(--c-navy-deep); }
.bento--olive .bento__body { color: oklch(22% 0.09 263 / 0.85); }
.bento--arctur { background: var(--c-arctur); }
.bento--soft   { background: var(--surface-1); color: var(--ink); border: 1px solid var(--border); }
.bento--soft .bento__num { color: var(--ink-soft); }
.bento--soft .bento__title { color: var(--ink); }
.bento--soft .bento__body { color: var(--ink-muted); }

.bento--tall { grid-row: span 2; }
.bento--wide { grid-column: span 2; }

.bento__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.01em;
    color: oklch(96% 0.005 263 / 0.5);
}
.bento__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-top: var(--sp-5);
}
.bento__body {
    font-size: var(--fs-sm);
    color: oklch(96% 0.005 263 / 0.85);
    margin-top: var(--sp-3);
    max-width: 36ch;
}
.bento__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.bento__cta::after {
    content: "→";
    transition: transform var(--dur) var(--ease);
}
.bento:hover .bento__cta::after { transform: translateX(4px); }

@media (max-width: 800px) {
    .home-bento { grid-template-columns: 1fr; }
    .bento--wide, .bento--tall { grid-column: auto; grid-row: auto; }
}

/* --------------------------------------------------------------------------
   Home — credentials (replaces stats template)
   -------------------------------------------------------------------------- */

.creds {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-9);
    align-items: start;
}
.creds__list {
    display: flex;
    flex-direction: column;
}
.creds__item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
    border-bottom: var(--hairline);
}
.creds__item:first-child { border-top: var(--hairline); }
.creds__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-soft);
}
.creds__num--navy { color: var(--c-navy); }
.creds__num--arctur { color: var(--c-arctur); }
.creds__num--olive { color: var(--c-olive); }
.creds__badge {
    width: 80px;
    height: auto;
    align-self: center;
    justify-self: start;
    display: block;
    border-radius: 8px;
}
.creds__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-transform: uppercase;
}
.creds__sub {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    max-width: 48ch;
}
.creds__year {
    align-self: center;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

@media (max-width: 800px) {
    .creds { grid-template-columns: 1fr; gap: var(--sp-6); }
    .creds__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .creds__num { font-size: var(--fs-xl); }
    .creds__year { grid-column: 1; margin-top: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
    background: var(--c-arctur);
    color: var(--on-dark);
    padding-block: var(--sp-9);
}
.cta-band__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-6);
    align-items: center;
}
.cta-band__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    max-width: 18ch;
}
.cta-band__title em { font-style: normal; opacity: 0.7; }
.cta-band .btn--ink:hover { background: var(--surface-deep); }

@media (max-width: 720px) {
    .cta-band__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Quotes / testimonial-like blocks (used in about, sr-page)
   -------------------------------------------------------------------------- */

.callout {
    background: var(--surface-1);
    padding: var(--sp-8);
    border-radius: var(--r-lg);
    max-width: 840px;
}
.callout__quote {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    line-height: 1.05;
    color: var(--ink);
    text-transform: none;
    letter-spacing: -0.01em;
}
.callout__cite {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Quienes Somos — MVV stack (no card grid)
   -------------------------------------------------------------------------- */

.mvv-stack {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
}
.mvv-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--sp-9);
    padding-block: var(--sp-9);
    border-bottom: var(--hairline);
    align-items: start;
}
.mvv-row:last-child { border-bottom: 0; }
.mvv-row__label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.mvv-row__index {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.02em;
}
.mvv-row__index--navy { color: var(--c-navy); }
.mvv-row__index--arctur { color: var(--c-arctur); }
.mvv-row__index--olive { color: var(--c-olive); }
.mvv-row__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
}
.mvv-row__body {
    font-size: var(--fs-md);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 52ch;
}
.mvv-row__chips {
    margin-top: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.chip {
    display: inline-flex;
    padding: 6px 14px;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
}
.chip--navy   { color: var(--c-navy); border-color: var(--c-navy); }
.chip--arctur { color: var(--c-arctur); border-color: var(--c-arctur); }
.chip--olive  { color: var(--c-olive); border-color: var(--c-olive); }
.chip small {
    font-size: 0.8em;
    font-weight: 400;
    margin-left: 6px;
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0.04em;
}

@media (max-width: 800px) {
    .mvv-row { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   Visit card (quienes-somos)
   -------------------------------------------------------------------------- */

.visit {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--sp-7);
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.visit__info {
    padding: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.visit__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--on-dark);
}
.visit__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid oklch(96% 0.005 263 / 0.12);
}
.visit__row dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}
.visit__row dd { font-size: var(--fs-sm); color: var(--on-dark); }
.visit__row dd a { color: var(--c-arctur-100); }
.visit__row dd a:hover { text-decoration: underline; }
.visit__map {
    border: 0;
    min-height: 360px;
    width: 100%;
}

@media (max-width: 800px) {
    .visit { grid-template-columns: 1fr; padding-inline: 0; border-radius: 0; }
    .visit__map { min-height: 280px; }
    .visit { margin-inline: 0; max-width: none; padding-inline: 0; }
    .visit__info { padding: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Servicios — editorial typographic index
   -------------------------------------------------------------------------- */

.svc-index-section {
    background: var(--surface-0);
    padding-block: var(--sp-9) var(--sp-10);
}

.svc-index {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--container);
    padding-inline: var(--gutter);
}

.svc-row {
    position: relative;
    border-top: 1px solid oklch(36% 0.14 263 / 0.18);
}
.svc-row:last-child {
    border-bottom: 1px solid oklch(36% 0.14 263 / 0.18);
}

.svc-row__link {
    display: grid;
    grid-template-columns: minmax(140px, 240px) 1fr auto;
    column-gap: var(--sp-7);
    align-items: center;
    padding-block: var(--sp-7);
    padding-inline: 0;
    text-decoration: none;
    color: var(--ink);
    transition: background-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
                padding-inline 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-row__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 11vw, 168px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-align: right;
    display: block;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-row[data-c="navy"]   .svc-row__num { color: var(--c-navy); }
.svc-row[data-c="arctur"] .svc-row__num { color: var(--c-arctur); }
.svc-row[data-c="olive"]  .svc-row__num { color: var(--c-olive); }

.svc-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}
.svc-row__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.4vw, 60px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--ink);
    text-transform: uppercase;
    margin: 0;
}
.svc-row__lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
    max-width: 56ch;
}
.svc-row__meta {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
    margin-top: var(--sp-1);
}

.svc-row__action {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-arctur);
    white-space: nowrap;
}
.svc-row__arrow {
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover — entire row reacts together */
.svc-row__link:hover {
    background: oklch(36% 0.14 263 / 0.04);
    padding-inline: var(--sp-5);
}
.svc-row__link:hover .svc-row__arrow {
    transform: translateX(10px);
}
.svc-row__link:hover .svc-row__num {
    transform: translateY(-3px);
}
.svc-row__link:hover .svc-row__title {
    color: var(--c-navy);
}

@media (max-width: 800px) {
    .svc-row__link {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--sp-4);
        row-gap: var(--sp-3);
        padding-block: var(--sp-6);
    }
    .svc-row__num {
        grid-row: 1;
        grid-column: 1;
        font-size: clamp(56px, 18vw, 96px);
        text-align: left;
        align-self: start;
    }
    .svc-row__body {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
    }
    .svc-row__action {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: end;
    }
    .svc-row__link:hover {
        padding-inline: var(--sp-3);
    }
}
@media (max-width: 480px) {
    .svc-row__lead { font-size: var(--fs-sm); }
    .svc-row__meta { font-size: 11px; letter-spacing: 0.18em; }
}

/* Brand logos in service cards and marquee */
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 6px 12px;
    background: oklch(96% 0.005 263 / 0.12);
    border: 1px solid oklch(96% 0.005 263 / 0.2);
    border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brand-logo:hover {
    background: oklch(96% 0.005 263 / 0.18);
    border-color: oklch(96% 0.005 263 / 0.35);
}
.brand-logo img {
    height: 16px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.brand-logo span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1;
    white-space: nowrap;
}

/* Light variants for cards with light backgrounds */
.svc--soft .brand-logo,
.svc--outline .brand-logo {
    background: var(--surface-0);
    border-color: var(--border);
}
.svc--soft .brand-logo:hover,
.svc--outline .brand-logo:hover {
    border-color: var(--c-arctur);
    background: var(--surface-1);
}
.svc--soft .brand-logo img,
.svc--outline .brand-logo img,
.svc--olive .brand-logo img {
    filter: none;
    opacity: 0.85;
}
.svc--olive .brand-logo {
    background: oklch(22% 0.09 263 / 0.08);
    border-color: oklch(22% 0.09 263 / 0.18);
}
.svc--olive .brand-logo:hover {
    background: oklch(22% 0.09 263 / 0.15);
}
.svc--outline .svc__title { font-size: var(--fs-xl); margin-top: 0; }

@media (max-width: 960px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .svc--navy   { grid-column: span 2; grid-row: auto; }
    .svc--arctur { grid-column: span 2; grid-row: auto; }
    .svc--olive  { grid-column: span 2; }
    .svc--ink    { grid-column: span 2; }
    .svc--soft   { grid-column: span 1; }
    .svc--outline{ grid-column: span 2; }
}
@media (max-width: 540px) {
    .svc-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .svc--soft, .svc--outline { grid-column: auto; }
    .svc--outline { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Galería — masonry wall, native aspect ratios
   -------------------------------------------------------------------------- */

.wall {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    column-count: 4;
    column-gap: var(--sp-2);
}
.wall img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--sp-2);
    break-inside: avoid;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
    will-change: transform;
}
.wall:hover img { filter: saturate(0.85) brightness(0.92); }
.wall img:hover { filter: none; transform: scale(1.015); }

@media (max-width: 1100px) { .wall { column-count: 3; } }
@media (max-width: 720px)  { .wall { column-count: 2; } }
@media (max-width: 420px)  { .wall { column-count: 1; } }

/* --------------------------------------------------------------------------
   Clients marquee (placeholder version: typographic name list)
   -------------------------------------------------------------------------- */

.clients {
    overflow: hidden;
    padding-block: var(--sp-7);
    background: var(--surface-1);
    border-block: var(--hairline);
}
.clients__label {
    max-width: var(--container);
    margin: 0 auto var(--sp-5);
    padding-inline: var(--gutter);
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.clients__track-wrap { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.clients__track {
    display: flex;
    gap: var(--sp-7);
    width: max-content;
    animation: marquee 32s linear infinite;
    padding-inline: var(--sp-7);
}
.clients__logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 140px;
    padding: 0 var(--sp-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface-0);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.clients__logo:hover { color: var(--c-arctur); border-color: var(--c-arctur); }
.clients__logo img {
    height: 24px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(1);
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.clients__logo:hover img { opacity: 1; filter: grayscale(0); }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   SoftRestaurant page
   -------------------------------------------------------------------------- */

.sr-hero {
    background: var(--surface-1);
    padding-block: var(--sp-9);
}
.sr-hero__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-9);
    align-items: center;
}
.sr-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--sp-5);
}
.sr-hero__badge img { height: 28px; width: auto; }
.sr-hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.sr-hero__title em { font-style: normal; color: var(--c-arctur); }
.sr-hero__lead {
    font-size: var(--fs-md);
    color: var(--ink-muted);
    margin-top: var(--sp-5);
    max-width: 52ch;
}
.sr-hero__actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sr-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--c-navy);
    border-radius: var(--r-lg);
    padding: var(--sp-7);
    color: var(--on-dark);
    overflow: hidden;
    position: relative;
}
.sr-hero__visual img { max-width: 80%; max-height: 80%; }
.sr-hero__visual::after {
    content: "";
    position: absolute;
    inset: -40% -40% auto auto;
    width: 70%;
    aspect-ratio: 1;
    background: radial-gradient(circle, oklch(76% 0.18 121 / 0.4), transparent 60%);
    pointer-events: none;
}

@media (max-width: 800px) {
    .sr-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
    .sr-hero__visual { aspect-ratio: 16/10; }
}

/* SR features */
.sr-features {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
.sr-feat {
    padding: var(--sp-6);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sr-feat:hover { border-color: var(--c-arctur); transform: translateY(-2px); }
.sr-feat__index {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-xl);
    color: var(--c-arctur);
    line-height: 1;
}
.sr-feat__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-top: var(--sp-3);
    line-height: 1.05;
}
.sr-feat__body {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin-top: var(--sp-3);
    line-height: 1.55;
}
@media (max-width: 800px) { .sr-features { grid-template-columns: 1fr; } }

/* SR regions */
.sr-regions {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--sp-7);
    align-items: start;
}
.sr-regions__cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}
.sr-regions__map iframe {
    border: 0;
    width: 100%;
    min-height: 380px;
    border-radius: var(--r-md);
}

/* Map with overlay pins (CSII branded) */
.sr-map {
    position: relative;
    width: 100%;
    min-height: 480px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #2a2e36;
    box-shadow: 0 2px 12px oklch(36% 0.14 263 / 0.10);
}
.sr-map__tile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.85) brightness(1.05) contrast(0.92) saturate(0.4);
    pointer-events: auto;
}
.sr-map__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            oklch(36% 0.14 263 / 0.18) 0%,
            transparent 35%,
            transparent 65%,
            oklch(36% 0.14 263 / 0.18) 100%),
        radial-gradient(ellipse at center,
            transparent 50%,
            oklch(20% 0.04 263 / 0.18) 100%);
}
.sr-map__pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.sr-pin {
    position: absolute;
    top: var(--top);
    left: var(--left);
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.sr-pin__icon {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-sizing: border-box;
    box-shadow:
        0 2px 6px oklch(20% 0.04 263 / 0.45),
        0 0 0 2px oklch(60% 0.16 41 / 0.0);
    object-fit: contain;
    display: block;
}
.sr-pin__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 1px 4px oklch(20% 0.04 263 / 0.25);
}
.sr-pin--sede .sr-pin__icon {
    width: 44px;
    height: 44px;
    padding: 5px;
    box-shadow:
        0 4px 12px oklch(20% 0.04 263 / 0.55),
        0 0 0 3px var(--c-arctur);
}
.sr-pin--sede .sr-pin__label {
    background: var(--c-arctur);
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 800px) { .sr-regions { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
    .sr-map { min-height: 360px; }
    .sr-pin__icon { width: 22px; height: 22px; padding: 3px; }
    .sr-pin--sede .sr-pin__icon { width: 32px; height: 32px; padding: 4px; }
    .sr-pin__label { font-size: 9px; padding: 2px 5px; }
}

/* SR Calculator (rewritten — progressive steps) */
.calc {
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: var(--gutter);
}
.calc__shell {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
}
.calc__main { padding: var(--sp-7); min-width: 0; }
.calc__step { min-width: 0; }
.calc__field { min-width: 0; }
.calc__option { min-width: 0; }
.calc__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: var(--hairline);
}
.calc__step-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--surface-1);
    border: 1px solid var(--border);
}
.calc__step-pill[data-active] { color: var(--on-dark); background: var(--ink); border-color: var(--ink); }
.calc__step-pill[data-done] { color: var(--c-olive); border-color: var(--c-olive); background: var(--surface-0); }
.calc__step-num {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: currentColor;
    color: var(--surface-0);
    border-radius: var(--r-pill);
}
.calc__step-pill[data-active] .calc__step-num { background: var(--on-dark); color: var(--ink); }
.calc__step-pill[data-done] .calc__step-num { background: var(--c-olive); color: var(--surface-0); }

.calc__step { display: none; }
.calc__step[data-active] { display: block; }

.calc__step-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xl);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--sp-3);
}
.calc__step-help {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin-bottom: var(--sp-6);
    max-width: 60ch;
}

.calc__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.calc__option {
    display: block;
    cursor: pointer;
    padding: var(--sp-5);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.calc__option:hover { border-color: var(--c-arctur); }
.calc__option input { position: absolute; opacity: 0; pointer-events: none; }
.calc__option input:checked + .calc__option-body { color: var(--c-arctur); }
.calc__option:has(input:checked) { border-color: var(--c-arctur); background: oklch(60% 0.16 41 / 0.04); }
.calc__option-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
}
.calc__option-help {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
}
.calc__option-price {
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-arctur);
    font-size: var(--fs-md);
}

.calc__field { margin-bottom: var(--sp-5); }
.calc__field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}
.calc__slider {
    width: 100%;
    height: 4px;
    appearance: none;
    background: var(--border);
    border-radius: var(--r-pill);
    outline: 0;
}
.calc__slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--c-arctur);
    cursor: pointer;
    box-shadow: var(--elev-1);
}
.calc__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--c-arctur);
    cursor: pointer;
    border: 0;
}
.calc__slider-value {
    display: inline-block;
    margin-left: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--c-arctur);
}

.calc__addons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.calc__addon {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    align-items: center;
    transition: border-color var(--dur) var(--ease);
}
.calc__addon:hover { border-color: var(--c-arctur); }
.calc__addon:has(input:checked) { border-color: var(--c-arctur); }
.calc__addon input:not([type="range"]) {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-xs);
    cursor: pointer;
    position: relative;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.calc__addon input:not([type="range"]):checked {
    background: var(--c-arctur);
    border-color: var(--c-arctur);
}
.calc__addon input:not([type="range"]):checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: var(--on-dark);
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}
.calc__addon-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
}
.calc__addon-help {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-top: 2px;
}
.calc__addon-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-arctur);
    text-align: right;
}
.calc__addon-stepper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
}
.calc__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-0);
}
.calc__qty-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.calc__qty-btn:hover {
    background: var(--c-arctur);
    color: var(--on-dark);
}
.calc__qty-val {
    min-width: 32px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    border-inline: 1px solid var(--border);
    padding-block: 4px;
}
.calc__addon--slider {
    grid-template-columns: 0 1fr 0;
    align-items: stretch;
}
.calc__addon--slider > div:nth-child(2) {
    width: 100%;
}
.calc__addon--slider .calc__slider {
    margin-top: var(--sp-3);
}
@media (max-width: 540px) {
    .calc__addons, .calc__options { grid-template-columns: 1fr; }
    .calc__addon { grid-template-columns: 24px 1fr; gap: var(--sp-3); }
    .calc__addon-stepper { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
}

.calc__nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: var(--hairline);
}

/* Calc summary panel (sticky right) */
.calc__summary {
    background: var(--ink);
    color: var(--on-dark);
    padding: var(--sp-6);
    position: sticky;
    top: 96px;
    align-self: start;
}
.calc__summary-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
    margin-bottom: var(--sp-5);
}
.calc__summary-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid oklch(96% 0.005 263 / 0.12);
    min-height: 120px;
}
.calc__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}
.calc__summary-row[data-empty] {
    color: var(--on-dark-muted);
    font-style: italic;
    justify-content: flex-start;
}
.calc__summary-label { color: var(--on-dark-muted); flex: 1; }
.calc__summary-value { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.calc__summary-totals {
    margin-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.calc__summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-sm);
    color: var(--on-dark-muted);
}
.calc__summary-total strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-xl);
    color: var(--c-arctur-100);
    line-height: 1;
}
.calc__summary-total--big {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid oklch(96% 0.005 263 / 0.18);
    color: var(--on-dark);
}
.calc__summary-cta { margin-top: var(--sp-6); width: 100%; justify-content: center; }
.calc__summary-fineprint { font-size: var(--fs-xs); color: var(--on-dark-muted); margin-top: var(--sp-3); }

@media (max-width: 960px) {
    .calc__shell { grid-template-columns: minmax(0, 1fr); }
    .calc__summary { position: static; }
}

/* Quote modal (WhatsApp summary) */
.modal {
    position: fixed;
    inset: 0;
    background: oklch(15% 0 0 / 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.modal[data-open] { opacity: 1; pointer-events: auto; }
.modal__panel {
    background: var(--surface-0);
    border-radius: var(--r-lg);
    max-width: 540px;
    width: 100%;
    padding: var(--sp-7);
    transform: translateY(20px) scale(0.97);
    transition: transform var(--dur) var(--ease);
}
.modal[data-open] .modal__panel { transform: translateY(0) scale(1); }
.modal__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: var(--sp-5);
}
.modal__body { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-5); }
.modal__summary {
    background: var(--surface-1);
    padding: var(--sp-5);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    max-height: 200px;
    overflow-y: auto;
}
.modal__close {
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    margin-left: auto;
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    background: var(--surface-1);
}
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Contacto — form + info
   -------------------------------------------------------------------------- */

.contact-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--sp-9);
    align-items: start;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.contact-form__field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.contact-form__row { min-width: 0; }
.contact-form__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
    width: 100%;
    min-width: 0;
    padding: var(--sp-4);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
    outline: 0;
    border-color: var(--c-navy);
    box-shadow: 0 0 0 3px oklch(36% 0.14 263 / 0.18);
}
.contact-form__textarea { min-height: 140px; resize: vertical; }
.contact-form__submit { margin-top: var(--sp-3); align-self: flex-start; }

.contact-aside {
    background: var(--ink);
    color: var(--on-dark);
    padding: var(--sp-7);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.contact-aside__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.contact-aside__row {
    padding-block: var(--sp-3);
    border-bottom: 1px solid oklch(96% 0.005 263 / 0.12);
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--sp-3);
}
.contact-aside__row:last-of-type { border-bottom: 0; }
.contact-aside__row dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}
.contact-aside__row dd { font-size: var(--fs-sm); color: var(--on-dark); }
.contact-aside__row dd a { color: var(--c-arctur-100); }
.contact-aside__row dd a:hover { text-decoration: underline; }
.contact-aside__cta { margin-top: var(--sp-4); width: 100%; justify-content: center; }

.contact-map {
    max-width: var(--container);
    margin: var(--sp-9) auto 0;
    padding-inline: var(--gutter);
}
.contact-map iframe {
    border: 0;
    width: 100%;
    min-height: 420px;
    border-radius: var(--r-lg);
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Brand reel — hero video (HyperFrames render)
   -------------------------------------------------------------------------- */

.brand-reel {
    position: relative;
    background: var(--surface-deep, #0d1428);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.brand-reel__frame {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0d1428;
    box-shadow:
        0 24px 60px oklch(15% 0.05 263 / 0.45),
        0 0 0 1px oklch(50% 0.05 263 / 0.18) inset;
}
.brand-reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-reel__caption {
    display: none;
}
.brand-reel__eyebrow {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #ee7425;
    opacity: 0.95;
}
.brand-reel__line {
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    letter-spacing: 0.01em;
    color: #ffffff;
    opacity: 0.92;
    margin: 0;
    text-shadow: 0 1px 24px rgba(13, 20, 40, 0.6);
}
@media (max-width: 720px) {
    .brand-reel { padding-block: var(--sp-7); }
    .brand-reel__caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-reel__video { display: none; }
    .brand-reel__frame::after {
        content: "";
        position: absolute; inset: 0;
        background:
            linear-gradient(135deg, #224084 0%, #ee7425 50%, #abd037 100%);
        opacity: 0.85;
    }
}

/* --------------------------------------------------------------------------
   SR feature — flagship full-bleed banner (home)
   -------------------------------------------------------------------------- */

.sr-feature {
    position: relative;
    background: var(--surface-deep, oklch(18% 0.04 263));
    color: var(--on-dark);
    padding-block: var(--sp-10);
    padding-inline: var(--gutter);
    overflow: hidden;
    isolation: isolate;
}
.sr-feature__glow {
    position: absolute;
    inset: -10% -20% auto auto;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        oklch(60% 0.16 41 / 0.25) 0%,
        oklch(60% 0.16 41 / 0.08) 35%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.sr-feature__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin-inline: auto;
}
.sr-feature__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--c-arctur-100);
    margin-bottom: var(--sp-7);
}
.sr-feature__grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 1.3fr;
    gap: var(--sp-8);
    align-items: stretch;
}
.sr-feature__panel {
    background: var(--surface-0);
    border-radius: var(--r-lg);
    padding: var(--sp-8) var(--sp-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    box-shadow: 0 24px 60px oklch(15% 0.05 263 / 0.45);
}
.sr-feature__logo {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}
.sr-feature__divider {
    width: 80px;
    height: 2px;
    background: var(--c-arctur);
    border-radius: 2px;
}
.sr-feature__badge {
    width: 160px;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 6px 18px oklch(20% 0.04 263 / 0.18);
}
.sr-feature__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
    color: var(--on-dark);
}
.sr-feature__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 76px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--on-dark);
    text-transform: uppercase;
    margin: 0;
}
.sr-feature__title em {
    font-style: normal;
    color: var(--c-arctur-100);
    display: block;
}
.sr-feature__lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: oklch(85% 0.012 263);
    margin: 0;
    max-width: 56ch;
}
.sr-feature__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--sp-7);
    align-items: end;
    border-top: 1px solid oklch(60% 0.08 263 / 0.25);
    border-bottom: 1px solid oklch(60% 0.08 263 / 0.25);
    padding-block: var(--sp-5);
}
.sr-feature__stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.sr-feature__stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--on-dark);
}
.sr-feature__stat:nth-child(1) .sr-feature__stat-num { color: var(--c-olive-100); }
.sr-feature__stat:nth-child(2) .sr-feature__stat-num { color: var(--c-arctur-100); }
.sr-feature__stat:nth-child(3) .sr-feature__stat-num { color: oklch(75% 0.10 263); }
.sr-feature__stat-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(75% 0.012 263);
}
.sr-feature__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

@media (max-width: 900px) {
    .sr-feature__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .sr-feature__panel {
        padding: var(--sp-6) var(--sp-5);
    }
    .sr-feature__logo {
        max-width: 280px;
    }
    .sr-feature__badge {
        width: 130px;
    }
    .sr-feature__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
    }
}
@media (max-width: 540px) {
    .sr-feature { padding-block: var(--sp-9); }
    .sr-feature__stats { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   Process reel — "Una solución completa" (5 pasos)
   -------------------------------------------------------------------------- */

.process-reel {
    position: relative;
    background: var(--surface-1, #f4f4f4);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.process-reel__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    text-align: left;
}
.process-reel__head .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.process-reel__head .section-title { margin: 0; }
.process-reel__frame {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0d1428;
    box-shadow:
        0 24px 60px oklch(15% 0.05 263 / 0.45),
        0 0 0 1px oklch(50% 0.05 263 / 0.18) inset;
}
.process-reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .process-reel { padding-block: var(--sp-7); }
    .process-reel__head { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .process-reel__video { display: none; }
    .process-reel__frame::after {
        content: "01 → 02 → 03 → 04 → 05";
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display, 'Oswald', sans-serif);
        font-weight: 700;
        font-size: clamp(2rem, 5vw, 4rem);
        letter-spacing: 0.05em;
        color: #ffffff;
        background: linear-gradient(135deg, #224084 0%, #ee7425 60%, #abd037 100%);
        opacity: 0.9;
    }
}

/* --------------------------------------------------------------------------
   Clients reel — restaurantes que confían en CSII (HyperFrames)
   -------------------------------------------------------------------------- */

.clients-reel {
    position: relative;
    background: var(--surface-0, #ffffff);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.clients-reel__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    text-align: left;
}
.clients-reel__head .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.clients-reel__head .section-title { margin: 0; }
.clients-reel__frame {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0d1428;
    box-shadow:
        0 24px 60px oklch(15% 0.05 263 / 0.45),
        0 0 0 1px oklch(50% 0.05 263 / 0.18) inset;
}
.clients-reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .clients-reel { padding-block: var(--sp-7); }
    .clients-reel__head { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .clients-reel__video { display: none; }
    .clients-reel__frame::after {
        content: "Restaurantes que confían en CSII";
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display, 'Oswald', sans-serif);
        font-weight: 700;
        font-size: clamp(2rem, 5vw, 4rem);
        letter-spacing: 0.02em;
        color: #ffffff;
        background: linear-gradient(135deg, #224084 0%, #ee7425 60%, #abd037 100%);
        opacity: 0.9;
        text-align: center;
        padding: 0 5%;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   Clients grid — interactive logo wall with hover tooltips
   -------------------------------------------------------------------------- */

.clients-grid-section {
    position: relative;
    background: var(--surface-1, #f4f4f4);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.clients-grid-section__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    text-align: left;
}
.clients-grid-section__head .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.clients-grid-section__head .section-title { margin: 0; }
.clients-grid-section__lead {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    max-width: 56ch;
}

.clients-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--container);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.client-tile {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    overflow: visible;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    box-shadow:
        0 2px 8px oklch(20% 0.04 263 / 0.08),
        0 0 0 1px oklch(50% 0.04 263 / 0.10) inset;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
                z-index 0s 240ms;
    z-index: 1;
}
.client-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transition: filter 240ms ease, transform 240ms ease;
    filter: contrast(1.02);
}
.client-tile:hover img { transform: scale(1.04); }

/* Tooltip via ::after using data-name */
.client-tile::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    background: var(--ink, #171717);
    color: #ffffff;
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px oklch(20% 0.04 263 / 0.25);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}
.client-tile::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--ink, #171717);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 10;
}
.client-tile:hover,
.client-tile:focus-within {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px oklch(20% 0.04 263 / 0.18),
        0 0 0 1px var(--c-arctur) inset;
    z-index: 5;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
                z-index 0s;
}
.client-tile:hover::after,
.client-tile:focus-within::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.client-tile:hover::before,
.client-tile:focus-within::before {
    opacity: 1;
}

@media (max-width: 1100px) {
    .clients-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 800px) {
    .clients-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .client-tile::after { font-size: 11px; padding: 5px 9px; }
}

/* --------------------------------------------------------------------------
   Brands reel — tecnologías y aliados (HyperFrames)
   -------------------------------------------------------------------------- */

.brands-reel {
    position: relative;
    background: var(--surface-1, #f4f4f4);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.brands-reel__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    text-align: left;
}
.brands-reel__head .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.brands-reel__head .section-title { margin: 0; }
.brands-reel__frame {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0d1428;
    box-shadow:
        0 24px 60px oklch(15% 0.05 263 / 0.45),
        0 0 0 1px oklch(50% 0.05 263 / 0.18) inset;
}
.brands-reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .brands-reel { padding-block: var(--sp-7); }
    .brands-reel__head { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .brands-reel__video { display: none; }
    .brands-reel__frame::after {
        content: "SoftRestaurant · Eleventa · MyBusinessPOS · Hikvision · Dahua · Starlink · Cisco · TP-Link";
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display, 'Oswald', sans-serif);
        font-weight: 600;
        font-size: clamp(1rem, 2.5vw, 2rem);
        letter-spacing: 0.04em;
        color: #ffffff;
        background: linear-gradient(135deg, #224084 0%, #ee7425 60%, #abd037 100%);
        opacity: 0.9;
        text-align: center;
        padding: 0 5%;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   Brands grid — categorized brand tiles with placeholders
   -------------------------------------------------------------------------- */

.brands-grid-section {
    position: relative;
    background: var(--surface-1, #f4f4f4);
    padding-block: var(--sp-9);
    padding-inline: var(--gutter);
    overflow: hidden;
}
.brands-grid-section__head {
    max-width: var(--container);
    margin: 0 auto var(--sp-7);
    text-align: left;
}
.brands-grid-section__head .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.brands-grid-section__head .section-title { margin: 0; }
.brands-grid-section__lead {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    max-width: 60ch;
}

.brands-cats {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
}

.brands-cat {
    border-top: 1px solid var(--border-strong, oklch(85% 0.005 263));
    padding-top: var(--sp-5);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
    align-items: start;
}
.brands-cat__head { display: flex; flex-direction: column; gap: var(--sp-2); }
.brands-cat__num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: 0.3em;
    color: var(--c-arctur);
    text-transform: uppercase;
}
.brands-cat__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
    margin: 0;
    text-transform: uppercase;
}
.brands-cat__sub {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    line-height: 1.45;
    margin: 0;
    max-width: 36ch;
}

.brands-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
    gap: 14px;
    max-width: 880px;
}
.brands-row--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); }

.brand-tile {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    box-sizing: border-box;
    overflow: visible;
    box-shadow:
        0 2px 8px oklch(20% 0.04 263 / 0.08),
        0 0 0 1px oklch(50% 0.04 263 / 0.10) inset;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-tile img {
    height: 56px;
    width: auto;
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
@media (max-width: 800px) {
    .brand-tile img { height: 44px; }
}
.brand-tile__placeholder {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(16px, 2vw, 24px);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-align: center;
    line-height: 1.05;
}
.brand-tile--empty {
    background: transparent;
    border: 1px dashed oklch(60% 0.01 263 / 0.5);
    box-shadow: none;
}
.brand-tile--empty .brand-tile__placeholder {
    color: var(--ink-muted);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Hover tooltip — same pattern as clients-grid */
.brand-tile::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    background: var(--ink, #171717);
    color: #ffffff;
    font-family: var(--font-display, 'Oswald', sans-serif);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px oklch(20% 0.04 263 / 0.25);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}
.brand-tile::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--ink, #171717);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 10;
}
.brand-tile:hover,
.brand-tile:focus-within {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px oklch(20% 0.04 263 / 0.18),
        0 0 0 1px var(--c-arctur) inset;
}
.brand-tile:hover::after,
.brand-tile:focus-within::after,
.brand-tile:hover::before,
.brand-tile:focus-within::before {
    opacity: 1;
}
.brand-tile:hover::after,
.brand-tile:focus-within::after {
    transform: translate(-50%, 0);
}

@media (max-width: 900px) {
    .brands-cat { grid-template-columns: 1fr; gap: var(--sp-5); }
    .brands-row { grid-template-columns: repeat(2, 1fr); }
    .brands-row--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .brands-row, .brands-row--4 { grid-template-columns: repeat(1, 1fr); }
}

/* --------------------------------------------------------------------------
   Helpers / responsive utility
   -------------------------------------------------------------------------- */

.show-mobile { display: none; }
.hide-mobile { display: block; }
@media (max-width: 720px) {
    .show-mobile { display: block; }
    .hide-mobile { display: none; }
}