/* 03_landing.css — Landing page (ported from styles.py inject_landing_styles
   + inject_public_page_styles gradient background). */

.public-page {
    background: linear-gradient(180deg, var(--bg-green-light) 0%, var(--bg-page) 100%);
    min-height: 100vh;
}
.public-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
}

/* Hero: brand wash (turbo.ai pattern) + accent headline. Page-scoped.
   Centered stack with the preview card below (Revolut pattern). The single
   minmax(0, 1fr) track is load-bearing: a bare `fr` track has an `auto`
   minimum, so a long live fund name used to widen the card column until the
   headline collapsed to one word per line. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--space-6);
    margin-top: 2rem;
    background: linear-gradient(180deg,
        rgb(var(--brand-green-rgb) / 0.08),
        rgb(var(--brand-green-rgb) / 0) 70%);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-4) var(--space-6);
}
.hero-copy { max-width: 760px; }
.hero-accent {
    /* Large display text (40px semibold): WCAG AA large-text floor is 3:1 —
       brand green passes on light AND dark surfaces at this size. */
    color: var(--brand-green);
}
.hero-title {
    font-size: var(--fs-display-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-top: 0;
    margin-bottom: 0.5rem;
    /* Even line lengths — a centered headline with a one-word last line
       looks broken. */
    text-wrap: balance;
}
.hero-subtitle {
    font-size: var(--fs-2xl);
    color: var(--text-secondary);
    line-height: var(--lh-normal);
    margin-bottom: 1.25rem;
    font-weight: var(--fw-regular);
    max-width: 640px;
    margin-inline: auto;
    text-wrap: pretty;
}
/* Single-primary CTA stack (conversion): button, friction microcopy touching
   it (turbo.ai pattern), then the demoted ranking text link. */
.hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.hero-cta-microcopy {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.hero-secondary-link {
    color: var(--brand-green);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hero-secondary-link:hover { color: var(--brand-green-hover); }

/* Trust badges: two real stat cards + a full-width source/freshness strip
   (conversion — attributes like "Diario"/"SFC" are not statistics). */
.trust-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 2rem 0;
}
.trust-strip {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.trust-badge {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.trust-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.trust-number {
    font-size: var(--fs-10xl);
    font-weight: var(--fw-semibold);
    color: var(--brand-green-text);
    letter-spacing: -0.8px;
    line-height: var(--lh-tight);
}
.trust-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.65px;
}

/* Feature cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 1.5rem 0;
}
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    height: 100%;
    min-height: 180px;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
    display: flex;
    flex-direction: column;
}
/* Per-card micro-link (conversion: no dead ends). Bottom-pinned so rows
   stay tidy regardless of description length. */
.feature-card-link {
    margin-top: auto;
    padding-top: 12px;
    color: var(--brand-green-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    display: inline-block;
}
.feature-card-link:hover {
    color: var(--brand-green-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.feature-icon { margin-bottom: 1rem; }
.trust-item-icon { margin-bottom: 12px; }
.feature-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: -0.2px;
    margin-bottom: 0.75rem;
    line-height: var(--lh-snug);
}
.feature-desc {
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: var(--lh-normal);
    font-weight: var(--fw-regular);
}

/* Section label */
.section-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--text-gray);
}

/* Trust & credibility proof bar (conversion): compact chips, punchline H2 */
.trust-section {
    background: var(--bg-green-light);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.1);
    border-radius: var(--radius-lg);
    padding: 24px 24px 20px;
    margin: 1.5rem 0;
}
/* .landing-eyebrow: the articles-section label reuses the credibility
   eyebrow so both section labels read as one system. */
.trust-badge-label, .landing-eyebrow {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--brand-green-text);
    text-align: center;
    margin-bottom: 4px;
}
.trust-heading {
    text-align: center;
    color: var(--text-primary);
    font-size: var(--fs-8xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.8px;
    margin-bottom: 1.25rem;
}
.trust-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
/* Horizontal chips: icon left, scannable in one glance. */
.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 8px;
}
.trust-item-icon { margin-bottom: 0; flex-shrink: 0; }
.trust-item-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 2px;
}
.trust-item-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}
/* Methodology chip is the section's single exit: invisible anchor chrome,
   title lights up on hover. */
