/* ─────────────────────────────────────────────────────────────────────────────
   PW Starter Theme — main stylesheet (infrastructure)
   PW Starter Theme
   Read DESIGN.md before editing. Never duplicate rules.
───────────────────────────────────────────────────────────────────────────── */


/* ── @font-face ─────────────────────────────────────────────────────────── */
/* General Sans → assets/css/general-sans.css (enqueued in Setup.php) */


/* ── CSS Variables ───────────────────────────────────────────────────────── */


/* ── Reset ───────────────────────────────────────────────────────────────── */

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

html {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    /* scroll-behavior: smooth intentionally removed — Lenis handles smooth scroll on desktop */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-surface);
}

/* WebKit: solid 50/50 accent (top) + navy (bottom) thumb */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        var(--color-accent) 50%,
        var(--color-bg) 50%
    );
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        to bottom,
        var(--color-btn-hover) 50%,
        var(--color-surface) 50%
    );
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
}


/* ── Base / Body ─────────────────────────────────────────────────────────── */

body {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-main {
    position: relative;
    min-height: 60vh;
}

/* layout-document: offset content below fixed header */
.layout-document .site-main {
    padding-top: var(--content-top);
}

/* ── Content edge frame — L/R vertical ruler bands ───────────────────────────
   Two narrow vertical strips at the far edges of the content region, painted
   as a ruler: full-width major ticks + shorter minor ticks anchored to the
   outer edge, so the page reads a touch boxed. Sit above full-bleed section
   backgrounds; never overlap copy (side padding > band). */
.site-main::before,
.site-main::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--content-band-w);
    z-index: 2;
    pointer-events: none;
    background-image:
        /* major ticks — full width */
        repeating-linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-border-alt) 22%, transparent) 0 1px,
            transparent 1px var(--content-band-major)
        ),
        /* minor ticks — short, from outer edge */
        repeating-linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-border-alt) 11%, transparent) 0 1px,
            transparent 1px var(--content-band-minor)
        );
    background-size:
        100% auto,
        var(--content-band-minor-len) auto;
    background-repeat: repeat, repeat-y;
}

.site-main::before {
    left: 0;
    background-position: 0 0, left 0;
}

.site-main::after {
    right: 0;
    background-position: 0 0, right 0;
}

@media (max-width: 768px) {
    .site-main::before,
    .site-main::after {
        width: var(--content-band-w-mobile);
    }
}


/* ── Typography ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text);
    line-height: 1.15;
}

h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-h1);
    letter-spacing: var(--tracking-h1);
    line-height: var(--leading-h1);
}

h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-h2);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-h2);
}

/* Template copy — no inline bold emphasis (see TRUTHS.md) */
:is(h1, h2, h3, h4, h5, h6, p, li, .lead, blockquote) :is(strong, b) {
    font-weight: inherit;
    color: inherit;
}

h3 {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
}

h5 {
    font-size: var(--text-h5);
    font-weight: var(--weight-semibold);
}

h6 {
    font-size: var(--text-h6);
    font-weight: var(--weight-semibold);
}

p {
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
}

p + p {
    margin-top: var(--gap-sm);
}

/* Prose contexts — increased paragraph breathing room */
.wrap--narrow p + p,
.faq-answer p + p {
    margin-top: var(--gap-md);
}

/* Lead paragraph — first p directly after a section h2 */
.wrap--narrow > h2 + p {
    font-size: 1.75rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Heading → content spacing in text sections */
.wrap--narrow h2 {
    margin-bottom: var(--gap-md);
}

.wrap--narrow h3 {
    margin-bottom: var(--gap-xs);
}

strong, b {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

em, i {
    font-style: italic;
}

blockquote {
    font-size: 2rem;
    font-weight: 500;
    font-family: var(--font-secondary);
    border-left: 3px solid var(--color-accent);
    padding-left: var(--gap-sm);
    color: var(--color-text);
    margin: var(--gap-md) 0;
}

/* Body content lists */
.entry-content ul,
.page-content ul {
    list-style: disc;
    padding-left: var(--gap-sm);
}

.entry-content ol,
.page-content ol {
    list-style: decimal;
    padding-left: var(--gap-sm);
}

.entry-content li,
.page-content li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    margin-bottom: var(--gap-xs);
}

/* Micro-label */
.label {
    display: block;
    margin-bottom: var(--gap-xs);
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Inline links */
.entry-content a,
.page-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
}

.entry-content a:hover,
.page-content a:hover {
    opacity: 0.75;
}



/* ── Layout / Wrappers ───────────────────────────────────────────────────── */

.wrap,
.wrap--narrow,
.wrap--wide {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: var(--side-pad);
    padding-right: var(--side-pad);
}

/* Section base */
.sec {
    padding-top: var(--section-pad-t);
    padding-bottom: var(--section-pad-b);
}

.sec--dark {
    background-color: var(--color-elevated);
    color: var(--color-text);
}

.sec--dark h1,
.sec--dark h2,
.sec--dark h3,
.sec--dark h4 {
    color: var(--color-text);
}

.sec--dark p {
    color: var(--color-muted);
}

.sec--gray {
    background-color: var(--color-card-bg);
}

.sec--light {
    background-color: var(--color-bg-alt);
    color: var(--color-text-alt);
}

/* Lightest grey tint — keeps .sec--light type/colors, swaps white for card tint */
.sec--light.sec--soft {
    background-color: var(--color-card-bg-alt);
}

.sec--light h1,
.sec--light h2,
.sec--light h3,
.sec--light h4,
.sec--light h5,
.sec--light h6 {
    color: var(--color-text-alt);
}

.sec--light p,
.sec--light li {
    color: var(--color-muted-alt);
}

.sec--light .label {
    color: var(--color-accent);
}

.sec--light .btn--outline {
    color: var(--color-text-alt);
    border-color: var(--color-border-alt);
}

.sec--light .btn--ghost {
    color: var(--color-text-alt);
}

/* ── Light surfaces — dark-default components overridden ─────────────────── */
:is(.sec--light, .page-hero) .lead {
    color: var(--color-muted-alt);
}

.sec--light blockquote {
    color: var(--color-text-alt);
}

.sec--light .step__title {
    color: var(--color-text-alt);
}

.sec--light .step__text {
    color: var(--color-muted-alt);
}

.sec--light .cta-band__body {
    color: var(--color-muted-alt);
}

.sec--light .sec-heading p {
    color: var(--color-muted-alt);
}

.sec--light .bento__item {
    background-color: var(--color-card-bg-alt);
    border-color: var(--color-border-alt);
}

.sec--light .faq-item,
.sec--light .faq-item:first-child {
    border-color: var(--color-border-alt);
}

.sec--light .faq-question {
    color: var(--color-text-alt);
}

.sec--light .faq-answer > p,
.sec--light .faq-answer > div,
.sec--light .faq-answer > div p {
    color: var(--color-muted-alt);
}

.sec--light .form-field label {
    color: var(--color-muted-alt);
}

.sec--light .form-field input,
.sec--light .form-field textarea,
.sec--light .form-field select {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border-alt);
    color: var(--color-text-alt);
}

.sec--light .form-field input::placeholder,
.sec--light .form-field textarea::placeholder {
    color: var(--color-dim-alt);
}

.sec--light .text-muted {
    color: var(--color-muted-alt);
}

.hero strong,
.hero b,
:is(.page-hero) strong,
:is(.page-hero) b {
    color: inherit;
}

.page-hero strong,
.page-hero b {
    color: var(--color-chrome-text);
}

/* Column grids */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
}

.grid-60-40 {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: var(--gap-lg);
    align-items: center;
}

.grid-40-60 {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: var(--gap-lg);
    align-items: center;
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-60-40,
    .grid-40-60 {
        grid-template-columns: 1fr;
    }
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    gap: var(--gap-xs);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    padding: var(--space-btn);
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.btn svg {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

/* Primary — orange */
.btn--primary {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-text);
    border-color: var(--color-btn-bg);
}

.btn--primary:hover {
    background-color: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
    color: var(--color-btn-text);
}

.btn--primary:active {
    background-color: var(--color-btn-active);
    border-color: var(--color-btn-active);
}

/* Secondary — white fill on dark sections */
.btn--secondary {
    background-color: var(--color-bg-alt);
    color: var(--color-btn-text);
    border-color: var(--color-bg-alt);
}

.btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
    color: var(--color-btn-text);
}

.btn--secondary:active {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
}

/* Dark — surface navy on dark sections */
.btn--dark {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--dark:hover {
    background-color: var(--color-row);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Outline — transparent with border */
.btn--outline {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Outline light — for dark backgrounds */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-light:hover {
    border-color: var(--color-text);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

/* WhatsApp — pill shape (only exception to --radius) */
.btn--whatsapp {
    background-color: var(--color-accent);
    color: var(--color-btn-text);
    border-color: var(--color-accent);
    border-radius: 999px;
    font-size: 1.4rem;
    padding: 0.9rem 2rem;
}

.btn--whatsapp:hover {
    background-color: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
    color: var(--color-btn-text);
}

.btn--whatsapp svg {
    width: 2rem;
    height: 2rem;
}


/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--gap-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.card__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: var(--gap-sm);
    color: var(--color-accent);
}

.card__title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--gap-xs);
}

.card__text {
    font-size: 1.5rem;
    color: var(--color-muted);
    line-height: 1.6;
}


/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.form-field label {
    font-family: var(--font-secondary);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-muted);
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    height: calc(var(--text-base) * 2.75);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--gap-xs) var(--gap-sm);
    font-size: 1.5rem;
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.form-field textarea {
    height: auto;
    min-height: 12rem;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-dim);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-field--error input,
.form-field--error textarea {
    border-color: var(--color-accent);
}

.form-field__error-msg {
    font-size: 1.3rem;
    color: var(--color-accent);
}

/* ── FAQ section deco ────────────────────────────────────────────────────── */

.faq {
    position: relative;
    overflow: hidden;
}

.faq__deco {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5rem;
    height: 5rem;
    color: var(--color-accent);
    pointer-events: none;
}


/* ── FAQ Accordion ───────────────────────────────────────────────────────── */

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

/* h3 wrapper — semantic heading for SEO, visually invisible (button handles display) */
.faq-question-wrap {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    width: 100%;
    min-width: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--gap-md) 0;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    transition: color 0.15s ease;
    overflow-wrap: break-word;
}

.faq-question:hover {
    color: var(--color-accent);
}

.faq-question__icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--color-accent);
    transition: transform 0.25s ease;
}

.faq-item.is-open .faq-question__icon {
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    padding-bottom: 0;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom     0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* min-height: 0 is required — without it, 0fr can't collapse below min-content */
.faq-answer > p {
    min-height: 0;
    font-size: 1.5rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    padding-bottom: var(--gap-md);
}


/* ── Dual FAQ (2-col accordion layout) ───────────────────────────────────── */

.dual-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xxl);
    align-items: start;
}

.dual-faq__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.dual-faq__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    margin: 0;
}

@media (max-width: 1024px) {
    .dual-faq {
        gap: var(--gap-lg);
    }
}

@media (max-width: 768px) {
    .dual-faq {
        grid-template-columns: 1fr;
    }
}


/* ── Utility ─────────────────────────────────────────────────────────────── */

.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted); }
.text-accent  { color: var(--color-accent); }
.text-white   { color: var(--color-text); }

.mt-sm  { margin-top: var(--gap-sm); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mb-sm  { margin-bottom: var(--gap-sm); }
.mb-md  { margin-bottom: var(--gap-md); }
.mb-lg  { margin-bottom: var(--gap-lg); }

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

/* Section heading block — reusable intro for any section */
.sec-heading {
    margin-bottom: var(--gap-lg);
}

.sec-heading--center {
    text-align: center;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

.sec-heading .label {
    display: block;
    margin-bottom: var(--gap-xs);
}

.sec-heading h2 {
    margin-bottom: var(--gap-sm);
}

.sec-heading p {
    font-size: 1.7rem;
}

/* Accent divider line */
.accent-line {
    display: block;
    width: 4rem;
    height: 3px;
    background-color: var(--color-accent);
    border-radius: 2px;
    margin-bottom: var(--gap-sm);
}

.sec-heading--center .accent-line {
    margin-left: auto;
    margin-right: auto;
}

.sec-heading--split {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: var(--gap-lg);
    align-items: start;
}

.sec-heading--split .sec-heading__left {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.sec-heading--split .sec-heading__left h2 {
    margin-bottom: 0;
}

.sec-heading--split .sec-heading__right {
    padding-top: 0.6rem;
}

.sec-heading--split .sec-heading__right p {
    font-size: 1.7rem;
    color: var(--color-muted);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .sec-heading--split {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
}


/* ── Animation initial states (pw-anim.js controls these) ────────────────── */
/* .js class added by inline head script in Setup.php — ensures no-JS users
   see content at full opacity (progressive enhancement pattern) */

.js [data-anim] {
    opacity: 0;
}

/* prefers-reduced-motion — skip all animations */
@media (prefers-reduced-motion: reduce) {
    .js [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ── Section padding note: both top + bottom defined in .sec above ──────── */


/* ── Homepage: Hero ──────────────────────────────────────────────────────── */

.hero__deco {
    position: absolute;
    width: 5rem;
    height: 5rem;
    color: var(--color-accent);
    pointer-events: none;
}

.hero__deco--tr {
    top: 0;
    right: 0;
}

.hero__deco--bl {
    bottom: 0;
    left: 0;
}

.hero {
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-h);
}

.hero__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-lg);
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--gap-lg);
}

:is(.is-front, .is-home-hero) .hero__inner--stack {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--gap-lg);
}

/* Homepage hero — copy + animation centered; folders rail-bottom in 100vh */
:is(.is-front, .is-home-hero) .hero.hero--light {
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: var(--gap-md);
    background-color: var(--color-bg-alt);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        var(--color-spine) calc(50% - 0.5px),
        var(--color-spine) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
    color: var(--color-text-alt);
    overflow: visible;
}

/*
 * Incomplete checkerboard — soft grey CSS grain.
 * Heroes + closing CTA bands (homepage .cta-band--closing + inner .cta-dossier).
 */
:is(.is-front, .is-home-hero) .hero.hero--light::before,
.page-hero::before,
.cta-band--closing::before,
.sec--light:has(> .wrap--wide > .cta-dossier:not(.cta-dossier--mid))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* soft grey checker — subtle paper grain */
        repeating-conic-gradient(
            from 90deg at 50% 50%,
            color-mix(in srgb, var(--color-card-bg-alt) 85%, transparent) 0deg 90deg,
            transparent 0deg 180deg
        );
    background-size: 3.2rem 3.2rem;
    background-position: 0 0;
    /* incomplete: thinner toward copy; fade out at bottom */
    -webkit-mask-image:
        radial-gradient(
            ellipse 95% 85% at 38% 36%,
            transparent 0%,
            transparent 26%,
            rgba(0, 0, 0, 0.18) 48%,
            rgba(0, 0, 0, 0.55) 72%,
            rgba(0, 0, 0, 0.72) 100%
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 clamp(10rem, 32vh, 22rem)
        );
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(
            ellipse 95% 85% at 38% 36%,
            transparent 0%,
            transparent 26%,
            rgba(0, 0, 0, 0.18) 48%,
            rgba(0, 0, 0, 0.55) 72%,
            rgba(0, 0, 0, 0.72) 100%
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 clamp(10rem, 32vh, 22rem)
        );
    mask-composite: intersect;
}

/* Closing CTA hosts — stack pattern behind content */
.cta-band--closing,
.sec--light:has(> .wrap--wide > .cta-dossier:not(.cta-dossier--mid)) {
    position: relative;
}

.cta-band--closing > *,
.sec--light:has(> .wrap--wide > .cta-dossier:not(.cta-dossier--mid)) > * {
    position: relative;
    z-index: 1;
}

/* Keep center spine above the checker (bg spine is covered by ::before) */
:is(.is-front, .is-home-hero) .hero.hero--light::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    z-index: 0;
    pointer-events: none;
    background: var(--color-spine);
}

:is(.is-front, .is-home-hero) .hero.hero--light > .hero__rail {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
    min-height: 0;
    padding-top: var(--gap-md);
    padding-bottom: 0;
}

:is(.is-front, .is-home-hero) .hero.hero--light > .hero__rail--bottom {
    justify-content: space-between;
}

/* Homepage hero — Option A: copy + animation 50/50, folders strip rail-bottom */
:is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    align-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

:is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    padding: var(--gap-lg) 0;
    position: relative;
    z-index: 1; /* keep copy above flyer spill if clip ever fails */
}

