/* modals.css — Overlay Asociate y modal Registro/Login */

/* ── ASOCIATE — overlay full-screen ── */
.asociate-overlay{
  position:fixed; inset:0; background:white; z-index:600;
  overflow-y:auto; display:none; flex-direction:column;
}
.asociate-overlay.open{ display:flex }
.asociate-header{
  background:var(--k); padding:0 2.5rem; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.asociate-logo{ display:flex; align-items:center; gap:10px }
.asociate-logo-sq{
  width:30px; height:30px; background:white; border-radius:4px;
  display:flex; align-items:center; justify-content:center; color:var(--k); font-size:10px; font-weight:700;
}
.asociate-logo-txt{ color:white; font-size:14px; font-weight:300; letter-spacing:2px; text-transform:uppercase }
.asociate-close{
  background:rgba(255,255,255,0.1); border:none; color:white; width:36px; height:36px;
  border-radius:50%; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.asociate-close:hover{ background:rgba(255,255,255,0.2) }

/* Hero asociate */
.as-hero{ background:var(--k); padding:5rem 2.5rem 4rem; text-align:center }
.as-hero-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:3px; color:var(--g5); margin-bottom:1.5rem }
.as-hero h1{ font-size:clamp(2.5rem,5vw,4rem); font-weight:700; color:white; letter-spacing:-2px; line-height:1; margin-bottom:1.25rem }
.as-hero h1 span{ font-weight:200; color:var(--g5) }
.as-hero-sub{ font-size:16px; color:rgba(255,255,255,0.55); max-width:560px; margin:0 auto 2.5rem; line-height:1.7 }
.as-hero-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:3rem }
.as-pill{ font-size:12px; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); padding:7px 16px; border-radius:20px }
.as-hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* Para quién */
.as-para-quien{ padding:4rem 2.5rem; background:var(--g1); border-bottom:1px solid var(--g2) }
.as-pq-inner{ max-width:960px; margin:0 auto }
.as-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--g4); font-weight:500; margin-bottom:.75rem }
.as-section-h{ font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:var(--k); letter-spacing:-1px; margin-bottom:2.5rem }
.as-pq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--g2); border-radius:12px; overflow:hidden }
.as-pq-card{ background:white; padding:1.75rem; display:flex; flex-direction:column; gap:.5rem }
.as-pq-icon{ font-size:1.5rem; margin-bottom:.25rem }
.as-pq-title{ font-size:14px; font-weight:700; color:var(--k) }
.as-pq-text{ font-size:13px; color:var(--g4); line-height:1.6 }

/* Cómo funciona */
.as-como{ padding:4rem 2.5rem; background:white }
.as-como-inner{ max-width:960px; margin:0 auto }
.as-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--g2); border-radius:12px; overflow:hidden; margin-top:2.5rem }
.as-step{ background:white; padding:1.75rem 1.5rem }
.as-step-n{ font-size:2.5rem; font-weight:800; color:var(--g2); line-height:1; margin-bottom:.75rem; letter-spacing:-1px }
.as-step h4{ font-size:13px; font-weight:700; color:var(--k); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem }
.as-step p{ font-size:12px; color:var(--g4); line-height:1.6 }

/* Calculadora */
.as-calc{ padding:4rem 2.5rem; background:var(--k) }
.as-calc-inner{ max-width:700px; margin:0 auto; text-align:center }
.as-calc h2{ font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:white; letter-spacing:-1px; margin-bottom:.5rem }
.as-calc-sub{ font-size:14px; color:var(--g5); margin-bottom:2.5rem }
.calc-box{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:2rem }
.calc-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap }
.calc-label{ font-size:13px; color:rgba(255,255,255,0.6); min-width:200px; text-align:left }
.calc-input{
  flex:1; min-width:120px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:8px; padding:10px 14px; color:white; font-size:15px; font-weight:600;
  font-family:inherit; outline:none; text-align:center;
}
.calc-input:focus{ border-color:rgba(255,255,255,0.4) }
.calc-divider{ height:1px; background:rgba(255,255,255,0.1); margin:1.25rem 0 }
.calc-result{ text-align:center }
.calc-result-label{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--g5); margin-bottom:.5rem }
.calc-result-amount{ font-size:3rem; font-weight:800; color:white; letter-spacing:-2px; line-height:1 }
.calc-result-period{ font-size:12px; color:var(--g5); margin-top:.25rem }
.calc-note{ font-size:11px; color:rgba(255,255,255,0.3); margin-top:.75rem }