.trust-chip-link { text-decoration: none; color: inherit; border-radius: var(--radius-md); }
.trust-chip-link:hover .trust-item-title {
    color: var(--brand-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trust-footer-text {
    text-align: center;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 640px;
    margin: 0 auto 1rem;
}
.trust-cta-wrap { text-align: center; }
.trust-cta-link {
    color: var(--brand-green-text);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    text-decoration: none;
}

/* Landing section headings */
.landing-section-heading {
    text-align: center;
    color: var(--text-primary);
    font-size: var(--fs-10xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.8px;
    margin: 2.5rem 0 2rem 0;
}
/* Section rhythm: every landing <section> owns one even vertical gap, so
   the heading no longer adds its own top margin on top of it. */
.landing-section { margin-block: var(--space-7); }
.landing-section > .landing-section-heading { margin-top: 0; }
.hero-trust-line {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    margin-top: 0.75rem;
}

/* Dashboard preview mockup (hero right column) */
.dashboard-preview {
    background: var(--bg-card);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-4), 0 0 40px rgb(var(--brand-green-rgb) / 0.06);
    overflow: hidden;
    position: relative;
    border-top: 3px solid var(--brand-green);
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.preview-top-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.preview-pill {
    /* AA-safe green fill, NOT the data-viz accent: white text on #18E299
       fails WCAG AA (DESIGN.md color intent rules). */
    background: var(--brand-green-fill);
    color: var(--on-fill);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
}
.preview-row { margin-bottom: 0.75rem; }
.preview-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    margin-bottom: 0.25rem;
    font-weight: var(--fw-medium);
}
.preview-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* Rank circles carry a 12px white number: use the AA-safe fill
       (#1D9E75/-deep/-hover all fail white-text contrast at this size). */
    background: var(--brand-green-fill);
    color: var(--on-primary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}
.preview-rate { color: var(--brand-green-text); font-weight: var(--fw-semibold); flex-shrink: 0; margin-left: auto; padding-left: var(--space-2); }
/* Live fund names can be very long ("FONDO DE INVERSIÓN COLECTIVA ABIERTO
   …"): clamp to two lines instead of a one-line ellipsis, which would cut
   off exactly the words that tell funds apart. The full name stays in the
   span's title tooltip; the ranking page has every name in full. */
.preview-fund {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.preview-bar { height: 6px; border-radius: var(--radius-pill); }
/* Per-rank bar tint (accent = data-viz only); width stays inline. */
.preview-bar-1 { background: rgb(var(--brand-green-accent-rgb) / 0.3); }
.preview-bar-2 { background: rgb(var(--brand-green-accent-rgb) / 0.2); }
.preview-bar-3 { background: rgb(var(--brand-green-accent-rgb) / 0.1); }
.preview-detail-link {
    text-align: center;
    color: var(--brand-green-text);
    font-size: var(--fs-sm);
    margin-top: 1rem;
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.preview-detail-link:hover { color: var(--brand-green-hover); }
/* Whole-card link to the public ranking: teaser styling untouched, the
   anchor itself is invisible chrome. */
.preview-card-link {
    display: block;
    width: 100%;
    max-width: 720px;
    /* The hero centers its text; the card's rows read left-to-right. */
    text-align: left;
    color: inherit;
    text-decoration: none;
    /* Rounds the shared :focus-visible outline to the card's shape. */
    border-radius: var(--radius-lg);
}
.preview-card-link:hover .dashboard-preview {
    transform: translateY(-2px);
    box-shadow: var(--shadow-4), 0 0 56px rgb(var(--brand-green-rgb) / 0.12);
}
.preview-updated:empty { display: none; }
.preview-updated {
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    margin-bottom: 0.75rem;
}

/* Article preview block */
.article-preview-card {
    background: linear-gradient(135deg, var(--bg-green-light) 0%, var(--bg-card) 100%);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 32px 32px 24px;
    box-shadow: var(--shadow-1);
}
.article-preview-badge {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--brand-green-text);
    margin-bottom: 12px;
}
.article-preview-title {
    color: var(--text-primary);
    font-size: var(--fs-6xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.24px;
    line-height: var(--lh-snug);
    margin: 0 0 12px 0;
}
.article-preview-desc {
    color: var(--text-muted);
    font-size: var(--fs-xl);
    line-height: var(--lh-normal);
    margin: 0;
}
.article-preview-cta {
    display: block;
    text-align: center;
    background: var(--text-primary);
    color: var(--bg-page);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 24px;
    font-weight: var(--fw-medium);
    text-decoration: none;
}
/* Article preview grid — one card per methodology article, stacked on mobile */
.article-preview-grid {
    display: grid;
    /* auto-fit, not a fixed column count: the grid holds two cards on the
       article pages and three on the landing page, and gains a column
       whenever an article ships. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 1.5rem 0;
}
.article-preview-item {
    display: flex;
    flex-direction: column;
    /* Rounds the hover shadow to the card + CTA strip silhouette. */
    border-radius: var(--radius-lg);
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.article-preview-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.article-preview-item .article-preview-card { flex: 1; }
.article-preview-grid .article-preview-title { font-size: var(--fs-4xl); }

/* Methodology articles: an independent landing section on its own warm
   panel (the credibility and final-CTA panels are green), so the cards no
   longer read as a third row of the features grid. */
.landing-articles {
    background: var(--surface-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5);
}
.landing-articles .landing-eyebrow { margin-top: 0; }
.landing-articles .article-preview-grid { margin-bottom: 0; }

/* How-it-works steps. auto-fit + fixed-max tracks: empty tracks collapse
   and justify-content centers whatever is left, so 2 (or 3) steps always
   sit in the middle of the section instead of hugging the left. */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    justify-content: center;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
}
.step-block { text-align: center; padding: 1rem; position: relative; }
/* Flow arrows between steps (desktop only — steps stack on mobile). Pure
   CSS: no copy, no i18n, nothing for translators to break. Centered in the
   column gap: half the gap out, then shifted back by half its own width. */
.step-block:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: calc(var(--space-7) / -2);
    transform: translateX(50%);
    top: 28px;
    color: var(--brand-green);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-semibold);
}
.step-circle {
    background: var(--brand-green-fill);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: var(--fs-2xl);
    color: var(--on-fill);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-1);
}
.step-title { color: var(--text-primary); margin-bottom: 0.5rem; font-weight: var(--fw-semibold); }
.step-desc { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* Pricing preview (landing) */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.pricing-card ul { padding-left: 20px; margin: 0; }
.overlay-host { position: relative; overflow: hidden; }
.coming-soon-overlay {
    position: absolute;
    inset: 0;
    background: rgba(240, 253, 244, 0.6);
    backdrop-filter: blur(2px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
html[data-theme="dark"] .coming-soon-overlay {
    background: rgba(13, 40, 24, 0.6);
}
.coming-soon-badge {
    background: var(--text-primary);
    color: var(--bg-page);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    white-space: nowrap;
    margin-bottom: 8px;
}
.coming-soon-subtext { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* Final CTA */
.final-cta-box {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-green-light);
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--brand-green-rgb) / 0.1);
    /* Spacing comes from the enclosing .landing-section. */
    margin-top: 0;
}
/* The box padding already frames the heading; its default 2.5rem top
   margin made the panel visibly top-heavy. */
.final-cta-box > .landing-section-heading { margin-top: 0; }
/* Content-width pill (inline-block from 01_base.css) centered by the box —
   not a full-width black bar. Full width again on phones (07_responsive). */
.final-cta-box .btn-primary { margin-top: var(--space-4); }
.final-cta-subheading {
    color: var(--text-muted);
    font-size: var(--fs-2xl);
    line-height: var(--lh-normal);
    margin-bottom: 1rem;
}
.final-cta-microcopy {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-top: var(--space-2);
}

@media (max-width: 768px) {
    .steps-grid, .pricing-grid, .article-preview-grid {
        grid-template-columns: 1fr;
    }
    .landing-articles { padding: var(--space-5) var(--space-4); }
}

/* Footer */
.professional-footer {
    border-top: 1px solid var(--border);
    margin-top: 4rem;
    padding: 3rem 0 1.5rem 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.footer-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    margin: 12px 0 0 0;
}
.footer-col-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.footer-link {
    display: block;
    font-size: var(--fs-sm);
    /* Distinct link color so the footer links read as clickable (Inicio,
       Metodología, support@bighubsolutions.com). */
    color: var(--brand-green-text);
    text-decoration: none;
    margin-bottom: 8px;
}
.footer-link:hover { text-decoration: underline; }
.footer-item {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0 0 8px 0;
}
.footer-bottom {
    max-width: 1240px;
    margin: 2rem auto 0;
    padding: 1.5rem 24px 0;
    border-top: 1px solid var(--border);
    text-align: center;
}
.footer-copyright, .footer-copyright p {
    font-size: var(--fs-xs);
    color: var(--text-gray);
    margin: 0 0 8px 0;
}
/* PROTECTED Big Hub Solutions anchor — distinct, clickable link color.
   Authoritative rule lives in 01_base.css; kept consistent here. */
.footer-copyright a { color: var(--brand-green); text-decoration: underline; }
.footer-disclaimer {
    font-size: var(--fs-2xs);
    color: var(--text-gray);
    margin: 0;
    line-height: var(--lh-normal);
}