:root{
    --bg:#0d0f14;
    --card:#131826;
    --muted:#aab2c3;
    --text:#f2f5ff;
    --line:rgba(255,255,255,.10);
  
    --blue:#5aa2ff;
    --gold:#d3b26a;
    --danger:#ff6b6b;
    --ok:#35d07f;
  
    --radius:18px;
    --shadow: 0 16px 50px rgba(0,0,0,.45);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
      radial-gradient(1200px 700px at 15% 0%, rgba(90,162,255,.18), transparent 60%),
      radial-gradient(900px 600px at 80% 10%, rgba(211,178,106,.14), transparent 55%),
      linear-gradient(180deg, #090b10, var(--bg));
    color:var(--text);
  }
  
  /* Layout */
  .container{
    width:min(1080px, 92vw);
    margin:0 auto;
  }
  
  a{ color:inherit; }
  a:hover{ opacity:.9; }
  
  /* Topbar */
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background: rgba(8,10,14,.72);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:18px;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .seal{
    width:42px;
    height:42px;
    border-radius:999px;
    border:1px solid rgba(211,178,106,.45);
    background: radial-gradient(circle at 30% 30%, rgba(211,178,106,.25), rgba(19,24,38,.4));
    display:grid;
    place-items:center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }
  .seal-star{
    color: var(--gold);
    font-size:18px;
    transform: translateY(-1px);
  }
  .brand-text .org{
    font-weight:800;
    letter-spacing:.2px;
  }
  .brand-text .sub{
    font-size:12px;
    color: var(--muted);
    margin-top:2px;
  }
  
  .top-links{
    display:flex;
    gap:16px;
  }
  .top-links a{
    text-decoration:none;
    color: var(--muted);
    font-weight:600;
    font-size:14px;
    padding:8px 10px;
    border-radius:12px;
  }
  .top-links a:hover{
    color: var(--text);
    background: rgba(255,255,255,.06);
  }
  
  .ribbon{
    height:4px;
    background: linear-gradient(90deg, var(--blue), #7bc1ff 40%, var(--gold));
  }
  
  /* Hero */
  .main{ padding-bottom:40px; }
  
  .hero{
    padding:42px 0 18px;
  }
  .hero-inner{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:22px;
    align-items:stretch;
  }
  .kicker{
    color: var(--muted);
    font-weight:700;
    margin:0 0 6px;
  }
  .title{
    margin:0 0 12px;
    font-size: clamp(28px, 4vw, 46px);
    line-height:1.05;
    letter-spacing:-.6px;
  }
  .lead{
    margin:0 0 18px;
    color: rgba(242,245,255,.82);
    line-height:1.55;
  }
  
  .badges{ display:flex; flex-wrap:wrap; gap:10px; }
  .badge{
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    padding:8px 10px;
    border-radius:999px;
    color: rgba(242,245,255,.9);
    font-weight:700;
    font-size:13px;
  }
  
  .hero-card{
    background: linear-gradient(180deg, rgba(19,24,38,.95), rgba(19,24,38,.72));
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:18px 18px 16px;
  }
  .card-title{
    margin:0 0 10px;
    font-size:16px;
    letter-spacing:.2px;
  }
  .card-list{
    margin:0 0 12px;
    padding-left:18px;
    color: rgba(242,245,255,.84);
    line-height:1.55;
  }
  .card-link{
    display:inline-flex;
    gap:8px;
    font-weight:800;
    text-decoration:none;
    color: rgba(90,162,255,.95);
  }
  .card-link:hover{ opacity:.95; }
  
  /* Section + form */
  .section{
    padding:26px 0 10px;
  }
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    border-top:1px solid var(--line);
    padding-top:22px;
    margin-top:8px;
  }
  .section-head h2{
    margin:0;
    font-size:22px;
    letter-spacing:-.2px;
  }
  .section-head p{
    margin:0;
    color: var(--muted);
  }
  
  .form{
    margin-top:18px;
    background: rgba(19,24,38,.60);
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding:18px;
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
  }
  
  .grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
  }
  .field label{
    display:block;
    font-weight:800;
    font-size:13px;
    margin-bottom:8px;
    color: rgba(242,245,255,.92);
  }
  .field input{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(10,12,18,.55);
    color: var(--text);
    outline:none;
  }
  .field input:focus{
    border-color: rgba(90,162,255,.55);
    box-shadow: 0 0 0 4px rgba(90,162,255,.15);
  }
  .hint{
    display:block;
    margin-top:6px;
    color: rgba(170,178,195,.85);
    font-size:12px;
  }
  
  .consent{
    margin-top:14px;
    border-top:1px solid var(--line);
    padding-top:14px;
  }
  .checkbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color: rgba(242,245,255,.82);
    line-height:1.45;
  }
  .checkbox input{
    margin-top:3px;
    transform: scale(1.1);
  }
  
  .actions{
    display:flex;
    gap:10px;
    margin-top:16px;
    align-items:center;
    flex-wrap:wrap;
  }
  .btn{
    border:0;
    border-radius: 14px;
    padding:12px 14px;
    font-weight:900;
    letter-spacing:.2px;
    cursor:pointer;
    background: linear-gradient(90deg, rgba(90,162,255,.95), rgba(211,178,106,.85));
    color:#0c0f14;
  }
  .btn:hover{ opacity:.95; }
  .btn:disabled{
    opacity:.55;
    cursor:not-allowed;
  }
  
  .btn-ghost{
    background: rgba(255,255,255,.06);
    color: rgba(242,245,255,.9);
    border:1px solid rgba(255,255,255,.12);
  }
  .btn-ghost:hover{
    background: rgba(255,255,255,.08);
  }
  
  .status{
    margin-top:14px;
    padding:12px 12px;
    border-radius: 14px;
    display:none;
    border:1px solid rgba(255,255,255,.12);
  }
  .status.ok{
    display:block;
    border-color: rgba(53,208,127,.35);
    background: rgba(53,208,127,.10);
    color: rgba(242,245,255,.92);
  }
  .status.err{
    display:block;
    border-color: rgba(255,107,107,.35);
    background: rgba(255,107,107,.10);
    color: rgba(242,245,255,.92);
  }
  
  /* Footer */
  .footer{
    margin-top:34px;
    border-top:1px solid var(--line);
    background: rgba(8,10,14,.55);
  }
  .footer-inner{
    padding:22px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
  }
  .footer-title{
    font-weight:900;
    letter-spacing:.2px;
    margin-bottom:10px;
  }
  .footer-text{
    margin:0;
    color: rgba(242,245,255,.82);
    line-height:1.55;
  }
  .footer-note{
    margin:10px 0 0;
    color: var(--muted);
    font-size:12px;
  }
  
  .stamp{
    display:inline-block;
    border:1px dashed rgba(211,178,106,.6);
    border-radius: 16px;
    padding:12px 14px;
    background: rgba(211,178,106,.08);
    text-align:right;
  }
  .stamp-line{
    font-weight:1000;
    letter-spacing:.6px;
    text-transform:uppercase;
  }
  .stamp-small{
    color: rgba(242,245,255,.80);
    font-size:12px;
    margin-top:4px;
  }
  
  /* Responsive */
  @media (max-width: 860px){
    .hero-inner{ grid-template-columns: 1fr; }
    .grid{ grid-template-columns: 1fr; }
    .top-links{ display:none; }
  }
  .seal{
    width:42px;
    height:42px;
    border-radius:999px;
    border:1px solid rgba(211,178,106,.45);
    background: radial-gradient(
      circle at 30% 30%,
      rgba(211,178,106,.18),
      rgba(19,24,38,.45)
    );
    display:grid;
    place-items:center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    overflow:hidden;
  }
  
  .seal-img{
    width:70%;
    height:70%;
    object-fit:contain;
    filter:
      drop-shadow(0 2px 6px rgba(0,0,0,.4));
  }
  .seal-img{
    filter:
      brightness(1.15)
      contrast(1.1)
      drop-shadow(0 2px 6px rgba(0,0,0,.45));
  }
  .seal{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(211,178,106,.45);
    background-color:#0f1320;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    overflow:hidden;
  }
  
  /* escudo */
  .seal-escudo{
    background-image: url("/assets/Flag_of_Justicialist_Party_2.svg.png");
    background-size: cover;      /* 👈 llena el círculo */
    background-position: center; /* centra bien */
    background-repeat: no-repeat;
  }