/*
   Formulario Diagnóstico — Joik Agency
   Full-screen stepper. Cada paso = 100svh.
*/

@font-face {
    font-family: 'Breathing';
    src: url('fonts/Breathing Personal Use Only.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

:root {
    --fd-bg: #000;
    --fd-surface: rgba(255,255,255,0.04);
    --fd-surface-hover: rgba(1,209,254,0.06);
    --fd-text-primary: #F5F7FB;
    --fd-text-secondary: rgba(255,255,255,0.6);
    --fd-text-muted: rgba(255,255,255,0.4);
    --fd-border-soft: rgba(255,255,255,0.1);
    --fd-border-strong: rgba(255,255,255,0.22);
    --fd-border-accent: rgba(1,209,254,0.3);
    --fd-accent: #01d1fe;
    --fd-accent-hover: #12C7F4;
    --fd-accent-soft: rgba(1,209,254,0.15);
    --fd-accent-glow: rgba(1,209,254,0.12);
    --fd-error: #fe3100;
    --fd-shadow-card: 0 4px 20px rgba(1,209,254,0.08), 0 2px 8px rgba(0,0,0,0.3);
    --fd-shadow-hover: 0 8px 30px rgba(1,209,254,0.1), 0 2px 12px rgba(0,0,0,0.2);
    --fd-shadow-selected: 0 0 0 1px rgba(1,209,254,0.3), 0 4px 24px rgba(1,209,254,0.15);
    --fd-font-heading: 'Oswald', sans-serif;
    --fd-font-body: 'Raleway', sans-serif;
    --fd-font-accent: 'Breathing', cursive, sans-serif;
    --fd-radius: 14px;
    --fd-radius-sm: 10px;
    --fd-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fd-slide: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== PAGE ===== */
.diagnostico-page {
    font-family: var(--fd-font-body);
    font-size: 16px; font-weight: 400;
    color: var(--fd-text-primary);
    background: var(--fd-bg);
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
.diagnostico-page * { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== SIDE NAV — dots with hover dash ===== */
.diagnostico-side-nav {
    position: fixed;
    right: clamp(20px, 2.5vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.diagnostico-side-nav .fd-line {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    border: none; cursor: pointer;
    position: relative;
    padding: 0;
}
/* Dot */
.diagnostico-side-nav .fd-line::before {
    content: '';
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.35s;
}
/* Hover dash — slides in from right */
.diagnostico-side-nav .fd-line::after {
    content: '\2014';
    position: absolute;
    right: 36px; top: 50%;
    transform: translateY(-50%) translateX(12px);
    font-family: var(--fd-font-heading);
    font-size: 14px; font-weight: 400;
    color: var(--fd-accent);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s;
    pointer-events: none;
    line-height: 1;
}
.diagnostico-side-nav .fd-line:hover::before {
    background: rgba(1,209,254,0.6);
    box-shadow: 0 0 8px rgba(1,209,254,0.25);
    transform: scale(1.4);
}
.diagnostico-side-nav .fd-line:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.diagnostico-side-nav .fd-line.active::before {
    background: var(--fd-accent);
    box-shadow: 0 0 10px var(--fd-accent-glow);
    transform: scale(1.3);
}
.diagnostico-side-nav .fd-line.active::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    color: var(--fd-accent);
}
.diagnostico-side-nav .fd-line.incomplete::before {
    background: var(--fd-error);
    box-shadow: 0 0 6px rgba(254,49,0,0.3);
}
.diagnostico-side-nav .fd-line .fd-label {
    position: absolute;
    right: 52px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--fd-font-heading);
    font-size: 10px; font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s, color 0.3s;
    pointer-events: none;
    color: rgba(255,255,255,0);
}
.diagnostico-side-nav .fd-line:hover .fd-label { opacity: 0.85; color: rgba(255,255,255,0.7); }
.diagnostico-side-nav .fd-line.active .fd-label { opacity: 1; color: var(--fd-accent); }

/* ===== SVG ICON STYLE ===== */
.diag-input-icon svg {
    width: 18px; height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== INPUT ICONS ===== */
.diag-input-wrap {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}
.diag-input-wrap .diag-input {
    padding-left: 42px;
    margin-bottom: 0;
}
.diag-input-wrap textarea.diag-input {
    padding-left: 42px;
}
.diag-input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(255,255,255,0.25);
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
.diag-input-wrap:focus-within .diag-input-icon {
    color: var(--fd-accent);
}

/* ===== STEP PANELS — slide transition ===== */
.diagnostico-step {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(32px, 5vw, 48px);
    opacity: 0; pointer-events: none;
    transform: translateY(0);
    transition: transform var(--fd-slide), opacity 300ms ease;
}
.diagnostico-step.is-active {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
    z-index: 1;
}
.diagnostico-step.is-entering-from-bottom {
    opacity: 0; transform: translateY(80px);
}
.diagnostico-step.is-entering-from-top {
    opacity: 0; transform: translateY(-80px);
}
.diagnostico-step.is-exiting-to-top {
    opacity: 0; transform: translateY(-80px);
}
.diagnostico-step.is-exiting-to-bottom {
    opacity: 0; transform: translateY(80px);
}

/* ===== STEP INNER ===== */
.diagnostico-step-inner {
    width: min(100%, 1060px);
    margin: 0 auto;
    display: flex; flex-direction: column;
    justify-content: center;
    padding-right: clamp(48px, 8vw, 120px);
}
.diagnostico-step-inner.has-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}
/* Visual left: image left, content right */
.diagnostico-step-inner.has-visual-left {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}
/* Success 50/50 */
.diagnostico-step-inner.has-split-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.diag-visual {
    position: relative; overflow: hidden;
    border-radius: 20px;
    min-height: 50vh; max-height: 72vh;
}
.diag-visual img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; border-radius: 0;
}
.diag-visual::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(0,0,0,0.10); pointer-events: none;
}
.diag-visual.fade-right::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
}
.diag-visual.fade-left::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to left, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
}
.diag-content { min-width: 0; }

/* ===== LOGO ===== */
.diag-logo { margin-bottom: 24px; }
.diag-logo img { height: 100px; width: auto; }

/* ===== TYPOGRAPHY ===== */
.diag-title {
    font-family: var(--fd-font-heading);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 600; letter-spacing: -0.01em;
    color: var(--fd-text-primary);
    margin-bottom: 10px; line-height: 1.15;
}
.diag-title--xl { font-size: clamp(28px, 5vw, 46px); }
.diag-accent {
    font-family: var(--fd-font-accent);
    font-weight: normal; color: var(--fd-accent);
    text-transform: none; letter-spacing: 0.02em;
}
.diag-sub {
    font-size: 15px; font-weight: 400;
    color: var(--fd-text-secondary);
    line-height: 1.65; margin-bottom: 24px;
}
.diag-note {
    font-size: 14px; color: var(--fd-text-muted);
    line-height: 1.65; margin-bottom: 14px;
}

/* ===== FORM ===== */
.diag-input {
    width: 100%; background: var(--fd-surface);
    border: 1px solid var(--fd-border-soft);
    border-radius: 10px; padding: 14px 16px;
    font-size: 15px; font-weight: 400;
    color: var(--fd-text-primary);
    outline: none; margin-bottom: 10px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.diag-input::placeholder { color: var(--fd-text-muted); }
.diag-input:focus {
    border-color: var(--fd-border-accent);
    box-shadow: 0 0 0 3px var(--fd-accent-glow), 0 0 20px var(--fd-accent-glow);
}
.diag-input.error { border-color: var(--fd-error); }
.diag-row { display: flex; gap: 12px; }
.diag-row .diag-input { flex: 1; }
textarea.diag-input { min-height: 110px; resize: vertical; }

/* ===== CARD OPTIONS ===== */
.diag-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.diag-option {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px; padding: 15px 18px;
    cursor: pointer;
    font-size: 14px; font-weight: 400;
    color: var(--fd-text-secondary); text-align: left;
    transition: transform 0.45s var(--fd-ease), border-color 0.35s, background 0.35s, box-shadow 0.35s, color 0.35s;
    position: relative; overflow: hidden;
}
.diag-option:hover {
    background: var(--fd-surface-hover);
    border-color: rgba(255,255,255,0.35);
    color: var(--fd-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--fd-shadow-hover);
}
.diag-option.selected {
    background: var(--fd-surface-hover);
    border-color: var(--fd-border-accent);
    color: var(--fd-text-primary);
    box-shadow: var(--fd-shadow-selected);
}
.diag-option.error { border-color: var(--fd-error); }
.diag-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25); flex-shrink: 0;
    transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.diag-option:hover .diag-radio { border-color: rgba(1,209,254,0.4); }
.diag-option.selected .diag-radio { border-color: var(--fd-accent); background: var(--fd-accent); box-shadow: 0 0 10px var(--fd-accent-glow); }

/* ===== ERROR ===== */
.diag-error {
    font-size: 13px; color: var(--fd-error);
    margin: 4px 0 0 0; display: none;
}
.diag-error.visible { display: block; }

/* ===== BUTTONS ===== */
.diag-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 24px; }
.diag-actions--left { justify-content: space-between; }
.diag-btn {
    font-family: var(--fd-font-heading);
    font-size: 13px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 10px; padding: 13px 26px;
    cursor: pointer;
    transition: all 0.3s var(--fd-ease);
    border: none; outline: none;
    width: auto; min-width: 120px; max-width: max-content;
    line-height: 1;
}
.diag-btn--prev {
    background: transparent; color: var(--fd-text-secondary);
    border: 1px solid rgba(255,255,255,0.25);
}
.diag-btn--prev:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.diag-btn--next {
    background: #fff; color: #000; border: 1px solid #fff;
}
.diag-btn--next:hover { background: transparent; color: #fff; transform: translateY(-1px); }
.diag-btn--submit {
    background: var(--fd-accent); color: #000; font-weight: 600;
    box-shadow: 0 2px 20px rgba(1,209,254,0.2);
}
.diag-btn--submit:hover {
    background: var(--fd-accent-hover); transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(1,209,254,0.35);
}
.diag-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== FOOTER ===== */
.diag-footer {
    position: fixed; bottom: 20px; left: 24px;
    z-index: 10; pointer-events: none;
    display: flex; align-items: center; gap: 8px;
}
.diag-footer img { height: 18px; width: auto; opacity: 0.5; }
.diag-footer span {
    font-size: 11px; color: rgba(255,255,255,0.22);
    letter-spacing: 0.5px;
}

/* ===== SUCCESS ===== */
.diag-success-title {
    font-family: var(--fd-font-heading);
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 600; color: var(--fd-text-primary);
    margin-bottom: 12px;
}
.diag-success-sub {
    font-size: 15px; color: var(--fd-text-secondary);
    line-height: 1.7; margin-bottom: 24px;
}
.diag-success-link {
    display: inline-block; font-family: var(--fd-font-heading);
    font-size: 13px; font-weight: 500; letter-spacing: 1.5px;
    color: var(--fd-accent); text-decoration: none; text-transform: uppercase;
}
.diag-success-link:hover { color: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .diagnostico-side-nav { display: none; }
    .diagnostico-step-inner { padding-right: 0; }
    .diagnostico-step-inner.has-split,
    .diagnostico-step-inner.has-visual-left,
    .diagnostico-step-inner.has-split-50 {
        grid-template-columns: 1fr; gap: 24px;
    }
    .diag-visual { order: -1; min-height: auto; max-height: 220px; }
    .diag-visual img { max-height: 220px; object-fit: contain; }
    .diagnostico-step { padding: 24px 20px; }
    .diag-logo img { height: 56px; }
    .diag-title { font-size: clamp(20px, 6vw, 28px); }
    .diag-title--xl { font-size: clamp(24px, 7vw, 34px); }
    .diag-sub { font-size: 14px; margin-bottom: 18px; }
    .diag-option { padding: 14px 16px; font-size: 13px; }
    .diag-btn { padding: 12px 22px; font-size: 12px; min-width: 100px; }
    .diag-row { flex-direction: column; }
    .diag-footer { bottom: 12px; left: 16px; }
}