/* Formulario socio */
.as-form-section{ padding:4rem 2.5rem; background:var(--g1) }
.as-form-inner{ max-width:600px; margin:0 auto }
.as-form-card{ background:white; border-radius:16px; padding:2.5rem; border:1px solid var(--g2) }
.as-form-title{ font-size:1.1rem; font-weight:700; color:var(--k); margin-bottom:.25rem }
.as-form-sub{ font-size:13px; color:var(--g4); margin-bottom:2rem; line-height:1.6 }
.as-form-line{ height:2px; background:var(--k); border-radius:1px; margin-bottom:2rem }
.as-field{ margin-bottom:14px }
.as-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); font-weight:600; margin-bottom:5px }
.as-field input,.as-field select{
  width:100%; padding:10px 14px; border:1px solid var(--g2); border-radius:var(--r);
  font-size:13px; color:var(--k); background:white; outline:none; transition:border .2s; font-family:inherit;
}
.as-field input:focus,.as-field select:focus{ border-color:var(--g3) }
.as-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.as-submit{
  width:100%; background:var(--k); color:white; border:none; padding:14px;
  border-radius:var(--r); font-size:14px; font-weight:700; cursor:pointer;
  font-family:inherit; transition:background .2s; margin-top:8px;
}
.as-submit:hover{ background:var(--k2) }
.as-terms{ font-size:11px; color:var(--g4); text-align:center; margin-top:.75rem; line-height:1.6 }
.as-codigo-box{ display:none; background:var(--g1); border:1px solid var(--g2); border-radius:12px; padding:1.5rem; text-align:center; margin-top:1rem }
.as-codigo-box.show{ display:block }
.as-codigo-label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); margin-bottom:.75rem }
.as-codigo-value{ font-size:2rem; font-weight:800; color:var(--k); letter-spacing:3px; margin-bottom:.75rem }
.as-codigo-sub{ font-size:12px; color:var(--g4); line-height:1.6 }
.as-codigo-copy{
  background:var(--k); color:white; border:none; padding:8px 20px;
  border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; margin-top:.75rem; font-family:inherit;
}

/* ── MODAL REGISTRO CLIENTE ── */
.reg-wrap{
  display:none; position:fixed; inset:0; background:rgba(10,10,10,.85);
  z-index:550; align-items:center; justify-content:center; padding:1.5rem;
}
.reg-wrap.open{ display:flex }
.reg-box{ background:white; border-radius:20px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; display:flex; flex-direction:column }
.reg-head{
  padding:1.5rem 2rem; border-bottom:1px solid var(--g2);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:white; z-index:1; border-radius:20px 20px 0 0;
}
.reg-head h3{ font-size:16px; font-weight:700; color:var(--k) }
.reg-close{ background:var(--g1); border:none; border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:14px; color:var(--g4); display:flex; align-items:center; justify-content:center }
.reg-body{ padding:1.75rem 2rem }
.reg-tabs{ display:flex; gap:6px; margin-bottom:1.75rem; background:var(--g1); padding:4px; border-radius:8px }
.reg-tab{ flex:1; padding:8px; border:none; background:transparent; font-size:13px; font-weight:500; color:var(--g4); cursor:pointer; border-radius:6px; font-family:inherit; transition:all .2s }
.reg-tab.active{ background:white; color:var(--k); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.08) }
.reg-panel{ display:none }
.reg-panel.active{ display:block }
.reg-field{ margin-bottom:12px }
.reg-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); font-weight:600; margin-bottom:4px }
.reg-field input,.reg-field select{
  width:100%; padding:10px 14px; border:1px solid var(--g2); border-radius:var(--r);
  font-size:13px; color:var(--k); background:white; outline:none; font-family:inherit; transition:border .2s;
}
.reg-field input:focus,.reg-field select:focus{ border-color:var(--g3) }
.reg-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.reg-divider{ text-align:center; font-size:11px; color:var(--g4); margin:1rem 0; position:relative }
.reg-divider::before,.reg-divider::after{ content:''; position:absolute; top:50%; width:42%; height:1px; background:var(--g2) }
.reg-divider::before{ left:0 }
.reg-divider::after{ right:0 }
.reg-submit{
  width:100%; background:var(--k); color:white; border:none; padding:13px;
  border-radius:var(--r); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:background .2s; margin-top:8px;
}
.reg-submit:hover{ background:var(--k2) }
.reg-codigo-field{ display:none }
.reg-codigo-field.show{ display:block }
.reg-note{ font-size:11px; color:var(--g4); text-align:center; margin-top:.75rem; line-height:1.6 }
.reg-login-link{ text-align:center; font-size:12px; color:var(--g4); margin-top:1rem; cursor:pointer }
.reg-login-link span{ color:var(--k); font-weight:700; text-decoration:underline }

/* Tipo de cuenta en registro */
.tipo-btn{
  border:2px solid var(--g2); border-radius:10px; padding:.875rem;
  text-align:center; cursor:pointer; transition:all .2s; color:var(--g4); background:white;
}
.tipo-btn:hover{ border-color:var(--g3); color:var(--k) }
.tipo-btn.active{ border-color:var(--k); color:var(--k); background:var(--g1) }

/* ── POPUP BIENVENIDA ── */
@keyframes popupIn{
  from{ opacity:0; transform:translateY(20px) scale(.97) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}