:is(.is-front, .is-home-hero) .hero.hero--light .hero__folders {
    flex: 0 0 auto;
    width: 100%;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panels,
.is-front .sec--compact .hero__panels {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 1;
    border: 1px solid var(--color-border-alt);
    border-radius: var(--radius);
    overflow: hidden;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panel,
.is-front .sec--compact .hero__panel {
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--color-border-alt);
    background-color: var(--color-card-bg-alt);
    padding: var(--gap-md);
}

:is(.is-front, .is-home-hero) .hero--light .hero__panel:first-child,
.is-front .sec--compact .hero__panel:first-child {
    border-top: none;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panel + .hero__panel,
.is-front .sec--compact .hero__panel + .hero__panel {
    border-left: none;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panel .stat,
.is-front .sec--compact .hero__panel .stat {
    text-align: left;
    max-width: none;
}

/* Hero placeholder — three independent folder shells (horizontal strip) */
:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--gap-sm);
    width: 100%;
    max-width: 160rem;
    margin-inline: auto;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder {
    --doc-folder-tab-h: 1.4rem;
    --doc-folder-tab-w: min(44%, 7.2rem);
    --doc-corner-cut: 0.9rem;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

/* Logo doc chamfer — clipped top-right corner (RLD document mark) */
.doc-corner-cut {
    --doc-border-w: 1px;
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    --doc-corner-cut-inner: calc(var(--doc-corner-cut) - var(--doc-border-w));
    position: relative;
    background-color: var(--doc-border-color);
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut)) 0,
        100% var(--doc-corner-cut),
        100% 100%,
        0 100%
    );
}

.doc-corner-cut::after {
    content: '';
    position: absolute;
    top: var(--doc-border-w);
    right: var(--doc-border-w);
    bottom: var(--doc-border-w);
    left: var(--doc-border-w);
    background-color: var(--doc-fill, var(--color-bg-alt));
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut-inner)) 0,
        100% var(--doc-corner-cut-inner),
        100% 100%,
        0 100%
    );
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: var(--doc-folder-tab-w);
    height: var(--doc-folder-tab-h);
    box-sizing: border-box;
    --doc-fill: var(--color-card-bg-alt);
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__tab.doc-corner-cut::after {
    bottom: calc(var(--doc-border-w) * -1);
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__body {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: calc(var(--doc-folder-tab-h) - 1px);
    width: 100%;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    min-height: clamp(3.2rem, 6vh, 4.5rem);
    --doc-fill: var(--color-bg-alt);
}

:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder {
    display: flex;
    flex-direction: column;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder__body {
    --doc-folder-body-pad-x: var(--gap-sm);
    --doc-folder-body-pad-y: var(--gap-sm);
    flex: 1 1 auto;
    padding: var(--gap-sm);
    box-sizing: border-box;
    min-height: 0;
}

:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder__body > * {
    position: relative;
    z-index: 1;
}

/* Stats inside first hero folder — self-contained 2-col list (no global .stat) */
:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder--stats .doc-folder__body {
    --doc-folder-stats-col: 10.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder--stats .doc-folder__body > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 34rem;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__stats {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 34rem;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__stat {
    display: grid;
    grid-template-columns: var(--doc-folder-stats-col) minmax(0, max-content);
    column-gap: 1.2rem;
    align-items: center;
    min-width: 0;
    width: 100%;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__stat-value {
    display: block;
    width: 100%;
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 1.2rem + 0.8vw, 2.4rem);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-accent);
    white-space: nowrap;
    text-align: right;
    align-self: center;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__stat-label {
    font-size: clamp(1.15rem, 0.95rem + 0.3vw, 1.35rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-alt);
    line-height: 1.15;
    min-width: 0;
    align-self: center;
}

@media (min-width: 1440px) {
    /* Wide: keep gap-sm pad — still tokens, X = Y */
    :is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder--stats .doc-folder__body {
        --doc-folder-body-pad-x: var(--gap-sm);
        --doc-folder-body-pad-y: var(--gap-sm);
        padding: var(--gap-sm);
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder--stats .doc-folder__body > *,
    :is(.is-front, .is-home-hero) .hero--light .doc-folder__stats {
        max-width: min(100%, 36rem);
    }
}

/* Lead copy — second hero folder */
:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder--lead .doc-folder__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap-sm);
}

/* Accreditation isotipo — third hero folder */
:is(.is-front, .is-home-hero) .hero--light .hero__panels.hero__panels--folders .doc-folder--accredit .doc-folder__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xs);
    text-align: center;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder--accredit .doc-folder__isotipo {
    display: block;
    width: clamp(3.2rem, 8vh, 5.6rem);
    height: auto;
    aspect-ratio: 1;
    max-width: 100%;
    object-fit: contain;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__accredit {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--color-text-alt);
    text-align: center;
}

:is(.is-front, .is-home-hero) .hero--light .doc-folder__lead {
    margin: 0;
    font-size: clamp(1.2rem, 1rem + 0.35vw, 1.45rem);
    font-weight: var(--weight-regular);
    line-height: 1.55;
    color: var(--color-muted-alt);
}

:is(.is-front, .is-home-hero) .hero__visual {
    min-width: 0;
    width: 100%;
}

:is(.is-front, .is-home-hero) .hero__visual--light {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius);
    overflow: visible;
}

/* Lead split — animation on open white field (right column) */
:is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__visual--light {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background-color: transparent;
    border-radius: 0;
    /* Clip left/top/bottom at the spine; allow right lanes to full-bleed past the rail */
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
}

/* Desktop ≥1025 — left-pin only (no optical translateX). Content rail is
   --max-width 1280; a mid-desktop -28% shift pushed flyers into the copy column. */
:is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero-anim--1a {
    position: absolute;
    left: 0;
    top: 50%;
    width: min(100%, 48rem);
    max-width: min(100%, 48rem);
    height: auto;
    max-height: min(100%, 28rem);
    aspect-ratio: 960 / 540;
    transform: translateY(-50%);
}

:is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero-anim__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Homepage hero — typography + buttons on light surface */
/* Option C — uppercase micro-label (corporate / datasheet) */
:is(.is-front, .is-home-hero) .hero--light .hero__content h1 {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: var(--color-accent);
    text-transform: uppercase;
    max-width: none;
    margin-bottom: -2rem;
}

:is(.is-front, .is-home-hero) .hero--light .hero__content h2 {
    font-size: clamp(3.2rem, 3vw + 1.1rem, 6rem);
    color: var(--color-text-alt);
}

:is(.is-front, .is-home-hero) .hero--light .hero__lead {
    color: var(--color-muted-alt);
}

:is(.is-front, .is-home-hero) .hero--light .btn--outline {
    color: var(--color-text-alt);
    border-color: var(--color-border-alt);
}

:is(.is-front, .is-home-hero) .hero--light .btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

:is(.is-front, .is-home-hero) .hero--light .btn--ghost {
    color: var(--color-text-alt);
}

:is(.is-front, .is-home-hero) .hero--light .btn--ghost:hover {
    color: var(--color-accent);
}

:is(.is-front, .is-home-hero) .hero--light .hero__panel .stat__label,
.is-front .sec--compact .hero__panel .stat__label {
    color: var(--color-muted-alt);
}

:is(.is-front, .is-home-hero) .hero__split--intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-md);
    align-items: center;
    min-height: 0;
}

:is(.is-front, .is-home-hero) .hero__split--intro .lead {
    margin: 0;
    max-width: none;
}

@media (max-width: 1024px) {
    :is(.is-front, .is-home-hero) .hero.hero--light {
        background-image: none;
    }

    /* Mobile — centered stack: copy → animation → CTAs (vertically mid in rail) */
    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-height: 0;
        gap: var(--gap-md);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__content {
        display: contents;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead h1 {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead h2 {
        order: 2;
        width: 100%;
        text-align: center;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__visual--light {
        order: 3;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 0;
        width: 100%;
        overflow: hidden;
        clip-path: none;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero-anim--1a {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: clamp(22rem, 56vw, 34rem);
        aspect-ratio: 960 / 540;
        /* Grid center ≈ 748/960; shift so it lands mid-viewport */
        transform: translateX(-28%);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__actions {
        order: 4;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        gap: var(--gap-xs);
    }

    .page-hero__actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        margin-inline: 0;
        gap: var(--gap-xs);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__actions .btn,
    .page-hero__actions .btn {
        align-self: center;
        flex: 0 0 auto;
        font-size: 1.3rem;
        padding: 0.7rem 1.2rem;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap-sm);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders .doc-folder {
        flex: unset;
        width: auto;
        min-width: 0;
        --doc-folder-tab-w: min(44%, 6rem);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders .doc-folder--lead {
        grid-column: 1 / -1;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders .doc-folder__body {
        --doc-folder-body-pad-x: var(--gap-sm);
        --doc-folder-body-pad-y: var(--gap-sm);
        padding: var(--gap-sm);
        min-height: 0;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders .doc-folder--stats .doc-folder__body {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder--stats .doc-folder__body > * {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder__stats {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xs);
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-content: center;
        align-items: center;
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder__stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-xxs);
        min-width: 0;
        width: 100%;
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder__stat-value {
        width: 100%;
        font-size: clamp(1.6rem, 4.5vw, 2rem);
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        align-self: center;
    }

    :is(.is-front, .is-home-hero) .hero--light .doc-folder__stat-label {
        font-size: clamp(1rem, 2.6vw, 1.15rem);
        line-height: 1.25;
        text-align: center;
        align-self: center;
    }

    :is(.is-front, .is-home-hero) .hero__split--intro {
        grid-template-columns: 1fr;
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panels,
    .is-front .sec--compact .hero__panels {
        flex-direction: row;
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panel,
    .is-front .sec--compact .hero__panel {
        border-top: none;
        border-left: 1px solid var(--color-border-alt);
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panel:first-child,
    .is-front .sec--compact .hero__panel:first-child {
        border-left: none;
    }
}

.hero__panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    flex-shrink: 0;
}

.hero__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(10rem, 16vh, 18rem);
    padding: var(--gap-md) var(--side-pad);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.hero__panel .stat {
    flex: unset;
    width: 100%;
    max-width: 28rem;
    text-align: center;
}

.hero__panel + .hero__panel {
    border-left: 1px solid var(--color-border);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
    min-width: 0;
    text-align: left;
}

.hero__content .label {
    color: var(--color-accent);
}

.hero__content h1 {
    font-size: var(--text-hero-sub);
    font-weight: var(--weight-hero-sub);
    letter-spacing: var(--tracking-hero-sub);
    line-height: var(--leading-hero-sub);
    color: var(--color-muted);
    max-width: 52ch;
    text-wrap: balance;
}

.hero__content h2 {
    font-size: var(--text-h2-display);
    font-weight: var(--weight-hero);
    letter-spacing: var(--tracking-hero);
    line-height: var(--leading-hero);
    color: var(--color-text);
    text-wrap: balance;
}

.hero__lead {
    font-size: var(--text-hero-lead);
    font-weight: var(--weight-regular);
    color: var(--color-muted);
    line-height: var(--leading-hero-lead);
    max-width: 50ch;
}

.hero__lead + * {
    margin-top: 0; /* gap handled by flex gap */
}

.hero__actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* Light chrome — button contrast on white page heroes */
.page-hero .btn--outline {
    color: var(--color-chrome-text);
    border-color: var(--color-chrome-border);
}

.page-hero .btn--ghost {
    color: var(--color-chrome-text);
}

.nav-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.nav-logo__img,
.nav-logo .custom-logo-link img,
.nav-logo img.custom-logo,
.nav-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 5.2rem;
    max-width: 13rem;
    object-fit: contain;
}

/* Logged-in WP admin bar — keep fixed header below toolbar */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 1024px) {
    .hero__inner {
        gap: var(--gap-md);
        padding-top: var(--gap-md);
        padding-bottom: var(--gap-md);
    }
}

@media (max-width: 768px) {
    .hero__lead {
        font-size: var(--text-base);
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panels,
    .is-front .sec--compact .hero__panels {
        flex-direction: column;
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panel,
    .is-front .sec--compact .hero__panel {
        border-left: none;
        border-top: 1px solid var(--color-border-alt);
        min-height: auto;
        padding: var(--gap-lg) var(--gap-md);
    }

    :is(.is-front, .is-home-hero) .hero--light .hero__panel:first-child,
    .is-front .sec--compact .hero__panel:first-child {
        border-top: none;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero-anim--1a {
        max-height: clamp(24rem, 62vw, 36rem);
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__panels.hero__panels--folders .doc-folder__body {
        min-height: 0;
    }

    .hero__panels {
        grid-template-columns: 1fr;
    }

    .hero__panel {
        min-height: auto;
        padding: var(--gap-lg) var(--side-pad);
    }

    .hero__panel + .hero__panel {
        border-left: none;
    }
}


/* ── Top Bar ─────────────────────────────────────────────────────────────── */

.top-bar {
    display: none; /* temp — header no longer reserves 38px; re-enable when top bar layout returns */
    height: 38px;
    overflow: hidden;
    background: var(--color-chrome-bg);
    border-bottom: 1px solid var(--color-chrome-border);
}

@keyframes topBarItemIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top-bar__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    height: 100%;
    padding: 0 var(--side-pad);
}

.top-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
    padding: 0 var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    font-weight: var(--weight-regular);
    color: var(--color-chrome-muted);
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.15s ease;
    animation: topBarItemIn 0.45s ease-out both;
}

.top-bar__item:first-child  { animation-delay: 0.05s; }
.top-bar__item:nth-child(2) { animation-delay: 0.13s; }
.top-bar__item:nth-child(3) { animation-delay: 0.21s; }
.top-bar__item:nth-child(4) { animation-delay: 0.29s; }
.top-bar__item:last-child   { animation-delay: 0.37s; }

.top-bar__item + .top-bar__item {
    border-left: 1px solid var(--color-chrome-border);
}

a.top-bar__item:hover {
    color: var(--color-chrome-text);
}

.top-bar__icon {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.55;
}

.top-bar__icon svg {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
}

.top-bar__label { opacity: 0.5; }
.top-bar__sep   { opacity: 0.3; margin: 0 0.1rem; }

/* Responsive — progressive hide */
@media (max-width: 1280px) {
    .top-bar__item--address { display: none; }
}

@media (max-width: 1100px) {
    .top-bar__item--hours { display: none; }
}

/* Mobile: hide address + hours (already hidden above), strip labels/seps — icon + value only */
@media (max-width: 768px) {
    .top-bar__item--address,
    .top-bar__item--hours,
    .top-bar__item--phone { display: none; }

    .top-bar__label,
    .top-bar__sep { display: none; }
}

/* Very small phones: hide bar entirely */
@media (max-width: 400px) {
    .top-bar { display: none; }
}


/* ── Site Header ─────────────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background-color: var(--color-chrome-bg);
    border-bottom: 1px solid var(--color-divider-subtle);
    transition: background-color 0.5s ease-in-out;
    overflow: visible; /* allow marker tooltips below the bar */
}
.site-header.is-scrolled {
    background-color: var(--color-chrome-bg);
}

/* Scroll state — reserved for future chrome changes */

/* Document pages — same solid light chrome as front page */
.layout-document .site-header {
    background-color: var(--color-chrome-bg);
}


.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Full-bleed chrome — logo/menu share footer brand left rail (--side-pad) */
    max-width: none;
    margin-inline: 0;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 0 var(--side-pad);
    gap: var(--gap-md);
    overflow: visible; /* allow mega / dropdown panels to escape header row */
}

/* Logo */
.nav-logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-chrome-text);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-logo:hover {
    color: var(--color-accent);
}

/* Primary nav */
.nav-menu-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    list-style: none;
}

/* Desktop — stretch only the menu row height so mega tip can hit the header rule */
@media (min-width: 1025px) {
    .nav-menu-wrap {
        align-self: stretch;
    }

    .nav-menu {
        height: 100%;
        align-items: stretch;
    }

    /* Non-mega items stay vertically centered in the stretched row */
    .nav-menu > .nav-item:not(.has-mega) {
        display: flex;
        align-items: center;
    }
}

.nav-item {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

/* Plain nav links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-chrome-text);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover,
.nav-item:hover > .nav-link {
    color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

/* Parent-wrap hover — one consistent accent-subtle chip for ALL parents
   (regular dropdowns AND mega). Covers full trigger area including chevron. */
.nav-item:hover > .nav-parent-wrap,
.nav-item.is-open > .nav-parent-wrap,
.nav-item.is-focused > .nav-parent-wrap {
    background-color: var(--color-accent-subtle);
}

/* Remove background from nav-link inside parent-wrap (parent-wrap now handles it) */
.nav-item:hover > .nav-parent-wrap > .nav-link,
.nav-item.is-open > .nav-parent-wrap > .nav-link,
.nav-item.is-focused > .nav-parent-wrap > .nav-link {
    background-color: transparent;
}

/* Parent wrap — folder toggle + nav-link side by side */
.nav-parent-wrap {
    display: flex;
    align-items: center;
    gap: var(--gap-xxxs);
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
    cursor: pointer;
    padding-left: 1rem;
}

.nav-parent-wrap > .nav-link {
    padding-left: 0;
}

/* Folder toggle (desktop) — visual indicator only, not interactive */
.nav-chevron {
    pointer-events: none;  /* hover on nav-item handles dropdown; button must not capture clicks */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-accent);
    transition: color 0.15s ease;
}

.nav-chevron:hover,
.nav-item:hover .nav-chevron,
.nav-item.is-focused .nav-chevron,
.nav-item.is-open .nav-chevron {
    color: var(--color-accent);
}

.nav-chevron__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-chevron__icon--open {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(1px) scale(0.92);
    pointer-events: none;
}

.nav-chevron svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

/* Closed folder → open folder when parent is hovered / open / focused */
.nav-item:hover .nav-chevron__icon--closed,
.nav-item.is-focused .nav-chevron__icon--closed,
.nav-item.is-open .nav-chevron__icon--closed {
    opacity: 0;
    transform: translateY(-1px) scale(0.92);
}

.nav-item:hover .nav-chevron__icon--open,
.nav-item.is-focused .nav-chevron__icon--open,
.nav-item.is-open .nav-chevron__icon--open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hover bridge — prevents gap from breaking :hover state */
.nav-item.has-dropdown::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    transform: translateY(100%);
}

@media (min-width: 1025px) {
    /* Same folder-tab geometry as mega: tip relative, panel under tip */
    .nav-item.has-dropdown:not(.has-mega) {
        position: relative;
        align-self: stretch;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: max-content;
        min-width: 0;
    }

    .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap {
        position: relative;
        z-index: calc(var(--z-header) + 2);
        display: flex;
        align-items: center;
        width: max-content;
        box-sizing: border-box;
    }

    /* Open — stretch wrap (label stays centered), draw short folder tab */
    .nav-item.has-dropdown:not(.has-mega):hover,
    .nav-item.has-dropdown:not(.has-mega).is-open,
    .nav-item.has-dropdown:not(.has-mega).is-focused {
        align-items: stretch;
    }

    .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap,
    .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap,
    .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap {
        background-color: transparent;
    }

    .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap::before,
    .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap::before,
    .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap::before {
        content: '';
        position: absolute;
        top: 1.4rem;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: var(--color-chrome-bg);
        /* Outer edge only — same doc-folder border recipe (35% mix) as the
           rest of the site; inner content keeps the fainter chrome divider. */
        border: 1px dotted color-mix(in srgb, var(--color-border-alt) 35%, transparent);
        border-bottom: none;
        border-radius: 0;
        box-shadow: 0 1px 0 0 var(--color-chrome-bg);
    }

    /* Hover bridge under tip → panel (keeps :hover across the seam) */
    .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -1rem;
        right: -1rem;
        height: 2rem;
        transform: translateY(100%);
    }

    .nav-item.has-dropdown:not(.has-mega)::after {
        display: none;
    }
}

/* Dropdown panel — folder body under the tab (same language as mega) */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    margin-top: 0;
    min-width: 27.5rem;
    width: max-content;
    max-width: calc(100vw - var(--side-pad) * 2);
    background-color: var(--color-chrome-bg);
    /* Outer edge only — doc-folder border recipe (35% mix); inner content
       keeps the fainter chrome divider. The panel's own opaque bg paints
       over the header's border-bottom at this seam (panel z-index sits
       above the header), so the top side must draw its own line here —
       there's nothing showing through underneath to double up with. */
    border: 1px dotted color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    border-radius: 0;
    box-shadow: none;
    padding: var(--gap-xs) 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
    overflow: hidden;
    z-index: calc(var(--z-header) + 1);
}

.nav-item:hover > .nav-dropdown,
.nav-item.is-focused > .nav-dropdown,
.nav-item.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-dropdown a,
.nav-dropdown__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    max-width: 100%;
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: color-mix(in srgb, var(--color-chrome-muted) 85%, var(--color-chrome-bg));
    padding: 0.45rem 0.6rem;
    margin: 0.15rem var(--gap-xs);
    border-radius: 0;
    text-decoration: none;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.nav-dropdown__link .nav-mega__arrow {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    display: block;
    color: var(--color-accent);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Flex context (not the mega's grid) — no icon rail to align to and no
   per-item reveal cascade to sync with, so the mask stays fully open. */
.nav-dropdown__link .nav-mega__link-square {
    justify-self: auto;
    align-self: auto;
    margin-left: 0;
    flex-shrink: 0;
    clip-path: none;
}

.nav-dropdown__link-label {
    min-width: 0;
}

.nav-dropdown a:hover,
.nav-dropdown__link:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.nav-dropdown__link:hover .nav-mega__link-square {
    background-color: var(--color-chrome-text);
}

.nav-dropdown__link:hover .nav-mega__arrow {
    transform: translate(2px, 2px);
}

/* ── Mega menu — open folder tab + contained panel body ──────────────────── */
/* Activated by CSS class "has-mega" on a menu item in WP admin.              */
/* Closed: compact accent-subtle chip. Open: the trigger becomes a folder tab */
/* that merges seamlessly into the panel body below (like an open manila folder). */

.nav-item.has-mega {
    position: relative;
    align-self: stretch; /* full header height → panel top:100% lands at header rule */
    display: flex;
    align-items: center; /* closed: compact chip vertically centered */
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
}

.nav-item.has-mega > .nav-parent-wrap {
    position: relative;
    z-index: calc(var(--z-header) + 2);
    width: max-content;
    box-sizing: border-box;
    /* inherits .nav-parent-wrap chip (radius, padding-left) */
}

/* Open — the wrap stays FULL height, so the label/icon remain vertically
   centered exactly as when closed → ZERO shift. The visible folder tab is a
   ::before drawn on the LOWER portion only (starts below the header top, so it
   is a short tab, not full height) and reaches the header rule, where its open
   bottom merges into the panel body. Rem-based offset → responsive. */
.nav-item.has-mega:hover,
.nav-item.has-mega.is-open,
.nav-item.has-mega.is-focused {
    align-items: stretch;
}

/* No accent-subtle chip on the wrap itself — the ::before is the tab surface */
.nav-item.has-mega:hover > .nav-parent-wrap,
.nav-item.has-mega.is-open > .nav-parent-wrap,
.nav-item.has-mega.is-focused > .nav-parent-wrap {
    background-color: transparent;
}

/* Open tip — white sheet merging into the white mega body; label/icon stay accent green */
.nav-item.has-mega:hover > .nav-parent-wrap::before,
.nav-item.has-mega.is-open > .nav-parent-wrap::before,
.nav-item.has-mega.is-focused > .nav-parent-wrap::before {
    content: '';
    position: absolute;
    top: 1.4rem;   /* short tab: begins below the header top, not full height */
    bottom: 0;      /* meets the header rule = panel top edge */
    left: 0;
    right: 0;
    z-index: -1;    /* sits behind the label + folder icon */
    background-color: var(--color-chrome-bg);
    /* Outer edge only — doc-folder border recipe (35% mix); inner content
       keeps the fainter chrome divider. */
    border: 1px dotted color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    border-bottom: none; /* open bottom → merges into the panel body */
    border-radius: 0;
    box-shadow: 0 1px 0 0 var(--color-chrome-bg); /* cover the rule under the tab */
}

.nav-item.has-mega:hover > .nav-parent-wrap > .nav-link,
.nav-item.has-mega.is-open > .nav-parent-wrap > .nav-link,
.nav-item.has-mega.is-focused > .nav-parent-wrap > .nav-link,
.nav-item.has-mega:hover .nav-chevron,
.nav-item.has-mega.is-open .nav-chevron,
.nav-item.has-mega.is-focused .nav-chevron {
    color: var(--color-accent);
    background-color: transparent;
}

.nav-item.has-mega::after {
    display: none;
}

.nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    margin-top: 0; /* top border lands exactly on the header rule → aligned */
    width: min(105rem, calc(100vw - 10rem));
    max-width: calc(100vw - var(--side-pad) * 2);
    padding: 0;
    background-color: var(--color-chrome-bg);
    /* Full folder-body outline; square corners — consistent with the
       chamfer-only (no border-radius) language used elsewhere on the site.
       Outer edge only — doc-folder border recipe (35% mix); inner divider
       lines keep the fainter chrome divider. The panel's own opaque bg
       paints over the header's border-bottom at this seam (panel z-index
       sits above the header), so the top side must draw its own line —
       there's nothing showing through underneath to double up with. */
    border: 1px dotted color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden; /* clips the eyebrow's full-bleed divider to the panel edge */
    transition:
        opacity 0.2s ease,
        visibility 0.2s;
    z-index: calc(var(--z-header) + 1);
}

.nav-item:hover > .nav-mega,
.nav-item.is-open > .nav-mega,
.nav-item.is-focused > .nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Contained editorial — 3-col on desktop wide; 2-col from medium down */
/* Title row uses subgrid so L1 labels share one full-bleed baseline rule */
.nav-mega__inner {
    position: relative; /* anchors the ::before/::after vertical dividers */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap-xs);
    row-gap: 0; /* title|links pairs via subgrid; spacing on .nav-mega__links */
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--color-chrome-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

/* Full-bleed vertical dividers between cols — real pseudo-elements (not a
   background layer) so z-index can lift them ABOVE the eyebrow's full-bleed
   ::after line; a background paints behind all content and got visibly cut
   wherever that horizontal line crossed it. */
.nav-mega__inner::before,
.nav-mega__inner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 3;
    border-left: 1px dotted var(--color-divider-subtle);
    pointer-events: none;
}

.nav-mega__inner::before {
    left: calc((100% - 2 * var(--gap-xs)) / 3 + var(--gap-xs) / 2);
}

.nav-mega__inner::after {
    left: calc(2 * ((100% - 2 * var(--gap-xs)) / 3 + var(--gap-xs)) - var(--gap-xs) / 2);
}

/* Desktop medium — drop to 2 cols */
@media (max-width: 1439px) {
    .nav-mega {
        width: min(92rem, calc(100vw - 8rem));
    }

    .nav-mega__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap-md);
        row-gap: 0;
    }

    .nav-mega__inner::before {
        left: 50%;
    }

    .nav-mega__inner::after {
        display: none;
    }
}

@media (max-width: 1279px) {
    .nav-mega {
        width: min(78rem, calc(100vw - 6rem));
    }

    .nav-mega__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap-md);
        row-gap: 0;
    }
}

