.demo-economia-section {
  position: relative;
}

.demo-economia-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Overlay for better text readability */
  z-index: 1;
}

.demo-economia-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;

  width: clamp(340px, 36vw, 620px);
  max-width: calc((100vw - 1140px) / 2 + 140px);

  aspect-ratio: 1 / 1;
  height: auto;

  right: 0;
  top: clamp(24px, 6vh, 80px);

  background-image: url("/static/img/demo/diesel.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.demo-economia-section .container {
  position: relative;
  z-index: 2;
}

.demo-form-wrapper {
  max-width: 80vw;
  margin: 0 auto;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.1);
  position: relative;
}

#demoForm {
  position: relative;
  z-index: 2;
}

/* Validação de inputs (Bootstrap) */
.form-control.is-invalid {
  border-color: #dc3545;
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid {
  border-color: #198754;
}

.form-control.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}


/* CTA-style reveal for the page title */
.card-title .cta-underline {
  display: inline-block;
  background: linear-gradient(90deg,#00b3a4,#3a434d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: color 300ms ease;
}

/* trigger the CTA underline animation when the element is revealed */
.reveal.is-revealed .cta-underline {
  animation: cta-slide-in 700ms cubic-bezier(.2,.8,.2,1) both;
}
.reveal.is-revealed .cta-underline::after {
  transform: scaleX(1);
}

/* Título do bloco */
.lead-block .block-title,
.fleet-block .block-title {
  color: var(--primary);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.text-muted {
  color: #686b6e !important;
  font-size: 1.2rem;
  padding-top: 5px;
}

/* Labels dos inputs */
.lead-block .form-label,
.fleet-block .form-label {
  color: #4b5563; /* cinza escuro elegante */
  font-weight: 600;
}


.lead-block .form-control::placeholder,
.fleet-block .form-control::placeholder {
  color: #9aa3ad;
}

/* BOX INFORMATIVO PARA CADA INPUT */
.label-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Tooltip container */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #6b7280;
  border: 2px solid rgba(107,114,128,0.6);
  border-radius: 50%;
  user-select: none;
}

/* Hover feedback */
.info-tooltip:hover {
  color: #00b3a4;
  border-color: #00b3a4;
}

/* Tooltip - TEXTO (já existente, mantemos igual) */
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1f2937;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

/* Setinha */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

/* Exibir tooltip */
.info-tooltip:hover .tooltip-content,
.info-tooltip:focus .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.demo-economia-header{ 
  margin-top: 6px; 
  position: relative; 
  z-index: 1300; 
}

.demo-economia-title{ 
  font-size: 2.5rem; 
  margin-bottom: 0.25rem; 
}

.cta-underline1{
  display: inline-block;
  background: var(--white);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: color 300ms ease;
}

.demo-economia-subtitle{ 
  margin-top: 25px; 
  margin-bottom: 8px; 
  color: var(--white); 
}




/* OVERLAY DE RESULTADO */
.result-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.overlay-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.result-block {
  padding: 12px;
  margin-top: 10px;
}

/* Painel responsivo: limitar altura e permitir rolagem interna */
.result-panel{
  position: relative;
  z-index: 2;
  max-width: 980px;
  width: calc(100% - 40px);
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.result-panel .card {
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  height: 100%;
  min-height: 120px; /* garantir tamanho mínimo */
}


.result-panel .card .card-body {
  text-align: center;
}

.result-panel .btn-fale-conosco{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-block;
  margin-bottom: 0;
  padding: 0.35rem 0.7rem;
}

.result-panel .btn-link{
  color: #333;
  font-weight: 600;
  padding: 0;
}

.result-panel .result-title{
  font-size: 2.5rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0.25rem 0 1rem 0;
}

.result-panel .btn-fale-conosco{
  display: inline-block;
  margin-bottom: 0.6rem;
}

.atual-block {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border-radius: 8px;
  transform: scale(0.95);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
  margin-bottom: 20px;
}

.block-title-atual {
  color: #856404;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.1em;
}

.valor-atual{
  color: #856404;
  font-weight: 700;
}

.esperados-block {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}

.block-title-esperados {
  color: #155724;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.valor-esperado{
  color: #155724;
  font-weight: 700;
}

/* Destaques criativos */
.destaque-media {
  background: linear-gradient(135deg, #b2d1b9, #96c6a1);
  border: 3px solid #0f5132;
  position: relative;
  overflow: hidden;
}

.destaque-media::before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2em;
  opacity: 0.3;
}

.valor-media-destaque {
  color: #0f5132;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  animation: pulse 2s infinite;
}

.destaque-economia {
  background: linear-gradient(135deg, #b2d1b9, #96c6a1);
  border: 3px solid #0f5132;
  position: relative;
  overflow: hidden;
}

.destaque-economia::before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2em;
  opacity: 0.3;
}

.valor-economia-destaque {
  color: #856404;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  animation: bounce 2s infinite;
}

@keyframes bounce{
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.result-panel .row:last-child .card{
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
  border-color: rgba(0,179,164,0.25);
}

.valor-esperado-gritante {
  color: #ffffff;
  background: #0f5132; /* verde mais escuro */
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-weight: 800;
  font-size: 2.25rem;
  box-shadow: 0 10px 26px rgba(15, 81, 50, 0.3);
  animation: zoom-scale 2s ease-in-out infinite;
}

@keyframes zoom-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}


@media (max-width: 580px) {
  /* SEÇÃO PRINCIPAL */
  .demo-economia-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .demo-economia-decor {
    display: none; /* Esconder decoração em telas pequenas */
  }

  /* HEADER */
  .demo-economia-header {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .demo-economia-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .demo-economia-subtitle {
    font-size: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* FORMULÁRIO */
  .demo-form-wrapper {
    max-width: 95vw;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }

  #demoForm .row {
    gap: 0.5rem !important;
  }

  /* BLOCOS DE FORMULÁRIO */
  .lead-block,
  .fleet-block {
    margin-bottom: 1rem;
  }

  .lead-block .block-title,
  .fleet-block .block-title {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }

  /* INPUTS */
  .form-control {
    font-size: 16px; /* Evita zoom automático em inputs no iOS */
    padding: 0.5rem 0.75rem;
  }

  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  .text-muted {
    font-size: 0.85rem;
    padding-top: 2px;
  }

  /* TOOLTIP */
  .label-with-tooltip {
    gap: 6px;
  }

  .info-tooltip {
    width: 16px;
    height: 16px;
    font-size: 11px;
    margin-left: 4px;
  }

  .tooltip-content {
    font-size: 0.75rem;
    padding: 8px 10px;
    bottom: calc(100% + 8px);
    white-space: normal;
    max-width: 150px;
    left: 0;
    transform: translateX(0) translateY(6px);
  }

  .tooltip-content::after {
    border-width: 5px;
  }

  .info-tooltip:hover .tooltip-content,
  .info-tooltip:focus .tooltip-content {
    transform: translateX(0) translateY(0);
  }

  /* BOTÃO CALCULAR */
  .fleet-block button[type="submit"] {
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    width: 100%;
  }

  /* ===== OVERLAY DE RESULTADO ===== */
  .result-panel {
    max-width: 98vw;
    width: calc(100% - 8px);
    margin: 4px;
  }

  .result-panel .card-body {
    padding: 1rem 0.75rem;
  }

  .result-title {
    font-size: 1.5rem;
    margin: 0.5rem 0 0.8rem 0;
  }

  /* BLOCOS DE RESULTADO */
  .result-block {
    padding: 8px;
    margin-top: 8px;
  }

  .atual-block {
    transform: scale(1); /* Remover escala em mobile */
    margin-bottom: 1rem;
  }

  .block-title-atual,
  .block-title-esperados {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  /* CARDS DENTRO DO OVERLAY */
  .result-panel .card {
    min-height: 100px;
    margin-bottom: 0.8rem;
  }

  .result-panel .card .card-body {
    padding: 0.8rem;
  }

  .result-panel .card .card-subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.5rem !important;
  }

  .result-panel .card .card-body p {
    margin-bottom: 0;
  }

  /* VALORES */
  .valor-atual,
  .valor-esperado,
  .valor-media-destaque {
    font-size: 1.5rem;
  }

  .valor-esperado-gritante {
    font-size: 1.75rem;
    padding: 0.25rem 0.5rem;
    box-shadow: 0 6px 16px rgba(15, 81, 50, 0.25);
  }

  /* BOTÃO VOLTAR */
  .result-panel .btn-fale-conosco {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }

  /* DESTAQUES */
  .destaque-media,
  .destaque-economia {
    margin-bottom: 0.8rem;
  }

  .destaque-media::before,
  .destaque-economia::before {
    font-size: 1.5em;
    top: 8px;
    right: 8px;
  }

  /* GRID DE CARDS (2 colunas em 1) */
  .result-panel .row .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* VALIDAÇÃO */
  .field-error {
    font-size: 0.8rem;
  }

  .form-control.is-invalid,
  .form-control.is-valid {
    background-size: 1.5em 1.5em;
  }

  /* CTA DA SEÇÃO */
  .cta-modernize {
    padding: 1.5rem 0;
  }

  .cta-card {
    flex-direction: column;
    gap: 1rem;
  }

  .cta-card .cta-text h3 {
    font-size: 1.3rem;
  }

  .cta-card .cta-text p {
    font-size: 0.85rem;
  }

  .btn-cta {
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    width: 100%;
  }
}

/* ========================================= */
/* RESPONSIVIDADE ULTRA PEQUENA < 380px     */
/* ========================================= */
@media (max-width: 379.98px) {
  .demo-economia-title {
    font-size: 1.2rem;
    word-spacing: 100vw; /* Quebra cada palavra em nova linha */
  }

  .demo-economia-subtitle {
    font-size: 0.8rem;
  }

  .demo-form-wrapper {
    padding: 0.75rem;
  }

  .form-label {
    font-size: 0.8rem;
  }

  .lead-block .block-title,
  .fleet-block .block-title {
    font-size: 1rem;
  }

  .result-title {
    font-size: 1.2rem;
  }

  .block-title-atual,
  .block-title-esperados {
    font-size: 0.9rem;
  }

  .valor-atual,
  .valor-esperado,
  .valor-media-destaque {
    font-size: 1.2rem;
  }

  .valor-esperado-gritante {
    font-size: 1.5rem;
  }

  .form-control {
    font-size: 14px;
    padding: 0.4rem 0.6rem;
  }
}