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


/* ── @font-face ─────────────────────────────────────────────────────────── */
/* Project fonts (self-hosted, no CDN).
   Place files in:
   - assets/fonts/PublicSans-VariableFont_wght.woff2
   - assets/fonts/PublicSans-Italic-VariableFont_wght.woff2 (optional)
   - assets/fonts/Inter-VariableFont_opsz,wght.woff2
   - assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2 (optional)
   - assets/fonts/IBMPlexSans-VariableFont_wdth,wght.woff2
   - assets/fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.woff2 (optional)
*/

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-VariableFont_wdth,wght.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.woff2') format('woff2');
    font-weight: 100 700;
    font-style: italic;
    font-display: swap;
}


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


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

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

html {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    /* scroll-behavior: smooth intentionally removed — Lenis handles smooth scroll on desktop */
    /* No horizontal document scroll (100vw bleedouts, sub-pixel rails, etc.) — clip avoids classic BFC quirks of overflow-x: hidden on large wrappers */
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-blue) color-mix(in srgb, var(--color-brand-blue) 10%, transparent);
}

/* Vertical overflow: prefer clipping on the section that needs it, not blanket body rules. */

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;
}

/* Page scrollbar — brand blue (WebKit; Firefox uses html scrollbar-* above) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--color-brand-blue) 10%, transparent);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-brand-blue);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--color-brand-blue) 78%, white 22%);
}


/* ── 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 {
    min-height: 60vh;
}

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


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

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

h1 {
    font-size: clamp(2.8rem, 8vw + 0.5rem, 5.2rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

/* h2: display-figure DNA (primary, bold, tight tracking), capped at TRUTHS scale (3.6rem). */
h2 {
    font-size: 3.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
}

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

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

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

h6 {
    font-size: 1.4rem;
    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: none;
    padding-left: 0;
}

.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);
}

/* Orange triangle list icon (default + light variant for dark surfaces) */
.entry-content ul li,
.page-content ul li {
    position: relative;
    padding-left: 1.25em;
}

.entry-content ul li::before,
.page-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0;
    height: 0;
    border-left: 0.33em solid transparent;
    border-right: 0.33em solid transparent;
    border-bottom: 0.55em solid var(--color-accent);
}

.sec--dark .entry-content ul li::before,
.sec--dark .page-content ul li::before,
.sec--brown .entry-content ul li::before,
.sec--brown .page-content ul li::before,
.bento__item--dark .entry-content ul li::before,
.bento__item--dark .page-content ul li::before {
    border-bottom-color: #F3B35A; /* light orange on dark backgrounds */
}

.sec--accent .entry-content ul li::before,
.sec--accent .page-content ul li::before {
    border-bottom-color: var(--color-btn-text);
}

/* Micro-label — section kickers (same rhythm as "Nuestros servicios" / .label) */
.label,
.eyebrow,
.home-que-es__eyebrow,
.cta-band__eyebrow,
.page-hero__eyebrow,
.hero.hero--home .hero-home-block--band h1,
.hero__content h1 {
    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;
}

/* Buttons inside prose wrappers — .page-content a wins over .btn on specificity */
.entry-content a.btn,
.page-content a.btn {
    text-decoration: none;
}

@media (max-width: 768px) {
    h1 { font-size: 3.6rem; }
    h2,
    .sec-title,
    .cta-band__heading {
        font-size: 2.8rem;
    }

    .hero__content h2 {
        font-size: 2.8rem;
    }

    h3 { font-size: 2rem; }
}


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

.wrap {
    width: 100%;
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--side-pad);
    padding-right: var(--side-pad);
}

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

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

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

.sec--dark {
    background-color: var(--color-brand-blue);
    color: var(--color-btn-text);
}

/* Corner dots on dark sections should match hero inset/color */
.sec--dark.corner-dots {
    --corner-dots-inset: 14px;
    --corner-dots-color: rgba(255, 255, 255, 0.32);
}

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

.sec--dark p {
    color: rgba(255, 255, 255, 0.75);
}

.sec--brown {
    background-color: var(--color-brand-brown);
    color: var(--color-btn-text);
}

.sec--brown.corner-dots {
    --corner-dots-inset: 14px;
    --corner-dots-color: rgba(255, 255, 255, 0.28);
}

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

.sec--brown p {
    color: rgba(255, 255, 255, 0.78);
}

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

.sec--accent.corner-dots {
    --corner-dots-inset: 14px;
    --corner-dots-color: rgba(255, 255, 255, 0.38);
}

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

.sec--accent p {
    color: rgba(255, 255, 255, 0.92);
}

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

/* 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;
    }
}

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


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

.btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    --btn-gap: 0.9rem;
    --btn-frame: 0.4rem;
    --btn-badge: 36px;
    gap: var(--btn-gap);
    padding: 0.4rem;
    min-height: calc(var(--btn-badge) + (var(--btn-frame) * 2));
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--text-btn, var(--text-xs));
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    text-transform: capitalize;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

.btn__label {
    padding: 0.65rem 0 0.65rem 1.1rem;
}

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

.btn:active {
    transform: scale(0.97);
}

.btn__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-badge);
    height: var(--btn-badge);
    border-radius: 6px;
    color: var(--color-btn-text);
    flex-shrink: 0;
    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base);
}

.btn:hover .btn__badge {
    transform: translateX(2px);
}

.btn__badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Primary — orange */
.btn--primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Light parent container (frame) */
    background: var(--color-bg);
    color: var(--color-text);
    gap: var(--btn-frame);
    text-transform: none;
    transition: background var(--transition-base),
                box-shadow var(--transition-base),
                color var(--transition-base);
}

/* Always-orange base — no animation needed */
.btn--primary::before {
    content: "";
    position: absolute;
    inset: var(--btn-frame);
    background: var(--color-accent);
    border-radius: 5px;
    z-index: 1;
}

/* White overlay — shrinks away from the badge side on hover */
.btn--primary::after {
    content: "";
    position: absolute;
    /* Slightly larger than ::before to avoid sub-pixel orange bleed on edges */
    inset: calc(var(--btn-frame) - 1px);
    background: var(--color-bg);
    border-radius: 6px;
    z-index: 2;
    transform-origin: left center;
    transition: transform var(--transition-slow);
}

.btn--primary:hover::after {
    transform: scaleX(0);
}

.btn--primary .btn__badge {
    background: var(--color-accent);
}

/* Make sure content stays above the animated accent */
.btn--primary .btn__label,
.btn--primary .btn__badge {
    position: relative;
    z-index: 3;
}

.btn--primary .btn__label {
    padding: 0.65rem 1.1rem;
    transition: color var(--transition-base);
}

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

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

.btn--primary:disabled,
.btn--primary[disabled] {
    cursor: not-allowed;
    opacity: 0.52;
}

.btn--primary:disabled::after,
.btn--primary[disabled]::after {
    transform: none;
}

/* Disabled primary: no hover visuals (overlay, label, badge still matched :hover rules) */
.btn--primary:disabled:hover::after,
.btn--primary[disabled]:hover::after {
    transform: none;
}

.btn--primary:disabled:hover .btn__label,
.btn--primary[disabled]:hover .btn__label {
    color: var(--color-text);
}

.btn--primary:disabled:hover .btn__badge,
.btn--primary[disabled]:hover .btn__badge {
    transform: none;
    background: var(--color-accent);
    color: var(--color-btn-text);
}

/* Dark — navy */
.btn--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Blue parent container (frame) */
    background: var(--color-brand-blue);
    color: var(--color-btn-text);
    gap: var(--btn-frame);
    text-transform: none;
}

/* Always-orange base — no animation needed */
.btn--dark::before {
    content: "";
    position: absolute;
    inset: var(--btn-frame);
    background: var(--color-accent);
    border-radius: 5px;
    z-index: 1;
}

/* Dark overlay (brand navy — same family as outer frame) — shrinks away from the badge side on hover */
.btn--dark::after {
    content: "";
    position: absolute;
    inset: var(--btn-frame);
    background: var(--color-brand-blue);
    border-radius: 5px;
    z-index: 2;
    transform-origin: left center;
    transition: transform var(--transition-slow);
}

.btn--dark:hover::after {
    transform: scaleX(0);
}

.btn--dark .btn__badge {
    background: var(--color-accent);
}

.btn--dark .btn__label,
.btn--dark .btn__badge {
    position: relative;
    z-index: 3;
}

.btn--dark .btn__label {
    padding: 0.65rem 1.1rem;
    transition: color var(--transition-base);
}

.btn--dark:hover .btn__label {
    color: var(--color-btn-text);
}

.btn--dark:hover .btn__badge {
    background: transparent;
    color: var(--color-btn-text);
}

.btn--dark:disabled,
.btn--dark[disabled] {
    cursor: not-allowed;
    opacity: 0.52;
}

.btn--dark:disabled::after,
.btn--dark[disabled]::after {
    transform: none;
}

.btn--dark:disabled:hover::after,
.btn--dark[disabled]:hover::after {
    transform: none;
}

.btn--dark:disabled:hover .btn__label,
.btn--dark[disabled]:hover .btn__label {
    color: var(--color-btn-text);
}

.btn--dark:disabled:hover .btn__badge,
.btn--dark[disabled]:hover .btn__badge {
    transform: none;
    background: var(--color-accent);
    color: var(--color-btn-text);
}

/* Outline — transparent with border */
.btn--outline {
    background-color: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    padding: 0 1.4rem;
}

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

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

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

/* 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 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, background-color 0.2s ease;
}

.card:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

/* ── Corner dots (Abjad-style detail) ─────────────────────────────────────── */
/* Optional utility: add to cards/panels that need the corner-dot detail. */
.corner-dots {
    position: relative;
    --corner-dots-inset: 12px;
    --corner-dots-color: var(--color-border);
    background-image:
        radial-gradient(circle, var(--corner-dots-color) 2px, transparent 2.5px),
        radial-gradient(circle, var(--corner-dots-color) 2px, transparent 2.5px),
        radial-gradient(circle, var(--corner-dots-color) 2px, transparent 2.5px),
        radial-gradient(circle, var(--corner-dots-color) 2px, transparent 2.5px);
    background-repeat: no-repeat;
    background-size: 6px 6px;
    background-position:
        var(--corner-dots-inset) var(--corner-dots-inset),
        calc(100% - var(--corner-dots-inset)) var(--corner-dots-inset),
        var(--corner-dots-inset) calc(100% - var(--corner-dots-inset)),
        calc(100% - var(--corner-dots-inset)) calc(100% - var(--corner-dots-inset));
}

.corner-dots--sm {
    background-size: 5px 5px;
    --corner-dots-inset: 10px;
    background-position:
        var(--corner-dots-inset) var(--corner-dots-inset),
        calc(100% - var(--corner-dots-inset)) var(--corner-dots-inset),
        var(--corner-dots-inset) calc(100% - var(--corner-dots-inset)),
        calc(100% - var(--corner-dots-inset)) calc(100% - var(--corner-dots-inset));
}

.corner-dots--flush {
    --corner-dots-inset: 0px;
}

.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: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-item + .faq-item {
    margin-top: var(--gap-sm);
}

/* 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);
    min-height: 4.4rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--gap-md);
    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;
    position: relative;
    padding-right: calc(var(--gap-md) + 16px);
}

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

.faq-question__icon {
    display: none;
}

@keyframes faqDotPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.faq-question::after {
    content: "";
    position: absolute;
    right: var(--gap-md);
    top: 50%;
    width: var(--faq-dot-size, 6px);
    height: var(--faq-dot-size, 6px);
    border-radius: 999px;
    background: var(--color-accent);
    transform: translateY(-50%);
    animation: faqDotPulse 2.4s ease-in-out infinite;
}

@media (max-width: 768px) {
    .faq-question::after {
        animation: none;
        background: var(--color-accent);
    }
}

.faq-item.is-open .faq-question::after {
    background: var(--color-brand-blue);
    animation: none;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    padding: 0 var(--gap-md);
    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);
}

/* Inner wrapper: single grid child so grid-template-rows 0fr / 1fr can animate (multiple direct children break collapse). */
.faq-answer__inner {
    min-height: 0;
    overflow: hidden;
}

/* min-height: 0 is required — without it, 0fr can't collapse below min-content */
.faq-answer > p,
.faq-answer__inner > 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);
}

.faq-item.is-open .faq-answer {
    border-top: 1px solid var(--color-border);
    padding-top: 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-btn-text); }
.text-dim     { color: var(--color-dim); }
.text-white-muted { color: rgba(255, 255, 255, 0.75); }
.p0 { margin: 0; }

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

.hero--demo {
    min-height: 50vh;
}

/* Section title helper (used in patterns + templates) */
.sec-title {
    font-family: var(--font-primary);
    font-size: 3.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: var(--gap-xs) 0 var(--gap-xl);
}

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

/* Simple placeholders used in patterns when no real media exists yet */
.placeholder-thumb {
    background: var(--color-surface);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Bento dark variant */
.bento__item--dark {
    background: var(--color-text);
    color: var(--color-btn-text);
}

.bento__item--dark p {
    color: rgba(255, 255, 255, 0.75);
}

.bento__item h3 {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    margin-bottom: var(--gap-sm);
}

.bento__item h4 {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--gap-xs);
}

.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-xl);
}

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

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

.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;
    display: none; /* deprecated: use .corner-dots on containers instead */
}

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

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

.hero {
    background-color: var(--color-brand-blue);
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-h);
}

/* Corner dots belong to the hero container corners (not the content grid) */
.hero.corner-dots {
    --corner-dots-inset: 14px;
    --corner-dots-color: rgba(255, 255, 255, 0.32);
}

.hero__inner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    align-items: center;
    padding-top: var(--gap-xl);
    padding-bottom: var(--gap-xl);
}

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

.hero .lead {
    color: rgba(255, 255, 255, 0.75);
    max-width: 50ch;
}

/* .hero__content h1 — orange micro-kicker; typography via shared .label block */

.hero__content h2 {
    color: var(--color-btn-text);
    font-size: 3.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: 0;
}

.hero__lead {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    max-width: 50ch;
}

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

/* Homepage variant — add in-hero panels under the hero content */
.hero.hero--home {
    /* Let inner layout reach the bottom of the hero */
    align-items: stretch;
    /* B-mode: dark hero itself is exactly 100vh (header adds extra height above) */
    box-sizing: border-box;
    min-height: 100vh;
    /* Contrast: homepage hero on white */
    background-color: var(--color-bg);
    /* More breathing room before next section */
    padding-bottom: var(--gap-lg);
    /* Keep content below sticky header */
    padding-top: var(--header-h);
}

.hero.hero--home .wrap {
    width: 100%;
    min-width: 0;
    max-width: min(136rem, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.hero.hero--home.corner-dots {
    --corner-dots-color: rgba(29, 29, 29, 0.18);
}


.hero.hero--home .hero__inner {
    /* Use remaining hero height; push blocks toward bottom */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: var(--gap-lg);
    position: relative;
    justify-content: center;
}

.hero-home-center {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(22.4rem, 30.4vw);
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-home-center__img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
}

.hero-home-desc {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--gap-sm));
    transform: translateX(-50%);
    width: min(62ch, 92vw);
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 1024px) {
    .hero-home-center {
        width: min(14rem, 16vw);
    }
}

.hero-home-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: stretch;
    text-align: left;
}

/* Mega menu titles — infinite rail below .hero-home-blocks (plain text; typographic match to .nav-mega__meta) */
.hero.hero--home .hero-home-mega-rail {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: var(--gap-md);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* Wide marquee track must not expand the hero/bento row (flex min-width:auto) */
    overflow-x: hidden;
}

.hero-home-mega-rail__viewport {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.hero-home-mega-rail__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    animation: hero-home-mega-rail-scroll 120s linear infinite;
}

