:root{
    --navy-950:#0B1526;
    --navy-800:#142942;
    --navy-700:#1C3554;
    --red-600:#E4002B;
    --teal-400:#2DD9C4;
    --paper:#F3F5F8;
    --ink-900:#0B1526;
    --mist:#7C8AA0;
    --mist-200:#C3CBD8;
    --white:#FFFFFF;
    --c-weak:#E4002B;
    --c-mid:#E8A33D;
    --c-coord:#4FE0CC;
    --c-integ:#14B8A6;
    --display: 'Space Grotesk', sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html,body{
    background:var(--navy-950);
    color:var(--white);
    font-family:var(--body);
    min-height:100vh;
  }

  body{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 20px 80px;
  }

  a{color:inherit;}

  .wrap{
    width:100%;
    max-width:720px;
  }

  /* ---------- HEADER ---------- */
  header.top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 0 20px;
  }
  .brand{
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand span{color:var(--red-600);}
  .brand-logo{
    height:20px;
    width:auto;
    display:block;
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--mist-200);
  }

  /* ---------- PROGRESS ---------- */
  .progress-track{
    width:100%;
    height:3px;
    background:var(--navy-700);
    border-radius:2px;
    overflow:hidden;
    margin-bottom:10px;
  }
  .progress-fill{
    height:100%;
    background:linear-gradient(90deg,var(--red-600),var(--teal-400));
    width:0%;
    transition:width .4s ease;
  }
  .progress-label{
    font-family:var(--mono);
    font-size:12px;
    color:var(--mist);
    margin-bottom:28px;
  }

  /* ---------- SCREENS ---------- */
  .screen{display:none;}
  .screen.active{display:block; animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- INTRO ---------- */
  .intro h1{
    font-family:var(--display);
    font-weight:700;
    font-size:38px;
    line-height:1.15;
    margin-bottom:18px;
    letter-spacing:-0.01em;
  }
  .intro p.lead{
    font-size:17px;
    line-height:1.6;
    color:var(--mist-200);
    max-width:560px;
    margin-bottom:28px;
  }
  .stat-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:32px;
  }
  .stat-card{
    background:var(--navy-800);
    border:1px solid var(--navy-700);
    border-radius:10px;
    padding:18px 18px 16px;
  }
  .stat-num{
    font-family:var(--display);
    font-weight:700;
    font-size:32px;
    color:var(--teal-400);
    line-height:1;
  }
  .stat-cap{
    font-size:13px;
    color:var(--mist-200);
    margin-top:6px;
    line-height:1.4;
  }
  .stat-src{
    font-family:var(--mono);
    font-size:10px;
    color:var(--mist);
    margin-top:6px;
    letter-spacing:.04em;
  }

  .btn{
    font-family:var(--body);
    font-weight:600;
    font-size:15px;
    border:none;
    border-radius:8px;
    padding:15px 26px;
    cursor:pointer;
    transition:transform .15s ease, background .2s ease;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{
    background:var(--red-600);
    color:var(--white);
  }
  .btn-primary:hover{background:#c40025;}
  .btn-ghost{
    background:transparent;
    border:1px solid var(--navy-700);
    color:var(--mist-200);
  }
  .btn-ghost:hover{border-color:var(--mist);}

  .fine-print{
    font-size:12px;
    color:var(--mist);
    margin-top:14px;
  }

  .scale-legend{
    margin-top:28px;
    padding:18px 20px;
    background:var(--navy-800);
    border:1px solid var(--navy-700);
    border-radius:10px;
  }
  .scale-legend-title{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--mist-200);
    margin-bottom:12px;
  }
  .scale-item{
    font-size:13.5px;
    color:var(--mist-200);
    line-height:1.5;
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:9px;
  }
  .scale-item:last-child{margin-bottom:0;}
  .scale-item b{color:var(--white); font-weight:600;}
  .scale-dot{
    width:9px;height:9px;
    border-radius:50%;
    flex-shrink:0;
    margin-top:5px;
  }

  /* ---------- QUESTION ---------- */
  .q-tag{
    font-family:var(--mono);
    font-size:11px;
    color:var(--teal-400);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:10px;
    display:block;
  }
  .q-text{
    font-family:var(--display);
    font-weight:600;
    font-size:24px;
    line-height:1.35;
    margin-bottom:26px;
  }
  .options{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .option{
    text-align:left;
    background:var(--navy-800);
    border:1px solid var(--navy-700);
    border-radius:10px;
    padding:16px 18px;
    font-family:var(--body);
    font-size:15px;
    color:var(--white);
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .option:hover{border-color:var(--teal-400);}
  .option:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px;}
  .option .dot{
    width:8px;height:8px;border-radius:50%;
    border:1.5px solid var(--mist);
    flex-shrink:0;
  }
  .option.selected{border-color:var(--red-600); background:var(--navy-700);}
  .option.selected .dot{background:var(--red-600); border-color:var(--red-600);}

  .nav-back{
    margin-top:22px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--mist);
    background:none;
    border:none;
    cursor:pointer;
    text-decoration:underline;
  }

  /* ---------- RESULTS ---------- */
  .result-head{margin-bottom:26px;}
  .result-head .eyebrow{color:var(--teal-400);}
  .result-title{
    font-family:var(--display);
    font-weight:700;
    font-size:30px;
    margin:10px 0 8px;
  }
  .result-sub{
    color:var(--mist-200);
    font-size:15px;
    line-height:1.55;
    max-width:600px;
  }

  .radar-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--navy-800);
    border:1px solid var(--navy-700);
    border-radius:14px;
    padding:26px 10px 18px;
    margin:26px 0;
  }
  .radar-legend{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 20px;
    width:100%;
    max-width:420px;
    margin-top:6px;
    font-family:var(--mono);
    font-size:12px;
  }
  .mini-scale{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin:14px 0 4px;
  }
  .mini-scale span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    color:var(--mist-200);
    font-family:var(--mono);
  }
  .mini-scale i{
    width:8px;height:8px;
    border-radius:50%;
    display:inline-block;
  }
  .legend-row{
    display:flex;
    justify-content:space-between;
    color:var(--mist-200);
    border-bottom:1px dashed var(--navy-700);
    padding:6px 2px;
  }
  .legend-row b{color:var(--white); font-weight:500;}

  .benchmark-line{
    background:var(--navy-800);
    border-left:3px solid var(--teal-400);
    border-radius:0 8px 8px 0;
    padding:14px 18px;
    font-size:13.5px;
    color:var(--mist-200);
    line-height:1.55;
    margin-bottom:30px;
  }

  /* ---------- GATE ---------- */
  .gate{
    border:1px solid var(--navy-700);
    border-radius:14px;
    background:var(--navy-800);
    overflow:hidden;
  }

  /* Vista previa decorativa: alto fijo, no condiciona el tamaño del formulario */
  .gate-teaser{
    position:relative;
    height:130px;
    padding:22px 22px 0;
    filter:blur(3px);
    opacity:.5;
    user-select:none;
    pointer-events:none;
    overflow:hidden;
  }
  .gate-teaser::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:70px;
    background:linear-gradient(to bottom, transparent, var(--paper));
  }
  .gate-teaser .dim-block{margin-bottom:16px;}
  .gate-teaser .dim-name{font-family:var(--mono); font-size:12px; color:var(--teal-400);}
  .gate-teaser p{font-size:14px; margin-top:4px; color:var(--mist-200);}

  /* Tarjeta de desbloqueo: fondo claro a propósito.
     El formulario de HubSpot se renderiza dentro de un iframe, por lo que el
     CSS de esta página NO puede tocar su contenido interno. En vez de pelear
     contra eso, usamos un fondo claro donde el texto oscuro por defecto de
     HubSpot ya es legible sin ninguna modificación. */
  .gate-card{
    background:var(--paper);
    border-top:1px solid var(--navy-700);
    padding:26px 24px 30px;
    width:100%;
    text-align:center;
  }
  .lock-icon{
    width:34px;height:34px;
    margin:0 auto 14px;
    color:var(--red-600);
  }
  .gate-card h3{
    font-family:var(--display);
    font-size:18px;
    margin-bottom:8px;
    color:var(--ink-900);
  }
  .gate-card p{
    font-size:13.5px;
    color:#4B5768;
    line-height:1.5;
    margin-bottom:16px;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  /* --- Overrides de estilo para el formulario embebido de HubSpot ---
     HubSpot inyecta su propio CSS con etiquetas/texto en negro por defecto;
     estas reglas fuerzan que todo el formulario se lea sobre fondo oscuro. */
  .hs-embed-wrap{
    margin-top:10px;
    text-align:left;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }
  .hs-form-frame form{width:100% !important;}
  .hs-form-frame .hs-form-field{margin-bottom:12px !important;}
  .hs-form-frame label,
  .hs-form-frame .hs-field-desc,
  .hs-form-frame legend,
  .hs-form-frame .hs-form-required{
    color:var(--mist-200) !important;
    font-family:var(--body) !important;
    font-size:13px !important;
    font-weight:500 !important;
  }
  .hs-form-frame input[type="text"],
  .hs-form-frame input[type="email"],
  .hs-form-frame input[type="tel"],
  .hs-form-frame input[type="number"],
  .hs-form-frame select,
  .hs-form-frame textarea{
    background:var(--navy-800) !important;
    border:1px solid var(--navy-700) !important;
    color:var(--white) !important;
    border-radius:6px !important;
    padding:10px 12px !important;
    font-family:var(--body) !important;
    font-size:14px !important;
    width:100% !important;
  }
  .hs-form-frame input::placeholder,
  .hs-form-frame textarea::placeholder{color:var(--mist) !important;}
  .hs-form-frame input:focus,
  .hs-form-frame select:focus,
  .hs-form-frame textarea:focus{
    outline:none !important;
    border-color:var(--teal-400) !important;
  }
  .hs-form-frame .hs-error-msgs label{
    color:#FF9B9B !important;
    font-size:12px !important;
  }
  .hs-form-frame ::selection{background:var(--teal-400); color:var(--navy-950);}
  .hs-form-frame .hs-button,
  .hs-form-frame input[type="submit"]{
    background:var(--red-600) !important;
    color:var(--white) !important;
    border:none !important;
    border-radius:8px !important;
    padding:13px 20px !important;
    font-family:var(--body) !important;
    font-weight:600 !important;
    font-size:14.5px !important;
    width:100% !important;
    cursor:pointer !important;
    margin-top:8px !important;
  }
  .hs-form-frame .hs-button:hover,
  .hs-form-frame input[type="submit"]:hover{background:#c40025 !important;}
  .hs-form-frame .actions{text-align:left !important;}
  .hs-form-frame .submitted-message{
    color:var(--teal-400) !important;
    font-family:var(--body) !important;
  }

  /* ---------- FULL REPORT ---------- */
  #full-report{display:none;}
  #full-report.show{display:block; animation:fade .4s ease;}
  .report-block{
    border:1px solid var(--navy-700);
    border-left:3px solid var(--teal-400);
    border-radius:0 10px 10px 0;
    padding:16px 18px;
    margin-bottom:14px;
    background:var(--navy-800);
  }
  .report-block.weak{border-left-color:var(--red-600);}
  .report-block .dim-name{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--mist-200);
    margin-bottom:6px;
  }
  .report-block .dim-cat{
    font-family:var(--display);
    font-weight:600;
    font-size:16px;
    margin-bottom:8px;
  }
  .report-block p{
    font-size:14px;
    color:var(--mist-200);
    line-height:1.55;
  }

  .cta-block{
    margin-top:30px;
    text-align:center;
    background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
    border-radius:14px;
    padding:34px 24px;
    border:1px solid var(--navy-700);
  }
  .cta-block h3{
    font-family:var(--display);
    font-size:22px;
    margin-bottom:10px;
  }
  .cta-block p{
    color:var(--mist-200);
    font-size:14.5px;
    max-width:480px;
    margin:0 auto 20px;
    line-height:1.55;
  }
  .cta-buttons{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .btn-secondary{
    background:transparent;
    border:1px solid var(--teal-400);
    color:var(--teal-400);
  }
  .btn-secondary:hover{background:rgba(45,217,196,.08);}

  footer{
    margin-top:40px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--mist);
    text-align:center;
    line-height:1.6;
  }

  @media (max-width:520px){
    .intro h1{font-size:29px;}
    .q-text{font-size:20px;}
    .stat-row{grid-template-columns:1fr;}
    .radar-legend{grid-template-columns:1fr;}
  }

  @media (prefers-reduced-motion: reduce){
    .screen.active{animation:none;}
    .progress-fill{transition:none;}
  }