/* Promo hidden — CSS-only pass; walker support retained */
.nav-mega__promo {
    display: none;
}

/* Column = document sheet; subgrid span 2 → shared title row + links row */
.nav-mega__col {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    min-width: 0;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.nav-mega__col .nav-mega__col-body {
    --doc-corner-cut: 0.9rem;
    --doc-fill: var(--color-chrome-bg);
    --doc-border-color: transparent; /* no border at rest */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    min-height: 0;
    /* left 1rem = .nav-parent-wrap padding → icons under Productos folder rail */
    padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) 1rem;
    box-sizing: border-box;
    /* Fill is invisible here already (matches the panel bg, no border) — the
       chamfer served no visual purpose but its clip-path was hard-clipping
       every descendant, including the eyebrow's full-bleed divider (below),
       to this column's own box. Neutralized mega-only: .doc-corner-cut keeps
       its real chamfer everywhere else on the site (folders, tabs, cards). */
    clip-path: none;
}

/* Lift real content above the doc-corner-cut fill layer (::after paints last) */
.nav-mega__col .nav-mega__col-body > * {
    position: relative;
    z-index: 1;
}

.nav-item:hover > .nav-mega .nav-mega__col,
.nav-item.is-open > .nav-mega .nav-mega__col,
.nav-item.is-focused > .nav-mega .nav-mega__col {
    opacity: 1;
    transform: none;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(1),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(1),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(1) {
    transition-delay: 0.04s;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(2),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(2),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(2) {
    transition-delay: 0.08s;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(3),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(3),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(3) {
    transition-delay: 0.12s;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(4),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(4),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(4) {
    transition-delay: 0.16s;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(5),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(5),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(5) {
    transition-delay: 0.2s;
}

.nav-item:hover > .nav-mega .nav-mega__col:nth-child(6),
.nav-item.is-open > .nav-mega .nav-mega__col:nth-child(6),
.nav-item.is-focused > .nav-mega .nav-mega__col:nth-child(6) {
    transition-delay: 0.24s;
}

/*
 * L1 eyebrow — sits on the shared subgrid title baseline. The rule under it
 * is a decorative ::after (below), not this box's own border — that lets it
 * overshoot past the panel edges (clipped by .nav-mega's overflow:hidden)
 * without enlarging this anchor's own clickable hit area, and it reaches the
 * true edges on every row regardless of column count or a short last row.
 */
.nav-mega__eyebrow,
.nav-mega__eyebrow.eyebrow {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start; /* icon top-aligned with first text line */
    align-self: end; /* whole title block sits on the shared rule */
    width: auto;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 var(--gap-xs);
    border: none;
    text-decoration: none;
    color: var(--color-chrome-text);
    font-family: var(--font-secondary);
    font-size: 1.35rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    text-transform: capitalize;
    line-height: 1.35;
    transition: color 0.15s ease;
}

/* Full-bleed rule — same trick as the hero-anim bleed (-100vw + ancestor
   overflow:hidden clip). pointer-events:none keeps it purely decorative. */
.nav-mega__eyebrow::after,
.nav-mega__eyebrow.eyebrow::after {
    content: '';
    position: absolute;
    left: -100vw;
    right: -100vw;
    bottom: 0;
    height: 0;
    border-bottom: 1px dotted var(--color-divider-subtle);
    pointer-events: none;
}

.nav-mega__eyebrow-label {
    min-width: 0;
}

.nav-mega__doc {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
}

.nav-mega__eyebrow:hover,
.nav-mega__eyebrow.eyebrow:hover {
    color: var(--color-btn-hover);
}

.nav-mega__links {
    list-style: none;
    margin: 0;
    padding: var(--gap-xs) 0 var(--gap-xs); /* under shared title rule; space before next title row */
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: start;
}

.nav-mega__item {
    list-style: none;
}

.nav-mega__link {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr); /* (4) same icon rail as eyebrows */
    column-gap: 0.55rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: color-mix(in srgb, var(--color-chrome-muted) 85%, var(--color-chrome-bg));
    padding: 0.45rem 0.6rem 0.45rem 0;
    margin-inline: 0;
    border-radius: 0;
    text-decoration: none;
    opacity: 0;
    transform: translateY(4px);
    transition:
        color 0.12s ease,
        background-color 0.12s ease,
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.nav-mega__link .nav-mega__arrow {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
    color: var(--color-accent);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accent square — replaces the leading arrow. Sits in the same 1.5rem icon
   rail as before, no overflow/bleed. */
.nav-mega__link-square {
    justify-self: start;
    align-self: center;
    /* Document icon's own artwork sits ~0.25rem inset from its cell's left
       edge (SVG path doesn't touch the viewBox edge) — nudge to match. */
    margin-left: 0.25rem;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--color-accent);
    border-radius: 1px;
    /* Mask reveal — closed (clipped to nothing) at rest; wipes open
       left→right in sync with the row's own opacity cascade below. */
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.15s ease;
    transition-delay: 0s;
}

.nav-mega__link-label {
    min-width: 0;
}

/* Same hover language as .nav-dropdown a */
.nav-mega__link:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.nav-mega__link:hover .nav-mega__arrow {
    transform: translate(2px, 2px);
}

.nav-mega__link:hover .nav-mega__link-square {
    background-color: var(--color-chrome-text);
}

/* Open — reveal links with cascade */
.nav-item:hover > .nav-mega .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__link {
    opacity: 1;
    transform: none;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link {
    transition-delay: 0.1s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link {
    transition-delay: 0.14s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link {
    transition-delay: 0.18s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link {
    transition-delay: 0.22s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link {
    transition-delay: 0.26s;
}

/* Square mask reveal — opens in sync with the row cascade above */
.nav-item:hover > .nav-mega .nav-mega__link .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__link .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__link .nav-mega__link-square {
    clip-path: inset(0 0 0 0);
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(1) .nav-mega__link-square {
    transition-delay: 0.1s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(2) .nav-mega__link-square {
    transition-delay: 0.14s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(3) .nav-mega__link-square {
    transition-delay: 0.18s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(4) .nav-mega__link-square {
    transition-delay: 0.22s;
}

.nav-item:hover > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link-square,
.nav-item.is-open > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link-square,
.nav-item.is-focused > .nav-mega .nav-mega__item:nth-child(5) .nav-mega__link-square {
    transition-delay: 0.26s;
}

/* Nav actions (right side) — green = Solicitar Demo, navy = platform login */
.nav-markers {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    height: 68px;
    overflow: visible;
}

.nav-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Tooltip — below button, right-anchored so label grows left (WA-float pattern) */
.nav-marker::after {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: var(--gap-sm);
    background-color: var(--color-elevated);
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: var(--z-tooltip);
}

.nav-marker--accent::after {
    content: 'Solicita Demo';
    right: calc(var(--gap-sm) - 68px); /* same screen position as blue tooltip */
}

.nav-marker--blue::after {
    content: 'Ingresar a Intranet';
}

.nav-marker:hover::after,
.nav-marker:focus-visible::after {
    opacity: 1;
}

.nav-marker svg {
    width: 2.8rem;
    height: 2.8rem;
    display: block;
    pointer-events: none;
    overflow: visible;
}

/* Download cue — arrow bounces into the tray */
@keyframes nav-marker-download-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.28rem);
    }
}

.nav-marker--accent .nav-marker__download-arrow {
    animation: nav-marker-download-bounce 1.35s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .nav-marker--accent .nav-marker__download-arrow {
        animation: none;
    }
}

.nav-marker--accent {
    background-color: var(--color-accent);
    color: var(--color-btn-text);
}

.nav-marker--accent:hover,
.nav-marker--accent:focus-visible {
    background-color: var(--color-btn-hover);
    color: var(--color-btn-text);
}

.nav-marker--accent:active {
    background-color: var(--color-btn-active);
}

.nav-marker--blue {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.nav-marker--blue:hover,
.nav-marker--blue:focus-visible {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.nav-marker:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
}

.nav-marker--accent:focus-visible {
    outline-color: var(--color-btn-text);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    flex-shrink: 0;
}

/* Hamburger */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.6rem;
    color: var(--color-chrome-text);
    border-radius: var(--radius);
    transition: color 0.15s ease;
}

.nav-toggle svg {
    width: 2.4rem;
    height: 2.4rem;
}

/* Hide the close icon inside toggle by default */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Collapse nav to hamburger on tablet and mobile only */
@media (min-width: 1025px) {
    .nav-markers {
        display: flex;
    }

    .nav-inner {
        padding-right: calc(13.6rem + var(--side-pad));
    }
}

@media (max-width: 1024px) {
    .nav-menu-wrap { display: none; }
    .nav-toggle    { display: flex; }
}

/* Small phones: hide WhatsApp button from header — it lives in the mobile nav overlay */
@media (max-width: 768px) {
    .nav-inner { padding: 0 var(--side-pad); }
    .nav-actions .btn--whatsapp { display: none; }
}


/* ─── Mobile nav overlay — white contrast (≤1024) ────────────────────────── */
/* Session 28: white chrome, no borders, full-row accordion. Desktop mega locked. */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-nav);
    background-color: var(--color-chrome-bg);
    color: var(--color-chrome-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}

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

/* Header bar */
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 var(--side-pad);
    border-bottom: none;
    background-color: var(--color-chrome-bg);
    flex-shrink: 0;
}

.mobile-nav__logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-chrome-text);
    text-decoration: none;
}

.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--gap-xxs);
    color: var(--color-chrome-muted);
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav__close:hover {
    color: var(--color-chrome-text);
    background-color: var(--color-accent-subtle);
}

.mobile-nav__close svg {
    width: 2.4rem;
    height: 2.4rem;
}

.mobile-nav__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gap-sm) var(--side-pad) var(--gap-lg);
    overflow-y: auto;
}

.mobile-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

/* L0 — top-level links (no borders) */
.mobile-nav__list > .menu-item > a {
    display: block;
    font-family: var(--font-secondary);
    font-size: 1.7rem;
    font-weight: var(--weight-medium);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-chrome-text);
    text-decoration: none;
    padding: var(--gap-sm) 0;
    border: none;
    transition: color 0.15s ease;
}

.mobile-nav__list > .menu-item > a:hover {
    color: var(--color-accent);
}

/* Parent row: whole row is the hit target (JS wires link + folder) */
.mobile-nav__list > .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: none;
    cursor: pointer;
}

.mobile-nav__list > .menu-item:not(.menu-item-has-children) {
    border: none;
}

.mobile-nav__list > .menu-item-has-children > a {
    flex: 1;
    min-width: 0;
    padding-right: var(--gap-xxs);
    cursor: pointer;
}

.mobile-nav__list > .menu-item-has-children.is-open > a {
    color: var(--color-accent);
}

/* L0 folder toggle */
.mobile-nav__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--gap-xxs);
    margin-right: calc(var(--gap-xxs) * -1);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.mobile-nav__toggle:hover {
    background-color: var(--color-accent-subtle);
}

.mobile-nav__toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.mobile-nav__folder {
    display: block;
    width: 2rem;
    height: 2rem;
}

.mobile-nav__folder svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mobile-nav__folder--open {
    display: none;
}

.menu-item-has-children.is-open > .mobile-nav__toggle .mobile-nav__folder--closed {
    display: none;
}

.menu-item-has-children.is-open > .mobile-nav__toggle .mobile-nav__folder--open {
    display: block;
}

/*
 * Sub-menu height: CSS display toggle (no max-height/scrollHeight).
 * Avoids clipped leaf text from undersized measured panels.
 */
.mobile-nav__list .sub-menu {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: none;
    overflow: visible;
    border: none;
}

.mobile-nav__list .menu-item-has-children.is-open > .sub-menu {
    display: block;
}

.mobile-nav__list .menu-item-has-children.is-open > .sub-menu.mobile-nav__sub--mega {
    display: flex;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .nav-backdrop {
        transition: none;
    }
}

/* Standard (non-mega) L2 leaves */
.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) {
    padding: var(--gap-xxs) 0 var(--gap-sm);
}

