/* ============================================================================
   TEST DE PERFIL DE RIESGO — Invierte Inteligente
   Hereda el sistema visual de invit-v3: base blanca · azul institucional ·
   naranja de acento · Space Grotesk / Inter / Fraunces / JetBrains Mono
   ============================================================================ */

:root {
    --paper: #ffffff;
    --ivory: #f7f8fc;
    --mist: #eef3fb;
    --navy: #0a1c44;
    --navy-2: #10265c;
    --blue: #1e5eff;
    --blue-deep: #1240c4;
    --orange: #f7931a;
    --orange-deep: #e07c00;
    --ink: #0d1729;
    --text-2: #46536b;
    --text-3: #8b96ab;
    --line: #e6eaf3;
    --green: #0f9d58;
    --red: #e11d48;
    --amber: #d97706;
    --violet: #7c3aed;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 10px rgba(13, 23, 41, .05);
    --shadow-md: 0 14px 40px -12px rgba(13, 23, 41, .14);
    --shadow-lg: 0 30px 70px -24px rgba(13, 23, 41, .28);
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text-2);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--mist); padding: 2px 6px; border-radius: 5px; color: var(--navy);
}

.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
    font-family: var(--font-heading); color: var(--ink);
    letter-spacing: -.02em; line-height: 1.14;
}

em.accent {
    font-family: var(--font-serif); font-style: italic; font-weight: 600;
    color: var(--orange); letter-spacing: 0;
}

.section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--blue-deep); text-transform: uppercase; letter-spacing: 2.5px;
    margin-bottom: 16px;
}
.section-tag::before { content: ''; width: 28px; height: 1.5px; background: var(--orange); }

/* ================================= HEADER ================================ */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
}
.nav-container {
    display: flex; align-items: center; justify-content: space-between;
    height: 70px; max-width: 1100px; margin: 0 auto; padding: 0 24px;
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo img { height: 34px; width: auto; }
.logo-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px; color: var(--text-3);
    padding-left: 14px; border-left: 1px solid var(--line);
}
.nav-back {
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    display: inline-flex; align-items: center; gap: 8px;
}
.nav-back:hover { color: var(--blue-deep); }

/* ================================ BOTONES ================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-heading); font-weight: 600; font-size: 15px;
    padding: 14px 30px; border-radius: 12px; cursor: pointer;
    transition: var(--transition); border: none; letter-spacing: .01em;
}
.btn i { font-size: 13px; transition: transform .25s ease; }
.btn:hover:not(:disabled) i { transform: translateX(3px); }

.btn-cta {
    background: linear-gradient(100deg, var(--orange), var(--orange-deep));
    color: #fff; box-shadow: 0 10px 26px -8px rgba(247, 147, 26, .55);
}
.btn-cta:hover:not(:disabled) {
    transform: translateY(-2px); filter: brightness(1.04);
    box-shadow: 0 16px 34px -8px rgba(247, 147, 26, .6);
}
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover:not(:disabled) {
    background: var(--navy-2); transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(10, 28, 68, .45);
}
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid #cdd6e6; }
.btn-ghost:hover:not(:disabled) { border-color: var(--navy); background: var(--ivory); }
.btn-lg { padding: 17px 36px; font-size: 16px; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.btn i.no-shift { transition: none; }
.btn:hover i.no-shift { transform: none; }

/* ================================= INTRO ================================= */
main { padding-top: 70px; }

.intro { padding: 70px 0 90px; position: relative; overflow: hidden; }
.intro::before {
    content: ''; position: absolute; top: -220px; left: 50%;
    transform: translateX(-50%); width: 900px; height: 500px;
    background: radial-gradient(ellipse at center, rgba(30, 94, 255, .07), transparent 68%);
    pointer-events: none;
}
.intro-inner { position: relative; text-align: center; }
.intro h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 700; margin-bottom: 20px; }
.intro-sub { font-size: 17.5px; max-width: 680px; margin: 0 auto 20px; }
.intro-sub:first-of-type { font-size: 19px; color: var(--ink); font-weight: 500; }
.intro-sub:last-of-type { margin-bottom: 44px; }

.intro-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 40px;
}
.istat { background: var(--paper); padding: 26px 14px; text-align: center; }
.istat-num {
    font-family: var(--font-heading); font-size: 30px; font-weight: 700;
    color: var(--ink); display: block; line-height: 1;
}
.istat-lab {
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.4px; color: var(--text-3); margin-top: 9px; display: block;
}

.axes-preview {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px; margin-bottom: 44px; text-align: left;
}
.axis-card {
    background: var(--ivory); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 18px 18px 20px;
}
.axis-card i { color: var(--blue); font-size: 15px; margin-bottom: 10px; display: block; }
.axis-card b {
    font-family: var(--font-heading); color: var(--ink); font-size: 14.5px;
    display: block; margin-bottom: 4px;
}
.axis-card span { font-size: 12.5px; line-height: 1.5; color: var(--text-2); display: block; }

