/* flots · css/paginas/cierre.css
   Cierre (/propuesta) — Cierre (1440) y MCierre (390).
   Desktop: padding 72/96, columna con gap 48 (encabezado, H1, grilla 1fr + 560 px con gap 72).
   Tablet (≤1199): la grilla se apila. Celular (≤767): encabezado público + una columna (MCierre). */

/* =========================== Desktop =========================== */
.cierre{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:48px;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding:72px var(--gutter);
  /* El artboard no fija interlineado: se usa el "normal" de la fuente (como el diseño). */
  line-height:normal;
}
.cierre-idioma{
  position:absolute;
  top:36px;
  right:72px;
  z-index:5;
}
.cierre-cabecera{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 24px;
}
.cierre-logo{ display:inline-flex; text-decoration:none; color:var(--ink); }
.cierre-para{ margin:0; font-size:15px; color:var(--muted); }

.cierre-main{
  display:flex;
  flex-direction:column;
  gap:48px;
  min-width:0;
}
.cierre-h1{ line-height:.92; letter-spacing:-0.045em; }

.cierre-avisos{ display:flex; flex-direction:column; gap:12px; }
.cierre-avisos .link{ white-space:nowrap; }

.cierre-grilla{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 560px;
  gap:72px;
  align-items:start;
}

/* ---------- Tu propuesta ---------- */
.cierre-resumen{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}
.cierre-resumen-titulo{
  margin:0;
  padding-bottom:14px;
  border-bottom:1px solid var(--ink);
  font-size:22px;
  font-weight:500;
  line-height:normal;
}
.cierre-def{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  row-gap:18px;
  margin:0;
  font-size:17px;
}
.cierre-def dt{ color:var(--muted); }
.cierre-def dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.cierre-entregables{ margin:0; padding:0; list-style:none; line-height:1.6; }
.cierre-monto{ font-size:24px; white-space:nowrap; }
.cierre-link-completa{
  align-self:flex-start;
  font-size:16px;
  font-weight:500;
}

/* ---------- Pasos ---------- */
.cierre-pasos{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
  min-width:0;
}
.cierre-paso{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px;
  min-width:0;
}
/* Paso 1 en tarjeta blanca; paso 2 "secundario": sin fondo y con borde (como el diseño) */
.cierre-paso-firma{ background:var(--surface); }
.cierre-paso-sena{ border:1px solid var(--line); }
/* Ya firmado, el paso 2 pasa a ser el activo: tarjeta blanca */
.cierre-paso-activo,
.cierre-paso-hecho{ background:var(--surface); }

.cierre-paso-cabeza{ display:flex; align-items:baseline; gap:14px; }
.cierre-paso-num{ font-size:20px; color:var(--accent); }
.cierre-paso-titulo{ margin:0; font-size:22px; font-weight:500; line-height:normal; }

.cierre-link{ align-self:flex-start; font-size:16px; }

.cierre-form{ display:flex; flex-direction:column; gap:18px; }
.cierre-campo{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:15px;
  font-weight:500;
}
.cierre-input.campo-control{ font-size:15px; }

.cierre-check{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  cursor:pointer;
}
.cierre-check input{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.cierre-check-inactivo{ color:var(--muted); cursor:not-allowed; }
.cierre-check-inactivo input{ cursor:not-allowed; }

.cierre-btn.btn{
  width:100%;
  height:52px;
  padding:0 16px;
  font-size:16px;
  white-space:normal;
  text-align:center;
}
/* "Pagar con Mercado Pago": borde tinta sobre fondo transparente (diseño) */
.cierre-pagar.btn-borde{ background:transparent; }
.cierre-pagar.btn-borde:hover{ background:var(--surface); }
.cierre-pagar.btn-borde:disabled{ background:transparent; border-color:var(--line-input); color:var(--muted); }

.cierre-error{ margin:0; }

.cierre-firmado{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font-size:16px;
  line-height:1.45;
}
.cierre-firmado-icono{ flex-shrink:0; margin-top:2px; color:var(--accent); }

.cierre-sena{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:17px;
}
.cierre-sena-etiqueta{ color:var(--muted); }
.cierre-explicacion{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.cierre-explicacion-ok{ color:var(--text-body); }
.cierre-explicacion-ok .cierre-firmado-icono{ margin-top:3px; }

.cierre-vacio{ align-items:flex-start; padding:0; text-align:left; }
.cierre-vacio .vacio-texto{ max-width:520px; }

/* =========================== Tablet =========================== */
@media (max-width: 1199px){
  .cierre{ padding-top:56px; padding-bottom:64px; gap:40px; }
  .cierre-idioma{ top:20px; right:var(--gutter); }
  .cierre-main{ gap:40px; }
  .cierre-grilla{ grid-template-columns:minmax(0, 1fr); gap:48px; }
  .cierre-pasos{ max-width:720px; }
}

/* =========================== Celular (MCierre) =========================== */
@media (max-width: 767px){
  .cierre-celu{
    gap:22px;
    padding:8px 20px 48px;
  }
  .cierre-celu .cierre-para{ font-size:14px; }
  /* 56 px a 390 (MCierre) y un poco menos en pantallas de 360 */
  .cierre-celu .cierre-h1{ font-size:clamp(46px, 14.4vw, 56px); letter-spacing:-0.05em; }

  .cierre-celu .cierre-avisos{ gap:10px; }
  .cierre-celu .cierre-grilla{ gap:22px; }

  .cierre-celu .cierre-resumen{
    gap:14px;
    padding:20px;
    background:var(--surface);
  }
  .cierre-celu .cierre-resumen-titulo{ padding-bottom:10px; font-size:19px; }
  .cierre-celu .cierre-def{ grid-template-columns:110px minmax(0, 1fr); row-gap:12px; font-size:15px; }
  .cierre-celu .cierre-entregables{ line-height:1.55; }
  .cierre-celu .cierre-monto{ font-size:22px; }
  .cierre-celu .cierre-link-completa{ font-size:15px; }

  .cierre-celu .cierre-pasos{ gap:22px; max-width:none; }
  .cierre-celu .cierre-paso{ gap:14px; padding:20px; background:var(--surface); }
  .cierre-celu .cierre-paso-cabeza{ gap:12px; }
  .cierre-celu .cierre-paso-num{ font-size:18px; }
  .cierre-celu .cierre-paso-titulo{ font-size:20px; }
  .cierre-celu .cierre-link{ font-size:15px; }
  .cierre-celu .cierre-form{ gap:14px; }
  .cierre-celu .cierre-input.campo-control{ height:50px; padding:0 14px; font-size:16px; }
  .cierre-celu .cierre-check{ font-size:15px; }
  .cierre-celu .cierre-check input{ width:20px; height:20px; }
  .cierre-celu .cierre-btn.btn{ height:52px; }
  .cierre-celu .cierre-sena{ font-size:15px; }
  .cierre-celu .cierre-explicacion{ font-size:14px; }
  .cierre-celu .cierre-pagar.btn-borde{ background:var(--surface); }
  .cierre-celu .cierre-pagar.btn-borde:disabled{ background:var(--surface); }
  .cierre-celu .cierre-firmado{ font-size:15px; }
}