:root {
          --brand-blue: #0c377b;
          --brand-blue-dark: #082655;
          --brand-gold: #e3ba5f;
          --brand-ink: #1f2937;
          --brand-muted: #6b7280;
          --brand-border: #e5e7eb;
        }

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

        html,
        body {
          height: 100%;
          font-family: 'Open Sans', sans-serif;
        }

        /* ── Layout ─────────────────────────────────────── */
        .lp-shell {
          display: flex;
          height: 100vh;
          overflow: hidden;
        }

        /* ── Panel izquierdo: imagen + texto ────────────── */
        .lp-image {
          flex: 0 0 60%;
          position: relative;
          background: url('../img/background_login.png') center center / cover no-repeat;
        }

        .lp-image::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(to top,
              rgba(8, 30, 65, .85) 0%,
              rgba(8, 30, 65, .40) 50%,
              rgba(8, 30, 65, .10) 100%);
        }

        .lp-image-content {
          position: absolute;
          bottom: 3rem;
          left: 3rem;
          right: 3rem;
          color: #fff;
        }

        .lp-image-content h1 {
          font-size: 2.1rem;
          font-weight: 700;
          line-height: 1.25;
          margin-bottom: .6rem;
        }

        .lp-image-content h1 span {
          color: var(--brand-gold);
        }

        .lp-lead {
          font-size: .95rem;
          color: rgba(255, 255, 255, .80);
          line-height: 1.65;
          margin-bottom: 1.6rem;
          max-width: 480px;
        }

        .lp-features {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: .7rem;
        }

        .lp-features li {
          display: flex;
          align-items: center;
          gap: .75rem;
          font-size: .93rem;
          color: rgba(255, 255, 255, .92);
        }

        .lp-features li .feat-icon {
          width: 30px;
          height: 30px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: rgba(227, 186, 95, .18);
          color: var(--brand-gold);
          font-size: .85rem;
        }

        /* ── Panel derecho: formulario ──────────────────── */
        .lp-form {
          flex: 0 0 40%;
          background: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow-y: auto;
        }

        .lp-form-inner {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 3rem 3rem 1.5rem;
        }

        /* Logo */
        .lp-logo {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 2.25rem;
        }

        .lp-logo-img {
          max-width: 160px;
          height: auto;
          margin-bottom: .85rem;
        }

        .lp-logo h2 {
          font-size: 1.6rem;
          font-weight: 700;
          color: var(--brand-blue);
          margin-bottom: .2rem;
        }

        .lp-logo p {
          font-size: .72rem;
          font-weight: 600;
          letter-spacing: .18em;
          color: var(--brand-muted);
          text-transform: uppercase;
        }

        /* Fields */
        .lp-field {
          margin-bottom: 1rem;
        }

        .lp-field-header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: .35rem;
        }

        .lp-field-header label {
          font-size: .8rem;
          font-weight: 600;
          color: var(--brand-ink);
        }

        .lp-field-header a {
          font-size: .78rem;
          color: var(--brand-blue);
          text-decoration: none;
        }

        .lp-field-header a:hover {
          text-decoration: underline;
        }

        .lp-input-wrap {
          position: relative;
        }

        .lp-input-wrap i.fi {
          position: absolute;
          left: .9rem;
          top: 50%;
          transform: translateY(-50%);
          color: var(--brand-muted);
          font-size: .9rem;
          pointer-events: none;
        }

        .lp-input {
          width: 100%;
          height: 48px;
          padding: 0 2.8rem;
          border: 1px solid var(--brand-border);
          border-radius: 10px;
          font-size: .9rem;
          color: var(--brand-ink);
          background: #fafafa;
          transition: border-color .15s, box-shadow .15s;
        }

        .lp-input::placeholder {
          color: #b0b8c4;
        }

        .lp-input:focus {
          outline: none;
          border-color: var(--brand-blue);
          background: #fff;
          box-shadow: 0 0 0 3px rgba(12, 55, 123, .10);
        }

        .eye-toggle {
          position: absolute;
          right: .9rem;
          top: 50%;
          transform: translateY(-50%);
          color: var(--brand-muted);
          cursor: pointer;
          font-size: .9rem;
          background: none;
          border: none;
          padding: 0;
        }

        /* Recaptcha */
        .lp-recaptcha {
          margin: .5rem 0 1rem;
        }

        /* Checkbox */
        .lp-check {
          display: flex;
          align-items: center;
          gap: .5rem;
          margin-bottom: 1.25rem;
          font-size: .85rem;
          color: var(--brand-ink);
          cursor: pointer;
        }

        .lp-check input[type="checkbox"] {
          width: 16px;
          height: 16px;
          accent-color: var(--brand-blue);
          cursor: pointer;
        }

        /* Button */
        .btn-login {
          width: 100%;
          height: 48px;
          border: none;
          border-radius: 10px;
          background: var(--brand-blue);
          color: #fff;
          font-size: .95rem;
          font-weight: 600;
          cursor: pointer;
          transition: background .15s;
          letter-spacing: .01em;
        }

        .btn-login:hover {
          background: var(--brand-blue-dark);
        }

        /* Footer */
        .lp-footer {
          padding: 1.25rem 3rem 2rem;
          text-align: center;
        }

        .lp-footer p {
          font-size: .75rem;
          color: var(--brand-muted);
          margin-bottom: .3rem;
        }

        .lp-footer a {
          font-size: .75rem;
          color: var(--brand-muted);
          text-decoration: none;
          margin: 0 .4rem;
        }

        .lp-footer a:hover {
          text-decoration: underline;
        }

        .lp-footer-sep {
          color: var(--brand-border);
          font-size: .75rem;
        }

        /* ── Responsive ─────────────────────────────────── */
        @media (max-width: 768px) {
          .lp-shell {
            flex-direction: column;
            height: auto;
            min-height: 100vh;
          }

          .lp-image {
            flex: none;
            height: 300px;
          }

          .lp-image-content {
            bottom: 1.5rem;
            left: 1.5rem;
            right: 1.5rem;
          }

          .lp-image-content h1 {
            font-size: 1.5rem;
            margin-bottom: .4rem;
          }

          .lp-lead {
            font-size: .88rem;
            margin-bottom: 1.1rem;
          }

          .lp-form {
            flex: none;
          }

          .lp-form-inner {
            padding: 2rem 1.75rem 1rem;
          }

          .lp-footer {
            padding: 1rem 1.75rem 1.75rem;
          }
        }