.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .menu-item > a,
.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .mobile-nav__leaf {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: color-mix(in srgb, var(--color-chrome-muted) 72%, var(--color-chrome-bg));
    text-decoration: none;
    padding: 0.55rem var(--gap-xxs) 0.55rem 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    transition: color 0.12s ease, background-color 0.12s ease;
}

.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .menu-item > a:hover,
.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .mobile-nav__leaf:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .menu-item > a:hover .nav-mega__arrow,
.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .mobile-nav__leaf:hover .nav-mega__arrow {
    transform: translate(2px, 2px);
}

/* Mega submenu */
.mobile-nav__sub--mega {
    gap: 0;
    padding: var(--gap-sm) 0 var(--gap-xs);
}

.mobile-nav__group {
    padding: var(--gap-sm) 0;
    border: none;
}

/* L1 — document + green capitalize */
.mobile-nav__group-eyebrow,
.mobile-nav__group-eyebrow.eyebrow {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--gap-xs);
    padding: 0;
    border: none;
    text-decoration: none;
    color: var(--color-accent);
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    text-transform: capitalize;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.mobile-nav__group-eyebrow-label {
    min-width: 0;
}

.mobile-nav__group-eyebrow .nav-mega__doc {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
}

.mobile-nav__group-eyebrow:hover,
.mobile-nav__group-eyebrow.eyebrow:hover {
    color: var(--color-btn-hover);
}

.mobile-nav__group-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* L2 — Planhat arrow + muted leaf */
.mobile-nav__group-links .menu-item > a,
.mobile-nav__group-links .mobile-nav__leaf {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: color-mix(in srgb, var(--color-chrome-muted) 72%, var(--color-chrome-bg));
    text-decoration: none;
    padding: 0.45rem var(--gap-xxs) 0.45rem 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    transition: color 0.12s ease, background-color 0.12s ease;
}

.mobile-nav__leaf-label {
    min-width: 0;
}

.mobile-nav__group-links .nav-mega__arrow,
.mobile-nav__list .sub-menu:not(.mobile-nav__sub--mega) .nav-mega__arrow {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
    color: var(--color-accent);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav__group-links .menu-item > a:hover,
.mobile-nav__group-links .mobile-nav__leaf:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.mobile-nav__group-links .menu-item > a:hover .nav-mega__arrow,
.mobile-nav__group-links .mobile-nav__leaf:hover .nav-mega__arrow {
    transform: translate(2px, 2px);
}

/* Promo — surface panel, no border */
.mobile-nav__promo {
    margin-top: var(--gap-sm);
    padding: var(--gap-sm);
    background-color: var(--color-chrome-surface);
    border: none;
    border-radius: var(--radius-sm);
}

.mobile-nav__promo-link {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
    text-decoration: none;
    color: inherit;
}

.mobile-nav__promo-title {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: var(--weight-medium);
    line-height: 1.35;
    color: var(--color-chrome-text);
    transition: color 0.15s ease;
}

.mobile-nav__promo-desc {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-chrome-muted);
    line-height: 1.5;
}

.mobile-nav__promo-link:hover .mobile-nav__promo-title {
    color: var(--color-accent);
}

.mobile-nav__cta {
    padding-top: var(--gap-md);
    margin-top: auto;
    flex-shrink: 0;
    border: none;
}

.mobile-nav__cta .btn {
    width: auto;
}

/* Backdrop */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}

.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}


/* ── Site Footer ──────────────────────────────────────────────────────────── */

.site-footer {
    background-color: var(--color-bg-alt);
    color: var(--color-muted-alt);
}

/* ── Sitemap grid ─────────────────────────────────────────────────────────── */

.footer-sitemap {
    padding: var(--gap-xl) 0;
}

.footer-sitemap__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg);
    align-items: start;
}

.footer-sitemap__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 0;
}

.footer-sitemap__title {
    margin: 0;
    padding-bottom: var(--gap-xs);
    color: var(--color-text-alt);
}

.footer-sitemap__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.footer-sitemap__links a {
    font-size: var(--text-sm);
    color: var(--color-muted-alt);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.footer-sitemap__links a:hover {
    color: var(--color-text-alt);
}

/* ── Brand block (wireframe: A | C / B1 B2 | slot) ─────────────────────────── */

.footer-brand {
    --doc-folder-tab-h: 3.2rem;
    --doc-folder-tab-w: min(52%, 14rem);
    --doc-corner-cut: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Clearance so tabs sit against white chrome above */
    padding-top: var(--doc-folder-tab-h);
}

.footer-brand__pane {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 48vh;
}

.footer-brand__tab.doc-folder__tab {
    position: absolute;
    top: calc(var(--doc-folder-tab-h) * -1 + 1px);
    left: 0;
    z-index: 2;
    display: block;
    width: var(--doc-folder-tab-w);
    height: var(--doc-folder-tab-h);
    box-sizing: border-box;
    --doc-border-w: 0px;
    --doc-border-color: transparent;
    --doc-corner-cut-inner: var(--doc-corner-cut);
    background-color: transparent;
}

.footer-brand__tab.doc-corner-cut::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.footer-brand__pane--green {
    background-color: var(--color-accent);
    padding: var(--gap-lg) var(--side-pad) var(--gap-lg);
}

.footer-brand__pane--green .footer-brand__tab {
    --doc-fill: var(--color-accent);
}

.footer-brand__pane--navy {
    background-color: var(--color-bg);
    padding: var(--gap-lg) var(--side-pad) var(--gap-lg);
}

.footer-brand__pane--navy .footer-brand__tab {
    --doc-fill: var(--color-bg);
}

.footer-brand__tab.footer-brand__tab--end.doc-folder__tab {
    left: auto;
    right: 0;
    /* Mirror chamfer → top-left */
    clip-path: polygon(
        0 var(--doc-corner-cut),
        var(--doc-corner-cut) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

.footer-brand__tab.footer-brand__tab--end.doc-corner-cut::after {
    clip-path: polygon(
        0 var(--doc-corner-cut-inner),
        var(--doc-corner-cut-inner) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

.footer-brand__a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    margin-bottom: var(--gap-md);
}

.footer-brand__text {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.1;
}

.footer-brand__domain {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    letter-spacing: 0.12em;
    color: var(--color-text);
    line-height: 1.2;
}

.footer-brand__lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    min-width: 0;
    width: 100%;
    max-width: none;
    align-items: start;
}

@media (min-width: 1280px) {
    .footer-brand__lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.footer-brand__lists-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
}

.footer-brand__institutional {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    min-width: 0;
}

.footer-brand__institutional .footer-brand__nav-title {
    margin: 0;
}

.footer-brand__bottom--green {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding-top: var(--gap-md);
}

.footer-brand__contact {
    margin: 0;
    max-width: 28rem;
}

.footer-brand__copy {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.4;
    color: var(--color-text);
    text-align: left;
}

.footer-brand__credits {
    margin: var(--gap-xs) 0 0;
    max-width: 32rem;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.55;
    color: var(--color-text);
    text-align: left;
}

.footer-brand__credits a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.footer-brand__credits a:hover {
    opacity: 0.72;
}

.footer-brand__nav {
    min-width: 0;
}

.footer-brand__nav-title {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.3;
}

.footer-brand__nav-title a {
    color: inherit;
    text-decoration: none;
}

.footer-brand__nav-title a:hover {
    opacity: 0.72;
}

.footer-brand__nav-slash {
    margin-left: 0.05em;
}

.footer-brand__tree {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.footer-brand__folder {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-brand__nav-static {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    color: var(--color-text);
}

.footer-brand__nav-static--emails .footer-brand__nav-label a {
    color: inherit;
    text-decoration: none;
}

.footer-brand__nav-static--emails .footer-brand__nav-label a:hover {
    opacity: 0.72;
}

.footer-brand__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-brand__nav-list.footer-brand__nav-list--nested {
    padding-left: var(--gap-sm);
}

.footer-brand__nav-list a {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.footer-brand__nav-list a:hover {
    opacity: 0.72;
}

.footer-brand__nav-elbow {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.9rem;
    height: 0.75rem;
    margin-top: 0.2em;
    border-left: 1px solid rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}

.footer-brand__nav-label {
    min-width: 0;
}

/* ── Footer responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .footer-sitemap__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-sitemap__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand {
        grid-template-columns: 1fr;
    }

    .footer-brand__pane {
        min-height: 0;
    }

    .footer-brand__pane--navy {
        order: -1;
        min-height: 28rem;
    }

    .footer-brand__pane--green {
        order: 0;
        min-height: 12rem;
    }

    /* Flat top under navy — no green folder tab on mobile */
    .footer-brand__pane--green .footer-brand__tab {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-sitemap__grid {
        grid-template-columns: 1fr;
    }
}

/* Size variants */
.btn--sm {
    font-size: 1.3rem;
    padding: 0.6rem 1.4rem;
}

.btn--lg {
    font-size: 1.7rem;
    padding: 1.4rem 3rem;
}

/* Ghost — transparent bg, no visible border */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
}

/* Mobile — full-width buttons, centered (wraps long labels) */
@media (max-width: 768px) {
    .btn {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
        box-sizing: border-box;
    }

    .soluciones__module-cta {
        align-self: stretch;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__split--lead .hero__actions,
    .page-hero__actions {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }

    :is(.is-front, .is-home-hero) .hero.hero--light .hero__actions .btn,
    .page-hero__actions .btn {
        align-self: stretch;
        flex: none;
        width: 100%;
        min-height: 4.4rem;
        box-sizing: border-box;
    }
}


/* ── WhatsApp floating button ─────────────────────────────────────────────── */

.wa-float {
    position: fixed;
    bottom: var(--gap-sm);
    right: var(--gap-sm);
    z-index: 900;
    display: block;
    width: 5.6rem;
    height: 5.6rem;
    color: var(--color-text);
    box-shadow: none;
    transition: transform 0.2s ease;
}

.wa-float__btn {
    --doc-corner-cut: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    border-radius: 0;
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut)) 0,
        100% var(--doc-corner-cut),
        100% 100%,
        0 100%
    );
    transition: background-color 0.2s ease;
}

.wa-float svg {
    width: 2.8rem;
    height: 2.8rem;
}

.wa-float:hover {
    transform: translateY(-2px);
}

.wa-float:hover .wa-float__btn {
    background-color: var(--color-btn-hover);
}

.wa-float::after {
    content: 'WhatsApp';
    position: absolute;
    right: calc(100% + 0.8rem);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-elevated);
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.wa-float:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .wa-float {
        bottom: var(--gap-sm);
        right: var(--gap-sm);
        width: 5rem;
        height: 5rem;
    }

    .wa-float__btn {
        --doc-corner-cut: 0.75rem;
    }

    .wa-float svg {
        width: 2.4rem;
        height: 2.4rem;
    }

    .wa-float::after {
        display: none; /* tooltip not shown on touch devices */
    }
}


/* ── Page Hero (shared across all inner pages) ───────────────────────────── */

.page-hero {
    background-color: var(--color-chrome-bg);
    color: var(--color-chrome-text);
    margin-top: calc(-1 * var(--content-top));
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + var(--gap-xl));
    padding-bottom: var(--gap-xl);
    position: relative;
    overflow: hidden;
}

.page-hero__deco {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5rem;
    height: 5rem;
    color: var(--color-accent);
    pointer-events: none;
}

.page-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.page-hero h2 {
    color: var(--color-chrome-text);
}

.page-hero h1 {
    color: var(--color-chrome-text);
    font-size: var(--text-h1);
    margin-bottom: var(--gap-md);
}

.page-hero strong,
.page-hero b {
    color: var(--color-chrome-text);
}

.page-hero__lead {
    font-size: var(--text-md);
    color: var(--color-chrome-muted);
    line-height: var(--leading-hero-lead);
    max-width: 62ch;
}

.page-hero .lead {
    color: var(--color-chrome-muted);
}

.page-hero .single-breadcrumbs a {
    color: var(--color-chrome-dim);
}

.page-hero .single-breadcrumbs a:hover {
    color: var(--color-accent);
}

.page-hero .single-breadcrumbs span[aria-hidden] {
    color: var(--color-chrome-dim);
}

.page-hero .single-breadcrumbs span[aria-current] {
    color: var(--color-chrome-muted);
}



.page-hero__actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.page-hero__actions p {
    color: var(--color-chrome-muted);
    font-size: 1.5rem;
    margin: 0;
    align-self: center;
}



/* ── Archive / Blog templates ────────────────────────────────────────────── */

.archive-wrap {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--gap-xl) var(--side-pad);
}

/* Marketing sections own vertical rhythm; archive-wrap is rail only inside them.
   Full gap-xl pad remains for true archive/blog shells (not children of .sec). */
.sec > .archive-wrap,
.sec--editorial > .archive-wrap,
.faq > .archive-wrap,
.faq.faq--dossier > .archive-wrap {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--side-pad);
    padding-right: var(--side-pad);
}