@keyframes hero-home-mega-rail-scroll {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/*
 * Footer marquee: 0 → -50% (standard seamless loop; hero uses -50% → 0 for opposite drift).
 * Two identical chunks; loop length = 50% of track width.
 */
@keyframes footer-hp-mega-rail-scroll-ltr {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.hero-home-mega-rail__chunk {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-inline-end: 0.75rem;
}

.hero-home-mega-rail__text {
    color: inherit;
    white-space: nowrap;
}

.hero-home-mega-rail__sep {
    flex-shrink: 0;
    color: var(--color-muted);
    opacity: 0.85;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-home-mega-rail__track,
    .footer-hp__mega-rail-track {
        animation: none;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--gap-xs);
    }

    .hero-home-mega-rail__chunk + .hero-home-mega-rail__chunk {
        display: none;
    }

    .hero-home-mega-rail__chunk {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding-inline-end: 0;
    }
}

.hero-home-block {
    /* Layout-only for now — no visual styling */
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.hero-home-block--band {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    align-items: stretch;
}

.hero--home .hero-why-bento {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.hero--home .hero-why-bento {
    margin-top: var(--gap-md);
    grid-template-columns: repeat(6, 1fr);
    /* Slightly taller row floor so the 4-row image cell reads less cramped */
    grid-auto-rows: minmax(var(--gap-lg), auto);
    gap: var(--gap-xs);
}

.hero--home .hero-why-bento__desc {
    margin: var(--gap-xs) 0 var(--gap-xs);
    max-width: 70ch;
    color: var(--color-muted);
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    line-height: 1.6;
}

/* stats (cols 1–2) + hero image (cols 3–6, full remaining width) */
.hero--home .hero-why-bento__hero--right {
    position: relative;
    grid-column: 3 / span 4;
    grid-row: 1 / span 4;
    /* Target ~40rem (~400px at html 10px): 4×--gap-xxl + 2×--gap-lg; vh cap on short viewports */
    min-height: min(calc(var(--gap-xxl) * 4 + var(--gap-lg) * 2), 62vh);
    overflow: hidden;
    /* Photo only — full bleed to border; band ribbon is ::before (top-flush, left inset) */
    background-image: var(--hero-bg-photo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.hero--home .hero-why-bento__hero--right::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--gap-lg);
    top: 0;
    width: 10rem;
    aspect-ratio: 200 / 334;
    max-width: min(10rem, 42%);
    background-image: var(--hero-bg-band);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    pointer-events: none;
}

.hero--home .hero-why-bento__mini--1 { grid-column: 1 / span 2; grid-row: 1; }
.hero--home .hero-why-bento__mini--2 { grid-column: 1 / span 2; grid-row: 2; }
.hero--home .hero-why-bento__mini--3 { grid-column: 1 / span 2; grid-row: 3; }
.hero--home .hero-why-bento__mini--4 { grid-column: 1 / span 2; grid-row: 4; }

.hero--home .hero-why-bento .bento__item {
    padding: var(--gap-md);
    background-color: transparent;
}

.hero--home .hero-why-bento .bento__item.hero-why-bento__hero--right {
    padding: 0;
}

.hero--home .hero-why-bento .bento__item.hero-why-bento__mini {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: var(--gap-sm) var(--gap-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

.hero--home .hero-why-bento .hero-why-bento__stat {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.55rem, 1.2vw, 0.95rem);
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* Stat value = figure + suffix like one word (no gap). Animate .hero-why-bento__stat-figure for count-ups. */
.hero--home .hero-why-bento .hero-why-bento__stat-value {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0;
    box-sizing: border-box;
    min-width: clamp(4.9rem, 10.5vw, 6.75rem);
    font-family: var(--font-primary);
    font-size: clamp(2.1rem, 1.9vw, 2.75rem);
    font-weight: var(--weight-semibold);
    line-height: 1.05;
    color: var(--color-brand-blue);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}

.hero--home .hero-why-bento .hero-why-bento__stat-figure {
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
}

/* Slot reels — built by pw-anim.js; hard clip, no mask (clean typography) */
.hero-stat-reels {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.03em;
}

.hero-stat-reel {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    /* 0.58em was tight for Inter tabular digits at hero sizes — right edge clipped on wide viewports */
    width: max(1ch, 0.65em);
    height: 1.05em;
    overflow: hidden;
    line-height: 1.05;
}

.hero-stat-reel__track {
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
}

.hero-stat-reel__cell {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.hero--home .hero-why-bento .hero-why-bento__stat-label {
    flex: 1;
    min-width: 0;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: var(--weight-regular);
    line-height: 1.35;
    color: var(--color-muted);
    margin: 0;
    text-align: left;
}

.hero--home .hero-why-bento .bento__item:hover {
    background-color: var(--color-accent-subtle);
}

.hero--home .hero-why-bento .bento__item--hero {
    background-color: transparent;
}

.hero--home .hero-why-bento h3 {
    margin: 0;
}

.hero--home .hero-why-bento .eyebrow {
    margin-bottom: 0.6rem;
}

.hero-home-mark {
    display: block;
    width: clamp(5rem, 8vw, 9rem);
    height: auto;
    opacity: 0.9;
}

/* Home hero subhead — only h2 allowed above global 3.6rem scale */
.hero.hero--home .hero-home-block--band h2 {
    font-size: clamp(2.8rem, 6vw, 4.9rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--color-text);
    margin: 0;
}

/* Service pages: reduce hero H2 size ~15–20% (do not affect homepage). */
.svc-ingreso-page .hero.hero--home.hero--ingreso .svc-ingreso-page__hero-copy h2 {
    font-size: clamp(2.35rem, 5.1vw, 4.15rem);
}

/* Qué es — left: eyebrow + H2 + arrows; right: Q&As; intro paragraph may sit below .home-que-es__layout (first band) */
.home-que-es__layout {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    column-gap: var(--gap-xl);
    align-items: stretch;
    margin-bottom: var(--gap-xl);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.home-que-es__rail-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
    min-width: 0;
}

.home-que-es__headline {
    margin: 0 0 var(--gap-md) 0;
}

.home-que-es__rail-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    text-align: left;
}

.home-que-es__rail-lede-zone {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--gap-xl);
    min-height: clamp(14rem, 32vh, 28rem);
}

.home-que-es__lede {
    margin: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    color: var(--color-muted);
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    line-height: 1.6;
    text-align: left;
    overflow-wrap: break-word;
}

.home-que-es__rail-right .home-que-es__columns {
    flex-shrink: 0;
}

.home-que-es__columns {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    align-items: stretch;
    padding: 0;
    border: 0;
}

/* Qué es — reuse FAQ accordion; match former piece typography & rhythm */
.home-que-es__columns.faq-list {
    gap: 0;
}

.home-que-es__columns.faq-list .faq-item + .faq-item {
    margin-top: var(--gap-sm);
}

.home-que-es__columns.faq-list .home-que-es__faq-heading {
    margin: 0;
    font-size: clamp(1.65rem, 0.45vw + 1.4rem, 1.9rem);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
}

.home-que-es__columns.faq-list .faq-question {
    font-size: clamp(1.65rem, 0.45vw + 1.4rem, 1.9rem);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    padding-top: var(--gap-xs);
    padding-bottom: var(--gap-xs);
    padding-left: var(--gap-sm);
    padding-right: calc(var(--gap-sm) + 14px);
}

.home-que-es__columns.faq-list .faq-question::after {
    right: var(--gap-sm);
}

.home-que-es__columns.faq-list .faq-answer {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
}

.home-que-es__columns.faq-list .faq-item.is-open .faq-answer {
    padding-top: var(--gap-xs);
    padding-bottom: var(--gap-xs);
}

.home-que-es__columns.faq-list .faq-answer > p,
.home-que-es__columns.faq-list .faq-answer__inner > p {
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    line-height: 1.65;
}

.home-que-es__rail-lede-zone .home-pilar-asesoria-fig {
    margin: 0;
    padding: 0;
}

.home-que-es__rail-lede-zone .home-pilar-asesoria-fig img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: none;
}

/* Asesorías ltda. band — ~15% taller than 16:9 (home-11): 9 × 1.15 = 10.35 */
.home-que-es__rail-lede-zone .home-pilar-asesoria-fig--ltda {
    overflow: hidden;
    border-radius: var(--radius-sm);
    width: 100%;
    aspect-ratio: 16 / 10.35;
}

.home-que-es__rail-lede-zone .home-pilar-asesoria-fig--ltda img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Pilar guía only (.home-pilar-sec): H2 + Q&A copy left; figure on right — does not affect first .home-que-es band */
.home-que-es.home-pilar-sec .home-que-es__layout {
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    column-gap: var(--gap-xxl);
    align-items: start;
    margin-bottom: calc(var(--gap-xxl) + var(--gap-lg));
}

.home-que-es.home-pilar-sec .home-que-es__rail-left {
    gap: var(--gap-lg);
}

.home-que-es.home-pilar-sec .home-que-es__rail-left .home-que-es__headline {
    margin: 0;
}

.home-que-es.home-pilar-sec .home-que-es__rail-lede-zone {
    flex: 0 1 auto;
    min-height: 0;
    justify-content: flex-start;
    gap: var(--gap-lg);
}

/* Pilar guía — former FAQ copy as plain title + paragraphs (no accordion) */
.home-que-es.home-pilar-sec .home-pilar-asesoria-plain {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    min-width: 0;
}

.home-que-es.home-pilar-sec .home-pilar-asesoria-plain__title {
    margin: 0;
    font-size: clamp(1.65rem, 0.45vw + 1.4rem, 1.9rem);
    font-weight: var(--weight-semibold);
    line-height: 1.32;
    color: var(--color-text);
}

.home-que-es.home-pilar-sec .home-pilar-asesoria-plain .home-que-es__lede {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    line-height: 1.72;
}

/* Pilar guía — Chile context: plain text only (no panel); type + spacing from tokens */
.home-que-es.home-pilar-sec .home-pilar-asesoria-featured {
    margin: 0 0 var(--gap-xxl) 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    text-align: left;
}

@media (max-width: 768px) {
    .home-que-es__layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: var(--gap-md);
        min-height: 0;
    }

    /* Pilar guía: desktop two-column rule has higher specificity; force single column here */
    .home-que-es.home-pilar-sec .home-que-es__layout {
        grid-template-columns: 1fr;
        row-gap: var(--gap-lg);
    }

    .home-que-es__rail-left {
        grid-column: 1;
        grid-row: 1;
    }

    .home-que-es__rail-left .home-que-es__headline {
        margin-bottom: var(--gap-sm);
    }

    .home-que-es__rail-right {
        grid-column: 1;
        grid-row: 2;
        gap: var(--gap-lg);
    }

    .home-que-es__rail-lede-zone {
        flex: 0 0 auto;
        min-height: 0;
        justify-content: flex-start;
    }

    .home-que-es__columns {
        gap: var(--gap-md);
    }

    .home-que-es__columns.faq-list .faq-item + .faq-item {
        margin-top: var(--gap-sm);
    }
}

/* ¿Qué es Home Pymes? — first band only (not guía .home-pilar-sec): white field + white panel + FAQ como acordeón global */
.home-fusion .sec.home-que-es:not(.home-pilar-sec) {
    --que-es-ink: #14110e;
    --que-es-ink-soft: rgba(20, 17, 14, 0.78);
    --que-es-surface-strong: #ffffff;
    --que-es-surface-edge: rgba(20, 17, 14, 0.12);

    background-color: var(--color-bg);
    color: var(--que-es-ink);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec).corner-dots {
    --corner-dots-color: rgba(29, 29, 29, 0.14);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__eyebrow {
    color: var(--color-accent);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__headline {
    color: var(--que-es-ink);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__rail-left {
    justify-content: center;
}

/* Intro copy below grid (same placement pattern as .home-pilar-asesoria-featured on guía pilar) */
.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__intro-below {
    margin: 0 0 var(--gap-xxl) 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--que-es-ink-soft);
    text-align: left;
}

/* Multi-paragraph intro stack (e.g. Nosotros historia band) — homepage band uses single <p> */
.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__intro-below:not(:is(p)) > p {
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__intro-below:not(:is(p)) > p + p {
    margin-top: var(--gap-md);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__arrows,
#terminos-del-servicio .home-que-es__arrows {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__arrows {
    margin: 0;
}

#terminos-del-servicio .home-que-es__arrows {
    margin: var(--gap-md) 0 0;
}

/* ~15% of left rail (19.2% reduced by 20%); same share under Términos intro column */
.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__arrows-inner,
#terminos-del-servicio .home-que-es__arrows-inner {
    display: block;
    width: 15.36%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__arrows img,
#terminos-del-servicio .home-que-es__arrows img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__rail-right {
    gap: var(--gap-md);
    background: var(--que-es-surface-strong);
    border: 1px solid var(--que-es-surface-edge);
    border-radius: var(--radius);
    padding: var(--gap-md);
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(20, 17, 14, 0.04);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__rail-lede-zone {
    flex: 0 1 auto;
    min-height: 0;
    justify-content: flex-start;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__lede {
    color: var(--que-es-ink-soft);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .faq-item {
    background: var(--que-es-surface-strong);
    border-color: var(--que-es-surface-edge);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .faq-item.is-open .faq-answer {
    border-top-color: var(--que-es-surface-edge);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .faq-question {
    color: var(--que-es-ink);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .faq-question:hover {
    color: var(--color-accent);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-question {
    font-size: 1.7rem;
    letter-spacing: inherit;
    line-height: 1.25;
    padding: var(--gap-md);
    padding-right: calc(var(--gap-md) + 16px);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-question::after {
    right: var(--gap-md);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-answer {
    padding-left: var(--gap-md);
    padding-right: var(--gap-md);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-item.is-open .faq-answer {
    padding-top: var(--gap-md);
    padding-bottom: var(--gap-md);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-answer > p,
.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-answer__inner > p {
    color: var(--que-es-ink-soft);
    font-size: 1.5rem;
    line-height: 1.7;
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .home-que-es__columns.faq-list .faq-answer__inner > .nosotros-faq__lede {
    margin: 0 0 var(--gap-xs) 0;
    font-family: var(--font-primary);
    font-size: clamp(1.65rem, 0.45vw + 1.4rem, 1.9rem);
    font-weight: var(--weight-semibold);
    line-height: 1.32;
    color: var(--que-es-ink);
}

.home-que-es__columns.faq-list .faq-answer__inner > .nosotros-faq__lede {
    font-size: clamp(1.65rem, 0.45vw + 1.4rem, 1.9rem);
    line-height: 1.32;
    color: var(--color-text);
}

/* Nosotros valores — h3 “LO QUE NOS GUÍA” then h2; no numbered bento steps (01. lives in each h3) */
.nosotros-page .home-proceso-bento--nosotros-valores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .nosotros-page .home-proceso-bento--nosotros-valores {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.nosotros-page .home-proceso-bento--nosotros-valores .bento__item {
    padding-top: var(--gap-sm);
}

.nosotros-page .home-proceso-bento--nosotros-valores .home-proceso-bento__title {
    padding-right: 0;
}

.nosotros-page .nosotros-page__valores-head h2 {
    margin-top: 0;
    margin-bottom: var(--gap-md);
}

.home-fusion .sec.home-que-es:not(.home-pilar-sec) .faq-item.is-open .faq-question::after {
    background: var(--color-brand-blue);
}

@supports not (color: color-mix(in srgb, red 1%, blue)) {
    .home-fusion .sec.home-que-es:not(.home-pilar-sec) {
        background-color: var(--color-bg);
    }
}

.hero-home-split {
    display: grid;
    /* Description fills remaining space; button column fits content */
    grid-template-columns: 1fr auto;
    gap: var(--gap-md);
    align-items: start;
}

.hero-home-block--wide .lead {
    max-width: none;
}

.hero-home-block--narrow {
    display: flex;
    align-items: flex-end;
}

.hero-home-block--narrow .btn-row {
    justify-content: flex-end;
}

.hero-home-block--wide,
.hero-home-block--narrow {
    min-height: 0;
}

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

.hero__media {
    display: flex;
    justify-content: flex-end;
}

.hero__img {
    width: 100%;
    max-width: 52rem;
    height: auto;
    aspect-ratio: 680 / 520;
    border-radius: var(--radius);
    object-fit: cover;
}

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: var(--gap-lg);
        padding-bottom: var(--gap-lg);
    }

    .hero.corner-dots {
        --corner-dots-inset: 10px;
    }

    .hero__media {
        justify-content: center;
    }

    .hero__img {
        max-width: 100%;
        max-height: 40rem;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 60vh;
        padding-top: calc(var(--header-h) + var(--gap-lg));
        padding-bottom: var(--gap-lg);
    }

    .hero__lead {
        font-size: var(--text-sm);
    }

    .hero-home-split {
        grid-template-columns: 1fr;
    }

    .hero-home-desc {
        bottom: calc(100% + var(--gap-xs));
        font-size: 1.35rem;
    }

    .hero--home .hero-why-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, auto);
    }

    .hero--home .hero-why-bento__mini--1,
    .hero--home .hero-why-bento__mini--2,
    .hero--home .hero-why-bento__mini--3,
    .hero--home .hero-why-bento__mini--4 {
        grid-column: auto;
        grid-row: auto;
    }

    .hero--home .hero-why-bento__hero--right {
        grid-column: 1 / -1;
        grid-row: auto;
        order: -1;
        /* ~28rem stacked photo strip: 3×--gap-xxl + --gap-lg */
        min-height: min(calc(var(--gap-xxl) * 3 + var(--gap-lg)), 48vh);
    }

    .hero.hero--home .hero-home-block--band h2 {
        font-size: clamp(2.6rem, 7.3vw, 3.6rem);
    }
}


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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, top 0.25s ease-in-out;
}

/* Once scrolled past top bar: snap to top + white bg */
.site-header.is-scrolled {
    top: 0;
    background-color: var(--color-bg);
    border-bottom: 0;
}


.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 var(--side-pad);
    gap: var(--gap-md);
}

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

/* On transparent header (not yet scrolled), non–Happy-Robot bar: white logo */
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-logo {
    color: var(--color-btn-text);
}

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

/* Custom logo image (Customizer or default uploads file) — single <img> inside .nav-logo avoids nested <a> */
.nav-logo > img.custom-logo,
.nav-logo .custom-logo-link img {
    display: block;
    height: auto;
    width: auto;
    max-height: 3.6rem;
}

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

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

.nav-item {
    position: relative;
}

/* 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-text);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
}

/*
 * Immersive (glass) bar only — body:not(.header-hr) so Happy Robot bar keeps body.header-hr nav colors.
 * Scoped under .nav-menu so .nav-mega links are never targeted.
 */
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item:not(.has-dropdown) > a.nav-link,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-dropdown > .nav-parent-wrap > a.nav-link {
    color: rgba(255, 255, 255, 0.9);
}

/*
 * Primary bar — brand-blue L→R wipe.
 * Regular + flyout dropdowns: wipe on <a> (text-width pill).
 * has-mega: wipe on .nav-parent-wrap so link + chevron share one hit; chevron #fff on navy.
 */
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link,
.nav-menu > .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap > a.nav-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.nav-menu > .nav-item.has-mega > .nav-parent-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.nav-menu > .nav-item.has-mega > .nav-parent-wrap > a.nav-link {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link .nav-link__label,
.nav-menu > .nav-item.has-dropdown > .nav-parent-wrap > a.nav-link .nav-link__label {
    position: relative;
    z-index: 1;
}

/* Explicit label color on hover — fixes has-mega / WebKit where anchor color may not cascade to span */
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:hover .nav-link__label,
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:focus-visible .nav-link__label,
.nav-menu > .nav-item.has-dropdown:hover > .nav-parent-wrap > a.nav-link .nav-link__label,
.nav-menu > .nav-item.has-dropdown.is-focused > .nav-parent-wrap > a.nav-link .nav-link__label,
.nav-menu > .nav-item.has-dropdown.is-open > .nav-parent-wrap > a.nav-link .nav-link__label {
    color: #ffffff;
}

body.header-hr .site-header .nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > a.nav-link,
body.header-hr .site-header .nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > a.nav-link,
body.header-hr .site-header .nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > a.nav-link,
body.header-hr .site-header .nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > a.nav-link .nav-link__label,
body.header-hr .site-header .nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > a.nav-link .nav-link__label,
body.header-hr .site-header .nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > a.nav-link .nav-link__label {
    color: #ffffff;
}

body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > a.nav-link,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > a.nav-link,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > a.nav-link,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > a.nav-link .nav-link__label,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > a.nav-link .nav-link__label,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > a.nav-link .nav-link__label {
    color: #ffffff;
}

.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link::before,
.nav-menu > .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap > a.nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 0.35rem;
    width: auto;
    background: var(--color-brand-blue);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-slow);
    z-index: 0;
    pointer-events: none;
}

.nav-menu > .nav-item.has-mega > .nav-parent-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 0.35rem;
    width: auto;
    background: var(--color-brand-blue);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-slow);
    z-index: 0;
    pointer-events: none;
}

.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:hover::before,
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:focus-visible::before,
.nav-menu > .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap > a.nav-link::before,
.nav-menu > .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap > a.nav-link::before,
.nav-menu > .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap > a.nav-link::before,
.nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap::before,
.nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap::before,
.nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap::before {
    transform: scaleX(1);
}

.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:hover,
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:focus-visible,
.nav-menu > .nav-item.has-dropdown:hover > .nav-parent-wrap > .nav-link,
.nav-menu > .nav-item.has-dropdown.is-focused > .nav-parent-wrap > .nav-link,
.nav-menu > .nav-item.has-dropdown.is-open > .nav-parent-wrap > .nav-link {
    color: #ffffff;
}

.nav-menu > .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap > .nav-chevron,
.nav-menu > .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap > .nav-chevron,
.nav-menu > .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap > .nav-chevron {
    color: var(--color-brand-blue);
}

body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap > .nav-chevron,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap > .nav-chevron,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap > .nav-chevron {
    color: #ffffff;
}

.nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > .nav-chevron,
.nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > .nav-chevron,
.nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > .nav-chevron {
    color: #ffffff;
    position: relative;
    z-index: 1;
}

/* Parent-wrap: sweep on .nav-link (flyout) or whole wrap (mega) */
.nav-menu > .nav-item:hover > .nav-parent-wrap,
.nav-menu > .nav-item.is-focused > .nav-parent-wrap {
    background-color: transparent;
}

body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item:hover > .nav-parent-wrap,
body:not(.header-hr) .site-header:not(.is-scrolled) .nav-menu > .nav-item.is-focused > .nav-parent-wrap {
    background-color: transparent;
}

/* Remove background from nav-link inside parent-wrap (sweep: on <a> for flyouts, on wrap for mega) */
.nav-item:hover > .nav-parent-wrap > .nav-link,
.nav-item.is-focused > .nav-parent-wrap > .nav-link {
    background-color: transparent;
}

.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:hover,
.nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:focus-visible {
    background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu > .nav-item:not(.has-dropdown) > a.nav-link::before,
    .nav-menu > .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap > a.nav-link::before,
    .nav-menu > .nav-item.has-mega > .nav-parent-wrap::before {
        transition: none;
    }
}

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

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

/* Chevron toggle button (desktop) — visual indicator only, not interactive */
.nav-chevron {
    pointer-events: none;  /* hover on nav-item handles dropdown; button must not capture clicks */
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--color-muted);
    transition: color 0.15s ease;
}

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

body:not(.header-hr) .site-header:not(.is-scrolled) .nav-chevron {
    color: rgba(255, 255, 255, 0.75);
}

.nav-chevron svg {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nav-item:hover .nav-chevron svg,
.nav-item.is-focused .nav-chevron svg,
.nav-item.is-open .nav-chevron svg {
    transform: rotate(180deg);
}

/* 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) {
    /* Make dropdown position relative to .site-header (same as mega),
       so top: 100% lands flush at header bottom */
    .nav-item.has-dropdown:not(.has-mega) {
        position: static;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    /* Hover bridge — transparent strip covering the 6px margin-top gap */
    .nav-item.has-dropdown:not(.has-mega) > .nav-parent-wrap::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -1rem;
        right: -1rem;
        height: 8px;
        transform: translateY(100%);
    }

    /* Suppress nav-item-level bridge — parent-wrap ::after handles gap */
    .nav-item.has-dropdown:not(.has-mega)::after {
        display: none;
    }
}

/* Dropdown panel */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: auto;
    margin-top: 6px;
    min-width: 27.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 0 0.6rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

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

.nav-dropdown a,
a.nav-dropdown__link {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    font-weight: var(--weight-regular);
    color: var(--color-text);
    padding: 0.8rem 1.6rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-base);
}

.nav-dropdown a::before,
a.nav-dropdown__link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand-blue);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-slow);
    z-index: 0;
    pointer-events: none;
}

.nav-dropdown a:hover::before,
.nav-dropdown a:focus-visible::before,
a.nav-dropdown__link:hover::before,
a.nav-dropdown__link:focus-visible::before {
    transform: scaleX(1);
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
a.nav-dropdown__link:hover,
a.nav-dropdown__link:focus-visible {
    color: var(--color-btn-text);
    background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown a::before,
    a.nav-dropdown__link::before {
        transition: none;
    }
}

/* ── Mega menu panel ─────────────────────────────────────────────────────── */
/* Activated by adding CSS class "has-mega" to a menu item in WP admin.       */

.nav-item.has-mega {
    position: static;
    align-self: stretch;
}

.nav-item.has-mega > .nav-parent-wrap {
    height: 100%;
    display: flex;
    align-items: center;
}

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

.nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 2px var(--side-pad) 0;
    transform: translateY(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}

/* Happy Robot bar: mega aligns to .site-header__inner content edges (no extra horizontal pad). */
body.header-hr .site-header__inner .nav-mega {
    padding-left: 0;
    padding-right: 0;
}

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

/* Card shell — Happy Robot: light 1px frame, ~10px radius, no shadow (TRUTHS.md). */
.nav-mega__inner {
    --mega-col-gap: clamp(1.8rem, 2.8vw, 3.2rem);
    --mega-stack-gap: 2rem;
    --mega-block-gap: 1.6rem;
    --mega-h-pad: clamp(1.6rem, 3vw, 3.2rem);
    --mega-v-pad-bottom: 2rem;
    --radius-mega: 10px;
    --mega-corner-dot-size: 8px;
    position: relative;
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle, var(--color-border) 60%, transparent 62%),
        radial-gradient(circle, var(--color-border) 60%, transparent 62%),
        radial-gradient(circle, var(--color-border) 60%, transparent 62%),
        radial-gradient(circle, var(--color-border) 60%, transparent 62%);
    background-repeat: no-repeat;
    background-size: var(--mega-corner-dot-size) var(--mega-corner-dot-size);
    background-position:
        left 0.8rem top 0.8rem,
        right 0.8rem top 0.8rem,
        left 0.8rem bottom 0.8rem,
        right 0.8rem bottom 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-mega);
    padding: 2.2rem var(--mega-h-pad) var(--mega-v-pad-bottom);
    /* Almost full viewport under header — avoids unnecessary inner scroll (svh/dvh = mobile browser chrome). */
    max-height: calc(100vh - 7rem);
    max-height: calc(100svh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    scroll-padding-block: 0.5rem;
}

.nav-mega__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* HR header: same card language as reference (rounded panel, full border), slight inset so radius shows */
body.header-hr .site-header__inner .nav-mega__inner {
    --mega-h-pad: 4rem;
    --mega-v-pad-bottom: 4rem;
    border-radius: var(--radius-mega);
    border: 1px solid var(--color-border);
    margin-top: 1rem;
    margin-inline: clamp(0.45rem, 1.2vw, 1.2rem);
    padding: 4rem var(--mega-h-pad) var(--mega-v-pad-bottom);
}

@media (min-width: 1025px) {
    /* Dividers belong to nav-mega__inner and split it in exact thirds. */
    .nav-mega__inner::before,
    .nav-mega__inner::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--color-border-inner);
        pointer-events: none;
        z-index: 1;
    }

    .nav-mega__inner::before {
        left: calc(100% / 3 + var(--mega-h-pad) / 3 - 0.5px);
    }

    .nav-mega__inner::after {
        left: calc(100% * 2 / 3 - var(--mega-h-pad) / 3 - 0.5px);
    }

    .nav-mega__columns {
        position: relative;
        z-index: 2;
    }
}

