:root{
      --bg:#c9a16a;
      --card:linear-gradient(180deg, rgba(230, 227, 227, 0.02), #0314ade5);
      --accent:#d8d4e4;
      --muted:#d0decd;
      --text:#cae1ce;
      --maxw:1100px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.997), #0314ade5);
      color:var(--text);
      line-height:1.5;
      -webkit-font-smoothing:antialiased;
    }
    .container{
      max-width:var(--maxw);
      margin:30px auto;
      padding:20px;
    }
    header{
      display:flex;
      gap:20px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
    }
    .brand{
      display:flex;
      gap:14px;
      align-items:center;
    }
    .logo{
      width:56px;
      height:56px;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent), #10f5cf 80%);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:#012026;
      box-shadow:0 6px 18px rgba(0,0,0,0.6), inset 0 -6px 20px rgba(255,255,255,0.03);
    }
    h1{font-size:1.4rem;margin:0}
    p.lead{margin:6px 0 0;color:var(--muted);font-size:.95rem}
    nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-size:.95rem}
    nav a:hover{color:var(--accent);}
    main{
      display:grid;
      grid-template-columns: 1fr;
      gap:18px;
    }

    .hero{
      background:linear-gradient(180deg, rgba(230, 227, 227, 0.02), #0314ade5);
      border-radius:12px;
      padding:18px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      display:flex;
      gap:18px;
      align-items:center;
      flex-wrap:wrap;
    }
    .hero .left{flex:1;min-width:260px}
    .hero .right{width:360px; max-width:45%; min-width:220px}
    .cta{
      display:inline-block;
      padding:10px 14px;
      border-radius:8px;
      background:var(--accent);
      color:#003533;
      font-weight:600;
      text-decoration:none;
      cursor:pointer;
      border:none;
      transition:background .2s;
    }
    .cta:hover{background:#fff;}
    .features{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:12px;
    }
    .card{
      background:var(--card);
      border-radius:10px;
      padding:12px;
      box-shadow: 0 6px 16px rgba(2,6,23,0.6);
      border:1px solid rgba(255,255,255,0.03);
    }
    .card h3{margin:0 0 8px 0;font-size:1rem}
    ul{margin:0;padding-left:18px;color:var(--muted)}
    .grid{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:16px;
    }

    form label{display:block;font-size:.85rem;margin-bottom:6px;color:var(--muted)}
    input, textarea, select{
      width:100%;
      padding:8px 10px;
      border-radius:8px;
      background:#d5e1e444;
      border:1px solid rgba(255,255,255,0.04);
      color:var(--text);
      margin-bottom:10px;
      font-size:.95rem;
    }
    .small{font-size:.85rem;color:var(--muted)}
    footer{
      margin-top:18px;
      text-align:center;
      color:var(--muted);
      font-size:.85rem;
    }
    @media (max-width:900px){
      .grid{grid-template-columns:1fr}
      .hero .right{max-width:100%;width:100%}
    }

    /* Sección de bienvenida */
    .welcome{
      text-align:center;
      padding:60px 20px;
      background:radial-gradient(circle at center, #0314ad, #000);
      color:white;
      border-radius:12px;
      margin-bottom:20px;
    }
    .welcome h1{
      font-size:2rem;
      margin-bottom:10px;
    }
    .welcome a{
      display:inline-block;
      margin-top:20px;
      background:#d8d4e4;
      color:#031325;
      padding:12px 20px;
      border-radius:8px;
      text-decoration:none;
      font-weight:600;
      transition:background .2s;
    }
    .welcome a:hover{background:white;}