@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('dosis-latin.woff2') format('woff2');
}


    :root {
      --paper: #F0EA7C;
      --paper-2: #F7F1A4;
      --card: #FFFFFF;
      --ink: #082653;
      --ink-2: #0B2F66;
      --ink-soft: #2E2E2E;
      --muted: #5A5A4A;
      --line: #E4DDB8;
      --line-strong: #D6CC96;
      --accent: #FE1328;
      --accent-dark: #CC0414;
      --accent-ink: #A50D25;
      --accent-soft: #FDE0E3;
      --yellow: #F0EA7C;
      --yellow-bright: #F8EE59;
      --yellow-soft: #FBF5B8;
      --danger: #B3121F;
      --danger-soft: #FBE3E4;
      --success: #2F6B4F;
      --radius: 28px;
      --shadow: 0 30px 80px -40px rgba(8, 38, 83, .45), 0 2px 0 rgba(8, 38, 83, .05);
      --font-display: 'Dosis', 'Helvetica Neue', Arial, sans-serif;
      --font-body: 'Dosis', 'Helvetica Neue', Arial, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background-color: var(--paper);
      background-image:
        radial-gradient(ellipse at 10% -10%, rgba(254, 19, 40, .12), transparent 34rem),
        radial-gradient(ellipse at 95% 0%, rgba(8, 38, 83, .13), transparent 30rem),
        repeating-linear-gradient(0deg, rgba(8, 38, 83, .035) 0 1px, transparent 1px 34px);
      color: var(--ink-soft);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .032;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    ::selection { background: var(--accent-dark); color: #FFFFFF; }
    [hidden] { display: none !important; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .skip-link {
      position: fixed;
      top: -100px;
      left: 16px;
      z-index: 100;
      padding: 12px 18px;
      border-radius: 0 0 12px 12px;
      background: var(--ink);
      color: var(--yellow-bright);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 0; }

    /* ---------------------------------- Topbar --------------------------------- */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(8, 38, 83, .94);
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }
    .topbar__inner {
      width: min(100% - 48px, 880px);
      min-height: 66px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .brand__logo {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      padding: 3px;
      border-radius: 50%;
      background: #FFFFFF;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    }
    .brand__logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .brand__text strong {
      color: #FFFFFF;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand__text small {
      color: rgba(255, 255, 255, .62);
      font-size: 10.5px;
      letter-spacing: .03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .topbar__meta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
    .anonymity-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .92);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .anonymity-pill svg { color: var(--yellow-bright); flex: 0 0 auto; }
    .step-label {
      color: var(--yellow-bright);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .topbar__progress {
      width: min(100% - 48px, 880px);
      height: 3px;
      margin: 0 auto;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      overflow: hidden;
    }
    .topbar__progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--yellow-bright), var(--accent));
      transition: width .45s cubic-bezier(.2, .7, .2, 1);
    }

    /* ---------------------------------- Shell ---------------------------------- */
    .shell {
      position: relative;
      z-index: 1;
      width: min(100% - 48px, 880px);
      margin: 0 auto;
      padding: 32px 0 0;
    }
    #encuesta:focus { outline: none; }
    .card {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      scroll-margin-top: 88px;
    }

    /* ----------------------------------- Hero ---------------------------------- */
    .hero { position: relative; }
    .hero__panel {
      position: relative;
      padding: 46px 44px 44px;
      overflow: hidden;
      border-radius: var(--radius) var(--radius) 0 0;
      border-bottom: 4px solid var(--accent);
      background: var(--ink);
      color: #FFFFFF;
    }
    .hero__panel::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .75;
      background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .hero__panel::after {
      content: '2026';
      position: absolute;
      right: -6px;
      bottom: -42px;
      pointer-events: none;
      color: rgba(255, 255, 255, .04);
      font-family: var(--font-display);
      font-size: 190px;
      line-height: 1;
      letter-spacing: -.07em;
    }
    .hero__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 44px;
      align-items: center;
    }
    .hero__copy { min-width: 0; }
    .hero__logo-wrap {
      position: relative;
      width: 200px;
      height: 200px;
      display: grid;
      place-items: center;
    }
    .hero__logo {
      display: block;
      width: 190px;
      height: 190px;
      object-fit: contain;
      filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .32));
    }
    .hero__eyebrow {
      position: relative;
      z-index: 1;
      margin: 0 0 14px;
      color: var(--yellow-bright);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .hero__title {
      position: relative;
      z-index: 1;
      max-width: 17ch;
      margin: 0;
      color: #FFFFFF;
      font-family: var(--font-display);
      font-size: clamp(2.3rem, 5.4vw, 3.5rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -.02em;
    }
    .hero__subtitle {
      position: relative;
      z-index: 1;
      max-width: 56ch;
      margin: 18px 0 0;
      color: rgba(255, 255, 255, .88);
      font-size: 14.5px;
      font-weight: 500;
      line-height: 1.5;
    }
    .hero__desc {
      position: relative;
      z-index: 1;
      max-width: 62ch;
      margin: 10px 0 0;
      color: rgba(255, 255, 255, .72);
      font-size: 14px;
      line-height: 1.65;
    }
    .hero__badges {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
    }
    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 11px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      background: var(--ink-2);
      color: #FFFFFF;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .hero__badge svg { color: var(--yellow-bright); flex: 0 0 auto; }
    .step--start.is-active .hero__eyebrow { animation: hero-rise .55s cubic-bezier(.2, .7, .2, 1) both .05s; }
    .step--start.is-active .hero__title { animation: hero-rise .6s cubic-bezier(.2, .7, .2, 1) both .12s; }
    .step--start.is-active .hero__subtitle { animation: hero-rise .6s cubic-bezier(.2, .7, .2, 1) both .19s; }
    .step--start.is-active .hero__desc { animation: hero-rise .6s cubic-bezier(.2, .7, .2, 1) both .25s; }
    .step--start.is-active .hero__badges { animation: hero-rise .6s cubic-bezier(.2, .7, .2, 1) both .31s; }
    .step--start.is-active .hero__logo-wrap { animation: logo-in .7s cubic-bezier(.2, .7, .2, 1) both .18s; }
    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes logo-in {
      from { opacity: 0; transform: scale(.9); }
      to { opacity: 1; transform: none; }
    }

    /* ----------------------------------- Steps --------------------------------- */
    .step { display: none; }
    .step.is-active { display: block; animation: step-in .38s cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes step-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }
    .step__body { padding: 42px 44px 34px; }
    .step--start .step__body { padding-top: 34px; }

    /* -------------------------------- Section head ------------------------------ */
    .section-head {
      padding-bottom: 26px;
      margin-bottom: 30px;
      border-bottom: 1px solid var(--line);
    }
    .section-topline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--accent-ink);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .section-kicker::before {
      content: '';
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
    }
    .section-chip {
      display: inline-flex;
      align-items: center;
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--yellow-soft);
      color: var(--ink);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .section-chip--conditional {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--yellow-bright);
    }
    .section-head h2 {
      max-width: 22ch;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.6vw, 2.35rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.015em;
    }
    .section-head h2:focus { outline: none; }
    .section-desc {
      max-width: 62ch;
      margin: 10px 0 0;
      color: var(--ink-soft);
      font-size: 13.5px;
      line-height: 1.6;
    }

    /* --------------------------------- Questions ------------------------------- */
    .questions { display: flex; flex-direction: column; gap: 30px; }
    .question { min-width: 0; margin: 0; padding: 0; border: 0; }
    .question + .question { padding-top: 30px; border-top: 1px dashed rgba(8, 38, 83, .16); }
    .q-legend { display: block; width: 100%; margin: 0; padding: 0; }
    .q-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
    }
    .q-number, .q-mark { flex: 0 0 auto; margin-top: 1px; }
    .q-number {
      min-width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 7px;
      border: 1px solid rgba(8, 38, 83, .16);
      border-radius: 8px;
      background: var(--yellow-soft);
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .01em;
    }
    .q-mark {
      width: 18px;
      height: 2px;
      margin: 14px 6px 0;
      border-radius: 2px;
      background: var(--accent);
    }
    .q-text {
      flex: 1 1 240px;
      min-width: 0;
      color: var(--ink);
      font-size: 15.5px;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: -.005em;
    }
    .q-flag {
      display: inline-flex;
      align-items: center;
      margin-top: 2px;
      margin-left: auto;
      padding: 4px 8px;
      border: 1px solid rgba(179, 18, 31, .28);
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--danger);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .q-helper {
      margin: 8px 0 0 42px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.55;
    }

    /* --------------------------------- Options --------------------------------- */
    .options {
      display: grid;
      gap: 9px;
      margin: 16px 0 0 42px;
    }
    .option {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--card);
      color: var(--ink-soft);
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .option:hover {
      border-color: var(--line-strong);
      background: #FCF9D9;
      transform: translateY(-1px);
    }
    .option:active { transform: translateY(0); }
    .option input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }
    .option__dot {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin-top: 1px;
      display: grid;
      place-items: center;
      border: 1.5px solid #8F895B;
      border-radius: 50%;
      background: #fff;
      transition: border-color .18s ease, background-color .18s ease;
    }
    .option__dot::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow-bright);
      transform: scale(0);
      transition: transform .16s ease;
    }
    .option__label { font-size: 14px; font-weight: 500; line-height: 1.45; }
    .option.is-selected,
    .option:has(input:checked) {
      border-color: var(--ink);
      background: var(--ink);
      color: #FFFFFF;
      box-shadow: 0 8px 20px -14px rgba(8, 38, 83, .8);
    }
    .option.is-selected .option__dot,
    .option:has(input:checked) .option__dot {
      border-color: rgba(255, 255, 255, .45);
      background: rgba(255, 255, 255, .08);
    }
    .option.is-selected .option__dot::after,
    .option:has(input:checked) .option__dot::after { transform: scale(1); }
    .option:focus-within { outline: 3px solid var(--accent-dark); outline-offset: 2px; }

    /* -------------------------------- Text field -------------------------------- */
    .field { margin: 16px 0 0 42px; }
    .field textarea {
      width: 100%;
      min-height: 124px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background-color: #FFFFFF;
      background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(8, 38, 83, .07) 27px 28px);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 28px;
      resize: vertical;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .field textarea::placeholder { color: #6F6F5E; }
    .field textarea:hover { border-color: var(--line-strong); }
    .field textarea:focus {
      outline: none;
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(254, 19, 40, .2);
    }
    .field-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 10.5px;
      letter-spacing: .02em;
    }

    /* ---------------------------------- Matrix ---------------------------------- */
    .question--matrix .field { margin-left: 0; }
    .matrix-wrap {
      margin-top: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #FFFFFF;
      -webkit-overflow-scrolling: touch;
    }
    .matrix-wrap:focus { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
    .matrix {
      width: 100%;
      min-width: 720px;
      border-collapse: separate;
      border-spacing: 0;
    }
    .matrix caption { text-align: left; }
    .matrix th,
    .matrix td {
      padding: 11px 8px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    .matrix thead th {
      position: sticky;
      top: 0;
      background: var(--yellow-soft);
      color: var(--ink-soft);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
    }
    .matrix thead th:first-child {
      width: 32%;
      padding-left: 14px;
      text-align: left;
    }
    .matrix tbody th {
      position: sticky;
      left: 0;
      z-index: 1;
      width: 32%;
      padding-left: 14px;
      background: var(--card);
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.4;
      text-align: left;
    }
    .matrix tbody tr:last-child th,
    .matrix tbody tr:last-child td { border-bottom: 0; }
    .matrix tbody tr:hover td { background: #FCF9D9; }
    .matrix-cell {
      display: grid;
      place-items: center;
      min-height: 44px;
      cursor: pointer;
    }
    .matrix-cell input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }
    .matrix-cell span {
      width: 21px;
      height: 21px;
      display: grid;
      place-items: center;
      border: 1.5px solid #8F895B;
      border-radius: 50%;
      background: #fff;
      transition: border-color .18s ease, background-color .18s ease;
    }
    .matrix-cell span::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow-bright);
      transform: scale(0);
      transition: transform .16s ease;
    }
    .matrix-cell input:checked + span {
      border-color: var(--ink);
      background: var(--ink);
    }
    .matrix-cell input:checked + span::after { transform: scale(1); }
    .matrix-cell:focus-within span { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
    .matrix tbody tr.is-missing th,
    .matrix tbody tr.is-missing td { background: rgba(179, 18, 31, .07); }
    .matrix tbody tr.is-missing th { color: var(--danger); }
    .swipe-hint {
      display: none;
      align-items: center;
      gap: 6px;
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 10.5px;
    }

    /* ---------------------------------- Errors ---------------------------------- */
    .question.has-error .q-number {
      border-color: rgba(179, 18, 31, .35);
      background: var(--danger-soft);
      color: var(--danger);
    }
    .question.has-error .q-text { color: var(--danger); }
    .question.has-error .option { border-color: rgba(179, 18, 31, .3); }
    .error-msg {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      margin: 12px 0 0 42px;
      color: var(--danger);
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.5;
    }
    .error-msg svg { flex: 0 0 auto; margin-top: 1px; }
    .question--matrix .error-msg { margin-left: 0; }

    /* -------------------------------- Form note --------------------------------- */
    .form-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 30px 0 0;
      padding: 13px 15px;
      border: 1px dashed var(--line-strong);
      border-radius: 12px;
      background: var(--yellow-soft);
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.55;
    }
    .form-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent-ink); }

    /* ---------------------------------- Nav ------------------------------------- */
    .card-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 20px 44px 24px;
      border-top: 1px solid var(--line);
      border-radius: 0 0 var(--radius) var(--radius);
      background: rgba(255, 255, 255, .82);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .01em;
      text-decoration: none;
      cursor: pointer;
      transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .btn svg { flex: 0 0 auto; }
    .btn--primary {
      border-color: var(--accent-dark);
      background: var(--accent-dark);
      color: #FFFFFF;
      box-shadow: 0 12px 24px -16px rgba(204, 4, 20, .85);
    }
    .btn--primary:hover {
      border-color: #A50D25;
      background: #A50D25;
      transform: translateY(-1px);
    }
    .btn--primary:active { transform: translateY(0); }
    .btn--ghost {
      border-color: rgba(8, 38, 83, .2);
      background: transparent;
      color: var(--ink);
    }
    .btn--ghost:hover {
      border-color: rgba(8, 38, 83, .38);
      background: rgba(8, 38, 83, .05);
    }
    .btn--danger {
      border-color: var(--danger);
      background: var(--danger);
      color: #fff;
    }
    .btn--danger:hover {
      border-color: #8F0E1A;
      background: #8F0E1A;
    }
    .btn:disabled {
      opacity: .32;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
    .card-nav .btn--primary { margin-left: auto; }

    /* --------------------------------- Footer ----------------------------------- */
    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 4px 42px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.5;
    }
    .footer p { margin: 0; }
    .footer__right { display: flex; align-items: center; gap: 16px; }
    .demo-note { color: var(--muted); }
    .link-btn {
      padding: 0;
      border: 0;
      background: none;
      color: var(--ink-soft);
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .link-btn:hover { color: var(--ink); }
    .link-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; border-radius: 2px; }

    /* ---------------------------------- Thanks ---------------------------------- */
    .step--thanks .step__body { padding: 56px 44px; }
    .thanks { max-width: 620px; margin: 0 auto; text-align: center; }
    .thanks__seal {
      width: 86px;
      height: 86px;
      margin: 0 auto 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--ink);
      color: var(--yellow-bright);
      box-shadow: 0 0 0 6px var(--yellow-soft), 0 20px 40px -24px rgba(8, 38, 83, .6);
    }
    .thanks__seal svg { width: 36px; height: 36px; }
    .thanks__kicker {
      margin: 0 0 12px;
      color: var(--accent-ink);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .thanks h2 {
      max-width: 20ch;
      margin: 0 auto;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.4vw, 3rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
    .thanks h2:focus { outline: none; }
    .thanks > p {
      max-width: 56ch;
      margin: 18px auto 0;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.7;
    }
    .thanks .thanks__note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 26px;
      padding: 9px 13px;
      border: 1px dashed var(--line-strong);
      border-radius: 999px;
      background: var(--yellow-soft);
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }
    .thanks__note svg { flex: 0 0 auto; color: var(--accent-ink); }
    .thanks__actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 30px;
    }

    /* ---------------------------------- Dialog ---------------------------------- */
    .dialog {
      width: min(100% - 32px, 430px);
      padding: 0;
      border: 0;
      border-radius: 20px;
      background: transparent;
      color: var(--ink);
    }
    .dialog::backdrop {
      background: rgba(8, 38, 83, .78);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
    .dialog__card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--card);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
    }
    .dialog__icon {
      width: 48px;
      height: 48px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--danger-soft);
      color: var(--danger);
    }
    .dialog h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.01em;
    }
    .dialog p {
      margin: 10px 0 0;
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.6;
    }
    .dialog__actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 24px;
    }

    /* --------------------------------- Noscript --------------------------------- */
    .noscript { padding: 32px 24px; text-align: center; color: var(--ink-soft); }
    .noscript strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
    }
    .noscript p { margin: 0; font-size: 14px; }

    /* -------------------------------- Responsive -------------------------------- */
    @media (max-width: 720px) {
      .topbar__inner,
      .shell,
      .topbar__progress { width: calc(100% - 32px); }
      .topbar__inner { min-height: 60px; gap: 10px; }
      .brand__text small { display: none; }
      .topbar__meta { gap: 9px; }
      .anonymity-pill { padding: 5px 8px; font-size: 9px; }
      .step-label { font-size: 10px; }
      .shell { padding-top: 20px; }
      .card { border-radius: 22px; scroll-margin-top: 76px; }
      .hero__panel { padding: 30px 24px 28px; border-radius: 22px 22px 0 0; }
      .hero__inner { grid-template-columns: 1fr; gap: 24px; }
      .hero__logo-wrap { order: -1; width: 140px; height: 140px; }
      .hero__logo { width: 132px; height: 132px; }
      .hero__title { max-width: 14ch; font-size: clamp(2rem, 8vw, 2.8rem); }
      .hero__subtitle { margin-top: 14px; font-size: 13.5px; }
      .hero__desc { font-size: 13px; }
      .hero__badges { margin-top: 18px; }
      .step__body,
      .step--start .step__body { padding: 30px 24px 26px; }
      .section-head { padding-bottom: 20px; margin-bottom: 24px; }
      .section-head h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
      .questions { gap: 26px; }
      .question + .question { padding-top: 26px; }
      .q-text { flex: 1 1 0; }
      .options,
      .field,
      .q-helper { margin-left: 0; }
      .q-helper { padding-left: 42px; }
      .error-msg { margin-left: 0; }
      .card-nav {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
        border-radius: 0 0 22px 22px;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
      .card-nav .btn { flex: 1; }
      .card-nav .btn--primary { margin-left: 0; }
      .btn { min-height: 44px; }
      .footer { flex-direction: column; align-items: flex-start; padding-bottom: 28px; }
      .footer__right { width: 100%; justify-content: space-between; }
      .step--thanks .step__body { padding: 44px 24px; }
      .swipe-hint { display: flex; }
    }
    @media (max-width: 480px) {
      .brand__text strong { font-size: 11px; }
      .topbar__meta .anonymity-pill span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .anonymity-pill { padding: 6px; }
      .brand__logo { width: 38px; height: 38px; }
      .hero__logo-wrap { width: 120px; height: 120px; }
      .hero__logo { width: 112px; height: 112px; }
      .hero__panel { padding: 26px 20px 24px; }
      .step__body,
      .step--start .step__body { padding: 26px 20px 24px; }
      .card-nav { padding-right: 20px; padding-left: 20px; }
      .btn { gap: 6px; padding: 0 14px; font-size: 12px; }
      .q-head { gap: 10px; }
      .q-number { min-width: 28px; height: 28px; font-size: 13px; }
      .q-helper { padding-left: 38px; }
      .q-text { font-size: 14.5px; }
      .q-mark { margin-right: 4px; margin-left: 4px; }
      .option { padding: 12px 13px; }
      .option__label { font-size: 13.5px; }
      .section-chip { font-size: 9px; }
      .footer__right { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
      html { scroll-behavior: auto; }
    }
  
/* ---------------------------- Acceso / puerta ------------------------------ */
.shell--gate { width: min(100% - 48px, 560px); }
.gate-card { overflow: hidden; }
.gate-hero {
  position: relative;
  padding: 34px 32px 32px;
  overflow: hidden;
  border-bottom: 4px solid var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ink);
  color: #FFFFFF;
  text-align: center;
}
.gate-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 30px 30px;
}
.gate-hero::after {
  content: '2026';
  position: absolute;
  right: -8px;
  bottom: -32px;
  pointer-events: none;
  color: rgba(255, 255, 255, .04);
  font-family: var(--font-display);
  font-size: 140px;
  line-height: 1;
  letter-spacing: -.07em;
}
.gate-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .32));
}
.gate-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: var(--yellow-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gate-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.gate-description {
  position: relative;
  z-index: 1;
  max-width: 38ch;
  margin: 10px auto 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.6;
}
.gate-body { padding: 30px 32px 32px; background: var(--card); }
.gate-form { display: grid; gap: 10px; }
.gate-label { color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.gate-input {
  width: 100%;
  height: 58px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gate-input::placeholder { color: #8F895B; font-size: 15px; font-weight: 500; letter-spacing: .12em; }
.gate-input:hover { border-color: var(--line-strong); }
.gate-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(254, 19, 40, .2); }
.gate-submit { width: 100%; min-height: 50px; margin-top: 4px; }
.gate-error,
.gate-info {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.gate-error { border: 1px solid rgba(179, 18, 31, .25); background: var(--danger-soft); color: var(--danger); }
.gate-info { border: 1px dashed var(--line-strong); background: var(--yellow-soft); color: var(--ink); }
.gate-note { margin: 18px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; text-align: center; }

/* ------------------------------- Modo demo --------------------------------- */
.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--yellow-bright);
  border-radius: 12px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12.5px;
  line-height: 1.5;
}
.demo-banner strong {
  color: var(--yellow-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.demo-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--yellow-bright);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------- Encuesta enviada ------------------------------- */
.is-submitted .thanks__actions,
.is-submitted #resetBtn { display: none !important; }

@media (max-width: 600px) {
  .shell--gate { width: calc(100% - 32px); }
  .gate-hero { padding: 28px 22px 26px; }
  .gate-logo { width: 104px; height: 104px; }
  .gate-body { padding: 24px 22px 26px; }
  .gate-input { height: 54px; font-size: 20px; }
}

/* Salir de la encuesta / demo */
.topbar-logout { margin: 0; flex: 0 0 auto; }
.topbar-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.topbar-exit:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .36); }
.topbar-exit:focus-visible { outline: 3px solid var(--yellow-bright); outline-offset: 2px; }
.topbar-exit svg { color: var(--yellow-bright); flex: 0 0 auto; }
@media (max-width: 520px) {
  .topbar-exit { padding: 0 8px; font-size: 9px; gap: 5px; }
}

/* Sesión activa en la puerta de acceso */
.gate-session { display: grid; gap: 13px; }
.gate-session__badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(8, 38, 83, .14);
  border-radius: 999px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gate-session__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gate-session__actions > .btn,
.gate-session__actions > .gate-logout { flex: 1 1 150px; }
.gate-logout { display: flex; margin: 0; }
.gate-logout .btn { width: 100%; }

/* Encabezado interno de pregunta (nuevo bloque de autoevaluación) */
.q-eyebrow {
  display: block;
  margin: 0 0 7px 42px;
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .q-eyebrow { margin-left: 42px; }
}
@media (max-width: 480px) {
  .q-eyebrow { margin-left: 38px; }
}