/* Two independent stacks (Happy Robot): left ul + optional right ul — not a flat item grid */
.nav-mega__columns {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--mega-col-gap);
    align-items: start;
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

.nav-mega__meta.pl-section-label {
    position: relative;
    z-index: 3;
    margin-top: 1.4rem;
    margin-right: calc(-1 * var(--mega-h-pad));
    margin-bottom: calc(-1 * var(--mega-v-pad-bottom));
    margin-left: calc(-1 * var(--mega-h-pad));
    padding: 0.75rem var(--mega-h-pad);
    border-top: 1px solid var(--color-border-inner);
    background: var(--color-elevated);
    color: var(--color-muted);
    font-size: 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    border-radius: 0 0 calc(var(--radius-mega) - 1px) calc(var(--radius-mega) - 1px);
}

.nav-mega__meta-crumb {
    color: var(--color-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-mega__meta-prefix {
    color: var(--color-text);
    font-weight: 600;
}

.nav-mega__columns:has(.nav-mega__column--2) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1024px) {
    .nav-mega__columns,
    .nav-mega__columns:has(.nav-mega__column--2) {
        grid-template-columns: 1fr;
    }

    .nav-mega__column--2 {
        margin-top: var(--mega-stack-gap);
        padding-top: var(--mega-stack-gap);
        border-top: 1px solid var(--color-border-inner);
    }

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

/* Default: one vertical stack (mobile / narrow mega). */
.nav-mega__column {
    --mega-zone-inset: clamp(1.4rem, 2vw, 2rem);
    --mega-rail-left: 0;
    --mega-hover-side-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mega-stack-gap);
    min-width: 0;
}

/* Desktop ≥1025px: three-column grid per main stack. */
@media (min-width: 1025px) {
    .nav-mega__column {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0;
        row-gap: var(--mega-block-gap);
        align-items: start;
    }

    .nav-mega__column > .nav-mega__cell {
        padding-inline: var(--mega-zone-inset);
    }
}

/* Wrong order: mega-col-2 first leaves an empty first <ul> — hide it */
.nav-mega__column:first-child:empty {
    display: none;
}

/* Column heading row (add class mega-col in WP Menus) — Happy Robot–style */
.nav-mega__cell--section {
    /* Keep only vertical spacing; horizontal rail comes from .nav-mega__cell desktop inset */
    padding-block: 0 0.4rem;
    margin: 0;
    list-style: none;
}

.nav-mega__column > .nav-mega__cell--section:first-child {
    padding-top: 0;
}

/* Tuck first subsection under its column heading (fixes “Contabilidad” orphan gap) */
.nav-mega__cell--section > .nav-mega__sublist {
    margin-top: 0.55rem;
}

.nav-mega__section-title {
    display: block;
    font-family: var(--font-primary), system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.35;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

/* mega-col at depth 2 (optional) — same voice, slightly quieter */
.nav-mega__section-title--sub {
    margin-top: 1.4rem;
    opacity: 0.95;
    font-size: 1.1rem;
}

/* Hub column titles (mega-col) with real URLs — same look as span titles, keyboard-accessible */
a.nav-mega__section-title--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color var(--transition-fast);
}

a.nav-mega__section-title--link:hover,
a.nav-mega__section-title--link:focus-visible {
    color: var(--color-accent);
}

/* “Declaración de impuestos” style: # + hijos — not a link */
.nav-mega__subsection-title {
    display: block;
    font-family: var(--font-secondary), system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dim);
    line-height: 1.35;
    margin: 1.1rem 0 0.45rem;
    padding-left: 0;
}

.nav-mega__cell--subsection > .nav-mega__subsection-title:first-child {
    margin-top: 0.4rem;
}

/* One mega “row” = title + optional description — Happy Robot block hit-area */
.nav-mega__cell--link,
.nav-mega__cell--sublink {
    margin: 0;
    padding: 0;
}

/*
 * Keep a consistent text rail with balanced side breathing room.
 * Left/right spacing is identical so the wipe feels centered around the label.
 */
.nav-mega__cell--link .nav-link--mega,
.nav-mega__cell--sublink .nav-link--mega {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-secondary), system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: var(--weight-medium);
    line-height: 1.28;
    padding: 0.7rem 1rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-base), border-color var(--transition-fast);
}

.nav-mega__cell--sublink .nav-link--mega {
    padding: 0.5rem 1rem;
}

.nav-mega__cell--link .nav-link--mega::before,
.nav-mega__cell--sublink .nav-link--mega::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease-out;
    z-index: 0;
    pointer-events: none;
}

.nav-mega__cell--link .nav-link--mega:hover::before,
.nav-mega__cell--link .nav-link--mega:focus-visible::before,
.nav-mega__cell--sublink .nav-link--mega:hover::before,
.nav-mega__cell--sublink .nav-link--mega:focus-visible::before {
    transform: scaleX(1);
}

.nav-mega__link-title {
    position: relative;
    z-index: 1;
    font-size: 1.45rem;
    font-weight: var(--weight-regular);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-muted);
    transition: color var(--transition-base);
}

.nav-mega__link-desc {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.2rem;
    font-weight: var(--weight-regular);
    line-height: 1.4;
    color: var(--color-dim);
    max-width: 42ch;
    transition: color var(--transition-base);
}

/* Hover / focus: white type on brand orange */
.nav-mega__cell--link .nav-link--mega:hover,
.nav-mega__cell--sublink .nav-link--mega:hover,
.nav-mega__cell--link .nav-link--mega:focus-visible,
.nav-mega__cell--sublink .nav-link--mega:focus-visible {
    border-color: transparent;
    color: #ffffff;
}

.nav-mega__cell--link .nav-link--mega:hover .nav-mega__link-title,
.nav-mega__cell--sublink .nav-link--mega:hover .nav-mega__link-title,
.nav-mega__cell--link .nav-link--mega:focus-visible .nav-mega__link-title,
.nav-mega__cell--sublink .nav-link--mega:focus-visible .nav-mega__link-title {
    color: #ffffff;
}

.nav-mega__cell--link .nav-link--mega:hover .nav-mega__link-desc,
.nav-mega__cell--sublink .nav-link--mega:hover .nav-mega__link-desc,
.nav-mega__cell--link .nav-link--mega:focus-visible .nav-mega__link-desc,
.nav-mega__cell--sublink .nav-link--mega:focus-visible .nav-mega__link-desc {
    color: rgba(255, 255, 255, 0.86);
}

@media (prefers-reduced-motion: reduce) {
    .nav-mega__cell--link .nav-link--mega::before,
    .nav-mega__cell--sublink .nav-link--mega::before {
        transition: none;
    }
}

.nav-mega__cell--link .nav-link--mega:focus-visible,
.nav-mega__cell--sublink .nav-link--mega:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* One vertical list per category (Happy Robot: links stack under the label, no mini-columns). */
.nav-mega__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

/* Optional: add class mega-dense on the category <li> in WP to get a 2-col link grid under that block only */
.nav-mega__cell--mega-dense > .nav-mega__sublist:not(.nav-mega__sublist--nested) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.2rem, 2.2vw, 2.4rem);
    row-gap: 0.55rem;
}

@media (max-width: 1200px) {
    .nav-mega__cell--mega-dense > .nav-mega__sublist:not(.nav-mega__sublist--nested) {
        grid-template-columns: 1fr;
    }
}

/* Third tier — same single-column rhythm (avoids “empty middle column” with 3 items) */
.nav-mega__sublist--nested {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

.nav-mega__cell--depth3 .nav-link--mega {
    font-size: 1.45rem;
}

.nav-mega__cell--depth3 .nav-mega__link-title {
    font-size: 1.45rem;
}

.nav-mega__cell--depth3 .nav-mega__link-desc {
    font-size: 1.3rem;
}

.nav-mega__cell--sublink {
    grid-column: auto;
}

.nav-mega__column .nav-link:not(.nav-link--mega) {
    font-size: 1.4rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-sm);
}

/* Nav actions (right side) */
.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-text);
    border-radius: var(--radius);
    transition: color 0.15s ease;
}

body:not(.header-hr) .site-header:not(.is-scrolled) .nav-toggle {
    color: var(--color-btn-text);
}

.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 (max-width: 1023px) {
    .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 (Option B — full-screen grid) ──────────────────── */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background-color: var(--color-bg);
    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: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mobile-nav__logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    min-width: 0;
}

.mobile-nav__logo .custom-logo {
    display: block;
    height: auto;
    width: auto;
    max-height: 3rem;
}

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

.mobile-nav__close:hover { color: var(--color-text); }

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

/* Body scroll container */
.mobile-nav__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gap-md) var(--side-pad) var(--gap-lg);
    overflow-y: auto;
}

/* ── Mobile nav — menu list (wp_nav_menu default walker output) ──────────── */

.mobile-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.mobile-nav__list .menu-item > a {
    display: block;
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: color 0.15s ease;
}

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

/* Parent items: wrap link + toggle button in a flex row */
.mobile-nav__list .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mobile-nav__list .menu-item-has-children > a {
    flex: 1;
    border-bottom: none;
}

.mobile-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.8rem;
    color: var(--color-muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.mobile-nav__toggle svg {
    width: 2rem;
    height: 2rem;
    transition: transform 0.2s ease;
}

.menu-item-has-children.is-open > .mobile-nav__toggle svg {
    transform: rotate(180deg);
}

/* Bottom border for the full parent row */
.mobile-nav__list .menu-item-has-children::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
}

/* Sub-menu — collapsed by default, expands on .is-open */
.mobile-nav__list .sub-menu {
    list-style: none;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-nav__list .menu-item-has-children.is-open > .sub-menu {
    max-height: 60rem;
}

.mobile-nav__list .sub-menu .menu-item > a {
    padding: 1rem 0 1rem var(--gap-md);
    font-size: 1.5rem;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border-inner);
}

.mobile-nav__list .sub-menu .menu-item:last-child > a {
    border-bottom: none;
}

/* CTA at bottom (legacy) */
.mobile-nav__cta {
    padding-top: var(--gap-md);
    margin-top: auto;
    flex-shrink: 0;
}

