/* ==========================================================================
   DIGITAL FEEDBACK — TRIAGE B2B MULTI-STEP CSS v2.0
   Dark-Tech Aesthetic · High-Legibility Typography · WCAG AA Conformance
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800;900&display=swap');

:root {
  --df-triage-bg: #0A0A0A;
  --df-triage-card-bg: rgba(18, 18, 18, 0.94);
  --df-triage-input-bg: rgba(10, 10, 10, 0.90);
  --df-triage-border: rgba(255, 255, 255, 0.12);
  --df-triage-border-focus: #00FF00;
  --df-triage-accent: #00FF00;
  --df-triage-text: #EDEDED;
  --df-triage-text-muted: #A0A0A0;
  --df-triage-placeholder: #888888;
  --df-triage-warning-bg: rgba(255, 184, 0, 0.08);
  --df-triage-warning-border: rgba(255, 184, 0, 0.35);
  --df-triage-warning-text: #FFB800;
  --df-triage-error-bg: rgba(255, 77, 77, 0.10);
  --df-triage-error-border: #FF4D4D;
  --df-triage-error-text: #FF8585;
  --df-triage-glow: 0 0 20px rgba(0, 255, 0, 0.25);
  --df-triage-glow-btn: 0 0 25px rgba(0, 255, 0, 0.45);
  --df-triage-radius: 8px;
  --df-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --df-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.df-triage-section {
  background-color: var(--df-triage-bg);
  padding: clamp(3rem, 6vw, 6rem) 1.5rem;
  border-top: 1px solid var(--df-triage-border);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.df-triage-container {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.df-triage-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.df-triage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--df-font-body) !important;
  font-size: 12.5px;
  font-weight: 700 !important;
  color: var(--df-triage-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}
.df-triage-kicker::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-triage-accent);
  box-shadow: 0 0 8px var(--df-triage-accent);
}

.df-triage-title {
  font-family: var(--df-font-display) !important;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--df-triage-text);
  margin: 0 0 1rem 0;
}
.df-triage-title em { font-style: normal; color: var(--df-triage-accent); }

.df-triage-subtitle {
  font-family: var(--df-font-body) !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--df-triage-text-muted);
  max-width: 580px;
  margin: 0 auto;
}

.df-triage-card {
  background: var(--df-triage-card-bg);
  border: 1px solid var(--df-triage-border);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-sizing: border-box;
}

/* ── Progress Bar ────────────────────────────────────────── */
.df-progress-container { margin-bottom: 2.25rem; }
.df-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-family: var(--df-font-body) !important;
  font-size: 13.5px;
}
.df-progress-step-title { color: var(--df-triage-text); font-weight: 600 !important; letter-spacing: 0.02em; }
.df-progress-counter { color: var(--df-triage-accent); font-family: var(--df-font-display) !important; font-weight: 700 !important; letter-spacing: 0.05em; }
.df-progress-track { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; position: relative; }
.df-progress-fill {
  height: 100%;
  width: 33.333%;
  background: var(--df-triage-accent);
  box-shadow: 0 0 10px var(--df-triage-accent);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Step Container & Transitions ───────────────────────── */
.df-triage-step { display: none; }
.df-triage-step.df-active { display: block; }
.df-fade-in { animation: dfStepFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes dfStepFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.df-step-heading {
  font-family: var(--df-font-display) !important;
  font-size: 20px;
  font-weight: 600 !important;
  color: var(--df-triage-text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Form Grid & Inputs ──────────────────────────────────── */
.df-form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px) {
  .df-form-grid-2 { grid-template-columns: 1fr 1fr; }
}

.df-form-group { display: flex; flex-direction: column; gap: 0.5rem; box-sizing: border-box; }
.df-form-group label {
  font-family: var(--df-font-body) !important;
  font-size: 14px;
  font-weight: 600 !important;
  color: var(--df-triage-text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.df-form-group label span.req { color: var(--df-triage-accent); margin-left: 2px; }

.df-input, .df-select, .df-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--df-triage-input-bg);
  border: 1px solid var(--df-triage-border);
  border-radius: var(--df-triage-radius);
  color: var(--df-triage-text);
  font-family: var(--df-font-body) !important;
  font-size: 16px;
  font-weight: 500 !important;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.df-input::placeholder, .df-textarea::placeholder { color: var(--df-triage-placeholder); opacity: 1; }
.df-input:focus, .df-select:focus, .df-textarea:focus {
  border-color: var(--df-triage-border-focus);
  box-shadow: var(--df-triage-glow);
  background: rgba(0, 0, 0, 0.95);
}

.df-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
.df-select option { background: #111111; color: #EDEDED; padding: 0.5rem; }
.df-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }

/* ── Soft Advisory Email Warning (Cyber Amber) ───────────── */
.df-email-warning {
  display: none;
  background: var(--df-triage-warning-bg);
  border: 1px solid var(--df-triage-warning-border);
  color: var(--df-triage-warning-text);
  font-family: var(--df-font-body) !important;
  font-size: 13px;
  line-height: 1.45;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  margin-top: 0.4rem;
}
.df-email-warning.is-visible { display: flex; align-items: flex-start; gap: 0.5rem; }
.df-email-warning span { flex-shrink: 0; font-size: 15px; line-height: 1.3; }

/* ── Form Actions & Buttons ──────────────────────────────── */
.df-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.df-btn-next, .df-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--df-triage-accent);
  color: #000000;
  font-family: var(--df-font-display) !important;
  font-size: 15px;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: var(--df-triage-radius);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  margin-left: auto;
}
.df-btn-next:hover, .df-btn-submit:hover {
  background: #26ff26;
  box-shadow: var(--df-triage-glow-btn);
  transform: translateY(-1px);
}
.df-btn-next:active, .df-btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.3);
}
.df-btn-next:focus-visible, .df-btn-submit:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}
.df-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.df-btn-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--df-triage-text-muted);
  font-family: var(--df-font-display) !important;
  font-size: 14px;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--df-triage-radius);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.df-btn-prev:hover { border-color: var(--df-triage-accent); color: var(--df-triage-accent); }