.intro-honesty {
    max-width: 640px; margin: 8px auto 0; padding: 22px 26px;
    background: var(--mist); border-left: 3px solid var(--orange);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; text-align: left;
    font-size: 14.5px;
}
.intro-honesty b { color: var(--ink); }

/* Zona de acción: necesita respirar respecto al recuadro de arriba */
.intro-cta {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; margin-top: 40px;
}
/* min-height iguala los dos botones: el de contorno suma 3px por el borde */
.intro-cta > .btn { min-width: 260px; min-height: 57px; }
.intro-cta:has(#btnResetIntro) { flex-flow: row wrap; justify-content: center; }
.intro-cta:has(#btnResetIntro) .intro-note { flex: 1 0 100%; justify-content: center; }

.intro-note {
    display: inline-flex; align-items: center; gap: 9px; margin: 0;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
}

/* ============================ IDENTIFICACIÓN ============================= */
.ident { display: none; padding: 70px 0 90px; }
.ident.active { display: block; }
.ident-inner { max-width: 520px; margin: 0 auto; }
.ident-inner h2 { font-size: clamp(27px, 3.6vw, 38px); font-weight: 700; margin-bottom: 12px; }
.ident-sub { font-size: 16px; margin-bottom: 36px; }

.ident-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
    font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.field input {
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); transition: var(--transition); width: 100%;
}
.field input::placeholder { color: var(--text-3); }
.field input:hover { border-color: #b9c6de; }
.field input:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, .12);
}
.field input.invalid { border-color: var(--red); background: rgba(225, 29, 72, .025); }
.field input.invalid:focus { box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); }
.field-hint { font-size: 13px; color: var(--text-3); line-height: 1.55; }
.field-error {
    font-size: 13px; color: var(--red); font-weight: 500;
    display: none; align-items: center; gap: 6px;
}
.field-error.on { display: flex; }
.field-error::before { content: '\f06a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; }

.ident-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.ident-nav .btn { flex: 1; }

/* Aviso legal discreto bajo el botón, sin casilla que interrumpa */
.ident-legal {
    font-size: 12px; line-height: 1.6; color: var(--text-3);
    text-align: center; margin-top: 4px;
}
.ident-legal a { color: var(--text-3); text-decoration: underline; }
.ident-legal a:hover { color: var(--blue-deep); }

/* ================================= QUIZ ================================== */
.quiz { padding: 34px 0 90px; display: none; }
.quiz.active { display: block; }

.progress-wrap {
    position: sticky; top: 70px; z-index: 900; background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px); padding: 18px 0 16px;
    border-bottom: 1px solid var(--line); margin-bottom: 40px;
}
.progress-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 12px;
}
.progress-block {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px; color: var(--blue-deep);
}
.progress-block em {
    font-style: normal; color: var(--text-3); font-weight: 400;
    text-transform: none; letter-spacing: .3px; margin-left: 10px;
}
.progress-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.progress-count b { color: var(--ink); }
.progress-track { height: 5px; background: var(--mist); border-radius: 99px; overflow: hidden; }
.progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--blue), var(--orange));
    transition: width .55s cubic-bezier(.16, 1, .3, 1);
}
.progress-dots { display: flex; gap: 5px; margin-top: 11px; }
.pdot { flex: 1; height: 3px; border-radius: 99px; background: var(--mist); transition: var(--transition); }
.pdot.done { background: var(--blue); }
.pdot.current { background: var(--orange); }

.block-intro { text-align: center; padding: 8px 0 34px; }
.block-intro-ic {
    width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px;
    background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 19px;
}
.block-intro h2 { font-size: 27px; font-weight: 700; margin-bottom: 6px; }
.block-intro p { font-size: 14.5px; color: var(--text-3); }

.q-card { animation: qIn .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.q-num {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--orange); letter-spacing: 2px; text-transform: uppercase;
    display: block; margin-bottom: 12px;
}
.q-text {
    font-family: var(--font-heading); font-size: clamp(21px, 2.9vw, 29px);
    font-weight: 700; color: var(--ink); line-height: 1.28; margin-bottom: 14px;
}
.q-help {
    font-size: 14.5px; color: var(--text-2); background: var(--ivory);
    border-left: 3px solid var(--blue); padding: 12px 18px;
    border-radius: 0 10px 10px 0; margin-bottom: 28px;
}
.q-opts { display: flex; flex-direction: column; gap: 11px; border: 0; }
.q-opts legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.opt {
    display: flex; align-items: flex-start; gap: 16px; width: 100%;
    background: var(--paper); border: 1.5px solid var(--line);
    border-radius: var(--radius-sm); padding: 17px 20px; cursor: pointer;
    text-align: left; transition: var(--transition); font-family: inherit;
    font-size: 15.5px; color: var(--ink); line-height: 1.5;
}
.opt:hover { border-color: #b9c6de; background: var(--ivory); transform: translateX(3px); }
.opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.opt-key {
    flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--mist);
    color: var(--text-2); font-family: var(--font-mono); font-size: 12.5px;
    font-weight: 700; display: grid; place-items: center; transition: var(--transition);
    margin-top: 1px;
}
.opt.sel { border-color: var(--blue); background: rgba(30, 94, 255, .045); box-shadow: 0 6px 20px -10px rgba(30, 94, 255, .5); }
.opt.sel .opt-key { background: var(--blue); color: #fff; }

.q-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line);
}
.q-nav-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.q-nav-hint kbd {
    font-family: var(--font-mono); background: var(--mist); border: 1px solid var(--line);
    border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; color: var(--ink);
}

