:root {
      color-scheme: dark;
      --ink: #172435;
      --muted: #c8c0b2;
      --navy: #754d2a;
      --navy-hover: #5f3d22;
      --gold: #d0a55e;
      --line: rgba(232, 205, 157, .18);
      --paper: rgba(9, 24, 31, .90);
    }

    * { box-sizing: border-box; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      align-items: center;
      justify-items: center;
      padding: clamp(16px, 3vw, 40px);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        linear-gradient(105deg, rgba(4, 17, 27, .42), rgba(4, 17, 27, .16) 46%, rgba(4, 17, 27, .46)),
        url("/acceso/hero-30f4b5a6e05a.jpg") center / cover fixed no-repeat,
        #081a26;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 50% 45%, transparent 0 28%, rgba(2, 10, 17, .18) 68%, rgba(2, 10, 17, .55) 100%);
    }

    .mission {
      position: fixed;
      right: clamp(32px, 7vw, 132px);
      bottom: clamp(104px, 15vh, 154px);
      z-index: 1;
      width: min(38vw, 560px);
      padding: 0;
      color: rgba(255, 255, 255, .9);
      text-align: left;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .86);
    }

    .mission blockquote {
      margin: 0;
      font: 500 13px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: .01em;
    }

    .mission cite {
      display: block;
      margin-top: 8px;
      color: rgba(255, 255, 255, .92);
      font: 700 13px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .shell {
      position: relative;
      width: min(100%, 340px);
      margin-left: 0;
      z-index: 1;
    }

    .card {
      padding: clamp(17px, 2.4vw, 21px);
      border: 1px solid rgba(219, 183, 122, .28);
      border-radius: 20px;
      color: #f3eadb;
      background: var(--paper);
      box-shadow: 0 26px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .07);
      backdrop-filter: blur(16px) saturate(1.08);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
    }

    .brand { text-align: center; }

    .mark {
      width: 43px;
      height: 43px;
      margin: 0 auto 8px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 13px;
      color: white;
      background: linear-gradient(145deg, #125786, #092f4d);
      box-shadow: 0 12px 26px rgba(7, 49, 78, .28), inset 0 1px 0 rgba(255,255,255,.22);
      font: 700 20px/1 Georgia, "Times New Roman", serif;
      letter-spacing: .04em;
      overflow: hidden;
    }

    .mark img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 10px;
    }

    h1 {
      margin: 0;
      font: 700 clamp(23px, 4vw, 27px)/1.05 Georgia, "Times New Roman", serif;
      letter-spacing: .02em;
      color: #f2e5cf;
    }

    .subtitle {
      margin: 5px auto 0;
      max-width: 320px;
      color: #d6cbbb;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
    }

    .mode {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 9px 0 10px;
      padding: 5px 9px;
      border: 1px solid rgba(219, 183, 122, .24);
      border-radius: 999px;
      color: #ead4ac;
      background: rgba(209, 164, 90, .1);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .mode::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #78b88f;
      box-shadow: 0 0 0 4px rgba(120, 184, 143, .12);
    }

    .field { margin-top: 8px; }
    .registration-only { display: none; }
    body.registering .registration-only { display: block; }
    .status.success { border-color: rgba(120,184,143,.34); color: #d8f1e1; background: rgba(30,89,61,.7); }

    label {
      display: block;
      margin-bottom: 4px;
      color: #e8ddca;
      font-size: 14px;
      font-weight: 700;
    }

    input {
      width: 100%;
      height: 42px;
      padding: 0 12px;
      border: 1px solid rgba(210, 179, 126, .48);
      border-radius: 13px;
      outline: none;
      color: var(--ink);
      background: rgba(250, 247, 240, .96);
      font: inherit;
      font-size: 16px;
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    input:focus {
      border-color: #d0a55e;
      box-shadow: 0 0 0 4px rgba(208, 165, 94, .17);
    }

    .primary {
      width: 100%;
      min-height: 42px;
      margin-top: 11px;
      border: 0;
      border-radius: 13px;
      cursor: pointer;
      color: white;
      background: var(--navy);
      box-shadow: 0 11px 22px rgba(0, 0, 0, .28);
      font: inherit;
      font-size: 15px;
      font-weight: 800;
      transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .primary:hover { background: var(--navy-hover); box-shadow: 0 13px 25px rgba(0,0,0,.34); transform: translateY(-1px); }
    .primary:focus-visible, a:focus-visible { outline: 3px solid rgba(208, 165, 94, .55); outline-offset: 3px; }

    .security {
      margin: 8px 4px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 11px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      font-size: 14px;
    }

    .actions a { color: #e4bd79; font-weight: 750; text-decoration: none; }
    .actions a:hover { text-decoration: underline; }

    details {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255, 255, 255, .045);
    }

    summary {
      padding: 13px 15px;
      cursor: pointer;
      color: #ead8bd;
      font-size: 13px;
      font-weight: 750;
    }

    details p {
      margin: 0;
      padding: 0 15px 15px;
      color: #c9c0b2;
      font-size: 13px;
      line-height: 1.5;
    }

    .status {
      display: none;
      margin: 0 0 18px;
      padding: 12px 14px;
      border: 1px solid rgba(225, 180, 105, .35);
      border-radius: 12px;
      color: #ffe3ad;
      background: rgba(91, 59, 24, .72);
      font-size: 13px;
      line-height: 1.45;
    }

    .status.visible { display: block; }

    .footnote {
      max-width: 310px;
      margin: 9px auto 0;
      color: rgba(242, 229, 207, .86);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 10px;
      font-weight: 500;
      line-height: 1.42;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.55);
    }

    .verse-line { display: inline; white-space: normal; }
    .verse-line + .verse-line::before { content: " "; }
    .no-break { white-space: nowrap; }
    .reference { display: block; margin-top: 3px; color: #edd6ad; font-weight: 750; }

    @media (max-width: 1100px) {
      body { display: flex; min-height: 100%; flex-direction: column; justify-content: center; align-items: center; }
      .shell { margin-left: 0; }
      .mission { position: relative; right: auto; bottom: auto; width: min(100%, 400px); margin-bottom: 16px; padding: 0 4px; }
      .mission blockquote, .mission cite { font-size: 12px; }
    }

    @media (max-width: 620px) {
      body { align-items: center; padding: 14px 14px 104px; background-position: 43% center; }
      .card { padding: 17px 16px; border-radius: 18px; }
      .mark { width: 43px; height: 43px; margin-bottom: 8px; border-radius: 13px; font-size: 20px; }
      .subtitle { font-size: 14px; }
      .actions { align-items: flex-start; flex-direction: column; gap: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }