/* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      width: 100%;
    }

    body {
      font-family: 'Josefin Sans', sans-serif;
      background: #0a0a0a;
      color:#caa96e !important;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    /* ============================================================
       VARIABLES DE MARCA BE FINANCE
       Paleta: Brand Guide 2024
       Dorado: #bd9b60  |  Negro: #0a0a0a  |  Blanco: #ffffff
    ============================================================ */
    :root {
      --bf-gold:        #bd9b60;
      --bf-gold-light:  #caa96e;
      --bf-gold-dim:    #bd9b6040;
      --bf-gold-ghost:  #bd9b6012;
      --bf-black:       #0a0a0a;
      --bf-dark:        #0c0c0c;
      --bf-panel:       #111111;
      --bf-surface:     #131313;
      --bf-border:      #222220;
      --bf-border-dim:  #1e1e1a;
      --bf-text:        #c8bea0;
      --bf-text-muted:  #fff;
      --bf-text-dim:    #fff;
      --bf-text-ghost:  #252522;
      --bf-white:       #ffffff;
    }

    /* ============================================================
       LAYOUT PRINCIPAL
    ============================================================ */
    .bf-page {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bf-black);
    }

    .bf-card {
      display: flex;
      width: 100%;
      max-width: 900px;
      min-height: 540px;
      border-radius: 8px;
      overflow: hidden;
      border: 0.5px solid #1a1a16;
    }

    /* ============================================================
       COLUMNA IZQUIERDA — Branding / Valor
    ============================================================ */
    .bf-left {
      flex: 1;
      background: var(--bf-panel);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 52px 48px;
      position: relative;
      border-right: 0.5px solid #bd9b6020;
      overflow: hidden;
    }

    /* Patrón geométrico de fondo */
    .bf-geo {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      opacity: 0.045;
    }

    .bf-tagline {
      font-size: 10px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--bf-gold);
      margin-bottom: 20px;
      font-weight: 300;
    }

    .bf-headline {
      font-size: 30px;
      font-weight: 600;
      color: var(--bf-white);
      line-height: 1.2;
      margin-bottom: 16px;
      letter-spacing: 0.5px;
    }

    .bf-headline em {
      color: var(--bf-gold);
      font-style: normal;
    }

    .bf-description {
      font-size: 12px;
      color: var(--bf-text-muted);
      line-height: 1.85;
      margin-bottom: 36px;
      font-weight: 200;
      max-width: 300px;
    }

    .bf-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--bf-gold-ghost);
      border: 0.5px solid var(--bf-gold-dim);
      border-radius: 100px;
      padding: 7px 16px;
      font-size: 10px;
      color: var(--bf-gold);
      letter-spacing: 1.5px;
      font-weight: 300;
      margin-bottom: 44px;
    }

    .bf-badge-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--bf-gold);
      flex-shrink: 0;
    }

    /* Grid de íconos */
    .bf-icon-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .bf-icon-item {
      background: #161616;
      border: 0.5px solid var(--bf-border-dim);
      border-radius: 6px;
      padding: 14px 10px;
      text-align: center;
    }

    .bf-icon-item i {
      font-size: 18px;
      color: var(--bf-gold);
      display: block;
      margin-bottom: 7px;
    }

    .bf-icon-item span {
      font-size: 9px;
      color:  var(--bf-gold);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: bold;
    }

    /* Pie de columna izquierda */
    .bf-left-footer {
      position: absolute;
      bottom: 28px;
      left: 48px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bf-left-footer-line {
      width: 24px;
      height: 0.5px;
      background: #bd9b6030;
    }

    .bf-left-footer-text {
      font-size: 8px;
      color: #caa96e;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 300;
    }

    /* ============================================================
       COLUMNA DERECHA — Formulario
    ============================================================ */
    .bf-right {
      width: 360px;
      flex-shrink: 0;
      background: var(--bf-dark);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 38px;
    }

    /* Logo */
    .bf-logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 36px;
    }

    .bf-logo-svg {
      width: 48px;
      height: auto;
      margin-bottom: 13px;
    }

    .bf-brand-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--bf-gold);
      letter-spacing: 5px;
      text-transform: uppercase;
      line-height: 1;
      display: block;
    }

    .bf-brand-sub {
      font-size: 8px;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: #fff;
      margin-top: 5px;
      display: block;
      font-weight: 200;
    }

    .bf-logo-divider {
      width: 36px;
      height: 0.5px;
      background: #fff;
      margin-top: 14px;
    }

    /* Etiqueta de sección */
    .bf-section-label {
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bf-text-dim);
      text-align: center;
      margin-bottom: 24px;
      font-weight: 300;
    }

    /* Campos */
    .bf-field {
      margin-bottom: 18px;
    }

    .bf-field label {
      display: block;
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #555550;
      margin-bottom: 7px;
      font-weight: 300;
    }

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

    .bf-input-wrap i {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #2e2e2a;
      pointer-events: none;
      transition: color 0.2s;
    }

    .bf-input-wrap:focus-within i {
      color: var(--bf-gold);
    }

    .bf-input {
      width: 100%;
      background: var(--bf-surface);
      border: 0.5px solid var(--bf-border);
      border-radius: 3px;
      padding: 11px 14px 11px 38px;
      font-size: 12px;
      color: var(--bf-text);
      font-family: 'Josefin Sans', sans-serif;
      letter-spacing: 0.8px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none;
    }

    .bf-input:focus {
      border-color: #bd9b6060;
      box-shadow: 0 0 0 3px #bd9b6010;
    }

    .bf-input::placeholder {
      color: #282824;
      letter-spacing: 0.5px;
    }

    /* Botón principal */
    .bf-btn {
      width: 100%;
      background: var(--bf-gold);
      border: none;
      border-radius: 3px;
      padding: 13px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--bf-black);
      cursor: pointer;
      font-family: 'Josefin Sans', sans-serif;
      margin-top: 6px;
      transition: background 0.2s, transform 0.1s;
    }

    .bf-btn:hover {
      background: var(--bf-gold-light);
    }

    .bf-btn:active {
      transform: scale(0.99);
    }

    /* Enlace olvidé contraseña */
    .bf-forgot {
      text-align: center;
      margin-top: 14px;
      font-size: 10px;
      color: #fff;
      letter-spacing: 0.5px;
      font-weight: 200;
    }

    .bf-forgot a {
      color: #fff;
      text-decoration: none;
      letter-spacing: 1px;
      transition: color 0.2s;
    }

    .bf-forgot a:hover {
      color: var(--bf-gold);
    }

    /* Footer */
    .bf-footer {
      margin-top: 34px;
      text-align: center;
      font-size: 9px;
      color: #fff;
      letter-spacing: 0.5px;
      font-weight: 200;
      line-height: 2;
    }

    /* ============================================================
       RESPONSIVE — Tablet / Mobile
    ============================================================ */
    @media (max-width: 720px) {
      .bf-card {
        flex-direction: column;
        min-height: unset;
      }

      .bf-left {
        padding: 40px 32px 48px;
      }

      .bf-left-footer {
        left: 32px;
      }

      .bf-right {
        width: 100%;
        padding: 40px 32px;
      }

      .bf-headline {
        font-size: 24px;
      }

      .bf-icon-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .bf-page {
        padding: 0;
        align-items: stretch;
      }

      .bf-card {
        border-radius: 0;
        min-height: 100vh;
      }

      .bf-left {
        padding: 36px 24px 52px;
      }

      .bf-right {
        padding: 36px 24px;
      }
    }