/* =============================== RESULTADO =============================== */
.result { display: none; padding: 20px 0 100px; }
.result.active { display: block; }

.res-hero { text-align: center; padding: 30px 0 46px; position: relative; }
.res-hero h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; margin: 14px 0 10px; }
.res-hero .res-claim {
    font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.5vw, 25px);
    color: var(--orange); max-width: 640px; margin: 0 auto;
}

/* Gauge */
.gauge-wrap { width: 100%; max-width: 400px; margin: 0 auto 8px; position: relative; }
.gauge-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-val {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); text-align: center;
}
.gauge-num {
    font-family: var(--font-heading); font-size: 62px; font-weight: 700;
    color: var(--ink); line-height: .95; display: block;
}
.gauge-den {
    font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 2px; color: var(--text-3);
}
.gauge-scale {
    display: flex; justify-content: space-between; max-width: 400px; margin: 0 auto 34px;
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--text-3);
}

.res-badge {
    display: inline-flex; align-items: center; gap: 11px; padding: 10px 22px;
    border-radius: 99px; border: 1.5px solid; font-family: var(--font-heading);
    font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}

/* Bloques */
.card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.card-head i { color: var(--blue); font-size: 15px; }
.card-head h3 { font-size: 20px; font-weight: 700; }
.card-sub { font-size: 14px; color: var(--text-3); margin-bottom: 26px; }
.card-lead { font-size: 16.5px; line-height: 1.75; }
.card-lead b, .card-lead strong { color: var(--ink); }

