/* =========================================================
  REGISTRATION
========================================================= */
.register{
    background:var(--cream);
    color:var(--navy);
    padding:88px 0 96px;
}
/*
  * El formulario necesita más ancho que las demás secciones.
  */
.register > .wrap{
    max-width:1320px;
}
/*
  * Columna izquierda compacta.
  * Columna derecha bastante más grande.
  */
.register-inner{
    display:grid;
    grid-template-columns:
      minmax(255px,.58fr)
      minmax(0,1.42fr);
    gap:52px;
    align-items:start;
}
/* =========================================================
  INFORMACIÓN IZQUIERDA
========================================================= */
.register-info{
    position:sticky;
    top:100px;
    padding-top:6px;
}
.register-info .eyebrow{
    color:var(--green-dark);
    border-color:rgba(19,77,19,.25);
    background:rgba(19,77,19,.08);
}
.register-info h2{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(28px,3.3vw,38px);
    line-height:1.12;
    margin:16px 0;
}
.register-info > p{
    max-width:370px;
    font-size:15.5px;
    line-height:1.7;
    color:#5B6088;
    margin:0 0 28px;
}
.info-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
}
.info-list li{
    display:grid;
    grid-template-columns:105px 1fr;
    gap:12px;
    padding:15px 0;
    font-size:14px;
    line-height:1.5;
    color:#3E436E;
    border-top:1px solid rgba(11,15,63,.08);
}
.info-list li:first-child{
    border-top:none;
    padding-top:0;
}
.info-list b{
    color:var(--navy);
    font-weight:700;
}
/* =========================================================
  CONTENEDOR EXTERIOR DEL FORMULARIO
========================================================= */
/*
  * El div .form-card exterior ya NO debe parecer otra tarjeta.
  */
.register-inner > .form-card{
    width:100%;
    min-width:0;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
}
.register-inner > .form-card > h3{
    margin:0 0 5px;
    font-family:var(--serif);
    font-size:24px;
    line-height:1.25;
    font-weight:600;
    color:var(--navy);
}
.register-inner > .form-card > .form-sub{
    max-width:700px;
    margin:0 0 22px;
    color:#7E84AA;
    font-size:14px;
    line-height:1.6;
}
/* =========================================================
  FORMULARIO PRINCIPAL
========================================================= */
#form-pagopar{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:18px;
}
/*
  * Solamente las tarjetas INTERNAS del formulario.
  */
#form-pagopar > .form-card{
    width:100%;
    min-width:0;
    margin:0;
    padding:28px 30px;
    background:#fff;
    border:1px solid rgba(11,15,63,.09);
    border-radius:18px;
    box-shadow:
      0 1px 2px rgba(11,15,63,.025),
      0 10px 28px rgba(11,15,63,.035);
}
#form-pagopar > .form-card h3{
    margin:0 0 5px;
    font-family:var(--sans);
    font-size:17px;
    line-height:1.4;
    font-weight:700;
    color:var(--navy);
}
#form-pagopar > .form-card .form-sub{
    max-width:690px;
    margin:0 0 22px;
    color:#8B90B8;
    font-size:13.5px;
    line-height:1.6;
}
/* =========================================================
  CAMPOS FORMULARIO
========================================================= */
.field{
    min-width:0;
    margin:0;
}
.field label{
    display:block;
    margin-bottom:6px;
    color:#5B6088;
    font-size:12px;
    line-height:1.4;
    font-weight:600;
}
.field input,
.field select{
    display:block;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:10px 13px;
    border:1.5px solid #E1E3F0;
    border-radius:9px;
    background:#FAFAFD;
    color:var(--navy);
    font-family:var(--sans);
    font-size:14px;
    transition:
      border-color .15s ease,
      background .15s ease,
      box-shadow .15s ease;
}
.field input::placeholder{
    color:#8B90B8;
}
.field input:hover,
.field select:hover{
    border-color:#CACDE1;
}
.field input:focus,
.field select:focus{
    outline:none;
    border-color:var(--green);
    background:#fff;
    box-shadow:
      0 0 0 3px rgba(62,214,62,.08);
}
/* =========================================================
  DATOS EMPRESA
========================================================= */
#form-pagopar > .form-card:first-child .field-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:16px;
}
/*
  * Teléfono de contacto no necesita ocupar todo el ancho.
  */
#form-pagopar > .form-card:first-child > .field{
    max-width:calc(50% - 8px);
}
/* =========================================================
  PARTICIPANTES
========================================================= */
.participantes-card{
    margin:0 !important;
}
#participantsList{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.participant-card{
    position:relative;
    margin:0;
    padding:22px 24px 24px;
    background:#F8F9FD;
    border:1px solid #E1E3F0;
    border-radius:14px;
}
.participant-card + .participant-card{
    margin-top:0;
    padding-top:22px;
    border-top:1px solid #E1E3F0;
}
.participant-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.participant-number{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--navy);
    font-size:13px;
    font-weight:700;
}
.participant-number::before{
    content:'';
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--green);
}
/*
  * Compatible con tu JS ACTUAL,
  * que todavía genera 3 .field-row de 2 campos.
  */