.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;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}


/* ── Site Footer — light surface (tokens); dark copy + borders for contrast ─ */

.site-footer {
    position: relative;
}

.site-footer.site-footer--brand {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

/* Match header rail: .wrap--wide (136rem + --side-pad); mobile = --side-pad-mobile like .site-header__inner */
@media (max-width: 768px) {
    .site-footer.site-footer--brand .footer-hp .wrap.wrap--wide {
        padding-left: var(--side-pad-mobile);
        padding-right: var(--side-pad-mobile);
    }
}

.site-footer.site-footer--brand a:not(.btn) {
    color: inherit;
    text-decoration: none;
}

.site-footer.site-footer--brand a:not(.btn):hover {
    color: var(--color-accent);
}

.footer-hp__main {
    padding: clamp(4.5rem, 8vw, calc(var(--gap-xxl) + 3rem)) 0 clamp(5.5rem, 10vw, calc(var(--gap-xxl) + 4rem));
}

/* .footer-hp__main-inner: head-stack + body (main grid + servicios) */
.footer-hp__main-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(5.5rem, 11vw, 9rem);
}

.footer-hp__head-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
    padding-bottom: 0;
}

.footer-hp__head-stack .footer-hp__head-rail {
    margin-bottom: 0;
}

.footer-hp__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: clamp(5.5rem, 11vw, 9rem);
}

.footer-hp__main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-lg);
    align-items: start;
}

/* Footer servicios rail: three columns inside site side padding */
.footer-hp__servicios-rail {
    width: 100%;
    min-width: 0;
    padding-top: clamp(4.5rem, 9vw, 7rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.footer-hp__servicios-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(3.75rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
    align-items: start;
}

.footer-hp__servicios-col {
    --tree-indent: 1rem;
    --tree-line: var(--color-border-inner);

    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    border-left: 1px solid var(--tree-line);
    padding-left: var(--tree-indent);
}

.footer-hp__servicios-col-kicker {
    display: block;
    margin: 0 0 0.35rem;
    font-family: var(--font-secondary);
    font-size: clamp(1.02rem, 0.55vw + 0.78rem, 1.24rem);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-muted);
    text-decoration: none;
}

a.footer-hp__servicios-col-kicker:hover {
    color: var(--color-accent);
}

.footer-hp__servicios-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.45rem, 1.2vw, 0.72rem);
}

/* Flat columns: rail is on .footer-hp__servicios-col (from kicker); list is type-only here */
.footer-hp__servicios-col-list--flat-rail {
    gap: clamp(0.4rem, 1.2vw, 0.65rem);
    margin: 0;
    padding: 0;
}

.footer-hp__servicios-col-list--flat-rail > .footer-hp__servicios-col-li {
    margin: 0;
    padding: 0.28rem 0;
}

.site-footer.site-footer--brand .footer-hp__servicios-col-list--flat-rail .footer-hp__servicios-link {
    font-family: var(--font-secondary);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-muted);
}

.footer-hp__servicios-col-li {
    margin: 0;
    padding: 0;
}

.footer-hp__servicios-row {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.footer-hp__servicios-row--has-children {
    gap: 0.52rem;
}

/* Column entries: parent vs simple link */
.site-footer.site-footer--brand .footer-hp__servicios-link {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0;
    font-family: var(--font-primary);
    font-size: clamp(1.14rem, 0.38vw + 1rem, 1.32rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer.site-footer--brand .footer-hp__servicios-link--parent {
    font-weight: 600;
    color: var(--color-brand-blue);
}

.site-footer.site-footer--brand .footer-hp__servicios-link:hover {
    color: var(--color-accent);
}

/* Nested list: second-level rail (inherits --tree-line from column) */
.footer-hp__servicios-nested {
    --tree-indent: 1rem;

    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.2rem 0 0.3rem var(--tree-indent);
    border-left: 1px solid var(--tree-line);
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.footer-hp__servicios-nested-li {
    margin: 0;
    padding: 0.28rem 0;
}

.site-footer.site-footer--brand .footer-hp__servicios-nested-li .footer-hp__servicios-link {
    font-family: var(--font-secondary);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Full wrap width: brand row (logo + lockup) */
.footer-hp__head-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md) var(--gap-xl);
    width: 100%;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.footer-hp__brandrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-lg);
    margin: 0;
    min-width: 0;
}

@media (max-width: 768px) {
    .footer-hp__head-rail {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-hp__brandrow {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-sm);
        min-width: 0;
    }

    .site-footer.site-footer--brand .footer-hp__iso {
        max-height: clamp(2.85rem, 8vw, 4rem);
        max-width: min(4rem, 22vw);
    }

    .site-footer.site-footer--brand .footer-hp__lockup.nav-brandlockup {
        min-width: 0;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .site-footer.site-footer--brand .footer-hp__lockup .nav-brandlockup__name {
        font-size: clamp(1.25rem, 3.8vw, 1.75rem);
    }

    .site-footer.site-footer--brand .footer-hp__lockup .nav-brandlockup__tagline {
        font-size: clamp(0.78rem, 2.2vw, 1.05rem);
        line-height: 1.35;
        color: var(--color-muted);
    }
}

/* Footer mega marquee — bottom band: viewport full-bleed, no side/bottom pad; clip wide track (no scrollbars) */
.footer-hp__mega-stage {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
}

/* Full-bleed from .wrap: never use 100vw here — it is wider than the layout viewport when a vertical scrollbar exists and causes horizontal document scroll. */
.site-footer.site-footer--brand .footer-hp__mega-stage--bottom {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: clamp(0.75rem, 2vw, 1.25rem) 0 0;
    border: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

@supports (width: 100svw) {
    .site-footer.site-footer--brand .footer-hp__mega-stage--bottom {
        width: 100svw;
        margin-left: calc(50% - 50svw);
    }
}

.site-footer.site-footer--brand .footer-hp__mega-stage--bottom .hero-home-mega-rail__viewport {
    overflow-x: hidden;
    overflow-y: hidden;
}

.site-footer.site-footer--brand .footer-hp__mega-rail--dramatic.hero-home-mega-rail {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    font-family: var(--font-primary);
    font-size: clamp(3.1rem, 9.5vw + 1.15rem, 9.25rem);
    font-weight: var(--weight-bold);
    letter-spacing: 0.035em;
    line-height: 0.9;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 5.5%, transparent);
}

.site-footer.site-footer--brand .footer-hp__mega-stage .footer-hp__mega-rail-chunk.hero-home-mega-rail__chunk {
    gap: clamp(1.35rem, 3.2vw, 2.45rem);
    padding-inline-end: clamp(1.15rem, 2.8vw, 2.1rem);
    align-items: center;
}

.site-footer.site-footer--brand .footer-hp__mega-rail--dramatic .hero-home-mega-rail__sep {
    color: color-mix(in srgb, var(--color-text) 4%, transparent);
    opacity: 1;
    font-weight: var(--weight-medium);
}

.site-footer.site-footer--brand .footer-hp__mega-stage .footer-hp__mega-rail-track.hero-home-mega-rail__track {
    direction: ltr;
    animation: footer-hp-mega-rail-scroll-ltr 260s linear infinite;
}

.site-footer.site-footer--brand .footer-hp__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.site-footer.site-footer--brand .footer-hp__iso {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(3.85rem, 10vw, 6rem);
    max-width: min(6rem, 32vw);
    object-fit: contain;
    border: 0;
    outline: none;
    box-shadow: none;
}

.site-footer.site-footer--brand .footer-hp__lockup.nav-brandlockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.08;
    color: var(--color-text);
    text-decoration: none;
}

.site-footer.site-footer--brand .footer-hp__lockup .nav-brandlockup__name {
    font-family: var(--font-primary);
    font-size: clamp(1.85rem, 1.5vw + 1.35rem, 2.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-brand-blue);
}

.site-footer.site-footer--brand .footer-hp__lockup .nav-brandlockup__tagline {
    margin-top: 0.2rem;
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 0.9vw + 0.82rem, 1.45rem);
    font-weight: var(--weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--color-muted);
}

/* Mobile: footer lockup must override the base align-items (declared below earlier media rules). */
@media (max-width: 768px) {
    .site-footer.site-footer--brand .footer-hp__lockup.nav-brandlockup {
        align-items: center;
        text-align: center;
    }
}

.footer-hp__tagline {
    margin: 0 0 var(--gap-lg);
    max-width: 42ch;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.footer-hp__fine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    color: var(--color-dim);
}

.footer-hp__fine a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-hp__label {
    display: block;
    margin-bottom: var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dim);
}

.footer-hp__text {
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--color-text);
}

.footer-hp__contact-link {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

.footer-hp__contact-link:hover {
    color: var(--color-accent);
}

.footer-hp__contact-sep {
    color: var(--color-dim);
}

.footer-hp__social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.65rem;
}

.footer-hp__social-link {
    font-family: var(--font-secondary);
    font-size: 1.35rem;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-hp__social-link:hover {
    color: var(--color-accent);
}

/* Footer — Dirección / Contacto / WhatsApp / redes: bento cards (same system as .home-service-bento) */
.site-footer.site-footer--brand .footer-hp__info-bento.home-service-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
    width: 100%;
}

.site-footer.site-footer--brand .footer-hp__info-bento .home-service-card {
    padding: var(--gap-sm);
    background: var(--color-row);
}

.site-footer.site-footer--brand .footer-hp__info-bento .home-service-card__title {
    font-size: var(--text-sm);
    margin-bottom: var(--gap-sm);
}

.site-footer.site-footer--brand .footer-hp__info-bento .home-service-card__text {
    font-size: 1.35rem;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card__extra {
    margin-top: var(--gap-xs);
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__contact-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__contact-stack .home-service-card__text {
    margin: 0;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__contact-message {
    margin-top: var(--gap-sm);
    margin-bottom: 0;
    font-size: var(--text-sm);
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__contact-textlink {
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__contact-textlink:hover {
    color: var(--color-text);
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social {
    background: var(--color-brand-blue);
    border-color: color-mix(in srgb, var(--color-brand-blue) 60%, var(--color-border) 40%);
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social::after {
    background-color: rgba(255, 255, 255, 0.22);
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .home-service-card__title {
    color: #fff;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .footer-hp__social-actions {
    margin-top: var(--gap-xs);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

/* .btn sets align-self:flex-start — undo so siblings in a row share one height */
.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .footer-hp__social-btn.btn {
    align-self: stretch;
    min-height: 2.75rem;
    width: 100%;
    justify-content: space-between;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .btn.btn--primary.btn--sm .btn__label {
    padding: 0.5rem 0.75rem;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .btn.btn--primary.btn--sm .btn__badge {
    width: 22px;
    height: 22px;
}

/* Full-width footer social buttons: keep arrow pinned right. */
.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .footer-hp__social-btn .btn__label {
    flex: 1;
    min-width: 0;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .footer-hp__social-btn .btn__badge {
    margin-left: auto;
}

.site-footer.site-footer--brand .footer-hp__info-bento .footer-hp__info-card--social .btn.btn--primary.btn--sm .btn__badge svg {
    width: 10px;
    height: 10px;
}

.footer-hp__block--nav {
    min-width: 0;
}

.footer-hp__info-nav-list,
.footer-hp__info-nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-hp__info-nav-list > .menu-item {
    margin: 0 0 var(--gap-sm);
    padding: 0;
}

.footer-hp__info-nav-list > .menu-item:last-child {
    margin-bottom: 0;
}

.site-footer.site-footer--brand .footer-hp__info-nav a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer.site-footer--brand .footer-hp__info-nav a:hover {
    color: var(--color-accent);
}

.footer-hp__info-nav-list > .menu-item > a {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.35rem);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.footer-hp__info-nav-list .sub-menu {
    margin: 0.35rem 0 0;
    padding: 0 0 0 var(--gap-md);
    border-left: 1px solid var(--color-border-inner);
}

.footer-hp__info-nav-list .sub-menu .menu-item {
    margin: 0 0 0.2rem;
    padding: 0;
}

.footer-hp__info-nav-list .sub-menu .menu-item:last-child {
    margin-bottom: 0;
}

.footer-hp__info-nav-list .sub-menu a {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-muted);
}

.footer-hp__info-nav-list .sub-menu .sub-menu {
    margin-top: 0.35rem;
    padding-left: var(--gap-sm);
    border-left-color: var(--color-border);
}

.footer-hp__info-nav-list .sub-menu .sub-menu a {
    font-size: 1.1rem;
    color: var(--color-dim);
}

.footer-hp__bottom {
    padding: var(--gap-md) 0 var(--gap-lg);
    border-top: 1px solid var(--color-border-inner);
}

.footer-hp__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap-md);
}

.footer-hp__copy {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    color: var(--color-dim);
}

.footer-hp__credit {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    color: var(--color-dim);
    text-align: right;
}

.footer-hp__credit-sep {
    display: inline;
    padding: 0 0.15em;
    color: var(--color-border);
    text-decoration: none;
    user-select: none;
}

.footer-hp__credit-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 960px) {
    .footer-hp__main-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .site-footer.site-footer--brand .footer-hp__info-bento.home-service-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-hp__servicios-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .footer-hp__servicios-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-hp__servicios-col-kicker {
        font-size: clamp(1.12rem, 3.2vw, 1.32rem);
    }

    .site-footer.site-footer--brand .footer-hp__servicios-link {
        font-size: clamp(1.22rem, 3.6vw, 1.48rem);
    }
}

/* Size variants */
/* Size variants — only affect padding/font, not badge size */
.btn--sm {
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    font-size: var(--text-xs);
    min-height: 2.75rem;
}
.btn--sm .btn__badge { width: 24px; height: 24px; }
.btn--sm .btn__badge svg { width: 11px; height: 11px; }

.btn--lg {
    padding: 0.65rem 0.65rem 0.65rem 1.8rem;
    font-size: var(--text-base);
}
.btn--lg .btn__badge { width: 36px; height: 36px; }
.btn--lg .btn__badge svg { width: 17px; height: 17px; }

/* Ghost — transparent bg, no visible border */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border: 1.5px solid currentColor;
    padding: 0 1.4rem;
}

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


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

.wa-float {
    position: fixed;
    bottom: var(--gap-md);
    left: var(--gap-md);
    right: auto;
    z-index: 900;
    width: 5.6rem;
    height: 5.6rem;
    background-color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-btn-text);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-blue) 32%, transparent);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

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

.wa-float:hover {
    background-color: var(--color-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand-blue) 40%, transparent);
}

/* Hover-only label to the right of the FAB (hidden from layout + screen when not hovered) */
.wa-float::after {
    content: 'Contáctanos por WhatsApp';
    position: absolute;
    left: calc(100% + 0.8rem);
    right: auto;
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-text) 8%, transparent);
    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;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.wa-float:hover::after,
.wa-float:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

@media (max-width: 768px) {
    .wa-float {
        bottom: 2rem;
        left: 2rem;
        right: auto;
        width: 5rem;
        height: 5rem;
    }

    .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-elevated);
    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.corner-dots {
    --corner-dots-inset: 14px;
}

.page-hero__deco {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5rem;
    height: 5rem;
    color: var(--color-accent);
    pointer-events: none;
    display: none; /* deprecated: use .corner-dots on containers instead */
}

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

.page-hero h1 {
    color: var(--color-text);
    font-size: clamp(3rem, 4vw, 5rem);
    margin-bottom: var(--gap-md);
}

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

.page-hero__lead {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.7;
    max-width: 62ch;
}

/* Page hero with media — 2-col split (content left, image right) */
.page-hero--with-media .page-hero__inner {
    display: grid;
    grid-template-columns: 1fr 40rem;
    gap: var(--gap-xxl);
    align-items: center;
    width: 100%;
}

.page-hero--with-media .page-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.page-hero__media {
    height: 42rem;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center top;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .page-hero--with-media .page-hero__inner {
        grid-template-columns: 1fr 30rem;
        gap: var(--gap-xl);
    }

    .page-hero__media {
        height: 32rem;
    }
}

@media (max-width: 768px) {
    .page-hero--with-media .page-hero__inner {
        grid-template-columns: 1fr;
    }

    .page-hero__media {
        display: none;
    }
}


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

.page-hero__actions p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    margin: 0;
    align-self: center;
}

.page-hero__callouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--gap-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--gap-md);
    margin-top: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

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

.page-hero__callouts .page-hero__callout:only-child {
    grid-column: 1 / -1;
}

.page-hero__callout {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: var(--gap-md);
}

.page-hero__callout:first-child {
    border-left: none;
    padding-left: 0;
}

.page-hero__callout p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0;
}

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

    .page-hero__callout {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: var(--gap-md);
    }

    .page-hero__callout:first-child {
        border-top: none;
        padding-top: 0;
    }
}


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

.archive-wrap {
    max-width: 120rem;
    margin: 0 auto;
    padding: var(--gap-xl) 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);
    display: flex;
    align-items: center;
    justify-content: center;
}

.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 {
    min-height: 0;
    font-size: 1.5rem;
    color: var(--color-muted);
    line-height: 1.7;
    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);
}


/* ── Category / Taxonomy Archive ────────────────────────────────────────── */

/* Post list */
.cat-posts {
    border: 1px solid var(--color-border-inner);
    overflow: hidden;
}

.cat-post {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--gap-md);
    padding: var(--gap-md);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-inner);
    transition: background-color 0.2s ease;
    align-items: center;
}

.cat-post:last-child {
    border-bottom: none;
}

.cat-post:hover {
    background-color: var(--color-card-bg);
}

.cat-post__thumb {
    width: 14rem;
    height: 10rem;
    object-fit: cover;
    display: block;
}

.cat-post__thumb-placeholder {
    width: 14rem;
    height: 10rem;
    background-color: var(--color-card-bg);
}