/* Radar. La columna es ancha porque el SVG lleva las etiquetas dentro del viewBox. */
.radar-grid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: center; }
.radar-grid svg { width: 100%; height: auto; display: block; }
.axis-list { display: flex; flex-direction: column; gap: 16px; }
.axis-row-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px;
}
.axis-row-head b { font-family: var(--font-heading); font-size: 14.5px; color: var(--ink); }
.axis-row-head span { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.axis-bar { height: 7px; background: var(--mist); border-radius: 99px; overflow: hidden; }
.axis-bar > div { height: 100%; border-radius: 99px; transition: width 1s cubic-bezier(.16, 1, .3, 1); }
.axis-row small { font-size: 12.5px; color: var(--text-3); display: block; margin-top: 5px; }

/* Cuadrante */
.quad-grid { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: center; }
/* El hueco de abajo y de la izquierda es para las etiquetas de los ejes, que
   están posicionadas fuera del cuadro. Sin él, "capacidad financiera" se monta
   encima de la tarjeta siguiente. */
.quad-holder { position: relative; padding: 0 0 4px 24px; }
.quad {
    position: relative; aspect-ratio: 1; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background:
        linear-gradient(to right, transparent 49.7%, var(--line) 49.7%, var(--line) 50.3%, transparent 50.3%),
        linear-gradient(to bottom, transparent 49.7%, var(--line) 49.7%, var(--line) 50.3%, transparent 50.3%),
        var(--ivory);
}
.quad-cell {
    position: absolute; width: 50%; height: 50%; padding: 14px;
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.1px; color: var(--text-3); line-height: 1.5;
}
.quad-cell.tl { top: 0; left: 0; }
.quad-cell.tr { top: 0; right: 0; text-align: right; }
.quad-cell.bl { bottom: 0; left: 0; display: flex; align-items: flex-end; }
.quad-cell.br { bottom: 0; right: 0; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; }
.quad-cell.on { color: var(--ink); font-weight: 600; }
.quad-dot {
    position: absolute; width: 20px; height: 20px; border-radius: 50%; z-index: 3;
    background: var(--orange); border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(247, 147, 26, .3), var(--shadow-md);
    transform: translate(-50%, 50%); transition: all 1.1s cubic-bezier(.16, 1, .3, 1);
}
.quad-ghost {
    position: absolute; width: 15px; height: 15px; border-radius: 50%; z-index: 2;
    background: transparent; border: 2px dashed var(--text-3); opacity: 0;
    transform: translate(-50%, 50%); transition: all 1.1s cubic-bezier(.16, 1, .3, 1);
}
.quad-link {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
    pointer-events: none; overflow: visible;
}
.quad-legend {
    display: flex; flex-direction: column; gap: 5px; margin-top: 36px;
    font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
}
.quad-legend span { display: flex; align-items: center; gap: 8px; }
.quad-key { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.quad-key.solid { background: var(--orange); }
.quad-key.ghost { border: 1.5px dashed var(--text-3); }
.quad-axis-x, .quad-axis-y {
    font-family: var(--font-mono); font-size: 9.5px;
    text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-3);
}
/* El eje X fluye como un bloque normal justo debajo del cuadro. Antes estaba
   en posición absoluta con bottom negativo, y se salía de la tarjeta pisando
   la sección siguiente. */
.quad-axis-x { display: block; text-align: center; padding: 8px 0 0; }
/* El eje Y va vertical en el margen izquierdo. Con writing-mode en vez de
   rotate() su caja mide de verdad el ancho de una línea de texto, así que
   ocupa un carril estrecho y predecible y no se monta sobre el cuadro.
   Con rotate() la caja conservaba el ancho del texto en horizontal y se
   solapaba con el cuadrante. */
.quad-axis-y {
    position: absolute; left: 0; top: 0; bottom: 4px; width: 18px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.quad-verdict h4 { font-size: 18px; margin-bottom: 10px; }
.quad-verdict p { font-size: 14.5px; }

/* Coherencia */
.coh-bar-wrap { margin-bottom: 26px; }
.coh-track { height: 10px; background: var(--mist); border-radius: 99px; overflow: hidden; position: relative; }
.coh-fill { height: 100%; border-radius: 99px; transition: width 1.2s cubic-bezier(.16, 1, .3, 1); }
.coh-legend {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--text-3);
}

.finding {
    display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--paper); margin-bottom: 12px;
    border-left-width: 4px;
}
.finding-ic { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; }
.finding h4 { font-size: 16.5px; margin-bottom: 7px; line-height: 1.35; }
.finding p { font-size: 14.5px; line-height: 1.68; }
.finding p b { color: var(--ink); }
.finding-tag {
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.4px; display: block; margin-bottom: 6px;
}
.finding.critical { border-left-color: var(--red); background: rgba(225, 29, 72, .028); }
.finding.critical .finding-ic { background: rgba(225, 29, 72, .1); color: var(--red); }
.finding.critical .finding-tag, .finding.critical h4 { color: var(--red); }
.finding.warning { border-left-color: var(--amber); background: rgba(217, 119, 6, .028); }
.finding.warning .finding-ic { background: rgba(217, 119, 6, .1); color: var(--amber); }
.finding.warning .finding-tag { color: var(--amber); }
.finding.insight { border-left-color: var(--blue); background: rgba(30, 94, 255, .028); }
.finding.insight .finding-ic { background: rgba(30, 94, 255, .1); color: var(--blue); }
.finding.insight .finding-tag { color: var(--blue-deep); }
.finding.strength { border-left-color: var(--green); background: rgba(15, 157, 88, .028); }
.finding.strength .finding-ic { background: rgba(15, 157, 88, .1); color: var(--green); }
.finding.strength .finding-tag { color: var(--green); }

/* Riesgo / recompensa */
.rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 26px; }
.rr-cell { background: var(--paper); padding: 24px 22px; }
.rr-cell.down { background: rgba(225, 29, 72, .04); }
.rr-cell.up { background: rgba(15, 157, 88, .04); }
.rr-lab { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); display: block; margin-bottom: 9px; }
.rr-val { font-family: var(--font-heading); font-size: 34px; font-weight: 700; line-height: 1; display: block; }
.rr-cell.down .rr-val { color: var(--red); }
.rr-cell.up .rr-val { color: var(--green); }
.rr-eur { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); display: block; margin-top: 8px; }

.fan-wrap { margin: 4px 0 8px; }
.fan-wrap svg { width: 100%; height: auto; display: block; }

.reality-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.reality-table th {
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.3px; color: var(--text-3); text-align: left;
    padding: 0 12px 12px 0; font-weight: 600; border-bottom: 1px solid var(--line);
}
.reality-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.reality-table td:first-child { font-family: var(--font-mono); font-weight: 600; color: var(--red); }
.reality-table td:nth-child(2) { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.reality-table td:last-child { color: var(--text-3); font-size: 13px; }
.reality-table tr.hl td { background: rgba(247, 147, 26, .07); }
.reality-table tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--orange); padding-left: 12px; }

/* Cartera */
.alloc-stack { display: flex; height: 40px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.alloc-seg { transition: flex-grow 1.1s cubic-bezier(.16, 1, .3, 1); min-width: 3px; }
.alloc-list { display: flex; flex-direction: column; gap: 12px; }
.alloc-row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.alloc-chip { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.alloc-row span:first-of-type { flex: 1; }
.alloc-row b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }

.expo-compare {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
    margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
}
.expo-box { text-align: center; }
.expo-box small { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--text-3); display: block; margin-bottom: 7px; }
.expo-box b { font-family: var(--font-heading); font-size: 22px; color: var(--ink); }
.expo-arrow { color: var(--text-3); font-size: 16px; }

