:root { --azul:#0ea5e9; --azul-oscuro:#071e36; --celeste:#7bcce8; --negro:#0f172a; --blanco:#fff; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin:0; font-family:'Barlow',sans-serif; color:var(--azul-oscuro);
    background: radial-gradient(circle at top left, rgba(123,204,232,.22), transparent 35%), linear-gradient(180deg,#f7fbff 0%,#eef4fb 55%,#fff 100%);
  }
  a { color:inherit; }
  .topbar {
    position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.95rem 1.25rem; background:rgba(8,24,43,.97); color:var(--blanco); border-bottom:1px solid rgba(123,204,232,.18); backdrop-filter:blur(12px);
  }
  .brand { text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--blanco); }
  .brand span { color:var(--celeste); }
  .top-links { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }
  .top-link, .auth-menu-button, .auth-menu-item { font-family:'Barlow Condensed',sans-serif; }
  .top-link {
    text-decoration:none; font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.72rem 1rem;
    border-radius:10px; border:1px solid rgba(123,204,232,.2); background:rgba(255,255,255,.06);
  }
  .top-link.primary { background:var(--celeste); color:var(--negro); border-color:transparent; }
  .auth-menu { position:relative; display:flex; align-items:center; }
  .auth-menu-button {
    width:44px; height:44px; border:1px solid rgba(123,204,232,.35); border-radius:999px; background:rgba(255,255,255,.08); color:var(--blanco);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .auth-menu-button svg, .auth-menu-icon { width:20px; height:20px; fill:currentColor; }
  .auth-menu-panel {
    position:absolute; top:calc(100% + .7rem); right:0; min-width:220px; padding:.55rem; border-radius:16px; background:rgba(13,31,66,.98);
    border:1px solid rgba(123,204,232,.18); box-shadow:0 24px 55px rgba(5,17,42,.28); display:grid; gap:.4rem; z-index:120;
  }
  .auth-menu-panel[hidden] { display:none; }
  .auth-menu-label {
    padding:.45rem .65rem .2rem; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);
  }
  .auth-menu-item {
    width:100%; border:0; background:transparent; color:var(--blanco); text-decoration:none; text-align:left; font:inherit; padding:.8rem .8rem;
    border-radius:10px; display:flex; align-items:center; gap:.7rem; cursor:pointer;
  }
  .auth-menu-item:hover { background:rgba(255,255,255,.08); }
  .auth-menu-item[hidden] { display:none; }
  .auth-menu-item.danger { color:#ffd7d7; }
  .auth-menu-item.danger:hover { background:rgba(255,110,110,.12); }
  .page { width:min(980px, calc(100% - 2rem)); margin:0 auto; padding:2rem 0 4rem; }
  .hero { padding:2rem 0 1.25rem; }
  .eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-family:'Barlow Condensed',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--azul); margin-bottom:.9rem; }
  .eyebrow::before { content:''; width:34px; height:2px; background:var(--celeste); }
  h1 { margin:0 0 .65rem; font-family:'Playfair Display',serif; font-size:clamp(2.4rem,5vw,4.6rem); line-height:1.02; }
  .lead { margin:0; max-width:760px; font-size:1.05rem; line-height:1.7; color:#42546f; }
  .card { background:rgba(255,255,255,.92); border:1px solid rgba(14,165,233,.1); border-radius:22px; box-shadow:0 24px 60px rgba(14,165,233,.08); overflow:hidden; margin-top:1.6rem; }
  .card-header { padding:1.25rem 1.25rem 0; }
  .card-body { padding:1.25rem; }
  .card h2 { margin:0 0 .4rem; font-family:'Playfair Display',serif; font-size:1.6rem; }
  .card p { margin:0; line-height:1.6; color:#94a3b8; }
  .field { display:grid; gap:.35rem; margin-top:.85rem; }
  .field label { font-weight:700; color:#33465f; font-size:.92rem; }
  .field input { width:100%; border:1px solid rgba(14,165,233,.14); border-radius:14px; padding:.9rem .95rem; font:inherit; }
  .field input:focus { outline:none; border-color:rgba(123,204,232,.8); box-shadow:0 0 0 4px rgba(123,204,232,.14); }
  .actions { display:grid; gap:.7rem; grid-template-columns:1fr 1fr; margin-top:1rem; }
  .btn { border:0; border-radius:12px; padding:.9rem 1rem; font-family:'Barlow Condensed',sans-serif; font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
  .btn.primary { background:var(--celeste); color:var(--negro); }
  .btn.secondary { background:rgba(8,24,43,.08); color:var(--azul-oscuro); border:1px solid rgba(8,24,43,.12); }
  .btn.full { width:100%; margin-top:.9rem; }
  .status { margin-top:.85rem; padding:.85rem .95rem; border-radius:14px; background:rgba(123,204,232,.12); border:1px solid rgba(123,204,232,.18); color:#17416a; line-height:1.55; font-size:.95rem; }
  .status.error { background:rgba(255,85,85,.1); border-color:rgba(255,85,85,.18); color:#8d1e1e; }
  .status.success { background:rgba(54,180,104,.1); border-color:rgba(54,180,104,.18); color:#1d6a3b; }
  .session { display:grid; gap:.45rem; margin-top:1rem; padding:.95rem; border-radius:16px; background:rgba(123,204,232,.12); border:1px solid rgba(123,204,232,.18); }
  .session strong { font-size:.95rem; }
  .session code { font-family:inherit; color:#1c4a7a; word-break:break-word; }
  .helper { margin-top:.9rem; padding:.95rem 1rem; border-radius:16px; background:linear-gradient(180deg, rgba(123,204,232,.14), rgba(255,255,255,.82)); border:1px solid rgba(123,204,232,.18); color:#34526c; line-height:1.6; }
  footer { padding:1.5rem 0 2rem; text-align:center; color:#576a83; font-size:.92rem; }
  @media (max-width:680px) { .topbar { flex-direction:column; align-items:flex-start; } .top-links { width:100%; justify-content:flex-start; } .auth-menu { width:100%; justify-content:center; } .auth-menu-button { width:100%; border-radius:12px; justify-content:center; padding:0 .9rem; gap:.7rem; } .auth-menu-button::after { content:'Cuenta'; font-family:'Barlow Condensed',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .auth-menu-panel { position:static; min-width:100%; margin-top:.45rem; } .actions { grid-template-columns:1fr; } }