/*
 * paginas-formularios.css
 * Composición de la Calculadora IMC (resultado con escala) y Contacto.
 */

/* Calculadora IMC */
.imc-grid,
.contacto-grid {
  display: grid;
  gap: var(--espacio-4);
}

.imc-formulario,
.formulario {
  max-width: 560px;
}

.imc-resultado {
  align-self: start;
  padding: var(--espacio-3);
  background: var(--gris);
  border-radius: var(--radio-m);
}

.imc-espera {
  margin: 0;
  color: var(--gris-texto);
}

.imc-valor {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
}

.imc-categoria {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 600;
}

/* Escala: el marcador se mueve con la variable --posicion que pone imc.js */
.imc-escala {
  position: relative;
  display: grid;
  grid-template-columns: 18.5fr 6.5fr 5fr 10fr;
  height: 12px;
  margin: var(--espacio-3) 0 var(--espacio-1);
  background: var(--gris-borde);
}

.imc-escala span + span {
  border-left: 2px solid var(--blanco);
}

.imc-marcador {
  position: absolute;
  top: -8px;
  left: var(--posicion, 0%);
  width: 6px;
  height: 28px;
  background: var(--naranja);
  transform: translateX(-50%) skewX(var(--inclinacion));
  transition: left 300ms ease-out;
}

.imc-escala-textos {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--espacio-3);
  font-size: 0.875rem;
  color: var(--gris-texto);
}

.imc-sugerencia {
  padding-top: var(--espacio-2);
  border-top: 2px solid var(--gris-borde);
}

.tabla-angosta {
  min-width: 0;
  max-width: 480px;
}

@media (min-width: 1024px) {
  .imc-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contacto-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}