/* Reglas */
.rules-list { display: flex; flex-direction: column; gap: 0; }
.rule-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rule-item:last-child { border-bottom: 0; }
.rule-n {
    flex: 0 0 26px; height: 26px; border-radius: 7px; background: var(--navy); color: #fff;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    display: grid; place-items: center; margin-top: 2px;
}

/* Arquetipo */
.arch-card { display: flex; gap: 24px; align-items: flex-start; }
.arch-ic {
    flex: 0 0 62px; height: 62px; border-radius: 16px; background: var(--navy);
    color: #fff; display: grid; place-items: center; font-size: 23px;
}
.arch-ref { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); display: block; margin-bottom: 5px; }
.arch-card h3 { font-size: 23px; margin-bottom: 11px; }
.arch-lever { margin-top: 16px; padding: 14px 18px; background: var(--mist); border-radius: 10px; font-size: 14.5px; }
.arch-lever b { color: var(--navy); }

/* ============ CIERRE: HOY → CON UN SISTEMA ============
   Dos columnas enfrentadas con la flecha en medio. En móvil se apilan y la
   flecha gira, que es lo que mantiene legible la relación entre las dos. */
.pg-list { display: flex; flex-direction: column; gap: 14px; }
.pg-row {
    display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.pg-hoy, .pg-con { padding: 18px 20px; }
.pg-hoy { background: rgba(225, 29, 72, .035); }
.pg-con { background: rgba(15, 157, 88, .04); }
.pg-hoy p, .pg-con p { font-size: 14.5px; line-height: 1.65; }
.pg-hoy p b, .pg-con p b { color: var(--ink); }
.pg-tag {
    display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 7px;
}
.pg-hoy .pg-tag { color: var(--red); }
.pg-con .pg-tag { color: var(--green); }
.pg-flecha {
    display: grid; place-items: center; background: var(--ivory);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    color: var(--text-3); font-size: 12px;
}

/* Tarjeta del siguiente nivel: se distingue sin gritar */
.nivel-card { border-left: 3px solid var(--violet); }
.nivel-card .card-lead + .card-lead { margin-top: 13px; }

@media (max-width: 720px) {
    .pg-row { grid-template-columns: 1fr; }
    .pg-flecha {
        border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
        height: 30px;
    }
    /* Gira el icono, NO el contenedor: rotar la celda entera (que aquí mide
       todo el ancho) la haría invadir las dos cajas de texto. */
    .pg-flecha i { transform: rotate(90deg); }
}

/* CTA final */
.res-cta {
    background: var(--navy); color: #fff; border-radius: var(--radius);
    padding: 46px 40px; text-align: center; margin-top: 34px;
}
.res-cta h2 { color: #fff; font-size: clamp(25px, 3.4vw, 34px); margin-bottom: 14px; }
.res-cta p { color: rgba(255, 255, 255, .75); max-width: 520px; margin: 0 auto 28px; font-size: 15.5px; }
.res-cta .btn-cta { box-shadow: 0 10px 30px -8px rgba(247, 147, 26, .7); }
.res-cta-note { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .5); display: block; margin-top: 18px; }

.res-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.disclaimer {
    max-width: 660px; margin: 34px auto 0; text-align: center;
    font-family: var(--font-mono); font-size: 11px; line-height: 1.85; color: var(--text-3);
}

/* ============================ MODAL DE EMAIL ============================= */
.modal {
    position: fixed; inset: 0; z-index: 2000; display: none;
    background: rgba(10, 28, 68, .55); backdrop-filter: blur(4px);
    padding: 20px; overflow-y: auto;
}
.modal.on { display: flex; align-items: center; justify-content: center; }

.modal-box {
    background: var(--paper); border-radius: var(--radius); padding: 32px 30px;
    width: 100%; max-width: 440px; box-shadow: var(--shadow-lg);
    animation: modalIn .28s cubic-bezier(.16, 1, .3, 1);
    max-height: calc(100vh - 40px); overflow-y: auto;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-ic {
    width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px;
    background: rgba(30, 94, 255, .1); color: var(--blue);
    display: grid; place-items: center; font-size: 19px;
}
.modal-box h3 { font-size: 22px; margin-bottom: 8px; }
.modal-sub { font-size: 14.5px; margin-bottom: 22px; }

.modal-addr {
    background: var(--ivory); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 16px 18px;
}
.modal-addr-lab {
    font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 1.4px; color: var(--text-3); display: block; margin-bottom: 5px;
}
.modal-addr b {
    font-family: var(--font-mono); font-size: 14.5px; color: var(--ink);
    display: block; word-break: break-all; line-height: 1.45;
}
.modal-link {
    background: none; border: 0; padding: 0; margin-top: 9px; cursor: pointer;
    font-family: var(--font-body); font-size: 13px; color: var(--blue-deep);
    text-decoration: underline;
}
.modal-link:hover { color: var(--navy); }

.modal-check {
    display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
    font-size: 14.5px; line-height: 1.5; margin-top: 18px; padding: 4px 0;
}
.modal-check input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--blue); cursor: pointer; }