.archive-header {
    margin-bottom: var(--gap-lg);
    padding-bottom: var(--gap-md);
    border-bottom: 1px solid var(--color-border);
}

.archive-header .pw-page-title {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.archive-list {
    display: flex;
    flex-direction: column;
}

.archive-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-md);
    padding: var(--gap-md) 0;
    border-bottom: 1px solid var(--color-border-inner);
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.archive-row:hover {
    color: var(--color-accent);
}

.archive-title {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.archive-date {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

.archive-empty {
    padding: var(--gap-lg) 0;
    font-size: var(--text-base);
    color: var(--color-muted);
}

.archive-pagination {
    margin-top: var(--gap-lg);
}

@media (max-width: 580px) {
    .archive-row {
        flex-direction: column;
        gap: var(--gap-xxs);
    }
}

/* Archive row — card variant (thumbnail + body sub-elements) */

.archive-row__thumb {
    width: 14rem;
    height: 10rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface);
}

.archive-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    min-width: 0;
    flex: 1;
}

.archive-row__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.archive-row__title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
    margin: 0;
    transition: color 0.2s ease;
}

.archive-row:hover .archive-row__title {
    color: var(--color-accent);
}

.archive-row__excerpt {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .archive-row__thumb {
        width: 100%;
        height: 14rem;
    }
}


/* ── Search ──────────────────────────────────────────────────────────────── */

.search-row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--gap-md);
    align-items: center;
    padding: var(--gap-sm) 0;
    border-bottom: 1px solid var(--color-border-inner);
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.search-row:hover {
    color: var(--color-accent);
}

.search-thumb {
    width: 8rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-thumb__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-thumb__placeholder span {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-dim);
    letter-spacing: 0.05em;
}

.search-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

@media (max-width: 580px) {
    .search-row {
        grid-template-columns: 6rem 1fr;
    }
}


/* ── FAQ answer: div wrapper for rich content (lists, multiple paragraphs) ── */

.faq-answer > div {
    min-height: 0;
    font-size: 1.5rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.faq-answer > div p {
    margin-bottom: var(--gap-sm);
}

.faq-answer > div p:last-child {
    margin-bottom: 0;
}

.faq-answer > div ul,
.faq-answer > div ol {
    margin-left: var(--gap-md);
    margin-bottom: var(--gap-sm);
}

.faq-answer > div li {
    margin-bottom: var(--gap-xxs);
}


/* ── Page hero eyebrow (small H2 above H1, styled small — not the type scale) */

.page-hero__eyebrow {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--gap-sm) 0;
}


/* ── Single Post ─────────────────────────────────────────────────────────── */

/* Breadcrumbs */
.single-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.single-breadcrumbs a {
    color: var(--color-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-breadcrumbs a:hover {
    color: var(--color-accent);
}

.single-breadcrumbs span[aria-hidden] {
    color: var(--color-dim);
    opacity: 0.75;
}

.single-breadcrumbs span[aria-current] {
    color: var(--color-muted);
}

/* Author widget */
.single-author {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--gap-xs);
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.2s ease;
}

.single-author:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.single-author__icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--color-btn-text);
}

.single-author__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.4rem;
}

.single-author__label {
    color: rgba(255, 255, 255, 0.5);
}

.single-author__name {
    color: var(--color-btn-text);
    font-weight: var(--weight-semibold);
}

.single-author__role {
    color: rgba(255, 255, 255, 0.5);
}

.single-author__role::before {
    content: '—';
    margin-right: 0.4rem;
}

/* Hero tagline (was promo band) */
.single-hero__tagline {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: var(--weight-regular);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    max-width: 56ch;
    margin: 0;
}

/* Full-bleed featured image */
.single-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.single-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 3-column post body */
.single-body {
    display: grid;
    grid-template-columns: 5rem 1fr 28rem;
    gap: 0 var(--gap-lg);
    align-items: start;
}

/* Share column — narrow, sticky */
.single-share {
    position: sticky;
    top: calc(var(--header-h) + var(--gap-md));
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding-top: 0.4rem;
}

.single-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-muted);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.single-share__btn svg {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

.single-share__btn--fb:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.single-share__btn--x:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

.single-share__btn--li:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Post content — prose styles */
.single-content {
    min-width: 0;
    font-size: 1.7rem;
    line-height: 1.75;
    color: var(--color-text);
}

.single-content h2 {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-normal);
    margin-top: var(--gap-lg);
    margin-bottom: var(--gap-sm);
    color: var(--color-text);
}

.single-content h3 {
    font-family: var(--font-primary);
    font-size: clamp(1.7rem, 2vw, 2.1rem);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    margin-top: var(--gap-md);
    margin-bottom: var(--gap-xs);
    color: var(--color-text);
}

.single-content h4 {
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: var(--weight-semibold);
    margin-top: var(--gap-sm);
    margin-bottom: var(--gap-xxs);
    color: var(--color-text);
}

.single-content p {
    margin-top: var(--gap-sm);
    margin-bottom: 0;
}

.single-content p:first-child {
    margin-top: 0;
}

.single-content a {
    color: var(--color-accent);
    text-underline-offset: 3px;
}

.single-content a:hover {
    text-decoration: underline;
}

.single-content ul,
.single-content ol {
    margin: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
}

.single-content li {
    margin-bottom: var(--gap-xxs);
    line-height: var(--leading-relaxed);
}

.single-content blockquote {
    margin: var(--gap-md) 0;
    padding: var(--gap-sm) var(--gap-md);
    background-color: var(--color-card-bg);
    font-style: italic;
    font-size: 1.8rem;
    color: var(--color-muted);
}

.single-content figure {
    margin: var(--gap-md) 0;
}

.single-content figure img,
.single-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.single-content figcaption {
    font-size: 1.3rem;
    color: var(--color-dim);
    margin-top: var(--gap-xxs);
    font-family: var(--font-secondary);
}

.single-content strong,
.single-content b {
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.single-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--gap-lg) 0;
}

/* Sidebar */
.single-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    position: sticky;
    top: calc(var(--header-h) + var(--gap-md));
}

.single-sidebar__block {
    padding-top: var(--gap-sm);
}

.single-sidebar__block::before {
    content: '';
    display: block;
    width: 4rem;
    height: 3px;
    background: var(--color-accent);
    margin-bottom: var(--gap-sm);
}

.single-sidebar__title {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--gap-md);
}

/* Related posts */
.single-related {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.single-related__item {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--gap-xs);
    padding: var(--gap-xs) 0;
    border-bottom: 1px solid var(--color-border-inner);
    text-decoration: none;
    align-items: center;
    transition: background-color 0.15s ease;
}

.single-related__item:first-child {
    padding-top: 0;
}

.single-related__item:last-child {
    border-bottom: none;
}

.single-related__item:hover .single-related__name {
    color: var(--color-accent);
}

.single-related__thumb {
    width: 6rem;
    height: 5rem;
    object-fit: cover;
    display: block;
}

.single-related__thumb-placeholder {
    width: 6rem;
    height: 5rem;
    background-color: var(--color-card-bg);
}

.single-related__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

.single-related__date {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-dim);
}

.single-related__name {
    font-size: 1.4rem;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
    transition: color 0.2s ease;
}

/* Categories list */
.single-cats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.single-cats__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-xs) 0;
    border-bottom: 1px solid var(--color-border-inner);
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--color-muted);
    transition: color 0.2s ease;
}

.single-cats__link:hover,
.single-cats__link--active {
    color: var(--color-accent);
}

.single-cats__count {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-dim);
    flex-shrink: 0;
}

/* Tags */
.single-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--gap-lg);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-border);
}

.single-tags__label {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-dim);
}

.single-tags__tag {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    padding: 0.4rem 1rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.single-tags__tag:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ── Single Post Responsive ──────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .single-body {
        grid-template-columns: 5rem 1fr 24rem;
        gap: 0 var(--gap-md);
    }
}

@media (max-width: 1024px) {
    .single-body {
        grid-template-columns: 1fr 24rem;
        grid-template-areas:
            "content sidebar"
            "content sidebar";
    }

    .single-share {
        display: none; /* hidden on tablet — share via OS or copy link */
    }

    .single-content {
        grid-area: content;
    }

    .single-sidebar {
        grid-area: sidebar;
    }
}

@media (max-width: 768px) {
    .single-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar";
    }

    .single-sidebar {
        position: static;
    }

    .single-image {
        height: 280px;
    }
}

/* ── Grid auto-fill ──────────────────────────────────────────────────────── */

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: var(--gap-md);
}


/* ── Stats row ───────────────────────────────────────────────────────────── */

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
}

.stat {
    flex: 1 1 16rem;
    min-width: 0;
}

.stat__number {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

.stat__label {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-top: var(--gap-xxs);
}


/* ── CTA band ────────────────────────────────────────────────────────────── */

.cta-band {
    text-align: center;
}

.cta-band__eyebrow {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--gap-sm);
}

.cta-band__heading {
    font-family: var(--font-primary);
    font-size: var(--text-h2-display);
    font-weight: var(--weight-bold);
    margin-bottom: var(--gap-md);
}

.cta-band__body {
    font-size: var(--text-lg);
    color: var(--color-muted);
    margin-bottom: var(--gap-lg);
    max-width: 60ch;
    margin-inline: auto;
}

.cta-band__actions {
    display: flex;
    gap: var(--gap-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── CTA band — closing (homepage): centered + editorial spine ───────────── */

.is-front .cta-band--closing {
    text-align: center;
}

.is-front .cta-band--closing .cta-band__heading {
    --rail-mark: var(--gap-xxs);
    --rail-clear: var(--gap-sm);
    font-weight: var(--weight-light);
    position: relative;
    z-index: 1;
    max-width: 22ch;
    margin-inline: auto;
    margin-bottom: 0;
    padding: var(--gap-sm);
    text-wrap: balance;
    background-color: var(--color-bg-alt);
}

.is-front .cta-band--closing .cta-band__body {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    margin-bottom: 0;
    max-width: 52ch;
    padding-inline: var(--gap-sm);
    background-color: var(--color-bg-alt);
}

.is-front .cta-band--closing .cta-band__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    gap: 0;
    background-color: transparent;
}

.is-front .cta-band--closing .cta-band__actions > :first-child {
    justify-self: end;
    margin-inline-end: var(--gap-sm);
}

.is-front .cta-band--closing .cta-band__actions > :last-child {
    justify-self: start;
    margin-inline-start: var(--gap-sm);
}

.is-front .cta-band__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
}

.is-front .cta-band__visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin-top: calc(var(--gap-lg) - var(--gap-md));
    min-height: clamp(12rem, 18vw, 20rem);
    overflow: visible;
    background-color: var(--color-bg-alt);
}

.is-front .cta-band__visual .editorial-anim--2b {
    --ea-stage-fill: transparent;
    width: 100%;
    max-width: 52rem;
}

.is-front .cta-band__panel {
    --doc-corner-cut: 2.8rem;
    --doc-fill: var(--color-card-bg-alt);
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    position: relative;
    width: 100%;
    min-height: 24rem;
    align-self: stretch;
}

.is-front .cta-band__panel-accent {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: var(--doc-corner-cut);
    height: var(--doc-corner-cut);
    background-color: var(--color-accent);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

@media (max-width: 640px) {
    .is-front .cta-band--closing .cta-band__actions {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--gap-sm);
        margin-bottom: var(--gap-md);
    }

    .is-front .cta-band--closing .cta-band__actions > :first-child,
    .is-front .cta-band--closing .cta-band__actions > :last-child {
        justify-self: center;
        margin-inline: 0;
    }

    .is-front .cta-band__visual {
        display: none;
    }

    .is-front .cta-band--closing.sec--editorial {
        --editorial-pad-t: calc(var(--gap-lg) + var(--gap-sm) + var(--gap-xxs));
        --editorial-pad-b: var(--gap-lg);
        padding-top: var(--editorial-pad-t);
        padding-bottom: var(--editorial-pad-b);
    }
}


/* ── Bento grid ──────────────────────────────────────────────────────────── */

.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(20rem, auto);
    gap: var(--gap-md);
}

.bento__item {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--gap-md);
    min-width: 0;
    overflow-wrap: break-word;
}

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

@media (max-width: 1024px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(auto, auto);
        gap: var(--gap-md);
    }

    .bento__item--wide,
    .bento__item--hero {
        grid-column: span 2;
    }
}

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


/* ── Full-bleed utility ──────────────────────────────────────────────────── */

.full-bleed {
    width: auto;
    max-width: 100%;
    margin-inline: calc(50% - 50vw);
    box-sizing: border-box;
}


/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.eyebrow {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
}


/* ── Lead paragraph ──────────────────────────────────────────────────────── */

.lead {
    font-size: var(--text-lg);
    color: var(--color-muted);
    line-height: 1.7;
    max-width: 65ch;
}


/* ── Step numerals (shared; process rails use .step-rail in inner-pages.css) ─ */

.step__num {
    font-family: var(--font-primary);
    font-size: clamp(3.6rem, 5vw, 5.6rem);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    line-height: 1;
}


/* ── Placeholders ────────────────────────────────────────────────────────── */

.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-dim);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--gap-md);
}

.sec--light .ph {
    background-color: var(--color-card-bg-alt);
    border-color: var(--color-border-alt);
    color: var(--color-dim-alt);
}

.ph--media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}

/* ── Media frame — left white square-dot strip (photo overlays) ───────────── */

.media-frame {
    position: relative;
    display: block;
    overflow: hidden;
}

.media-frame > img {
    display: block;
    width: 100%;
    height: auto;
}

.media-frame::after,
.ph--media::after,
.casos-bento__media::after,
.cap-dir__thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(3.2rem, 16%, 5.6rem);
    pointer-events: none;
    --media-dot: 1px;
    --media-dot-gap: var(--gap-xs);
    --media-dot-color: color-mix(in srgb, #ffffff 55%, transparent);
    /* True spaced squares via intersecting strip masks */
    background-color: var(--media-dot-color);
    -webkit-mask-image:
        repeating-linear-gradient(
            90deg,
            #000 0,
            #000 var(--media-dot),
            transparent var(--media-dot),
            transparent var(--media-dot-gap)
        ),
        repeating-linear-gradient(
            0deg,
            #000 0,
            #000 var(--media-dot),
            transparent var(--media-dot),
            transparent var(--media-dot-gap)
        );
    -webkit-mask-composite: source-in;
    mask-image:
        repeating-linear-gradient(
            90deg,
            #000 0,
            #000 var(--media-dot),
            transparent var(--media-dot),
            transparent var(--media-dot-gap)
        ),
        repeating-linear-gradient(
            0deg,
            #000 0,
            #000 var(--media-dot),
            transparent var(--media-dot),
            transparent var(--media-dot-gap)
        );
    mask-composite: intersect;
}

.ph--logo {
    min-height: 8rem;
    width: 100%;
}

.ph--map {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ph--form {
    min-height: 32rem;
    width: 100%;
}

/*
 * HubSpot new-forms host
 * Theme uses html { font-size: 10px }. HubSpot rem/em math expects ~16px —
 * set a local 1.6rem (16px) context on the host. Force frame/iframe full width
 * (HubSpot often stamps a tiny inline width when init runs in a closed modal).
 */
.hs-form-host {
    --hsf-global__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-global__font-size: 1.6rem;
    --hsf-global__color: var(--color-text-alt);
    --hsf-global-error__color: var(--color-error);
    --hsf-background__background-color: var(--color-bg-alt);
    --hsf-background__padding: 0;
    --hsf-background__border-width: 0;
    --hsf-background__border-style: none;
    --hsf-heading__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-heading__color: var(--color-text-alt);
    --hsf-richtext__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-richtext__font-size: 1.6rem;
    --hsf-richtext__color: var(--color-muted-alt);
    --hsf-field-label__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-field-label__font-size: 1.4rem;
    --hsf-field-label__color: var(--color-text-alt);
    --hsf-field-label-requiredindicator__color: var(--color-error);
    --hsf-field-input__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-field-input__color: var(--color-text-alt);
    --hsf-field-input__background-color: var(--color-bg-alt);
    --hsf-field-input__border-color: var(--color-border-alt);
    --hsf-field-input__border-width: 1px;
    --hsf-field-input__border-style: solid;
    --hsf-field-input__border-radius: var(--radius);
    --hsf-field-input__padding: 1.2rem 1.4rem;
    --hsf-button__font-family: var(--font-primary), system-ui, sans-serif;
    --hsf-button__font-size: 1.5rem;
    --hsf-button__color: var(--color-btn-text);
    --hsf-button__background-color: var(--color-accent);
    --hsf-button__border-radius: var(--radius);
    --hsf-button__padding: 1.4rem 2.4rem;
    --hsf-row__vertical-spacing: 1.6rem;
    --hsf-row__horizontal-spacing: 1.6rem;

    width: 100%;
    max-width: 100%;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: left;
    color: var(--color-text-alt);
}

.hs-form-frame {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    min-height: 32rem;
}

.hs-form-frame iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border: 0;
    margin: 0;
}

.modal__form {
    width: 100%;
}

.ph--avatar {
    aspect-ratio: 1;
    width: 100%;
    max-width: 20rem;
}


/* ── Card icon slot placeholder ──────────────────────────────────────────── */

