/* ═══════════════════════════════════════════════════════════════════
   ICB V4 Design System — base stylesheet
   Shared by post-pago, PA, and any page using the new identity.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0F1116;
  --ink-2:#1E1923;
  --text:#2A222F;
  --soft:#5C5263;
  --muted:#8B7A98;
  --paper:#FAF7F2;
  --paper-2:#F4EFE8;
  --border:#E8DCEE;
  --border-soft:#EFE6F3;
  --purple:#843F8F;
  --purple-deep:#3D1755;
  --purple-tint:#F3ECF8;
  --gold:#D9B825;
  --gold-deep:#9C7B12;
  --gold-tint:#FBF4D8;
  --green:#2F7A51;
  --green-tint:#E6F2EC;
  --danger:#B5364B;
  --danger-tint:#FDE8EC;
  --warning:#CA8A04;
  --warning-tint:#FEF3C7;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,17,22,0.04), 0 4px 12px rgba(61,23,85,0.04);
  --shadow:0 8px 24px rgba(61,23,85,0.08);
  --shadow-lg:0 24px 60px rgba(61,23,85,0.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px; height:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif; font-weight:700;
  letter-spacing:-0.02em; color:var(--ink); margin:0;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block; height:auto}

.container{max-width:1180px; margin:0 auto;}

/* ── Topbar ── */
.topbar{
  background:var(--ink); color:#fff; font-size:0.86rem; padding:10px 0;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.topbar-brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Fraunces", serif; font-weight:700; font-size:1.05rem; color:#fff;
}
.topbar-brand .brand-dot{
  width:10px; height:10px; border-radius:50%; background:var(--purple);
}
.topbar-back{
  color:rgba(255,255,255,0.82); font-size:0.92rem; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:color 0.2s;
}
.topbar-back:hover{color:#fff}

/* ── Main ── */
main{flex:1 0 auto}

/* ── Card ── */
.card{
  background:#fff; border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:32px;
}
@media (max-width:600px){ .card{padding:22px} }

/* ── Footer ── */
.footer{
  background:#0A0B0F; color:rgba(255,255,255,0.7);
  padding:54px 0 28px; font-size:0.9rem;
}
.footer .row-flex{
  display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.10);
  margin-bottom:22px;
}
.footer .brand img{height:42px; filter:brightness(0) invert(1); opacity:0.92}
.footer .links{display:flex; gap:24px; flex-wrap:wrap}
.footer .links a{color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.2s}
.footer .links a:hover{color:#fff}
.footer .bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:20px; margin-top:32px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.8rem; color:rgba(255,255,255,0.45);
}
.footer .bottom a{color:rgba(255,255,255,0.55); text-decoration:none}
.footer .bottom a:hover{color:#fff}

.legal-buttons{
  display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 22px;
}
.legal-buttons a{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.7); padding:8px 14px;
  border-radius:8px; font-size:0.78rem;
  text-decoration:none; transition:background 0.2s, color 0.2s;
}
.legal-buttons a:hover{background:rgba(255,255,255,0.10); color:#fff}

/* ── Modal overlay (genérico) ── */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,17,22,0.85);
  backdrop-filter:blur(4px); z-index:9999; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.active{display:flex}
.modal-content{
  background:#fff; border-radius:var(--radius-lg);
  max-width:640px; width:100%; max-height:90vh; overflow-y:auto;
  padding:36px 32px; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,0.3);
  animation:modal-in 0.25s ease-out;
}
@keyframes modal-in{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
.modal-close{
  position:absolute; top:14px; right:14px;
  background:none; border:none;
  width:36px; height:36px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center;
  color:var(--muted); font-size:1.2rem;
  transition:background 0.2s;
}
.modal-close:hover{background:var(--paper-2); color:var(--ink)}
.modal-title{
  font-size:1.6rem; margin-bottom:8px; color:var(--ink);
}
.modal-sub{color:var(--soft); margin-bottom:28px; font-size:0.96rem}

/* ── Form modal (advisor / inscripción) ── */
.form-modal .modal-content{max-width:520px}
.form-modal .form-group{margin-bottom:20px}
.form-modal .form-group label{
  display:block; font-weight:600; font-size:0.9rem;
  color:var(--text); margin-bottom:6px;
}
.form-modal .form-group input,
.form-modal .form-group select{
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius);
  font-family:"DM Sans",sans-serif; font-size:0.94rem;
  color:var(--text); background:var(--paper);
  transition:border-color .2s;
}
.form-modal .form-group input:focus,
.form-modal .form-group select:focus{
  outline:none; border-color:var(--purple);
}
.form-modal .field-error{
  color:var(--danger); font-size:.82rem; margin-top:4px; display:none;
}
.form-modal .form-submit{
  width:100%; padding:14px;
  background:var(--purple); color:#fff;
  border:none; border-radius:999px;
  font-weight:600; font-size:1rem; cursor:pointer;
  font-family:"DM Sans",sans-serif;
  transition:transform .2s,box-shadow .2s;
}
.form-modal .form-submit:hover{
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(132,63,143,.32);
}
.form-modal .form-submit:disabled{opacity:.6; cursor:not-allowed; transform:none}
.form-modal .form-cancel{
  width:100%; padding:12px;
  background:var(--paper-2); color:var(--text);
  border:1px solid var(--border); border-radius:999px;
  font-weight:600; font-size:.94rem; cursor:pointer;
  font-family:"DM Sans",sans-serif; margin-top:10px;
  transition:background .2s;
}
.form-modal .form-cancel:hover{background:var(--border)}
.form-modal .form-hint{
  font-size:.84rem; color:var(--muted); margin-top:14px; text-align:center;
}
.form-modal .iti{width:100%}
.form-modal .iti input{padding-left:52px!important}