/* ev-tasacion.css — /tasacion en el sistema A+B. Viste el formulario de siempre (mismos IDs y clases que usa su script:
   .form-step.active, .f-field.has-error, .progress-step.active/.done, .btn-form-*, .loading) y compone la página con los
   componentes de ev.css. Sin animaciones en la zona del formulario. */

/* Portada */
.escena--tasacion { min-height: min(92svh, 880px); }
.escena--tasacion h1 { max-width: 14ch; }
.tas-etiqueta { font-size: .95rem; color: rgba(255, 255, 255, .9); }
.hero-scroll { color: rgba(255, 255, 255, .86); font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; justify-self: start; }
.hero-scroll.oculto { visibility: hidden; }
.tas-confianza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); padding-bottom: var(--e-6); }
.tas-confianza > * { display: grid; gap: var(--e-1); align-content: start; text-decoration: none; color: inherit; }
.tas-confianza strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-5); line-height: 1; }
.tas-confianza span { color: var(--tinta-2); font-size: .95rem; }

/* Cifras y proceso */
.tas-cifras > div { display: grid; grid-template-rows: 1fr auto; }
.tas-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
.tas-pasos li { counter-increment: paso; display: grid; gap: var(--e-3); align-content: start; padding-top: var(--e-4); border-top: 1px solid var(--tinta); }
.tas-pasos li::before { content: counter(paso); font-family: var(--serif); font-size: var(--t-4); line-height: 1; color: var(--azul); }
.tas-pasos h3 { font-size: var(--t-2); }
.tas-pasos p { margin: 0; color: var(--tinta-2); }

/* Informe */
.tas-incluye strong { display: block; color: var(--tinta); font-weight: 600; }
.tas-informe { margin: 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-foto); padding: var(--e-5); }
.tas-informe img { width: 100%; height: auto; }

/* Respaldo (sobre tinta): título y bajada lado a lado; tres columnas cortas bajo una línea fina */
.tas-respaldo .banda__resto { padding-block: var(--e-9); }
.tas-respaldo .seccion__cabeza { display: block; margin-bottom: var(--e-8); }
.tas-respaldo .seccion__cabeza > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: end; }
.tas-respaldo .titulo-seccion { max-width: 20ch; }
.tas-respaldo .bajada { max-width: 44ch; font-size: 1.2rem; }
.tas-respaldo .beneficios { gap: var(--e-7); }
.tas-respaldo .beneficios > div { border-top: 1px solid rgba(233, 237, 243, 0.24); padding-top: var(--e-5); display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--e-3); }
.tas-respaldo .beneficios h3 { color: #fff; font-size: var(--t-3); line-height: 1.2; margin: 0; }
.tas-respaldo .beneficios p { color: var(--sobre-tinta-2); font-size: 1.05rem; max-width: 34ch; }

/* Formulario: panel de papel */
.tas-form { align-items: start; }
.form-card { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-foto); padding: var(--e-6); display: grid; gap: var(--e-4); scroll-margin-top: calc(var(--ev-header-h) + 16px); }
.form-progress { display: flex; align-items: center; gap: var(--e-3); font-size: .92rem; color: var(--tinta-3); }
.progress-step { display: flex; align-items: center; gap: var(--e-2); }
.progress-step span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linea-fuerte); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-step.active { color: var(--tinta); font-weight: 600; }
.progress-step.active span { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.progress-step.done span { background: var(--exito-suave); border-color: var(--exito); color: var(--exito); }
.progress-line { flex: 1; height: 1px; background: var(--linea); }
.form-step { display: none; gap: var(--e-4); }
.form-step.active { display: grid; }
.form-step h3 { font-size: var(--t-3); }
.form-step > p { margin: 0; color: var(--tinta-2); }
.f-field { display: grid; gap: var(--e-2); }
.f-field label { font-size: .95rem; font-weight: 500; }
.f-field .req { color: var(--error); }
.f-field select, .f-field input, .f-field textarea, #tas-comentarios {
  width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4) !important; font: inherit; font-size: 16px !important; color: var(--tinta) !important;
  background: #fff !important; border: 1px solid var(--linea-fuerte) !important; border-radius: var(--r-control) !important;
  transition: border-color var(--d-micro) var(--curva), box-shadow var(--d-micro) var(--curva);
}
.f-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313213A' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.f-field select:focus, .f-field input:focus, .f-field textarea:focus { outline: none; border-color: var(--azul) !important; box-shadow: 0 0 0 3px var(--azul-suave); }
.f-error { display: none; color: var(--error); font-size: .9rem; }
.f-field.has-error .f-error { display: block; }
.f-field.has-error select, .f-field.has-error input, .f-field .error { border-color: var(--error) !important; }
#zona-no-atendida > div { background: var(--papel-2) !important; border: 1px solid var(--linea) !important; border-radius: var(--r-control) !important; }
#zona-no-atendida p { color: var(--tinta-2) !important; }
.btn-form-next, .btn-form-submit, .btn-form-back, .btn-success-wpp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5);
  border-radius: var(--r-control); border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; width: 100%;
}
.btn-form-next, .btn-form-submit, .btn-success-wpp { background: var(--tinta); color: var(--papel); }
.btn-form-next:hover, .btn-form-submit:hover, .btn-success-wpp:hover { background: #1F3256; }
.btn-form-back { background: transparent; color: var(--tinta-2); border-color: var(--linea-fuerte); }
.btn-form-submit .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; }
.btn-form-submit.loading .spinner { display: inline-block; animation: tas-gira .8s linear infinite; }
.btn-form-submit.loading { opacity: .8; cursor: progress; }
@keyframes tas-gira { to { transform: rotate(360deg); } }
.btn-success-wpp svg { width: 18px; height: 18px; }
.success-state { display: grid; gap: var(--e-3); padding: var(--e-5); background: var(--exito-suave); border-radius: var(--r-control); }
.success-state h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; color: var(--exito); }
.success-state p { margin: 0; }
.success-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--exito); color: #fff; }
.success-icon svg { width: 22px; height: 22px; }

@media (max-width: 960px) {
  .tas-respaldo .seccion__cabeza > div { grid-template-columns: 1fr; gap: var(--e-4); }
  .tas-respaldo .beneficios { grid-template-columns: 1fr; gap: var(--e-6); }
  .tas-respaldo .titulo-seccion, .tas-respaldo .beneficios p { max-width: none; }
  .tas-respaldo .bajada { font-size: 1.1rem; }
  .tas-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tas-confianza { grid-template-columns: 1fr 1fr 1fr; gap: var(--e-4); }
  .tas-confianza strong { font-size: var(--t-4); }
}
@media (max-width: 700px) {
  .tas-respaldo .banda__resto { padding-block: var(--e-8); }
  .tas-respaldo .seccion__cabeza { margin-bottom: var(--e-7); }
  .escena--tasacion { --foto-m: 66svh; }
  .tas-confianza { grid-template-columns: 1fr; gap: var(--e-4); padding-bottom: var(--e-5); }
  .tas-confianza strong { font-size: var(--t-3); }
  .tas-pasos { grid-template-columns: 1fr; gap: var(--e-5); }
  .form-card { padding: var(--e-5); margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; }
  .hero-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn-form-submit.loading .spinner { animation: none; } }

/* los campos de calificación van en un div propio que el script muestra u oculta con style.display */
#campos-calificacion, #zona-no-atendida { display: grid; gap: var(--e-4); }