.card__mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius);
    background-color: var(--color-accent);
    opacity: 0.2;
    margin-bottom: var(--gap-sm);
    flex-shrink: 0;
}


/* ── Demo modal ──────────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background-color: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1101;
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: var(--gap-md) var(--side-pad);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal__shell {
    position: relative;
    width: 100%;
    max-width: min(64rem, 92vw);
    margin-block: auto;
    transform: scale(0.92);
    opacity: 0;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-base);
    transform-origin: center center;
    will-change: transform, opacity;
}

.modal.is-open.is-entered .modal__shell {
    transform: scale(1);
    opacity: 1;
}

.modal.is-open.is-closing .modal__shell {
    transform: scale(0.92);
    opacity: 0;
}

/* Folder anatomy — chamfered body only (no tab; white-on-white tab read as a grey seam) */
.modal__panel.doc-folder {
    --doc-corner-cut: 1.4rem;
    --doc-border-w: 1px;
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    text-align: left;
}

.modal__panel .doc-folder__body {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    padding: var(--gap-md);
    background-color: var(--color-bg-alt);
    --doc-fill: var(--color-bg-alt);
}

.modal__panel .doc-folder__body > *:not(.modal__close) {
    position: relative;
    z-index: 1;
}

.modal__panel .doc-folder__body > .modal__close {
    position: absolute;
    top: var(--gap-sm);
    right: var(--gap-sm);
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    background-color: var(--color-accent);
    border: none;
    border-radius: 0;
    color: var(--color-bg);
    cursor: pointer;
    z-index: 3;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal__close-icon {
    display: block;
    font-size: 2.4rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-bg);
    transform: translateY(-0.05em);
}

.modal__panel .doc-folder__body > .modal__close:hover {
    background-color: var(--color-btn-hover);
}

.modal__panel .doc-folder__body > .modal__close:hover .modal__close-icon {
    color: var(--color-bg);
}

.modal__panel .doc-folder__body > .modal__close:focus-visible {
    outline: 2px solid var(--color-bg);
    outline-offset: 2px;
}

.modal__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xxs);
    margin-bottom: var(--gap-sm);
    padding-inline: 4.8rem;
    text-align: center;
}

.modal__isotipo {
    display: block;
    width: clamp(4.4rem, 5vw, 5.6rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    flex-shrink: 0;
    margin-inline: auto;
}

.modal__title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-alt);
    margin: 0;
    text-align: center;
}

.modal__form.hs-form-host {
    --hsf-background__background-color: var(--color-bg-alt);
    --hsf-row__vertical-spacing: 1.2rem;
    --hsf-module__vertical-spacing: 1.2rem;
    width: 100%;
    background-color: var(--color-bg-alt);
}

.modal__form .hs-form-frame {
    min-height: 0;
    background-color: var(--color-bg-alt);
}

.modal__form .hs-form-frame iframe {
    background-color: var(--color-bg-alt);
    vertical-align: top;
}

body.modal-open {
    overflow: hidden;
}

/* Desktop + tablet: slightly wider sheet, no inner scrollbar — overlay scrolls if needed */
@media (min-width: 769px) {
    .modal {
        padding: var(--gap-lg) var(--side-pad);
    }

    .modal__shell {
        max-width: min(72rem, 90vw);
    }

    .modal__panel.doc-folder {
        --doc-corner-cut: 1.6rem;
    }

    .modal__panel .doc-folder__body {
        padding: var(--gap-md);
    }
}

@media (min-width: 1025px) {
    .modal__shell {
        max-width: min(76rem, 86vw);
    }
}

/* Mobile only: constrain height + inner scroll */
@media (max-width: 768px) {
    .modal {
        align-items: flex-start;
        padding: var(--gap-md) var(--side-pad);
    }

    .modal__shell {
        max-width: 100%;
    }

    .modal__panel.doc-folder {
        --doc-corner-cut: 1.1rem;
    }

    .modal__panel .doc-folder__body {
        max-height: calc(100dvh - 3.2rem);
        overflow-x: hidden;
        overflow-y: auto;
        padding: var(--gap-sm);
    }

    .modal__panel .doc-folder__body > .modal__close {
        top: var(--gap-xs);
        right: var(--gap-xs);
        width: 3.2rem;
        height: 3.2rem;
    }

    .modal__header {
        padding-inline: 3.6rem;
        margin-bottom: var(--gap-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-backdrop,
    .modal__shell {
        transition: none;
    }

    .modal__shell {
        transform: none;
        opacity: 1;
    }
}


.sec--light .card {
    background-color: var(--color-card-bg-alt);
    border-color: var(--color-border-alt);
}

.sec--light .card__title {
    color: var(--color-text-alt);
}

.sec--light .card__text {
    color: var(--color-muted-alt);
}


/* ── Showcase panel (app-style visual frame) ─────────────────────────────── */

.showcase-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--color-surface);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sec--light .showcase-panel {
    border-color: var(--color-border-alt);
    background-color: var(--color-card-bg-alt);
}

.showcase-panel__chrome {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: var(--gap-sm) var(--gap-md);
    border-bottom: 1px solid var(--color-border-inner);
    background-color: var(--color-elevated);
}

.sec--light .showcase-panel__chrome {
    border-bottom-color: var(--color-border-alt);
    background-color: var(--color-bg-alt);
}

.showcase-panel__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--color-border);
    opacity: 0.55;
}

.showcase-panel__label {
    margin-left: auto;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-dim);
    letter-spacing: 0.04em;
}

.sec--light .showcase-panel__label {
    color: var(--color-dim-alt);
}

.showcase-panel__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

.showcase-panel__body .ph--media {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: clamp(22rem, 30vw, 38rem);
    border: none;
    border-radius: 0;
}

.showcase-panel__body .ph:not(.ph--media) {
    border: none;
    min-height: 24rem;
    margin: var(--gap-md);
}


/* ── Feature split (alternating copy + visual) ─────────────────────────────── */

.feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xxl);
    align-items: center;
}

.feature-split__content {
    min-width: 0;
    overflow-wrap: break-word;
}

.feature-split__index {
    font-family: var(--font-primary);
    font-size: clamp(4rem, 5vw, 6.4rem);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--gap-sm);
}

.feature-split__content h3 {
    margin-bottom: var(--gap-sm);
}

.feature-split__content ul {
    margin-top: var(--gap-sm);
    padding-left: 2rem;
}

.feature-split__content .btn {
    margin-top: var(--gap-md);
}

.feature-split--reverse .feature-split__content {
    order: 2;
}

.feature-split--reverse .feature-split__media {
    order: 1;
}

.feature-split__media {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-width: 0;
}

.feature-split__media .showcase-panel {
    width: 100%;
}

/* ── Doc ticker + doc-stack base (moved from doc-vocab-mockup.css, Phase 1) ── */

.doc-stack {
    position: relative;
    height: 18rem;
    margin-top: 1.2rem;
}

.doc-stack__sheet {
    --doc-fill: var(--color-bg-alt);
    position: absolute;
    inset: 0;
    padding: 2rem 2.2rem;
}

.doc-stack__sheet--back {
    --doc-fill: var(--color-card-bg-alt);
    transform: translate(1.2rem, -1.2rem);
    z-index: 0;
}

.doc-stack__sheet--mid {
    --doc-fill: color-mix(in srgb, var(--color-card-bg-alt) 55%, var(--color-bg-alt));
    transform: translate(0.6rem, -0.6rem);
    z-index: 1;
}

.doc-stack__sheet--front {
    z-index: 2;
}

.doc-ticker {
    position: relative;
    min-height: 22rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    overflow: hidden;
    color: var(--color-text);
}

.doc-ticker__frame {
    position: absolute;
    inset: 3.2rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
    overflow: hidden;
}

.doc-ticker__rail {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Plain / plataforma: pixel half via --ticker-half; play-state only (no restart)
 * Must win over `.doc-ticker.is-playing .doc-ticker__rail` (same file, later). */
.sec--plataforma .doc-ticker--plain .doc-ticker__rail,
.sec--plataforma .doc-ticker--plain.is-playing .doc-ticker__rail {
    animation: dvm-ticker-scroll-px 4s linear infinite;
}

.sec--plataforma .doc-ticker--plain .doc-ticker__rail {
    animation-play-state: paused;
}

.sec--plataforma .doc-ticker--plain.is-playing .doc-ticker__rail {
    animation-play-state: running;
}

.sec--plataforma .doc-ticker--plain.is-paused .doc-ticker__rail,
.sec--plataforma .doc-ticker--plain.is-reduced .doc-ticker__rail {
    animation-play-state: paused;
}

.doc-ticker__row {
    display: grid;
    grid-template-columns: 9rem 1fr 7rem;
    gap: 1.6rem;
    align-items: center;
    padding: 1.35rem 2.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    font-size: var(--text-sm);
}

.doc-ticker__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.2rem;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.doc-ticker__name {
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-ticker__status {
    text-align: right;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.doc-ticker__status--ok { color: var(--color-accent); }
.doc-ticker__status--wait { color: rgba(255, 200, 120, 0.75); }

.doc-ticker__label {
    position: absolute;
    top: 1.2rem;
    left: 2.4rem;
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.doc-ticker__fade-t,
.doc-ticker__fade-b {
    position: absolute;
    left: 0;
    right: 0;
    height: 3.2rem;
    z-index: 2;
    pointer-events: none;
}

.doc-ticker__fade-t {
    top: 3.2rem;
    background: linear-gradient(to bottom, var(--color-bg), transparent);
}

.doc-ticker__fade-b {
    bottom: 3.2rem;
    background: linear-gradient(to top, var(--color-bg), transparent);
}

@keyframes dvm-ticker-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes dvm-ticker-scroll-px {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, calc(-1 * var(--ticker-half, 0px)), 0); }
}

.doc-ticker.is-playing .doc-ticker__rail {
    animation: dvm-ticker-scroll 18s linear infinite;
}

.doc-ticker__group {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
}

/* Plain light ticker — section media (no label, no fades, no mid-band) */
.doc-ticker--plain {
    width: 100%;
    min-height: 100%;
    height: 100%;
    background: var(--color-bg-alt);
    color: var(--color-text-alt);
    border: none;
    border-radius: 0;
}

.doc-ticker--plain .doc-ticker__frame {
    position: absolute;
    inset: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

/* Status-list chips (no icons) — gap instead of divider lines */
.doc-ticker--plain .doc-ticker__group {
    gap: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    box-sizing: border-box;
}

.doc-ticker--plain .doc-ticker__row {
    grid-template-columns: minmax(7rem, 9rem) 1fr minmax(5.5rem, 7rem);
    gap: var(--gap-sm);
    margin-inline: 0;
    padding: var(--gap-xxs) var(--gap-xs);
    border: none;
    border-radius: 0;
    color: var(--color-muted-alt);
    background: color-mix(in srgb, var(--color-card-bg-alt) 70%, transparent);
}

.doc-ticker--plain .doc-ticker__row:has(.doc-ticker__status--ok) {
    color: var(--color-text-alt);
}

.doc-ticker--plain .doc-ticker__id {
    color: var(--color-btn-active);
}

.doc-ticker--plain .doc-ticker__name {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-ticker--plain .doc-ticker__status {
    color: var(--color-dim-alt);
    text-align: right;
}

.doc-ticker--plain .doc-ticker__status--ok {
    color: var(--color-btn-active);
}

.doc-ticker--plain .doc-ticker__status--wait {
    color: var(--color-muted-alt);
}

@media (max-width: 900px) {
    .doc-ticker__row {
        grid-template-columns: 7.2rem 1fr 5.6rem;
        gap: 1rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

/* ── Plataforma Documental — editorial head + 4 folders + contained ticker ─── */

.is-front .editorial-block--plataforma {
    --editorial-gap: var(--gap-lg);
    gap: var(--editorial-gap);
}

.is-front .editorial-block--plataforma .editorial-block__title {
    max-width: 28ch;
}

.is-front .editorial-block--plataforma .editorial-block__lead {
    position: relative;
    z-index: 1;
    max-width: 52ch;
    padding: var(--gap-sm) var(--gap-md);
    text-align: center;
    color: var(--color-muted-alt);
    background-color: var(--color-bg-alt);
}

.plataforma__folders {
    width: 100%;
    max-width: 160rem;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-sm);
    padding: var(--gap-sm) 0;
    /* Transparent so the editorial center spine shows through */
    background-color: transparent;
}

/* Small green corner mark — bottom-right of each folder body */
.is-front .plataforma__folders .doc-folder__body::before {
    content: '';
    position: absolute;
    right: var(--gap-xxs);
    bottom: var(--gap-xxs);
    z-index: 2;
    width: var(--gap-xxs);
    height: var(--gap-xxs);
    pointer-events: none;
    background-color: var(--color-accent);
}

.plataforma__media {
    width: 100%;
    position: relative;
    z-index: 1;
    height: clamp(16rem, 28vh, 22rem);
    min-height: 16rem;
    margin-top: calc(var(--gap-sm) - var(--editorial-gap));
    background-color: var(--color-bg-alt);
}

/* Full-bleed top/bottom rules — ticker stays on the wrap rail */
.plataforma__media::before,
.plataforma__media::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    height: 1px;
    z-index: 2;
    pointer-events: none;
    background-color: var(--color-divider-subtle);
}

.plataforma__media::before {
    top: 0;
}

.plataforma__media::after {
    bottom: 0;
}

.plataforma__media .doc-ticker {
    height: 100%;
    min-height: 100%;
    opacity: 0.72;
}

@media (max-width: 1024px) {
    .plataforma__folders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Casos de Uso — 4-col square photo bento + dog-ear fold ──────────────── */

.is-front .editorial-block--casos {
    --editorial-gap: var(--gap-lg);
    gap: var(--editorial-gap);
}

/* ── Conoce RLD — compact bridge CTA (after Nuestras Soluciones) ─────────── */

.is-front .sec--conoce.sec--compact {
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
}

.is-front .editorial-block--conoce {
    --editorial-gap: var(--gap-sm);
    gap: var(--editorial-gap);
}

.is-front .editorial-block--conoce .editorial-block__title {
    max-width: 28ch;
}

.is-front .editorial-block--conoce .editorial-block__lead {
    position: relative;
    z-index: 1;
    max-width: 48ch;
    margin: 0;
    padding: var(--gap-xxs) var(--gap-sm);
    text-align: center;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--color-muted-alt);
    background-color: var(--color-bg-alt);
}

.is-front .conoce__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    position: relative;
    z-index: 1;
    padding: var(--gap-xxs) 0;
    background-color: var(--color-bg-alt);
}

.is-front .conoce__cta .cta-band__actions {
    justify-content: center;
}

/* ── FAQ — dossier accordion (homepage) ──────────────────────────────────── */

.is-front .faq--dossier {
    padding-top: var(--gap-xl);
    padding-bottom: var(--gap-xl);
    border-bottom: none;
    background-color: var(--color-bg-alt);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        var(--color-spine) calc(50% - 0.5px),
        var(--color-spine) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

.is-front .faq--dossier > .wrap--wide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-lg);
}

.is-front .faq--dossier > .wrap--wide > h2 {
    --rail-mark: var(--gap-xxs);
    --rail-clear: var(--gap-sm);
    position: relative;
    margin: 0;
    padding: var(--gap-sm);
    text-align: center;
    font-size: clamp(2.8rem, 2vw + 1.2rem, 4.4rem);
    font-weight: var(--weight-h2);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-alt);
    text-wrap: balance;
    /* Mask center rail behind the heading; line resumes in gap below */
    background-color: var(--color-bg-alt);
}

/* Center rail clear-air — mask spine between square and FAQ heading */
.is-front .faq--dossier > .wrap--wide > h2::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 1;
    width: 3px;
    height: var(--rail-clear);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: var(--color-bg-alt);
}

/* Green terminus — clear air between square and heading */
.is-front .faq--dossier > .wrap--wide > h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--rail-clear));
    z-index: 2;
    width: var(--rail-mark);
    height: var(--rail-mark);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: var(--color-accent);
}

.is-front .faq-dossier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--gap-md);
    width: 100%;
    max-width: 128rem;
    margin-inline: auto;
}

/* Independent flex stacks — opening a folder in one column must never
   affect vertical position of items in the other column */
.is-front .faq-dossier__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 0;
}

@media (max-width: 768px) {
    .is-front .faq-dossier {
        grid-template-columns: 1fr;
    }
}

.is-front .faq-dossier .faq-item,
.is-front .faq-dossier .faq-item:first-child {
    border: none;
}

/* Each question is its own doc-folder: small tab (title only) + body that
   grows to reveal the answer underneath, tab staying anchored top-left */
.is-front .faq-dossier__entry {
    --doc-corner-cut: 0.6rem;
    --doc-folder-tab-h: 1.1rem;
    --doc-folder-tab-w: min(28%, 5.6rem);
    position: relative;
}

.is-front .faq-dossier__tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--doc-folder-tab-w);
    height: var(--doc-folder-tab-h);
    --doc-fill: var(--color-card-bg-alt);
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent);
}

.is-front .faq-dossier__tab.doc-corner-cut::after {
    bottom: calc(var(--doc-border-w, 1px) * -1);
}