.df-btn-prev:active { transform: translateY(0); }
.df-btn-prev:focus-visible { outline: 2px solid var(--df-triage-accent); outline-offset: 3px; }

.df-btn-loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-top-color: #000000;
  animation: dfSpin 0.7s linear infinite;
}
@keyframes dfSpin { to { transform: rotate(360deg); } }

/* ── Success State ───────────────────────────────────────── */
.df-triage-success { display: none; text-align: center; padding: 2.5rem 1rem; }
.df-triage-success.df-active { display: block; }
.df-success-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.1);
  border: 2px solid var(--df-triage-accent);
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.df-success-icon-wrap svg { width: 34px; height: 34px; stroke: var(--df-triage-accent); }
.df-success-title {
  font-family: var(--df-font-display) !important;
  font-size: 28px;
  font-weight: 700 !important;
  color: var(--df-triage-text);
  margin-bottom: 1rem;
}
.df-success-body {
  font-family: var(--df-font-body) !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--df-triage-text-muted);
  max-width: 520px;
  margin: 0 auto 1.5rem auto;
}
.df-success-badge {
  display: inline-block;
  font-family: var(--df-font-body) !important;
  background: rgba(0, 255, 0, 0.08);
  border: 1px solid rgba(0, 255, 0, 0.25);
  color: var(--df-triage-accent);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}

/* ── Error & Validation States ───────────────────────────── */
.df-hidden { display: none !important; }
.df-form-error-msg {
  display: none;
  background: var(--df-triage-error-bg);
  border: 1px solid var(--df-triage-error-border);
  color: var(--df-triage-error-text);
  font-family: var(--df-font-body) !important;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 1.25rem;
  text-align: center;
}
.df-input.has-error, .df-select.has-error, .df-textarea.has-error {
  border-color: var(--df-triage-error-border) !important;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.3) !important;
}

/* ── Mobile Viewport Overrides (<480px) ──────────────────── */
@media (max-width: 480px) {
  .df-triage-card { padding: 1.25rem 1rem; }
  .df-step-actions { flex-direction: column-reverse; gap: 0.75rem; }
  .df-btn-next, .df-btn-submit, .df-btn-prev {
    width: 100%;
    margin-left: 0;
    padding: 0.85rem 1.25rem;
    font-size: 15px;
    box-sizing: border-box;
  }
}

/* ── Reduced Motion Accessibility ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .df-fade-in, .df-progress-fill, .df-btn-next, .df-btn-submit, .df-btn-prev, .df-btn-loader {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   CALIBRACIÓN TIPOGRÁFICA EN PX REALES (1rem = 10px en Bricks Builder)
   Garantiza lectura descansada en etiquetas, pasos y controles (inputs a 16px
   para prevenir además el auto-zoom forzado de iOS Safari al tocar campos).
   ========================================================================== */
.df-triage-section{padding:clamp(48px,6vw,80px) 20px;}
.df-triage-header{margin-bottom:32px;}
.df-triage-kicker{font-size:12px;margin-bottom:10px;}
.df-triage-title{font-size:clamp(26px,3.8vw,38px);margin:0 0 12px;}
.df-triage-subtitle{font-size:16px;color:#CBD5E1;max-width:600px;}
.df-triage-card{padding:clamp(22px,3.5vw,38px);border-radius:16px;}
.df-progress-container{margin-bottom:26px;}
.df-progress-header{font-size:13.5px;margin-bottom:10px;}
.df-step-heading{font-size:18.5px;margin-bottom:20px;padding-bottom:10px;}
.df-form-grid{gap:18px;}
.df-form-group{gap:7px;}
.df-form-group label{font-size:14px;color:#F1F5F9;}
.df-input,.df-select,.df-textarea{font-size:16px;padding:12px 15px;border-radius:10px;}
.df-select{background-position:right 14px center;background-size:16px;padding-right:38px;}
.df-email-warning,.df-form-error-msg{font-size:13.5px;padding:10px 14px;}
.df-step-actions{margin-top:26px;padding-top:20px;gap:14px;}
.df-btn-next,.df-btn-submit{font-size:14.5px;padding:13px 24px;border-radius:10px;}
.df-btn-prev{font-size:13.5px;padding:12px 18px;border-radius:10px;}
.df-success-title{font-size:24px;margin-bottom:12px;}
.df-success-body{font-size:15.5px;color:#CBD5E1;max-width:540px;}
.df-success-badge{font-size:13px;padding:6px 14px;}