/* ==========================================================================
   Vetra Ingeniería y Construcción SpA — Interacciones
   --------------------------------------------------------------------------
   Resaltado del menú (hover + sección activa) y animaciones de entrada.
   Los enlaces del nav llevan color inline, por eso el color activo necesita
   !important. Todo lo animado respeta prefers-reduced-motion.
   ========================================================================== */

/* ---- Menú: subrayado en hover y en la sección visible ---- */
header nav > a:not(.btn) {
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

header nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

header nav > a:not(.btn):hover::after,
header nav > a.is-active::after {
  transform: scaleX(1);
}

header nav > a.is-active {
  color: var(--color-accent-700) !important;
}

/* ==========================================================================
   Formulario: legibilidad de los desplegables
   --------------------------------------------------------------------------
   Los <select> están sobre el panel oscuro de "Solicitar reunión" y heredan
   texto casi blanco (#f5f5f8) con fondo transparente. Eso se ve bien en el
   control cerrado, pero el desplegable nativo de iOS y Android se dibuja
   sobre fondo claro: las opciones quedaban blanco sobre blanco y parecía
   que solo existía la primera. Se les fija color propio.
   ========================================================================== */
select.input option {
  color: var(--color-text);
  background-color: #ffffff;
}

/* El control cerrado sigue sobre el panel oscuro y mantiene el texto claro. */
select.input {
  color: var(--color-neutral-100) !important;
}

/* ---- Barras de precisión: crecen al entrar en pantalla ---- */
.js-bar {
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Cifras en conteo: ancho estable para que no salte el texto ---- */
.js-contador {
  font-variant-numeric: tabular-nums;
}

/* ---- Respeto por quienes prefieren menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  header nav > a:not(.btn)::after,
  .js-bar {
    transition: none;
  }
}