.is-front .faq-dossier__entry.is-open .faq-dossier__tab {
    /* Match body fill — contrast via tab stroke, not accent tint */
    --doc-fill: var(--color-bg-alt);
}

.is-front .faq-dossier__body {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--doc-folder-tab-h) - var(--doc-border-w, 1px));
    --doc-fill: var(--color-bg-alt);
    display: flex;
    flex-direction: column;
}

/* Lift real content above the doc-corner-cut fill layer (::after paints last) */
.is-front .faq-dossier__body > * {
    position: relative;
    z-index: 1;
}

.is-front .faq-dossier__body .faq-question-wrap,
.is-front .faq-dossier__body .faq-question {
    width: 100%;
}

.is-front .faq-dossier__body .faq-question {
    position: relative;
    z-index: 1;
    align-items: center;
    padding: var(--gap-sm);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: 1.45;
    color: var(--color-text-alt);
    gap: var(--gap-sm);
    transition: color 0.15s ease;
}

.is-front .faq-dossier__label {
    flex: 1;
    min-width: 0;
}

.is-front .faq-dossier .faq-question__icon {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    color: var(--color-dim-alt);
    transform: rotate(0deg);
    transition: transform 0.25s ease, color 0.15s ease;
}

.is-front .faq-dossier__entry.is-open .faq-question__icon {
    transform: rotate(90deg);
    color: var(--color-accent);
}

.is-front .faq-dossier__body .faq-question:hover {
    color: var(--color-text-alt);
}

.is-front .faq-dossier .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-front .faq-dossier .faq-answer > .faq-dossier__sheet {
    min-height: 0;
    overflow: hidden;
}

.is-front .faq-dossier__entry.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.is-front .faq-dossier__sheet > p,
.is-front .faq-dossier__sheet > div {
    padding: 0 var(--gap-sm) var(--gap-sm);
}

.is-front .faq-dossier__sheet p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-dim-alt);
    line-height: 1.7;
}

/* Nested lists inside a padded sheet wrapper — don’t double-pad */
.is-front .faq-dossier__sheet > div > ul,
.is-front .faq-dossier__sheet > div > ol {
    padding-inline: 0;
    padding-bottom: 0;
}

.is-front .faq-dossier__sheet ul,
.is-front .faq-dossier__sheet ol {
    list-style: none;
    margin: var(--gap-sm) 0 0;
    padding: 0 var(--gap-sm) var(--gap-sm);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.is-front .faq-dossier__sheet li {
    position: relative;
    display: grid;
    grid-template-columns: var(--gap-xs) minmax(0, 1fr);
    gap: var(--gap-sm);
    align-items: start;
    margin: 0;
    padding: 0;
    font-size: var(--text-base);
    color: var(--color-dim-alt);
    line-height: 1.7;
}

.is-front .faq-dossier__sheet li::before {
    content: '';
    width: var(--gap-xs);
    height: var(--gap-xs);
    margin-top: 0.55em;
    flex-shrink: 0;
    background-color: var(--color-accent);
}

@media (max-width: 640px) {
    .is-front .faq-dossier__body .faq-question {
        font-size: var(--text-base);
    }
}

.is-front .editorial-block--casos .editorial-block__title {
    max-width: 28ch;
}

.is-front .casos-bento.bento {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--gap-sm);
    padding: var(--gap-sm) 0;
    background-color: var(--color-bg-alt);
}

.is-front .casos-bento__item {
    --doc-fold: 1.2rem;
    --doc-border-w: 1px;
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 0;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* Dog-ear: tip bent inwards at top-right of the square media */
.is-front .casos-bento__item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: var(--doc-fold);
    height: var(--doc-fold);
    pointer-events: none;
    background: linear-gradient(
        225deg,
        var(--color-bg-alt) 0 48%,
        color-mix(in srgb, var(--color-border-alt) 55%, var(--color-card-bg-alt)) 50%,
        color-mix(in srgb, var(--color-bg) 16%, var(--color-card-bg-alt)) 100%
    );
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.is-front .casos-bento__media {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 0;
    background-color: transparent;
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-fold)) 0,
        100% var(--doc-fold),
        100% 100%,
        0 100%
    );
}

.is-front .casos-bento__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-bg) 12%, transparent);
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-fold)) 0,
        100% var(--doc-fold),
        100% 100%,
        0 100%
    );
}

.is-front .casos-bento__photo {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.72) contrast(1.06) brightness(0.96);
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-fold)) 0,
        100% var(--doc-fold),
        100% 100%,
        0 100%
    );
}

.is-front .casos-bento__title {
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.45;
    letter-spacing: var(--tracking-normal);
    color: var(--color-text-alt);
    text-wrap: pretty;
}

.is-front .casos-bento__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: var(--gap-sm);
    padding: var(--gap-sm) 0;
    text-align: center;
    background-color: var(--color-bg-alt);
}

.is-front .casos-bento__cta-label {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--color-muted-alt);
}

/* Desktop wide — each card: image | text, vertically centered */
@media (min-width: 1280px) {
    .is-front .casos-bento__item {
        flex-direction: row;
        align-items: center;
        gap: var(--gap-sm);
    }

    .is-front .casos-bento__item::before {
        /* Keep dog-ear on the image’s top-right (left half) */
        right: calc(50% + var(--gap-sm) / 2);
    }

    .is-front .casos-bento__media {
        flex: 0 0 calc(50% - var(--gap-sm) / 2);
        width: calc(50% - var(--gap-sm) / 2);
    }

    .is-front .casos-bento__title {
        flex: 1 1 calc(50% - var(--gap-sm) / 2);
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .is-front .casos-bento.bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .is-front .casos-bento.bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.feature-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxl);
    margin-top: var(--gap-xl);
}

/* ── Nuestras Soluciones — boxie TOC layout (homepage) ─────────────────────── */

.soluciones {
    position: relative;
}

.sec--light.soluciones {
    border-top: 1px solid var(--color-divider-subtle);
    border-bottom: 1px solid var(--color-divider-subtle);
    padding-bottom: calc(var(--soluciones-rhythm) + var(--gap-lg));
    background-color: var(--color-bg-alt);
}

.soluciones__intro {
    margin-bottom: var(--gap-lg);
    text-align: left;
}

/* Plain intros (digi/producto): stack h2/lead. Homepage `.soluciones__intro-inner` owns the 12-col grid. */
.soluciones__intro > .wrap--wide:not(.soluciones__intro-inner) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.soluciones__intro > .wrap--wide > h2,
.soluciones__intro > .wrap--wide > p {
    margin-block: 0;
}

.soluciones__rhythm {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--soluciones-rhythm);
    aspect-ratio: 1;
    background-color: var(--color-accent);
}

.soluciones__rhythm--end {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
}

.soluciones__intro > .wrap--wide.soluciones__intro-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-sm);
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.soluciones__intro-copy {
    grid-column: 1 / span 5;
    min-width: 0;
}

.soluciones__intro-visual {
    grid-column: 8 / -1;
    display: flex;
    align-items: center;
    min-width: 0;
    /* Allow right lanes to full-bleed to viewport; clip left */
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
}

.soluciones__intro-copy h2 {
    margin-bottom: var(--gap-md);
}

.soluciones__body {
    display: grid;
    grid-template-columns: 3fr 7fr;
    column-gap: var(--gap-md);
}

.soluciones__nav {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}

.soluciones__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--gap-sm));
    z-index: 1;
    background-color: var(--color-bg-alt);
}

.soluciones__modules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    min-width: 0;
}

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

.soluciones__toc-item {
    padding-block: var(--gap-sm);
}

.soluciones__toc-link {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--soluciones-rhythm) 1fr;
    gap: var(--gap-sm);
    align-items: center;
    padding: 0;
    padding-inline-end: var(--gap-md);
    text-decoration: none;
    color: var(--color-text-alt);
    transition: color var(--transition-fast);
}

/* Grey highlight wipes in from the top edge downward */
.soluciones__toc-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-card-bg-alt);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.soluciones__toc-link:hover,
.soluciones__toc-link:focus-visible,
.soluciones__toc-link.is-active {
    color: var(--color-text-alt);
}

.soluciones__toc-link:hover::before,
.soluciones__toc-link:focus-visible::before,
.soluciones__toc-link.is-active::before {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .soluciones__toc-link::before {
        transition: none;
    }
}

.soluciones__mark {
    width: var(--soluciones-rhythm);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    line-height: 1;
}

.soluciones__toc-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
}

.soluciones__nav-pattern {
    flex: 1;
    min-height: var(--gap-lg);
    --soluciones-dot: 4px;
    --soluciones-dot-color: color-mix(in srgb, var(--color-border-alt) 14%, transparent);
    background-color: var(--color-bg-alt);
    background-image:
        repeating-linear-gradient(
            90deg,
            var(--color-bg-alt) 0,
            var(--color-bg-alt) calc(var(--gap-xs) - var(--soluciones-dot)),
            transparent calc(var(--gap-xs) - var(--soluciones-dot)),
            transparent var(--gap-xs)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent calc(var(--gap-xs) - var(--soluciones-dot)),
            var(--soluciones-dot-color) calc(var(--gap-xs) - var(--soluciones-dot)),
            var(--soluciones-dot-color) var(--gap-xs)
        );
}

.soluciones__module {
    padding: 0;
    text-align: left;
    scroll-margin-top: calc(var(--header-h) + var(--gap-sm));
}

.soluciones__module-head {
    margin-bottom: var(--gap-sm);
}

.soluciones__module-head .eyebrow {
    --doc-corner-cut: 0.9rem;
    display: inline-block;
    width: fit-content;
    margin: 0 0 var(--gap-xs);
    padding: var(--gap-xxs) var(--gap-xs);
    border: none;
    border-radius: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut)) 0,
        100% var(--doc-corner-cut),
        100% 100%,
        0 100%
    );
}

.soluciones__module-head h3 {
    margin-bottom: 0;
    font-weight: var(--weight-regular);
}

.soluciones__module-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    align-items: start;
}

.soluciones__module-text {
    min-width: 0;
}

.soluciones__module-text > p {
    margin: 0;
    color: var(--color-muted-alt);
}

.soluciones__module-aside {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
}

.soluciones__list-frame {
    --doc-fill: var(--color-bg-alt);
    --doc-corner-cut: 0.9rem;
    padding: var(--gap-sm);
    overflow: hidden;
}

.soluciones__list-frame > * {
    position: relative;
    z-index: 1;
}

.soluciones__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.soluciones__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
}

.soluciones__list-text {
    flex: 1;
    min-width: 0;
    color: var(--color-text-alt);
}

.soluciones__list-mark {
    width: var(--gap-xxs);
    height: var(--gap-xxs);
    flex-shrink: 0;
    background-color: var(--color-accent);
}

.soluciones__module-cta {
    align-self: flex-end;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .soluciones__intro-copy {
        grid-column: 1 / span 5;
    }

    .soluciones__intro-visual {
        grid-column: 7 / -1;
    }

    .soluciones__body {
        grid-template-columns: 1fr;
        gap: var(--gap-lg);
    }

    .soluciones__modules {
        display: flex;
        flex-direction: column;
        gap: var(--gap-lg);
    }

    .soluciones__module-aside {
        gap: var(--gap-sm);
    }

    .soluciones__toc {
        position: static;
        --soluciones-rhythm: 3.2rem;
    }

    .soluciones__toc-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .soluciones__toc-link {
        grid-template-columns: var(--soluciones-rhythm) minmax(0, 1fr);
        gap: var(--gap-xs);
        padding: 0;
        min-width: 0;
    }

    .soluciones__mark {
        font-size: var(--text-base);
    }

    .soluciones__toc-label {
        font-size: var(--text-sm);
        line-height: 1.25;
    }

    .soluciones__nav-pattern {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Corner rhythm squares (green + navy) — 40% smaller than 4.8rem floor */
    .soluciones {
        --soluciones-rhythm: 2.88rem;
    }

    .soluciones__intro > .wrap--wide.soluciones__intro-inner {
        padding-top: calc(var(--soluciones-rhythm) + var(--gap-md));
        padding-bottom: var(--gap-md);
    }

    .soluciones__intro-copy {
        grid-column: 1 / -1;
    }

    .soluciones__intro-visual {
        grid-column: 1 / -1;
        max-width: min(100%, 32rem);
        margin-inline: auto;
        justify-content: center;
        overflow: hidden;
        clip-path: none;
    }

    .soluciones__toc-link {
        grid-template-columns: var(--soluciones-rhythm) 1fr;
    }
}

/* ── Nuestras Soluciones — alternating rhythm (homepage feature-stack only) ─ */

.feature-stack > .feature-split:first-child {
    grid-template-columns: 58fr 42fr;
    gap: var(--gap-xxl);
    padding-bottom: var(--gap-xl);
    margin-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-border);
}

.feature-stack > .feature-split:first-child .feature-split__index {
    font-size: clamp(5.2rem, 7vw, 8rem);
}

.feature-stack > .feature-split:first-child .showcase-panel__body .ph--media {
    min-height: clamp(26rem, 34vw, 42rem);
}

.feature-stack > .feature-split:nth-child(even) {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--gap-lg);
}

.feature-stack > .feature-split:nth-child(even) .feature-split__index {
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .feature-split {
        grid-template-columns: 1fr;
        gap: var(--gap-lg);
    }

    .feature-split--reverse .feature-split__content,
    .feature-split--reverse .feature-split__media {
        order: unset;
    }

    .feature-stack {
        gap: var(--gap-xl);
    }

    .feature-stack > .feature-split:first-child {
        grid-template-columns: 1fr;
        gap: var(--gap-lg);
        padding-bottom: var(--gap-lg);
        margin-bottom: 0;
    }

    .feature-stack > .feature-split:nth-child(even) {
        padding: var(--gap-md);
    }
}

@media (max-width: 768px) {
    .feature-stack > .feature-split:first-child .showcase-panel__body .ph--media {
        min-height: clamp(20rem, 56vw, 28rem);
        aspect-ratio: 16 / 9;
    }
}


/* ── Benefits dossier (single doc-stack + folder blocks) ─────────────────── */

.benefits-dossier.doc-stack {
    --dossier-step: clamp(1.2rem, 0.8rem + 0.4vw, 2.4rem);
    --dossier-peel: calc(var(--dossier-step) * 2);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 160rem;
    height: auto;
    margin-top: var(--gap-md);
    margin-inline: auto;
    margin-bottom: 0;
    padding: 0;
    padding-top: var(--dossier-peel);
    padding-right: var(--dossier-peel);
    overflow: visible;
}

.benefits-dossier .doc-stack__sheet {
    --doc-corner-cut: 0.9rem;
    /* Opaque border — transparent mix fringes like a soft outer glow on the chamfer */
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 55%, var(--color-bg-alt));
    box-shadow: none;
    filter: none;
}

/* Pin to content box (inside peel padding) so transforms stay within 100% width */
.benefits-dossier .doc-stack__sheet--back,
.benefits-dossier .doc-stack__sheet--mid {
    position: absolute;
    top: var(--dossier-peel);
    right: var(--dossier-peel);
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    pointer-events: none;
}

.benefits-dossier .doc-stack__sheet--back {
    --doc-fill: var(--color-card-bg-alt);
    transform: translate(calc(var(--dossier-step) * 2), calc(var(--dossier-step) * -2));
    z-index: 0;
}

.benefits-dossier .doc-stack__sheet--mid {
    --doc-fill: color-mix(in srgb, var(--color-card-bg-alt) 55%, var(--color-bg-alt));
    transform: translate(var(--dossier-step), calc(var(--dossier-step) * -1));
    z-index: 1;
}

.benefits-dossier .doc-stack__sheet--front {
    --doc-fill: var(--color-bg-alt);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--gap-md);
}

.benefits-dossier .doc-stack__sheet--front > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.benefits-dossier .doc-stack__sheet--front > .benefits-dossier__mark {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
    z-index: 2;
    width: clamp(4.8rem, 10vw, 7.2rem);
    height: auto;
    margin: 0 auto;
    opacity: 1;
    pointer-events: none;
    user-select: none;
}

.benefits-dossier__folders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
    width: 100%;
    align-items: start;
}

@media (min-width: 1280px) {
    .benefits-dossier__folders {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.benefits-dossier__block.doc-folder {
    min-width: 0;
    height: 100%;
}

.benefits-dossier__block .doc-folder__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

/* Right-edge square-dot field (matches soluciones__nav-pattern) */
.benefits-dossier__block .doc-folder__body::before {
    content: '';
    position: absolute;
    top: var(--doc-border-w, 1px);
    right: var(--doc-border-w, 1px);
    bottom: var(--doc-border-w, 1px);
    z-index: 1;
    width: clamp(3.2rem, 16%, 5.6rem);
    pointer-events: none;
    --dossier-dot: 4px;
    --dossier-dot-gap: var(--gap-xs);
    --dossier-dot-color: color-mix(in srgb, var(--color-border-alt) 8%, transparent);
    --dossier-dot-mask: var(--doc-fill, var(--color-bg-alt));
    background-color: var(--dossier-dot-mask);
    background-image:
        repeating-linear-gradient(
            90deg,
            var(--dossier-dot-mask) 0,
            var(--dossier-dot-mask) calc(var(--dossier-dot-gap) - var(--dossier-dot)),
            transparent calc(var(--dossier-dot-gap) - var(--dossier-dot)),
            transparent var(--dossier-dot-gap)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent calc(var(--dossier-dot-gap) - var(--dossier-dot)),
            var(--dossier-dot-color) calc(var(--dossier-dot-gap) - var(--dossier-dot)),
            var(--dossier-dot-color) var(--dossier-dot-gap)
        );
    background-size: var(--dossier-dot-gap) var(--dossier-dot-gap);
    /* Follow body chamfer so the strip doesn’t square off the cut corner */
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut-inner, var(--doc-corner-cut, 0.9rem))) 0,
        100% var(--doc-corner-cut-inner, var(--doc-corner-cut, 0.9rem)),
        100% 100%,
        0 100%
    );
}

