/* ════════════════════════════════════════════════════════════════════════
   FLASH — herramientas: cotizador 3D.
   Se carga después de flash.css y del <style> propio de cada plantilla.
   ──────────────────────────────────────────────────────────────────────── */

/* Encabezado del cotizador con isologo 3D de fondo */
.cot-hero { position: relative; overflow: hidden; padding: 34px 0 10px; }
.cot-hero .tp-l3 { position: absolute; right: -4%; top: -30%; width: 46%; height: 160%; opacity: .5; --l3: min(26vw, 300px); pointer-events: none; }
.cot-hero > * { position: relative; z-index: 1; }
.page-title {
  font: 600 clamp(40px, 6vw, 92px)/.88 var(--font-display) !important; letter-spacing: -.07em !important; color: var(--ink) !important;
  margin: 14px 0 14px !important; text-align: left !important;
}
.page-title .o { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.page-subtitle { color: var(--ink-3) !important; max-width: 620px; text-align: left !important; font-size: 1rem !important; }

.cotizador-main .card {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  box-shadow: none !important; position: relative;
}
.cotizador-main .card h3 {
  font: 600 11px var(--font-body) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink) !important;
  display: flex; align-items: center; gap: 10px;
}
.cotizador-main .card h3 i { color: var(--ink) !important; }
.dropzone {
  border: 1.5px dashed var(--line-strong) !important; border-radius: 0 !important; background: var(--paper-2) !important;
  transition: border-color .3s, background .3s, transform .5s var(--ease) !important; position: relative;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--ink) !important; background: var(--surface-2) !important; transform: translateY(-2px); }
.dropzone.drag-over::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rb); background-size: 200% 100%; animation: rb-slide 3s linear infinite; }
.dropzone i { color: var(--ink) !important; }
.dropzone p { color: var(--ink-3) !important; }
.dropzone strong { color: var(--ink) !important; }
.cotizador-main .form-group label { font: 600 10px var(--font-body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3) !important; }
.cotizador-main .form-group select, .cotizador-main .form-group input {
  border-radius: 0 !important; background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
}
.viewer-container { border-radius: 0 !important; border: 1px solid var(--line) !important; background: radial-gradient(circle at 50% 40%, var(--surface-2), var(--paper)) !important; }
.results-grid { gap: 8px !important; }
.result-item { border-radius: 0 !important; background: var(--surface-2) !important; border: 1px solid var(--line) !important; }
.result-item .value { font: 500 1.5rem var(--font-display) !important; letter-spacing: -.03em; color: var(--ink) !important; }
.result-item .label { font: 600 9px var(--font-body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3) !important; }
.result-item.highlight { background: var(--ink) !important; border-color: var(--ink) !important; position: relative; }
.result-item.highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rb); }
.result-item.highlight .value, .result-item.highlight .label { color: var(--paper) !important; }
.progress-bar-wrap { border-radius: 0 !important; background: var(--line) !important; }
.progress-bar-fill { border-radius: 0 !important; background: var(--rb) !important; background-size: 200% 100% !important; animation: rb-slide 3s linear infinite; }
.status-badge { border-radius: 0 !important; font: 600 9px var(--font-body) !important; letter-spacing: .12em; text-transform: uppercase; }
.job-row { border-radius: 0 !important; border-bottom: 1px solid var(--line) !important; }
.job-row .job-cost { font-family: var(--font-display) !important; }
@media (max-width: 760px) { .cot-hero .tp-l3 { display: none; } }