/* ── Landing page ────────────────────────────────────────────────────────────
   Linked only from Pages/Index.cshtml. Tokens only: no colour literals, no gradients, no shadows.
   Built on .grid-12, .btn and .title-block from app.css. The sample drawing sheet (.sample-sheet) is an
   inline SVG whose strokes read currentColor and tokens, so the dark theme recolours it without a second layout. */

.land-wrap {
    max-width: var(--grid-max);
    margin-inline: auto;
    padding-inline: var(--grid-margin);
}

/* Public nav and footer share the landing's wide grid so their edges meet the content below */
.pub-nav .pub-container, .pub-footer .pub-container { max-width: var(--grid-max); padding-inline: var(--grid-margin); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.land-hero { padding-block: var(--space-7) var(--space-8); }
.land-hero .grid-12 { align-items: center; row-gap: var(--space-7); }
@media (min-width: 768px) { .land-hero-copy { margin-bottom: clamp(0px, 7vw, 110px); } }

.land-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: var(--ink);
}
.land-sub {
    margin-top: var(--space-5);
    max-width: 24em;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.45;
    color: var(--ink);
    text-wrap: balance;
}
.land-cta { margin-top: var(--space-6); padding: 14px 26px; font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 600; }
.land-note { margin-top: var(--space-3); font-size: .9rem; color: var(--ink-2); }

/* ── Hero figure: abstract structural grid, then the Diagnóstico title block ───────────────────── */
.sample-sheet { margin: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.sample-sheet-plan { min-width: 0; padding: 8px 12px 0; }
.hp-svg { display: block; width: 100%; height: auto; font-family: var(--font-text); }
.hp-axis path { fill: none; stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.hp-bubble circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hp-label text { fill: var(--ink); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.hp-wall { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.hp-wall-in { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hp-thin { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hp-col rect { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hp-flag { fill: var(--signal); fill-opacity: .16; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hp-flag-line { fill: none; stroke: var(--signal); stroke-width: 3.5; vector-effect: non-scaling-stroke; }
.hp-chip path { fill: none; stroke: var(--signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hp-chip rect { fill: var(--signal); }
.hp-chip text { fill: var(--signal-ink); font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.hp-dim path { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hp-note { fill: var(--ink-3); font-size: 11px; letter-spacing: .04em; }

.diag {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
    font-size: clamp(.8rem, 1.05vw, 1rem);
}
.diag th, .diag td { padding: 10px 14px; text-align: left; vertical-align: middle; border-left: 1px solid var(--hairline-strong); }
.diag th:first-child, .diag td:first-child { border-left: 0; }
.diag thead th { font-weight: 500; color: var(--ink-2); background: transparent; text-transform: none; letter-spacing: 0; font-size: inherit; }
.diag .diag-title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 600; color: var(--ink); }
.diag tbody td { border-top: 1px solid var(--hairline-strong); color: var(--ink); }
.diag tbody tr:hover td { background: transparent; }
.diag-count { width: 14%; text-align: left; }
.diag td, .diag th, .land-diag-table .title-block td, .land-diag-table .title-block th { font-variant-numeric: normal; }
.diag td.diag-count { font-variant-numeric: tabular-nums; }
.diag-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35em; height: 1.35em; margin-right: .7em;
    background: var(--signal); color: var(--signal-ink);
    font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tag-sample {
    display: inline-block; margin-left: .5em; padding: 1px 7px;
    border: 1px solid var(--hairline-strong); color: var(--ink-2);
    font-family: var(--font-text); font-size: .72rem; font-weight: 500; letter-spacing: .02em; vertical-align: middle;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.land-section { padding-block: var(--space-9); }
.land-section--ruled { border-top: 1px solid var(--hairline-strong); }
.land-head { margin-bottom: var(--space-7); }
.grid-12 > .land-head { margin-bottom: 0; }
.land-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.1vw, var(--step-5));
    font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
    max-width: 18em; text-wrap: balance;
}
.land-lead { margin-top: var(--space-4); margin-bottom: var(--space-5); max-width: 32em; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.land-more { margin-top: var(--space-6); font-weight: 600; }
.land-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.land-more a:hover { text-decoration-thickness: 2px; }

/* Three steps */
.land-steps { list-style: none; }
.land-step { border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.land-step-n { display: block; margin-bottom: var(--space-5); font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.land-step h3 { margin-bottom: var(--space-2); font-size: var(--step-1); font-weight: 600; }
.land-step p { max-width: 30em; color: var(--ink-2); line-height: 1.55; }

/* Plans */
.land-plans { align-items: stretch; }
.land-plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--ink); background: var(--paper); }
.land-plan h3 { font-size: var(--step-1); font-weight: 600; }
.land-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.land-price-n { font-family: var(--font-display); font-size: var(--step-5); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.land-price-n--text { font-size: var(--step-3); }
.land-price-u { font-size: .9rem; color: var(--ink-2); }
.land-plan ul { list-style: none; margin-bottom: var(--space-3); }
.land-plan li { padding: var(--space-2) 0; border-top: 1px solid var(--hairline-strong); }
.land-plan .btn { margin-top: auto; justify-content: center; }

/* Free diagnostic */
.land-diag-table { align-self: center; }
.land-diag-table .title-block { font-size: 1rem; }
.land-diag-table .title-block th, .land-diag-table .title-block td { padding: 12px 14px; }
.land-diag-table .title-block th { font-size: .95rem; }

/* FAQ */
.land-faq { border-bottom: 1px solid var(--hairline-strong); }
.land-faq details { border-top: 1px solid var(--hairline-strong); }
.land-faq summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; font-weight: 600; font-size: var(--step-0); list-style: none; }
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary::after { content: '+'; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; font-weight: 400; }
.land-faq details[open] summary::after { content: '\2212'; }
.land-faq details p { max-width: 65ch; padding-bottom: var(--space-5); color: var(--ink-2); line-height: 1.6; }

/* Close */
.land-close { padding-block: var(--space-8); border-top: 2px solid var(--ink); }
.land-close-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.land-close .land-cta { margin-top: 0; }

.land-hero a:focus-visible, .land-section a:focus-visible, .land-close a:focus-visible, .land-faq summary:focus-visible {
    outline: 2px solid var(--ink); outline-offset: 3px;
}

/* Nav: links sit right next to the actions on the landing */
.pub-nav-links { flex: 0 1 auto; margin-left: auto; }
.pub-nav-actions { margin-left: 0; }

/* ── Narrow screens: one column, the sheet stacks under the headline ────────────── */
@media (max-width: 767px) {
    .land-hero { padding-block: var(--space-6) var(--space-7); }
    .land-section { padding-block: var(--space-8); }
    .land-head { margin-bottom: var(--space-6); }
    .grid-12 > .land-head { margin-bottom: var(--space-5); }
    .land-cta { display: flex; justify-content: center; }
    .diag th, .diag td { padding: 8px 8px; }
    .diag-count { width: 12%; }
    .land-close-inner { align-items: flex-start; }
    .hp-chip text { font-size: 17px; }
}