/* ============================================================
   form.css — Estilos compartidos de los formularios de inscripción
   (sitio/inscripcion.html y sitio/inscripcion-academica.html).
   ============================================================ */
:root{ --navy:#0a1f44; --navy-l:#143a73; --gold:#c9a84c; --gold-d:#b6912f; --ink:#1a2336; --muted:#6a7587; --line:#e3e8f0; --bg:#eef2f8; --ok:#1a7a41; --err:#c0392b; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:'Nunito',sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; min-height:100vh; overflow-x:hidden; }
img{ max-width:100%; }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:url('/images/logo2.svg') center/min(560px,80vw) no-repeat; opacity:.045; }
.wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:24px clamp(16px,4vw,40px) 64px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; border-radius:8px; }
.brand .bn{ font-family:'Playfair Display',serif; font-weight:800; color:var(--navy); font-size:1.15rem; line-height:1.1; }
.brand .bs{ font-size:.72rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.langs{ display:flex; gap:6px; }
.langs button{ border:1.5px solid var(--line); background:#fff; color:var(--muted); border-radius:8px; padding:6px 11px; font-family:inherit; font-weight:800; font-size:.78rem; cursor:pointer; transition:.15s; }
.langs button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.head{ background:linear-gradient(135deg,var(--navy),var(--navy-l)); color:#fff; border-radius:18px 18px 0 0; padding:30px 30px 26px; position:relative; overflow:hidden; }
.head::after{ content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; background:radial-gradient(circle,rgba(201,168,76,.35),transparent 70%); }
.head .tag{ display:inline-block; background:rgba(201,168,76,.2); color:var(--gold); border:1px solid rgba(201,168,76,.4); padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.head h1{ font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:800; line-height:1.15; }
.head p{ margin-top:8px; opacity:.9; font-size:.95rem; max-width:90%; }

.card{ background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 18px 18px; padding:26px 30px 30px; box-shadow:0 24px 60px rgba(10,31,68,.10); }
.sec-title{ font-family:'Playfair Display',serif; color:var(--navy); font-size:1.05rem; font-weight:700; margin:22px 0 4px; padding-bottom:8px; border-bottom:1.5px solid #f0f0f0; }
.sec-title:first-child{ margin-top:0; }
/* Rejilla de 6 columnas: un tercio ocupa 2, media 3, dos tercios 4 y completo
   6. Antes era «tantas columnas como quepan» y no respetaba ningún ancho: por
   eso Ciudad se quedaba sola en su fila con un hueco al lado. La estructura
   cambia en dos escalones: tableta (2 columnas) y móvil (1). */
.grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px 18px; margin-top:14px; }
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; grid-column:span 2; }
.field.w-third{ grid-column:span 2; }
.field.w-half{ grid-column:span 3; }
.field.w-2t{ grid-column:span 4; }
.field.full{ grid-column:1 / -1; }
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .field, .field.w-third, .field.w-half{ grid-column:span 1; }
  .field.w-2t, .field.full{ grid-column:1 / -1; }
}
/* El aviso del tope de caracteres: aparece solo al intentar pasarse. */
.tope-aviso{ color:#a8541a !important; font-weight:600; }
label.lb{ font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); }
label.lb .req{ color:var(--gold-d); }
input,select,textarea{ font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff; border:2px solid #dde3ee; border-radius:10px; padding:11px 13px; outline:none; transition:border-color .15s; width:100%; }
input:focus,select:focus,textarea:focus{ border-color:var(--gold); }
textarea{ resize:vertical; min-height:84px; }
.hint{ font-size:.78rem; color:var(--muted); }
.age-pill{ display:inline-block; background:#f4f6fb; border:1.5px solid var(--line); border-radius:8px; padding:6px 12px; font-weight:800; color:var(--navy); font-size:.9rem; }
.reveal{ display:none; } .reveal.on{ display:block; }
.box{ background:#f7f9fc; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:12px; }
.box .grid{ margin-top:8px; }
.gate{ display:none; background:#fff7ed; border:1.5px solid #f5c98a; color:#8a5a12; border-radius:12px; padding:16px 18px; margin-top:14px; }
.gate.on{ display:block; }
.gate a{ color:var(--navy); font-weight:800; }

/* opciones (radio / checkbox) */
.bp-radio{ display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.bp-opt{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ink); cursor:pointer; font-weight:600; }
.bp-opt input{ width:auto; accent-color:var(--navy); cursor:pointer; }

.cf-turnstile{ margin-top:20px; }
.submit{ width:100%; margin-top:18px; padding:14px; background:var(--navy); color:#fff; border:none; border-radius:12px; font-family:inherit; font-size:1.05rem; font-weight:800; cursor:pointer; transition:background .2s, transform .1s; }
.submit:hover{ background:var(--gold-d); }
.submit:active{ transform:translateY(1px); }
.submit:disabled{ opacity:.55; cursor:not-allowed; }
/* Consentimientos legales. El área de pulsación es la fila entera, no solo la
   casilla: en móvil acertar un checkbox de 16px es incómodo. */
.bp-legal{ margin-top:20px; padding:14px 16px; background:#F7F9FC; border-radius:12px; display:flex; flex-direction:column; gap:10px; }
.bp-legal-row{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.86rem; line-height:1.45; color:var(--muted); min-height:32px; }
.bp-legal-row input{ margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--navy); cursor:pointer; }
.bp-legal-row a{ color:var(--navy); font-weight:700; text-decoration:underline; }
.bp-legal-row a:hover{ color:var(--gold-d); }

.msg{ margin-top:14px; padding:12px 16px; border-radius:10px; font-weight:700; font-size:.9rem; display:none; }
.msg.err{ display:block; background:#fff0f0; border:1.5px solid #ffb3b3; color:var(--err); }
/* Solo se ve cuando tiene algo que decir. El <div> nace con la clase `err`, que
   lo pone en display:block, y el JavaScript solo lo ocultaba al pulsar Enviar:
   hasta entonces se veía una franja roja vacía desde que cargaba la página.
   Se arregla aquí y no en el JS a propósito — así no depende de que nadie se
   acuerde de ocultarlo. */
.msg:empty{ display:none !important; }
.foot-note{ text-align:center; color:var(--muted); font-size:.78rem; margin-top:18px; }

.done{ display:none; text-align:center; padding:40px 24px; border-radius:18px; border:1px solid var(--line);
  /* Aparece, no salta. El paso de display:none a block dispara la animación
     sin que el JavaScript tenga que hacer nada: sigue poniendo display:block
     como siempre. */
  animation: bpAparece .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes bpAparece{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .done{ animation:none } }
.done .ico{ font-size:3.4rem; }
.done h2{ font-family:'Playfair Display',serif; color:var(--navy); font-size:1.6rem; margin:10px 0 6px; }
.done p{ color:var(--muted); max-width:440px; margin:0 auto 6px; }
.done a.back{ display:inline-block; margin-top:18px; background:var(--navy); color:#fff; text-decoration:none; padding:11px 22px; border-radius:10px; font-weight:800; }

@media (max-width:640px){
  .wrap{ padding:16px 12px 48px; }
  .head{ padding:24px 20px; border-radius:14px 14px 0 0; }
  .head h1{ font-size:1.4rem; }
  .card{ padding:20px 18px 24px; border-radius:0 0 14px 14px; }
  .grid{ grid-template-columns:1fr; }
  .field, .field.w-third, .field.w-half, .field.w-2t{ grid-column:1 / -1; }
}

/* ── Pagos: las cuentas de la academia ─────────────────────────
   Un cuadro horizontal con las cuentas activas. Se abre desde el formulario
   para no mandar a nadie a otra página a buscar dónde pagar, y cada número
   lleva su botón de copiar: un número de cuenta tecleado a mano se equivoca
   una de cada tres veces. En el móvil las tarjetas se apilan enteras, sin
   desplazamiento horizontal. */
.bp-cuentas-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--navy,#0a1f44); color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.9rem;
  padding:.7rem 1.2rem; border-radius:999px; transition:filter .15s, transform .15s;
}
.bp-cuentas-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }

.bp-cuentas-ov{
  position:fixed; inset:0; z-index:9500; padding:14px;
  background:rgba(8,14,30,.72); display:flex; align-items:center; justify-content:center;
}
.bp-cuentas-caja{
  background:#fff; border-radius:16px; width:100%; max-width:920px;
  max-height:92vh; overflow:auto; padding:18px 18px 22px;
  box-shadow:0 22px 50px rgba(10,31,68,.3);
}
.bp-cuentas-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.bp-cuentas-cab strong{ font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; color:var(--navy,#0a1f44); }
.bp-cuentas-x{
  border:0; background:#eef1f6; color:#0a1f44; width:32px; height:32px; border-radius:50%;
  font-size:20px; line-height:1; cursor:pointer;
}
.bp-cuentas-x:hover{ background:#0a1f44; color:#fff; }
.bp-cuentas-hint{ margin:0 0 14px; font-size:.85rem; line-height:1.55; color:#5a6577; }

.bp-cuentas-lista{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
.bp-cuenta{ border:1px solid #e3e8f0; border-left:4px solid var(--gold,#c9a84c); border-radius:12px; padding:12px 14px; }
.bp-cuenta h4{ margin:0 0 6px; font-size:.98rem; color:var(--navy,#0a1f44); }
.bp-cuenta h4 small{ font-weight:600; color:#8a93a5; font-size:.78rem; }
.bp-cuenta-num{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.bp-cuenta-num span{ font-variant-numeric:tabular-nums; font-weight:800; font-size:1.02rem; color:#0a1f44; word-break:break-all; }
.bp-cuenta-copiar{
  border:1px solid #d8dfea; background:#f6f8fc; color:#0a1f44; cursor:pointer;
  font-family:inherit; font-size:.74rem; font-weight:700; padding:.25rem .6rem; border-radius:999px;
}
.bp-cuenta-copiar:hover{ background:#0a1f44; color:#fff; border-color:#0a1f44; }
.bp-cuenta-d{ margin:0 0 3px; font-size:.82rem; color:#4a5668; }
.bp-cuenta-nota{ margin:6px 0 0; font-size:.78rem; color:#8a93a5; font-style:italic; line-height:1.45; }

@media (max-width:560px){
  .bp-cuentas-caja{ padding:14px 14px 18px; max-height:94vh; }
  .bp-cuentas-cab strong{ font-size:1.1rem; }
  .bp-cuentas-lista{ grid-template-columns:1fr; }
}