/* =========================================================
   Autodiagnóstico de Gestión Humana · estilos con identidad 1.1
   Copia de los estilos .gh-* de app.css con la paleta de brand.css.
   Se carga después de app.css y brand.css, así que manda sobre ellos.
   ========================================================= */


/* ── Minidiagnóstico de Gestión Humana ── */
.gh-diagnostic {
    --gh-ink: #020C21;
    --gh-muted: #4A5568;
    --gh-line: #DCE5E5;
    --gh-soft: #F3F8F8;
    --gh-green: #019794;
    --gh-green-dark: #024F4D;
    color: var(--gh-ink);
    background: #fff;
    border: 1px solid var(--gh-line);
    border-radius: 1.5rem;
    box-shadow: 0 22px 70px rgba(2, 12, 33, .1);
    overflow: hidden;
}
.gh-diagnostic *, .gh-diagnostic *::before, .gh-diagnostic *::after { box-sizing: border-box; }
.gh-sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.gh-eyebrow {
    color: var(--gh-green); font-size: .74rem; font-weight: 800;
    letter-spacing: .13em; line-height: 1.3; text-transform: uppercase;
}
.gh-button {
    min-height: 48px; border: 1px solid transparent; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .82rem 1.3rem; font: inherit; font-size: .93rem; font-weight: 800;
    line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gh-button:hover { transform: translateY(-1px); }
.gh-button:focus-visible, .gh-review button:focus-visible, .gh-result-footer button:focus-visible {
    outline: 3px solid rgba(1, 151, 148, .3); outline-offset: 3px;
}
.gh-button-primary { background: var(--gh-green); color: #fff; box-shadow: 0 10px 24px rgba(2, 79, 77, .2); }
.gh-button-primary:hover { background: var(--gh-green-dark); }
.gh-button-secondary { background: #fff; border-color: #C9D6D6; color: #2C3A4C; }
.gh-button-secondary:hover { border-color: #8D9AA6; background: #f8fafc; }
.gh-button-dark { background: #0B1A33; color: #fff; }
.gh-button-dark:hover { background: #2C3A4C; }
.gh-button-whatsapp { background: #25D366; color: #052E16; }
.gh-button-whatsapp:hover { background: #4ADE80; }

.gh-intro { min-height: 560px; display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); }
.gh-intro-accent {
    min-height: 100%; display: grid; place-items: center; color: #D1FAF9;
    background: radial-gradient(circle at 30% 25%, rgba(4, 162, 160, .28), transparent 35%), linear-gradient(145deg, #064E4C, #020C21);
    font-size: clamp(5rem, 14vw, 9rem);
}
.gh-intro-copy { padding: clamp(2rem, 6vw, 4.5rem); align-self: center; }
.gh-intro-copy h1, .gh-result-header h1 {
    margin: .75rem 0 1rem; color: var(--gh-ink); font-size: clamp(2rem, 5vw, 3.45rem);
    font-weight: 900; letter-spacing: -.055em; line-height: 1.02;
}
.gh-intro-copy > p { max-width: 45rem; margin: 0; color: var(--gh-muted); font-size: 1.05rem; line-height: 1.75; }
.gh-intro-note {
    max-width: 45rem; margin: 1.5rem 0; padding: 1rem 1.1rem; border: 1px solid #A8E3DF;
    border-radius: 1rem; display: flex; gap: .75rem; color: #024F4D; background: #E3F4F2;
    font-size: .9rem; line-height: 1.55;
}
.gh-intro-note i { margin-top: .1rem; flex: 0 0 auto; font-size: 1.15rem; }
.gh-intro-list { margin: 0 0 1.6rem; padding: 0; display: grid; gap: .65rem; list-style: none; }
.gh-intro-list li { display: flex; align-items: center; gap: .55rem; color: #2C3A4C; font-size: .9rem; font-weight: 650; }
.gh-intro-list i { color: var(--gh-green); font-size: 1.1rem; }
.gh-privacy { margin-top: 1rem !important; display: flex; align-items: center; gap: .45rem; color: #5B6878 !important; font-size: .76rem !important; }

.gh-progress-header { padding: 1.25rem clamp(1.1rem, 4vw, 2.4rem) 1rem; border-bottom: 1px solid #EAF1F1; background: #FAFDFD; }
.gh-progress-header > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gh-step-count { color: #5B6878; font-size: .78rem; font-weight: 750; }
.gh-progress-track { height: 7px; margin-top: .85rem; border-radius: 999px; overflow: hidden; background: #DCE5E5; }
.gh-progress-track > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #04A2A0, #34D3CE); transition: width .3s ease; }
.gh-question-content { width: min(100%, 860px); min-height: 430px; margin: 0 auto; padding: clamp(1.6rem, 5vw, 3rem); }
.gh-question-topic { margin-bottom: .7rem; color: var(--gh-green); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gh-question-content h2 { max-width: 48rem; margin: 0; color: var(--gh-ink); font-size: clamp(1.55rem, 4vw, 2.35rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.14; }
.gh-helper { max-width: 48rem; margin: .8rem 0 0; color: var(--gh-muted); font-size: .9rem; line-height: 1.6; }
.gh-options { margin: 1.5rem 0 0; padding: 0; border: 0; display: grid; gap: .7rem; }
.gh-option { position: relative; display: block; cursor: pointer; }
.gh-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gh-option-card {
    min-height: 58px; padding: .72rem .9rem; border: 1px solid #DBE2E2; border-radius: .95rem;
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: .8rem;
    color: #2C3A4C; background: #fff; font-size: .88rem; font-weight: 600; line-height: 1.45;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gh-option:hover .gh-option-card { border-color: #86EFEC; background: #F0FDFD; transform: translateY(-1px); }
.gh-option input:focus-visible + .gh-option-card { outline: 3px solid rgba(1, 151, 148, .28); outline-offset: 2px; }
.gh-option input:checked + .gh-option-card { border-color: #04A2A0; background: #E3F4F2; box-shadow: 0 0 0 1px #04A2A0; color: #024F4D; }
.gh-option-marker { min-width: 2.2rem; height: 2.2rem; padding: 0 .3rem; border-radius: .7rem; display: grid; place-items: center; color: #465466; background: #f1f5f9; font-size: .75rem; font-weight: 850; }
.gh-option input:checked + .gh-option-card .gh-option-marker { color: #fff; background: var(--gh-green); }
.gh-option-check { color: transparent; font-size: 1.15rem; }
.gh-option input:checked + .gh-option-card .gh-option-check { color: var(--gh-green); }
.gh-text-answer { margin-top: 1.6rem; }
.gh-text-answer label { display: block; margin-bottom: .55rem; color: #2C3A4C; font-size: .86rem; font-weight: 800; }
.gh-text-answer label span { color: #5B6878; font-weight: 600; }
.gh-text-answer textarea { width: 100%; min-height: 140px; resize: vertical; border: 1px solid #C9D6D6; border-radius: 1rem; padding: 1rem; color: var(--gh-ink); background: #fff; font: inherit; font-size: 1rem; line-height: 1.55; }
.gh-text-answer textarea:focus { border-color: #04A2A0; outline: 3px solid rgba(1, 151, 148, .18); }
.gh-text-meta { margin-top: .5rem; display: flex; justify-content: space-between; gap: 1rem; color: #5B6878; font-size: .76rem; }
.gh-validation { min-height: 1.25rem; margin: 1rem 0 0; color: #b91c1c; font-size: .82rem; font-weight: 700; }
.gh-navigation { padding: 1rem clamp(1.1rem, 4vw, 2.4rem) 1.3rem; border-top: 1px solid #EAF1F1; display: flex; justify-content: space-between; gap: .75rem; background: #FAFDFD; }
.gh-auto-hint { align-self: center; color: #5B6878; font-size: .8rem; font-weight: 650; text-align: right; }

.gh-result { padding: clamp(1.25rem, 4vw, 2.75rem); }
.gh-result-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #DCE5E5; }
.gh-result-header h1 { margin: .45rem 0 .7rem; font-size: clamp(2rem, 5vw, 3rem); }
.gh-result-header p { max-width: 48rem; margin: 0; color: var(--gh-muted); line-height: 1.6; }
.gh-size-pill { flex: 0 0 auto; border: 1px solid #A8E3DF; border-radius: 999px; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .85rem; color: #024F4D; background: #E3F4F2; font-size: .78rem; font-weight: 800; }
.gh-contact > div > span { color: var(--gh-green); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.gh-section-heading h2, .gh-contact h2 { margin: .35rem 0; font-size: clamp(1.35rem, 3.5vw, 1.85rem); font-weight: 900; letter-spacing: -.035em; }
.gh-section-heading p, .gh-contact p { margin: 0; color: #5B6878; font-size: .86rem; line-height: 1.55; }
.gh-review { margin-top: 1.25rem; border: 1px solid #DCE5E5; border-radius: 1rem; background: #fff; overflow: hidden; }
.gh-review summary { padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #2C3A4C; font-size: .86rem; font-weight: 800; list-style: none; }
.gh-review summary::-webkit-details-marker { display: none; }
.gh-review[open] summary { border-bottom: 1px solid #DCE5E5; }
.gh-review ul { max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.gh-review li { padding: .85rem 1rem; border-bottom: 1px solid #EDF2F2; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.gh-review li:last-child { border-bottom: 0; }
.gh-review li > div { min-width: 0; display: grid; gap: .14rem; }
.gh-review li strong { color: #2C3A4C; font-size: .82rem; }
.gh-review li small { max-width: 42rem; color: #5B6878; font-size: .73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-review button { flex: 0 0 auto; border: 1px solid #C9D6D6; border-radius: 999px; padding: .45rem .75rem; color: #2C3A4C; background: #fff; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.gh-contact { margin-top: 1.4rem; padding: clamp(1.2rem, 4vw, 2rem); border-radius: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: #fff; background: #020C21; }
.gh-contact > div:first-child { max-width: 42rem; }
.gh-contact > div > span { color: #7FE3DD; }
.gh-contact h2 { color: #fff; }
.gh-contact p { color: #8D9AA6; }
.gh-contact-actions { flex: 0 0 auto; display: grid; gap: .65rem; }
.gh-result-footer { padding: 1.25rem .2rem .1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gh-result-footer button { border: 0; display: inline-flex; align-items: center; gap: .4rem; color: #465466; background: transparent; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.gh-result-footer p { margin: 0; color: #8D9AA6; font-size: .72rem; text-align: right; }

@media (max-width: 767px) {
    .gh-diagnostic { border-radius: 1.1rem; }
    .gh-intro { min-height: 0; grid-template-columns: 1fr; }
    .gh-intro-accent { min-height: 125px; font-size: 4.25rem; }
    .gh-intro-copy { padding: 1.5rem 1.2rem 1.6rem; }
    .gh-intro-copy h1 { font-size: 2rem; }
    .gh-intro-copy > p { font-size: .94rem; line-height: 1.6; }
    .gh-intro-copy .gh-button { width: 100%; }
    .gh-question-content { min-height: 0; padding: 1.35rem 1rem; }
    .gh-question-content h2 { font-size: 1.55rem; }
    .gh-option-card { grid-template-columns: 2rem minmax(0, 1fr) 1.1rem; gap: .65rem; padding: .7rem; font-size: .83rem; }
    .gh-option-marker { min-width: 2rem; height: 2rem; }
    .gh-navigation { position: sticky; bottom: 0; z-index: 5; padding: .8rem; }
    .gh-navigation .gh-button { flex: 1 1 0; min-width: 0; padding-inline: .75rem; font-size: .82rem; }
    .gh-navigation .gh-auto-hint { flex: 1 1 0; }
    .gh-result { padding: 1.05rem; }
    .gh-result-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .gh-result-header h1 { font-size: 2rem; }
    .gh-contact { align-items: stretch; flex-direction: column; }
    .gh-contact-actions { width: 100%; }
    .gh-contact-actions .gh-button { width: 100%; }
    .gh-result-footer { align-items: flex-start; flex-direction: column; }
    .gh-result-footer p { text-align: left; }
    .gh-review li small { max-width: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gh-diagnostic *, .gh-diagnostic *::before, .gh-diagnostic *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Informe de resultados: cuadrícula y luz inspiradas en Magic Bento. */
.gh-result { padding: clamp(1.2rem, 3vw, 2.2rem); background: #F6F9F9; box-shadow: 0 24px 70px rgba(2, 12, 33, .08); }
.gh-result-header { align-items: flex-end; gap: 1rem; padding: .15rem .15rem 1.7rem; border: 0; }
.gh-result-heading { max-width: 42rem; }
.gh-result-kicker { display: inline-flex; align-items: center; gap: .55rem; color: #019794; font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.gh-result-kicker-mark { width: .52rem; height: .52rem; border-radius: 50%; background: #04A2A0; box-shadow: 0 0 0 .3rem rgba(1, 151, 148, .12); }
.gh-result-header h1 { max-width: 40rem; margin: .85rem 0 .55rem; font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.02; }
.gh-result-header p { max-width: 36rem; font-size: .94rem; line-height: 1.55; }
.gh-result-meta { flex: 0 0 auto; display: grid; justify-items: end; gap: .45rem; }
.gh-report-source { color: #5B6878; font-size: .7rem; font-weight: 700; }
.gh-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 12px; }
.gh-bento-card, .gh-topic { --gh-magic-x: 50%; --gh-magic-y: 50%; --gh-magic-visible: 0; --gh-magic-rgb: 1, 151, 148; position: relative; min-width: 0; overflow: hidden; isolation: isolate; border: 1px solid rgba(2, 12, 33, .08); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px -20px rgba(2, 12, 33, .35); transition: transform .25s ease, box-shadow .25s ease; }
.gh-magic-card::before { content: ''; position: absolute; z-index: 2; inset: 0; padding: 1px; border-radius: inherit; background: radial-gradient(300px circle at var(--gh-magic-x) var(--gh-magic-y), rgba(var(--gh-magic-rgb), .85), transparent 65%); opacity: var(--gh-magic-visible); pointer-events: none; transition: opacity .25s ease; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.gh-magic-card::after { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(300px circle at var(--gh-magic-x) var(--gh-magic-y), rgba(var(--gh-magic-rgb), .12), transparent 70%); opacity: var(--gh-magic-visible); pointer-events: none; transition: opacity .25s ease; }
.gh-magic-card > * { position: relative; z-index: 1; }
.gh-magic-card > .gh-magic-wave { position: absolute; z-index: 0; border-radius: 50%; background: rgba(var(--gh-magic-rgb), .13); pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: gh-magic-wave .85s ease-out forwards; }
@keyframes gh-magic-wave { to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (hover: hover) and (pointer: fine) { .gh-magic-card:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -24px rgba(2, 12, 33, .42); } }
.gh-bento-lead { --gh-magic-rgb: 127, 227, 221; grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 1.35rem; padding: clamp(1.5rem, 3vw, 2.35rem); color: #fff; background: radial-gradient(circle at 85% 14%, rgba(4, 162, 160, .24), transparent 34%), linear-gradient(145deg, #062b29, #103d37 68%, #0b302d); border-color: rgba(167, 243, 240, .15); }
.gh-bento-lead-medium { --gh-magic-rgb: 251, 191, 36; background: radial-gradient(circle at 85% 14%, rgba(251, 191, 36, .17), transparent 34%), linear-gradient(145deg, #172c29, #204443 70%, #10322c); }
.gh-bento-lead-unknown { --gh-magic-rgb: 147, 197, 253; background: radial-gradient(circle at 85% 14%, rgba(147, 197, 253, .21), transparent 34%), linear-gradient(145deg, #102438, #153a4b 70%, #112f40); }
.gh-bento-lead-low { --gh-magic-rgb: 134, 239, 172; }
.gh-bento-lead::after { background: radial-gradient(300px circle at var(--gh-magic-x) var(--gh-magic-y), rgba(var(--gh-magic-rgb), .2), transparent 70%); }
.gh-lead-top, .gh-lead-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gh-card-eyebrow { font-size: .7rem; font-weight: 850; letter-spacing: .12em; line-height: 1.35; }
.gh-lead-top .gh-card-eyebrow { color: #A8E3DF; }
.gh-lead-symbol { width: 2.3rem; height: 2.3rem; border: 1px solid rgba(255, 255, 255,.2); border-radius: .8rem; display: grid; place-items: center; color: #A8E3DF; background: rgba(255, 255, 255,.07); font-size: 1.2rem; }
.gh-lead-copy { margin: auto 0; }
.gh-lead-copy h2 { max-width: 30rem; margin: 0 0 1rem; font-size: clamp(1.75rem, 3.3vw, 2.65rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; }
.gh-lead-copy p { max-width: 33rem; margin: 0; color: #D1E8E7; font-size: .92rem; line-height: 1.65; }
.gh-lead-priority { padding: .95rem 1.05rem; border: 1px solid rgba(167, 243, 240, .28); border-radius: .9rem; background: rgba(255, 255, 255,.075); }
.gh-lead-priority span { color: #A8E3DF; font-size: .66rem; font-weight: 850; letter-spacing: .1em; }
.gh-lead-priority p { margin: .4rem 0; color: #fff; font-size: .92rem; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.gh-lead-priority small { color: #C8E0DF; font-size: .76rem; line-height: 1.45; }
.gh-lead-footer { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255,.16); color: #C7E9E8; font-size: .72rem; font-weight: 700; }
.gh-lead-footer i { margin-right: .25rem; color: #7FE3DD; }
.gh-bento-stat { display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem 1.25rem; }
.gh-stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.gh-stat-icon { width: 2rem; height: 2rem; border-radius: .65rem; display: grid; place-items: center; background: rgba(var(--gh-magic-rgb), .13); color: rgba(var(--gh-magic-rgb), 1); font-size: 1.05rem; }
.gh-stat-range { color: #5B6878; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-align: right; }
.gh-stat-value { display: block; margin-top: .45rem; color: #102322; font-size: clamp(2.6rem, 4.7vw, 3.9rem); font-weight: 900; letter-spacing: -.065em; line-height: .95; }
.gh-bento-stat h3 { margin: .45rem 0 .18rem; color: #152726; font-size: .92rem; font-weight: 850; line-height: 1.2; }
.gh-bento-stat p { margin: 0; color: #637171; font-size: .7rem; line-height: 1.35; }
.gh-bento-high { --gh-magic-rgb: 225, 76, 79; background: #fff9f8; }
.gh-bento-medium { --gh-magic-rgb: 204, 131, 24; background: #fffcf6; }
.gh-bento-average { --gh-magic-rgb: 13, 148, 136; }
.gh-bento-unknown { --gh-magic-rgb: 55, 118, 196; background: #f8fbff; }
.gh-bento-valid { --gh-magic-rgb: 31, 122, 85; }
.gh-bento-low { --gh-magic-rgb: 35, 145, 90; background: #F8FCFC; }
.gh-bento-no-coverage .gh-bento-valid, .gh-bento-no-coverage .gh-bento-low { grid-column: span 2; }
.gh-bento-coverage { --gh-magic-rgb: 55, 118, 196; grid-column: span 2; display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem; background: #f3f8ff; }
.gh-bento-coverage-warning { --gh-magic-rgb: 204, 131, 24; background: #fff9eb; }
.gh-bento-coverage-insufficient { --gh-magic-rgb: 225, 76, 79; background: #fff5f3; }
.gh-coverage-mark { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: .7rem; display: grid; place-items: center; color: rgba(var(--gh-magic-rgb), 1); background: rgba(var(--gh-magic-rgb), .12); font-size: 1.15rem; }
.gh-bento-coverage .gh-card-eyebrow { color: #5B6878; }
.gh-bento-coverage h3 { margin: .55rem 0 .35rem; color: #183332; font-size: 1.05rem; font-weight: 850; line-height: 1.2; }
.gh-bento-coverage p { margin: 0; color: #465466; font-size: .77rem; line-height: 1.48; }
.gh-bento-coverage small { display: block; margin-top: .55rem; color: #4A5568; font-size: .7rem; line-height: 1.4; }
.gh-topics { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.gh-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.2rem; padding: 0 .1rem 1.1rem; }
.gh-section-heading > div > span { color: #019794; font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.gh-section-heading h2 { margin: .4rem 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.gh-section-heading p { max-width: 42rem; font-size: .86rem; }
.gh-section-count { flex: 0 0 auto; padding: .5rem .7rem; border: 1px solid #C9DEDD; border-radius: 999px; color: #126562; background: #ECF7F7; font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.gh-topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gh-topic-list.gh-focus-count-1 { grid-template-columns: 1fr; }
.gh-topic-list.gh-focus-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-topic { --gh-magic-rgb: 1, 151, 148; min-height: 340px; margin: 0; padding: 1.3rem; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #fff; }
.gh-topic-high { --gh-magic-rgb: 225, 76, 79; }
.gh-topic-medium { --gh-magic-rgb: 204, 131, 24; }
.gh-topic-top, .gh-topic-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.gh-topic-ordinal { color: #AAB7B7; font-size: .9rem; font-weight: 850; letter-spacing: .03em; }
.gh-topic-level { padding: .38rem .6rem; border-radius: 999px; color: #9f312d; background: #fff0ed; font-size: .64rem; font-weight: 850; line-height: 1.2; text-align: center; }
.gh-topic-medium .gh-topic-level { color: #9b6415; background: #fff4dc; }
.gh-topic h3 { margin: 1.15rem 0; color: #163534; font-size: 1.18rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.22; }
.gh-topic-reported { padding: .75rem .85rem; border-radius: .8rem; background: #F4F7F7; }
.gh-topic-reported span, .gh-topic-action span, .gh-topic-evidence span { color: #56676F; font-size: .61rem; font-weight: 850; letter-spacing: .08em; }
.gh-topic-reported p { margin: .35rem 0 0; color: #253D3C; font-size: .77rem; font-weight: 650; line-height: 1.5; }
.gh-topic-action { margin: .85rem 0; }
.gh-topic-action p, .gh-topic-evidence p { margin: .35rem 0 0; color: #465857; font-size: .77rem; line-height: 1.5; }
.gh-topic-evidence { margin-bottom: 1rem; }
.gh-topic-foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid #E5EBEB; }
.gh-topic-foot span { color: #56676F; font-size: .69rem; font-weight: 700; }
.gh-topic-foot strong { color: #155C5A; font-size: 1.25rem; font-weight: 900; }
.gh-topic-foot small { margin-left: .1rem; color: #799695; font-size: .65rem; }
.gh-empty-topics { grid-column: 1 / -1; margin: 0; padding: 1.25rem; border: 1px solid #D4E9E8; border-radius: 1rem; color: #345857; background: #EEF8F8; font-size: .86rem; line-height: 1.5; }
.gh-review { margin-top: 1.4rem; border-color: #D4E6E3; box-shadow: 0 6px 22px -20px rgba(2, 12, 33, .35); }
.gh-contact { border: 1px solid rgba(110, 231, 227, .16); border-radius: 20px; background: radial-gradient(circle at 90% 10%, rgba(4, 162, 160, .19), transparent 30%), linear-gradient(135deg, #0c2928, #102d34); }
.gh-contact h2 { max-width: 26rem; }
.gh-contact p { max-width: 35rem; }
.gh-report-lead { min-height: 0; gap: 1rem; padding: clamp(1.4rem, 3vw, 2rem); }
.gh-report-lead .gh-lead-copy { margin: 0; }
.gh-report-lead .gh-lead-copy h2 { max-width: none; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.gh-report-lead .gh-lead-copy p { max-width: 58rem; }
.gh-report-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gh-report-categories .gh-bento-stat { min-height: 130px; justify-content: start; }
.gh-report-categories .gh-stat-value { margin-top: 0; font-size: 3rem; }
.gh-category-note, .gh-response-line { margin: .75rem .1rem 0; color: #526665; font-size: .76rem; line-height: 1.6; }
.gh-unknown-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; color: #174c83; background: #e4effb; font-weight: 800; }
.gh-report-warning { padding: 1rem 1.15rem; margin: 1rem 0 0; border: 1px solid #e9be6a; border-radius: 1rem; color: #704b12; background: #fff7e5; font-size: .86rem; line-height: 1.55; }
.gh-focus-pattern { margin: .8rem 0 0; color: #536867; font-size: .73rem; line-height: 1.5; }
.gh-topic-action p { color: #023B3A; font-weight: 750; }
.gh-focus-details { margin-top: auto; border-top: 1px solid #E0E9E9; color: #4A5C63; font-size: .75rem; }
.gh-focus-details summary { min-height: 44px; padding: .7rem 0; font-size: .72rem; font-weight: 800; cursor: pointer; }
.gh-focus-details p { margin: .6rem 0; line-height: 1.5; }
.gh-focus-limit { color: #687877; font-size: .69rem; }
.gh-related-practice { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #E1E9E9; }
.gh-related-practice h4 { margin: 0; color: #023B3A; font-size: .82rem; }
.gh-report-bases, .gh-report-gaps { margin-top: 1.2rem; padding: 1.1rem 1.25rem; border: 1px solid #D4E6E5; border-radius: 1rem; background: #F0F7F7; }
.gh-report-gaps { border-color: #cbdff4; background: #eef5fc; }
.gh-report-bases > span, .gh-report-gaps > span { color: #396564; font-size: .66rem; font-weight: 850; letter-spacing: .08em; }
.gh-report-gaps > span { color: #345d87; }
.gh-report-bases p, .gh-report-gaps p { margin: .5rem 0; font-size: .83rem; line-height: 1.5; }
.gh-report-bases summary, .gh-report-gaps summary { min-height: 44px; padding-top: .6rem; cursor: pointer; font-size: .76rem; font-weight: 800; }
.gh-report-gaps ul { padding-left: 1.2rem; }
.gh-report-gaps li { margin: .6rem 0; font-size: .79rem; line-height: 1.5; }
.gh-report-relations, .gh-report-method { margin-top: 1rem; border: 1px solid #D4E6E3; border-radius: 1rem; background: #fff; }
.gh-report-relations > summary, .gh-report-method > summary { min-height: 48px; padding: 1rem 1.1rem; cursor: pointer; font-size: .83rem; font-weight: 800; }
.gh-report-relations > div, .gh-report-method > div { padding: 0 1.1rem 1rem; }
.gh-report-relations article { padding: .8rem 0; border-top: 1px solid #EDF2F2; }
.gh-report-relations h3 { margin: 0; font-size: .9rem; }
.gh-report-relations p, .gh-report-method p { margin: .55rem 0; color: #4A5C63; font-size: .8rem; line-height: 1.55; }
.gh-report-relations small { color: #667776; font-size: .73rem; }
.gh-review li small { max-width: none; white-space: normal; line-height: 1.45; overflow-wrap: anywhere; }
.gh-result details > summary:focus-visible { outline: 3px solid rgba(16, 185, 179,.4); outline-offset: 2px; border-radius: .5rem; }
.gh-lead-priority p { white-space: pre-wrap; }
@media (max-width: 600px) {
    .gh-report-categories { gap: 8px; }
    .gh-report-categories .gh-bento-stat { min-height: 125px; padding: .8rem .65rem; }
    .gh-report-categories .gh-stat-value { font-size: 2.4rem; }
    .gh-report-categories h3 { font-size: .76rem; }
    .gh-report-categories p { font-size: .65rem; }
    .gh-report-lead { min-height: 0; }
    .gh-review li small { max-width: none; }
}
@media (max-width: 767px) {
    .gh-result-header { align-items: flex-start; padding-bottom: 1.3rem; }
    .gh-result-meta { justify-items: start; }
    .gh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(155px, auto); }
    .gh-bento-lead { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
    .gh-report-lead { min-height: 0; }
    .gh-bento-no-coverage .gh-bento-valid, .gh-bento-no-coverage .gh-bento-low { grid-column: auto; }
    .gh-bento-coverage { grid-column: 1 / -1; }
    .gh-bento-stat { min-height: 155px; padding: 1rem; }
    .gh-report-categories .gh-bento-stat { min-height: 125px; }
    .gh-stat-value { font-size: 2.7rem; }
    .gh-topic-list, .gh-topic-list.gh-focus-count-2 { grid-template-columns: 1fr; }
    .gh-topic { min-height: 0; }
}
@media (max-width: 440px) {
    .gh-result { padding: .85rem; }
    .gh-result-header h1 { font-size: 2.1rem; }
    .gh-bento { gap: 9px; }
    .gh-bento-lead { padding: 1.4rem; }
    .gh-lead-copy h2 { font-size: 1.85rem; }
    .gh-bento-stat { padding: .85rem; }
    .gh-bento-stat h3 { font-size: .8rem; }
    .gh-bento-stat p { font-size: .65rem; }
    .gh-stat-range { font-size: .57rem; }
    .gh-section-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-magic-card, .gh-magic-card::before, .gh-magic-card::after { animation: none !important; transform: none !important; transition: none !important; }
}

/* ---------- Identidad 1.1: tipografías ---------- */
.gh-diagnostic { font-family: var(--hz-font-body); }
.gh-diagnostic h1, .gh-diagnostic h2, .gh-diagnostic h3,
.gh-diagnostic .gh-stat-value, .gh-diagnostic .gh-topic-ordinal,
.gh-diagnostic .gh-button {
  font-family: var(--hz-font-display);
  letter-spacing: var(--hz-display-tracking);
}
.gh-diagnostic h1, .gh-diagnostic h2 { font-weight: 700; line-height: 1.08; text-wrap: balance; }
.gh-diagnostic h3 { font-weight: 500; }
.gh-diagnostic .gh-button { font-weight: 500; }
.gh-diagnostic .gh-option-label, .gh-diagnostic .gh-helper, .gh-diagnostic p { font-family: var(--hz-font-body); }
.gh-diagnostic .gh-eyebrow, .gh-diagnostic .gh-result-kicker { letter-spacing: var(--hz-eyebrow-tracking); }

/* ---------- Identidad 1.1: isologo en los momentos clave ---------- */
.gh-intro-accent {
  background: radial-gradient(circle at 70% 20%, rgba(4, 162, 160, .22), transparent 55%), linear-gradient(160deg, var(--hz-blanco), var(--hz-menta));
  border-right: 1px solid var(--hz-linea);
}
.gh-intro-iso { width: clamp(84px, 42%, 150px); height: auto; }
.gh-result-kicker { color: var(--hz-teal-profundo); }
.gh-result-iso { width: 26px; height: auto; flex: none; }
@media (max-width: 760px) {
  .gh-intro-accent { border-right: 0; border-bottom: 1px solid var(--hz-linea); padding-block: 18px; }
  .gh-intro-iso { width: 72px; }
}

/* Ajustes de tamaño para Unbounded (letra ancha) */
.gh-intro-copy h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.gh-result-header h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.gh-diagnostic .gh-bento-stat h3 { font-family: var(--hz-font-body); font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
.gh-intro-accent { place-items: start center; padding-top: clamp(28px, 12vh, 120px); }
@media (max-width: 760px) { .gh-intro-accent { place-items: center; padding-top: 18px; } }