.cat-post__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.cat-post__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.cat-post__tag {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.cat-post__sep {
    color: var(--color-dim);
    font-size: 1rem;
}

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

.cat-post__title {
    font-family: var(--font-primary);
    font-size: clamp(1.7rem, 2vw, 2.2rem);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
    transition: color 0.2s ease;
}

.cat-post:hover .cat-post__title {
    color: var(--color-accent);
}

@media (max-width: 640px) {
    .cat-post {
        grid-template-columns: 1fr;
    }

    .cat-post__thumb,
    .cat-post__thumb-placeholder {
        width: 100%;
        height: 18rem;
    }
}


/* ── Blog Archive (home.php) ─────────────────────────────────────────────── */

/* Category filter buttons — inside dark hero */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--gap-md);
}

.blog-filter__btn {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.55rem 1.4rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-filter__btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.blog-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-bottom: var(--gap-lg);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-border);
}

.blog-section__title {
    display: block;
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
}

.blog-section__all {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.blog-section__all:hover {
    opacity: 0.7;
}

/* Split layout: 40% featured | 60% rows */
.blog-split {
    display: grid;
    grid-template-columns: 40% 1fr;
    min-height: 38rem;
    border: 1px solid var(--color-border-inner);
    overflow: hidden;
}

/* Featured block — 40% */
.blog-split__featured {
    position: relative;
    overflow: hidden;
    background-color: var(--color-elevated);
}

/* Gradient overlay: heavy at bottom for text legibility */
.blog-split__featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.3) 55%,
        transparent 100%
    );
    z-index: 1;
}

.blog-split__featured-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-split__featured:hover .blog-split__featured-bg {
    transform: scale(1.04);
}

/* Anchor fills full featured area, content anchored to bottom */
.blog-split__featured-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--gap-md);
    text-decoration: none;
}

.blog-split__fg-meta {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-xs);
}

.blog-split__tag {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.blog-split__meta-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1rem;
    line-height: 1;
}

.blog-split__date {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.blog-split__title {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-tight);
    color: var(--color-btn-text);
    margin: 0;
    transition: color 0.2s ease;
}

.blog-split__featured:hover .blog-split__title {
    color: var(--color-accent);
}

/* Rows column — 60% */
.blog-split__rows {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border-inner);
}

/* Each row is a full-width anchor */
.blog-split__row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-inner);
    transition: background-color 0.2s ease;
    flex: 1;
    align-items: center;
    min-height: 0;
}

.blog-split__row:last-child {
    border-bottom: none;
}

.blog-split__row:hover {
    background-color: var(--color-card-bg);
}

.blog-split__thumb {
    width: 9rem;
    height: 9rem;
    object-fit: cover;
    display: block;
}

.blog-split__thumb-placeholder {
    width: 9rem;
    height: 9rem;
    background-color: var(--color-card-bg);
}

.blog-split__row-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

.blog-split__row-meta {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.blog-split__row-tag {
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.blog-split__row-date {
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    color: var(--color-dim);
}

.blog-split__row-title {
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
    transition: color 0.2s ease;
}

.blog-split__row:hover .blog-split__row-title {
    color: var(--color-accent);
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .blog-split__featured {
        min-height: 30rem;
    }

    .blog-split__rows {
        border-left: none;
        border-top: 1px solid var(--color-border-inner);
    }
}

@media (max-width: 640px) {
    .blog-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-xs);
    }

    .blog-split__row {
        grid-template-columns: 7rem 1fr;
    }

    .blog-split__thumb,
    .blog-split__thumb-placeholder {
        width: 7rem;
        height: 7rem;
    }
}


/* ── 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: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.single-breadcrumbs span[aria-hidden] {
    color: rgba(255, 255, 255, 0.25);
}

.single-breadcrumbs span[aria-current] {
    color: rgba(255, 255, 255, 0.35);
}

/* 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, 3.6rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
    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;
    min-width: 16rem;
}

.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: left;
    padding: var(--gap-lg) var(--gap-md);
    border-radius: var(--radius);
}

.sec--dark .cta-band .lead {
    color: rgba(255, 255, 255, 0.75);
}

.sec--dark .cta-band .cta-band__body {
    color: rgba(255, 255, 255, 0.75);
}

.cta-band__heading {
    font-family: var(--font-primary);
    font-size: 3.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin-bottom: var(--gap-md);
}

.cta-band__body {
    font-size: var(--text-sm);
    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: flex-start;
    flex-wrap: wrap;
}

/* Home CTA — bottom-right corner mark (normal size, flush to section edges; reads like BG, behind copy) */
.home-cta-sec {
    position: relative;
    overflow: hidden;
    /* ~2× default .sec vertical air (overrides .sec padding for this block only) */
    padding-top: calc(var(--section-pad-b) * 2);
    padding-bottom: calc(var(--section-pad-b) * 2);
}

.home-cta-sec > .wrap {
    position: relative;
    z-index: 1;
}

.home-cta-sec .cta-band {
    /* Rail: align copy with .wrap / header; vertical air comes from .home-cta-sec only */
    padding-inline: 0;
    padding-block: 0;
}

.home-cta-sec .cta-band__body {
    margin-inline: 0;
    max-width: min(62ch, 100%);
}

.home-cta-sec .cta-band__heading {
    max-width: clamp(20rem, 92vw, 56rem);
}

/* Ribbon asset (200×334) — small / medium, flush top, inset from the right */
.home-cta-sec__band {
    position: absolute;
    top: 0;
    right: var(--gap-xl);
    z-index: 0;
    display: block;
    width: min(calc(var(--gap-sm) * 5), 22vw);
    height: auto;
    aspect-ratio: 200 / 334;
    object-fit: contain;
    pointer-events: none;
}

/* Service mid-CTA — optional blue block when no image (legacy; prefer homepage ribbon img) */
.home-cta-sec__band.home-cta-sec__band--placeholder {
    object-fit: unset;
    background-color: var(--color-brand-blue);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .home-cta-sec__band {
        top: 0;
        right: var(--gap-lg);
        width: min(calc(var(--gap-sm) * 3.5), 26vw);
    }
}

/* Pilar after dark CTA: stronger top air (dark padding reads as CTA, not inter-section gap) */
.home-fusion .sec.home-pilar-sec.home-que-es {
    padding-top: var(--section-seam);
}

/* Pilar — pilares: intro + FAQ accordion (same behaviour as .faq-list elsewhere) */
.home-pilar-pilares-sec .sec-heading h3 {
    margin-bottom: var(--gap-sm);
}

.home-pilar-pilares-faq__intro {
    margin-bottom: var(--gap-xl);
    max-width: min(100%, var(--max-width-narrow));
}

.home-pilar-pilares-faq__intro .lead {
    max-width: 72ch;
}

.home-pilar-pilares-faq.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.home-pilar-pilares-faq__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--gap-sm);
    row-gap: 0;
    align-items: center;
    min-width: 0;
    /* Index square: viewport-based clamp only (JS must not tie it to wrapped question height). */
    --pilar-faq-header-px: clamp(3.35rem, 3.25rem + 1.5vw, 4.85rem);
}

/* Open row grows with answer; pin index to top so it does not float mid-content. */
.home-pilar-pilares-faq__row:has(.faq-item.is-open) {
    align-items: start;
}

.home-pilar-pilares-faq__index {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--pilar-faq-header-px);
    height: var(--pilar-faq-header-px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background-color: var(--color-btn-bg);
    color: #fff;
    font-family: var(--font-primary);
    font-size: clamp(1rem, calc(var(--pilar-faq-header-px) * 0.36), 1.85rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    user-select: none;
}

.home-pilar-pilares-faq__row .faq-item {
    min-width: 0;
    min-height: 0;
}

.home-pilar-pilares-faq__heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.home-pilar-pilares-faq .faq-question {
    position: relative;
    font-size: clamp(1.35rem, 0.9vw + 1.1rem, 1.85rem);
    padding: var(--gap-sm) var(--gap-md);
    padding-right: calc(var(--gap-sm) + 14px);
}

.home-pilar-pilares-faq .faq-question::after {
    right: var(--gap-sm);
}

.home-pilar-pilares-faq .faq-answer {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
}

.home-pilar-pilares-faq .faq-item.is-open .faq-answer {
    padding-bottom: var(--gap-sm);
    padding-top: var(--gap-sm);
}

.home-pilar-pilares-faq.faq-list .faq-answer > p {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Homepage — FAQ final (verbatim kicker; h3 + .faq-question accordion) */
.home-faq-sec__kicker {
    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: none;
    color: var(--color-accent);
}

.home-faq-sec .home-faq-sec__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.home-faq-sec .home-faq-sec__intro .lead {
    max-width: none;
}

/* ── Pilar guía extendida — narrow editorial; lists reuse .page-content (triangle bullets) ── */

.home-pilar-deep-sec .home-pilar-deep__stack {
    display: flex;
    flex-direction: column;
    gap: var(--section-seam);
}

.home-pilar-deep__block h3 {
    margin-bottom: var(--gap-sm);
}

/* Split blocks: wider gutter between media and copy; title → body uses larger step than default .home-pilar-deep__block h3 */
.home-pilar-deep__block--pymes-split .home-pilar-deep__pymes-copy > :is(h2, h3),
.home-pilar-deep__block--cuando-split .home-pilar-deep__cuando-copy > :is(h2, h3) {
    margin-bottom: var(--gap-lg);
}

.home-pilar-deep__block--cuando-split .home-pilar-deep__cuando-copy > p + p {
    margin-top: var(--gap-md);
}

.home-pilar-deep__block ul {
    margin-top: var(--gap-xs);
}

/* Gestión pymes + Asesoría cuándo — same 50 / 50: photo (left) + lede copy (right) */
.home-pilar-deep__block--pymes-split,
.home-pilar-deep__block--cuando-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap-xxl);
    align-items: center;
    min-width: 0;
}

.home-pilar-deep__block--pymes-split .home-pilar-deep__pymes-media,
.home-pilar-deep__block--cuando-split .home-pilar-deep__cuando-media {
    min-width: 0;
}

.home-pilar-deep__block--pymes-split .home-pilar-deep__pymes-copy,
.home-pilar-deep__block--cuando-split .home-pilar-deep__cuando-copy {
    min-width: 0;
    max-width: min(100%, 48ch);
}

.home-pilar-deep__pymes-figure,
.home-pilar-deep__cuando-figure {
    margin: 0;
    padding: 0;
}

.home-pilar-deep__pymes-media img,
.home-pilar-deep__cuando-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-inner);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .home-pilar-deep__block--pymes-split,
    .home-pilar-deep__block--cuando-split {
        grid-template-columns: 1fr;
        row-gap: var(--gap-xl);
    }
}

/* Cuándo split + signos: same vertical rhythm as pymes-split → sectores (stack uses --section-seam between siblings). */
.home-pilar-deep__cuando {
    display: flex;
    flex-direction: column;
    gap: var(--section-seam);
    min-width: 0;
}

/* Sectores + signos: centered kicker + tighter .home-por-que__point cards, 2 cols — no .page-content triangles */
.home-pilar-deep__sectores,
.home-pilar-deep__signos {
    padding-top: var(--gap-md);
}

.home-pilar-deep__sectores-intro {
    margin: 0 auto var(--gap-md) auto;
    max-width: min(100%, 88ch);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: var(--color-muted);
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.home-pilar-deep__sectores .home-pilar-deep__sectores-grid.home-por-que__points,
.home-pilar-deep__signos .home-pilar-deep__sectores-grid.home-por-que__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-xxs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-pilar-deep__sectores .home-pilar-deep__sectores-grid > li.home-por-que__point,
.home-pilar-deep__signos .home-pilar-deep__sectores-grid > li.home-por-que__point {
    padding: var(--gap-xxs);
    gap: var(--gap-xxs);
    min-height: 100%;
}

/* Service landings only (homepage keeps .page-content li margin on sector/signos cells) */
.svc-ingreso-page .home-pilar-deep__sectores .home-pilar-deep__sectores-grid > li.home-por-que__point,
.svc-ingreso-page .home-pilar-deep__signos .home-pilar-deep__sectores-grid > li.home-por-que__point {
    margin-bottom: 0;
}

.home-pilar-deep__sectores .home-por-que__point-logo,
.home-pilar-deep__signos .home-por-que__point-logo {
    margin-left: var(--gap-xxs);
    flex-shrink: 0;
}

.home-pilar-deep__sectores.page-content ul.home-pilar-deep__sectores-grid > li.home-por-que__point::before,
.home-pilar-deep__signos.page-content ul.home-pilar-deep__sectores-grid > li.home-por-que__point::before {
    content: none;
    display: none;
}

.home-pilar-deep__sectores .home-por-que__point .home-por-que__point-title,
.home-pilar-deep__signos .home-por-que__point .home-por-que__point-title {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .home-pilar-deep__sectores .home-pilar-deep__sectores-grid.home-por-que__points,
    .home-pilar-deep__signos .home-pilar-deep__sectores-grid.home-por-que__points {
        grid-template-columns: 1fr;
    }
}

/* Gestión Pymes online — one shared content measure (title, intro, mark, coverage + cities) */
.home-fusion .home-pilar-online-sec {
    --home-pilar-online-measure: min(100%, 78ch);
}

/* Gestión Pymes online — photo + translucent orange (both visible; --home-pilar-online-bg-img from front-page) */
.home-fusion .home-pilar-online-sec.sec--accent {
    --home-pilar-online-bg-img: none;
    background-color: var(--color-accent);
    background-image:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--color-accent) 68%, transparent) 0%,
            color-mix(in srgb, var(--color-accent) 90%, transparent) 48%,
            color-mix(in srgb, var(--color-accent) 78%, transparent) 100%
        ),
        var(--home-pilar-online-bg-img);
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding-top: calc(var(--section-seam) + var(--gap-lg));
    padding-bottom: calc(var(--section-seam) + var(--gap-lg));
}

.home-fusion .home-pilar-online-sec.sec--accent .home-pilar-online__city {
    color: var(--color-btn-text);
}

/* Orange SVG markers → white so they read on --color-accent */
.home-fusion .home-pilar-online-sec.sec--accent .home-pilar-online__city::before {
    filter: brightness(0) invert(1);
}

.home-pilar-online h3 {
    margin-bottom: var(--gap-sm);
}

.home-pilar-online {
    padding-left: 0;
    border-left: none;
}

.home-fusion .home-pilar-online-sec .home-pilar-online {
    text-align: center;
}

.home-fusion .home-pilar-online-sec .home-pilar-online > h3,
.home-fusion .home-pilar-online-sec .home-pilar-online > p.p0:first-of-type,
.home-fusion .home-pilar-online-sec .home-pilar-online > .home-pilar-online__cta,
.home-fusion .home-pilar-online-sec .home-pilar-online__mark,
.home-fusion .home-pilar-online-sec .home-pilar-online__coverage {
    max-width: var(--home-pilar-online-measure);
    margin-inline: auto;
}

.home-fusion .home-pilar-online-sec .home-pilar-online > .home-pilar-online__cta {
    margin-top: var(--gap-md);
}

.home-fusion .home-pilar-online-sec .home-pilar-online:has(.home-pilar-online__cta) .home-pilar-online__mark {
    margin-top: calc(var(--section-seam) + var(--gap-md));
}

.home-fusion .home-pilar-online-sec .home-pilar-online__row {
    width: 100%;
    align-items: stretch;
    text-align: center;
}

.home-fusion .home-pilar-online-sec .home-pilar-online__lead {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    text-align: center;
}

.home-fusion .home-pilar-online-sec .home-pilar-online__row > .home-pilar-online__cities {
    max-width: none;
    margin-inline: 0;
}

.home-pilar-online__mark {
    --home-pilar-online-mark-air: calc(var(--section-seam) + var(--gap-xxl));
    margin-top: var(--home-pilar-online-mark-air);
    margin-bottom: var(--home-pilar-online-mark-air);
    margin-inline: auto;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    text-align: center;
}

.home-pilar-online__mark img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(11rem, 26vw);
    max-height: min(11rem, 26vw);
    object-fit: contain;
    border-radius: 0;
    margin-inline: auto;
}

/* Wins over generic .home-pilar-online__mark { max-width: 100% } so measure matches title + copy */
.home-fusion .home-pilar-online-sec .home-pilar-online__mark {
    max-width: var(--home-pilar-online-measure);
}

.home-fusion .home-pilar-online-sec .home-pilar-online__coverage {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    box-sizing: border-box;
}

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

.home-pilar-online__lead {
    max-width: min(100%, 52ch);
    margin-bottom: 0;
    text-align: left;
}

/* Two tight city columns + closing line in a third column (outro bottom-aligned to row) */
.home-pilar-online__cities {
    --home-coverage-marker: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(11rem, 1.2fr);
    row-gap: var(--gap-md);
    column-gap: var(--gap-xxs);
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    text-align: left;
    align-items: stretch;
}

.home-pilar-online__cities-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-width: 0;
}

.home-pilar-online__cities-outro {
    margin: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    min-width: 0;
    color: var(--color-text);
}

.home-pilar-online-sec.sec--accent .home-pilar-online__cities-outro {
    color: var(--color-btn-text);
}

@media (max-width: 720px) {
    .home-pilar-online__cities {
        grid-template-columns: 1fr;
    }

    .home-pilar-online__cities-outro {
        align-self: stretch;
        display: block;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .home-pilar-online__cities {
        grid-template-columns: 1fr;
    }
}

.home-pilar-online__city {
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    padding-left: calc(clamp(2.6rem, 5.5vw, 4rem) + var(--gap-xxs));
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--color-text);
    box-sizing: border-box;
}

.home-pilar-online__city::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: clamp(2.6rem, 5.5vw, 4rem);
    height: clamp(1.45rem, 3vw, 2.2rem);
    transform: translateY(-50%);
    background-image: var(--home-coverage-marker, none);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    pointer-events: none;
}

/* ── 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-lg);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bento__item:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.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: 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 {
    /* IMPORTANT: In this project, "full-bleed" is intentionally SAFE.
       It must never create horizontal overflow or break out of its parent. */
    width: 100%;
    max-width: 100%;
    margin: 0;
    left: auto;
    right: auto;
    transform: none;
}


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

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


/* ═══════════════════════════════════════════════════════════════════════════
   Home — fusion reference layout (HappyRobot metrics + New Genre type/marquee)
   Scoped under .home-fusion — no box-shadows (TRUTHS.md)
   ═══════════════════════════════════════════════════════════════════════════ */

