*,

    *::before,

    *::after {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    :root {

      --primary: #a855f7;

      --primary-dark: #7c3aed;

      --primary-glow: rgba(168, 85, 247, 0.4);

      --secondary: #06b6d4;

      --accent: #f0abfc;

      --bg-deep: #0a0010;

      --glass-bg: rgba(255, 255, 255, 0.04);

      --glass-border: rgba(168, 85, 247, 0.25);

      --text-primary: #f5f0ff;

      --text-secondary: rgba(245, 240, 255, 0.55);

      --input-bg: rgba(255, 255, 255, 0.05);

      --input-border: rgba(168, 85, 247, 0.3);

      --error: #f87171;

    }



    html,

    body {

      height: 100vh;

      font-family: 'Outfit', sans-serif;

      background: var(--bg-deep);

      color: var(--text-primary);

    }



    /* Fondo animado */

    .bg-scene {

      position: fixed;

      inset: 0;

      z-index: 0;

      background:

        radial-gradient(ellipse 80% 70% at 20% 80%, rgba(124, 58, 237, 0.25) 0%, transparent 60%),

        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),

        linear-gradient(160deg, #0a0010 0%, #120020 50%, #0d0018 100%);

    }



    .smoke {

      position: absolute;

      border-radius: 50%;

      filter: blur(60px);

      opacity: 0;

      animation: float-up linear infinite;

      pointer-events: none;

    }



    .smoke:nth-child(1) {

      width: 300px;

      height: 300px;

      background: rgba(168, 85, 247, 0.12);

      left: 10%;

      animation-duration: 12s;

      animation-delay: 0s;

    }



    .smoke:nth-child(2) {

      width: 200px;

      height: 200px;

      background: rgba(6, 182, 212, 0.10);

      left: 35%;

      animation-duration: 15s;

      animation-delay: 3s;

    }



    .smoke:nth-child(3) {

      width: 250px;

      height: 250px;

      background: rgba(168, 85, 247, 0.08);

      left: 60%;

      animation-duration: 10s;

      animation-delay: 6s;

    }



    .smoke:nth-child(4) {

      width: 180px;

      height: 180px;

      background: rgba(240, 171, 252, 0.10);

      left: 80%;

      animation-duration: 18s;

      animation-delay: 1s;

    }



    .smoke:nth-child(5) {

      width: 350px;

      height: 350px;

      background: rgba(124, 58, 237, 0.07);

      left: 50%;

      animation-duration: 20s;

      animation-delay: 9s;

    }



    @keyframes float-up {

      0% {

        transform: translateY(110vh) scale(0.6);

        opacity: 0;

      }



      15% {

        opacity: 1;

      }



      85% {

        opacity: 0.6;

      }



      100% {

        transform: translateY(-20vh) scale(1.4);

        opacity: 0;

      }

    }



    .bg-grid {

      position: fixed;

      inset: 0;

      z-index: 0;

      background-image:

        linear-gradient(rgba(168, 85, 247, .04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(168, 85, 247, .04) 1px, transparent 1px);

      background-size: 60px 60px;

    }



    /* Layout */

    .page {

      position: relative;

      z-index: 1;

      min-height: 100vh;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 24px;

    }



    /* Tarjeta */

    .card {

      width: 100%;

      max-width: 430px;

      background: var(--glass-bg);

      border: 1px solid var(--glass-border);

      border-radius: 28px;

      padding: 48px 40px 44px;

      backdrop-filter: blur(32px) saturate(1.4);

      -webkit-backdrop-filter: blur(32px) saturate(1.4);

      box-shadow: 0 0 0 1px rgba(168, 85, 247, .08), 0 32px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(168, 85, 247, .06) inset;

      animation: card-in .7s cubic-bezier(.22, 1, .36, 1) both;

    }



    @keyframes card-in {

      from {

        opacity: 0;

        transform: translateY(28px) scale(.97);

      }



      to {

        opacity: 1;

        transform: translateY(0) scale(1);

      }

    }



    /* Brand */

    .brand {

      text-align: center;

      margin-bottom: 36px;

    }



    .brand-icon {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      width: 68px;

      height: 68px;

      border-radius: 20px;

      background: linear-gradient(135deg, var(--primary-dark), var(--primary));

      box-shadow: 0 8px 32px var(--primary-glow), 0 0 0 1px rgba(168, 85, 247, .3);

      margin-bottom: 18px;

      position: relative;

    }



    .brand-icon::before {

      content: '';

      position: absolute;

      inset: 0;

      background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);

    }



    .brand-icon svg {

      width: 36px;

      height: 36px;

      fill: #fff;

      position: relative;

      z-index: 1;

    }



    .brand-name {

      font-size: 1.9rem;

      font-weight: 800;

      letter-spacing: -.5px;

      background: linear-gradient(90deg, #e9d5ff, #a855f7, #06b6d4);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      background-clip: text;

    }



    .brand-tagline {

      font-size: .82rem;

      color: var(--text-secondary);

      margin-top: 4px;

      letter-spacing: .5px;

    }



    .card-title {

      font-size: 1.35rem;

      font-weight: 700;

      margin-bottom: 6px;

    }



    .card-subtitle {

      font-size: .85rem;

      color: var(--text-secondary);

      margin-bottom: 28px;

    }



    /* Form */

    .form-group {

      margin-bottom: 18px;

      position: relative;

    }



    label {

      display: block;

      font-size: .8rem;

      font-weight: 600;

      color: var(--text-secondary);

      margin-bottom: 8px;

      letter-spacing: .4px;

      text-transform: uppercase;

    }



    .input-wrapper {

      position: relative;

      display: flex;

      align-items: center;

    }



    .input-icon {

      position: absolute;

      left: 14px;

      display: flex;

      align-items: center;

      color: var(--text-secondary);

      pointer-events: none;

      transition: color .2s;

    }



    .input-icon svg {

      width: 18px;

      height: 18px;

      stroke: currentColor;

      fill: none;

      stroke-width: 1.7;

    }



    .input-wrapper:focus-within .input-icon {

      color: var(--primary);

    }



    input[type="email"],

    input[type="password"],

    input[type="text"] {

      width: 100%;

      background: var(--input-bg);

      border: 1px solid var(--input-border);

      border-radius: 12px;

      padding: 13px 44px;

      font-family: 'Outfit', sans-serif;

      font-size: .95rem;

      color: var(--text-primary);

      outline: none;

      transition: border-color .25s, box-shadow .25s, background .25s;

    }



    input::placeholder {

      color: rgba(245, 240, 255, .28);

    }



    input:focus {

      border-color: var(--primary);

      background: rgba(168, 85, 247, .06);

      box-shadow: 0 0 0 3px rgba(168, 85, 247, .15);

    }



    input.has-error {

      border-color: var(--error) !important;

      box-shadow: 0 0 0 3px rgba(248, 113, 113, .12) !important;

    }



    .toggle-pass {

      position: absolute;

      right: 14px;

      background: none;

      border: none;

      cursor: pointer;

      color: var(--text-secondary);

      display: flex;

      align-items: center;

      padding: 4px;

      border-radius: 6px;

      transition: color .2s;

    }



    .toggle-pass:hover {

      color: var(--primary);

    }



    .toggle-pass svg {

      width: 18px;

      height: 18px;

      stroke: currentColor;

      fill: none;

      stroke-width: 1.7;

    }



    .form-extras {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 24px;

      margin-top: 4px;

    }



    .remember {

      display: flex;

      align-items: center;

      gap: 8px;

      cursor: pointer;

      user-select: none;

    }



    .remember input[type="checkbox"] {

      appearance: none;

      -webkit-appearance: none;

      width: 18px;

      height: 18px;

      border: 1.5px solid var(--input-border);

      border-radius: 5px;

      background: var(--input-bg);

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

      padding: 0;

      transition: background .2s, border-color .2s;

    }



    .remember input[type="checkbox"]:checked {

      background: var(--primary);

      border-color: var(--primary);

    }



    .remember input[type="checkbox"]:checked::after {

      content: '';

      display: block;

      width: 5px;

      height: 9px;

      border: 2px solid #fff;

      border-top: none;

      border-left: none;

      transform: rotate(45deg) translate(1px, -1px);

      margin: auto;

    }



    .remember span {

      font-size: .84rem;

      color: var(--text-secondary);

    }



    .forgot-link {

      font-size: .84rem;

      color: var(--accent);

      text-decoration: none;

      font-weight: 500;

      transition: color .2s;

    }



    .forgot-link:hover {

      color: var(--primary);

    }



    /* Boton submit */

    .btn-login {

      width: 100%;

      padding: 14px;

      border: none;

      border-radius: 12px;

      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);

      color: #fff;

      font-family: 'Outfit', sans-serif;

      font-size: 1rem;

      font-weight: 700;

      cursor: pointer;

      position: relative;

      transition: transform .18s, box-shadow .18s;

      box-shadow: 0 4px 24px rgba(168, 85, 247, .35), 0 0 0 1px rgba(168, 85, 247, .2);

    }



    .btn-login::before {

      content: '';

      position: absolute;

      inset: 0;

      background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);

      opacity: 0;

      transition: opacity .2s;

    }



    .btn-login:hover {

      transform: translateY(-2px);

      box-shadow: 0 8px 36px rgba(168, 85, 247, .5);

    }



    .btn-login:hover::before {

      opacity: 1;

    }



    .btn-login:active {

      transform: translateY(0);

    }



    .btn-login.loading {

      pointer-events: none;

    }



    .btn-login .btn-text {

      transition: opacity .2s;

    }



    .btn-login .btn-spinner {

      display: none;

      width: 20px;

      height: 20px;

      border: 2.5px solid rgba(255, 255, 255, .3);

      border-top-color: #fff;

      border-radius: 50%;

      animation: spin .7s linear infinite;

      position: absolute;

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);

    }



    .btn-login.loading .btn-text {

      opacity: 0;

    }



    .btn-login.loading .btn-spinner {

      display: block;

    }



    @keyframes spin {

      to {

        transform: translate(-50%, -50%) rotate(360deg);

      }

    }



    /* Divisor */

    .divider {

      display: flex;

      align-items: center;

      gap: 12px;

      margin: 24px 0;

      color: var(--text-secondary);

      font-size: .78rem;

    }



    .divider::before,

    .divider::after {

      content: '';

      flex: 1;

      height: 1px;

      background: rgba(168, 85, 247, .2);

    }



    /* Botones sociales */

    .social-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 10px;

      margin-bottom: 24px;

    }



    .btn-social {

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 8px;

      padding: 11px;

      border: 1px solid var(--glass-border);

      border-radius: 10px;

      background: var(--glass-bg);

      color: var(--text-primary);

      font-family: 'Outfit', sans-serif;

      font-size: .84rem;

      font-weight: 500;

      cursor: pointer;

      transition: background .2s, border-color .2s, transform .15s;

    }



    .btn-social:hover {

      background: rgba(168, 85, 247, .08);

      border-color: var(--primary);

      transform: translateY(-1px);

    }



    .btn-social svg {

      width: 18px;

      height: 18px;

    }



    .register-cta {

      text-align: center;

      font-size: .85rem;

      color: var(--text-secondary);

    }



    .register-cta a {

      color: var(--accent);

      text-decoration: none;

      font-weight: 600;

      margin-left: 4px;

      transition: color .2s;

    }



    .register-cta a:hover {

      color: var(--primary);

    }



    .age-badge {

      display: flex;

      align-items: center;

      gap: 8px;

      margin-top: 20px;

      padding: 10px 14px;

      background: rgba(168, 85, 247, .07);

      border: 1px solid rgba(168, 85, 247, .15);

      border-radius: 10px;

      font-size: .75rem;

      color: var(--text-secondary);

      line-height: 1.4;

    }



    .age-badge svg {

      flex-shrink: 0;

      width: 16px;

      height: 16px;

      stroke: var(--primary);

      fill: none;

      stroke-width: 2;

    }



    .error-msg {

      font-size: .78rem;

      color: var(--error);

      margin-top: 6px;

      display: none;

    }



    .error-msg.visible {

      display: block;

      animation: shake .35s ease;

    }



    @keyframes shake {



      0%,

      100% {

        transform: translateX(0)

      }



      25% {

        transform: translateX(-6px)

      }



      75% {

        transform: translateX(6px)

      }

    }



    /* Responsive - Mobile first */

    main {

      display: flex;

      align-items: center;

      justify-content: center;

      min-height: 100dvh;

      padding: 20px 16px;

      box-sizing: border-box;

    }



    @media (min-width:481px) and (max-width:768px) {

      .card {

        max-width: 440px;

        width: 100%;

        padding: 40px 32px 36px;

        border-radius: 24px;

      }



      .brand-name {

        font-size: 1.7rem;

      }

    }



    @media (max-width:480px) {

      .card {

        width: 100%;

        max-width: 100%;

        padding: 32px 20px 28px;

        border-radius: 20px;

        box-shadow: 0 0 0 1px rgba(168, 85, 247, .08), 0 16px 48px rgba(0, 0, 0, .55);

      }



      .brand-icon {

        width: 56px;

        height: 56px;

        border-radius: 16px;

        margin-bottom: 14px;

      }



      .brand-icon svg {

        width: 28px;

        height: 28px;

      }



      .brand-name {

        font-size: 1.55rem;

      }



      .brand {

        margin-bottom: 26px;

      }



      .card-title {

        font-size: 1.2rem;

      }



      .card-subtitle {

        font-size: .82rem;

        margin-bottom: 22px;

      }



      input[type='email'],

      input[type='password'],

      input[type='text'] {

        font-size: .9rem;

        padding: 12px 44px;

      }



      .btn-login {

        padding: 13px;

        font-size: .95rem;

      }



      .social-grid {

        grid-template-columns: 1fr;

      }



      .btn-social {

        padding: 12px;

        font-size: .88rem;

      }



      .form-extras {

        flex-wrap: wrap;

        gap: 10px;

      }



      .remember span,

      .forgot-link {

        font-size: .82rem;

      }



      .age-badge {

        font-size: .72rem;

        padding: 9px 12px;

      }

    }



    @media (max-width:360px) {

      main {

        padding: 12px 10px;

      }



      .card {

        padding: 28px 16px 24px;

        border-radius: 16px;

      }



      .brand-icon {

        width: 48px;

        height: 48px;

        border-radius: 14px;

      }



      .brand-icon svg {

        width: 24px;

        height: 24px;

      }



      .brand-name {

        font-size: 1.35rem;

      }



      .card-title {

        font-size: 1.1rem;

      }



      input[type='email'],

      input[type='password'],

      input[type='text'] {

        font-size: .85rem;

        padding: 11px 40px;

      }



      .input-icon {

        left: 12px;

      }



      .input-icon svg {

        width: 16px;

        height: 16px;

      }



      .toggle-pass {

        right: 10px;

      }



      .toggle-pass svg {

        width: 16px;

        height: 16px;

      }



      .btn-login {

        font-size: .9rem;

        padding: 12px;

      }



      .btn-social {

        font-size: .82rem;

      }



      .form-extras {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

      }

    }

    /* ============================================================

       MODAL SOCIAL LOGIN - PROXIMO / CONFIGURACION PENDIENTE

       ============================================================ */

    #socialModal {

      display: none;

      position: fixed;

      inset: 0;

      z-index: 9999;

      align-items: center;

      justify-content: center;

      padding: 1rem;

    }

    #socialModal.open { display: flex; }



    .modal-backdrop {

      position: absolute;

      inset: 0;

      background: rgba(10, 0, 16, 0.75);

      backdrop-filter: blur(8px);

      animation: fadeIn .25s ease;

    }

    .modal-box {

      position: relative;

      background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(6,182,212,.08));

      border: 1px solid rgba(168,85,247,.35);

      border-radius: 20px;

      padding: 2.5rem 2rem 2rem;

      max-width: 400px;

      width: 100%;

      text-align: center;

      animation: slideUp .3s cubic-bezier(.34,1.56,.64,1);

      backdrop-filter: blur(20px);

      box-shadow: 0 0 60px rgba(168,85,247,.25), inset 0 1px 0 rgba(255,255,255,.08);

    }

    @keyframes slideUp {

      from { opacity:0; transform:translateY(30px) scale(.95); }

      to   { opacity:1; transform:translateY(0)    scale(1);   }

    }

    @keyframes fadeIn {

      from { opacity:0; }

      to   { opacity:1; }

    }

    .modal-icon {

      width: 64px; height: 64px;

      margin: 0 auto 1.25rem;

      border-radius: 50%;

      background: linear-gradient(135deg, var(--primary), var(--secondary));

      display: flex; align-items: center; justify-content: center;

      font-size: 1.75rem;

      box-shadow: 0 0 30px rgba(168,85,247,.5);

    }

    .modal-title {

      font-size: 1.35rem; font-weight: 700;

      color: #fff; margin-bottom: .5rem;

    }

    .modal-provider {

      display: inline-flex; align-items: center; gap: .4rem;

      background: rgba(255,255,255,.06);

      border: 1px solid rgba(255,255,255,.1);

      border-radius: 8px;

      padding: .3rem .75rem;

      font-size: .85rem; font-weight: 600;

      color: var(--accent);

      margin-bottom: 1rem;

    }

    .modal-desc {

      font-size: .88rem; color: rgba(255,255,255,.6);

      line-height: 1.6; margin-bottom: 1.5rem;

    }

    .modal-steps {

      text-align: left;

      background: rgba(255,255,255,.04);

      border-radius: 12px;

      padding: 1rem 1.25rem;

      margin-bottom: 1.5rem;

    }

    .modal-steps li {

      font-size: .82rem; color: rgba(255,255,255,.55);

      margin-bottom: .4rem; padding-left: .25rem;

    }

    .modal-steps li:last-child { margin-bottom: 0; }

    .modal-steps li code {

      background: rgba(168,85,247,.2); border-radius: 4px;

      padding: .05rem .35rem; font-size: .78rem; color: var(--accent);

    }

    .modal-close-btn {

      width: 100%;

      padding: .75rem 1.5rem;

      background: linear-gradient(135deg, var(--primary), var(--primary-dark));

      color: #fff; border: none; border-radius: 12px;

      font-family: inherit; font-size: .9rem; font-weight: 600;

      cursor: pointer; transition: opacity .2s, transform .15s;

    }

    .modal-close-btn:hover { opacity: .9; transform: translateY(-1px); }

    .modal-x {

      position: absolute; top: 1rem; right: 1rem;

      background: rgba(255,255,255,.07); border: none; border-radius: 50%;

      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;

      cursor: pointer; color: rgba(255,255,255,.5); font-size: 1.1rem;

      transition: background .2s, color .2s;

    }

    .modal-x:hover { background: rgba(255,255,255,.15); color: #fff; }

    /* Boton social con estado "pendiente" */

    .btn-social.pending { opacity: .7; cursor: pointer; }