.benefits-dossier__block .doc-folder__body > * {
    position: relative;
    z-index: 2;
}

.benefits-dossier__block h3 {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-text-alt);
}

.benefits-dossier__block .doc-folder__body:has(> h3:only-child) h3 {
    margin-bottom: 0;
}

.benefits-dossier__block p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted-alt);
}

.benefits-dossier__block ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.benefits-dossier__block li {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted-alt);
}

.is-front .benefits-dossier__folders .doc-folder__body p,
.is-front .benefits-dossier__folders .doc-folder__body li {
    font-weight: var(--weight-regular);
}

.benefits-dossier__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-md);
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.benefits-dossier__cta > p {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-alt);
}

.benefits-dossier__cta .cta-band__actions {
    margin: 0;
}

/* ── Utilities ────────────────────────────────────────── */
.u-nowrap {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .benefits-dossier.doc-stack {
        width: 100%;
        margin-right: 0;
    }

    .benefits-dossier .doc-stack__sheet--front {
        padding: var(--gap-sm);
        gap: var(--gap-md);
    }

    .benefits-dossier__folders {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .benefits-dossier .doc-stack__sheet--front > .benefits-dossier__mark {
        width: clamp(4rem, 16vw, 5.6rem);
    }

    .benefits-dossier__cta {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: var(--gap-sm);
        padding-block: var(--gap-md);
        width: 100%;
    }

    .benefits-dossier__cta > p {
        text-align: center;
        max-width: 28ch;
    }

    .benefits-dossier__cta .cta-band__actions {
        justify-content: center;
        width: 100%;
    }

    .benefits-dossier__cta .btn {
        margin-inline: auto;
    }
}

/* ── Homepage rhythm pass (.is-front) ─────────────────────────────────────── */

/* A — compact = tighter than default section (not larger) */
.is-front .sec--compact {
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
}

.is-front .sec--compact .wrap--wide > :last-child {
    margin-bottom: 0;
}

/* D — hero panel stats numerals */
:is(.is-front, .is-home-hero) .hero__panel .stat__number {
    font-size: clamp(4rem, 5vw, 6.4rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.is-front .sec--compact .lead {
    margin-top: 0;
}

/* Editorial intro — spine, title, frame, folders (section-pad = single rhythm source) */
.is-front .sec--editorial {
    --editorial-pad-t: var(--section-pad-t);
    --editorial-pad-b: var(--section-pad-b);
    padding-top: var(--editorial-pad-t);
    padding-bottom: var(--editorial-pad-b);
    background-color: var(--color-bg-alt);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        var(--color-spine) calc(50% - 0.5px),
        var(--color-spine) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

.is-front .editorial-block {
    --editorial-gap: var(--gap-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--editorial-gap);
}

/* Define section — typographic editorial (no frame / no motion) */
.is-front .editorial-block--define {
    align-items: stretch;
    gap: var(--gap-md);
}

.is-front .editorial-block--define .editorial-block__title {
    align-self: stretch;
    max-width: 55rem;
    padding-inline: 0;
    padding-bottom: 0;
    text-align: left;
}

.is-front .editorial-block--define .editorial-block__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-md) var(--gap-lg);
    align-items: stretch;
    width: 100%;
}

.is-front .editorial-block--define .editorial-block__def {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.4vw, 1.7rem);
    font-weight: var(--weight-regular);
    line-height: 1.55;
    color: var(--color-text-alt);
    text-wrap: pretty;
}

.is-front .editorial-block--define .editorial-block__doc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
    height: 100%;
}

.is-front .editorial-block--define .media-frame {
    --doc-corner-cut: 0.9rem;
    clip-path: polygon(
        0 0,
        calc(100% - var(--doc-corner-cut)) 0,
        100% var(--doc-corner-cut),
        100% 100%,
        0 100%
    );
}

.is-front .editorial-block--define .editorial-block__doc-media {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.is-front .editorial-block--define .editorial-block__doc .doc-folder {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.is-front .editorial-block--define .editorial-block__doc .doc-folder__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
}

.is-front .editorial-block--define .editorial-block__doc .editorial-block__lead {
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + 0.35vw, 1.55rem);
    font-weight: var(--weight-regular);
    line-height: 1.55;
    color: var(--color-muted-alt);
    text-wrap: pretty;
}

.is-front .editorial-block__title {
    margin: 0;
    padding: var(--gap-sm);
    font-size: clamp(3.2rem, 2.5vw + 1.15rem, 5.2rem);
    font-weight: var(--weight-h2);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-h2);
    text-align: center;
    text-wrap: balance;
    color: var(--color-text-alt);
    background-color: var(--color-bg-alt);
}

.is-front .editorial-block__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: var(--gap-xxs) var(--gap-sm) 0;
    text-align: center;
    background-color: var(--color-bg-alt);
}

/* Eyebrow → title: match Nuestras Soluciones / sec-heading (gap-xs) */
.is-front .editorial-block__eyebrow + .editorial-block__title {
    margin-top: calc(var(--gap-xs) - var(--editorial-gap));
    padding-top: 0;
}

/* ── Rail stop system — square terminus + clear air + spine through content ─ */
.is-front .cta-band--closing .cta-band__heading,
.is-front .editorial-block--benefits > .editorial-block__eyebrow,
.is-front .editorial-block--plataforma > .editorial-block__eyebrow,
.is-front .editorial-block--cap > .editorial-block__eyebrow,
.is-front .editorial-block--casos > .editorial-block__eyebrow {
    --rail-mark: var(--gap-xxs);
    --rail-clear: var(--gap-sm);
    position: relative;
}

/* Mask continuous spine between square and heading/eyebrow */
.is-front .cta-band--closing .cta-band__heading::before,
.is-front .editorial-block--benefits > .editorial-block__eyebrow::before,
.is-front .editorial-block--plataforma > .editorial-block__eyebrow::before,
.is-front .editorial-block--cap > .editorial-block__eyebrow::before,
.is-front .editorial-block--casos > .editorial-block__eyebrow::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 1;
    width: 3px;
    height: var(--rail-clear);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: var(--color-bg-alt);
}

/* Green square — end of incoming rail */
.is-front .cta-band--closing .cta-band__heading::after,
.is-front .editorial-block--benefits > .editorial-block__eyebrow::after,
.is-front .editorial-block--plataforma > .editorial-block__eyebrow::after,
.is-front .editorial-block--cap > .editorial-block__eyebrow::after,
.is-front .editorial-block--casos > .editorial-block__eyebrow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--rail-clear));
    z-index: 2;
    width: var(--rail-mark);
    height: var(--rail-mark);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: var(--color-accent);
}

.is-front .editorial-block--benefits {
    --editorial-gap: var(--gap-lg);
    gap: var(--editorial-gap);
}

.is-front .editorial-block--benefits .benefits-dossier {
    width: 100%;
    position: relative;
    z-index: 1;
    /* Transparent so the editorial center spine shows through */
    background-color: transparent;
}

.is-front .editorial-block--benefits .editorial-block__title {
    max-width: 22ch;
}

.is-front .editorial-block--cap {
    --editorial-gap: var(--gap-lg);
    gap: var(--editorial-gap);
}

.is-front .editorial-block--cap .editorial-block__title {
    max-width: 18ch;
}

.is-front .editorial-block--cap .editorial-block__lead {
    position: relative;
    z-index: 1;
    max-width: 52ch;
    padding: var(--gap-sm) var(--gap-md);
    text-align: center;
    color: var(--color-muted-alt);
    background-color: var(--color-bg-alt);
}

.is-front .editorial-block--cap .cap-dir {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: var(--gap-sm);
    padding: var(--gap-sm) 0;
    background-color: var(--color-bg-alt);
}

.is-front .editorial-block__frame {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    --doc-fill: var(--color-bg-alt);
    --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    background-color: var(--doc-border-color);
    padding: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.is-front .editorial-block__frame > * {
    position: relative;
    z-index: 1;
}

.is-front .editorial-block__folders {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
}

.is-front .sec--editorial .doc-folder {
    --doc-folder-tab-h: 1.4rem;
    --doc-folder-tab-w: min(40%, 6.4rem);
    position: relative;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.is-front .sec--editorial .doc-folder__tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--doc-folder-tab-w);
    height: var(--doc-folder-tab-h);
    --doc-fill: var(--color-card-bg-alt);
}

.is-front .sec--editorial .doc-folder__tab.doc-corner-cut::after {
    bottom: calc(var(--doc-border-w) * -1);
}

.is-front .sec--editorial .doc-folder__body {
    margin-top: calc(var(--doc-folder-tab-h) - 1px);
    --doc-fill: var(--color-bg-alt);
    padding: var(--gap-sm);
    min-height: 0;
    flex: 1;
}

.is-front .sec--editorial .doc-folder__body > * {
    position: relative;
    z-index: 1;
}

.is-front .sec--editorial .doc-folder__body p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--color-muted-alt);
}

.is-front .editorial-block__lead {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: 1.55;
    color: var(--color-dim-alt);
}

.is-front .showcase-panel__body--anim {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-lg);
    aspect-ratio: 4 / 3;
    min-height: clamp(22rem, 30vw, 38rem);
    background-color: var(--color-bg-alt);
}

.is-front .showcase-panel__body--anim .editorial-anim--2e {
    max-width: min(100%, 20rem);
}

/* C — surface panels on feature-split (Plataforma) */
.is-front .feature-split--surface {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--gap-lg);
}

.is-front .sec--light .feature-split--surface {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border-alt);
}

.is-front .sec--light .feature-split--surface h2,
.is-front .sec--light .feature-split--surface h3 {
    color: var(--color-text-alt);
}

.is-front .sec--light .feature-split--surface p,
.is-front .sec--light .feature-split--surface li {
    color: var(--color-muted-alt);
}

.is-front .sec--light.sec--media-bleed .media-bleed__content h2 {
    color: var(--color-text-alt);
}

.is-front .sec--light.sec--media-bleed .media-bleed__content p {
    color: var(--color-muted-alt);
}

.is-front .sec--light.sec--media-bleed .media-bleed__visual .ph--media {
    background-color: var(--color-card-bg-alt);
    border-color: var(--color-border-alt);
    color: var(--color-dim-alt);
}

/* E — showcase chrome only on module 01 */
.is-front .showcase-panel__chrome {
    display: none;
}

.is-front .feature-stack > .feature-split:first-child .showcase-panel__chrome {
    display: flex;
}

/* B — full-bleed media break (Estamos donde tú estás) */
.is-front .sec--media-bleed {
    padding-top: var(--gap-xl);
    padding-bottom: 0;
    overflow: hidden;
}

.is-front .media-bleed__content {
    padding-bottom: var(--gap-lg);
}

.is-front .media-bleed__visual {
    width: 100%;
    margin-inline: 0;
}

.is-front .media-bleed__visual .ph--media {
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: clamp(22rem, 40vw, 48rem);
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ── Capacitaciones — aligned image strip + arrow ─────────────────────────── */

.cap-framed {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-top: var(--gap-sm);
}

.cap-framed__copy {
    max-width: 62ch;
}

.cap-framed__copy h2 {
    margin-bottom: var(--gap-sm);
    color: var(--color-text-alt);
}

.cap-framed__copy > p:last-child {
    margin: 0;
    color: var(--color-muted-alt);
}

.cap-dir {
    --cap-dir-visible: 4;
    --cap-dir-gap: var(--gap-sm);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    max-width: 160rem;
    margin-inline: auto;
    min-width: 0;
}

.cap-dir__viewport {
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
    container-name: cap-dir;
}

.cap-dir__track {
    display: flex;
    align-items: stretch;
    gap: var(--cap-dir-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translate3d(0, 0, 0);
}

.cap-dir__file {
    flex: 0 0 calc((100cqi - (var(--cap-dir-gap) * (var(--cap-dir-visible) - 1))) / var(--cap-dir-visible));
    min-width: 0;
    width: calc((100cqi - (var(--cap-dir-gap) * (var(--cap-dir-visible) - 1))) / var(--cap-dir-visible));
    max-width: calc((100cqi - (var(--cap-dir-gap) * (var(--cap-dir-visible) - 1))) / var(--cap-dir-visible));
}

.cap-dir__thumb.doc-corner-cut {
    --doc-corner-cut: 0.9rem;
    --doc-border-w: 0px;
    --doc-border-color: transparent;
    --doc-fill: transparent;
    --doc-corner-cut-inner: var(--doc-corner-cut);
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0;
    background-color: var(--color-card-bg-alt);
    aspect-ratio: 4 / 3;
    /* Own layer — avoids intermittent blank tiles under track transforms */
    transform: translateZ(0);
}

/*
 * Kill full-bleed .doc-corner-cut::after fill (left+right:0) so it cannot
 * cover photos. Keep only the shared left square-dot strip.
 */
.cap-dir__thumb.doc-corner-cut::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    clip-path: none;
    display: block;
}

.cap-dir__thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-bg) 18%, transparent);
}

/* Absolute fill — % height inside flex+aspect-ratio thumbs was collapsing some tiles */
.cap-dir__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.72) contrast(1.06) brightness(0.96);
}

.cap-dir__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-border-alt) 35%, transparent);
    border-radius: 0;
    background: var(--color-bg-alt);
    color: var(--color-text-alt);
    line-height: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.cap-dir__chevron {
    display: block;
}

.cap-dir__next:hover,
.cap-dir__next:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (min-width: 1800px) {
    .cap-dir {
        --cap-dir-visible: 6;
    }
}

@media (max-width: 1024px) {
    .cap-dir {
        --cap-dir-visible: 3;
    }
}

@media (max-width: 768px) {
    .cap-dir {
        --cap-dir-visible: 2;
        grid-template-columns: minmax(0, 1fr);
    }

    .cap-dir__next {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        background-color: color-mix(in srgb, var(--color-bg-alt) 92%, transparent);
    }
}

/* ── Homepage responsive pass (.is-front) ─────────────────────────────────── */

.is-front h1,
.is-front h2,
.is-front h3,
.is-front p,
.is-front li {
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
    .is-front .feature-split--surface {
        padding: var(--gap-md);
    }

    .is-front .editorial-block__folders {
        grid-template-columns: 1fr;
    }

    .is-front .editorial-block--define .editorial-block__body {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }

    .is-front .editorial-block--define .editorial-block__title {
        max-width: none;
    }

    .is-front .btn {
        white-space: normal;
        text-align: center;
        max-width: 100%;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
    .is-front .sec--compact {
        padding-top: var(--gap-lg);
        padding-bottom: var(--gap-lg);
    }

    .is-front .sec--editorial,
    .is-front .sec--plataforma.sec--editorial,
    .is-front .sec--conoce.sec--editorial {
        --editorial-pad-t: var(--gap-lg);
        --editorial-pad-b: var(--gap-lg);
        padding-top: var(--editorial-pad-t);
        padding-bottom: var(--editorial-pad-b);
    }

    /* Casos — more air after plataforma ticker before rail mark (intentional T≠B — TRUTHS) */
    .is-front .sec--casos.sec--editorial {
        --editorial-pad-t: var(--gap-lg);
        --editorial-pad-b: var(--gap-lg);
        padding-top: var(--editorial-pad-t);
        padding-bottom: var(--editorial-pad-b);
    }

    .is-front .editorial-block,
    .is-front .editorial-block--plataforma,
    .is-front .editorial-block--benefits,
    .is-front .editorial-block--cap,
    .is-front .editorial-block--casos {
        --editorial-gap: var(--gap-lg);
        gap: var(--editorial-gap);
    }

    /* Conoce stays compact */
    .is-front .editorial-block--conoce {
        --editorial-gap: var(--gap-sm);
        gap: var(--editorial-gap);
    }

    .is-front .editorial-block__title {
        font-size: clamp(2.8rem, 5vw + 1rem, 4rem);
        padding-inline: var(--gap-sm);
    }

    .is-front .sec--editorial .doc-folder__body {
        padding: var(--gap-sm);
    }

    .is-front .sec--editorial .doc-folder__body p {
        font-size: var(--text-xs);
    }

    .is-front .editorial-block__lead {
        font-size: var(--text-base);
    }

    :is(.is-front, .is-home-hero) .hero__panel .stat__number {
        font-size: clamp(3.6rem, 12vw, 5.2rem);
    }

    .is-front .media-bleed__visual .ph--media {
        aspect-ratio: 16 / 9;
        min-height: clamp(18rem, 52vw, 28rem);
    }
}

@media (max-width: 580px) {
    .is-front .faq-question {
        font-size: var(--text-base);
    }
}