.modal-msg { font-size: 13.5px; line-height: 1.6; margin-top: 14px; }
.modal-msg:empty { display: none; }
.modal-msg.ok {
    padding: 13px 15px; border-radius: 10px; border-left: 3px solid var(--green);
    background: rgba(15, 157, 88, .07); color: #0b6b3c;
}
.modal-msg.err {
    padding: 13px 15px; border-radius: 10px; border-left: 3px solid var(--red);
    background: rgba(225, 29, 72, .06); color: #a1123a;
}
.modal-msg a { color: inherit; text-decoration: underline; font-weight: 600; }

.modal-nav { display: flex; gap: 10px; margin-top: 22px; }
.modal-nav .btn { flex: 1; min-height: 50px; }

@media (max-width: 620px) {
    /* Hoja inferior: en móvil el pulgar llega abajo, no al centro.
       Hay que repetir .on porque si no gana la regla de dos clases de arriba. */
    .modal { padding: 0; }
    .modal.on { align-items: flex-end; }
    .modal-box {
        max-width: 100%; border-radius: var(--radius) var(--radius) 0 0;
        padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        max-height: 92vh;
    }
    .modal-nav { flex-direction: column-reverse; }
    .modal-nav .btn { width: 100%; }
    @keyframes modalIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}

/* Footer */
.footer { background: var(--ivory); border-top: 1px solid var(--line); padding: 30px 0; }
.footer-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex;
    align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-3);
}
.footer-inner a:hover { color: var(--blue-deep); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================== RESPONSIVE =============================== */
@media (max-width: 860px) {
    .radar-grid, .quad-grid { grid-template-columns: 1fr; gap: 26px; }
    .quad-grid { display: flex; flex-direction: column-reverse; }
    .quad { max-width: 340px; margin: 0 auto; width: 100%; }
    .intro-stats { grid-template-columns: repeat(2, 1fr); }
    .rr-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .container, .container-wide { padding: 0 18px; }
    .logo-label { display: none; }
    .card { padding: 24px 20px; }
    .opt { padding: 15px 16px; font-size: 15px; gap: 13px; }
    .q-nav-hint { display: none; }
    .q-nav { gap: 10px; }
    .q-nav .btn { flex: 1; padding: 14px 18px; font-size: 14.5px; }
    .gauge-num { font-size: 50px; }
    .arch-card { flex-direction: column; gap: 18px; }
    .expo-compare { grid-template-columns: 1fr; gap: 12px; }
    .expo-arrow { transform: rotate(90deg); }
    .res-cta { padding: 34px 22px; }
    .reality-table td:last-child, .reality-table th:last-child { display: none; }
}

/* ================================ PRINT ================================= */
@media print {

    /* --- 1. QUE SE IMPRIMAN LOS COLORES ---------------------------------
       Por defecto el navegador quita los fondos al imprimir, y el informe se
       queda en blanco y negro: sin gauge, sin barras, sin semáforos. Esto lo
       fuerza. Es la línea que hace que el PDF salga igual que la pantalla. */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: A4;
        margin: 12mm 10mm;
    }

    /* --- 2. FUERA LO QUE NO APORTA EN PAPEL ----------------------------- */
    .header, .res-actions, .q-nav, .footer, .saved-banner,
    #screenIntro, #screenIdent, #screenQuiz, .modal { display: none !important; }

    html, body { background: #fff !important; }
    main { padding-top: 0 !important; padding-bottom: 0 !important; }

    /* En pantalla el informe lleva 100px de aire al final para que el último
       bloque no quede pegado al pie. En papel ese aire sobrante se lleva por
       delante el final de la última hoja y genera una página en blanco entera,
       así que aquí no queda nada de margen después del texto legal. */
    .result { padding: 0 !important; }
    .disclaimer { margin-bottom: 0 !important; padding-bottom: 0 !important; }
    .container, .container-wide { max-width: 100% !important; padding: 0 !important; }

    /* Las animaciones de entrada dejarían medio informe invisible */
    .reveal { opacity: 1 !important; transform: none !important; }
    .radar-grid svg polygon { transform: none !important; }

    /* --- 3. FRAGMENTACIÓN: QUÉ PUEDE PARTIRSE Y QUÉ NO -------------------
       Este bloque es el que decide cómo sale el PDF, y va justo al contrario de
       lo que parece sensato.

       Proteger la tarjeta entera no funciona con contenido variable: cuando no
       cabe en lo que queda de folio, el navegador la baja completa y deja medio
       folio en blanco; y cuando mide más que una página, ignora la protección y
       la parte por donde le da la gana. Los dos defectos que hemos tenido.

       Así que la tarjeta FLUYE y lo que se protege son sus piezas mínimas: un
       hallazgo, una fila, un gráfico. El corte cae siempre ENTRE dos piezas,
       nunca dentro de una. Es como se pagina un informe de imprenta y es lo
       único que aguanta cualquier caso: con 2 hallazgos o con 12. */
    .card, .card--larga {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Y en papel la tarjeta deja de ser una caja: filete arriba y cabecera.
       Una caja obliga a decidir "entera o a la página siguiente"; sin caja el
       corte cae entre dos párrafos y no se nota que ha habido corte. */
    .card {
        background: transparent !important;
        border: 0 !important;
        border-top: 1.5px solid var(--navy) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 11px 0 0 !important;
        margin: 0 0 18px !important;
    }

    /* Las piezas mínimas: indivisibles. Ninguna llega a un tercio de página,
       así que siempre caben en lo que quede de folio. */
    .finding, .axis-row, .alloc-row, .rule-item, .qa, .arch-card,
    .rr-cell, .expo-box, .gauge-wrap, .quad, .quad-holder, .fan-wrap,
    .coh-bar-wrap, .alloc-stack, .res-hero, .print-header, .res-cta,
    .quad-note, .expo-compare, .card-head, .pg-row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Si una pieza acaba partiéndose de todos modos, que el borde y el fondo se
       cierren en las dos mitades en vez de quedar cortados a cuchillo. */
    .finding, .rr-cell, .expo-box, .quad-note, .arch-card {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* Válvula de escape. Una pieza más alta que un tercio de página dejaría un
       hueco enorme cada vez que no cupiera, así que a esa se le permite
       partirse. La marca la pone el JS al imprimir, midiendo de verdad: el CSS
       no puede saber cuánto mide nada. */
    .deja-partir {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Un título nunca se queda solo al final de una página */
    h1, h2, h3, h4, .card-head, .card-sub, .block-title {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    /* Ni una línea suelta arriba o abajo de una página */
    p, li, td { orphans: 3; widows: 3; }

    /* En tablas largas, la cabecera se repite en cada página */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { break-inside: avoid !important; page-break-inside: avoid !important; }

    /* --- 4. AHORRAR ALTO: dos columnas donde caben -------------------
       Apilar el radar y el cuadrante los haría MÁS altos, justo lo contrario
       de lo que interesa en papel. Se quedan en dos columnas, con el gráfico
       algo más pequeño para que la tarjeta entre en una página. */
    .radar-grid { grid-template-columns: 250px 1fr !important; gap: 18px !important; }

    /* El cuadrante se queda en DOS COLUMNAS, como en pantalla.
       Apilarlo debajo del texto lo hacía legible pero sumaba las dos alturas:
       la tarjeta pasaba de 1032px y se partía entre páginas. Al lado del texto,
       la altura es la del más alto de los dos, no la suma.
       330px es suficiente para leer las cuatro etiquetas (con el texto algo más
       pequeño) y deja 340px para el veredicto, que puede ser largo. */
    .quad-grid {
        display: grid !important;
        grid-template-columns: 356px 1fr !important;
        gap: 22px !important;
        align-items: start !important;
    }
    .quad-holder {
        padding: 0 0 4px 26px !important;
        margin: 0 !important;
        width: 356px !important;
        max-width: 356px !important;
    }
    .quad { max-width: 100% !important; margin: 0 !important; }
    .quad-cell { font-size: 8.5px !important; letter-spacing: .6px !important; padding: 9px !important; }
    .quad-legend { margin-top: 10px !important; font-size: 9.5px !important; }
    .quad-verdict p { font-size: 12px !important; }
    .quad-note { font-size: 11px !important; padding: 10px 12px !important; }

    .rr-grid { grid-template-columns: 1fr 1fr !important; }
    .expo-compare { grid-template-columns: 1fr auto 1fr !important; }
    .axis-list { gap: 10px !important; }
    .axis-row small { display: none !important; }   /* la descripción ya está arriba */

    /* --- 5. SALTOS EN PUNTOS LÓGICOS ---------------------------------
       El análisis detallado y las reglas empiezan en página nueva: así el PDF
       se lee como un informe por secciones y no como un rollo continuo. */
    #findings, .rules-list { break-before: auto; }
    .card.pdf-nueva-pagina {
        break-before: page !important;
        page-break-before: always !important;
    }

    /* --- 6. AJUSTES DE TINTA Y ESPACIO --------------------------------- */
    .card {
        box-shadow: none !important;
        border: 1px solid #d8dfec !important;
        margin-bottom: 12px !important;
        padding: 16px 18px !important;
    }
    .card-head { margin-bottom: 4px !important; }
    .card-sub { margin-bottom: 10px !important; font-size: 12.5px !important; }

    /* Estas dos listas son las que deciden cuántas tarjetas caben por hoja.
       Apretarlas unos píxeles por fila junta "Asignación" y "Reglas" en la misma
       página y ahorra una hoja entera. */
    .rule-item { padding: 10px 0 !important; font-size: 13px !important; gap: 12px !important; }
    .rule-n { flex: 0 0 22px !important; height: 22px !important; font-size: 10px !important; }
    .alloc-row { font-size: 12.5px !important; }
    .alloc-list { gap: 7px !important; }
    .expo-compare { margin-top: 16px !important; padding-top: 16px !important; }
    .card-lead { font-size: 13.5px !important; line-height: 1.6 !important; }

    .res-hero { padding: 0 0 14px !important; }
    .gauge-wrap { max-width: 250px !important; margin-bottom: 0 !important; }
    .gauge-num { font-size: 40px !important; }
    .gauge-scale { max-width: 250px !important; margin-bottom: 16px !important; }
    .res-hero h1 { font-size: 26px !important; margin: 8px 0 6px !important; }
    .res-hero .res-claim { font-size: 16px !important; }

    .finding { margin-bottom: 7px !important; padding: 12px 14px !important; }
    .finding h4 { font-size: 14px !important; }
    .finding p { font-size: 12.5px !important; line-height: 1.55 !important; }

    .rule-item { padding: 10px 0 !important; font-size: 13px !important; }
    .reality-table td, .reality-table th { padding: 8px 10px 8px 0 !important; font-size: 12.5px !important; }
    .rr-val { font-size: 26px !important; }
    .rr-cell { padding: 16px 16px !important; }
    .arch-card h3 { font-size: 19px !important; }
    .arch-card p { font-size: 13.5px !important; }
    .disclaimer { font-size: 9.5px !important; margin-top: 18px !important; }

    /* El cono de escenarios: más bajo, que en papel no aporta tanto alto */
    .fan-wrap svg { max-height: 150px; }

    /* El bloque de la consulta se queda, con su botón: en un PDF los enlaces
       siguen funcionando. Y para quien lo imprima en papel, debajo aparece la
       dirección escrita (la añade el CSS con ::after). */
    .res-cta {
        background: var(--navy) !important;
        border: 0 !important;
        padding: 26px 24px !important;
        break-inside: avoid !important;
        margin-top: 16px !important;
    }
    .res-cta h2 { font-size: 22px !important; }
    .res-cta p { font-size: 13.5px !important; }
    .res-cta .btn {
        background: #fff !important;
        color: var(--navy) !important;
        box-shadow: none !important;
        padding: 13px 26px !important;
        font-size: 14px !important;
    }
    .res-cta .btn i { display: none !important; }
    /* La URL en texto, para quien tenga el informe en papel */
    .res-cta .btn::after {
        content: ' — calendly.com/invierte-inteligente';
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 400;
        opacity: .7;
    }
    .res-cta-note { font-size: 10px !important; }

    /* --- 6. CABECERA IMPRESA (solo en papel) --------------------------- */
    .print-header { display: block !important; }
}

/* Cabecera que solo aparece en el PDF: identifica de quién es el informe.
   En pantalla no se ve. */
.print-header { display: none; }
.print-header-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 0 14px; margin-bottom: 20px;
    border-bottom: 2px solid var(--orange);
}
/* max-height además de height: si el CSS llegara a medias, el logo nunca
   aparecería a tamaño original ocupando media pantalla. */
.print-header img { height: 34px; max-height: 34px; width: auto; max-width: 200px; }
.print-header-meta {
    font-family: var(--font-mono); font-size: 10px; line-height: 1.6;
    color: var(--text-3); text-align: right;
}
.print-header-meta b { color: var(--ink); font-size: 11.5px; display: block; }

/* ============================================================================
   PREPARANDO EL INFORME · el cálculo se hace en el servidor
   ============================================================================ */
.calc { display: none; padding: 110px 0 120px; }
.calc.active { display: block; }
.calc-box {
    max-width: 520px; margin: 0 auto; text-align: center;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 46px 34px; box-shadow: var(--shadow-md);
}
.calc-box h2 { font-size: clamp(23px, 3vw, 29px); font-weight: 700; margin-bottom: 10px; }
.calc-box p { font-size: 15.5px; color: var(--text-2); margin-bottom: 0; }
.calc-box .btn { margin-top: 24px; }
.calc-box.fallo { border-color: rgba(225, 29, 72, .35); }
.calc-box.fallo h2 { color: var(--red); }
.calc-detalle { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-top: 14px; }
.calc-spin {
    width: 46px; height: 46px; margin: 0 auto 24px; border-radius: 50%;
    border: 4px solid var(--mist); border-top-color: var(--blue);
    animation: calc-giro .9s linear infinite;
}
@keyframes calc-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .calc-spin { animation-duration: 3s; } }
@media (max-width: 620px) { .calc { padding: 70px 0 90px; } .calc-box { padding: 36px 22px; } }
@media print { .calc { display: none !important; } }