:root{
  --tm-accent: #ba101b;
  --tm-ink: #111827;
  --tm-muted: #6b7280;
  --tm-surface: #ffffff;
  --tm-surface-2: #f6f7f9; /* gris muy suave */
  --tm-border: rgba(17, 24, 39, .10);
}

.tm-header-light{
  background: var(--tm-surface);
  position: sticky; /* opcional: déjalo si te sirve */
  top: 0;
  z-index: 50;
}

/* línea roja fina arriba (detalle institucional) */
.tm-accent-line{
  height: 4px;
  background: var(--tm-accent);
}

/* separación con el contenido (esto es lo clave) */
.tm-header-light{
  border-bottom: 1px solid var(--tm-border);
  box-shadow: 0 10px 25px rgba(17,24,39,.08);
}

/* layout */
.tm-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1rem 0;
}

/* logo */
.tm-brand{
  cursor: pointer;
}
.tm-brand img{
  max-height: 62px;
  width:auto;
}


/* CTA sobrio, moderno */
.tm-cta{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.75rem 1rem;
  border-radius: 14px;
  text-decoration:none;
  color: var(--tm-ink);
  background: var(--tm-surface-2);
  border: 1px solid rgba(17,24,39,.08);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.tm-cta i{ font-size: 1.35rem; color: var(--tm-accent); }

.tm-cta span{ display:block; font-weight: 800; line-height: 1.1; }
.tm-cta small{ display:block; color: var(--tm-muted); margin-top:.15rem; }

.tm-cta:hover{
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 10px 20px rgba(17,24,39,.10);
}

/* responsive */
@media (max-width: 768px){
  .tm-header-inner{ flex-direction: column; text-align:center; }
  .tm-cta{ width:100%; justify-content:center; }
}