.home-fusion .hero--fusion {
    min-height: min(92vh, 90rem);
    align-items: flex-end;
    padding-bottom: var(--gap-xxl);
}

.home-fusion .hero__fusion-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 5.6rem 5.6rem;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* Homepage outer rail: align all .wrap sections with header/top-bar rail */
.home-fusion .wrap {
    max-width: 136rem;
}

.home-fusion .wrap--hero-fusion {
    max-width: 136rem;
    width: 100%;
}

.home-fusion .hero__content--fusion {
    max-width: 96rem;
    gap: var(--gap-lg);
}

.home-fusion .hero__meta {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}

.home-fusion .hero__content--fusion h1 {
    font-size: clamp(4.2rem, 8vw, 8.6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: var(--weight-bold);
    max-width: 20ch;
    color: var(--color-btn-text);
    margin: 0;
}

.home-fusion .hero__display {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 38ch;
}

.home-fusion .hero__lead--fusion {
    font-size: clamp(1.6rem, 1.8vw, 1.9rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
}

.home-fusion .hero--fusion .btn--ghost {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.38);
}

.home-fusion .hero--fusion .btn--ghost:hover {
    color: var(--color-brand-blue);
    background-color: #fff;
    border-color: #fff;
}

.home-fusion .btn-row--fusion {
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-top: var(--gap-xs);
}

/* Marquee */
.home-marquee {
    background: var(--color-brand-blue);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: var(--gap-sm);
    overflow: hidden;
}

.home-marquee__inner {
    max-width: 100%;
}

.home-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-md);
    width: max-content;
    animation: homeMarquee 38s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .home-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

.home-marquee__item {
    flex: 0 0 auto;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.home-marquee__item::after {
    content: "·";
    margin-left: var(--gap-md);
    color: rgba(255, 255, 255, 0.25);
}

/* Servicios — orange field; intro copy only = light type (cards below keep theme dark text) */
.home-fusion .home-services-sec {
    background-color: var(--color-accent);
}

.home-fusion .home-services-sec .home-services-intro__copy {
    color: var(--color-btn-text);
}

.home-fusion .home-services-sec .home-services-intro__copy .label {
    color: rgba(255, 255, 255, 0.78);
}

.home-fusion .home-services-sec .home-services-intro__copy .sec-heading h2,
.home-fusion .home-services-sec .home-services-intro__copy #servicios-title {
    color: var(--color-btn-text);
}

.home-fusion .home-services-sec .home-services-intro__copy .lead {
    color: rgba(255, 255, 255, 0.9);
}

/* Servicios intro — copy left; white mark small, top-right (narrow column = max-content) */
.home-services-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    column-gap: var(--gap-xxl);
    align-items: start;
    margin-bottom: var(--gap-xl);
    min-width: 0;
}

.home-services-intro__copy,
.home-services-intro__media {
    min-width: 0;
}

.home-services-intro__media {
    display: block;
    align-self: start;
    justify-self: end;
    width: fit-content;
    max-width: 100%;
    /* ~below “Nuestros servicios” label so mark lines up with main H2 (see layout ref) */
    margin-top: clamp(1.4rem, 2.8vw, 2.6rem);
    margin-right: var(--gap-xxs);
}

.home-services-sec .home-services-intro .sec-heading {
    margin-bottom: 0;
}

/* Servicios — H2 line measure (same as earlier layout) */
.home-services-sec #servicios-title {
    max-width: 40%;
    box-sizing: border-box;
}

.home-services-intro__figure {
    margin: 0;
    padding: 0;
    display: block;
    width: fit-content;
    max-width: 100%;
}

.home-services-intro__media img {
    display: block;
    width: auto;
    height: auto;
    /* Corner watermark scale (~red reference): cap box so it cannot grow with column */
    max-width: min(8.8rem, 18vw);
    max-height: min(8.8rem, 18vw);
    object-fit: contain;
    border-radius: 0;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .home-services-intro {
        grid-template-columns: 1fr;
        row-gap: var(--gap-lg);
    }

    .home-services-intro__media {
        justify-self: center;
        margin-top: 0;
        margin-right: 0;
    }

    .home-services-intro__figure {
        margin-left: auto;
        margin-right: auto;
    }

    .home-services-intro__media img {
        max-width: min(7.5rem, 22vw);
        max-height: min(7.5rem, 22vw);
    }
}

/* Gestión (home) — orange band + framed intro card (service-card scale, corner dots) */
.home-gestion-sec {
    padding-top: 0;
    padding-bottom: 0;
}

.home-gestion-intro-band {
    background-color: var(--color-accent);
    padding-top: var(--section-pad-b);
    padding-bottom: var(--section-pad-b);
}

/* Oversized service-card frame: white surface + corner dots (global .corner-dots bg) */
.home-gestion-intro-card {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.75rem);
    padding-inline: clamp(1.75rem, 4vw, 3.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg);
}

.home-gestion-intro-card.corner-dots {
    --corner-dots-inset: clamp(14px, 2vw, 20px);
    --corner-dots-color: var(--color-border-inner);
}

.home-gestion-intro-band .sec-heading {
    margin-bottom: 0;
}

.home-gestion-intro-band #gestion-empresarial {
    max-width: min(56rem, 100%);
    margin-inline: auto;
}

.home-gestion-intro-band .lead {
    max-width: 60ch;
    margin-inline: auto;
}

.home-gestion-proceso {
    background-color: var(--color-card-bg);
    /* Symmetric vertical rhythm: top pad, por-que→proceso gap, bottom pad all use one section unit */
    padding-top: var(--section-pad-b);
    padding-bottom: var(--section-pad-b);
}

/* Proceso de trabajo (home) — 4-col bento: photo | col | col | col */
.home-proceso {
    margin-top: 0;
}

.home-proceso .sec-heading {
    margin-bottom: var(--gap-lg);
}

.home-proceso .sec-heading h2 {
    max-width: min(54rem, 100%);
}

.home-proceso-bento.bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(min-content, auto);
    gap: var(--gap-sm);
    align-items: stretch;
}

.home-proceso-bento__photo.bento__item {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: min(26rem, 48vw);
}

/* Override .bento--numbered .bento__item padding-top on the photo cell only */
.home-proceso-bento.bento--numbered .home-proceso-bento__photo.bento__item {
    padding-top: 0;
}

.home-proceso-bento__photo-img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-proceso-bento .bento__item:not(.home-proceso-bento__photo) {
    min-height: 0;
    padding: calc(var(--gap-sm) + 0.35rem) var(--gap-sm) var(--gap-sm);
}

.home-proceso-bento.bento--numbered .bento__item:not(.home-proceso-bento__photo) {
    padding-top: calc(var(--gap-md) + 0.1rem);
}

.home-proceso-bento .bento__step {
    top: 0.65rem;
    right: var(--gap-xs);
    font-size: 1.05rem;
}

.home-proceso-bento__title {
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    line-height: 1.28;
    margin: 0 0 0.35rem;
    padding-right: 2.5rem;
}

.home-proceso-bento .text-muted {
    font-size: 1.35rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .home-proceso-bento.bento {
        grid-template-columns: 1fr;
    }

    .home-proceso-bento__photo.bento__item {
        min-height: min(22rem, 55vw);
    }

    .home-proceso-bento__title {
        padding-right: 2.75rem;
    }

    .home-proceso-bento .bento__item:not(.home-proceso-bento__photo) {
        padding: calc(var(--gap-sm) + 0.35rem) var(--gap-md) var(--gap-sm);
    }

    .home-proceso-bento.bento--numbered .bento__item:not(.home-proceso-bento__photo) {
        padding-top: calc(var(--gap-md) + 0.15rem);
    }
}

/* Por qué elegirnos — split intro + stacked reason cards (above proceso, home gestión band) */
.home-por-que {
    padding-bottom: var(--section-pad-b);
    margin-bottom: 0;
}

.home-por-que__layout {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: clamp(var(--gap-lg), 4vw, var(--gap-xxl));
    align-items: start;
}

.home-por-que__intro {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    text-align: left;
}

.home-por-que__intro .label {
    align-self: flex-start;
}

.home-por-que__intro #por-que-elegir-title {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2.4rem, 3.2vw, 3.4rem);
    line-height: 1.12;
}

.home-por-que__intro .lead {
    max-width: 36ch;
    margin: 0;
    margin-top: var(--gap-xs);
}

.home-por-que__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.home-por-que__point {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-inner);
    background-color: var(--color-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Neutralize global .page-content list styling on these cards (triangles + extra spacing). */
.home-por-que__points > .home-por-que__point {
    margin-bottom: 0;
    padding-left: var(--gap-sm);
}

.home-por-que__points > .home-por-que__point::before {
    content: none;
    display: none;
}

@media (max-width: 560px) {
    .home-por-que__point {
        padding-block: 0.85rem;
    }
}

.home-por-que__point-logo {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    object-position: center;
}

.home-por-que__point-text {
    flex: 1;
    min-width: 0;
}

/* Contribuyentes (service pages only): big light step number behind each point */
.svc-ingreso-page #contribuyentes .home-por-que__points,
.svc-ingreso-page #para-que-pymes .home-por-que__points {
    counter-reset: contrib-step;
}

.svc-ingreso-page #contribuyentes .home-por-que__points > .home-por-que__point,
.svc-ingreso-page #para-que-pymes .home-por-que__points > .home-por-que__point {
    position: relative;
    overflow: hidden;
}

.svc-ingreso-page #contribuyentes .home-por-que__points > .home-por-que__point::before,
.svc-ingreso-page #para-que-pymes .home-por-que__points > .home-por-que__point::before {
    counter-increment: contrib-step;
    content: counter(contrib-step);
    position: absolute;
    right: 1rem;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    font-size: clamp(4.2rem, 4.2vw, 6.2rem);
    line-height: 1;
    color: color-mix(in srgb, var(--color-text) 7%, transparent);
    pointer-events: none;
    z-index: 0;
}

.svc-ingreso-page #contribuyentes .home-por-que__point-logo,
.svc-ingreso-page #contribuyentes .home-por-que__point-text,
.svc-ingreso-page #para-que-pymes .home-por-que__point-logo,
.svc-ingreso-page #para-que-pymes .home-por-que__point-text {
    position: relative;
    z-index: 1;
}

/* Reserve space so copy never overlaps the big step number */
.svc-ingreso-page #contribuyentes .home-por-que__point-text,
.svc-ingreso-page #para-que-pymes .home-por-que__point-text {
    padding-right: clamp(4.8rem, 6vw, 6.8rem);
}

/* Must beat .wrap--narrow h3 { margin-bottom: var(--gap-xs) } (higher specificity on h3 alone) */
.home-por-que__point .home-por-que__point-title {
    display: block;
    margin: 0 0 0.8rem;
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: 1.35rem;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--color-text);
}

.home-por-que__point-body {
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.48;
    color: var(--color-muted);
}

/* Second column: stacked point cards + optional note (e.g. ingreso empresas) */
.home-por-que__points-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    min-width: 0;
}

.svc-ingreso-page .home-por-que__points-column {
    gap: var(--gap-xl);
}

/* Match .home-que-es.home-pilar-sec .home-pilar-asesoria-featured (guía pilar) */
.svc-ingreso-page .svc-ingreso-page__empresas-footnote {
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    text-align: left;
}

.svc-ingreso-page .svc-ingreso-page__empresas-footnote strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.home-por-que__points-column .svc-ingreso-page__empresas-actions {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .home-por-que__layout {
        grid-template-columns: 1fr;
    }

    .home-por-que__intro #por-que-elegir-title {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .home-services-sec #servicios-title {
        max-width: 100%;
    }

    .home-gestion-intro-card {
        padding-block: clamp(2.5rem, 7vw, 4.25rem);
        padding-inline: clamp(1.35rem, 4vw, 2rem);
    }
}

/* Servicios — card grid (no hero photo; tight rows) */
.home-service-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-md);
    align-items: stretch;
    width: 100%;
}

.home-service-bento .home-service-card {
    padding: var(--gap-sm);
}

.home-service-bento .home-service-card__title {
    margin-bottom: var(--gap-xxs);
}

.home-service-bento .home-service-card .btn.btn--dark.btn--sm {
    margin-top: var(--gap-xs);
}

@media (max-width: 768px) {
    .home-service-bento {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .home-service-bento {
        grid-template-columns: 1fr;
    }
}

.home-service-card {
    position: relative;
    padding: var(--gap-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    transition: border-color var(--transition-base);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-service-card:hover {
    border-color: var(--color-accent);
}

.home-service-card::after {
    content: "";
    position: absolute;
    top: var(--gap-sm);
    right: var(--gap-sm);
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--color-border-inner);
    pointer-events: none;
    z-index: 1;
}

.home-service-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--gap-xs);
    color: var(--color-text);
    line-height: 1.2;
}

.home-service-card__text {
    flex: 1;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0;
}

/* Dark CTA — .btn--dark + .btn--sm (compact vs header) */
.home-service-card .btn.btn--dark.btn--sm {
    margin-top: var(--gap-sm);
    max-width: 100%;
    height: auto;
    min-height: calc(24px + (var(--btn-frame) * 2));
    white-space: normal;
    align-items: center;
}

.home-service-card .btn.btn--dark.btn--sm .btn__label {
    white-space: normal;
    line-height: 1.25;
    padding: 0.5rem 0.85rem 0.5rem 0.95rem;
}

/* Bento — pasos visibles */
.bento--numbered .bento__item {
    position: relative;
    padding-top: var(--gap-lg);
}

.bento--numbered .bento__step {
    position: absolute;
    top: var(--gap-sm);
    right: var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    color: var(--color-accent);
}

.bento--numbered .bento__item--dark .bento__step {
    color: rgba(255, 255, 255, 0.85);
}