.participant-card .field-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:14px;
}
.participant-card .field-row:last-child{
    margin-bottom:0;
}
/*
  * También queda preparado por si cambiamos el JS
  * al diseño compacto de 3 columnas.
  */
.participant-fields{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px 16px;
}
/* =========================================================
  QUITAR PARTICIPANTE
========================================================= */
.participant-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 29px;
    width:29px;
    height:29px;
    padding:0;
    border:1px solid rgba(0,8,88,.12);
    border-radius:50%;
    background:#fff;
    color:#8B90B8;
    cursor:pointer;
    font-family:var(--sans);
    font-size:12px;
    transition:
      color .18s ease,
      border-color .18s ease,
      background .18s ease;
}
.participant-remove:hover{
    color:#B42318;
    border-color:#F0B8B3;
    background:#FFF7F6;
}
/* =========================================================
  AGREGAR PARTICIPANTE
========================================================= */
.btn-add-participant{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    margin-top:18px;
    padding:8px 17px;
    border:1px solid rgba(0,8,88,.18);
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    font-family:var(--sans);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:
      color .18s ease,
      border-color .18s ease,
      background .18s ease;
}
.btn-add-participant:hover{
    color:var(--green-dark);
    border-color:var(--green);
    background:rgba(62,214,62,.04);
}
/* =========================================================
  RESUMEN INSCRIPCIÓN
========================================================= */
#form-pagopar > .form-card:last-child{
    padding:26px 30px 30px;
}
.checkout-summary{
    display:grid;
    grid-template-columns:
      .75fr
      1.1fr
      1.15fr;
    align-items:stretch;
    margin:18px 0 24px;
    padding:0;
    background:#F8F9FD;
    border:1px solid #E1E3F0;
    border-radius:13px;
    overflow:hidden;
}
.checkout-summary > div{
    min-width:0;
    min-height:84px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:15px 20px;
    background:transparent;
    border:none;
    border-radius:0;
}
.checkout-summary > div:first-child{
    padding-left:20px;
}
.checkout-summary > div:last-child{
    padding-right:20px;
}
.checkout-summary > div + div{
    border-left:1px solid #E1E3F0;
}
.checkout-summary-label{
    margin-bottom:5px;
    color:#8B90B8;
    font-size:10px;
    line-height:1.4;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.checkout-summary strong{
    display:block;
    color:var(--navy);
    font-size:15px;
    line-height:1.4;
    font-weight:700;
}
.checkout-summary-value{
    color:var(--green-dark) !important;
}
/* =========================================================
  PAGOPAR
========================================================= */
#btn-procesar{
    width:100%;
    min-height:50px;
    margin:0;
    justify-content:center;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    box-shadow:none;
}
#btn-procesar:hover{
    transform:translateY(-1px);
}
#btn-procesar:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}
/* =========================================================
  MENSAJE / NOTA
========================================================= */
#mensaje-estado{
    line-height:1.5;
}
.form-note{
    max-width:600px;
    margin:13px auto 0;
    color:#9A9FC0;
    font-size:11.5px;
    line-height:1.5;
    text-align:center;
}
.form-msg{
    display:none;
    font-size:13.5px;
    background:rgba(19,77,19,.08);
    color:var(--green-dark);
    border:1px solid rgba(19,77,19,.2);
    padding:10px 12px;
    border-radius:9px;
    margin-top:14px;
    text-align:center;
}
@media(max-width:1050px){.register>.wrap{max-width:960px}.register-inner{grid-template-columns:minmax(220px,.5fr) minmax(0,1.5fr);gap:34px}#form-pagopar>.form-card{padding:26px}.participant-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.register{padding:68px 0}.register-inner{grid-template-columns:1fr;gap:34px}.register-info{position:static;padding:0}.register-info>p{max-width:620px}#form-pagopar>.form-card:first-child .field-row{grid-template-columns:1fr}#form-pagopar>.form-card:first-child>.field{max-width:none}.participant-card .field-row{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.participant-card .field-row,.participant-fields,.checkout-summary{grid-template-columns:1fr}.checkout-summary>div{min-height:auto;padding:14px 16px}.checkout-summary>div:first-child,.checkout-summary>div:last-child{padding-left:16px;padding-right:16px}.checkout-summary>div+div{border-left:none;border-top:1px solid #E1E3F0}}
@media(max-width:600px){.register>.wrap{padding-left:18px;padding-right:18px}#form-pagopar>.form-card{padding:22px 18px;border-radius:15px}.participant-card{padding:18px 16px}.register-inner>.form-card>h3{font-size:22px}.info-list li{grid-template-columns:1fr;gap:3px}}