/* 98 · Brief guiado. Prefijo ct98-. Usa --signal (terracota) de acento.css. */
.ct98 { --terra-claro: #efe5df; --terra-oscuro: #6e3f2f; --mesa: #e6e4df; --grafito: #3a3835; padding-bottom: var(--sec); }
.ct98-eye { margin: 0 0 var(--s-2); color: var(--signal); font: 500 .75rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ct98-eye-form { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-strong); }

.ct98-top { row-gap: var(--s-4); align-items: start; }
@media (min-width: 900px) {
  .ct98-top > .ct98-lista { grid-column: 1 / span 7; }
  .ct98-top > .ct98-zona { grid-column: 8 / -1; }
}

/* lista de verificación */
.ct98-lista { border: 0; padding: 0; margin: 0; min-width: 0; }
.ct98-lista legend { padding: 0; float: left; width: 100%; }
.ct98-lista legend + ul { clear: both; }
.ct98-lista ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ct98-lista li { border-bottom: 1px solid var(--line); }
.ct98-lista label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 12px; cursor: pointer; transition: background var(--ease); }
.ct98-lista label:hover { background: #f7f2ef; }
.ct98-lista label:has(input:checked) { background: var(--terra-claro); }
.ct98-lista input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--signal); cursor: pointer; }
.ct98-lista input:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.ct98-lista span { display: grid; gap: 2px; }
.ct98-lista strong { font-weight: 500; }
.ct98-lista small { font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.ct98-lista label:has(input:checked) small { color: var(--terra-oscuro); }

/* zona de arrastre: el input real queda en el DOM, oculto solo visualmente */
.ct98-drop { position: relative; }
.js .ct98-drop input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.ct98-drop label {
  display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; min-height: 15rem; padding: var(--s-3);
  border: 2px dashed var(--signal); border-radius: 4px; background: var(--terra-claro); color: var(--terra-oscuro); cursor: pointer;
  transition: background var(--ease);
}
.ct98-drop label:hover, .ct98-drop.arrastre label { background: #e6d6cd; border-style: solid; }
.ct98-drop input:focus-visible + label { outline: 3px solid var(--fg); outline-offset: 3px; }
.ct98-drop-t { font-size: var(--t-1); font-weight: 500; color: var(--fg); }
.ct98-drop-s { font-size: var(--t-small); }
.ct98-ico { width: 44px; height: 44px; border: 2px solid var(--signal); border-radius: 50%; position: relative; }
.ct98-ico::before, .ct98-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--signal); transform: translate(-50%, -50%); }
.ct98-ico::before { width: 16px; height: 2px; }
.ct98-ico::after { width: 2px; height: 16px; }
.ct98-ayuda { margin: var(--s-1) 0 0; font-size: var(--t-cap); color: var(--muted); }
.ct98-estado { margin: var(--s-2) 0 0; font-size: var(--t-small); font-weight: 500; }
.ct98-archivos { list-style: none; margin: var(--s-1) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ct98-archivos:empty { display: none; }
.ct98-archivos li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.ct98-archivos .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ct98-archivos .t { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct98-archivos button { flex: none; min-height: 32px; padding: 4px 10px; background: transparent; border: 1px solid var(--fg); color: var(--fg); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.ct98-archivos button:hover { background: var(--fg); color: #fff; }
.ct98-archivos button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* resumen en vivo */
.ct98-resumen { background: var(--terra-claro); padding: var(--s-3); border-left: 4px solid var(--signal); }
.ct98-resumen .ct98-eye { color: var(--terra-oscuro); margin-bottom: 8px; }
.ct98-res p { margin: 0; max-width: 62ch; }
.ct98-res ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.ct98-res li::marker { color: var(--signal); }

/* campos con recuadro visible (sobrescribe la línea inferior de estilos.css) */
.ct98 .campo label { color: var(--fg); margin-bottom: 6px; font-weight: 500; }
.ct98 .campo.check label { margin: 0; font-weight: 400; }
.ct98 .campo input:not([type="checkbox"]), .ct98 .campo select, .ct98 .campo textarea {
  display: block; width: 100%; min-height: 44px; padding: 12px 14px; background: #fff; color: var(--fg);
  border: 1px solid rgb(58 56 53 / .4); border-radius: 4px; font: inherit; font-size: var(--t-0); line-height: 1.4;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ct98 .campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--grafito) 50%), linear-gradient(135deg, var(--grafito) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.ct98 .campo input[type="date"] { min-height: 44px; }
.ct98 .campo textarea { min-height: 8rem; resize: vertical; }
.ct98 .campo input:not([type="checkbox"]):hover, .ct98 .campo select:hover, .ct98 .campo textarea:hover { border-color: var(--grafito); }
.ct98 .campo input:not([type="checkbox"]):focus, .ct98 .campo select:focus, .ct98 .campo textarea:focus {
  outline: none; border: 2px solid var(--signal); padding: 11px 13px; box-shadow: none;
}
.ct98 .campo select:focus { padding-right: 39px; }
.ct98 .campo [aria-invalid="true"]:not([type="checkbox"]) { border: 2px solid var(--terra-oscuro); padding: 11px 13px; }
.ct98 .campo select[aria-invalid="true"] { padding-right: 39px; }
.ct98 .campo .error { margin-top: 6px; color: var(--terra-oscuro); font-weight: 500; }
.ct98 .campo .error::before { color: var(--terra-oscuro); }
.ct98 .check input:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.ct98 .campo.check { flex-wrap: wrap; }
.ct98 .campo.check label { flex: 1 1 0; min-width: 0; }   /* el texto ocupa el resto de la línea; la casilla no salta arriba */
.ct98 .campo.check .error { flex: 1 0 100%; margin: 4px 0 0 32px; }
/* sin JS: el input de archivo nativo también con recuadro */
.ct98-drop input[type="file"] { width: 100%; min-height: 44px; padding: 10px 14px; background: #fff; border: 1px solid rgb(58 56 53 / .4); border-radius: 4px; font: inherit; }
.js .ct98-drop input[type="file"] { width: 1px; min-height: 0; padding: 0; border: 0; border-radius: 0; }
.ct98 .check input { accent-color: var(--signal); }
.ct98 .campo a, .ct98-pie a { text-decoration-color: var(--signal); text-underline-offset: 3px; }
.ct98 .campo a:hover, .ct98-pie a:hover { text-decoration-thickness: 2px; }

.ct98-pie { margin-top: var(--sec); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); row-gap: var(--s-3); }
@media (min-width: 900px) { .ct98-pie > .garantias { grid-column: 1 / span 5; } .ct98-pie > .contacto-datos { grid-column: 8 / -1; margin-top: 0; } }
/* en móvil, la raya superior de la lista duplica la del pie del formulario y parece una fila vacía */
@media (max-width: 899px) { .ct98-pie .garantias li:first-child { border-top: 0; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .ct98 * { transition: none !important; } }

/* envío real: campo trampa (fuera de pantalla, no display:none), barra de progreso y mensaje de error */
.ct98-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct98-envio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ct98-envio { flex: 1 1 18rem; min-width: 0; max-width: 32rem; }
.ct98-envio p { margin: 6px 0 0; font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.ct98-envio progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: #e6e4df; accent-color: var(--signal); }
.ct98-envio progress::-webkit-progress-bar { background: #e6e4df; }
.ct98-envio progress::-webkit-progress-value { background: var(--signal); }
.ct98-envio progress::-moz-progress-bar { background: var(--signal); }
.ct98 .btn[disabled] { opacity: .6; cursor: progress; }
.ct98-error { margin: 0; padding: var(--s-2) var(--s-3); background: #fbeee9; border-left: 4px solid var(--signal); color: var(--terra-oscuro); font-weight: 500; max-width: 62ch; }
.ct98-error:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.ct98-error a { color: inherit; text-decoration-color: var(--signal); }
.ct98-archivos .estado { flex: none; color: var(--muted); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.ct98-archivos li.fallo .estado { color: var(--terra-oscuro); font-weight: 500; }