/* Header glass on immersive home — sin sombras */
body.layout-immersive:not(.header-hr) .site-header:not(.is-scrolled) {
    background: rgba(31, 32, 49, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
    .home-fusion .hero--fusion {
        min-height: auto;
        padding-bottom: var(--gap-xl);
    }

    .home-fusion .hero__content--fusion h1 {
        font-size: clamp(3.4rem, 10vw, 5.4rem);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Header — Happy Robot layout (https://www.happyrobot.ai/)
   White bar, grid-centered nav, pill primary CTA, optional text secondary.
   ═══════════════════════════════════════════════════════════════════════════ */

body.header-hr .site-header {
    top: 0;
    background-color: var(--color-bg);
    border-bottom: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.header-hr .site-header.is-scrolled {
    border-bottom-color: var(--color-border);
}

body.header-hr .site-header--hr .site-header__bar {
    width: 100%;
}

body.header-hr .site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-md);
    min-height: 6.4rem;
    width: 100%;
    max-width: 136rem;
    margin-inline: auto;
    padding-inline: var(--side-pad);
}

body.header-hr .site-header__brand {
    justify-self: start;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

body.header-hr .nav-brandlockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    transform: translateY(1px);
    text-decoration: none;
}

body.header-hr .nav-brandlockup__name {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-text);
}

body.header-hr .nav-brandlockup__tagline {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

@media (max-width: 900px) {
    body.header-hr .site-header__brand .nav-brandlockup__tagline {
        display: none;
    }
}

body.header-hr .site-header__nav {
    justify-self: stretch;
    z-index: 1;
}

body.header-hr .site-header__nav.nav-menu-wrap {
    justify-content: flex-end;
}

body.header-hr .site-header__actions {
    justify-self: end;
    z-index: 2;
}

/* Logo — HR uses compact mark */
body.header-hr .nav-logo {
    color: var(--color-text);
}

body.header-hr .nav-logo__text {
    font-size: 1.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
}

body.header-hr .site-header--hr .nav-logo > img.custom-logo,
body.header-hr .site-header--hr .custom-logo-link,
body.header-hr .site-header--hr .custom-logo-link img {
    display: block;
    height: 3.2rem;
    width: auto;
    max-height: 3.2rem;
}

/* Nav links — neutral gray, tight */
body.header-hr .nav-menu {
    gap: 0.4rem;
}

body.header-hr .nav-menu > .nav-item.has-dropdown > .nav-parent-wrap {
    border-radius: 0.6rem;
}

body.header-hr .nav-menu > .nav-item:not(.has-dropdown) > a.nav-link,
body.header-hr .nav-menu > .nav-item.has-dropdown > .nav-parent-wrap > a.nav-link {
    font-family: var(--font-secondary), system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
}

/* Bar hover: match global brand-blue pill — #fff survives dark --color-bg tokens */
body.header-hr .nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:hover,
body.header-hr .nav-menu > .nav-item:not(.has-dropdown) > a.nav-link:focus-visible,
body.header-hr .nav-menu > .nav-item:hover > .nav-parent-wrap > .nav-link,
body.header-hr .nav-menu > .nav-item.is-focused > .nav-parent-wrap > .nav-link,
body.header-hr .nav-menu > .nav-item.is-open > .nav-parent-wrap > .nav-link {
    color: #ffffff;
    background-color: transparent;
}

body.header-hr .nav-chevron {
    color: var(--color-dim);
}

body.header-hr .nav-item:hover .nav-chevron,
body.header-hr .nav-item.is-focused .nav-chevron {
    color: var(--color-dim);
}

body.header-hr .nav-menu > .nav-item.has-dropdown:not(.has-mega):hover > .nav-parent-wrap > .nav-chevron,
body.header-hr .nav-menu > .nav-item.has-dropdown:not(.has-mega).is-focused > .nav-parent-wrap > .nav-chevron,
body.header-hr .nav-menu > .nav-item.has-dropdown:not(.has-mega).is-open > .nav-parent-wrap > .nav-chevron {
    color: var(--color-brand-blue);
}

body.header-hr .nav-menu > .nav-item.has-mega:hover > .nav-parent-wrap > .nav-chevron,
body.header-hr .nav-menu > .nav-item.has-mega.is-focused > .nav-parent-wrap > .nav-chevron,
body.header-hr .nav-menu > .nav-item.has-mega.is-open > .nav-parent-wrap > .nav-chevron {
    color: #ffffff;
    position: relative;
    z-index: 1;
}

/* Override immersive header (white-on-navy) rules — HR bar is always light */
body.header-hr .site-header:not(.is-scrolled) .nav-logo,
body.header-hr .site-header.is-scrolled .nav-logo {
    color: var(--color-text);
}

body.header-hr .site-header:not(.is-scrolled) .nav-chevron,
body.header-hr .site-header.is-scrolled .nav-chevron {
    color: var(--color-dim);
}

body.header-hr .site-header:not(.is-scrolled) .nav-toggle,
body.header-hr .site-header.is-scrolled .nav-toggle {
    color: var(--color-text);
}

body.header-hr .site-header:not(.is-scrolled) .nav-item:hover > .nav-parent-wrap,
body.header-hr .site-header.is-scrolled .nav-item:hover > .nav-parent-wrap,
body.header-hr .site-header:not(.is-scrolled) .nav-item.is-focused > .nav-parent-wrap,
body.header-hr .site-header.is-scrolled .nav-item.is-focused > .nav-parent-wrap {
    background-color: transparent;
}

/* CTA cluster */
body.header-hr .site-header__cta-cluster {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

/* Primary pill — HappyRobot “Book a demo” */
.hr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary), system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hr-cta--primary {
    padding: 0.65rem 1.8rem;
    background-color: var(--color-text);
    color: var(--color-bg);
    border: 1px solid var(--color-text);
}

.hr-cta--primary:hover {
    background-color: var(--color-brand-blue);
    border-color: var(--color-brand-blue);
    color: var(--color-bg);
}

.hr-cta--text {
    padding: 0.4rem 0;
    border-radius: 0;
    font-size: 1.45rem;
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    border-bottom: 1px solid transparent;
}

.hr-cta--text:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

.hr-cta--block {
    width: 100%;
    border-radius: 999px;
}

@media (max-width: 900px) {
    body.header-hr .site-header .hr-cta--text {
        display: none;
    }
}

@media (max-width: 1024px) {
    body.header-hr .site-header__inner {
        display: flex;
        justify-content: space-between;
        min-height: 5.8rem;
    }

    body.header-hr .site-header__nav {
        display: none;
    }

    body.header-hr .site-header__cta-cluster {
        gap: var(--gap-sm);
    }

    body.header-hr .hr-cta--primary {
        padding: 0.55rem 1.4rem;
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    body.header-hr .site-header__inner {
        padding-inline: var(--side-pad-mobile);
    }
}

/* ── Service: Ingreso de obra (page-ingreso-de-obra.php) — homepage-adjacent patterns ── */

/* Inner-page hero — same white home shell, shorter than 100vh; breadcrumbs above label-like h1 */
.hero.hero--home.hero--ingreso {
    min-height: 0;
    padding-bottom: var(--section-pad-b);
}

.hero.hero--home.hero--ingreso .hero__inner {
    justify-content: flex-start;
    padding-bottom: var(--gap-md);
}

/* Nosotros hero — full-width brand orange; 60fr copy | 40fr white mark + mega-rail */
.hero.hero--home.hero--nosotros {
    background-color: var(--color-accent);
    color: #fff;
}

.hero.hero--home.hero--nosotros.corner-dots {
    --corner-dots-color: rgba(255, 255, 255, 0.38);
}

/* Nosotros + Contacto: altura fija del bloque naranja (independiente del copy); misma cinta en ambas URLs */
.hero.hero--home.hero--ingreso.hero--nosotros {
    --hero-nosotros-band-min: clamp(32rem, 62vh, 56rem);
    min-height: var(--hero-nosotros-band-min);
    box-sizing: border-box;
}

.hero.hero--home.hero--ingreso.hero--nosotros .hero__inner {
    flex: 1;
    min-height: 0;
    justify-content: center;
}

.hero-nosotros__grid {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: clamp(var(--gap-lg), 4vw, var(--gap-xxl));
    align-items: center;
    width: 100%;
    min-width: 0;
}

.hero-nosotros__copy {
    min-width: 0;
}

.hero-nosotros__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    min-width: 0;
    width: 100%;
}

.hero-nosotros__mark {
    margin: 0;
    width: fit-content;
    max-width: 100%;
}

.hero-nosotros__mark img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(22rem, 36vw);
    max-height: min(22rem, 28vh);
    object-fit: contain;
}

.hero.hero--home.hero--nosotros .hero-home-block--band h1,
.hero.hero--home.hero--nosotros .svc-ingreso-page__hero-copy h1 {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.hero.hero--home.hero--nosotros .hero-home-block--band h2,
.hero.hero--home.hero--nosotros .svc-ingreso-page__hero-copy h2 {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hero.hero--home.hero--nosotros .hero-why-bento__desc {
    color: rgba(255, 255, 255, 0.94);
    max-width: 60ch;
}

.hero.hero--home.hero--nosotros .hero-nosotros__mega-rail.hero-home-mega-rail {
    align-self: stretch;
    width: 100%;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.9);
}

.hero.hero--home.hero--nosotros .hero-nosotros__mega-rail .hero-home-mega-rail__sep {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

@media (max-width: 900px) {
    .hero-nosotros__grid {
        grid-template-columns: 1fr;
        row-gap: var(--gap-xl);
    }

    .hero-nosotros__aside {
        flex-direction: column;
        align-items: center;
    }

    .hero-nosotros__mark img {
        max-width: min(16rem, 42vw);
        max-height: min(16rem, 22vh);
    }

    .hero.hero--home.hero--nosotros .hero-nosotros__mega-rail.hero-home-mega-rail {
        width: 100%;
        min-width: 0;
    }
}

/* Nosotros page — section rhythm + mirrored Visión rail */
.nosotros-page #nuestra-historia {
    padding-top: calc(var(--section-pad-b) + var(--gap-sm));
}

/* Nosotros historia rail — h3 carries former h2 “headline” scale */
.nosotros-page #nuestra-historia .home-que-es__rail-left h2.home-que-es__eyebrow {
    margin-top: 0;
}

/* Same scale as global h2 (e.g. “Nuestros valores” in .home-proceso) */
.nosotros-page #nuestra-historia .home-que-es__rail-left h3.home-que-es__headline {
    font-size: 3.6rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.15;
}

@media (max-width: 768px) {
    .nosotros-page #nuestra-historia .home-que-es__rail-left h3.home-que-es__headline {
        font-size: 2.8rem;
    }
}

/* Nosotros — historia timeline (centered spine: line → dot → copy, alternating L/R) */
.nosotros-page .nosotros-page__historia-narrativa {
    padding-top: calc(var(--section-seam) * 0.5);
    padding-bottom: calc(var(--section-seam) * 0.5);
}

.nosotros-page .nosotros-historia-timeline {
    margin: 0 auto;
    max-width: min(96rem, 100%);
}

.nosotros-page .nosotros-historia-timeline__list {
    /* Fixed rail = spine and markers share one column; avoids “off by a hair” vs 50% */
    --nosotros-tl-rail: 4.25rem;
    --nosotros-tl-line: 3px;
    --nosotros-tl-dot: 2.75rem;
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: var(--gap-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-width: min(90rem, 100%);
}

/*
 * Spine = short segments only (no single full-height line).
 * — First row: line down into the centre of “1.”
 * — Between rows: centre of n → centre of n+1 (stops at “3.”; nothing after)
 */
.nosotros-page .nosotros-historia-timeline__item:first-child::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    /* Taller lead-in above “1.” — extra --gap-xl, still ends at pill centre */
    top: calc(-1 * (var(--gap-sm) + var(--gap-lg) + var(--gap-xl)));
    height: calc(var(--gap-sm) + var(--gap-lg) + var(--gap-xl) + var(--nosotros-tl-dot) * 0.5);
    width: var(--nosotros-tl-line);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
    z-index: 0;
    pointer-events: none;
}

.nosotros-page .nosotros-historia-timeline__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    top: calc(var(--nosotros-tl-dot) * 0.5);
    height: calc(100% + var(--gap-xl));
    width: var(--nosotros-tl-line);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
    z-index: 0;
    pointer-events: none;
}

.nosotros-page .nosotros-historia-timeline__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr var(--nosotros-tl-rail) 1fr;
    align-items: start;
    column-gap: var(--gap-md);
}

/* Odd: copy right of spine (null cell + rail + copy) */
.nosotros-page .nosotros-historia-timeline__item:nth-child(odd) {
    grid-template-areas: '. rail copy';
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(odd) .nosotros-historia-timeline__rail {
    grid-area: rail;
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(odd) .nosotros-historia-timeline__text {
    grid-area: copy;
    text-align: left;
}

/* Even: copy left of spine */
.nosotros-page .nosotros-historia-timeline__item:nth-child(even) {
    grid-template-areas: 'copy rail .';
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(even) .nosotros-historia-timeline__rail {
    grid-area: rail;
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(even) .nosotros-historia-timeline__text {
    grid-area: copy;
    text-align: right;
}

.nosotros-page .nosotros-historia-timeline__rail {
    display: flex;
    justify-content: center;
    justify-self: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.nosotros-page .nosotros-historia-timeline__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--nosotros-tl-dot);
    height: var(--nosotros-tl-dot);
    padding: 0 0.55rem;
    border-radius: var(--radius-full);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-btn-text);
    background: var(--color-accent);
    /* Ring matches section surface so the spine reads as meeting the marker */
    box-shadow: 0 0 0 4px var(--color-bg);
    position: relative;
    z-index: 2;
}

.nosotros-page .nosotros-historia-timeline__text {
    margin: 0;
    max-width: min(52ch, 100%);
    font-family: var(--font-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(odd) .nosotros-historia-timeline__text {
    justify-self: start;
}

.nosotros-page .nosotros-historia-timeline__item:nth-child(even) .nosotros-historia-timeline__text {
    justify-self: end;
}

@media (max-width: 640px) {
    .nosotros-page .nosotros-historia-timeline__list {
        gap: var(--gap-lg);
        --nosotros-tl-rail: 4rem;
    }

    .nosotros-page .nosotros-historia-timeline__item:first-child::before,
    .nosotros-page .nosotros-historia-timeline__item:not(:last-child)::after {
        left: calc(var(--nosotros-tl-rail) * 0.5);
        transform: translate3d(-50%, 0, 0);
    }

    .nosotros-page .nosotros-historia-timeline__item:not(:last-child)::after {
        height: calc(100% + var(--gap-lg));
    }

    .nosotros-page .nosotros-historia-timeline__item,
    .nosotros-page .nosotros-historia-timeline__item:nth-child(odd),
    .nosotros-page .nosotros-historia-timeline__item:nth-child(even) {
        grid-template-columns: var(--nosotros-tl-rail) 1fr;
        grid-template-areas: 'rail copy';
        column-gap: var(--gap-md);
    }

    .nosotros-page .nosotros-historia-timeline__item:nth-child(odd) .nosotros-historia-timeline__text,
    .nosotros-page .nosotros-historia-timeline__item:nth-child(even) .nosotros-historia-timeline__text {
        text-align: left;
        justify-self: stretch;
        max-width: none;
    }
}

.nosotros-page .home-gestion-sec.corner-dots.nosotros-page__band {
    padding-top: 0;
}

/* ── Contact page (page-contacto.php) — form row, channels, map in .wrap, CTA ── */

.contact-page__channels-sec {
    padding-bottom: calc(var(--section-pad-b) * 0.85);
}

.contact-page__channel-bento.home-service-bento {
    gap: var(--gap-xs);
    margin-top: var(--gap-md);
    align-items: stretch;
}

.contact-page__channel-bento.home-service-bento .home-service-card {
    padding: var(--gap-xs) var(--gap-sm);
}

.contact-page__channel-bento.home-service-bento .home-service-card__title {
    margin-bottom: 0.35rem;
    font-size: clamp(1.45rem, 1.1vw + 1.2rem, 1.65rem);
}

.contact-page__channel-bento.home-service-bento .home-service-card__text {
    font-size: clamp(1.15rem, 0.35vw + 1.05rem, 1.35rem);
    line-height: 1.45;
}

.contact-page__channel-bento.home-service-bento .home-service-card .btn.btn--dark.btn--sm {
    margin-top: var(--gap-xxs);
}

@media (min-width: 960px) {
    .contact-page__channel-bento.home-service-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Contact — HubSpot form row (title left, form right; DESIGN.md tokens) */
.contact-page__form-sec {
    padding-top: var(--section-pad-t);
    padding-bottom: var(--section-pad-b);
    background: var(--color-bg);
}

.contact-page__form-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-lg);
    align-items: start;
    width: 100%;
    min-width: 0;
}

.contact-page__form-intro {
    min-width: 0;
    padding-bottom: var(--gap-md);
    border-bottom: var(--border-width) solid var(--color-border-inner);
}

.contact-page__form-aside {
    min-width: 0;
}

.contact-page__editorial-eyebrow {
    margin: 0 0 var(--gap-xs);
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-brown);
}

.contact-page__editorial-headline {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-primary);
    font-size: 3.6rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

.contact-page__editorial-dek {
    margin: 0;
    max-width: 50ch;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
}

.contact-page__editorial-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    min-width: 0;
    padding: var(--gap-xs);
    border-radius: var(--radius);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-card-bg);
    transition: border-color var(--transition-fast);
}

.contact-page__editorial-sheet:hover {
    border-color: color-mix(in srgb, var(--color-border) 82%, var(--color-accent) 18%);
}

.contact-page__editorial-hubspot {
    position: relative;
    min-height: 22rem;
    border-radius: var(--radius-sm);
}

/* Softer load: placeholder wash + fade-in when embed mounts */
.contact-page__editorial-hubspot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--color-elevated);
    opacity: 1;
    transition: opacity 0.45s ease-out;
}

.contact-page__editorial-hubspot:not(.is-hubspot-ready)::before {
    animation: pw-hubspot-form-placeholder 1.35s ease-in-out infinite;
}

.contact-page__editorial-hubspot.is-hubspot-ready::before {
    opacity: 0;
}

.contact-page__editorial-hubspot .hs-form-frame {
    position: relative;
    z-index: 1;
    min-height: 18rem;
    opacity: 0;
    transition: opacity 0.55s ease-out;
}

.contact-page__editorial-hubspot.is-hubspot-ready .hs-form-frame {
    opacity: 1;
}

@keyframes pw-hubspot-form-placeholder {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.78;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page__editorial-hubspot:not(.is-hubspot-ready)::before {
        animation: none;
    }

    .contact-page__editorial-hubspot::before,
    .contact-page__editorial-hubspot .hs-form-frame {
        transition-duration: 0.01ms;
    }
}

/* Mailto CTAs: .btn defaults to capitalize — show email addresses in lowercase */
.contact-page a.btn[href^="mailto:"] .btn__label {
    text-transform: none;
}

/* Contact — map only (.wrap = site side padding / rail) */
.contact-page__map-sec {
    padding-top: var(--section-pad-t);
    padding-bottom: var(--section-pad-b);
    background: var(--color-bg);
}

.contact-page__map-split {
    display: grid;
    gap: var(--gap-lg);
    align-items: start;
}

.contact-page__map-heading.sec-heading {
    margin-bottom: 0;
}

.contact-page__map-media {
    min-width: 0;
}

.contact-page__map-figure {
    margin: 0;
    width: 100%;
    min-width: 0;
}

.contact-page__editorial-figure {
    margin: 0;
    padding: 0;
}

.contact-page__editorial-map-frame {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    background-color: var(--color-bg);
}

.contact-page__editorial-map-frame iframe {
    display: block;
    width: 100%;
    min-height: 16rem;
    height: min(38vh, 22rem);
    border: 0;
}

.contact-page__editorial-caption {
    margin: var(--gap-sm) 0 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.contact-page__editorial-map-link {
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--transition-fast);
}

.contact-page__editorial-map-link:hover {
    color: var(--color-btn-hover);
}

@media (min-width: 960px) {
    .contact-page__form-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap-xl);
        align-items: start;
    }

    .contact-page__form-intro {
        padding-bottom: 0;
        border-bottom: none;
        padding-right: var(--gap-md);
    }

    .contact-page__map-split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 6fr);
        gap: var(--gap-xl);
        align-items: start;
    }

    .contact-page__map-sec .contact-page__editorial-map-frame iframe {
        min-height: 28rem;
        height: min(50vh, 40rem);
    }
}

/* Contact — «Prefiero que me llamen»: mismo patrón que homepage .home-cta-sec + .cta-band (primary + flecha) */
.contact-page__prefiero-cta.sec--dark.corner-dots {
    --corner-dots-color: rgba(255, 255, 255, 0.28);
}

.contact-page__prefiero-cta.home-cta-sec .contact-page__prefiero-cta-band {
    text-align: center;
}

.contact-page__prefiero-cta.home-cta-sec .cta-band__heading {
    margin-inline: auto;
    max-width: min(52ch, 100%);
}

.contact-page__prefiero-cta.home-cta-sec .cta-band__body {
    margin-inline: auto;
    text-align: center;
}

.contact-page__prefiero-cta.home-cta-sec .cta-band__actions {
    justify-content: center;
}

.contact-page__prefiero-cta .contact-page__prefiero-btn--static {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.svc-ingreso-page__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: var(--gap-lg);
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* Under hero image (right column), centered within that column */
.hero.hero--ingreso .svc-ingreso-page__breadcrumbs--hero {
    margin-top: var(--gap-sm);
    margin-bottom: 0;
    justify-content: center;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.svc-ingreso-page__breadcrumbs a {
    color: var(--color-accent);
    text-decoration: none;
}

.svc-ingreso-page__breadcrumbs a:hover {
    text-decoration: underline;
}

.svc-ingreso-page__breadcrumbs span[aria-hidden] {
    color: var(--color-muted);
    opacity: 0.65;
}

.svc-ingreso-page__breadcrumbs span[aria-current] {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.hero.hero--ingreso .svc-ingreso-page__breadcrumbs--hero span[aria-current] {
    color: var(--color-muted);
    font-weight: 500;
}

.svc-ingreso-page__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

/* Match homepage .hero-home-block--band stack: gap-xs between h1 / h2 / desc; md after desc like .hero-why-bento */
.hero.hero--ingreso .svc-ingreso-page__hero-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-xs);
    min-width: 0;
}

.hero.hero--ingreso .svc-ingreso-page__hero-actions {
    margin-top: var(--gap-md);
}

/* Service heroes — 50 / 50: copy | image */
.hero.hero--ingreso .svc-ingreso-page__hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--gap-lg), 4vw, var(--gap-xxl));
    align-items: start;
    width: 100%;
    min-width: 0;
}

.hero.hero--ingreso .svc-ingreso-page__hero-media {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

@media (max-width: 900px) {
    .hero.hero--ingreso .svc-ingreso-page__hero-split {
        grid-template-columns: 1fr;
        gap: var(--gap-xxl);
    }
}

/* Hero figure — home bento photo rhythm (border + band ribbon), right column */
.hero.hero--ingreso .svc-ingreso-page__hero-visual {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: min(58vh, 36rem);
    background-color: var(--color-card-bg);
}

.hero.hero--ingreso .svc-ingreso-page__hero-visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--gap-lg);
    top: 0;
    width: 6.4rem;
    aspect-ratio: 200 / 334;
    max-width: min(6.4rem, calc(42% * 0.8));
    background-image: var(--svc-ingreso-hero-band);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    pointer-events: none;
}

.hero.hero--ingreso .svc-ingreso-page__hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-ingreso-page__subnav {
    position: sticky;
    top: calc(var(--content-top, 7rem) - 0.5rem);
    z-index: 8;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-block: 1px solid var(--color-border);
    padding-block: var(--gap-sm);
    transition:
        padding-block 0.2s ease,
        background 0.2s ease;
}

.svc-ingreso-page__subnav.is-stuck {
    padding-block: var(--gap-xxs);
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
}

/* Anchor jumps from subnav: room below header + sticky bar; smooth scroll */
html:has(.svc-ingreso-page) {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--content-top, 7rem) + 5.75rem);
}

@media (prefers-reduced-motion: reduce) {
    html:has(.svc-ingreso-page) {
        scroll-behavior: auto;
    }
}

/* Extra air below subnav before contribuyentes headline */
.svc-ingreso-page #contribuyentes,
.svc-ingreso-page #para-que-pymes {
    padding-top: calc(var(--section-pad-b) + var(--gap-md));
}

/* Same air when términos is the first block after subnav (e.g. sectores / empresas contratistas) */
.home-fusion > nav.svc-ingreso-page__subnav + section#terminos-del-servicio {
    padding-top: calc(var(--section-pad-b) + var(--gap-md));
}

.svc-ingreso-page__subnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap-lg);
    justify-content: center;
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        gap 0.2s ease,
        font-size 0.2s ease,
        letter-spacing 0.2s ease;
}

.svc-ingreso-page__subnav.is-stuck .svc-ingreso-page__subnav-list {
    gap: var(--gap-xxs) var(--gap-md);
    font-size: 0.98rem;
    letter-spacing: 0.045em;
}

.svc-ingreso-page__subnav-list a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.svc-ingreso-page__subnav-list a:hover {
    color: var(--color-accent);
}

/* Ingreso landing — tighter line measure for section titles + leads (not full wrap--narrow width) */
.svc-ingreso-page .wrap--narrow > .sec-heading {
    max-width: min(40rem, 100%);
    box-sizing: border-box;
}

/* Creación de empresas — product grid headline: use full narrow wrap width (long title) */
#servicios-creacion-relacionados > .wrap.wrap--narrow > .sec-heading {
    max-width: none;
}

/* Service pages — "Otros …" section titles should read as a ~40-col block */
.svc-ingreso-page .sec-heading > h2[id$="-otros-title"],
.svc-ingreso-page .sec-heading > h2[id$="-otros-docs-title"] {
    max-width: 40ch;
    width: 100%;
}

/* Override the generic narrow heading measure (40rem) for these "Otros" headings */
.svc-ingreso-page section[aria-labelledby$="-otros-title"] > .wrap.wrap--narrow > .sec-heading,
.svc-ingreso-page section[aria-labelledby$="-otros-docs-title"] > .wrap.wrap--narrow > .sec-heading {
    max-width: none;
}

/* Términos del servicio — intro + tabs: 50 / 50 to match service heroes */
#terminos-del-servicio > .wrap.wrap--narrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-xl);
    align-items: start;
}

#terminos-del-servicio > .wrap.wrap--narrow > .sec-heading {
    margin-bottom: 0;
    max-width: none;
}

#terminos-del-servicio > .wrap.wrap--narrow > .svc-ingreso-page__tabs {
    min-width: 0;
}

@media (max-width: 960px) {
    #terminos-del-servicio > .wrap.wrap--narrow {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-lg);
    }
}

/* Contribuyentes block — same intro title scale as #por-que-elegir-title */
.svc-ingreso-page .home-por-que__intro #svc-ingreso-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-subcontrataley-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-cert-prev-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-eepp-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-finiquitos-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-docseg-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-pts-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-carpeta-empresas-title,
.svc-ingreso-page .home-por-que__intro #svc-pymes-tipo-title {
    max-width: none;
    margin: 0;
    font-size: clamp(2.4rem, 3.2vw, 3.4rem);
    line-height: 1.12;
}

.home-faq-sec .faq-answer__inner > .svc-ingreso-page__tab-list.home-faq-sec__answer-list {
    margin-top: var(--gap-sm);
}

/* Generación EEPP — listas bajo cada bloque de contribuyentes */
.svc-eepp-page__contrib-bullets {
    list-style: disc;
    margin: var(--gap-xs) 0 0 1.15em;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.svc-eepp-page__contrib-bullets li {
    margin-bottom: 0.35em;
}

.svc-eepp-page__contrib-bullets li:last-child {
    margin-bottom: 0;
}

.svc-ingreso-page .home-por-que__point .svc-eepp-page__contrib-bullets li {
    position: static;
    padding-left: 0;
    margin-bottom: 0.35em;
}

.svc-ingreso-page .home-por-que__point .svc-eepp-page__contrib-bullets li:last-child {
    margin-bottom: 0;
}

.svc-ingreso-page .home-por-que__point .svc-eepp-page__contrib-bullets li::before {
    content: none;
    display: none;
}

.svc-ingreso-page .home-por-que__point-text:has(> .svc-eepp-page__contrib-bullets) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

/* Elaboración documentos de seguridad / carpetas — título + lista; fila sigue align-items: center en base */
.svc-docseg-page .home-por-que__point .home-por-que__point-title {
    margin-bottom: 0.4rem;
}

.svc-docseg-page .home-por-que__point-text .svc-docseg-page__empresas-bullets {
    margin-top: 0;
}

.svc-carpeta-page .home-por-que__point .home-por-que__point-title {
    margin-bottom: 0.4rem;
}

.svc-carpeta-page .home-por-que__point-text .svc-docseg-page__empresas-bullets {
    margin-top: 0;
}

.svc-docseg-page__ext-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    margin-top: var(--gap-md);
}

@media (min-width: 900px) {
    .svc-docseg-page__ext-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.svc-docseg-page__ext-grid .svc-ingreso-page__rel-card {
    flex: none;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* Cuatro cards de producto: grilla 2×2 en desktop (no 1 fila de 4) */
@media (min-width: 1024px) {
    .svc-eepp-page__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.svc-ingreso-page__tab-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.svc-ingreso-page__tab-heads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    margin-bottom: var(--gap-lg);
}

.svc-ingreso-page__tab-h {
    margin: 0;
    font-size: 2rem;
    font-weight: var(--weight-semibold);
}

.svc-ingreso-page__tab-lbl {
    cursor: pointer;
    display: inline-block;
    padding: var(--gap-xs) 0;
    opacity: 0.45;
    border-bottom: 2px solid transparent;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

#ingreso-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#ingreso-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#cert-prev-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#cert-prev-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

.svc-ingreso-page__tab-panel--2 {
    display: none;
}

#ingreso-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#ingreso-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Subcontrataley (page-subcontrataley.php) */
#subcontrataley-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#subcontrataley-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#subcontrataley-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#subcontrataley-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#eepp-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#eepp-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#eepp-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#eepp-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#cert-prev-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#cert-prev-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#docseg-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#docseg-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#docseg-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#docseg-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#finiquito-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#finiquito-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#finiquito-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#finiquito-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#f22-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#f22-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#f22-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#f22-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#pts-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#pts-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#pts-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#pts-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#iva-mensual-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#iva-mensual-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#iva-mensual-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#iva-mensual-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

#emitir-fe-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#emitir-fe-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#emitir-fe-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#emitir-fe-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Reglamento Interno de Trabajo (page-reglamento-interno-de-trabajo.php) */
#ri-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#ri-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#ri-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#ri-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Carpetas de arranque (page-carpetas-de-arranque.php) */
#carpeta-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#carpeta-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#carpeta-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#carpeta-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Empresas en un día (page-en-un-dia.php) */
#eud-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#eud-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#eud-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#eud-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Sectores — empresas contratistas (page-empresas-contratistas.php) */
#contratistas-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#contratistas-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#contratistas-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#contratistas-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Sectores — administración empresas Pymes (page-empresas-pymes.php) */
#pymes-emp-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#pymes-emp-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#pymes-emp-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#pymes-emp-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Inicio de actividades SII (page-inicio-de-actividades-sii.php) */
#sii-ia-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#sii-ia-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#sii-ia-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#sii-ia-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Contabilidad hub (page-contabilidad.php) */
#contabilidad-hub-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#contabilidad-hub-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#contabilidad-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#contabilidad-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Prevención de Riesgos hub (page-prevencion-de-riesgos.php) */
#prevencion-hub-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#prevencion-hub-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#prevencion-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#prevencion-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Creación de Empresas hub (page-creacion-de-empresas.php) */
#creacion-empresas-hub-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#creacion-empresas-hub-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#creacion-empresas-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#creacion-empresas-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Administración de Plataformas Digitales hub (page-administracion-de-plataformas-digitales.php) */
#plataformas-hub-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#plataformas-hub-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#plataformas-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#plataformas-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

/* Administración y Gestión Laboral hub (page-administracion-y-gestion-laboral.php) */
#laboral-hub-tc-1:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(1) .svc-ingreso-page__tab-lbl,
#laboral-hub-tc-2:checked ~ .svc-ingreso-page__tab-heads .svc-ingreso-page__tab-h:nth-child(2) .svc-ingreso-page__tab-lbl {
    opacity: 1;
    border-bottom-color: var(--color-accent);
}

#laboral-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--1 {
    display: none;
}

#laboral-hub-tc-2:checked ~ .svc-ingreso-page__tab-panels .svc-ingreso-page__tab-panel--2 {
    display: block;
}

.svc-ri-page__faq-ul {
    margin: 0.75em 0 0;
    padding-left: 1.25em;
    list-style: disc;
}

.svc-finiquitos-page .svc-finiquitos-page__product-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .svc-finiquitos-page .svc-finiquitos-page__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .svc-finiquitos-page .svc-finiquitos-page__product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.svc-ingreso-page__tab-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.svc-ingreso-page__tab-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: var(--gap-md);
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.svc-ingreso-page__tab-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
}

.svc-ingreso-page__product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-md);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .svc-ingreso-page__product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Six complementary cards: 3×2 (spec 2×3 grid of six products) */
    .svc-ingreso-page__product-grid.svc-ingreso-page__product-grid--six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Grid: same shell + meta strip + hover as .svc-ingreso-page__rel-card (carousel), static grid not slider */
.svc-ingreso-page__product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    row-gap: var(--gap-sm);
    column-gap: 0;
    padding: var(--gap-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
    border-radius: var(--radius);
    background: var(--color-bg);
    overflow: hidden;
    min-height: 100%;
    height: 100%;
    text-align: left;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.svc-ingreso-page__product-title {
    margin: 0;
    font-size: 2rem;
}

.svc-ingreso-page__product-card .svc-ingreso-page__product-title {
    align-self: start;
    font-size: clamp(1.35rem, 1.1rem + 0.45vw, 1.65rem);
    line-height: 1.25;
    min-height: 0;
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
    transition: color var(--transition-base);
}

/* Service landings — blue brand mark instead of logo imagery (hero excluded) */
.svc-ingreso-page .home-por-que__point-logo--brandph {
    display: block;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-brand-blue);
}

.svc-ingreso-page__product-card .btn {
    align-self: start;
    margin-top: var(--gap-xxs);
}

.svc-ingreso-page__carousel {
    margin-top: var(--gap-md);
}

.svc-ingreso-page__carousel-viewport {
    container-type: inline-size;
    container-name: svc-car;
    overflow: hidden;
    width: 100%;
}

.svc-ingreso-page__carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--gap-md);
    margin: 0;
    padding: 0;
    overflow: visible;
    cursor: grab;
    touch-action: pan-y;
    will-change: transform;
}

.svc-ingreso-page__carousel-track.is-dragging {
    cursor: grabbing;
    touch-action: none;
}

.svc-ingreso-page__carousel-track > .svc-ingreso-page__rel-card,
.svc-ingreso-page__carousel-track > .svc-ingreso-page__blog-card {
    align-self: stretch;
}

.svc-ingreso-page__rel-card,
.svc-ingreso-page__carousel-viewport .svc-ingreso-page__blog-card {
    flex: 0 0 calc(
        (100cqi - (var(--svc-car-per-view, 4) - 1) * var(--gap-md)) / var(--svc-car-per-view, 4)
    );
    max-width: calc(
        (100cqi - (var(--svc-car-per-view, 4) - 1) * var(--gap-md)) / var(--svc-car-per-view, 4)
    );
    box-sizing: border-box;
    min-width: 0;
}

.svc-ingreso-page__rel-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-height: clamp(15rem, 32vw, 22rem);
    padding: var(--gap-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
    border-radius: var(--radius);
    background: var(--color-bg);
    overflow: hidden;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

/* Full-bleed top meta strip — carousel rel-cards + product grid (same kicker as .nav-mega__meta-crumb) */
.svc-ingreso-page__rel-card > .label,
.svc-ingreso-page__product-card > .label {
    display: block;
    align-self: stretch;
    flex: 0 0 auto;
    grid-column: 1;
    margin: calc(-1 * var(--gap-md)) calc(-1 * var(--gap-md)) var(--gap-sm);
    padding: 0.65rem var(--gap-md);
    border: 0;
    border-bottom: 1px solid var(--color-border-inner);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.35;
    text-align: left;
    color: var(--color-muted);
    background: var(--color-elevated);
    box-sizing: border-box;
    overflow-wrap: anywhere;
    hyphens: auto;
    white-space: normal;
    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}

.svc-ingreso-page__rel-card > .svc-ingreso-page__rel-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    margin: 0;
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
    transition: color var(--transition-base);
}

.svc-ingreso-page__rel-card:hover,
.svc-ingreso-page__product-card:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-btn-text);
}

.svc-ingreso-page__rel-card:hover > .label,
.svc-ingreso-page__product-card:hover > .label {
    color: color-mix(in srgb, var(--color-btn-text) 92%, var(--color-text) 8%);
    background: color-mix(in srgb, var(--color-text) 10%, var(--color-accent));
    border-bottom-color: color-mix(in srgb, var(--color-btn-text) 32%, transparent);
}

.svc-ingreso-page__rel-card:hover > .svc-ingreso-page__rel-title,
.svc-ingreso-page__product-card:hover .svc-ingreso-page__product-title {
    color: var(--color-btn-text);
}

/* Ingreso a obra — "Otros documentos que gestionamos…" grid: hover uses brand blue */
.svc-ingreso-page__product-grid--hover-brand-blue .svc-ingreso-page__product-card:hover {
    background-color: var(--color-brand-blue);
    border-color: var(--color-brand-blue);
    color: var(--color-btn-text);
}

.svc-ingreso-page__product-grid--hover-brand-blue .svc-ingreso-page__product-card:hover > .label {
    color: color-mix(in srgb, var(--color-btn-text) 92%, var(--color-text) 8%);
    background: color-mix(in srgb, var(--color-text) 10%, var(--color-brand-blue));
    border-bottom-color: color-mix(in srgb, var(--color-btn-text) 32%, transparent);
}

.svc-ingreso-page__product-grid--hover-brand-blue .svc-ingreso-page__product-card:hover .svc-ingreso-page__product-title {
    color: var(--color-btn-text);
}

.svc-ingreso-page__rel-card > .btn {
    flex: 0 0 auto;
    margin-top: var(--gap-xxs);
}

.svc-ingreso-page__blog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    row-gap: var(--gap-xxs);
    align-content: start;
    padding: var(--gap-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-elevated);
    min-height: 0;
}

.svc-ingreso-page__blog-card > .label {
    margin-bottom: 0;
}

.svc-ingreso-page__blog-card .svc-ingreso-page__blog-title {
    align-self: start;
    min-height: 0;
}

.svc-ingreso-page__rel-title,
.svc-ingreso-page__blog-title {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.35vw, 1.65rem);
    line-height: 1.25;
}

.svc-ingreso-page__blog-fig {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--color-brand-blue);
    min-height: 0;
    width: 100%;
}

.svc-ingreso-page__blog-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-ingreso-page__blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--color-muted);
}

.svc-ingreso-page__blog-card .btn {
    align-self: start;
}

.svc-ingreso-page__carousel-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gap-md);
    margin-top: var(--gap-md);
    width: 100%;
}

.svc-ingreso-page__carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.svc-ingreso-page__carousel-arrow:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.svc-ingreso-page__carousel-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.svc-ingreso-page__carousel-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    min-width: 0;
}

[data-svc-carousel-single] .svc-ingreso-page__carousel-dots {
    visibility: hidden;
    min-height: 1.2rem;
}

.svc-ingreso-page__carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--color-border);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.svc-ingreso-page__carousel-dot.is-active {
    background: var(--color-accent);
    transform: scale(1.15);
}

.home-faq-sec__intro h3#svc-faq-ingreso-title,
.home-faq-sec__intro h3#svc-faq-cert-prev-title {
    font-size: clamp(2rem, 2.5vw, 3.2rem);
    margin-bottom: var(--gap-sm);
}